cloudcommerce 0.4.0 → 0.5.0

package/packages/storefront/dist/server/chunks/pages/{all.6379e666.mjs → all.ba8f4b85.mjs}

@@ -9,18 +9,25 @@ import 'node:os';
 import sizeOf from 'image-size';
 import 'magic-string';
 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 { c as createAstro, a as createComponent, r as renderTemplate, b as addAttribute, u as unescapeHTML, m as maybeRenderHead, d as renderSlot, e as renderComponent, f as renderHead, F as Fragment, s as spreadAttributes } from '../astro.7d9d5f6e.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, toDisplayString, createTextVNode } from 'vue';
-import { ssrRenderAttrs, ssrRenderSlot, ssrRenderClass, ssrRenderVNode, ssrRenderComponent, ssrRenderStyle, ssrRenderList, ssrIncludeBooleanAttr, ssrRenderAttr, ssrInterpolate } from 'vue/server-renderer';
+import { reactive, computed, defineComponent, inject, useSSRContext, mergeProps, ref, watch, toRef, onMounted, onBeforeUnmount, provide, createVNode, resolveDynamicComponent, withCtx, renderSlot as renderSlot$1, withDirectives, vShow, openBlock, createBlock, createCommentVNode, Fragment as Fragment$1, renderList, resolveComponent, withModifiers, Teleport, toDisplayString, createTextVNode } from 'vue';
 import { img, price, formatMoney, onPromotion } from '@ecomplus/utils';
