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

cloudcommerce 0.2.3 → 0.4.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 (153) hide show

package/packages/storefront/dist/server/chunks/pages/{all.c27193d6.mjs → all.6379e666.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, toDisplayString, createTextVNode } from 'vue';
+import { ssrRenderAttrs, ssrRenderSlot, ssrRenderClass, ssrRenderVNode, ssrRenderComponent, ssrRenderStyle, ssrRenderList, 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);
@@ -798,8 +797,10 @@ const $$BaseBody = createComponent(async ($$result, $$props, $$slots) => {
   const Astro2 = $$result.createAstro($$Astro$e, $$props, $$slots);
   Astro2.self = $$BaseBody;
   return renderTemplate`${maybeRenderHead($$result)}<body>
+  <div id="teleported-top"></div>
   ${renderSlot($$result, $$slots["default"])}
   ${renderSlot($$result, $$slots["before-body-end"])}
+  <div id="teleported-bottom"></div>
 </body>`;
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/lib/layouts/BaseBody.astro");
@@ -993,9 +994,24 @@ const parseShippingPhrase = (phrase) => {
   return parsePhrase(phrase, "calculate_shipping", "free_shipping_from_value");
 };
+const usePitchBar = (props) => {
+  const parsedContents = computed(() => {
+    return props.slides.map(({ html }) => {
+      return parseShippingPhrase(html).value;
+    });
+  });
+  const countValidSlides = computed(() => {
+    return parsedContents.value.filter((html) => html).length;
+  });
+  return {
+    parsedContents,
+    countValidSlides
+  };
+};
 const carouselKey = Symbol("carousel");
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "CarouselControl",
   __ssrInlineRender: true,
   props: {
@@ -1017,14 +1033,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 +1049,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 +1082,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 +1113,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 +1129,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 +1146,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 +1190,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 +1209,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 +1227,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: {
@@ -1238,39 +1242,32 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
-    const parsedContents = computed(() => {
-      return props.slides.map(({ html }) => {
-        return parseShippingPhrase(html).value;
-      });
-    });
-    const countValidSlides = computed(() => {
-      return parsedContents.value.filter((html) => html).length;
-    });
+    const {
+      parsedContents,
+      countValidSlides
+    } = usePitchBar(props);
     return (_ctx, _push, _parent, _attrs) => {
-      _push(`<div${ssrRenderAttrs(mergeProps({
-        "data-pitch-bar": "",
-        class: "bg-base-100"
-      }, _attrs))}><div class="container md:w-2/3 mx-auto px-3 py-1">`);
-      _push(ssrRenderComponent(_sfc_main$4, {
+      _push(`<div${ssrRenderAttrs(mergeProps({ class: "bg-base-100" }, _attrs))}><div class="container md:w-2/3 mx-auto px-3 py-1">`);
+      _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, {
+            _push2(ssrRenderComponent(_sfc_main$7, {
               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(ssrRenderComponent(_sfc_main$7, { class: "pl-2 bg-base-100 hover:text-base-700" }, null, _parent2, _scopeId));
             _push2(`</div>`);
           } else {
             return [
               withDirectives(createVNode("div", { class: "text-xl leading-none text-base-400" }, [
-                createVNode(_sfc_main$5, {
+                createVNode(_sfc_main$7, {
                   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" })
+                createVNode(_sfc_main$7, { class: "pl-2 bg-base-100 hover:text-base-700" })
               ], 512), [
                 [vShow, unref(countValidSlides) > 1]
               ])
@@ -1285,26 +1282,22 @@ 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>`);
-                      } else {
-                        _push3(`<!---->`);
-                      }
-                    }, _push3, _parent3, _scopeId2);
+                    if (unref(parsedContents)[i]) {
+                      _push3(`<span class="prose text-sm text-base-800"${_scopeId2}>${unref(parsedContents)[i]}</span>`);
+                    } else {
+                      _push3(`<!---->`);
+                    }
                   } else {
                     return [
-                      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"
-                        }, null, 8, ["innerHTML"])) : createCommentVNode("", true)
-                      ])
+                      unref(parsedContents)[i] ? (openBlock(), createBlock("span", {
+                        key: 0,
+                        innerHTML: unref(parsedContents)[i],
+                        class: "prose text-sm text-base-800"
+                      }, null, 8, ["innerHTML"])) : createCommentVNode("", true)
                     ];
                   }
                 }),
@@ -1320,16 +1313,14 @@ 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"
-                        }, null, 8, ["innerHTML"])) : createCommentVNode("", true)
-                      ])
+                      unref(parsedContents)[i] ? (openBlock(), createBlock("span", {
+                        key: 0,
+                        innerHTML: unref(parsedContents)[i],
+                        class: "prose text-sm text-base-800"
+                      }, null, 8, ["innerHTML"])) : createCommentVNode("", true)
                     ]),
                     _: 2
                   }, 1032, ["href", "target", "class"]))
@@ -1338,93 +1329,316 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
             ];
           }
         }),
-        _: 3
+        _: 1
       }, _parent));
       _push(`</div></div>`);
     };
   }
 });
+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/components/PitchBar.vue");
+  return _sfc_setup$5 ? _sfc_setup$5(props, ctx) : void 0;
+};
+const i19myAccount = "Minha conta";
+const i19openCart = "Abrir carrinho";
+const i19searchProducts = "Buscar produtos";
+const useStickyHeader = (props) => {
+  const {
+    header,
+    canSetStyles,
+    canCreateHeightDiv,
+    isShownOnScrollDown
+  } = {
+    canSetStyles: true,
+    canCreateHeightDiv: true,
+    ...props
+  };
+  const { ready, start } = useTimeout(100, { controls: true, immediate: false });
+  const staticHeight = ref(0);
+  const staticY = ref(0);
+  const { y } = { y: ref(0) };
+  const isSticky = computed(() => ready.value && y.value > staticY.value * 1.2);
+  const transition = ref("none");
+  watch(isSticky, async (_isSticky) => {
+    if (canSetStyles) {
+      header.value.style.position = _isSticky ? "sticky" : null;
+    }
+    if (!_isSticky) {
+      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;
+  });
+  return {
+    staticHeight,
+    staticY,
+    isSticky,
+    isScrollUp,
+    transition
+  };
+};
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  __name: "Drawer",
+  __ssrInlineRender: true,
+  props: {
+    modelValue: { type: Boolean, default: false },
+    placement: { default: "start" },
+    position: { default: "fixed" },
+    hasCloseButton: { type: Boolean, default: true }
+  },
+  emits: [
+    "update:modelValue"
+  ],
+  setup(__props, { emit }) {
+    const props = __props;
+    const close = () => emit("update:modelValue", false);
+    const drawer = ref(null);
+    const outsideClickListener = (ev) => {
+      if (!drawer.value?.contains(ev.target)) {
+        close();
+      }
+    };
+    const escClickListener = (ev) => {
+      if (ev.key === "Escape") {
+        close();
+      }
+    };
+    watch(toRef(props, "modelValue"), async (isOpen) => {
+      if (isOpen) {
+        document.body.style.overflow = "hidden";
+        setTimeout(() => {
+          document.addEventListener("click", outsideClickListener, { passive: true });
+          document.addEventListener("keydown", escClickListener, { passive: true });
+        }, 500);
+      } else {
+        document.body.style.overflow = null;
+        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 isFixed = computed(() => {
+      return props.position === "fixed";
+    });
+    const isPlacementX = computed(() => {
+      return props.placement === "start" || props.placement === "end";
+    });
+    return (_ctx, _push, _parent, _attrs) => {
+      const _component_Fade = resolveComponent("Fade");
+      _push(ssrRenderComponent(_component_Fade, mergeProps({
+        slide: unref(slideTo),
+        speed: "slow",
+        "is-floating": ""
+      }, _attrs), {
+        default: withCtx((_, _push2, _parent2, _scopeId) => {
+          if (_push2) {
+            if (__props.modelValue) {
+              _push2(`<dialog class="${ssrRenderClass([[
+                __props.position,
+                unref(isFixed) ? `top-0 left-0 ${unref(isPlacementX) ? "h-screen" : ""}` : null
+              ], "w-screen max-w-sm shadow p-0 m-0 z-50"])}"${ssrIncludeBooleanAttr(__props.modelValue) ? " open" : ""}${ssrRenderAttr("data-drawer", __props.placement)}${_scopeId}><div class="relative"${_scopeId}>`);
+              if (__props.hasCloseButton) {
+                _push2(`<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", {}, () => {
+                  _push2(`<i class="i-close text-base-400 text-3xl"${_scopeId}></i>`);
+                }, _push2, _parent2, _scopeId);
+                _push2(`</button>`);
+              } else {
+                _push2(`<!---->`);
+              }
+              ssrRenderSlot(_ctx.$slots, "default", {}, null, _push2, _parent2, _scopeId);
+              _push2(`</div></dialog>`);
+            } else {
+              _push2(`<!---->`);
+            }
+          } else {
+            return [
+              __props.modelValue ? (openBlock(), createBlock("dialog", {
+                key: 0,
+                ref_key: "drawer",
+                ref: drawer,
+                class: ["w-screen max-w-sm shadow p-0 m-0 z-50", [
+                  __props.position,
+                  unref(isFixed) ? `top-0 left-0 ${unref(isPlacementX) ? "h-screen" : ""}` : null
+                ]],
+                open: __props.modelValue,
+                "data-drawer": __props.placement
+              }, [
+                createVNode("div", { 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")
+                ])
+              ], 10, ["open", "data-drawer"])) : createCommentVNode("", true)
+            ];
+          }
+        }),
+        _: 3
+      }, _parent));
+    };
+  }
+});
+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: "ShopSidenav",
+  __ssrInlineRender: true,
+  props: {
+    categories: null
+  },
+  setup(__props) {
+    const props = __props;
+    const mainCategories = props.categories.filter(({ slug, parent }) => {
+      return slug && !parent;
+    });
+    return (_ctx, _push, _parent, _attrs) => {
+      _push(`<aside${ssrRenderAttrs(mergeProps({ "data-sidenav": "" }, _attrs))}><nav class="py-5" data-sidenav-nav><ul><!--[-->`);
+      ssrRenderList(unref(mainCategories), (mainCategory) => {
+        _push(`<li><a${ssrRenderAttr("href", `/${mainCategory.slug}`)}>${ssrInterpolate(mainCategory.name)}</a></li>`);
+      });
+      _push(`<!--]--></ul></nav></aside>`);
+    };
+  }
+});
 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/PitchBar.vue");
+  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/lib/components/ShopSidenav.vue");
   return _sfc_setup$3 ? _sfc_setup$3(props, ctx) : void 0;
 };
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
-  __name: "StickyHeader",
+  __name: "ShopHeader",
   __ssrInlineRender: true,
   props: {
-    logo: null,
-    logoAltHeading: { default: "h2" }
+    categories: null
   },
   setup(__props) {
-    const props = __props;
-    const { logo } = toRefs(props);
-    const fade = ref(false);
-    setTimeout(() => {
-      fade.value = true;
-    }, 2e3);
+    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);
+    const header = ref(null);
+    const {
+      isSticky,
+      staticHeight,
+      staticY
+    } = useStickyHeader({ header });
+    const sidenavHeight = computed(() => {
+      return isSticky.value ? staticHeight.value : staticY.value;
+    });
     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>`);
-                } else {
-                  _push2(`<!---->`);
-                }
-              } else {
-                return [
-                  fade.value ? (openBlock(), createBlock("div", {
-                    key: 0,
-                    class: "h-20 bg-primary w-20"
-                  }, " Fadiiing ")) : createCommentVNode("", true)
-                ];
-              }
-            }),
-            _: 1
-          }, _parent));
+        ref_key: "header",
+        ref: header,
+        class: ["top-0 z-50", unref(isSticky) ? "bg-white/80 backdrop-blur-md shadow py-2 md:py-3" : "bg-white py-3 sm:py-4 md:py-5"]
+      }, _attrs))}><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">`);
+      ssrRenderSlot(_ctx.$slots, "sidenav-toggle", {}, () => {
+        _push(`<div class="md:hidden" data-sidenav-toggle><button class="px-2 my-1"${ssrRenderAttr("aria-label", "Abrir/fechar menu")}>`);
+        ssrRenderSlot(_ctx.$slots, "sidenav-toggle-content", {}, () => {
+          _push(`<i class="${ssrRenderClass([isSidenavOpen.value ? "i-close" : "i-menu", "text-base-500 text-3xl"])}"></i>`);
         }, _push, _parent);
-        ssrRenderSlot(_ctx.$slots, "search", {}, null, _push, _parent);
-        ssrRenderSlot(_ctx.$slots, "buttons", {}, null, _push, _parent);
+        _push(`</button></div>`);
       }, _push, _parent);
-      _push(`</div></div></div></header>`);
+      ssrRenderSlot(_ctx.$slots, "logo", {}, null, _push, _parent);
+      ssrRenderSlot(_ctx.$slots, "nav", {}, null, _push, _parent);
+      ssrRenderSlot(_ctx.$slots, "buttons", {}, () => {
+        _push(`<div class="px-2 flex justify-end items-center gap-3 lg:gap-4 text-base-800" data-header-buttons><!--[-->`);
+        ssrRenderList(buttons.value, ({ icon, onClick, label }, name) => {
+          ssrRenderSlot(_ctx.$slots, "button", mergeProps({ key: name }, { name, icon, onClick }), () => {
+            _push(`<button class="${ssrRenderClass(name === "account" ? "hidden sm:block" : null)}"${ssrRenderAttr("aria-label", label)}${ssrRenderAttr("data-header-button", name)}>`);
+            ssrRenderSlot(_ctx.$slots, "button-content", { name, icon }, () => {
+              _push(`<i class="${ssrRenderClass([icon, "hover:text-primary w-7 h-7 hover:scale-110 active:scale-125"])}"></i>`);
+            }, _push, _parent);
+            _push(`</button>`);
+          }, _push, _parent);
+        });
+        _push(`<!--]--></div>`);
+      }, _push, _parent);
+      _push(`</div>`);
+      _push(ssrRenderComponent(_sfc_main$4, {
+        modelValue: isSidenavOpen.value,
+        "onUpdate:modelValue": ($event) => isSidenavOpen.value = $event,
+        "has-close-button": false,
+        position: "absolute",
+        class: "mt-3",
+        style: { height: `calc(100vh - ${unref(sidenavHeight)}px)` }
+      }, {
+        default: withCtx((_, _push2, _parent2, _scopeId) => {
+          if (_push2) {
+            _push2(ssrRenderComponent(_sfc_main$3, {
+              class: "pt-6",
+              categories: __props.categories
+            }, null, _parent2, _scopeId));
+          } else {
+            return [
+              createVNode(_sfc_main$3, {
+                class: "pt-6",
+                categories: __props.categories
+              }, null, 8, ["categories"])
+            ];
+          }
+        }),
+        _: 1
+      }, _parent));
+      _push(`</header>`);
     };
   }
 });
