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

package/dist/{ProductList.vue_vue_type_script_setup_true_lang-BwKQESr3.js → ProductList.vue_vue_type_script_setup_true_lang-rczFAWVa.js}

@@ -1,156 +1,203 @@
-import { defineComponent as $e, resolveComponent as U, openBlock as o, createBlock as F, createSlots as Jt, withCtx as A, createElementVNode as u, normalizeStyle as Qt, unref as a, createElementBlock as y, createVNode as v, isRef as Zt, createCommentVNode as M, Fragment as Q, renderList as ie, toDisplayString as O, renderSlot as Ze, computed as b, ref as H, watch as ge, h as V, normalizeClass as _e, withModifiers as we, withKeys as wt, shallowRef as xe, onUnmounted as el, createTextVNode as tl, nextTick as ll } from "vue";
-import { _ as Ct } from "./TranslationLanguageSelector.vue_vue_type_script_setup_true_lang-BJZ6VcrT.js";
-import { useI18n as Se, useCoreStore as al } from "@feedmepos/mf-common";
-import { _ as Ft, R as ol, A as $t, h as Ge } from "./app-BWwwHsWi.js";
-import { _ as qe, a as nl } from "./ProductAttributeFilter.vue_vue_type_script_setup_true_lang-B2KdolJS.js";
-import { a as St, b as sl, _ as rl } from "./TreeEditorOpenner.vue_vue_type_script_setup_true_lang-CshqYpc9.js";
-import { u as il, a as ul } from "./ProductInlineCreateHost.vue_vue_type_script_setup_true_lang-0UwUcA2L.js";
-import { components as re, useDialog as cl, useBreakpoints as ml, FmButtonVariant as fe, FmButtonColorThemeVariant as ye } from "@feedmepos/ui-library";
-import { _ as dl } from "./index.vue_vue_type_script_setup_true_lang-CGPDazqs.js";
-import { _ as He } from "./ProductImageEditorDialog.vue_vue_type_script_setup_true_lang-cG47Pu-6.js";
-import { _ as pl } from "./TranslationViewChip.vue_vue_type_script_setup_true_lang-CAkLEmSA.js";
-import { _ as vl } from "./PageLayout.vue_vue_type_script_setup_true_lang-B3szUH39.js";
-import { b as Ot, u as je, d as fl } from "./provide-CDmXzkhz.js";
-import { _ as bl } from "./ProductGroupCreateSheet.vue_vue_type_script_setup_true_lang-D8NQTCLx.js";
-import { _ as yl } from "./ProductEditorHost.vue_vue_type_script_setup_true_lang-CBlDEjqF.js";
+import { defineComponent as he, resolveComponent as T, openBlock as o, createBlock as F, withCtx as A, createElementBlock as f, computed as v, normalizeClass as fe, toDisplayString as L, unref as a, createSlots as Zt, createElementVNode as i, normalizeStyle as el, createVNode as y, isRef as tl, createCommentVNode as M, Fragment as Q, renderList as ue, renderSlot as qe, ref as Y, watch as _e, h as E, withModifiers as $e, withKeys as Ct, shallowRef as Ce, onUnmounted as ll, nextTick as al } from "vue";
+import { _ as Ft } from "./TranslationLanguageSelector.vue_vue_type_script_setup_true_lang-BJZ6VcrT.js";
+import { useI18n as Fe, useCoreStore as ol } from "@feedmepos/mf-common";
+import { _ as $t, R as nl, A as St, h as Ke } from "./app-CxJjx2ma.js";
+import { _ as Ge } from "./ProductChipSummary.vue_vue_type_script_setup_true_lang-D9v88xZs.js";
+import { O as Ie, _ as sl } from "./LinkProductSideSheet.vue_vue_type_script_setup_true_lang-Cb6nO43H.js";
+import { _ as rl } from "./ProductAttributeFilter.vue_vue_type_script_setup_true_lang-DoHQeOHy.js";
+import { a as il, _ as ul } from "./TreeEditorOpenner.vue_vue_type_script_setup_true_lang-DoS4Btzj.js";
+import { u as cl, a as ml } from "./ProductInlineCreateHost.vue_vue_type_script_setup_true_lang-BzctosMW.js";
+import { components as pe, useDialog as dl, useBreakpoints as pl, FmButtonVariant as be, FmButtonColorThemeVariant as ve } from "@feedmepos/ui-library";
+import { _ as vl } from "./index.vue_vue_type_script_setup_true_lang-CGPDazqs.js";
+import { _ as He } from "./ProductImageEditorDialog.vue_vue_type_script_setup_true_lang-B3bShTjM.js";
+import { _ as fl } from "./TranslationViewChip.vue_vue_type_script_setup_true_lang-CAkLEmSA.js";
+import { _ as bl } from "./PageLayout.vue_vue_type_script_setup_true_lang-DrhsROXo.js";
+import { b as Ut, u as Ne, d as yl } from "./provide-BGLSDsuJ.js";
+import { _ as gl } from "./ProductGroupCreateSheet.vue_vue_type_script_setup_true_lang-CEliG36Z.js";
+import { _ as _l } from "./ProductEditorHost.vue_vue_type_script_setup_true_lang-DsIGLKNS.js";
 import { _ as It } from "./ProductFilterMenu.vue_vue_type_script_setup_true_lang-Cgc0Ms_n.js";
-import { O as Ne, a as gl, _ as _l } from "./LinkProductSideSheet.vue_vue_type_script_setup_true_lang-CnI80Ojd.js";
-import { u as Mt } from "./useActionFeedback-Dm2HDa_2.js";
+import { u as Tt } from "./useActionFeedback-CElXij1W.js";
 import { _ as hl } from "./FormItem.vue_vue_type_script_setup_true_lang-C2S6QCyR.js";
-import { _ as kl } from "./vuedraggable-CBtQLb_S.js";
-import { u as xl } from "./useEditorValidation-Ctef5Bxt.js";
+import { _ as xl } from "./vuedraggable-CBtQLb_S.js";
+import { _ as Vt } from "./TextChip.vue_vue_type_script_setup_true_lang-YkUjMTXo.js";
+import { u as kl } from "./useEditorValidation-Ctef5Bxt.js";
 import { useRouter as wl } from "vue-router";
