@nospt/backstage-plugin-apigee 1.1.1

package/README.md

@@ -0,0 +1,98 @@
+# @nospt/backstage-plugin-apigee
+
+The **frontend** package of the [Backstage Apigee plugin](../../README.md) — a dedicated **API Hub** experience for browsing the Apigee proxies and Apigee API Hub definitions that the [backend module](../apigee-backend/README.md) syncs into your catalog.
+
+Built on the Backstage **New Frontend System**.
+
+## What you get
+
+- **API Hub dashboard** (`/api-hub`) — an overview with live counts of your APIs by lifecycle (production / experimental / deprecated) and quick links into the catalog.
+- **API catalog** (`/api-hub/catalog`) — a searchable, paginated grid of API cards with:
+  - facet filters for **lifecycle**, **org**, **owner**, and **department**;
+  - full-text search and a configurable page-size selector;
+  - a details drawer showing metadata and the embedded or linked OpenAPI/AsyncAPI spec.
+- **Shareable views** — filters, search, and paging are all reflected in the URL (`?lifecycle=`, `?org=`, `?owner=`, `?department=`, `?q=`, `?page=`, `?size=`), so any view can be bookmarked or shared.
+
+The catalog only shows entities produced by the Apigee backend (identified by their `cloud.google.com/*` annotations), so it lives happily alongside the rest of your Backstage catalog.
+
+<!-- Replace these placeholders with real screenshots or GIFs (see ../../docs/images/README.md). -->
+
+![The API Hub dashboard: API counts by lifecycle with quick links into the catalog](../../docs/images/api-hub-dashboard.png)
+
+![The API catalog: a searchable, filterable grid of API cards](../../docs/images/api-catalog.png)
+
+## Routes
+
+| Path               | Tab         | Description                                       |
+| ------------------ | ----------- | ------------------------------------------------- |
+| `/api-hub`         | Home        | Landing dashboard with API stats and quick links. |
+| `/api-hub/catalog` | API catalog | Filterable, searchable grid of API entities.      |
+
+## Installation
+
+Add the package to your app:
+
+```bash
+yarn --cwd packages/app add @nospt/backstage-plugin-apigee
+```
+
+Register the plugin in `packages/app/src/App.tsx`:
+
+```ts
+import apigeePlugin from '@nospt/backstage-plugin-apigee';
+
+export const app = createApp({
+  features: [
+    // ...
+    apigeePlugin,
+  ],
+});
+```
+
+### Optional: grouped navigation
+
+The package also exports `apigeeNavModule`, a New Frontend System nav module that renders an expandable **API Hub** group (with the Home and API catalog sub-pages) in the app sidebar. Add it to your app's features to enable it:
+
+```ts
+import apigeePlugin, { apigeeNavModule } from '@nospt/backstage-plugin-apigee';
+
+export const app = createApp({
+  features: [apigeePlugin, apigeeNavModule],
+});
+```
+
+If you manage the sidebar with your own nav module, skip `apigeeNavModule` and link to `/api-hub` directly.
+
+## Configuration
+
+All frontend settings are optional and live under `apigee.catalog`:
+
+```yaml
+apigee:
+  catalog:
+    # Friendly labels for the "Org" filter facet: raw org id -> display label.
+    orgLabels:
+      apigee-x-private-p-495866: Private
+      apigee-x-public-p-863498: Public
+    # Initial API cards per page. Users can change it via the selector
+    # (10/20/30/40/50). Values below 1 are floored to 1; defaults to 10.
+    pageSize: 24
+```
+
+| Key                        | Type   | Default | Description                                                                                                  |
+| -------------------------- | ------ | ------- | ------------------------------------------------------------------------------------------------------------ |
+| `apigee.catalog.orgLabels` | map    | —       | Maps raw org ids to friendly labels shown in the **Org** facet. Unmapped ids fall back to a humanised label. |
+| `apigee.catalog.pageSize`  | number | `10`    | Initial page size for the catalog grid.                                                                      |
+
+The entities themselves (and everything shown on the cards) come from the backend module — see its [configuration reference](../apigee-backend/README.md#configuration).
+
+## Development
+
+```bash
+cd plugins/apigee
+yarn start    # run the isolated dev harness
+yarn test     # unit tests
+yarn test:e2e # Playwright end-to-end tests
+yarn lint
+yarn build
+```

package/config.d.ts

@@ -0,0 +1,30 @@
+// SPDX-License-Identifier: Apache-2.0
+export interface Config {
+  apigee?: {
+    catalog?: {
+      /**
+       * Optional org-id -> display-label map for the Org facet.
+       * Keys are raw annotation values (for example `apigee-x-private-p-495866`);
+       * values are user-facing labels (for example `Private`).
+       * Unmapped org IDs fall back to the default humanised label.
+       *
+       * Deep visibility (the tag below) is required because this is a map with
+       * dynamic keys: plain frontend visibility exposes only the container, so the
+       * config-visibility filter strips the label values and the frontend receives
+       * an empty object. Deep visibility propagates to the values instead.
+       * Keep that tag as the ONLY at-sign token in this comment — the schema parser
+       * reads any at-sign visibility word in the prose as a real tag, and a stray
+       * one breaks compilation with an "invalid visibility value" error.
+       * @deepVisibility frontend
+       */
+      orgLabels?: { [orgId: string]: string };
+      /**
+       * Initial number of API cards shown per page in the Apigee catalog grid. Users can
+       * change it via the pagination selector (10/20/30/40/50). Values below 1 are floored
+       * to 1; defaults to 20 when unset.
+       * @visibility frontend
+       */
+      pageSize?: number;
+    };
+  };
+}

package/dist/components/ApiCard.esm.js

@@ -0,0 +1,105 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Link } from '@backstage/core-components';
+import { useRouteRef } from '@backstage/frontend-plugin-api';
+import { entityRouteRef } from '@backstage/plugin-catalog-react';
+import { Text } from '@backstage/ui';
+import { RiGlobalLine, RiLockLine, RiTeamLine, RiBuildingLine, RiFileTextLine } from '@remixicon/react';
+import { Fragment as Fragment$1 } from 'react';
+import styles from './ApiCard.module.css.esm.js';
+
+const BADGE_KIND_CLASS = {
+  ok: styles.badgeOk,
+  warning: styles.badgeWarning,
+  error: styles.badgeError
+};
+const VISIBILITY_ICON = {
+  private: RiLockLine,
+  public: RiGlobalLine
+};
+function LifecycleBadge({
+  kind,
+  label
+}) {
+  return /* @__PURE__ */ jsx("span", { className: `${styles.badge} ${BADGE_KIND_CLASS[kind]}`, children: label });
+}
+function ApiCard({ vm, onSelect }) {
+  const entityRoute = useRouteRef(entityRouteRef);
+  const { kind, namespace, name } = vm.targetRef;
+  const href = entityRoute ? entityRoute({ kind: kind.toLowerCase(), namespace, name }) : void 0;
+  const ariaLabel = `Open ${vm.name} API details`;
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
+      /* @__PURE__ */ jsx("div", { className: styles.titleRow, children: /* @__PURE__ */ jsx(
+        Text,
+        {
+          variant: "body-large",
+          weight: "bold",
+          as: "h3",
+          className: styles.name,
+          children: vm.name
+        }
+      ) }),
+      /* @__PURE__ */ jsxs("div", { className: styles.badges, children: [
+        /* @__PURE__ */ jsx(LifecycleBadge, { kind: vm.badge.kind, label: vm.badge.label }),
+        vm.version ? /* @__PURE__ */ jsx("span", { className: `${styles.badge} ${styles.badgeVersion}`, children: vm.version }) : null
+      ] }),
+      vm.description ? /* @__PURE__ */ jsx(
+        Text,
+        {
+          variant: "body-small",
+          color: "secondary",
+          as: "p",
+          className: styles.description,
+          children: vm.description
+        }
+      ) : null
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: styles.body, children: /* @__PURE__ */ jsxs("div", { className: styles.leftCol, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles.metaItem, children: [
+        /* @__PURE__ */ jsx(RiTeamLine, { "aria-hidden": true, size: 16 }),
+        /* @__PURE__ */ jsx(Text, { variant: "body-small", color: "secondary", as: "span", children: vm.ownerLabel })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: styles.metaItem, children: [
+        /* @__PURE__ */ jsx(RiBuildingLine, { "aria-hidden": true, size: 16 }),
+        /* @__PURE__ */ jsx(Text, { variant: "body-small", color: "secondary", as: "span", children: vm.department ?? "unknown" })
+      ] }),
+      vm.visibilities.length > 0 ? /* @__PURE__ */ jsx("div", { className: styles.metaItem, children: vm.visibilities.map((visibility, index) => {
+        const VisibilityIcon = VISIBILITY_ICON[visibility];
+        return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+          index > 0 ? /* @__PURE__ */ jsx(
+            Text,
+            {
+              variant: "body-small",
+              color: "secondary",
+              as: "span",
+              "aria-hidden": true,
+              children: "|"
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(VisibilityIcon, { "aria-hidden": true, size: 16 }),
+          /* @__PURE__ */ jsx(Text, { variant: "body-small", color: "secondary", as: "span", children: visibility })
+        ] }, visibility);
+      }) }) : null,
+      vm.hasSpec ? /* @__PURE__ */ jsxs("div", { className: styles.metaItem, children: [
+        /* @__PURE__ */ jsx(RiFileTextLine, { "aria-hidden": true, size: 16 }),
+        /* @__PURE__ */ jsx(Text, { variant: "body-small", color: "secondary", as: "span", children: "OpenAPI spec" })
+      ] }) : null
+    ] }) })
+  ] });
+  if (onSelect) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: styles.card,
+        "aria-label": ariaLabel,
+        onClick: () => onSelect(vm),
+        children: content
+      }
+    );
+  }
+  return href ? /* @__PURE__ */ jsx(Link, { to: href, className: styles.card, "aria-label": ariaLabel, children: content }) : /* @__PURE__ */ jsx("div", { className: styles.card, children: content });
+}
+
+export { ApiCard, LifecycleBadge, VISIBILITY_ICON };
+//# sourceMappingURL=ApiCard.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ApiCard.esm.js","sources":["../../src/components/ApiCard.tsx"],"sourcesContent":["// SPDX-License-Identifier: Apache-2.0\nimport { Link } from '@backstage/core-components';\nimport { useRouteRef } from '@backstage/frontend-plugin-api';\nimport { entityRouteRef } from '@backstage/plugin-catalog-react';\nimport { Text } from '@backstage/ui';\nimport {\n  RiBuildingLine,\n  RiFileTextLine,\n  RiGlobalLine,\n  RiLockLine,\n  RiTeamLine,\n  type RemixiconComponentType,\n} from '@remixicon/react';\nimport { Fragment } from 'react';\nimport type {\n  ApiCardViewModel,\n  ApiVisibility,\n  LifecycleBadgeKind,\n} from './apiCardViewModel';\nimport styles from './ApiCard.module.css';\n\nexport interface ApiCardProps {\n  vm: ApiCardViewModel;\n  /** When provided, clicking the card opens the details drawer (via this callback)\n   * instead of navigating to the catalog entity page. */\n  onSelect?: (vm: ApiCardViewModel) => void;\n}\n\nconst BADGE_KIND_CLASS: Record<LifecycleBadgeKind, string> = {\n  ok: styles.badgeOk,\n  warning: styles.badgeWarning,\n  error: styles.badgeError,\n};\n\nexport const VISIBILITY_ICON: Record<ApiVisibility, RemixiconComponentType> = {\n  private: RiLockLine,\n  public: RiGlobalLine,\n};\n\n/** Solid colored status pill (D-04). Color conveys state; the text label is the\n * accessible source of truth so it never relies on color alone. */\nexport function LifecycleBadge({\n  kind,\n  label,\n}: {\n  kind: LifecycleBadgeKind;\n  label: string;\n}) {\n  return (\n    <span className={`${styles.badge} ${BADGE_KIND_CLASS[kind]}`}>{label}</span>\n  );\n}\n\n/**\n * A single Apigee API tile. The whole card is one anchor-based control whose href is\n * resolved via `entityRouteRef` (never hardcoded — TR04); it degrades to a non-link\n * button when the route ref is unbound (dev harness). Entity text renders as React\n * children only — never via raw HTML injection (T-05-03). (UI-02, UI-03)\n */\nexport function ApiCard({ vm, onSelect }: ApiCardProps) {\n  const entityRoute = useRouteRef(entityRouteRef);\n  const { kind, namespace, name } = vm.targetRef;\n  const href = entityRoute\n    ? entityRoute({ kind: kind.toLowerCase(), namespace, name })\n    : undefined;\n  const ariaLabel = `Open ${vm.name} API details`;\n\n  const content = (\n    <>\n      <div className={styles.header}>\n        <div className={styles.titleRow}>\n          <Text\n            variant=\"body-large\"\n            weight=\"bold\"\n            as=\"h3\"\n            className={styles.name}\n          >\n            {vm.name}\n          </Text>\n        </div>\n        <div className={styles.badges}>\n          <LifecycleBadge kind={vm.badge.kind} label={vm.badge.label} />\n          {vm.version ? (\n            <span className={`${styles.badge} ${styles.badgeVersion}`}>\n              {vm.version}\n            </span>\n          ) : null}\n        </div>\n        {vm.description ? (\n          <Text\n            variant=\"body-small\"\n            color=\"secondary\"\n            as=\"p\"\n            className={styles.description}\n          >\n            {vm.description}\n          </Text>\n        ) : null}\n      </div>\n\n      <div className={styles.body}>\n        <div className={styles.leftCol}>\n          <div className={styles.metaItem}>\n            <RiTeamLine aria-hidden size={16} />\n            <Text variant=\"body-small\" color=\"secondary\" as=\"span\">\n              {vm.ownerLabel}\n            </Text>\n          </div>\n          <div className={styles.metaItem}>\n            <RiBuildingLine aria-hidden size={16} />\n            <Text variant=\"body-small\" color=\"secondary\" as=\"span\">\n              {vm.department ?? 'unknown'}\n            </Text>\n          </div>\n          {vm.visibilities.length > 0 ? (\n            <div className={styles.metaItem}>\n              {vm.visibilities.map((visibility, index) => {\n                const VisibilityIcon = VISIBILITY_ICON[visibility];\n                return (\n                  <Fragment key={visibility}>\n                    {index > 0 ? (\n                      <Text\n                        variant=\"body-small\"\n                        color=\"secondary\"\n                        as=\"span\"\n                        aria-hidden\n                      >\n                        |\n                      </Text>\n                    ) : null}\n                    <VisibilityIcon aria-hidden size={16} />\n                    <Text variant=\"body-small\" color=\"secondary\" as=\"span\">\n                      {visibility}\n                    </Text>\n                  </Fragment>\n                );\n              })}\n            </div>\n          ) : null}\n          {vm.hasSpec ? (\n            <div className={styles.metaItem}>\n              <RiFileTextLine aria-hidden size={16} />\n              <Text variant=\"body-small\" color=\"secondary\" as=\"span\">\n                OpenAPI spec\n              </Text>\n            </div>\n          ) : null}\n        </div>\n      </div>\n    </>\n  );\n\n  if (onSelect) {\n    return (\n      <button\n        type=\"button\"\n        className={styles.card}\n        aria-label={ariaLabel}\n        onClick={() => onSelect(vm)}\n      >\n        {content}\n      </button>\n    );\n  }\n\n  return href ? (\n    <Link to={href} className={styles.card} aria-label={ariaLabel}>\n      {content}\n    </Link>\n  ) : (\n    <div className={styles.card}>{content}</div>\n  );\n}\n"],"names":["Fragment"],"mappings":"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"}