+import { ssrRenderAttrs, ssrRenderSlot, ssrRenderClass, ssrRenderVNode, ssrRenderComponent, ssrRenderStyle, ssrRenderList, ssrIncludeBooleanAttr, ssrRenderAttr, ssrRenderTeleport, ssrInterpolate } from 'vue/server-renderer';
 /* 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 { useScroll, useElementHover, useDebounceFn, useTimeout, promiseTimeout } from '@vueuse/core';
 
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+
 function isOutputFormat(value) {
   return ["avif", "jpeg", "jpg", "png", "webp"].includes(value);
 }
@@ -243,12 +250,38 @@ const getCMS = () => {
   const dirContent = resolve(baseDir, 'content');
 
   const cms = (filename) => {
-    if (filename.endsWith('/')) {
-      const dirColl = resolve(dirContent, filename);
-      return fs.readdirSync(dirColl).map((_filename) => _filename.replace('.json', ''));
+    // MUST be sync for 'settings'
+    // Async with other content to support external CMS integration
+    const loadLocal = () => {
+      if (filename.endsWith('/')) {
+        const dirColl = resolve(dirContent, filename);
+        return new Promise((resolve) => {
+          const slugs = fs.existsSync(dirColl)
+            ? fs.readdirSync(dirColl).map((file) => file.replace('.json', ''))
+            : [];
+          resolve(slugs);
+        });
+      }
+      const filepath = resolve(dirContent, `${filename}.json`);
+      const content = fs.existsSync(filepath)
+        ? JSON.parse(fs.readFileSync(filepath, 'utf8'))
+        : null;
+      return filename === 'settings'
+        ? content
+        : new Promise((resolve) => { resolve(content); });
+    };
+    const handler = globalThis.storefront_cms_handler;
+    if (typeof handler === 'function') {
+      try {
+        const content = handler({ dirContent, filename, loadLocal });
+        if (content) {
+          return content;
+        }
+      } catch {
+        //
+      }
     }
-    const filepath = resolve(dirContent, `${filename}.json`);
-    return JSON.parse(fs.readFileSync(filepath, 'utf8'));
+    return loadLocal();
   };
 
   let settings;
@@ -363,7 +396,7 @@ const loadPageContext = async (Astro, {
   ];
   if (slug) {
     if (cmsCollection) {
-      cmsContent = config.cms(`${cmsCollection}/${slug}`);
+      cmsContent = await config.cms(`${cmsCollection}/${slug}`);
     } else {
       apiFetchings[0] = api.get(`slugs/${slug}`, apiOptions);
     }
@@ -421,7 +454,7 @@ const loadPageContext = async (Astro, {
   return pageContext;
 };
 
-const pwaInfo = {"pwaInDevEnvironment":false,"webManifest":{"href":"/manifest.webmanifest","useCredentials":false,"linkTag":"<link rel=\"manifest\" href=\"/manifest.webmanifest\">"}};
+const pwaInfo = undefined;
 
 function isRemoteImage(src) {
   return /^(https?:)?\/\//.test(src);
@@ -568,7 +601,7 @@ async function getPicture(params) {
     throw new Error("[@astrojs/image] `src` is required");
   }
   if (!widths || !Array.isArray(widths)) {
-    throw new Error("[@astrojs/image] at least one `width` is required");
+    throw new Error("[@astrojs/image] at least one `width` is required. ex: `widths={[100]}`");
   }
   const aspectRatio = await resolveAspectRatio(params);
   if (!aspectRatio) {
@@ -685,7 +718,7 @@ const $$BaseHead = createComponent(async ($$result, $$props, $$slots) => {
     isLowResolution: true
   })).src : "/favicon.ico";
   const canonicalUrl = new URL(Astro2.url.pathname, Astro2.site || `https://${domain}`);
-  const cmsSocial = cms("social");
+  const cmsMetatags = await cms("metatags");
   const ogLocale = lang.length === 2 ? lang : lang.substring(0, 2) + lang.slice(3).toUpperCase();
   let ogImage;
   if (apiDoc) {
@@ -693,8 +726,8 @@ const $$BaseHead = createComponent(async ($$result, $$props, $$slots) => {
     ogImage = picture && picture.url;
   }
   if (!ogImage) {
-    if (cmsSocial.og_image) {
-      ogImage = cmsSocial.og_image.charAt(0) === "/" ? `https://${domain}${cmsSocial.og_image}` : cmsSocial.og_image;
+    if (cmsMetatags?.og_image) {
+      ogImage = cmsMetatags.og_image.charAt(0) === "/" ? `https://${domain}${cmsMetatags.og_image}` : cmsMetatags.og_image;
     }
   } else {
     ogImage = ogImage.replace(/(\w+\.)?(ecoms\d)\.com/i, "$2-nyc3.nyc3.cdn.digitaloceanspaces.com");
@@ -718,11 +751,11 @@ const $$BaseHead = createComponent(async ($$result, $$props, $$slots) => {
 <meta property="og:type" content="website">
 <meta property="og:locale"${addAttribute(ogLocale, "content")}>
 ${ogImage && renderTemplate`<meta property="og:image"${addAttribute(ogImage, "content")}>`}
-${cmsSocial.fb_app_id && renderTemplate`<meta property="fb:app_id"${addAttribute(cmsSocial.fb_app_id, "content")}>`}
+${cmsMetatags?.fb_app_id && renderTemplate`<meta property="fb:app_id"${addAttribute(cmsMetatags.fb_app_id, "content")}>`}
 <meta name="twitter:card" content="summary">
-${cmsSocial.twitter_username && renderTemplate`<meta name="twitter:site"${addAttribute(cmsSocial.twitter_username, "content")}>`}
+${cmsMetatags?.twitter_username && renderTemplate`<meta name="twitter:site"${addAttribute(cmsMetatags.twitter_username, "content")}>`}
 <meta name="ecom-store-id"${addAttribute(String(storeId), "content")}>
-${pwaInfo && renderTemplate`${renderComponent($$result, "Fragment", Fragment, {}, { "default": () => renderTemplate`${unescapeHTML(pwaInfo.webManifest.linkTag)}` })}`}
+${pwaInfo }
 `;
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/lib/layouts/BaseHead.astro");
 
@@ -797,10 +830,11 @@ 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>
+  <div id="teleported-overlap" class="relative z-50"></div>
+  <div id="teleported-top" class="relative z-0"></div>
   ${renderSlot($$result, $$slots["default"])}
   ${renderSlot($$result, $$slots["before-body-end"])}
-  <div id="teleported-bottom"></div>
+  <div id="teleported-bottom" class="relative z-0"></div>
 </body>`;
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/lib/layouts/BaseBody.astro");
 
@@ -810,16 +844,16 @@ const $$Base$1 = createComponent(async ($$result, $$props, $$slots) => {
   Astro2.self = $$Base$1;
   const { pageContext, title } = Astro2.props;
   const { cms } = pageContext;
-  const cmsCustomCode = cms("code");
+  const cmsCustomCode = await cms("code");
   return renderTemplate`<head>
   ${renderComponent($$result, "BaseHead", $$BaseHead, { "pageContext": pageContext, "title": title })}
   ${renderComponent($$result, "BaseStateJson", $$BaseStateJson, { "pageContext": pageContext })}
-  ${cmsCustomCode.css && renderTemplate`<style>{cmsCustomCode.css}</style>`}
-  ${cmsCustomCode.html_head && renderTemplate`${renderComponent($$result, "Fragment", Fragment, {}, { "default": () => renderTemplate`${unescapeHTML(cmsCustomCode.html_head)}` })}`}
+  ${cmsCustomCode?.css && renderTemplate`<style>{cmsCustomCode.css}</style>`}
+  ${cmsCustomCode?.html_head && renderTemplate`${renderComponent($$result, "Fragment", Fragment, {}, { "default": ($$result2) => renderTemplate`${unescapeHTML(cmsCustomCode.html_head)}` })}`}
   ${renderSlot($$result, $$slots["base-head-scripts"])}
   ${renderSlot($$result, $$slots["before-head-end"])}
 ${renderHead($$result)}</head>
-${renderComponent($$result, "BaseBody", $$BaseBody, { "pageContext": pageContext }, { "default": () => renderTemplate`${renderSlot($$result, $$slots["default"])}${cmsCustomCode.html_body && renderTemplate`${renderComponent($$result, "Fragment", Fragment, {}, { "default": () => renderTemplate`${unescapeHTML(cmsCustomCode.html_body)}` })}`}${renderSlot($$result, $$slots["base-body-scripts"])}${renderSlot($$result, $$slots["before-body-end"])}` })}`;
+${renderComponent($$result, "BaseBody", $$BaseBody, { "pageContext": pageContext }, { "default": ($$result2) => renderTemplate`${renderSlot($$result2, $$slots["default"])}${cmsCustomCode?.html_body && renderTemplate`${renderComponent($$result2, "Fragment", Fragment, {}, { "default": ($$result3) => renderTemplate`${unescapeHTML(cmsCustomCode.html_body)}` })}`}${renderSlot($$result2, $$slots["base-body-scripts"])}${renderSlot($$result2, $$slots["before-body-end"])}` })}`;
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/lib/layouts/Base.astro");
 
 var __freeze = Object.freeze;
@@ -838,7 +872,7 @@ const $$Base = createComponent(async ($$result, $$props, $$slots) => {
   const Astro2 = $$result.createAstro($$Astro$b, $$props, $$slots);
   Astro2.self = $$Base;
   const { pageContext, title } = Astro2.props;
-  return renderTemplate`${renderComponent($$result, "Base", $$Base$1, { "pageContext": pageContext, "title": title }, { "before-head-end": () => renderTemplate`${renderComponent($$result, "InlineScripts", $$InlineScripts, { "slot": "before-head-end" })}`, "default": () => renderTemplate`${renderSlot($$result, $$slots["default"])}` })}`;
+  return renderTemplate`${renderComponent($$result, "Base", $$Base$1, { "pageContext": pageContext, "title": title }, { "before-head-end": ($$result2) => renderTemplate`${renderComponent($$result2, "InlineScripts", $$InlineScripts, { "slot": "before-head-end" })}`, "default": ($$result2) => renderTemplate`${renderSlot($$result2, $$slots["default"])}` })}`;
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/layouts/Base.astro");
 
 const $$Astro$a = createAstro("https://ecom2-002.web.app");
@@ -888,7 +922,7 @@ const $$Picture$1 = createComponent(async ($$result, $$props, $$slots) => {
   delete image.height;
   return renderTemplate`${maybeRenderHead($$result)}<picture>
 	${sources.map((attrs2) => renderTemplate`<source${spreadAttributes(attrs2)}${addAttribute(sizes, "sizes")}>`)}
-	<img${spreadAttributes(image)}${addAttribute(loading, "loading")}${addAttribute(decoding, "decoding")}${addAttribute(alt, "alt")}${spreadAttributes(attrs)}>
+	<img${spreadAttributes(image)}${addAttribute(loading, "loading")}${addAttribute(decoding, "decoding")}${spreadAttributes(attrs)}>
 </picture>`;
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/node_modules/@astrojs/image/components/Picture.astro");
 
@@ -977,7 +1011,7 @@ loadingGlobalInfoPreset.then((modulesInfoPreset) => {
 });
 const parsePhrase = (phrase, modName, varName, formatValue = formatMoney) => {
   return computed(() => {
-    const searchString = `{{${varName}}}`;
+    const searchString = `{${varName}}`;
     const index = phrase.indexOf(searchString);
     if (index > -1) {
       const fieldValue = modulesInfo[modName][varName];
@@ -1011,38 +1045,40 @@ const usePitchBar = (props) => {
 
 const carouselKey = Symbol("carousel");
 
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _sfc_main$8 = defineComponent({
   __name: "CarouselControl",
-  __ssrInlineRender: true,
   props: {
     direction: { default: 1 }
   },
-  setup(__props) {
-    inject(carouselKey);
-    return (_ctx, _push, _parent, _attrs) => {
-      _push(`<button${ssrRenderAttrs(mergeProps({
-        type: "button",
-        "aria-label": __props.direction > 0 ? "Próximo" : "Anterior",
-        "data-carousel-control": __props.direction > 0 ? "next" : "previous"
-      }, _attrs))}>`);
-      ssrRenderSlot(_ctx.$slots, "default", {}, () => {
-        _push(`<i class="${ssrRenderClass([__props.direction > 0 ? "i-chevron-right" : "i-chevron-left", "m-0"])}"></i>`);
-      }, _push, _parent);
-      _push(`</button>`);
-    };
+  setup(__props, { expose }) {
+    expose();
+    const { changeSlide } = inject(carouselKey);
+    const __returned__ = { changeSlide };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
   }
 });
-
-const _sfc_setup$7 = _sfc_main$7.setup;
-_sfc_main$7.setup = (props, ctx) => {
+function _sfc_ssrRender$8(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+  _push(`<button${ssrRenderAttrs(mergeProps({
+    type: "button",
+    "aria-label": $props.direction > 0 ? "Pr\xF3ximo" : "Anterior",
+    "data-carousel-control": $props.direction > 0 ? "next" : "previous"
+  }, _attrs))}>`);
+  ssrRenderSlot(_ctx.$slots, "default", {}, () => {
+    _push(`<i class="${ssrRenderClass([$props.direction > 0 ? "i-chevron-right" : "i-chevron-left", "m-0"])}"></i>`);
+  }, _push, _parent);
+  _push(`</button>`);
+}
+const _sfc_setup$8 = _sfc_main$8.setup;
+_sfc_main$8.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/lib/components/CarouselControl.vue");
-  return _sfc_setup$7 ? _sfc_setup$7(props, ctx) : void 0;
+  return _sfc_setup$8 ? _sfc_setup$8(props, ctx) : void 0;
 };
+const CarouselControl = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["ssrRender", _sfc_ssrRender$8]]);
 
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _sfc_main$7 = defineComponent({
   __name: "Carousel",
-  __ssrInlineRender: true,
   props: {
     as: { default: "ul" },
     modelValue: { default: 1 },
@@ -1051,7 +1087,8 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   emits: [
     "update:modelValue"
   ],
-  setup(__props, { emit }) {
+  setup(__props, { expose, emit }) {
+    expose();
     const props = __props;
     const currentIndex = ref(props.modelValue - 1);
     watch(toRef(props, "modelValue"), (modelValue) => {
@@ -1155,7 +1192,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       calcCurrentIndex();
       calcIndexCount();
     };
-    useDebounceFn(calcOnInit, 400);
+    const onResize = useDebounceFn(calcOnInit, 400);
     onMounted(() => {
       calcOnInit();
     });
@@ -1168,184 +1205,188 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       isBoundLeft,
       isBoundRight
     });
-    return (_ctx, _push, _parent, _attrs) => {
-      _push(`<div${ssrRenderAttrs(mergeProps({
-        ref_key: "carousel",
-        ref: carousel,
-        "data-carousel": ""
-      }, _attrs))}>`);
-      ssrRenderVNode(_push, createVNode(resolveDynamicComponent(__props.as), {
-        ref_key: "wrapper",
-        ref: wrapper,
-        "data-carousel-wrapper": ""
-      }, {
-        default: withCtx((_, _push2, _parent2, _scopeId) => {
-          if (_push2) {
-            ssrRenderSlot(_ctx.$slots, "default", {}, null, _push2, _parent2, _scopeId);
-          } else {
-            return [
-              renderSlot$1(_ctx.$slots, "default")
-            ];
-          }
-        }),
-        _: 3
-      }), _parent);
-      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);
-            } else {
-              return [
-                renderSlot$1(_ctx.$slots, "previous")
-              ];
-            }
-          }),
-          _: 3
-        }, _parent));
-        _push(ssrRenderComponent(_sfc_main$7, null, {
-          default: withCtx((_, _push2, _parent2, _scopeId) => {
-            if (_push2) {
-              ssrRenderSlot(_ctx.$slots, "next", {}, null, _push2, _parent2, _scopeId);
-            } else {
-              return [
-                renderSlot$1(_ctx.$slots, "next")
-              ];
-            }
-          }),
-          _: 3
-        }, _parent));
-      }, _push, _parent);
-      _push(`</div>`);
-    };
+    const __returned__ = { props, emit, currentIndex, wrapper, currentPos, isScrolling, arrivedState, isBoundLeft, isBoundRight, slidesWidth, wrapperScrollWidth, wrapperVisibleWidth, indexCount, calcWrapperWidth, calcSlidesWidth, calcNextWidth, calcCurrentIndex, calcIndexCount, get autoplayTimer() {
+      return autoplayTimer;
+    }, set autoplayTimer(v) {
+      autoplayTimer = v;
+    }, restartAutoplay, changeSlide, carousel, isHovered, calcOnInit, onResize, CarouselControl };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
   }
 });
-
-const _sfc_setup$6 = _sfc_main$6.setup;
-_sfc_main$6.setup = (props, ctx) => {
+function _sfc_ssrRender$7(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+  _push(`<div${ssrRenderAttrs(mergeProps({
+    ref: "carousel",
+    "data-carousel": ""
+  }, _attrs))}>`);
+  ssrRenderVNode(_push, createVNode(resolveDynamicComponent($props.as), {
+    ref: "wrapper",
+    "data-carousel-wrapper": ""
+  }, {
+    default: withCtx((_, _push2, _parent2, _scopeId) => {
+      if (_push2) {
+        ssrRenderSlot(_ctx.$slots, "default", {}, null, _push2, _parent2, _scopeId);
+      } else {
+        return [
+          renderSlot$1(_ctx.$slots, "default")
+        ];
+      }
+    }),
+    _: 3
+  }), _parent);
+  ssrRenderSlot(_ctx.$slots, "controls", {
+    changeSlide: $setup.changeSlide,
+    isBoundLeft: $setup.isBoundLeft,
+    isBoundRight: $setup.isBoundRight,
+    currentPage: $setup.currentIndex + 1,
+    pageCount: $setup.indexCount + 1
+  }, () => {
+    _push(ssrRenderComponent($setup["CarouselControl"], { direction: -1 }, {
+      default: withCtx((_, _push2, _parent2, _scopeId) => {
+        if (_push2) {
+          ssrRenderSlot(_ctx.$slots, "previous", {}, null, _push2, _parent2, _scopeId);
+        } else {
+          return [
+            renderSlot$1(_ctx.$slots, "previous")
+          ];
+        }
+      }),
+      _: 3
+    }, _parent));
+    _push(ssrRenderComponent($setup["CarouselControl"], null, {
+      default: withCtx((_, _push2, _parent2, _scopeId) => {
+        if (_push2) {
+          ssrRenderSlot(_ctx.$slots, "next", {}, null, _push2, _parent2, _scopeId);
+        } else {
+          return [
+            renderSlot$1(_ctx.$slots, "next")
+          ];
+        }
+      }),
+      _: 3
+    }, _parent));
+  }, _push, _parent);
+  _push(`</div>`);
+}
+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/Carousel.vue");
-  return _sfc_setup$6 ? _sfc_setup$6(props, ctx) : void 0;
+  return _sfc_setup$7 ? _sfc_setup$7(props, ctx) : void 0;
 };
+const Carousel = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["ssrRender", _sfc_ssrRender$7]]);
 
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "PitchBar",
-  __ssrInlineRender: true,
   props: {
     slides: null
   },
-  setup(__props) {
+  setup(__props, { expose }) {
+    expose();
     const props = __props;
     const {
       parsedContents,
       countValidSlides
     } = usePitchBar(props);
-    return (_ctx, _push, _parent, _attrs) => {
-      _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$7, {
+    const __returned__ = { props, parsedContents, countValidSlides, Carousel, CarouselControl };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+function _sfc_ssrRender$6(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+  _push(`<div${ssrRenderAttrs(mergeProps({ class: "bg-base-100 relative z-1" }, _attrs))}><div class="container md:w-2/3 mx-auto px-3 py-1">`);
+  _push(ssrRenderComponent($setup["Carousel"], {
+    autoplay: $setup.countValidSlides > 1 ? 7e3 : null
+  }, {
+    controls: withCtx((_, _push2, _parent2, _scopeId) => {
+      if (_push2) {
+        _push2(`<div style="${ssrRenderStyle($setup.countValidSlides > 1 ? null : { display: "none" })}" class="text-xl leading-none text-base-400"${_scopeId}>`);
+        _push2(ssrRenderComponent($setup["CarouselControl"], {
+          direction: -1,
+          class: "pr-2 bg-base-100 hover:text-base-700"
+        }, null, _parent2, _scopeId));
+        _push2(ssrRenderComponent($setup["CarouselControl"], { 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($setup["CarouselControl"], {
               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 [
-              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]
-              ])
-            ];
-          }
-        }),
-        default: withCtx((_, _push2, _parent2, _scopeId) => {
-          if (_push2) {
-            _push2(`<!--[-->`);
-            ssrRenderList(__props.slides, (slide, i) => {
-              _push2(`<li${_scopeId}>`);
-              ssrRenderVNode(_push2, createVNode(resolveDynamicComponent(slide.href ? "ALink" : "span"), {
+            }),
+            createVNode($setup["CarouselControl"], { class: "pl-2 bg-base-100 hover:text-base-700" })
+          ], 512), [
+            [vShow, $setup.countValidSlides > 1]
+          ])
+        ];
+      }
+    }),
+    default: withCtx((_, _push2, _parent2, _scopeId) => {
+      if (_push2) {
+        _push2(`<!--[-->`);
+        ssrRenderList($props.slides, (slide, i) => {
+          _push2(`<li${_scopeId}>`);
+          ssrRenderVNode(_push2, createVNode(resolveDynamicComponent(slide.href ? "ALink" : "span"), {
+            href: slide.href,
+            target: slide.target,
+            class: ["inline-block px-8", slide.href ? "hover:underline" : null]
+          }, {
+            default: withCtx((_2, _push3, _parent3, _scopeId2) => {
+              if (_push3) {
+                if ($setup.parsedContents[i]) {
+                  _push3(`<span class="prose text-sm text-base-800"${_scopeId2}>${$setup.parsedContents[i]}</span>`);
+                } else {
+                  _push3(`<!---->`);
+                }
+              } else {
+                return [
+                  $setup.parsedContents[i] ? (openBlock(), createBlock("span", {
+                    key: 0,
+                    innerHTML: $setup.parsedContents[i],
+                    class: "prose text-sm text-base-800"
+                  }, null, 8, ["innerHTML"])) : createCommentVNode("", true)
+                ];
+              }
+            }),
+            _: 2
+          }), _parent2, _scopeId);
+          _push2(`</li>`);
+        });
+        _push2(`<!--]-->`);
+      } else {
+        return [
+          (openBlock(true), createBlock(Fragment$1, null, renderList($props.slides, (slide, i) => {
+            return openBlock(), createBlock("li", { key: i }, [
+              (openBlock(), createBlock(resolveDynamicComponent(slide.href ? "ALink" : "span"), {
                 href: slide.href,
                 target: slide.target,
                 class: ["inline-block px-8", slide.href ? "hover:underline" : null]
               }, {
-                default: withCtx((_2, _push3, _parent3, _scopeId2) => {
-                  if (_push3) {
-                    if (unref(parsedContents)[i]) {
-                      _push3(`<span class="prose text-sm text-base-800"${_scopeId2}>${unref(parsedContents)[i]}</span>`);
-                    } else {
-                      _push3(`<!---->`);
-                    }
-                  } else {
-                    return [
-                      unref(parsedContents)[i] ? (openBlock(), createBlock("span", {
-                        key: 0,
-                        innerHTML: unref(parsedContents)[i],
-                        class: "prose text-sm text-base-800"
-                      }, null, 8, ["innerHTML"])) : createCommentVNode("", true)
-                    ];
-                  }
-                }),
+                default: withCtx(() => [
+                  $setup.parsedContents[i] ? (openBlock(), createBlock("span", {
+                    key: 0,
+                    innerHTML: $setup.parsedContents[i],
+                    class: "prose text-sm text-base-800"
+                  }, null, 8, ["innerHTML"])) : createCommentVNode("", true)
+                ]),
                 _: 2
-              }), _parent2, _scopeId);
-              _push2(`</li>`);
-            });
-            _push2(`<!--]-->`);
-          } else {
-            return [
-              (openBlock(true), createBlock(Fragment$1, null, renderList(__props.slides, (slide, i) => {
-                return openBlock(), createBlock("li", { key: i }, [
-                  (openBlock(), createBlock(resolveDynamicComponent(slide.href ? "ALink" : "span"), {
-                    href: slide.href,
-                    target: slide.target,
-                    class: ["inline-block px-8", slide.href ? "hover:underline" : null]
-                  }, {
-                    default: withCtx(() => [
-                      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"]))
-                ]);
-              }), 128))
-            ];
-          }
-        }),
-        _: 1
-      }, _parent));
-      _push(`</div></div>`);
-    };
-  }
-});
-
-const _sfc_setup$5 = _sfc_main$5.setup;
-_sfc_main$5.setup = (props, ctx) => {
+              }, 1032, ["href", "target", "class"]))
+            ]);
+          }), 128))
+        ];
+      }
+    }),
+    _: 1
+  }, _parent));
+  _push(`</div></div>`);
+}
+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/components/PitchBar.vue");
-  return _sfc_setup$5 ? _sfc_setup$5(props, ctx) : void 0;
+  return _sfc_setup$6 ? _sfc_setup$6(props, ctx) : void 0;
 };
-
-const i19myAccount = "Minha conta";
-const i19openCart = "Abrir carrinho";
-const i19searchProducts = "Buscar produtos";
+const PitchBar = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["ssrRender", _sfc_ssrRender$6]]);
 
 const useStickyHeader = (props) => {
   const {
@@ -1389,9 +1430,58 @@ const useStickyHeader = (props) => {
   };
 };
 
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const filterMainCategories = (categories) => {
+  return categories.filter(({ slug, parent }) => {
+    return slug && !parent;
+  });
+};
+const filterSubcategories = (categories, parentCategory) => {
+  return categories.filter(({ slug, parent }) => {
+    if (slug && parent) {
+      return parent._id === parentCategory._id || parent.slug && parent.slug === parentCategory.slug;
+    }
+    return false;
+  });
+};
+const useShopHeader = (props) => {
+  const { header } = props;
+  const {
+    isSticky,
+    staticHeight,
+    staticY
+  } = useStickyHeader({ header });
+  const positionY = computed(() => {
+    return isSticky.value ? header.value.offsetHeight : staticY.value;
+  });
+  const mainCategories = filterMainCategories(props.categories);
+  const getSubcategories = (parentCategory) => {
+    return filterSubcategories(props.categories, parentCategory);
+  };
+  const getCategoryTree = (parentCategory) => {
+    return {
+      ...parentCategory,
+      subcategories: getSubcategories(parentCategory).map((subcategory) => {
+        return getCategoryTree(subcategory);
+      })
+    };
+  };
+  const categoryTrees = mainCategories.map(getCategoryTree);
+  const isSidenavOpen = ref(false);
+  return {
+    isSticky,
+    staticHeight,
+    staticY,
+    positionY,
+    mainCategories,
+    getSubcategories,
+    getCategoryTree,
+    categoryTrees,
+    isSidenavOpen
+  };
+};
+
+const _sfc_main$5 = defineComponent({
   __name: "Drawer",
-  __ssrInlineRender: true,
   props: {
     modelValue: { type: Boolean, default: false },
     placement: { default: "start" },
@@ -1401,7 +1491,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   emits: [
     "update:modelValue"
   ],
-  setup(__props, { emit }) {
+  setup(__props, { expose, emit }) {
+    expose();
     const props = __props;
     const close = () => emit("update:modelValue", false);
     const drawer = ref(null);
@@ -1446,209 +1537,264 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     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(`<!---->`);
-            }
+    const __returned__ = { props, emit, close, drawer, outsideClickListener, escClickListener, slideTo, isFixed, isPlacementX };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+function _sfc_ssrRender$5(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+  const _component_Fade = resolveComponent("Fade");
+  _push(ssrRenderComponent(_component_Fade, mergeProps({
+    slide: $setup.slideTo,
+    speed: "slow",
+    "is-floating": ""
+  }, _attrs), {
+    default: withCtx((_, _push2, _parent2, _scopeId) => {
+      if (_push2) {
+        if ($props.modelValue) {
+          _push2(`<dialog class="${ssrRenderClass([[
+            $props.position,
+            $setup.isFixed ? `top-0 left-0 ${$setup.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 h-full"${_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 {
-            return [
-              __props.modelValue ? (openBlock(), createBlock("dialog", {
+            _push2(`<!---->`);
+          }
+          ssrRenderSlot(_ctx.$slots, "default", {}, null, _push2, _parent2, _scopeId);
+          _push2(`</div>`);
+          ssrRenderTeleport(_push2, (_push3) => {
+            _push3(ssrRenderComponent(_component_Fade, null, {
+              default: withCtx((_2, _push4, _parent3, _scopeId2) => {
+                if (_push4) {
+                  if ($props.modelValue) {
+                    _push4(`<div class="fixed top-0 left-0 w-screen h-screen bg-black/50 z-40" data-drawer-backdrop${_scopeId2}></div>`);
+                  } else {
+                    _push4(`<!---->`);
+                  }
+                } else {
+                  return [
+                    $props.modelValue ? (openBlock(), createBlock("div", {
+                      key: 0,
+                      class: "fixed top-0 left-0 w-screen h-screen bg-black/50 z-40",
+                      "data-drawer-backdrop": ""
+                    })) : createCommentVNode("", true)
+                  ];
+                }
+              }),
+              _: 1
+            }, _parent2, _scopeId));
+          }, "#teleported-top", false, _parent2);
+          _push2(`</dialog>`);
+        } else {
+          _push2(`<!---->`);
+        }
+      } else {
+        return [
+          $props.modelValue ? (openBlock(), createBlock("dialog", {
+            key: 0,
+            ref: "drawer",
+            class: ["w-screen max-w-sm shadow p-0 m-0 z-50", [
+              $props.position,
+              $setup.isFixed ? `top-0 left-0 ${$setup.isPlacementX ? "h-screen" : ""}` : null
+            ]],
+            open: $props.modelValue,
+            "data-drawer": $props.placement
+          }, [
+            createVNode("div", { class: "relative h-full" }, [
+              $props.hasCloseButton ? (openBlock(), createBlock("button", {
                 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
+                type: "button",
+                "aria-label": "Fechar",
+                onClick: withModifiers($setup.close, ["prevent"]),
+                class: ["absolute top-2", $props.placement === "end" ? "left-2" : "right-2"],
+                "data-drawer-close": ""
               }, [
-                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")
+                renderSlot$1(_ctx.$slots, "close", {}, () => [
+                  createVNode("i", { class: "i-close text-base-400 text-3xl" })
                 ])
-              ], 10, ["open", "data-drawer"])) : createCommentVNode("", true)
-            ];
-          }
-        }),
-        _: 3
-      }, _parent));
-    };
+              ], 10, ["onClick"])) : createCommentVNode("", true),
+              renderSlot$1(_ctx.$slots, "default")
+            ]),
+            (openBlock(), createBlock(Teleport, { to: "#teleported-top" }, [
+              createVNode(_component_Fade, null, {
+                default: withCtx(() => [
+                  $props.modelValue ? (openBlock(), createBlock("div", {
+                    key: 0,
+                    class: "fixed top-0 left-0 w-screen h-screen bg-black/50 z-40",
+                    "data-drawer-backdrop": ""
+                  })) : createCommentVNode("", true)
+                ]),
+                _: 1
+              })
+            ]))
+          ], 10, ["open", "data-drawer"])) : createCommentVNode("", true)
+        ];
+      }
+    }),
+    _: 3
+  }, _parent));
+}
+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/Drawer.vue");
+  return _sfc_setup$5 ? _sfc_setup$5(props, ctx) : void 0;
+};
+const Drawer = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["ssrRender", _sfc_ssrRender$5]]);
+
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  __name: "ShopSidenavCategory",
+  props: {
+    categoryTree: null
+  },
+  setup(__props, { expose }) {
+    expose();
+    const isOpen = ref(false);
+    const isFaded = ref(true);
+    watch(isOpen, (_isOpen) => {
+      if (_isOpen) {
+        setTimeout(() => {
+          isFaded.value = false;
+        }, 25);
+      } else {
+        isFaded.value = true;
+      }
+    });
+    const __returned__ = { isOpen, isFaded };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
   }
 });
-
+function _sfc_ssrRender$4(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+  const _component_ShopSidenavCategory = resolveComponent("ShopSidenavCategory", true);
+  _push(`<li${ssrRenderAttrs(mergeProps({ class: "text-lg text-base-800" }, _attrs))}>`);
+  if ($props.categoryTree.subcategories.length) {
+    _push(`<details class="bg-white overflow-y-auto overflow-x-hidden z-10 open:absolute open:top-0 open:left-0 open:w-full open:h-full"><summary class="${ssrRenderClass([$setup.isOpen ? "bg-base-100" : null, "cursor-pointer list-none px-6 py-3 active:bg-base-100 transition-colors"])}"><i class="${ssrRenderClass(!$setup.isOpen ? "i-arrow-right float-right mb-0 mt-1 text-xl text-base-500" : "i-arrow-left text-lg")}"></i>`);
+    if (!$setup.isOpen && $props.categoryTree.icon) {
+      _push(`<img loading="lazy"${ssrRenderAttr("src", $props.categoryTree.icon.url)} class="w-auto h-5 inline mr-3">`);
+    } else {
+      _push(`<!---->`);
+    }
+    _push(`<h3 class="${ssrRenderClass([$setup.isOpen ? "ml-4 text-base" : null, "inline"])}">${ssrInterpolate($props.categoryTree.name)}</h3></summary><ul class="${ssrRenderClass([$setup.isFaded ? "opacity-20" : "opacity-100", "mt-2 transition-opacity"])}" tabindex="-1"><!--[-->`);
+    ssrRenderList($props.categoryTree.subcategories, (subcategoryTree) => {
+      _push(ssrRenderComponent(_component_ShopSidenavCategory, {
+        key: subcategoryTree._id,
+        "category-tree": subcategoryTree
+      }, null, _parent));
+    });
+    _push(`<!--]--><li><a${ssrRenderAttr("href", `/${$props.categoryTree.slug}`)} class="block px-6 py-3 text-base underline active:bg-base-200">${ssrInterpolate("Ver toda a categoria $1".replace("$1", $props.categoryTree.name))}</a></li></ul></details>`);
+  } else {
+    _push(`<a${ssrRenderAttr("href", `/${$props.categoryTree.slug}`)} class="block px-6 py-3 active:bg-base-200">`);
+    if (!$setup.isOpen && $props.categoryTree.icon) {
+      _push(`<img loading="lazy"${ssrRenderAttr("src", $props.categoryTree.icon.url)} class="w-auto h-5 inline mr-3">`);
+    } else {
+      _push(`<!---->`);
+    }
+    _push(`<h3 class="inline">${ssrInterpolate($props.categoryTree.name)}</h3></a>`);
+  }
+  _push(`</li>`);
+}
 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");
+  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/ShopSidenavCategory.vue");
   return _sfc_setup$4 ? _sfc_setup$4(props, ctx) : void 0;
 };
+const ShopSidenavCategory = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["ssrRender", _sfc_ssrRender$4]]);
 
 const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "ShopSidenav",
-  __ssrInlineRender: true,
   props: {
-    categories: null
+    categoryTrees: 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>`);
-    };
+  setup(__props, { expose }) {
+    expose();
+    const __returned__ = { ShopSidenavCategory };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
   }
 });
-
+function _sfc_ssrRender$3(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+  _push(`<aside${ssrRenderAttrs(mergeProps({ class: "flex flex-col h-full" }, _attrs))}><nav class="py-4 grow"><ul class="relative h-full"><!--[-->`);
+  ssrRenderList($props.categoryTrees, (categoryTree) => {
+    _push(ssrRenderComponent($setup["ShopSidenavCategory"], {
+      key: categoryTree._id,
+      "category-tree": categoryTree
+    }, null, _parent));
+  });
+  _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/ShopSidenav.vue");
+  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/ShopSidenav.vue");
   return _sfc_setup$3 ? _sfc_setup$3(props, ctx) : void 0;
 };
+const ShopSidenav = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["ssrRender", _sfc_ssrRender$3]]);
 
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "ShopHeader",
-  __ssrInlineRender: true,
   props: {
     categories: null
   },
-  setup(__props) {
-    const buttons = ref({
-      search: {
-        icon: "i-search",
-        onClick: () => {
-        },
-        label: i19searchProducts
-      },
-      account: {
-        icon: "i-account",
-        onClick: () => {
-        },
-        label: i19myAccount
-      },
-      cart: {
-        icon: "i-shopping-cart",
-        onClick: () => {
-        },
-        label: i19openCart
-      }
-    });
-    const isSidenavOpen = ref(false);
+  setup(__props, { expose }) {
+    expose();
+    const props = __props;
     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(`<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(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>`);
-    };
+      positionY,
+      categoryTrees,
+      isSidenavOpen
+    } = useShopHeader({ ...props, header });
+    const __returned__ = { props, header, isSticky, positionY, categoryTrees, isSidenavOpen, Drawer, ShopSidenav };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
   }
 });
-
+function _sfc_ssrRender$2(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+  _push(`<header${ssrRenderAttrs(mergeProps({
+    ref: "header",
+    class: ["top-0 z-50 transition-colors", [
+      $setup.isSticky && !$setup.isSidenavOpen ? "bg-white/80" : "bg-white",
+      $setup.isSticky ? "backdrop-blur-md shadow py-2 md:py-3" : "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"><div class="md:hidden"><button class="px-2 my-1"${ssrRenderAttr("aria-label", "Abrir/fechar menu")}><i class="${ssrRenderClass([$setup.isSidenavOpen ? "i-close" : "i-menu", "text-base-500 text-3xl"])}"></i></button></div>`);
+  ssrRenderSlot(_ctx.$slots, "logo", {}, null, _push, _parent);
+  _push(`<nav class="hidden md:block"></nav><div class="px-2 flex justify-end items-center gap-3 lg:gap-4 text-base-800"><button${ssrRenderAttr("aria-label", "Buscar produtos")}><i class="i-search w-7 h-7 hover:text-primary hover:scale-110 active:scale-125"></i></button><button class="hidden sm:block"${ssrRenderAttr("aria-label", "Minha conta")}><i class="i-account w-7 h-7 hover:text-primary hover:scale-110 active:scale-125"></i></button><button${ssrRenderAttr("aria-label", "Abrir carrinho")}><i class="i-shopping-cart w-7 h-7 hover:text-primary hover:scale-110 active:scale-125"></i></button></div></div>`);
+  _push(ssrRenderComponent($setup["Drawer"], {
+    modelValue: $setup.isSidenavOpen,
+    "onUpdate:modelValue": ($event) => $setup.isSidenavOpen = $event,
+    "has-close-button": false,
+    position: "absolute",
+    class: "mt-3 -z-1",
+    style: { height: `calc(100vh - ${$setup.positionY}px + .5rem)` }
+  }, {
+    default: withCtx((_, _push2, _parent2, _scopeId) => {
+      if (_push2) {
+        _push2(ssrRenderComponent($setup["ShopSidenav"], mergeProps({ class: "bg-white pt-6" }, { categoryTrees: $setup.categoryTrees }), null, _parent2, _scopeId));
+      } else {
+        return [
+          createVNode($setup["ShopSidenav"], mergeProps({ class: "bg-white pt-6" }, { categoryTrees: $setup.categoryTrees }), null, 16)
+        ];
+      }
+    }),
+    _: 1
+  }, _parent));
+  _push(`</header>`);
+}
 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/ShopHeader.vue");
+  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/ShopHeader.vue");
   return _sfc_setup$2 ? _sfc_setup$2(props, ctx) : void 0;
 };
+const ShopHeader = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["ssrRender", _sfc_ssrRender$2]]);
 
 const $$Astro$7 = createAstro("https://ecom2-002.web.app");
 const $$PagesHeader = createComponent(async ($$result, $$props, $$slots) => {
@@ -1658,33 +1804,25 @@ const $$PagesHeader = createComponent(async ($$result, $$props, $$slots) => {
     pageContext: {
       isHomepage,
       apiState,
-      settings,
       cms
     }
   } = Astro2.props;
-  const header = cms("header");
+  const cmsHeader = await cms("header");
   const pitchBar = { slides: [] };
-  if (header.pitch_bar) {
-    pitchBar.slides = header.pitch_bar;
-  } else if (header.marketing_stripe) {
-    pitchBar.slides = [{
-      href: header.marketing_stripe.link,
-      html: header.marketing_stripe.text
-    }];
+  if (cmsHeader?.pitch_bar) {
+    pitchBar.slides = cmsHeader.pitch_bar;
   }
   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": "~/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, { ...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" })}
-              `)}` })}
+  return renderTemplate`${renderComponent($$result, "Fragment", Fragment, {}, { "default": ($$result2) => renderTemplate`${renderSlot($$result2, $$slots["pitch-bar"], renderTemplate`
+    ${pitchBar.slides.length > 1 && renderTemplate`${renderComponent($$result2, "PitchBar", PitchBar, { ...pitchBar, "client:idle": true, "client:component-hydration": "idle", "client:component-path": "~/components/PitchBar.vue", "client:component-export": "default" })}`}
+    ${pitchBar.slides.length === 1 && renderTemplate`${renderComponent($$result2, "PitchBar", PitchBar, { ...pitchBar })}`}
+  `)}${renderSlot($$result2, $$slots["sticky-header"], renderTemplate`
+    ${renderComponent($$result2, "ShopHeader", ShopHeader, { ...shopHeader, "client:load": true, "client:component-hydration": "load", "client:component-path": "~/components/ShopHeader.vue", "client:component-export": "default" }, { "logo": ($$result3) => renderTemplate`${renderComponent($$result3, "Fragment", Fragment, { "slot": "logo" }, { "default": ($$result4) => renderTemplate`${renderSlot($$result4, $$slots["logo"], renderTemplate`
+          ${maybeRenderHead($$result4)}<a href="/">
+            ${renderComponent($$result4, "LogoHeading", LogoHeading, {}, { "default": ($$result5) => renderTemplate`${renderSlot($$result5, $$slots["logo-picture"])}` })}
           </a>
         `)}` })}` })}
   `)}` })}`;
@@ -1696,9 +1834,9 @@ const $$Pages = createComponent(async ($$result, $$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 }, { "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"])}` })}`;
+  return renderTemplate`${renderComponent($$result, "Base", $$Base, { "pageContext": pageContext, "title": title }, { "default": ($$result2) => renderTemplate`${renderSlot($$result2, $$slots["header"], renderTemplate`
+    ${renderComponent($$result2, "Header", $$PagesHeader, { "pageContext": pageContext }, { "logo-picture": ($$result3) => renderTemplate`${renderComponent($$result3, "Picture", $$Picture, { "slot": "logo-picture", "src": settings.logo, "alt": settings.name, "widths": [300], "sizes": "150px", "fetchpriority": "high", "class": "hover:drop-shadow-sm" })}` })}
+  `)}${renderSlot($$result2, $$slots["default"])}` })}`;
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/layouts/Pages.astro");
 
 const getPriceWithDiscount = (price, discount) => {
@@ -1853,9 +1991,8 @@ const usePrices = (props) => {
   };
 };
 
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$1 = defineComponent({
   __name: "Prices",
-  __ssrInlineRender: true,
   props: {
     product: null,
     price: null,
@@ -1868,7 +2005,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     hasCashback: { type: Boolean, default: true },
     hasPriceOptions: { type: Boolean, default: true }
   },
-  setup(__props) {
+  setup(__props, { expose }) {
+    expose();
     const props = __props;
     const {
       hasVariedPrices,
@@ -1882,267 +2020,273 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       priceWithDiscount,
       discountLabel
     } = usePrices(props);
-    return (_ctx, _push, _parent, _attrs) => {
-      const _component_Fade = resolveComponent("Fade");
-      _push(`<div${ssrRenderAttrs(mergeProps({
-        class: ["text-base-600", __props.isBig ? "text-lg" : null],
-        "data-prices": ""
-      }, _attrs))}>`);
-      if (unref(comparePrice)) {
-        _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>`);
+    const __returned__ = { props, hasVariedPrices, salePrice, comparePrice, cashbackPercentage, cashbackValue, installmentsNumber, monthlyInterest, installmentValue, priceWithDiscount, discountLabel };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+function _sfc_ssrRender$1(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+  const _component_Fade = resolveComponent("Fade");
+  _push(`<div${ssrRenderAttrs(mergeProps({
+    class: ["text-base-600", $props.isBig ? "text-lg" : null],
+    "data-prices": ""
+  }, _attrs))}>`);
+  if ($setup.comparePrice) {
+    _push(`<span class="text-base-500 mr-1">`);
+    if ($props.isLiteral) {
+      _push(`<small>${ssrInterpolate(`${"De"} `)}</small>`);
+    } else {
+      _push(`<!---->`);
+    }
+    _push(`<s>${ssrInterpolate(_ctx.$money($setup.comparePrice))}</s>`);
+    if ($props.isLiteral) {
+      _push(`<small>${ssrInterpolate(` ${"Por"}`)}</small>`);
+    } else {
+      _push(`<!---->`);
+    }
+    _push(`</span>`);
+  } else {
+    _push(`<!---->`);
+  }
+  _push(`<strong class="${ssrRenderClass([$props.isBig ? "text-5xl block" : null, "inline-block text-base-800"])}">`);
+  if ($setup.hasVariedPrices) {
+    _push(`<small>${ssrInterpolate(`${"A partir de"} `)}</small>`);
+  } else {
+    _push(`<!---->`);
+  }
+  _push(` ${ssrInterpolate(_ctx.$money($setup.salePrice))}</strong>`);
+  _push(ssrRenderComponent(_component_Fade, { slide: "down" }, {
+    default: withCtx((_, _push2, _parent2, _scopeId) => {
+      if (_push2) {
+        if ($setup.cashbackValue && $props.hasCashback) {
+          _push2(`<div class="relative z-10"${_scopeId}><span${ssrRenderAttr("data-tooltip", "Receba $1 de volta".replace("$1", _ctx.$percentage($setup.cashbackPercentage)))}${_scopeId}><i class="i-cashback mr-1"${_scopeId}></i><span class="font-medium"${_scopeId}>${ssrInterpolate(_ctx.$money($setup.cashbackValue))}</span><small${_scopeId}> cashback</small></span></div>`);
         } else {
-          _push(`<!---->`);
+          _push2(`<!---->`);
         }
-        _push(`</span>`);
-      } else {
-        _push(`<!---->`);
-      }
-      _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(`<!---->`);
+        return [
+          $setup.cashbackValue && $props.hasCashback ? (openBlock(), createBlock("div", {
+            key: 0,
+            class: "relative z-10"
+          }, [
+            createVNode("span", {
+              "data-tooltip": "Receba $1 de volta".replace("$1", _ctx.$percentage($setup.cashbackPercentage))
+            }, [
+              createVNode("i", { class: "i-cashback mr-1" }),
+              createVNode("span", { class: "font-medium" }, toDisplayString(_ctx.$money($setup.cashbackValue)), 1),
+              createVNode("small", null, " cashback")
+            ], 8, ["data-tooltip"])
+          ])) : createCommentVNode("", true)
+        ];
       }
-      _push(` ${ssrInterpolate(_ctx.$money(unref(salePrice)))}</strong>`);
-      _push(ssrRenderComponent(_component_Fade, { slide: "down" }, {
-        default: withCtx((_, _push2, _parent2, _scopeId) => {
-          if (_push2) {
-            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(`<!---->`);
-            }
+    }),
+    _: 1
+  }, _parent));
+  _push(ssrRenderComponent(_component_Fade, { slide: "down" }, {
+    default: withCtx((_, _push2, _parent2, _scopeId) => {
+      if (_push2) {
+        if ($setup.installmentValue && $props.hasPriceOptions) {
+          _push2(`<div${_scopeId}>`);
+          if ($props.isLiteral) {
+            _push2(`<small${_scopeId}>${ssrInterpolate(`${"At\xE9"} `)}</small>`);
           } else {
-            return [
-              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("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)
-            ];
+            _push2(`<!---->`);
           }
-        }),
-        _: 1
-      }, _parent));
-      _push(ssrRenderComponent(_component_Fade, { slide: "down" }, {
-        default: withCtx((_, _push2, _parent2, _scopeId) => {
-          if (_push2) {
-            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(`<!---->`);
-            }
+          _push2(` ${ssrInterpolate($setup.installmentsNumber)}x `);
+          if ($props.isLiteral) {
+            _push2(`<small${_scopeId}>${ssrInterpolate(` ${"De"} `)}</small>`);
           } else {
-            return [
-              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)
-            ];
+            _push2(`<!---->`);
           }
-        }),
-        _: 1
-      }, _parent));
-      _push(ssrRenderComponent(_component_Fade, { slide: "down" }, {
-        default: withCtx((_, _push2, _parent2, _scopeId) => {
-          if (_push2) {
-            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(`<!---->`);
-            }
+          _push2(`<span${_scopeId}>${ssrInterpolate(_ctx.$money($setup.installmentValue))}</span>`);
+          if (!$setup.monthlyInterest && $props.isLiteral) {
+            _push2(`<small${_scopeId}>${ssrInterpolate("Sem juros")}</small>`);
           } else {
-            return [
-              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)
-            ];
+            _push2(`<!---->`);
           }
-        }),
-        _: 1
-      }, _parent));
-      _push(`</div>`);
-    };
-  }
-});
-
+          _push2(`</div>`);
+        } else {
+          _push2(`<!---->`);
+        }
+      } else {
+        return [
+          $setup.installmentValue && $props.hasPriceOptions ? (openBlock(), createBlock("div", { key: 0 }, [
+            $props.isLiteral ? (openBlock(), createBlock("small", { key: 0 }, toDisplayString(`${"At\xE9"} `))) : createCommentVNode("", true),
+            createTextVNode(" " + toDisplayString($setup.installmentsNumber) + "x ", 1),
+            $props.isLiteral ? (openBlock(), createBlock("small", { key: 1 }, toDisplayString(` ${"De"} `))) : createCommentVNode("", true),
+            createVNode("span", null, toDisplayString(_ctx.$money($setup.installmentValue)), 1),
+            !$setup.monthlyInterest && $props.isLiteral ? (openBlock(), createBlock("small", { key: 2 }, toDisplayString("Sem juros"))) : createCommentVNode("", true)
+          ])) : createCommentVNode("", true)
+        ];
+      }
+    }),
+    _: 1
+  }, _parent));
+  _push(ssrRenderComponent(_component_Fade, { slide: "down" }, {
+    default: withCtx((_, _push2, _parent2, _scopeId) => {
+      if (_push2) {
+        if ($setup.priceWithDiscount < $setup.salePrice && $props.hasPriceOptions) {
+          _push2(`<div${_scopeId}>`);
+          if (!$setup.discountLabel) {
+            _push2(`<small${_scopeId}>${ssrInterpolate(`${"A partir de"} `)}</small>`);
+          } else {
+            _push2(`<!---->`);
+          }
+          _push2(`<span${_scopeId}>${ssrInterpolate(_ctx.$money($setup.priceWithDiscount))}</span>`);
+          if ($setup.discountLabel) {
+            _push2(`<small${_scopeId}>${ssrInterpolate(` ${$setup.discountLabel}`)}</small>`);
+          } else {
+            _push2(`<!---->`);
+          }
+          _push2(`</div>`);
+        } else {
+          _push2(`<!---->`);
+        }
+      } else {
+        return [
+          $setup.priceWithDiscount < $setup.salePrice && $props.hasPriceOptions ? (openBlock(), createBlock("div", { key: 0 }, [
+            !$setup.discountLabel ? (openBlock(), createBlock("small", { key: 0 }, toDisplayString(`${"A partir de"} `))) : createCommentVNode("", true),
+            createVNode("span", null, toDisplayString(_ctx.$money($setup.priceWithDiscount)), 1),
+            $setup.discountLabel ? (openBlock(), createBlock("small", { key: 1 }, toDisplayString(` ${$setup.discountLabel}`), 1)) : createCommentVNode("", true)
+          ])) : createCommentVNode("", true)
+        ];
+      }
+    }),
+    _: 1
+  }, _parent));
+  _push(`</div>`);
+}
 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/components/Prices.vue");
   return _sfc_setup$1 ? _sfc_setup$1(props, ctx) : void 0;
 };
+const Prices = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["ssrRender", _sfc_ssrRender$1]]);
 
-const _sfc_main = /* @__PURE__ */ defineComponent({
+const _sfc_main = defineComponent({
   __name: "ProductCard",
-  __ssrInlineRender: true,
   props: {
     as: { default: "div" }
   },
-  setup(__props) {
+  setup(__props, { expose }) {
+    expose();
     const price = ref(12);
     const isBig = ref(false);
     setTimeout(() => {
       price.value = 8;
       isBig.value = true;
     }, 5e3);
-    return (_ctx, _push, _parent, _attrs) => {
-      ssrRenderVNode(_push, createVNode(resolveDynamicComponent(__props.as), _attrs, {
-        default: withCtx((_, _push2, _parent2, _scopeId) => {
-          if (_push2) {
-            _push2(ssrRenderComponent(_sfc_main$1, null, {
-              default: withCtx(({ salePrice }, _push3, _parent3, _scopeId2) => {
-                if (_push3) {
-                  _push3(` ProductCard ${ssrInterpolate(salePrice)}`);
-                } else {
-                  return [
-                    createTextVNode(" ProductCard " + toDisplayString(salePrice), 1)
-                  ];
-                }
-              }),
-              _: 1
-            }, _parent2, _scopeId));
-            _push2(ssrRenderComponent(_sfc_main$1, {
-              product: { price: price.value }
-            }, null, _parent2, _scopeId));
-            _push2(ssrRenderComponent(_sfc_main$1, {
-              price: 12,
-              "base-price": 17
-            }, null, _parent2, _scopeId));
-            _push2(ssrRenderComponent(_sfc_main$1, {
-              price: 12,
-              "base-price": 16,
-              "is-literal": true
-            }, null, _parent2, _scopeId));
-            _push2(ssrRenderComponent(_sfc_main$1, {
-              price: 12,
-              "is-big": isBig.value
-            }, null, _parent2, _scopeId));
-            _push2(ssrRenderComponent(_sfc_main$1, {
-              price: 14,
-              "base-price": 18,
-              "is-big": isBig.value,
-              "is-literal": true
-            }, null, _parent2, _scopeId));
-            _push2(ssrRenderComponent(_sfc_main$1, {
-              price: 12,
-              "base-price": 16
-            }, {
-              "compare-value": withCtx(({ comparePrice }, _push3, _parent3, _scopeId2) => {
-                if (_push3) {
-                  _push3(` x${ssrInterpolate(comparePrice)}`);
-                } else {
-                  return [
-                    createTextVNode(" x" + toDisplayString(comparePrice), 1)
-                  ];
-                }
-              }),
-              _: 1
-            }, _parent2, _scopeId));
-          } else {
-            return [
-              createVNode(_sfc_main$1, null, {
-                default: withCtx(({ salePrice }) => [
-                  createTextVNode(" ProductCard " + toDisplayString(salePrice), 1)
-                ]),
-                _: 1
-              }),
-              createVNode(_sfc_main$1, {
-                product: { price: price.value }
-              }, null, 8, ["product"]),
-              createVNode(_sfc_main$1, {
-                price: 12,
-                "base-price": 17
-              }),
-              createVNode(_sfc_main$1, {
-                price: 12,
-                "base-price": 16,
-                "is-literal": true
-              }),
-              createVNode(_sfc_main$1, {
-                price: 12,
-                "is-big": isBig.value
-              }, null, 8, ["is-big"]),
-              createVNode(_sfc_main$1, {
-                price: 14,
-                "base-price": 18,
-                "is-big": isBig.value,
-                "is-literal": true
-              }, null, 8, ["is-big"]),
-              createVNode(_sfc_main$1, {
-                price: 12,
-                "base-price": 16
-              }, {
-                "compare-value": withCtx(({ comparePrice }) => [
-                  createTextVNode(" x" + toDisplayString(comparePrice), 1)
-                ]),
-                _: 1
-              })
-            ];
-          }
-        }),
-        _: 1
-      }), _parent);
-    };
+    const __returned__ = { price, isBig, Prices };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
   }
 });
-
+function _sfc_ssrRender(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+  ssrRenderVNode(_push, createVNode(resolveDynamicComponent($props.as), _attrs, {
+    default: withCtx((_, _push2, _parent2, _scopeId) => {
+      if (_push2) {
+        _push2(ssrRenderComponent($setup["Prices"], null, {
+          default: withCtx(({ salePrice }, _push3, _parent3, _scopeId2) => {
+            if (_push3) {
+              _push3(` ProductCard ${ssrInterpolate(salePrice)}`);
+            } else {
+              return [
+                createTextVNode(" ProductCard " + toDisplayString(salePrice), 1)
+              ];
+            }
+          }),
+          _: 1
+        }, _parent2, _scopeId));
+        _push2(ssrRenderComponent($setup["Prices"], {
+          product: { price: $setup.price }
+        }, null, _parent2, _scopeId));
+        _push2(ssrRenderComponent($setup["Prices"], {
+          price: 12,
+          "base-price": 17
+        }, null, _parent2, _scopeId));
+        _push2(ssrRenderComponent($setup["Prices"], {
+          price: 12,
+          "base-price": 16,
+          "is-literal": true
+        }, null, _parent2, _scopeId));
+        _push2(ssrRenderComponent($setup["Prices"], {
+          price: 12,
+          "is-big": $setup.isBig
+        }, null, _parent2, _scopeId));
+        _push2(ssrRenderComponent($setup["Prices"], {
+          price: 14,
+          "base-price": 18,
+          "is-big": $setup.isBig,
+          "is-literal": true
+        }, null, _parent2, _scopeId));
+        _push2(ssrRenderComponent($setup["Prices"], {
+          price: 12,
+          "base-price": 16
+        }, {
+          "compare-value": withCtx(({ comparePrice }, _push3, _parent3, _scopeId2) => {
+            if (_push3) {
+              _push3(` x${ssrInterpolate(comparePrice)}`);
+            } else {
+              return [
+                createTextVNode(" x" + toDisplayString(comparePrice), 1)
+              ];
+            }
+          }),
+          _: 1
+        }, _parent2, _scopeId));
+      } else {
+        return [
+          createVNode($setup["Prices"], null, {
+            default: withCtx(({ salePrice }) => [
+              createTextVNode(" ProductCard " + toDisplayString(salePrice), 1)
+            ]),
+            _: 1
+          }),
+          createVNode($setup["Prices"], {
+            product: { price: $setup.price }
+          }, null, 8, ["product"]),
+          createVNode($setup["Prices"], {
+            price: 12,
+            "base-price": 17
+          }),
+          createVNode($setup["Prices"], {
+            price: 12,
+            "base-price": 16,
+            "is-literal": true
+          }),
+          createVNode($setup["Prices"], {
+            price: 12,
+            "is-big": $setup.isBig
+          }, null, 8, ["is-big"]),
+          createVNode($setup["Prices"], {
+            price: 14,
+            "base-price": 18,
+            "is-big": $setup.isBig,
+            "is-literal": true
+          }, null, 8, ["is-big"]),
+          createVNode($setup["Prices"], {
+            price: 12,
+            "base-price": 16
+          }, {
+            "compare-value": withCtx(({ comparePrice }) => [
+              createTextVNode(" x" + toDisplayString(comparePrice), 1)
+            ]),
+            _: 1
+          })
+        ];
+      }
+    }),
+    _: 1
+  }), _parent);
+}
 const _sfc_setup = _sfc_main.setup;
 _sfc_main.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/lib/components/ProductCard.vue");
   return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
 };
+const ProductCard = /* @__PURE__ */ _export_sfc(_sfc_main, [["ssrRender", _sfc_ssrRender]]);
 
 const $$Astro$5 = createAstro("https://ecom2-002.web.app");
 const $$Home = createComponent(async ($$result, $$props, $$slots) => {
@@ -2189,8 +2333,8 @@ 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": "~/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" })}
+  ${renderComponent($$result, "Prices", Prices, { "price": 10, "client:load": true, "client:component-hydration": "load", "client:component-path": "~/components/Prices.vue", "client:component-export": "default" })}
+  ${renderComponent($$result, "ProductCard", ProductCard, { "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");
 
@@ -2209,8 +2353,8 @@ const $$Index$1 = createComponent(async ($$result, $$props, $$slots) => {
     loadError = err;
   }
   return renderTemplate`<html${addAttribute(pageContext?.lang.replace("_", "-"), "lang")}>
-${pageContext && renderTemplate`${renderComponent($$result, "PagesLayout", $$Pages, { "pageContext": pageContext }, { "default": () => renderTemplate`${renderComponent($$result, "HomeMain", $$Home, { "pageContext": pageContext })}` })}`}
-${loadError && renderTemplate`${renderComponent($$result, "Fragment", Fragment, {}, { "default": () => renderTemplate`${unescapeHTML(loadError.responseHTML)}` })}`}
+${pageContext && renderTemplate`${renderComponent($$result, "PagesLayout", $$Pages, { "pageContext": pageContext }, { "default": ($$result2) => renderTemplate`${renderComponent($$result2, "HomeMain", $$Home, { "pageContext": pageContext })}` })}`}
+${loadError && renderTemplate`${renderComponent($$result, "Fragment", Fragment, {}, { "default": ($$result2) => renderTemplate`${unescapeHTML(loadError.responseHTML)}` })}`}
 </html>`;
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/pages/index.astro");
 
@@ -2297,8 +2441,8 @@ const $$ = createComponent(async ($$result, $$props, $$slots) => {
     loadError = err;
   }
   return renderTemplate`<html${addAttribute(pageContext?.lang.replace("_", "-"), "lang")}>
-${pageContext && renderTemplate`${renderComponent($$result, "PagesLayout", $$Pages, { "pageContext": pageContext }, { "default": () => renderTemplate`${renderComponent($$result, "WildcardMain", $$Wildcard, { "pageContext": pageContext })}` })}`}
-${loadError && renderTemplate`${renderComponent($$result, "Fragment", Fragment, {}, { "default": () => renderTemplate`${unescapeHTML(loadError.responseHTML)}` })}`}
+${pageContext && renderTemplate`${renderComponent($$result, "PagesLayout", $$Pages, { "pageContext": pageContext }, { "default": ($$result2) => renderTemplate`${renderComponent($$result2, "WildcardMain", $$Wildcard, { "pageContext": pageContext })}` })}`}
+${loadError && renderTemplate`${renderComponent($$result, "Fragment", Fragment, {}, { "default": ($$result2) => renderTemplate`${unescapeHTML(loadError.responseHTML)}` })}`}
 </html>`;
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/pages/[...slug].astro");
 
@@ -2313,4 +2457,4 @@ const _page5 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
   url: $$url
 }, Symbol.toStringTag, { value: 'Module' }));
 
-export { $$Pages as $, _page0 as _, _page1 as a, _page3 as b, _page4 as c, _page5 as d, loadPageContext as l };
+export { $$Pages as $, _export_sfc as _, _page0 as a, _page1 as b, _page3 as c, _page4 as d, _page5 as e, loadPageContext as l };