npm - cloudcommerce - Versions diffs - 0.2.3 → 0.3.0 - Mend

cloudcommerce 0.2.3 → 0.3.0

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 (149) hide show

package/packages/storefront/dist/server/chunks/pages/{all.c27193d6.mjs → all.23de4e5c.mjs} RENAMED Viewed

@@ -12,15 +12,14 @@ import 'node:stream';
 import 'slash';
 import { c as createAstro, a as createComponent, r as renderTemplate, b as addAttribute, d as renderComponent, u as unescapeHTML, F as Fragment, m as maybeRenderHead, e as renderSlot, f as renderHead, s as spreadAttributes } from '../astro.89bd9221.mjs';
 import api from '@cloudcommerce/api';
-import { reactive, computed, defineComponent, inject, mergeProps, useSSRContext, ref, watch, toRef, onMounted, onBeforeUnmount, provide, createVNode, resolveDynamicComponent, withCtx, renderSlot as renderSlot$1, unref, withDirectives, vShow, openBlock, createBlock, createCommentVNode, Fragment as Fragment$1, renderList, toRefs, resolveComponent, toDisplayString, createTextVNode } from 'vue';
-import { ssrRenderAttrs, ssrRenderSlot, ssrRenderClass, ssrRenderVNode, ssrRenderComponent, ssrRenderStyle, ssrRenderList, ssrInterpolate, ssrRenderAttr } from 'vue/server-renderer';
+import { reactive, computed, defineComponent, inject, mergeProps, useSSRContext, ref, watch, toRef, onMounted, onBeforeUnmount, provide, createVNode, resolveDynamicComponent, withCtx, renderSlot as renderSlot$1, unref, withDirectives, vShow, openBlock, createBlock, createCommentVNode, Fragment as Fragment$1, renderList, resolveComponent, withModifiers, createTextVNode, toDisplayString } from 'vue';
+import { ssrRenderAttrs, ssrRenderSlot, ssrRenderClass, ssrRenderVNode, ssrRenderComponent, ssrRenderStyle, ssrRenderList, ssrRenderTeleport, ssrIncludeBooleanAttr, ssrRenderAttr, ssrInterpolate } from 'vue/server-renderer';
 import { img, price, formatMoney, onPromotion } from '@ecomplus/utils';
 /* empty css                           */import { EventEmitter } from 'node:events';
 import fs, { readFileSync } from 'node:fs';
 import config from '@cloudcommerce/config';
 import { resolve as resolve$1 } from 'path';