package/dist/components/ApiCard.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 = ".ApiCard_card__0055a491ad {\n  display: flex;\n  flex-direction: column;\n  gap: var(--bui-space-2);\n  height: 100%;\n  min-height: 172px;\n  padding: var(--bui-space-4);\n  color: inherit;\n  text-decoration: none;\n  border: 1px solid var(--bui-border-1);\n  border-radius: var(--bui-radius-3);\n  background-color: var(--bui-bg-neutral-1);\n  /* Hover idiom from dev-ai-hub's ResourceCard: lift + accent-tinted border +\n     accent glow shadow. The Apigee plugin has no brand hex of its own, so the\n     accent is BUI's info token — the same one the version badge uses. */\n  --card-accent: var(--bui-fg-info);\n  transition: box-shadow 160ms ease,\n    transform 160ms cubic-bezier(0.16, 1, 0.3, 1), border-color 160ms ease;\n}\n\n/* The card IS a MUI Link; element+class beats MUI's class so its self-applied link colour/underline doesn't bleed onto the card content. */\na.ApiCard_card__0055a491ad,\na.ApiCard_card__0055a491ad:hover {\n  color: inherit;\n  text-decoration: none;\n}\n\n/* The card can also be a <button> (opens the details drawer). Reset UA button\n   styling so it renders identically to the anchor/div variants. */\nbutton.ApiCard_card__0055a491ad {\n  width: 100%;\n  font: inherit;\n  text-align: left;\n  cursor: pointer;\n  appearance: none;\n}\n\n.ApiCard_card__0055a491ad:hover {\n  border-color: color-mix(in srgb, var(--card-accent) 40%, var(--bui-border-1));\n  /* Two-part shadow: a soft ambient one and a tighter contact one tinted with\n     the accent. A single large blur reads as a glow rather than as elevation. */\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06),\n    0 12px 28px -12px color-mix(in srgb, var(--card-accent) 40%, transparent);\n  transform: translateY(-2px);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ApiCard_card__0055a491ad {\n    transition: none;\n  }\n\n  .ApiCard_card__0055a491ad:hover {\n    transform: none;\n  }\n}\n\n.ApiCard_card__0055a491ad:focus-visible {\n  outline: 2px solid var(--bui-ring);\n  outline-offset: 2px;\n}\n\n.ApiCard_header__0055a491ad {\n  display: flex;\n  flex-direction: column;\n  gap: var(--bui-space-2);\n}\n\n.ApiCard_titleRow__0055a491ad {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--bui-space-2);\n}\n\n.ApiCard_name__0055a491ad {\n  flex: 1;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  word-break: break-word;\n}\n\n.ApiCard_badges__0055a491ad {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--bui-space-1);\n}\n\n.ApiCard_badge__0055a491ad {\n  flex-shrink: 0;\n  display: inline-flex;\n  align-items: center;\n  padding: 2px var(--bui-space-2);\n  border-radius: var(--bui-radius-full);\n  font-size: var(--bui-font-size-1);\n  font-weight: var(--bui-font-weight-bold);\n  line-height: 1.5;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  white-space: nowrap;\n}\n\n.ApiCard_badgeOk__0055a491ad {\n  background-color: var(--bui-bg-success);\n  color: var(--bui-fg-success-on-bg);\n}\n\n.ApiCard_badgeWarning__0055a491ad {\n  background-color: var(--bui-bg-warning);\n  color: var(--bui-fg-warning-on-bg);\n}\n\n.ApiCard_badgeError__0055a491ad {\n  background-color: var(--bui-bg-danger);\n  color: var(--bui-fg-danger-on-bg);\n}\n\n.ApiCard_badgeVersion__0055a491ad {\n  background-color: var(--bui-bg-info);\n  color: var(--bui-fg-info-on-bg);\n  text-transform: none;\n}\n\n.ApiCard_body__0055a491ad {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--bui-space-4);\n}\n\n.ApiCard_leftCol__0055a491ad {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: var(--bui-space-1);\n  color: var(--bui-fg-secondary);\n}\n\n.ApiCard_metaItem__0055a491ad {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--bui-space-1);\n}\n\n.ApiCard_description__0055a491ad {\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n";
+var styles = {"card":"ApiCard_card__0055a491ad","header":"ApiCard_header__0055a491ad","titleRow":"ApiCard_titleRow__0055a491ad","name":"ApiCard_name__0055a491ad","badges":"ApiCard_badges__0055a491ad","badge":"ApiCard_badge__0055a491ad","badgeOk":"ApiCard_badgeOk__0055a491ad","badgeWarning":"ApiCard_badgeWarning__0055a491ad","badgeError":"ApiCard_badgeError__0055a491ad","badgeVersion":"ApiCard_badgeVersion__0055a491ad","body":"ApiCard_body__0055a491ad","leftCol":"ApiCard_leftCol__0055a491ad","metaItem":"ApiCard_metaItem__0055a491ad","description":"ApiCard_description__0055a491ad"};
+styleInject(css_248z);
+
+export { styles as default };
+//# sourceMappingURL=ApiCard.module.css.esm.js.map

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

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

