@ogcio/design-system-react 1.11.1 → 1.11.3

package/dist/autocomplete/autocomplete.js

@@ -0,0 +1,252 @@
+"use client";
+import { jsxs as G, jsx as E } from "react/jsx-runtime";
+import { useRef as C, useReducer as H, useEffect as m, createElement as j, isValidElement as K, Children as X } from "react";
+import { cn as N } from "../cn.js";
+import { InputText as $ } from "../input-text/input-text.js";
+import { Popover as q } from "../popover/popover.js";
+import { SelectMenu as z, SelectMenuOption as F } from "../select/select-menu.js";
+import { AUTOCOMPLETE_ACTIONS as J } from "./types.js";
+const {
+  ON_RESET: v,
+  ON_SELECT_ITEM: L,
+  SET_INPUT_VALUE: h,
+  SET_IS_OPEN: u,
+  SET_OPTIONS: T,
+  TOGGLE_CLEAR_BUTTON: O,
+  SET_VALUE: R,
+  SET_HIGHLIGHTED_INDEX: b
+} = J, Q = (t, o) => {
+  switch (o.type) {
+    case u:
+      return { ...t, isOpen: o.payload };
+    case h:
+      return { ...t, inputValue: o.payload };
+    case T:
+      return { ...t, autocompleteOptions: o.payload };
+    case R:
+      return { ...t, value: o.payload };
+    case O:
+      return {
+        ...t,
+        isClearButtonEnabled: o.payload || !!t.inputValue
+      };
+    case v:
+      return {
+        ...t,
+        value: "",
+        inputValue: "",
+        isClearButtonEnabled: !1,
+        highlightedIndex: -1
+      };
+    case L:
+      return {
+        ...t,
+        inputValue: o.payload.inputValue,
+        value: o.payload.value,
+        isOpen: !1,
+        isClearButtonEnabled: !0
+      };
+    case b:
+      return { ...t, highlightedIndex: o.payload, isOpen: !0 };
+    default:
+      return t;
+  }
+}, W = (t, o) => {
+  var l, y;
+  const r = ((l = t.props.children) == null ? void 0 : l.toString().toLowerCase()) || "", s = (y = t.props.value) == null ? void 0 : y.toLowerCase(), c = o.toLowerCase();
+  return r.includes(c) || s.includes(c);
+}, _ = (t) => {
+  var r, s;
+  const o = ((r = t == null ? void 0 : t.type) == null ? void 0 : r.componentType) || ((s = t == null ? void 0 : t.props) == null ? void 0 : s.__mdxType);
+  return K(t) && o === "AutocompleteItem";
+}, S = (t) => X.toArray(t).filter((o) => _(o)) || [], I = (t, o) => {
+  var r;
+  return (((r = S(t).find((s) => s.props.value === o)) == null ? void 0 : r.props.children) || "").toString();
+}, re = ({
+  disabled: t,
+  children: o,
+  defaultValue: r = "",
+  onChange: s,
+  ...c
+}) => {
+  const l = C(null), y = C(null), x = C(!1), [n, a] = H(Q, {
+    isOpen: !1,
+    value: r,
+    inputValue: r ? I(o, r) : "",
+    autocompleteOptions: o,
+    isClearButtonEnabled: !1,
+    highlightedIndex: -1
+  }), f = S(n.autocompleteOptions), V = (e) => {
+    if (s && l.current) {
+      const p = {
+        target: {
+          ...l.current,
+          value: e
+        },
+        currentTarget: l.current,
+        bubbles: !0,
+        isTrusted: !0
+      };
+      s(p);
+    }
+  }, k = (e) => {
+    a({ type: u, payload: e }), e || a({ type: O, payload: !1 });
+  }, B = (e) => {
+    const {
+      target: { value: p }
+    } = e;
+    e.__origin === "clear_button" ? (a({ type: v }), a({ type: u, payload: !1 }), V("")) : (a({ type: h, payload: p }), p && a({ type: u, payload: !0 })), a({ type: O }), setTimeout(() => {
+      var i;
+      return (i = l.current) == null ? void 0 : i.focus();
+    });
+  }, P = () => {
+    var e;
+    a({ type: u, payload: !n.isOpen }), (e = l.current) == null || e.focus();
+  }, D = () => {
+    n.isOpen || a({
+      type: u,
+      payload: !0
+    });
+  }, w = (e) => {
+    a({
+      type: L,
+      payload: {
+        inputValue: I(o, e),
+        value: e
+      }
+    }), V(e);
+  };
+  m(() => {
+    var p;
+    const e = f.find(
+      (i) => _(i) && i.props.value === n.value
+    );
+    e && a({
+      type: h,
+      payload: ((p = e.props.children) == null ? void 0 : p.toString()) || ""
+    });
+  }, [n.value]), m(() => {
+    var p;
+    if (!x.current) {
+      x.current = !0;
+      return;
+    }
+    n.inputValue === "" && n.value === "" && ((p = l.current) == null || p.focus());
+  }, [n.isClearButtonEnabled]), m(() => {
+    var e;
+    if (n.isOpen)
+      (e = l.current) == null || e.focus();
+    else {
+      const p = I(o, n.value);
+      p && n.value ? (a({
+        type: h,
+        payload: p
+      }), a({ type: u, payload: !1 })) : a({ type: v }), a({ type: O });
+    }
+  }, [n.isOpen]), m(() => {
+    if (n.inputValue && o) {
+      const e = S(o).filter(
+        (p) => W(p, n.inputValue)
+      );
+      a({ type: T, payload: e }), !n.isOpen && !n.value && a({ type: u, payload: !0 });
+    } else
+      a({ type: R, payload: "" }), a({ type: T, payload: o });
+  }, [n.inputValue]);
+  const U = (e) => {
+    const p = f.length, i = (d, M) => {
+      let g = d;
+      for (let A = 0; A < p; A++)
+        if (g = (g + M + p) % p, !f[g].props.disabled)
+          return g;
+      return -1;
+    };
+    if (e.key === "ArrowDown")
+      e.preventDefault(), a({
+        type: b,
+        payload: n.isOpen ? i(n.highlightedIndex, 1) : 0
+      });
+    else if (e.key === "ArrowUp")
+      e.preventDefault(), a({
+        type: b,
+        payload: i(n.highlightedIndex, -1)
+      });
+    else if (e.key === "Enter" && n.highlightedIndex >= 0) {
+      const d = f[n.highlightedIndex];
+      d && d.props.value && !d.props.disabled && w(d.props.value);
+    }
+  };
+  return /* @__PURE__ */ G(
+    "div",
+    {
+      ...c,
+      "aria-disabled": t,
+      className: N("gi-autocomplete gi-not-prose", c.className),
+      children: [
+        /* @__PURE__ */ E(
+          $,
+          {
+            onKeyDown: U,
+            onIconEndClick: P,
+            onChange: B,
+            onClick: D,
+            clearButtonEnabled: n.isClearButtonEnabled,
+            inputActionPosition: "beforeSuffix",
+            "aria-label": "Type to Search",
+            "aria-disabled": t,
+            disabled: t,
+            placeholder: n.inputValue || "Type to Search",
+            iconEndClassName: N({
+              "gi-cursor-pointer": !t,
+              "gi-cursor-not-allowed gi-pointer-events-none": t
+            }),
+            iconEnd: n.isOpen ? "arrow_drop_up" : "arrow_drop_down",
+            ref: l,
+            iconEndRef: y,
+            value: n.inputValue,
+            "data-highlighted-index": n.highlightedIndex
+          }
+        ),
+        /* @__PURE__ */ E(
+          q,
+          {
+            onOpenChange: k,
+            triggerRef: l,
+            extraRefs: [y],
+            open: n.isOpen,
+            options: {
+              placement: "bottom-start",
+              strategy: "absolute",
+              modifiers: [
+                { name: "preventOverflow", options: { padding: 8 } },
+                {
+                  name: "flip",
+                  options: { fallbackPlacements: ["top", "right", "left"] }
+                }
+              ]
+            },
+            children: /* @__PURE__ */ E(z, { onChange: w, children: f.map(
+              (e, p) => _(e) ? /* @__PURE__ */ j(
+                F,
+                {
+                  ...e.props,
+                  key: `AutocompleteItem-${e.props.value}`,
+                  selected: n.value === e.props.value,
+                  isHighlighted: p === n.highlightedIndex
+                }
+              ) : null
+            ) })
+          }
+        )
+      ]
+    }
+  );
+}, Y = () => null;
+Object.defineProperty(Y, "componentType", {
+  value: "AutocompleteItem",
+  writable: !1,
+  enumerable: !1
+});
+export {
+  re as Autocomplete,
+  Y as AutocompleteItem
+};

