cloudcommerce 0.35.0 → 0.36.0

package/packages/storefront/dist/server/chunks/SearchModal_f66549d4.mjs

@@ -0,0 +1,147 @@
+import { ref, shallowReactive, watch, defineComponent, toRef, resolveComponent, withCtx, openBlock, createBlock, Fragment, renderList, toDisplayString, useSSRContext } from 'vue';
+import { useDebounceFn } from '@vueuse/core';
+import api from '@cloudcommerce/api';
+import { h as useStorage, _ as _export_sfc, P as ProductShelf } from './pages/__93ade2dd.mjs';
+import { ssrRenderAttrs, ssrRenderComponent, ssrRenderList, ssrInterpolate } from 'vue/server-renderer';
+
+const storageKey = "ecomSeachHistory";
+const searchHistory = useStorage(storageKey, []);
+const search = async ({
+  term,
+  params,
+  fields,
+  url = "search/v1"
+}) => {
+  term = term.trim();
+  if (term.length < 2) {
+    return { data: { result: [], meta: null } };
+  }
+  const response = await api.get(url, {
+    fields,
+    params: {
+      ...params,
+      term
+    }
+  });
+  if (response.data.result.length && !searchHistory.includes(term)) {
+    const termIndex = searchHistory.findIndex((_term) => term.startsWith(_term));
+    if (termIndex > -1) {
+      searchHistory[termIndex] = term;
+    } else {
+      searchHistory.unshift(term);
+    }
+    while (searchHistory.length > 20) {
+      searchHistory.pop();
+    }
+  }
+  return response;
+};
+class SearchEngine {
+  url;
+  fields;
+  term = ref("");
+  params = shallowReactive({});
+  pageSize = ref(24);
+  pageNumber = ref(1);
+  products = shallowReactive([]);
+  #search;
+  constructor({
+    fields,
+    url = "search/v1",
+    debounce = 150
+  } = {}) {
+    this.fields = fields;
+    this.url = url;
+    this.products = shallowReactive([]);
+    this.#search = useDebounceFn(search, debounce);
+    watch([this.term, this.params], () => {
+      this.pageNumber.value = 1;
+    });
+  }
+  async fetch(term) {
+    if (term && term !== this.term.value) {
+      this.term.value = term;
+      this.pageNumber.value = 1;
+    }
+    const limit = this.pageSize.value;
+    const offset = limit * (this.pageNumber.value - 1);
+    const response = await this.#search({
+      term: this.term.value,
+      params: {
+        limit,
+        offset,
+        ...this.params
+      },
+      url: this.url,
+      fields: this.fields
+    });
+    if (response) {
+      const { data } = response;
+      if (data.meta) {
+        this.products.splice(0);
+      }
+      data.result.forEach((item) => this.products.push(item));
+    }
+  }
+}
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "SearchModal",
+  props: {
+    term: {}
+  },
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const searchEngine = new SearchEngine();
+    watch(toRef(props, "term"), (term) => searchEngine.fetch(term));
+    const __returned__ = { props, searchEngine, get searchHistory() {
+      return searchHistory;
+    }, ProductShelf };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+function _sfc_ssrRender(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+  const _component_Carousel = resolveComponent("Carousel");
+  _push(`<article${ssrRenderAttrs(_attrs)}><nav class="bg-base-100/80 p-4 backdrop-blur-md lg:rounded">`);
+  _push(ssrRenderComponent(_component_Carousel, {
+    class: "gap-2 px-6",
+    "wrapper-key": $props.term
+  }, {
+    default: withCtx((_, _push2, _parent2, _scopeId) => {
+      if (_push2) {
+        _push2(`<!--[-->`);
+        ssrRenderList($setup.searchHistory, (term, i) => {
+          _push2(`<li class="shrink-0"${_scopeId}>${ssrInterpolate(term)}</li>`);
+        });
+        _push2(`<!--]-->`);
+      } else {
+        return [
+          (openBlock(true), createBlock(Fragment, null, renderList($setup.searchHistory, (term, i) => {
+            return openBlock(), createBlock("li", {
+              key: i,
+              class: "shrink-0"
+            }, toDisplayString(term), 1);
+          }), 128))
+        ];
+      }
+    }),
+    _: 1
+  }, _parent));
+  _push(`</nav>`);
+  _push(ssrRenderComponent($setup["ProductShelf"], {
+    products: $setup.searchEngine.products,
+    class: "rounded bg-white"
+  }, null, _parent));
+  _push(`</article>`);
+}
+const _sfc_setup = _sfc_main.setup;
+_sfc_main.setup = (props, ctx) => {
+  const ssrContext = useSSRContext();
+  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/SearchModal.vue");
+  return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
+};
+const SearchModal = /* @__PURE__ */ _export_sfc(_sfc_main, [["ssrRender", _sfc_ssrRender]]);
+
+export { SearchModal as default };