@@ -1432,7 +1646,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;
 };
@@ -1458,13 +1672,20 @@ const $$PagesHeader = createComponent(async ($$result, $$props, $$slots) => {
       html: header.marketing_stripe.text
     }];
   }
-  const logoSrc = header.logo || settings.logo;
+  const shopHeader = {
+    categories: apiState.categories
+  };
   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": "~/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, { ...shopHeader, "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`${renderSlot($$result, $$slots["logo-picture"], renderTemplate`
+                ${renderComponent($$result, "Picture", $$Picture, { "src": header.logo || settings.logo, "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");
@@ -1474,8 +1695,9 @@ const $$Pages = createComponent(async ($$result, $$props, $$slots) => {
   const Astro2 = $$result.createAstro($$Astro$6, $$props, $$slots);
   Astro2.self = $$Pages;
   const { pageContext, title } = Astro2.props;
+  const { settings } = pageContext;
   return renderTemplate`${renderComponent($$result, "Base", $$Base, { "pageContext": pageContext, "title": title }, { "default": () => renderTemplate`${renderSlot($$result, $$slots["header"], renderTemplate`
-    ${renderComponent($$result, "Header", $$PagesHeader, { "pageContext": pageContext })}
+    ${renderComponent($$result, "Header", $$PagesHeader, { "pageContext": pageContext }, { "logo-picture": () => renderTemplate`${renderComponent($$result, "Picture", $$Picture, { "slot": "logo-picture", "src": settings.logo, "alt": settings.name, "widths": [300], "sizes": "150px", "fetchpriority": "high", "class": "hover:drop-shadow-sm" })}` })}
   `)}${renderSlot($$result, $$slots["default"])}` })}`;
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/layouts/Pages.astro");
@@ -1631,18 +1853,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,
@@ -1660,7 +1870,6 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
-    const prices = usePrices(props);
     const {
       hasVariedPrices,
       salePrice,
@@ -1672,223 +1881,135 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       installmentValue,
       priceWithDiscount,
       discountLabel
-    } = prices;
-    const componentVariant = useComponentVariant(props);
+    } = usePrices(props);
     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", __props.isBig ? "text-lg" : null],
+        "data-prices": ""
       }, _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">`);
-          ssrRenderSlot(_ctx.$slots, "compare-pre", {}, () => {
-            if (__props.isLiteral) {
-              _push(`<small>${ssrInterpolate(`${"De"} `)}</small>`);
-            } else {
-              _push(`<!---->`);
-            }
-          }, _push, _parent);
-          ssrRenderSlot(_ctx.$slots, "compare-value", { salePrice: unref(salePrice), comparePrice: unref(comparePrice) }, () => {
-            _push(`<s>${ssrInterpolate(_ctx.$money(unref(comparePrice)))}</s>`);
-          }, _push, _parent);
-          ssrRenderSlot(_ctx.$slots, "compare-post", {}, () => {
-            if (__props.isLiteral) {
-              _push(`<small>${ssrInterpolate(` ${"Por"}`)}</small>`);
-            } else {
-              _push(`<!---->`);
-            }
-          }, _push, _parent);
-          _push(`</span>`);
-        }, _push, _parent);
+        _push(`<span class="text-base-500 mr-1">`);
+        if (__props.isLiteral) {
+          _push(`<small>${ssrInterpolate(`${"De"} `)}</small>`);
+        } else {
+          _push(`<!---->`);
+        }
+        _push(`<s>${ssrInterpolate(_ctx.$money(unref(comparePrice)))}</s>`);
+        if (__props.isLiteral) {
+          _push(`<small>${ssrInterpolate(` ${"Por"}`)}</small>`);
+        } else {
+          _push(`<!---->`);
+        }
+        _push(`</span>`);
       } else {
         _push(`<!---->`);
       }
