npm - @zohodesk/dot - Versions diffs - 1.0.0-temp-187.23 → 1.0.0-temp-187.24 - Mend

@zohodesk/dot 1.0.0-temp-187.23 → 1.0.0-temp-187.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1879) hide show

package/es/ActionButton/__tests__/__snapshots__/ActionButton.spec.js.snap DELETED Viewed

@@ -1,2673 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`ActionButton renders dataId prop with isLoading set to true 1`] = `
-<DocumentFragment>
-  <div
-    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
-    data-id="testDataId_actionButton"
-    data-selector-id="actionButton"
-    data-test-id="testDataId_actionButton"
-  >
-    <div
-      class="grow basis shrinkOff"
-      data-id="boxComponent"
-      data-selector-id="box"
-      data-test-id="boxComponent"
-    >
-      <button
-        class="btn bold primaryfilled medium loader"
-        data-id="buttonComp"
-        data-selector-id="button"
-        data-test-id="buttonComp"
-        disabled=""
-        type="button"
-      >
-        Button
-        <div
-          class="overlay"
-        >
-          <div
-            class="loading mediumloading"
-          >
-            <div
-              class="loadingelement primaryfilledelement"
-            />
-          </div>
-        </div>
-      </button>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-exports[`ActionButton renders with arrowBoxSize medium and children 1`] = `
-<DocumentFragment>
-  <div
-    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
-    data-id="actionButton_actionButton"
-    data-selector-id="actionButton"
-    data-test-id="actionButton_actionButton"
-  >
-    <button
-      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdr clickable   grow basis shrinkOff"
-      data-id="actionButton"
-      data-selector-id="box"
-      data-test-id="actionButton"
-      tabindex="0"
-    >
-      <div
-        class="flex cover coldir both"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
-      >
-        <div
-          class="contentwrapper shrinkOff"
-          data-id="boxComponent"
-          data-selector-id="box"
-          data-test-id="boxComponent"
-        >
-          <div
-            class="flex rowdir vCenter"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          />
-        </div>
-      </div>
-    </button>
-    <button
-      class="buttonReset medium_arrowBox primaryFilledArw  arrowWrapper  shrinkOff"
-      data-id="actionButton_arrowButton"
-      data-selector-id="actionButton_arrowButton"
-      data-test-id="actionButton_arrowButton"
-      tabindex="0"
-    >
-      <div
-        class="flex cover coldir both"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
-      >
-        <i
-          aria-hidden="true"
-          class="zd_font_icons basic icon-down  arrow  "
-          data-id="fontIcon"
-          data-selector-id="fontIcon"
-          data-test-id="fontIcon"
-          style="--zd-iconfont-size: var(--zd_font_size6);"
-        />
-      </div>
-    </button>
-  </div>
-</DocumentFragment>
-`;
-exports[`ActionButton renders with arrowBoxSize medium and isPopupOpen false 1`] = `
-<DocumentFragment>
-  <div
-    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
-    data-id="actionButton_actionButton"
-    data-selector-id="actionButton"
-    data-test-id="actionButton_actionButton"
-  >
-    <button
-      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdrRds clickable   grow basis shrinkOff"
-      data-id="actionButton"
-      data-selector-id="box"
-      data-test-id="actionButton"
-      tabindex="0"
-    >
-      <div
-        class="flex cover coldir both"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
-      >
-        <div
-          class="contentwrapper shrinkOff"
-          data-id="boxComponent"
-          data-selector-id="box"
-          data-test-id="boxComponent"
-        >
-          <div
-            class="flex rowdir vCenter"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          />
-        </div>
-      </div>
-    </button>
-  </div>
-</DocumentFragment>
-`;
-exports[`ActionButton renders with arrowBoxSize small and children 1`] = `
-<DocumentFragment>
-  <div
-    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
-    data-id="actionButton_actionButton"
-    data-selector-id="actionButton"
-    data-test-id="actionButton_actionButton"
-  >
-    <button
-      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdr clickable   grow basis shrinkOff"
-      data-id="actionButton"
-      data-selector-id="box"
-      data-test-id="actionButton"
-      tabindex="0"
-    >
-      <div
-        class="flex cover coldir both"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
-      >
-        <div
-          class="contentwrapper shrinkOff"
-          data-id="boxComponent"
-          data-selector-id="box"
-          data-test-id="boxComponent"
-        >
-          <div
-            class="flex rowdir vCenter"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          />
-        </div>
-      </div>
-    </button>
-    <button
-      class="buttonReset small_arrowBox primaryFilledArw  arrowWrapper  shrinkOff"
-      data-id="actionButton_arrowButton"
-      data-selector-id="actionButton_arrowButton"
-      data-test-id="actionButton_arrowButton"
-      tabindex="0"
-    >
-      <div
-        class="flex cover coldir both"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
-      >
-        <i
-          aria-hidden="true"
-          class="zd_font_icons basic icon-down  arrow  "
-          data-id="fontIcon"
-          data-selector-id="fontIcon"
-          data-test-id="fontIcon"
-          style="--zd-iconfont-size: var(--zd_font_size6);"
-        />
-      </div>
-    </button>
-  </div>
-</DocumentFragment>
-`;
-exports[`ActionButton renders with arrowBoxSize small and isPopupOpen true 1`] = `
-<DocumentFragment>
-  <div
-    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
-    data-id="actionButton_actionButton"
-    data-selector-id="actionButton"
-    data-test-id="actionButton_actionButton"
-  >
-    <button
-      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdrRds clickable   grow basis shrinkOff"
-      data-id="actionButton"
-      data-selector-id="box"
-      data-test-id="actionButton"
-      tabindex="0"
-    >
-      <div
-        class="flex cover coldir both"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
-      >
-        <div
-          class="contentwrapper shrinkOff"
-          data-id="boxComponent"
-          data-selector-id="box"
-          data-test-id="boxComponent"
-        >
-          <div
-            class="flex rowdir vCenter"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          />
-        </div>
-      </div>
-    </button>
-  </div>
-</DocumentFragment>
-`;
-exports[`ActionButton renders with children and tooltip disabled 1`] = `
-<DocumentFragment>
-  <div
-    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
-    data-id="actionButton_actionButton"
-    data-selector-id="actionButton"
-    data-test-id="actionButton_actionButton"
-  >
-    <button
-      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdr clickable   grow basis shrinkOff"
-      data-id="actionButton"
-      data-selector-id="box"
-      data-test-id="actionButton"
-      tabindex="0"
-    >
-      <div
-        class="flex cover coldir both"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
-      >
-        <div
-          class="contentwrapper shrinkOff"
-          data-id="boxComponent"
-          data-selector-id="box"
-          data-test-id="boxComponent"
-        >
-          <div
-            class="flex rowdir vCenter"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          />
-        </div>
-      </div>
-    </button>
-    <button
-      class="buttonReset medium_arrowBox primaryFilledArw  arrowWrapper  shrinkOff"
-      data-id="actionButton_arrowButton"
-      data-selector-id="actionButton_arrowButton"
-      data-test-id="actionButton_arrowButton"
-      tabindex="0"
-    >
-      <div
-        class="flex cover coldir both"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
-      >
-        <i
-          aria-hidden="true"
-          class="zd_font_icons basic icon-down  arrow  "
-          data-id="fontIcon"
-          data-selector-id="fontIcon"
-          data-test-id="fontIcon"
-          style="--zd-iconfont-size: var(--zd_font_size6);"
-        />
-      </div>
-    </button>
-  </div>
-</DocumentFragment>
-`;
-exports[`ActionButton renders with children and tooltip enabled 1`] = `
-<DocumentFragment>
-  <div
-    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
-    data-id="actionButton_actionButton"
-    data-selector-id="actionButton"
-    data-test-id="actionButton_actionButton"
-  >
-    <button
-      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdr clickable   grow basis shrinkOff"
-      data-id="actionButton"
-      data-selector-id="box"
-      data-test-id="actionButton"
-      tabindex="0"
-    >
-      <div
-        class="flex cover coldir both"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
-      >
-        <div
-          class="contentwrapper shrinkOff"
-          data-id="boxComponent"
-          data-selector-id="box"
-          data-test-id="boxComponent"
-        >
-          <div
-            class="flex rowdir vCenter"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          />
-        </div>
-      </div>
-    </button>
-    <button
-      class="buttonReset medium_arrowBox primaryFilledArw  arrowWrapper  shrinkOff"
-      data-id="actionButton_arrowButton"
-      data-selector-id="actionButton_arrowButton"
-      data-test-id="actionButton_arrowButton"
-      tabindex="0"
-    >
-      <div
-        class="flex cover coldir both"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
-      >
-        <i
-          aria-hidden="true"
-          class="zd_font_icons basic icon-down  arrow  "
-          data-id="fontIcon"
-          data-selector-id="fontIcon"
-          data-test-id="fontIcon"
-          style="--zd-iconfont-size: var(--zd_font_size6);"
-        />
-      </div>
-    </button>
-  </div>
-</DocumentFragment>
-`;
-exports[`ActionButton renders with children prop 1`] = `
-<DocumentFragment>
-  <div
-    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
-    data-id="actionButton_actionButton"
-    data-selector-id="actionButton"
-    data-test-id="actionButton_actionButton"
-  >
-    <button
-      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdr clickable   grow basis shrinkOff"
-      data-id="actionButton"
-      data-selector-id="box"
-      data-test-id="actionButton"
-      tabindex="0"
-    >
-      <div
-        class="flex cover coldir both"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
-      >
-        <div
-          class="contentwrapper shrinkOff"
-          data-id="boxComponent"
-          data-selector-id="box"
-          data-test-id="boxComponent"
-        >
-          <div
-            class="flex rowdir vCenter"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          />
-        </div>
-      </div>
-    </button>
-    <button
-      class="buttonReset medium_arrowBox primaryFilledArw  arrowWrapper  shrinkOff"
-      data-id="actionButton_arrowButton"
-      data-selector-id="actionButton_arrowButton"
-      data-test-id="actionButton_arrowButton"
-      tabindex="0"
-    >
-      <div
-        class="flex cover coldir both"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
-      >
-        <i
-          aria-hidden="true"
-          class="zd_font_icons basic icon-down  arrow  "
-          data-id="fontIcon"
-          data-selector-id="fontIcon"
-          data-test-id="fontIcon"
-          style="--zd-iconfont-size: var(--zd_font_size6);"
-        />
-      </div>
-    </button>
-  </div>
-</DocumentFragment>
-`;
-exports[`ActionButton renders with custom className 1`] = `
-<DocumentFragment>
-  <div
-    class="container primaryFilledBox medium custom-class  wholeDiv  flex rowdir"
-    data-id="actionButton_actionButton"
-    data-selector-id="actionButton"
-    data-test-id="actionButton_actionButton"
-  >
-    <button
-      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdrRds clickable   grow basis shrinkOff"
-      data-id="actionButton"
-      data-selector-id="box"
-      data-test-id="actionButton"
-      tabindex="0"
-    >
-      <div
-        class="flex cover coldir both"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
-      >
-        <div
-          class="contentwrapper shrinkOff"
-          data-id="boxComponent"
-          data-selector-id="box"
-          data-test-id="boxComponent"
-        >
-          <div
-            class="flex rowdir vCenter"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          />
-        </div>
-      </div>
-    </button>
-  </div>
-</DocumentFragment>
-`;
-exports[`ActionButton renders with dataId prop 1`] = `
-<DocumentFragment>
-  <div
-    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
-    data-id="testDataId_actionButton"
-    data-selector-id="actionButton"
-    data-test-id="testDataId_actionButton"
-  >
-    <button
-      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdrRds clickable   grow basis shrinkOff"
-      data-id="testDataId"
-      data-selector-id="box"
-      data-test-id="testDataId"
-      tabindex="0"
-    >
-      <div
-        class="flex cover coldir both"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
-      >
-        <div
-          class="contentwrapper shrinkOff"
-          data-id="boxComponent"
-          data-selector-id="box"
-          data-test-id="boxComponent"
-        >
-          <div
-            class="flex rowdir vCenter"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          />
-        </div>
-      </div>
-    </button>
-  </div>
-</DocumentFragment>
-`;
-exports[`ActionButton renders with dataId, children, and popup open 1`] = `
-<DocumentFragment>
-  <div
-    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
-    data-id="testDataId_actionButton"
-    data-selector-id="actionButton"
-    data-test-id="testDataId_actionButton"
-  >
-    <button
-      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdr clickable   grow basis shrinkOff"
-      data-id="testDataId"
-      data-selector-id="box"
-      data-test-id="testDataId"
-      tabindex="0"
-    >
-      <div
-        class="flex cover coldir both"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
-      >
-        <div
-          class="contentwrapper shrinkOff"
-          data-id="boxComponent"
-          data-selector-id="box"
-          data-test-id="boxComponent"
-        >
-          <div
-            class="flex rowdir vCenter"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          />
-        </div>
-      </div>
-    </button>
-    <button
-      class="buttonReset medium_arrowBox primaryFilledArw  arrowWrapper arrowActive shrinkOff"
-      data-id="testDataId_arrowButton"
-      data-selector-id="actionButton_arrowButton"
-      data-test-id="testDataId_arrowButton"
-      tabindex="0"
-    >
-      <div
-        class="flex cover coldir both"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
-      >
-        <i
-          aria-hidden="true"
-          class="zd_font_icons basic icon-down  arrow  "
-          data-id="fontIcon"
-          data-selector-id="fontIcon"
-          data-test-id="fontIcon"
-          style="--zd-iconfont-size: var(--zd_font_size6);"
-        />
-      </div>
-      <div
-        class="main container bottomMid small paddingSpace"
-        data-a11y-focus-main-area="true"
-        data-arrow-position="mid"
-        data-box-direction="bottom"
-        data-id="testDataId_dropbox"
-        data-position="bottomMid"
-        data-selector-id="dropBox"
-        data-test-id="testDataId_dropbox"
-        dot-ui-element="dropbox"
-        style="z-index: 4;"
-      >
-        <div
-          class="subContainer shadow boxPadding radius fadeInScale defaultPalette"
-          data-a11y-focus-scope="true"
-          data-id="testDataId_dropbox_subcontainer"
-          data-selector-id="dropBox_subcontainer"
-          data-test-id="testDataId_dropbox_subcontainer"
-          tabindex="-1"
-        >
-          <div
-            class="flex coldir"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          >
-            <div
-              class="grow basis shrinkOn scrolly"
-              data-id="boxComponent"
-              data-selector-id="box"
-              data-test-id="boxComponent"
-            >
-              <div>
-                Child Content
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </button>
-  </div>
-</DocumentFragment>
-`;
-exports[`ActionButton renders with dataSelectorId and children props 1`] = `
-<DocumentFragment>
-  <div
-    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
-    data-id="actionButton_actionButton"
-    data-selector-id="testSelectorId"
-    data-test-id="actionButton_actionButton"
-  >
-    <button
-      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdr clickable   grow basis shrinkOff"
-      data-id="actionButton"
-      data-selector-id="box"
-      data-test-id="actionButton"
-      tabindex="0"
-    >
-      <div
-        class="flex cover coldir both"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
-      >
-        <div
-          class="contentwrapper shrinkOff"
-          data-id="boxComponent"
-          data-selector-id="box"
-          data-test-id="boxComponent"
-        >
-          <div
-            class="flex rowdir vCenter"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          />
-        </div>
-      </div>
-    </button>
-    <button
-      class="buttonReset medium_arrowBox primaryFilledArw  arrowWrapper  shrinkOff"
-      data-id="actionButton_arrowButton"
-      data-selector-id="testSelectorId_arrowButton"
-      data-test-id="actionButton_arrowButton"
-      tabindex="0"
-    >
-      <div
-        class="flex cover coldir both"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
-      >
-        <i
-          aria-hidden="true"
-          class="zd_font_icons basic icon-down  arrow  "
-          data-id="fontIcon"
-          data-selector-id="fontIcon"
-          data-test-id="fontIcon"
-          style="--zd-iconfont-size: var(--zd_font_size6);"
-        />
-      </div>
-    </button>
-  </div>
-</DocumentFragment>
-`;
-exports[`ActionButton renders with dataTitle 1`] = `
-<DocumentFragment>
-  <div
-    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
-    data-id="actionButton_actionButton"
-    data-selector-id="actionButton"
-    data-test-id="actionButton_actionButton"
-  >
-    <button
-      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdrRds clickable   grow basis shrinkOff"
-      data-id="actionButton"
-      data-selector-id="box"
-      data-test-id="actionButton"
-      data-title="Test Data Title"
-      tabindex="0"
-    >
-      <div
-        class="flex cover coldir both"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
-      >
-        <div
-          class="contentwrapper shrinkOff"
-          data-id="boxComponent"
-          data-selector-id="box"
-          data-test-id="boxComponent"
-        >
-          <div
-            class="flex rowdir vCenter"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          />
-        </div>
-      </div>
-    </button>
-  </div>
-</DocumentFragment>
-`;
-exports[`ActionButton renders with default props 1`] = `
-<DocumentFragment>
-  <div
-    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
-    data-id="actionButton_actionButton"
-    data-selector-id="actionButton"
-    data-test-id="actionButton_actionButton"
-  >
-    <button
-      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdrRds clickable   grow basis shrinkOff"
-      data-id="actionButton"
-      data-selector-id="box"
-      data-test-id="actionButton"
-      tabindex="0"
-    >
-      <div
-        class="flex cover coldir both"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
-      >
-        <div
-          class="contentwrapper shrinkOff"
-          data-id="boxComponent"
-          data-selector-id="box"
-          data-test-id="boxComponent"
-        >
-          <div
-            class="flex rowdir vCenter"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          />
-        </div>
-      </div>
-    </button>
-  </div>
-</DocumentFragment>
-`;
-exports[`ActionButton renders with disabled state true 1`] = `
-<DocumentFragment>
-  <div
-    class="container primaryFilledBox medium  disabled wholeDiv  flex rowdir"
-    data-id="actionButton_actionButton"
-    data-selector-id="actionButton"
-    data-test-id="actionButton_actionButton"
-  >
-    <button
-      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdrRds clickable   grow basis shrinkOff"
-      data-id="actionButton"
-      data-selector-id="box"
-      data-test-id="actionButton"
-      tabindex="0"
-    >
-      <div
-        class="flex cover coldir both"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
-      >
-        <div
-          class="contentwrapper shrinkOff"
-          data-id="boxComponent"
-          data-selector-id="box"
-          data-test-id="boxComponent"
-        >
-          <div
-            class="flex rowdir vCenter"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          />
-        </div>
-      </div>
-    </button>
-  </div>
-</DocumentFragment>
-`;
-exports[`ActionButton renders with dropBoxClassProps - case 1 1`] = `
-<DocumentFragment>
-  <div
-    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
-    data-id="actionButton_actionButton"
-    data-selector-id="actionButton"
-    data-test-id="actionButton_actionButton"
-  >
-    <button
-      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdr clickable   grow basis shrinkOff"
-      data-id="actionButton"
-      data-selector-id="box"
-      data-test-id="actionButton"
-      tabindex="0"
-    >
-      <div
-        class="flex cover coldir both"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
-      >
-        <div
-          class="contentwrapper shrinkOff"
-          data-id="boxComponent"
-          data-selector-id="box"
-          data-test-id="boxComponent"
-        >
-          <div
-            class="flex rowdir vCenter"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          />
-        </div>
-      </div>
-    </button>
-    <button
-      class="buttonReset medium_arrowBox primaryFilledArw  arrowWrapper arrowActive shrinkOff"
-      data-id="actionButton_arrowButton"
-      data-selector-id="actionButton_arrowButton"
-      data-test-id="actionButton_arrowButton"
-      tabindex="0"
-    >
-      <div
-        class="flex cover coldir both"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
-      >
-        <i
-          aria-hidden="true"
-          class="zd_font_icons basic icon-down  arrow  "
-          data-id="fontIcon"
-          data-selector-id="fontIcon"
-          data-test-id="fontIcon"
-          style="--zd-iconfont-size: var(--zd_font_size6);"
-        />
-      </div>
-      <div
-        class="main custom-dropbox-class container bottomMid small paddingSpace"
-        data-a11y-focus-main-area="true"
-        data-arrow-position="mid"
-        data-box-direction="bottom"
-        data-id="actionButton_dropbox"
-        data-position="bottomMid"
-        data-selector-id="dropBox"
-        data-test-id="actionButton_dropbox"
-        dot-ui-element="dropbox"
-        style="z-index: 4;"
-      >
-        <div
-          class="subContainer shadow boxPadding radius fadeInScale defaultPalette"
-          data-a11y-focus-scope="true"
-          data-id="actionButton_dropbox_subcontainer"
-          data-selector-id="dropBox_subcontainer"
-          data-test-id="actionButton_dropbox_subcontainer"
-          tabindex="-1"
-        >
-          <div
-            class="flex coldir"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          >
-            <div
-              class="grow basis shrinkOn scrolly"
-              data-id="boxComponent"
-              data-selector-id="box"
-              data-test-id="boxComponent"
-            >
-              <div>
-                Child Content
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </button>
-  </div>
-</DocumentFragment>
-`;
-exports[`ActionButton renders with dropBoxClassProps - case 2 1`] = `
-<DocumentFragment>
-  <div
-    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
-    data-id="actionButton_actionButton"
-    data-selector-id="actionButton"
-    data-test-id="actionButton_actionButton"
-  >
-    <button
-      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdr clickable   grow basis shrinkOff"
-      data-id="actionButton"
-      data-selector-id="box"
-      data-test-id="actionButton"
-      tabindex="0"
-    >
-      <div
-        class="flex cover coldir both"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
-      >
-        <div
-          class="contentwrapper shrinkOff"
-          data-id="boxComponent"
-          data-selector-id="box"
-          data-test-id="boxComponent"
-        >
-          <div
-            class="flex rowdir vCenter"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          />
-        </div>
-      </div>
-    </button>
-    <button
-      class="buttonReset medium_arrowBox primaryFilledArw  arrowWrapper  shrinkOff"
-      data-id="actionButton_arrowButton"
-      data-selector-id="actionButton_arrowButton"
-      data-test-id="actionButton_arrowButton"
-      tabindex="0"
-    >
-      <div
-        class="flex cover coldir both"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
-      >
-        <i
-          aria-hidden="true"
-          class="zd_font_icons basic icon-down  arrow  "
-          data-id="fontIcon"
-          data-selector-id="fontIcon"
-          data-test-id="fontIcon"
-          style="--zd-iconfont-size: var(--zd_font_size6);"
-        />
-      </div>
-    </button>
-  </div>
-</DocumentFragment>
-`;
-exports[`ActionButton renders with dropBoxClassProps - case 3 1`] = `
-<DocumentFragment>
-  <div
-    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
-    data-id="actionButton_actionButton"
-    data-selector-id="actionButton"
-    data-test-id="actionButton_actionButton"
-  >
-    <button
-      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdr clickable   grow basis shrinkOff"
-      data-id="actionButton"
-      data-selector-id="box"
-      data-test-id="actionButton"
-      tabindex="0"
-    >
-      <div
-        class="flex cover coldir both"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
-      >
-        <div
-          class="contentwrapper shrinkOff"
-          data-id="boxComponent"
-          data-selector-id="box"
-          data-test-id="boxComponent"
-        >
-          <div
-            class="flex rowdir vCenter"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          />
-        </div>
-      </div>
-    </button>
-    <button
-      class="buttonReset medium_arrowBox primaryFilledArw  arrowWrapper arrowActive shrinkOff"
-      data-id="actionButton_arrowButton"
-      data-selector-id="actionButton_arrowButton"
-      data-test-id="actionButton_arrowButton"
-      tabindex="0"
-    >
-      <div
-        class="flex cover coldir both"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
-      >
-        <i
-          aria-hidden="true"
-          class="zd_font_icons basic icon-down  arrow  "
-          data-id="fontIcon"
-          data-selector-id="fontIcon"
-          data-test-id="fontIcon"
-          style="--zd-iconfont-size: var(--zd_font_size6);"
-        />
-      </div>
-      <div
-        class="main custom-dropbox-class container bottomMid small paddingSpace"
-        data-a11y-focus-main-area="true"
-        data-arrow-position="mid"
-        data-box-direction="bottom"
-        data-id="actionButton_dropbox"
-        data-position="bottomMid"
-        data-selector-id="dropBox"
-        data-test-id="actionButton_dropbox"
-        dot-ui-element="dropbox"
-        style="z-index: 4;"
-      >
-        <div
-          class="subContainer shadow radius fadeInScale defaultPalette"
-          data-a11y-focus-scope="true"
-          data-id="actionButton_dropbox_subcontainer"
-          data-selector-id="dropBox_subcontainer"
-          data-test-id="actionButton_dropbox_subcontainer"
-          tabindex="-1"
-        >
-          <div
-            class="flex coldir"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          >
-            <div
-              class="grow basis shrinkOn scrolly"
-              data-id="boxComponent"
-              data-selector-id="box"
-              data-test-id="boxComponent"
-            >
-              <div>
-                Child Content
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </button>
-  </div>
-</DocumentFragment>
-`;
-exports[`ActionButton renders with dropBoxClassProps - case 4 1`] = `
-<DocumentFragment>
-  <div
-    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
-    data-id="actionButton_actionButton"
-    data-selector-id="actionButton"
-    data-test-id="actionButton_actionButton"
-  >
-    <button
-      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdr clickable   grow basis shrinkOff"
-      data-id="actionButton"
-      data-selector-id="box"
-      data-test-id="actionButton"
-      tabindex="0"
-    >
-      <div
-        class="flex cover coldir both"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
-      >
-        <div
-          class="contentwrapper shrinkOff"
-          data-id="boxComponent"
-          data-selector-id="box"
-          data-test-id="boxComponent"
-        >
-          <div
-            class="flex rowdir vCenter"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          />
-        </div>
-      </div>
-    </button>
-    <button
-      class="buttonReset medium_arrowBox primaryFilledArw  arrowWrapper arrowActive shrinkOff"
-      data-id="actionButton_arrowButton"
-      data-selector-id="actionButton_arrowButton"
-      data-test-id="actionButton_arrowButton"
-      tabindex="0"
-    >
-      <div
-        class="flex cover coldir both"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
-      >
-        <i
-          aria-hidden="true"
-          class="zd_font_icons basic icon-down  arrow  "
-          data-id="fontIcon"
-          data-selector-id="fontIcon"
-          data-test-id="fontIcon"
-          style="--zd-iconfont-size: var(--zd_font_size6);"
-        />
-      </div>
-      <div
-        class="main container bottomMid small paddingSpace"
-        data-a11y-focus-main-area="true"
-        data-arrow-position="mid"
-        data-box-direction="bottom"
-        data-id="actionButton_dropbox"
-        data-position="bottomMid"
-        data-selector-id="dropBox"
-        data-test-id="actionButton_dropbox"
-        dot-ui-element="dropbox"
-        style="z-index: 4;"
-      >
-        <div
-          class="subContainer shadow boxPadding radius fadeInScale defaultPalette"
-          data-a11y-focus-scope="true"
-          data-id="actionButton_dropbox_subcontainer"
-          data-selector-id="dropBox_subcontainer"
-          data-test-id="actionButton_dropbox_subcontainer"
-          tabindex="-1"
-        >
-          <div
-            class="flex coldir"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          >
-            <div
-              class="grow basis shrinkOn scrolly"
-              data-id="boxComponent"
-              data-selector-id="box"
-              data-test-id="boxComponent"
-            >
-              <div>
-                Child Content
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </button>
-  </div>
-</DocumentFragment>
-`;
-exports[`ActionButton renders with iconName: { iconName: 'ZD-replyall', iconSize: '9' } and iconSize: %s 1`] = `
-<DocumentFragment>
-  <div
-    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
-    data-id="actionButton_actionButton"
-    data-selector-id="actionButton"
-    data-test-id="actionButton_actionButton"
-  >
-    <button
-      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdrRds clickable   grow basis shrinkOff"
-      data-id="actionButton"
-      data-selector-id="box"
-      data-test-id="actionButton"
-      tabindex="0"
-    >
-      <div
-        class="flex cover coldir both"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
-      >
-        <div
-          class="contentwrapper shrinkOff"
-          data-id="boxComponent"
-          data-selector-id="box"
-          data-test-id="boxComponent"
-        >
-          <div
-            class="flex rowdir vCenter"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          >
-            <i
-              aria-hidden="true"
-              class="zd_font_icons basic icon-replyall-new  iconClr iconMrgn  "
-              data-id="fontIcon"
-              data-selector-id="fontIcon"
-              data-test-id="fontIcon"
-              style="--zd-iconfont-size: var(--zd_font_size9);"
-            />
-            <div
-              class="txt shrinkOn"
-              data-id="boxComponent"
-              data-selector-id="box"
-              data-test-id="boxComponent"
-              data-title="Not Loading - Main Text"
-            >
-              Not Loading - Main Text
-            </div>
-          </div>
-        </div>
-        <div
-          class="subTxt shrinkOff"
-          data-id="boxComponent"
-          data-selector-id="box"
-          data-test-id="boxComponent"
-          data-title="Not Loading - Sub Text"
-        >
-          Not Loading - Sub Text
-        </div>
-      </div>
-    </button>
-  </div>
-</DocumentFragment>
-`;
-exports[`ActionButton renders with innerClassName set to custom-class 1`] = `
-<DocumentFragment>
-  <div
-    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
-    data-id="actionButton_actionButton"
-    data-selector-id="actionButton"
-    data-test-id="actionButton_actionButton"
-  >
-    <button
-      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdrRds clickable custom-class  grow basis shrinkOff"
-      data-id="actionButton"
-      data-selector-id="box"
-      data-test-id="actionButton"
-      tabindex="0"
-    >
-      <div
-        class="flex cover coldir both"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
-      >
-        <div
-          class="contentwrapper shrinkOff"
-          data-id="boxComponent"
-          data-selector-id="box"
-          data-test-id="boxComponent"
-        >
-          <div
-            class="flex rowdir vCenter"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          />
-        </div>
-      </div>
-    </button>
-  </div>
-</DocumentFragment>
-`;
-exports[`ActionButton renders with innerClassName set to empty string 1`] = `
-<DocumentFragment>
-  <div
-    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
-    data-id="actionButton_actionButton"
-    data-selector-id="actionButton"
-    data-test-id="actionButton_actionButton"
-  >
-    <button
-      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdrRds clickable   grow basis shrinkOff"
-      data-id="actionButton"
-      data-selector-id="box"
-      data-test-id="actionButton"
-      tabindex="0"
-    >
-      <div
-        class="flex cover coldir both"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
-      >
-        <div
-          class="contentwrapper shrinkOff"
-          data-id="boxComponent"
-          data-selector-id="box"
-          data-test-id="boxComponent"
-        >
-          <div
-            class="flex rowdir vCenter"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          />
-        </div>
-      </div>
-    </button>
-  </div>
-</DocumentFragment>
-`;
-exports[`ActionButton renders with innerClassName set to undefined 1`] = `
-<DocumentFragment>
-  <div
-    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
-    data-id="actionButton_actionButton"
-    data-selector-id="actionButton"
-    data-test-id="actionButton_actionButton"
-  >
-    <button
-      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdrRds clickable   grow basis shrinkOff"
-      data-id="actionButton"
-      data-selector-id="box"
-      data-test-id="actionButton"
-      tabindex="0"
-    >
-      <div
-        class="flex cover coldir both"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
-      >
-        <div
-          class="contentwrapper shrinkOff"
-          data-id="boxComponent"
-          data-selector-id="box"
-          data-test-id="boxComponent"
-        >
-          <div
-            class="flex rowdir vCenter"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          />
-        </div>
-      </div>
-    </button>
-  </div>
-</DocumentFragment>
-`;
-exports[`ActionButton renders with isAbsolutePositioningNeeded set to true 1`] = `
-<DocumentFragment>
-  <div
-    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
-    data-id="actionButton_actionButton"
-    data-selector-id="actionButton"
-    data-test-id="actionButton_actionButton"
-  >
-    <button
-      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdrRds clickable   grow basis shrinkOff"
-      data-id="actionButton"
-      data-selector-id="box"
-      data-test-id="actionButton"
-      tabindex="0"
-    >
-      <div
-        class="flex cover coldir both"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
-      >
-        <div
-          class="contentwrapper shrinkOff"
-          data-id="boxComponent"
-          data-selector-id="box"
-          data-test-id="boxComponent"
-        >
-          <div
-            class="flex rowdir vCenter"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          />
-        </div>
-      </div>
-    </button>
-  </div>
-</DocumentFragment>
-`;
-exports[`ActionButton renders with isAbsolutePositioningNeeded set to true and isPopupOpen true 1`] = `
-<DocumentFragment>
-  <div
-    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
-    data-id="actionButton_actionButton"
-    data-selector-id="actionButton"
-    data-test-id="actionButton_actionButton"
-  >
-    <button
-      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdr clickable   grow basis shrinkOff"
-      data-id="actionButton"
-      data-selector-id="box"
-      data-test-id="actionButton"
-      tabindex="0"
-    >
-      <div
-        class="flex cover coldir both"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
-      >
-        <div
-          class="contentwrapper shrinkOff"
-          data-id="boxComponent"
-          data-selector-id="box"
-          data-test-id="boxComponent"
-        >
-          <div
-            class="flex rowdir vCenter"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          />
-        </div>
-      </div>
-    </button>
-    <button
-      class="buttonReset medium_arrowBox primaryFilledArw  arrowWrapper arrowActive shrinkOff"
-      data-id="actionButton_arrowButton"
-      data-selector-id="actionButton_arrowButton"
-      data-test-id="actionButton_arrowButton"
-      tabindex="0"
-    >
-      <div
-        class="flex cover coldir both"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
-      >
-        <i
-          aria-hidden="true"
-          class="zd_font_icons basic icon-down  arrow  "
-          data-id="fontIcon"
-          data-selector-id="fontIcon"
-          data-test-id="fontIcon"
-          style="--zd-iconfont-size: var(--zd_font_size6);"
-        />
-      </div>
-      <div
-        class="main container bottomMid small paddingSpace"
-        data-a11y-focus-main-area="true"
-        data-arrow-position="mid"
-        data-box-direction="bottom"
-        data-id="actionButton_dropbox"
-        data-position="bottomMid"
-        data-selector-id="dropBox"
-        data-test-id="actionButton_dropbox"
-        dot-ui-element="dropbox"
-        style="z-index: 4;"
-      >
-        <div
-          class="subContainer shadow boxPadding radius fadeInScale defaultPalette"
-          data-a11y-focus-scope="true"
-          data-id="actionButton_dropbox_subcontainer"
-          data-selector-id="dropBox_subcontainer"
-          data-test-id="actionButton_dropbox_subcontainer"
-          tabindex="-1"
-        >
-          <div
-            class="flex coldir"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          >
-            <div
-              class="grow basis shrinkOn scrolly"
-              data-id="boxComponent"
-              data-selector-id="box"
-              data-test-id="boxComponent"
-            >
-              <div>
-                Child Content
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </button>
-  </div>
-</DocumentFragment>
-`;
-exports[`ActionButton renders with isArrow false and popup open 1`] = `
-<DocumentFragment>
-  <div
-    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
-    data-id="actionButton_actionButton"
-    data-selector-id="actionButton"
-    data-test-id="actionButton_actionButton"
-  >
-    <button
-      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdr clickable   grow basis shrinkOff"
-      data-id="actionButton"
-      data-selector-id="box"
-      data-test-id="actionButton"
-      tabindex="0"
-    >
-      <div
-        class="flex cover coldir both"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
-      >
-        <div
-          class="contentwrapper shrinkOff"
-          data-id="boxComponent"
-          data-selector-id="box"
-          data-test-id="boxComponent"
-        >
-          <div
-            class="flex rowdir vCenter"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          />
-        </div>
-      </div>
-    </button>
-    <button
-      class="buttonReset medium_arrowBox primaryFilledArw  arrowWrapper arrowActive shrinkOff"
-      data-id="actionButton_arrowButton"
-      data-selector-id="actionButton_arrowButton"
-      data-test-id="actionButton_arrowButton"
-      tabindex="0"
-    >
-      <div
-        class="flex cover coldir both"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
-      >
-        <i
-          aria-hidden="true"
-          class="zd_font_icons basic icon-down  arrow  "
-          data-id="fontIcon"
-          data-selector-id="fontIcon"
-          data-test-id="fontIcon"
-          style="--zd-iconfont-size: var(--zd_font_size6);"
-        />
-      </div>
-      <div
-        class="main container bottomMid small paddingSpace"
-        data-a11y-focus-main-area="true"
-        data-arrow-position="mid"
-        data-box-direction="bottom"
-        data-id="actionButton_dropbox"
-        data-position="bottomMid"
-        data-selector-id="dropBox"
-        data-test-id="actionButton_dropbox"
-        dot-ui-element="dropbox"
-        style="z-index: 4;"
-      >
-        <div
-          class="subContainer shadow boxPadding radius fadeInScale defaultPalette"
-          data-a11y-focus-scope="true"
-          data-id="actionButton_dropbox_subcontainer"
-          data-selector-id="dropBox_subcontainer"
-          data-test-id="actionButton_dropbox_subcontainer"
-          tabindex="-1"
-        >
-          <div
-            class="flex coldir"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          >
-            <div
-              class="grow basis shrinkOn scrolly"
-              data-id="boxComponent"
-              data-selector-id="box"
-              data-test-id="boxComponent"
-            >
-              <div>
-                Child Content
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </button>
-  </div>
-</DocumentFragment>
-`;
-exports[`ActionButton renders with isArrow true and popup open 1`] = `
-<DocumentFragment>
-  <div
-    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
-    data-id="actionButton_actionButton"
-    data-selector-id="actionButton"
-    data-test-id="actionButton_actionButton"
-  >
-    <button
-      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdr clickable   grow basis shrinkOff"
-      data-id="actionButton"
-      data-selector-id="box"
-      data-test-id="actionButton"
-      tabindex="0"
-    >
-      <div
-        class="flex cover coldir both"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
-      >
-        <div
-          class="contentwrapper shrinkOff"
-          data-id="boxComponent"
-          data-selector-id="box"
-          data-test-id="boxComponent"
-        >
-          <div
-            class="flex rowdir vCenter"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          />
-        </div>
-      </div>
-    </button>
-    <button
-      class="buttonReset medium_arrowBox primaryFilledArw  arrowWrapper arrowActive shrinkOff"
-      data-id="actionButton_arrowButton"
-      data-selector-id="actionButton_arrowButton"
-      data-test-id="actionButton_arrowButton"
-      tabindex="0"
-    >
-      <div
-        class="flex cover coldir both"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
-      >
-        <i
-          aria-hidden="true"
-          class="zd_font_icons basic icon-down  arrow  "
-          data-id="fontIcon"
-          data-selector-id="fontIcon"
-          data-test-id="fontIcon"
-          style="--zd-iconfont-size: var(--zd_font_size6);"
-        />
-      </div>
-      <div
-        class="main container bottomMid small boxDirection arrow"
-        data-a11y-focus-main-area="true"
-        data-arrow-position="mid"
-        data-box-direction="bottom"
-        data-id="actionButton_dropbox"
-        data-position="bottomMid"
-        data-selector-id="dropBox"
-        data-test-id="actionButton_dropbox"
-        dot-ui-element="dropbox"
-        style="z-index: 4;"
-      >
-        <div
-          class="subContainer shadow boxPadding radius fadeInScale defaultPalette"
-          data-a11y-focus-scope="true"
-          data-id="actionButton_dropbox_subcontainer"
-          data-selector-id="dropBox_subcontainer"
-          data-test-id="actionButton_dropbox_subcontainer"
-          tabindex="-1"
-        >
-          <div
-            class="arrowPosition"
-            data-id="actionButton_dropbox_arrow"
-            data-selector-id="dropBox_arrow"
-            data-test-id="actionButton_dropbox_arrow"
-          >
-            <div
-              class="arrowShape"
-            />
-          </div>
-          <div
-            class="flex coldir"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          >
-            <div
-              class="grow basis shrinkOn scrolly"
-              data-id="boxComponent"
-              data-selector-id="box"
-              data-test-id="boxComponent"
-            >
-              <div>
-                Child Content
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </button>
-  </div>
-</DocumentFragment>
-`;
-exports[`ActionButton renders with isLoading set to true 1`] = `
-<DocumentFragment>
-  <div
-    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
-    data-id="actionButton_actionButton"
-    data-selector-id="actionButton"
-    data-test-id="actionButton_actionButton"
-  >
-    <div
-      class="grow basis shrinkOff"
-      data-id="boxComponent"
-      data-selector-id="box"
-      data-test-id="boxComponent"
-    >
-      <button
-        class="btn bold primaryfilled medium loader"
-        data-id="buttonComp"
-        data-selector-id="button"
-        data-test-id="buttonComp"
-        disabled=""
-        type="button"
-      >
-        Loading...
-        <div
-          class="overlay"
-        >
-          <div
-            class="loading mediumloading"
-          >
-            <div
-              class="loadingelement primaryfilledelement"
-            />
-          </div>
-        </div>
-      </button>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-exports[`ActionButton renders with isPopupOpen false and children 1`] = `
-<DocumentFragment>
-  <div
-    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
-    data-id="actionButton_actionButton"
-    data-selector-id="actionButton"
-    data-test-id="actionButton_actionButton"
-  >
-    <button
-      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdr clickable   grow basis shrinkOff"
-      data-id="actionButton"
-      data-selector-id="box"
-      data-test-id="actionButton"
-      tabindex="0"
-    >
-      <div
-        class="flex cover coldir both"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
-      >
-        <div
-          class="contentwrapper shrinkOff"
-          data-id="boxComponent"
-          data-selector-id="box"
-          data-test-id="boxComponent"
-        >
-          <div
-            class="flex rowdir vCenter"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          />
-        </div>
-      </div>
-    </button>
-    <button
-      class="buttonReset medium_arrowBox primaryFilledArw  arrowWrapper  shrinkOff"
-      data-id="actionButton_arrowButton"
-      data-selector-id="actionButton_arrowButton"
-      data-test-id="actionButton_arrowButton"
-      tabindex="0"
-    >
-      <div
-        class="flex cover coldir both"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
-      >
-        <i
-          aria-hidden="true"
-          class="zd_font_icons basic icon-down  arrow  "
-          data-id="fontIcon"
-          data-selector-id="fontIcon"
-          data-test-id="fontIcon"
-          style="--zd-iconfont-size: var(--zd_font_size6);"
-        />
-      </div>
-    </button>
-  </div>
-</DocumentFragment>
-`;
-exports[`ActionButton renders with isPopupOpen true and children 1`] = `
-<DocumentFragment>
-  <div
-    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
-    data-id="actionButton_actionButton"
-    data-selector-id="actionButton"
-    data-test-id="actionButton_actionButton"
-  >
-    <button
-      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdr clickable   grow basis shrinkOff"
-      data-id="actionButton"
-      data-selector-id="box"
-      data-test-id="actionButton"
-      tabindex="0"
-    >
-      <div
-        class="flex cover coldir both"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
-      >
-        <div
-          class="contentwrapper shrinkOff"
-          data-id="boxComponent"
-          data-selector-id="box"
-          data-test-id="boxComponent"
-        >
-          <div
-            class="flex rowdir vCenter"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          />
-        </div>
-      </div>
-    </button>
-    <button
-      class="buttonReset medium_arrowBox primaryFilledArw  arrowWrapper arrowActive shrinkOff"
-      data-id="actionButton_arrowButton"
-      data-selector-id="actionButton_arrowButton"
-      data-test-id="actionButton_arrowButton"
-      tabindex="0"
-    >
-      <div
-        class="flex cover coldir both"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
-      >
-        <i
-          aria-hidden="true"
-          class="zd_font_icons basic icon-down  arrow  "
-          data-id="fontIcon"
-          data-selector-id="fontIcon"
-          data-test-id="fontIcon"
-          style="--zd-iconfont-size: var(--zd_font_size6);"
-        />
-      </div>
-      <div
-        class="main container bottomMid small paddingSpace"
-        data-a11y-focus-main-area="true"
-        data-arrow-position="mid"
-        data-box-direction="bottom"
-        data-id="actionButton_dropbox"
-        data-position="bottomMid"
-        data-selector-id="dropBox"
-        data-test-id="actionButton_dropbox"
-        dot-ui-element="dropbox"
-        style="z-index: 4;"
-      >
-        <div
-          class="subContainer shadow boxPadding radius fadeInScale defaultPalette"
-          data-a11y-focus-scope="true"
-          data-id="actionButton_dropbox_subcontainer"
-          data-selector-id="dropBox_subcontainer"
-          data-test-id="actionButton_dropbox_subcontainer"
-          tabindex="-1"
-        >
-          <div
-            class="flex coldir"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          >
-            <div
-              class="grow basis shrinkOn scrolly"
-              data-id="boxComponent"
-              data-selector-id="box"
-              data-test-id="boxComponent"
-            >
-              <div>
-                Child Content
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </button>
-  </div>
-</DocumentFragment>
-`;
-exports[`ActionButton renders with isRestrictScroll set to true 1`] = `
-<DocumentFragment>
-  <div
-    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
-    data-id="actionButton_actionButton"
-    data-selector-id="actionButton"
-    data-test-id="actionButton_actionButton"
-  >
-    <button
-      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdrRds clickable   grow basis shrinkOff"
-      data-id="actionButton"
-      data-selector-id="box"
-      data-test-id="actionButton"
-      tabindex="0"
-    >
-      <div
-        class="flex cover coldir both"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
-      >
-        <div
-          class="contentwrapper shrinkOff"
-          data-id="boxComponent"
-          data-selector-id="box"
-          data-test-id="boxComponent"
-        >
-          <div
-            class="flex rowdir vCenter"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          />
-        </div>
-      </div>
-    </button>
-  </div>
-</DocumentFragment>
-`;
-exports[`ActionButton renders with isRestrictScroll set to true and isPopupOpen true 1`] = `
-<DocumentFragment>
-  <div
-    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
-    data-id="actionButton_actionButton"
-    data-selector-id="actionButton"
-    data-test-id="actionButton_actionButton"
-  >
-    <button
-      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdr clickable   grow basis shrinkOff"
-      data-id="actionButton"
-      data-selector-id="box"
-      data-test-id="actionButton"
-      tabindex="0"
-    >
-      <div
-        class="flex cover coldir both"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
-      >
-        <div
-          class="contentwrapper shrinkOff"
-          data-id="boxComponent"
-          data-selector-id="box"
-          data-test-id="boxComponent"
-        >
-          <div
-            class="flex rowdir vCenter"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          />
-        </div>
-      </div>
-    </button>
-    <button
-      class="buttonReset medium_arrowBox primaryFilledArw  arrowWrapper arrowActive shrinkOff"
-      data-id="actionButton_arrowButton"
-      data-selector-id="actionButton_arrowButton"
-      data-test-id="actionButton_arrowButton"
-      tabindex="0"
-    >
-      <div
-        class="flex cover coldir both"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
-      >
-        <i
-          aria-hidden="true"
-          class="zd_font_icons basic icon-down  arrow  "
-          data-id="fontIcon"
-          data-selector-id="fontIcon"
-          data-test-id="fontIcon"
-          style="--zd-iconfont-size: var(--zd_font_size6);"
-        />
-      </div>
-      <div
-        class="main container bottomMid small paddingSpace"
-        data-a11y-focus-main-area="true"
-        data-arrow-position="mid"
-        data-box-direction="bottom"
-        data-id="actionButton_dropbox"
-        data-position="bottomMid"
-        data-selector-id="dropBox"
-        data-test-id="actionButton_dropbox"
-        dot-ui-element="dropbox"
-        style="z-index: 4;"
-      >
-        <div
-          class="subContainer shadow boxPadding radius fadeInScale defaultPalette"
-          data-a11y-focus-scope="true"
-          data-id="actionButton_dropbox_subcontainer"
-          data-selector-id="dropBox_subcontainer"
-          data-test-id="actionButton_dropbox_subcontainer"
-          tabindex="-1"
-        >
-          <div
-            class="flex coldir"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          >
-            <div
-              class="grow basis shrinkOn scrolly"
-              data-id="boxComponent"
-              data-selector-id="box"
-              data-test-id="boxComponent"
-            >
-              <div>
-                Child Content
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </button>
-  </div>
-</DocumentFragment>
-`;
-exports[`ActionButton renders with onClick prop and validates class 1`] = `
-<DocumentFragment>
-  <div
-    class="container primaryFilledBox medium     flex rowdir"
-    data-id="actionButton_actionButton"
-    data-selector-id="actionButton"
-    data-test-id="actionButton_actionButton"
-  >
-    <button
-      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdrRds clickable   grow basis shrinkOff"
-      data-id="actionButton"
-      data-selector-id="box"
-      data-test-id="actionButton"
-      tabindex="0"
-    >
-      <div
-        class="flex cover coldir both"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
-      >
-        <div
-          class="contentwrapper shrinkOff"
-          data-id="boxComponent"
-          data-selector-id="box"
-          data-test-id="boxComponent"
-        >
-          <div
-            class="flex rowdir vCenter"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          >
-            <i
-              aria-hidden="true"
-              class="zd_font_icons basic icon-replyall-new  iconClr iconMrgn  "
-              data-id="fontIcon"
-              data-selector-id="fontIcon"
-              data-test-id="fontIcon"
-              style="--zd-iconfont-size: var(--zd_font_size9);"
-            />
-            <div
-              class="txt shrinkOn"
-              data-id="boxComponent"
-              data-selector-id="box"
-              data-test-id="boxComponent"
-              data-title="Not Loading - Main Text onClick"
-            >
-              Not Loading - Main Text onClick
-            </div>
-          </div>
-        </div>
-        <div
-          class="subTxt shrinkOff"
-          data-id="boxComponent"
-          data-selector-id="box"
-          data-test-id="boxComponent"
-          data-title="Not Loading - Sub Text onClick"
-        >
-          Not Loading - Sub Text onClick
-        </div>
-      </div>
-    </button>
-  </div>
-</DocumentFragment>
-`;
-exports[`ActionButton renders with palette - primary 1`] = `
-<DocumentFragment>
-  <div
-    class="container primaryBox medium   wholeDiv  flex rowdir"
-    data-id="actionButton_actionButton"
-    data-selector-id="actionButton"
-    data-test-id="actionButton_actionButton"
-  >
-    <button
-      class="buttonReset contentBox primaryBtn medium_btnBox contentBoxBdrRds clickable   grow basis shrinkOff"
-      data-id="actionButton"
-      data-selector-id="box"
-      data-test-id="actionButton"
-      tabindex="0"
-    >
-      <div
-        class="flex cover coldir both"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
-      >
-        <div
-          class="contentwrapper shrinkOff"
-          data-id="boxComponent"
-          data-selector-id="box"
-          data-test-id="boxComponent"
-        >
-          <div
-            class="flex rowdir vCenter"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          />
-        </div>
-      </div>
-    </button>
-  </div>
-</DocumentFragment>
-`;
-exports[`ActionButton renders with palette - primary and children 1`] = `
-<DocumentFragment>
-  <div
-    class="container primaryBox medium   wholeDiv  flex rowdir"
-    data-id="actionButton_actionButton"
-    data-selector-id="actionButton"
-    data-test-id="actionButton_actionButton"
-  >
-    <button
-      class="buttonReset contentBox primaryBtn medium_btnBox contentBoxBdr clickable   grow basis shrinkOff"
-      data-id="actionButton"
-      data-selector-id="box"
-      data-test-id="actionButton"
-      tabindex="0"
-    >
-      <div
-        class="flex cover coldir both"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
-      >
-        <div
-          class="contentwrapper shrinkOff"
-          data-id="boxComponent"
-          data-selector-id="box"
-          data-test-id="boxComponent"
-        >
-          <div
-            class="flex rowdir vCenter"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          />
-        </div>
-      </div>
-    </button>
-    <button
-      class="buttonReset medium_arrowBox primaryArw  arrowWrapper  shrinkOff"
-      data-id="actionButton_arrowButton"
-      data-selector-id="actionButton_arrowButton"
-      data-test-id="actionButton_arrowButton"
-      tabindex="0"
-    >
-      <div
-        class="flex cover coldir both"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
-      >
-        <i
-          aria-hidden="true"
-          class="zd_font_icons basic icon-down  arrow  "
-          data-id="fontIcon"
-          data-selector-id="fontIcon"
-          data-test-id="fontIcon"
-          style="--zd-iconfont-size: var(--zd_font_size6);"
-        />
-      </div>
-    </button>
-  </div>
-</DocumentFragment>
-`;
-exports[`ActionButton renders with palette - primary and loading 1`] = `
-<DocumentFragment>
-  <div
-    class="container primaryBox medium   wholeDiv  flex rowdir"
-    data-id="actionButton_actionButton"
-    data-selector-id="actionButton"
-    data-test-id="actionButton_actionButton"
-  >
-    <div
-      class="grow basis shrinkOff"
-      data-id="boxComponent"
-      data-selector-id="box"
-      data-test-id="boxComponent"
-    >
-      <button
-        class="btn bold primary medium loader"
-        data-id="buttonComp"
-        data-selector-id="button"
-        data-test-id="buttonComp"
-        disabled=""
-        type="button"
-      >
-        Button
-        <div
-          class="overlay"
-        >
-          <div
-            class="loading mediumloading"
-          >
-            <div
-              class="loadingelement primaryelement"
-            />
-          </div>
-        </div>
-      </button>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-exports[`ActionButton renders with palette - primaryFilled 1`] = `
-<DocumentFragment>
-  <div
-    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
-    data-id="actionButton_actionButton"
-    data-selector-id="actionButton"
-    data-test-id="actionButton_actionButton"
-  >
-    <button
-      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdrRds clickable   grow basis shrinkOff"
-      data-id="actionButton"
-      data-selector-id="box"
-      data-test-id="actionButton"
-      tabindex="0"
-    >
-      <div
-        class="flex cover coldir both"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
-      >
-        <div
-          class="contentwrapper shrinkOff"
-          data-id="boxComponent"
-          data-selector-id="box"
-          data-test-id="boxComponent"
-        >
-          <div
-            class="flex rowdir vCenter"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          />
-        </div>
-      </div>
-    </button>
-  </div>
-</DocumentFragment>
-`;
-exports[`ActionButton renders with palette - primaryFilled and children 1`] = `
-<DocumentFragment>
-  <div
-    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
-    data-id="actionButton_actionButton"
-    data-selector-id="actionButton"
-    data-test-id="actionButton_actionButton"
-  >
-    <button
-      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdr clickable   grow basis shrinkOff"
-      data-id="actionButton"
-      data-selector-id="box"
-      data-test-id="actionButton"
-      tabindex="0"
-    >
-      <div
-        class="flex cover coldir both"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
-      >
-        <div
-          class="contentwrapper shrinkOff"
-          data-id="boxComponent"
-          data-selector-id="box"
-          data-test-id="boxComponent"
-        >
-          <div
-            class="flex rowdir vCenter"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          />
-        </div>
-      </div>
-    </button>
-    <button
-      class="buttonReset medium_arrowBox primaryFilledArw  arrowWrapper  shrinkOff"
-      data-id="actionButton_arrowButton"
-      data-selector-id="actionButton_arrowButton"
-      data-test-id="actionButton_arrowButton"
-      tabindex="0"
-    >
-      <div
-        class="flex cover coldir both"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
-      >
-        <i
-          aria-hidden="true"
-          class="zd_font_icons basic icon-down  arrow  "
-          data-id="fontIcon"
-          data-selector-id="fontIcon"
-          data-test-id="fontIcon"
-          style="--zd-iconfont-size: var(--zd_font_size6);"
-        />
-      </div>
-    </button>
-  </div>
-</DocumentFragment>
-`;
-exports[`ActionButton renders with palette - primaryFilled and loading 1`] = `
-<DocumentFragment>
-  <div
-    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
-    data-id="actionButton_actionButton"
-    data-selector-id="actionButton"
-    data-test-id="actionButton_actionButton"
-  >
-    <div
-      class="grow basis shrinkOff"
-      data-id="boxComponent"
-      data-selector-id="box"
-      data-test-id="boxComponent"
-    >
-      <button
-        class="btn bold primaryfilled medium loader"
-        data-id="buttonComp"
-        data-selector-id="button"
-        data-test-id="buttonComp"
-        disabled=""
-        type="button"
-      >
-        Button
-        <div
-          class="overlay"
-        >
-          <div
-            class="loading mediumloading"
-          >
-            <div
-              class="loadingelement primaryfilledelement"
-            />
-          </div>
-        </div>
-      </button>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-exports[`ActionButton renders with removeClose set to a function 1`] = `
-<DocumentFragment>
-  <div
-    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
-    data-id="actionButton_actionButton"
-    data-selector-id="actionButton"
-    data-test-id="actionButton_actionButton"
-  >
-    <button
-      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdrRds clickable   grow basis shrinkOff"
-      data-id="actionButton"
-      data-selector-id="box"
-      data-test-id="actionButton"
-      tabindex="0"
-    >
-      <div
-        class="flex cover coldir both"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
-      >
-        <div
-          class="contentwrapper shrinkOff"
-          data-id="boxComponent"
-          data-selector-id="box"
-          data-test-id="boxComponent"
-        >
-          <div
-            class="flex rowdir vCenter"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          />
-        </div>
-      </div>
-    </button>
-  </div>
-</DocumentFragment>
-`;
-exports[`ActionButton renders with size - large 1`] = `
-<DocumentFragment>
-  <div
-    class="container primaryFilledBox large   wholeDiv  flex rowdir"
-    data-id="actionButton_actionButton"
-    data-selector-id="actionButton"
-    data-test-id="actionButton_actionButton"
-  >
-    <button
-      class="buttonReset contentBox primaryFilledBtn large_btnBox contentBoxBdrRds clickable   grow basis shrinkOff"
-      data-id="actionButton"
-      data-selector-id="box"
-      data-test-id="actionButton"
-      tabindex="0"
-    >
-      <div
-        class="flex cover coldir both"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
-      >
-        <div
-          class="contentwrapper shrinkOff"
-          data-id="boxComponent"
-          data-selector-id="box"
-          data-test-id="boxComponent"
-        >
-          <div
-            class="flex rowdir vCenter"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          />
-        </div>
-      </div>
-    </button>
-  </div>
-</DocumentFragment>
-`;
-exports[`ActionButton renders with size - medium 1`] = `
-<DocumentFragment>
-  <div
-    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
-    data-id="actionButton_actionButton"
-    data-selector-id="actionButton"
-    data-test-id="actionButton_actionButton"
-  >
-    <button
-      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdrRds clickable   grow basis shrinkOff"
-      data-id="actionButton"
-      data-selector-id="box"
-      data-test-id="actionButton"
-      tabindex="0"
-    >
-      <div
-        class="flex cover coldir both"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
-      >
-        <div
-          class="contentwrapper shrinkOff"
-          data-id="boxComponent"
-          data-selector-id="box"
-          data-test-id="boxComponent"
-        >
-          <div
-            class="flex rowdir vCenter"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          />
-        </div>
-      </div>
-    </button>
-  </div>
-</DocumentFragment>
-`;
-exports[`ActionButton renders with size - small 1`] = `
-<DocumentFragment>
-  <div
-    class="container primaryFilledBox small   wholeDiv  flex rowdir"
-    data-id="actionButton_actionButton"
-    data-selector-id="actionButton"
-    data-test-id="actionButton_actionButton"
-  >
-    <button
-      class="buttonReset contentBox primaryFilledBtn small_btnBox contentBoxBdrRds clickable   grow basis shrinkOff"
-      data-id="actionButton"
-      data-selector-id="box"
-      data-test-id="actionButton"
-      tabindex="0"
-    >
-      <div
-        class="flex cover coldir both"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
-      >
-        <div
-          class="contentwrapper shrinkOff"
-          data-id="boxComponent"
-          data-selector-id="box"
-          data-test-id="boxComponent"
-        >
-          <div
-            class="flex rowdir vCenter"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          />
-        </div>
-      </div>
-    </button>
-  </div>
-</DocumentFragment>
-`;
-exports[`ActionButton renders with subText 1`] = `
-<DocumentFragment>
-  <div
-    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
-    data-id="actionButton_actionButton"
-    data-selector-id="actionButton"
-    data-test-id="actionButton_actionButton"
-  >
-    <button
-      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdrRds clickable   grow basis shrinkOff"
-      data-id="actionButton"
-      data-selector-id="box"
-      data-test-id="actionButton"
-      tabindex="0"
-    >
-      <div
-        class="flex cover coldir both"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
-      >
-        <div
-          class="contentwrapper shrinkOff"
-          data-id="boxComponent"
-          data-selector-id="box"
-          data-test-id="boxComponent"
-        >
-          <div
-            class="flex rowdir vCenter"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          />
-        </div>
-        <div
-          class="subTxt shrinkOff"
-          data-id="boxComponent"
-          data-selector-id="box"
-          data-test-id="boxComponent"
-          data-title="Not Loading - Sub Text"
-        >
-          Not Loading - Sub Text
-        </div>
-      </div>
-    </button>
-  </div>
-</DocumentFragment>
-`;
-exports[`ActionButton renders with text 1`] = `
-<DocumentFragment>
-  <div
-    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
-    data-id="actionButton_actionButton"
-    data-selector-id="actionButton"
-    data-test-id="actionButton_actionButton"
-  >
-    <button
-      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdrRds clickable   grow basis shrinkOff"
-      data-id="actionButton"
-      data-selector-id="box"
-      data-test-id="actionButton"
-      tabindex="0"
-    >
-      <div
-        class="flex cover coldir both"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
-      >
-        <div
-          class="contentwrapper shrinkOff"
-          data-id="boxComponent"
-          data-selector-id="box"
-          data-test-id="boxComponent"
-        >
-          <div
-            class="flex rowdir vCenter"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          >
-            <div
-              class="txt shrinkOn"
-              data-id="boxComponent"
-              data-selector-id="box"
-              data-test-id="boxComponent"
-              data-title="Not Loading - Main Text"
-            >
-              Not Loading - Main Text
-            </div>
-          </div>
-        </div>
-      </div>
-    </button>
-  </div>
-</DocumentFragment>
-`;