@multiplatform.one/backoffice 6.3.0

package/dist/cjs/chrome/BackofficeAwesomebar.native.js

@@ -0,0 +1,106 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var BackofficeAwesomebar_exports = {};
+__export(BackofficeAwesomebar_exports, {
+  BackofficeAwesomebar: () => BackofficeAwesomebar
+});
+module.exports = __toCommonJS(BackofficeAwesomebar_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("@phosphor-icons/react");
+var import_components = require("@multiplatform.one/components");
+var import_theme = require("@multiplatform.one/theme");
+var import_react2 = require("react");
+var import_react_i18next = require("react-i18next");
+var import_i18n = require("../i18n/index.native.js");
+var import_CommandPalette = require("./CommandPalette.native.js");
+function getModLabel() {
+  var _navigator_platform;
+  if (typeof navigator !== "undefined" && /Mac|iPhone|iPad|iPod/i.test(String((_navigator_platform = navigator.platform) !== null && _navigator_platform !== void 0 ? _navigator_platform : ""))) {
+    return "\u2318";
+  }
+  return "Ctrl";
+}
+function BackofficeAwesomebar() {
+  var {
+    focusRef
+  } = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+  var {
+    t
+  } = (0, import_react_i18next.useTranslation)(import_i18n.BACKOFFICE_I18N_NAMESPACE);
+  var isCompact = (0, import_theme.useLayoutSizeClass)() === "compact";
+  var [open, setOpen] = (0, import_react2.useState)(false);
+  (0, import_react2.useImperativeHandle)(focusRef, function () {
+    return {
+      focus: function focus() {
+        return setOpen(true);
+      }
+    };
+  }, []);
+  var label = t("awesomebar.triggerLabel", "Search");
+  var showShortcutHint = import_components.isWeb && !isCompact;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.Button, {
+      size: "$3",
+      flex: 1,
+      minWidth: 0,
+      justifyContent: "flex-start",
+      "aria-label": label,
+      "aria-haspopup": "dialog",
+      "aria-expanded": open,
+      onPress: function onPress() {
+        return setOpen(true);
+      },
+      "data-testid": "backoffice-awesomebar",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.MagnifyingGlassIcon, {
+        size: 16
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+        flex: 1,
+        minWidth: 0,
+        numberOfLines: 1,
+        textAlign: "left",
+        color: "$color10",
+        children: label
+      }), showShortcutHint && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
+        borderWidth: 1,
+        borderColor: "$borderColor",
+        backgroundColor: "$color2",
+        borderRadius: "$2",
+        paddingHorizontal: "$1.5",
+        flexShrink: 0,
+        "aria-hidden": true,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.SizableText, {
+          size: "$1",
+          fontWeight: "600",
+          color: "$color11",
+          children: `${getModLabel()} K`
+        })
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_CommandPalette.CommandPalette, {
+      open,
+      onOpenChange: setOpen
+    })]
+  });
+}
+//# sourceMappingURL=BackofficeAwesomebar.native.js.map

