@nospt/backstage-plugin-apigee 1.1.0-rc2 → 1.1.0-rc4

package/dist/components/FilterToolbar.esm.js

@@ -1,156 +1,87 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useState } from 'react';
-import { Box, Button, makeStyles, Chip, Menu, FormGroup, FormControlLabel, Checkbox } from '@material-ui/core';
-import ArrowDropDown from '@material-ui/icons/ArrowDropDown';
-import Clear from '@material-ui/icons/Clear';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import { Button, Checkbox } from '@backstage/ui';
+import { RiCloseLine, RiArrowDropDownLine } from '@remixicon/react';
+import styles from './FilterToolbar.module.css.esm.js';
 
-const useStyles = makeStyles((theme) => ({
-  toolbar: {
-    display: "flex",
-    flexWrap: "wrap",
-    alignItems: "center",
-    gap: theme.spacing(1),
-    marginBottom: theme.spacing(2)
-  },
-  control: {
-    "&:focus-visible": {
-      outline: `2px solid ${theme.palette.primary.main}`,
-      outlineOffset: 2
-    }
-  },
-  clearAll: {
-    marginLeft: "auto"
-  },
-  countChip: {
-    marginLeft: theme.spacing(0.5)
-  },
-  formGroup: {
-    padding: theme.spacing(0, 2)
-  },
-  menuFooter: {
-    display: "flex",
-    justifyContent: "flex-end",
-    padding: theme.spacing(0.5, 1)
-  },
-  optionLabel: {
-    display: "flex",
-    alignItems: "center",
-    gap: theme.spacing(0.5)
-  },
-  optionIcon: {
-    fontSize: 16
-  },
-  srOnly: {
-    position: "absolute",
-    width: 1,
-    height: 1,
-    padding: 0,
-    margin: -1,
-    overflow: "hidden",
-    clip: "rect(0 0 0 0)",
-    whiteSpace: "nowrap",
-    border: 0
-  }
-}));
 function FacetDropdown({
   facet,
   selected,
   onToggle,
   onClear
 }) {
-  const classes = useStyles();
-  const [anchorEl, setAnchorEl] = useState(null);
-  const open = Boolean(anchorEl);
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
   const menuId = `facet-menu-${facet.key}`;
   const count = selected.length;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  useEffect(() => {
+    if (!open) {
+      return void 0;
+    }
+    const onDocMouseDown = (event) => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        setOpen(false);
+      }
+    };
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", onDocMouseDown);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", onDocMouseDown);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [open]);
+  return /* @__PURE__ */ jsxs("div", { ref, className: styles.facet, children: [
     /* @__PURE__ */ jsxs(
       Button,
       {
-        className: classes.control,
-        variant: "outlined",
+        variant: count > 0 ? "primary" : "secondary",
         size: "small",
-        disabled: !facet.enabled,
-        endIcon: /* @__PURE__ */ jsx(ArrowDropDown, {}),
-        color: count > 0 ? "primary" : "default",
+        isDisabled: !facet.enabled,
+        iconEnd: /* @__PURE__ */ jsx(RiArrowDropDownLine, {}),
         "aria-haspopup": "true",
         "aria-expanded": open,
         "aria-controls": open ? menuId : void 0,
         "aria-label": count > 0 ? `${facet.label} filter, ${count} selected` : `${facet.label} filter`,
-        onClick: (event) => setAnchorEl(event.currentTarget),
+        onPress: () => setOpen((prev) => !prev),
         children: [
           facet.label,
-          count > 0 ? /* @__PURE__ */ jsx(
-            Chip,
-            {
-              className: classes.countChip,
-              size: "small",
-              color: "primary",
-              label: count
-            }
-          ) : null
+          count > 0 ? /* @__PURE__ */ jsx("span", { className: styles.countChip, children: count }) : null
         ]
       }
     ),
-    /* @__PURE__ */ jsxs(
-      Menu,
+    open ? /* @__PURE__ */ jsxs(
+      "div",
       {
         id: menuId,
-        anchorEl,
-        open,
-        onClose: () => setAnchorEl(null),
-        getContentAnchorEl: null,
-        anchorOrigin: { vertical: "bottom", horizontal: "left" },
-        transformOrigin: { vertical: "top", horizontal: "left" },
+        className: styles.menu,
+        role: "group",
+        "aria-label": `${facet.label} options`,
         children: [
-          /* @__PURE__ */ jsx(
-            FormGroup,
-            {
-              className: classes.formGroup,
-              role: "group",
-              "aria-label": `${facet.label} options`,
-              children: facet.options.map((option) => {
-                const OptionIcon = facet.icons?.[option.value];
-                return /* @__PURE__ */ jsx(
-                  FormControlLabel,
-                  {
-                    control: /* @__PURE__ */ jsx(
-                      Checkbox,
-                      {
-                        color: "primary",
-                        checked: selected.includes(option.value),
-                        onChange: () => onToggle(option.value)
-                      }
-                    ),
-                    label: OptionIcon ? /* @__PURE__ */ jsxs("span", { className: classes.optionLabel, children: [
-                      /* @__PURE__ */ jsx(
-                        OptionIcon,
-                        {
-                          className: classes.optionIcon,
-                          "aria-hidden": true
-                        }
-                      ),
-                      option.label
-                    ] }) : option.label
-                  },
-                  option.value
-                );
-              })
-            }
-          ),
-          count > 0 ? /* @__PURE__ */ jsx("div", { className: classes.menuFooter, children: /* @__PURE__ */ jsx(
-            Button,
-            {
-              className: classes.control,
-              variant: "text",
-              size: "small",
-              onClick: onClear,
-              children: "Clear"
-            }
-          ) }) : null
+          facet.options.map((option) => {
+            const OptionIcon = facet.icons?.[option.value];
+            return /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                className: styles.option,
+                isSelected: selected.includes(option.value),
+                onChange: () => onToggle(option.value),
+                children: OptionIcon ? /* @__PURE__ */ jsxs("span", { className: styles.optionLabel, children: [
+                  /* @__PURE__ */ jsx(OptionIcon, { "aria-hidden": true, size: 16 }),
+                  option.label
+                ] }) : option.label
+              },
+              option.value
+            );
+          }),
+          count > 0 ? /* @__PURE__ */ jsx("div", { className: styles.menuFooter, children: /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "small", onPress: onClear, children: "Clear" }) }) : null
         ]
       }
-    )
+    ) : null
   ] });
 }
 function FilterToolbar({
@@ -161,11 +92,11 @@ function FilterToolbar({
   onClearAll,
   active,
   resultCount,
-  searchBar
+  searchBar,
+  viewToggle
 }) {
-  const classes = useStyles();
   return /* @__PURE__ */ jsxs("div", { role: "search", "aria-label": "Filter and search APIs", children: [
-    /* @__PURE__ */ jsxs(Box, { className: classes.toolbar, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.toolbar, children: [
       facets.map((facet) => /* @__PURE__ */ jsx(
         FacetDropdown,
         {
@@ -176,20 +107,22 @@ function FilterToolbar({
         },
         facet.key
       )),
-      searchBar,
-      active ? /* @__PURE__ */ jsx(
-        Button,
-        {
-          className: `${classes.control} ${classes.clearAll}`,
-          variant: "text",
-          size: "small",
-          startIcon: /* @__PURE__ */ jsx(Clear, {}),
-          onClick: onClearAll,
-          children: "Clear all"
-        }
-      ) : null
+      /* @__PURE__ */ jsxs("div", { className: styles.searchRow, children: [
+        searchBar,
+        active ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "tertiary",
+            size: "small",
+            iconStart: /* @__PURE__ */ jsx(RiCloseLine, {}),
+            onPress: onClearAll,
+            children: "Clear all"
+          }
+        ) : null,
+        viewToggle
+      ] })
     ] }),
-    /* @__PURE__ */ jsx("span", { className: classes.srOnly, "aria-live": "polite", children: `${resultCount} APIs match your filters` })
+    /* @__PURE__ */ jsx("span", { className: styles.srOnly, "aria-live": "polite", children: `${resultCount} APIs match your filters` })
   ] });
 }
 

package/dist/components/FilterToolbar.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterToolbar.esm.js","sources":["../../src/components/FilterToolbar.tsx"],"sourcesContent":["// SPDX-License-Identifier: Apache-2.0\r\nimport { useState, type ReactNode } from 'react';\r\nimport {\r\n  Box,\r\n  Button,\r\n  Checkbox,\r\n  Chip,\r\n  FormControlLabel,\r\n  FormGroup,\r\n  Menu,\r\n  makeStyles,\r\n} from '@material-ui/core';\r\nimport ArrowDropDown from '@material-ui/icons/ArrowDropDown';\r\nimport Clear from '@material-ui/icons/Clear';\r\nimport type { DerivedFacet, FacetKey } from './facetModel';\r\n\r\nexport interface FilterToolbarProps {\r\n  /** Derived facets from `deriveFacets()`; ALL render (revised D-05) — one with no values is disabled. */\r\n  facets: DerivedFacet[];\r\n  /** Current selections per facet (hydrated from the URL state in 06-04). */\r\n  selected: Record<FacetKey, string[]>;\r\n  onToggleFacet: (key: FacetKey, value: string) => void;\r\n  /** Per-facet menu-footer \"Clear\" (clears just that facet). */\r\n  onClearFacet: (key: FacetKey) => void;\r\n  /** Toolbar \"Clear all\" (resets every facet + search). */\r\n  onClearAll: () => void;\r\n  /** `isActive(state)` — gates the \"Clear all\" affordance. */\r\n  active: boolean;\r\n  /** Filtered result count for the polite live region (UI-07). */\r\n  resultCount: number;\r\n  /** `SearchBar` mounted inline in the toolbar row. */\r\n  searchBar: ReactNode;\r\n}\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n  toolbar: {\r\n    display: 'flex',\r\n    flexWrap: 'wrap',\r\n    alignItems: 'center',\r\n    gap: theme.spacing(1),\r\n    marginBottom: theme.spacing(2),\r\n  },\r\n  control: {\r\n    '&:focus-visible': {\r\n      outline: `2px solid ${theme.palette.primary.main}`,\r\n      outlineOffset: 2,\r\n    },\r\n  },\r\n  clearAll: {\r\n    marginLeft: 'auto',\r\n  },\r\n  countChip: {\r\n    marginLeft: theme.spacing(0.5),\r\n  },\r\n  formGroup: {\r\n    padding: theme.spacing(0, 2),\r\n  },\r\n  menuFooter: {\r\n    display: 'flex',\r\n    justifyContent: 'flex-end',\r\n    padding: theme.spacing(0.5, 1),\r\n  },\r\n  optionLabel: {\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    gap: theme.spacing(0.5),\r\n  },\r\n  optionIcon: {\r\n    fontSize: 16,\r\n  },\r\n  srOnly: {\r\n    position: 'absolute',\r\n    width: 1,\r\n    height: 1,\r\n    padding: 0,\r\n    margin: -1,\r\n    overflow: 'hidden',\r\n    clip: 'rect(0 0 0 0)',\r\n    whiteSpace: 'nowrap',\r\n    border: 0,\r\n  },\r\n}));\r\n\r\n/**\r\n * A single multi-select facet as an outlined menu-button (verified MUI v4 pattern —\r\n * 06-RESEARCH Pattern 7). The `Menu` sets `getContentAnchorEl={null}` so it bottom-anchors,\r\n * and its options are `FormControlLabel`+`Checkbox` inside a `FormGroup` (not clickable menu\r\n * rows) so toggling a checkbox keeps the menu OPEN for multi-select. All dynamic text (`facet.label`,\r\n * `option.label`) renders as React children only — never raw HTML (T-06-03-01).\r\n */\r\nfunction FacetDropdown({\r\n  facet,\r\n  selected,\r\n  onToggle,\r\n  onClear,\r\n}: {\r\n  facet: DerivedFacet;\r\n  selected: string[];\r\n  onToggle: (value: string) => void;\r\n  onClear: () => void;\r\n}) {\r\n  const classes = useStyles();\r\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\r\n  const open = Boolean(anchorEl);\r\n  const menuId = `facet-menu-${facet.key}`;\r\n  const count = selected.length;\r\n\r\n  return (\r\n    <>\r\n      <Button\r\n        className={classes.control}\r\n        variant=\"outlined\"\r\n        size=\"small\"\r\n        disabled={!facet.enabled}\r\n        endIcon={<ArrowDropDown />}\r\n        color={count > 0 ? 'primary' : 'default'}\r\n        aria-haspopup=\"true\"\r\n        aria-expanded={open}\r\n        aria-controls={open ? menuId : undefined}\r\n        aria-label={\r\n          count > 0\r\n            ? `${facet.label} filter, ${count} selected`\r\n            : `${facet.label} filter`\r\n        }\r\n        onClick={event => setAnchorEl(event.currentTarget)}\r\n      >\r\n        {facet.label}\r\n        {count > 0 ? (\r\n          <Chip\r\n            className={classes.countChip}\r\n            size=\"small\"\r\n            color=\"primary\"\r\n            label={count}\r\n          />\r\n        ) : null}\r\n      </Button>\r\n      <Menu\r\n        id={menuId}\r\n        anchorEl={anchorEl}\r\n        open={open}\r\n        onClose={() => setAnchorEl(null)}\r\n        getContentAnchorEl={null}\r\n        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}\r\n        transformOrigin={{ vertical: 'top', horizontal: 'left' }}\r\n      >\r\n        <FormGroup\r\n          className={classes.formGroup}\r\n          role=\"group\"\r\n          aria-label={`${facet.label} options`}\r\n        >\r\n          {facet.options.map(option => {\r\n            const OptionIcon = facet.icons?.[option.value];\r\n            return (\r\n              <FormControlLabel\r\n                key={option.value}\r\n                control={\r\n                  <Checkbox\r\n                    color=\"primary\"\r\n                    checked={selected.includes(option.value)}\r\n                    onChange={() => onToggle(option.value)}\r\n                  />\r\n                }\r\n                label={\r\n                  OptionIcon ? (\r\n                    <span className={classes.optionLabel}>\r\n                      <OptionIcon\r\n                        className={classes.optionIcon}\r\n                        aria-hidden\r\n                      />\r\n                      {option.label}\r\n                    </span>\r\n                  ) : (\r\n                    option.label\r\n                  )\r\n                }\r\n              />\r\n            );\r\n          })}\r\n        </FormGroup>\r\n        {count > 0 ? (\r\n          <div className={classes.menuFooter}>\r\n            <Button\r\n              className={classes.control}\r\n              variant=\"text\"\r\n              size=\"small\"\r\n              onClick={onClear}\r\n            >\r\n              Clear\r\n            </Button>\r\n          </div>\r\n        ) : null}\r\n      </Menu>\r\n    </>\r\n  );\r\n}\r\n\r\n/**\r\n * Presentational Phase 6 toolbar (D-01 top toolbar, D-02 multi-select dropdowns). Renders EVERY\r\n * facet in `FACET_ORDER` (revised D-05 — a facet with no values renders disabled), the inline\r\n * `searchBar` slot, a conditional right-aligned \"Clear all\", and a polite `aria-live` result-count\r\n * region. Purely props-driven — no data fetching and no URL/provider access (that wiring is 06-04).\r\n * (UI-06, UI-07)\r\n */\r\nexport function FilterToolbar({\r\n  facets,\r\n  selected,\r\n  onToggleFacet,\r\n  onClearFacet,\r\n  onClearAll,\r\n  active,\r\n  resultCount,\r\n  searchBar,\r\n}: FilterToolbarProps) {\r\n  const classes = useStyles();\r\n\r\n  return (\r\n    <div role=\"search\" aria-label=\"Filter and search APIs\">\r\n      <Box className={classes.toolbar}>\r\n        {facets.map(facet => (\r\n          <FacetDropdown\r\n            key={facet.key}\r\n            facet={facet}\r\n            selected={selected[facet.key]}\r\n            onToggle={value => onToggleFacet(facet.key, value)}\r\n            onClear={() => onClearFacet(facet.key)}\r\n          />\r\n        ))}\r\n        {searchBar}\r\n        {active ? (\r\n          <Button\r\n            className={`${classes.control} ${classes.clearAll}`}\r\n            variant=\"text\"\r\n            size=\"small\"\r\n            startIcon={<Clear />}\r\n            onClick={onClearAll}\r\n          >\r\n            Clear all\r\n          </Button>\r\n        ) : null}\r\n      </Box>\r\n      <span className={classes.srOnly} aria-live=\"polite\">\r\n        {`${resultCount} APIs match your filters`}\r\n      </span>\r\n    </div>\r\n  );\r\n}\r\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"FilterToolbar.esm.js","sources":["../../src/components/FilterToolbar.tsx"],"sourcesContent":["// SPDX-License-Identifier: Apache-2.0\nimport { useEffect, useRef, useState, type ReactNode } from 'react';\nimport { Button, Checkbox } from '@backstage/ui';\nimport { RiArrowDropDownLine, RiCloseLine } from '@remixicon/react';\nimport type { DerivedFacet, FacetKey } from './facetModel';\nimport styles from './FilterToolbar.module.css';\n\nexport interface FilterToolbarProps {\n  /** Derived facets from `deriveFacets()`; ALL render (revised D-05) — one with no values is disabled. */\n  facets: DerivedFacet[];\n  /** Current selections per facet (hydrated from the URL state in 06-04). */\n  selected: Record<FacetKey, string[]>;\n  onToggleFacet: (key: FacetKey, value: string) => void;\n  /** Per-facet menu-footer \"Clear\" (clears just that facet). */\n  onClearFacet: (key: FacetKey) => void;\n  /** Toolbar \"Clear all\" (resets every facet + search). */\n  onClearAll: () => void;\n  /** `isActive(state)` — gates the \"Clear all\" affordance. */\n  active: boolean;\n  /** Filtered result count for the polite live region (UI-07). */\n  resultCount: number;\n  /** `SearchBar` mounted inline in the toolbar row. */\n  searchBar: ReactNode;\n  /** View-mode toggle (Flat/List) mounted at the right of the toolbar row. */\n  viewToggle?: ReactNode;\n}\n\n/**\n * A single multi-select facet as an outlined disclosure button. Options are @backstage/ui\n * `Checkbox`es in a popover that stays OPEN while toggling (multi-select); the popover closes on\n * outside-click or Escape. All dynamic text (`facet.label`, `option.label`) renders as React\n * children only — never raw HTML (T-06-03-01).\n */\nfunction FacetDropdown({\n  facet,\n  selected,\n  onToggle,\n  onClear,\n}: {\n  facet: DerivedFacet;\n  selected: string[];\n  onToggle: (value: string) => void;\n  onClear: () => void;\n}) {\n  const [open, setOpen] = useState(false);\n  const ref = useRef<HTMLDivElement>(null);\n  const menuId = `facet-menu-${facet.key}`;\n  const count = selected.length;\n\n  useEffect(() => {\n    if (!open) {\n      return undefined;\n    }\n    const onDocMouseDown = (event: MouseEvent) => {\n      if (ref.current && !ref.current.contains(event.target as Node)) {\n        setOpen(false);\n      }\n    };\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        setOpen(false);\n      }\n    };\n    document.addEventListener('mousedown', onDocMouseDown);\n    document.addEventListener('keydown', onKeyDown);\n    return () => {\n      document.removeEventListener('mousedown', onDocMouseDown);\n      document.removeEventListener('keydown', onKeyDown);\n    };\n  }, [open]);\n\n  return (\n    <div ref={ref} className={styles.facet}>\n      <Button\n        variant={count > 0 ? 'primary' : 'secondary'}\n        size=\"small\"\n        isDisabled={!facet.enabled}\n        iconEnd={<RiArrowDropDownLine />}\n        aria-haspopup=\"true\"\n        aria-expanded={open}\n        aria-controls={open ? menuId : undefined}\n        aria-label={\n          count > 0\n            ? `${facet.label} filter, ${count} selected`\n            : `${facet.label} filter`\n        }\n        onPress={() => setOpen(prev => !prev)}\n      >\n        {facet.label}\n        {count > 0 ? <span className={styles.countChip}>{count}</span> : null}\n      </Button>\n      {open ? (\n        <div\n          id={menuId}\n          className={styles.menu}\n          role=\"group\"\n          aria-label={`${facet.label} options`}\n        >\n          {facet.options.map(option => {\n            const OptionIcon = facet.icons?.[option.value];\n            return (\n              <Checkbox\n                key={option.value}\n                className={styles.option}\n                isSelected={selected.includes(option.value)}\n                onChange={() => onToggle(option.value)}\n              >\n                {OptionIcon ? (\n                  <span className={styles.optionLabel}>\n                    <OptionIcon aria-hidden size={16} />\n                    {option.label}\n                  </span>\n                ) : (\n                  option.label\n                )}\n              </Checkbox>\n            );\n          })}\n          {count > 0 ? (\n            <div className={styles.menuFooter}>\n              <Button variant=\"tertiary\" size=\"small\" onPress={onClear}>\n                Clear\n              </Button>\n            </div>\n          ) : null}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\n/**\n * Presentational Phase 6 toolbar (D-01 top toolbar, D-02 multi-select dropdowns). Renders EVERY\n * facet in `FACET_ORDER` (revised D-05 — a facet with no values renders disabled) followed on the\n * same row by the inline `searchBar` paired with the `viewToggle` (and a conditional \"Clear all\"),\n * plus a polite `aria-live` result-count region. Purely props-driven — no data fetching and no\n * URL/provider access (that wiring is 06-04). (UI-06, UI-07)\n */\nexport function FilterToolbar({\n  facets,\n  selected,\n  onToggleFacet,\n  onClearFacet,\n  onClearAll,\n  active,\n  resultCount,\n  searchBar,\n  viewToggle,\n}: FilterToolbarProps) {\n  return (\n    <div role=\"search\" aria-label=\"Filter and search APIs\">\n      <div className={styles.toolbar}>\n        {facets.map(facet => (\n          <FacetDropdown\n            key={facet.key}\n            facet={facet}\n            selected={selected[facet.key]}\n            onToggle={value => onToggleFacet(facet.key, value)}\n            onClear={() => onClearFacet(facet.key)}\n          />\n        ))}\n        <div className={styles.searchRow}>\n          {searchBar}\n          {active ? (\n            <Button\n              variant=\"tertiary\"\n              size=\"small\"\n              iconStart={<RiCloseLine />}\n              onPress={onClearAll}\n            >\n              Clear all\n            </Button>\n          ) : null}\n          {viewToggle}\n        </div>\n      </div>\n      <span className={styles.srOnly} aria-live=\"polite\">\n        {`${resultCount} APIs match your filters`}\n      </span>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/FilterToolbar.module.css.esm.js

@@ -0,0 +1,8 @@
+import styleInject from '../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
+
+var css_248z = ".FilterToolbar_toolbar__0a37ccc2c0 {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--bui-space-2);\n  margin-bottom: var(--bui-space-4);\n}\n\n.FilterToolbar_facet__0a37ccc2c0 {\n  position: relative;\n}\n\n.FilterToolbar_countChip__0a37ccc2c0 {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 18px;\n  height: 18px;\n  margin-left: var(--bui-space-1);\n  padding: 0 var(--bui-space-1);\n  border-radius: var(--bui-radius-full);\n  background-color: var(--bui-bg-solid);\n  color: var(--bui-fg-solid);\n  font-size: var(--bui-font-size-1);\n  font-variant-numeric: tabular-nums;\n}\n\n.FilterToolbar_menu__0a37ccc2c0 {\n  position: absolute;\n  top: calc(100% + var(--bui-space-1));\n  left: 0;\n  z-index: 10;\n  min-width: 200px;\n  padding: var(--bui-space-2) 0;\n  border: 1px solid var(--bui-border-1);\n  border-radius: var(--bui-radius-3);\n  background-color: var(--bui-bg-app);\n  box-shadow: var(--bui-shadow);\n}\n\n.FilterToolbar_option__0a37ccc2c0 {\n  padding: var(--bui-space-1) var(--bui-space-3);\n}\n\n.FilterToolbar_optionLabel__0a37ccc2c0 {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--bui-space-1);\n}\n\n.FilterToolbar_menuFooter__0a37ccc2c0 {\n  display: flex;\n  justify-content: flex-end;\n  padding: var(--bui-space-1) var(--bui-space-2) 0;\n}\n\n.FilterToolbar_searchRow__0a37ccc2c0 {\n  flex: 1 1 auto;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  gap: var(--bui-space-2);\n}\n\n.FilterToolbar_srOnly__0a37ccc2c0 {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  white-space: nowrap;\n  border: 0;\n}\n";
+var styles = {"toolbar":"FilterToolbar_toolbar__0a37ccc2c0","facet":"FilterToolbar_facet__0a37ccc2c0","countChip":"FilterToolbar_countChip__0a37ccc2c0","menu":"FilterToolbar_menu__0a37ccc2c0","option":"FilterToolbar_option__0a37ccc2c0","optionLabel":"FilterToolbar_optionLabel__0a37ccc2c0","menuFooter":"FilterToolbar_menuFooter__0a37ccc2c0","searchRow":"FilterToolbar_searchRow__0a37ccc2c0","srOnly":"FilterToolbar_srOnly__0a37ccc2c0"};
+styleInject(css_248z);
+
+export { styles as default };
+//# sourceMappingURL=FilterToolbar.module.css.esm.js.map

package/dist/components/FilterToolbar.module.css.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterToolbar.module.css.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/components/SearchBar.esm.js

@@ -1,45 +1,17 @@
 import { jsx } from 'react/jsx-runtime';
-import { TextField, InputAdornment, IconButton, makeStyles } from '@material-ui/core';
-import Clear from '@material-ui/icons/Clear';
-import Search from '@material-ui/icons/Search';
+import { SearchField } from '@backstage/ui';
+import { RiSearchLine } from '@remixicon/react';
 
-const useStyles = makeStyles((theme) => ({
-  field: {
-    minWidth: 240,
-    flex: "1 1 auto",
-    "& input:focus-visible": {
-      outline: `2px solid ${theme.palette.primary.main}`,
-      outlineOffset: 2
-    }
-  },
-  searchIcon: {
-    color: theme.palette.text.secondary
-  }
-}));
 function SearchBar({ value, onChange }) {
-  const classes = useStyles();
   return /* @__PURE__ */ jsx(
-    TextField,
+    SearchField,
     {
-      className: classes.field,
-      variant: "outlined",
-      size: "small",
+      "aria-label": "Search APIs",
       placeholder: "Search APIs\u2026",
       value,
-      onChange: (event) => onChange(event.target.value),
-      inputProps: { "aria-label": "Search APIs" },
-      InputProps: {
-        startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(Search, { className: classes.searchIcon }) }),
-        endAdornment: value ? /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
-          IconButton,
-          {
-            size: "small",
-            "aria-label": "Clear search",
-            onClick: () => onChange(""),
-            children: /* @__PURE__ */ jsx(Clear, {})
-          }
-        ) }) : void 0
-      }
+      onChange,
+      icon: /* @__PURE__ */ jsx(RiSearchLine, {}),
+      style: { flex: "1 1 auto", minWidth: 240 }
     }
   );
 }

