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/Onboarding/__tests__/__snapshots__/Onboarding.spec.js.snap DELETED Viewed

@@ -1,4194 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`Onboarding rendering  data of customprops for Secondarybuttonprops  1`] = `
-<DocumentFragment>
-  <div
-    class="mainContainer  mainContainerAnimation"
-    data-drag-container="true"
-    data-id="onboarding_container"
-    data-test-id="onboarding_container"
-    style="z-index: 4;"
-  >
-    <div
-      class="mainWrapper"
-    >
-      <div
-        class="gradientLayer"
-      >
-        <div
-          class="circleBlur circleBlurOne"
-        />
-        <div
-          class="circleBlur circleBlurTwo"
-        />
-      </div>
-      <div
-        class="carousel dragCursor"
-        data-drag-hook="true"
-      >
-        <div
-          class="flex row carouselInner"
-          data-id="flex"
-          data-test-id="flex"
-          style="--local_translate_movement: 0%;"
-        >
-          <div
-            class="flex column noShrink carouselItem"
-            data-id="flex"
-            data-test-id="flex"
-          >
-            <div
-              class="flex row alignItems_center justifyContent_center fullSize header"
-              data-id="flex"
-              data-test-id="flex"
-            >
-              <div
-                class="innerHead "
-              />
-            </div>
-            <div
-              class="scroll_vertical content"
-              data-id="flex"
-              data-test-id="flex"
-            >
-              <div
-                class="size20 lineclamp_3 lineheight_1_4 font_bold heading"
-              />
-              <div
-                class="size14 lineclamp_4 lineheight_1_6 description"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="flex row alignItems_center footer"
-        data-id="flex"
-        data-test-id="flex"
-      >
-        <div
-          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
-          data-id="flex"
-          data-test-id="flex"
-        >
-          <button
-            class=" secondaryButtton footerButton  bold primary medium"
-            data-id="onboarding_secondary_button"
-            data-selector-id="button"
-            data-test-id="onboarding_secondary_button"
-            type="button"
-          >
-            New secondaryButton text
-          </button>
-          <button
-            class="primaryButton footerButton  bold primaryfilled medium"
-            data-id="onboarding_primary_button"
-            data-selector-id="button"
-            data-test-id="onboarding_primary_button"
-            data-title="Got it"
-            type="button"
-          >
-            Got it
-          </button>
-        </div>
-      </div>
-      <button
-        class="flex row alignItems_center justifyContent_center closeIconContainer buttonReset"
-        data-id="onboarding_close_icon"
-        data-test-id="onboarding_close_icon"
-        data-title="Close"
-      >
-        <i
-          aria-hidden="true"
-          class="zd_font_icons basic icon-inapp-close  closeIcon  "
-          data-id="fontIcon"
-          data-selector-id="fontIcon"
-          data-test-id="fontIcon"
-        />
-      </button>
-      <span
-        class="basic newRibbon palette_primary  medium flag"
-        data-id="onboarding_ribbon"
-        data-selector-id="ribbon"
-        data-test-id="onboarding_ribbon"
-      >
-        <span
-          class="childText"
-        >
-          New
-        </span>
-      </span>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-exports[`Onboarding rendering  data of customprops for descriptionProps  1`] = `
-<DocumentFragment>
-  <div
-    class="mainContainer  mainContainerAnimation"
-    data-drag-container="true"
-    data-id="onboarding_container"
-    data-test-id="onboarding_container"
-    style="z-index: 4;"
-  >
-    <div
-      class="mainWrapper"
-    >
-      <div
-        class="gradientLayer"
-      >
-        <div
-          class="circleBlur circleBlurOne"
-        />
-        <div
-          class="circleBlur circleBlurTwo"
-        />
-      </div>
-      <div
-        class="carousel dragCursor"
-        data-drag-hook="true"
-      >
-        <div
-          class="flex row carouselInner"
-          data-id="flex"
-          data-test-id="flex"
-          style="--local_translate_movement: 0%;"
-        >
-          <div
-            class="flex column noShrink carouselItem"
-            data-id="flex"
-            data-test-id="flex"
-          >
-            <div
-              class="flex row alignItems_center justifyContent_center fullSize header"
-              data-id="flex"
-              data-test-id="flex"
-            >
-              <div
-                class="innerHead "
-              />
-            </div>
-            <div
-              class="scroll_vertical content"
-              data-id="flex"
-              data-test-id="flex"
-            >
-              <div
-                class="size20 lineclamp_3 lineheight_1_4 font_bold heading"
-              />
-              <div
-                class="size10 lineclamp_4 lineheight_1_6 description"
-                data-title="Discover innovative tools and solutions to streamline your processes and boost productivity on Slide 1."
-              >
-                Discover innovative tools and solutions to streamline your processes and boost productivity on Slide 1.
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="flex row alignItems_center footer"
-        data-id="flex"
-        data-test-id="flex"
-      >
-        <div
-          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
-          data-id="flex"
-          data-test-id="flex"
-        >
-          <button
-            class="primaryButton footerButton  bold primaryfilled medium"
-            data-id="onboarding_primary_button"
-            data-selector-id="button"
-            data-test-id="onboarding_primary_button"
-            data-title="Got it"
-            type="button"
-          >
-            Got it
-          </button>
-        </div>
-      </div>
-      <button
-        class="flex row alignItems_center justifyContent_center closeIconContainer buttonReset"
-        data-id="onboarding_close_icon"
-        data-test-id="onboarding_close_icon"
-        data-title="Close"
-      >
-        <i
-          aria-hidden="true"
-          class="zd_font_icons basic icon-inapp-close  closeIcon  "
-          data-id="fontIcon"
-          data-selector-id="fontIcon"
-          data-test-id="fontIcon"
-        />
-      </button>
-      <span
-        class="basic newRibbon palette_primary  medium flag"
-        data-id="onboarding_ribbon"
-        data-selector-id="ribbon"
-        data-test-id="onboarding_ribbon"
-      >
-        <span
-          class="childText"
-        >
-          New
-        </span>
-      </span>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-exports[`Onboarding rendering  data of customprops for footerProps  1`] = `
-<DocumentFragment>
-  <div
-    class="mainContainer  mainContainerAnimation"
-    data-drag-container="true"
-    data-id="onboarding_container"
-    data-test-id="onboarding_container"
-    style="z-index: 4;"
-  >
-    <div
-      class="mainWrapper"
-    >
-      <div
-        class="gradientLayer"
-      >
-        <div
-          class="circleBlur circleBlurOne"
-        />
-        <div
-          class="circleBlur circleBlurTwo"
-        />
-      </div>
-      <div
-        class="inlineFlex row alignItems_center footer"
-        data-id="flex"
-        data-test-id="flex"
-      >
-        <div
-          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
-          data-id="flex"
-          data-test-id="flex"
-        >
-          <button
-            class="primaryButton footerButton  bold primaryfilled medium"
-            data-id="onboarding_primary_button"
-            data-selector-id="button"
-            data-test-id="onboarding_primary_button"
-            data-title="Got it"
-            type="button"
-          >
-            Got it
-          </button>
-        </div>
-      </div>
-      <button
-        class="flex row alignItems_center justifyContent_center closeIconContainer buttonReset"
-        data-id="onboarding_close_icon"
-        data-test-id="onboarding_close_icon"
-        data-title="Close"
-      >
-        <i
-          aria-hidden="true"
-          class="zd_font_icons basic icon-inapp-close  closeIcon  "
-          data-id="fontIcon"
-          data-selector-id="fontIcon"
-          data-test-id="fontIcon"
-        />
-      </button>
-      <span
-        class="basic newRibbon palette_primary  medium flag"
-        data-id="onboarding_ribbon"
-        data-selector-id="ribbon"
-        data-test-id="onboarding_ribbon"
-      >
-        <span
-          class="childText"
-        >
-          New
-        </span>
-      </span>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-exports[`Onboarding rendering  data of customprops for headingProps  1`] = `
-<DocumentFragment>
-  <div
-    class="mainContainer  mainContainerAnimation"
-    data-drag-container="true"
-    data-id="onboarding_container"
-    data-test-id="onboarding_container"
-    style="z-index: 4;"
-  >
-    <div
-      class="mainWrapper"
-    >
-      <div
-        class="gradientLayer"
-      >
-        <div
-          class="circleBlur circleBlurOne"
-        />
-        <div
-          class="circleBlur circleBlurTwo"
-        />
-      </div>
-      <div
-        class="carousel dragCursor"
-        data-drag-hook="true"
-      >
-        <div
-          class="flex row carouselInner"
-          data-id="flex"
-          data-test-id="flex"
-          style="--local_translate_movement: 0%;"
-        >
-          <div
-            class="flex column noShrink carouselItem"
-            data-id="flex"
-            data-test-id="flex"
-          >
-            <div
-              class="flex row alignItems_center justifyContent_center fullSize header"
-              data-id="flex"
-              data-test-id="flex"
-            >
-              <div
-                class="innerHead "
-              />
-            </div>
-            <div
-              class="scroll_vertical content"
-              data-id="flex"
-              data-test-id="flex"
-            >
-              <div
-                class="size12 lineclamp_3 lineheight_1_4 font_bold heading"
-                data-title="Slide 6"
-              >
-                Slide 6
-              </div>
-              <div
-                class="size14 lineclamp_4 lineheight_1_6 description"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="flex row alignItems_center footer"
-        data-id="flex"
-        data-test-id="flex"
-      >
-        <div
-          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
-          data-id="flex"
-          data-test-id="flex"
-        >
-          <button
-            class="primaryButton footerButton  bold primaryfilled medium"
-            data-id="onboarding_primary_button"
-            data-selector-id="button"
-            data-test-id="onboarding_primary_button"
-            data-title="Got it"
-            type="button"
-          >
-            Got it
-          </button>
-        </div>
-      </div>
-      <button
-        class="flex row alignItems_center justifyContent_center closeIconContainer buttonReset"
-        data-id="onboarding_close_icon"
-        data-test-id="onboarding_close_icon"
-        data-title="Close"
-      >
-        <i
-          aria-hidden="true"
-          class="zd_font_icons basic icon-inapp-close  closeIcon  "
-          data-id="fontIcon"
-          data-selector-id="fontIcon"
-          data-test-id="fontIcon"
-        />
-      </button>
-      <span
-        class="basic newRibbon palette_primary  medium flag"
-        data-id="onboarding_ribbon"
-        data-selector-id="ribbon"
-        data-test-id="onboarding_ribbon"
-      >
-        <span
-          class="childText"
-        >
-          New
-        </span>
-      </span>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-exports[`Onboarding rendering  data of customprops for primarybuttonprops  1`] = `
-<DocumentFragment>
-  <div
-    class="mainContainer  mainContainerAnimation"
-    data-drag-container="true"
-    data-id="onboarding_container"
-    data-test-id="onboarding_container"
-    style="z-index: 4;"
-  >
-    <div
-      class="mainWrapper"
-    >
-      <div
-        class="gradientLayer"
-      >
-        <div
-          class="circleBlur circleBlurOne"
-        />
-        <div
-          class="circleBlur circleBlurTwo"
-        />
-      </div>
-      <div
-        class="carousel dragCursor"
-        data-drag-hook="true"
-      >
-        <div
-          class="flex row carouselInner"
-          data-id="flex"
-          data-test-id="flex"
-          style="--local_translate_movement: 0%;"
-        >
-          <div
-            class="flex column noShrink carouselItem"
-            data-id="flex"
-            data-test-id="flex"
-          >
-            <div
-              class="flex row alignItems_center justifyContent_center fullSize header"
-              data-id="flex"
-              data-test-id="flex"
-            >
-              <div
-                class="innerHead "
-              />
-            </div>
-            <div
-              class="scroll_vertical content"
-              data-id="flex"
-              data-test-id="flex"
-            >
-              <div
-                class="size20 lineclamp_3 lineheight_1_4 font_bold heading"
-              />
-              <div
-                class="size14 lineclamp_4 lineheight_1_6 description"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="flex row alignItems_center footer"
-        data-id="flex"
-        data-test-id="flex"
-      >
-        <div
-          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
-          data-id="flex"
-          data-test-id="flex"
-        >
-          <button
-            class="primaryButton footerButton  bold primaryfilled medium"
-            data-id="onboarding_primary_button"
-            data-selector-id="button"
-            data-test-id="onboarding_primary_button"
-            data-title="Got it"
-            type="button"
-          >
-            New primaryButton text
-          </button>
-        </div>
-      </div>
-      <button
-        class="flex row alignItems_center justifyContent_center closeIconContainer buttonReset"
-        data-id="onboarding_close_icon"
-        data-test-id="onboarding_close_icon"
-        data-title="Close"
-      >
-        <i
-          aria-hidden="true"
-          class="zd_font_icons basic icon-inapp-close  closeIcon  "
-          data-id="fontIcon"
-          data-selector-id="fontIcon"
-          data-test-id="fontIcon"
-        />
-      </button>
-      <span
-        class="basic newRibbon palette_primary  medium flag"
-        data-id="onboarding_ribbon"
-        data-selector-id="ribbon"
-        data-test-id="onboarding_ribbon"
-      >
-        <span
-          class="childText"
-        >
-          New
-        </span>
-      </span>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-exports[`Onboarding rendering  data of customprops for ribbonProps  1`] = `
-<DocumentFragment>
-  <div
-    class="mainContainer  mainContainerAnimation"
-    data-drag-container="true"
-    data-id="onboarding_container"
-    data-test-id="onboarding_container"
-    style="z-index: 4;"
-  >
-    <div
-      class="mainWrapper"
-    >
-      <div
-        class="gradientLayer"
-      >
-        <div
-          class="circleBlur circleBlurOne"
-        />
-        <div
-          class="circleBlur circleBlurTwo"
-        />
-      </div>
-      <div
-        class="flex row alignItems_center footer"
-        data-id="flex"
-        data-test-id="flex"
-      >
-        <div
-          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
-          data-id="flex"
-          data-test-id="flex"
-        >
-          <button
-            class="primaryButton footerButton  bold primaryfilled medium"
-            data-id="onboarding_primary_button"
-            data-selector-id="button"
-            data-test-id="onboarding_primary_button"
-            data-title="Got it"
-            type="button"
-          >
-            Got it
-          </button>
-        </div>
-      </div>
-      <button
-        class="flex row alignItems_center justifyContent_center closeIconContainer buttonReset"
-        data-id="onboarding_close_icon"
-        data-test-id="onboarding_close_icon"
-        data-title="Close"
-      >
-        <i
-          aria-hidden="true"
-          class="zd_font_icons basic icon-inapp-close  closeIcon  "
-          data-id="fontIcon"
-          data-selector-id="fontIcon"
-          data-test-id="fontIcon"
-        />
-      </button>
-      <span
-        class="basic newRibbon palette_primary  medium sticker"
-        data-id="onboarding_ribbon"
-        data-selector-id="ribbon"
-        data-test-id="onboarding_ribbon"
-      >
-        <span
-          class="after"
-        />
-        <span
-          class="childText"
-        >
-          New
-        </span>
-        <span
-          class="before"
-        />
-      </span>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-exports[`Onboarding rendering  data of customprops for secondaryButtonLinkProps  1`] = `
-<DocumentFragment>
-  <div
-    class="mainContainer  mainContainerAnimation"
-    data-drag-container="true"
-    data-id="onboarding_container"
-    data-test-id="onboarding_container"
-    style="z-index: 4;"
-  >
-    <div
-      class="mainWrapper"
-    >
-      <div
-        class="gradientLayer"
-      >
-        <div
-          class="circleBlur circleBlurOne"
-        />
-        <div
-          class="circleBlur circleBlurTwo"
-        />
-      </div>
-      <div
-        class="carousel dragCursor"
-        data-drag-hook="true"
-      >
-        <div
-          class="flex row carouselInner"
-          data-id="flex"
-          data-test-id="flex"
-          style="--local_translate_movement: 0%;"
-        >
-          <div
-            class="flex column noShrink carouselItem"
-            data-id="flex"
-            data-test-id="flex"
-          >
-            <div
-              class="flex row alignItems_center justifyContent_center fullSize header"
-              data-id="flex"
-              data-test-id="flex"
-            >
-              <div
-                class="innerHead "
-              />
-            </div>
-            <div
-              class="scroll_vertical content"
-              data-id="flex"
-              data-test-id="flex"
-            >
-              <div
-                class="size20 lineclamp_3 lineheight_1_4 font_bold heading"
-              />
-              <div
-                class="size14 lineclamp_4 lineheight_1_6 description"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="flex row alignItems_center footer"
-        data-id="flex"
-        data-test-id="flex"
-      >
-        <div
-          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
-          data-id="flex"
-          data-test-id="flex"
-        >
-          <a
-            class="container  secondaryButtton secondaryButttonLink footerButton "
-            data-id="onboarding_secondary_button_link"
-            data-test-id="onboarding_secondary_button_link"
-            data-title="learn more"
-            href="https://gc.zoho.com/org/746519053/widgets/4398000000528001"
-            rel="noopener noreferrer"
-            target="_self"
-          >
-            learn more
-          </a>
-          <button
-            class="primaryButton footerButton  bold primaryfilled medium"
-            data-id="onboarding_primary_button"
-            data-selector-id="button"
-            data-test-id="onboarding_primary_button"
-            data-title="Got it"
-            type="button"
-          >
-            Got it
-          </button>
-        </div>
-      </div>
-      <button
-        class="flex row alignItems_center justifyContent_center closeIconContainer buttonReset"
-        data-id="onboarding_close_icon"
-        data-test-id="onboarding_close_icon"
-        data-title="Close"
-      >
-        <i
-          aria-hidden="true"
-          class="zd_font_icons basic icon-inapp-close  closeIcon  "
-          data-id="fontIcon"
-          data-selector-id="fontIcon"
-          data-test-id="fontIcon"
-        />
-      </button>
-      <span
-        class="basic newRibbon palette_primary  medium flag"
-        data-id="onboarding_ribbon"
-        data-selector-id="ribbon"
-        data-test-id="onboarding_ribbon"
-      >
-        <span
-          class="childText"
-        >
-          New
-        </span>
-      </span>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-exports[`Onboarding rendering  data of image with hasVideoPlayButton  1`] = `
-<DocumentFragment>
-  <div
-    class="mainContainer  mainContainerAnimation"
-    data-drag-container="true"
-    data-id="onboarding_container"
-    data-test-id="onboarding_container"
-    style="z-index: 4;"
-  >
-    <div
-      class="mainWrapper"
-    >
-      <div
-        class="gradientLayer"
-      >
-        <div
-          class="circleBlur circleBlurOne"
-        />
-        <div
-          class="circleBlur circleBlurTwo"
-        />
-      </div>
-      <div
-        class="carousel dragCursor"
-        data-drag-hook="true"
-      >
-        <div
-          class="flex row carouselInner"
-          data-id="flex"
-          data-test-id="flex"
-          style="--local_translate_movement: 0%;"
-        >
-          <div
-            class="flex column noShrink carouselItem"
-            data-id="flex"
-            data-test-id="flex"
-          >
-            <div
-              class="flex row alignItems_center justifyContent_center fullSize header"
-              data-id="flex"
-              data-test-id="flex"
-            >
-              <div
-                class="innerHead dvLayer"
-              >
-                <img
-                  class=" mediaElement image imgMaxFullSize "
-                  src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ3Mu0NdfXXqvCExZ9YG_j93CKuU4DIdcIlEQ&s"
-                />
-                <div
-                  class="flex row alignItems_center justifyContent_center playIconWrapper"
-                  data-id="flex"
-                  data-test-id="flex"
-                >
-                  <button
-                    class="flex row alignItems_center justifyContent_center playIcon undefined buttonReset"
-                    data-id="onboarding_play_icon"
-                    data-test-id="onboarding_play_icon"
-                  >
-                    <i
-                      aria-hidden="true"
-                      class="zd_font_icons basic icon-arrowFill  playIconInner  "
-                      data-id="fontIcon"
-                      data-selector-id="fontIcon"
-                      data-test-id="fontIcon"
-                    />
-                  </button>
-                </div>
-              </div>
-            </div>
-            <div
-              class="scroll_vertical content"
-              data-id="flex"
-              data-test-id="flex"
-            >
-              <div
-                class="size20 lineclamp_3 lineheight_1_4 font_bold heading"
-              />
-              <div
-                class="size14 lineclamp_4 lineheight_1_6 description"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="flex row alignItems_center footer"
-        data-id="flex"
-        data-test-id="flex"
-      >
-        <div
-          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
-          data-id="flex"
-          data-test-id="flex"
-        >
-          <button
-            class="primaryButton footerButton  bold primaryfilled medium"
-            data-id="onboarding_primary_button"
-            data-selector-id="button"
-            data-test-id="onboarding_primary_button"
-            data-title="Got it"
-            type="button"
-          >
-            Got it
-          </button>
-        </div>
-      </div>
-      <button
-        class="flex row alignItems_center justifyContent_center closeIconContainer buttonReset"
-        data-id="onboarding_close_icon"
-        data-test-id="onboarding_close_icon"
-        data-title="Close"
-      >
-        <i
-          aria-hidden="true"
-          class="zd_font_icons basic icon-inapp-close  closeIcon  "
-          data-id="fontIcon"
-          data-selector-id="fontIcon"
-          data-test-id="fontIcon"
-        />
-      </button>
-      <span
-        class="basic newRibbon palette_primary  medium flag"
-        data-id="onboarding_ribbon"
-        data-selector-id="ribbon"
-        data-test-id="onboarding_ribbon"
-      >
-        <span
-          class="childText"
-        >
-          New
-        </span>
-      </span>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-exports[`Onboarding rendering  data of image without hasVideoPlayButton 1`] = `
-<DocumentFragment>
-  <div
-    class="mainContainer  mainContainerAnimation"
-    data-drag-container="true"
-    data-id="onboarding_container"
-    data-test-id="onboarding_container"
-    style="z-index: 4;"
-  >
-    <div
-      class="mainWrapper"
-    >
-      <div
-        class="gradientLayer"
-      >
-        <div
-          class="circleBlur circleBlurOne"
-        />
-        <div
-          class="circleBlur circleBlurTwo"
-        />
-      </div>
-      <div
-        class="carousel dragCursor"
-        data-drag-hook="true"
-      >
-        <div
-          class="flex row carouselInner"
-          data-id="flex"
-          data-test-id="flex"
-          style="--local_translate_movement: 0%;"
-        >
-          <div
-            class="flex column noShrink carouselItem"
-            data-id="flex"
-            data-test-id="flex"
-          >
-            <div
-              class="flex row alignItems_center justifyContent_center fullSize header"
-              data-id="flex"
-              data-test-id="flex"
-            >
-              <div
-                class="innerHead "
-              >
-                <img
-                  class=" mediaElement image imgMaxFullSize "
-                  src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ3Mu0NdfXXqvCExZ9YG_j93CKuU4DIdcIlEQ&s"
-                />
-              </div>
-            </div>
-            <div
-              class="scroll_vertical content"
-              data-id="flex"
-              data-test-id="flex"
-            >
-              <div
-                class="size20 lineclamp_3 lineheight_1_4 font_bold heading"
-              />
-              <div
-                class="size14 lineclamp_4 lineheight_1_6 description"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="flex row alignItems_center footer"
-        data-id="flex"
-        data-test-id="flex"
-      >
-        <div
-          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
-          data-id="flex"
-          data-test-id="flex"
-        >
-          <button
-            class="primaryButton footerButton  bold primaryfilled medium"
-            data-id="onboarding_primary_button"
-            data-selector-id="button"
-            data-test-id="onboarding_primary_button"
-            data-title="Got it"
-            type="button"
-          >
-            Got it
-          </button>
-        </div>
-      </div>
-      <button
-        class="flex row alignItems_center justifyContent_center closeIconContainer buttonReset"
-        data-id="onboarding_close_icon"
-        data-test-id="onboarding_close_icon"
-        data-title="Close"
-      >
-        <i
-          aria-hidden="true"
-          class="zd_font_icons basic icon-inapp-close  closeIcon  "
-          data-id="fontIcon"
-          data-selector-id="fontIcon"
-          data-test-id="fontIcon"
-        />
-      </button>
-      <span
-        class="basic newRibbon palette_primary  medium flag"
-        data-id="onboarding_ribbon"
-        data-selector-id="ribbon"
-        data-test-id="onboarding_ribbon"
-      >
-        <span
-          class="childText"
-        >
-          New
-        </span>
-      </span>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-exports[`Onboarding rendering  data of videoSource  1`] = `
-<DocumentFragment>
-  <div
-    class="mainContainer  mainContainerAnimation"
-    data-drag-container="true"
-    data-id="onboarding_container"
-    data-test-id="onboarding_container"
-    style="z-index: 4;"
-  >
-    <div
-      class="mainWrapper"
-    >
-      <div
-        class="gradientLayer"
-      >
-        <div
-          class="circleBlur circleBlurOne"
-        />
-        <div
-          class="circleBlur circleBlurTwo"
-        />
-      </div>
-      <div
-        class="carousel dragCursor"
-        data-drag-hook="true"
-      >
-        <div
-          class="flex row carouselInner"
-          data-id="flex"
-          data-test-id="flex"
-          style="--local_translate_movement: 0%;"
-        >
-          <div
-            class="flex column noShrink carouselItem"
-            data-id="flex"
-            data-test-id="flex"
-          >
-            <div
-              class="flex row alignItems_center justifyContent_center fullSize header"
-              data-id="flex"
-              data-test-id="flex"
-            >
-              <div
-                class="innerHead "
-              >
-                <video
-                  autoplay=""
-                  class="mediaElement"
-                  loop=""
-                >
-                  <source
-                    src="https://www.w3schools.com/html/mov_bbb.mp4"
-                    type="video/mp4"
-                  />
-                </video>
-              </div>
-            </div>
-            <div
-              class="scroll_vertical content"
-              data-id="flex"
-              data-test-id="flex"
-            >
-              <div
-                class="size20 lineclamp_3 lineheight_1_4 font_bold heading"
-              />
-              <div
-                class="size14 lineclamp_4 lineheight_1_6 description"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="flex row alignItems_center footer"
-        data-id="flex"
-        data-test-id="flex"
-      >
-        <div
-          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
-          data-id="flex"
-          data-test-id="flex"
-        >
-          <button
-            class="primaryButton footerButton  bold primaryfilled medium"
-            data-id="onboarding_primary_button"
-            data-selector-id="button"
-            data-test-id="onboarding_primary_button"
-            data-title="Got it"
-            type="button"
-          >
-            Got it
-          </button>
-        </div>
-      </div>
-      <button
-        class="flex row alignItems_center justifyContent_center closeIconContainer buttonReset"
-        data-id="onboarding_close_icon"
-        data-test-id="onboarding_close_icon"
-        data-title="Close"
-      >
-        <i
-          aria-hidden="true"
-          class="zd_font_icons basic icon-inapp-close  closeIcon  "
-          data-id="fontIcon"
-          data-selector-id="fontIcon"
-          data-test-id="fontIcon"
-        />
-      </button>
-      <span
-        class="basic newRibbon palette_primary  medium flag"
-        data-id="onboarding_ribbon"
-        data-selector-id="ribbon"
-        data-test-id="onboarding_ribbon"
-      >
-        <span
-          class="childText"
-        >
-          New
-        </span>
-      </span>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-exports[`Onboarding rendering data of SecondaryButton as link 1`] = `
-<DocumentFragment>
-  <div
-    class="mainContainer  mainContainerAnimation"
-    data-drag-container="true"
-    data-id="onboarding_container"
-    data-test-id="onboarding_container"
-    style="z-index: 4;"
-  >
-    <div
-      class="mainWrapper"
-    >
-      <div
-        class="gradientLayer"
-      >
-        <div
-          class="circleBlur circleBlurOne"
-        />
-        <div
-          class="circleBlur circleBlurTwo"
-        />
-      </div>
-      <div
-        class="carousel dragCursor"
-        data-drag-hook="true"
-      >
-        <div
-          class="flex row carouselInner"
-          data-id="flex"
-          data-test-id="flex"
-          style="--local_translate_movement: 0%;"
-        >
-          <div
-            class="flex column noShrink carouselItem"
-            data-id="flex"
-            data-test-id="flex"
-          >
-            <div
-              class="flex row alignItems_center justifyContent_center fullSize header"
-              data-id="flex"
-              data-test-id="flex"
-            >
-              <div
-                class="innerHead "
-              />
-            </div>
-            <div
-              class="scroll_vertical content"
-              data-id="flex"
-              data-test-id="flex"
-            >
-              <div
-                class="size20 lineclamp_3 lineheight_1_4 font_bold heading"
-              />
-              <div
-                class="size14 lineclamp_4 lineheight_1_6 description"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="flex row alignItems_center footer"
-        data-id="flex"
-        data-test-id="flex"
-      >
-        <div
-          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
-          data-id="flex"
-          data-test-id="flex"
-        >
-          <a
-            class="container  secondaryButtton secondaryButttonLink footerButton "
-            data-id="onboarding_secondary_button_link"
-            data-test-id="onboarding_secondary_button_link"
-            data-title="read more"
-            href="https://gc.zoho.com/org/746519053/widgets/4398000000528001"
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            read more
-          </a>
-          <button
-            class="primaryButton footerButton  bold primaryfilled medium"
-            data-id="onboarding_primary_button"
-            data-selector-id="button"
-            data-test-id="onboarding_primary_button"
-            data-title="Got it"
-            type="button"
-          >
-            Got it
-          </button>
-        </div>
-      </div>
-      <button
-        class="flex row alignItems_center justifyContent_center closeIconContainer buttonReset"
-        data-id="onboarding_close_icon"
-        data-test-id="onboarding_close_icon"
-        data-title="Close"
-      >
-        <i
-          aria-hidden="true"
-          class="zd_font_icons basic icon-inapp-close  closeIcon  "
-          data-id="fontIcon"
-          data-selector-id="fontIcon"
-          data-test-id="fontIcon"
-        />
-      </button>
-      <span
-        class="basic newRibbon palette_primary  medium flag"
-        data-id="onboarding_ribbon"
-        data-selector-id="ribbon"
-        data-test-id="onboarding_ribbon"
-      >
-        <span
-          class="childText"
-        >
-          New
-        </span>
-      </span>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-exports[`Onboarding rendering data of Video with videoFormats 1`] = `
-<DocumentFragment>
-  <div
-    class="mainContainer  mainContainerAnimation"
-    data-drag-container="true"
-    data-id="onboarding_container"
-    data-test-id="onboarding_container"
-    style="z-index: 4;"
-  >
-    <div
-      class="mainWrapper"
-    >
-      <div
-        class="gradientLayer"
-      >
-        <div
-          class="circleBlur circleBlurOne"
-        />
-        <div
-          class="circleBlur circleBlurTwo"
-        />
-      </div>
-      <div
-        class="carousel dragCursor"
-        data-drag-hook="true"
-      >
-        <div
-          class="flex row carouselInner"
-          data-id="flex"
-          data-test-id="flex"
-          style="--local_translate_movement: 0%;"
-        >
-          <div
-            class="flex column noShrink carouselItem"
-            data-id="flex"
-            data-test-id="flex"
-          >
-            <div
-              class="flex row alignItems_center justifyContent_center fullSize header"
-              data-id="flex"
-              data-test-id="flex"
-            >
-              <div
-                class="innerHead dvLayer"
-              >
-                <video
-                  autoplay=""
-                  class="mediaElement"
-                  loop=""
-                >
-                  <source
-                    src="https://www.w3schools.com/html/mov_bbb.mp4"
-                    type="video/mp4"
-                  />
-                </video>
-                <div
-                  class="flex row alignItems_center justifyContent_center playIconWrapper"
-                  data-id="flex"
-                  data-test-id="flex"
-                >
-                  <button
-                    class="flex row alignItems_center justifyContent_center playIcon undefined buttonReset"
-                    data-id="onboarding_play_icon"
-                    data-test-id="onboarding_play_icon"
-                  >
-                    <i
-                      aria-hidden="true"
-                      class="zd_font_icons basic icon-arrowFill  playIconInner  "
-                      data-id="fontIcon"
-                      data-selector-id="fontIcon"
-                      data-test-id="fontIcon"
-                    />
-                  </button>
-                </div>
-              </div>
-            </div>
-            <div
-              class="scroll_vertical content"
-              data-id="flex"
-              data-test-id="flex"
-            >
-              <div
-                class="size20 lineclamp_3 lineheight_1_4 font_bold heading"
-              />
-              <div
-                class="size14 lineclamp_4 lineheight_1_6 description"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="flex row alignItems_center footer"
-        data-id="flex"
-        data-test-id="flex"
-      >
-        <div
-          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
-          data-id="flex"
-          data-test-id="flex"
-        >
-          <button
-            class="primaryButton footerButton  bold primaryfilled medium"
-            data-id="onboarding_primary_button"
-            data-selector-id="button"
-            data-test-id="onboarding_primary_button"
-            data-title="Got it"
-            type="button"
-          >
-            Got it
-          </button>
-        </div>
-      </div>
-      <button
-        class="flex row alignItems_center justifyContent_center closeIconContainer buttonReset"
-        data-id="onboarding_close_icon"
-        data-test-id="onboarding_close_icon"
-        data-title="Close"
-      >
-        <i
-          aria-hidden="true"
-          class="zd_font_icons basic icon-inapp-close  closeIcon  "
-          data-id="fontIcon"
-          data-selector-id="fontIcon"
-          data-test-id="fontIcon"
-        />
-      </button>
-      <span
-        class="basic newRibbon palette_primary  medium flag"
-        data-id="onboarding_ribbon"
-        data-selector-id="ribbon"
-        data-test-id="onboarding_ribbon"
-      >
-        <span
-          class="childText"
-        >
-          New
-        </span>
-      </span>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-exports[`Onboarding rendering data of hasBouncAnimationOnMount 1`] = `
-<DocumentFragment>
-  <div
-    class="mainContainer  mainContainerAnimation"
-    data-drag-container="true"
-    data-id="onboarding_container"
-    data-test-id="onboarding_container"
-    style="z-index: 4;"
-  >
-    <div
-      class="mainWrapper"
-    >
-      <div
-        class="gradientLayer"
-      >
-        <div
-          class="circleBlur circleBlurOne"
-        />
-        <div
-          class="circleBlur circleBlurTwo"
-        />
-      </div>
-      <div
-        class="flex row alignItems_center footer"
-        data-id="flex"
-        data-test-id="flex"
-      >
-        <div
-          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
-          data-id="flex"
-          data-test-id="flex"
-        >
-          <button
-            class="primaryButton footerButton  bold primaryfilled medium"
-            data-id="onboarding_primary_button"
-            data-selector-id="button"
-            data-test-id="onboarding_primary_button"
-            data-title="Got it"
-            type="button"
-          >
-            Got it
-          </button>
-        </div>
-      </div>
-      <button
-        class="flex row alignItems_center justifyContent_center closeIconContainer buttonReset"
-        data-id="onboarding_close_icon"
-        data-test-id="onboarding_close_icon"
-        data-title="Close"
-      >
-        <i
-          aria-hidden="true"
-          class="zd_font_icons basic icon-inapp-close  closeIcon  "
-          data-id="fontIcon"
-          data-selector-id="fontIcon"
-          data-test-id="fontIcon"
-        />
-      </button>
-      <span
-        class="basic newRibbon palette_primary  medium flag"
-        data-id="onboarding_ribbon"
-        data-selector-id="ribbon"
-        data-test-id="onboarding_ribbon"
-      >
-        <span
-          class="childText"
-        >
-          New
-        </span>
-      </span>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-exports[`Onboarding rendering data of hasCloseIcon 1`] = `
-<DocumentFragment>
-  <div
-    class="mainContainer  mainContainerAnimation"
-    data-drag-container="true"
-    data-id="onboarding_container"
-    data-test-id="onboarding_container"
-    style="z-index: 4;"
-  >
-    <div
-      class="mainWrapper"
-    >
-      <div
-        class="gradientLayer"
-      >
-        <div
-          class="circleBlur circleBlurOne"
-        />
-        <div
-          class="circleBlur circleBlurTwo"
-        />
-      </div>
-      <div
-        class="flex row alignItems_center footer"
-        data-id="flex"
-        data-test-id="flex"
-      >
-        <div
-          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
-          data-id="flex"
-          data-test-id="flex"
-        >
-          <button
-            class="primaryButton footerButton  bold primaryfilled medium"
-            data-id="onboarding_primary_button"
-            data-selector-id="button"
-            data-test-id="onboarding_primary_button"
-            data-title="Got it"
-            type="button"
-          >
-            Got it
-          </button>
-        </div>
-      </div>
-      <button
-        class="flex row alignItems_center justifyContent_center closeIconContainer buttonReset"
-        data-id="onboarding_close_icon"
-        data-test-id="onboarding_close_icon"
-        data-title="Close"
-      >
-        <i
-          aria-hidden="true"
-          class="zd_font_icons basic icon-inapp-close  closeIcon  "
-          data-id="fontIcon"
-          data-selector-id="fontIcon"
-          data-test-id="fontIcon"
-        />
-      </button>
-      <span
-        class="basic newRibbon palette_primary  medium flag"
-        data-id="onboarding_ribbon"
-        data-selector-id="ribbon"
-        data-test-id="onboarding_ribbon"
-      >
-        <span
-          class="childText"
-        >
-          New
-        </span>
-      </span>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-exports[`Onboarding rendering data of primaryButtonText 1`] = `
-<DocumentFragment>
-  <div
-    class="mainContainer  mainContainerAnimation"
-    data-drag-container="true"
-    data-id="onboarding_container"
-    data-test-id="onboarding_container"
-    style="z-index: 4;"
-  >
-    <div
-      class="mainWrapper"
-    >
-      <div
-        class="gradientLayer"
-      >
-        <div
-          class="circleBlur circleBlurOne"
-        />
-        <div
-          class="circleBlur circleBlurTwo"
-        />
-      </div>
-      <div
-        class="carousel dragCursor"
-        data-drag-hook="true"
-      >
-        <div
-          class="flex row carouselInner"
-          data-id="flex"
-          data-test-id="flex"
-          style="--local_translate_movement: 0%;"
-        >
-          <div
-            class="flex column noShrink carouselItem"
-            data-id="flex"
-            data-test-id="flex"
-          >
-            <div
-              class="flex row alignItems_center justifyContent_center fullSize header"
-              data-id="flex"
-              data-test-id="flex"
-            >
-              <div
-                class="innerHead "
-              />
-            </div>
-            <div
-              class="scroll_vertical content"
-              data-id="flex"
-              data-test-id="flex"
-            >
-              <div
-                class="size20 lineclamp_3 lineheight_1_4 font_bold heading"
-              />
-              <div
-                class="size14 lineclamp_4 lineheight_1_6 description"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="flex row alignItems_center footer"
-        data-id="flex"
-        data-test-id="flex"
-      >
-        <div
-          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
-          data-id="flex"
-          data-test-id="flex"
-        >
-          <button
-            class="primaryButton footerButton  bold primaryfilled medium"
-            data-id="onboarding_primary_button"
-            data-selector-id="button"
-            data-test-id="onboarding_primary_button"
-            data-title="Got it"
-            type="button"
-          >
-            Got it
-          </button>
-        </div>
-      </div>
-      <button
-        class="flex row alignItems_center justifyContent_center closeIconContainer buttonReset"
-        data-id="onboarding_close_icon"
-        data-test-id="onboarding_close_icon"
-        data-title="Close"
-      >
-        <i
-          aria-hidden="true"
-          class="zd_font_icons basic icon-inapp-close  closeIcon  "
-          data-id="fontIcon"
-          data-selector-id="fontIcon"
-          data-test-id="fontIcon"
-        />
-      </button>
-      <span
-        class="basic newRibbon palette_primary  medium flag"
-        data-id="onboarding_ribbon"
-        data-selector-id="ribbon"
-        data-test-id="onboarding_ribbon"
-      >
-        <span
-          class="childText"
-        >
-          New
-        </span>
-      </span>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-exports[`Onboarding rendering data of secondaryButtonText 1`] = `
-<DocumentFragment>
-  <div
-    class="mainContainer  mainContainerAnimation"
-    data-drag-container="true"
-    data-id="onboarding_container"
-    data-test-id="onboarding_container"
-    style="z-index: 4;"
-  >
-    <div
-      class="mainWrapper"
-    >
-      <div
-        class="gradientLayer"
-      >
-        <div
-          class="circleBlur circleBlurOne"
-        />
-        <div
-          class="circleBlur circleBlurTwo"
-        />
-      </div>
-      <div
-        class="carousel dragCursor"
-        data-drag-hook="true"
-      >
-        <div
-          class="flex row carouselInner"
-          data-id="flex"
-          data-test-id="flex"
-          style="--local_translate_movement: 0%;"
-        >
-          <div
-            class="flex column noShrink carouselItem"
-            data-id="flex"
-            data-test-id="flex"
-          >
-            <div
-              class="flex row alignItems_center justifyContent_center fullSize header"
-              data-id="flex"
-              data-test-id="flex"
-            >
-              <div
-                class="innerHead "
-              />
-            </div>
-            <div
-              class="scroll_vertical content"
-              data-id="flex"
-              data-test-id="flex"
-            >
-              <div
-                class="size20 lineclamp_3 lineheight_1_4 font_bold heading"
-              />
-              <div
-                class="size14 lineclamp_4 lineheight_1_6 description"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="flex row alignItems_center footer"
-        data-id="flex"
-        data-test-id="flex"
-      >
-        <div
-          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
-          data-id="flex"
-          data-test-id="flex"
-        >
-          <button
-            class=" secondaryButtton footerButton  bold primary medium"
-            data-id="onboarding_secondary_button"
-            data-selector-id="button"
-            data-test-id="onboarding_secondary_button"
-            data-title="read more"
-            type="button"
-          >
-            read more
-          </button>
-          <button
-            class="primaryButton footerButton  bold primaryfilled medium"
-            data-id="onboarding_primary_button"
-            data-selector-id="button"
-            data-test-id="onboarding_primary_button"
-            data-title="Got it"
-            type="button"
-          >
-            Got it
-          </button>
-        </div>
-      </div>
-      <button
-        class="flex row alignItems_center justifyContent_center closeIconContainer buttonReset"
-        data-id="onboarding_close_icon"
-        data-test-id="onboarding_close_icon"
-        data-title="Close"
-      >
-        <i
-          aria-hidden="true"
-          class="zd_font_icons basic icon-inapp-close  closeIcon  "
-          data-id="fontIcon"
-          data-selector-id="fontIcon"
-          data-test-id="fontIcon"
-        />
-      </button>
-      <span
-        class="basic newRibbon palette_primary  medium flag"
-        data-id="onboarding_ribbon"
-        data-selector-id="ribbon"
-        data-test-id="onboarding_ribbon"
-      >
-        <span
-          class="childText"
-        >
-          New
-        </span>
-      </span>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-exports[`Onboarding rendering data of sliderData with heading and description 1`] = `
-<DocumentFragment>
-  <div
-    class="mainContainer  mainContainerAnimation"
-    data-drag-container="true"
-    data-id="onboarding_container"
-    data-test-id="onboarding_container"
-    style="z-index: 4;"
-  >
-    <div
-      class="mainWrapper"
-    >
-      <div
-        class="gradientLayer"
-      >
-        <div
-          class="circleBlur circleBlurOne"
-        />
-        <div
-          class="circleBlur circleBlurTwo"
-        />
-      </div>
-      <div
-        class="carousel dragCursor"
-        data-drag-hook="true"
-      >
-        <div
-          class="flex row carouselInner"
-          data-id="flex"
-          data-test-id="flex"
-          style="--local_translate_movement: 0%;"
-        >
-          <div
-            class="flex column noShrink carouselItem"
-            data-id="flex"
-            data-test-id="flex"
-          >
-            <div
-              class="flex row alignItems_center justifyContent_center fullSize header"
-              data-id="flex"
-              data-test-id="flex"
-            >
-              <div
-                class="innerHead "
-              />
-            </div>
-            <div
-              class="scroll_vertical content"
-              data-id="flex"
-              data-test-id="flex"
-            >
-              <div
-                class="size20 lineclamp_3 lineheight_1_4 font_bold heading"
-                data-title="Onboarding Heading"
-              >
-                Onboarding Heading
-              </div>
-              <div
-                class="size14 lineclamp_4 lineheight_1_6 description"
-                data-title="Onboarding Description"
-              >
-                Onboarding Description
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="flex row alignItems_center footer"
-        data-id="flex"
-        data-test-id="flex"
-      >
-        <div
-          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
-          data-id="flex"
-          data-test-id="flex"
-        >
-          <button
-            class="primaryButton footerButton  bold primaryfilled medium"
-            data-id="onboarding_primary_button"
-            data-selector-id="button"
-            data-test-id="onboarding_primary_button"
-            data-title="Got it"
-            type="button"
-          >
-            Got it
-          </button>
-        </div>
-      </div>
-      <button
-        class="flex row alignItems_center justifyContent_center closeIconContainer buttonReset"
-        data-id="onboarding_close_icon"
-        data-test-id="onboarding_close_icon"
-        data-title="Close"
-      >
-        <i
-          aria-hidden="true"
-          class="zd_font_icons basic icon-inapp-close  closeIcon  "
-          data-id="fontIcon"
-          data-selector-id="fontIcon"
-          data-test-id="fontIcon"
-        />
-      </button>
-      <span
-        class="basic newRibbon palette_primary  medium flag"
-        data-id="onboarding_ribbon"
-        data-selector-id="ribbon"
-        data-test-id="onboarding_ribbon"
-      >
-        <span
-          class="childText"
-        >
-          New
-        </span>
-      </span>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-exports[`Onboarding rendering data of sliderData with image  1`] = `
-<DocumentFragment>
-  <div
-    class="mainContainer  mainContainerAnimation"
-    data-drag-container="true"
-    data-id="onboarding_container"
-    data-test-id="onboarding_container"
-    style="z-index: 4;"
-  >
-    <div
-      class="mainWrapper"
-    >
-      <div
-        class="gradientLayer"
-      >
-        <div
-          class="circleBlur circleBlurOne"
-        />
-        <div
-          class="circleBlur circleBlurTwo"
-        />
-      </div>
-      <div
-        class="carousel dragCursor"
-        data-drag-hook="true"
-      >
-        <div
-          class="flex row carouselInner"
-          data-id="flex"
-          data-test-id="flex"
-          style="--local_translate_movement: 0%;"
-        >
-          <div
-            class="flex column noShrink carouselItem"
-            data-id="flex"
-            data-test-id="flex"
-          >
-            <div
-              class="flex row alignItems_center justifyContent_center fullSize header"
-              data-id="flex"
-              data-test-id="flex"
-            >
-              <div
-                class="innerHead "
-              >
-                <img
-                  class=" mediaElement image imgMaxFullSize "
-                  src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ3Mu0NdfXXqvCExZ9YG_j93CKuU4DIdcIlEQ&s"
-                />
-              </div>
-            </div>
-            <div
-              class="scroll_vertical content"
-              data-id="flex"
-              data-test-id="flex"
-            >
-              <div
-                class="size20 lineclamp_3 lineheight_1_4 font_bold heading"
-              />
-              <div
-                class="size14 lineclamp_4 lineheight_1_6 description"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="flex row alignItems_center footer"
-        data-id="flex"
-        data-test-id="flex"
-      >
-        <div
-          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
-          data-id="flex"
-          data-test-id="flex"
-        >
-          <button
-            class="primaryButton footerButton  bold primaryfilled medium"
-            data-id="onboarding_primary_button"
-            data-selector-id="button"
-            data-test-id="onboarding_primary_button"
-            data-title="Got it"
-            type="button"
-          >
-            Got it
-          </button>
-        </div>
-      </div>
-      <button
-        class="flex row alignItems_center justifyContent_center closeIconContainer buttonReset"
-        data-id="onboarding_close_icon"
-        data-test-id="onboarding_close_icon"
-        data-title="Close"
-      >
-        <i
-          aria-hidden="true"
-          class="zd_font_icons basic icon-inapp-close  closeIcon  "
-          data-id="fontIcon"
-          data-selector-id="fontIcon"
-          data-test-id="fontIcon"
-        />
-      </button>
-      <span
-        class="basic newRibbon palette_primary  medium flag"
-        data-id="onboarding_ribbon"
-        data-selector-id="ribbon"
-        data-test-id="onboarding_ribbon"
-      >
-        <span
-          class="childText"
-        >
-          New
-        </span>
-      </span>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-exports[`Onboarding rendering data of two sliderData 1`] = `
-<DocumentFragment>
-  <div
-    class="mainContainer  mainContainerAnimation"
-    data-drag-container="true"
-    data-id="onboarding_container"
-    data-test-id="onboarding_container"
-    style="z-index: 4;"
-  >
-    <div
-      class="mainWrapper"
-    >
-      <div
-        class="gradientLayer"
-      >
-        <div
-          class="circleBlur circleBlurOne"
-        />
-        <div
-          class="circleBlur circleBlurTwo"
-        />
-      </div>
-      <div
-        class="carousel dragCursor"
-        data-drag-hook="true"
-      >
-        <div
-          class="flex row carouselInner"
-          data-id="flex"
-          data-test-id="flex"
-          style="--local_translate_movement: 0%;"
-        >
-          <div
-            class="flex column noShrink carouselItem"
-            data-id="flex"
-            data-test-id="flex"
-          >
-            <div
-              class="flex row alignItems_center justifyContent_center fullSize header"
-              data-id="flex"
-              data-test-id="flex"
-            >
-              <div
-                class="innerHead "
-              />
-            </div>
-            <div
-              class="scroll_vertical content"
-              data-id="flex"
-              data-test-id="flex"
-            >
-              <div
-                class="size20 lineclamp_3 lineheight_1_4 font_bold heading"
-                data-title="Onboarding with carousel Slide 1"
-              >
-                Onboarding with carousel Slide 1
-              </div>
-              <div
-                class="size14 lineclamp_4 lineheight_1_6 description"
-              />
-            </div>
-          </div>
-          <div
-            class="flex column noShrink carouselItem"
-            data-id="flex"
-            data-test-id="flex"
-          >
-            <div
-              class="flex row alignItems_center justifyContent_center fullSize header"
-              data-id="flex"
-              data-test-id="flex"
-            >
-              <div
-                class="innerHead "
-              />
-            </div>
-            <div
-              class="scroll_vertical content"
-              data-id="flex"
-              data-test-id="flex"
-            >
-              <div
-                class="size20 lineclamp_3 lineheight_1_4 font_bold heading"
-                data-title="Onboarding with carousel Slide 2"
-              >
-                Onboarding with carousel Slide 2
-              </div>
-              <div
-                class="size14 lineclamp_4 lineheight_1_6 description"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="flex row alignItems_center footer"
-        data-id="flex"
-        data-test-id="flex"
-      >
-        <div
-          class="flex row alignItems_center justifyContent_center btnCnt"
-          data-id="onboarding_carousel_dots"
-          data-test-id="onboarding_carousel_dots"
-        >
-          <div
-            class="bullet  bulletActive"
-            data-id="onboarding_carousel_dots_0"
-            data-test-id="onboarding_carousel_dots_0"
-          />
-          <div
-            class="bullet  bulletNormal"
-            data-id="onboarding_carousel_dots_1"
-            data-test-id="onboarding_carousel_dots_1"
-          />
-        </div>
-        <div
-          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
-          data-id="flex"
-          data-test-id="flex"
-        >
-          <button
-            class="primaryButton footerButton  bold primaryfilled medium"
-            data-id="onboarding_primary_button"
-            data-selector-id="button"
-            data-test-id="onboarding_primary_button"
-            data-title="Got it"
-            type="button"
-          >
-            Got it
-          </button>
-        </div>
-      </div>
-      <button
-        class="flex row alignItems_center justifyContent_center closeIconContainer buttonReset"
-        data-id="onboarding_close_icon"
-        data-test-id="onboarding_close_icon"
-        data-title="Close"
-      >
-        <i
-          aria-hidden="true"
-          class="zd_font_icons basic icon-inapp-close  closeIcon  "
-          data-id="fontIcon"
-          data-selector-id="fontIcon"
-          data-test-id="fontIcon"
-        />
-      </button>
-      <span
-        class="basic newRibbon palette_primary  medium flag"
-        data-id="onboarding_ribbon"
-        data-selector-id="ribbon"
-        data-test-id="onboarding_ribbon"
-      >
-        <span
-          class="childText"
-        >
-          New
-        </span>
-      </span>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-exports[`Onboarding rendering data with a11yAttributes 1`] = `
-<DocumentFragment>
-  <div
-    class="mainContainer  mainContainerAnimation"
-    data-a11y-focus="true"
-    data-drag-container="true"
-    data-id="onboarding_container"
-    data-test-id="onboarding_container"
-    style="z-index: 4;"
-  >
-    <div
-      class="mainWrapper"
-    >
-      <div
-        class="gradientLayer"
-      >
-        <div
-          class="circleBlur circleBlurOne"
-        />
-        <div
-          class="circleBlur circleBlurTwo"
-        />
-      </div>
-      <div
-        class="flex row alignItems_center footer"
-        data-id="flex"
-        data-test-id="flex"
-      >
-        <div
-          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
-          data-id="flex"
-          data-test-id="flex"
-        >
-          <button
-            class="primaryButton footerButton  bold primaryfilled medium"
-            data-id="onboarding_primary_button"
-            data-selector-id="button"
-            data-test-id="onboarding_primary_button"
-            data-title="Got it"
-            type="button"
-          >
-            Got it
-          </button>
-        </div>
-      </div>
-      <button
-        class="flex row alignItems_center justifyContent_center closeIconContainer buttonReset"
-        data-id="onboarding_close_icon"
-        data-test-id="onboarding_close_icon"
-        data-title="Close"
-      >
-        <i
-          aria-hidden="true"
-          class="zd_font_icons basic icon-inapp-close  closeIcon  "
-          data-id="fontIcon"
-          data-selector-id="fontIcon"
-          data-test-id="fontIcon"
-        />
-      </button>
-      <span
-        class="basic newRibbon palette_primary  medium flag"
-        data-id="onboarding_ribbon"
-        data-selector-id="ribbon"
-        data-test-id="onboarding_ribbon"
-      >
-        <span
-          class="childText"
-        >
-          New
-        </span>
-      </span>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-exports[`Onboarding rendering data with closeIconTooltip 1`] = `
-<DocumentFragment>
-  <div
-    class="mainContainer  mainContainerAnimation"
-    data-drag-container="true"
-    data-id="onboarding_container"
-    data-test-id="onboarding_container"
-    style="z-index: 4;"
-  >
-    <div
-      class="mainWrapper"
-    >
-      <div
-        class="gradientLayer"
-      >
-        <div
-          class="circleBlur circleBlurOne"
-        />
-        <div
-          class="circleBlur circleBlurTwo"
-        />
-      </div>
-      <div
-        class="flex row alignItems_center footer"
-        data-id="flex"
-        data-test-id="flex"
-      >
-        <div
-          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
-          data-id="flex"
-          data-test-id="flex"
-        >
-          <button
-            class="primaryButton footerButton  bold primaryfilled medium"
-            data-id="onboarding_primary_button"
-            data-selector-id="button"
-            data-test-id="onboarding_primary_button"
-            data-title="Got it"
-            type="button"
-          >
-            Got it
-          </button>
-        </div>
-      </div>
-      <button
-        class="flex row alignItems_center justifyContent_center closeIconContainer buttonReset"
-        data-id="onboarding_close_icon"
-        data-test-id="onboarding_close_icon"
-        data-title="escape"
-      >
-        <i
-          aria-hidden="true"
-          class="zd_font_icons basic icon-inapp-close  closeIcon  "
-          data-id="fontIcon"
-          data-selector-id="fontIcon"
-          data-test-id="fontIcon"
-        />
-      </button>
-      <span
-        class="basic newRibbon palette_primary  medium flag"
-        data-id="onboarding_ribbon"
-        data-selector-id="ribbon"
-        data-test-id="onboarding_ribbon"
-      >
-        <span
-          class="childText"
-        >
-          New
-        </span>
-      </span>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-exports[`Onboarding rendering data with customStyle 1`] = `
-<DocumentFragment>
-  <div
-    class="mainContainer customMainContainer  mainContainerAnimation"
-    data-drag-container="true"
-    data-id="onboarding_container"
-    data-test-id="onboarding_container"
-    style="z-index: 4;"
-  >
-    <div
-      class="mainWrapper"
-    >
-      <div
-        class="gradientLayer"
-      >
-        <div
-          class="circleBlur circleBlurOne"
-        />
-        <div
-          class="circleBlur circleBlurTwo"
-        />
-      </div>
-      <div
-        class="flex row alignItems_center footer"
-        data-id="flex"
-        data-test-id="flex"
-      >
-        <div
-          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
-          data-id="flex"
-          data-test-id="flex"
-        >
-          <button
-            class="primaryButton footerButton  bold primaryfilled medium"
-            data-id="onboarding_primary_button"
-            data-selector-id="button"
-            data-test-id="onboarding_primary_button"
-            data-title="Got it"
-            type="button"
-          >
-            Got it
-          </button>
-        </div>
-      </div>
-      <button
-        class="flex row alignItems_center justifyContent_center closeIconContainer buttonReset"
-        data-id="onboarding_close_icon"
-        data-test-id="onboarding_close_icon"
-        data-title="Close"
-      >
-        <i
-          aria-hidden="true"
-          class="zd_font_icons basic icon-inapp-close  closeIcon  "
-          data-id="fontIcon"
-          data-selector-id="fontIcon"
-          data-test-id="fontIcon"
-        />
-      </button>
-      <span
-        class="basic newRibbon palette_primary  medium flag"
-        data-id="onboarding_ribbon"
-        data-selector-id="ribbon"
-        data-test-id="onboarding_ribbon"
-      >
-        <span
-          class="childText"
-        >
-          New
-        </span>
-      </span>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-exports[`Onboarding rendering data with hasExpandedButton - hasSecondaryButton as true, hasSecondaryButtonLink as false 1`] = `
-<DocumentFragment>
-  <div
-    class="mainContainer  mainContainerAnimation"
-    data-drag-container="true"
-    data-id="onboarding_container"
-    data-test-id="onboarding_container"
-    style="z-index: 4;"
-  >
-    <div
-      class="mainWrapper"
-    >
-      <div
-        class="gradientLayer"
-      >
-        <div
-          class="circleBlur circleBlurOne"
-        />
-        <div
-          class="circleBlur circleBlurTwo"
-        />
-      </div>
-      <div
-        class="carousel dragCursor"
-        data-drag-hook="true"
-      >
-        <div
-          class="flex row carouselInner"
-          data-id="flex"
-          data-test-id="flex"
-          style="--local_translate_movement: 0%;"
-        >
-          <div
-            class="flex column noShrink carouselItem"
-            data-id="flex"
-            data-test-id="flex"
-          >
-            <div
-              class="flex row alignItems_center justifyContent_center fullSize header"
-              data-id="flex"
-              data-test-id="flex"
-            >
-              <div
-                class="innerHead "
-              />
-            </div>
-            <div
-              class="scroll_vertical content"
-              data-id="flex"
-              data-test-id="flex"
-            >
-              <div
-                class="size20 lineclamp_3 lineheight_1_4 font_bold heading"
-              />
-              <div
-                class="size14 lineclamp_4 lineheight_1_6 description"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="flex column alignItems_center wrap footer"
-        data-id="flex"
-        data-test-id="flex"
-      >
-        <div
-          class="flex row justifyContent_end wrap flexible basis_zero shrink btnWrapper"
-          data-id="flex"
-          data-test-id="flex"
-        >
-          <button
-            class=" secondaryButtton footerButton expandedButton bold primary medium"
-            data-id="onboarding_secondary_button"
-            data-selector-id="button"
-            data-test-id="onboarding_secondary_button"
-            type="button"
-          >
-            Button
-          </button>
-          <button
-            class="primaryButton footerButton expandedButton bold primaryfilled medium"
-            data-id="onboarding_primary_button"
-            data-selector-id="button"
-            data-test-id="onboarding_primary_button"
-            data-title="Got it"
-            type="button"
-          >
-            Got it
-          </button>
-        </div>
-      </div>
-      <button
-        class="flex row alignItems_center justifyContent_center closeIconContainer buttonReset"
-        data-id="onboarding_close_icon"
-        data-test-id="onboarding_close_icon"
-        data-title="Close"
-      >
-        <i
-          aria-hidden="true"
-          class="zd_font_icons basic icon-inapp-close  closeIcon  "
-          data-id="fontIcon"
-          data-selector-id="fontIcon"
-          data-test-id="fontIcon"
-        />
-      </button>
-      <span
-        class="basic newRibbon palette_primary  medium flag"
-        data-id="onboarding_ribbon"
-        data-selector-id="ribbon"
-        data-test-id="onboarding_ribbon"
-      >
-        <span
-          class="childText"
-        >
-          New
-        </span>
-      </span>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-exports[`Onboarding rendering data with hasExpandedButton by hasSecondaryButton, hasSecondaryButtonLink as true 1`] = `
-<DocumentFragment>
-  <div
-    class="mainContainer  mainContainerAnimation"
-    data-drag-container="true"
-    data-id="onboarding_container"
-    data-test-id="onboarding_container"
-    style="z-index: 4;"
-  >
-    <div
-      class="mainWrapper"
-    >
-      <div
-        class="gradientLayer"
-      >
-        <div
-          class="circleBlur circleBlurOne"
-        />
-        <div
-          class="circleBlur circleBlurTwo"
-        />
-      </div>
-      <div
-        class="carousel dragCursor"
-        data-drag-hook="true"
-      >
-        <div
-          class="flex row carouselInner"
-          data-id="flex"
-          data-test-id="flex"
-          style="--local_translate_movement: 0%;"
-        >
-          <div
-            class="flex column noShrink carouselItem"
-            data-id="flex"
-            data-test-id="flex"
-          >
-            <div
-              class="flex row alignItems_center justifyContent_center fullSize header"
-              data-id="flex"
-              data-test-id="flex"
-            >
-              <div
-                class="innerHead "
-              />
-            </div>
-            <div
-              class="scroll_vertical content"
-              data-id="flex"
-              data-test-id="flex"
-            >
-              <div
-                class="size20 lineclamp_3 lineheight_1_4 font_bold heading"
-              />
-              <div
-                class="size14 lineclamp_4 lineheight_1_6 description"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="flex column alignItems_center wrap footer"
-        data-id="flex"
-        data-test-id="flex"
-      >
-        <div
-          class="flex row justifyContent_end wrap flexible basis_zero shrink btnWrapper"
-          data-id="flex"
-          data-test-id="flex"
-        >
-          <a
-            class="container  secondaryButtton secondaryButttonLink footerButton expandedButton"
-            data-id="onboarding_secondary_button_link"
-            data-test-id="onboarding_secondary_button_link"
-            href="https://gc.zoho.com/org/746519053/widgets/4398000000528001"
-            rel="noopener noreferrer"
-            target="_blank"
-          />
-          <button
-            class="primaryButton footerButton expandedButton bold primaryfilled medium"
-            data-id="onboarding_primary_button"
-            data-selector-id="button"
-            data-test-id="onboarding_primary_button"
-            data-title="Got it"
-            type="button"
-          >
-            Got it
-          </button>
-        </div>
-      </div>
-      <button
-        class="flex row alignItems_center justifyContent_center closeIconContainer buttonReset"
-        data-id="onboarding_close_icon"
-        data-test-id="onboarding_close_icon"
-        data-title="Close"
-      >
-        <i
-          aria-hidden="true"
-          class="zd_font_icons basic icon-inapp-close  closeIcon  "
-          data-id="fontIcon"
-          data-selector-id="fontIcon"
-          data-test-id="fontIcon"
-        />
-      </button>
-      <span
-        class="basic newRibbon palette_primary  medium flag"
-        data-id="onboarding_ribbon"
-        data-selector-id="ribbon"
-        data-test-id="onboarding_ribbon"
-      >
-        <span
-          class="childText"
-        >
-          New
-        </span>
-      </span>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-exports[`Onboarding rendering data with mediaElement 1`] = `
-<DocumentFragment>
-  <div
-    class="mainContainer  mainContainerAnimation"
-    data-drag-container="true"
-    data-id="onboarding_container"
-    data-test-id="onboarding_container"
-    style="z-index: 4;"
-  >
-    <div
-      class="mainWrapper"
-    >
-      <div
-        class="gradientLayer"
-      >
-        <div
-          class="circleBlur circleBlurOne"
-        />
-        <div
-          class="circleBlur circleBlurTwo"
-        />
-      </div>
-      <div
-        class="carousel dragCursor"
-        data-drag-hook="true"
-      >
-        <div
-          class="flex row carouselInner"
-          data-id="flex"
-          data-test-id="flex"
-          style="--local_translate_movement: 0%;"
-        >
-          <div
-            class="flex column noShrink carouselItem"
-            data-id="flex"
-            data-test-id="flex"
-          >
-            <div
-              class="flex row alignItems_center justifyContent_center fullSize header"
-              data-id="flex"
-              data-test-id="flex"
-            >
-              <div
-                class="innerHead "
-              >
-                <div>
-                  Custom Element
-                </div>
-              </div>
-            </div>
-            <div
-              class="scroll_vertical content"
-              data-id="flex"
-              data-test-id="flex"
-            >
-              <div
-                class="size20 lineclamp_3 lineheight_1_4 font_bold heading"
-              />
-              <div
-                class="size14 lineclamp_4 lineheight_1_6 description"
-                data-title="Discover innovative tools and solutions to streamline your processes and boost productivity on Slide 1."
-              >
-                Discover innovative tools and solutions to streamline your processes and boost productivity on Slide 1.
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="flex row alignItems_center footer"
-        data-id="flex"
-        data-test-id="flex"
-      >
-        <div
-          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
-          data-id="flex"
-          data-test-id="flex"
-        >
-          <button
-            class="primaryButton footerButton  bold primaryfilled medium"
-            data-id="onboarding_primary_button"
-            data-selector-id="button"
-            data-test-id="onboarding_primary_button"
-            data-title="Got it"
-            type="button"
-          >
-            Got it
-          </button>
-        </div>
-      </div>
-      <button
-        class="flex row alignItems_center justifyContent_center closeIconContainer buttonReset"
-        data-id="onboarding_close_icon"
-        data-test-id="onboarding_close_icon"
-        data-title="Close"
-      >
-        <i
-          aria-hidden="true"
-          class="zd_font_icons basic icon-inapp-close  closeIcon  "
-          data-id="fontIcon"
-          data-selector-id="fontIcon"
-          data-test-id="fontIcon"
-        />
-      </button>
-      <span
-        class="basic newRibbon palette_primary  medium flag"
-        data-id="onboarding_ribbon"
-        data-selector-id="ribbon"
-        data-test-id="onboarding_ribbon"
-      >
-        <span
-          class="childText"
-        >
-          New
-        </span>
-      </span>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-exports[`Onboarding rendering data with position - absolute 1`] = `
-<DocumentFragment>
-  <div
-    class="mainContainer positon_absolute mainContainerAnimation"
-    data-drag-container="true"
-    data-id="onboarding_container"
-    data-test-id="onboarding_container"
-    style="z-index: 4;"
-  >
-    <div
-      class="mainWrapper"
-    >
-      <div
-        class="gradientLayer"
-      >
-        <div
-          class="circleBlur circleBlurOne"
-        />
-        <div
-          class="circleBlur circleBlurTwo"
-        />
-      </div>
-      <div
-        class="flex row alignItems_center footer"
-        data-id="flex"
-        data-test-id="flex"
-      >
-        <div
-          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
-          data-id="flex"
-          data-test-id="flex"
-        >
-          <button
-            class="primaryButton footerButton  bold primaryfilled medium"
-            data-id="onboarding_primary_button"
-            data-selector-id="button"
-            data-test-id="onboarding_primary_button"
-            data-title="Got it"
-            type="button"
-          >
-            Got it
-          </button>
-        </div>
-      </div>
-      <button
-        class="flex row alignItems_center justifyContent_center closeIconContainer buttonReset"
-        data-id="onboarding_close_icon"
-        data-test-id="onboarding_close_icon"
-        data-title="Close"
-      >
-        <i
-          aria-hidden="true"
-          class="zd_font_icons basic icon-inapp-close  closeIcon  "
-          data-id="fontIcon"
-          data-selector-id="fontIcon"
-          data-test-id="fontIcon"
-        />
-      </button>
-      <span
-        class="basic newRibbon palette_primary  medium flag"
-        data-id="onboarding_ribbon"
-        data-selector-id="ribbon"
-        data-test-id="onboarding_ribbon"
-      >
-        <span
-          class="childText"
-        >
-          New
-        </span>
-      </span>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-exports[`Onboarding rendering data with tagAttributes 1`] = `
-<DocumentFragment>
-  <div
-    class="mainContainer  mainContainerAnimation"
-    data-drag-container="true"
-    data-id="onboarding_container"
-    data-scroll="true"
-    data-test-id="onboarding_container"
-    style="z-index: 4;"
-  >
-    <div
-      class="mainWrapper"
-    >
-      <div
-        class="gradientLayer"
-      >
-        <div
-          class="circleBlur circleBlurOne"
-        />
-        <div
-          class="circleBlur circleBlurTwo"
-        />
-      </div>
-      <div
-        class="flex row alignItems_center footer"
-        data-id="flex"
-        data-test-id="flex"
-      >
-        <div
-          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
-          data-id="flex"
-          data-test-id="flex"
-        >
-          <button
-            class="primaryButton footerButton  bold primaryfilled medium"
-            data-id="onboarding_primary_button"
-            data-selector-id="button"
-            data-test-id="onboarding_primary_button"
-            data-title="Got it"
-            type="button"
-          >
-            Got it
-          </button>
-        </div>
-      </div>
-      <button
-        class="flex row alignItems_center justifyContent_center closeIconContainer buttonReset"
-        data-id="onboarding_close_icon"
-        data-test-id="onboarding_close_icon"
-        data-title="Close"
-      >
-        <i
-          aria-hidden="true"
-          class="zd_font_icons basic icon-inapp-close  closeIcon  "
-          data-id="fontIcon"
-          data-selector-id="fontIcon"
-          data-test-id="fontIcon"
-        />
-      </button>
-      <span
-        class="basic newRibbon palette_primary  medium flag"
-        data-id="onboarding_ribbon"
-        data-selector-id="ribbon"
-        data-test-id="onboarding_ribbon"
-      >
-        <span
-          class="childText"
-        >
-          New
-        </span>
-      </span>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-exports[`Onboarding rendering data without SecondaryButton as link 1`] = `
-<DocumentFragment>
-  <div
-    class="mainContainer  mainContainerAnimation"
-    data-drag-container="true"
-    data-id="onboarding_container"
-    data-test-id="onboarding_container"
-    style="z-index: 4;"
-  >
-    <div
-      class="mainWrapper"
-    >
-      <div
-        class="gradientLayer"
-      >
-        <div
-          class="circleBlur circleBlurOne"
-        />
-        <div
-          class="circleBlur circleBlurTwo"
-        />
-      </div>
-      <div
-        class="carousel dragCursor"
-        data-drag-hook="true"
-      >
-        <div
-          class="flex row carouselInner"
-          data-id="flex"
-          data-test-id="flex"
-          style="--local_translate_movement: 0%;"
-        >
-          <div
-            class="flex column noShrink carouselItem"
-            data-id="flex"
-            data-test-id="flex"
-          >
-            <div
-              class="flex row alignItems_center justifyContent_center fullSize header"
-              data-id="flex"
-              data-test-id="flex"
-            >
-              <div
-                class="innerHead "
-              />
-            </div>
-            <div
-              class="scroll_vertical content"
-              data-id="flex"
-              data-test-id="flex"
-            >
-              <div
-                class="size20 lineclamp_3 lineheight_1_4 font_bold heading"
-              />
-              <div
-                class="size14 lineclamp_4 lineheight_1_6 description"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="flex row alignItems_center footer"
-        data-id="flex"
-        data-test-id="flex"
-      >
-        <div
-          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
-          data-id="flex"
-          data-test-id="flex"
-        >
-          <button
-            class=" secondaryButtton footerButton  bold primary medium"
-            data-id="onboarding_secondary_button"
-            data-selector-id="button"
-            data-test-id="onboarding_secondary_button"
-            data-title="read more"
-            type="button"
-          >
-            read more
-          </button>
-          <button
-            class="primaryButton footerButton  bold primaryfilled medium"
-            data-id="onboarding_primary_button"
-            data-selector-id="button"
-            data-test-id="onboarding_primary_button"
-            data-title="Got it"
-            type="button"
-          >
-            Got it
-          </button>
-        </div>
-      </div>
-      <button
-        class="flex row alignItems_center justifyContent_center closeIconContainer buttonReset"
-        data-id="onboarding_close_icon"
-        data-test-id="onboarding_close_icon"
-        data-title="Close"
-      >
-        <i
-          aria-hidden="true"
-          class="zd_font_icons basic icon-inapp-close  closeIcon  "
-          data-id="fontIcon"
-          data-selector-id="fontIcon"
-          data-test-id="fontIcon"
-        />
-      </button>
-      <span
-        class="basic newRibbon palette_primary  medium flag"
-        data-id="onboarding_ribbon"
-        data-selector-id="ribbon"
-        data-test-id="onboarding_ribbon"
-      >
-        <span
-          class="childText"
-        >
-          New
-        </span>
-      </span>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-exports[`Onboarding rendering data without hasBouncAnimationOnMount 1`] = `
-<DocumentFragment>
-  <div
-    class="mainContainer  "
-    data-drag-container="true"
-    data-id="onboarding_container"
-    data-test-id="onboarding_container"
-    style="z-index: 4;"
-  >
-    <div
-      class="mainWrapper"
-    >
-      <div
-        class="gradientLayer"
-      >
-        <div
-          class="circleBlur circleBlurOne"
-        />
-        <div
-          class="circleBlur circleBlurTwo"
-        />
-      </div>
-      <div
-        class="flex row alignItems_center footer"
-        data-id="flex"
-        data-test-id="flex"
-      >
-        <div
-          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
-          data-id="flex"
-          data-test-id="flex"
-        >
-          <button
-            class="primaryButton footerButton  bold primaryfilled medium"
-            data-id="onboarding_primary_button"
-            data-selector-id="button"
-            data-test-id="onboarding_primary_button"
-            data-title="Got it"
-            type="button"
-          >
-            Got it
-          </button>
-        </div>
-      </div>
-      <button
-        class="flex row alignItems_center justifyContent_center closeIconContainer buttonReset"
-        data-id="onboarding_close_icon"
-        data-test-id="onboarding_close_icon"
-        data-title="Close"
-      >
-        <i
-          aria-hidden="true"
-          class="zd_font_icons basic icon-inapp-close  closeIcon  "
-          data-id="fontIcon"
-          data-selector-id="fontIcon"
-          data-test-id="fontIcon"
-        />
-      </button>
-      <span
-        class="basic newRibbon palette_primary  medium flag"
-        data-id="onboarding_ribbon"
-        data-selector-id="ribbon"
-        data-test-id="onboarding_ribbon"
-      >
-        <span
-          class="childText"
-        >
-          New
-        </span>
-      </span>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-exports[`Onboarding rendering data without hasCloseIcon 1`] = `
-<DocumentFragment>
-  <div
-    class="mainContainer  mainContainerAnimation"
-    data-drag-container="true"
-    data-id="onboarding_container"
-    data-test-id="onboarding_container"
-    style="z-index: 4;"
-  >
-    <div
-      class="mainWrapper"
-    >
-      <div
-        class="gradientLayer"
-      >
-        <div
-          class="circleBlur circleBlurOne"
-        />
-        <div
-          class="circleBlur circleBlurTwo"
-        />
-      </div>
-      <div
-        class="flex row alignItems_center footer"
-        data-id="flex"
-        data-test-id="flex"
-      >
-        <div
-          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
-          data-id="flex"
-          data-test-id="flex"
-        >
-          <button
-            class="primaryButton footerButton  bold primaryfilled medium"
-            data-id="onboarding_primary_button"
-            data-selector-id="button"
-            data-test-id="onboarding_primary_button"
-            data-title="Got it"
-            type="button"
-          >
-            Got it
-          </button>
-        </div>
-      </div>
-      <span
-        class="basic newRibbon palette_primary  medium flag"
-        data-id="onboarding_ribbon"
-        data-selector-id="ribbon"
-        data-test-id="onboarding_ribbon"
-      >
-        <span
-          class="childText"
-        >
-          New
-        </span>
-      </span>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-exports[`Onboarding rendering data without hasExpandedButton 1`] = `
-<DocumentFragment>
-  <div
-    class="mainContainer  mainContainerAnimation"
-    data-drag-container="true"
-    data-id="onboarding_container"
-    data-test-id="onboarding_container"
-    style="z-index: 4;"
-  >
-    <div
-      class="mainWrapper"
-    >
-      <div
-        class="gradientLayer"
-      >
-        <div
-          class="circleBlur circleBlurOne"
-        />
-        <div
-          class="circleBlur circleBlurTwo"
-        />
-      </div>
-      <div
-        class="flex row alignItems_center footer"
-        data-id="flex"
-        data-test-id="flex"
-      >
-        <div
-          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
-          data-id="flex"
-          data-test-id="flex"
-        >
-          <button
-            class="primaryButton footerButton  bold primaryfilled medium"
-            data-id="onboarding_primary_button"
-            data-selector-id="button"
-            data-test-id="onboarding_primary_button"
-            data-title="Got it"
-            type="button"
-          >
-            Got it
-          </button>
-        </div>
-      </div>
-      <button
-        class="flex row alignItems_center justifyContent_center closeIconContainer buttonReset"
-        data-id="onboarding_close_icon"
-        data-test-id="onboarding_close_icon"
-        data-title="Close"
-      >
-        <i
-          aria-hidden="true"
-          class="zd_font_icons basic icon-inapp-close  closeIcon  "
-          data-id="fontIcon"
-          data-selector-id="fontIcon"
-          data-test-id="fontIcon"
-        />
-      </button>
-      <span
-        class="basic newRibbon palette_primary  medium flag"
-        data-id="onboarding_ribbon"
-        data-selector-id="ribbon"
-        data-test-id="onboarding_ribbon"
-      >
-        <span
-          class="childText"
-        >
-          New
-        </span>
-      </span>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-exports[`Onboarding rendering data without isDraggable 1`] = `
-<DocumentFragment>
-  <div
-    class="mainContainer  mainContainerAnimation"
-    data-drag-container="false"
-    data-id="onboarding_container"
-    data-test-id="onboarding_container"
-  >
-    <div
-      class="mainWrapper"
-    >
-      <div
-        class="gradientLayer"
-      >
-        <div
-          class="circleBlur circleBlurOne"
-        />
-        <div
-          class="circleBlur circleBlurTwo"
-        />
-      </div>
-      <div
-        class="flex row alignItems_center footer"
-        data-id="flex"
-        data-test-id="flex"
-      >
-        <div
-          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
-          data-id="flex"
-          data-test-id="flex"
-        >
-          <button
-            class="primaryButton footerButton  bold primaryfilled medium"
-            data-id="onboarding_primary_button"
-            data-selector-id="button"
-            data-test-id="onboarding_primary_button"
-            data-title="Got it"
-            type="button"
-          >
-            Got it
-          </button>
-        </div>
-      </div>
-      <button
-        class="flex row alignItems_center justifyContent_center closeIconContainer buttonReset"
-        data-id="onboarding_close_icon"
-        data-test-id="onboarding_close_icon"
-        data-title="Close"
-      >
-        <i
-          aria-hidden="true"
-          class="zd_font_icons basic icon-inapp-close  closeIcon  "
-          data-id="fontIcon"
-          data-selector-id="fontIcon"
-          data-test-id="fontIcon"
-        />
-      </button>
-      <span
-        class="basic newRibbon palette_primary  medium flag"
-        data-id="onboarding_ribbon"
-        data-selector-id="ribbon"
-        data-test-id="onboarding_ribbon"
-      >
-        <span
-          class="childText"
-        >
-          New
-        </span>
-      </span>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-exports[`Onboarding rendering data without primaryButtonText 1`] = `
-<DocumentFragment>
-  <div
-    class="mainContainer  mainContainerAnimation"
-    data-drag-container="true"
-    data-id="onboarding_container"
-    data-test-id="onboarding_container"
-    style="z-index: 4;"
-  >
-    <div
-      class="mainWrapper"
-    >
-      <div
-        class="gradientLayer"
-      >
-        <div
-          class="circleBlur circleBlurOne"
-        />
-        <div
-          class="circleBlur circleBlurTwo"
-        />
-      </div>
-      <div
-        class="carousel dragCursor"
-        data-drag-hook="true"
-      >
-        <div
-          class="flex row carouselInner"
-          data-id="flex"
-          data-test-id="flex"
-          style="--local_translate_movement: 0%;"
-        >
-          <div
-            class="flex column noShrink carouselItem"
-            data-id="flex"
-            data-test-id="flex"
-          >
-            <div
-              class="flex row alignItems_center justifyContent_center fullSize header"
-              data-id="flex"
-              data-test-id="flex"
-            >
-              <div
-                class="innerHead "
-              />
-            </div>
-            <div
-              class="scroll_vertical content"
-              data-id="flex"
-              data-test-id="flex"
-            >
-              <div
-                class="size20 lineclamp_3 lineheight_1_4 font_bold heading"
-              />
-              <div
-                class="size14 lineclamp_4 lineheight_1_6 description"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="flex row alignItems_center footer"
-        data-id="flex"
-        data-test-id="flex"
-      >
-        <div
-          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
-          data-id="flex"
-          data-test-id="flex"
-        />
-      </div>
-      <button
-        class="flex row alignItems_center justifyContent_center closeIconContainer buttonReset"
-        data-id="onboarding_close_icon"
-        data-test-id="onboarding_close_icon"
-        data-title="Close"
-      >
-        <i
-          aria-hidden="true"
-          class="zd_font_icons basic icon-inapp-close  closeIcon  "
-          data-id="fontIcon"
-          data-selector-id="fontIcon"
-          data-test-id="fontIcon"
-        />
-      </button>
-      <span
-        class="basic newRibbon palette_primary  medium flag"
-        data-id="onboarding_ribbon"
-        data-selector-id="ribbon"
-        data-test-id="onboarding_ribbon"
-      >
-        <span
-          class="childText"
-        >
-          New
-        </span>
-      </span>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-exports[`Onboarding rendering data without secondaryButtonText 1`] = `
-<DocumentFragment>
-  <div
-    class="mainContainer  mainContainerAnimation"
-    data-drag-container="true"
-    data-id="onboarding_container"
-    data-test-id="onboarding_container"
-    style="z-index: 4;"
-  >
-    <div
-      class="mainWrapper"
-    >
-      <div
-        class="gradientLayer"
-      >
-        <div
-          class="circleBlur circleBlurOne"
-        />
-        <div
-          class="circleBlur circleBlurTwo"
-        />
-      </div>
-      <div
-        class="carousel dragCursor"
-        data-drag-hook="true"
-      >
-        <div
-          class="flex row carouselInner"
-          data-id="flex"
-          data-test-id="flex"
-          style="--local_translate_movement: 0%;"
-        >
-          <div
-            class="flex column noShrink carouselItem"
-            data-id="flex"
-            data-test-id="flex"
-          >
-            <div
-              class="flex row alignItems_center justifyContent_center fullSize header"
-              data-id="flex"
-              data-test-id="flex"
-            >
-              <div
-                class="innerHead "
-              />
-            </div>
-            <div
-              class="scroll_vertical content"
-              data-id="flex"
-              data-test-id="flex"
-            >
-              <div
-                class="size20 lineclamp_3 lineheight_1_4 font_bold heading"
-              />
-              <div
-                class="size14 lineclamp_4 lineheight_1_6 description"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="flex row alignItems_center footer"
-        data-id="flex"
-        data-test-id="flex"
-      >
-        <div
-          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
-          data-id="flex"
-          data-test-id="flex"
-        >
-          <button
-            class="primaryButton footerButton  bold primaryfilled medium"
-            data-id="onboarding_primary_button"
-            data-selector-id="button"
-            data-test-id="onboarding_primary_button"
-            data-title="Got it"
-            type="button"
-          >
-            Got it
-          </button>
-        </div>
-      </div>
-      <button
-        class="flex row alignItems_center justifyContent_center closeIconContainer buttonReset"
-        data-id="onboarding_close_icon"
-        data-test-id="onboarding_close_icon"
-        data-title="Close"
-      >
-        <i
-          aria-hidden="true"
-          class="zd_font_icons basic icon-inapp-close  closeIcon  "
-          data-id="fontIcon"
-          data-selector-id="fontIcon"
-          data-test-id="fontIcon"
-        />
-      </button>
-      <span
-        class="basic newRibbon palette_primary  medium flag"
-        data-id="onboarding_ribbon"
-        data-selector-id="ribbon"
-        data-test-id="onboarding_ribbon"
-      >
-        <span
-          class="childText"
-        >
-          New
-        </span>
-      </span>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-exports[`Onboarding rendering prop of ribbonText 1`] = `
-<DocumentFragment>
-  <div
-    class="mainContainer  mainContainerAnimation"
-    data-drag-container="true"
-    data-id="onboarding_container"
-    data-test-id="onboarding_container"
-    style="z-index: 4;"
-  >
-    <div
-      class="mainWrapper"
-    >
-      <div
-        class="gradientLayer"
-      >
-        <div
-          class="circleBlur circleBlurOne"
-        />
-        <div
-          class="circleBlur circleBlurTwo"
-        />
-      </div>
-      <div
-        class="flex row alignItems_center footer"
-        data-id="flex"
-        data-test-id="flex"
-      >
-        <div
-          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
-          data-id="flex"
-          data-test-id="flex"
-        >
-          <button
-            class="primaryButton footerButton  bold primaryfilled medium"
-            data-id="onboarding_primary_button"
-            data-selector-id="button"
-            data-test-id="onboarding_primary_button"
-            data-title="Got it"
-            type="button"
-          >
-            Got it
-          </button>
-        </div>
-      </div>
-      <button
-        class="flex row alignItems_center justifyContent_center closeIconContainer buttonReset"
-        data-id="onboarding_close_icon"
-        data-test-id="onboarding_close_icon"
-        data-title="Close"
-      >
-        <i
-          aria-hidden="true"
-          class="zd_font_icons basic icon-inapp-close  closeIcon  "
-          data-id="fontIcon"
-          data-selector-id="fontIcon"
-          data-test-id="fontIcon"
-        />
-      </button>
-      <span
-        class="basic newRibbon palette_primary  medium flag"
-        data-id="onboarding_ribbon"
-        data-selector-id="ribbon"
-        data-test-id="onboarding_ribbon"
-      >
-        <span
-          class="childText"
-        >
-          closed
-        </span>
-      </span>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-exports[`Onboarding rendering the defult props 1`] = `
-<DocumentFragment>
-  <div
-    class="mainContainer  mainContainerAnimation"
-    data-drag-container="true"
-    data-id="onboarding_container"
-    data-test-id="onboarding_container"
-    style="z-index: 4;"
-  >
-    <div
-      class="mainWrapper"
-    >
-      <div
-        class="gradientLayer"
-      >
-        <div
-          class="circleBlur circleBlurOne"
-        />
-        <div
-          class="circleBlur circleBlurTwo"
-        />
-      </div>
-      <div
-        class="flex row alignItems_center footer"
-        data-id="flex"
-        data-test-id="flex"
-      >
-        <div
-          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
-          data-id="flex"
-          data-test-id="flex"
-        >
-          <button
-            class="primaryButton footerButton  bold primaryfilled medium"
-            data-id="onboarding_primary_button"
-            data-selector-id="button"
-            data-test-id="onboarding_primary_button"
-            data-title="Got it"
-            type="button"
-          >
-            Got it
-          </button>
-        </div>
-      </div>
-      <button
-        class="flex row alignItems_center justifyContent_center closeIconContainer buttonReset"
-        data-id="onboarding_close_icon"
-        data-test-id="onboarding_close_icon"
-        data-title="Close"
-      >
-        <i
-          aria-hidden="true"
-          class="zd_font_icons basic icon-inapp-close  closeIcon  "
-          data-id="fontIcon"
-          data-selector-id="fontIcon"
-          data-test-id="fontIcon"
-        />
-      </button>
-      <span
-        class="basic newRibbon palette_primary  medium flag"
-        data-id="onboarding_ribbon"
-        data-selector-id="ribbon"
-        data-test-id="onboarding_ribbon"
-      >
-        <span
-          class="childText"
-        >
-          New
-        </span>
-      </span>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-exports[`Onboarding rendering the prop of hasRibbon is false 1`] = `
-<DocumentFragment>
-  <div
-    class="mainContainer  mainContainerAnimation"
-    data-drag-container="true"
-    data-id="onboarding_container"
-    data-test-id="onboarding_container"
-    style="z-index: 4;"
-  >
-    <div
-      class="mainWrapper"
-    >
-      <div
-        class="gradientLayer"
-      >
-        <div
-          class="circleBlur circleBlurOne"
-        />
-        <div
-          class="circleBlur circleBlurTwo"
-        />
-      </div>
-      <div
-        class="flex row alignItems_center footer"
-        data-id="flex"
-        data-test-id="flex"
-      >
-        <div
-          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
-          data-id="flex"
-          data-test-id="flex"
-        >
-          <button
-            class="primaryButton footerButton  bold primaryfilled medium"
-            data-id="onboarding_primary_button"
-            data-selector-id="button"
-            data-test-id="onboarding_primary_button"
-            data-title="Got it"
-            type="button"
-          >
-            Got it
-          </button>
-        </div>
-      </div>
-      <button
-        class="flex row alignItems_center justifyContent_center closeIconContainer buttonReset"
-        data-id="onboarding_close_icon"
-        data-test-id="onboarding_close_icon"
-        data-title="Close"
-      >
-        <i
-          aria-hidden="true"
-          class="zd_font_icons basic icon-inapp-close  closeIcon  "
-          data-id="fontIcon"
-          data-selector-id="fontIcon"
-          data-test-id="fontIcon"
-        />
-      </button>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-exports[`Onboarding rendering with customId - hasSecondaryButtonLink  1`] = `
-<DocumentFragment>
-  <div
-    class="mainContainer  mainContainerAnimation"
-    data-drag-container="true"
-    data-id="radar_onboarding_container"
-    data-test-id="onboarding_container"
-    style="z-index: 4;"
-  >
-    <div
-      class="mainWrapper"
-    >
-      <div
-        class="gradientLayer"
-      >
-        <div
-          class="circleBlur circleBlurOne"
-        />
-        <div
-          class="circleBlur circleBlurTwo"
-        />
-      </div>
-      <div
-        class="carousel dragCursor"
-        data-drag-hook="true"
-      >
-        <div
-          class="flex row carouselInner"
-          data-id="flex"
-          data-test-id="flex"
-          style="--local_translate_movement: 0%;"
-        >
-          <div
-            class="flex column noShrink carouselItem"
-            data-id="flex"
-            data-test-id="flex"
-          >
-            <div
-              class="flex row alignItems_center justifyContent_center fullSize header"
-              data-id="flex"
-              data-test-id="flex"
-            >
-              <div
-                class="innerHead "
-              />
-            </div>
-            <div
-              class="scroll_vertical content"
-              data-id="flex"
-              data-test-id="flex"
-            >
-              <div
-                class="size20 lineclamp_3 lineheight_1_4 font_bold heading"
-              />
-              <div
-                class="size14 lineclamp_4 lineheight_1_6 description"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="flex row alignItems_center footer"
-        data-id="flex"
-        data-test-id="flex"
-      >
-        <div
-          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
-          data-id="flex"
-          data-test-id="flex"
-        >
-          <a
-            class="container  secondaryButtton secondaryButttonLink footerButton "
-            data-id="radar_onboarding_secondary_button_link"
-            data-test-id="radar_onboarding_secondary_button_link"
-            data-title="learn more"
-            href="https://gc.zoho.com/org/746519053/widgets/4398000000528001"
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            learn more
-          </a>
-          <button
-            class="primaryButton footerButton  bold primaryfilled medium"
-            data-id="radar_onboarding_primary_button"
-            data-selector-id="button"
-            data-test-id="radar_onboarding_primary_button"
-            data-title="Got it"
-            type="button"
-          >
-            Got it
-          </button>
-        </div>
-      </div>
-      <button
-        class="flex row alignItems_center justifyContent_center closeIconContainer buttonReset"
-        data-id="radar_onboarding_close_icon"
-        data-test-id="onboarding_close_icon"
-        data-title="Close"
-      >
-        <i
-          aria-hidden="true"
-          class="zd_font_icons basic icon-inapp-close  closeIcon  "
-          data-id="fontIcon"
-          data-selector-id="fontIcon"
-          data-test-id="fontIcon"
-        />
-      </button>
-      <span
-        class="basic newRibbon palette_primary  medium flag"
-        data-id="radar_onboarding_ribbon"
-        data-selector-id="ribbon"
-        data-test-id="radar_onboarding_ribbon"
-      >
-        <span
-          class="childText"
-        >
-          new
-        </span>
-      </span>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-exports[`Onboarding rendering with customId 1`] = `
-<DocumentFragment>
-  <div
-    class="mainContainer  mainContainerAnimation"
-    data-drag-container="true"
-    data-id="radar_onboarding_container"
-    data-test-id="onboarding_container"
-    style="z-index: 4;"
-  >
-    <div
-      class="mainWrapper"
-    >
-      <div
-        class="gradientLayer"
-      >
-        <div
-          class="circleBlur circleBlurOne"
-        />
-        <div
-          class="circleBlur circleBlurTwo"
-        />
-      </div>
-      <div
-        class="carousel dragCursor"
-        data-drag-hook="true"
-      >
-        <div
-          class="flex row carouselInner"
-          data-id="flex"
-          data-test-id="flex"
-          style="--local_translate_movement: 0%;"
-        >
-          <div
-            class="flex column noShrink carouselItem"
-            data-id="flex"
-            data-test-id="flex"
-          >
-            <div
-              class="flex row alignItems_center justifyContent_center fullSize header"
-              data-id="flex"
-              data-test-id="flex"
-            >
-              <div
-                class="innerHead dvLayer"
-              >
-                <video
-                  autoplay=""
-                  class="mediaElement"
-                  loop=""
-                >
-                  <source
-                    src="https://www.w3schools.com/html/mov_bbb.mp4"
-                    type="video/mp4"
-                  />
-                </video>
-                <div
-                  class="flex row alignItems_center justifyContent_center playIconWrapper"
-                  data-id="flex"
-                  data-test-id="flex"
-                >
-                  <button
-                    class="flex row alignItems_center justifyContent_center playIcon undefined buttonReset"
-                    data-id="radar_onboarding_play_icon"
-                    data-test-id="onboarding_play_icon"
-                  >
-                    <i
-                      aria-hidden="true"
-                      class="zd_font_icons basic icon-arrowFill  playIconInner  "
-                      data-id="fontIcon"
-                      data-selector-id="fontIcon"
-                      data-test-id="fontIcon"
-                    />
-                  </button>
-                </div>
-              </div>
-            </div>
-            <div
-              class="scroll_vertical content"
-              data-id="flex"
-              data-test-id="flex"
-            >
-              <div
-                class="size20 lineclamp_3 lineheight_1_4 font_bold heading"
-                data-title="Video source"
-              >
-                Video source
-              </div>
-              <div
-                class="size14 lineclamp_4 lineheight_1_6 description"
-                data-title="Onboarding with Video Source – Embeds a video to provide dynamic and allows users to continue watching a video while exploring the interface."
-              >
-                Onboarding with Video Source – Embeds a video to provide dynamic and allows users to continue watching a video while exploring the interface.
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="flex row alignItems_center footer"
-        data-id="flex"
-        data-test-id="flex"
-      >
-        <div
-          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
-          data-id="flex"
-          data-test-id="flex"
-        >
-          <button
-            class=" secondaryButtton footerButton  bold primary medium"
-            data-id="radar_onboarding_secondary_button"
-            data-selector-id="button"
-            data-test-id="radar_onboarding_secondary_button"
-            type="button"
-          >
-            Button
-          </button>
-          <button
-            class="primaryButton footerButton  bold primaryfilled medium"
-            data-id="radar_onboarding_primary_button"
-            data-selector-id="button"
-            data-test-id="radar_onboarding_primary_button"
-            data-title="Got It"
-            type="button"
-          >
-            Got It
-          </button>
-        </div>
-      </div>
-      <button
-        class="flex row alignItems_center justifyContent_center closeIconContainer buttonReset"
-        data-id="radar_onboarding_close_icon"
-        data-test-id="onboarding_close_icon"
-        data-title="Close"
-      >
-        <i
-          aria-hidden="true"
-          class="zd_font_icons basic icon-inapp-close  closeIcon  "
-          data-id="fontIcon"
-          data-selector-id="fontIcon"
-          data-test-id="fontIcon"
-        />
-      </button>
-      <span
-        class="basic newRibbon palette_primary  medium flag"
-        data-id="radar_onboarding_ribbon"
-        data-selector-id="ribbon"
-        data-test-id="radar_onboarding_ribbon"
-      >
-        <span
-          class="childText"
-        >
-          new
-        </span>
-      </span>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-exports[`Onboarding rendering with testId 1`] = `
-<DocumentFragment>
-  <div
-    class="mainContainer  mainContainerAnimation"
-    data-drag-container="true"
-    data-id="onboarding_container"
-    data-test-id="radar_onboarding_container"
-    style="z-index: 4;"
-  >
-    <div
-      class="mainWrapper"
-    >
-      <div
-        class="gradientLayer"
-      >
-        <div
-          class="circleBlur circleBlurOne"
-        />
-        <div
-          class="circleBlur circleBlurTwo"
-        />
-      </div>
-      <div
-        class="carousel dragCursor"
-        data-drag-hook="true"
-      >
-        <div
-          class="flex row carouselInner"
-          data-id="flex"
-          data-test-id="flex"
-          style="--local_translate_movement: 0%;"
-        >
-          <div
-            class="flex column noShrink carouselItem"
-            data-id="flex"
-            data-test-id="flex"
-          >
-            <div
-              class="flex row alignItems_center justifyContent_center fullSize header"
-              data-id="flex"
-              data-test-id="flex"
-            >
-              <div
-                class="innerHead dvLayer"
-              >
-                <div
-                  class="flex row alignItems_center justifyContent_center playIconWrapper"
-                  data-id="flex"
-                  data-test-id="flex"
-                >
-                  <button
-                    class="flex row alignItems_center justifyContent_center playIcon undefined buttonReset"
-                    data-id="onboarding_play_icon"
-                    data-test-id="radar_onboarding_play_icon"
-                  >
-                    <i
-                      aria-hidden="true"
-                      class="zd_font_icons basic icon-arrowFill  playIconInner  "
-                      data-id="fontIcon"
-                      data-selector-id="fontIcon"
-                      data-test-id="fontIcon"
-                    />
-                  </button>
-                </div>
-              </div>
-            </div>
-            <div
-              class="scroll_vertical content"
-              data-id="flex"
-              data-test-id="flex"
-            >
-              <div
-                class="size20 lineclamp_3 lineheight_1_4 font_bold heading"
-              />
-              <div
-                class="size14 lineclamp_4 lineheight_1_6 description"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="flex row alignItems_center footer"
-        data-id="flex"
-        data-test-id="flex"
-      >
-        <div
-          class="flex row justifyContent_end flexible basis_zero shrink btnWrapper"
-          data-id="flex"
-          data-test-id="flex"
-        >
-          <button
-            class="primaryButton footerButton  bold primaryfilled medium"
-            data-id="onboarding_primary_button"
-            data-selector-id="button"
-            data-test-id="onboarding_primary_button"
-            data-title="Got it"
-            type="button"
-          >
-            Got it
-          </button>
-        </div>
-      </div>
-      <button
-        class="flex row alignItems_center justifyContent_center closeIconContainer buttonReset"
-        data-id="onboarding_close_icon"
-        data-test-id="radar_onboarding_close_icon"
-        data-title="Close"
-      >
-        <i
-          aria-hidden="true"
-          class="zd_font_icons basic icon-inapp-close  closeIcon  "
-          data-id="fontIcon"
-          data-selector-id="fontIcon"
-          data-test-id="fontIcon"
-        />
-      </button>
-      <span
-        class="basic newRibbon palette_primary  medium flag"
-        data-id="onboarding_ribbon"
-        data-selector-id="ribbon"
-        data-test-id="onboarding_ribbon"
-      >
-        <span
-          class="childText"
-        >
-          new
-        </span>
-      </span>
-    </div>
-  </div>
-</DocumentFragment>
-`;