-      ssrRenderSlot(_ctx.$slots, "sale", { salePrice: unref(salePrice) }, () => {
-        _push(`<strong data-prices-sale class="inline-block text-base-800">`);
-        ssrRenderSlot(_ctx.$slots, "sale-pre", {}, () => {
-          if (unref(hasVariedPrices)) {
-            _push(`<small>${ssrInterpolate(`${"A partir de"} `)}</small>`);
-          } else {
-            _push(`<!---->`);
-          }
-        }, _push, _parent);
-        ssrRenderSlot(_ctx.$slots, "sale-value", { salePrice: unref(salePrice) }, () => {
-          _push(`${ssrInterpolate(_ctx.$money(unref(salePrice)))}`);
-        }, _push, _parent);
-        ssrRenderSlot(_ctx.$slots, "sale-post", {}, null, _push, _parent);
-        _push(`</strong>`);
-      }, _push, _parent);
+      _push(`<strong class="${ssrRenderClass([__props.isBig ? "text-5xl block" : null, "inline-block text-base-800"])}">`);
+      if (unref(hasVariedPrices)) {
+        _push(`<small>${ssrInterpolate(`${"A partir de"} `)}</small>`);
+      } else {
+        _push(`<!---->`);
+      }
+      _push(` ${ssrInterpolate(_ctx.$money(unref(salePrice)))}</strong>`);
       _push(ssrRenderComponent(_component_Fade, { slide: "down" }, {
         default: withCtx((_, _push2, _parent2, _scopeId) => {
           if (_push2) {
-            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}>`);
-                  ssrRenderSlot(_ctx.$slots, "cashback-pre", {}, () => {
-                    _push2(`<i class="i-cashback mr-1"${_scopeId}></i>`);
-                  }, _push2, _parent2, _scopeId);
-                  ssrRenderSlot(_ctx.$slots, "cashback-value", { salePrice: unref(salePrice), cashbackValue: unref(cashbackValue), cashbackPercentage: unref(cashbackPercentage) }, () => {
-                    _push2(`<span class="font-medium"${_scopeId}>${ssrInterpolate(_ctx.$money(unref(cashbackValue)))}</span>`);
-                  }, _push2, _parent2, _scopeId);
-                  ssrRenderSlot(_ctx.$slots, "cashback-post", {}, () => {
-                    _push2(`<small${_scopeId}> cashback</small>`);
-                  }, _push2, _parent2, _scopeId);
-                  _push2(`</span></div>`);
-                } else {
-                  _push2(`<!---->`);
-                }
-              }, _push2, _parent2, _scopeId);
+            if (unref(cashbackValue) && __props.hasCashback) {
+              _push2(`<div class="relative z-10"${_scopeId}><span${ssrRenderAttr("data-tooltip", "Receba $1 de volta".replace("$1", _ctx.$percentage(unref(cashbackPercentage))))}${_scopeId}><i class="i-cashback mr-1"${_scopeId}></i><span class="font-medium"${_scopeId}>${ssrInterpolate(_ctx.$money(unref(cashbackValue)))}</span><small${_scopeId}> cashback</small></span></div>`);
             } else {
               _push2(`<!---->`);
             }
           } else {
             return [
-              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"
+              unref(cashbackValue) && __props.hasCashback ? (openBlock(), createBlock("div", {
+                key: 0,
+                class: "relative z-10"
+              }, [
+                createVNode("span", {
+                  "data-tooltip": "Receba $1 de volta".replace("$1", _ctx.$percentage(unref(cashbackPercentage)))
                 }, [
-                  createVNode("span", {
-                    "data-tooltip": "Receba $1 de volta".replace("$1", _ctx.$percentage(unref(cashbackPercentage)))
-                  }, [
-                    renderSlot$1(_ctx.$slots, "cashback-pre", {}, () => [
-                      createVNode("i", { class: "i-cashback mr-1" })
-                    ]),
-                    renderSlot$1(_ctx.$slots, "cashback-value", { salePrice: unref(salePrice), cashbackValue: unref(cashbackValue), cashbackPercentage: unref(cashbackPercentage) }, () => [
-                      createVNode("span", { class: "font-medium" }, toDisplayString(_ctx.$money(unref(cashbackValue))), 1)
-                    ]),
-                    renderSlot$1(_ctx.$slots, "cashback-post", {}, () => [
-                      createVNode("small", null, " cashback")
-                    ])
-                  ], 8, ["data-tooltip"])
-                ])) : createCommentVNode("", true)
-              ]) : createCommentVNode("", true)
+                  createVNode("i", { class: "i-cashback mr-1" }),
+                  createVNode("span", { class: "font-medium" }, toDisplayString(_ctx.$money(unref(cashbackValue))), 1),
+                  createVNode("small", null, " cashback")
+                ], 8, ["data-tooltip"])
+              ])) : createCommentVNode("", true)
             ];
           }
         }),
-        _: 3
+        _: 1
       }, _parent));
       _push(ssrRenderComponent(_component_Fade, { slide: "down" }, {
         default: withCtx((_, _push2, _parent2, _scopeId) => {
           if (_push2) {
-            if (unref(installmentValue)) {
-              ssrRenderSlot(_ctx.$slots, "installment", { salePrice: unref(salePrice), installmentValue: unref(installmentValue), installmentsNumber: unref(installmentsNumber), monthlyInterest: unref(monthlyInterest) }, () => {
-                if (__props.hasPriceOptions) {
-                  _push2(`<div data-prices-installment${_scopeId}>`);
-                  ssrRenderSlot(_ctx.$slots, "installment-pre", {}, () => {
-                    if (__props.isLiteral) {
-                      _push2(`<small${_scopeId}>${ssrInterpolate(`${"Até"} `)}</small>`);
-                    } else {
-                      _push2(`<!---->`);
-                    }
-                  }, _push2, _parent2, _scopeId);
-                  ssrRenderSlot(_ctx.$slots, "installment-value", { salePrice: unref(salePrice), installmentValue: unref(installmentValue), installmentsNumber: unref(installmentsNumber), monthlyInterest: unref(monthlyInterest) }, () => {
-                    _push2(`${ssrInterpolate(unref(installmentsNumber))}x `);
-                    if (__props.isLiteral) {
-                      _push2(`<small${_scopeId}>${ssrInterpolate(` ${"De"} `)}</small>`);
-                    } else {
-                      _push2(`<!---->`);
-                    }
-                    _push2(`<span${_scopeId}>${ssrInterpolate(_ctx.$money(unref(installmentValue)))}</span>`);
-                  }, _push2, _parent2, _scopeId);
-                  ssrRenderSlot(_ctx.$slots, "installment-post", {}, () => {
-                    if (!unref(monthlyInterest) && __props.isLiteral) {
-                      _push2(`<small${_scopeId}>${ssrInterpolate("Sem juros")}</small>`);
-                    } else {
-                      _push2(`<!---->`);
-                    }
-                  }, _push2, _parent2, _scopeId);
-                  _push2(`</div>`);
-                } else {
-                  _push2(`<!---->`);
-                }
-              }, _push2, _parent2, _scopeId);
+            if (unref(installmentValue) && __props.hasPriceOptions) {
+              _push2(`<div${_scopeId}>`);
+              if (__props.isLiteral) {
+                _push2(`<small${_scopeId}>${ssrInterpolate(`${"Até"} `)}</small>`);
+              } else {
+                _push2(`<!---->`);
+              }
+              _push2(` ${ssrInterpolate(unref(installmentsNumber))}x `);
+              if (__props.isLiteral) {
+                _push2(`<small${_scopeId}>${ssrInterpolate(` ${"De"} `)}</small>`);
+              } else {
+                _push2(`<!---->`);
+              }
+              _push2(`<span${_scopeId}>${ssrInterpolate(_ctx.$money(unref(installmentValue)))}</span>`);
+              if (!unref(monthlyInterest) && __props.isLiteral) {
+                _push2(`<small${_scopeId}>${ssrInterpolate("Sem juros")}</small>`);
+              } else {
+                _push2(`<!---->`);
+              }
+              _push2(`</div>`);
             } else {
               _push2(`<!---->`);
             }
           } else {
             return [
-              unref(installmentValue) ? renderSlot$1(_ctx.$slots, "installment", mergeProps({ key: 0 }, { salePrice: unref(salePrice), installmentValue: unref(installmentValue), installmentsNumber: unref(installmentsNumber), monthlyInterest: unref(monthlyInterest) }), () => [
-                __props.hasPriceOptions ? (openBlock(), createBlock("div", {
-                  key: 0,
-                  "data-prices-installment": ""
-                }, [
-                  renderSlot$1(_ctx.$slots, "installment-pre", {}, () => [
-                    __props.isLiteral ? (openBlock(), createBlock("small", { key: 0 }, toDisplayString(`${"Até"} `))) : createCommentVNode("", true)
-                  ]),
-                  renderSlot$1(_ctx.$slots, "installment-value", { salePrice: unref(salePrice), installmentValue: unref(installmentValue), installmentsNumber: unref(installmentsNumber), monthlyInterest: unref(monthlyInterest) }, () => [
-                    createTextVNode(toDisplayString(unref(installmentsNumber)) + "x ", 1),
-                    __props.isLiteral ? (openBlock(), createBlock("small", { key: 0 }, toDisplayString(` ${"De"} `))) : createCommentVNode("", true),
-                    createVNode("span", null, toDisplayString(_ctx.$money(unref(installmentValue))), 1)
-                  ]),
-                  renderSlot$1(_ctx.$slots, "installment-post", {}, () => [
-                    !unref(monthlyInterest) && __props.isLiteral ? (openBlock(), createBlock("small", { key: 0 }, toDisplayString("Sem juros"))) : createCommentVNode("", true)
-                  ])
-                ])) : createCommentVNode("", true)
-              ]) : createCommentVNode("", true)
+              unref(installmentValue) && __props.hasPriceOptions ? (openBlock(), createBlock("div", { key: 0 }, [
+                __props.isLiteral ? (openBlock(), createBlock("small", { key: 0 }, toDisplayString(`${"Até"} `))) : createCommentVNode("", true),
+                createTextVNode(" " + toDisplayString(unref(installmentsNumber)) + "x ", 1),
+                __props.isLiteral ? (openBlock(), createBlock("small", { key: 1 }, toDisplayString(` ${"De"} `))) : createCommentVNode("", true),
+                createVNode("span", null, toDisplayString(_ctx.$money(unref(installmentValue))), 1),
+                !unref(monthlyInterest) && __props.isLiteral ? (openBlock(), createBlock("small", { key: 2 }, toDisplayString("Sem juros"))) : createCommentVNode("", true)
+              ])) : createCommentVNode("", true)
             ];
           }
         }),
-        _: 3
+        _: 1
       }, _parent));
       _push(ssrRenderComponent(_component_Fade, { slide: "down" }, {
         default: withCtx((_, _push2, _parent2, _scopeId) => {
           if (_push2) {
-            if (unref(priceWithDiscount) < unref(salePrice)) {
-              ssrRenderSlot(_ctx.$slots, "discount", { salePrice: unref(salePrice), priceWithDiscount: unref(priceWithDiscount), discountLabel: unref(discountLabel) }, () => {
-                if (__props.hasPriceOptions) {
-                  _push2(`<div data-prices-discount${_scopeId}>`);
-                  ssrRenderSlot(_ctx.$slots, "discount-pre", {}, () => {
-                    if (!unref(discountLabel)) {
-                      _push2(`<small${_scopeId}>${ssrInterpolate(`${"A partir de"} `)}</small>`);
-                    } else {
-                      _push2(`<!---->`);
-                    }
-                  }, _push2, _parent2, _scopeId);
-                  ssrRenderSlot(_ctx.$slots, "discount-value", { salePrice: unref(salePrice), priceWithDiscount: unref(priceWithDiscount), discountLabel: unref(discountLabel) }, () => {
-                    _push2(`<span${_scopeId}>${ssrInterpolate(_ctx.$money(unref(priceWithDiscount)))}</span>`);
-                  }, _push2, _parent2, _scopeId);
-                  ssrRenderSlot(_ctx.$slots, "discount-post", {}, () => {
-                    if (unref(discountLabel)) {
-                      _push2(`<small${_scopeId}>${ssrInterpolate(` ${unref(discountLabel)}`)}</small>`);
-                    } else {
-                      _push2(`<!---->`);
-                    }
-                  }, _push2, _parent2, _scopeId);
-                  _push2(`</div>`);
-                } else {
-                  _push2(`<!---->`);
-                }
-              }, _push2, _parent2, _scopeId);
+            if (unref(priceWithDiscount) < unref(salePrice) && __props.hasPriceOptions) {
+              _push2(`<div${_scopeId}>`);
+              if (!unref(discountLabel)) {
+                _push2(`<small${_scopeId}>${ssrInterpolate(`${"A partir de"} `)}</small>`);
+              } else {
+                _push2(`<!---->`);
+              }
+              _push2(`<span${_scopeId}>${ssrInterpolate(_ctx.$money(unref(priceWithDiscount)))}</span>`);
+              if (unref(discountLabel)) {
+                _push2(`<small${_scopeId}>${ssrInterpolate(` ${unref(discountLabel)}`)}</small>`);
+              } else {
+                _push2(`<!---->`);
+              }
+              _push2(`</div>`);
             } else {
               _push2(`<!---->`);
             }
           } else {
             return [
-              unref(priceWithDiscount) < unref(salePrice) ? renderSlot$1(_ctx.$slots, "discount", mergeProps({ key: 0 }, { salePrice: unref(salePrice), priceWithDiscount: unref(priceWithDiscount), discountLabel: unref(discountLabel) }), () => [
-                __props.hasPriceOptions ? (openBlock(), createBlock("div", {
-                  key: 0,
-                  "data-prices-discount": ""
-                }, [
-                  renderSlot$1(_ctx.$slots, "discount-pre", {}, () => [
-                    !unref(discountLabel) ? (openBlock(), createBlock("small", { key: 0 }, toDisplayString(`${"A partir de"} `))) : createCommentVNode("", true)
-                  ]),
-                  renderSlot$1(_ctx.$slots, "discount-value", { salePrice: unref(salePrice), priceWithDiscount: unref(priceWithDiscount), discountLabel: unref(discountLabel) }, () => [
-                    createVNode("span", null, toDisplayString(_ctx.$money(unref(priceWithDiscount))), 1)
-                  ]),
-                  renderSlot$1(_ctx.$slots, "discount-post", {}, () => [
-                    unref(discountLabel) ? (openBlock(), createBlock("small", { key: 0 }, toDisplayString(` ${unref(discountLabel)}`), 1)) : createCommentVNode("", true)
-                  ])
-                ])) : createCommentVNode("", true)
-              ]) : createCommentVNode("", true)
+              unref(priceWithDiscount) < unref(salePrice) && __props.hasPriceOptions ? (openBlock(), createBlock("div", { key: 0 }, [
+                !unref(discountLabel) ? (openBlock(), createBlock("small", { key: 0 }, toDisplayString(`${"A partir de"} `))) : createCommentVNode("", true),
+                createVNode("span", null, toDisplayString(_ctx.$money(unref(priceWithDiscount))), 1),
+                unref(discountLabel) ? (openBlock(), createBlock("small", { key: 1 }, toDisplayString(` ${unref(discountLabel)}`), 1)) : createCommentVNode("", true)
+              ])) : createCommentVNode("", true)
             ];
           }
         }),
-        _: 3
+        _: 1
       }, _parent));
       _push(`</div>`);
     };
@@ -1898,7 +2019,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
 const _sfc_setup$1 = _sfc_main$1.setup;
 _sfc_main$1.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
-  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/lib/components/Prices.vue");
+  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/Prices.vue");
   return _sfc_setup$1 ? _sfc_setup$1(props, ctx) : void 0;
 };
@@ -2068,7 +2189,7 @@ const $$Home = createComponent(async ($$result, $$props, $$slots) => {
       </label>
     </div>
   </div>
-  ${renderComponent($$result, "Prices", _sfc_main$1, { "price": 10, "client:load": true, "client:component-hydration": "load", "client:component-path": "@@sf/components/Prices.vue", "client:component-export": "default" })}
+  ${renderComponent($$result, "Prices", _sfc_main$1, { "price": 10, "client:load": true, "client:component-hydration": "load", "client:component-path": "~/components/Prices.vue", "client:component-export": "default" })}
   ${renderComponent($$result, "ProductCard", _sfc_main, { "client:load": true, "client:component-hydration": "load", "client:component-path": "@@sf/components/ProductCard.vue", "client:component-export": "default" })}
 </main>`;
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/main/Home.astro");