@multiplatform.one/frappe-ui 7.23.2 → 7.25.0

package/dist/cjs/list/ImageWell.cjs

@@ -0,0 +1,111 @@
+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 ImageWell_exports = {};
+__export(ImageWell_exports, {
+  ImageWell: () => ImageWell
+});
+module.exports = __toCommonJS(ImageWell_exports);
+var import_components = require("@multiplatform.one/components");
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+function ImageWell({
+  sources,
+  alt,
+  tints,
+  pixelated = false,
+  inset = 0.06,
+  lazy = false,
+  ...wellProps
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const [sourceIndex, setSourceIndex] = (0, import_react.useState)(0);
+  const [revealedSrc, setRevealedSrc] = (0, import_react.useState)(null);
+  const hue = tints?.[0] ?? "gray";
+  const secondHue = tints?.[1];
+  const sourceKey = sources.join("|");
+  (0, import_react.useEffect)(() => {
+    setSourceIndex(0);
+  }, [sourceKey]);
+  const src = sources[sourceIndex] ?? "";
+  const revealed = !import_components.isWeb || !src || revealedSrc === src;
+  (0, import_react.useEffect)(() => {
+    if (!import_components.isWeb || !src || revealedSrc === src) return;
+    const timer = setTimeout(() => setRevealedSrc(src), 350);
+    return () => clearTimeout(timer);
+  }, [src, revealedSrc]);
+  const imageSize = `${Math.round((1 - inset * 2) * 100)}%`;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+    ...knobProps.borderRadius,
+    borderWidth: 0,
+    backgroundColor: secondHue ? "transparent" : `$${hue}5`,
+    aspectRatio: 1,
+    width: "100%",
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden",
+    position: "relative",
+    ...wellProps,
+    children: [secondHue ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+      fullscreen: true,
+      zIndex: 0,
+      pointerEvents: "none",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+        flex: 1,
+        backgroundColor: `$${hue}5`
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+        flex: 1,
+        backgroundColor: `$${secondHue}5`
+      })]
+    }) : null, src ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Image, {
+      src,
+      alt,
+      width: imageSize,
+      height: imageSize,
+      objectFit: "contain",
+      opacity: revealed ? 1 : 0,
+      transition: knobProps.transition,
+      zIndex: 1,
+      ...(import_components.isWeb ? {
+        loading: lazy ? "lazy" : "eager",
+        decoding: "async"
+      } : void 0),
+      ...(pixelated && import_components.isWeb ? {
+        style: {
+          imageRendering: "pixelated"
+        }
+      } : null),
+      onLoad: () => setRevealedSrc(src),
+      onError: () => setSourceIndex(index => index + 1)
+    }, src) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+      fontSize: "$10",
+      color: `$${hue}8`,
+      fontWeight: "700",
+      "aria-hidden": true,
+      zIndex: 1,
+      children: "?"
+    })]
+  });
+}

package/dist/cjs/list/ImageWell.native.js

