rift-ds 1.0.0

package/components/DropdownMenu/DropdownMenu.js

@@ -0,0 +1,371 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useState, useRef, useId, useCallback, useEffect } from "react";
+import { MOTION_HOVER_HIDE_DELAY_MS } from "../../tokens/motion.js";
+import "./DropdownMenu.css";
+import "../../fonts/material-symbols.css";
+function collectItems(entries) {
+  const result = [];
+  for (const entry of entries) {
+    if (entry.type === "separator") continue;
+    if (entry.type === "group") {
+      result.push(...collectItems(entry.items));
+    } else {
+      result.push(entry);
+    }
+  }
+  return result;
+}
+const SubMenuItem = ({ item, baseClass, itemId, focused, size, onActivate }) => {
+  const [subOpen, setSubOpen] = useState(false);
+  const timeoutRef = useRef(null);
+  const handleMouseEnter = () => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    setSubOpen(true);
+  };
+  const handleMouseLeave = () => {
+    timeoutRef.current = setTimeout(() => setSubOpen(false), MOTION_HOVER_HIDE_DELAY_MS);
+  };
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, []);
+  useEffect(() => {
+    if (focused && item.children && item.children.length > 0) {
+      setSubOpen(true);
+    }
+  }, [focused, item.children]);
+  const classes = [
+    `${baseClass}__item`,
+    focused ? `${baseClass}__item--focused` : "",
+    item.disabled ? `${baseClass}__item--disabled` : "",
+    item.destructive ? `${baseClass}__item--destructive` : "",
+    `${baseClass}__item--has-submenu`
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      id: itemId,
+      className: classes,
+      role: "menuitem",
+      "aria-haspopup": "menu",
+      "aria-expanded": subOpen,
+      "aria-disabled": item.disabled || void 0,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onClick: (e) => {
+        e.stopPropagation();
+        if (!item.disabled) setSubOpen((prev) => !prev);
+      },
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: `${baseClass}__item-label`, children: [
+          item.icon && (typeof item.icon === "string" ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__item-icon material-symbols-rounded`, "aria-hidden": "true", children: item.icon }) : /* @__PURE__ */ jsx("span", { className: `${baseClass}__item-icon`, "aria-hidden": "true", children: item.icon })),
+          item.label
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__submenu-icon material-symbols-rounded`, "aria-hidden": "true", children: "chevron_right" }),
+        subOpen && item.children && /* @__PURE__ */ jsx(
+          MenuPanel,
+          {
+            entries: item.children,
+            baseClass,
+            itemIdBase: `${itemId}-sub`,
+            size,
+            isSubmenu: true,
+            onItemActivate: onActivate
+          }
+        )
+      ]
+    }
+  );
+};
+const MenuPanel = ({
+  entries,
+  baseClass,
+  itemIdBase,
+  size,
+  isSubmenu = false,
+  onItemActivate
+}) => {
+  const panelClasses = [
+    `${baseClass}__panel`,
+    isSubmenu ? `${baseClass}__submenu` : "",
+    size === "compact" ? `${baseClass}__panel--compact` : ""
+  ].filter(Boolean).join(" ");
+  const renderEntry = (entry, index, idBase) => {
+    const entryId = `${idBase}-${index}`;
+    if (entry.type === "separator") {
+      return /* @__PURE__ */ jsx("li", { className: `${baseClass}__separator`, role: "separator" }, `sep-${index}`);
+    }
+    if (entry.type === "group") {
+      return /* @__PURE__ */ jsxs("li", { className: `${baseClass}__group`, role: "group", "aria-label": entry.label, children: [
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__group-label`, children: entry.label }),
+        /* @__PURE__ */ jsx("ul", { className: `${baseClass}__group-list`, role: "group", children: entry.items.map((subEntry, subIndex) => renderEntry(subEntry, subIndex, entryId)) })
+      ] }, `group-${index}`);
+    }
+    if (entry.children && entry.children.length > 0) {
+      return /* @__PURE__ */ jsx(
+        SubMenuItem,
+        {
+          item: entry,
+          baseClass,
+          itemId: entryId,
+          focused: false,
+          size,
+          onActivate: onItemActivate
+        },
+        `submenu-${index}`
+      );
+    }
+    const itemClasses = [
+      `${baseClass}__item`,
+      entry.disabled ? `${baseClass}__item--disabled` : "",
+      entry.destructive ? `${baseClass}__item--destructive` : ""
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs(
+      "li",
+      {
+        id: entryId,
+        className: itemClasses,
+        role: "menuitem",
+        "aria-disabled": entry.disabled || void 0,
+        onClick: (e) => {
+          e.stopPropagation();
+          if (!entry.disabled) {
+            entry.onClick?.();
+            onItemActivate();
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: `${baseClass}__item-label`, children: [
+            entry.icon && (typeof entry.icon === "string" ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__item-icon material-symbols-rounded`, "aria-hidden": "true", children: entry.icon }) : /* @__PURE__ */ jsx("span", { className: `${baseClass}__item-icon`, "aria-hidden": "true", children: entry.icon })),
+            entry.label
+          ] }),
+          entry.shortcut && /* @__PURE__ */ jsx("span", { className: `${baseClass}__shortcut`, children: entry.shortcut })
+        ]
+      },
+      `item-${index}`
+    );
+  };
+  return /* @__PURE__ */ jsx("ul", { className: panelClasses, role: "menu", children: entries.map((entry, index) => renderEntry(entry, index, itemIdBase)) });
+};
+const DropdownMenu = ({
+  trigger,
+  items,
+  align = "start",
+  size = "default",
+  className = ""
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+  const rootRef = useRef(null);
+  const panelRef = useRef(null);
+  const generatedId = useId();
+  const baseClass = "ds-dropdown-menu";
+  const classes = [baseClass, className].filter(Boolean).join(" ");
+  const flatItems = collectItems(items);
+  const menuId = `${generatedId}-menu`;
+  const activeDescendantId = isOpen && focusedIndex >= 0 ? `${generatedId}-item-${focusedIndex}` : void 0;
+  const handleToggle = () => {
+    setIsOpen((prev) => {
+      if (!prev) setFocusedIndex(-1);
+      return !prev;
+    });
+  };
+  const handleClose = useCallback(() => {
+    setIsOpen(false);
+    setFocusedIndex(-1);
+  }, []);
+  useEffect(() => {
+    if (!isOpen) return;
+    const handler = (e) => {
+      if (rootRef.current && !rootRef.current.contains(e.target)) {
+        handleClose();
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [isOpen, handleClose]);
+  const handleKeyDown = (e) => {
+    switch (e.key) {
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        if (!isOpen) {
+          setIsOpen(true);
+          setFocusedIndex(0);
+        } else if (focusedIndex >= 0) {
+          const item = flatItems[focusedIndex];
+          if (item && !item.disabled && !item.children) {
+            item.onClick?.();
+            handleClose();
+          }
+        }
+        break;
+      case "ArrowDown":
+        e.preventDefault();
+        if (!isOpen) {
+          setIsOpen(true);
+          setFocusedIndex(0);
+        } else {
+          setFocusedIndex((prev) => {
+            let next = prev + 1;
+            while (next < flatItems.length && flatItems[next].disabled) next++;
+            return next < flatItems.length ? next : prev;
+          });
+        }
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        if (isOpen) {
+          setFocusedIndex((prev) => {
+            let next = prev - 1;
+            while (next >= 0 && flatItems[next].disabled) next--;
+            return next >= 0 ? next : prev;
+          });
+        }
+        break;
+      case "Home":
+        if (isOpen) {
+          e.preventDefault();
+          setFocusedIndex((prev) => {
+            let next = 0;
+            while (next < flatItems.length && flatItems[next].disabled) next++;
+            return next < flatItems.length ? next : prev;
+          });
+        }
+        break;
+      case "End":
+        if (isOpen) {
+          e.preventDefault();
+          setFocusedIndex((prev) => {
+            let next = flatItems.length - 1;
+            while (next >= 0 && flatItems[next].disabled) next--;
+            return next >= 0 ? next : prev;
+          });
+        }
+        break;
+      case "Escape":
+      case "Tab":
+        handleClose();
+        break;
+    }
+  };
+  useEffect(() => {
+    if (isOpen && focusedIndex >= 0 && panelRef.current) {
+      const allItems = panelRef.current.querySelectorAll(`[role="menuitem"]`);
+      const el = allItems[focusedIndex];
+      el?.scrollIntoView({ block: "nearest" });
+    }
+  }, [focusedIndex, isOpen]);
+  const renderPanelEntry = (entry, index, itemCounter2) => {
+    if (entry.type === "separator") {
+      return /* @__PURE__ */ jsx("li", { className: `${baseClass}__separator`, role: "separator" }, `sep-${index}`);
+    }
+    if (entry.type === "group") {
+      return /* @__PURE__ */ jsxs("li", { className: `${baseClass}__group`, role: "none", children: [
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__group-label`, role: "presentation", children: entry.label }),
+        /* @__PURE__ */ jsx("ul", { className: `${baseClass}__group-list`, role: "group", "aria-label": entry.label, children: entry.items.map(
+          (subEntry, subIndex) => renderPanelEntry(subEntry, subIndex, itemCounter2)
+        ) })
+      ] }, `group-${index}`);
+    }
+    const myIndex = itemCounter2.count;
+    itemCounter2.count++;
+    const isFocused = myIndex === focusedIndex;
+    if (entry.children && entry.children.length > 0) {
+      return /* @__PURE__ */ jsx(
+        SubMenuItem,
+        {
+          item: entry,
+          baseClass,
+          itemId: `${generatedId}-item-${myIndex}`,
+          focused: isFocused,
+          size,
+          onActivate: handleClose
+        },
+        `submenu-${index}`
+      );
+    }
+    const itemClasses = [
+      `${baseClass}__item`,
+      isFocused ? `${baseClass}__item--focused` : "",
+      entry.disabled ? `${baseClass}__item--disabled` : "",
+      entry.destructive ? `${baseClass}__item--destructive` : ""
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs(
+      "li",
+      {
+        id: `${generatedId}-item-${myIndex}`,
+        className: itemClasses,
+        role: "menuitem",
+        "aria-disabled": entry.disabled || void 0,
+        onClick: (e) => {
+          e.stopPropagation();
+          if (!entry.disabled) {
+            entry.onClick?.();
+            handleClose();
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: `${baseClass}__item-label`, children: [
+            entry.icon && (typeof entry.icon === "string" ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__item-icon material-symbols-rounded`, "aria-hidden": "true", children: entry.icon }) : /* @__PURE__ */ jsx("span", { className: `${baseClass}__item-icon`, "aria-hidden": "true", children: entry.icon })),
+            entry.label
+          ] }),
+          entry.shortcut && /* @__PURE__ */ jsx("span", { className: `${baseClass}__shortcut`, children: entry.shortcut })
+        ]
+      },
+      `item-${index}`
+    );
+  };
+  const panelClasses = [
+    `${baseClass}__panel`,
+    align === "end" ? `${baseClass}__panel--align-end` : "",
+    size === "compact" ? `${baseClass}__panel--compact` : ""
+  ].filter(Boolean).join(" ");
+  const itemCounter = { count: 0 };
+  const triggerProps = React.isValidElement(trigger) ? trigger.props : void 0;
+  return /* @__PURE__ */ jsxs("div", { className: classes, ref: rootRef, children: [
+    /* @__PURE__ */ jsx("div", { className: `${baseClass}__trigger`, children: React.isValidElement(trigger) ? React.cloneElement(trigger, {
+      "aria-haspopup": "menu",
+      "aria-expanded": isOpen,
+      "aria-controls": isOpen ? menuId : void 0,
+      "aria-activedescendant": activeDescendantId,
+      onClick: (e) => {
+        triggerProps?.onClick?.(e);
+        handleToggle();
+      },
+      onKeyDown: (e) => {
+        triggerProps?.onKeyDown?.(e);
+        handleKeyDown(e);
+      }
+    }) : /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-haspopup": "menu",
+        "aria-expanded": isOpen,
+        "aria-controls": isOpen ? menuId : void 0,
+        "aria-activedescendant": activeDescendantId,
+        onClick: handleToggle,
+        onKeyDown: handleKeyDown,
+        children: trigger
+      }
+    ) }),
+    isOpen && /* @__PURE__ */ jsx(
+      "ul",
+      {
+        id: menuId,
+        className: panelClasses,
+        role: "menu",
+        ref: (el) => {
+          panelRef.current = el;
+        },
+        children: items.map((entry, index) => renderPanelEntry(entry, index, itemCounter))
+      }
+    )
+  ] });
+};
+export {
+  DropdownMenu
+};