package/dist/components/SearchBar.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.esm.js","sources":["../../src/components/SearchBar.tsx"],"sourcesContent":["// SPDX-License-Identifier: Apache-2.0\r\nimport {\r\n  IconButton,\r\n  InputAdornment,\r\n  TextField,\r\n  makeStyles,\r\n} from '@material-ui/core';\r\nimport Clear from '@material-ui/icons/Clear';\r\nimport Search from '@material-ui/icons/Search';\r\n\r\nexport interface SearchBarProps {\r\n  /** Controlled input value — echoes keystrokes instantly (no debounce here). */\r\n  value: string;\r\n  /** Reports every change; the 200 ms trailing debounce lives in `useApigeeFilters` (06-04). */\r\n  onChange: (next: string) => void;\r\n}\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n  field: {\r\n    minWidth: 240,\r\n    flex: '1 1 auto',\r\n    '& input:focus-visible': {\r\n      outline: `2px solid ${theme.palette.primary.main}`,\r\n      outlineOffset: 2,\r\n    },\r\n  },\r\n  searchIcon: {\r\n    color: theme.palette.text.secondary,\r\n  },\r\n}));\r\n\r\n/**\r\n * Stateless, controlled outlined search field (UI-SPEC §Component Inventory #2). Holds NO state\r\n * and NO debounce — it purely echoes `value` and reports changes; the 200 ms trailing debounce\r\n * lives in the `useApigeeFilters` hook (06-04). Leading search icon, and a Clear\r\n * (✕) button shown only when `value` is non-empty. No spinner (UI-SPEC Assumption 9). The `value`\r\n * renders only as a controlled prop (React auto-escapes) — never raw HTML (T-06-03-01).\r\n */\r\nexport function SearchBar({ value, onChange }: SearchBarProps) {\r\n  const classes = useStyles();\r\n\r\n  return (\r\n    <TextField\r\n      className={classes.field}\r\n      variant=\"outlined\"\r\n      size=\"small\"\r\n      placeholder=\"Search APIs…\"\r\n      value={value}\r\n      onChange={event => onChange(event.target.value)}\r\n      inputProps={{ 'aria-label': 'Search APIs' }}\r\n      InputProps={{\r\n        startAdornment: (\r\n          <InputAdornment position=\"start\">\r\n            <Search className={classes.searchIcon} />\r\n          </InputAdornment>\r\n        ),\r\n        endAdornment: value ? (\r\n          <InputAdornment position=\"end\">\r\n            <IconButton\r\n              size=\"small\"\r\n              aria-label=\"Clear search\"\r\n              onClick={() => onChange('')}\r\n            >\r\n              <Clear />\r\n            </IconButton>\r\n          </InputAdornment>\r\n        ) : undefined,\r\n      }}\r\n    />\r\n  );\r\n}\r\n"],"names":[],"mappings":";;;;;AAiBA,MAAM,SAAA,GAAY,WAAW,CAAA,KAAA,MAAU;AAAA,EACrC,KAAA,EAAO;AAAA,IACL,QAAA,EAAU,GAAA;AAAA,IACV,IAAA,EAAM,UAAA;AAAA,IACN,uBAAA,EAAyB;AAAA,MACvB,OAAA,EAAS,CAAA,UAAA,EAAa,KAAA,CAAM,OAAA,CAAQ,QAAQ,IAAI,CAAA,CAAA;AAAA,MAChD,aAAA,EAAe;AAAA;AACjB,GACF;AAAA,EACA,UAAA,EAAY;AAAA,IACV,KAAA,EAAO,KAAA,CAAM,OAAA,CAAQ,IAAA,CAAK;AAAA;AAE9B,CAAA,CAAE,CAAA;AASK,SAAS,SAAA,CAAU,EAAE,KAAA,EAAO,QAAA,EAAS,EAAmB;AAC7D,EAAA,MAAM,UAAU,SAAA,EAAU;AAE1B,EAAA,uBACE,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,WAAW,OAAA,CAAQ,KAAA;AAAA,MACnB,OAAA,EAAQ,UAAA;AAAA,MACR,IAAA,EAAK,OAAA;AAAA,MACL,WAAA,EAAY,mBAAA;AAAA,MACZ,KAAA;AAAA,MACA,QAAA,EAAU,CAAA,KAAA,KAAS,QAAA,CAAS,KAAA,CAAM,OAAO,KAAK,CAAA;AAAA,MAC9C,UAAA,EAAY,EAAE,YAAA,EAAc,aAAA,EAAc;AAAA,MAC1C,UAAA,EAAY;AAAA,QACV,cAAA,kBACE,GAAA,CAAC,cAAA,EAAA,EAAe,QAAA,EAAS,OAAA,EACvB,8BAAC,MAAA,EAAA,EAAO,SAAA,EAAW,OAAA,CAAQ,UAAA,EAAY,CAAA,EACzC,CAAA;AAAA,QAEF,YAAA,EAAc,KAAA,mBACZ,GAAA,CAAC,cAAA,EAAA,EAAe,UAAS,KAAA,EACvB,QAAA,kBAAA,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,OAAA;AAAA,YACL,YAAA,EAAW,cAAA;AAAA,YACX,OAAA,EAAS,MAAM,QAAA,CAAS,EAAE,CAAA;AAAA,YAE1B,8BAAC,KAAA,EAAA,EAAM;AAAA;AAAA,WAEX,CAAA,GACE;AAAA;AACN;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"SearchBar.esm.js","sources":["../../src/components/SearchBar.tsx"],"sourcesContent":["// SPDX-License-Identifier: Apache-2.0\nimport { SearchField } from '@backstage/ui';\nimport { RiSearchLine } from '@remixicon/react';\n\nexport interface SearchBarProps {\n  /** Controlled input value — echoes keystrokes instantly (no debounce here). */\n  value: string;\n  /** Reports every change; the 200 ms trailing debounce lives in `useApigeeFilters` (06-04). */\n  onChange: (next: string) => void;\n}\n\n/**\n * Stateless, controlled search field (UI-SPEC §Component Inventory #2). Holds NO state\n * and NO debounce — it purely echoes `value` and reports changes; the 200 ms trailing debounce\n * lives in the `useApigeeFilters` hook (06-04). Leading search icon plus a built-in Clear (✕)\n * button that @backstage/ui `SearchField` shows only when `value` is non-empty. The `value`\n * renders only as a controlled prop (React auto-escapes) — never raw HTML (T-06-03-01).\n */\nexport function SearchBar({ value, onChange }: SearchBarProps) {\n  return (\n    <SearchField\n      aria-label=\"Search APIs\"\n      placeholder=\"Search APIs…\"\n      value={value}\n      onChange={onChange}\n      icon={<RiSearchLine />}\n      style={{ flex: '1 1 auto', minWidth: 240 }}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;AAkBO,SAAS,SAAA,CAAU,EAAE,KAAA,EAAO,QAAA,EAAS,EAAmB;AAC7D,EAAA,uBACE,GAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,YAAA,EAAW,aAAA;AAAA,MACX,WAAA,EAAY,mBAAA;AAAA,MACZ,KAAA;AAAA,MACA,QAAA;AAAA,MACA,IAAA,sBAAO,YAAA,EAAA,EAAa,CAAA;AAAA,MACpB,KAAA,EAAO,EAAE,IAAA,EAAM,UAAA,EAAY,UAAU,GAAA;AAAI;AAAA,GAC3C;AAEJ;;;;"}

