@feedmepos/mf-menu-portal 1.0.4 → 1.0.5-dev.1

package/dist/{CookingGuide-CRyRlBeV.js → CookingGuide-Y-c1NLP5.js}

@@ -1,15 +1,16 @@
-import { defineComponent as xe, resolveComponent as k, openBlock as m, createBlock as w, withCtx as p, createElementVNode as i, toDisplayString as g, computed as F, ref as L, shallowRef as ke, h as ee, withModifiers as D, onUnmounted as He, unref as t, createElementBlock as _, createVNode as n, Fragment as C, renderList as V, createCommentVNode as q, mergeProps as oe, createTextVNode as Qe, nextTick as Je } from "vue";
+import { defineComponent as xe, resolveComponent as k, openBlock as p, createBlock as S, withCtx as c, createElementVNode as i, toDisplayString as g, computed as F, ref as L, shallowRef as ke, h as ee, withModifiers as N, onUnmounted as He, unref as t, createElementBlock as f, createVNode as n, Fragment as C, renderList as V, createCommentVNode as D, mergeProps as oe, createTextVNode as Qe, nextTick as Je } from "vue";
 import { _ as R, d as We } from "./vuedraggable-CBtQLb_S.js";
 import { useI18n as Xe } from "@feedmepos/mf-common";
 import { useDialog as Ye, useBreakpoints as Ze, components as te } from "@feedmepos/ui-library";
-import { _ as eo } from "./index.vue_vue_type_script_setup_true_lang-CGPDazqs.js";
-import { _ as oo } from "./app-C_XNYz8_.js";
-import { _ as to } from "./LinkProductSideSheet.vue_vue_type_script_setup_true_lang-C0rc1FRO.js";
-import { _ as ao } from "./PageLayout.vue_vue_type_script_setup_true_lang-B3szUH39.js";
-import { u as lo } from "./useActionFeedback-CXx7dOVc.js";
+import { _ as eo } from "./PhoneFab.vue_vue_type_script_setup_true_lang-CipbTqbp.js";
+import { _ as oo } from "./index.vue_vue_type_script_setup_true_lang-CGPDazqs.js";
+import { _ as to } from "./app-CxJjx2ma.js";
+import { _ as ao } from "./LinkProductSideSheet.vue_vue_type_script_setup_true_lang-Cb6nO43H.js";
+import { _ as lo } from "./PageLayout.vue_vue_type_script_setup_true_lang-DrhsROXo.js";
+import { u as io } from "./useActionFeedback-CElXij1W.js";
 import { u as ye } from "./useEditorValidation-Ctef5Bxt.js";