package/dist/autocomplete/types.d.ts

@@ -0,0 +1,61 @@
+import { ReactElement } from 'react';
+import { SelectMenuOptionProps } from '../select/types.js';
+export declare const AUTOCOMPLETE_ACTIONS: {
+    readonly SET_IS_OPEN: "SET_IS_OPEN";
+    readonly SET_INPUT_VALUE: "SET_INPUT_VALUE";
+    readonly SET_OPTIONS: "SET_OPTIONS";
+    readonly SET_VALUE: "SET_VALUE";
+    readonly ON_RESET: "ON_RESET";
+    readonly TOGGLE_CLEAR_BUTTON: "TOGGLE_CLEAR_BUTTON";
+    readonly ON_SELECT_ITEM: "ON_SELECT_ITEM";
+    readonly SET_HIGHLIGHTED_INDEX: "SET_HIGHLIGHTED_INDEX";
+};
+export type AutocompleteState = {
+    isOpen: boolean;
+    value: string;
+    inputValue: string;
+    isClearButtonEnabled: boolean;
+    autocompleteOptions: React.ReactNode;
+    highlightedIndex: number;
+};
+export type AutocompleteAction = {
+    type: typeof AUTOCOMPLETE_ACTIONS.SET_IS_OPEN;
+    payload: boolean;
+} | {
+    type: typeof AUTOCOMPLETE_ACTIONS.SET_INPUT_VALUE;
+    payload: string;
+} | {
+    type: typeof AUTOCOMPLETE_ACTIONS.SET_OPTIONS;
+    payload: React.ReactNode;
+} | {
+    type: typeof AUTOCOMPLETE_ACTIONS.SET_VALUE;
+    payload: string;
+} | {
+    type: typeof AUTOCOMPLETE_ACTIONS.ON_RESET;
+} | {
+    type: typeof AUTOCOMPLETE_ACTIONS.TOGGLE_CLEAR_BUTTON;
+    payload?: boolean;
+} | {
+    type: typeof AUTOCOMPLETE_ACTIONS.ON_SELECT_ITEM;
+    payload: {
+        inputValue: string;
+        value: string;
+    };
+} | {
+    type: typeof AUTOCOMPLETE_ACTIONS.SET_HIGHLIGHTED_INDEX;
+    payload: number;
+};
+export type AutocompleteOptionItemElement = ReactElement<SelectMenuOptionProps & {
+    selectedValue: string;
+}>;
+export type AutocompleteProps = {
+    defaultValue?: string;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    children: ReactElement<AutocompleteItemProps> | ReactElement<AutocompleteItemProps>[];
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'defaultChecked'>;
+export type AutocompleteItemProps = {
+    children: string;
+    className?: string;
+    value: string;
+    disabled?: boolean;
+};

package/dist/autocomplete/types.js

@@ -0,0 +1,13 @@
+const E = {
+  SET_IS_OPEN: "SET_IS_OPEN",
+  SET_INPUT_VALUE: "SET_INPUT_VALUE",
+  SET_OPTIONS: "SET_OPTIONS",
+  SET_VALUE: "SET_VALUE",
+  ON_RESET: "ON_RESET",
+  TOGGLE_CLEAR_BUTTON: "TOGGLE_CLEAR_BUTTON",
+  ON_SELECT_ITEM: "ON_SELECT_ITEM",
+  SET_HIGHLIGHTED_INDEX: "SET_HIGHLIGHTED_INDEX"
+};
+export {
+  E as AUTOCOMPLETE_ACTIONS
+};

package/dist/blockquote/blockquote.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+export type BlockquoteProps = React.QuoteHTMLAttributes<HTMLQuoteElement>;
+export declare function Blockquote({ children, cite, ...props }: BlockquoteProps): import("react/jsx-runtime").JSX.Element;

package/dist/blockquote/blockquote.js

@@ -0,0 +1,7 @@
+import { jsx as c } from "react/jsx-runtime";
+function u({ children: o, cite: t, ...e }) {
+  return /* @__PURE__ */ c("blockquote", { className: "gi-blockquote", cite: t, ...e, children: o });
+}
+export {
+  u as Blockquote
+};

package/dist/breadcrumbs/breadcrumbs.d.ts

@@ -0,0 +1,5 @@
+import { BreadcrumbLinkProps, BreadcrumbProps } from './types.js';
+export declare const BreadcrumbEllipsis: () => import("react/jsx-runtime").JSX.Element;
+export declare const BreadcrumbLink: ({ href, children, asChild, ...ariaProps }: BreadcrumbLinkProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BreadcrumbCurrentLink: (props: BreadcrumbLinkProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Breadcrumbs: ({ children, iconStart }: BreadcrumbProps) => import("react/jsx-runtime").JSX.Element;

package/dist/breadcrumbs/breadcrumbs.js

@@ -0,0 +1,38 @@
+import { jsx as r, jsxs as m } from "react/jsx-runtime";
+import { translate as o } from "../i18n/utility.js";
+import { Icon as l } from "../icon/icon.js";
+import { Link as t } from "../link/link.js";
+const p = () => /* @__PURE__ */ r("div", { "aria-hidden": "true", children: /* @__PURE__ */ r(l, { className: "gi-text-gray-700", icon: "more_horiz" }) }), c = ({
+  href: e,
+  children: a,
+  asChild: i,
+  ...s
+}) => /* @__PURE__ */ r(
+  t,
+  {
+    noColor: !0,
+    asChild: i,
+    href: e,
+    "aria-label": `${a} page`,
+    size: "sm",
+    className: "gi-breadcrumbs-link",
+    ...s,
+    children: a
+  }
+), f = (e) => /* @__PURE__ */ r(c, { ...e, "aria-current": "page" }), g = ({ children: e, iconStart: a }) => /* @__PURE__ */ m(
+  "nav",
+  {
+    "aria-label": o("breadcrumbs.breadcrumbs", { defaultValue: "Breadcrumbs" }),
+    className: "gi-breadcrumbs",
+    children: [
+      a && /* @__PURE__ */ r(l, { "aria-label": "chevron-left", icon: "chevron_left", size: "sm" }),
+      /* @__PURE__ */ r("ol", { role: "list", children: Array.isArray(e) ? e.map((i, s) => /* @__PURE__ */ r("li", { role: "listitem", children: i }, `breadcrumb_item_${s}`)) : /* @__PURE__ */ r("li", { role: "listitem", children: e }) })
+    ]
+  }
+);
+export {
+  f as BreadcrumbCurrentLink,
+  p as BreadcrumbEllipsis,
+  c as BreadcrumbLink,
+  g as Breadcrumbs
+};

package/dist/breadcrumbs/types.d.ts

@@ -0,0 +1,17 @@
+import { PropsWithChildren } from 'react';
+import { BreadcrumbCurrentLink, BreadcrumbEllipsis, BreadcrumbLink } from './breadcrumbs.js';
+type BreadcrumbLinkBaseProps = PropsWithChildren<{
+    asChild?: false;
+    href: string;
+}> & React.AriaAttributes;
+type BreadcrumbLinkAsChildProps = PropsWithChildren<{
+    asChild: true;
+    href?: string;
+}> & React.AriaAttributes;
+export type BreadcrumbLinkProps = BreadcrumbLinkBaseProps | BreadcrumbLinkAsChildProps;
+type BreadcrumbChildrenType = React.ReactElement<typeof BreadcrumbLink | typeof BreadcrumbCurrentLink | typeof BreadcrumbEllipsis>;
+export type BreadcrumbProps = {
+    iconStart?: boolean;
+    children: BreadcrumbChildrenType[] | BreadcrumbChildrenType;
+};
+export {};

package/dist/breadcrumbs/types.js

@@ -0,0 +1 @@
+

package/dist/button/button.d.ts

@@ -0,0 +1,9 @@
+export declare const Button: import('react').ForwardRefExoticComponent<import('react').ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: import('./types.js').ButtonVariant;
+    appearance?: import('./types.js').ButtonAppearance;
+    size?: import('./types.js').ButtonSize;
+    form?: string;
+    value?: string;
+    className?: string;
+    dataTestid?: string;
+} & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/button/button.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx as u } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
+import { cn as p } from "../cn.js";
+import { isButtonDisabled as c, getSizeClass as g, getVariantAppearanceClass as l } from "./helpers.js";
+const B = f(
+  ({
+    variant: o,
+    appearance: r,
+    size: e,
+    disabled: t,
+    className: i,
+    children: s,
+    dataTestid: m,
+    ...n
+  }, a) => /* @__PURE__ */ u(
+    "button",
+    {
+      ...n,
+      "data-testid": m || "govie-button",
+      ref: a,
+      "aria-disabled": t,
+      disabled: t,
+      className: p(
+        "gi-btn",
+        l({ disabled: t, variant: o, appearance: r }),
+        g(e),
+        c({ disabled: t, variant: o, appearance: r }),
+        i
+      ),
+      children: s
+    }
+  )
+);
+B.displayName = "Button";
+export {
+  B as Button
+};

package/dist/button/helpers.d.ts

@@ -0,0 +1,13 @@
+import { ButtonAppearance, ButtonVariant, ButtonSize } from './types.js';
+export declare const getVariantAppearanceClass: ({ disabled, variant, appearance, }: {
+    disabled?: boolean;
+    variant?: ButtonVariant;
+    appearance?: ButtonAppearance;
+}) => string | undefined;
+export declare const getSizeClass: (size?: ButtonSize) => "gi-btn-small" | "gi-btn-large" | "gi-btn-regular";
+export declare const getButtonIconSizeClass: (size?: ButtonSize) => "gi-icon-btn-small" | "gi-icon-btn-large" | "gi-icon-btn-regular";
+export declare const isButtonDisabled: ({ disabled, variant, appearance, }: {
+    disabled?: boolean;
+    variant?: ButtonVariant;
+    appearance?: ButtonAppearance;
+}) => string | undefined;

package/dist/button/helpers.js

@@ -0,0 +1,39 @@
+const s = ({
+  disabled: t,
+  variant: e,
+  appearance: l
+}) => {
+  let i;
+  return t || (e === "secondary" ? l === "dark" ? i = "gi-btn-secondary-dark" : l === "light" ? i = "gi-btn-secondary-light" : i = "gi-btn-secondary" : e === "flat" ? l === "dark" ? i = "gi-btn-flat-dark" : l === "light" ? i = "gi-btn-flat-light" : i = "gi-btn-flat" : l === "dark" ? i = "gi-btn-primary-dark" : l === "light" ? i = "gi-btn-primary-light" : i = "gi-btn-primary"), i;
+}, r = (t) => {
+  switch (t) {
+    case "small":
+      return "gi-btn-small";
+    case "large":
+      return "gi-btn-large";
+    default:
+      return "gi-btn-regular";
+  }
+}, g = (t) => {
+  switch (t) {
+    case "small":
+      return "gi-icon-btn-small";
+    case "large":
+      return "gi-icon-btn-large";
+    default:
+      return "gi-icon-btn-regular";
+  }
+}, d = ({
+  disabled: t,
+  variant: e,
+  appearance: l
+}) => {
+  let i;
+  return t && (e === "secondary" ? l === "dark" ? i = "gi-btn-secondary-dark-disabled" : l === "light" ? i = "gi-btn-secondary-light-disabled" : i = "gi-btn-secondary-disabled" : e === "flat" ? l === "dark" ? i = "gi-btn-flat-dark-disabled" : l === "light" ? i = "gi-btn-flat-light-disabled" : i = "gi-btn-flat-disabled" : l === "dark" ? i = "gi-btn-primary-dark-disabled" : l === "light" ? i = "gi-btn-primary-light-disabled" : i = "gi-btn-primary-disabled"), i;
+};
+export {
+  g as getButtonIconSizeClass,
+  r as getSizeClass,
+  s as getVariantAppearanceClass,
+  d as isButtonDisabled
+};

package/dist/button/types.d.ts

@@ -0,0 +1,13 @@
+export declare const ButtonVariants: readonly ["primary", "secondary", "flat"];
+export type ButtonVariant = (typeof ButtonVariants)[number];
+export type ButtonAppearance = 'default' | 'dark' | 'light';
+export type ButtonSize = 'medium' | 'small' | 'large';
+export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: ButtonVariant;
+    appearance?: ButtonAppearance;
+    size?: ButtonSize;
+    form?: string;
+    value?: string;
+    className?: string;
+    dataTestid?: string;
+};