@@ -0,0 +1,126 @@
+"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 ImageWell_exports = {};
+__export(ImageWell_exports, {
+  ImageWell: () => ImageWell
+});
+module.exports = __toCommonJS(ImageWell_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_components = require("@multiplatform.one/components");
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("react");
+function ImageWell(param) {
+  var {
+    sources,
+    alt,
+    tints,
+    pixelated = false,
+    inset = 0.06,
+    lazy = false,
+    ...wellProps
+  } = param;
+  var _ref, _sources_sourceIndex;
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  var [sourceIndex, setSourceIndex] = (0, import_react.useState)(0);
+  var [revealedSrc, setRevealedSrc] = (0, import_react.useState)(null);
+  var hue = (_ref = tints === null || tints === void 0 ? void 0 : tints[0]) !== null && _ref !== void 0 ? _ref : "gray";
+  var secondHue = tints === null || tints === void 0 ? void 0 : tints[1];
+  var sourceKey = sources.join("|");
+  (0, import_react.useEffect)(function () {
+    setSourceIndex(0);
+  }, [sourceKey]);
+  var src = (_sources_sourceIndex = sources[sourceIndex]) !== null && _sources_sourceIndex !== void 0 ? _sources_sourceIndex : "";
+  var revealed = !import_components.isWeb || !src || revealedSrc === src;
+  (0, import_react.useEffect)(function () {
+    if (!import_components.isWeb || !src || revealedSrc === src) return;
+    var timer = setTimeout(function () {
+      return setRevealedSrc(src);
+    }, 350);
+    return function () {
+      return clearTimeout(timer);
+    };
+  }, [src, revealedSrc]);
+  var imageSize = `${Math.round((1 - inset * 2) * 100)}%`;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+    ...knobProps.borderRadius,
+    borderWidth: 0,
+    backgroundColor: secondHue ? "transparent" : `$${hue}5`,
+    aspectRatio: 1,
+    width: "100%",
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden",
+    position: "relative",
+    ...wellProps,
+    children: [secondHue ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+      fullscreen: true,
+      zIndex: 0,
+      pointerEvents: "none",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+        flex: 1,
+        backgroundColor: `$${hue}5`
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+        flex: 1,
+        backgroundColor: `$${secondHue}5`
+      })]
+    }) : null, src ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Image, {
+      src,
+      alt,
+      width: imageSize,
+      height: imageSize,
+      objectFit: "contain",
+      opacity: revealed ? 1 : 0,
+      transition: knobProps.transition,
+      zIndex: 1,
+      ...(import_components.isWeb ? {
+        loading: lazy ? "lazy" : "eager",
+        decoding: "async"
+      } : void 0),
+      ...(pixelated && import_components.isWeb ? {
+        style: {
+          imageRendering: "pixelated"
+        }
+      } : null),
+      onLoad: function onLoad() {
+        return setRevealedSrc(src);
+      },
+      onError: function onError() {
+        return setSourceIndex(function (index) {
+          return index + 1;
+        });
+      }
+    }, src) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+      fontSize: "$10",
+      color: `$${hue}8`,
+      fontWeight: "700",
+      "aria-hidden": true,
+      zIndex: 1,
+      children: "?"
+    })]
+  });
+}
+//# sourceMappingURL=ImageWell.native.js.map