-const Cl = {
+const Cl = ["src", "alt"], Pt = /* @__PURE__ */ he({
+  __name: "ProductThumbnail",
+  props: {
+    src: {},
+    alt: {}
+  },
+  setup(C) {
+    return (u, t) => {
+      const $ = T("FmIcon"), n = T("FmCard");
+      return o(), F(n, {
+        variant: "outlined",
+        class: "flex shrink-0 w-72 !h-72 items-center justify-center rounded-md overflow-hidden"
+      }, {
+        default: A(() => [
+          u.src ? (o(), f("img", {
+            key: 0,
+            src: u.src,
+            alt: u.alt,
+            class: "w-full h-full object-cover"
+          }, null, 8, Cl)) : (o(), F($, {
+            key: 1,
+            name: "image",
+            outline: "",
+            color: "neutral-gray-300"
+          }))
+        ]),
+        _: 1
+      });
+    };
+  }
+}), Fl = /* @__PURE__ */ he({
+  __name: "OrderFromChip",
+  props: {
+    orderFrom: {}
+  },
+  setup(C) {
+    const u = C, { t } = Fe(), $ = {
+      ALL: "bg-fm-color-neutral-gray-100",
+      POS_ONLY: "text-fm-color-primary bg-fm-color-system-warning-100",
+      NONE: "text-fm-color-typo-error bg-fm-color-system-error-100"
+    }, n = v(() => $[u.orderFrom]);
+    return (U, g) => (o(), f("span", {
+      class: fe(["inline-block fm-corner-radius-md px-4 py-[2px] fm-typo-en-body-md-600 text-nowrap max-w-full", n.value])
+    }, L(a(t)(a(Ie)[U.orderFrom])), 3));
+  }
+}), $l = {
   key: 0,
   class: "sticky top-0 z-10 px-8 pb-8 bg-fm-color-neutral-white"
-}, Fl = {
+}, Sl = {
   key: 1,
   class: "py-8 px-12 fm-typo-en-body-md-400 text-fm-color-typo-tertiary"
-}, $l = /* @__PURE__ */ $e({
+}, Il = /* @__PURE__ */ he({
   __name: "BulkCategorySelect",
   props: {
     items: {},
     modelValue: {}
   },
   emits: ["update:modelValue"],
-  setup(C, { emit: m }) {
-    const t = C, L = m, { t: n } = Se(), { search: R, filtered: g, noMatches: h, reset: B } = il(
+  setup(C, { emit: u }) {
+    const t = C, $ = u, { t: n } = Fe(), { search: U, filtered: g, noMatches: x, reset: D } = cl(
       () => t.items,
-      (w) => w.label
-    ), { content: K, contentStyle: _, onMenuChanged: D } = ul();
-    function G(w) {
-      w || B(), D(w);
+      (k) => k.label
+    ), { content: z, contentStyle: _, onMenuChanged: O } = ml();
+    function W(k) {
+      k || D(), O(k);
     }
-    return (w, W) => {
-      const X = U("FmSearch"), Z = U("FmMenuItem"), r = U("FmSelect");
-      return o(), F(r, {
-        items: w.items,
+    return (k, X) => {
+      const se = T("FmSearch"), ee = T("FmMenuItem"), j = T("FmSelect");
+      return o(), F(j, {
+        items: k.items,
         multiselect: "",
         "keep-selection-order": "",
-        "model-value": w.modelValue,
-        "onUpdate:modelValue": W[1] || (W[1] = (se) => L("update:modelValue", se ?? [])),
-        onDropdownChanged: G
-      }, Jt({
-        "menu-wrapper": A(({ handleItemChange: se }) => [
-          u("div", {
+        "model-value": k.modelValue,
+        "onUpdate:modelValue": X[1] || (X[1] = (m) => $("update:modelValue", m ?? [])),
+        onDropdownChanged: W
+      }, Zt({
+        "menu-wrapper": A(({ handleItemChange: m }) => [
+          i("div", {
             ref_key: "content",
-            ref: K,
+            ref: z,
             class: "shrink-0",
-            style: Qt(a(_))
+            style: el(a(_))
           }, [
-            w.items.length ? (o(), y("div", Cl, [
-              v(X, {
-                modelValue: a(R),
-                "onUpdate:modelValue": W[0] || (W[0] = (ee) => Zt(R) ? R.value = ee : null),
+            k.items.length ? (o(), f("div", $l, [
+              y(se, {
+                modelValue: a(U),
+                "onUpdate:modelValue": X[0] || (X[0] = (te) => tl(U) ? U.value = te : null),
                 autofocus: "",
                 placeholder: a(n)("menu.common.actions.search")
               }, null, 8, ["modelValue", "placeholder"])
             ])) : M("", !0),
-            (o(!0), y(Q, null, ie(a(g), (ee) => (o(), F(Z, {
-              key: ee.value,
-              label: ee.label,
+            (o(!0), f(Q, null, ue(a(g), (te) => (o(), F(ee, {
+              key: te.value,
+              label: te.label,
               "has-checkbox": "",
               class: "scroll-mt-56",
-              "data-checked": w.modelValue.includes(ee.value),
-              "model-value": w.modelValue.includes(ee.value),
-              "onUpdate:modelValue": (S) => se(S, ee)
+              "data-checked": k.modelValue.includes(te.value),
+              "model-value": k.modelValue.includes(te.value),
+              "onUpdate:modelValue": (V) => m(V, te)
             }, null, 8, ["label", "data-checked", "model-value", "onUpdate:modelValue"]))), 128)),
-            a(h) ? (o(), y("p", Fl, O(a(n)("menu.product.form.detail.category.no_results")), 1)) : M("", !0)
+            a(x) ? (o(), f("p", Sl, L(a(n)("menu.product.form.detail.category.no_results")), 1)) : M("", !0)
           ], 4)
         ]),
         _: 2
       }, [
-        w.$slots.default ? {
+        k.$slots.default ? {
           name: "default",
           fn: A(() => [
-            Ze(w.$slots, "default")
+            qe(k.$slots, "default")
           ]),
           key: "0"
         } : void 0
       ]), 1032, ["items", "model-value"]);
     };
   }
-}), Sl = { class: "flex items-center gap-8" }, Il = { class: "fm-typo-en-title-md-600" }, Vl = {
+}), Vl = { class: "flex items-center gap-8" }, Pl = { class: "fm-typo-en-title-md-600" }, Ll = {
   key: 0,
   class: "space-y-16"
-}, Pl = { class: "flex items-center gap-8" }, Ll = { class: "w-[72px] h-[72px] rounded-md border border-fm-color-neutral-gray-200 flex items-center justify-center overflow-hidden" }, El = ["src", "alt"], Ol = { class: "space-y-4" }, Ml = { class: "fm-typo-en-title-md-600" }, Ul = { class: "text-fm-color-typo-secondary" }, Al = { class: "flex" }, Rl = { class: "w-[260px] space-y-16" }, Tl = { class: "flex items-center gap-4 px-8" }, Dl = { class: "fm-typo-en-title-sm-600" }, jl = { class: "flex-1 min-w-0 overflow-x-auto" }, Nl = {
+}, El = { class: "flex items-center gap-8" }, Ol = { class: "w-[72px] h-[72px] rounded-md border border-fm-color-neutral-gray-200 flex items-center justify-center overflow-hidden" }, Ml = ["src", "alt"], Ul = { class: "space-y-4" }, Tl = { class: "fm-typo-en-title-md-600" }, Al = { class: "text-fm-color-typo-secondary" }, Rl = { class: "flex" }, Nl = { class: "w-[260px] space-y-16" }, jl = { class: "flex items-center gap-4 px-8" }, Dl = { class: "fm-typo-en-title-sm-600" }, zl = { class: "flex-1 min-w-0 overflow-x-auto" }, Bl = {
   key: 1,
   class: "p-24 text-fm-color-typo-secondary"
-}, zl = {
+}, Kl = {
   key: 2,
   class: "flex justify-center p-24"
-}, Bl = /* @__PURE__ */ $e({
+}, Gl = /* @__PURE__ */ he({
   __name: "ProductOverviewSheet",
   props: {
     modelValue: { type: Boolean },
     state: {}
   },
   emits: ["update:modelValue"],
-  setup(C, { emit: m }) {
-    const t = C, L = m, { t: n, n: R } = Se(), g = b(
+  setup(C, { emit: u }) {
+    const t = C, $ = u, { t: n, n: U } = Fe(), g = v(
       () => {
         var c;
         return ((c = t.state) == null ? void 0 : c.status) === "ready" ? t.state.value : null;
       }
-    ), h = b(() => {
+    ), x = v(() => {
       var c, p;
       return ((c = t.state) == null ? void 0 : c.status) === "error" ? n("menu.product.overview.read_error") : ((p = t.state) == null ? void 0 : p.status) === "unavailable" ? n("menu.product.overview.unavailable") : null;
-    }), B = b({
+    }), D = v({
       get: () => t.modelValue,
-      set: (c) => L("update:modelValue", c)
-    }), K = H("product"), _ = H(null);
-    ge(
+      set: (c) => $("update:modelValue", c)
+    }), z = Y("product"), _ = Y(null);
+    _e(
       () => {
         var c;
         return (c = g.value) == null ? void 0 : c.itemId;
       },
       () => {
-        _.value = null, K.value = "product";
+        _.value = null, z.value = "product";
       }
     );
-    const D = b(() => {
+    const O = v(() => {
       var c;
       return ((c = g.value) == null ? void 0 : c.scopes) ?? [];
-    }), G = b(
-      () => D.value.find(
+    }), W = v(
+      () => O.value.find(
         (c) => c.catalogId === _.value
-      ) ?? D.value[0]
-    ), w = b(
+      ) ?? O.value[0]
+    ), k = v(
       () => {
         var c;
         return (((c = g.value) == null ? void 0 : c.groupScopes) ?? []).find(
           (p) => p.catalogId === _.value
         );
       }
-    ), W = (c, p) => c === null ? n("menu.product.overview.master_product") : p;
-    function X(c, p) {
-      return c == null ? n("menu.common.labels.empty_value") : p ? R(c, {
+    ), X = (c, p) => c === null ? n("menu.product.overview.master_product") : p;
+    function se(c, p) {
+      return c == null ? n("menu.common.labels.empty_value") : p ? U(c, {
         style: "currency",
         currency: p,
         currencyDisplay: "narrowSymbol"
-      }) : R(c, { minimumFractionDigits: 2 });
+      }) : U(c, { minimumFractionDigits: 2 });
     }
-    const Z = b(
+    const ee = v(
       () => [
         {
           accessorKey: "schedulerLabel",
@@ -175,7 +222,7 @@ const Cl = {
           enableSorting: !1,
           cell: (c) => {
             const p = c.getValue();
-            return X((p == null ? void 0 : p.amount) ?? null, null);
+            return se((p == null ? void 0 : p.amount) ?? null, null);
           }
         },
         {
@@ -184,66 +231,66 @@ const Cl = {
           enableSorting: !1,
           cell: (c) => {
             const p = c.getValue();
-            return p === null ? n("menu.common.labels.empty_value") : V(
-              re.FmChip,
+            return p === null ? n("menu.common.labels.empty_value") : E(
+              pe.FmChip,
               { compact: !0, class: "fm-typo-en-body-md-600" },
-              () => n(Ne[p])
+              () => n(Ie[p])
             );
           }
         }
       ]
-    ), r = b({
+    ), j = v({
       get: () => _.value ?? "",
       set: (c) => {
         _.value = c || null;
       }
     });
-    ge(K, () => {
+    _e(z, () => {
       _.value = null;
     });
-    const se = b(
+    const m = v(
       () => {
         var c;
-        return K.value === "product" ? D.value.map((p) => ({
+        return z.value === "product" ? O.value.map((p) => ({
           value: p.catalogId ?? "",
-          label: W(p.catalogId, p.label),
+          label: X(p.catalogId, p.label),
           badge: p.badge,
           disabled: !p.linked
         })) : (((c = g.value) == null ? void 0 : c.groupScopes) ?? []).map((p) => ({
           value: p.catalogId ?? "",
-          label: W(p.catalogId, p.label),
+          label: X(p.catalogId, p.label),
           badge: p.groups.length,
           disabled: p.groups.length === 0
         }));
       }
-    ), ee = b(
+    ), te = v(
       () => {
         var c;
-        return (((c = w.value) == null ? void 0 : c.groups) ?? []).map((p) => ({
+        return (((c = k.value) == null ? void 0 : c.groups) ?? []).map((p) => ({
           groupName: p.groupName,
           subRows: [...p.rows]
         }));
       }
-    ), S = H({});
-    ge(
-      ee,
+    ), V = Y({});
+    _e(
+      te,
       (c) => {
-        S.value = Object.fromEntries(c.map((p, I) => [I, !0]));
+        V.value = Object.fromEntries(c.map((p, S) => [S, !0]));
       },
       { immediate: !0 }
     );
-    const J = b(() => [
+    const Z = v(() => [
       {
         accessorKey: "code",
         header: () => n("menu.product.table.columns.code"),
         enableSorting: !1,
-        cell: ({ row: c }) => c.original.subRows ? V(
+        cell: ({ row: c }) => c.original.subRows ? E(
           "div",
           {
             class: "flex items-center gap-2 fm-typo-en-body-md-600 text-fm-color-typo-secondary"
           },
           [
-            V(re.FmButton, {
+            E(pe.FmButton, {
               icon: "keyboard_arrow_up",
               variant: "tertiary",
               "aria-label": n("menu.product.overview.toggle_group", {
@@ -278,16 +325,16 @@ const Cl = {
           header: () => n("menu.product.form.variant.columns.price"),
           cell: ({ row: c }) => {
             var p;
-            return X((p = c.original.price) == null ? void 0 : p.amount, null);
+            return se((p = c.original.price) == null ? void 0 : p.amount, null);
           }
         },
         {
           accessorKey: "orderFrom",
           header: () => n("menu.product.table.columns.order_from"),
-          cell: ({ row: c }) => c.original.orderFrom ? V(
-            re.FmChip,
+          cell: ({ row: c }) => c.original.orderFrom ? E(
+            pe.FmChip,
             { compact: !0, class: "fm-typo-en-body-md-600" },
-            () => n(Ne[c.original.orderFrom])
+            () => n(Ie[c.original.orderFrom])
           ) : n("menu.common.labels.empty_value")
         }
       ].map((c) => ({
@@ -299,19 +346,19 @@ const Cl = {
       }))
     ]);
     return (c, p) => {
-      const I = U("FmCircularProgress"), $ = U("FmIcon"), N = U("FmTabs"), i = U("FmBadge"), f = U("FmCollapsibleTabs"), j = U("FmTable"), ae = U("FmSideSheet");
-      return o(), F(ae, {
-        modelValue: B.value,
-        "onUpdate:modelValue": p[3] || (p[3] = (z) => B.value = z),
+      const S = T("FmCircularProgress"), I = T("FmIcon"), B = T("FmTabs"), r = T("FmBadge"), b = T("FmCollapsibleTabs"), R = T("FmTable"), oe = T("FmSideSheet");
+      return o(), F(oe, {
+        modelValue: D.value,
+        "onUpdate:modelValue": p[3] || (p[3] = (K) => D.value = K),
         "max-width": 1200,
         "dismiss-away": ""
       }, {
         "side-sheet-header": A(() => {
-          var z;
+          var K;
           return [
-            u("div", Sl, [
-              u("p", Il, O(a(n)("menu.product.overview.title")), 1),
-              ((z = c.state) == null ? void 0 : z.status) === "ready" && c.state.stale ? (o(), F(I, {
+            i("div", Vl, [
+              i("p", Pl, L(a(n)("menu.product.overview.title")), 1),
+              ((K = c.state) == null ? void 0 : K.status) === "ready" && c.state.stale ? (o(), F(S, {
                 key: 0,
                 size: "md"
               })) : M("", !0)
@@ -319,95 +366,95 @@ const Cl = {
           ];
         }),
         default: A(() => {
-          var z, Y, x;
+          var K, J, w;
           return [
-            g.value ? (o(), y("div", Vl, [
-              u("div", Pl, [
-                u("div", Ll, [
-                  g.value.thumbnailUrl ? (o(), y("img", {
+            g.value ? (o(), f("div", Ll, [
+              i("div", El, [
+                i("div", Ol, [
+                  g.value.thumbnailUrl ? (o(), f("img", {
                     key: 0,
                     src: g.value.thumbnailUrl,
                     alt: g.value.name,
                     class: "w-full h-full object-cover"
-                  }, null, 8, El)) : (o(), F($, {
+                  }, null, 8, Ml)) : (o(), F(I, {
                     key: 1,
                     name: "image",
                     outline: "",
                     color: "neutral-gray-300"
                   }))
                 ]),
-                u("div", Ol, [
-                  u("p", Ml, O(g.value.code ? a(n)("menu.group.list.product_code_name", {
+                i("div", Ul, [
+                  i("p", Tl, L(g.value.code ? a(n)("menu.group.list.product_code_name", {
                     code: g.value.code,
                     name: g.value.name
                   }) : g.value.name), 1),
-                  u("p", Ul, O(a(n)("menu.common.labels.a11y_labelled_name", {
+                  i("p", Al, L(a(n)("menu.common.labels.a11y_labelled_name", {
                     label: a(n)("menu.product.overview.base_price"),
-                    name: X(
-                      ((z = g.value.basePrice) == null ? void 0 : z.amount) ?? null,
-                      ((Y = g.value.basePrice) == null ? void 0 : Y.currency) ?? null
+                    name: se(
+                      ((K = g.value.basePrice) == null ? void 0 : K.amount) ?? null,
+                      ((J = g.value.basePrice) == null ? void 0 : J.currency) ?? null
                     )
                   })), 1)
                 ])
               ]),
-              v(N, {
-                modelValue: K.value,
-                "onUpdate:modelValue": p[0] || (p[0] = (T) => K.value = T),
+              y(B, {
+                modelValue: z.value,
+                "onUpdate:modelValue": p[0] || (p[0] = (N) => z.value = N),
                 items: [
                   { value: "product", label: a(n)("menu.common.labels.product") },
                   { value: "group", label: a(n)("menu.group.title") }
                 ]
               }, null, 8, ["modelValue", "items"]),
-              u("div", Al, [
-                u("div", Rl, [
-                  u("div", Tl, [
-                    u("p", Dl, O(a(n)("menu.common.labels.catalog")), 1),
-                    v(i, {
+              i("div", Rl, [
+                i("div", Nl, [
+                  i("div", jl, [
+                    i("p", Dl, L(a(n)("menu.common.labels.catalog")), 1),
+                    y(r, {
                       inline: "",
                       variant: "neutral",
-                      value: K.value === "product" ? g.value.catalogCount : g.value.groupCount,
+                      value: z.value === "product" ? g.value.catalogCount : g.value.groupCount,
                       class: "!rounded-md !bg-fm-color-neutral-gray-100 !text-fm-color-typo-primary"
                     }, null, 8, ["value"])
                   ]),
-                  v(Ft, null, {
+                  y($t, null, {
                     default: A(() => [
-                      v(f, {
-                        modelValue: r.value,
-                        "onUpdate:modelValue": p[1] || (p[1] = (T) => r.value = T),
-                        items: se.value
+                      y(b, {
+                        modelValue: j.value,
+                        "onUpdate:modelValue": p[1] || (p[1] = (N) => j.value = N),
+                        items: m.value
                       }, null, 8, ["modelValue", "items"])
                     ]),
                     _: 1
                   })
                 ]),
-                p[4] || (p[4] = u("div", { class: "w-[1px] min-h-full ml-4 mr-12 bg-fm-color-neutral-gray-100 self-stretch" }, null, -1)),
-                u("div", jl, [
-                  K.value === "product" && G.value ? (o(), F(j, {
+                p[4] || (p[4] = i("div", { class: "w-[1px] min-h-full ml-4 mr-12 bg-fm-color-neutral-gray-100 self-stretch" }, null, -1)),
+                i("div", zl, [
+                  z.value === "product" && W.value ? (o(), F(R, {
                     key: 0,
-                    "column-defs": Z.value,
-                    "row-data": [...G.value.rows],
-                    "page-size": Math.max(G.value.rows.length, 1),
+                    "column-defs": ee.value,
+                    "row-data": [...W.value.rows],
+                    "page-size": Math.max(W.value.rows.length, 1),
                     "hide-footer": "",
                     "shrink-at": !1
-                  }, null, 8, ["column-defs", "row-data", "page-size"])) : K.value === "group" ? (o(), F(Ft, { key: 1 }, {
+                  }, null, 8, ["column-defs", "row-data", "page-size"])) : z.value === "group" ? (o(), F($t, { key: 1 }, {
                     default: A(() => [
-                      v(j, {
-                        "column-defs": J.value,
-                        "row-data": ee.value,
-                        "get-sub-row": (T) => T.subRows,
-                        "expanded-state": S.value,
+                      y(R, {
+                        "column-defs": Z.value,
+                        "row-data": te.value,
+                        "get-sub-row": (N) => N.subRows,
+                        "expanded-state": V.value,
                         "page-size": 1e6,
                         "hide-footer": "",
                         "shrink-at": !1,
-                        "onUpdate:expandedState": p[2] || (p[2] = (T) => S.value = T)
+                        "onUpdate:expandedState": p[2] || (p[2] = (N) => V.value = N)
                       }, null, 8, ["column-defs", "row-data", "get-sub-row", "expanded-state"])
                     ]),
                     _: 1
                   })) : M("", !0)
                 ])
               ])
-            ])) : h.value ? (o(), y("p", Nl, O(h.value), 1)) : ((x = c.state) == null ? void 0 : x.status) === "loading" ? (o(), y("div", zl, [
-              v(I, { size: "lg" })
+            ])) : x.value ? (o(), f("p", Bl, L(x.value), 1)) : ((w = c.state) == null ? void 0 : w.status) === "loading" ? (o(), f("div", Kl, [
+              y(S, { size: "lg" })
             ])) : M("", !0)
           ];
         }),
@@ -415,253 +462,253 @@ const Cl = {
       }, 8, ["modelValue"]);
     };
   }
-}), Kl = { class: "flex flex-col w-full h-full" }, Gl = {
+}), ql = { class: "flex flex-col w-full h-full" }, Hl = {
   key: 0,
   class: "mx-16 mb-8 flex items-center gap-8 rounded-lg bg-fm-color-system-info-100 p-16"
-}, ql = { class: "fm-typo-en-body-lg-400" }, Hl = { class: "fm-typo-en-body-lg-400" }, Wl = { class: "xs:overflow-x-auto xs:shrink-0" }, Xl = {
+}, Wl = { class: "fm-typo-en-body-lg-400" }, Xl = { class: "fm-typo-en-body-lg-400" }, Yl = { class: "xs:overflow-x-auto xs:shrink-0" }, Jl = {
   key: 1,
   class: "flex-1 flex overflow-hidden xs:flex-col"
-}, Yl = { class: "w-[300px] overflow-y-auto xs:w-full xs:max-h-[40%] xs:shrink-0 xs:border-b xs:border-fm-color-neutral-gray-200" }, Jl = { class: "flex min-w-0 w-full items-center gap-8" }, Ql = { class: "flex min-w-0 w-full items-center gap-8 pl-16" }, Zl = { class: "flex min-w-0 w-full items-center gap-8 pl-32" }, ea = { class: "flex-1 flex flex-col overflow-auto px-16 pb-16 pt-8 xs:px-0" }, ta = {
+}, Ql = { class: "w-[300px] overflow-y-auto xs:w-full xs:max-h-[40%] xs:shrink-0 xs:border-b xs:border-fm-color-neutral-gray-200" }, Zl = { class: "flex min-w-0 w-full items-center gap-8" }, ea = { class: "flex min-w-0 w-full items-center gap-8 pl-16" }, ta = { class: "flex min-w-0 w-full items-center gap-8 pl-32" }, la = { class: "flex-1 flex flex-col overflow-auto px-16 pb-16 pt-8 xs:px-0" }, aa = {
   key: 0,
   class: "border border-fm-color-neutral-gray-200 fm-corner-radius-md p-16"
-}, la = { class: "flex items-center gap-8 pb-8" }, aa = { class: "fm-typo-en-title-sm-600" }, oa = { class: "fm-typo-en-title-sm-600 pb-8" }, na = {
+}, oa = { class: "flex items-center gap-8 pb-8" }, na = { class: "fm-typo-en-title-sm-600" }, sa = { class: "fm-typo-en-title-sm-600 pb-8" }, ra = {
   key: 2,
   class: "mt-8 px-16 fm-typo-en-body-lg-600"
-}, Vt = "line-clamp-2 w-full xs:!line-clamp-none", sa = /* @__PURE__ */ $e({
+}, Lt = "line-clamp-2 w-full xs:!line-clamp-none", ia = /* @__PURE__ */ he({
   __name: "ImportDiffPreview",
   props: {
     show: { type: Boolean },
     diff: {}
   },
   emits: ["confirm", "cancel"],
-  setup(C, { emit: m }) {
-    var $, N;
-    const t = C, L = m, { t: n, n: R } = Se(), g = H(((N = ($ = t.diff) == null ? void 0 : $.tabs[0]) == null ? void 0 : N.id) ?? "product"), h = H(null), B = H(/* @__PURE__ */ new Set());
-    function K(i) {
-      const f = new Set(B.value);
-      f.has(i) ? f.delete(i) : f.add(i), B.value = f;
+  setup(C, { emit: u }) {
+    var I, B;
+    const t = C, $ = u, { t: n, n: U } = Fe(), g = Y(((B = (I = t.diff) == null ? void 0 : I.tabs[0]) == null ? void 0 : B.id) ?? "product"), x = Y(null), D = Y(/* @__PURE__ */ new Set());
+    function z(r) {
+      const b = new Set(D.value);
+      b.has(r) ? b.delete(r) : b.add(r), D.value = b;
     }
-    const _ = b(
+    const _ = v(
       () => {
-        var i;
-        return (((i = t.diff) == null ? void 0 : i.tabs) ?? []).map((f) => ({
-          value: f.id,
-          label: n(`menu.import_export.diff.tabs.${f.id}`)
+        var r;
+        return (((r = t.diff) == null ? void 0 : r.tabs) ?? []).map((b) => ({
+          value: b.id,
+          label: n(`menu.import_export.diff.tabs.${b.id}`)
         }));
       }
-    ), D = b(
+    ), O = v(
       () => {
-        var i;
-        return ((i = t.diff) == null ? void 0 : i.tabs.find((f) => f.id === g.value)) ?? null;
+        var r;
+        return ((r = t.diff) == null ? void 0 : r.tabs.find((b) => b.id === g.value)) ?? null;
       }
-    ), G = b(() => {
-      var i;
-      return ((i = D.value) == null ? void 0 : i.entities) ?? [];
-    }), w = b(
-      () => G.value.find((i) => i.key === h.value) ?? null
+    ), W = v(() => {
+      var r;
+      return ((r = O.value) == null ? void 0 : r.entities) ?? [];
+    }), k = v(
+      () => W.value.find((r) => r.key === x.value) ?? null
     );
-    ge(
-      [g, G],
+    _e(
+      [g, W],
       () => {
-        var i;
-        G.value.some((f) => f.key === h.value) || (h.value = ((i = G.value[0]) == null ? void 0 : i.key) ?? null);
+        var r;
+        W.value.some((b) => b.key === x.value) || (x.value = ((r = W.value[0]) == null ? void 0 : r.key) ?? null);
       },
       { immediate: !0 }
     );
-    const W = b(
+    const X = v(
       () => {
-        var i;
-        return (((i = D.value) == null ? void 0 : i.groups) ?? []).map((f) => {
-          const j = G.value.find((x) => x.isHeading && x.groupId === f.id) ?? null, ae = G.value.filter(
-            (x) => x.groupId === f.id && !x.isHeading
-          ), z = [], Y = /* @__PURE__ */ new Map();
-          for (const x of ae)
-            Y.has(x.id) || (Y.set(x.id, []), z.push(x.id)), Y.get(x.id).push(x);
+        var r;
+        return (((r = O.value) == null ? void 0 : r.groups) ?? []).map((b) => {
+          const R = W.value.find((w) => w.isHeading && w.groupId === b.id) ?? null, oe = W.value.filter(
+            (w) => w.groupId === b.id && !w.isHeading
+          ), K = [], J = /* @__PURE__ */ new Map();
+          for (const w of oe)
+            J.has(w.id) || (J.set(w.id, []), K.push(w.id)), J.get(w.id).push(w);
           return {
-            ...f,
-            heading: j,
-            products: z.map((x) => {
-              const T = Y.get(x), te = T.find((ue) => ue.variantName === null);
+            ...b,
+            heading: R,
+            products: K.map((w) => {
+              const N = J.get(w), le = N.find((G) => G.variantName === null);
               return {
-                id: x,
-                name: T[0].name,
-                base: te ?? null,
-                variants: T.filter((ue) => ue.variantName !== null)
+                id: w,
+                name: N[0].name,
+                base: le ?? null,
+                variants: N.filter((G) => G.variantName !== null)
               };
             })
           };
         });
       }
-    ), X = {
+    ), se = {
       ADDON: "menu.import_export.diff.groups.addon",
       takeaway: "menu.import_export.diff.tabs.takeaway",
       addonGroup: "menu.import_export.diff.tabs.addonGroup",
       category: "menu.import_export.diff.tabs.category",
       subcategory: "menu.import_export.diff.tabs.subcategory"
     };
-    function Z(i) {
-      if (i.name !== null) return i.name;
-      const f = X[i.id];
-      return f ? n(f) : i.id;
+    function ee(r) {
+      if (r.name !== null) return r.name;
+      const b = se[r.id];
+      return b ? n(b) : r.id;
     }
-    function r(i) {
-      switch (i.kind) {
+    function j(r) {
+      switch (r.kind) {
         case "money":
-          return R(i.amount / 10 ** i.precision, {
-            minimumFractionDigits: i.precision,
-            maximumFractionDigits: i.precision
+          return U(r.amount / 10 ** r.precision, {
+            minimumFractionDigits: r.precision,
+            maximumFractionDigits: r.precision
           });
         case "moneyList":
-          return `[${i.items.map(
-            (f) => R(f.amount / 10 ** f.precision, {
-              minimumFractionDigits: f.precision,
-              maximumFractionDigits: f.precision
+          return `[${r.items.map(
+            (b) => U(b.amount / 10 ** b.precision, {
+              minimumFractionDigits: b.precision,
+              maximumFractionDigits: b.precision
             })
           ).join(", ")}]`;
         case "statutoryCharges":
-          return i.charges.map((f) => `${f.code} × ${R(f.unitCount)}`).join(", ");
+          return r.charges.map((b) => `${b.code} × ${U(b.unitCount)}`).join(", ");
         case "absent":
           return n("menu.import_export.diff.values.absent");
         case "followDefault":
           return n("menu.import_export.diff.values.follow_default");
         default:
-          return i.text;
+          return r.text;
       }
     }
-    function se(i, f) {
-      const j = i.cells[f];
-      return j ? j.before === null ? r(j.after) : `${r(j.before)} > ${r(j.after)}` : n("menu.import_export.diff.values.no_change");
+    function m(r, b) {
+      const R = r.cells[b];
+      return R ? R.before === null ? j(R.after) : `${j(R.before)} > ${j(R.after)}` : n("menu.import_export.diff.values.no_change");
     }
-    const ee = b(
+    const te = v(
       () => {
-        var i, f;
-        return (((i = w.value) == null ? void 0 : i.columns) ?? ((f = D.value) == null ? void 0 : f.columns) ?? []).map(
-          (j) => j.id === "default" && j.name === null ? {
-            id: j.id,
+        var r, b;
+        return (((r = k.value) == null ? void 0 : r.columns) ?? ((b = O.value) == null ? void 0 : b.columns) ?? []).map(
+          (R) => R.id === "default" && R.name === null ? {
+            id: R.id,
             header: () => n("menu.import_export.diff.columns.default"),
-            cell: (ae) => se(ae.row.original, j.id),
+            cell: (oe) => m(oe.row.original, R.id),
             // Legacy's 300px floor (`PreviewProduct2.vue:96`) is wider than
             // the table's whole card on a phone, where it wrapped every long
             // value at 300px and left the end of each line off screen. Below
             // `xs` the column takes the width the card has instead.
             meta: {
               headerClass: "min-w-[300px] xs:min-w-0",
-              cellSpanClass: Vt
+              cellSpanClass: Lt
             }
           } : {
-            id: j.id,
-            header: () => j.name ?? "",
-            cell: (ae) => se(ae.row.original, j.id),
-            meta: { cellSpanClass: Vt }
+            id: R.id,
+            header: () => R.name ?? "",
+            cell: (oe) => m(oe.row.original, R.id),
+            meta: { cellSpanClass: Lt }
           }
         );
       }
-    ), S = b(() => [
+    ), V = v(() => [
       {
         id: "field",
         header: () => n("menu.import_export.diff.columns.field"),
-        cell: (i) => i.row.original.field
+        cell: (r) => r.row.original.field
       },
-      ...ee.value
-    ]), J = (i) => i ? "T" : "F", c = [
+      ...te.value
+    ]), Z = (r) => r ? "T" : "F", c = [
       {
         id: "product",
         header: () => n("menu.group.list.columns.products"),
-        cell: (i) => i.row.original.name
+        cell: (r) => r.row.original.name
       },
       {
         id: "linked",
         header: () => n("menu.import_export.diff.columns.default"),
-        cell: (i) => {
-          const f = i.row.original;
-          return `${J(f.before)} > ${J(f.after)}`;
+        cell: (r) => {
+          const b = r.row.original;
+          return `${Z(b.before)} > ${Z(b.after)}`;
         }
       }
-    ], p = b(() => {
-      var i;
+    ], p = v(() => {
+      var r;
       return [
-        ...((i = w.value) == null ? void 0 : i.linkedProducts) ?? []
+        ...((r = k.value) == null ? void 0 : r.linkedProducts) ?? []
       ];
-    }), I = b(
+    }), S = v(
       () => n("menu.import_export.diff.empty", {
         tab: n(`menu.import_export.diff.tabs.${g.value}`)
       })
     );
-    return (i, f) => {
-      const j = U("FmIcon"), ae = U("FmTabs"), z = U("FmChip"), Y = U("FmListItem"), x = U("FmList"), T = U("FmTable");
+    return (r, b) => {
+      const R = T("FmIcon"), oe = T("FmTabs"), K = T("FmChip"), J = T("FmListItem"), w = T("FmList"), N = T("FmTable");
       return o(), F(He, {
-        show: i.show,
+        show: r.show,
         title: a(n)("menu.import_export.diff.title"),
         "primary-action": { label: a(n)("menu.import_export.preview.actions.confirm") },
         "secondary-actions": [
           {
             label: a(n)("menu.import_export.preview.actions.cancel"),
-            click: () => L("cancel")
+            click: () => $("cancel")
           }
         ],
-        onOnPrimary: f[1] || (f[1] = (te) => L("confirm")),
-        onOnCancel: f[2] || (f[2] = (te) => L("cancel"))
+        onOnPrimary: b[1] || (b[1] = (le) => $("confirm")),
+        onOnCancel: b[2] || (b[2] = (le) => $("cancel"))
       }, {
         default: A(() => {
-          var te, ue;
+          var le, G;
           return [
-            u("div", Kl, [
-              (te = i.diff) != null && te.newCatalogs.length ? (o(), y("div", Gl, [
-                v(j, {
+            i("div", ql, [
+              (le = r.diff) != null && le.newCatalogs.length ? (o(), f("div", Hl, [
+                y(R, {
                   name: "info",
                   color: "system-info-300"
                 }),
-                u("div", null, [
-                  u("p", ql, O(a(n)("menu.import_export.diff.new_catalogs")), 1),
-                  u("ul", Hl, [
-                    (o(!0), y(Q, null, ie(i.diff.newCatalogs, (E) => (o(), y("li", {
-                      key: E.id
-                    }, O(E.name), 1))), 128))
+                i("div", null, [
+                  i("p", Wl, L(a(n)("menu.import_export.diff.new_catalogs")), 1),
+                  i("ul", Xl, [
+                    (o(!0), f(Q, null, ue(r.diff.newCatalogs, (q) => (o(), f("li", {
+                      key: q.id
+                    }, L(q.name), 1))), 128))
                   ])
                 ])
               ])) : M("", !0),
-              u("div", Wl, [
-                v(ae, {
+              i("div", Yl, [
+                y(oe, {
                   "model-value": g.value,
                   items: _.value,
-                  "onUpdate:modelValue": f[0] || (f[0] = (E) => g.value = E)
+                  "onUpdate:modelValue": b[0] || (b[0] = (q) => g.value = q)
                 }, null, 8, ["model-value", "items"])
               ]),
-              G.value.length ? (o(), y("div", Xl, [
-                u("div", Yl, [
-                  v(x, null, {
+              W.value.length ? (o(), f("div", Jl, [
+                i("div", Ql, [
+                  y(w, null, {
                     default: A(() => [
-                      (o(!0), y(Q, null, ie(W.value, (E) => (o(), y(Q, {
-                        key: E.id
+                      (o(!0), f(Q, null, ue(X.value, (q) => (o(), f(Q, {
+                        key: q.id
                       }, [
-                        v(Y, {
-                          "data-testid": `import-diff-heading-${E.id}`,
-                          onClick: (q) => E.heading && !E.heading.isDeleted ? h.value = E.heading.key : void 0
+                        y(J, {
+                          "data-testid": `import-diff-heading-${q.id}`,
+                          onClick: (H) => q.heading && !q.heading.isDeleted ? x.value = q.heading.key : void 0
                         }, {
                           default: A(() => {
-                            var q, he, ne;
+                            var H, xe, re;
                             return [
-                              u("span", Jl, [
-                                v(j, {
+                              i("span", Zl, [
+                                y(R, {
                                   name: "keyboard_arrow_down",
                                   size: "sm"
                                 }),
-                                u("span", {
-                                  class: _e(["fm-typo-en-body-lg-400 truncate", {
-                                    "text-fm-color-typo-disabled": (q = E.heading) == null ? void 0 : q.isDeleted
+                                i("span", {
+                                  class: fe(["fm-typo-en-body-lg-400 truncate", {
+                                    "text-fm-color-typo-disabled": (H = q.heading) == null ? void 0 : H.isDeleted
                                   }])
-                                }, O(Z(E)), 3),
-                                (he = E.heading) != null && he.isDeleted ? (o(), F(z, {
+                                }, L(ee(q)), 3),
+                                (xe = q.heading) != null && xe.isDeleted ? (o(), F(K, {
                                   key: 0,
                                   label: a(n)("menu.import_export.diff.deleted"),
                                   variant: "critical",
                                   class: "ml-auto"
-                                }, null, 8, ["label"])) : (ne = E.heading) != null && ne.isCreate ? (o(), F(z, {
+                                }, null, 8, ["label"])) : (re = q.heading) != null && re.isCreate ? (o(), F(K, {
                                   key: 1,
                                   label: a(n)("menu.import_export.diff.created"),
                                   variant: "success",
                                   class: "ml-auto"
-                                }, null, 8, ["label"])) : E.heading ? (o(), F(z, {
+                                }, null, 8, ["label"])) : q.heading ? (o(), F(K, {
                                   key: 2,
                                   label: a(n)("menu.import_export.diff.updated"),
                                   variant: "neutral",
@@ -672,35 +719,35 @@ const Cl = {
                           }),
                           _: 2
                         }, 1032, ["data-testid", "onClick"]),
-                        (o(!0), y(Q, null, ie(E.products, (q) => {
-                          var he;
-                          return o(), y(Q, {
-                            key: q.id
+                        (o(!0), f(Q, null, ue(q.products, (H) => {
+                          var xe;
+                          return o(), f(Q, {
+                            key: H.id
                           }, [
-                            v(Y, {
-                              "data-testid": `import-diff-entry-${((he = q.base) == null ? void 0 : he.key) ?? `${E.id}/${q.id}`}`,
-                              onClick: (ne) => q.base ? h.value = q.base.key : K(q.id)
+                            y(J, {
+                              "data-testid": `import-diff-entry-${((xe = H.base) == null ? void 0 : xe.key) ?? `${q.id}/${H.id}`}`,
+                              onClick: (re) => H.base ? x.value = H.base.key : z(H.id)
                             }, {
                               default: A(() => {
-                                var ne, Pe, Ce;
+                                var re, Ve, je;
                                 return [
-                                  u("span", Ql, [
-                                    v(j, {
-                                      name: q.variants.length ? "keyboard_arrow_down" : "subdirectory_arrow_right",
+                                  i("span", ea, [
+                                    y(R, {
+                                      name: H.variants.length ? "keyboard_arrow_down" : "subdirectory_arrow_right",
                                       size: "sm",
-                                      onClick: we((et) => q.variants.length ? K(q.id) : void 0, ["stop"])
+                                      onClick: $e((Pe) => H.variants.length ? z(H.id) : void 0, ["stop"])
                                     }, null, 8, ["name", "onClick"]),
-                                    u("span", {
-                                      class: _e(["fm-typo-en-body-lg-400 truncate", {
-                                        "text-fm-color-typo-disabled": (ne = q.base) == null ? void 0 : ne.isDeleted
+                                    i("span", {
+                                      class: fe(["fm-typo-en-body-lg-400 truncate", {
+                                        "text-fm-color-typo-disabled": (re = H.base) == null ? void 0 : re.isDeleted
                                       }])
-                                    }, O(q.name), 3),
-                                    (Pe = q.base) != null && Pe.isDeleted ? (o(), F(z, {
+                                    }, L(H.name), 3),
+                                    (Ve = H.base) != null && Ve.isDeleted ? (o(), F(K, {
                                       key: 0,
                                       label: a(n)("menu.import_export.diff.deleted"),
                                       variant: "critical",
                                       class: "ml-auto"
-                                    }, null, 8, ["label"])) : (Ce = q.base) != null && Ce.isCreate ? (o(), F(z, {
+                                    }, null, 8, ["label"])) : (je = H.base) != null && je.isCreate ? (o(), F(K, {
                                       key: 1,
                                       label: a(n)("menu.import_export.diff.created"),
                                       variant: "success",
@@ -711,24 +758,24 @@ const Cl = {
                               }),
                               _: 2
                             }, 1032, ["data-testid", "onClick"]),
-                            (o(!0), y(Q, null, ie(B.value.has(q.id) ? q.variants : [], (ne) => (o(), F(Y, {
-                              key: ne.key,
-                              "data-testid": `import-diff-entry-${ne.key}`,
-                              onClick: (Pe) => h.value = ne.key
+                            (o(!0), f(Q, null, ue(D.value.has(H.id) ? H.variants : [], (re) => (o(), F(J, {
+                              key: re.key,
+                              "data-testid": `import-diff-entry-${re.key}`,
+                              onClick: (Ve) => x.value = re.key
                             }, {
                               default: A(() => [
-                                u("span", Zl, [
-                                  u("span", {
-                                    class: _e(["fm-typo-en-body-lg-400 truncate", {
-                                      "text-fm-color-typo-disabled": ne.isDeleted
+                                i("span", ta, [
+                                  i("span", {
+                                    class: fe(["fm-typo-en-body-lg-400 truncate", {
+                                      "text-fm-color-typo-disabled": re.isDeleted
                                     }])
-                                  }, O(ne.variantName), 3),
-                                  ne.isDeleted ? (o(), F(z, {
+                                  }, L(re.variantName), 3),
+                                  re.isDeleted ? (o(), F(K, {
                                     key: 0,
                                     label: a(n)("menu.import_export.diff.deleted"),
                                     variant: "critical",
                                     class: "ml-auto"
-                                  }, null, 8, ["label"])) : ne.isCreate ? (o(), F(z, {
+                                  }, null, 8, ["label"])) : re.isCreate ? (o(), F(K, {
                                     key: 1,
                                     label: a(n)("menu.import_export.diff.created"),
                                     variant: "success",
@@ -745,39 +792,39 @@ const Cl = {
                     _: 1
                   })
                 ]),
-                u("div", ea, [
-                  w.value && (!w.value.isHeading || w.value.changes.length) ? (o(), y("div", ta, [
-                    u("div", la, [
-                      u("p", aa, O(w.value.variantName ?? w.value.name), 1),
-                      w.value.isDeleted ? (o(), F(z, {
+                i("div", la, [
+                  k.value && (!k.value.isHeading || k.value.changes.length) ? (o(), f("div", aa, [
+                    i("div", oa, [
+                      i("p", na, L(k.value.variantName ?? k.value.name), 1),
+                      k.value.isDeleted ? (o(), F(K, {
                         key: 0,
                         "data-testid": "import-diff-selected-deleted",
                         label: a(n)("menu.import_export.diff.deleted"),
                         variant: "critical"
-                      }, null, 8, ["label"])) : w.value.isCreate ? (o(), F(z, {
+                      }, null, 8, ["label"])) : k.value.isCreate ? (o(), F(K, {
                         key: 1,
                         "data-testid": "import-diff-selected-created",
                         label: a(n)("menu.import_export.diff.created"),
                         variant: "success"
                       }, null, 8, ["label"])) : M("", !0)
                     ]),
-                    v(T, {
-                      "column-defs": S.value,
-                      "row-data": [...w.value.changes],
+                    y(N, {
+                      "column-defs": V.value,
+                      "row-data": [...k.value.changes],
                       "hide-footer": "",
                       "shrink-at": !1,
-                      "page-size": w.value.changes.length || 1
+                      "page-size": k.value.changes.length || 1
                     }, null, 8, ["column-defs", "row-data", "page-size"])
                   ])) : M("", !0),
-                  p.value.length ? (o(), y("div", {
+                  p.value.length ? (o(), f("div", {
                     key: 1,
                     "data-testid": "import-diff-linked-products",
-                    class: _e(["border border-fm-color-neutral-gray-200 fm-corner-radius-md p-16", { "mt-16": (ue = w.value) == null ? void 0 : ue.changes.length }])
+                    class: fe(["border border-fm-color-neutral-gray-200 fm-corner-radius-md p-16", { "mt-16": (G = k.value) == null ? void 0 : G.changes.length }])
                   }, [
-                    u("p", oa, O(a(n)("menu.group.list.products_linked", {
+                    i("p", sa, L(a(n)("menu.group.list.products_linked", {
                       count: p.value.length
                     })), 1),
-                    v(T, {
+                    y(N, {
                       "column-defs": c,
                       "row-data": p.value,
                       "hide-footer": "",
@@ -786,7 +833,7 @@ const Cl = {
                     }, null, 8, ["row-data", "page-size"])
                   ], 2)) : M("", !0)
                 ])
-              ])) : (o(), y("p", na, O(I.value), 1))
+              ])) : (o(), f("p", ra, L(S.value), 1))
             ])
           ];
         }),
@@ -794,89 +841,89 @@ const Cl = {
       }, 8, ["show", "title", "primary-action", "secondary-actions"]);
     };
   }
-}), ra = new RegExp("([\\p{Ll}\\d])(\\p{Lu})", "gu"), ia = new RegExp("(\\p{Lu})([\\p{Lu}][\\p{Ll}])", "gu"), ua = new RegExp("(\\d)\\p{Ll}|(\\p{L})\\d", "u"), ca = /[^\p{L}\d]+/giu, Pt = "$1\0$2", Lt = "";
-function Ut(C) {
-  let m = C.trim();
-  m = m.replace(ra, Pt).replace(ia, Pt), m = m.replace(ca, "\0");
-  let t = 0, L = m.length;
-  for (; m.charAt(t) === "\0"; )
+}), ua = new RegExp("([\\p{Ll}\\d])(\\p{Lu})", "gu"), ca = new RegExp("(\\p{Lu})([\\p{Lu}][\\p{Ll}])", "gu"), ma = new RegExp("(\\d)\\p{Ll}|(\\p{L})\\d", "u"), da = /[^\p{L}\d]+/giu, Et = "$1\0$2", Ot = "";
+function At(C) {
+  let u = C.trim();
+  u = u.replace(ua, Et).replace(ca, Et), u = u.replace(da, "\0");
+  let t = 0, $ = u.length;
+  for (; u.charAt(t) === "\0"; )
     t++;
-  if (t === L)
+  if (t === $)
     return [];
-  for (; m.charAt(L - 1) === "\0"; )
-    L--;
-  return m.slice(t, L).split(/\0/g);
+  for (; u.charAt($ - 1) === "\0"; )
+    $--;
+  return u.slice(t, $).split(/\0/g);
 }
-function ma(C) {
-  const m = Ut(C);
-  for (let t = 0; t < m.length; t++) {
-    const L = m[t], n = ua.exec(L);
+function pa(C) {
+  const u = At(C);
+  for (let t = 0; t < u.length; t++) {
+    const $ = u[t], n = ma.exec($);
     if (n) {
-      const R = n.index + (n[1] ?? n[2]).length;
-      m.splice(t, 1, L.slice(0, R), L.slice(R));
+      const U = n.index + (n[1] ?? n[2]).length;
+      u.splice(t, 1, $.slice(0, U), $.slice(U));
     }
   }
-  return m;
+  return u;
 }
-function da(C, m) {
-  const [t, L, n] = ba(C, m), R = pa(m == null ? void 0 : m.locale), g = va(m == null ? void 0 : m.locale), h = fa(R, g);
-  return t + L.map((B, K) => K === 0 ? h(B) : R(B)).join((m == null ? void 0 : m.delimiter) ?? " ") + n;
+function va(C, u) {
+  const [t, $, n] = ga(C, u), U = fa(u == null ? void 0 : u.locale), g = ba(u == null ? void 0 : u.locale), x = ya(U, g);
+  return t + $.map((D, z) => z === 0 ? x(D) : U(D)).join((u == null ? void 0 : u.delimiter) ?? " ") + n;
 }
-function pa(C) {
-  return C === !1 ? (m) => m.toLowerCase() : (m) => m.toLocaleLowerCase(C);
+function fa(C) {
+  return C === !1 ? (u) => u.toLowerCase() : (u) => u.toLocaleLowerCase(C);
 }
-function va(C) {
-  return C === !1 ? (m) => m.toUpperCase() : (m) => m.toLocaleUpperCase(C);
+function ba(C) {
+  return C === !1 ? (u) => u.toUpperCase() : (u) => u.toLocaleUpperCase(C);
 }
-function fa(C, m) {
-  return (t) => `${m(t[0])}${C(t.slice(1))}`;
+function ya(C, u) {
+  return (t) => `${u(t[0])}${C(t.slice(1))}`;
 }
-function ba(C, m = {}) {
-  const t = m.split ?? (m.separateNumbers ? ma : Ut), L = m.prefixCharacters ?? Lt, n = m.suffixCharacters ?? Lt;
-  let R = 0, g = C.length;
-  for (; R < C.length; ) {
-    const h = C.charAt(R);
-    if (!L.includes(h))
+function ga(C, u = {}) {
+  const t = u.split ?? (u.separateNumbers ? pa : At), $ = u.prefixCharacters ?? Ot, n = u.suffixCharacters ?? Ot;
+  let U = 0, g = C.length;
+  for (; U < C.length; ) {
+    const x = C.charAt(U);
+    if (!$.includes(x))
       break;
-    R++;
+    U++;
   }
-  for (; g > R; ) {
-    const h = g - 1, B = C.charAt(h);
-    if (!n.includes(B))
+  for (; g > U; ) {
+    const x = g - 1, D = C.charAt(x);
+    if (!n.includes(D))
       break;
-    g = h;
+    g = x;
   }
   return [
-    C.slice(0, R),
-    t(C.slice(R, g)),
+    C.slice(0, U),
+    t(C.slice(U, g)),
     C.slice(g)
   ];
 }
-const ya = { class: "py-16 flex flex-col w-full h-full" }, ga = { class: "border border-fm-color-neutral-gray-100 p-16 fm-corner-radius-md" }, _a = { class: "w-[160px]" }, ha = { class: "flex-1" }, ka = { class: "truncate" }, xa = { class: "flex-1" }, wa = { class: "truncate" }, Ca = { key: 1 }, Fa = /* @__PURE__ */ $e({
+const _a = { class: "py-16 flex flex-col w-full h-full" }, ha = { class: "border border-fm-color-neutral-gray-100 p-16 fm-corner-radius-md" }, xa = { class: "w-[160px]" }, ka = { class: "flex-1" }, wa = { class: "truncate" }, Ca = { class: "flex-1" }, Fa = { class: "truncate" }, $a = { key: 1 }, Sa = /* @__PURE__ */ he({
   __name: "ImportV3DiffPreview",
   props: {
     show: { type: Boolean },
     diff: {}
   },
   emits: ["confirm", "cancel"],
-  setup(C, { emit: m }) {
-    const t = C, L = m, { t: n } = Se(), R = H(""), g = b(() => t.diff ?? []);
-    function h(_) {
+  setup(C, { emit: u }) {
+    const t = C, $ = u, { t: n } = Fe(), U = Y(""), g = v(() => t.diff ?? []);
+    function x(_) {
       return `${_.code} ${_.name}`.trim();
     }
-    const B = b(
+    const D = v(
       () => g.value.filter(
         (_) => [
-          h(_),
-          ..._.fields.flatMap((D) => [D.before, D.after])
-        ].join(" ").toLowerCase().includes(R.value.toLowerCase())
+          x(_),
+          ..._.fields.flatMap((O) => [O.before, O.after])
+        ].join(" ").toLowerCase().includes(U.value.toLowerCase())
       )
     );
-    function K(_) {
+    function z(_) {
       return _ || n("menu.import_export.v3_diff.empty_cell");
     }
-    return (_, D) => {
-      const G = U("FmSearch");
+    return (_, O) => {
+      const W = T("FmSearch");
       return o(), F(He, {
         show: _.show,
         title: a(n)("menu.import_export.v3_diff.title"),
@@ -884,48 +931,48 @@ const ya = { class: "py-16 flex flex-col w-full h-full" }, ga = { class: "border
         "secondary-actions": [
           {
             label: a(n)("menu.import_export.preview.actions.cancel"),
-            click: () => L("cancel")
+            click: () => $("cancel")
           }
         ],
-        onOnPrimary: D[1] || (D[1] = (w) => L("confirm")),
-        onOnCancel: D[2] || (D[2] = (w) => L("cancel"))
+        onOnPrimary: O[1] || (O[1] = (k) => $("confirm")),
+        onOnCancel: O[2] || (O[2] = (k) => $("cancel"))
       }, {
         default: A(() => [
-          u("div", ya, [
-            v(kl, {
+          i("div", _a, [
+            y(xl, {
               title: a(n)("menu.import_export.v3_diff.section")
             }, {
               "append-title": A(() => [
-                v(G, {
-                  modelValue: R.value,
-                  "onUpdate:modelValue": D[0] || (D[0] = (w) => R.value = w)
+                y(W, {
+                  modelValue: U.value,
+                  "onUpdate:modelValue": O[0] || (O[0] = (k) => U.value = k)
                 }, null, 8, ["modelValue"])
               ]),
               default: A(() => [
-                g.value.length > 0 ? (o(!0), y(Q, { key: 0 }, ie(B.value, (w) => (o(), F(hl, {
-                  key: `${w.id}/${w.variantKey}`,
-                  label: h(w)
+                g.value.length > 0 ? (o(!0), f(Q, { key: 0 }, ue(D.value, (k) => (o(), F(hl, {
+                  key: `${k.id}/${k.variantKey}`,
+                  label: x(k)
                 }, {
                   default: A(() => [
-                    u("div", ga, [
-                      (o(!0), y(Q, null, ie(w.fields, (W, X) => (o(), y("div", {
-                        key: W.key,
-                        class: _e(["flex items-center gap-8", { "mb-8": X < w.fields.length - 1 }])
+                    i("div", ha, [
+                      (o(!0), f(Q, null, ue(k.fields, (X, se) => (o(), f("div", {
+                        key: X.key,
+                        class: fe(["flex items-center gap-8", { "mb-8": se < k.fields.length - 1 }])
                       }, [
-                        u("div", _a, O(a(da)(W.key)), 1),
-                        u("div", ha, [
-                          u("div", ka, [
-                            v(St, {
+                        i("div", xa, L(a(va)(X.key)), 1),
+                        i("div", ka, [
+                          i("div", wa, [
+                            y(Vt, {
                               variant: "error",
-                              label: K(W.before)
+                              label: z(X.before)
                             }, null, 8, ["label"])
                           ])
                         ]),
-                        u("div", xa, [
-                          u("div", wa, [
-                            v(St, {
+                        i("div", Ca, [
+                          i("div", Fa, [
+                            y(Vt, {
                               variant: "success",
-                              label: K(W.after)
+                              label: z(X.after)
                             }, null, 8, ["label"])
                           ])
                         ])
@@ -933,7 +980,7 @@ const ya = { class: "py-16 flex flex-col w-full h-full" }, ga = { class: "border
                     ])
                   ]),
                   _: 2
-                }, 1032, ["label"]))), 128)) : (o(), y("div", Ca, O(a(n)("menu.import_export.v3_diff.empty")), 1))
+                }, 1032, ["label"]))), 128)) : (o(), f("div", $a, L(a(n)("menu.import_export.v3_diff.empty")), 1))
               ]),
               _: 1
             }, 8, ["title"])
@@ -943,7 +990,7 @@ const ya = { class: "py-16 flex flex-col w-full h-full" }, ga = { class: "border
       }, 8, ["show", "title", "primary-action", "secondary-actions"]);
     };
   }
-}), $a = { class: "flex flex-col w-full h-full" }, Sa = { class: "flex-1 flex overflow-hidden" }, Ia = { class: "w-[150px] overflow-y-auto my-8" }, Va = { class: "fm-typo-en-body-lg-400 truncate" }, Pa = { class: "fm-typo-en-body-lg-400 truncate" }, La = { class: "fm-typo-en-body-lg-400 truncate" }, Ea = { class: "flex-1 flex flex-col overflow-auto p-16" }, Oa = { class: "fm-typo-en-title-sm-600 mb-16" }, Ma = { class: "fm-typo-en-title-sm-600 mb-16" }, Ua = { class: "flex gap-16 flex-wrap" }, Aa = { class: "fm-typo-en-title-sm-600 mb-16" }, Ra = /* @__PURE__ */ $e({
+}), Ia = { class: "flex flex-col w-full h-full" }, Va = { class: "flex-1 flex overflow-hidden" }, Pa = { class: "w-[150px] overflow-y-auto my-8" }, La = { class: "fm-typo-en-body-lg-400 truncate" }, Ea = { class: "fm-typo-en-body-lg-400 truncate" }, Oa = { class: "fm-typo-en-body-lg-400 truncate" }, Ma = { class: "flex-1 flex flex-col overflow-auto p-16" }, Ua = { class: "fm-typo-en-title-sm-600 mb-16" }, Ta = { class: "fm-typo-en-title-sm-600 mb-16" }, Aa = { class: "flex gap-16 flex-wrap" }, Ra = { class: "fm-typo-en-title-sm-600 mb-16" }, Na = /* @__PURE__ */ he({
   __name: "PreviewImportTable",
   props: {
     show: {
@@ -956,61 +1003,61 @@ const ya = { class: "py-16 flex flex-col w-full h-full" }, ga = { class: "border
     }
   },
   emits: ["confirm", "cancel"],
-  setup(C, { emit: m }) {
-    const t = C, L = m, { t: n, n: R } = Se(), g = H("products"), h = b(() => [
+  setup(C, { emit: u }) {
+    const t = C, $ = u, { t: n, n: U } = Fe(), g = Y("products"), x = v(() => [
       { value: "products", label: n("menu.import_export.preview.tabs.products") },
       { value: "variants", label: n("menu.import_export.preview.tabs.variants") },
       { value: "addons", label: n("menu.import_export.preview.tabs.addons") }
-    ]), B = b(
+    ]), D = v(
       () => {
-        var S;
-        return ((S = t.tables) == null ? void 0 : S.categories) ?? [];
+        var V;
+        return ((V = t.tables) == null ? void 0 : V.categories) ?? [];
       }
-    ), K = b(
+    ), z = v(
       () => {
-        var S;
-        return ((S = t.tables) == null ? void 0 : S.variantGroups) ?? [];
+        var V;
+        return ((V = t.tables) == null ? void 0 : V.variantGroups) ?? [];
       }
-    ), _ = b(
+    ), _ = v(
       () => {
-        var S;
-        return ((S = t.tables) == null ? void 0 : S.addonGroups) ?? [];
+        var V;
+        return ((V = t.tables) == null ? void 0 : V.addonGroups) ?? [];
       }
-    ), D = H(""), G = b(
-      () => B.value.find(
-        (S) => S.id === D.value
-      ) ?? B.value[0]
-    ), w = H(""), W = b(
-      () => K.value.find(
-        (S) => S.id === w.value
-      ) ?? K.value[0]
-    ), X = H(""), Z = b(
+    ), O = Y(""), W = v(
+      () => D.value.find(
+        (V) => V.id === O.value
+      ) ?? D.value[0]
+    ), k = Y(""), X = v(
+      () => z.value.find(
+        (V) => V.id === k.value
+      ) ?? z.value[0]
+    ), se = Y(""), ee = v(
       () => _.value.find(
-        (S) => S.id === X.value
+        (V) => V.id === se.value
       ) ?? _.value[0]
     );
-    function r(S) {
-      return S === null ? n("menu.catalog.empty_value") : R(S.amount, {
+    function j(V) {
+      return V === null ? n("menu.catalog.empty_value") : U(V.amount, {
         style: "currency",
-        currency: S.currency,
+        currency: V.currency,
         currencyDisplay: "narrowSymbol"
       }).replace(/^(\D+)\s+/, "$1");
     }
-    const se = b(
+    const m = v(
       () => [
         {
           id: "image",
           header: () => n("menu.import_export.preview.columns.image"),
           size: 72,
           enableSorting: !1,
-          cell: (S) => {
-            const J = S.row.original;
-            return V(
+          cell: (V) => {
+            const Z = V.row.original;
+            return E(
               "div",
               { class: "my-8 mx-12 flex items-center justify-center" },
               [
-                V(
-                  re.FmCard,
+                E(
+                  pe.FmCard,
                   {
                     variant: "outlined",
                     // `!` on the height only: `.h-40` and
@@ -1022,11 +1069,11 @@ const ya = { class: "py-16 flex flex-col w-full h-full" }, ga = { class: "border
                     // ProductList's 72px frame; see the note there.
                     class: "w-40 !h-40 flex shrink-0 items-center justify-center rounded-md overflow-hidden"
                   },
-                  () => J.thumbnailUrl ? V("img", {
-                    src: J.thumbnailUrl,
-                    alt: J.name,
+                  () => Z.thumbnailUrl ? E("img", {
+                    src: Z.thumbnailUrl,
+                    alt: Z.name,
                     class: "w-full h-full object-cover"
-                  }) : V(re.FmIcon, {
+                  }) : E(pe.FmIcon, {
                     name: "image",
                     outline: !0,
                     color: "neutral-gray-300"
@@ -1046,10 +1093,10 @@ const ya = { class: "py-16 flex flex-col w-full h-full" }, ga = { class: "border
           header: () => n("menu.import_export.preview.columns.price"),
           enableSorting: !1,
           meta: { textAlign: "right" },
-          cell: (S) => r(S.row.original.price)
+          cell: (V) => j(V.row.original.price)
         }
       ]
-    ), ee = b(() => [
+    ), te = v(() => [
       {
         accessorKey: "name",
         header: () => n("menu.import_export.preview.columns.name"),
@@ -1060,23 +1107,23 @@ const ya = { class: "py-16 flex flex-col w-full h-full" }, ga = { class: "border
         header: () => n("menu.import_export.preview.columns.price"),
         enableSorting: !1,
         meta: { textAlign: "right" },
-        cell: (S) => r(S.row.original.price)
+        cell: (V) => j(V.row.original.price)
       },
       {
         id: "status",
         header: () => n("menu.import_export.preview.columns.status"),
         enableSorting: !1,
-        cell: (S) => {
-          const J = S.row.original.active;
-          return V(re.FmChip, {
-            variant: J ? "success" : "neutral",
-            label: n(J ? "menu.import_export.preview.status.active" : "menu.import_export.preview.status.inactive")
+        cell: (V) => {
+          const Z = V.row.original.active;
+          return E(pe.FmChip, {
+            variant: Z ? "success" : "neutral",
+            label: n(Z ? "menu.import_export.preview.status.active" : "menu.import_export.preview.status.inactive")
           });
         }
       }
     ]);
-    return (S, J) => {
-      const c = U("FmTabs"), p = U("FmListItem"), I = U("FmList"), $ = U("FmTable"), N = U("FmChip");
+    return (V, Z) => {
+      const c = T("FmTabs"), p = T("FmListItem"), S = T("FmList"), I = T("FmTable"), B = T("FmChip");
       return o(), F(He, {
         show: C.show,
         title: a(n)("menu.import_export.preview.title"),
@@ -1084,66 +1131,66 @@ const ya = { class: "py-16 flex flex-col w-full h-full" }, ga = { class: "border
         "secondary-actions": [
           {
             label: a(n)("menu.import_export.preview.actions.cancel"),
-            click: () => L("cancel")
+            click: () => $("cancel")
           }
         ],
-        onOnPrimary: J[1] || (J[1] = (i) => L("confirm")),
-        onOnCancel: J[2] || (J[2] = (i) => L("cancel"))
+        onOnPrimary: Z[1] || (Z[1] = (r) => $("confirm")),
+        onOnCancel: Z[2] || (Z[2] = (r) => $("cancel"))
       }, {
         default: A(() => {
-          var i, f, j, ae, z, Y;
+          var r, b, R, oe, K, J;
           return [
-            u("div", $a, [
-              u("div", null, [
-                v(c, {
+            i("div", Ia, [
+              i("div", null, [
+                y(c, {
                   "model-value": g.value,
-                  items: h.value,
-                  "onUpdate:modelValue": J[0] || (J[0] = (x) => g.value = x)
+                  items: x.value,
+                  "onUpdate:modelValue": Z[0] || (Z[0] = (w) => g.value = w)
                 }, null, 8, ["model-value", "items"])
               ]),
-              u("div", Sa, [
-                u("div", Ia, [
-                  v(I, { separator: "" }, {
+              i("div", Va, [
+                i("div", Pa, [
+                  y(S, { separator: "" }, {
                     default: A(() => [
-                      g.value === "products" ? (o(!0), y(Q, { key: 0 }, ie(B.value, (x) => {
-                        var T;
+                      g.value === "products" ? (o(!0), f(Q, { key: 0 }, ue(D.value, (w) => {
+                        var N;
                         return o(), F(p, {
-                          key: x.id,
-                          class: _e(["!py-12 !px-16", {
-                            "text-fm-color-primary": ((T = G.value) == null ? void 0 : T.id) === x.id
+                          key: w.id,
+                          class: fe(["!py-12 !px-16", {
+                            "text-fm-color-primary": ((N = W.value) == null ? void 0 : N.id) === w.id
                           }]),
-                          onClick: (te) => D.value = x.id
+                          onClick: (le) => O.value = w.id
                         }, {
                           default: A(() => [
-                            u("span", Va, O(x.name), 1)
+                            i("span", La, L(w.name), 1)
                           ]),
                           _: 2
                         }, 1032, ["class", "onClick"]);
-                      }), 128)) : g.value === "variants" ? (o(!0), y(Q, { key: 1 }, ie(K.value, (x) => {
-                        var T;
+                      }), 128)) : g.value === "variants" ? (o(!0), f(Q, { key: 1 }, ue(z.value, (w) => {
+                        var N;
                         return o(), F(p, {
-                          key: x.id,
-                          class: _e(["!py-12 !px-16", {
-                            "text-fm-color-primary": ((T = W.value) == null ? void 0 : T.id) === x.id
+                          key: w.id,
+                          class: fe(["!py-12 !px-16", {
+                            "text-fm-color-primary": ((N = X.value) == null ? void 0 : N.id) === w.id
                           }]),
-                          onClick: (te) => w.value = x.id
+                          onClick: (le) => k.value = w.id
                         }, {
                           default: A(() => [
-                            u("span", Pa, O(x.name), 1)
+                            i("span", Ea, L(w.name), 1)
                           ]),
                           _: 2
                         }, 1032, ["class", "onClick"]);
-                      }), 128)) : (o(!0), y(Q, { key: 2 }, ie(_.value, (x) => {
-                        var T;
+                      }), 128)) : (o(!0), f(Q, { key: 2 }, ue(_.value, (w) => {
+                        var N;
                         return o(), F(p, {
-                          key: x.id,
-                          class: _e(["!py-12 !px-16", {
-                            "text-fm-color-primary": ((T = Z.value) == null ? void 0 : T.id) === x.id
+                          key: w.id,
+                          class: fe(["!py-12 !px-16", {
+                            "text-fm-color-primary": ((N = ee.value) == null ? void 0 : N.id) === w.id
                           }]),
-                          onClick: (te) => X.value = x.id
+                          onClick: (le) => se.value = w.id
                         }, {
                           default: A(() => [
-                            u("span", La, O(x.name), 1)
+                            i("span", Oa, L(w.name), 1)
                           ]),
                           _: 2
                         }, 1032, ["class", "onClick"]);
@@ -1152,27 +1199,27 @@ const ya = { class: "py-16 flex flex-col w-full h-full" }, ga = { class: "border
                     _: 1
                   })
                 ]),
-                u("div", Ea, [
-                  g.value === "products" ? (o(), y(Q, { key: 0 }, [
-                    u("p", Oa, O(((i = G.value) == null ? void 0 : i.name) ?? a(n)("menu.catalog.empty_value")), 1),
-                    v($, {
-                      "column-defs": se.value,
-                      "row-data": ((f = G.value) == null ? void 0 : f.products) ?? [],
+                i("div", Ma, [
+                  g.value === "products" ? (o(), f(Q, { key: 0 }, [
+                    i("p", Ua, L(((r = W.value) == null ? void 0 : r.name) ?? a(n)("menu.catalog.empty_value")), 1),
+                    y(I, {
+                      "column-defs": m.value,
+                      "row-data": ((b = W.value) == null ? void 0 : b.products) ?? [],
                       "shrink-at": !1
                     }, null, 8, ["column-defs", "row-data"])
-                  ], 64)) : g.value === "variants" ? (o(), y(Q, { key: 1 }, [
-                    u("p", Ma, O(((j = W.value) == null ? void 0 : j.name) ?? a(n)("menu.catalog.empty_value")), 1),
-                    u("div", Ua, [
-                      (o(!0), y(Q, null, ie(((ae = W.value) == null ? void 0 : ae.options) ?? [], (x) => (o(), F(N, {
-                        key: x.name,
-                        label: x.name
+                  ], 64)) : g.value === "variants" ? (o(), f(Q, { key: 1 }, [
+                    i("p", Ta, L(((R = X.value) == null ? void 0 : R.name) ?? a(n)("menu.catalog.empty_value")), 1),
+                    i("div", Aa, [
+                      (o(!0), f(Q, null, ue(((oe = X.value) == null ? void 0 : oe.options) ?? [], (w) => (o(), F(B, {
+                        key: w.name,
+                        label: w.name
                       }, null, 8, ["label"]))), 128))
                     ])
-                  ], 64)) : (o(), y(Q, { key: 2 }, [
-                    u("p", Aa, O(((z = Z.value) == null ? void 0 : z.name) ?? a(n)("menu.catalog.empty_value")), 1),
-                    v($, {
-                      "column-defs": ee.value,
-                      "row-data": ((Y = Z.value) == null ? void 0 : Y.addons) ?? [],
+                  ], 64)) : (o(), f(Q, { key: 2 }, [
+                    i("p", Ra, L(((K = ee.value) == null ? void 0 : K.name) ?? a(n)("menu.catalog.empty_value")), 1),
+                    y(I, {
+                      "column-defs": te.value,
+                      "row-data": ((J = ee.value) == null ? void 0 : J.addons) ?? [],
                       "shrink-at": !1
                     }, null, 8, ["column-defs", "row-data"])
                   ], 64))
@@ -1185,84 +1232,84 @@ const ya = { class: "py-16 flex flex-col w-full h-full" }, ga = { class: "border
       }, 8, ["show", "title", "primary-action", "secondary-actions"]);
     };
   }
-}), Ta = { class: "flex w-full items-center justify-between" }, Da = ["aria-label"], ja = { class: "flex items-center gap-8 rounded-lg bg-fm-color-system-info-100 p-16 pl-24" }, Na = { class: "fm-typo-en-body-lg-400" }, za = {
+}), ja = { class: "flex w-full items-center justify-between" }, Da = ["aria-label"], za = { class: "flex items-center gap-8 rounded-lg bg-fm-color-system-info-100 p-16 pl-24" }, Ba = { class: "fm-typo-en-body-lg-400" }, Ka = {
   key: 0,
   class: "upload-area w-full cursor-pointer rounded-md outline-2 outline-dashed outline-fm-color-neutral-gray-300 hover:outline-fm-color-neutral-black"
-}, Ba = { class: "flex h-full w-full flex-col items-center justify-center p-16" }, Ka = { class: "fm-typo-en-body-md-400 mt-4 text-fm-color-neutral-gray-300" }, Ga = ["aria-label"], qa = { class: "mb-8 rounded-md outline-dashed outline-2 outline-fm-color-neutral-gray-300" }, Ha = { class: "p-16" }, Wa = { class: "flex w-[36px] shrink-0 items-center justify-center" }, Xa = { class: "fm-typo-en-body-lg-400 flex-1" }, Ya = {
+}, Ga = { class: "flex h-full w-full flex-col items-center justify-center p-16" }, qa = { class: "fm-typo-en-body-md-400 mt-4 text-fm-color-neutral-gray-300" }, Ha = ["aria-label"], Wa = { class: "mb-8 rounded-md outline-dashed outline-2 outline-fm-color-neutral-gray-300" }, Xa = { class: "p-16" }, Ya = { class: "flex w-[36px] shrink-0 items-center justify-center" }, Ja = { class: "fm-typo-en-body-lg-400 flex-1" }, Qa = {
   key: 2,
   class: "text-fm-color-typo-error",
   role: "alert"
-}, Ja = {
+}, Za = {
   key: 3,
   class: "rounded-md bg-fm-color-neutral-gray-100 p-16",
   "aria-live": "polite"
-}, Qa = { class: "fm-typo-en-body-md-600" }, Za = { class: "fm-typo-en-body-md-400" }, eo = {
+}, eo = { class: "fm-typo-en-body-md-600" }, to = { class: "fm-typo-en-body-md-400" }, lo = {
   key: 0,
   class: "mt-8 flex flex-col gap-4"
-}, to = /* @__PURE__ */ $e({
+}, ao = { class: "flex w-full justify-end space-x-8" }, oo = /* @__PURE__ */ he({
   __name: "ImportExport",
   props: {
     sdk: {}
   },
-  setup(C, { expose: m }) {
-    const { t } = Se(), { run: L } = Mt(), n = Ot(), R = je(C.sdk.menuImportExport.view), g = H(!1), h = H(null), B = H(null), K = H("replace"), _ = b(
-      () => R.value.status === "ready" ? R.value.value : null
-    ), D = b(
+  setup(C, { expose: u }) {
+    const { t } = Fe(), { run: $ } = Tt(), n = Ut(), U = Ne(C.sdk.menuImportExport.view), g = Y(!1), x = Y(null), D = Y(null), z = Y("replace"), _ = v(
+      () => U.value.status === "ready" ? U.value.value : null
+    ), O = v(
       () => {
-        var I, $, N, i;
-        return !!(($ = (I = _.value) == null ? void 0 : I.preview) != null && $.ok) && !!((N = _.value) != null && N.preview.tables) && ((i = _.value) == null ? void 0 : i.previewSurface) === "vendor";
+        var S, I, B, r;
+        return !!((I = (S = _.value) == null ? void 0 : S.preview) != null && I.ok) && !!((B = _.value) != null && B.preview.tables) && ((r = _.value) == null ? void 0 : r.previewSurface) === "vendor";
       }
-    ), G = b(
+    ), W = v(
       () => {
-        var I, $, N, i;
-        return !!(($ = (I = _.value) == null ? void 0 : I.preview) != null && $.ok) && !!((N = _.value) != null && N.preview.diff) && ((i = _.value) == null ? void 0 : i.previewSurface) === "diff";
+        var S, I, B, r;
+        return !!((I = (S = _.value) == null ? void 0 : S.preview) != null && I.ok) && !!((B = _.value) != null && B.preview.diff) && ((r = _.value) == null ? void 0 : r.previewSurface) === "diff";
       }
-    ), w = b(
+    ), k = v(
       () => {
-        var I, $, N, i;
-        return !!(($ = (I = _.value) == null ? void 0 : I.preview) != null && $.ok) && !!((N = _.value) != null && N.preview.v3Diff) && ((i = _.value) == null ? void 0 : i.previewSurface) === "v3Diff";
+        var S, I, B, r;
+        return !!((I = (S = _.value) == null ? void 0 : S.preview) != null && I.ok) && !!((B = _.value) != null && B.preview.v3Diff) && ((r = _.value) == null ? void 0 : r.previewSurface) === "v3Diff";
       }
     );
-    function W(I) {
-      return typeof File < "u" && I instanceof File;
+    function X(S) {
+      return typeof File < "u" && S instanceof File;
     }
-    function X(I) {
-      return Array.isArray(I) ? I.filter(W) : typeof FileList < "u" && I instanceof FileList ? [...I] : W(I) ? [I] : [];
+    function se(S) {
+      return Array.isArray(S) ? S.filter(X) : typeof FileList < "u" && S instanceof FileList ? [...S] : X(S) ? [S] : [];
     }
-    function Z() {
-      h.value = null, C.sdk.menuImportExport.openImport(), g.value = !0;
+    function ee() {
+      x.value = null, C.sdk.menuImportExport.openImport(), g.value = !0;
     }
-    m({ openImport: Z });
-    function r() {
-      C.sdk.menuImportExport.cancelImport(), h.value = null, g.value = !1;
+    u({ openImport: ee });
+    function j() {
+      C.sdk.menuImportExport.cancelImport(), x.value = null, g.value = !1;
     }
-    async function se(I, $ = !1) {
-      const N = X(I), i = await Promise.all(
-        N.map(async (j) => ({
-          name: j.name,
-          data: await j.arrayBuffer()
+    async function m(S, I = !1) {
+      const B = se(S), r = await Promise.all(
+        B.map(async (R) => ({
+          name: R.name,
+          data: await R.arrayBuffer()
         }))
-      ), f = $ ? C.sdk.menuImportExport.addFiles(i) : C.sdk.menuImportExport.selectFiles(i);
-      if (f.kind === "rejected") {
-        h.value = n(f.issues[0]);
+      ), b = I ? C.sdk.menuImportExport.addFiles(r) : C.sdk.menuImportExport.selectFiles(r);
+      if (b.kind === "rejected") {
+        x.value = n(b.issues[0]);
         return;
       }
-      h.value = null;
+      x.value = null;
     }
-    function ee(I) {
-      var $;
-      K.value = I, ($ = B.value) == null || $.click();
+    function te(S) {
+      var I;
+      z.value = S, (I = D.value) == null || I.click();
     }
-    function S(I) {
-      var N;
-      const $ = I.target;
-      !($ instanceof HTMLInputElement) || !((N = $.files) != null && N.length) || (se($.files, K.value === "append"), $.value = "");
+    function V(S) {
+      var B;
+      const I = S.target;
+      !(I instanceof HTMLInputElement) || !((B = I.files) != null && B.length) || (m(I.files, z.value === "append"), I.value = "");
     }
-    function J(I) {
-      C.sdk.menuImportExport.removeFile(I);
+    function Z(S) {
+      C.sdk.menuImportExport.removeFile(S);
     }
     async function c() {
-      await L(() => C.sdk.menuImportExport.previewImport(), {
+      await $(() => C.sdk.menuImportExport.previewImport(), {
         successMessage: t("menu.import_export.actions.preview_ready"),
         showLoading: !1,
         // Every client-side preview rejection here is a raw parser exception
@@ -1273,168 +1320,169 @@ const ya = { class: "py-16 flex flex-col w-full h-full" }, ga = { class: "border
       });
     }
     async function p() {
-      var $;
-      if (!(($ = _.value) != null && $.preview) && (await L(
+      var I;
+      if (!((I = _.value) != null && I.preview) && (await $(
         () => C.sdk.menuImportExport.previewImport(),
         { showLoading: !1, rejectedPresentation: "title" }
       )).kind !== "success")
         return;
-      (await L(
+      (await $(
         () => C.sdk.menuImportExport.confirmImport(),
         { successMessage: t("menu.import_export.feedback.success") }
-      )).kind === "success" && r();
+      )).kind === "success" && j();
     }
-    return (I, $) => {
-      var z, Y, x, T, te, ue;
-      const N = U("FmIcon"), i = U("FmSelect"), f = U("FmButton"), j = U("FmSpacer"), ae = U("FmDialog");
-      return o(), y(Q, null, [
-        v(Ra, {
-          show: D.value,
-          tables: ((Y = (z = _.value) == null ? void 0 : z.preview) == null ? void 0 : Y.tables) ?? null,
+    return (S, I) => {
+      var oe, K, J, w, N, le;
+      const B = T("FmIcon"), r = T("FmSelect"), b = T("FmButton"), R = T("FmDialog");
+      return o(), f(Q, null, [
+        y(Na, {
+          show: O.value,
+          tables: ((K = (oe = _.value) == null ? void 0 : oe.preview) == null ? void 0 : K.tables) ?? null,
           onConfirm: p,
-          onCancel: r
+          onCancel: j
         }, null, 8, ["show", "tables"]),
-        v(sa, {
-          show: G.value,
-          diff: ((T = (x = _.value) == null ? void 0 : x.preview) == null ? void 0 : T.diff) ?? null,
+        y(ia, {
+          show: W.value,
+          diff: ((w = (J = _.value) == null ? void 0 : J.preview) == null ? void 0 : w.diff) ?? null,
           onConfirm: p,
-          onCancel: r
+          onCancel: j
         }, null, 8, ["show", "diff"]),
-        v(Fa, {
-          show: w.value,
-          diff: ((ue = (te = _.value) == null ? void 0 : te.preview) == null ? void 0 : ue.v3Diff) ?? null,
+        y(Sa, {
+          show: k.value,
+          diff: ((le = (N = _.value) == null ? void 0 : N.preview) == null ? void 0 : le.v3Diff) ?? null,
           onConfirm: p,
-          onCancel: r
+          onCancel: j
         }, null, 8, ["show", "diff"]),
-        v(ae, {
-          "model-value": g.value && !D.value && !G.value && !w.value,
+        y(R, {
+          "model-value": g.value && !O.value && !W.value && !k.value,
           overlay: !0,
-          "max-width": 560,
           "close-button": !1,
-          "onUpdate:modelValue": $[3] || ($[3] = (E) => E ? g.value = !0 : r())
+          "onUpdate:modelValue": I[3] || (I[3] = (G) => G ? g.value = !0 : j())
         }, {
           "dialog-header": A(() => [
-            u("div", Ta, [
-              u("span", null, O(a(t)("menu.import_export.dialog.title")), 1),
-              v(N, {
+            i("div", ja, [
+              i("span", null, L(a(t)("menu.import_export.dialog.title")), 1),
+              y(B, {
                 "aria-label": a(t)("menu.import_export.actions.cancel"),
                 class: "relative -mr-24 cursor-pointer",
                 name: "close",
                 role: "button",
                 tabindex: "0",
-                onClick: r,
+                onClick: j,
                 onKeydown: [
-                  wt(r, ["enter"]),
-                  wt(we(r, ["prevent"]), ["space"])
+                  Ct(j, ["enter"]),
+                  Ct($e(j, ["prevent"]), ["space"])
                 ]
               }, null, 8, ["aria-label", "onKeydown"])
             ])
           ]),
           "dialog-footer": A(() => [
-            v(j),
-            v(f, {
-              label: a(t)("menu.import_export.actions.cancel"),
-              variant: "tertiary",
-              onClick: r
-            }, null, 8, ["label"]),
-            v(f, {
-              label: a(t)("menu.import_export.actions.import"),
-              variant: "primary",
-              onClick: c
-            }, null, 8, ["label"])
+            i("div", ao, [
+              y(b, {
+                label: a(t)("menu.import_export.actions.cancel"),
+                variant: "tertiary",
+                onClick: j
+              }, null, 8, ["label"]),
+              y(b, {
+                class: "ml-auto mr-8",
+                label: a(t)("menu.import_export.actions.import"),
+                variant: "primary",
+                onClick: c
+              }, null, 8, ["label"])
+            ])
           ]),
           default: A(() => [
-            _.value ? (o(), y("div", {
+            _.value ? (o(), f("div", {
               key: 0,
               role: "dialog",
               "aria-label": a(t)("menu.import_export.dialog.title"),
               class: "flex flex-col gap-24"
             }, [
-              u("div", ja, [
-                v(N, {
+              i("div", za, [
+                y(B, {
                   color: "system-info-300",
                   name: "info"
                 }),
-                u("p", Na, O(a(t)("menu.import.dialog.info")), 1)
+                i("p", Ba, L(a(t)("menu.import.dialog.info")), 1)
               ]),
-              v(i, {
-                items: _.value.importerOptions.map((E) => ({
-                  value: E.value,
-                  label: a(t)(E.labelKey)
+              y(r, {
+                items: _.value.importerOptions.map((G) => ({
+                  value: G.value,
+                  label: a(t)(G.labelKey)
                 })),
                 label: a(t)("menu.import.dialog.fields.type"),
                 "model-value": _.value.importer,
-                "onUpdate:modelValue": $[0] || ($[0] = (E) => I.sdk.menuImportExport.selectImporter(String(E)))
+                "onUpdate:modelValue": I[0] || (I[0] = (G) => S.sdk.menuImportExport.selectImporter(String(G)))
               }, null, 8, ["items", "label", "model-value"]),
-              _.value.files.length === 0 ? (o(), y("div", za, [
-                u("div", Ba, [
-                  u("input", {
+              _.value.files.length === 0 ? (o(), f("div", Ka, [
+                i("div", Ga, [
+                  i("input", {
                     ref_key: "fileInput",
-                    ref: B,
+                    ref: D,
                     class: "hidden",
                     type: "file",
                     accept: ".xlsx,.xls,.json",
                     multiple: "",
-                    onChange: S
+                    onChange: V
                   }, null, 544),
-                  v(f, {
+                  y(b, {
                     label: a(t)("menu.import.dialog.button.label"),
                     variant: "secondary",
-                    onClick: $[1] || ($[1] = (E) => ee("replace"))
+                    onClick: I[1] || (I[1] = (G) => te("replace"))
                   }, null, 8, ["label"]),
-                  u("p", Ka, O(a(t)("menu.import.dialog.subtitle")), 1)
+                  i("p", qa, L(a(t)("menu.import.dialog.subtitle")), 1)
                 ])
-              ])) : (o(), y("div", {
+              ])) : (o(), f("div", {
                 key: 1,
                 class: "flex flex-col",
                 "aria-label": a(t)("menu.import_export.labels.selected_files")
               }, [
-                u("div", qa, [
-                  u("div", Ha, [
-                    (o(!0), y(Q, null, ie(_.value.files, (E, q) => (o(), y("div", {
-                      key: `${E}-${q}`,
+                i("div", Wa, [
+                  i("div", Xa, [
+                    (o(!0), f(Q, null, ue(_.value.files, (G, q) => (o(), f("div", {
+                      key: `${G}-${q}`,
                       class: "flex items-center"
                     }, [
-                      u("span", Wa, [
-                        v(N, { name: "attach_file" })
+                      i("span", Ya, [
+                        y(B, { name: "attach_file" })
                       ]),
-                      u("p", Xa, O(E), 1),
-                      v(f, {
+                      i("p", Ja, L(G), 1),
+                      y(b, {
                         "aria-label": a(t)("menu.common.actions.remove"),
                         "icon-color": "primary",
                         "prepend-icon": "close",
                         variant: "plain",
-                        onClick: (he) => J(q)
+                        onClick: (H) => Z(q)
                       }, null, 8, ["aria-label", "onClick"])
                     ]))), 128))
                   ]),
-                  u("input", {
+                  i("input", {
                     ref_key: "fileInput",
-                    ref: B,
+                    ref: D,
                     class: "hidden",
                     type: "file",
                     accept: ".xlsx,.xls,.json",
                     multiple: "",
-                    onChange: S
+                    onChange: V
                   }, null, 544),
-                  v(f, {
+                  y(b, {
                     label: a(t)("menu.import_export.actions.add_new_files"),
                     "prepend-icon": "add",
                     variant: "plain",
-                    onClick: $[2] || ($[2] = (E) => ee("append"))
+                    onClick: I[2] || (I[2] = (G) => te("append"))
                   }, null, 8, ["label"])
                 ])
-              ], 8, Ga)),
-              h.value ? (o(), y("p", Ya, O(h.value), 1)) : M("", !0),
-              _.value.preview ? (o(), y("section", Ja, [
-                u("p", Qa, O(_.value.preview.ok ? a(t)("menu.import_export.labels.ready") : a(t)("menu.import_export.labels.has_errors")), 1),
-                u("p", Za, O(a(t)("menu.import_export.labels.change_count", {
+              ], 8, Ha)),
+              x.value ? (o(), f("p", Qa, L(x.value), 1)) : M("", !0),
+              _.value.preview ? (o(), f("section", Za, [
+                i("p", eo, L(_.value.preview.ok ? a(t)("menu.import_export.labels.ready") : a(t)("menu.import_export.labels.has_errors")), 1),
+                i("p", to, L(a(t)("menu.import_export.labels.change_count", {
                   count: _.value.preview.changes.length
                 })), 1),
-                _.value.preview.issues.length ? (o(), y("ul", eo, [
-                  (o(!0), y(Q, null, ie(_.value.preview.issues, (E, q) => (o(), y("li", {
-                    key: `${E.code}-${q}`
-                  }, O(a(n)(E)), 1))), 128))
+                _.value.preview.issues.length ? (o(), f("ul", lo, [
+                  (o(!0), f(Q, null, ue(_.value.preview.issues, (G, q) => (o(), f("li", {
+                    key: `${G.code}-${q}`
+                  }, L(a(n)(G)), 1))), 128))
                 ])) : M("", !0)
               ])) : M("", !0)
             ], 8, Da)) : M("", !0)
@@ -1444,107 +1492,105 @@ const ya = { class: "py-16 flex flex-col w-full h-full" }, ga = { class: "border
       ], 64);
     };
   }
-}), lo = { class: "flex-1 flex justify-between gap-8 pl-8" }, ao = {
+}), no = { class: "flex-1 flex justify-between gap-8 pl-8" }, so = {
   key: 0,
   class: "flex items-center"
-}, oo = { class: "bg-fm-color-neutral-gray-100 rounded-md px-8 py-4" }, no = { class: "fm-typo-en-body-md-600 font-semibold" }, so = { class: "flex items-center gap-8 ml-auto" }, ro = {
+}, ro = { class: "bg-fm-color-neutral-gray-100 rounded-md px-8 py-4" }, io = { class: "fm-typo-en-body-md-600 font-semibold" }, uo = { class: "flex items-center gap-8 ml-auto" }, co = ["onClick"], mo = { class: "flex items-center cursor-pointer" }, po = {
   key: 0,
   role: "alert",
   class: "text-fm-color-typo-secondary"
-}, io = {
+}, vo = {
   key: 1,
   class: "text-fm-color-typo-secondary"
-}, uo = {
+}, fo = {
   key: 2,
   class: "flex flex-1 items-center justify-center"
-}, co = {
-  key: 3,
-  class: "relative flex flex-col flex-1 min-h-0 space-y-8 overflow-hidden pt-16"
-}, mo = { class: "flex justify-between items-center gap-8" }, po = { class: "flex items-center gap-8" }, vo = ["aria-label"], fo = {
+}, bo = { class: "flex justify-between items-center gap-8 xs:flex-col xs:items-stretch" }, yo = ["aria-label"], go = {
   key: 0,
-  class: "w-[320px]"
-}, bo = { class: "flex space-x-8" }, yo = {
+  class: "xs:order-2 w-full h-[1px] bg-fm-color-neutral-gray-100"
+}, _o = {
+  key: 1,
+  class: "w-[320px] xs:order-1 xs:w-full xs:px-8"
+}, ho = { class: "flex space-x-8" }, xo = {
   key: 2,
   class: "flex items-center p-4"
-}, go = { class: "mr-8 fm-typo-en-body-md-400" }, _o = {
+}, ko = { class: "mr-8 fm-typo-en-body-md-400" }, wo = {
   key: 4,
   class: "flex flex-col flex-1 overflow-auto divide-y divide-fm-color-neutral-gray-100 pb-64"
-}, ho = { class: "flex-1 min-w-0" }, ko = { class: "flex items-center justify-between gap-8 pb-4" }, xo = { class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary" }, wo = { class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary" }, Co = {
+}, Co = ["onClick"], Fo = { class: "min-w-0 flex flex-1 items-center justify-start gap-16" }, $o = { class: "flex-1 min-w-0" }, So = { class: "flex justify-between items-center gap-8 pb-4" }, Io = { class: "flex-1 min-w-0 fm-typo-en-body-lg-600 line-clamp-2" }, Vo = { class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary" }, Po = { class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary" }, Lo = {
   key: 5,
   class: "absolute inset-0 flex items-center justify-center bg-white/50"
-}, Fo = { class: "w-full overflow-x-auto py-24" }, $o = "fixed right-16 bottom-[72px] z-10", Et = 37, Xo = /* @__PURE__ */ $e({
+}, Eo = { class: "w-full overflow-x-auto py-24" }, Oo = "fixed right-16 bottom-[72px] z-10", Mt = 37, on = /* @__PURE__ */ he({
   __name: "ProductList",
   props: {
     sdk: {},
     catalogPage: { type: Boolean }
   },
   setup(C) {
-    const m = C, { t, n: L } = Se(), n = wl(), R = je(m.sdk.productBatchImage.entry), g = b(() => {
-      const e = [], l = R.value;
+    const u = C, { t, n: $ } = Fe(), n = wl(), U = Ne(u.sdk.productBatchImage.entry), g = v(() => {
+      const e = [], l = U.value;
       return l.status === "ready" && l.value.state === "allowed" && e.push({
         id: "product-internal-tools",
         label: t("menu.productInternalTools.title"),
-        run: () => void n.push({ name: ol.PRODUCT_INTERNAL_TOOLS })
+        run: () => void n.push({ name: nl.PRODUCT_INTERNAL_TOOLS })
       }), e;
-    }), h = Ot(), B = (e) => e.labelMessage ? h(e.labelMessage) : e.label, K = cl(), _ = ml(), D = b(() => _.breakpoints.value.xs), G = H(!1), w = H(
+    }), x = Ut(), D = (e) => e.labelMessage ? x(e.labelMessage) : e.label, z = dl(), _ = pl(), O = v(() => _.breakpoints.value.xs), W = v(() => _.breakpoints.value.sm), k = Y(!1), X = Y(
       null
     );
-    async function W() {
+    async function se() {
       var e;
-      G.value = !G.value, G.value && (await ll(), (e = w.value) == null || e.toggleProperty(!0));
+      k.value = !k.value, k.value && (await al(), (e = X.value) == null || e.toggleProperty(!0));
     }
-    const { run: X } = Mt(), Z = je(m.sdk.item.list), r = b(
-      () => Z.value.status === "ready" ? Z.value.value : null
-    ), se = je(m.sdk.item.linkCatalogue), ee = b(
-      () => se.value.status === "ready" ? se.value.value : null
-    ), S = je(m.sdk.menuImportExport.view), J = b(() => {
-      const e = S.value;
+    const { run: ee } = Tt(), j = Ne(u.sdk.item.list), m = v(
+      () => j.value.status === "ready" ? j.value.value : null
+    ), te = Ne(u.sdk.item.linkCatalogue), V = v(
+      () => te.value.status === "ready" ? te.value.value : null
+    ), Z = Ne(u.sdk.menuImportExport.view), c = v(() => {
+      const e = Z.value;
       return e.status === "ready" && e.value.canImport;
-    }), c = H(null);
-    function p() {
+    }), p = Y(null);
+    function S() {
       var e;
-      (e = c.value) == null || e.openImport();
+      (e = p.value) == null || e.openImport();
     }
-    const I = b(
-      () => D.value && !m.catalogPage
-    ), $ = b(
-      () => I.value ? fe.Fab : fe.Primary
-    ), N = H(!1);
-    ge(D, (e) => {
-      e || (N.value = !1);
+    const I = v(() => O.value), B = v(
+      () => I.value ? be.Fab : be.Primary
+    ), r = Y(!1);
+    _e(O, (e) => {
+      e || (r.value = !1);
     });
-    const i = al(), f = b(() => {
+    const b = ol(), R = v(() => {
       var l;
-      const e = ((l = i.sessionUser.value) == null ? void 0 : l.permissions) ?? [];
-      return $t(
+      const e = ((l = b.sessionUser.value) == null ? void 0 : l.permissions) ?? [];
+      return St(
         [
           {
-            action: Ge.Action.manage,
-            subject: Ge.Subject.Business.menu_importExport
+            action: Ke.Action.manage,
+            subject: Ke.Subject.Business.menu_importExport
           }
         ],
         e
       ).granted;
-    }), j = b(() => {
+    }), oe = v(() => {
       var l;
-      const e = ((l = i.sessionUser.value) == null ? void 0 : l.permissions) ?? [];
-      return $t(
+      const e = ((l = b.sessionUser.value) == null ? void 0 : l.permissions) ?? [];
+      return St(
         [
           {
-            action: Ge.Action.manage,
-            subject: Ge.Subject.Business.menu_menuManagement
+            action: Ke.Action.manage,
+            subject: Ke.Subject.Business.menu_menuManagement
           }
         ],
         e
       ).granted;
     });
-    async function ae() {
-      await X(
+    async function K() {
+      await ee(
         async () => {
-          const e = await m.sdk.menuImportExport.exportMenu();
+          const e = await u.sdk.menuImportExport.exportMenu();
           if (e.kind !== "success") return e;
           try {
-            await fl(e.value);
+            await yl(e.value);
           } catch {
             return {
               kind: "failure",
@@ -1560,201 +1606,207 @@ const ya = { class: "py-16 flex flex-col w-full h-full" }, ga = { class: "border
         { successMessage: t("menu.import_export.feedback.exported") }
       );
     }
-    const z = H(!1), Y = xe(null), x = xe(
+    const J = Y(!1), w = Ce(null), N = Ce(
       null
-    ), T = xe({
+    ), le = Ce({
       status: "loading"
     });
-    let te = null;
-    function ue() {
+    let G = null;
+    function q() {
       var e, l;
-      te == null || te(), te = null, (e = Y.value) == null || e.dispose(), Y.value = null, (l = x.value) == null || l.dispose(), x.value = null, T.value = { status: "loading" };
+      G == null || G(), G = null, (e = w.value) == null || e.dispose(), w.value = null, (l = N.value) == null || l.dispose(), N.value = null, le.value = { status: "loading" };
     }
-    function E() {
+    function H() {
       var l;
-      ue(), x.value = m.sdk.linkProduct.selection(
-        ((l = r.value) == null ? void 0 : l.availableItemIds) ?? [],
-        (s) => m.sdk.item.linkProducts(s)
+      q(), N.value = u.sdk.linkProduct.selection(
+        ((l = m.value) == null ? void 0 : l.availableItemIds) ?? [],
+        (s) => u.sdk.item.linkProducts(s)
       );
-      const e = m.sdk.linkProduct.rules();
-      Y.value = e, T.value = e.get(), te = e.subscribe((s) => {
-        T.value = s;
-      }), z.value = !0;
+      const e = u.sdk.linkProduct.rules();
+      w.value = e, le.value = e.get(), G = e.subscribe((s) => {
+        le.value = s;
+      }), J.value = !0;
     }
-    function q() {
-      z.value = !1, ue();
+    function xe() {
+      J.value = !1, q();
     }
-    ge(z, (e) => {
-      e || ue();
+    _e(J, (e) => {
+      e || q();
     });
-    async function he(e) {
-      (await X(
+    async function re(e) {
+      (await ee(
         () => {
           var s;
-          return ((s = x.value) == null ? void 0 : s.submit()) ?? Promise.resolve({ kind: "cancelled" });
+          return ((s = N.value) == null ? void 0 : s.submit()) ?? Promise.resolve({ kind: "cancelled" });
         },
         {
-          successMessage: r.value ? h(r.value.linkSaveMessage) : ""
+          successMessage: m.value ? x(m.value.linkSaveMessage) : ""
         }
-      )).kind === "success" && q();
+      )).kind === "success" && xe();
     }
-    async function ne() {
-      const e = Y.value;
+    async function Ve() {
+      const e = w.value;
       if (!e) return;
-      (await X(() => e.submit(), {
-        showLoading: () => T.value.status === "ready" && T.value.value.status === "submitting",
-        successMessage: r.value ? h(r.value.linkSaveMessage) : ""
-      })).kind === "success" && q();
+      (await ee(() => e.submit(), {
+        showLoading: () => le.value.status === "ready" && le.value.value.status === "submitting",
+        successMessage: m.value ? x(m.value.linkSaveMessage) : ""
+      })).kind === "success" && xe();
     }
-    const Pe = b(() => {
-      var e;
-      return ((e = r.value) == null ? void 0 : e.headerCount) ?? 0;
-    }), Ce = b(() => {
+    const je = v(() => {
       var e;
-      return ((e = r.value) == null ? void 0 : e.rows) ?? [];
-    }), et = b(() => {
+      return ((e = m.value) == null ? void 0 : e.headerCount) ?? 0;
+    }), Pe = v(() => {
       var e;
-      return ((e = r.value) == null ? void 0 : e.currency) ?? null;
-    }), At = b(() => {
+      return ((e = m.value) == null ? void 0 : e.rows) ?? [];
+    }), et = v(() => {
       var e;
-      return ((e = r.value) == null ? void 0 : e.currencySymbol) ?? "";
-    }), Rt = b(() => {
+      return ((e = m.value) == null ? void 0 : e.currencySymbol) ?? "";
+    }), Rt = v(() => {
       var e;
-      return ((e = r.value) == null ? void 0 : e.taxSystemCode) ?? null;
-    }), Tt = b(() => [...Ce.value]);
+      return ((e = m.value) == null ? void 0 : e.taxSystemCode) ?? null;
+    }), Nt = v(() => [...Pe.value]);
     function tt(e, l) {
-      return e == null ? t("menu.catalog.empty_value") : L(e, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+      return e == null ? t("menu.catalog.empty_value") : $(e, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+    }
+    function jt(e) {
+      var l;
+      return `${et.value.toUpperCase()}${tt(((l = e.price) == null ? void 0 : l.amount) ?? 0)}`;
     }
     function lt(e) {
-      return e === null ? t("menu.catalog.empty_value") : L(e / 100, { style: "percent", minimumFractionDigits: 2 });
+      return e === null ? t("menu.catalog.empty_value") : $(e / 100, { style: "percent", minimumFractionDigits: 2 });
     }
-    const Fe = b(() => {
+    const ke = v(() => {
       var e;
-      return ((e = r.value) == null ? void 0 : e.empty) ?? !1;
-    }), ze = H({}), Be = b(
-      () => Object.entries(ze.value).filter(([, e]) => e).map(([e]) => e)
-    ), Le = b(() => m.sdk.item.removeManyCapability(Be.value));
-    function We() {
-      ze.value = {};
+      return ((e = m.value) == null ? void 0 : e.empty) ?? !1;
+    }), We = v(
+      () => {
+        var e;
+        return ke.value && !((e = m.value) != null && e.emptyState.showSearch);
+      }
+    ), De = Y({}), ze = v(
+      () => Object.entries(De.value).filter(([, e]) => e).map(([e]) => e)
+    ), Le = v(() => u.sdk.item.removeManyCapability(ze.value));
+    function Xe() {
+      De.value = {};
     }
-    ge(
+    _e(
       () => {
         var e, l;
-        return [(e = r.value) == null ? void 0 : e.rows, (l = r.value) == null ? void 0 : l.attributeRule];
+        return [(e = m.value) == null ? void 0 : e.rows, (l = m.value) == null ? void 0 : l.attributeRule];
       },
-      () => We()
+      () => Xe()
     );
-    const Ie = H(!1), ve = xe(null), at = xl(() => ve.value);
-    let be = null;
-    const Ee = xe({
+    const Se = Y(!1), ye = Ce(null), at = kl(() => ye.value);
+    let ge = null;
+    const Ee = Ce({
       status: "loading"
     });
-    let ke = null;
-    const Oe = b(
+    let we = null;
+    const Oe = v(
       () => Ee.value.status === "ready" ? Ee.value.value : null
-    ), Xe = H(!1), ce = xe(null), Me = xe(null);
+    ), Ye = Y(!1), ce = Ce(null), Me = Ce(null);
     let Ue = null;
-    const le = b(
+    const ne = v(
       () => {
         var e;
         return ((e = Me.value) == null ? void 0 : e.status) === "ready" ? Me.value.value : null;
       }
     );
-    function Ae() {
+    function Te() {
       var e;
-      Ue == null || Ue(), (e = ce.value) == null || e.dispose(), Ue = null, ce.value = null, Me.value = null, Xe.value = !1;
+      Ue == null || Ue(), (e = ce.value) == null || e.dispose(), Ue = null, ce.value = null, Me.value = null, Ye.value = !1;
     }
     function ot() {
       var l;
-      if (!((l = le.value) != null && l.dirty)) return Ae();
+      if (!((l = ne.value) != null && l.dirty)) return Te();
       const e = ce.value;
-      K.open({
+      z.open({
         title: t("menu.product.table.bulk_edit.discard.title"),
         message: t("menu.product.table.bulk_edit.discard.message"),
         primaryActions: {
           text: t("menu.common.actions.discard"),
           close: !0,
-          variant: fe.Destructive
+          variant: be.Destructive
         },
         secondaryActions: {
           text: t("menu.common.actions.cancel"),
           close: !0
         }
       }).onPrimary(() => {
-        ce.value === e && Ae();
+        ce.value === e && Te();
       });
     }
     function Dt() {
-      Ae();
-      const e = m.sdk.item.bulkEditor();
+      Te();
+      const e = u.sdk.item.bulkEditor();
       ce.value = e, Me.value = e.get(), Ue = e.subscribe((l) => {
         Me.value = l;
-      }), Xe.value = !0;
+      }), Ye.value = !0;
     }
-    async function jt() {
+    async function zt() {
       var d;
       const e = ce.value;
       if (!e) return;
-      const l = ((d = le.value) == null ? void 0 : d.dirty) ?? !1;
-      (await X(() => e.submit(), {
+      const l = ((d = ne.value) == null ? void 0 : d.dirty) ?? !1;
+      (await ee(() => e.submit(), {
         showLoading: () => {
           var P;
-          return ((P = le.value) == null ? void 0 : P.status) === "submitting";
+          return ((P = ne.value) == null ? void 0 : P.status) === "submitting";
         },
-        successMessage: l && le.value ? h(le.value.saveMessage) : ""
-      })).kind === "success" && Ae();
+        successMessage: l && ne.value ? x(ne.value.saveMessage) : ""
+      })).kind === "success" && Te();
     }
-    function Ye(e) {
+    function Je(e) {
       var l;
-      ke == null || ke(), (l = ve.value) == null || l.dispose(), ve.value = m.sdk.item.editor(e), Ee.value = ve.value.get(), ke = ve.value.subscribe((s) => {
+      we == null || we(), (l = ye.value) == null || l.dispose(), ye.value = u.sdk.item.editor(e), Ee.value = ye.value.get(), we = ye.value.subscribe((s) => {
         Ee.value = s;
       });
     }
     function nt() {
-      be = m.sdk.item.editorScope(), Ye(), Ie.value = !0;
+      ge = u.sdk.item.editorScope(), Je(), Se.value = !0;
     }
     function st(e) {
-      be = m.sdk.item.editorScope(), Ye(e.id), Ie.value = !0;
+      ge = u.sdk.item.editorScope(), Je(e.id), Se.value = !0;
     }
-    async function Nt() {
-      const e = ve.value;
+    async function Bt() {
+      const e = ye.value;
       if (!e) return;
-      (await X(
+      (await ee(
         () => at.submit(() => e.submit()),
         {
           showLoading: () => {
             var s;
             return ((s = Oe.value) == null ? void 0 : s.status) === "submitting";
           },
-          successMessage: Oe.value ? h(Oe.value.saveMessage) : ""
+          successMessage: Oe.value ? x(Oe.value.saveMessage) : ""
         }
-      )).kind === "success" && ve.value === e && (Ie.value = !1);
+      )).kind === "success" && ye.value === e && (Se.value = !1);
     }
-    function zt(e) {
+    function Kt(e) {
       var s;
       const l = ((s = Oe.value) == null ? void 0 : s.itemId) ?? void 0;
-      be == null || be.select(e), Ye(l);
+      ge == null || ge.select(e), Je(l);
     }
-    const Ke = H(!1), Je = xe(null);
-    let Re = null, Te = null;
-    function Qe() {
-      Te == null || Te(), Re == null || Re.dispose(), Te = null, Re = null;
+    const Be = Y(!1), Qe = Ce(null);
+    let Ae = null, Re = null;
+    function Ze() {
+      Re == null || Re(), Ae == null || Ae.dispose(), Re = null, Ae = null;
     }
-    function Bt(e) {
-      Qe();
-      const l = m.sdk.item.overview(e.id);
-      Je.value = l.get(), Re = l, Te = l.subscribe((s) => {
-        Je.value = s;
-      }), Ke.value = !0;
+    function Gt(e) {
+      Ze();
+      const l = u.sdk.item.overview(e.id);
+      Qe.value = l.get(), Ae = l, Re = l.subscribe((s) => {
+        Qe.value = s;
+      }), Be.value = !0;
     }
     function rt(e) {
       if (!e.removeRequiresConfirmation) {
-        X(() => m.sdk.item.remove(e.id), {
-          successMessage: h(e.removeMessage)
+        ee(() => u.sdk.item.remove(e.id), {
+          successMessage: x(e.removeMessage)
         });
         return;
       }
-      K.open({
+      z.open({
         title: t("menu.common.dialog.remove.product.title"),
         message: t("menu.common.dialog.remove.product.message", {
           name: e.name
@@ -1762,32 +1814,32 @@ const ya = { class: "py-16 flex flex-col w-full h-full" }, ga = { class: "border
         primaryActions: {
           text: t("menu.common.actions.remove"),
           close: !0,
-          variant: fe.Destructive
+          variant: be.Destructive
         },
         secondaryActions: {
           text: t("menu.common.actions.cancel"),
           close: !0
         }
       }).onPrimary(async () => {
-        await X(() => m.sdk.item.remove(e.id), {
-          successMessage: h(e.removeMessage)
+        await ee(() => u.sdk.item.remove(e.id), {
+          successMessage: x(e.removeMessage)
         });
       });
     }
-    function Kt() {
+    function qt() {
       var P, de;
-      const e = Be.value;
+      const e = ze.value;
       if (e.length === 0 || Le.value.state !== "allowed") return;
-      const l = (P = r.value) == null ? void 0 : P.rows.find((me) => e.includes(me.id)), s = () => X(() => m.sdk.item.removeMany(e), {
-        successMessage: l ? h(l.removeMessage) : t("menu.common.dialog.remove.product.success")
+      const l = (P = m.value) == null ? void 0 : P.rows.find((me) => e.includes(me.id)), s = () => ee(() => u.sdk.item.removeMany(e), {
+        successMessage: l ? x(l.removeMessage) : t("menu.common.dialog.remove.product.success")
       }).then((me) => {
-        me.kind === "success" && We();
+        me.kind === "success" && Xe();
       });
-      if (!((de = r.value) == null ? void 0 : de.rows.filter((me) => e.includes(me.id)).some((me) => me.removeRequiresConfirmation))) {
+      if (!((de = m.value) == null ? void 0 : de.rows.filter((me) => e.includes(me.id)).some((me) => me.removeRequiresConfirmation))) {
         s();
         return;
       }
-      K.open({
+      z.open({
         title: t("menu.common.dialog.remove.product.title"),
         message: t("menu.common.dialog.remove.product.message", {
           name: (l == null ? void 0 : l.name) ?? ""
@@ -1795,7 +1847,7 @@ const ya = { class: "py-16 flex flex-col w-full h-full" }, ga = { class: "border
         primaryActions: {
           text: t("menu.common.actions.remove"),
           close: !0,
-          variant: fe.Destructive
+          variant: be.Destructive
         },
         secondaryActions: {
           text: t("menu.common.actions.cancel"),
@@ -1803,20 +1855,20 @@ const ya = { class: "py-16 flex flex-col w-full h-full" }, ga = { class: "border
         }
       }).onPrimary(() => s());
     }
-    const it = b(() => {
+    const it = v(() => {
       var e;
       return [
         { label: t("menu.category.selector.all"), value: null },
-        ...(((e = r.value) == null ? void 0 : e.categoryOptions) ?? []).map((l) => ({
-          label: B(l),
+        ...(((e = m.value) == null ? void 0 : e.categoryOptions) ?? []).map((l) => ({
+          label: D(l),
           value: l.id
         }))
       ];
-    }), Gt = b(() => {
+    }), Ht = v(() => {
       var e;
       return [
         { label: t("menu.common.labels.summary"), value: null },
-        ...(((e = r.value) == null ? void 0 : e.scope.schedulerOptions) ?? []).map((l) => ({
+        ...(((e = m.value) == null ? void 0 : e.scope.schedulerOptions) ?? []).map((l) => ({
           label: l.label,
           value: l.id
         }))
@@ -1824,7 +1876,7 @@ const ya = { class: "py-16 flex flex-col w-full h-full" }, ga = { class: "border
     });
     function ut(e) {
       return e.length === 0 ? [] : [
-        V(pl, {
+        E(fl, {
           nameLocale: Object.fromEntries(
             e.map((l) => [l.locale, l.value])
           ),
@@ -1835,7 +1887,7 @@ const ya = { class: "py-16 flex flex-col w-full h-full" }, ga = { class: "border
     function ct(e) {
       return e.isAddon ? [t("menu.tree_editor.labels.addon"), ...e.categoryNames] : e.categoryNames;
     }
-    const qt = b(() => {
+    const Wt = v(() => {
       var e, l;
       return [
         {
@@ -1856,45 +1908,10 @@ const ya = { class: "py-16 flex flex-col w-full h-full" }, ga = { class: "border
           // pulling that unit into scope.
           cell: (s) => {
             const d = s.row.original;
-            return V(
+            return E(
               "div",
               { class: "my-8 mx-12 flex items-center justify-center" },
-              [
-                V(
-                  re.FmCard,
-                  {
-                    variant: "outlined",
-                    // Keeps the card square even when the child image has an
-                    // intrinsic ratio; legacy Thumbnail is the same fixed 72px box.
-                    // `w-72 h-72` IS 72px on the FeedMe scale, which is why the
-                    // inline `style: {width:'72px', height:'72px'}` that used to
-                    // sit here was removed as a restatement (ADR-0003 §2).
-                    //
-                    // The HEIGHT needs `!` and the width does not. `.h-72` and
-                    // `.fm-card--outlined { height: fit-content }` are both a
-                    // single class, so specificity ties and source order decides —
-                    // and the ui-library sheet loads after the utilities in the
-                    // app, so the card collapsed to its content: 72x26, which
-                    // stretched every product thumbnail into a letterbox. Nothing
-                    // in the library sets `width`, so `w-72` needs no help.
-                    //
-                    // A mount that loads the two sheets in the opposite order
-                    // renders this square, which is how every list screenshot once
-                    // compared clean while the real app was wrong. Do not drop the
-                    // `!` on the strength of a green visual comparison.
-                    class: "flex shrink-0 w-72 !h-72 items-center justify-center rounded-md overflow-hidden"
-                  },
-                  () => d.thumbnailUrl ? V("img", {
-                    src: d.thumbnailUrl,
-                    alt: d.name,
-                    class: "w-full h-full object-cover"
-                  }) : V(re.FmIcon, {
-                    name: "image",
-                    outline: !0,
-                    color: "neutral-gray-300"
-                  })
-                )
-              ]
+              [E(Pt, { src: d.thumbnailUrl, alt: d.name })]
             );
           }
         },
@@ -1912,19 +1929,19 @@ const ya = { class: "py-16 flex flex-col w-full h-full" }, ga = { class: "border
           size: 250,
           cell: (s) => {
             const d = s.row.original, P = d.translatedNames;
-            return V("div", { class: "flex items-center gap-8" }, [
-              V("span", { class: "text-wrap" }, d.name),
+            return E("div", { class: "flex items-center gap-8" }, [
+              E("span", { class: "text-wrap" }, d.name),
               ...ut(P)
             ]);
           }
         },
         {
           accessorKey: "price",
-          header: () => V(
+          header: () => E(
             "div",
             { class: "flex flex-1 justify-end" },
             t("menu.product.table.columns.price", {
-              currency: At.value
+              currency: et.value
             })
           ),
           enableSorting: !1,
@@ -1939,7 +1956,7 @@ const ya = { class: "py-16 flex flex-col w-full h-full" }, ga = { class: "border
           accessorKey: "taxRatePercent",
           // The header is DATA, not copy: legacy renders the business's tax system
           // code here (ProductTable.vue:366), which is why no locale key exists.
-          header: () => V(
+          header: () => E(
             "div",
             { class: "flex flex-1 justify-end" },
             Rt.value ?? ""
@@ -1956,13 +1973,13 @@ const ya = { class: "py-16 flex flex-col w-full h-full" }, ga = { class: "border
           size: 140,
           cell: (s) => {
             const d = ct(s.row.original);
-            return d.length === 0 ? t("menu.catalog.empty_value") : V(qe, {
+            return d.length === 0 ? t("menu.catalog.empty_value") : E(Ge, {
               kind: "category",
               chips: d.map((P) => ({ key: P, label: P }))
             });
           }
         },
-        ...((e = r.value) == null ? void 0 : e.subcategoryPathColumn.state) === "allowed" ? [
+        ...((e = m.value) == null ? void 0 : e.subcategoryPathColumn.state) === "allowed" ? [
           {
             accessorKey: "subcategoryPath",
             header: () => t("menu.product.table.columns.subcategory"),
@@ -1971,14 +1988,14 @@ const ya = { class: "py-16 flex flex-col w-full h-full" }, ga = { class: "border
             cell: (s) => s.getValue() ?? t("menu.catalog.empty_value")
           }
         ] : [],
-        ...(l = r.value) != null && l.attributeColumnVisible ? [
+        ...(l = m.value) != null && l.attributeColumnVisible ? [
           {
             id: "tagging",
             accessorKey: "attributeTags",
             header: () => t("menu.product.table.columns.tagging"),
             enableSorting: !1,
             size: 140,
-            cell: (s) => V(qe, {
+            cell: (s) => E(Ge, {
               kind: "tagging",
               chips: s.row.original.attributeTags
             })
@@ -1993,10 +2010,10 @@ const ya = { class: "py-16 flex flex-col w-full h-full" }, ga = { class: "border
           size: 140,
           cell: (s) => {
             const d = s.getValue();
-            return d === null ? t("menu.catalog.empty_value") : V(
-              re.FmChip,
+            return d === null ? t("menu.catalog.empty_value") : E(
+              pe.FmChip,
               { compact: !0, class: "fm-typo-en-body-md-600 !px-4" },
-              () => t(Ne[d])
+              () => t(Ie[d])
             );
           }
         },
@@ -2004,12 +2021,12 @@ const ya = { class: "py-16 flex flex-col w-full h-full" }, ga = { class: "border
           id: "actions",
           header: () => {
             var s;
-            return V("div", { class: "w-full px-4 flex justify-end" }, [
-              V(re.FmButton, {
+            return E("div", { class: "w-full px-4 flex justify-end" }, [
+              E(pe.FmButton, {
                 prependIcon: "edit",
-                variant: fe.Tertiary,
-                textColor: ye.NeutralGray400,
-                disabled: ((s = r.value) == null ? void 0 : s.bulkEdit.state) !== "allowed",
+                variant: be.Tertiary,
+                textColor: ve.NeutralGray400,
+                disabled: ((s = m.value) == null ? void 0 : s.bulkEdit.state) !== "allowed",
                 "aria-label": t("menu.product.table.bulk_edit.title"),
                 onClick: Dt
               })
@@ -2020,7 +2037,7 @@ const ya = { class: "py-16 flex flex-col w-full h-full" }, ga = { class: "border
           meta: { textAlign: "right", headerClass: "py-4", cellClass: "pl-16" },
           cell: (s) => {
             const d = s.row.original, P = [
-              V(re.FmButton, {
+              E(pe.FmButton, {
                 icon: "overview",
                 variant: "tertiary",
                 textColor: "neutral-gray-400",
@@ -2028,27 +2045,27 @@ const ya = { class: "py-16 flex flex-col w-full h-full" }, ga = { class: "border
                   label: t("menu.product.overview.title"),
                   name: d.name
                 }),
-                onClick: we(() => Bt(d), ["stop"])
+                onClick: $e(() => Gt(d), ["stop"])
               })
             ];
             return d.remove.state !== "hidden" && P.push(
-              V(re.FmButton, {
+              E(pe.FmButton, {
                 icon: "delete",
                 variant: "tertiary",
                 textColor: "neutral-gray-400",
                 disabled: d.remove.state !== "allowed",
-                title: d.remove.state === "disabled" ? h(d.remove.reason) : void 0,
+                title: d.remove.state === "disabled" ? x(d.remove.reason) : void 0,
                 "aria-label": t("menu.common.labels.a11y_labelled_name", {
                   label: t("menu.common.actions.remove"),
                   name: d.name
                 }),
-                onClick: we(() => rt(d), ["stop"])
+                onClick: $e(() => rt(d), ["stop"])
               })
-            ), V("div", { class: "flex justify-end gap-4" }, P);
+            ), E("div", { class: "flex justify-end gap-4" }, P);
           }
         }
       ];
-    }), Ht = b(() => [
+    }), Xt = v(() => [
       {
         accessorKey: "code",
         header: () => t("menu.product.table.columns.code"),
@@ -2057,10 +2074,10 @@ const ya = { class: "py-16 flex flex-col w-full h-full" }, ga = { class: "border
         cell: (e) => {
           var s;
           const l = e.row.original;
-          return V(Ct, {
+          return E(Ft, {
             modelValue: l.code,
             disabled: l.editCode.state !== "allowed",
-            errorMessages: l.codeIssue ? [h(l.codeIssue)] : [],
+            errorMessages: l.codeIssue ? [x(l.codeIssue)] : [],
             placeholder: ((s = l.inherited) == null ? void 0 : s.code) ?? "",
             "aria-label": t("menu.common.labels.a11y_labelled_name", {
               label: t("menu.product.table.columns.code"),
@@ -2080,11 +2097,11 @@ const ya = { class: "py-16 flex flex-col w-full h-full" }, ga = { class: "border
         size: 250,
         cell: (e) => {
           const l = e.row.original;
-          return V("div", { class: "flex items-center gap-8" }, [
-            V(Ct, {
+          return E("div", { class: "flex items-center gap-8" }, [
+            E(Ft, {
               modelValue: l.name,
               disabled: l.editName.state !== "allowed",
-              errorMessages: l.nameIssue ? [h(l.nameIssue)] : [],
+              errorMessages: l.nameIssue ? [x(l.nameIssue)] : [],
               "aria-label": t("menu.common.labels.a11y_labelled_name", {
                 label: t("menu.product.table.columns.name"),
                 name: l.committedName
@@ -2103,11 +2120,11 @@ const ya = { class: "py-16 flex flex-col w-full h-full" }, ga = { class: "border
         meta: { textAlign: "right" },
         header: () => {
           var e;
-          return V(
+          return E(
             "div",
             { class: "w-full flex justify-end" },
             t("menu.product.table.columns.price", {
-              currency: ((e = le.value) == null ? void 0 : e.currencySymbol) ?? ""
+              currency: ((e = ne.value) == null ? void 0 : e.currencySymbol) ?? ""
             })
           );
         },
@@ -2115,8 +2132,8 @@ const ya = { class: "py-16 flex flex-col w-full h-full" }, ga = { class: "border
         size: 140,
         cell: (e) => {
           const l = e.row.original;
-          return V(
-            bl,
+          return E(
+            gl,
             {
               modelValue: l.priceAmount,
               commitOnInput: !0,
@@ -2140,8 +2157,8 @@ const ya = { class: "py-16 flex flex-col w-full h-full" }, ga = { class: "border
             },
             l.priceIssue ? {
               "helper-text": () => [
-                V("span", { class: "block" }, h(l.priceIssue)),
-                V(
+                E("span", { class: "block" }, x(l.priceIssue)),
+                E(
                   "span",
                   { class: "block" },
                   t("menu.product.table.validation.price_min")
@@ -2156,10 +2173,10 @@ const ya = { class: "py-16 flex flex-col w-full h-full" }, ga = { class: "border
         meta: { textAlign: "right" },
         header: () => {
           var e;
-          return V(
+          return E(
             "div",
             { class: "w-full flex justify-end" },
-            ((e = le.value) == null ? void 0 : e.taxSystemCode) ?? ""
+            ((e = ne.value) == null ? void 0 : e.taxSystemCode) ?? ""
           );
         },
         enableSorting: !1,
@@ -2167,8 +2184,8 @@ const ya = { class: "py-16 flex flex-col w-full h-full" }, ga = { class: "border
         cell: (e) => {
           var s, d;
           const l = e.row.original;
-          return V(re.FmSelect, {
-            items: (((s = le.value) == null ? void 0 : s.taxOptions) ?? []).map((P) => ({
+          return E(pe.FmSelect, {
+            items: (((s = ne.value) == null ? void 0 : s.taxOptions) ?? []).map((P) => ({
               label: t("menu.product.table.tax_option_label", {
                 name: P.name,
                 percent: lt(P.percent)
@@ -2179,7 +2196,7 @@ const ya = { class: "py-16 flex flex-col w-full h-full" }, ga = { class: "border
             disabled: l.editTax.state !== "allowed",
             shiftMenu: !0,
             "aria-label": t("menu.common.labels.a11y_labelled_name", {
-              label: ((d = le.value) == null ? void 0 : d.taxSystemCode) ?? "",
+              label: ((d = ne.value) == null ? void 0 : d.taxSystemCode) ?? "",
               name: l.committedName
             }),
             "onUpdate:modelValue": (P) => {
@@ -2197,11 +2214,11 @@ const ya = { class: "py-16 flex flex-col w-full h-full" }, ga = { class: "border
         cell: (e) => {
           var s;
           const l = e.row.original;
-          return V(
-            $l,
+          return E(
+            Il,
             {
-              items: (((s = le.value) == null ? void 0 : s.categoryOptions) ?? []).map((d) => ({
-                label: B(d),
+              items: (((s = ne.value) == null ? void 0 : s.categoryOptions) ?? []).map((d) => ({
+                label: D(d),
                 value: d.id
               })),
               hideChips: !0,
@@ -2218,7 +2235,7 @@ const ya = { class: "py-16 flex flex-col w-full h-full" }, ga = { class: "border
               }
             },
             {
-              default: () => V(
+              default: () => E(
                 "div",
                 {
                   class: [
@@ -2228,10 +2245,10 @@ const ya = { class: "py-16 flex flex-col w-full h-full" }, ga = { class: "border
                 },
                 l.categoryIds.length ? l.categoryIds.map((d) => {
                   var de;
-                  const P = (de = le.value) == null ? void 0 : de.categoryOptions.find(
+                  const P = (de = ne.value) == null ? void 0 : de.categoryOptions.find(
                     (me) => me.id === d
                   );
-                  return P ? B(P) : "";
+                  return P ? D(P) : "";
                 }).join(t("menu.catalog.list_separator")) : t("menu.product.form.summary.fields.addon")
               )
             }
@@ -2246,11 +2263,11 @@ const ya = { class: "py-16 flex flex-col w-full h-full" }, ga = { class: "border
         cell: (e) => {
           var s;
           const l = e.row.original;
-          return V(
-            re.FmSelect,
+          return E(
+            pe.FmSelect,
             {
-              items: (((s = le.value) == null ? void 0 : s.subcategoryOptions) ?? []).map((d) => ({
-                label: B(d),
+              items: (((s = ne.value) == null ? void 0 : s.subcategoryOptions) ?? []).map((d) => ({
+                label: D(d),
                 value: d.id
               })),
               multiselect: !0,
@@ -2270,7 +2287,7 @@ const ya = { class: "py-16 flex flex-col w-full h-full" }, ga = { class: "border
               }
             },
             l.subcategoryIds.length ? {
-              default: () => V(
+              default: () => E(
                 "div",
                 {
                   class: [
@@ -2280,10 +2297,10 @@ const ya = { class: "py-16 flex flex-col w-full h-full" }, ga = { class: "border
                 },
                 l.subcategoryIds.map((d) => {
                   var de;
-                  const P = (de = le.value) == null ? void 0 : de.subcategoryOptions.find(
+                  const P = (de = ne.value) == null ? void 0 : de.subcategoryOptions.find(
                     (me) => me.id === d
                   );
-                  return P ? B(P) : "";
+                  return P ? D(P) : "";
                 }).filter(Boolean).join("/")
               )
             } : void 0
@@ -2299,9 +2316,9 @@ const ya = { class: "py-16 flex flex-col w-full h-full" }, ga = { class: "border
         cell: (e) => {
           var s;
           const l = e.row.original;
-          return V(re.FmSelect, {
-            items: (((s = le.value) == null ? void 0 : s.orderFromOptions) ?? []).map((d) => ({
-              label: t(Ne[d]),
+          return E(pe.FmSelect, {
+            items: (((s = ne.value) == null ? void 0 : s.orderFromOptions) ?? []).map((d) => ({
+              label: t(Ie[d]),
               value: d
             })),
             modelValue: l.orderFrom,
@@ -2321,277 +2338,297 @@ const ya = { class: "py-16 flex flex-col w-full h-full" }, ga = { class: "border
     ]);
     function mt() {
       var e;
-      ke == null || ke(), ke = null, (e = ve.value) == null || e.dispose(), ve.value = null, be == null || be.dispose(), be = null, Ee.value = { status: "loading" };
+      we == null || we(), we = null, (e = ye.value) == null || e.dispose(), ye.value = null, ge == null || ge.dispose(), ge = null, Ee.value = { status: "loading" };
     }
-    return ge(Ie, (e) => {
+    return _e(Se, (e) => {
       e || mt();
-    }), ge(Ke, (e) => {
-      e || Qe();
-    }), el(() => {
-      ue(), mt(), Qe(), Ae();
+    }), _e(Be, (e) => {
+      e || Ze();
+    }), ll(() => {
+      q(), mt(), Ze(), Te();
     }), (e, l) => {
       var pt;
-      const s = U("FmButton"), d = U("FmMenuItem"), P = U("FmBottomSheet"), de = U("FmMenu"), me = U("FmCircularProgress"), Wt = U("FmIcon"), Xt = U("FmSearch"), dt = U("FmTable"), Yt = U("FmChip");
-      return o(), F(vl, {
+      const s = T("FmButton"), d = T("FmBottomSheet"), P = T("FmMenuItem"), de = T("FmMenu"), me = T("FmCircularProgress"), Yt = T("FmIcon"), Jt = T("FmSearch"), dt = T("FmTable");
+      return o(), F(bl, {
         class: "h-[calc(100dvh-56px)]",
-        heading: e.catalogPage ? ((pt = r.value) == null ? void 0 : pt.scope.catalogLabel) ?? a(t)("menu.common.labels.main") : a(t)("menu.products.title")
+        heading: e.catalogPage ? ((pt = m.value) == null ? void 0 : pt.scope.catalogLabel) ?? a(t)("menu.common.labels.main") : a(t)("menu.products.title")
       }, {
         "prepend-heading": A(() => [
-          Ze(e.$slots, "prepend-heading")
+          qe(e.$slots, "prepend-heading")
         ]),
         "append-heading": A(() => [
-          u("div", lo, [
-            e.catalogPage ? M("", !0) : (o(), y("div", ao, [
-              u("div", oo, [
-                u("p", no, O(a(L)(Pe.value)), 1)
+          i("div", no, [
+            e.catalogPage ? M("", !0) : (o(), f("div", so, [
+              i("div", ro, [
+                i("p", io, L(a($)(je.value)), 1)
               ])
             ])),
-            u("div", so, [
-              !D.value && !e.catalogPage && j.value ? (o(), F(rl, {
+            i("div", uo, [
+              !O.value && !e.catalogPage && oe.value ? (o(), F(ul, {
                 key: 0,
-                "can-open": j.value,
+                "can-open": oe.value,
                 "listen-for-message": !1
               }, {
-                default: A(({ trigger: pe }) => [
-                  v(s, {
-                    "bg-color": a(ye).NeutralGray100,
+                default: A(({ trigger: ie }) => [
+                  y(s, {
+                    "bg-color": a(ve).NeutralGray100,
                     label: a(t)("menu.tree_editor.title"),
-                    "text-color": a(ye).TypoSecondary,
-                    variant: a(fe).Primary,
-                    onClick: pe
+                    "text-color": a(ve).TypoSecondary,
+                    variant: a(be).Primary,
+                    onClick: ie
                   }, null, 8, ["bg-color", "label", "text-color", "variant", "onClick"])
                 ]),
                 _: 1
               }, 8, ["can-open"])) : M("", !0),
-              !D.value && !e.catalogPage && f.value ? (o(), y(Q, { key: 1 }, [
-                v(s, {
+              !O.value && !e.catalogPage && R.value ? (o(), f(Q, { key: 1 }, [
+                y(s, {
                   label: a(t)("menu.products.actions.export"),
-                  "bg-color": a(ye).NeutralGray100,
-                  "text-color": a(ye).TypoSecondary,
-                  variant: a(fe).Primary,
-                  onClick: ae
+                  "bg-color": a(ve).NeutralGray100,
+                  "text-color": a(ve).TypoSecondary,
+                  variant: a(be).Primary,
+                  onClick: K
                 }, null, 8, ["label", "bg-color", "text-color", "variant"]),
-                v(s, {
+                y(s, {
                   label: a(t)("menu.products.actions.import"),
-                  "bg-color": a(ye).NeutralGray100,
-                  "text-color": a(ye).TypoSecondary,
-                  variant: a(fe).Primary,
-                  onClick: p
+                  "bg-color": a(ve).NeutralGray100,
+                  "text-color": a(ve).TypoSecondary,
+                  variant: a(be).Primary,
+                  onClick: S
                 }, null, 8, ["label", "bg-color", "text-color", "variant"])
               ], 64)) : M("", !0),
-              D.value && !e.catalogPage && f.value ? (o(), F(P, {
+              O.value && !e.catalogPage && R.value ? (o(), F(d, {
                 key: 2,
-                modelValue: N.value,
-                "onUpdate:modelValue": l[2] || (l[2] = (pe) => N.value = pe),
+                modelValue: r.value,
+                "onUpdate:modelValue": l[2] || (l[2] = (ie) => r.value = ie),
                 "dismiss-away": "",
                 "no-header": "",
                 "z-index": 1001
               }, {
                 "bottom-sheet-button": A(() => [
-                  v(s, {
+                  y(s, {
                     "aria-label": a(t)("menu.products.actions.more"),
                     icon: "more_vert",
                     variant: "tertiary",
-                    onClick: l[0] || (l[0] = we((pe) => N.value = !N.value, ["stop"]))
+                    onClick: l[0] || (l[0] = $e((ie) => r.value = !r.value, ["stop"]))
                   }, null, 8, ["aria-label"])
                 ]),
                 default: A(() => [
-                  u("div", {
-                    onClick: l[1] || (l[1] = (pe) => N.value = !1)
+                  i("div", {
+                    onClick: l[1] || (l[1] = (ie) => r.value = !1)
                   }, [
-                    v(d, {
-                      label: a(t)("menu.products.actions.export"),
-                      onClick: ae
-                    }, null, 8, ["label"]),
-                    v(d, {
-                      label: a(t)("menu.products.actions.import"),
-                      onClick: p
-                    }, null, 8, ["label"])
+                    (o(!0), f(Q, null, ue([
+                      {
+                        label: a(t)("menu.products.actions.export"),
+                        run: K
+                      },
+                      {
+                        label: a(t)("menu.products.actions.import"),
+                        run: S
+                      }
+                    ], (ie) => (o(), f("div", {
+                      key: ie.label,
+                      class: "py-8 px-12 hover:bg-fm-color-neutral-gray-100",
+                      "data-test": "product-sheet-item",
+                      onClick: ie.run
+                    }, [
+                      i("div", mo, L(ie.label), 1)
+                    ], 8, co))), 128))
                   ])
                 ]),
                 _: 1
               }, 8, ["modelValue"])) : M("", !0),
-              !D.value && !e.catalogPage && g.value.length ? (o(), F(de, {
+              !O.value && !W.value && !e.catalogPage && g.value.length ? (o(), F(de, {
                 key: 3,
                 "close-on-click": ""
               }, {
                 "menu-button": A(() => [
-                  v(s, {
+                  y(s, {
                     label: a(t)("menu.products.actions.more"),
                     "append-icon": "keyboard_arrow_down",
-                    "bg-color": a(ye).NeutralGray100,
-                    "text-color": a(ye).TypoSecondary,
-                    variant: a(fe).Primary
+                    "bg-color": a(ve).NeutralGray100,
+                    "text-color": a(ve).TypoSecondary,
+                    variant: a(be).Primary
                   }, null, 8, ["label", "bg-color", "text-color", "variant"])
                 ]),
                 default: A(() => [
-                  (o(!0), y(Q, null, ie(g.value, (pe) => (o(), F(d, {
-                    key: pe.id,
+                  (o(!0), f(Q, null, ue(g.value, (ie) => (o(), F(P, {
+                    key: ie.id,
                     class: "px-16 py-8",
-                    label: pe.label,
-                    onClick: pe.run
+                    label: ie.label,
+                    onClick: ie.run
                   }, null, 8, ["label", "onClick"]))), 128))
                 ]),
                 _: 1
               })) : M("", !0),
-              u("div", {
-                class: _e(I.value ? $o : "contents")
+              i("div", {
+                class: fe(I.value ? Oo : "contents")
               }, [
-                r.value && !Fe.value && r.value.create.state !== "hidden" ? (o(), F(s, {
+                m.value && !ke.value && m.value.create.state !== "hidden" ? (o(), F(s, {
                   key: 0,
-                  disabled: r.value.create.state !== "allowed",
+                  disabled: m.value.create.state !== "allowed",
                   label: a(t)("menu.products.actions.add"),
                   "prepend-icon": "add",
-                  variant: $.value,
+                  variant: B.value,
                   onClick: nt
-                }, null, 8, ["disabled", "label", "variant"])) : r.value && (!Fe.value || e.catalogPage) && r.value.link.state === "allowed" ? (o(), F(s, {
+                }, null, 8, ["disabled", "label", "variant"])) : m.value && (!ke.value || e.catalogPage) && m.value.link.state === "allowed" ? (o(), F(s, {
                   key: 1,
                   label: a(t)("menu.products.actions.link"),
                   "prepend-icon": "link",
-                  variant: $.value,
-                  onClick: E
-                }, null, 8, ["label", "variant"])) : r.value && (!Fe.value || e.catalogPage) && r.value.applyScheduler.state === "allowed" ? (o(), F(s, {
+                  variant: B.value,
+                  onClick: H
+                }, null, 8, ["label", "variant"])) : m.value && (!ke.value || e.catalogPage) && m.value.applyScheduler.state === "allowed" ? (o(), F(s, {
                   key: 2,
                   label: a(t)("menu.products.actions.apply_scheduler"),
-                  variant: $.value,
-                  onClick: E
+                  variant: B.value,
+                  onClick: H
                 }, null, 8, ["label", "variant"])) : M("", !0)
               ], 2)
             ])
           ])
         ]),
         default: A(() => {
-          var pe, vt, ft, bt, yt, gt, _t, ht, kt, xt;
+          var ie, vt, ft, bt, yt, gt, _t, ht, xt, kt;
           return [
-            Ze(e.$slots, "navigation"),
-            a(Z).status === "error" ? (o(), y("p", ro, O(a(h)(a(Z).error.message)), 1)) : a(Z).status === "unavailable" ? (o(), y("p", io, O(a(h)(a(Z).reason)), 1)) : a(Z).status === "loading" ? (o(), y("div", uo, [
-              v(me, { size: "lg" })
-            ])) : r.value ? (o(), y("div", co, [
-              u("div", mo, [
-                u("div", po, [
-                  v(It, {
+            qe(e.$slots, "banner"),
+            qe(e.$slots, "navigation"),
+            a(j).status === "error" ? (o(), f("p", po, L(a(x)(a(j).error.message)), 1)) : a(j).status === "unavailable" ? (o(), f("p", vo, L(a(x)(a(j).reason)), 1)) : a(j).status === "loading" ? (o(), f("div", fo, [
+              y(me, { size: "lg" })
+            ])) : m.value ? (o(), f("div", {
+              key: 3,
+              class: fe(["relative flex flex-col flex-1 min-h-0 overflow-hidden pt-16 xs:pt-8", O.value && We.value ? "space-y-24" : "space-y-8"])
+            }, [
+              i("div", bo, [
+                i("div", {
+                  class: fe(["flex items-center gap-8 xs:order-3", We.value ? "xs:px-16" : "xs:px-8"]),
+                  "data-test": "product-scope-chips"
+                }, [
+                  y(It, {
                     options: it.value,
-                    "model-value": ((pe = r.value) == null ? void 0 : pe.categoryFilterId) ?? null,
-                    "selected-values": ((vt = r.value) == null ? void 0 : vt.categoryFilterIds) ?? null,
+                    "model-value": ((ie = m.value) == null ? void 0 : ie.categoryFilterId) ?? null,
+                    "selected-values": ((vt = m.value) == null ? void 0 : vt.categoryFilterIds) ?? null,
                     title: a(t)("menu.category.selector.title", {
-                      label: !((bt = (ft = r.value) == null ? void 0 : ft.categoryFilterIds) != null && bt.length) || r.value.categoryFilterIds.length === r.value.categoryOptions.length ? a(t)("menu.category.selector.all") : r.value.categoryFilterIds.length === 1 ? (yt = it.value.find(
-                        (k) => {
-                          var oe;
-                          return k.value === ((oe = r.value) == null ? void 0 : oe.categoryFilterId);
+                      label: !((bt = (ft = m.value) == null ? void 0 : ft.categoryFilterIds) != null && bt.length) || m.value.categoryFilterIds.length === m.value.categoryOptions.length ? a(t)("menu.category.selector.all") : m.value.categoryFilterIds.length === 1 ? (yt = it.value.find(
+                        (h) => {
+                          var ae;
+                          return h.value === ((ae = m.value) == null ? void 0 : ae.categoryFilterId);
                         }
-                      )) == null ? void 0 : yt.label : a(L)(r.value.categoryFilterIds.length)
+                      )) == null ? void 0 : yt.label : a($)(m.value.categoryFilterIds.length)
                     }),
                     checkbox: "",
-                    "onUpdate:selectedValues": l[3] || (l[3] = (k) => e.sdk.item.filterByCategories(k))
+                    "onUpdate:selectedValues": l[3] || (l[3] = (h) => e.sdk.item.filterByCategories(h))
                   }, {
                     default: A(() => {
-                      var k;
+                      var h;
                       return [
-                        (k = r.value) != null && k.attributeOptions.length ? (o(), y("button", {
+                        (h = m.value) != null && h.attributeOptions.length ? (o(), f("button", {
                           key: 0,
                           type: "button",
                           class: "pl-8 flex items-center justify-center border-l border-fm-color-neutral-gray-200",
                           "aria-label": a(t)("menu.product.attributes.filter"),
-                          onClick: we(W, ["stop"])
+                          onClick: $e(se, ["stop"])
                         }, [
-                          v(Wt, {
+                          y(Yt, {
                             name: "filter_alt",
                             outline: "",
                             color: "neutral-gray-400",
                             size: "sm"
                           })
-                        ], 8, vo)) : M("", !0)
+                        ], 8, yo)) : M("", !0)
                       ];
                     }),
                     _: 1
                   }, 8, ["options", "model-value", "selected-values", "title"]),
-                  r.value && r.value.scope.schedulerSelector.state === "allowed" ? (o(), F(It, {
+                  m.value && m.value.scope.schedulerSelector.state === "allowed" ? (o(), F(It, {
                     key: 0,
-                    options: Gt.value,
-                    "model-value": r.value.scope.schedulerId,
+                    options: Ht.value,
+                    "model-value": m.value.scope.schedulerId,
                     title: a(t)("menu.common.labels.scheduler_title", {
-                      label: r.value.scope.schedulerLabel ?? a(t)("menu.common.labels.summary")
+                      label: m.value.scope.schedulerLabel ?? a(t)("menu.common.labels.summary")
                     }),
-                    "onUpdate:modelValue": l[4] || (l[4] = (k) => {
-                      var oe;
+                    "onUpdate:modelValue": l[4] || (l[4] = (h) => {
+                      var ae;
                       return e.sdk.item.selectScope({
-                        catalogId: ((oe = r.value) == null ? void 0 : oe.scope.catalogId) ?? null,
-                        schedulerId: k
+                        catalogId: ((ae = m.value) == null ? void 0 : ae.scope.catalogId) ?? null,
+                        schedulerId: h
                       });
                     })
                   }, null, 8, ["options", "model-value", "title"])) : M("", !0),
-                  v(sl, {
-                    filter: (gt = r.value) == null ? void 0 : gt.restaurantFilter,
-                    onConfirm: l[5] || (l[5] = (k) => e.sdk.item.setRestaurantFilter(k))
+                  y(il, {
+                    filter: (gt = m.value) == null ? void 0 : gt.restaurantFilter,
+                    onConfirm: l[5] || (l[5] = (h) => e.sdk.item.setRestaurantFilter(h))
                   }, null, 8, ["filter"])
-                ]),
-                !Fe.value || (_t = r.value) != null && _t.emptyState.showSearch ? (o(), y("div", fo, [
-                  v(Xt, {
+                ], 2),
+                O.value && !We.value ? (o(), f("div", go)) : M("", !0),
+                !ke.value || (_t = m.value) != null && _t.emptyState.showSearch ? (o(), f("div", _o, [
+                  y(Jt, {
                     autofocus: "",
-                    "model-value": ((ht = r.value) == null ? void 0 : ht.query) ?? "",
+                    "model-value": ((ht = m.value) == null ? void 0 : ht.query) ?? "",
                     placeholder: a(t)("menu.product.table.search.placeholder"),
                     "aria-label": a(t)("menu.common.labels.search"),
-                    "onUpdate:modelValue": l[6] || (l[6] = (k) => m.sdk.item.search(String(k ?? ""), {
-                      formatPrice: (oe) => oe ? a(L)(oe.amount, {
+                    "onUpdate:modelValue": l[6] || (l[6] = (h) => u.sdk.item.search(String(h ?? ""), {
+                      formatPrice: (ae) => ae ? a($)(ae.amount, {
                         style: "currency",
-                        currency: oe.currency,
+                        currency: ae.currency,
                         currencyDisplay: "narrowSymbol"
                       }) : "",
-                      labelOrderFrom: (oe) => a(t)(a(Ne)[oe])
+                      labelOrderFrom: (ae) => a(t)(a(Ie)[ae])
                     }))
                   }, null, 8, ["model-value", "placeholder", "aria-label"])
                 ])) : M("", !0)
               ]),
-              Fe.value && r.value ? (o(), F(a(dl), {
+              ke.value && m.value ? (o(), F(a(vl), {
                 key: 0,
-                title: a(h)(r.value.emptyState.title),
-                subtitle: a(h)(r.value.emptyState.subtitle)
+                title: a(x)(m.value.emptyState.title),
+                subtitle: a(x)(m.value.emptyState.subtitle)
               }, {
                 action: A(() => [
-                  u("div", bo, [
-                    r.value.create.state === "allowed" ? (o(), F(s, {
+                  i("div", ho, [
+                    m.value.create.state === "allowed" ? (o(), F(s, {
                       key: 0,
                       label: a(t)("menu.product.table.empty.actions.add"),
                       "prepend-icon": "add",
                       onClick: nt
-                    }, null, 8, ["label"])) : r.value.link.state === "allowed" ? (o(), F(s, {
+                    }, null, 8, ["label"])) : m.value.link.state === "allowed" ? (o(), F(s, {
                       key: 1,
                       label: a(t)("menu.common.actions.link_product"),
                       "prepend-icon": "link",
-                      onClick: E
-                    }, null, 8, ["label"])) : r.value.applyScheduler.state === "allowed" ? (o(), F(s, {
+                      onClick: H
+                    }, null, 8, ["label"])) : m.value.applyScheduler.state === "allowed" ? (o(), F(s, {
                       key: 2,
                       label: a(t)("menu.common.actions.apply_product"),
-                      onClick: E
+                      onClick: H
                     }, null, 8, ["label"])) : M("", !0),
-                    r.value.emptyState.showImport && f.value ? (o(), F(s, {
+                    m.value.emptyState.showImport && R.value ? (o(), F(s, {
                       key: 3,
                       label: a(t)("menu.product.table.empty.actions.import"),
                       "prepend-icon": "download",
-                      variant: "secondary",
-                      disabled: !J.value,
-                      onClick: p
-                    }, null, 8, ["label", "disabled"])) : M("", !0)
+                      variant: a(be).Primary,
+                      "bg-color": a(ve).NeutralGray100,
+                      "text-color": a(ve).NeutralGray400,
+                      disabled: !c.value,
+                      onClick: S
+                    }, null, 8, ["label", "variant", "bg-color", "text-color", "disabled"])) : M("", !0)
                   ])
                 ]),
                 _: 1
               }, 8, ["title", "subtitle"])) : M("", !0),
-              G.value && r.value ? (o(), F(nl, {
+              k.value && m.value ? (o(), F(rl, {
                 key: 1,
                 ref_key: "filterControl",
-                ref: w,
-                attributes: r.value.attributeOptions,
-                rule: r.value.attributeRule,
-                "onUpdate:rule": l[7] || (l[7] = (k) => e.sdk.item.setAttributeFilter(k))
+                ref: X,
+                class: "xs:px-8",
+                attributes: m.value.attributeOptions,
+                rule: m.value.attributeRule,
+                "onUpdate:rule": l[7] || (l[7] = (h) => e.sdk.item.setAttributeFilter(h))
               }, null, 8, ["attributes", "rule"])) : M("", !0),
-              Be.value.length > 0 ? (o(), y("div", yo, [
-                u("p", go, O(a(t)("menu.product.table.selection.count", {
-                  count: Be.value.length
+              !O.value && ze.value.length > 0 ? (o(), f("div", xo, [
+                i("p", ko, L(a(t)("menu.product.table.selection.count", {
+                  count: ze.value.length
                 })), 1),
-                v(s, {
+                y(s, {
                   label: a(t)("menu.product.table.selection.actions.deselect_all"),
                   variant: "plain",
-                  onClick: We
+                  onClick: Xe
                 }, null, 8, ["label"]),
                 Le.value.state !== "hidden" ? (o(), F(s, {
                   key: 0,
@@ -2603,136 +2640,136 @@ const ya = { class: "py-16 flex flex-col w-full h-full" }, ga = { class: "border
                   "border-color": "system-error-300",
                   "text-color": "system-error-300",
                   disabled: Le.value.state !== "allowed",
-                  title: Le.value.state === "disabled" ? a(h)(Le.value.reason) : void 0,
-                  onClick: Kt
+                  title: Le.value.state === "disabled" ? a(x)(Le.value.reason) : void 0,
+                  onClick: qt
                 }, null, 8, ["label", "aria-label", "disabled", "title"])) : M("", !0)
               ])) : M("", !0),
-              !D.value && !Fe.value ? (o(), F(dt, {
+              !O.value && !ke.value ? (o(), F(dt, {
                 key: 3,
-                modelValue: ze.value,
-                "onUpdate:modelValue": l[8] || (l[8] = (k) => ze.value = k),
+                modelValue: De.value,
+                "onUpdate:modelValue": l[8] || (l[8] = (h) => De.value = h),
                 class: "min-h-0 flex-1",
-                "column-defs": qt.value,
-                "row-data": Tt.value,
-                "page-size": Ce.value.length,
-                "get-row-id": (k) => k.id,
+                "column-defs": Wt.value,
+                "row-data": Nt.value,
+                "page-size": Pe.value.length,
+                "get-row-id": (h) => h.id,
                 selection: "multiple",
-                virtual: Ce.value.length > Et,
+                virtual: Pe.value.length > Mt,
                 "virtual-row-height": 91,
                 "hide-footer": "",
                 "pin-header-row": "",
                 "shrink-at": !1,
-                onRowClick: l[9] || (l[9] = (k) => st(k.original))
-              }, null, 8, ["modelValue", "column-defs", "row-data", "page-size", "get-row-id", "virtual"])) : Fe.value ? M("", !0) : (o(), y("div", _o, [
-                (o(!0), y(Q, null, ie(Ce.value, (k) => {
-                  var oe, De;
-                  return o(), y("div", {
-                    key: k.id,
-                    class: "max-w-full py-12 px-16 flex items-center gap-16"
-                  }, [
-                    u("div", ho, [
-                      u("div", ko, [
-                        v(s, {
-                          label: k.name,
-                          variant: "plain",
-                          onClick: we((Ve) => st(k), ["stop"])
-                        }, null, 8, ["label", "onClick"]),
-                        k.orderFrom ? (o(), F(Yt, { key: 0 }, {
-                          default: A(() => [
-                            tl(O(a(t)(a(gl)[k.orderFrom])), 1)
-                          ]),
-                          _: 2
-                        }, 1024)) : M("", !0)
+                onRowClick: l[9] || (l[9] = (h) => st(h.original))
+              }, null, 8, ["modelValue", "column-defs", "row-data", "page-size", "get-row-id", "virtual"])) : ke.value ? M("", !0) : (o(), f("div", wo, [
+                (o(!0), f(Q, null, ue(Pe.value, (h) => (o(), f("div", {
+                  key: h.id,
+                  class: "max-w-full py-12 px-16 flex items-center gap-16 cursor-pointer",
+                  "data-test": "product-phone-row",
+                  onClick: (ae) => st(h)
+                }, [
+                  i("div", Fo, [
+                    y(Pt, {
+                      src: h.thumbnailUrl,
+                      alt: h.name
+                    }, null, 8, ["src", "alt"]),
+                    i("div", $o, [
+                      i("div", So, [
+                        i("p", Io, L(h.name), 1),
+                        h.orderFrom ? (o(), F(Fl, {
+                          key: 0,
+                          "order-from": h.orderFrom
+                        }, null, 8, ["order-from"])) : M("", !0)
                       ]),
-                      u("p", xo, O(tt((oe = k.price) == null ? void 0 : oe.amount, ((De = k.price) == null ? void 0 : De.currency) ?? et.value)), 1),
-                      u("p", wo, O(a(t)("menu.common.labels.a11y_labelled_name", {
+                      i("p", Vo, L(jt(h)), 1),
+                      i("p", Po, L(a(t)("menu.common.labels.a11y_labelled_name", {
                         label: a(t)("menu.product.table.columns.code"),
-                        name: k.code || a(t)("menu.catalog.empty_value")
+                        name: h.code || a(t)("menu.catalog.empty_value")
                       })), 1),
-                      v(qe, {
+                      y(Ge, {
                         kind: "category",
-                        chips: ct(k).map((Ve) => ({
-                          key: Ve,
-                          label: Ve
+                        chips: ct(h).map((ae) => ({
+                          key: ae,
+                          label: ae
                         }))
                       }, null, 8, ["chips"]),
-                      v(qe, {
+                      y(Ge, {
                         kind: "tagging",
-                        chips: k.attributeTags
+                        chips: h.attributeTags
                       }, null, 8, ["chips"])
-                    ]),
-                    k.remove.state !== "hidden" ? (o(), F(s, {
-                      key: 0,
-                      disabled: k.remove.state !== "allowed",
-                      title: k.remove.state === "disabled" ? a(h)(k.remove.reason) : void 0,
-                      "prepend-icon": "delete",
-                      variant: "tertiary",
-                      "aria-label": a(t)("menu.common.labels.a11y_labelled_name", {
-                        label: a(t)("menu.common.actions.remove"),
-                        name: k.name
-                      }),
-                      onClick: we((Ve) => rt(k), ["stop"])
-                    }, null, 8, ["disabled", "title", "aria-label", "onClick"])) : M("", !0)
-                  ]);
-                }), 128))
+                    ])
+                  ]),
+                  h.remove.state !== "hidden" ? (o(), F(s, {
+                    key: 0,
+                    disabled: h.remove.state !== "allowed",
+                    title: h.remove.state === "disabled" ? a(x)(h.remove.reason) : void 0,
+                    "prepend-icon": "delete",
+                    variant: "tertiary",
+                    "text-color": a(ve).NeutralGray400,
+                    "aria-label": a(t)("menu.common.labels.a11y_labelled_name", {
+                      label: a(t)("menu.common.actions.remove"),
+                      name: h.name
+                    }),
+                    onClick: $e((ae) => rt(h), ["stop"])
+                  }, null, 8, ["disabled", "title", "text-color", "aria-label", "onClick"])) : M("", !0)
+                ], 8, Co))), 128))
               ])),
-              a(Z).status === "ready" && a(Z).stale ? (o(), y("div", Co, [
-                v(me, { size: "lg" })
+              a(j).status === "ready" && a(j).stale ? (o(), f("div", Lo, [
+                y(me, { size: "lg" })
               ])) : M("", !0)
-            ])) : M("", !0),
-            v(_l, {
-              modelValue: z.value,
-              "onUpdate:modelValue": l[10] || (l[10] = (k) => z.value = k),
-              catalogue: ee.value,
-              "selected-product-ids": ((kt = r.value) == null ? void 0 : kt.availableItemIds) ?? [],
-              "rules-session": Y.value,
-              "selection-session": x.value,
-              "rules-view": T.value.status === "ready" ? T.value.value : null,
+            ], 2)) : M("", !0),
+            y(sl, {
+              modelValue: J.value,
+              "onUpdate:modelValue": l[10] || (l[10] = (h) => J.value = h),
+              catalogue: V.value,
+              "selected-product-ids": ((xt = m.value) == null ? void 0 : xt.availableItemIds) ?? [],
+              "rules-session": w.value,
+              "selection-session": N.value,
+              "rules-view": le.value.status === "ready" ? le.value.value : null,
               title: a(t)("menu.link_product.title"),
-              onSubmit: he,
-              onSubmitRules: ne
+              onSubmit: re,
+              onSubmitRules: Ve
             }, null, 8, ["modelValue", "catalogue", "selected-product-ids", "rules-session", "selection-session", "rules-view", "title"]),
-            v(yl, {
-              open: Ie.value,
-              "onUpdate:open": l[11] || (l[11] = (k) => Ie.value = k),
+            y(_l, {
+              open: Se.value,
+              "onUpdate:open": l[11] || (l[11] = (h) => Se.value = h),
               sdk: e.sdk,
-              session: ve.value,
+              session: ye.value,
               validation: a(at),
               view: Oe.value,
-              onSelectScope: zt,
-              onSubmit: Nt
+              onSelectScope: Kt,
+              onSubmit: Bt
             }, null, 8, ["open", "sdk", "session", "validation", "view"]),
-            v(He, {
-              show: Xe.value,
+            y(He, {
+              show: Ye.value && !O.value,
               title: a(t)("menu.product.table.bulk_edit.title"),
               "primary-action": {
                 label: a(t)("menu.product.table.bulk_edit.actions.save"),
-                disabled: ((xt = le.value) == null ? void 0 : xt.submit.state) !== "allowed"
+                disabled: ((kt = ne.value) == null ? void 0 : kt.submit.state) !== "allowed"
               },
               "secondary-actions": [
                 {
                   label: a(t)("menu.product.table.bulk_edit.actions.reset_all"),
                   click: () => {
-                    var k;
-                    return (k = ce.value) == null ? void 0 : k.reset();
+                    var h;
+                    return (h = ce.value) == null ? void 0 : h.reset();
                   }
                 },
                 { label: a(t)("menu.common.actions.cancel"), click: ot }
               ],
-              onOnPrimary: jt,
+              onOnPrimary: zt,
               onOnCancel: ot
             }, {
               default: A(() => {
-                var k, oe, De;
+                var h, ae, wt;
                 return [
-                  u("div", Fo, [
-                    v(dt, {
+                  i("div", Eo, [
+                    y(dt, {
                       class: "min-w-[1280px]",
-                      "column-defs": Ht.value,
-                      "row-data": [...((k = le.value) == null ? void 0 : k.rows) ?? []],
-                      "page-size": ((oe = le.value) == null ? void 0 : oe.rows.length) ?? 0,
-                      "get-row-id": (Ve) => Ve.id,
-                      virtual: (((De = le.value) == null ? void 0 : De.rows.length) ?? 0) > Et,
+                      "column-defs": Xt.value,
+                      "row-data": [...((h = ne.value) == null ? void 0 : h.rows) ?? []],
+                      "page-size": ((ae = ne.value) == null ? void 0 : ae.rows.length) ?? 0,
+                      "get-row-id": (Qt) => Qt.id,
+                      virtual: (((wt = ne.value) == null ? void 0 : wt.rows.length) ?? 0) > Mt,
                       "virtual-row-height": 48,
                       "hide-footer": "",
                       "pin-header-row": "",
@@ -2743,14 +2780,14 @@ const ya = { class: "py-16 flex flex-col w-full h-full" }, ga = { class: "border
               }),
               _: 1
             }, 8, ["show", "title", "primary-action", "secondary-actions"]),
-            v(Bl, {
-              modelValue: Ke.value,
-              "onUpdate:modelValue": l[12] || (l[12] = (k) => Ke.value = k),
-              state: Je.value
+            y(Gl, {
+              modelValue: Be.value,
+              "onUpdate:modelValue": l[12] || (l[12] = (h) => Be.value = h),
+              state: Qe.value
             }, null, 8, ["modelValue", "state"]),
-            v(to, {
+            y(oo, {
               ref_key: "importExport",
-              ref: c,
+              ref: p,
               sdk: e.sdk
             }, null, 8, ["sdk"])
           ];
@@ -2761,5 +2798,5 @@ const ya = { class: "py-16 flex flex-col w-full h-full" }, ga = { class: "border
   }
 });
 export {
-  Xo as _
+  on as _
 };