impact-nova 2.0.9 → 2.1.0-alpha.2

package/dist/components/data-display/statistics-card/statistics-card.js

@@ -0,0 +1,262 @@
+import { jsxs as g, jsx as i } from "react/jsx-runtime";
+import * as n from "react";
+import { cn as d } from "../../../lib/utils.js";
+import { Checkbox as k } from "../../forms/checkbox/checkbox.js";
+import { Tooltip as R, TooltipTrigger as I, TooltipContent as j } from "../../feedback/tooltip/tooltip.js";
+import { Info as L } from "impact-nova-icons";
+import { Chart as P } from "../chart/chart.js";
+import { useStatisticsChartData as W, useStatisticsChartLabel as G, useStatisticsChartSeries as $, useStatisticsChartOptions as B } from "./statistics-card.hooks.js";
+import { useStatisticsCardContext as y, StatisticsCardContext as O } from "./statistics-card-context.js";
+const H = n.forwardRef(
+  ({ className: s, items: e, onItemToggle: a, chartSize: t = 110, config: o, mapItem: l, children: c, ...m }, r) => {
+    const f = n.useMemo(
+      () => l ? e.map((N, T) => l(N, T)) : e,
+      [e, l]
+    ), p = "var(--color-canvas-subtle, #f8f9fb)", x = "px-5 py-4", h = "gap-4 md:gap-6 lg:gap-8", u = "w-full min-w-0 max-w-[439px]", C = o?.colors?.background || p, b = o?.spacing?.rootPadding || x, w = o?.spacing?.rootGap || h, S = o?.spacing?.rootWidth || u, v = n.useMemo(
+      () => ({ items: f, onItemToggle: a, chartSize: t, config: o }),
+      [f, a, t, o]
+    );
+    return /* @__PURE__ */ i(O.Provider, { value: v, children: /* @__PURE__ */ i(
+      "div",
+      {
+        ref: r,
+        role: "region",
+        "aria-roledescription": "statistics card",
+        "data-component": "statistics-card",
+        className: d(
+          "flex flex-row flex-wrap md:flex-nowrap items-center justify-between rounded-lg box-border min-w-0 overflow-hidden bg-[var(--statistics-card-bg)]",
+          S,
+          b,
+          w,
+          s
+        ),
+        style: { "--statistics-card-bg": C },
+        ...m,
+        children: c
+      }
+    ) });
+  }
+);
+H.displayName = "StatisticsCardRoot";
+const M = n.forwardRef(({ className: s, children: e, ...a }, t) => /* @__PURE__ */ i(
+  "div",
+  {
+    ref: t,
+    className: d("flex flex-col items-start gap-4 flex-shrink-0 min-w-0", s),
+    ...a,
+    children: e
+  }
+));
+M.displayName = "StatisticsCardHeader";
+const D = n.forwardRef(
+  ({ className: s, children: e, ...a }, t) => /* @__PURE__ */ i(
+    "div",
+    {
+      ref: t,
+      className: d("flex flex-row items-center gap-1.5 min-w-0 max-w-[150px]", s),
+      ...a,
+      children: e
+    }
+  )
+);
+D.displayName = "StatisticsCardTitle";
+const V = n.forwardRef(
+  ({ icon: s, className: e, ...a }, t) => /* @__PURE__ */ i(
+    "div",
+    {
+      ref: t,
+      className: d("flex items-center justify-center w-6 h-6 p-1.5 bg-accent rounded-full shrink-0", e),
+      ...a,
+      children: s
+    }
+  )
+);
+V.displayName = "StatisticsCardTitleIcon";
+const q = n.forwardRef(
+  ({ className: s, children: e, ...a }, t) => /* @__PURE__ */ i(
+    "span",
+    {
+      ref: t,
+      className: d("font-semibold text-base leading-[1.5em] text-content-muted truncate line-clamp-1", s),
+      ...a,
+      children: e
+    }
+  )
+);
+q.displayName = "StatisticsCardTitleText";
+const A = n.forwardRef(
+  ({ content: s, icon: e, ...a }, t) => /* @__PURE__ */ i("div", { ref: t, ...a, children: /* @__PURE__ */ g(R, { children: [
+    /* @__PURE__ */ i(I, { asChild: !0, children: e || /* @__PURE__ */ i(L, { size: "sm", className: "text-secondary-foreground cursor-pointer shrink-0" }) }),
+    /* @__PURE__ */ i(j, { variant: "tertiary", side: "top", children: s })
+  ] }) })
+);
+A.displayName = "StatisticsCardTitleTooltip";
+const E = n.forwardRef(
+  ({ className: s, centerLabel: e, chartConfig: a, chartSize: t = 104, ...o }, l) => {
+    const { items: c, onItemToggle: m } = y(), { total: r, checkedTotal: f, hasChecked: p } = W(c), x = G(e, p, f, r), h = $(c, p), u = B(c, m, a), C = {
+      ...u,
+      chart: {
+        ...u.chart,
+        type: "pie",
+        height: t,
+        width: t,
+        margin: [0, 0, 0, 0],
+        spacing: [0, 0, 0, 0],
+        backgroundColor: "transparent"
+      },
+      title: { text: "" },
+      credits: { enabled: !1 },
+      exporting: { enabled: !1 },
+      navigation: { buttonOptions: { enabled: !1 } },
+      series: h
+    };
+    return /* @__PURE__ */ g(
+      "div",
+      {
+        ref: l,
+        className: d("relative flex items-center justify-center flex-shrink-0", s),
+        style: { width: `${t}px`, height: `${t}px` },
+        ...o,
+        children: [
+          /* @__PURE__ */ i(
+            P,
+            {
+              options: C,
+              height: t,
+              width: t,
+              noWrapper: !0
+            }
+          ),
+          x && /* @__PURE__ */ i("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ i("span", { className: "font-black text-[12px] leading-[9.536px] text-foreground", children: x }) })
+        ]
+      }
+    );
+  }
+);
+E.displayName = "StatisticsCardChart";
+const F = n.forwardRef(({ className: s, children: e, ...a }, t) => {
+  const { config: o } = y(), l = "w-full md:w-auto md:min-w-[190px] md:max-w-[208px]", c = "gap-2", m = o?.spacing?.legendWidth || l, r = o?.spacing?.itemGap || c;
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      ref: t,
+      role: "list",
+      className: d(
+        "flex flex-col justify-center min-w-0 flex-1 md:flex-none",
+        m,
+        r,
+        s
+      ),
+      ...a,
+      children: e
+    }
+  );
+});
+F.displayName = "StatisticsCardLegend";
+const J = n.forwardRef(
+  ({ className: s, index: e, item: a, ...t }, o) => {
+    const { items: l, onItemToggle: c, config: m } = y();
+    let r = a, f = -1;
+    if (!r && e !== void 0 ? (r = l[e], f = e) : r && (f = l.findIndex((w) => w === r)), !r || f === -1) return null;
+    const p = "bg-white", x = "px-3 py-1.5", h = "var(--color-foreground)", u = m?.colors?.background || p, C = m?.spacing?.itemPadding || x, b = m?.colors?.text || h;
+    return /* @__PURE__ */ g(
+      "div",
+      {
+        ref: o,
+        role: "listitem",
+        "aria-label": `${r.label}: ${r.value}`,
+        className: d(
+          "flex flex-row items-center gap-2 rounded-md border-l-2 transition-all",
+          u,
+          C,
+          s
+        ),
+        style: {
+          borderLeftColor: r.borderColor,
+          boxShadow: r.checked ? `0 0 0 3px ${r.borderColor}` : "0px 0px 4px 0px rgba(0,0,0,0.12)",
+          "--item-color": r.borderColor
+        },
+        ...t,
+        children: [
+          /* @__PURE__ */ g("div", { className: "flex flex-row items-center gap-2 flex-1 min-w-0", children: [
+            /* @__PURE__ */ i(
+              k,
+              {
+                checked: r.checked ?? !1,
+                onCheckedChange: (w) => c?.(f, w === !0),
+                "aria-label": `Select ${r.label}`,
+                className: "shrink-0"
+              }
+            ),
+            /* @__PURE__ */ i(
+              "span",
+              {
+                className: "flex-1 font-medium text-xs leading-[1.25em] truncate text-[var(--item-text)]",
+                style: { "--item-text": b },
+                children: r.label
+              }
+            )
+          ] }),
+          /* @__PURE__ */ i(
+            "span",
+            {
+              className: "shrink-0 font-semibold text-sm leading-[1.5em] text-right min-w-[27px] text-foreground",
+              children: r.value
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+J.displayName = "StatisticsCardLegendItem";
+const K = n.forwardRef(
+  ({ className: s, children: e, ...a }, t) => /* @__PURE__ */ i(
+    "div",
+    {
+      ref: t,
+      className: d("flex flex-wrap items-center gap-3 self-center text-[11px] font-medium text-secondary-foreground", s),
+      ...a,
+      children: e
+    }
+  )
+);
+K.displayName = "StatisticsCardSummary";
+const Q = n.forwardRef(
+  ({ className: s, label: e, count: a, color: t = "var(--color-secondary-foreground)", ...o }, l) => /* @__PURE__ */ g(
+    "div",
+    {
+      ref: l,
+      className: d("flex items-center gap-1", s),
+      style: { "--summary-color": t },
+      ...o,
+      children: [
+        /* @__PURE__ */ i(
+          "span",
+          {
+            className: "w-1.5 h-1.5 rounded-full shrink-0 bg-[var(--summary-color)]"
+          }
+        ),
+        /* @__PURE__ */ g("span", { children: [
+          e,
+          ": ",
+          a
+        ] })
+      ]
+    }
+  )
+);
+Q.displayName = "StatisticsCardSummaryItem";
+export {
+  E as StatisticsCardChart,
+  M as StatisticsCardHeader,
+  F as StatisticsCardLegend,
+  J as StatisticsCardLegendItem,
+  H as StatisticsCardRoot,
+  K as StatisticsCardSummary,
+  Q as StatisticsCardSummaryItem,
+  D as StatisticsCardTitle,
+  V as StatisticsCardTitleIcon,
+  q as StatisticsCardTitleText,
+  A as StatisticsCardTitleTooltip
+};

package/dist/components/data-display/statistics-card/statistics-card.types.d.ts

@@ -0,0 +1,67 @@
+import type * as React from "react";
+export interface StatisticsCardItem {
+    label: string;
+    value: number;
+    borderColor: string;
+    checked?: boolean;
+}
+export interface StatisticsCardConfig {
+    colors?: {
+        background?: string;
+        text?: string;
+        border?: string;
+        outlineChecked?: string;
+        unchecked?: string;
+        tooltipBg?: string;
+        tooltipBorder?: string;
+    };
+    spacing?: {
+        rootWidth?: string;
+        rootPadding?: string;
+        rootGap?: string;
+        legendWidth?: string;
+        itemPadding?: string;
+        itemGap?: string;
+    };
+}
+export interface StatisticsCardChartConfig {
+    type?: "pie" | "donut";
+    name?: string;
+    innerSize?: string | number;
+    uncheckedColor?: string;
+    borderColor?: string;
+    borderWidth?: number;
+    borderRadius?: number;
+    enableHover?: boolean;
+    enableClick?: boolean;
+}
+export interface StatisticsCardRootProps<T = StatisticsCardItem> extends React.HTMLAttributes<HTMLDivElement> {
+    items: T[];
+    onItemToggle?: (index: number, checked: boolean) => void;
+    chartSize?: number;
+    config?: StatisticsCardConfig;
+    mapItem?: (item: T, index: number) => StatisticsCardItem;
+}
+export interface StatisticsCardTitleIconProps extends React.HTMLAttributes<HTMLDivElement> {
+    icon: React.ReactNode;
+    className?: string;
+}
+export interface StatisticsCardTitleTooltipProps extends React.HTMLAttributes<HTMLDivElement> {
+    content: string;
+    icon?: React.ReactNode;
+}
+export interface StatisticsCardChartProps extends React.HTMLAttributes<HTMLDivElement> {
+    centerLabel?: string;
+    chartConfig?: StatisticsCardChartConfig;
+    chartSize?: number;
+    className?: string;
+}
+export interface StatisticsCardLegendItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    index?: number;
+    item?: StatisticsCardItem;
+}
+export interface StatisticsCardSummaryItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    label: string;
+    count: number | string | React.ReactNode;
+    color?: string;
+}

package/dist/components/feedback/alert/alert.d.ts

@@ -0,0 +1,10 @@
+import { AlertIconProps, AlertProps } from './alert.types';
+import * as React from "react";
+declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
+declare const AlertTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
+declare const AlertDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLDivElement>>;
+declare const AlertIcon: {
+    ({ variant, className, }: AlertIconProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Alert, AlertTitle, AlertDescription, AlertIcon };

package/dist/components/feedback/alert/alert.js

@@ -0,0 +1,169 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import "react";
+import { Slot as x } from "@radix-ui/react-slot";
+import { createComponent as i } from "../../../lib/primitives/create-component.js";
+import { cn as a } from "../../../lib/utils.js";
+import { Button as u } from "../../primitives/button/button.js";
+import { Cross as v } from "impact-nova-icons";
+import { useImpactNovaI18n as g } from "../../../i18n/use-impact-nova-i18n.js";
+import { alertVariants as w } from "./alert.variants.js";
+const l = ({ className: t }) => /* @__PURE__ */ n(
+  "svg",
+  {
+    className: a("h-[18px] w-[18px] shrink-0", t),
+    focusable: "false",
+    "aria-hidden": "true",
+    viewBox: "2 2 20 20",
+    children: [
+      /* @__PURE__ */ e(
+        "path",
+        {
+          d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z",
+          fill: "currentColor"
+        }
+      ),
+      /* @__PURE__ */ e("path", { d: "M13 17h-2v-6h2v6zm0-8h-2V7h2v2z", fill: "white" })
+    ]
+  }
+), C = ({ className: t }) => /* @__PURE__ */ n(
+  "svg",
+  {
+    className: a("h-[18px] w-[18px] shrink-0", t),
+    focusable: "false",
+    "aria-hidden": "true",
+    viewBox: "2 2 20 20",
+    children: [
+      /* @__PURE__ */ e(
+        "path",
+        {
+          d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z",
+          fill: "currentColor"
+        }
+      ),
+      /* @__PURE__ */ e(
+        "path",
+        {
+          d: "M10 14.17l-3.59-3.59L5 12l5 5 9-9-1.41-1.41L10 14.17z",
+          fill: "white"
+        }
+      )
+    ]
+  }
+), z = ({ className: t }) => /* @__PURE__ */ n(
+  "svg",
+  {
+    className: a("h-[18px] w-[18px] shrink-0", t),
+    focusable: "false",
+    "aria-hidden": "true",
+    viewBox: "1 2 22 19",
+    children: [
+      /* @__PURE__ */ e("path", { d: "M1 21h22L12 2 1 21z", fill: "currentColor" }),
+      /* @__PURE__ */ e("path", { d: "M13 18h-2v-2h2v2zm0-4h-2v-4h2v4z", fill: "white" })
+    ]
+  }
+), I = ({ className: t }) => /* @__PURE__ */ n(
+  "svg",
+  {
+    className: a("h-[18px] w-[18px] shrink-0", t),
+    focusable: "false",
+    "aria-hidden": "true",
+    viewBox: "2 2 20 20",
+    children: [
+      /* @__PURE__ */ e(
+        "path",
+        {
+          d: "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2z",
+          fill: "currentColor"
+        }
+      ),
+      /* @__PURE__ */ e(
+        "path",
+        {
+          d: "M17 15.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z",
+          fill: "white"
+        }
+      )
+    ]
+  }
+), N = {
+  default: l,
+  info: l,
+  success: C,
+  warning: z,
+  error: I
+}, V = i(
+  "Alert",
+  ({
+    className: t,
+    variant: r,
+    emphasis: o,
+    asChild: s = !1,
+    removable: c,
+    onClose: h,
+    children: p,
+    ...d
+  }, m) => {
+    const { t: f } = g();
+    return /* @__PURE__ */ n(
+      s ? x : "div",
+      {
+        ref: m,
+        role: "alert",
+        "data-component": "alert",
+        "data-variant": r ?? "default",
+        "data-emphasis": o ?? "elevated",
+        className: a(w({ variant: r, emphasis: o }), t),
+        ...d,
+        children: [
+          p,
+          c && /* @__PURE__ */ e(
+            u,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "absolute right-4 top-2 h-4 w-4 p-0 text-secondary-foreground hover:text-content hover:bg-transparent",
+              onClick: h,
+              "aria-label": f("aria.close"),
+              children: /* @__PURE__ */ e(v, { className: "!h-3 !w-3" })
+            }
+          )
+        ]
+      }
+    );
+  }
+), E = i("AlertTitle", ({ className: t, ...r }, o) => /* @__PURE__ */ e(
+  "h5",
+  {
+    ref: o,
+    "data-component": "alert-title",
+    className: a(
+      "font-semibold leading-[21px] tracking-tight text-content",
+      t
+    ),
+    ...r
+  }
+)), W = i("AlertDescription", ({ className: t, ...r }, o) => /* @__PURE__ */ e(
+  "div",
+  {
+    ref: o,
+    "data-component": "alert-description",
+    className: a(
+      "text-[12px] leading-[18px] text-secondary-foreground",
+      t
+    ),
+    ...r
+  }
+)), M = ({
+  variant: t = "info",
+  className: r = "mt-[2px]"
+}) => {
+  const o = N[t] || l;
+  return /* @__PURE__ */ e(o, { className: r });
+};
+M.displayName = "AlertIcon";
+export {
+  V as Alert,
+  W as AlertDescription,
+  M as AlertIcon,
+  E as AlertTitle
+};

package/dist/components/feedback/alert/alert.types.d.ts

@@ -0,0 +1,12 @@
+import { VariantProps } from 'class-variance-authority';
+import { alertVariants } from './alert.variants';
+import type * as React from "react";
+export interface AlertProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof alertVariants> {
+    asChild?: boolean;
+    removable?: boolean;
+    onClose?: () => void;
+}
+export interface AlertIconProps {
+    variant?: "default" | "info" | "success" | "warning" | "error";
+    className?: string;
+}

package/dist/components/feedback/alert/alert.variants.d.ts

@@ -0,0 +1,4 @@
+export declare const alertVariants: (props?: ({
+    variant?: "default" | "error" | "info" | "warning" | "success" | null | undefined;
+    emphasis?: "flat" | "elevated" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/feedback/alert/alert.variants.js

@@ -0,0 +1,53 @@
+import { cva as e } from "class-variance-authority";
+const r = e(
+  "relative w-full rounded-lg px-4 py-2 text-sm flex gap-3 items-start",
+  {
+    variants: {
+      variant: {
+        default: "bg-canvas text-content",
+        info: "bg-feedback-info-surface [&>svg]:text-brand",
+        warning: "bg-feedback-warning-surface [&>svg]:text-warning",
+        error: "bg-feedback-error-surface [&>svg]:text-destructive",
+        success: "bg-feedback-success-surface [&>svg]:text-success"
+      },
+      emphasis: {
+        elevated: "",
+        flat: "border-0 shadow-none"
+      }
+    },
+    compoundVariants: [
+      {
+        variant: "default",
+        emphasis: "elevated",
+        class: "border border-stroke shadow-alert-elevated"
+      },
+      {
+        variant: "info",
+        emphasis: "elevated",
+        class: "border border-feedback-info-border shadow-alert-elevated"
+      },
+      {
+        variant: "warning",
+        emphasis: "elevated",
+        class: "border border-feedback-warning-border shadow-alert-elevated"
+      },
+      {
+        variant: "error",
+        emphasis: "elevated",
+        class: "border border-feedback-error-border shadow-alert-elevated"
+      },
+      {
+        variant: "success",
+        emphasis: "elevated",
+        class: "border border-feedback-success-border shadow-alert-elevated"
+      }
+    ],
+    defaultVariants: {
+      variant: "default",
+      emphasis: "elevated"
+    }
+  }
+);
+export {
+  r as alertVariants
+};

package/dist/components/feedback/alert/index.d.ts

@@ -0,0 +1,3 @@
+export { Alert, AlertTitle, AlertDescription, AlertIcon } from './alert';
+export type { AlertIconProps, AlertProps } from './alert.types';
+export { alertVariants } from './alert.variants';

package/dist/components/feedback/alert/index.js

@@ -0,0 +1,9 @@
+import { Alert as e, AlertDescription as l, AlertIcon as o, AlertTitle as i } from "./alert.js";
+import { alertVariants as a } from "./alert.variants.js";
+export {
+  e as Alert,
+  l as AlertDescription,
+  o as AlertIcon,
+  i as AlertTitle,
+  a as alertVariants
+};

package/dist/components/feedback/alert-dialog/alert-dialog.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+declare const AlertDialog: (props: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Root>) => import("react/jsx-runtime").JSX.Element;
+declare const AlertDialogTrigger: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const AlertDialogPortal: React.FC<AlertDialogPrimitive.AlertDialogPortalProps>;
+declare const AlertDialogOverlay: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogContent: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogTitle: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const AlertDialogDescription: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+declare const AlertDialogAction: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const AlertDialogCancel: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, };