package/dist/cjs/list/ImageWell.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","ImageWell_exports","ImageWell","module","exports","import_jsx_runtime","require","import_components","import_theme","import_react","param","sources","alt","tints","pixelated","inset","lazy","wellProps","_ref","_sources_sourceIndex","knobProps","useResolvedKnobs","sourceIndex","setSourceIndex","useState","revealedSrc","setRevealedSrc","hue","secondHue","sourceKey","join","useEffect","src","revealed","isWeb","timer","setTimeout","clearTimeout","imageSize","Math","round","jsxs","YStack","borderRadius","borderWidth","backgroundColor","aspectRatio","width","alignItems","justifyContent","overflow","position","children","XStack","fullscreen","zIndex","pointerEvents","jsx","flex","Image","height","objectFit","opacity","transition","loading","decoding","style","imageRendering","onLoad","onError","index","Text","fontSize","color","fontWeight"],"sources":["ImageWell.native.js"],"sourcesContent":["\"use strict\";\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __getOwnPropNames = Object.getOwnPropertyNames;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __export = (target, all) => {\n  for (var name in all)\n    __defProp(target, name, { get: all[name], enumerable: true });\n};\nvar __copyProps = (to, from, except, desc) => {\n  if (from && typeof from === \"object\" || typeof from === \"function\") {\n    for (let key of __getOwnPropNames(from))\n      if (!__hasOwnProp.call(to, key) && key !== except)\n        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });\n  }\n  return to;\n};\nvar __toCommonJS = (mod) => __copyProps(__defProp({}, \"__esModule\", { value: true }), mod);\nvar ImageWell_exports = {};\n__export(ImageWell_exports, {\n  ImageWell: () => ImageWell\n});\nmodule.exports = __toCommonJS(ImageWell_exports);\nvar import_jsx_runtime = require(\"react/jsx-runtime\");\nvar import_components = require(\"@multiplatform.one/components\");\nvar import_theme = require(\"@multiplatform.one/theme\");\nvar import_react = require(\"react\");\nfunction ImageWell(param) {\n  var { sources, alt, tints, pixelated = false, inset = 0.06, lazy = false, ...wellProps } = param;\n  var _ref, _sources_sourceIndex;\n  var { knobProps } = (0, import_theme.useResolvedKnobs)();\n  var [sourceIndex, setSourceIndex] = (0, import_react.useState)(0);\n  var [revealedSrc, setRevealedSrc] = (0, import_react.useState)(null);\n  var hue = (_ref = tints === null || tints === void 0 ? void 0 : tints[0]) !== null && _ref !== void 0 ? _ref : \"gray\";\n  var secondHue = tints === null || tints === void 0 ? void 0 : tints[1];\n  var sourceKey = sources.join(\"|\");\n  (0, import_react.useEffect)(function() {\n    setSourceIndex(0);\n  }, [\n    sourceKey\n  ]);\n  var src = (_sources_sourceIndex = sources[sourceIndex]) !== null && _sources_sourceIndex !== void 0 ? _sources_sourceIndex : \"\";\n  var revealed = !import_components.isWeb || !src || revealedSrc === src;\n  (0, import_react.useEffect)(function() {\n    if (!import_components.isWeb || !src || revealedSrc === src) return;\n    var timer = setTimeout(function() {\n      return setRevealedSrc(src);\n    }, 350);\n    return function() {\n      return clearTimeout(timer);\n    };\n  }, [\n    src,\n    revealedSrc\n  ]);\n  var imageSize = `${Math.round((1 - inset * 2) * 100)}%`;\n  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.YStack, {\n    ...knobProps.borderRadius,\n    borderWidth: 0,\n    backgroundColor: secondHue ? \"transparent\" : `$${hue}5`,\n    aspectRatio: 1,\n    width: \"100%\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    overflow: \"hidden\",\n    position: \"relative\",\n    ...wellProps,\n    children: [\n      secondHue ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.XStack, {\n        fullscreen: true,\n        zIndex: 0,\n        pointerEvents: \"none\",\n        children: [\n          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.YStack, {\n            flex: 1,\n            backgroundColor: `$${hue}5`\n          }),\n          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.YStack, {\n            flex: 1,\n            backgroundColor: `$${secondHue}5`\n          })\n        ]\n      }) : null,\n      src ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Image, {\n        src,\n        alt,\n        width: imageSize,\n        height: imageSize,\n        objectFit: \"contain\",\n        opacity: revealed ? 1 : 0,\n        transition: knobProps.transition,\n        zIndex: 1,\n        ...import_components.isWeb ? {\n          loading: lazy ? \"lazy\" : \"eager\",\n          decoding: \"async\"\n        } : void 0,\n        ...pixelated && import_components.isWeb ? {\n          style: {\n            imageRendering: \"pixelated\"\n          }\n        } : null,\n        onLoad: function onLoad() {\n          return setRevealedSrc(src);\n        },\n        onError: function onError() {\n          return setSourceIndex(function(index) {\n            return index + 1;\n          });\n        }\n      }, src) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Text, {\n        fontSize: \"$10\",\n        color: `$${hue}8`,\n        fontWeight: \"700\",\n        \"aria-hidden\": true,\n        zIndex: 1,\n        children: \"?\"\n      })\n    ]\n  });\n}\n//# sourceMappingURL=ImageWell.js.map\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/list/ListControls.cjs