package/dist/cjs/chrome/BackofficeAwesomebar.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","BackofficeAwesomebar_exports","__export","BackofficeAwesomebar","module","exports","import_jsx_runtime","require","import_react","import_components","import_theme","import_react2","import_react_i18next","import_i18n","import_CommandPalette","getModLabel","_navigator_platform","navigator","test","String","platform","focusRef","arguments","length","t","useTranslation","BACKOFFICE_I18N_NAMESPACE","isCompact","useLayoutSizeClass","open","setOpen","useState","useImperativeHandle","focus","label","showShortcutHint","isWeb","jsxs","Fragment","children","Button","size","flex","minWidth","justifyContent","onPress","jsx","MagnifyingGlassIcon","Text","numberOfLines","textAlign","color"],"sources":["../../../src/chrome/BackofficeAwesomebar.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,4BAAA;AAAAC,QAAA,CAAAD,4BAAA;EAAAE,oBAAA,EAAAA,CAAA,KAAAA;AAAA;AAWAC,MAAA,CAAAC,OAAA,GAAAT,YAAoC,CAAAK,4BAAA;AACpC,IAAAK,kBAAA,GAAyDC,OAAA;AACzD,IAAAC,YAAA,GAAmCD,OAAA;AAEnC,IAAAE,iBAA8C,GAAAF,OAAA;AAC9C,IAAAG,YAAA,GAAAH,OAAA,CAA+B;AAC/B,IAAAI,aAAA,GAA0CJ,OAAA;AAC1C,IAAAK,oBAAA,GAAAL,OAA+B;AAmC3B,IAAAM,WAAA,GAAAN,OAAA;AArBJ,IAAAO,qBAA+B,GAAAP,OAAA;AAC7B,SACEQ,WAAOA,CAAA;EAGP,IAAAC,mBAAO;EACT,WAAAC,SAAA,4CAAAC,IAAA,CAAAC,MAAA,EAAAH,mBAAA,GAAAC,SAAA,CAAAG,QAAA,cAAAJ,mBAAA,cAAAA,mBAAA;IACA,OAAO;EACT;EAEO,OAAS;AACd;AACA,SAAMb,oBAAYA,CAAA;EAClB;IAAMkB;EAAO,IAAAC,SAAW,CAAAC,MAAA,QAAAD,SAAS,QAAK,SAAAA,SAAA;EAEtC;IAAAE;EAAA,QAAAZ,oBAAA,CAAAa,cAA8B,EAAAZ,WAAS,CAAOa,yBAAyB,CAAC;EAExE,IAAAC,SAAM,GAAU,IAAAjB,YAAA,CAAAkB,kBAAmC;EACnD,KAAAC,IAAM,EAAAC,OAAA,QAAmBnB,aAAA,CAAAoB,QAAA,OAAU;EAEnC,IAAApB,aACE,CAAAqB,mBAAA,EAAAX,QAAA;IACE;MAACY,KAAA,WAAAA,MAAA;QAAA,OAAAH,OAAA;MAAA;IACM;EACC,MACN;EAAU,IAAAI,KACV,GAAAV,CAAA,0BAAe;EAAA,IAAAW,gBACH,GAAA1B,iBAAA,CAAA2B,KAAA,KAAAT,SAAA;EAAA,OACZ,eAAc,IAAArB,kBAAA,CAAA+B,IAAA,EAAA/B,kBAAA,CAAAgC,QAAA;IAAAC,QACd,GAAe,eACN,CAAM,GAAAjC,kBAAY,CAAA+B,IAAA,EAAA5B,iBAAA,CAAA+B,MAAA;MAC3BC,IAAA;MAEAC,IAAA;MAAAC,QAAA;MAA+BC,cAC/B;MAEA,YACC,EAAAV,KAAA;MACC,eAAC;MAAA,iBAAAL,IAAA;MAAAgB,OACC,WAAAA,OAAaA,CAAA;QAAA,OACbf,OAAA,KAAY;MAAA;MACI,aAChB,yBAAa;MAAAS,QACb,GAAkB,eACN,IAAAjC,kBAAA,CAAAwC,GAAA,EAAAtC,YAAA,CAAAuC,mBAAA;QAAAN,IACZ;MAAW,IAIX,mBAAAnC,kBAAA,CAAAwC,GAAA,EAAArC,iBAAA,CAAAuC,IAAA;QACFN,IAAA;QAAAC,QAAA;QAAAM,aAAA;QAEJC,SAAA;QACAC,KAAA;QACFZ,QAAA,EAAAL;MAEJ,I","ignoreList":[]}

package/dist/cjs/chrome/CommandPalette.cjs