package/packages/storefront/dist/server/chunks/{_.._07cccbbe.mjs → _.._5a781fb3.mjs}

@@ -1,6 +1,6 @@
 export { renderers } from '../renderers.mjs';
 export { onRequest } from '../_empty-middleware.mjs';
 
-const page = () => import('./pages/__e7ddf925.mjs').then(n => n.j);
+const page = () => import('./pages/__93ade2dd.mjs').then(n => n.m);
 
 export { page };

package/packages/storefront/dist/server/chunks/{account_e71f4214.mjs → account_519edb70.mjs}

@@ -1,6 +1,6 @@
 export { renderers } from '../renderers.mjs';
 export { onRequest } from '../_empty-middleware.mjs';
 
-const page = () => import('./pages/account_f14e6f5a.mjs');
+const page = () => import('./pages/account_e5d410a7.mjs');
 
 export { page };

package/packages/storefront/dist/server/chunks/{index_414d53c7.mjs → index_10e14f85.mjs}

@@ -1,6 +1,6 @@
 export { renderers } from '../renderers.mjs';
 export { onRequest } from '../_empty-middleware.mjs';
 
-const page = () => import('./pages/index_b300d887.mjs').then(n => n.a);
+const page = () => import('./pages/index_7e25afc1.mjs').then(n => n.a);
 
 export { page };

package/packages/storefront/dist/server/chunks/{index_a7b0afbf.mjs → index_5e3ed8a0.mjs}

@@ -1,6 +1,6 @@
 export { renderers } from '../renderers.mjs';
 export { onRequest } from '../_empty-middleware.mjs';
 
-const page = () => import('./pages/index_b300d887.mjs').then(n => n.i);
+const page = () => import('./pages/index_7e25afc1.mjs').then(n => n.i);
 
 export { page };

package/packages/storefront/dist/server/chunks/{node_7efff4d0.mjs → node_1119b0d1.mjs}

@@ -1,6 +1,6 @@
 export { renderers } from '../renderers.mjs';
 export { onRequest } from '../_empty-middleware.mjs';
 
-const page = () => import('./pages/node_2b0cb889.mjs');
+const page = () => import('./pages/node_bd378ac0.mjs');
 
 export { page };

package/packages/storefront/dist/server/chunks/pages/{__e7ddf925.mjs → __93ade2dd.mjs}

@@ -11,9 +11,9 @@ import 'clsx';
 import mime from 'mime/lite.js';
 import { i as isESMImportedImage, g as getImage$1 } from '../astro/assets-service_a9d9ab5f.mjs';
 import imageSize from 'image-size';
-import { reactive, computed, shallowRef, useSSRContext, defineComponent, resolveComponent, mergeProps, withCtx, withDirectives, createVNode, vShow, openBlock, createBlock, createCommentVNode, Fragment as Fragment$1, renderList, watch, ref, toRef, nextTick, withModifiers, renderSlot as renderSlot$1, Teleport, resolveDynamicComponent, onMounted, createTextVNode, toDisplayString, defineAsyncComponent, Suspense, createSlots, shallowReactive, withAsyncContext, inject, provide } from 'vue';
+import { reactive, computed, shallowRef, useSSRContext, defineComponent, resolveComponent, mergeProps, withCtx, withDirectives, createVNode, vShow, openBlock, createBlock, createCommentVNode, Fragment as Fragment$1, renderList, watch, ref, toRef, nextTick, withModifiers, renderSlot as renderSlot$1, Teleport, resolveDynamicComponent, onMounted, createTextVNode, toDisplayString, defineAsyncComponent, vModelText, Suspense, createSlots, shallowReactive, withAsyncContext, inject, provide } from 'vue';
 import { ssrRenderAttrs, ssrRenderComponent, ssrRenderStyle, ssrRenderList, ssrRenderClass, ssrIncludeBooleanAttr, ssrRenderAttr, ssrRenderSlot, ssrRenderTeleport, ssrRenderVNode, ssrInterpolate, ssrRenderSuspense } from 'vue/server-renderer';