package/components/EmptyState/EmptyState.css

@@ -0,0 +1,136 @@
+/* ============================================
+   EMPTY STATE COMPONENT
+   Placeholder for lists, tables, and searches
+   that have nothing to show
+   ============================================ */
+
+.ds-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: var(--gap-400); /* 16px */
+  padding: var(--padding-1000); /* 32px */
+  width: 100%;
+  /* width: 100% plus own padding — border-box locally (as ContactCard,
+     Checkbox, Composer, SelectionCard and Textarea do), so a consumer
+     without a global reset doesn't get a horizontal scrollbar wherever
+     this is embedded. */
+  box-sizing: border-box;
+}
+
+/* ============================================
+   ICON
+   ============================================ */
+
+.ds-empty-state__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  border-radius: var(--radius-pill);
+  background-color: var(--color-bg-container-primary);
+  color: var(--color-icon-primary);
+  flex-shrink: 0;
+}
+
+.ds-empty-state__icon .material-symbols-rounded {
+  --icon-size: var(--icon-size-600);
+}
+
+/* ============================================
+   CONTENT
+   ============================================ */
+
+.ds-empty-state__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-100); /* 4px */
+  max-width: 420px;
+}
+
+.ds-empty-state__title {
+  font-family: var(--font-title-body-family);
+  font-size: var(--font-title-body-size);
+  font-weight: var(--font-title-body-weight);
+  line-height: var(--font-title-body-line-height);
+  letter-spacing: var(--font-title-body-letter-spacing);
+  color: var(--color-text-primary);
+  margin: 0;
+}
+
+.ds-empty-state__description {
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+  color: var(--color-text-tertiary);
+  margin: 0;
+}
+
+/* ============================================
+   ACTION
+   ============================================ */
+
+.ds-empty-state__action {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: var(--gap-200); /* 8px */
+}
+
+/* ============================================
+   VARIANT — BORDERED
+   Dashed container for use inside cards/tables
+   ============================================ */
+
+.ds-empty-state--bordered {
+  border: var(--border-025) dashed var(--color-bg-container-border);
+  border-radius: var(--radius-300); /* 12px */
+}
+
+/* ============================================
+   SIZE — COMPACT
+   ============================================ */
+
+.ds-empty-state--compact {
+  gap: var(--gap-200); /* 8px */
+  padding: var(--padding-500); /* 20px */
+}
+
+.ds-empty-state--compact .ds-empty-state__icon {
+  width: 36px;
+  height: 36px;
+}
+
+.ds-empty-state--compact .ds-empty-state__icon .material-symbols-rounded {
+  --icon-size: var(--icon-size-500);
+}
+
+.ds-empty-state--compact .ds-empty-state__title {
+  font-family: var(--font-paragraph-emphasis-family);
+  font-size: var(--font-paragraph-emphasis-size);
+  font-weight: var(--font-paragraph-emphasis-weight);
+  line-height: var(--font-paragraph-emphasis-line-height);
+  letter-spacing: var(--font-paragraph-emphasis-letter-spacing);
+}
+
+/* Icons take the colour of the text around them. Explicit, not just
+   inherited by default: a consumer stylesheet that sets a colour on
+   .material-symbols-rounded itself (a common global default) would
+   otherwise override inheritance and detach the icon from the state
+   colours this component sets on its parents.
+
+   The action slot is carved out: it holds consumer Buttons, which colour
+   their icon on the icon element itself, through single-class selectors
+   this two-class rule outranks. Left blanket, a primary Button in an
+   empty state painted its icon the page's text colour instead of the
+   on-action one — a near-black glyph on a filled button. :where() keeps
+   the selector at its original specificity. */
+.ds-empty-state .material-symbols-rounded:not(:where(.ds-empty-state__action *)) {
+  color: inherit;
+}

