@total_onion/onion-library 2.0.145 → 2.0.147

package/public/components/block-accordion-v3/accordion-v3.css

@@ -0,0 +1,474 @@
+.accordion-v3__inner-container {
+  grid-area: main;
+  align-self: var(--content-box-vert-align-mobile);
+  justify-self: var(--content-box-horiz-align-mobile);
+  place-self: var(--content-box-vert-align-mobile) var(--content-box-horiz-align-mobile);
+  z-index: 5;
+  z-index: var(--content-z-index, 5);
+  overflow: var(--content-box-overflow);
+  min-width: -moz-min-content;
+  min-width: min-content;
+  aspect-ratio: var(--content-box-aspect-ratio);
+  border-radius: var(--border-radius);
+  border-width: var(--border-width);
+  border-color: var(--border-colour);
+  border-style: var(--border-style);
+  display: flex;
+  flex-direction: column;
+  flex-direction: var(--content-box-items-direction-mobile, column);
+  justify-content: var(--content-items-alignment-mobile);
+  align-items: center;
+  background-color: var(--cb-bg-colour);
+  padding: calc(var(--global-inline-spacing) * var(--content-box-top-padding-mult-mobile)) calc(var(--global-inline-spacing) * var(--content-box-right-padding-mult-mobile)) calc(var(--global-inline-spacing) * var(--content-box-bottom-padding-mult-mobile)) calc(var(--global-inline-spacing) * var(--content-box-left-padding-mult-mobile));
+  margin: calc(var(--global-inline-spacing) * var(--content-box-top-margin-mobile)) calc(var(--global-inline-spacing) * var(--content-box-right-margin-mobile)) calc(var(--global-inline-spacing) * var(--content-box-bottom-margin-mobile)) calc(var(--global-inline-spacing) * var(--content-box-left-margin-mobile));
+  -moz-column-gap: var(--content-items-micro-gap-mobile, calc(var(--content-items-gap-mobile) * var(--global-inline-spacing)));
+  column-gap: var(--content-items-micro-gap-mobile, calc(var(--content-items-gap-mobile) * var(--global-inline-spacing)));
+}
+@media screen and (min-width: 768px) {
+  .accordion-v3__inner-container {
+    justify-content: var(--content-items-alignment-portrait);
+    align-self: var(--content-box-vert-align-portrait);
+    justify-self: var(--content-box-horiz-align-portrait);
+    place-self: var(--content-box-vert-align-portrait) var(--content-box-horiz-align-portrait);
+    padding: calc(var(--global-inline-spacing) * var(--content-box-top-padding-mult-portrait)) calc(var(--global-inline-spacing) * var(--content-box-right-padding-mult-portrait)) calc(var(--global-inline-spacing) * var(--content-box-bottom-padding-mult-portrait)) calc(var(--global-inline-spacing) * var(--content-box-left-padding-mult-portrait));
+    margin: calc(var(--global-inline-spacing) * var(--content-box-top-margin-portrait)) calc(var(--global-inline-spacing) * var(--content-box-right-margin-portrait)) calc(var(--global-inline-spacing) * var(--content-box-bottom-margin-portrait)) calc(var(--global-inline-spacing) * var(--content-box-left-margin-portrait));
+  }
+}
+@media screen and (min-width: 1024px) {
+  .accordion-v3__inner-container {
+    -moz-column-gap: var(--content-items-micro-gap-desktop, calc(var(--content-items-gap-desktop) * var(--global-inline-spacing)));
+    column-gap: var(--content-items-micro-gap-desktop, calc(var(--content-items-gap-desktop) * var(--global-inline-spacing)));
+    justify-content: var(--content-items-alignment);
+    max-width: var(--cb-max-width);
+    align-self: var(--content-box-vert-align);
+    justify-self: var(--content-box-horiz-align);
+    place-self: var(--content-box-vert-align) var(--content-box-horiz-align);
+    padding: calc(var(--global-inline-spacing) * var(--content-box-top-padding-mult)) calc(var(--global-inline-spacing) * var(--content-box-right-padding-mult)) calc(var(--global-inline-spacing) * var(--content-box-bottom-padding-mult)) calc(var(--global-inline-spacing) * var(--content-box-left-padding-mult));
+    margin: calc(var(--global-inline-spacing) * var(--content-box-top-margin)) calc(var(--global-inline-spacing) * var(--content-box-right-margin)) calc(var(--global-inline-spacing) * var(--content-box-bottom-margin)) calc(var(--global-inline-spacing) * var(--content-box-left-margin));
+  }
+}
+.accordion-v3__inner-container {
+  box-shadow: calc(var(--box-shadow-offset-x) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-offset-y) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-blur) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-spread) / var(--desktop-design-reference) * var(--screen-width-static)) var(--box-shadow-colour);
+}
+.accordion-v3__content-box,
+.accordion-v3__content-container {
+  max-width: var(--wysiwyg-max-width-mobile);
+  margin-left: auto;
+  margin-right: auto;
+  display: grid;
+  word-break: normal;
+  width: 100%;
+  width: var(--content-box-width, 100%);
+  -webkit-text-stroke: calc(var(--text-stroke-width) / var(--desktop-design-reference) * var(--screen-width-static) * var(--font-size-multiplier)) var(--text-stroke-colour);
+}
+.accordion-v3__content-box:last-child,
+.accordion-v3__content-container:last-child {
+  margin-bottom: 0;
+}
+.accordion-v3__content-box,
+.accordion-v3__content-container {
+  color: var(--default-text-colour-mobile, var(--theme-primary-text-colour));
+}
+@media screen and (min-width: 768px) {
+  .accordion-v3__content-box,
+  .accordion-v3__content-container {
+    color: var(--default-text-colour-portrait, var(--default-text-colour-desktop));
+  }
+}
+@media screen and (min-width: 1024px) {
+  .accordion-v3__content-box,
+  .accordion-v3__content-container {
+    color: var(--default-text-colour-desktop, var(--theme-primary-text-colour));
+  }
+}
+.accordion-v3__content-box,
+.accordion-v3__content-container {
+  text-transform: var(--default-text-transform-mobile);
+}
+@media screen and (min-width: 768px) {
+  .accordion-v3__content-box,
+  .accordion-v3__content-container {
+    text-transform: var(--default-text-transform-portrait, var(--default-text-transform-desktop));
+  }
+}
+@media screen and (min-width: 1024px) {
+  .accordion-v3__content-box,
+  .accordion-v3__content-container {
+    text-transform: var(--default-text-transform-desktop);
+  }
+}
+.accordion-v3__content-box,
+.accordion-v3__content-container {
+  text-align: var(--default-text-align-mobile);
+}
+@media screen and (min-width: 768px) {
+  .accordion-v3__content-box,
+  .accordion-v3__content-container {
+    text-align: var(--default-text-align-portrait, var(--default-text-align-desktop));
+  }
+}
+@media screen and (min-width: 1024px) {
+  .accordion-v3__content-box,
+  .accordion-v3__content-container {
+    text-align: var(--default-text-align-desktop);
+  }
+}
+.accordion-v3__content-box,
+.accordion-v3__content-container {
+  display: block;
+  display: var(--display-mobile, block);
+}
+@media screen and (min-width: 768px) {
+  .accordion-v3__content-box,
+  .accordion-v3__content-container {
+    display: block;
+    display: var(--display-portrait, block);
+  }
+}
+@media screen and (min-width: 1024px) {
+  .accordion-v3__content-box,
+  .accordion-v3__content-container {
+    display: block;
+    display: var(--display-desktop, block);
+  }
+}
+.accordion-v3__content-box p,
+.accordion-v3__content-box h1,
+.accordion-v3__content-box h2,
+.accordion-v3__content-box h3,
+.accordion-v3__content-box h4,
+.accordion-v3__content-box h5,
+.accordion-v3__content-box h6,
+.accordion-v3__content-box a,
+.accordion-v3__content-box li,
+.accordion-v3__content-box div,
+.accordion-v3__content-container p,
+.accordion-v3__content-container h1,
+.accordion-v3__content-container h2,
+.accordion-v3__content-container h3,
+.accordion-v3__content-container h4,
+.accordion-v3__content-container h5,
+.accordion-v3__content-container h6,
+.accordion-v3__content-container a,
+.accordion-v3__content-container li,
+.accordion-v3__content-container div {
+  font-weight: var(--default-font-weight-mobile, var(--default-font-weight));
+}
+@media screen and (min-width: 768px) {
+  .accordion-v3__content-box p,
+  .accordion-v3__content-box h1,
+  .accordion-v3__content-box h2,
+  .accordion-v3__content-box h3,
+  .accordion-v3__content-box h4,
+  .accordion-v3__content-box h5,
+  .accordion-v3__content-box h6,
+  .accordion-v3__content-box a,
+  .accordion-v3__content-box li,
+  .accordion-v3__content-box div,
+  .accordion-v3__content-container p,
+  .accordion-v3__content-container h1,
+  .accordion-v3__content-container h2,
+  .accordion-v3__content-container h3,
+  .accordion-v3__content-container h4,
+  .accordion-v3__content-container h5,
+  .accordion-v3__content-container h6,
+  .accordion-v3__content-container a,
+  .accordion-v3__content-container li,
+  .accordion-v3__content-container div {
+    font-weight: var(--default-font-weight-portrait, var(--default-font-weight));
+  }
+}
+@media screen and (min-width: 1024px) {
+  .accordion-v3__content-box p,
+  .accordion-v3__content-box h1,
+  .accordion-v3__content-box h2,
+  .accordion-v3__content-box h3,
+  .accordion-v3__content-box h4,
+  .accordion-v3__content-box h5,
+  .accordion-v3__content-box h6,
+  .accordion-v3__content-box a,
+  .accordion-v3__content-box li,
+  .accordion-v3__content-box div,
+  .accordion-v3__content-container p,
+  .accordion-v3__content-container h1,
+  .accordion-v3__content-container h2,
+  .accordion-v3__content-container h3,
+  .accordion-v3__content-container h4,
+  .accordion-v3__content-container h5,
+  .accordion-v3__content-container h6,
+  .accordion-v3__content-container a,
+  .accordion-v3__content-container li,
+  .accordion-v3__content-container div {
+    font-weight: var(--default-font-weight-desktop, var(--default-font-weight));
+  }
+}
+.accordion-v3__content-box p,
+.accordion-v3__content-box h1,
+.accordion-v3__content-box h2,
+.accordion-v3__content-box h3,
+.accordion-v3__content-box h4,
+.accordion-v3__content-box h5,
+.accordion-v3__content-box h6,
+.accordion-v3__content-box a,
+.accordion-v3__content-box li,
+.accordion-v3__content-box div,
+.accordion-v3__content-container p,
+.accordion-v3__content-container h1,
+.accordion-v3__content-container h2,
+.accordion-v3__content-container h3,
+.accordion-v3__content-container h4,
+.accordion-v3__content-container h5,
+.accordion-v3__content-container h6,
+.accordion-v3__content-container a,
+.accordion-v3__content-container li,
+.accordion-v3__content-container div {
+  font-style: var(--default-font-style-mobile);
+}
+@media screen and (min-width: 768px) {
+  .accordion-v3__content-box p,
+  .accordion-v3__content-box h1,
+  .accordion-v3__content-box h2,
+  .accordion-v3__content-box h3,
+  .accordion-v3__content-box h4,
+  .accordion-v3__content-box h5,
+  .accordion-v3__content-box h6,
+  .accordion-v3__content-box a,
+  .accordion-v3__content-box li,
+  .accordion-v3__content-box div,
+  .accordion-v3__content-container p,
+  .accordion-v3__content-container h1,
+  .accordion-v3__content-container h2,
+  .accordion-v3__content-container h3,
+  .accordion-v3__content-container h4,
+  .accordion-v3__content-container h5,
+  .accordion-v3__content-container h6,
+  .accordion-v3__content-container a,
+  .accordion-v3__content-container li,
+  .accordion-v3__content-container div {
+    font-style: var(--default-font-style-portrait, var(--default-font-style-desktop));
+  }
+}
+@media screen and (min-width: 1024px) {
+  .accordion-v3__content-box p,
+  .accordion-v3__content-box h1,
+  .accordion-v3__content-box h2,
+  .accordion-v3__content-box h3,
+  .accordion-v3__content-box h4,
+  .accordion-v3__content-box h5,
+  .accordion-v3__content-box h6,
+  .accordion-v3__content-box a,
+  .accordion-v3__content-box li,
+  .accordion-v3__content-box div,
+  .accordion-v3__content-container p,
+  .accordion-v3__content-container h1,
+  .accordion-v3__content-container h2,
+  .accordion-v3__content-container h3,
+  .accordion-v3__content-container h4,
+  .accordion-v3__content-container h5,
+  .accordion-v3__content-container h6,
+  .accordion-v3__content-container a,
+  .accordion-v3__content-container li,
+  .accordion-v3__content-container div {
+    font-style: var(--default-font-style-desktop);
+  }
+}
+@media screen and (min-width: 768px) {
+  .accordion-v3__content-box,
+  .accordion-v3__content-container {
+    max-width: var(--wysiwyg-max-width-portrait);
+  }
+}
+@media screen and (min-width: 1024px) {
+  .accordion-v3__content-box,
+  .accordion-v3__content-container {
+    max-width: var(--wysiwyg-max-width);
+  }
+}
+.accordion-v3--text-shadow {
+  text-shadow: calc(var(--text-shadow-offset-x) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--text-shadow-offset-y) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--text-shadow-blur) / var(--desktop-design-reference) * var(--screen-width-static)) var(--text-shadow-colour);
+}
+.accordion-v3__cta-selection-container {
+  width: 100%;
+  display: var(--cta-container-display);
+  grid-template-columns: var(--grid-columns-mobile);
+  flex-wrap: wrap;
+  flex-direction: var(--cta-flex-direction);
+  justify-content: var(--cta-alignment-mobile);
+  gap: calc(var(--global-inline-spacing) * var(--cta-spacing-gap-mobile));
+}
+@media screen and (min-width: 768px) {
+  .accordion-v3__cta-selection-container {
+    gap: calc(var(--global-inline-spacing) * var(--cta-spacing-gap-desktop));
+    justify-content: var(--cta-alignment-portrait);
+    grid-template-columns: var(--grid-columns-portrait);
+  }
+}
+@media screen and (min-width: 1024px) {
+  .accordion-v3__cta-selection-container {
+    justify-content: var(--cta-alignment);
+    grid-template-columns: var(--grid-columns-desktop);
+  }
+}
+.accordion-v3 {
+  width: 100%;
+  pointer-events: all;
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--title-gap) / var(--design-reference) * var(--screen-width));
+}
+@media screen and (min-width: 768px) {
+  .accordion-v3 {
+    gap: calc(var(--title-gap) / var(--design-reference) * var(--screen-width));
+  }
+}
+@media screen and (min-width: 1024px) {
+  .accordion-v3 {
+    gap: calc(var(--title-gap) / var(--design-reference) * var(--screen-width));
+  }
+}
+.accordion-v3-wrapper {
+  text-align: left;
+  text-align: initial;
+  background: var(--background-color);
+}
+.accordion-v3-question-wrapper {
+  cursor: pointer;
+  align-items: flex-start;
+  justify-items: flex-start;
+  place-items: flex-start;
+}
+.accordion-v3-question-wrapper button {
+  width: 100%;
+  align-items: center;
+  cursor: pointer;
+  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
+  background: initial;
+  padding: 0;
+  padding: initial;
+  border: medium none currentcolor;
+  border: initial;
+}
+.accordion-v3__content-container {
+  padding: calc(10 / var(--desktop-design-reference) * var(--screen-width-static)) calc(50 / var(--desktop-design-reference) * var(--screen-width-static)) calc(10 / var(--desktop-design-reference) * var(--screen-width-static)) 0;
+}
+.accordion-v3-image-wrapper {
+  grid-area: icon;
+  position: absolute;
+  right: calc(2 / var(--desktop-design-reference) * var(--screen-width-static));
+  width: calc(var(--image-icon-size) / var(--design-reference) * var(--screen-width));
+}
+@media screen and (min-width: 768px) {
+  .accordion-v3-image-wrapper {
+    width: calc(var(--image-icon-size) / var(--design-reference) * var(--screen-width));
+  }
+}
+@media screen and (min-width: 1024px) {
+  .accordion-v3-image-wrapper {
+    width: calc(var(--image-icon-size) / var(--design-reference) * var(--screen-width));
+  }
+}
+.accordion-v3-image-wrapper img {
+  width: 100%;
+}
+.accordion-v3-question {
+  text-align: left;
+  display: grid;
+  grid-template: "question icon" "answer ..."/auto min-content;
+}
+.accordion-v3-question--icon-left {
+  grid-template: "icon question" "... answer"/min-content auto;
+  -moz-column-gap: calc(20 / var(--desktop-design-reference) * var(--screen-width-static));
+  column-gap: calc(20 / var(--desktop-design-reference) * var(--screen-width-static));
+}
+.accordion-v3-answer-wrapper {
+  overflow: hidden;
+  height: 0;
+  grid-area: answer;
+}
+.accordion-v3-answer-wrapper p {
+  padding-left: calc(var(--text-padding-horizontal) / var(--design-reference) * var(--screen-width));
+  padding-right: calc(var(--text-padding-horizontal) / var(--design-reference) * var(--screen-width));
+}
+@media screen and (min-width: 768px) {
+  .accordion-v3-answer-wrapper p {
+    padding-left: calc(var(--text-padding-horizontal) / var(--design-reference) * var(--screen-width));
+    padding-right: calc(var(--text-padding-horizontal) / var(--design-reference) * var(--screen-width));
+  }
+}
+@media screen and (min-width: 1024px) {
+  .accordion-v3-answer-wrapper p {
+    padding-left: calc(var(--text-padding-horizontal) / var(--design-reference) * var(--screen-width));
+    padding-right: calc(var(--text-padding-horizontal) / var(--design-reference) * var(--screen-width));
+  }
+}
+.accordion-v3-answer {
+  font-size: calc(22 / var(--desktop-design-reference) * var(--screen-width-static) * var(--font-size-multiplier));
+  grid-column: 1/-1;
+  padding-bottom: calc(20 / var(--design-reference) * var(--screen-width));
+  padding-top: calc(20 / var(--design-reference) * var(--screen-width));
+}
+@media screen and (min-width: 768px) {
+  .accordion-v3-answer {
+    padding-bottom: calc(20 / var(--design-reference) * var(--screen-width));
+    padding-top: calc(20 / var(--design-reference) * var(--screen-width));
+  }
+}
+@media screen and (min-width: 1024px) {
+  .accordion-v3-answer {
+    padding-bottom: calc(20 / var(--design-reference) * var(--screen-width));
+    padding-top: calc(20 / var(--design-reference) * var(--screen-width));
+  }
+}
+.accordion-v3-answer:last-child {
+  padding-bottom: 0;
+}
+.accordion-v3-icon {
+  grid-area: icon;
+  background: var(--icon-background-color);
+  display: flex;
+  align-items: center;
+  height: calc(50 / var(--desktop-design-reference) * var(--screen-width-static));
+  width: calc(50 / var(--desktop-design-reference) * var(--screen-width-static));
+}
+.accordion-v3-icon.active .accordion-v3-animation:before {
+  transform: rotate(90deg);
+}
+.accordion-v3-icon.active .accordion-v3-animation:after {
+  transform: rotate(180deg);
+}
+.accordion-v3 .image-icon-active {
+  transform: rotate(var(--image-icon-rotation-deg));
+  transition: transform 0.3s ease;
+}
+.accordion-v3 :not(.image-icon-active):not(.lottie-animations *) {
+  transform: rotate(0deg);
+  transition: transform 0.3s ease;
+}
+.accordion-v3-animation {
+  height: calc(20 / var(--desktop-design-reference) * var(--screen-width-static));
+  margin: auto;
+  position: relative;
+  transition: transform 0.3s ease;
+  width: calc(20 / var(--desktop-design-reference) * var(--screen-width-static));
+}
+.accordion-v3-animation:before,
+.accordion-v3-animation:after {
+  background-color: red;
+  content: "";
+  position: absolute;
+  transition: transform 0.25s ease-out;
+}
+.accordion-v3-animation:before {
+  height: 100%;
+  left: 50%;
+  margin-left: -1px;
+  top: 0;
+  width: 2px;
+}
+.accordion-v3-animation:after {
+  height: 2px;
+  left: 0;
+  margin-top: -1px;
+  top: 50%;
+  width: 100%;
+}