@@ -0,0 +1,226 @@
+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 ListControls_exports = {};
+__export(ListControls_exports, {
+  ListControls: () => ListControls
+});
+module.exports = __toCommonJS(ListControls_exports);
+var import_components = require("@multiplatform.one/components");
+var import_forms = require("@multiplatform.one/forms");
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("@phosphor-icons/react");
+var import_react_i18next = require("react-i18next");
+var import_FacetRail = require("./FacetRail.cjs");
+var import_listState = require("./listState.cjs");
+var import_RangeFilter = require("./RangeFilter.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const searchBasis = 260;
+const searchMinWidth = 220;
+const sortMinWidth = 170;
+const rangeMaxWidth = 340;
+function ListControls({
+  controls,
+  list,
+  searchId,
+  searchPlaceholder,
+  showSearch,
+  showFavorites,
+  shuffle,
+  shufflePanel,
+  separator,
+  testID
+}) {
+  const {
+    t
+  } = (0, import_react_i18next.useTranslation)();
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const {
+    state,
+    update,
+    favorites
+  } = list;
+  const sorts = controls.sorts ?? [];
+  const narrowed = (0, import_listState.isListNarrowed)(state);
+  const favoritesLabel = t("Favorites");
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+      ...knobProps.gap,
+      testID: `${testID}-controls`,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+        ...knobProps.gap,
+        alignItems: "center",
+        flexWrap: "wrap",
+        justifyContent: "space-between",
+        children: [showSearch ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
+          id: searchId,
+          flexGrow: 1,
+          flexShrink: 1,
+          flexBasis: searchBasis,
+          minWidth: searchMinWidth,
+          alignItems: "center",
+          "$max-sm": {
+            flexBasis: "100%",
+            maxWidth: "100%"
+          },
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+            flexGrow: 1,
+            flexShrink: 1,
+            minWidth: 0,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.SearchInput, {
+              value: list.searchText,
+              onChange: list.setSearchText,
+              onSearch: text => update({
+                search: text
+              }),
+              placeholder: searchPlaceholder ?? t("Search..."),
+              "aria-label": searchPlaceholder ?? t("Search..."),
+              debounceMs: 200,
+              compact: true,
+              clearable: true
+            })
+          })
+        }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+          ...knobProps.gap,
+          alignItems: "center",
+          flexWrap: "wrap",
+          "$max-sm": {
+            width: "100%"
+          },
+          children: [sorts.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
+            minWidth: sortMinWidth,
+            flexGrow: 1,
+            flexShrink: 1,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Select, {
+              value: state.sort,
+              onChange: value => update({
+                sort: String(value)
+              }),
+              options: sorts.map(sort => ({
+                label: sort.label,
+                value: sort.value
+              })),
+              placeholder: t("Sort by"),
+              "aria-label": t("Sort by")
+            })
+          }) : null, showFavorites ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Badge, {
+            count: favorites.count,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Tooltip, {
+              content: t("Show only your favorites"),
+              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+                outlined: !state.favoritesOnly,
+                theme: state.favoritesOnly ? "accent" : void 0,
+                onPress: () => update({
+                  favoritesOnly: !state.favoritesOnly
+                }),
+                "aria-pressed": state.favoritesOnly,
+                "aria-label": favorites.count > 0 ? t("Favorites ({{count}})", {
+                  count: favorites.count
+                }) : favoritesLabel,
+                icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.HeartIcon, {
+                  size: 16,
+                  weight: state.favoritesOnly ? "fill" : "regular"
+                }),
+                testID: `${testID}-favorites-filter`,
+                children: favoritesLabel
+              })
+            })
+          }) : null, shuffle ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Tooltip, {
+            content: t("Open a random record"),
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+              outlined: !shuffle.open,
+              theme: shuffle.open ? "accent" : void 0,
+              circular: true,
+              onPress: shuffle.toggle,
+              icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.DiceFiveIcon, {
+                size: 16
+              }),
+              "aria-label": t("Surprise me"),
+              "aria-expanded": shuffle.open,
+              "aria-controls": shuffle.panelId,
+              testID: `${testID}-shuffle-toggle`
+            })
+          }) : null]
+        })]
+      }), shufflePanel, (controls.facets ?? []).map(facet => {
+        const reading = list.facets[facet.param];
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FacetRail.FacetRail, {
+          label: facet.label,
+          value: state.facets[facet.param] ?? "",
+          onChange: value => update({
+            facets: {
+              [facet.param]: value
+            }
+          }),
+          testID: `${testID}-${facet.param}`,
+          options: [{
+            value: "",
+            label: facet.allLabel ?? t("All"),
+            count: list.total
+          }, ...facet.options.map(value => ({
+            value,
+            label: facet.optionLabel?.(value) ?? value,
+            tint: facet.tint?.(value),
+            count: reading?.counts[value]
+          }))]
+        }, facet.param);
+      }), (controls.ranges?.length ?? 0) > 0 || narrowed ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+        ...knobProps.gap,
+        alignItems: "center",
+        flexWrap: "wrap",
+        justifyContent: "space-between",
+        children: [(controls.ranges ?? []).map(range => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
+          maxWidth: rangeMaxWidth,
+          flexGrow: 1,
+          "$max-sm": {
+            maxWidth: "100%",
+            width: "100%"
+          },
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_RangeFilter.RangeFilter, {
+            label: range.label,
+            value: state.ranges[range.param] ?? 0,
+            max: (0, import_RangeFilter.rangeCeiling)(list.highest[range.param] ?? 0),
+            step: range.step,
+            onChange: value => update({
+              ranges: {
+                [range.param]: value
+              }
+            })
+          })
+        }, range.param)), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
+          ...knobProps.gap,
+          alignItems: "center",
+          flexShrink: 0,
+          children: narrowed ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+            size: "$2",
+            chromeless: true,
+            onPress: list.clear,
+            testID: `${testID}-clear`,
+            children: t("Clear filters")
+          }) : null
+        })]
+      }) : null]
+    }), separator ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Separator, {}) : null]
+  });
+}