@@ -0,0 +1,453 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var CommandPalette_exports = {};
+__export(CommandPalette_exports, {
+  CommandPalette: () => CommandPalette
+});
+module.exports = __toCommonJS(CommandPalette_exports);
+var import_components = require("@multiplatform.one/components");
+var import_forms = require("@multiplatform.one/forms");
+var import_frappe_ui = require("@multiplatform.one/frappe-ui");
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("react");
+var import_react_i18next = require("react-i18next");
+var import_BackofficeProvider = require("../config/BackofficeProvider.cjs");
+var import_i18n = require("../i18n/index.cjs");
+var import_command_palette_model = require("./command-palette-model.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const PANEL_WIDTH = 640;
+const RESULTS_MAX_HEIGHT = 400;
+const ROW_MIN_HEIGHT = 44;
+const LISTBOX_ID = "backoffice-command-palette-listbox";
+const optionId = index => `backoffice-command-palette-option-${index}`;
+function CommandPalette({
+  open,
+  onOpenChange
+}) {
+  const {
+    t
+  } = (0, import_react_i18next.useTranslation)(import_i18n.BACKOFFICE_I18N_NAMESPACE);
+  const navigator = (0, import_BackofficeProvider.useBackofficeNavigator)();
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const isCompact = (0, import_theme.useLayoutSizeClass)() === "compact";
+  const asSheet = !import_components.isWeb || isCompact;
+  const [query, setQuery] = (0, import_react.useState)("");
+  const [debouncedQuery, setDebouncedQuery] = (0, import_react.useState)("");
+  const [highlight, setHighlight] = (0, import_react.useState)(0);
+  const model = (0, import_command_palette_model.useCommandPaletteModel)({
+    query,
+    debouncedQuery,
+    open
+  });
+  const {
+    items
+  } = model;
+  const rootRef = (0, import_react.useRef)(null);
+  const itemNodesRef = (0, import_react.useRef)([]);
+  const restoreFocusRef = (0, import_react.useRef)(null);
+  const wasOpenRef = (0, import_react.useRef)(false);
+  if (open && !wasOpenRef.current && import_components.isWeb && typeof document !== "undefined") {
+    restoreFocusRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+  }
+  wasOpenRef.current = open;
+  const close = (0, import_react.useCallback)(() => {
+    setQuery("");
+    setDebouncedQuery("");
+    setHighlight(0);
+    onOpenChange(false);
+  }, [onOpenChange]);
+  const handleOpenChange = (0, import_react.useCallback)(nextOpen => {
+    if (!nextOpen) close();else onOpenChange(true);
+  }, [close, onOpenChange]);
+  (0, import_react.useEffect)(() => {
+    if (open || !import_components.isWeb || typeof document === "undefined") return;
+    const target = restoreFocusRef.current;
+    restoreFocusRef.current = null;
+    if (target?.isConnected) target.focus();
+  }, [open]);
+  (0, import_react.useEffect)(() => {
+    if (!open || !import_components.isWeb || typeof document === "undefined") return;
+    const timer = setTimeout(() => {
+      const root = rootRef.current;
+      root?.querySelector("input")?.focus();
+    }, 0);
+    return () => clearTimeout(timer);
+  }, [open]);
+  (0, import_react.useEffect)(() => {
+    setHighlight(current => current < items.length ? current : 0);
+  }, [items]);
+  (0, import_react.useEffect)(() => {
+    if (!import_components.isWeb) return;
+    const node = itemNodesRef.current[highlight];
+    node?.scrollIntoView?.({
+      block: "nearest"
+    });
+  }, [highlight]);
+  const activate = (0, import_react.useCallback)(item => {
+    if (!item) return;
+    navigator.navigate(item.path);
+    (0, import_frappe_ui.addToRecent)({
+      label: item.label,
+      path: item.path
+    });
+    close();
+  }, [navigator, close]);
+  const handleKeyDown = (0, import_react.useCallback)(event => {
+    const key = event.key ?? event.nativeEvent?.key;
+    if (key === "ArrowDown") {
+      event.preventDefault?.();
+      setHighlight(current => items.length ? (current + 1) % items.length : 0);
+    } else if (key === "ArrowUp") {
+      event.preventDefault?.();
+      setHighlight(current => items.length ? (current - 1 + items.length) % items.length : 0);
+    } else if (key === "Enter") {
+      event.preventDefault?.();
+      activate(items[highlight] ?? items[0]);
+    } else if (key === "Escape") {
+      event.preventDefault?.();
+      close();
+    } else if (key === "Tab") {
+      event.preventDefault?.();
+    }
+  }, [items, highlight, activate, close]);
+  (0, import_react.useEffect)(() => {
+    if (!asSheet || !import_components.isWeb || typeof document === "undefined" || !open) return;
+    const onKeyDown = event => {
+      if (event.key === "Escape") close();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [asSheet, open, close]);
+  const handleChange = (0, import_react.useCallback)(text => {
+    setQuery(text);
+    setHighlight(0);
+  }, []);
+  const handleSearch = (0, import_react.useCallback)(text => {
+    setDebouncedQuery(text.trim());
+  }, []);
+  const handleClear = (0, import_react.useCallback)(() => {
+    setDebouncedQuery("");
+    setHighlight(0);
+  }, []);
+  const activeOptionId = items[highlight] ? optionId(highlight) : void 0;
+  const inputProps = (0, import_react.useMemo)(() => ({
+    onKeyDown: handleKeyDown,
+    onSubmitEditing: () => activate(items[highlight] ?? items[0]),
+    role: "combobox",
+    "aria-expanded": true,
+    "aria-haspopup": "listbox",
+    "aria-controls": LISTBOX_ID,
+    "aria-activedescendant": activeOptionId
+  }), [handleKeyDown, activate, items, highlight, activeOptionId]);
+  const searchInput = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.SearchInput, {
+    value: query,
+    onChange: handleChange,
+    onSearch: handleSearch,
+    onClear: handleClear,
+    debounceMs: 300,
+    size: "$3",
+    placeholder: t("awesomebar.placeholder", "Search or type a command\u2026"),
+    "aria-label": t("awesomebar.label", "Search or type a command"),
+    inputProps
+  });
+  const results = /* @__PURE__ */(0, import_jsx_runtime.jsx)(PaletteResults, {
+    model,
+    highlight,
+    onHighlight: setHighlight,
+    onActivate: activate,
+    itemNodesRef
+  });
+  if (asSheet) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.SheetModal, {
+      open,
+      onOpenChange: handleOpenChange,
+      snapPoint: 92,
+      scrollable: true,
+      header: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+        ref: rootRef,
+        paddingBottom: "$2",
+        "data-testid": "backoffice-command-palette",
+        children: searchInput
+      }),
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+        id: LISTBOX_ID,
+        role: "listbox",
+        "aria-label": t("awesomebar.results", "Search results"),
+        paddingBottom: "$4",
+        "data-dismiss-class": "commit",
+        children: results
+      })
+    });
+  }
+  const topOffset = typeof window !== "undefined" ? Math.round(window.innerHeight * 0.15) : 120;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Dialog, {
+    modal: true,
+    open,
+    onOpenChange: handleOpenChange,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.Dialog.Portal, {
+      justifyContent: "flex-start",
+      alignItems: "center",
+      paddingTop: topOffset,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Dialog.Overlay, {
+        backgroundColor: "$shadow6",
+        transition: knobProps.transition,
+        enterStyle: {
+          opacity: 0
+        },
+        exitStyle: {
+          opacity: 0
+        }
+      }, "overlay"), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.DialogContent, {
+        ref: rootRef,
+        width: PANEL_WIDTH,
+        maxWidth: "92%",
+        padding: 0,
+        gap: 0,
+        overflow: "hidden",
+        "aria-label": t("awesomebar.label", "Search or type a command"),
+        "data-dismiss-class": "commit",
+        "data-testid": "backoffice-command-palette",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+          padding: "$2.5",
+          borderBottomWidth: 1,
+          borderBottomColor: "$borderColor",
+          children: searchInput
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.ScrollView, {
+          maxHeight: RESULTS_MAX_HEIGHT,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+            id: LISTBOX_ID,
+            role: "listbox",
+            "aria-label": t("awesomebar.results", "Search results"),
+            paddingVertical: "$1.5",
+            children: results
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(PaletteFooter, {})]
+      }, "content")]
+    })
+  });
+}
+function PaletteResults({
+  model,
+  highlight,
+  onHighlight,
+  onActivate,
+  itemNodesRef
+}) {
+  const {
+    t
+  } = (0, import_react_i18next.useTranslation)(import_i18n.BACKOFFICE_I18N_NAMESPACE);
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const onAccent = (0, import_theme.useReadableTextOn)("$accentBackground");
+  const {
+    sections,
+    searching,
+    hasQuery,
+    noResults
+  } = model;
+  let flatIndex = -1;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+    children: [sections.map(section => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+      "data-testid": `backoffice-palette-section-${section.id}`,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+        fontSize: "$1",
+        color: "$color10",
+        textTransform: "uppercase",
+        letterSpacing: 0.5,
+        paddingHorizontal: "$3",
+        paddingTop: "$2.5",
+        paddingBottom: "$1.5",
+        ...knobProps.body,
+        children: section.label
+      }), section.items.map(item => {
+        flatIndex += 1;
+        const index = flatIndex;
+        const highlighted = index === highlight;
+        const Icon = item.icon;
+        return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+          id: optionId(index),
+          ref: node => {
+            itemNodesRef.current[index] = node;
+          },
+          role: "option",
+          "aria-selected": highlighted,
+          alignItems: "center",
+          gap: "$2.5",
+          paddingHorizontal: "$3",
+          paddingVertical: "$2",
+          minHeight: ROW_MIN_HEIGHT,
+          cursor: "pointer",
+          backgroundColor: highlighted ? "$accentBackground" : "transparent",
+          hoverStyle: {
+            backgroundColor: highlighted ? "$accentBackground" : "$color3"
+          },
+          pressStyle: {
+            backgroundColor: "$accentBackground"
+          },
+          onPress: () => onActivate(item),
+          onMouseEnter: () => onHighlight(index),
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
+            width: 20,
+            justifyContent: "center",
+            flexShrink: 0,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(Icon, {
+              size: 16,
+              color: highlighted && onAccent ? onAccent : void 0
+            })
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+            flex: 1,
+            minWidth: 0,
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+              numberOfLines: 1,
+              fontSize: "$3",
+              color: highlighted && onAccent ? onAccent : "$color12",
+              ...knobProps.body,
+              children: item.label
+            }), item.description ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+              numberOfLines: 1,
+              fontSize: "$2",
+              color: highlighted && onAccent ? onAccent : "$color10",
+              opacity: highlighted ? 0.8 : 1,
+              ...knobProps.body,
+              children: item.description
+            }) : null]
+          }), item.badge ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
+            borderWidth: 1,
+            borderColor: highlighted && onAccent ? onAccent : "$borderColor",
+            borderRadius: "$2",
+            paddingHorizontal: "$1.5",
+            paddingVertical: 2,
+            flexShrink: 0,
+            opacity: highlighted ? 0.9 : 1,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+              fontSize: "$1",
+              color: highlighted && onAccent ? onAccent : "$color10",
+              ...knobProps.body,
+              children: item.badge
+            })
+          }) : null]
+        }, item.id);
+      })]
+    }, section.id)), hasQuery && searching && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+      alignItems: "center",
+      gap: "$2.5",
+      paddingHorizontal: "$3",
+      paddingVertical: "$2",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Spinner, {
+        size: "small",
+        color: "$color10"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+        fontSize: "$2",
+        color: "$color10",
+        ...knobProps.body,
+        children: t("awesomebar.searching", "Searching\u2026")
+      })]
+    }), noResults && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
+      paddingHorizontal: "$3",
+      paddingVertical: "$3",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+        fontSize: "$2",
+        color: "$color10",
+        ...knobProps.body,
+        children: t("awesomebar.noResults", {
+          defaultValue: "No results for \u201C{{query}}\u201D",
+          query: model.query
+        })
+      })
+    }), !hasQuery && sections.length === 0 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
+      paddingHorizontal: "$3",
+      paddingVertical: "$3",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+        fontSize: "$2",
+        color: "$color10",
+        ...knobProps.body,
+        children: t("awesomebar.empty", "Type to search\u2026")
+      })
+    })]
+  });
+}
+function KeyCap({
+  label
+}) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
+    borderWidth: 1,
+    borderColor: "$borderColor",
+    backgroundColor: "$color2",
+    borderRadius: "$2",
+    paddingHorizontal: "$1.5",
+    justifyContent: "center",
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.SizableText, {
+      size: "$1",
+      fontWeight: "600",
+      color: "$color11",
+      children: label
+    })
+  });
+}
+function PaletteFooter() {
+  const {
+    t
+  } = (0, import_react_i18next.useTranslation)(import_i18n.BACKOFFICE_I18N_NAMESPACE);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+    alignItems: "center",
+    gap: "$3",
+    paddingHorizontal: "$3",
+    paddingVertical: "$2",
+    borderTopWidth: 1,
+    borderTopColor: "$borderColor",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+      alignItems: "center",
+      gap: "$1.5",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(KeyCap, {
+        label: "\u2191\u2193"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.SizableText, {
+        size: "$1",
+        color: "$color10",
+        children: t("awesomebar.hintNavigate", "navigate")
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+      alignItems: "center",
+      gap: "$1.5",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(KeyCap, {
+        label: "\u21B5"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.SizableText, {
+        size: "$1",
+        color: "$color10",
+        children: t("awesomebar.hintOpen", "open")
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+      alignItems: "center",
+      gap: "$1.5",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(KeyCap, {
+        label: "esc"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.SizableText, {
+        size: "$1",
+        color: "$color10",
+        children: t("awesomebar.hintClose", "close")
+      })]
+    })]
+  });
+}