package/dist/components/apiCardViewModel.esm.js

@@ -1,6 +1,6 @@
 import { parseEntityRef } from '@backstage/catalog-model';
 import { humanizeEntityRef } from '@backstage/plugin-catalog-react';
-import { ANNOTATION_CATEGORY, ANNOTATION_API_HUB_VERSION, ANNOTATION_HAS_SPEC } from '../constants.esm.js';
+import { ANNOTATION_CATEGORY, ANNOTATION_VERSION, ANNOTATION_PROXY_NAME, ANNOTATION_HAS_SPEC, LABEL_DEPARTMENT, ANNOTATION_APIGEE_ORGS, ANNOTATION_APIGEE_ORG } from '../constants.esm.js';
 
 function toBadge(lifecycle) {
   switch (lifecycle) {
@@ -14,6 +14,18 @@ function toBadge(lifecycle) {
       return { label: "Unknown", kind: "warning" };
   }
 }
+function toVisibilities(annotations) {
+  const raw = annotations[ANNOTATION_APIGEE_ORGS] ?? annotations[ANNOTATION_APIGEE_ORG] ?? "";
+  const orgs = raw.split(",").map((org) => org.trim().toLowerCase()).filter(Boolean);
+  const visibilities = [];
+  if (orgs.some((org) => org.includes("private"))) visibilities.push("private");
+  if (orgs.some((org) => org.includes("public"))) visibilities.push("public");
+  return visibilities;
+}
+function versionFromProxyName(proxyName) {
+  const match = proxyName?.match(/-v(\d+)$/i);
+  return match ? `${Number(match[1])}.0.0` : void 0;
+}
 function toApiCardViewModel(entity) {
   const annotations = entity.metadata.annotations ?? {};
   const owner = entity.spec?.owner;
@@ -24,9 +36,11 @@ function toApiCardViewModel(entity) {
       parseEntityRef(owner, { defaultKind: "group", defaultNamespace: "default" }),
       { defaultKind: "group" }
     ) : "unknown",
+    department: entity.metadata.labels?.[LABEL_DEPARTMENT] || void 0,
+    visibilities: toVisibilities(annotations),
     badge: toBadge(entity.spec?.lifecycle),
     hasSpec: annotations[ANNOTATION_HAS_SPEC] === "true",
-    version: annotations[ANNOTATION_API_HUB_VERSION] || void 0,
+    version: annotations[ANNOTATION_VERSION] || versionFromProxyName(annotations[ANNOTATION_PROXY_NAME]) || void 0,
     category: annotations[ANNOTATION_CATEGORY]?.split(",")[0]?.trim() || void 0,
     description,
     targetRef: {

package/dist/components/apiCardViewModel.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"apiCardViewModel.esm.js","sources":["../../src/components/apiCardViewModel.ts"],"sourcesContent":["// SPDX-License-Identifier: Apache-2.0\r\nimport { type Entity, parseEntityRef } from '@backstage/catalog-model';\r\nimport { humanizeEntityRef } from '@backstage/plugin-catalog-react';\r\nimport {\r\n  ANNOTATION_HAS_SPEC,\r\n  ANNOTATION_CATEGORY,\r\n  ANNOTATION_API_HUB_VERSION,\r\n} from '../constants';\r\n\r\nexport type LifecycleBadgeKind = 'ok' | 'warning' | 'error';\r\n\r\nexport interface ApiCardViewModel {\r\n  /** metadata.title ?? metadata.name */\r\n  name: string;\r\n  /** humanizeEntityRef(spec.owner, { defaultKind: 'group' }) — 'unknown' when absent */\r\n  ownerLabel: string;\r\n  badge: { label: string; kind: LifecycleBadgeKind };\r\n  /** annotations['apigee.com/has-spec'] === 'true' */\r\n  hasSpec: boolean;\r\n  /** annotations['apigee.com/api-hub-version'] — omitted when absent (D-05) */\r\n  version?: string;\r\n  /** first comma-separated slug of apigee.com/category — undefined => 'Other' bucket */\r\n  category?: string;\r\n  /** metadata.description — omitted when empty */\r\n  description?: string;\r\n  /** for entityRouteRef navigation (05-04) */\r\n  targetRef: { kind: 'API'; namespace: string; name: string };\r\n}\r\n\r\n/** D-04 lifecycle -> badge mapping. Unknown/undeployed/missing default to warning. */\r\nfunction toBadge(lifecycle: string | undefined): {\r\n  label: string;\r\n  kind: LifecycleBadgeKind;\r\n} {\r\n  switch (lifecycle) {\r\n    case 'production':\r\n      return { label: 'Production', kind: 'ok' };\r\n    case 'deprecated':\r\n      return { label: 'Deprecated', kind: 'error' };\r\n    case 'experimental':\r\n      return { label: 'Experimental', kind: 'warning' };\r\n    default:\r\n      return { label: 'Unknown', kind: 'warning' };\r\n  }\r\n}\r\n\r\n/** PURE mapper: an Apigee `kind: API` entity -> the view-model each tile renders. */\r\nexport function toApiCardViewModel(entity: Entity): ApiCardViewModel {\r\n  const annotations = entity.metadata.annotations ?? {};\r\n  const owner = entity.spec?.owner as string | undefined;\r\n  const description = entity.metadata.description?.trim()\r\n    ? entity.metadata.description\r\n    : undefined;\r\n\r\n  return {\r\n    name: entity.metadata.title ?? entity.metadata.name,\r\n    ownerLabel: owner\r\n      ? humanizeEntityRef(\r\n          parseEntityRef(owner, { defaultKind: 'group', defaultNamespace: 'default' }),\r\n          { defaultKind: 'group' },\r\n        )\r\n      : 'unknown',\r\n    badge: toBadge(entity.spec?.lifecycle as string | undefined),\r\n    hasSpec: annotations[ANNOTATION_HAS_SPEC] === 'true',\r\n    version: annotations[ANNOTATION_API_HUB_VERSION] || undefined,\r\n    category: annotations[ANNOTATION_CATEGORY]?.split(',')[0]?.trim() || undefined,\r\n    description,\r\n    targetRef: {\r\n      kind: 'API',\r\n      namespace: entity.metadata.namespace ?? 'default',\r\n      name: entity.metadata.name,\r\n    },\r\n  };\r\n}\r\n"],"names":[],"mappings":";;;;AA8BA,SAAS,QAAQ,SAAA,EAGf;AACA,EAAA,QAAQ,SAAA;AAAW,IACjB,KAAK,YAAA;AACH,MAAA,OAAO,EAAE,KAAA,EAAO,YAAA,EAAc,IAAA,EAAM,IAAA,EAAK;AAAA,IAC3C,KAAK,YAAA;AACH,MAAA,OAAO,EAAE,KAAA,EAAO,YAAA,EAAc,IAAA,EAAM,OAAA,EAAQ;AAAA,IAC9C,KAAK,cAAA;AACH,MAAA,OAAO,EAAE,KAAA,EAAO,cAAA,EAAgB,IAAA,EAAM,SAAA,EAAU;AAAA,IAClD;AACE,MAAA,OAAO,EAAE,KAAA,EAAO,SAAA,EAAW,IAAA,EAAM,SAAA,EAAU;AAAA;AAEjD;AAGO,SAAS,mBAAmB,MAAA,EAAkC;AACnE,EAAA,MAAM,WAAA,GAAc,MAAA,CAAO,QAAA,CAAS,WAAA,IAAe,EAAC;AACpD,EAAA,MAAM,KAAA,GAAQ,OAAO,IAAA,EAAM,KAAA;AAC3B,EAAA,MAAM,WAAA,GAAc,OAAO,QAAA,CAAS,WAAA,EAAa,MAAK,GAClD,MAAA,CAAO,SAAS,WAAA,GAChB,MAAA;AAEJ,EAAA,OAAO;AAAA,IACL,IAAA,EAAM,MAAA,CAAO,QAAA,CAAS,KAAA,IAAS,OAAO,QAAA,CAAS,IAAA;AAAA,IAC/C,YAAY,KAAA,GACR,iBAAA;AAAA,MACE,eAAe,KAAA,EAAO,EAAE,aAAa,OAAA,EAAS,gBAAA,EAAkB,WAAW,CAAA;AAAA,MAC3E,EAAE,aAAa,OAAA;AAAQ,KACzB,GACA,SAAA;AAAA,IACJ,KAAA,EAAO,OAAA,CAAQ,MAAA,CAAO,IAAA,EAAM,SAA+B,CAAA;AAAA,IAC3D,OAAA,EAAS,WAAA,CAAY,mBAAmB,CAAA,KAAM,MAAA;AAAA,IAC9C,OAAA,EAAS,WAAA,CAAY,0BAA0B,CAAA,IAAK,MAAA;AAAA,IACpD,QAAA,EAAU,WAAA,CAAY,mBAAmB,CAAA,EAAG,KAAA,CAAM,GAAG,CAAA,CAAE,CAAC,CAAA,EAAG,IAAA,EAAK,IAAK,MAAA;AAAA,IACrE,WAAA;AAAA,IACA,SAAA,EAAW;AAAA,MACT,IAAA,EAAM,KAAA;AAAA,MACN,SAAA,EAAW,MAAA,CAAO,QAAA,CAAS,SAAA,IAAa,SAAA;AAAA,MACxC,IAAA,EAAM,OAAO,QAAA,CAAS;AAAA;AACxB,GACF;AACF;;;;"}
+{"version":3,"file":"apiCardViewModel.esm.js","sources":["../../src/components/apiCardViewModel.ts"],"sourcesContent":["// SPDX-License-Identifier: Apache-2.0\nimport { type Entity, parseEntityRef } from '@backstage/catalog-model';\nimport { humanizeEntityRef } from '@backstage/plugin-catalog-react';\nimport {\n  ANNOTATION_HAS_SPEC,\n  ANNOTATION_CATEGORY,\n  ANNOTATION_VERSION,\n  ANNOTATION_PROXY_NAME,\n  ANNOTATION_APIGEE_ORGS,\n  ANNOTATION_APIGEE_ORG,\n  LABEL_DEPARTMENT,\n} from '../constants';\n\nexport type LifecycleBadgeKind = 'ok' | 'warning' | 'error';\n\n/** Apigee org exposure shown on the card, derived from the org name. */\nexport type ApiVisibility = 'private' | 'public';\n\nexport interface ApiCardViewModel {\n  /** metadata.title ?? metadata.name */\n  name: string;\n  /** humanizeEntityRef(spec.owner, { defaultKind: 'group' }) — 'unknown' when absent */\n  ownerLabel: string;\n  /** metadata.labels.department — omitted when absent */\n  department?: string;\n  /** Exposure derived from apigee.com/orgs — 'private', 'public', or both; [] when none. */\n  visibilities: ApiVisibility[];\n  badge: { label: string; kind: LifecycleBadgeKind };\n  /** annotations['apigee.com/has-spec'] === 'true' */\n  hasSpec: boolean;\n  /** annotations['apigee.com/version'], else the proxy name's -v<major> as x.0.0 — omitted when absent (D-05) */\n  version?: string;\n  /** first comma-separated slug of apigee.com/category — undefined => 'Other' bucket */\n  category?: string;\n  /** metadata.description — omitted when empty */\n  description?: string;\n  /** for entityRouteRef navigation (05-04) */\n  targetRef: { kind: 'API'; namespace: string; name: string };\n}\n\n/** D-04 lifecycle -> badge mapping. Unknown/undeployed/missing default to warning. */\nfunction toBadge(lifecycle: string | undefined): {\n  label: string;\n  kind: LifecycleBadgeKind;\n} {\n  switch (lifecycle) {\n    case 'production':\n      return { label: 'Production', kind: 'ok' };\n    case 'deprecated':\n      return { label: 'Deprecated', kind: 'error' };\n    case 'experimental':\n      return { label: 'Experimental', kind: 'warning' };\n    default:\n      return { label: 'Unknown', kind: 'warning' };\n  }\n}\n\n/** Derive exposure from the Apigee org annotation(s). Org names follow\n * `apigee-x-{private|public}-p-<id>`; an API can be published to one or both. */\nfunction toVisibilities(annotations: Record<string, string>): ApiVisibility[] {\n  const raw =\n    annotations[ANNOTATION_APIGEE_ORGS] ?? annotations[ANNOTATION_APIGEE_ORG] ?? '';\n  const orgs = raw\n    .split(',')\n    .map(org => org.trim().toLowerCase())\n    .filter(Boolean);\n  const visibilities: ApiVisibility[] = [];\n  if (orgs.some(org => org.includes('private'))) visibilities.push('private');\n  if (orgs.some(org => org.includes('public'))) visibilities.push('public');\n  return visibilities;\n}\n\n/** Extract a semantic version from a proxy name's trailing `-v<major>` segment\n * (e.g. `...-v4` -> `4.0.0`). Undefined when the name has no version suffix. */\nfunction versionFromProxyName(proxyName: string | undefined): string | undefined {\n  const match = proxyName?.match(/-v(\\d+)$/i);\n  return match ? `${Number(match[1])}.0.0` : undefined;\n}\n\n/** PURE mapper: an Apigee `kind: API` entity -> the view-model each tile renders. */\nexport function toApiCardViewModel(entity: Entity): ApiCardViewModel {\n  const annotations = entity.metadata.annotations ?? {};\n  const owner = entity.spec?.owner as string | undefined;\n  const description = entity.metadata.description?.trim()\n    ? entity.metadata.description\n    : undefined;\n\n  return {\n    name: entity.metadata.title ?? entity.metadata.name,\n    ownerLabel: owner\n      ? humanizeEntityRef(\n          parseEntityRef(owner, { defaultKind: 'group', defaultNamespace: 'default' }),\n          { defaultKind: 'group' },\n        )\n      : 'unknown',\n    department: entity.metadata.labels?.[LABEL_DEPARTMENT] || undefined,\n    visibilities: toVisibilities(annotations),\n    badge: toBadge(entity.spec?.lifecycle as string | undefined),\n    hasSpec: annotations[ANNOTATION_HAS_SPEC] === 'true',\n    version:\n      annotations[ANNOTATION_VERSION] ||\n      versionFromProxyName(annotations[ANNOTATION_PROXY_NAME]) ||\n      undefined,\n    category: annotations[ANNOTATION_CATEGORY]?.split(',')[0]?.trim() || undefined,\n    description,\n    targetRef: {\n      kind: 'API',\n      namespace: entity.metadata.namespace ?? 'default',\n      name: entity.metadata.name,\n    },\n  };\n}\n"],"names":[],"mappings":"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"}

package/dist/components/apigeeFacetFilters.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"apigeeFacetFilters.esm.js","sources":["../../src/components/apigeeFacetFilters.ts"],"sourcesContent":["// SPDX-License-Identifier: Apache-2.0\r\nimport { type Entity, parseEntityRef } from '@backstage/catalog-model';\r\nimport type { EntityFilter } from '@backstage/plugin-catalog-react';\r\nimport { humanizeEntityRef } from '@backstage/plugin-catalog-react';\r\nimport {\r\n  ANNOTATION_APIGEE_ORGS,\r\n  ANNOTATION_APIGEE_ORG,\r\n  ANNOTATION_CATEGORY,\r\n  LABEL_DEPARTMENT,\r\n} from '../constants';\r\n\r\n/** Dual-key is-Apigee gate (same rule as the existing ApigeeOrgFilter). */\r\nexport function isApigeeEntity(e: Entity): boolean {\r\n  const a = e.metadata.annotations ?? {};\r\n  return ANNOTATION_APIGEE_ORGS in a || ANNOTATION_APIGEE_ORG in a;\r\n}\r\n\r\n// --- Pure field extractors: the ONE place each facet's value is defined. Reused by\r\n//     deriveFacets(), the facet predicates, and the search haystack. Unit-testable. ---\r\nexport const entityLifecycle = (e: Entity): string | undefined =>\r\n  (e.spec?.lifecycle as string | undefined)?.trim() || undefined;\r\n\r\nexport const entityOwnerLabel = (e: Entity): string | undefined => {\r\n  const owner = e.spec?.owner as string | undefined;\r\n  return owner\r\n    ? humanizeEntityRef(\r\n        parseEntityRef(owner, { defaultKind: 'group', defaultNamespace: 'default' }),\r\n        { defaultKind: 'group' },\r\n      ) // 'group:default/payments-team' -> 'payments-team'\r\n    : undefined;\r\n};\r\n\r\nexport const entityOrg = (e: Entity): string | undefined => {\r\n  const a = e.metadata.annotations ?? {};\r\n  return (\r\n    (a[ANNOTATION_APIGEE_ORGS] ?? a[ANNOTATION_APIGEE_ORG])?.split(',')[0]?.trim() ||\r\n    undefined\r\n  );\r\n};\r\n\r\nexport const entityCategory = (e: Entity): string | undefined =>\r\n  (e.metadata.annotations ?? {})[ANNOTATION_CATEGORY]?.split(',')[0]?.trim() ||\r\n  undefined;\r\n\r\n/**\r\n * Facet-only category value: maps an uncategorised entity to the 'other' bucket\r\n * (LOCKED UI-SPEC Facet Data). Search uses `entityCategory` (the REAL slug) instead,\r\n * so a search for \"other\" does not match uncategorised APIs.\r\n */\r\nexport const entityCategoryFacet = (e: Entity): string =>\r\n  entityCategory(e) ?? 'other';\r\n\r\n/** Department facet value: the `department` label written from the API Hub \"Business unit\". */\r\nexport const entityDepartment = (e: Entity): string | undefined =>\r\n  (e.metadata.labels ?? {})[LABEL_DEPARTMENT]?.trim() || undefined;\r\n\r\n/** Generic single-field multi-value facet. Within-facet OR. No URL seam / getCatalogFilters. */\r\nexport class FieldFacetFilter implements EntityFilter {\r\n  constructor(\r\n    private readonly extract: (e: Entity) => string | undefined,\r\n    public readonly values: string[],\r\n  ) {}\r\n  filterEntity(entity: Entity): boolean {\r\n    const v = this.extract(entity);\r\n    return v !== undefined && this.values.includes(v); // OR across selected values\r\n  }\r\n}\r\n\r\n/** Broad \"find anything\" search: name + description + owner + org + category (D-09). */\r\nexport function apiSearchHaystack(e: Entity): string {\r\n  return [\r\n    e.metadata.title ?? e.metadata.name,\r\n    e.metadata.description ?? '',\r\n    entityOwnerLabel(e) ?? '',\r\n    entityOrg(e) ?? '',\r\n    entityCategory(e) ?? '',\r\n  ]\r\n    .join(' ')\r\n    .toLowerCase();\r\n}\r\n\r\nexport class ApiSearchFilter implements EntityFilter {\r\n  private readonly needle: string;\r\n  constructor(query: string) {\r\n    this.needle = query.trim().toLowerCase();\r\n  }\r\n  filterEntity(entity: Entity): boolean {\r\n    // String.includes ONLY — never build a RegExp from user input (ReDoS guard).\r\n    return this.needle === '' || apiSearchHaystack(entity).includes(this.needle);\r\n  }\r\n}\r\n\r\n/**\r\n * Replaces EntityKindFilter('api','API'): keeps the backend kind=API filter but exposes no\r\n * URL seam, so the provider does not serialize `filters[kind]=API` into the URL (D-06).\r\n */\r\nexport class ApiKindFilter implements EntityFilter {\r\n  readonly value = 'API';\r\n  getCatalogFilters(): Record<string, string> {\r\n    return { kind: this.value };\r\n  }\r\n}\r\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"apigeeFacetFilters.esm.js","sources":["../../src/components/apigeeFacetFilters.ts"],"sourcesContent":["// SPDX-License-Identifier: Apache-2.0\nimport { type Entity, parseEntityRef } from '@backstage/catalog-model';\nimport type { EntityFilter } from '@backstage/plugin-catalog-react';\nimport { humanizeEntityRef } from '@backstage/plugin-catalog-react';\nimport {\n  ANNOTATION_APIGEE_ORGS,\n  ANNOTATION_APIGEE_ORG,\n  ANNOTATION_CATEGORY,\n  LABEL_DEPARTMENT,\n} from '../constants';\n\n/** Dual-key is-Apigee gate (same rule as the existing ApigeeOrgFilter). */\nexport function isApigeeEntity(e: Entity): boolean {\n  const a = e.metadata.annotations ?? {};\n  return ANNOTATION_APIGEE_ORGS in a || ANNOTATION_APIGEE_ORG in a;\n}\n\n// --- Pure field extractors: the ONE place each facet's value is defined. Reused by\n//     deriveFacets(), the facet predicates, and the search haystack. Unit-testable. ---\nexport const entityLifecycle = (e: Entity): string | undefined =>\n  (e.spec?.lifecycle as string | undefined)?.trim() || undefined;\n\nexport const entityOwnerLabel = (e: Entity): string | undefined => {\n  const owner = e.spec?.owner as string | undefined;\n  return owner\n    ? humanizeEntityRef(\n        parseEntityRef(owner, { defaultKind: 'group', defaultNamespace: 'default' }),\n        { defaultKind: 'group' },\n      ) // 'group:default/payments-team' -> 'payments-team'\n    : undefined;\n};\n\nexport const entityOrg = (e: Entity): string | undefined => {\n  const a = e.metadata.annotations ?? {};\n  return (\n    (a[ANNOTATION_APIGEE_ORGS] ?? a[ANNOTATION_APIGEE_ORG])?.split(',')[0]?.trim() ||\n    undefined\n  );\n};\n\nexport const entityCategory = (e: Entity): string | undefined =>\n  (e.metadata.annotations ?? {})[ANNOTATION_CATEGORY]?.split(',')[0]?.trim() ||\n  undefined;\n\n/**\n * Facet-only category value: maps an uncategorised entity to the 'other' bucket\n * (LOCKED UI-SPEC Facet Data). Search uses `entityCategory` (the REAL slug) instead,\n * so a search for \"other\" does not match uncategorised APIs.\n */\nexport const entityCategoryFacet = (e: Entity): string =>\n  entityCategory(e) ?? 'other';\n\n/** Department facet value: the `department` label written from the API Hub \"Business unit\". */\nexport const entityDepartment = (e: Entity): string | undefined =>\n  (e.metadata.labels ?? {})[LABEL_DEPARTMENT]?.trim() || undefined;\n\n/** Generic single-field multi-value facet. Within-facet OR. No URL seam / getCatalogFilters. */\nexport class FieldFacetFilter implements EntityFilter {\n  constructor(\n    private readonly extract: (e: Entity) => string | undefined,\n    public readonly values: string[],\n  ) {}\n  filterEntity(entity: Entity): boolean {\n    const v = this.extract(entity);\n    return v !== undefined && this.values.includes(v); // OR across selected values\n  }\n}\n\n/** Broad \"find anything\" search: name + description + owner + org + category (D-09). */\nexport function apiSearchHaystack(e: Entity): string {\n  return [\n    e.metadata.title ?? e.metadata.name,\n    e.metadata.description ?? '',\n    entityOwnerLabel(e) ?? '',\n    entityOrg(e) ?? '',\n    entityCategory(e) ?? '',\n  ]\n    .join(' ')\n    .toLowerCase();\n}\n\nexport class ApiSearchFilter implements EntityFilter {\n  private readonly needle: string;\n  constructor(query: string) {\n    this.needle = query.trim().toLowerCase();\n  }\n  filterEntity(entity: Entity): boolean {\n    // String.includes ONLY — never build a RegExp from user input (ReDoS guard).\n    return this.needle === '' || apiSearchHaystack(entity).includes(this.needle);\n  }\n}\n\n/**\n * Replaces EntityKindFilter('api','API'): keeps the backend kind=API filter but exposes no\n * URL seam, so the provider does not serialize `filters[kind]=API` into the URL (D-06).\n */\nexport class ApiKindFilter implements EntityFilter {\n  readonly value = 'API';\n  getCatalogFilters(): Record<string, string> {\n    return { kind: this.value };\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/components/apigeeOrgFilter.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"apigeeOrgFilter.esm.js","sources":["../../src/components/apigeeOrgFilter.ts"],"sourcesContent":["// SPDX-License-Identifier: Apache-2.0\r\nimport type { Entity } from '@backstage/catalog-model';\r\nimport type { EntityFilter } from '@backstage/plugin-catalog-react';\r\nimport { ANNOTATION_APIGEE_ORGS, ANNOTATION_APIGEE_ORG } from '../constants';\r\n\r\n/**\r\n * Frontend predicate that keeps an entity when it carries EITHER Apigee org key.\r\n * MUST match both: proxy-derived APIs use the plural key, hub-only APIs the singular\r\n * (RESEARCH Pitfall 1 / CAT-05). Uses filterEntity (not getCatalogFilters) because a\r\n * single backend filter record cannot OR two different annotation keys.\r\n */\r\nexport class ApigeeOrgFilter implements EntityFilter {\r\n  filterEntity(entity: Entity): boolean {\r\n    const a = entity.metadata.annotations ?? {};\r\n    return ANNOTATION_APIGEE_ORGS in a || ANNOTATION_APIGEE_ORG in a;\r\n  }\r\n}\r\n"],"names":[],"mappings":";;AAWO,MAAM,eAAA,CAAwC;AAAA,EACnD,aAAa,MAAA,EAAyB;AACpC,IAAA,MAAM,CAAA,GAAI,MAAA,CAAO,QAAA,CAAS,WAAA,IAAe,EAAC;AAC1C,IAAA,OAAO,sBAAA,IAA0B,KAAK,qBAAA,IAAyB,CAAA;AAAA,EACjE;AACF;;;;"}
+{"version":3,"file":"apigeeOrgFilter.esm.js","sources":["../../src/components/apigeeOrgFilter.ts"],"sourcesContent":["// SPDX-License-Identifier: Apache-2.0\nimport type { Entity } from '@backstage/catalog-model';\nimport type { EntityFilter } from '@backstage/plugin-catalog-react';\nimport { ANNOTATION_APIGEE_ORGS, ANNOTATION_APIGEE_ORG } from '../constants';\n\n/**\n * Frontend predicate that keeps an entity when it carries EITHER Apigee org key.\n * MUST match both: proxy-derived APIs use the plural key, hub-only APIs the singular\n * (RESEARCH Pitfall 1 / CAT-05). Uses filterEntity (not getCatalogFilters) because a\n * single backend filter record cannot OR two different annotation keys.\n */\nexport class ApigeeOrgFilter implements EntityFilter {\n  filterEntity(entity: Entity): boolean {\n    const a = entity.metadata.annotations ?? {};\n    return ANNOTATION_APIGEE_ORGS in a || ANNOTATION_APIGEE_ORG in a;\n  }\n}\n"],"names":[],"mappings":";;AAWO,MAAM,eAAA,CAAwC;AAAA,EACnD,aAAa,MAAA,EAAyB;AACpC,IAAA,MAAM,CAAA,GAAI,MAAA,CAAO,QAAA,CAAS,WAAA,IAAe,EAAC;AAC1C,IAAA,OAAO,sBAAA,IAA0B,KAAK,qBAAA,IAAyB,CAAA;AAAA,EACjE;AACF;;;;"}

package/dist/components/apigeeSearchParams.esm.js

@@ -16,6 +16,19 @@ function parseSearchParams(sp) {
 function isActive(state) {
   return state.q.trim() !== "" || FACET_ORDER.some((k) => state.selected[k].length > 0);
 }
+function selectOnlyFacetParams(prev, key, value) {
+  const current = prev.getAll(QKEY[key]);
+  const isSoleSelection = current.length === 1 && current[0] === value && FACET_ORDER.every((k) => k === key || prev.getAll(QKEY[k]).length === 0);
+  const next = new URLSearchParams();
+  const q = prev.get("q");
+  if (q) {
+    next.set("q", q);
+  }
+  if (!isSoleSelection) {
+    next.append(QKEY[key], value);
+  }
+  return next;
+}
 
-export { isActive, parseSearchParams };
+export { isActive, parseSearchParams, selectOnlyFacetParams };
 //# sourceMappingURL=apigeeSearchParams.esm.js.map

package/dist/components/apigeeSearchParams.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"apigeeSearchParams.esm.js","sources":["../../src/components/apigeeSearchParams.ts"],"sourcesContent":["// SPDX-License-Identifier: Apache-2.0\r\nimport { FACET_ORDER, type FacetKey } from './facetModel';\r\n\r\nexport interface ApigeeFilterState {\r\n  selected: Record<FacetKey, string[]>;\r\n  q: string;\r\n}\r\n\r\n/** Clean URL keys (D-06): one query key per facet, no native `filters[...]` wrapper. */\r\nconst QKEY: Record<FacetKey, string> = {\r\n  lifecycle: 'lifecycle',\r\n  org: 'org',\r\n  owner: 'owner',\r\n  category: 'category',\r\n  department: 'department',\r\n};\r\n\r\n/**\r\n * URL → state. Repeated keys become arrays (D-07) via `getAll`; unknown/extra keys are\r\n * ignored. Values are treated as opaque strings — no eval, RegExp, or HTML (T-06-02-01);\r\n * an unknown facet value simply matches nothing downstream (derived allow-list).\r\n */\r\nexport function parseSearchParams(sp: URLSearchParams): ApigeeFilterState {\r\n  const selected = Object.fromEntries(\r\n    FACET_ORDER.map(k => [k, sp.getAll(QKEY[k])]),\r\n  ) as Record<FacetKey, string[]>;\r\n  return { selected, q: sp.get('q') ?? '' };\r\n}\r\n\r\n/**\r\n * state → URL. Deterministic order (FACET_ORDER, then `q` last) reproduces the exact SC #3\r\n * shape `?lifecycle=deprecated&q=payment`. Only the known clean keys are appended and empties\r\n * are omitted (T-06-02-02) — no injection surface. Multi-value facets serialize as repeated\r\n * keys (D-07) via `append`.\r\n */\r\nexport function buildSearchParams(state: ApigeeFilterState): URLSearchParams {\r\n  const sp = new URLSearchParams();\r\n  for (const k of FACET_ORDER) {\r\n    for (const v of state.selected[k]) {\r\n      sp.append(QKEY[k], v);\r\n    }\r\n  }\r\n  if (state.q.trim()) {\r\n    sp.set('q', state.q.trim());\r\n  }\r\n  return sp;\r\n}\r\n\r\n/** True when any facet is selected or the search box holds a non-blank query. */\r\nexport function isActive(state: ApigeeFilterState): boolean {\r\n  return (\r\n    state.q.trim() !== '' || FACET_ORDER.some(k => state.selected[k].length > 0)\r\n  );\r\n}\r\n"],"names":[],"mappings":";;AASA,MAAM,IAAA,GAAiC;AAAA,EACrC,SAAA,EAAW,WAAA;AAAA,EACX,GAAA,EAAK,KAAA;AAAA,EACL,KAAA,EAAO,OAAA;AAAA,EACP,QAAA,EAAU,UAAA;AAAA,EACV,UAAA,EAAY;AACd,CAAA;AAOO,SAAS,kBAAkB,EAAA,EAAwC;AACxE,EAAA,MAAM,WAAW,MAAA,CAAO,WAAA;AAAA,IACtB,WAAA,CAAY,GAAA,CAAI,CAAA,CAAA,KAAK,CAAC,CAAA,EAAG,EAAA,CAAG,MAAA,CAAO,IAAA,CAAK,CAAC,CAAC,CAAC,CAAC;AAAA,GAC9C;AACA,EAAA,OAAO,EAAE,QAAA,EAAU,CAAA,EAAG,GAAG,GAAA,CAAI,GAAG,KAAK,EAAA,EAAG;AAC1C;AAsBO,SAAS,SAAS,KAAA,EAAmC;AAC1D,EAAA,OACE,KAAA,CAAM,CAAA,CAAE,IAAA,EAAK,KAAM,EAAA,IAAM,WAAA,CAAY,IAAA,CAAK,CAAA,CAAA,KAAK,KAAA,CAAM,QAAA,CAAS,CAAC,CAAA,CAAE,SAAS,CAAC,CAAA;AAE/E;;;;"}
+{"version":3,"file":"apigeeSearchParams.esm.js","sources":["../../src/components/apigeeSearchParams.ts"],"sourcesContent":["// SPDX-License-Identifier: Apache-2.0\nimport { FACET_ORDER, type FacetKey } from './facetModel';\n\nexport interface ApigeeFilterState {\n  selected: Record<FacetKey, string[]>;\n  q: string;\n}\n\n/** Clean URL keys (D-06): one query key per facet, no native `filters[...]` wrapper. */\nconst QKEY: Record<FacetKey, string> = {\n  lifecycle: 'lifecycle',\n  org: 'org',\n  owner: 'owner',\n  category: 'category',\n  department: 'department',\n};\n\n/**\n * URL → state. Repeated keys become arrays (D-07) via `getAll`; unknown/extra keys are\n * ignored. Values are treated as opaque strings — no eval, RegExp, or HTML (T-06-02-01);\n * an unknown facet value simply matches nothing downstream (derived allow-list).\n */\nexport function parseSearchParams(sp: URLSearchParams): ApigeeFilterState {\n  const selected = Object.fromEntries(\n    FACET_ORDER.map(k => [k, sp.getAll(QKEY[k])]),\n  ) as Record<FacetKey, string[]>;\n  return { selected, q: sp.get('q') ?? '' };\n}\n\n/**\n * state → URL. Deterministic order (FACET_ORDER, then `q` last) reproduces the exact SC #3\n * shape `?lifecycle=deprecated&q=payment`. Only the known clean keys are appended and empties\n * are omitted (T-06-02-02) — no injection surface. Multi-value facets serialize as repeated\n * keys (D-07) via `append`.\n */\nexport function buildSearchParams(state: ApigeeFilterState): URLSearchParams {\n  const sp = new URLSearchParams();\n  for (const k of FACET_ORDER) {\n    for (const v of state.selected[k]) {\n      sp.append(QKEY[k], v);\n    }\n  }\n  if (state.q.trim()) {\n    sp.set('q', state.q.trim());\n  }\n  return sp;\n}\n\n/** True when any facet is selected or the search box holds a non-blank query. */\nexport function isActive(state: ApigeeFilterState): boolean {\n  return (\n    state.q.trim() !== '' || FACET_ORDER.some(k => state.selected[k].length > 0)\n  );\n}\n\n/**\n * Single-select URL update for the count cards: the clicked value becomes the ONLY active facet\n * selection (every other facet is cleared), so each card click filters to exactly that value\n * instead of accumulating like the toolbar's multi-select toggle. Clicking the current sole\n * selection clears it. The `q` search query is always preserved.\n */\nexport function selectOnlyFacetParams(\n  prev: URLSearchParams,\n  key: FacetKey,\n  value: string,\n): URLSearchParams {\n  const current = prev.getAll(QKEY[key]);\n  const isSoleSelection =\n    current.length === 1 &&\n    current[0] === value &&\n    FACET_ORDER.every(k => k === key || prev.getAll(QKEY[k]).length === 0);\n  const next = new URLSearchParams();\n  const q = prev.get('q');\n  if (q) {\n    next.set('q', q);\n  }\n  if (!isSoleSelection) {\n    next.append(QKEY[key], value);\n  }\n  return next;\n}\n"],"names":[],"mappings":";;AASA,MAAM,IAAA,GAAiC;AAAA,EACrC,SAAA,EAAW,WAAA;AAAA,EACX,GAAA,EAAK,KAAA;AAAA,EACL,KAAA,EAAO,OAAA;AAAA,EACP,QAAA,EAAU,UAAA;AAAA,EACV,UAAA,EAAY;AACd,CAAA;AAOO,SAAS,kBAAkB,EAAA,EAAwC;AACxE,EAAA,MAAM,WAAW,MAAA,CAAO,WAAA;AAAA,IACtB,WAAA,CAAY,GAAA,CAAI,CAAA,CAAA,KAAK,CAAC,CAAA,EAAG,EAAA,CAAG,MAAA,CAAO,IAAA,CAAK,CAAC,CAAC,CAAC,CAAC;AAAA,GAC9C;AACA,EAAA,OAAO,EAAE,QAAA,EAAU,CAAA,EAAG,GAAG,GAAA,CAAI,GAAG,KAAK,EAAA,EAAG;AAC1C;AAsBO,SAAS,SAAS,KAAA,EAAmC;AAC1D,EAAA,OACE,KAAA,CAAM,CAAA,CAAE,IAAA,EAAK,KAAM,EAAA,IAAM,WAAA,CAAY,IAAA,CAAK,CAAA,CAAA,KAAK,KAAA,CAAM,QAAA,CAAS,CAAC,CAAA,CAAE,SAAS,CAAC,CAAA;AAE/E;AAQO,SAAS,qBAAA,CACd,IAAA,EACA,GAAA,EACA,KAAA,EACiB;AACjB,EAAA,MAAM,OAAA,GAAU,IAAA,CAAK,MAAA,CAAO,IAAA,CAAK,GAAG,CAAC,CAAA;AACrC,EAAA,MAAM,eAAA,GACJ,QAAQ,MAAA,KAAW,CAAA,IACnB,QAAQ,CAAC,CAAA,KAAM,SACf,WAAA,CAAY,KAAA,CAAM,OAAK,CAAA,KAAM,GAAA,IAAO,KAAK,MAAA,CAAO,IAAA,CAAK,CAAC,CAAC,CAAA,CAAE,WAAW,CAAC,CAAA;AACvE,EAAA,MAAM,IAAA,GAAO,IAAI,eAAA,EAAgB;AACjC,EAAA,MAAM,CAAA,GAAI,IAAA,CAAK,GAAA,CAAI,GAAG,CAAA;AACtB,EAAA,IAAI,CAAA,EAAG;AACL,IAAA,IAAA,CAAK,GAAA,CAAI,KAAK,CAAC,CAAA;AAAA,EACjB;AACA,EAAA,IAAI,CAAC,eAAA,EAAiB;AACpB,IAAA,IAAA,CAAK,MAAA,CAAO,IAAA,CAAK,GAAG,CAAA,EAAG,KAAK,CAAA;AAAA,EAC9B;AACA,EAAA,OAAO,IAAA;AACT;;;;"}

package/dist/components/categoryIcons.esm.js

@@ -1,27 +1,17 @@
-import Category from '@material-ui/icons/Category';
-import Security from '@material-ui/icons/Security';
-import Payment from '@material-ui/icons/Payment';
-import People from '@material-ui/icons/People';
-import ShoppingCart from '@material-ui/icons/ShoppingCart';
-import Notifications from '@material-ui/icons/Notifications';
-import Assessment from '@material-ui/icons/Assessment';
-import SettingsEthernet from '@material-ui/icons/SettingsEthernet';
-import Devices from '@material-ui/icons/Devices';
-import Tv from '@material-ui/icons/Tv';
-import Place from '@material-ui/icons/Place';
+import { RiMapPinLine, RiTvLine, RiSmartphoneLine, RiRouterLine, RiBarChartBoxLine, RiNotification3Line, RiShoppingCartLine, RiTeamLine, RiBankCardLine, RiShieldKeyholeLine, RiAppsLine } from '@remixicon/react';
 
 const ICONS = {
-  Category,
-  Security,
-  Payment,
-  People,
-  ShoppingCart,
-  Notifications,
-  Assessment,
-  SettingsEthernet,
-  Devices,
-  Tv,
-  Place
+  Category: RiAppsLine,
+  Security: RiShieldKeyholeLine,
+  Payment: RiBankCardLine,
+  People: RiTeamLine,
+  ShoppingCart: RiShoppingCartLine,
+  Notifications: RiNotification3Line,
+  Assessment: RiBarChartBoxLine,
+  SettingsEthernet: RiRouterLine,
+  Devices: RiSmartphoneLine,
+  Tv: RiTvLine,
+  Place: RiMapPinLine
 };
 const DEFAULT_MAP = [
   { match: /security|auth|identity|oauth/i, key: "Security" },