-import { watchDebounced, useDebounceFn, useTimeout, promiseTimeout, onClickOutside, watchOnce, useElementHover, useUrlSearchParams } from '@vueuse/core';
+import { watchDebounced, useDebounceFn, useTimeout, promiseTimeout, onClickOutside, watchOnce, useElementHover, createReusableTemplate, useUrlSearchParams } from '@vueuse/core';
 import mitt from 'mitt';
 import { Popover, PopoverButton, PopoverPanel, Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue';
 
@@ -296,7 +296,7 @@ const loadRouteContext = async (Astro, {
   const { slug } = Astro.params;
   if (isHomepage) {
     cmsContent = await config.getContent("pages/home");
-  } else if (slug) {
+  } else if (slug && typeof slug === "string") {
     if (contentCollection) {
       cmsContent = await config.getContent(`${contentCollection}/${slug}`);
     } else if (slug.startsWith("_api/") || slug === "_analytics") {
@@ -1739,10 +1739,12 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
   __name: "Drawer",
   props: {
     modelValue: { type: Boolean, default: false },
+    isHidden: { type: Boolean, default: false },
     placement: { default: "start" },
     position: { default: "fixed" },
     animation: { default: "slide" },
     hasCloseButton: { type: Boolean, default: true },
+    anchorEl: {},
     backdropTarget: { default: "#teleported-top" },
     maxWidth: {},
     class: {}
@@ -1756,6 +1758,8 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     const drawer = ref(null);
     const outsideClickListener = (ev) => {
       if (!drawer.value?.contains(ev.target)) {
+        if (props.anchorEl?.contains(ev.target))
+          return;
         close();
       }
     };
@@ -1839,7 +1843,12 @@ function _sfc_ssrRender$q(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
     default: withCtx((_, _push2, _parent2, _scopeId) => {
       if (_push2) {
         if ($props.modelValue) {
-          _push2(`<dialog class="${ssrRenderClass([[
+          _push2(`<dialog style="${ssrRenderStyle([
+            !$props.isHidden ? null : { display: "none" },
+            {
+              maxWidth: $props.maxWidth ? `min(${$props.maxWidth}, calc(100vw - ${$setup.scrollbarWidth}px))` : !$setup.isPlacementX ? `calc(100vw - ${$setup.scrollbarWidth}px)` : void 0
+            }
+          ])}" class="${ssrRenderClass([[
             $props.position,
             $setup.isPlacementX ? "m-0" : "mx-auto",
             $setup.isPlacementX && !$props.maxWidth ? "max-w-sm" : null,
@@ -1848,9 +1857,7 @@ function _sfc_ssrRender$q(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
             $setup.isFixed && $props.placement === "end" ? "left-auto right-0" : null,
             $setup.animationClassName,
             ...$setup.customClassList
-          ], "z-40 w-screen p-0"])}" style="${ssrRenderStyle({
-            maxWidth: $props.maxWidth ? `min(${$props.maxWidth}, calc(100vw - ${$setup.scrollbarWidth}px))` : !$setup.isPlacementX ? `calc(100vw - ${$setup.scrollbarWidth}px)` : void 0
-          })}"${ssrIncludeBooleanAttr($props.modelValue) ? " open" : ""}${ssrRenderAttr("data-drawer", $props.placement)}${_scopeId}><div class="relative h-full"${_scopeId}>`);
+          ], "z-40 w-screen p-0"])}"${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 z-30"])}" data-drawer-close${_scopeId}>`);
             ssrRenderSlot(_ctx.$slots, "close", {}, () => {
@@ -1862,35 +1869,39 @@ function _sfc_ssrRender$q(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
           }
           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 left-0 top-0 z-30 h-screen w-screen bg-black/50" data-drawer-backdrop${_scopeId2}></div>`);
+          if ($props.backdropTarget) {
+            ssrRenderTeleport(_push2, (_push3) => {
+              _push3(ssrRenderComponent(_component_Fade, null, {
+                default: withCtx((_2, _push4, _parent3, _scopeId2) => {
+                  if (_push4) {
+                    if ($props.modelValue && !$props.isHidden) {
+                      _push4(`<div class="fixed left-0 top-0 z-30 h-screen w-screen bg-black/50" data-drawer-backdrop${_scopeId2}></div>`);
+                    } else {
+                      _push4(`<!---->`);
+                    }
                   } else {
-                    _push4(`<!---->`);
+                    return [
+                      $props.modelValue && !$props.isHidden ? (openBlock(), createBlock("div", {
+                        key: 0,
+                        class: "fixed left-0 top-0 z-30 h-screen w-screen bg-black/50",
+                        "data-drawer-backdrop": ""
+                      })) : createCommentVNode("", true)
+                    ];
                   }
-                } else {
-                  return [
-                    $props.modelValue ? (openBlock(), createBlock("div", {
-                      key: 0,
-                      class: "fixed left-0 top-0 z-30 h-screen w-screen bg-black/50",
-                      "data-drawer-backdrop": ""
-                    })) : createCommentVNode("", true)
-                  ];
-                }
-              }),
-              _: 1
-            }, _parent2, _scopeId));
-          }, $props.backdropTarget, false, _parent2);
+                }),
+                _: 1
+              }, _parent2, _scopeId));
+            }, $props.backdropTarget, false, _parent2);
+          } else {
+            _push2(`<!---->`);
+          }
           _push2(`</dialog>`);
         } else {
           _push2(`<!---->`);
         }
       } else {
         return [
-          $props.modelValue ? (openBlock(), createBlock("dialog", {
+          $props.modelValue ? withDirectives((openBlock(), createBlock("dialog", {
             key: 0,
             ref: "drawer",
             class: ["z-40 w-screen p-0", [
@@ -1924,10 +1935,13 @@ function _sfc_ssrRender$q(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
               ], 10, ["onClick"])) : createCommentVNode("", true),
               renderSlot$1(_ctx.$slots, "default")
             ]),
-            (openBlock(), createBlock(Teleport, { to: $props.backdropTarget }, [
+            $props.backdropTarget ? (openBlock(), createBlock(Teleport, {
+              key: 0,
+              to: $props.backdropTarget
+            }, [
               createVNode(_component_Fade, null, {
                 default: withCtx(() => [
-                  $props.modelValue ? (openBlock(), createBlock("div", {
+                  $props.modelValue && !$props.isHidden ? (openBlock(), createBlock("div", {
                     key: 0,
                     class: "fixed left-0 top-0 z-30 h-screen w-screen bg-black/50",
                     "data-drawer-backdrop": ""
@@ -1935,8 +1949,10 @@ function _sfc_ssrRender$q(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
                 ]),
                 _: 1
               })
-            ], 8, ["to"]))
-          ], 14, ["open", "data-drawer"])) : createCommentVNode("", true)
+            ], 8, ["to"])) : createCommentVNode("", true)
+          ], 14, ["open", "data-drawer"])), [
+            [vShow, !$props.isHidden]
+          ]) : createCommentVNode("", true)
         ];
       }
     }),
@@ -3412,8 +3428,8 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
   },
   setup(__props, { expose: __expose }) {
     __expose();
-    const SearchModal = defineAsyncComponent(() => import('../SearchModal_930845a4.mjs'));
-    const CartSidebar = defineAsyncComponent(() => import('../CartSidebar_6cb69be3.mjs'));
+    const SearchModal = defineAsyncComponent(() => import('../SearchModal_f66549d4.mjs'));
+    const CartSidebar = defineAsyncComponent(() => import('../CartSidebar_eab28771.mjs'));
     const props = __props;
     const header = ref(null);
     const {
@@ -3428,6 +3444,17 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     watchOnce(isSearchOpen, () => {
       isSearchOpenOnce.value = true;
     });
+    const searchTerm = ref("");
+    const searchInput = ref(null);
+    const toggleSearch = (ev) => {
+      isSearchOpen.value = !isSearchOpen.value;
+      if (isSearchOpen.value) {
+        ev.preventDefault();
+        nextTick(() => searchInput.value?.focus());
+      } else if (!searchTerm.value) {
+        ev.preventDefault();
+      }
+    };
     const isCartOpen = ref(false);
     const isCartOpenOnce = ref(false);
     watchOnce(isCartOpen, () => {
@@ -3448,12 +3475,13 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
         delayedTotalItems.value = newTotalItems;
       }, { immediate: true });
     });
-    const __returned__ = { SearchModal, CartSidebar, props, header, isSticky, positionY, categoryTrees, inlineMenuTrees, isSidenavOpen, isSearchOpen, isSearchOpenOnce, isCartOpen, isCartOpenOnce, isMounted, delayedTotalItems, Drawer, ShopSidenav, ShopHeaderMenu, AccountMenu };
+    const __returned__ = { SearchModal, CartSidebar, props, header, isSticky, positionY, categoryTrees, inlineMenuTrees, isSidenavOpen, isSearchOpen, isSearchOpenOnce, searchTerm, searchInput, toggleSearch, isCartOpen, isCartOpenOnce, isMounted, delayedTotalItems, Drawer, ShopSidenav, ShopHeaderMenu, AccountMenu };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
 });
 function _sfc_ssrRender$h(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+  const _component_Fade = resolveComponent("Fade");
   const _component_Skeleton = resolveComponent("Skeleton");
   _push(`<header${ssrRenderAttrs(mergeProps({
     ref: "header",
@@ -3467,7 +3495,40 @@ function _sfc_ssrRender$h(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   ], "text-3xl transition-colors"])}"></i></button></div>`);
   ssrRenderSlot(_ctx.$slots, "logo", {}, null, _push, _parent);
   _push(ssrRenderComponent($setup["ShopHeaderMenu"], mergeProps({ class: "hidden lg:block" }, { inlineMenuTrees: $setup.inlineMenuTrees }), null, _parent));
-  _push(`<div class="text-base-800 flex basis-1/4 items-center justify-end gap-3 px-2 lg:gap-4"><a href="/s"${ssrRenderAttr("aria-label", "Buscar produtos")} role="button"><i class="i-magnifying-glass hover:text-primary h-7 w-7 hover:scale-110 active:scale-125"></i></a>`);
+  _push(`<div class="text-base-800 flex basis-1/4 items-center justify-end gap-3 px-2 lg:gap-4"><form action="/s" method="get" class="relative"><label for="HeaderSearch" class="sr-only">${ssrInterpolate("Buscar produtos")}</label>`);
+  _push(ssrRenderComponent(_component_Fade, null, {
+    default: withCtx((_, _push2, _parent2, _scopeId) => {
+      if (_push2) {
+        _push2(`<div style="${ssrRenderStyle($setup.isSearchOpen ? null : { display: "none" })}" class="absolute -right-0.5 -top-2 flex items-stretch"${_scopeId}><div class="hidden w-12 bg-gradient-to-r from-transparent to-white sm:block"${_scopeId}></div><input type="search" id="HeaderSearch" name="term"${ssrRenderAttr("value", $setup.searchTerm)} class="to-primary-50 border-primary/20 border-1 w-72 max-w-md bg-gradient-to-r from-white py-3 pl-5 pr-12 text-base ring-0 md:w-screen"${ssrRenderAttr("placeholder", `${"Buscar produtos"} ...`)}${_scopeId}></div>`);
+      } else {
+        return [
+          withDirectives(createVNode("div", { class: "absolute -right-0.5 -top-2 flex items-stretch" }, [
+            createVNode("div", { class: "hidden w-12 bg-gradient-to-r from-transparent to-white sm:block" }),
+            withDirectives(createVNode("input", {
+              ref: "searchInput",
+              type: "search",
+              id: "HeaderSearch",
+              name: "term",
+              "onUpdate:modelValue": ($event) => $setup.searchTerm = $event,
+              class: "to-primary-50 border-primary/20 border-1 w-72 max-w-md bg-gradient-to-r from-white py-3 pl-5 pr-12 text-base ring-0 md:w-screen",
+              placeholder: `${"Buscar produtos"} ...`
+            }, null, 8, ["onUpdate:modelValue", "placeholder"]), [
+              [
+                vModelText,
+                $setup.searchTerm,
+                void 0,
+                { trim: true }
+              ]
+            ])
+          ], 512), [
+            [vShow, $setup.isSearchOpen]
+          ])
+        ];
+      }
+    }),
+    _: 1
+  }, _parent));
+  _push(`<button type="submit"${ssrRenderAttr("aria-label", "Buscar produtos")}><i class="${ssrRenderClass([$setup.isSearchOpen && "text-primary-600 -translate-x-2", "i-magnifying-glass hover:text-primary h-7 w-7 hover:scale-110 active:scale-125"])}"></i></button></form>`);
   _push(ssrRenderComponent($setup["AccountMenu"], { class: "hidden sm:block" }, {
     button: withCtx(({ open }, _push2, _parent2, _scopeId) => {
       if (_push2) {
@@ -3514,7 +3575,9 @@ function _sfc_ssrRender$h(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   _push(ssrRenderComponent($setup["Drawer"], {
     modelValue: $setup.isSearchOpen,
     "onUpdate:modelValue": ($event) => $setup.isSearchOpen = $event,
+    "is-hidden": !$setup.searchTerm || $setup.searchTerm.length < 2,
     "has-close-button": false,
+    "anchor-el": $setup.searchInput?.parentElement,
     placement: "top",
     animation: "scale",
     "max-width": "55rem",
@@ -3534,7 +3597,7 @@ function _sfc_ssrRender$h(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
           },
           default: () => {
             if ($setup.isSearchOpenOnce) {
-              _push2(ssrRenderComponent($setup["SearchModal"], null, null, _parent2, _scopeId));
+              _push2(ssrRenderComponent($setup["SearchModal"], { term: $setup.searchTerm }, null, _parent2, _scopeId));
             } else {
               _push2(`<!---->`);
             }
@@ -3554,7 +3617,10 @@ function _sfc_ssrRender$h(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
               ])
             ]),
             default: withCtx(() => [
-              $setup.isSearchOpenOnce ? (openBlock(), createBlock($setup["SearchModal"], { key: 0 })) : createCommentVNode("", true)
+              $setup.isSearchOpenOnce ? (openBlock(), createBlock($setup["SearchModal"], {
+                key: 0,
+                term: $setup.searchTerm
+              }, null, 8, ["term"])) : createCommentVNode("", true)
             ]),
             _: 1
           }))
@@ -4860,11 +4926,11 @@ function _sfc_ssrRender$b(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   _push(`<article${ssrRenderAttrs(mergeProps({
     ref: "card",
     "data-sku": $setup.product.sku,
-    class: "group relative mx-auto h-full max-w-[350px] py-3"
+    class: "group relative mx-auto h-full max-w-[350px] px-0.5 py-3 hover:z-[1]"
   }, _attrs))}>`);
   _push(ssrRenderComponent(_component_ALink, {
     href: $setup.link,
-    class: "flex h-full flex-col overflow-hidden rounded ring-black/5 group-hover:shadow group-hover:ring-1"
+    class: "flex h-full flex-col overflow-hidden rounded bg-white ring-black/5 group-hover:shadow group-hover:ring-1"
   }, {
     default: withCtx((_, _push2, _parent2, _scopeId) => {
       if (_push2) {
@@ -4895,7 +4961,7 @@ function _sfc_ssrRender$b(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
         } else {
           _push2(`<!---->`);
         }
-        _push2(`<div class="relative z-10 flex grow flex-col justify-between bg-white/40 p-4 group-hover:backdrop-blur-md"${_scopeId}>`);
+        _push2(`<div class="relative z-10 flex grow flex-col justify-between p-4"${_scopeId}>`);
         ssrRenderVNode(_push2, createVNode(resolveDynamicComponent($props.headingTag), {
           class: ["ui-link line-clamp-2 no-underline", [
             $setup.isActive ? "text-base-700" : "text-base-500",
@@ -4961,7 +5027,7 @@ function _sfc_ssrRender$b(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
             createVNode("strong", null, toDisplayString($setup.discountPercentage), 1),
             createTextVNode("% ")
           ])) : createCommentVNode("", true),
-          createVNode("div", { class: "relative z-10 flex grow flex-col justify-between bg-white/40 p-4 group-hover:backdrop-blur-md" }, [
+          createVNode("div", { class: "relative z-10 flex grow flex-col justify-between p-4" }, [
             (openBlock(), createBlock(resolveDynamicComponent($props.headingTag), {
               class: ["ui-link line-clamp-2 no-underline", [
                 $setup.isActive ? "text-base-700" : "text-base-500",
@@ -5022,6 +5088,10 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     __expose();
     let __temp, __restore;
     const props = __props;
+    const [
+      DefineCarouselControl,
+      ReuseCarouselControl
+    ] = createReusableTemplate();
     const {
       title,
       titleLink,
@@ -5032,7 +5102,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       [__temp, __restore] = withAsyncContext(() => fetching), await __temp, __restore();
     }
     const listName = title.value || `Shelf ${useId()}`;
-    const __returned__ = { props, title, titleLink, fetching, products, listName, ProductCard };
+    const __returned__ = { props, DefineCarouselControl, ReuseCarouselControl, title, titleLink, fetching, products, listName, ProductCard };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
@@ -5066,24 +5136,44 @@ function _sfc_ssrRender$a(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   _push(ssrRenderComponent(_component_Carousel, { class: "group/shelf" }, {
     controls: withCtx((_, _push2, _parent2, _scopeId) => {
       if (_push2) {
-        _push2(`<div style="${ssrRenderStyle($setup.products.length > 2 ? null : { display: "none" })}" class="text-primary text-3xl leading-none transition-opacity group-hover/shelf:opacity-90 lg:text-2xl lg:opacity-0"${_scopeId}>`);
-        _push2(ssrRenderComponent(_component_CarouselControl, {
-          class: "lg:hover:bg-primary-300/60 !-left-4 !top-1/2 h-12 w-12 rounded-full bg-transparent ring-black/5 lg:bg-white/80 lg:shadow-sm lg:ring-1",
-          "is-prev": ""
-        }, null, _parent2, _scopeId));
-        _push2(ssrRenderComponent(_component_CarouselControl, { class: "lg:hover:bg-primary-300/60 !-right-4 !top-1/2 h-12 w-12 rounded-full bg-transparent ring-black/5 lg:bg-white/80 lg:shadow-sm lg:ring-1" }, null, _parent2, _scopeId));
-        _push2(`</div>`);
+        _push2(ssrRenderComponent($setup["DefineCarouselControl"], null, {
+          default: withCtx(({ isPrev }, _push3, _parent3, _scopeId2) => {
+            if (_push3) {
+              _push3(ssrRenderComponent(_component_CarouselControl, {
+                style: $setup.products.length > 2 ? null : { display: "none" },
+                class: ["uno-nxxji7", isPrev ? "!-left-4" : "!-right-4"],
+                "is-prev": isPrev
+              }, null, _parent3, _scopeId2));
+            } else {
+              return [
+                withDirectives(createVNode(_component_CarouselControl, {
+                  class: ["uno-nxxji7", isPrev ? "!-left-4" : "!-right-4"],
+                  "is-prev": isPrev
+                }, null, 8, ["class", "is-prev"]), [
+                  [vShow, $setup.products.length > 2]
+                ])
+              ];
+            }
+          }),
+          _: 1
+        }, _parent2, _scopeId));
+        _push2(ssrRenderComponent($setup["ReuseCarouselControl"], { "is-prev": true }, null, _parent2, _scopeId));
+        _push2(ssrRenderComponent($setup["ReuseCarouselControl"], null, null, _parent2, _scopeId));
       } else {
         return [
-          withDirectives(createVNode("div", { class: "text-primary text-3xl leading-none transition-opacity group-hover/shelf:opacity-90 lg:text-2xl lg:opacity-0" }, [
-            createVNode(_component_CarouselControl, {
-              class: "lg:hover:bg-primary-300/60 !-left-4 !top-1/2 h-12 w-12 rounded-full bg-transparent ring-black/5 lg:bg-white/80 lg:shadow-sm lg:ring-1",
-              "is-prev": ""
-            }),
-            createVNode(_component_CarouselControl, { class: "lg:hover:bg-primary-300/60 !-right-4 !top-1/2 h-12 w-12 rounded-full bg-transparent ring-black/5 lg:bg-white/80 lg:shadow-sm lg:ring-1" })
-          ], 512), [
-            [vShow, $setup.products.length > 2]
-          ])
+          createVNode($setup["DefineCarouselControl"], null, {
+            default: withCtx(({ isPrev }) => [
+              withDirectives(createVNode(_component_CarouselControl, {
+                class: ["uno-nxxji7", isPrev ? "!-left-4" : "!-right-4"],
+                "is-prev": isPrev
+              }, null, 8, ["class", "is-prev"]), [
+                [vShow, $setup.products.length > 2]
+              ])
+            ]),
+            _: 1
+          }),
+          createVNode($setup["ReuseCarouselControl"], { "is-prev": true }),
+          createVNode($setup["ReuseCarouselControl"])
         ];
       }
     }),
@@ -6264,4 +6354,4 @@ const ____slug_ = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty(
   url: $$url
 }, Symbol.toStringTag, { value: 'Module' }));
 
-export { $$BaseHead as $, Banner as B, CheckoutLink as C, FooterStamps as F, Prices as P, QuantitySelector as Q, _export_sfc as _, $$Picture as a, $$Base as b, $$BannerPictures as c, $$Sections as d, $$PageHeader as e, $$PageFooter as f, assetsDir as g, freeShippingFromValue as h, imageConfig as i, ____slug_ as j, loadRouteContext as l, parseProduct as p, removeCartItem as r, shoppingCart as s, totalItems as t, usePageHero as u };
+export { $$BaseHead as $, Banner as B, CheckoutLink as C, FooterStamps as F, ProductShelf as P, QuantitySelector as Q, _export_sfc as _, $$Picture as a, $$Base as b, $$BannerPictures as c, $$Sections as d, $$PageHeader as e, $$PageFooter as f, assetsDir as g, useStorage as h, imageConfig as i, Prices as j, freeShippingFromValue as k, loadRouteContext as l, ____slug_ as m, parseProduct as p, removeCartItem as r, shoppingCart as s, totalItems as t, usePageHero as u };

package/packages/storefront/dist/server/chunks/pages/{account_f14e6f5a.mjs → account_e5d410a7.mjs}

@@ -1,5 +1,5 @@
 import { e as createAstro, f as createComponent, r as renderTemplate, h as addAttribute, i as renderComponent, m as maybeRenderHead } from '../astro_d98f7186.mjs';
-import { l as loadRouteContext, $ as $$BaseHead, a as $$Picture, b as $$Base } from './__e7ddf925.mjs';
+import { l as loadRouteContext, $ as $$BaseHead, a as $$Picture, b as $$Base } from './__93ade2dd.mjs';
 
 const $$Astro = createAstro("https://demo.ecomplus.app");
 const $$Account = createComponent(async ($$result, $$props, $$slots) => {

package/packages/storefront/dist/server/chunks/pages/{index_b300d887.mjs → index_7e25afc1.mjs}

@@ -1,5 +1,5 @@
 import { e as createAstro, f as createComponent, r as renderTemplate, m as maybeRenderHead, i as renderComponent, h as addAttribute, u as unescapeHTML, F as Fragment$1 } from '../astro_d98f7186.mjs';
-import { _ as _export_sfc, B as Banner, u as usePageHero, c as $$BannerPictures, d as $$Sections, l as loadRouteContext, $ as $$BaseHead, e as $$PageHeader, f as $$PageFooter, b as $$Base, F as FooterStamps, a as $$Picture } from './__e7ddf925.mjs';
+import { _ as _export_sfc, B as Banner, u as usePageHero, c as $$BannerPictures, d as $$Sections, l as loadRouteContext, $ as $$BaseHead, e as $$PageHeader, f as $$PageFooter, b as $$Base, F as FooterStamps, a as $$Picture } from './__93ade2dd.mjs';
 import 'clsx';
 import { useSSRContext, defineComponent, ref, onMounted, resolveComponent, mergeProps, withCtx, createVNode, withDirectives, vShow, renderSlot, openBlock, createBlock, Fragment, renderList, createTextVNode, toDisplayString } from 'vue';
 import { ssrRenderAttrs, ssrRenderComponent, ssrRenderStyle, ssrRenderClass, ssrRenderList, ssrRenderSlot, ssrInterpolate } from 'vue/server-renderer';

package/packages/storefront/dist/server/chunks/pages/{node_2b0cb889.mjs → node_bd378ac0.mjs}

@@ -3,7 +3,7 @@ import { readFile } from 'fs/promises';
 import mime from 'mime/lite.js';
 import 'os';
 import { a as getConfiguredImageService, b as isRemoteAllowed } from '../astro/assets-service_a9d9ab5f.mjs';
-import { i as imageConfig, g as assetsDir } from './__e7ddf925.mjs';
+import { i as imageConfig, g as assetsDir } from './__93ade2dd.mjs';
 
 const fnv1a52 = (str) => {
   const len = str.length;

package/packages/storefront/dist/server/chunks/pages/{~fallback_2bbdf875.mjs → ~fallback_73578d2f.mjs}

@@ -1,5 +1,5 @@
 import { e as createAstro, f as createComponent, r as renderTemplate, m as maybeRenderHead, h as addAttribute, i as renderComponent } from '../astro_d98f7186.mjs';
-import { l as loadRouteContext, $ as $$BaseHead, e as $$PageHeader, b as $$Base } from './__e7ddf925.mjs';
+import { l as loadRouteContext, $ as $$BaseHead, e as $$PageHeader, b as $$Base } from './__93ade2dd.mjs';
 import 'clsx';
 
 const $$Astro$1 = createAstro("https://demo.ecomplus.app");

package/packages/storefront/dist/server/chunks/{~fallback_43c17ff0.mjs → ~fallback_41122b9b.mjs}

@@ -1,6 +1,6 @@
 export { renderers } from '../renderers.mjs';
 export { onRequest } from '../_empty-middleware.mjs';
 
-const page = () => import('./pages/~fallback_2bbdf875.mjs');
+const page = () => import('./pages/~fallback_73578d2f.mjs');
 
 export { page };