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

cloudcommerce 0.3.0 → 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 (71) hide show

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

@@ -12,8 +12,8 @@ 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, resolveComponent, withModifiers, createTextVNode, toDisplayString } from 'vue';
-import { ssrRenderAttrs, ssrRenderSlot, ssrRenderClass, ssrRenderVNode, ssrRenderComponent, ssrRenderStyle, ssrRenderList, ssrRenderTeleport, ssrIncludeBooleanAttr, ssrRenderAttr, ssrInterpolate } 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';
@@ -797,9 +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"></div>
+  <div id="teleported-bottom"></div>
 </body>`;
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/lib/layouts/BaseBody.astro");
@@ -993,6 +994,21 @@ 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$7 = /* @__PURE__ */ defineComponent({
@@ -1226,48 +1242,34 @@ const _sfc_main$5 = /* @__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({
-        class: "bg-base-100",
-        "data-pitch-bar": ""
-      }, _attrs))}><div class="container md:w-2/3 mx-auto px-3 py-1">`);
+      _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) {
-            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);
+            _push2(`<div style="${ssrRenderStyle(unref(countValidSlides) > 1 ? null : { display: "none" })}" class="text-xl leading-none text-base-400"${_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>`);
           } else {
             return [
-              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]
-                ])
+              withDirectives(createVNode("div", { class: "text-xl leading-none text-base-400" }, [
+                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]
               ])
             ];
           }
@@ -1284,23 +1286,18 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
               }, {
                 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" data-pitch-bar-slide${_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",
-                          "data-pitch-bar-slide": ""
-                        }, 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)
                     ];
                   }
                 }),
@@ -1319,14 +1316,11 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                     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",
-                          "data-pitch-bar-slide": ""
-                        }, 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"]))
@@ -1335,7 +1329,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
             ];
           }
         }),
-        _: 3
+        _: 1
       }, _parent));
       _push(`</div></div>`);
     };
@@ -1345,7 +1339,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
 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");
+  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/PitchBar.vue");
   return _sfc_setup$5 ? _sfc_setup$5(props, ctx) : void 0;
 };
@@ -1353,18 +1347,46 @@ 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 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({
@@ -1373,7 +1395,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   props: {
     modelValue: { type: Boolean, default: false },
     placement: { default: "start" },
-    isTeleported: { type: Boolean, default: false },
+    position: { default: "fixed" },
     hasCloseButton: { type: Boolean, default: true }
   },
   emits: [
@@ -1382,10 +1404,9 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   setup(__props, { emit }) {
     const props = __props;
     const close = () => emit("update:modelValue", false);
-    const anchor = ref(null);
-    const canvas = ref(null);
+    const drawer = ref(null);
     const outsideClickListener = (ev) => {
-      if (!canvas.value?.contains(ev.target)) {
+      if (!drawer.value?.contains(ev.target)) {
         close();
       }
     };
@@ -1395,23 +1416,14 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       }
     };
     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);
       }
@@ -1428,73 +1440,74 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
           return "down";
       }
     });
-    const componentVariant = useComponentVariant(props, ["placement"]);
+    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(`<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 {
-                  _push3(`<!---->`);
-                }
-                ssrRenderSlot(_ctx.$slots, "default", {}, null, _push3, _parent2, _scopeId);
-                _push3(`</div></dialog>`);
+      _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 {
-                _push3(`<!---->`);
+                _push2(`<!---->`);
               }
+              ssrRenderSlot(_ctx.$slots, "default", {}, null, _push2, _parent2, _scopeId);
+              _push2(`</div></dialog>`);
             } 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)
-              ];
+              _push2(`<!---->`);
             }
-          }),
-          _: 3
-        }, _parent));
-      }, "#teleported", !__props.isTeleported, _parent);
-      _push(`</div>`);
+          } 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));
     };
   }
 });
@@ -1507,45 +1520,22 @@ _sfc_main$4.setup = (props, ctx) => {
 };
 const _sfc_main$3 = /* @__PURE__ */ defineComponent({
-  __name: "StickyHeader",
+  __name: "ShopSidenav",
   __ssrInlineRender: true,
   props: {
-    isShownOnScrollDown: { type: Boolean }
+    categories: null
   },
   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 mainCategories = props.categories.filter(({ slug, parent }) => {
+      return slug && !parent;
     });
-    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><!--]-->`);
+      _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>`);
     };
   }
 });
@@ -1553,13 +1543,16 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
 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");
+  (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: "ShopHeader",
   __ssrInlineRender: true,
+  props: {
+    categories: null
+  },
   setup(__props) {
     const buttons = ref({
       search: {
@@ -1582,114 +1575,70 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       }
     });
     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) => {
-      _push(ssrRenderComponent(_sfc_main$3, _attrs, {
+      _push(`<header${ssrRenderAttrs(mergeProps({
+        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);
+        _push(`</button></div>`);
+      }, _push, _parent);
+      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(`<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>`);
+            _push2(ssrRenderComponent(_sfc_main$3, {
+              class: "pt-6",
+              categories: __props.categories
+            }, null, _parent2, _scopeId));
           } 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))
-                  ])
-                ])
-              ])
+              createVNode(_sfc_main$3, {
+                class: "pt-6",
+                categories: __props.categories
+              }, null, 8, ["categories"])
             ];
           }
         }),
-        _: 3
+        _: 1
       }, _parent));
+      _push(`</header>`);
     };
   }
 });
@@ -1723,20 +1672,22 @@ 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 > 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, "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, "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`
+    ${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`${renderComponent($$result, "Picture", $$Picture, { "src": logoSrc, "alt": settings.name, "widths": [300], "sizes": "150px", "fetchpriority": "high", "class": "hover:drop-shadow-sm" })}` })}
+            ${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");
 const $$Astro$6 = createAstro("https://ecom2-002.web.app");
@@ -1744,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");
@@ -1918,7 +1870,6 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
-    const prices = usePrices(props);
     const {
       hasVariedPrices,
       salePrice,
@@ -1930,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({
-        class: "text-base-600",
-        "data-prices": unref(componentVariant)
+        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 class="text-base-500 mr-1" data-prices-compare>`);
-          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 class="inline-block text-base-800" data-prices-sale>`);
-        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 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);
-                  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,
-                  class: "relative z-10",
-                  "data-prices-cashback": ""
+              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>`);
     };
@@ -2156,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;
 };
@@ -2326,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");