package/dist/button/types.js

@@ -0,0 +1,4 @@
+const t = ["primary", "secondary", "flat"];
+export {
+  t as ButtonVariants
+};

package/dist/button-group/button-group.d.ts

@@ -0,0 +1,21 @@
+import { FC, PropsWithChildren } from 'react';
+import { ButtonAppearance, ButtonSize } from '../button/types.js';
+type ButtonGroupItemProps = PropsWithChildren<{
+    value: string;
+    role?: string;
+    'aria-checked'?: boolean;
+    'aria-label'?: string;
+}>;
+export declare const ButtonGroupItem: FC<ButtonGroupItemProps>;
+type ButtonGroupProps = PropsWithChildren<{
+    name: string;
+    size?: ButtonSize;
+    appearance?: ButtonAppearance;
+    onChange?: (value: string) => void;
+    defaultValue?: string;
+    role?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+}>;
+export declare const ButtonGroup: FC<ButtonGroupProps>;
+export {};

package/dist/button-group/button-group.js

@@ -0,0 +1,85 @@
+"use client";
+import { jsx as p } from "react/jsx-runtime";
+import { createContext as x, useContext as B, useState as I } from "react";
+import { Button as G } from "../button/button.js";
+import { useDomId as g } from "../hooks/use-dom-id.js";
+const b = x(
+  void 0
+), w = ({
+  value: e,
+  children: a,
+  role: n,
+  "aria-checked": r,
+  "aria-label": i
+}) => {
+  const o = B(b);
+  if (!o)
+    throw new Error("ButtonGroupItem must be used within a ButtonGroup");
+  const {
+    selectedValue: d,
+    setSelectedValue: c,
+    size: u,
+    onChange: t,
+    groupId: s,
+    appearance: l
+  } = o, m = d === e, f = () => {
+    c(e), t == null || t(e);
+  }, y = `${s}-${e}`;
+  return /* @__PURE__ */ p(
+    G,
+    {
+      variant: m ? "primary" : "secondary",
+      size: u,
+      appearance: l,
+      onClick: f,
+      id: y,
+      role: n || "radio",
+      "aria-checked": r === void 0 ? m : r,
+      "aria-label": i,
+      type: "button",
+      children: a
+    }
+  );
+}, C = ({
+  name: e,
+  size: a = "medium",
+  appearance: n = "dark",
+  onChange: r,
+  defaultValue: i,
+  children: o,
+  role: d,
+  "aria-labelledby": c,
+  "aria-describedby": u
+}) => {
+  const [t, s] = I(
+    i
+  ), l = g();
+  return /* @__PURE__ */ p(
+    b.Provider,
+    {
+      value: {
+        selectedValue: t,
+        setSelectedValue: s,
+        name: e,
+        size: a,
+        onChange: r,
+        groupId: l,
+        appearance: n
+      },
+      children: /* @__PURE__ */ p(
+        "div",
+        {
+          className: "gi-btn-group",
+          role: d || "radiogroup",
+          "aria-labelledby": c,
+          "aria-describedby": u,
+          children: o
+        }
+      )
+    }
+  );
+};
+export {
+  C as ButtonGroup,
+  w as ButtonGroupItem
+};

package/dist/card/card-legacy.d.ts

@@ -0,0 +1,5 @@
+import { CardProps } from './types.js';
+export declare const CardLegacy: {
+    ({ type, title, inset, subTitle, media, content, action, href, tag, dataTestid, titleAsChild, children, }: CardProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};