package/components/EmptyState/EmptyState.d.ts

@@ -0,0 +1,27 @@
+import { default as React } from 'react';
+export interface EmptyStateProps {
+    /** Material Symbol icon name, or a custom element (e.g. an illustration) */
+    icon?: string | React.ReactNode;
+    /** Short headline describing the empty condition */
+    title: string;
+    /** Supporting copy — say what to do next, not just what is missing */
+    description?: string;
+    /** Action slot — typically one primary Button, optionally a secondary */
+    action?: React.ReactNode;
+    /** Component size */
+    size?: 'default' | 'compact';
+    /**
+     * Visual treatment. `plain` sits directly on the page; `bordered` draws a
+     * dashed container, which reads better inside a card, table, or panel.
+     */
+    variant?: 'plain' | 'bordered';
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * EmptyState component — the placeholder shown when a list, table, search,
+ * or dashboard has nothing to display. Pairs an icon with a headline,
+ * supporting copy, and an optional action so the blank space still tells
+ * the user what to do next.
+ */
+export declare const EmptyState: ({ icon, title, description, action, size, variant, className, }: EmptyStateProps) => React.JSX.Element;

package/components/EmptyState/EmptyState.js

@@ -0,0 +1,32 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+import "./EmptyState.css";
+import "../../fonts/material-symbols.css";
+const EmptyState = ({
+  icon,
+  title,
+  description,
+  action,
+  size = "default",
+  variant = "plain",
+  className = ""
+}) => {
+  const baseClass = "ds-empty-state";
+  const classes = [
+    baseClass,
+    `${baseClass}--${variant}`,
+    size === "compact" ? `${baseClass}--compact` : "",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
+    icon && /* @__PURE__ */ jsx("div", { className: `${baseClass}__icon`, "aria-hidden": "true", children: typeof icon === "string" ? /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", children: icon }) : icon }),
+    /* @__PURE__ */ jsxs("div", { className: `${baseClass}__content`, children: [
+      /* @__PURE__ */ jsx("p", { className: `${baseClass}__title`, children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: `${baseClass}__description`, children: description })
+    ] }),
+    action && /* @__PURE__ */ jsx("div", { className: `${baseClass}__action`, children: action })
+  ] });
+};
+export {
+  EmptyState
+};

package/components/EntityCard/EntityCard.css

@@ -0,0 +1,69 @@
+/* ============================================
+   ENTITY CARD COMPONENT
+   Compact card with a centred icon or image
+   and a label. Used on Icons and Logos pages.
+   ============================================ */
+
+.ds-entity-card {
+  /* Layout */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--gap-400);
+
+  /* Sizing */
+  flex: 1 1 0;
+  min-width: 100px;
+
+  /* Appearance */
+  background: var(--color-bg-container-primary);
+  border: var(--border-025) solid var(--color-bg-container-border);
+  border-radius: var(--radius-600);
+  padding: var(--padding-500);
+}
+
+/* ============================================
+   PREVIEW AREA
+   ============================================ */
+
+.ds-entity-card__preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 48px;
+}
+
+/* ============================================
+   ICON (Material Symbols Rounded)
+   ============================================ */
+
+.ds-entity-card__icon {
+  --icon-size: var(--icon-size-800);
+  color: var(--color-text-primary);
+}
+
+/* ============================================
+   IMAGE (Logo SVGs etc.)
+   ============================================ */
+
+.ds-entity-card__image {
+  max-width: 100%;
+  max-height: 48px;
+  object-fit: contain;
+}
+
+/* ============================================
+   LABEL
+   ============================================ */
+
+.ds-entity-card__label {
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+  color: var(--color-text-tertiary);
+  text-align: center;
+  word-break: break-word;
+}