package/public/components/block-accordion-v3/accordion-v3.js

@@ -0,0 +1,117 @@
+export default function accordionv3Js(options = {}) {
+  try {
+    const { block } = options;
+    const blockClassName = block.dataset.assetkey;
+    const sections = block.querySelectorAll(
+      `.${blockClassName}-content`
+    );
+    const closeAccordionSections = () => {
+      sections.forEach((section) => {
+        if (section.classList.contains("active")) {
+          const question = section.querySelector(
+            `.${blockClassName}-question-wrapper`
+          );
+          const answer = section.querySelector(
+            `.${blockClassName}-answer-wrapper`
+          );
+          const svg = section.querySelector(
+            `.${blockClassName}-icon`
+          );
+          const iconImage = section.querySelector(
+            `.${blockClassName}-image-wrapper`
+          );
+          const sectionHeight = answer.scrollHeight;
+          answer.animate(
+            [
+              {
+                height: sectionHeight + "px"
+              },
+              { height: "0px" }
+            ],
+            {
+              fill: "forwards",
+              duration: 200,
+              easing: "ease-out"
+            }
+          );
+          answer.setAttribute("aria-hidden", "true");
+          question.classList.remove("active");
+          section.classList.remove("active");
+          if (svg) {
+            svg.classList.remove("active");
+          }
+          if (iconImage) {
+            iconImage.classList.remove("image-icon-active");
+          }
+        }
+      });
+    };
+    sections.forEach((section) => {
+      const question = section.querySelector(
+        `.${blockClassName}-question-wrapper`
+      );
+      const answer = section.querySelector(
+        `.${blockClassName}-answer-wrapper`
+      );
+      const svg = section.querySelector(`.${blockClassName}-icon`);
+      const iconImage = section.querySelector(
+        `.${blockClassName}-image-wrapper`
+      );
+      question.addEventListener("click", () => {
+        const isCollapsed = answer.getAttribute("aria-hidden") === "true";
+        closeAccordionSections();
+        if (isCollapsed) {
+          const sectionHeight = answer.scrollHeight;
+          answer.animate(
+            [
+              { height: "0px" },
+              {
+                height: sectionHeight + "px"
+              }
+            ],
+            {
+              fill: "forwards",
+              duration: 200,
+              easing: "ease-out"
+            }
+          );
+          section.classList.add("active");
+          answer.classList.add("active");
+          answer.setAttribute("aria-hidden", "false");
+          if (svg) {
+            svg.classList.add("active");
+          }
+          if (iconImage) {
+            iconImage.classList.add("image-icon-active");
+          }
+        } else {
+          const sectionHeight = answer.scrollHeight;
+          section.classList.remove("active");
+          answer.animate(
+            [
+              {
+                height: sectionHeight + "px"
+              },
+              { height: "0px" }
+            ],
+            {
+              fill: "forwards",
+              duration: 200,
+              easing: "ease-out"
+            }
+          );
+          answer.classList.remove("active");
+          answer.setAttribute("aria-hidden", "true");
+          if (svg) {
+            svg.classList.remove("active");
+          }
+          if (iconImage) {
+            iconImage.classList.remove("image-icon-active");
+          }
+        }
+      });
+    });
+  } catch (error) {
+    console.error(error);
+  }
+}