-/* empty css                               */import 'lodash/debounce.js';
-import { useElementHover } from '@vueuse/core';
+/* empty css                               */import { useScroll, useElementHover, useDebounceFn, useTimeout, promiseTimeout } from '@vueuse/core';
 function isOutputFormat(value) {
   return ["avif", "jpeg", "jpg", "png", "webp"].includes(value);
@@ -800,6 +799,7 @@ const $$BaseBody = createComponent(async ($$result, $$props, $$slots) => {
   return renderTemplate`${maybeRenderHead($$result)}<body>
   ${renderSlot($$result, $$slots["default"])}
   ${renderSlot($$result, $$slots["before-body-end"])}
+  <div id="teleported"></div>
 </body>`;
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/lib/layouts/BaseBody.astro");
@@ -995,7 +995,7 @@ const parseShippingPhrase = (phrase) => {
 const carouselKey = Symbol("carousel");
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "CarouselControl",
   __ssrInlineRender: true,
   props: {
@@ -1017,14 +1017,14 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   }
 });
-const _sfc_setup$5 = _sfc_main$5.setup;
-_sfc_main$5.setup = (props, ctx) => {
+const _sfc_setup$7 = _sfc_main$7.setup;
+_sfc_main$7.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/lib/components/CarouselControl.vue");
-  return _sfc_setup$5 ? _sfc_setup$5(props, ctx) : void 0;
+  return _sfc_setup$7 ? _sfc_setup$7(props, ctx) : void 0;
 };
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "Carousel",
   __ssrInlineRender: true,
   props: {
@@ -1033,50 +1033,27 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     autoplay: null
   },
   emits: [
-    "update:modelValue",
-    "bound-left",
-    "bound-right"
+    "update:modelValue"
   ],
   setup(__props, { emit }) {
     const props = __props;
-    const approximatelyEqual = (v1, v2, epsilon) => {
-      return Math.abs(v1 - v2) <= epsilon;
-    };
-    const currentPage = ref(props.modelValue - 1);
+    const currentIndex = ref(props.modelValue - 1);
     watch(toRef(props, "modelValue"), (modelValue) => {
-      currentPage.value = modelValue - 1;
+      currentIndex.value = modelValue - 1;
     });
-    watch(currentPage, (current, previous) => {
+    watch(currentIndex, (current, previous) => {
       if (current !== previous) {
         emit("update:modelValue", current + 1);
       }
     });
     const wrapper = ref(null);
-    const isBoundLeft = ref(true);
-    const isBoundRight = ref(false);
+    const { x: currentPos, isScrolling, arrivedState } = useScroll(wrapper);
+    const isBoundLeft = computed(() => arrivedState.left);
+    const isBoundRight = computed(() => arrivedState.right);
     const slidesWidth = ref([]);
     const wrapperScrollWidth = ref(0);
     const wrapperVisibleWidth = ref(0);
-    const currentPos = ref(0);
-    const maxPages = ref(0);
-    ref(null);
-    ref(null);
-    const calcBounds = () => {
-      const _isBoundLeft = approximatelyEqual(currentPos.value, 0, 5);
-      const _isBoundRight = approximatelyEqual(
-        wrapperScrollWidth.value - wrapperVisibleWidth.value,
-        currentPos.value,
-        5
-      );
-      if (_isBoundLeft) {
-        emit("bound-left", true);
-      }
-      isBoundLeft.value = _isBoundLeft;
-      if (_isBoundRight) {
-        emit("bound-right", true);
-      }
-      isBoundRight.value = _isBoundRight;
-    };
+    const indexCount = ref(0);
     const calcWrapperWidth = () => {
       wrapperScrollWidth.value = wrapper.value.scrollWidth;
       wrapperVisibleWidth.value = wrapper.value.offsetWidth;
@@ -1089,38 +1066,24 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       }));
     };
     const calcNextWidth = (direction) => {
-      const nextSlideIndex = direction > 0 ? currentPage.value : currentPage.value + direction;
-      const width = slidesWidth.value[nextSlideIndex].width || 0;
+      const nextSlideIndex = direction > 0 ? currentIndex.value : currentIndex.value + direction;
+      const width = slidesWidth.value[nextSlideIndex]?.width || 0;
       if (!width) {
         return 0;
       }
       return width * direction;
     };
-    const calcCurrentPage = () => {
-      const getCurrentPage = slidesWidth.value.findIndex((slide) => {
-        return approximatelyEqual(slide.offsetLeft, currentPos.value, 5);
+    const calcCurrentIndex = () => {
+      const getCurrentIndex = slidesWidth.value.findIndex((slide) => {
+        return Math.abs(slide.offsetLeft - currentPos.value) <= 5;
       });
-      if (getCurrentPage !== -1 && getCurrentPage !== -2) {
-        currentPage.value = getCurrentPage || 0;
+      if (getCurrentIndex > -1) {
+        currentIndex.value = getCurrentIndex || 0;
       }
     };
-    const calcCurrentPosition = () => {
-      currentPos.value = wrapper.value.scrollLeft || 0;
-    };
-    const calcMaxPages = () => {
+    const calcIndexCount = () => {
       const maxPos = wrapperScrollWidth.value - wrapperVisibleWidth.value;
-      maxPages.value = slidesWidth.value.findIndex(({ offsetLeft }) => offsetLeft >= maxPos);
-    };
-    const calcOnInit = () => {
-      if (!wrapper.value) {
-        return;
-      }
-      calcWrapperWidth();
-      calcSlidesWidth();
-      calcCurrentPosition();
-      calcCurrentPage();
-      calcBounds();
-      calcMaxPages();
+      indexCount.value = slidesWidth.value.findIndex(({ offsetLeft }) => offsetLeft >= maxPos - 5);
     };
     let autoplayTimer = null;
     const restartAutoplay = () => {
@@ -1134,13 +1097,13 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     const changeSlide = (direction) => {
       if (direction < 0) {
         if (isBoundLeft.value) {
-          calcMaxPages();
-          currentPage.value = maxPages.value - 1;
+          calcIndexCount();
+          currentIndex.value = indexCount.value - 1;
           changeSlide(1);
           return;
         }
       } else if (isBoundRight.value) {
-        currentPage.value = 1;
+        currentIndex.value = 1;
         changeSlide(-1);
         return;
       }
@@ -1150,6 +1113,14 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         restartAutoplay();
       }
     };
+    watch(isScrolling, (_isScrolling) => {
+      if (_isScrolling) {
+        clearTimeout(autoplayTimer);
+      } else {
+        calcCurrentIndex();
+        restartAutoplay();
+      }
+    });
     const carousel = ref(null);
     const isHovered = useElementHover(carousel);
     watch(isHovered, (_isHovered) => {
@@ -1159,10 +1130,21 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         restartAutoplay();
       }
     });
+    const calcOnInit = () => {
+      if (!wrapper.value) {
+        return;
+      }
+      calcWrapperWidth();
+      calcSlidesWidth();
+      calcCurrentIndex();
+      calcIndexCount();
+    };
+    useDebounceFn(calcOnInit, 400);
     onMounted(() => {
       calcOnInit();
     });
     onBeforeUnmount(() => {
+      clearTimeout(autoplayTimer);
     });
     provide(carouselKey, {
       autoplay: toRef(props, "autoplay"),
@@ -1192,8 +1174,14 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         }),
         _: 3
       }), _parent);
-      ssrRenderSlot(_ctx.$slots, "controls", { changeSlide, isBoundLeft: isBoundLeft.value, isBoundRight: isBoundRight.value }, () => {
-        _push(ssrRenderComponent(_sfc_main$5, { direction: -1 }, {
+      ssrRenderSlot(_ctx.$slots, "controls", {
+        changeSlide,
+        isBoundLeft: unref(isBoundLeft),
+        isBoundRight: unref(isBoundRight),
+        currentPage: currentIndex.value + 1,
+        pageCount: indexCount.value + 1
+      }, () => {
+        _push(ssrRenderComponent(_sfc_main$7, { direction: -1 }, {
           default: withCtx((_, _push2, _parent2, _scopeId) => {
             if (_push2) {
               ssrRenderSlot(_ctx.$slots, "previous", {}, null, _push2, _parent2, _scopeId);
@@ -1205,7 +1193,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
           }),
           _: 3
         }, _parent));
-        _push(ssrRenderComponent(_sfc_main$5, null, {
+        _push(ssrRenderComponent(_sfc_main$7, null, {
           default: withCtx((_, _push2, _parent2, _scopeId) => {
             if (_push2) {
               ssrRenderSlot(_ctx.$slots, "next", {}, null, _push2, _parent2, _scopeId);
@@ -1223,14 +1211,14 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   }
 });
-const _sfc_setup$4 = _sfc_main$4.setup;
-_sfc_main$4.setup = (props, ctx) => {
+const _sfc_setup$6 = _sfc_main$6.setup;
+_sfc_main$6.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/lib/components/Carousel.vue");
-  return _sfc_setup$4 ? _sfc_setup$4(props, ctx) : void 0;
+  return _sfc_setup$6 ? _sfc_setup$6(props, ctx) : void 0;
 };
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "PitchBar",
   __ssrInlineRender: true,
   props: {
@@ -1248,31 +1236,38 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _push, _parent, _attrs) => {
       _push(`<div${ssrRenderAttrs(mergeProps({
-        "data-pitch-bar": "",
-        class: "bg-base-100"
+        class: "bg-base-100",
+        "data-pitch-bar": ""
       }, _attrs))}><div class="container md:w-2/3 mx-auto px-3 py-1">`);
-      _push(ssrRenderComponent(_sfc_main$4, {
+      _push(ssrRenderComponent(_sfc_main$6, {
         autoplay: unref(countValidSlides) > 1 ? 7e3 : null
       }, {
         controls: withCtx((_, _push2, _parent2, _scopeId) => {
           if (_push2) {
-            _push2(`<div style="${ssrRenderStyle(unref(countValidSlides) > 1 ? null : { display: "none" })}" class="text-xl leading-none text-base-400"${_scopeId}>`);
-            _push2(ssrRenderComponent(_sfc_main$5, {
-              direction: -1,
-              class: "pr-2 bg-base-100 hover:text-base-700"
-            }, null, _parent2, _scopeId));
-            _push2(ssrRenderComponent(_sfc_main$5, { class: "pl-2 bg-base-100 hover:text-base-700" }, null, _parent2, _scopeId));
-            _push2(`</div>`);
+            ssrRenderSlot(_ctx.$slots, "controls", { countValidSlides: unref(countValidSlides) }, () => {
+              _push2(`<div style="${ssrRenderStyle(unref(countValidSlides) > 1 ? null : { display: "none" })}" class="text-xl leading-none text-base-400" data-pitch-bar-controls${_scopeId}>`);
+              _push2(ssrRenderComponent(_sfc_main$7, {
+                direction: -1,
+                class: "pr-2 bg-base-100 hover:text-base-700"
+              }, null, _parent2, _scopeId));
+              _push2(ssrRenderComponent(_sfc_main$7, { class: "pl-2 bg-base-100 hover:text-base-700" }, null, _parent2, _scopeId));
+              _push2(`</div>`);
+            }, _push2, _parent2, _scopeId);
           } else {
             return [
-              withDirectives(createVNode("div", { class: "text-xl leading-none text-base-400" }, [
-                createVNode(_sfc_main$5, {
-                  direction: -1,
-                  class: "pr-2 bg-base-100 hover:text-base-700"
-                }),
-                createVNode(_sfc_main$5, { class: "pl-2 bg-base-100 hover:text-base-700" })
-              ], 512), [
-                [vShow, unref(countValidSlides) > 1]
+              renderSlot$1(_ctx.$slots, "controls", { countValidSlides: unref(countValidSlides) }, () => [
+                withDirectives(createVNode("div", {
+                  class: "text-xl leading-none text-base-400",
+                  "data-pitch-bar-controls": ""
+                }, [
+                  createVNode(_sfc_main$7, {
+                    direction: -1,
+                    class: "pr-2 bg-base-100 hover:text-base-700"
+                  }),
+                  createVNode(_sfc_main$7, { class: "pl-2 bg-base-100 hover:text-base-700" })
+                ], 512), [
+                  [vShow, unref(countValidSlides) > 1]
+                ])
               ])
             ];
           }
@@ -1285,13 +1280,13 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
               ssrRenderVNode(_push2, createVNode(resolveDynamicComponent(slide.href ? "ALink" : "span"), {
                 href: slide.href,
                 target: slide.target,
-                class: slide.href ? "hover:underline" : null
+                class: ["inline-block px-8", slide.href ? "hover:underline" : null]
               }, {
                 default: withCtx((_2, _push3, _parent3, _scopeId2) => {
                   if (_push3) {
                     ssrRenderSlot(_ctx.$slots, "slide", { slide, i, parsedContents: unref(parsedContents) }, () => {
                       if (unref(parsedContents)[i]) {
-                        _push3(`<span class="prose text-sm text-base-800"${_scopeId2}>${unref(parsedContents)[i]}</span>`);
+                        _push3(`<span class="prose text-sm text-base-800" data-pitch-bar-slide${_scopeId2}>${unref(parsedContents)[i]}</span>`);
                       } else {
                         _push3(`<!---->`);
                       }
@@ -1302,7 +1297,8 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
                         unref(parsedContents)[i] ? (openBlock(), createBlock("span", {
                           key: 0,
                           innerHTML: unref(parsedContents)[i],
-                          class: "prose text-sm text-base-800"
+                          class: "prose text-sm text-base-800",
+                          "data-pitch-bar-slide": ""
                         }, null, 8, ["innerHTML"])) : createCommentVNode("", true)
                       ])
                     ];
@@ -1320,14 +1316,15 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
                   (openBlock(), createBlock(resolveDynamicComponent(slide.href ? "ALink" : "span"), {
                     href: slide.href,
                     target: slide.target,
-                    class: slide.href ? "hover:underline" : null
+                    class: ["inline-block px-8", slide.href ? "hover:underline" : null]
                   }, {
                     default: withCtx(() => [
                       renderSlot$1(_ctx.$slots, "slide", { slide, i, parsedContents: unref(parsedContents) }, () => [
                         unref(parsedContents)[i] ? (openBlock(), createBlock("span", {
                           key: 0,
                           innerHTML: unref(parsedContents)[i],
-                          class: "prose text-sm text-base-800"
+                          class: "prose text-sm text-base-800",
+                          "data-pitch-bar-slide": ""
                         }, null, 8, ["innerHTML"])) : createCommentVNode("", true)
                       ])
                     ]),
@@ -1345,86 +1342,354 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   }
 });
-const _sfc_setup$3 = _sfc_main$3.setup;
-_sfc_main$3.setup = (props, ctx) => {
+const _sfc_setup$5 = _sfc_main$5.setup;
+_sfc_main$5.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/lib/components/PitchBar.vue");
-  return _sfc_setup$3 ? _sfc_setup$3(props, ctx) : void 0;
+  return _sfc_setup$5 ? _sfc_setup$5(props, ctx) : void 0;
 };
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
-  __name: "StickyHeader",
+const i19myAccount = "Minha conta";
+const i19openCart = "Abrir carrinho";
+const i19searchProducts = "Buscar produtos";
+const useComponentVariant = (props, stringProps) => {
+  return computed(() => {
+    let variantName = "";
+    Object.keys(props).forEach((prop) => {
+      if (props[prop] === true && prop !== "modelValue") {
+        variantName += ` ${prop.replace(/^(is|has)/, "")}`;
+      } else if (stringProps && stringProps.includes(prop)) {
+        variantName += ` ${prop}:${props[prop]}`;
+      }
+    });
+    return variantName.slice(1);
+  });
+};
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  __name: "Drawer",
   __ssrInlineRender: true,
   props: {
-    logo: null,
-    logoAltHeading: { default: "h2" }
+    modelValue: { type: Boolean, default: false },
+    placement: { default: "start" },
+    isTeleported: { type: Boolean, default: false },
+    hasCloseButton: { type: Boolean, default: true }
   },
-  setup(__props) {
+  emits: [
+    "update:modelValue"
+  ],
+  setup(__props, { emit }) {
     const props = __props;
-    const { logo } = toRefs(props);
-    const fade = ref(false);
-    setTimeout(() => {
-      fade.value = true;
-    }, 2e3);
+    const close = () => emit("update:modelValue", false);
+    const anchor = ref(null);
+    const canvas = ref(null);
+    const outsideClickListener = (ev) => {
+      if (!canvas.value?.contains(ev.target)) {
+        close();
+      }
+    };
+    const escClickListener = (ev) => {
+      if (ev.key === "Escape") {
+        close();
+      }
+    };
+    watch(toRef(props, "modelValue"), async (isOpen) => {
+      const header = anchor.value.closest('[class*="backdrop-"]');
+      if (isOpen) {
+        document.body.style.overflow = "hidden";
+        if (header) {
+          header.style.backdropFilter = "none";
+        }
+        setTimeout(() => {
+          document.addEventListener("click", outsideClickListener, { passive: true });
+          document.addEventListener("keydown", escClickListener, { passive: true });
+        }, 500);
+      } else {
+        document.body.style.overflow = null;
+        if (header) {
+          setTimeout(() => {
+            header.style.backdropFilter = null;
+          }, 500);
+        }
+        document.removeEventListener("click", outsideClickListener);
+        document.removeEventListener("keydown", escClickListener);
+      }
+    });
+    const slideTo = computed(() => {
+      switch (props.placement) {
+        case "start":
+          return "left";
+        case "end":
+          return "right";
+        case "top":
+          return "up";
+        default:
+          return "down";
+      }
+    });
+    const componentVariant = useComponentVariant(props, ["placement"]);
     return (_ctx, _push, _parent, _attrs) => {
       const _component_Fade = resolveComponent("Fade");
-      _push(`<header${ssrRenderAttrs(mergeProps({
-        class: "header bg-opacity-90 backdrop-blur-md sticky top-0 z-50 py-1 sm:py-2",
-        "data-sticky-header": ""
-      }, _attrs))}><div class="container"><div class="grid grid-flow-col auto-cols-max justify-between items-center">`);
-      ssrRenderSlot(_ctx.$slots, "aside", {}, () => {
-        _push(`<div class="header__aside md:hidden"><div class="i-bars-3-bottom-left"></div></div>`);
-      }, _push, _parent);
-      ssrRenderSlot(_ctx.$slots, "logo", { logo: unref(logo) }, () => {
-        if (unref(logo)) {
-          _push(`<a href="/">`);
-          ssrRenderVNode(_push, createVNode(resolveDynamicComponent(unref(logo).alt && __props.logoAltHeading || "span"), { class: "m-0" }, {
-            default: withCtx((_, _push2, _parent2, _scopeId) => {
-              if (_push2) {
-                _push2(`<img${ssrRenderAttrs(unref(logo))}${_scopeId}>`);
-              } else {
-                return [
-                  createVNode("img", unref(logo), null, 16)
-                ];
-              }
-            }),
-            _: 1
-          }), _parent);
-          _push(`</a>`);
-        } else {
-          _push(`<!---->`);
-        }
-      }, _push, _parent);
-      _push(`<div class="flex items-center">`);
-      ssrRenderSlot(_ctx.$slots, "actions", {}, () => {
-        ssrRenderSlot(_ctx.$slots, "nav", {}, () => {
-          _push(ssrRenderComponent(_component_Fade, {
-            speed: "slow",
-            slide: "down"
-          }, {
-            default: withCtx((_, _push2, _parent2, _scopeId) => {
-              if (_push2) {
-                if (fade.value) {
-                  _push2(`<div class="h-20 bg-primary w-20"${_scopeId}> Fadiiing </div>`);
+      _push(`<div${ssrRenderAttrs(mergeProps({
+        ref_key: "anchor",
+        ref: anchor,
+        class: "relative"
+      }, _attrs))}>`);
+      ssrRenderTeleport(_push, (_push2) => {
+        _push2(ssrRenderComponent(_component_Fade, {
+          slide: unref(slideTo),
+          speed: "slow",
+          "is-floating": ""
+        }, {
+          default: withCtx((_, _push3, _parent2, _scopeId) => {
+            if (_push3) {
+              if (__props.modelValue) {
+                _push3(`<dialog class="${ssrRenderClass([__props.isTeleported ? "fixed top-0 left-0" : "absolute", "w-screen max-w-sm p-0 z-50"])}"${ssrIncludeBooleanAttr(__props.modelValue) ? " open" : ""}${ssrRenderAttr("data-drawer", unref(componentVariant))}${_scopeId}><div class="relative"${_scopeId}>`);
+                if (__props.hasCloseButton) {
+                  _push3(`<button type="button"${ssrRenderAttr("aria-label", "Fechar")} class="${ssrRenderClass([__props.placement === "end" ? "left-2" : "right-2", "absolute top-2"])}" data-drawer-close${_scopeId}>`);
+                  ssrRenderSlot(_ctx.$slots, "close", {}, () => {
+                    _push3(`<i class="i-close text-base-400 text-3xl"${_scopeId}></i>`);
+                  }, _push3, _parent2, _scopeId);
+                  _push3(`</button>`);
                 } else {
-                  _push2(`<!---->`);
+                  _push3(`<!---->`);
                 }
+                ssrRenderSlot(_ctx.$slots, "default", {}, null, _push3, _parent2, _scopeId);
+                _push3(`</div></dialog>`);
               } else {
-                return [
-                  fade.value ? (openBlock(), createBlock("div", {
-                    key: 0,
-                    class: "h-20 bg-primary w-20"
-                  }, " Fadiiing ")) : createCommentVNode("", true)
-                ];
+                _push3(`<!---->`);
               }
-            }),
-            _: 1
-          }, _parent));
-        }, _push, _parent);
-        ssrRenderSlot(_ctx.$slots, "search", {}, null, _push, _parent);
-        ssrRenderSlot(_ctx.$slots, "buttons", {}, null, _push, _parent);
-      }, _push, _parent);
-      _push(`</div></div></div></header>`);
+            } else {
+              return [
+                __props.modelValue ? (openBlock(), createBlock("dialog", {
+                  key: 0,
+                  class: ["w-screen max-w-sm p-0 z-50", __props.isTeleported ? "fixed top-0 left-0" : "absolute"],
+                  open: __props.modelValue,
+                  "data-drawer": unref(componentVariant)
+                }, [
+                  createVNode("div", {
+                    ref_key: "canvas",
+                    ref: canvas,
+                    class: "relative"
+                  }, [
+                    __props.hasCloseButton ? (openBlock(), createBlock("button", {
+                      key: 0,
+                      type: "button",
+                      "aria-label": "Fechar",
+                      onClick: withModifiers(close, ["prevent"]),
+                      class: ["absolute top-2", __props.placement === "end" ? "left-2" : "right-2"],
+                      "data-drawer-close": ""
+                    }, [
+                      renderSlot$1(_ctx.$slots, "close", {}, () => [
+                        createVNode("i", { class: "i-close text-base-400 text-3xl" })
+                      ])
+                    ], 10, ["onClick"])) : createCommentVNode("", true),
+                    renderSlot$1(_ctx.$slots, "default")
+                  ], 512)
+                ], 10, ["open", "data-drawer"])) : createCommentVNode("", true)
+              ];
+            }
+          }),
+          _: 3
+        }, _parent));
+      }, "#teleported", !__props.isTeleported, _parent);
+      _push(`</div>`);
+    };
+  }
+});
+const _sfc_setup$4 = _sfc_main$4.setup;
+_sfc_main$4.setup = (props, ctx) => {
+  const ssrContext = useSSRContext();
+  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/lib/components/Drawer.vue");
+  return _sfc_setup$4 ? _sfc_setup$4(props, ctx) : void 0;
+};
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "StickyHeader",
+  __ssrInlineRender: true,
+  props: {
+    isShownOnScrollDown: { type: Boolean }
+  },
+  setup(__props) {
+    const props = __props;
+    ref(null);
+    const { ready, start } = useTimeout(100, { controls: true, immediate: false });
+    const height = ref(0);
+    const { y } = { y: ref(0) };
+    const isSticky = computed(() => ready.value && y.value > height.value * 1.5);
+    const transition = ref("none");
+    watch(isSticky, async (isSetSticky) => {
+      if (!isSetSticky) {
+        start();
+        transition.value = "none";
+      } else {
+        await promiseTimeout(300);
+        transition.value = "opacity var(--transition-slow), transform var(--transition)";
+      }
+    });
+    const isScrollUp = ref(false);
+    watch(y, (newY, oldY) => {
+      isScrollUp.value = newY > 0 && newY < oldY;
+    });
+    const componentVariant = useComponentVariant(reactive({
+      ...props,
+      isSticky,
+      isScrollUp
+    }));
+    return (_ctx, _push, _parent, _attrs) => {
+      _push(`<!--[--><div style="${ssrRenderStyle(unref(isSticky) ? `height: ${height.value}px` : null)}"></div><header class="${ssrRenderClass([{
+        "sticky bg-white/80 backdrop-blur-md shadow py-2 md:py-3": unref(isSticky),
+        "opacity-0 -translate-y-full": unref(isSticky) && (!isScrollUp.value || __props.isShownOnScrollDown),
+        "py-3 sm:py-4 md:py-5": !unref(isSticky)
+      }, "z-50 top-0 will-change-transform"])}" style="${ssrRenderStyle({ transition: transition.value })}"${ssrRenderAttr("data-sticky-header", unref(componentVariant))}>`);
+      ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent);
+      _push(`</header><!--]-->`);
+    };
+  }
+});
+const _sfc_setup$3 = _sfc_main$3.setup;
+_sfc_main$3.setup = (props, ctx) => {
+  const ssrContext = useSSRContext();
+  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/lib/components/StickyHeader.vue");
+  return _sfc_setup$3 ? _sfc_setup$3(props, ctx) : void 0;
+};
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "ShopHeader",
+  __ssrInlineRender: true,
+  setup(__props) {
+    const buttons = ref({
+      search: {
+        icon: "i-search",
+        onClick: () => {
+        },
+        label: i19searchProducts
+      },
+      account: {
+        icon: "i-account",
+        onClick: () => {
+        },
+        label: i19myAccount
+      },
+      cart: {
+        icon: "i-shopping-cart",
+        onClick: () => {
+        },
+        label: i19openCart
+      }
+    });
+    const isSidenavOpen = ref(false);
+    return (_ctx, _push, _parent, _attrs) => {
+      _push(ssrRenderComponent(_sfc_main$3, _attrs, {
+        default: withCtx((_, _push2, _parent2, _scopeId) => {
+          if (_push2) {
+            _push2(`<div class="container lg:max-w-7xl mx-auto px-1 lg:pl-3 grid grid-flow-col grid-cols-3 justify-between items-center md:grid-cols-none md:auto-cols-max" data-header${_scopeId}>`);
+            ssrRenderSlot(_ctx.$slots, "sidenav-toggle", {}, () => {
+              _push2(`<div class="md:hidden" data-sidenav-toggle${_scopeId}><button class="px-2 my-1"${ssrRenderAttr("aria-label", "Abrir/fechar menu")}${_scopeId}>`);
+              ssrRenderSlot(_ctx.$slots, "sidenav-toggle-content", {}, () => {
+                _push2(`<i class="i-menu text-base-500 text-3xl"${_scopeId}></i>`);
+              }, _push2, _parent2, _scopeId);
+              _push2(`</button>`);
+              _push2(ssrRenderComponent(_sfc_main$4, {
+                modelValue: isSidenavOpen.value,
+                "onUpdate:modelValue": ($event) => isSidenavOpen.value = $event,
+                class: "-ml-1 lg:-ml-3"
+              }, {
+                default: withCtx((_2, _push3, _parent3, _scopeId2) => {
+                  if (_push3) {
+                    _push3(` MENU `);
+                  } else {
+                    return [
+                      createTextVNode(" MENU ")
+                    ];
+                  }
+                }),
+                _: 1
+              }, _parent2, _scopeId));
+              _push2(`</div>`);
+            }, _push2, _parent2, _scopeId);
+            ssrRenderSlot(_ctx.$slots, "logo", {}, null, _push2, _parent2, _scopeId);
+            ssrRenderSlot(_ctx.$slots, "nav", {}, null, _push2, _parent2, _scopeId);
+            ssrRenderSlot(_ctx.$slots, "buttons", {}, () => {
+              _push2(`<div class="px-2 flex justify-end items-center gap-3 lg:gap-4 text-base-800" data-header-buttons${_scopeId}><!--[-->`);
+              ssrRenderList(buttons.value, ({ icon, onClick, label }, name) => {
+                ssrRenderSlot(_ctx.$slots, "button", mergeProps({ key: name }, { name, icon, onClick }), () => {
+                  _push2(`<button class="${ssrRenderClass(name === "account" ? "hidden sm:block" : null)}"${ssrRenderAttr("aria-label", label)}${ssrRenderAttr("data-header-button", name)}${_scopeId}>`);
+                  ssrRenderSlot(_ctx.$slots, "button-content", { name, icon }, () => {
+                    _push2(`<i class="${ssrRenderClass([icon, "hover:text-primary w-7 h-7 hover:scale-110 active:scale-125"])}"${_scopeId}></i>`);
+                  }, _push2, _parent2, _scopeId);
+                  _push2(`</button>`);
+                }, _push2, _parent2, _scopeId);
+              });
+              _push2(`<!--]--></div>`);
+            }, _push2, _parent2, _scopeId);
+            _push2(`</div>`);
+          } else {
+            return [
+              createVNode("div", {
+                class: "container lg:max-w-7xl mx-auto px-1 lg:pl-3 grid grid-flow-col grid-cols-3 justify-between items-center md:grid-cols-none md:auto-cols-max",
+                "data-header": ""
+              }, [
+                renderSlot$1(_ctx.$slots, "sidenav-toggle", {}, () => [
+                  createVNode("div", {
+                    class: "md:hidden",
+                    "data-sidenav-toggle": ""
+                  }, [
+                    createVNode("button", {
+                      class: "px-2 my-1",
+                      "aria-label": "Abrir/fechar menu",
+                      onClick: ($event) => isSidenavOpen.value = !isSidenavOpen.value
+                    }, [
+                      renderSlot$1(_ctx.$slots, "sidenav-toggle-content", {}, () => [
+                        createVNode("i", { class: "i-menu text-base-500 text-3xl" })
+                      ])
+                    ], 8, ["onClick"]),
+                    createVNode(_sfc_main$4, {
+                      modelValue: isSidenavOpen.value,
+                      "onUpdate:modelValue": ($event) => isSidenavOpen.value = $event,
+                      class: "-ml-1 lg:-ml-3"
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode(" MENU ")
+                      ]),
+                      _: 1
+                    }, 8, ["modelValue", "onUpdate:modelValue"])
+                  ])
+                ]),
+                renderSlot$1(_ctx.$slots, "logo"),
+                renderSlot$1(_ctx.$slots, "nav"),
+                renderSlot$1(_ctx.$slots, "buttons", {}, () => [
+                  createVNode("div", {
+                    class: "px-2 flex justify-end items-center gap-3 lg:gap-4 text-base-800",
+                    "data-header-buttons": ""
+                  }, [
+                    (openBlock(true), createBlock(Fragment$1, null, renderList(buttons.value, ({ icon, onClick, label }, name) => {
+                      return renderSlot$1(_ctx.$slots, "button", mergeProps({ key: name }, { name, icon, onClick }), () => [
+                        createVNode("button", {
+                          class: name === "account" ? "hidden sm:block" : null,
+                          "aria-label": label,
+                          onClick,
+                          "data-header-button": name
+                        }, [
+                          renderSlot$1(_ctx.$slots, "button-content", { name, icon }, () => [
+                            createVNode("i", {
+                              class: [icon, "hover:text-primary w-7 h-7 hover:scale-110 active:scale-125"]
+                            }, null, 2)
+                          ])
+                        ], 10, ["aria-label", "onClick", "data-header-button"])
+                      ]);
+                    }), 128))
+                  ])
+                ])
+              ])
+            ];
+          }
+        }),
+        _: 3
+      }, _parent));
     };
   }
 });
@@ -1432,7 +1697,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
 const _sfc_setup$2 = _sfc_main$2.setup;
 _sfc_main$2.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
-  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/lib/components/StickyHeader.vue");
+  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/lib/components/ShopHeader.vue");
   return _sfc_setup$2 ? _sfc_setup$2(props, ctx) : void 0;
 };
@@ -1461,12 +1726,17 @@ const $$PagesHeader = createComponent(async ($$result, $$props, $$slots) => {
   const logoSrc = header.logo || settings.logo;
   const LogoHeading = Astro2.props.logoHeading || (isHomepage ? "h1" : "h2");
   return renderTemplate`${renderComponent($$result, "Fragment", Fragment, {}, { "default": () => renderTemplate`${renderSlot($$result, $$slots["pitch-bar"], renderTemplate`
-    ${pitchBar.slides.length && renderTemplate`${renderComponent($$result, "PitchBar", _sfc_main$3, { ...pitchBar, "client:idle": true, "client:component-hydration": "idle", "client:component-path": "@@sf/components/PitchBar.vue", "client:component-export": "default" })}`}
+    ${pitchBar.slides.length > 1 && renderTemplate`${renderComponent($$result, "PitchBar", _sfc_main$5, { ...pitchBar, "client:idle": true, "client:component-hydration": "idle", "client:component-path": "@@sf/components/PitchBar.vue", "client:component-export": "default" })}`}
+    ${pitchBar.slides.length === 1 && renderTemplate`${renderComponent($$result, "PitchBar", _sfc_main$5, { ...pitchBar })}`}
   `)}${renderSlot($$result, $$slots["sticky-header"], renderTemplate`
-    ${renderComponent($$result, "StickyHeader", _sfc_main$2, { "client:load": true, "client:component-hydration": "load", "client:component-path": "@@sf/components/StickyHeader.vue", "client:component-export": "default" }, { "logo": () => renderTemplate`${renderComponent($$result, "Fragment", Fragment, { "slot": "logo" }, { "default": () => renderTemplate`${renderSlot($$result, $$slots["logo"], renderTemplate`
-          ${renderComponent($$result, "LogoHeading", LogoHeading, {}, { "default": () => renderTemplate`${renderComponent($$result, "Picture", $$Picture, { "src": logoSrc, "alt": settings.name, "widths": [300], "sizes": "150px", "fetchpriority": "high" })}` })}
+    ${renderComponent($$result, "ShopHeader", _sfc_main$2, { "client:load": true, "client:component-hydration": "load", "client:component-path": "@@sf/components/ShopHeader.vue", "client:component-export": "default" }, { "logo": () => renderTemplate`${renderComponent($$result, "Fragment", Fragment, { "slot": "logo" }, { "default": () => renderTemplate`${renderSlot($$result, $$slots["logo"], renderTemplate`
+          ${maybeRenderHead($$result)}<a href="/">
+            ${renderComponent($$result, "LogoHeading", LogoHeading, {}, { "default": () => renderTemplate`${renderComponent($$result, "Picture", $$Picture, { "src": logoSrc, "alt": settings.name, "widths": [300], "sizes": "150px", "fetchpriority": "high", "class": "hover:drop-shadow-sm" })}` })}
+          </a>
         `)}` })}` })}
-  `)}` })}`;
+  `)}` })}
+`;
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/lib/layouts/PagesHeader.astro");
 const $$Astro$6 = createAstro("https://ecom2-002.web.app");
@@ -1631,18 +1901,6 @@ const usePrices = (props) => {
   };
 };
-const useComponentVariant = (props) => {
-  return computed(() => {
-    let variantName = "";
-    Object.keys(props).forEach((prop) => {
-      if (props[prop] === true) {
-        variantName += ` ${prop.replace(/^(is|has)/, "")}`;
-      }
-    });
-    return variantName.slice(1);
-  });
-};
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "Prices",
   __ssrInlineRender: true,
@@ -1677,12 +1935,12 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     return (_ctx, _push, _parent, _attrs) => {
       const _component_Fade = resolveComponent("Fade");
       _push(`<div${ssrRenderAttrs(mergeProps({
-        "data-prices": unref(componentVariant),
-        class: "text-base-600"
+        class: "text-base-600",
+        "data-prices": unref(componentVariant)
       }, _attrs))}>`);
       if (unref(comparePrice)) {
         ssrRenderSlot(_ctx.$slots, "compare", { salePrice: unref(salePrice), comparePrice: unref(comparePrice) }, () => {
-          _push(`<span data-prices-compare class="text-base-500 mr-1">`);
+          _push(`<span class="text-base-500 mr-1" data-prices-compare>`);
           ssrRenderSlot(_ctx.$slots, "compare-pre", {}, () => {
             if (__props.isLiteral) {
               _push(`<small>${ssrInterpolate(`${"De"} `)}</small>`);
@@ -1706,7 +1964,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         _push(`<!---->`);
       }
       ssrRenderSlot(_ctx.$slots, "sale", { salePrice: unref(salePrice) }, () => {
-        _push(`<strong data-prices-sale class="inline-block text-base-800">`);
+        _push(`<strong class="inline-block text-base-800" data-prices-sale>`);
         ssrRenderSlot(_ctx.$slots, "sale-pre", {}, () => {
           if (unref(hasVariedPrices)) {
             _push(`<small>${ssrInterpolate(`${"A partir de"} `)}</small>`);
@@ -1726,7 +1984,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             if (unref(cashbackValue)) {
               ssrRenderSlot(_ctx.$slots, "cashback", { salePrice: unref(salePrice), cashbackValue: unref(cashbackValue), cashbackPercentage: unref(cashbackPercentage) }, () => {
                 if (__props.hasCashback) {
-                  _push2(`<div data-prices-cashback class="relative z-10"${_scopeId}><span${ssrRenderAttr("data-tooltip", "Receba $1 de volta".replace("$1", _ctx.$percentage(unref(cashbackPercentage))))}${_scopeId}>`);
+                  _push2(`<div class="relative z-10" data-prices-cashback${_scopeId}><span${ssrRenderAttr("data-tooltip", "Receba $1 de volta".replace("$1", _ctx.$percentage(unref(cashbackPercentage))))}${_scopeId}>`);
                   ssrRenderSlot(_ctx.$slots, "cashback-pre", {}, () => {
                     _push2(`<i class="i-cashback mr-1"${_scopeId}></i>`);
                   }, _push2, _parent2, _scopeId);
@@ -1749,8 +2007,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               unref(cashbackValue) ? renderSlot$1(_ctx.$slots, "cashback", mergeProps({ key: 0 }, { salePrice: unref(salePrice), cashbackValue: unref(cashbackValue), cashbackPercentage: unref(cashbackPercentage) }), () => [
                 __props.hasCashback ? (openBlock(), createBlock("div", {
                   key: 0,
-                  "data-prices-cashback": "",
-                  class: "relative z-10"
+                  class: "relative z-10",
+                  "data-prices-cashback": ""
                 }, [
                   createVNode("span", {
                     "data-tooltip": "Receba $1 de volta".replace("$1", _ctx.$percentage(unref(cashbackPercentage)))