package/components/EntityCard/EntityCard.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+export interface EntityCardProps {
+    /** Display label beneath the icon / image */
+    label: string;
+    /** Icon — Material Symbol name (string, e.g. "home") rendered via the rounded font, or custom element (ReactNode) */
+    icon?: string | React.ReactNode;
+    /** Path to an image asset — used instead of icon when provided */
+    imageSrc?: string;
+    /** Alt text for the image */
+    imageAlt?: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * EntityCard
+ * A compact card with a centred icon (Material Symbols Rounded)
+ * or image and a label underneath. Used on Icons and Logos pages.
+ */
+export declare const EntityCard: ({ label, icon, imageSrc, imageAlt, className, }: EntityCardProps) => React.JSX.Element;

package/components/EntityCard/EntityCard.js

@@ -0,0 +1,26 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "./EntityCard.css";
+const EntityCard = ({
+  label,
+  icon,
+  imageSrc,
+  imageAlt,
+  className = ""
+}) => {
+  const baseClass = "ds-entity-card";
+  const classes = [baseClass, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
+    /* @__PURE__ */ jsx("div", { className: `${baseClass}__preview`, children: imageSrc ? /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: imageSrc,
+        alt: imageAlt || label,
+        className: `${baseClass}__image`
+      }
+    ) : icon ? typeof icon === "string" ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon material-symbols-rounded`, "aria-hidden": "true", children: icon }) : /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon`, "aria-hidden": "true", children: icon }) : null }),
+    /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: label })
+  ] });
+};
+export {
+  EntityCard
+};