package/public/components/block-back-to-top-button-v3/back-to-top-button-v3.css

@@ -0,0 +1,62 @@
+.back-to-top-button {
+  position: relative;
+  width: 100%;
+  z-index: 50;
+  overflow: visible;
+  overflow: initial;
+}
+.back-to-top-button__arrow {
+  --arrow-colour: black;
+  position: absolute;
+  border-style: solid;
+  border-color: black;
+  border-color: var(--arrow-colour);
+  border-width: 0 2px 2px 0;
+  display: inline-block;
+  transform: rotate(-135deg);
+  height: 20%;
+  width: 20%;
+}
+.back-to-top-button__button {
+  --bg-colour: white;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  cursor: pointer;
+  height: calc(50 / var(--desktop-design-reference) * var(--screen-width-static));
+  width: calc(50 / var(--desktop-design-reference) * var(--screen-width-static));
+  border: none;
+  border-radius: 50px;
+  padding: calc(18 / var(--desktop-design-reference) * var(--screen-width-static));
+  background-color: white;
+  background-color: var(--bg-colour);
+  right: calc(10 / var(--design-reference) * var(--screen-width));
+  border-radius: var(--button-border-radius);
+}
+@media screen and (min-width: 768px) {
+  .back-to-top-button__button {
+    right: calc(30 / var(--design-reference) * var(--screen-width));
+  }
+}
+@media screen and (min-width: 1024px) {
+  .back-to-top-button__button {
+    right: calc(60 / var(--design-reference) * var(--screen-width));
+  }
+}
+.back-to-top-button__button--fixed {
+  position: fixed;
+  bottom: calc(60 / var(--desktop-design-reference) * var(--screen-width-static));
+}
+.back-to-top-button__button--absolute {
+  position: absolute;
+  translate: 0 -50%;
+}
+.wp-admin .back-to-top-button__button {
+  position: absolute;
+  translate: 0 0;
+  bottom: 0;
+}
+.back-to-top-button__image {
+  width: calc(var(--image-size) / var(--desktop-design-reference) * var(--screen-width-static));
+}

package/public/components/block-back-to-top-button-v3/back-to-top-button-v3.js

@@ -0,0 +1,12 @@
+export default function backtotopbuttonJs(options = {}) {
+  try {
+    const { block } = options;
+    const button = block.querySelector(".back-to-top-button__button");
+    button.addEventListener(
+      "click",
+      () => window.scrollTo({ top: 0, behavior: "smooth" })
+    );
+  } catch (error) {
+    console.error(error);
+  }
+}