@total_onion/onion-library 2.0.145 → 2.0.147

package/public/components/block-carousel-multi-layout-v3/carousel-multi-layout-v3.js

@@ -0,0 +1,169 @@
+import { getSwiperAssetsV2 } from "@total_onion/onion-utils/onion-utils.mjs";
+import { Navigation, Pagination, Autoplay, EffectFade } from "swiper/modules";
+export default function carouselmultilayoutv3Js(options = {}) {
+  try {
+    const { block } = options;
+    const totalSlides = block.querySelectorAll(".swiper-slide").length || 1;
+    Promise.all([getSwiperAssetsV2()]).then((values) => {
+      const { Swiper } = values[0][0];
+      const dataAttributes = block.dataset;
+      const slidesDesktop = Number(dataAttributes.desktopslides);
+      const slidesDesktopFull = Number(dataAttributes.desktopslidesfull) || slidesDesktop;
+      const slidesTablet = Number(dataAttributes.tabletslides);
+      const slidesMobile = Number(dataAttributes.mobileslides);
+      const slidesOffsetDesktopBefore = Number(
+        dataAttributes.desktopslidesoffsetbefore
+      );
+      const slidesOffsetTabletBefore = Number(
+        dataAttributes.tabletslidesoffsetbefore
+      );
+      const slidesOffsetMobileBefore = Number(
+        dataAttributes.mobileslidesoffsetbefore
+      );
+      const slidesOffsetDesktopAfter = Number(
+        dataAttributes.desktopslidesoffsetafter
+      );
+      const slidesOffsetTabletAfter = Number(
+        dataAttributes.tabletslidesoffsetafter
+      );
+      const slidesOffsetMobileAfter = Number(
+        dataAttributes.mobileslidesoffsetafter
+      );
+      const loopSlides = Number(dataAttributes.loopslides) === 1;
+      const loopSlidesPortrait = Number(dataAttributes.loopslidesportrait) === 1;
+      const loopSlidesMobile = Number(dataAttributes.loopslidesmobile) === 1;
+      console.log(totalSlides > 1 ? loopSlides : false);
+      const spaceBetweenSlidesDesktop = Number(
+        dataAttributes.desktopspacebetweenslides
+      );
+      const spaceBetweenSlidesDesktopFull = Number(dataAttributes.desktopfullspacebetweenslides) || spaceBetweenSlidesDesktop;
+      const spaceBetweenSlidesMobile = Number(
+        dataAttributes.mobilespacebetweenslides
+      );
+      const spaceBetweenSlidesTablet = Number(
+        dataAttributes.tabletspacebetweenslides
+      );
+      const autoplayCarousel = Number(dataAttributes.autoplay) === 1;
+      const centerActiveSlide = Number(dataAttributes.centeractiveslide) === 1;
+      const centerActiveSlidePortrait = Number(dataAttributes.centeractiveslideportrait) === 1;
+      const centerActiveSlideMobile = Number(dataAttributes.centeractiveslidemobile) === 1;
+      const centerInsufficientSlidesDesktop = Number(dataAttributes.centerinsufficientslidesdesktop) === 1;
+      const centerInsufficientSlidesPortrait = Number(dataAttributes.centerinsufficientslidesportrait) === 1;
+      const centerInsufficientSlidesMobile = Number(dataAttributes.centerinsufficientslidesmobile) === 1;
+      const carouselEnableFreeMode = Number(dataAttributes.enablefreemode) === 1;
+      const carouselEnableMousewheel = Number(dataAttributes.enablemousewheel) === 1;
+      const delay = Number(dataAttributes.transitiondelay);
+      const speed = Number(dataAttributes.transitionspeed);
+      const transitionStyle = dataAttributes.transitionstyle === "default" ? "" : dataAttributes.transitionstyle;
+      const paginationStyle = dataAttributes.paginationstyle === "customnumber" ? "bullets" : dataAttributes.paginationstyle;
+      const fractionStyle = dataAttributes.fractionstyle;
+      const fractionString = dataAttributes.fractionstring;
+      const fractionSetting = fractionStyle === "text" ? function(currentClass, totalClass) {
+        return '<span class="' + currentClass + '"></span> ' + fractionString + ' <span class="' + totalClass + '"></span>';
+      } : false;
+      const customNumber = dataAttributes.paginationstyle === "customnumber" ? function(index, className) {
+        return '<div class="' + className + '"><span class="pagination-number">0' + (index + 1) + "</span></div>";
+      } : false;
+      const carouselmultilayoutv3Swiper = new Swiper(
+        block.querySelector(".swiper"),
+        {
+          modules: [
+            Navigation,
+            Pagination,
+            Autoplay,
+            EffectFade
+            // EffectCoverflow,
+            // EffectCreative,
+            // FreeMode,
+            // Mousewheel
+          ],
+          slidesPerView: slidesMobile,
+          spaceBetween: spaceBetweenSlidesMobile,
+          loop: totalSlides > 1 ? loopSlidesMobile : false,
+          preloadImages: true,
+          watchSlidesVisibility: true,
+          effect: transitionStyle,
+          creativeEffect: {
+            prev: {
+              shadow: true,
+              translate: [0, 0, -400]
+            },
+            next: {
+              translate: ["100%", 0, 0]
+            }
+          },
+          coverflowEffect: {
+            rotate: 20,
+            depth: 50,
+            scale: 0.9,
+            modifier: 1,
+            slideShadows: true
+          },
+          fadeEffect: {
+            crossFade: true
+          },
+          lazy: {
+            loadPrevNext: true
+          },
+          speed,
+          autoplay: autoplayCarousel ? {
+            delay
+          } : "",
+          watchOverflow: true,
+          centeredSlides: centerActiveSlideMobile,
+          centerInsufficientSlides: centerInsufficientSlidesMobile,
+          freeMode: {
+            enabled: carouselEnableFreeMode,
+            sticky: carouselEnableFreeMode
+          },
+          mousewheel: carouselEnableMousewheel,
+          slidesOffsetBefore: slidesOffsetMobileBefore,
+          slidesOffsetAfter: slidesOffsetMobileAfter,
+          breakpoints: {
+            744: {
+              spaceBetween: spaceBetweenSlidesTablet,
+              slidesPerView: slidesTablet,
+              centeredSlides: centerActiveSlidePortrait,
+              centerInsufficientSlides: centerInsufficientSlidesPortrait,
+              slidesOffsetBefore: slidesOffsetTabletBefore,
+              slidesOffsetAfter: slidesOffsetTabletAfter,
+              loop: totalSlides > 1 ? loopSlidesPortrait : false
+            },
+            1024: {
+              slidesPerView: slidesDesktop,
+              spaceBetween: spaceBetweenSlidesDesktop,
+              centeredSlides: centerActiveSlide,
+              centerInsufficientSlides: centerInsufficientSlidesDesktop,
+              slidesOffsetBefore: slidesOffsetDesktopBefore,
+              slidesOffsetAfter: slidesOffsetDesktopAfter,
+              loop: totalSlides > 1 ? loopSlides : false
+            },
+            1440: {
+              slidesPerView: slidesDesktopFull,
+              spaceBetween: spaceBetweenSlidesDesktopFull,
+              loop: totalSlides > 1 ? loopSlides : false
+            }
+          },
+          navigation: {
+            nextEl: block.querySelector(".swiper-button-next"),
+            prevEl: block.querySelector(".swiper-button-prev")
+          },
+          pagination: {
+            el: block.querySelector(".swiper-pagination"),
+            type: paginationStyle,
+            renderFraction: fractionSetting,
+            clickable: true,
+            renderBullet: customNumber
+          }
+        }
+      );
+      if (false) {
+        null.then((result) => {
+          result.default();
+        });
+      }
+    });
+  } catch (error) {
+    console.error(error);
+  }
+}