package/dist/components/ApiCardGrid.esm.js

@@ -0,0 +1,14 @@
+import { jsx } from 'react/jsx-runtime';
+import { ItemCardGrid } from '@backstage/core-components';
+import { ApiCard } from './ApiCard.esm.js';
+import { ApiTable } from './ApiTable.esm.js';
+
+function ApiCardGrid({ vms, viewMode, onSelect }) {
+  if (viewMode === "list") {
+    return /* @__PURE__ */ jsx(ApiTable, { vms, onSelect });
+  }
+  return /* @__PURE__ */ jsx(ItemCardGrid, { children: vms.map((vm) => /* @__PURE__ */ jsx(ApiCard, { vm, onSelect }, vm.targetRef.name)) });
+}
+
+export { ApiCardGrid };
+//# sourceMappingURL=ApiCardGrid.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ApiCardGrid.esm.js","sources":["../../src/components/ApiCardGrid.tsx"],"sourcesContent":["// SPDX-License-Identifier: Apache-2.0\nimport { ItemCardGrid } from '@backstage/core-components';\nimport { ApiCard } from './ApiCard';\nimport { ApiTable } from './ApiTable';\nimport type { ApiCardViewModel } from './apiCardViewModel';\n\nexport type ViewMode = 'flat' | 'list';\n\nexport interface ApiCardGridProps {\n  vms: ApiCardViewModel[];\n  viewMode: ViewMode;\n  /** Opens the details drawer for a clicked card/row (both views). */\n  onSelect?: (vm: ApiCardViewModel) => void;\n}\n\n/**\n * Presentational grid of `ApiCard` tiles. In `flat` mode a single responsive grid; in\n * `list` mode a table. No data fetching. (UI-01, UI-11)\n */\nexport function ApiCardGrid({ vms, viewMode, onSelect }: ApiCardGridProps) {\n  if (viewMode === 'list') {\n    return <ApiTable vms={vms} onSelect={onSelect} />;\n  }\n\n  return (\n    <ItemCardGrid>\n      {vms.map(vm => (\n        <ApiCard key={vm.targetRef.name} vm={vm} onSelect={onSelect} />\n      ))}\n    </ItemCardGrid>\n  );\n}\n"],"names":[],"mappings":";;;;;AAmBO,SAAS,WAAA,CAAY,EAAE,GAAA,EAAK,QAAA,EAAU,UAAS,EAAqB;AACzE,EAAA,IAAI,aAAa,MAAA,EAAQ;AACvB,IAAA,uBAAO,GAAA,CAAC,QAAA,EAAA,EAAS,GAAA,EAAU,QAAA,EAAoB,CAAA;AAAA,EACjD;AAEA,EAAA,uBACE,GAAA,CAAC,YAAA,EAAA,EACE,QAAA,EAAA,GAAA,CAAI,GAAA,CAAI,CAAA,EAAA,qBACP,GAAA,CAAC,OAAA,EAAA,EAAgC,EAAA,EAAQ,QAAA,EAAA,EAA3B,EAAA,CAAG,SAAA,CAAU,IAAkC,CAC9D,CAAA,EACH,CAAA;AAEJ;;;;"}