-import { a as io, b as no, u as he } from "./provide-Bwf3KcOV.js";
-const so = { class: "fm-typo-en-body-lg-600" }, uo = { class: "fm-typo-en-body-lg-600" }, ro = /* @__PURE__ */ xe({
+import { a as no, b as so, u as he } from "./provide-BGLSDsuJ.js";
+const uo = { class: "fm-typo-en-body-lg-600" }, ro = { class: "fm-typo-en-body-lg-600" }, co = /* @__PURE__ */ xe({
   __name: "RemoveCookingGuideConfirmation",
   props: {
     row: {}
@@ -17,37 +18,34 @@ const so = { class: "fm-typo-en-body-lg-600" }, uo = { class: "fm-typo-en-body-l
   setup(Ce) {
     return (x, o) => {
       const $ = k("i18n-t");
-      return m(), w($, {
+      return p(), S($, {
         keypath: x.row.linkedProductCount > 0 ? "menu.cooking_guide.dialogs.remove.message.confirm_with_products" : "menu.cooking_guide.dialogs.remove.message.confirm",
         scope: "global",
         tag: "p"
       }, {
-        count: p(() => [
-          i("span", so, g(x.row.linkedProductCount), 1)
+        count: c(() => [
+          i("span", uo, g(x.row.linkedProductCount), 1)
         ]),
-        name: p(() => [
-          i("span", uo, g(x.row.name), 1)
+        name: c(() => [
+          i("span", ro, g(x.row.name), 1)
         ]),
         _: 1
       }, 8, ["keypath"]);
     };
   }
-}), co = { class: "flex flex-1 justify-end" }, mo = {
+}), mo = { class: "flex flex-1 justify-end" }, po = {
   key: 0,
   class: "flex flex-col gap-16 items-start"
-}, po = {
+}, vo = {
   role: "alert",
   class: "text-fm-color-typo-secondary"
-}, vo = { class: "flex justify-end items-center" }, go = { class: "grow space-y-4" }, _o = { class: "fm-typo-en-body-lg-600" }, fo = { class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary" }, bo = { class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary" }, ko = {
-  key: 2,
-  class: "fixed right-16 bottom-[72px] z-[100] w-[144px]"
-}, yo = { class: "fm-typo-en-title-md-600" }, ho = { class: "space-y-24" }, xo = { class: "flex items-center" }, Co = { class: "flex items-center gap-8" }, So = { class: "fm-typo-en-body-lg-400 text-fm-color-typo-secondary" }, wo = { class: "flex-1" }, Fo = { class: "bg-fm-color-neutral-gray-100 px-16 py-8" }, Vo = { class: "px-16 py-8 flex-1 flex gap-4 overflow-auto min-w-0" }, Io = { class: "fm-typo-en-body-md-500" }, $o = { class: "px-16 py-8 flex gap-8" }, Eo = { class: "flex gap-8" }, Oo = { class: "flex items-center gap-8" }, Lo = { class: "fm-typo-en-title-md-600" }, Ko = { class: "flex flex-col gap-32" }, Po = { class: "flex bg-fm-color-neutral-gray-100 border-b border-b-fm-color-neutral-gray-200" }, Mo = { class: "w-2/5 px-16 py-8" }, Uo = { class: "grow px-16 py-8" }, Go = { class: "w-2/5 px-16 py-8" }, To = { class: "grow px-16 py-8" }, Ro = { class: "space-y-16" }, jo = { class: "flex flex-wrap gap-8 overflow-hidden mb-8" }, zo = { class: "flex gap-8 items-center justify-start" }, Ao = { class: "min-w-[700px]" }, Bo = { class: "flex bg-fm-color-neutral-gray-100" }, No = { class: "grow px-16 py-8" }, Do = { class: "w-[200px] px-16 py-8" }, qo = { class: "w-[200px] px-16 py-8" }, Ho = { class: "grow px-16 py-8" }, Qo = { class: "w-[200px] px-16 py-8" }, Jo = { class: "w-[200px] px-16 py-8" }, Wo = {
+}, go = { class: "flex justify-end items-center" }, _o = { class: "grow space-y-4" }, fo = { class: "fm-typo-en-body-lg-600" }, bo = { class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary" }, ko = { class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary" }, yo = { class: "fm-typo-en-title-md-600" }, ho = { class: "space-y-24" }, xo = { class: "flex items-center" }, Co = { class: "flex items-center gap-8" }, So = { class: "fm-typo-en-body-lg-400 text-fm-color-typo-secondary" }, wo = { class: "flex-1" }, Fo = { class: "bg-fm-color-neutral-gray-100 px-16 py-8" }, Vo = { class: "px-16 py-8 flex-1 flex gap-4 overflow-auto min-w-0" }, Io = { class: "fm-typo-en-body-md-500" }, $o = { class: "px-16 py-8 flex gap-8" }, Eo = { class: "flex gap-8" }, Oo = { class: "flex items-center gap-8" }, Lo = { class: "fm-typo-en-title-md-600" }, Ko = { class: "flex flex-col gap-32" }, Po = { class: "flex bg-fm-color-neutral-gray-100 border-b border-b-fm-color-neutral-gray-200" }, Mo = { class: "w-2/5 px-16 py-8" }, Uo = { class: "grow px-16 py-8" }, Go = { class: "w-2/5 px-16 py-8" }, To = { class: "grow px-16 py-8" }, Ro = { class: "space-y-16" }, zo = { class: "flex flex-wrap gap-8 overflow-hidden mb-8" }, jo = { class: "flex gap-8 items-center justify-start" }, Ao = { class: "min-w-[700px]" }, Bo = { class: "flex bg-fm-color-neutral-gray-100" }, No = { class: "grow px-16 py-8" }, Do = { class: "w-[200px] px-16 py-8" }, qo = { class: "w-[200px] px-16 py-8" }, Ho = { class: "grow px-16 py-8" }, Qo = { class: "w-[200px] px-16 py-8" }, Jo = { class: "w-[200px] px-16 py-8" }, Wo = {
   key: 0,
   class: "h-8"
-}, ut = /* @__PURE__ */ xe({
+}, dt = /* @__PURE__ */ xe({
   __name: "CookingGuide",
   setup(Ce) {
-    const x = io(), { t: o } = Xe(), $ = no(), ae = Ye(), { breakpoints: Se } = Ze(), { run: H } = lo(), K = he(x.cookingGuide.list), h = F(
+    const x = no(), { t: o } = Xe(), $ = so(), ae = Ye(), { breakpoints: Se } = Ze(), { run: q } = io(), K = he(x.cookingGuide.list), h = F(
       () => K.value.status === "ready" ? K.value.value : null
     ), we = F(() => {
       var e;
@@ -55,7 +53,7 @@ const so = { class: "fm-typo-en-body-lg-600" }, uo = { class: "fm-typo-en-body-l
     }), le = F(() => {
       var e;
       return [...((e = h.value) == null ? void 0 : e.rows) ?? []];
-    }), j = F(() => Se.value.xs), P = L(!1), M = L(!1), U = L(!1), ie = L(null), E = L(!1), Q = L(!1), d = ke(
+    }), H = F(() => Se.value.xs), P = L(!1), M = L(!1), U = L(!1), ie = L(null), E = L(!1), Q = L(!1), d = ke(
       x.cookingGuide.editor()
     ), G = ke(
       d.value.get()
@@ -63,20 +61,20 @@ const so = { class: "fm-typo-en-body-lg-600" }, uo = { class: "fm-typo-en-body-l
     let z = d.value.subscribe(
       (e) => G.value = e
     );
-    const c = F(
+    const m = F(
       () => G.value.status === "ready" ? G.value.value : null
     ), J = ye(() => d.value), ne = F(
-      () => c.value ? J.issue(c.value.fieldIssues, "name") ?? c.value.nameIssue : null
+      () => m.value ? J.issue(m.value.fieldIssues, "name") ?? m.value.nameIssue : null
     ), T = ye(
       () => {
         var e, a;
-        return ((a = (e = c.value) == null ? void 0 : e.stepEditor) == null ? void 0 : a.id) ?? null;
+        return ((a = (e = m.value) == null ? void 0 : e.stepEditor) == null ? void 0 : a.id) ?? null;
       }
     );
     function se(e, a) {
       var y;
       const s = T.issue(
-        ((y = c.value) == null ? void 0 : y.stepFieldIssues) ?? {},
+        ((y = m.value) == null ? void 0 : y.stepFieldIssues) ?? {},
         `variables.${e}.${a}`
       );
       return s ? [$(s)] : [];
@@ -104,7 +102,7 @@ const so = { class: "fm-typo-en-body-lg-600" }, uo = { class: "fm-typo-en-body-l
     }
     function me() {
       var e;
-      if (!((e = c.value) != null && e.dirty)) return X();
+      if (!((e = m.value) != null && e.dirty)) return X();
       ae.open({
         title: o("menu.common.dialog.dismiss.title"),
         message: o("menu.common.dialog.dismiss.message"),
@@ -122,21 +120,21 @@ const so = { class: "fm-typo-en-body-lg-600" }, uo = { class: "fm-typo-en-body-l
       e ? P.value = !0 : me();
     }
     function pe() {
-      var S;
-      const e = ((S = c.value) == null ? void 0 : S.name) ?? "", a = d.value, s = J.submit(() => a.submit()), y = a.get(), f = y.status === "ready" && y.value.status === "submitting";
-      H(() => s, {
+      var w;
+      const e = ((w = m.value) == null ? void 0 : w.name) ?? "", a = d.value, s = J.submit(() => a.submit()), y = a.get(), _ = y.status === "ready" && y.value.status === "submitting";
+      q(() => s, {
         successMessage: o("menu.cooking_guide.manager.action.saved", { name: e }),
         showLoading: () => {
-          var A;
-          return ((A = c.value) == null ? void 0 : A.status) === "submitting";
+          var j;
+          return ((j = m.value) == null ? void 0 : j.status) === "submitting";
         }
       }).finally(() => {
-        f && a.dispose();
-      }), f && ce();
+        _ && a.dispose();
+      }), _ && ce();
     }
     function Ie() {
       var e;
-      return (((e = c.value) == null ? void 0 : e.bindings) ?? []).map(
+      return (((e = m.value) == null ? void 0 : e.bindings) ?? []).map(
         (a) => a.combinationKey ? { itemId: a.productId, combinationKey: a.combinationKey } : { itemId: a.productId }
       );
     }
@@ -163,9 +161,9 @@ const so = { class: "fm-typo-en-body-lg-600" }, uo = { class: "fm-typo-en-body-l
       (await T.submit(async () => {
         var s;
         return d.value.saveStep() ? { kind: "success", value: void 0 } : { kind: "rejected", issues: Object.entries(
-          ((s = c.value) == null ? void 0 : s.stepFieldIssues) ?? {}
+          ((s = m.value) == null ? void 0 : s.stepFieldIssues) ?? {}
         ).flatMap(
-          ([y, f]) => (f ?? []).map((S) => ({ ...S, field: y }))
+          ([y, _]) => (_ ?? []).map((w) => ({ ...w, field: y }))
         ) };
       })).kind === "success" && (U.value = !1);
     }
@@ -186,16 +184,16 @@ const so = { class: "fm-typo-en-body-lg-600" }, uo = { class: "fm-typo-en-body-l
         s ?? void 0,
         y ?? void 0
       ), s != null && Je(() => {
-        const f = ge(), S = s + e.length + 4;
-        f == null || f.focus(), f == null || f.setSelectionRange(S, S);
+        const _ = ge(), w = s + e.length + 4;
+        _ == null || _.focus(), _ == null || _.setSelectionRange(w, w);
       });
     }
     function Me(e) {
       d.value.openOverrides(e.productId, e.combinationKey), E.value = !0;
     }
     function Ue(e, a) {
-      var s, y, f;
-      return ((f = (y = (s = c.value) == null ? void 0 : s.overrideEditor) == null ? void 0 : y.values[e]) == null ? void 0 : f[a]) ?? "";
+      var s, y, _;
+      return ((_ = (y = (s = m.value) == null ? void 0 : s.overrideEditor) == null ? void 0 : y.values[e]) == null ? void 0 : _[a]) ?? "";
     }
     function Ge(e, a, s) {
       d.value.setOverrideValue(e, a, s);
@@ -209,7 +207,7 @@ const so = { class: "fm-typo-en-body-lg-600" }, uo = { class: "fm-typo-en-body-l
     function fe(e) {
       ae.open({
         title: o("menu.cooking_guide.dialogs.remove.title"),
-        contentComponent: ee(ro, { row: e }),
+        contentComponent: ee(co, { row: e }),
         primaryActions: {
           text: o("menu.cooking_guide.actions.remove"),
           close: !0,
@@ -220,7 +218,7 @@ const so = { class: "fm-typo-en-body-lg-600" }, uo = { class: "fm-typo-en-body-l
           close: !0
         }
       }).onPrimary(
-        () => H(() => x.cookingGuide.remove(e.id), {
+        () => q(() => x.cookingGuide.remove(e.id), {
           successMessage: o("menu.cooking_guide.manager.action.removed", {
             name: e.name
           })
@@ -230,14 +228,14 @@ const so = { class: "fm-typo-en-body-lg-600" }, uo = { class: "fm-typo-en-body-l
     async function Re() {
       Q.value = !0;
       try {
-        await H(() => x.cookingGuide.retryRead(), {
+        await q(() => x.cookingGuide.retryRead(), {
           showLoading: !1
         });
       } finally {
         Q.value = !1;
       }
     }
-    const je = F(() => [
+    const ze = F(() => [
       {
         accessorKey: "name",
         header: () => o("menu.cooking_guide.table.columns.name"),
@@ -271,7 +269,7 @@ const so = { class: "fm-typo-en-body-lg-600" }, uo = { class: "fm-typo-en-body-l
             textColor: "neutral-gray-400",
             disabled: e.row.original.remove.state !== "allowed",
             "aria-label": o("menu.cooking_guide.actions.remove"),
-            onClick: D(
+            onClick: N(
               () => fe(e.row.original),
               ["stop", "prevent"]
             )
@@ -282,13 +280,13 @@ const so = { class: "fm-typo-en-body-lg-600" }, uo = { class: "fm-typo-en-body-l
     return He(() => {
       x.cookingGuide.search(""), z(), d.value.dispose();
     }), (e, a) => {
-      const s = k("FmButton"), y = k("FmCircularProgress"), f = k("FmSearch"), S = k("FmTable"), A = k("FmListItem"), ze = k("FmList"), B = k("FmTextField"), Ae = k("FmCardSection"), Be = k("FmCard"), Z = k("FmSpacer"), be = k("FmSideSheet"), Ne = k("FmChip"), De = k("FmTextarea"), qe = k("FmDialog");
-      return m(), w(ao, {
+      const s = k("FmButton"), y = k("FmCircularProgress"), _ = k("FmSearch"), w = k("FmTable"), j = k("FmListItem"), je = k("FmList"), A = k("FmTextField"), Ae = k("FmCardSection"), Be = k("FmCard"), Z = k("FmSpacer"), be = k("FmSideSheet"), Ne = k("FmChip"), De = k("FmTextarea"), qe = k("FmDialog");
+      return p(), S(lo, {
         heading: t(o)("menu.cooking_guide.title")
       }, {
-        "append-heading": p(() => [
-          i("div", co, [
-            h.value && h.value.totalCount > 0 && !j.value ? (m(), w(s, {
+        "append-heading": c(() => [
+          i("div", mo, [
+            h.value && h.value.totalCount > 0 && !H.value ? (p(), S(s, {
               key: 0,
               class: "ml-auto",
               disabled: h.value.create.state !== "allowed",
@@ -296,12 +294,12 @@ const so = { class: "fm-typo-en-body-lg-600" }, uo = { class: "fm-typo-en-body-l
               "prepend-icon": "add",
               variant: "primary",
               onClick: W
-            }, null, 8, ["disabled", "label"])) : q("", !0)
+            }, null, 8, ["disabled", "label"])) : D("", !0)
           ])
         ]),
-        default: p(() => [
-          t(K).status === "error" ? (m(), _("div", mo, [
-            i("p", po, g(t($)(t(K).error.message)), 1),
+        default: c(() => [
+          t(K).status === "error" ? (p(), f("div", po, [
+            i("p", vo, g(t($)(t(K).error.message)), 1),
             n(s, {
               label: t(o)("menu.common.actions.retry"),
               loading: Q.value,
@@ -309,40 +307,40 @@ const so = { class: "fm-typo-en-body-lg-600" }, uo = { class: "fm-typo-en-body-l
               variant: "secondary",
               onClick: Re
             }, null, 8, ["label", "loading"])
-          ])) : t(K).status === "loading" ? (m(), w(y, { key: 1 })) : h.value && h.value.totalCount === 0 ? (m(), w(t(eo), {
+          ])) : t(K).status === "loading" ? (p(), S(y, { key: 1 })) : h.value && h.value.totalCount === 0 ? (p(), S(t(oo), {
             key: 2,
             action: h.value.create.state === "allowed" ? { text: t(o)("menu.cooking_guide.empty.action"), callback: W } : void 0,
             subtitle: t(o)("menu.cooking_guide.empty.subtitle"),
             title: t(o)("menu.cooking_guide.empty.title")
-          }, null, 8, ["action", "subtitle", "title"])) : h.value ? (m(), _(C, { key: 3 }, [
-            i("div", vo, [
-              n(f, {
-                autofocus: !j.value,
+          }, null, 8, ["action", "subtitle", "title"])) : h.value ? (p(), f(C, { key: 3 }, [
+            i("div", go, [
+              n(_, {
+                autofocus: "",
                 class: "my-8 w-[320px] xs:w-full xs:px-16",
                 "model-value": we.value,
                 placeholder: t(o)("menu.cooking_guide.table.search.placeholder"),
                 "onUpdate:modelValue": a[0] || (a[0] = (l) => t(x).cookingGuide.search(String(l ?? "")))
-              }, null, 8, ["autofocus", "model-value", "placeholder"])
+              }, null, 8, ["model-value", "placeholder"])
             ]),
-            j.value ? (m(), w(ze, {
+            H.value ? (p(), S(je, {
               key: 1,
               class: "w-full px-16 flex-1 min-h-0 overflow-scroll pb-64",
               separator: ""
             }, {
-              default: p(() => [
-                (m(!0), _(C, null, V(le.value, (l) => (m(), w(A, {
+              default: c(() => [
+                (p(!0), f(C, null, V(le.value, (l) => (p(), S(j, {
                   key: l.id,
                   class: "!py-12 !px-0",
                   onClick: (u) => re(l)
                 }, {
-                  default: p(() => [
-                    i("div", go, [
-                      i("div", _o, g(l.name), 1),
+                  default: c(() => [
+                    i("div", _o, [
+                      i("div", fo, g(l.name), 1),
                       i("div", null, [
-                        i("div", fo, g(t(o)("menu.cooking_guide.table.mobile.products_linked", {
+                        i("div", bo, g(t(o)("menu.cooking_guide.table.mobile.products_linked", {
                           count: l.linkedProductCount
                         })), 1),
-                        i("div", bo, g(t(o)("menu.cooking_guide.table.columns.steps", {
+                        i("div", ko, g(t(o)("menu.cooking_guide.table.columns.steps", {
                           count: l.stepCount
                         })), 1)
                       ])
@@ -353,17 +351,17 @@ const so = { class: "fm-typo-en-body-lg-600" }, uo = { class: "fm-typo-en-body-l
                       icon: "delete",
                       "text-color": "neutral-gray-400",
                       variant: "tertiary",
-                      onClick: D((u) => fe(l), ["stop"])
+                      onClick: N((u) => fe(l), ["stop"])
                     }, null, 8, ["aria-label", "disabled", "onClick"])
                   ]),
                   _: 2
                 }, 1032, ["onClick"]))), 128))
               ]),
               _: 1
-            })) : (m(), w(oo, { key: 0 }, {
-              default: p(() => [
-                n(S, {
-                  "column-defs": je.value,
+            })) : (p(), S(to, { key: 0 }, {
+              default: c(() => [
+                n(w, {
+                  "column-defs": ze.value,
                   "hide-footer": "",
                   "page-size": h.value.rows.length,
                   "row-data": le.value,
@@ -374,17 +372,19 @@ const so = { class: "fm-typo-en-body-lg-600" }, uo = { class: "fm-typo-en-body-l
               ]),
               _: 1
             })),
-            h.value.totalCount > 0 && j.value ? (m(), _("div", ko, [
-              n(s, {
-                class: "w-full",
-                disabled: h.value.create.state !== "allowed",
-                label: t(o)("menu.cooking_guide.actions.add"),
-                "prepend-icon": "add",
-                variant: "fab",
-                onClick: W
-              }, null, 8, ["disabled", "label"])
-            ])) : q("", !0)
-          ], 64)) : q("", !0),
+            h.value.totalCount > 0 && H.value ? (p(), S(eo, { key: 2 }, {
+              default: c(() => [
+                n(s, {
+                  disabled: h.value.create.state !== "allowed",
+                  label: t(o)("menu.cooking_guide.actions.add"),
+                  "prepend-icon": "add",
+                  variant: "fab",
+                  onClick: W
+                }, null, 8, ["disabled", "label"])
+              ]),
+              _: 1
+            })) : D("", !0)
+          ], 64)) : D("", !0),
           n(be, {
             "model-value": P.value,
             "is-container": t(te).FmForm,
@@ -397,19 +397,19 @@ const so = { class: "fm-typo-en-body-lg-600" }, uo = { class: "fm-typo-en-body-l
             "onOn:clickedAway": me,
             "onUpdate:modelValue": Ve
           }, {
-            "side-sheet-header": p(() => {
+            "side-sheet-header": c(() => {
               var l;
               return [
-                i("p", yo, g(((l = c.value) == null ? void 0 : l.mode) === "update" ? t(o)("menu.cooking_guide.dialog.update.title") : t(o)("menu.cooking_guide.dialog.add.title")), 1)
+                i("p", yo, g(((l = m.value) == null ? void 0 : l.mode) === "update" ? t(o)("menu.cooking_guide.dialog.update.title") : t(o)("menu.cooking_guide.dialog.add.title")), 1)
               ];
             }),
-            "side-sheet-footer": p(() => {
+            "side-sheet-footer": c(() => {
               var l, u;
               return [
                 i("div", Eo, [
                   n(s, {
-                    disabled: ((l = c.value) == null ? void 0 : l.submit.state) !== "allowed",
-                    label: ((u = c.value) == null ? void 0 : u.mode) === "update" ? t(o)("menu.cooking_guide.dialog.update.action") : t(o)("menu.cooking_guide.dialog.add.action"),
+                    disabled: ((l = m.value) == null ? void 0 : l.submit.state) !== "allowed",
+                    label: ((u = m.value) == null ? void 0 : u.mode) === "update" ? t(o)("menu.cooking_guide.dialog.update.action") : t(o)("menu.cooking_guide.dialog.add.action"),
                     type: "button",
                     variant: "primary",
                     onClick: pe
@@ -422,20 +422,20 @@ const so = { class: "fm-typo-en-body-lg-600" }, uo = { class: "fm-typo-en-body-l
                 ])
               ];
             }),
-            default: p(() => [
+            default: c(() => [
               i("div", ho, [
                 n(R, {
                   title: t(o)("menu.cooking_guide.dialog.sections.guide_detail.title")
                 }, {
-                  default: p(() => {
+                  default: c(() => {
                     var l, u;
                     return [
-                      n(B, oe(
+                      n(A, oe(
                         {
-                          autofocus: ((l = c.value) == null ? void 0 : l.mode) === "create",
+                          autofocus: ((l = m.value) == null ? void 0 : l.mode) === "create",
                           "error-messages": ne.value ? [t($)(ne.value)] : [],
                           label: t(o)("menu.cooking_guide.dialog.sections.guide_detail.name.label"),
-                          "model-value": ((u = c.value) == null ? void 0 : u.name) ?? "",
+                          "model-value": ((u = m.value) == null ? void 0 : u.name) ?? "",
                           placeholder: t(o)(
                             "menu.cooking_guide.dialog.sections.guide_detail.name.placeholder"
                           )
@@ -452,7 +452,7 @@ const so = { class: "fm-typo-en-body-lg-600" }, uo = { class: "fm-typo-en-body-l
                 n(R, {
                   title: t(o)("menu.cooking_guide.dialog.sections.steps.title")
                 }, {
-                  "append-title": p(() => [
+                  "append-title": c(() => [
                     n(s, {
                       label: t(o)("menu.cooking_guide.dialog.sections.steps.add"),
                       icon: "add",
@@ -462,24 +462,24 @@ const so = { class: "fm-typo-en-body-lg-600" }, uo = { class: "fm-typo-en-body-l
                       onClick: Ee
                     }, null, 8, ["label"])
                   ]),
-                  default: p(() => {
+                  default: c(() => {
                     var l;
                     return [
                       n(t(We), {
-                        "model-value": ((l = c.value) == null ? void 0 : l.steps) ?? [],
+                        "model-value": ((l = m.value) == null ? void 0 : l.steps) ?? [],
                         class: "flex flex-col gap-16",
                         handle: ".handle",
                         "item-key": "id",
                         "onUpdate:modelValue": Ke
                       }, {
-                        item: p(({ element: u }) => [
+                        item: c(({ element: u }) => [
                           n(Be, {
                             class: "rounded-md mb-16 items-center",
                             horizontal: "",
                             variant: "outlined",
                             onClick: (b) => ve(u.id)
                           }, {
-                            default: p(() => [
+                            default: c(() => [
                               i("div", xo, [
                                 n(s, {
                                   class: "handle",
@@ -488,7 +488,7 @@ const so = { class: "fm-typo-en-body-lg-600" }, uo = { class: "fm-typo-en-body-l
                                 })
                               ]),
                               n(Ae, { class: "grow" }, {
-                                default: p(() => [
+                                default: c(() => [
                                   Qe(g(u.instruction), 1)
                                 ]),
                                 _: 2
@@ -498,7 +498,7 @@ const so = { class: "fm-typo-en-body-lg-600" }, uo = { class: "fm-typo-en-body-l
                                 "prepend-icon": "delete",
                                 "text-color": "neutral-gray-400",
                                 variant: "tertiary",
-                                onClick: D((b) => Le(u.id), ["stop"])
+                                onClick: N((b) => Le(u.id), ["stop"])
                               }, null, 8, ["aria-label", "onClick"])
                             ]),
                             _: 2
@@ -513,7 +513,7 @@ const so = { class: "fm-typo-en-body-lg-600" }, uo = { class: "fm-typo-en-body-l
                 n(R, {
                   title: t(o)("menu.cooking_guide.dialog.sections.apply_product.title")
                 }, {
-                  "append-title": p(() => [
+                  "append-title": c(() => [
                     n(Z),
                     n(s, {
                       label: t(o)("menu.cooking_guide.dialog.sections.apply_product.link"),
@@ -524,27 +524,27 @@ const so = { class: "fm-typo-en-body-lg-600" }, uo = { class: "fm-typo-en-body-l
                       onClick: a[2] || (a[2] = (l) => M.value = !0)
                     }, null, 8, ["label"])
                   ]),
-                  default: p(() => {
+                  default: c(() => {
                     var l, u, b;
                     return [
                       i("div", Co, [
                         i("div", So, g(t(o)(
                           "menu.cooking_guide.dialog.sections.apply_product.products_linked",
-                          { count: ((l = c.value) == null ? void 0 : l.bindings.length) ?? 0 }
+                          { count: ((l = m.value) == null ? void 0 : l.bindings.length) ?? 0 }
                         )), 1),
                         i("div", wo, [
-                          n(f, {
-                            "model-value": ((u = c.value) == null ? void 0 : u.linkedFilter) ?? "",
+                          n(_, {
+                            "model-value": ((u = m.value) == null ? void 0 : u.linkedFilter) ?? "",
                             placeholder: t(o)("menu.cooking_guide.dialog.sections.apply_product.search"),
                             "onUpdate:modelValue": a[3] || (a[3] = (r) => d.value.setLinkedFilter(String(r ?? "")))
                           }, null, 8, ["model-value", "placeholder"])
                         ])
                       ]),
-                      (m(!0), _(C, null, V(((b = c.value) == null ? void 0 : b.linkedGroups) ?? [], (r) => (m(), _(C, {
+                      (p(!0), f(C, null, V(((b = m.value) == null ? void 0 : b.linkedGroups) ?? [], (r) => (p(), f(C, {
                         key: r.name ?? "uncategorised"
                       }, [
                         i("div", Fo, g(r.isSynthetic ? t(o)("menu.tree_editor.labels.addon") : r.name), 1),
-                        (m(!0), _(C, null, V(r.bindings, (v) => (m(), _("div", {
+                        (p(!0), f(C, null, V(r.bindings, (v) => (p(), f("div", {
                           key: v.binding.productId + v.binding.combinationKey,
                           class: "flex items-center"
                         }, [
@@ -563,9 +563,9 @@ const so = { class: "fm-typo-en-body-lg-600" }, uo = { class: "fm-typo-en-body-l
                               icon: "delete",
                               variant: "tertiary",
                               onClick: (O) => {
-                                var N;
+                                var B;
                                 return d.value.setLinkedProducts(
-                                  (((N = c.value) == null ? void 0 : N.bindings) ?? []).filter(
+                                  (((B = m.value) == null ? void 0 : B.bindings) ?? []).filter(
                                     (I) => I.productId !== v.binding.productId || I.combinationKey !== v.binding.combinationKey
                                   ).map((I) => ({
                                     productId: I.productId,
@@ -585,7 +585,7 @@ const so = { class: "fm-typo-en-body-lg-600" }, uo = { class: "fm-typo-en-body-l
             ]),
             _: 1
           }, 8, ["model-value", "is-container", "is-container-props"]),
-          n(to, {
+          n(ao, {
             modelValue: M.value,
             "onUpdate:modelValue": a[4] || (a[4] = (l) => M.value = l),
             catalogue: Fe.value,
@@ -605,7 +605,7 @@ const so = { class: "fm-typo-en-body-lg-600" }, uo = { class: "fm-typo-en-body-l
             "max-width": 560,
             "onUpdate:modelValue": Y
           }, {
-            "side-sheet-header": p(() => {
+            "side-sheet-header": c(() => {
               var l, u;
               return [
                 i("div", Oo, [
@@ -615,16 +615,16 @@ const so = { class: "fm-typo-en-body-lg-600" }, uo = { class: "fm-typo-en-body-l
                     variant: "tertiary",
                     onClick: Y
                   }, null, 8, ["label"]),
-                  i("span", Lo, g((u = (l = c.value) == null ? void 0 : l.stepEditor) != null && u.isNew ? t(o)("menu.cooking_guide.step_dialog.add.title") : t(o)("menu.cooking_guide.step_dialog.update.title")), 1)
+                  i("span", Lo, g((u = (l = m.value) == null ? void 0 : l.stepEditor) != null && u.isNew ? t(o)("menu.cooking_guide.step_dialog.add.title") : t(o)("menu.cooking_guide.step_dialog.update.title")), 1)
                 ])
               ];
             }),
-            "side-sheet-footer": p(() => {
+            "side-sheet-footer": c(() => {
               var l, u;
               return [
-                i("div", zo, [
+                i("div", jo, [
                   n(s, {
-                    label: (u = (l = c.value) == null ? void 0 : l.stepEditor) != null && u.isNew ? t(o)("menu.cooking_guide.step_dialog.add.action") : t(o)("menu.cooking_guide.step_dialog.update.action"),
+                    label: (u = (l = m.value) == null ? void 0 : l.stepEditor) != null && u.isNew ? t(o)("menu.cooking_guide.step_dialog.add.action") : t(o)("menu.cooking_guide.step_dialog.update.action"),
                     size: "lg",
                     type: "submit",
                     variant: "primary"
@@ -638,12 +638,12 @@ const so = { class: "fm-typo-en-body-lg-600" }, uo = { class: "fm-typo-en-body-l
                 ])
               ];
             }),
-            default: p(() => [
+            default: c(() => [
               i("div", Ko, [
                 n(R, {
                   title: t(o)("menu.cooking_guide.step_dialog.sections.variables.title")
                 }, {
-                  "append-title": p(() => [
+                  "append-title": c(() => [
                     n(Z),
                     n(s, {
                       label: t(o)("menu.cooking_guide.step_dialog.sections.variables.add"),
@@ -654,7 +654,7 @@ const so = { class: "fm-typo-en-body-lg-600" }, uo = { class: "fm-typo-en-body-l
                       onClick: d.value.addStepVariable
                     }, null, 8, ["label", "onClick"])
                   ]),
-                  default: p(() => {
+                  default: c(() => {
                     var l, u;
                     return [
                       i("div", null, [
@@ -666,12 +666,12 @@ const so = { class: "fm-typo-en-body-lg-600" }, uo = { class: "fm-typo-en-body-l
                             "menu.cooking_guide.step_dialog.sections.variables.columns.value"
                           )), 1)
                         ]),
-                        (m(!0), _(C, null, V(((u = (l = c.value) == null ? void 0 : l.stepEditor) == null ? void 0 : u.variables) ?? [], (b, r) => (m(), _("div", {
+                        (p(!0), f(C, null, V(((u = (l = m.value) == null ? void 0 : l.stepEditor) == null ? void 0 : u.variables) ?? [], (b, r) => (p(), f("div", {
                           key: r,
                           class: "flex items-center border-b border-b-fm-color-neutral-gray-100"
                         }, [
                           i("div", Go, [
-                            n(B, oe(
+                            n(A, oe(
                               {
                                 "aria-label": t(o)(
                                   "menu.cooking_guide.step_dialog.sections.variables.accessibility.key_input",
@@ -693,7 +693,7 @@ const so = { class: "fm-typo-en-body-lg-600" }, uo = { class: "fm-typo-en-body-l
                             ), null, 16, ["aria-label", "model-value", "placeholder", "error-messages"])
                           ]),
                           i("div", To, [
-                            n(B, oe(
+                            n(A, oe(
                               {
                                 "aria-label": t(o)(
                                   "menu.cooking_guide.step_dialog.sections.variables.accessibility.value_input",
@@ -733,27 +733,27 @@ const so = { class: "fm-typo-en-body-lg-600" }, uo = { class: "fm-typo-en-body-l
                 n(R, {
                   title: t(o)("menu.cooking_guide.step_dialog.sections.instruction.title")
                 }, {
-                  default: p(() => {
+                  default: c(() => {
                     var l, u, b, r;
                     return [
                       i("div", Ro, [
-                        i("div", jo, [
-                          (m(!0), _(C, null, V((((u = (l = c.value) == null ? void 0 : l.stepEditor) == null ? void 0 : u.variables) ?? []).filter(
-                            (v, O, N) => v.key && N.findIndex(
+                        i("div", zo, [
+                          (p(!0), f(C, null, V((((u = (l = m.value) == null ? void 0 : l.stepEditor) == null ? void 0 : u.variables) ?? []).filter(
+                            (v, O, B) => v.key && B.findIndex(
                               (I) => I.key === v.key
                             ) === O
-                          ), (v) => (m(), w(Ne, {
+                          ), (v) => (p(), S(Ne, {
                             key: v.key,
                             label: v.key,
                             class: "text-fm-color-primary bg-fm-color-system-warning-100",
-                            onMousedown: D((O) => Pe(v.key), ["prevent"])
+                            onMousedown: N((O) => Pe(v.key), ["prevent"])
                           }, null, 8, ["label", "onMousedown"]))), 128))
                         ]),
                         n(De, {
                           ref_key: "instructionInput",
                           ref: ie,
                           "aria-label": t(o)("menu.cooking_guide.step_dialog.sections.instruction.title"),
-                          "model-value": ((r = (b = c.value) == null ? void 0 : b.stepEditor) == null ? void 0 : r.instruction) ?? "",
+                          "model-value": ((r = (b = m.value) == null ? void 0 : b.stepEditor) == null ? void 0 : r.instruction) ?? "",
                           "onUpdate:modelValue": a[5] || (a[5] = (v) => d.value.setStepInstruction(String(v ?? "")))
                         }, null, 8, ["aria-label", "model-value"])
                       ])
@@ -767,29 +767,33 @@ const so = { class: "fm-typo-en-body-lg-600" }, uo = { class: "fm-typo-en-body-l
           }, 8, ["model-value", "is-container", "is-container-props"]),
           n(qe, {
             "model-value": E.value,
-            "max-width": 748,
+            "min-width": "min(calc(100% - 48px), 748px)",
             overlay: !0,
             "onUpdate:modelValue": a[6] || (a[6] = (l) => {
               l ? E.value = !0 : _e();
             })
           }, {
-            "dialog-header": p(() => [
+            "dialog-header": c(() => [
               i("span", null, g(t(o)("menu.cooking_guide.step_override_dialog.title")), 1)
             ]),
-            "dialog-footer": p(() => [
+            "dialog-footer": c(() => [
               n(Z),
               n(s, {
+                class: "sm:w-full xs:w-full",
                 label: t(o)("menu.cooking_guide.step_override_dialog.actions.cancel"),
+                size: "md",
                 variant: "tertiary",
                 onClick: _e
               }, null, 8, ["label"]),
               n(s, {
+                class: "sm:w-full xs:w-full",
                 label: t(o)("menu.cooking_guide.step_override_dialog.actions.save"),
+                size: "md",
                 variant: "primary",
                 onClick: Te
               }, null, 8, ["label"])
             ]),
-            default: p(() => {
+            default: c(() => {
               var l;
               return [
                 i("div", Ao, [
@@ -798,20 +802,20 @@ const so = { class: "fm-typo-en-body-lg-600" }, uo = { class: "fm-typo-en-body-l
                     i("span", Do, g(t(o)("menu.cooking_guide.step_override_dialog.columns.variables")), 1),
                     i("span", qo, g(t(o)("menu.cooking_guide.step_override_dialog.columns.value")), 1)
                   ]),
-                  (m(!0), _(C, null, V(((l = c.value) == null ? void 0 : l.steps) ?? [], (u) => (m(), _("div", {
+                  (p(!0), f(C, null, V(((l = m.value) == null ? void 0 : l.steps) ?? [], (u) => (p(), f("div", {
                     key: u.id,
                     class: "flex border-t-2"
                   }, [
                     i("div", Ho, g(u.instruction), 1),
                     i("div", Qo, [
-                      (m(!0), _(C, null, V(u.variables, (b, r) => (m(), _("div", {
+                      (p(!0), f(C, null, V(u.variables, (b, r) => (p(), f("div", {
                         key: r,
                         class: "py-8"
                       }, g(r), 1))), 128))
                     ]),
                     i("div", Jo, [
-                      (m(!0), _(C, null, V(u.variables, (b, r, v) => (m(), _(C, { key: r }, [
-                        n(B, {
+                      (p(!0), f(C, null, V(u.variables, (b, r, v) => (p(), f(C, { key: r }, [
+                        n(A, {
                           "aria-label": t(o)(
                             "menu.cooking_guide.step_override_dialog.accessibility.value_input",
                             { instruction: u.instruction, variable: r }
@@ -820,7 +824,7 @@ const so = { class: "fm-typo-en-body-lg-600" }, uo = { class: "fm-typo-en-body-l
                           placeholder: b,
                           "onUpdate:modelValue": (O) => Ge(u.id, r, String(O ?? ""))
                         }, null, 8, ["aria-label", "model-value", "placeholder", "onUpdate:modelValue"]),
-                        v < Object.keys(u.variables).length - 1 ? (m(), _("div", Wo)) : q("", !0)
+                        v < Object.keys(u.variables).length - 1 ? (p(), f("div", Wo)) : D("", !0)
                       ], 64))), 128))
                     ])
                   ]))), 128))
@@ -838,5 +842,5 @@ const so = { class: "fm-typo-en-body-lg-600" }, uo = { class: "fm-typo-en-body-l
   }
 });
 export {
-  ut as default
+  dt as default
 };