@adyen/adyen-platform-experience-web 0.1.2 → 1.0.0-beta

package/dist/es/hooks/element/useFocusTrap.js

@@ -1,63 +1,106 @@
-import { useRef as u, useMemo as i, useCallback as l } from "../../external/preact/hooks/dist/hooks.module.js";
-import { InteractionKeyCode as r } from "../../components/types.js";
-import T from "../useReflex/hooks/useReflex.js";
-import { withTabbableRoot as L, isFocusable as p, focusIsWithin as C } from "../../utils/tabbable.js";
-const _ = (R, f) => {
-  const s = u(!1), o = u(null), c = u(!1), a = i(L, []), m = i(() => {
-    let e = null, t;
-    return (F) => {
-      t !== void 0 && cancelAnimationFrame(t);
-      let n = F.target;
-      for (; n && n !== F.currentTarget; ) {
-        if (p(n)) {
-          e = n, t = requestAnimationFrame(() => {
-            t = requestAnimationFrame(() => {
-              var b;
-              o.current !== e && e instanceof HTMLElement && ((b = o.current = e) == null || b.focus()), e = null, t = void 0;
+import { _, F, T } from "../../../hooks.module-8565d716.mjs";
+import { I as InteractionKeyCode } from "../../../types-0aaff3aa.mjs";
+import useReflex from "../useReflex/hooks/useReflex.js";
+import { withTabbableRoot, isFocusable, focusIsWithin } from "../../utils/tabbable.js";
+const useFocusTrap = (rootElementRef, onEscape) => {
+  const escapedFocus = _(false);
+  const focusElement = _(null);
+  const interactionKeyPressed = _(false);
+  const tabbableRoot = F(withTabbableRoot, []);
+  const onClickCapture = F(() => {
+    let lastFocusableElement = null;
+    let raf;
+    return (evt) => {
+      if (raf !== void 0)
+        cancelAnimationFrame(raf);
+      let element = evt.target;
+      while (element && element !== evt.currentTarget) {
+        if (isFocusable(element)) {
+          lastFocusableElement = element;
+          raf = requestAnimationFrame(() => {
+            raf = requestAnimationFrame(() => {
+              var _a;
+              if (focusElement.current !== lastFocusableElement && lastFocusableElement instanceof HTMLElement) {
+                (_a = focusElement.current = lastFocusableElement) == null ? void 0 : _a.focus();
+              }
+              lastFocusableElement = null;
+              raf = void 0;
             });
           });
           return;
         }
-        n = n.parentNode;
+        element = element.parentNode;
       }
     };
-  }, []), d = l((e) => {
-    a.current = o.current = e.target;
-  }, []), E = l((e) => {
-    a.tabbables.includes(e.relatedTarget) || C(e.currentTarget, e.relatedTarget) || c.current || (s.current = !0, requestAnimationFrame(() => {
-      s.current && f(s.current = !1);
-    }));
-  }, []), A = i(() => {
-    let e;
-    return (t) => {
-      switch (t.code) {
-        case r.ARROW_DOWN:
-        case r.ARROW_LEFT:
-        case r.ARROW_RIGHT:
-        case r.ARROW_UP:
-        case r.END:
-        case r.ESCAPE:
-        case r.HOME:
-        case r.PAGE_DOWN:
-        case r.PAGE_UP:
-        case r.TAB:
-          cancelAnimationFrame(e), e = requestAnimationFrame(() => {
-            e = requestAnimationFrame(() => {
-              c.current = !1, e = void 0;
+  }, []);
+  const onFocusInCapture = T((evt) => {
+    tabbableRoot.current = focusElement.current = evt.target;
+  }, []);
+  const onFocusOutCapture = T((evt) => {
+    if (tabbableRoot.tabbables.includes(evt.relatedTarget))
+      return;
+    if (focusIsWithin(evt.currentTarget, evt.relatedTarget))
+      return;
+    if (interactionKeyPressed.current)
+      return;
+    escapedFocus.current = true;
+    requestAnimationFrame(() => {
+      if (escapedFocus.current)
+        onEscape(escapedFocus.current = false);
+    });
+  }, []);
+  const onKeyDownCapture = F(() => {
+    let raf;
+    return (evt) => {
+      switch (evt.code) {
+        case InteractionKeyCode.ARROW_DOWN:
+        case InteractionKeyCode.ARROW_LEFT:
+        case InteractionKeyCode.ARROW_RIGHT:
+        case InteractionKeyCode.ARROW_UP:
+        case InteractionKeyCode.END:
+        case InteractionKeyCode.ESCAPE:
+        case InteractionKeyCode.HOME:
+        case InteractionKeyCode.PAGE_DOWN:
+        case InteractionKeyCode.PAGE_UP:
+        case InteractionKeyCode.TAB:
+          cancelAnimationFrame(raf);
+          raf = requestAnimationFrame(() => {
+            raf = requestAnimationFrame(() => {
+              interactionKeyPressed.current = false;
+              raf = void 0;
             });
-          }), c.current = !0;
+          });
+          interactionKeyPressed.current = true;
           break;
       }
-      t.code === r.TAB ? (t.preventDefault(), a.current = t.shiftKey ? -1 : 1) : t.code === r.ESCAPE && f(!0);
+      if (evt.code === InteractionKeyCode.TAB) {
+        evt.preventDefault();
+        tabbableRoot.current = evt.shiftKey ? -1 : 1;
+      } else if (evt.code === InteractionKeyCode.ESCAPE)
+        onEscape(true);
     };
   }, []);
-  return T(
-    l((e, t) => {
-      t instanceof Element && (t.removeEventListener("keydown", A, !0), t.removeEventListener("focusin", d, !0), t.removeEventListener("focusout", E, !0), e.removeEventListener("click", m, !0)), e instanceof Element ? (e.addEventListener("keydown", A, !0), e.addEventListener("focusin", d, !0), e.addEventListener("focusout", E, !0), e.addEventListener("click", m, !0), s.current = !1, a.root = e) : a.root = null;
+  return useReflex(
+    T((current, previous) => {
+      if (previous instanceof Element) {
+        previous.removeEventListener("keydown", onKeyDownCapture, true);
+        previous.removeEventListener("focusin", onFocusInCapture, true);
+        previous.removeEventListener("focusout", onFocusOutCapture, true);
+        current.removeEventListener("click", onClickCapture, true);
+      }
+      if (current instanceof Element) {
+        current.addEventListener("keydown", onKeyDownCapture, true);
+        current.addEventListener("focusin", onFocusInCapture, true);
+        current.addEventListener("focusout", onFocusOutCapture, true);
+        current.addEventListener("click", onClickCapture, true);
+        escapedFocus.current = false;
+        tabbableRoot.root = current;
+      } else
+        tabbableRoot.root = null;
     }, []),
-    R
+    rootElementRef
   );
 };
 export {
-  _ as default
+  useFocusTrap as default
 };

package/dist/es/hooks/element/useIdentifierString.js

@@ -0,0 +1,61 @@
+import { _, h, T, F, y } from "../../../hooks.module-8565d716.mjs";
+import { isReflex } from "../useReflex/core/utils.js";
+import { createReflexContainer } from "../useReflex/core/reflex.js";
+const EXCESS_SPACE_REGEX = /^\s+|\s+(?=\s|$)/g;
+const uniqueFlatten = (items, uniqueItems = /* @__PURE__ */ new Set()) => {
+  for (const item of items) {
+    if (!Array.isArray(item)) {
+      uniqueItems.delete(item);
+      uniqueItems.add(item);
+    } else
+      uniqueFlatten(item, uniqueItems);
+  }
+  return uniqueItems;
+};
+const useIdentifierString = (...refs) => {
+  const $id = _("");
+  const $cleanups = _([]);
+  const $cachedRefs = _([]);
+  const [shouldRecomputeID, setShouldRecomputeID] = h(true);
+  const reflexAction = T(() => setShouldRecomputeID(true), [setShouldRecomputeID]);
+  const $refs = F(() => {
+    while (true) {
+      const cleanup = $cleanups.current.pop();
+      if (!cleanup)
+        break;
+      cleanup();
+    }
+    const $refs2 = [];
+    for (const ref of uniqueFlatten(refs)) {
+      if (!ref)
+        continue;
+      if (isReflex(ref)) {
+        const container = createReflexContainer();
+        $cleanups.current.push(container.release);
+        container.update(reflexAction, ref);
+      }
+      $refs2.push(ref);
+    }
+    return $refs2;
+  }, [reflexAction, ...refs]);
+  y(() => {
+    var _a;
+    if (shouldRecomputeID || $refs !== $cachedRefs.current) {
+      const IDS = /* @__PURE__ */ new Set();
+      for (const ref of $refs) {
+        const id = ((_a = ref == null ? void 0 : ref.current) == null ? void 0 : _a.id) ?? "";
+        if (!id)
+          continue;
+        IDS.delete(id);
+        IDS.add(id);
+      }
+      $id.current = [...IDS].join(" ").replace(EXCESS_SPACE_REGEX, "");
+      $cachedRefs.current = $refs;
+      setShouldRecomputeID(false);
+    }
+  }, [$refs, shouldRecomputeID, setShouldRecomputeID]);
+  return $id.current;
+};
+export {
+  useIdentifierString as default
+};

package/dist/es/hooks/element/usePopoverPositioner.js

@@ -1,71 +1,7 @@
-import { PopoverContainerPosition as l, PopoverContainerVariant as $ } from "../../components/internal/Popover/types.js";
-import k from "../../components/internal/Popover/utils/utils.js";
-import { useState as m, useCallback as C, useRef as x, useEffect as y } from "../../external/preact/hooks/dist/hooks.module.js";
-import B from "../useReflex/hooks/useReflex.js";
-const M = (e, i, h, b) => {
-  if (i.length < 3) {
-    const n = i.length;
-    i.length = 3, i.fill(0, n, 3);
-  }
-  b || (b = l.BOTTOM);
-  let f = 0, o = 0, a = 0;
-  const s = h == null ? void 0 : h.current;
-  switch (b) {
-    case l.BOTTOM:
-      f = (s == null ? void 0 : s.offsetLeft) + i[0], o = (s == null ? void 0 : s.offsetTop) + (s == null ? void 0 : s.offsetHeight) + i[1], a = i[2];
-      break;
-    case l.TOP:
-      f = (s == null ? void 0 : s.offsetLeft) + i[0], o = e != null && e.clientHeight ? (s == null ? void 0 : s.offsetTop) - i[1] - (e == null ? void 0 : e.clientHeight) : s == null ? void 0 : s.offsetTop, a = i[2];
-      break;
-    case l.RIGHT:
-      f = (s == null ? void 0 : s.offsetLeft) + (s == null ? void 0 : s.offsetWidth) + i[0], o = (s == null ? void 0 : s.offsetTop) + i[1], a = i[2];
-      break;
-    case l.LEFT:
-      f = e != null && e.clientWidth ? (s == null ? void 0 : s.offsetLeft) - (e == null ? void 0 : e.clientWidth) - i[0] : 0, o = (s == null ? void 0 : s.offsetTop) + i[1], a = i[2];
-      break;
-  }
-  return `position:absolute;inset:0 auto auto 0;margin: 0;z-index:10;transform: ${[f, o, a].reduce((n, t, c) => c === 0 ? n + `${t}px,` : c === i.length - 1 ? n + ` ${t}px)` : n + ` ${t}px,`, "translate3d(")};visibility:hidden`;
-}, S = (e, i, h, b, f) => {
-  const [o, a] = m(!0), [s, P] = m(!b), [O, n] = m(b ?? l.TOP), t = C(
-    (d) => {
-      if (!o)
-        if (d.intersectionRatio !== 1)
-          switch (O) {
-            case l.TOP:
-              n(l.BOTTOM);
-              break;
-            case l.BOTTOM:
-              n(l.RIGHT);
-              break;
-            case l.RIGHT:
-              n(l.LEFT);
-              break;
-            case l.LEFT:
-              break;
-          }
-        else
-          P(!1);
-    },
-    [n, O, o, P]
-  ), c = x(t);
-  return y(() => {
-    k(c.current).remove(), c.current = t;
-  }, [t]), B(
-    C(
-      (d, I) => {
-        var R;
-        if (I && !b && k(t).observer.unobserve(I), d) {
-          if (b || k(t).observer.observe(d), !(d instanceof Element))
-            return;
-          const L = M(d, e, i, O), H = s ? L : L + ";visibility:visible";
-          d.setAttribute("style", `${H}`), o && a(!1), h && h === $.TOOLTIP && ((R = d.classList) == null || R.add(`popover-content-container--tooltip-${O}`));
-        }
-      },
-      [f, e, i, O, b, h, t, a, s]
-    ),
-    f
-  );
-};
+import { u } from "../../../usePopoverPositioner-882fea89.mjs";
+import "../../components/internal/Popover/utils/utils.js";
+import "../../../hooks.module-8565d716.mjs";
+import "../useReflex/hooks/useReflex.js";
 export {
-  S as default
+  u as default
 };

package/dist/es/hooks/element/useUniqueIdentifier.js

@@ -1,18 +1,22 @@
-import { useRef as r, useCallback as f } from "../../external/preact/hooks/dist/hooks.module.js";
-import a from "../useReflex/hooks/useReflex.js";
-import { getUniqueId as o } from "../../utils/idGenerator.js";
-const m = (n) => {
-  const e = r();
-  return a(
-    f(
-      (i, t) => {
-        t instanceof Element && t.id === e.current && (t.id = ""), i instanceof Element && (i.id = e.current || (e.current = o("adyen-fp")));
+import { _, T } from "../../../hooks.module-8565d716.mjs";
+import useReflex from "../useReflex/hooks/useReflex.js";
+import { getUniqueId } from "../../utils/idGenerator.js";
+const useUniqueIdentifier = (ref) => {
+  const id = _();
+  return useReflex(
+    T(
+      (current, previous) => {
+        if (previous instanceof Element && previous.id === id.current)
+          previous.id = "";
+        if (!(current instanceof Element))
+          return;
+        current.id = id.current || (id.current = getUniqueId("adyen-pe"));
       },
-      [n]
+      [ref]
     ),
-    n
+    ref
   );
 };
 export {
-  m as default
+  useUniqueIdentifier as default
 };

package/dist/es/hooks/useBooleanState/index.js

@@ -0,0 +1,4 @@
+import { default as default2 } from "./useBooleanState.js";
+export {
+  default2 as default
+};

package/dist/es/hooks/useBooleanState/useBooleanState.js

@@ -1,8 +1,10 @@
-import { useState as u, useCallback as a } from "../../external/preact/hooks/dist/hooks.module.js";
-const c = (s = !1) => {
-  const [o, e] = u(s), n = a((t) => e(t), []), l = a(() => e((t) => !t), []);
-  return [o, n, l];
-}, r = c;
+import { h, T } from "../../../hooks.module-8565d716.mjs";
+const useBooleanState = (initialState = false) => {
+  const [state, setState] = h(initialState);
+  const updateState = T((state2) => setState(state2), []);
+  const toggleState = T(() => setState((state2) => !state2), []);
+  return [state, updateState, toggleState];
+};
 export {
-  r as default
+  useBooleanState as default
 };

package/dist/es/hooks/useCommitAction/index.js

@@ -0,0 +1,6 @@
+import { default as default2 } from "./useCommitAction.js";
+import { C } from "../../../types-e6a6a3ff.mjs";
+export {
+  C as CommitAction,
+  default2 as default
+};

package/dist/es/hooks/useCommitAction/useCommitAction.js

@@ -1,35 +1,46 @@
-import { useState as O, useCallback as r, useMemo as A, useEffect as Y } from "../../external/preact/hooks/dist/hooks.module.js";
-import { ButtonVariant as P } from "../../components/internal/Button/types.js";
-import { CommitAction as t } from "./types.js";
-import g from "../../core/Context/useCoreContext.js";
-import { EMPTY_OBJECT as v } from "../../utils/common/constants.js";
-const L = ({ applyDisabled: e, applyTitle: m, resetDisabled: a, resetTitle: c } = v) => {
-  const { i18n: s } = g(), [n, o] = O(t.NONE), [B, u] = O(n !== t.NONE), C = r(() => o(t.APPLY), [o]), E = r(() => o(t.CLEAR), [o]), i = r(() => o(t.NONE), [o]), N = A(
+import { h, T, F, p } from "../../../hooks.module-8565d716.mjs";
+import { B as ButtonVariant } from "../../../types-7ad6576a.mjs";
+import { C as CommitAction } from "../../../types-e6a6a3ff.mjs";
+import useCoreContext from "../../core/Context/useCoreContext.js";
+import "../../utils/common/index.js";
+import { EMPTY_OBJECT } from "../../utils/common/constants.js";
+const useCommitAction = ({ applyDisabled, applyTitle, resetDisabled, resetTitle } = EMPTY_OBJECT) => {
+  const { i18n } = useCoreContext();
+  const [commitAction, setCommitAction] = h(CommitAction.NONE);
+  const [committing, setCommitting] = h(commitAction !== CommitAction.NONE);
+  const applyAction = T(() => setCommitAction(CommitAction.APPLY), [setCommitAction]);
+  const resetAction = T(() => setCommitAction(CommitAction.CLEAR), [setCommitAction]);
+  const resetCommitAction = T(() => setCommitAction(CommitAction.NONE), [setCommitAction]);
+  const applyButtonAction = F(
     () => ({
-      disabled: e === !0,
-      event: C,
-      title: (m == null ? void 0 : m.trim()) || s.get("apply"),
-      variant: P.PRIMARY
+      disabled: applyDisabled === true,
+      event: applyAction,
+      title: (applyTitle == null ? void 0 : applyTitle.trim()) || i18n.get("apply"),
+      variant: ButtonVariant.PRIMARY
     }),
-    [s, C, e, m]
-  ), f = A(
+    [i18n, applyAction, applyDisabled, applyTitle]
+  );
+  const resetButtonAction = F(
     () => ({
-      disabled: a === !0,
-      event: E,
-      title: (c == null ? void 0 : c.trim()) || s.get("reset"),
-      variant: P.SECONDARY
+      disabled: resetDisabled === true,
+      event: resetAction,
+      title: (resetTitle == null ? void 0 : resetTitle.trim()) || i18n.get("reset"),
+      variant: ButtonVariant.SECONDARY
     }),
-    [s, E, a, c]
-  ), R = A(() => [N, f], [N, f]);
-  return Y(() => {
-    switch (u(n !== t.NONE), n) {
-      case t.APPLY:
-      case t.CLEAR:
-        i();
+    [i18n, resetAction, resetDisabled, resetTitle]
+  );
+  const commitActionButtons = F(() => [applyButtonAction, resetButtonAction], [applyButtonAction, resetButtonAction]);
+  p(() => {
+    setCommitting(commitAction !== CommitAction.NONE);
+    switch (commitAction) {
+      case CommitAction.APPLY:
+      case CommitAction.CLEAR:
+        resetCommitAction();
         break;
     }
-  }, [n, u, i]), { commitAction: n, commitActionButtons: R, committing: B, resetCommitAction: i };
-}, x = L;
+  }, [commitAction, setCommitting, resetCommitAction]);
+  return { commitAction, commitActionButtons, committing, resetCommitAction };
+};
 export {
-  x as default
+  useCommitAction as default
 };

package/dist/es/hooks/useDefinedValue/index.js

@@ -0,0 +1,4 @@
+import { default as default2 } from "./useDefinedValue.js";
+export {
+  default2 as default
+};

package/dist/es/hooks/useDefinedValue/useDefinedValue.js

@@ -0,0 +1,16 @@
+import { _, F } from "../../../hooks.module-8565d716.mjs";
+import { isFunction } from "../../utils/common/index.js";
+const useDefinedValue = (fallback, value) => {
+  const rawValueRef = _(value ?? null);
+  const fallbackFactory = F(() => isFunction(fallback) ? fallback : () => fallback, [fallback]);
+  const definedValue = F(() => {
+    const currentValue = value ?? null;
+    if (rawValueRef.current !== currentValue)
+      rawValueRef.current = currentValue;
+    return rawValueRef.current;
+  }, [value]);
+  return F(() => definedValue ?? fallbackFactory(), [definedValue]);
+};
+export {
+  useDefinedValue as default
+};

package/dist/es/hooks/useFetch/useFetch.js

@@ -1,42 +1,52 @@
-import { useRef as u, useReducer as o, useCallback as f, useEffect as p } from "../../external/preact/hooks/dist/hooks.module.js";
-function g({
-  fetchOptions: a = { keepPrevData: !0 },
-  queryFn: n,
-  params: h
+import { _, s, T, p } from "../../../hooks.module-8565d716.mjs";
+function useFetch({
+  fetchOptions = { keepPrevData: true },
+  queryFn,
+  params
 }) {
-  u(/* @__PURE__ */ new Map());
-  const r = u(!1), t = {
+  _(/* @__PURE__ */ new Map());
+  const cancelRequest = _(false);
+  const initialState = {
     error: void 0,
     data: void 0,
-    isFetching: a.enabled !== !1
-  }, i = (e, c) => {
-    switch (c.type) {
+    isFetching: fetchOptions.enabled !== false
+  };
+  const fetchReducer = (state2, action) => {
+    switch (action.type) {
       case "loading":
-        return { ...t, isFetching: !0, data: a.keepPrevData ? e.data : void 0 };
+        return { ...initialState, isFetching: true, data: fetchOptions.keepPrevData ? state2.data : void 0 };
       case "fetched":
-        return { ...t, data: c.payload, isFetching: !1 };
+        return { ...initialState, data: action.payload, isFetching: false };
       case "error":
-        return { ...t, error: c.payload, isFetching: !1 };
+        return { ...initialState, error: action.payload, isFetching: false };
       default:
-        return e;
+        return state2;
     }
-  }, [l, s] = o(i, t), d = f(async () => {
-    s({ type: "loading" });
+  };
+  const [state, dispatch] = s(fetchReducer, initialState);
+  const fetchData = T(async () => {
+    dispatch({ type: "loading" });
     try {
-      if (r.current)
+      if (cancelRequest.current)
         return;
-      const e = await n();
-      s({ type: "fetched", payload: e });
-    } catch (e) {
-      if (r.current)
+      const data = await queryFn();
+      dispatch({ type: "fetched", payload: data });
+    } catch (error) {
+      if (cancelRequest.current)
         return;
-      s({ type: "error", payload: e });
+      dispatch({ type: "error", payload: error });
     }
-  }, [s, n]);
-  return p(() => (r.current = !1, a.enabled !== !1 && d(), () => {
-    r.current = !0;
-  }), [a.enabled, d]), l;
+  }, [dispatch, queryFn]);
+  p(() => {
+    cancelRequest.current = false;
+    if (fetchOptions.enabled !== false)
+      void fetchData();
+    return () => {
+      cancelRequest.current = true;
+    };
+  }, [fetchOptions.enabled, fetchData]);
+  return state;
 }
 export {
-  g as useFetch
+  useFetch
 };

package/dist/es/hooks/useImageUrl/useImageUrl.js

@@ -1,28 +1,32 @@
-import a from "../../core/Context/useCoreContext.js";
-import { useMemo as g } from "../../external/preact/hooks/dist/hooks.module.js";
-import { EMPTY_OBJECT as p } from "../../utils/common/constants.js";
-const u = "https://cdf6519016.cdn.adyen.com/checkoutshopper/", C = ({
-  name: e,
-  resourceContext: o,
-  imageFolder: t = "logos/",
-  parentFolder: r = "",
-  extension: s = "svg",
-  size: c = "",
-  subFolder: n = ""
+import useCoreContext from "../../core/Context/useCoreContext.js";
+import "../../utils/common/index.js";
+import { F } from "../../../hooks.module-8565d716.mjs";
+import { EMPTY_OBJECT } from "../../utils/common/constants.js";
+const FALLBACK_CDN_CONTEXT = "https://cdf6519016.cdn.adyen.com/checkoutshopper/";
+const returnImage = ({
+  name,
+  resourceContext,
+  imageFolder = "logos/",
+  parentFolder = "",
+  extension = "svg",
+  size = "",
+  subFolder = ""
 }) => {
-  const m = `/images/${t}/${n}/${r}/${e}${c}.${s}`.replace(/\/+/g, "/");
-  return `${o}${m}`;
-}, f = ({ options: e = p, name: o }) => {
-  const { loadingContext: t } = a();
-  return g(
-    () => C({
-      resourceContext: u,
-      name: o,
-      ...e
+  const path = `/images/${imageFolder}/${subFolder}/${parentFolder}/${name}${size}.${extension}`.replace(/\/+/g, "/");
+  return `${resourceContext}${path}`;
+};
+const useImageUrl = ({ options = EMPTY_OBJECT, name }) => {
+  const { loadingContext } = useCoreContext();
+  const image = F(
+    () => returnImage({
+      resourceContext: FALLBACK_CDN_CONTEXT,
+      name,
+      ...options
     }),
-    [t, o, e]
+    [loadingContext, name, options]
   );
+  return image;
 };
 export {
-  f as useImageUrl
+  useImageUrl
 };