package/public/components/block-cocktail-recipe-v3/cocktail-recipe-v3.css

@@ -0,0 +1,317 @@
+@charset "UTF-8";
+.cocktail-recipe-v3 {
+  pointer-events: all;
+}
+.cocktail-recipe-v3__ingredients-container {
+  display: flex;
+  flex-direction: column;
+  gap: calc(20 / var(--design-reference) * var(--screen-width));
+  padding-bottom: calc(50 / var(--design-reference) * var(--screen-width));
+}
+.cocktail-recipe-v3__ingredients-container .ingredients-title {
+  padding-top: calc(10 / var(--design-reference) * var(--screen-width));
+  padding-bottom: calc(10 / var(--design-reference) * var(--screen-width));
+  font-family: var(--primary-font-family);
+  font-size: calc(80 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
+  font-weight: 500;
+  text-transform: uppercase;
+  text-box-edge: cap alphabetic;
+  text-box-trim: trim-both;
+}
+@media screen and (min-width: 768px) {
+  .cocktail-recipe-v3__ingredients-container .ingredients-title {
+    font-size: calc(160 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
+  }
+}
+.cocktail-recipe-v3__servings {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: calc(15 / var(--design-reference) * var(--screen-width));
+  padding-bottom: calc(15 / var(--design-reference) * var(--screen-width));
+  border-bottom: 1px solid rgba(250, 248, 236, 0.3019607843);
+}
+.cocktail-recipe-v3__servings .servings-title {
+  font-family: var(--secondary-font-family);
+  font-size: calc(26 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
+  font-weight: 500;
+}
+.cocktail-recipe-v3__servings .servings-control-wrapper {
+  display: flex;
+  align-items: center;
+  gap: calc(15 / var(--design-reference) * var(--screen-width));
+}
+.cocktail-recipe-v3__servings .servings-control-wrapper .dec-btn-wrapper {
+  width: 40px;
+  height: 40px;
+  border: 1px solid #faf8ec;
+  overflow: hidden;
+}
+.cocktail-recipe-v3__servings .servings-control-wrapper .dec-btn-wrapper .servings-dec-btn {
+  cursor: pointer;
+  background-color: #0054ff;
+  color: #faf8ec;
+  font-size: 28px;
+  padding-bottom: 4px;
+  width: 100%;
+  height: 100%;
+  border: medium none currentcolor;
+  border: initial;
+  transform: translateX(0);
+  transition: transform 0.3s ease;
+}
+.cocktail-recipe-v3__servings .servings-control-wrapper .dec-btn-wrapper .servings-dec-btn::after {
+  content: "\2212";
+  color: #0054ff;
+  padding-top: 4px;
+  width: 38px;
+  height: 38px;
+  position: absolute;
+  top: 0;
+  right: -38px;
+  background-color: #faf8ec;
+}
+.cocktail-recipe-v3__servings .servings-control-wrapper .dec-btn-wrapper:hover .servings-dec-btn {
+  transform: translateX(-100%);
+}
+.cocktail-recipe-v3__servings .servings-control-wrapper .dec-btn-wrapper.inactive {
+  opacity: 0.4;
+  pointer-events: none;
+}
+.cocktail-recipe-v3__servings .servings-control-wrapper .servings-current {
+  font-family: var(--secondary-font-family);
+  font-size: calc(26 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
+  font-weight: 500;
+  display: inline-block;
+  width: calc(60 / var(--design-reference) * var(--screen-width));
+  text-align: center;
+}
+@media screen and (min-width: 768px) {
+  .cocktail-recipe-v3__servings .servings-control-wrapper .servings-current {
+    font-size: calc(30 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
+  }
+}
+.cocktail-recipe-v3__servings .servings-control-wrapper .inc-btn-wrapper {
+  cursor: pointer;
+  width: 40px;
+  height: 40px;
+  border: 1px solid #faf8ec;
+  overflow: hidden;
+}
+.cocktail-recipe-v3__servings .servings-control-wrapper .inc-btn-wrapper .servings-inc-btn {
+  cursor: pointer;
+  color: #0054ff;
+  font-size: 30px;
+  background-color: #faf8ec;
+  width: 100%;
+  height: 100%;
+  border: medium none currentcolor;
+  border: initial;
+  transform: translateX(-100%);
+  transition: transform 0.3s ease;
+}
+.cocktail-recipe-v3__servings .servings-control-wrapper .inc-btn-wrapper .servings-inc-btn::after {
+  content: "+";
+  padding-top: 2px;
+  color: #faf8ec;
+  width: 38px;
+  height: 38px;
+  position: absolute;
+  top: 0;
+  right: -38px;
+  background-color: #0054ff;
+}
+.cocktail-recipe-v3__servings .servings-control-wrapper .inc-btn-wrapper:hover .servings-inc-btn {
+  transform: translateX(0);
+}
+.cocktail-recipe-v3__unit-toggle {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: calc(10 / var(--design-reference) * var(--screen-width));
+}
+.cocktail-recipe-v3__unit-toggle .unit-text {
+  font-family: var(--tertiary-font-family);
+  font-size: calc(18 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
+  font-weight: 700;
+}
+@media screen and (min-width: 768px) {
+  .cocktail-recipe-v3__unit-toggle .unit-text {
+    font-size: calc(22 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
+  }
+}
+.cocktail-recipe-v3__unit-toggle .unit-toggle-wrapper {
+  display: flex;
+  align-items: center;
+  gap: calc(20 / var(--design-reference) * var(--screen-width));
+}
+.cocktail-recipe-v3__unit-toggle .unit-toggle-wrapper .checkbox-wrapper input[type=checkbox] {
+  display: none;
+  visibility: hidden;
+}
+.cocktail-recipe-v3__unit-toggle .unit-toggle-wrapper .checkbox-wrapper .block {
+  position: relative;
+  clear: both;
+  float: left;
+}
+.cocktail-recipe-v3__unit-toggle .unit-toggle-wrapper .checkbox-wrapper label {
+  width: 64px;
+  height: 36px;
+  box-sizing: border-box;
+  border: 1px solid;
+  float: left;
+  border-radius: 100px;
+  position: relative;
+  cursor: pointer;
+  transition: 0.3s ease;
+  color: #faf8ec;
+}
+.cocktail-recipe-v3__unit-toggle .unit-toggle-wrapper .checkbox-wrapper input[type=checkbox]:checked + label:before {
+  left: 31px;
+}
+.cocktail-recipe-v3__unit-toggle .unit-toggle-wrapper .checkbox-wrapper label:before {
+  transition: 0.3s ease;
+  content: "";
+  width: 28px;
+  height: 28px;
+  position: absolute;
+  background: #faf8ec;
+  left: 3px;
+  top: 3px;
+  box-sizing: border-box;
+  color: black;
+  border-radius: 50%;
+}
+.cocktail-recipe-v3 .ingredients-wrapper {
+  display: flex;
+  align-items: center;
+  gap: calc(15 / var(--design-reference) * var(--screen-width));
+}
+@media screen and (min-width: 768px) {
+  .cocktail-recipe-v3 .ingredients-wrapper {
+    gap: calc(30 / var(--design-reference) * var(--screen-width));
+  }
+}
+.cocktail-recipe-v3 .ingredients-wrapper .ingredient-image {
+  max-width: calc(50 / var(--design-reference) * var(--screen-width));
+  aspect-ratio: 1;
+  -o-object-fit: cover;
+  object-fit: cover;
+}
+@media screen and (min-width: 768px) {
+  .cocktail-recipe-v3 .ingredients-wrapper .ingredient-image {
+    max-width: calc(100 / var(--design-reference) * var(--screen-width));
+  }
+}
+.cocktail-recipe-v3 .ingredients-wrapper .ingredient-text {
+  font-size: calc(18 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
+  font-family: var(--tertiary-font-family);
+  font-weight: 400;
+}
+@media screen and (min-width: 768px) {
+  .cocktail-recipe-v3 .ingredients-wrapper .ingredient-text {
+    font-size: calc(22 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
+  }
+}
+.cocktail-recipe-v3__equipment-container {
+  display: flex;
+  flex-direction: column;
+  gap: calc(20 / var(--design-reference) * var(--screen-width));
+  padding-bottom: calc(100 / var(--design-reference) * var(--screen-width));
+}
+@media screen and (min-width: 768px) {
+  .cocktail-recipe-v3__equipment-container {
+    padding-bottom: calc(180 / var(--design-reference) * var(--screen-width));
+  }
+}
+.cocktail-recipe-v3__equipment-container .equipments-title {
+  font-family: var(--secondary-font-family);
+  font-size: calc(26 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
+  font-weight: 500;
+  padding-top: calc(20 / var(--design-reference) * var(--screen-width));
+  padding-bottom: calc(20 / var(--design-reference) * var(--screen-width));
+  border-bottom: 1px solid rgba(250, 248, 236, 0.3019607843);
+}
+@media screen and (min-width: 768px) {
+  .cocktail-recipe-v3__equipment-container .equipments-title {
+    padding-top: calc(10 / var(--design-reference) * var(--screen-width));
+    padding-bottom: calc(10 / var(--design-reference) * var(--screen-width));
+  }
+}
+.cocktail-recipe-v3__equipment-container .equipments-wrapper {
+  display: flex;
+  align-items: center;
+  gap: calc(15 / var(--design-reference) * var(--screen-width));
+}
+@media screen and (min-width: 768px) {
+  .cocktail-recipe-v3__equipment-container .equipments-wrapper {
+    gap: calc(30 / var(--design-reference) * var(--screen-width));
+  }
+}
+.cocktail-recipe-v3__equipment-container .equipments-wrapper .equipment-image {
+  max-width: calc(50 / var(--design-reference) * var(--screen-width));
+  aspect-ratio: 1;
+  -o-object-fit: cover;
+  object-fit: cover;
+}
+@media screen and (min-width: 768px) {
+  .cocktail-recipe-v3__equipment-container .equipments-wrapper .equipment-image {
+    max-width: calc(100 / var(--design-reference) * var(--screen-width));
+  }
+}
+.cocktail-recipe-v3__equipment-container .equipments-wrapper .equipment-text {
+  font-family: var(--tertiary-font-family);
+  font-size: calc(18 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
+  font-weight: 400;
+}
+@media screen and (min-width: 768px) {
+  .cocktail-recipe-v3__equipment-container .equipments-wrapper .equipment-text {
+    font-size: calc(22 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
+  }
+}
+.cocktail-recipe-v3__instructions-container .instructions-title {
+  font-family: var(--primary-font-family);
+  font-size: calc(70 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
+  font-weight: 500;
+  text-transform: uppercase;
+  padding-top: calc(10 / var(--design-reference) * var(--screen-width));
+  padding-bottom: calc(10 / var(--design-reference) * var(--screen-width));
+  text-box-edge: cap alphabetic;
+  text-box-trim: trim-both;
+}
+@media screen and (min-width: 768px) {
+  .cocktail-recipe-v3__instructions-container .instructions-title {
+    padding-top: calc(40 / var(--design-reference) * var(--screen-width));
+    padding-bottom: calc(40 / var(--design-reference) * var(--screen-width));
+    font-size: calc(160 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
+  }
+}
+.cocktail-recipe-v3__instructions-container .instructions-wrapper {
+  display: flex;
+  align-items: flex-start;
+  gap: calc(20 / var(--design-reference) * var(--screen-width));
+  padding-top: calc(30 / var(--design-reference) * var(--screen-width));
+  padding-bottom: calc(30 / var(--design-reference) * var(--screen-width));
+  border-top: 1px solid rgba(250, 248, 236, 0.3019607843);
+}
+@media screen and (min-width: 768px) {
+  .cocktail-recipe-v3__instructions-container .instructions-wrapper {
+    align-items: center;
+  }
+}
+.cocktail-recipe-v3__instructions-container .instructions-wrapper .instructions-number {
+  font-family: var(--secondary-font-family);
+  font-size: calc(30 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
+  padding-left: calc(10 / var(--design-reference) * var(--screen-width));
+  padding-right: calc(10 / var(--design-reference) * var(--screen-width));
+  font-weight: 500;
+  text-box-trim: trim-both;
+  text-box-edge: cap alphabetic;
+}
+.cocktail-recipe-v3__instructions-container .instructions-wrapper .instructions-text {
+  font-family: var(--tertiary-font-family);
+  font-size: calc(30 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
+  font-weight: 300;
+  text-box-trim: trim-both;
+  text-box-edge: cap alphabetic;
+}

package/public/components/block-cocktail-recipe-v3/cocktail-recipe-v3.js

@@ -0,0 +1,93 @@
+export default function cocktailrecipev3Js(options = {}) {
+  try {
+    const { block } = options;
+    const valueEl = block.querySelector("[data-servings-value]");
+    const decBtn = block.querySelector("[data-servings-dec]");
+    const incBtn = block.querySelector("[data-servings-inc]");
+    const decWrapper = block.querySelector(".dec-btn-wrapper");
+    const amountEls = block.querySelectorAll("[data-ingredients]");
+    const unitToggle = document.querySelector("[data-unit-toggle]");
+    const checkbox = unitToggle?.querySelector("[data-unit-checkbox]");
+    amountEls.forEach((el) => {
+      if (!el.dataset.baseAmount) {
+        el.dataset.baseAmount = el.dataset.amount || "";
+      }
+      if (!el.dataset.baseUnit) {
+        el.dataset.baseUnit = el.dataset.unit || "";
+      }
+    });
+    let currentUnit = "ml";
+    const ML_TO_OZ = 0.033814;
+    const getServings = () => parseInt(valueEl.textContent, 10) || 1;
+    const setServings = (n) => {
+      valueEl.textContent = `${n}x`;
+      updateInactiveState(n);
+    };
+    const updateInactiveState = (value) => {
+      if (!decWrapper) return;
+      if (value <= 1) decWrapper.classList.add("inactive");
+      else decWrapper.classList.remove("inactive");
+    };
+    const formatNumber = (num, unit) => {
+      if (unit === "oz")
+        return (Math.round(num * 100) / 100).toFixed(2).replace(/\.?0+$/, "");
+      if (unit === "ml")
+        return (Math.round(num * 10) / 10).toString().replace(/\.0$/, "");
+      return (Math.round(num * 100) / 100).toString().replace(/\.?0+$/, "");
+    };
+    const convert = (value, fromUnit, toUnit) => {
+      if (isNaN(value)) return value;
+      if (fromUnit === toUnit) return value;
+      if (fromUnit === "ml" && toUnit === "oz") return value * ML_TO_OZ;
+      if (fromUnit === "oz" && toUnit === "ml") return value / ML_TO_OZ;
+      return value;
+    };
+    const renderIngredients = () => {
+      const servings = getServings();
+      amountEls.forEach((el) => {
+        const baseAmount = parseFloat(el.dataset.baseAmount);
+        const baseUnit = el.dataset.baseUnit || "";
+        const name = el.dataset.name || "";
+        if (isNaN(baseAmount)) {
+          el.textContent = name;
+          return;
+        }
+        let amount = baseAmount * servings;
+        let displayUnit = baseUnit;
+        if ((baseUnit === "ml" || baseUnit === "oz") && currentUnit !== baseUnit) {
+          amount = convert(amount, baseUnit, currentUnit);
+          displayUnit = currentUnit;
+        }
+        const numStr = formatNumber(amount, displayUnit);
+        const unitStr = displayUnit ? displayUnit : "";
+        el.textContent = `${numStr}${unitStr ? unitStr : ""}${unitStr ? " " : " "}${name}`.trim();
+      });
+    };
+    decBtn?.addEventListener("click", () => {
+      const cur = getServings();
+      if (cur > 1) {
+        setServings(cur - 1);
+        renderIngredients();
+      }
+    });
+    incBtn?.addEventListener("click", () => {
+      const cur = getServings();
+      if (cur < 99) {
+        setServings(cur + 1);
+        renderIngredients();
+      }
+    });
+    if (checkbox) {
+      checkbox.addEventListener("change", (e) => {
+        currentUnit = e.target.checked ? "oz" : "ml";
+        renderIngredients();
+      });
+    }
+    setServings(getServings() || 1);
+    currentUnit = "ml";
+    renderIngredients();
+    updateInactiveState(getServings());
+  } catch (error) {
+    console.error(error);
+  }
+}

package/public/components/block-cover-link-v3/cover-link-v3.js

@@ -0,0 +1,7 @@
+export default function coverlinkv3Js(options = {}) {
+  try {
+    const { block } = options;
+  } catch (error) {
+    console.error(error);
+  }
+}

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

@@ -0,0 +1,74 @@
+.divider-v3 {
+  display: grid;
+  display: var(--display-mobile, grid);
+}
+@media screen and (min-width: 768px) {
+  .divider-v3 {
+    display: grid;
+    display: var(--display-portrait, grid);
+  }
+}
+@media screen and (min-width: 1024px) {
+  .divider-v3 {
+    display: grid;
+    display: var(--display-desktop, grid);
+  }
+}
+.divider-v3.vertical {
+  height: 100%;
+}
+.divider-v3.vertical .divider-v3__line {
+  height: 100%;
+}
+@media screen and (min-width: 768px) {
+  .divider-v3.vertical .divider-v3__line {
+    height: 100%;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .divider-v3.vertical .divider-v3__line {
+    height: 100%;
+  }
+}
+.divider-v3.horizontal .divider-v3__line {
+  width: 100%;
+}
+@media screen and (min-width: 768px) {
+  .divider-v3.horizontal .divider-v3__line {
+    width: 100%;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .divider-v3.horizontal .divider-v3__line {
+    width: 100%;
+  }
+}
+.divider-v3__line {
+  background-color: var(--divider-v3-background-colour);
+  background-image: var(--divider-v3-background-image);
+  background-repeat: var(--divider-v3-background-repeat);
+  background-position: var(--divider-v3-background-position-x) var(--divider-v3-background-position-y);
+  width: calc(var(--divider-v3-width) / var(--design-reference) * var(--screen-width));
+  height: calc(var(--divider-v3-height) / var(--design-reference) * var(--screen-width));
+  align-self: var(--divider-v3-vertical-position);
+  justify-self: var(--divider-v3-horizontal-position);
+  place-self: var(--divider-v3-vertical-position) var(--divider-v3-horizontal-position);
+  max-width: calc(var(--divider-v3-max-width-mobile) / var(--design-reference) * var(--screen-width));
+  max-height: calc(var(--divider-v3-max-height-mobile) / var(--design-reference) * var(--screen-width));
+}
+@media screen and (min-width: 768px) {
+  .divider-v3__line {
+    height: calc(var(--divider-v3-height) / var(--design-reference) * var(--screen-width));
+    width: calc(var(--divider-v3-width) / var(--design-reference) * var(--screen-width));
+    max-width: calc(var(--divider-v3-max-width-portrait) / var(--design-reference) * var(--screen-width));
+    max-height: calc(var(--divider-v3-max-height-portrait) / var(--design-reference) * var(--screen-width));
+  }
+}
+@media screen and (min-width: 1024px) {
+  .divider-v3__line {
+    height: calc(var(--divider-v3-height) / var(--design-reference) * var(--screen-width));
+    width: calc(var(--divider-v3-width) / var(--design-reference) * var(--screen-width));
+    max-width: calc(var(--divider-v3-max-width-desktop) / var(--design-reference) * var(--screen-width));
+    max-height: calc(var(--divider-v3-max-height-desktop) / var(--design-reference) * var(--screen-width));
+  }
+}

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

@@ -0,0 +1,7 @@
+export default function dividerv3Js(options = {}) {
+  try {
+    const { block } = options;
+  } catch (error) {
+    console.error(error);
+  }
+}