@ultraviolet/ui 3.0.0-beta.26 → 3.0.0-beta.28

package/dist/components/Banner/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { CloseIcon } from "@ultraviolet/icons";
 import { useTheme } from "@ultraviolet/themes";
 import { useMemo, useState } from "react";
@@ -27,9 +27,7 @@ const Banner = ({
   "data-testid": dataTestId,
   style
 }) => {
-  const {
-    theme
-  } = useTheme();
+  const { theme } = useTheme();
   const defaultImage = size === "small" ? defaultIllustrationSmall : defaultIllustration;
   const prominence = useMemo(() => {
     if (variant === "promotional") {
@@ -44,30 +42,91 @@ const Banner = ({
   if (!opened) {
     return null;
   }
-  return /* @__PURE__ */ jsxs(Stack, { className: `${className ? `${className} ` : ""}${banner({
-    size,
-    variant
-  })}`, "data-testid": dataTestId, direction: "row", gap: 2, justifyContent: "space-between", style, children: [
-    image ? /* @__PURE__ */ jsx(Stack, { className: imageStackBanner[size], justifyContent: "center", children: typeof image === "string" ? /* @__PURE__ */ jsx("img", { alt: "", src: image }) : image }) : /* @__PURE__ */ jsx(Stack, { className: imageStackBanner[size], justifyContent: "center", children: /* @__PURE__ */ jsx("img", { alt: "", src: defaultImage }) }),
-    /* @__PURE__ */ jsxs(Stack, { alignItems: direction === "column" ? "start" : "center", direction, gap: 2, justifyContent: "space-between", style: {
-      flex: 1
-    }, children: [
-      /* @__PURE__ */ jsxs(Stack, { gap: 0.5, justifyContent: "center", style: {
-        flex: 1
-      }, children: [
-        /* @__PURE__ */ jsx(Text, { as: "p", prominence: variant === "intro" ? "default" : "strong", sentiment: variant === "promotional" ? "white" : "primary", variant: size === "medium" ? "headingSmall" : "bodyStronger", children: title }),
-        /* @__PURE__ */ jsx(Text, { as: "p", sentiment: variant === "promotional" || theme !== "light" ? "white" : "neutral", variant: "body", children })
-      ] }),
-      buttonText || linkText ? /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", gap: 2, children: [
-        buttonText ? /* @__PURE__ */ jsx(Button, { onClick: onClickButton, sentiment: variant === "intro" ? "primary" : "white", size: "medium", variant: "filled", children: buttonText }) : null,
-        linkText ? /* @__PURE__ */ jsx(Link, { href: linkHref ?? "", prominence, sentiment: "primary", size: "small", target: "_blank", children: linkText }) : null
-      ] }) : null
-    ] }),
-    closable ? /* @__PURE__ */ jsx(Button, { className: closeButtonBanner, name: "close", onClick: () => {
-      setOpened(false);
-      onClose?.();
-    }, sentiment: variant === "intro" || variant === "promotional" && theme !== "light" ? "neutral" : "primary", size: "small", variant: variant === "intro" ? "ghost" : "filled", children: /* @__PURE__ */ jsx(CloseIcon, {}) }) : null
-  ] });
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      className: `${className ? `${className} ` : ""}${banner({ size, variant })}`,
+      "data-testid": dataTestId,
+      direction: "row",
+      gap: 2,
+      justifyContent: "space-between",
+      style,
+      children: [
+        image ? /* @__PURE__ */ jsx(Stack, { className: imageStackBanner[size], justifyContent: "center", children: typeof image === "string" ? /* @__PURE__ */ jsx("img", { alt: "", src: image }) : image }) : /* @__PURE__ */ jsx(Stack, { className: imageStackBanner[size], justifyContent: "center", children: /* @__PURE__ */ jsx("img", { alt: "", src: defaultImage }) }),
+        /* @__PURE__ */ jsxs(
+          Stack,
+          {
+            alignItems: direction === "column" ? "start" : "center",
+            direction,
+            gap: 2,
+            justifyContent: "space-between",
+            style: { flex: 1 },
+            children: [
+              /* @__PURE__ */ jsxs(Stack, { gap: 0.5, justifyContent: "center", style: { flex: 1 }, children: [
+                /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    as: "p",
+                    prominence: variant === "intro" ? "default" : "strong",
+                    sentiment: variant === "promotional" ? "white" : "primary",
+                    variant: size === "medium" ? "headingSmall" : "bodyStronger",
+                    children: title
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    as: "p",
+                    sentiment: variant === "promotional" || theme !== "light" ? "white" : "neutral",
+                    variant: "body",
+                    children
+                  }
+                )
+              ] }),
+              buttonText || linkText ? /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", gap: 2, children: [
+                buttonText ? /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    onClick: onClickButton,
+                    sentiment: variant === "intro" ? "primary" : "white",
+                    size: "medium",
+                    variant: "filled",
+                    children: buttonText
+                  }
+                ) : null,
+                linkText ? /* @__PURE__ */ jsx(
+                  Link,
+                  {
+                    href: linkHref ?? "",
+                    prominence,
+                    sentiment: "primary",
+                    size: "small",
+                    target: "_blank",
+                    children: linkText
+                  }
+                ) : null
+              ] }) : null
+            ]
+          }
+        ),
+        closable ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            className: closeButtonBanner,
+            name: "close",
+            onClick: () => {
+              setOpened(false);
+              onClose?.();
+            },
+            sentiment: variant === "intro" || variant === "promotional" && theme !== "light" ? "neutral" : "primary",
+            size: "small",
+            variant: variant === "intro" ? "ghost" : "filled",
+            children: /* @__PURE__ */ jsx(CloseIcon, {})
+          }
+        ) : null
+      ]
+    }
+  );
 };
 export {
   Banner

package/dist/components/BarChart/Tooltip.d.ts

@@ -1,9 +1,9 @@
-type BarChartToolTipProps = {
+type BarChartTooltipProps = {
     color: string;
     indexValue: string;
     formattedValue: string;
     className?: string;
     'data-testid'?: string;
 };
-declare const BarChartToolTip: ({ formattedValue, indexValue, color, className, "data-testid": dataTestId, }: BarChartToolTipProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export default BarChartToolTip;
+export declare const BarChartTooltip: ({ formattedValue, indexValue, color, className, "data-testid": dataTestId, }: BarChartTooltipProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/BarChart/Tooltip.js

@@ -1,23 +1,36 @@
 "use client";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { Text } from "../Text/index.js";
 import { barTooltipContainer, barColorSquare, colorBar } from "./styles.css.js";
-const BarChartToolTip = ({
+const BarChartTooltip = ({
   formattedValue,
   indexValue,
   color,
   className,
   "data-testid": dataTestId
-}) => /* @__PURE__ */ jsxs("div", { className: `${className ? `${className} ` : ""}${barTooltipContainer}`, "data-testid": dataTestId, children: [
-  /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("span", { className: barColorSquare, style: assignInlineVars({
-    [colorBar]: color
-  }) }) }),
-  /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx(Text, { as: "p", sentiment: "primary", variant: "bodyStronger", children: formattedValue }),
-    /* @__PURE__ */ jsx(Text, { as: "p", variant: "bodySmall", children: indexValue })
-  ] })
-] });
+}) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    className: `${className ? `${className} ` : ""}${barTooltipContainer}`,
+    "data-testid": dataTestId,
+    children: [
+      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: barColorSquare,
+          style: assignInlineVars({
+            [colorBar]: color
+          })
+        }
+      ) }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(Text, { as: "p", sentiment: "primary", variant: "bodyStronger", children: formattedValue }),
+        /* @__PURE__ */ jsx(Text, { as: "p", variant: "bodySmall", children: indexValue })
+      ] })
+    ]
+  }
+);
 export {
-  BarChartToolTip as default
+  BarChartTooltip
 };

package/dist/components/BarChart/index.d.ts

@@ -2,7 +2,7 @@ import type { BarDatum, BarSvgProps, BarTooltipProps } from '@nivo/bar';
 import { ResponsiveBar } from '@nivo/bar';
 import type { Box, DatumValue, ValueFormat } from '@nivo/core';
 import type { ComponentProps, CSSProperties } from 'react';
-import BarChartTooltip from './Tooltip';
+import { BarChartTooltip } from './Tooltip';
 type Formatter = ValueFormat<DatumValue>;
 type TickSpec = NonNullable<ComponentProps<typeof ResponsiveBar>['axisBottom']>['tickValues'];
 type BarChartProps = {
@@ -24,5 +24,5 @@ type BarChartProps = {
  * See https://nivo.rocks/bar/ for more information.
  * @experimental This component is experimental and may be subject to breaking changes in the future.
  */
-export declare const BarChart: ({ height, margin, data, axisFormatters, tickValues, keys, tooltipFunction, chartProps, className, "data-testid": dataTestId, style, }: BarChartProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const BarChart: ({ height, margin, data, axisFormatters, tickValues, keys, tooltipFunction, chartProps, className, "data-testid": dataTestId, style, }: BarChartProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/BarChart/index.js

@@ -1,17 +1,12 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { ResponsiveBar } from "@nivo/bar";
 import { useTheme } from "@ultraviolet/themes";
 import { useCallback } from "react";
 import { getLegendColor } from "../../helpers/legend.js";
 import { getNivoTheme } from "../../helpers/nivoTheme.js";
-import BarChartToolTip from "./Tooltip.js";
-const DEFAULT_MARGIN = {
-  bottom: 50,
-  left: 60,
-  right: 25,
-  top: 50
-};
+import { BarChartTooltip } from "./Tooltip.js";
+const DEFAULT_MARGIN = { bottom: 50, left: 60, right: 25, top: 50 };
 const DEFAULT_DATA = [];
 const DEFAULT_AXISFORMATTER = {};
 const DEFAULT_KEYS = ["value"];
@@ -30,30 +25,55 @@ const BarChart = ({
   style
 }) => {
   const theme = useTheme();
-  const tooltip = useCallback((props) => {
-    const {
-      indexValue,
-      formattedValue,
-      color
-    } = tooltipFunction ? tooltipFunction(props) : props;
-    return /* @__PURE__ */ jsx(BarChartToolTip, { color, formattedValue, indexValue: indexValue.toString() });
-  }, [tooltipFunction]);
-  return /* @__PURE__ */ jsx("div", { className, "data-testid": dataTestId, style: {
-    height,
-    ...style
-  }, children: /* @__PURE__ */ jsx(ResponsiveBar, { axisBottom: {
-    format: axisFormatters?.bottom,
-    tickPadding: 5,
-    tickRotation: 0,
-    tickSize: 5,
-    tickValues: tickValues?.bottom
-  }, axisLeft: {
-    format: axisFormatters?.left,
-    tickPadding: 5,
-    tickRotation: 0,
-    tickSize: 5,
-    tickValues: tickValues?.left
-  }, colors: getLegendColor(theme), data, enableLabel: false, keys, margin, theme: getNivoTheme(theme), tooltip, ...chartProps }) });
+  const tooltip = useCallback(
+    (props) => {
+      const { indexValue, formattedValue, color } = tooltipFunction ? tooltipFunction(props) : props;
+      return /* @__PURE__ */ jsx(
+        BarChartTooltip,
+        {
+          color,
+          formattedValue,
+          indexValue: indexValue.toString()
+        }
+      );
+    },
+    [tooltipFunction]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className,
+      "data-testid": dataTestId,
+      style: { height, ...style },
+      children: /* @__PURE__ */ jsx(
+        ResponsiveBar,
+        {
+          axisBottom: {
+            format: axisFormatters?.bottom,
+            tickPadding: 5,
+            tickRotation: 0,
+            tickSize: 5,
+            tickValues: tickValues?.bottom
+          },
+          axisLeft: {
+            format: axisFormatters?.left,
+            tickPadding: 5,
+            tickRotation: 0,
+            tickSize: 5,
+            tickValues: tickValues?.left
+          },
+          colors: getLegendColor(theme),
+          data,
+          enableLabel: false,
+          keys,
+          margin,
+          theme: getNivoTheme(theme),
+          tooltip,
+          ...chartProps
+        }
+      )
+    }
+  );
 };
 export {
   BarChart

package/dist/components/BarStack/index.d.ts

@@ -34,5 +34,5 @@ type BarStackProps = {
 /**
  * BarStack is a graphic component that is used to show data in one dimension.
  */
-export declare const BarStack: ({ data, total, className, "data-testid": dataTestId, style, }: BarStackProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const BarStack: ({ data, total, className, "data-testid": dataTestId, style, }: BarStackProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/BarStack/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { useMemo } from "react";
 import { Tooltip } from "../Tooltip/index.js";
@@ -11,24 +11,69 @@ const BarStack = ({
   "data-testid": dataTestId,
   style
 }) => {
-  const computedTotal = useMemo(() => total ?? data.reduce((acc, {
-    value
-  }) => acc + value, 0), [total, data]);
-  return /* @__PURE__ */ jsx("div", { className: `${className ? `${className} ` : ""}${containerBarStack}`, "data-testid": dataTestId, style, children: data.map(({
-    id,
-    value,
-    text,
-    onClick,
-    onDoubleClick,
-    onKeyDown,
-    onMouseEnter,
-    onMouseLeave,
-    onMouseDown,
-    onMouseUp,
-    tooltip
-  }) => /* @__PURE__ */ jsx("div", { className: wrapperBarStack, style: assignInlineVars({
-    [wrapperWidth]: `${value / computedTotal * 100}%`
-  }), children: tooltip ? /* @__PURE__ */ jsx(Tooltip, { id: `tooltip-${id}`, text: tooltip, children: /* @__PURE__ */ jsx("div", { className: barStack, onClick, onDoubleClick, onKeyDown, onMouseDown, onMouseEnter, onMouseLeave, onMouseUp, children: text }) }) : /* @__PURE__ */ jsx("div", { className: barStack, onClick, onDoubleClick, onKeyDown, onMouseDown, onMouseEnter, onMouseLeave, onMouseUp, children: text }) }, id)) });
+  const computedTotal = useMemo(
+    () => total ?? data.reduce((acc, { value }) => acc + value, 0),
+    [total, data]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `${className ? `${className} ` : ""}${containerBarStack}`,
+      "data-testid": dataTestId,
+      style,
+      children: data.map(
+        ({
+          id,
+          value,
+          text,
+          onClick,
+          onDoubleClick,
+          onKeyDown,
+          onMouseEnter,
+          onMouseLeave,
+          onMouseDown,
+          onMouseUp,
+          tooltip
+        }) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: wrapperBarStack,
+            style: assignInlineVars({
+              [wrapperWidth]: `${value / computedTotal * 100}%`
+            }),
+            children: tooltip ? /* @__PURE__ */ jsx(Tooltip, { id: `tooltip-${id}`, text: tooltip, children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: barStack,
+                onClick,
+                onDoubleClick,
+                onKeyDown,
+                onMouseDown,
+                onMouseEnter,
+                onMouseLeave,
+                onMouseUp,
+                children: text
+              }
+            ) }) : /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: barStack,
+                onClick,
+                onDoubleClick,
+                onKeyDown,
+                onMouseDown,
+                onMouseEnter,
+                onMouseLeave,
+                onMouseUp,
+                children: text
+              }
+            )
+          },
+          id
+        )
+      )
+    }
+  );
 };
 export {
   BarStack

package/dist/components/Breadcrumbs/components/Item.d.ts

@@ -13,5 +13,5 @@ type ItemProps = {
     maxWidth?: string;
     minWidth?: string;
 };
-export declare const Item: ({ to, children, disabled, "aria-current": ariaCurrent, onClick, onKeyDown, className, maxWidth, minWidth, }: ItemProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Item: ({ to, children, disabled, "aria-current": ariaCurrent, onClick, onKeyDown, className, maxWidth, minWidth, }: ItemProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Breadcrumbs/components/Item.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { useMemo } from "react";
 import { Button } from "../../Button/index.js";
@@ -19,22 +19,58 @@ const Item = ({
 }) => {
   const renderedChildren = useMemo(() => {
     if (to) {
-      return /* @__PURE__ */ jsx(Link, { className: linkBreadcrumbs, href: to, prominence: "stronger", size: "small", children });
+      return /* @__PURE__ */ jsx(
+        Link,
+        {
+          className: linkBreadcrumbs,
+          href: to,
+          prominence: "stronger",
+          size: "small",
+          children
+        }
+      );
     }
     if (onClick) {
-      return /* @__PURE__ */ jsx(Button, { className: contentBreadcrumbs, disabled, sentiment: "neutral", size: "small", style: assignInlineVars({
+      return /* @__PURE__ */ jsx(
+        Button,
+        {
+          className: contentBreadcrumbs,
+          disabled,
+          sentiment: "neutral",
+          size: "small",
+          style: assignInlineVars({
+            [minWidthVar]: minWidth?.toString(),
+            [maxWidthVar]: maxWidth?.toString()
+          }),
+          variant: "ghost",
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      Text,
+      {
+        as: "div",
+        className: `${contentBreadcrumbs} ${contentBreadcrumbsText}`,
+        variant: "bodySmallStrong",
+        children
+      }
+    );
+  }, [children, disabled, maxWidth, minWidth, onClick, to]);
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      "aria-current": ariaCurrent,
+      className: `${className ? `${className} ` : ""}${itemContainerBreadcrumbs({ clickable: !!onClick })} ${breadcrumbsItem}`,
+      onClick,
+      onKeyDown,
+      style: assignInlineVars({
         [minWidthVar]: minWidth?.toString(),
         [maxWidthVar]: maxWidth?.toString()
-      }), variant: "ghost", children });
+      }),
+      children: renderedChildren
     }
-    return /* @__PURE__ */ jsx(Text, { as: "div", className: `${contentBreadcrumbs} ${contentBreadcrumbsText}`, variant: "bodySmallStrong", children });
-  }, [children, disabled, maxWidth, minWidth, onClick, to]);
-  return /* @__PURE__ */ jsx("li", { "aria-current": ariaCurrent, className: `${className ? `${className} ` : ""}${itemContainerBreadcrumbs({
-    clickable: !!onClick
-  })} ${breadcrumbsItem}`, onClick, onKeyDown, style: assignInlineVars({
-    [minWidthVar]: minWidth?.toString(),
-    [maxWidthVar]: maxWidth?.toString()
-  }), children: renderedChildren });
+  );
 };
 export {
   Item

package/dist/components/Breadcrumbs/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { Item } from "./components/Item.js";
 import { breadcrumbs } from "./styles.css.js";
 const Breadcrumbs = ({
@@ -7,7 +7,16 @@ const Breadcrumbs = ({
   className,
   "data-testid": dataTestId,
   style
-}) => /* @__PURE__ */ jsx("nav", { "aria-label": "breadcrumb", className, "data-testid": dataTestId, style, children: /* @__PURE__ */ jsx("ol", { className: breadcrumbs, children }) });
+}) => /* @__PURE__ */ jsx(
+  "nav",
+  {
+    "aria-label": "breadcrumb",
+    className,
+    "data-testid": dataTestId,
+    style,
+    children: /* @__PURE__ */ jsx("ol", { className: breadcrumbs, children })
+  }
+);
 Breadcrumbs.Item = Item;
 export {
   Breadcrumbs

package/dist/components/Bullet/index.d.ts

@@ -17,5 +17,5 @@ type BulletProps = {
 /**
  * Bullet component is used to display a small icon or text with a colored background in a circle.
  */
-export declare const Bullet: ({ className, sentiment, size, tooltip, tooltipBaseId, "data-testid": dataTestId, prominence, children, disabled, style, }: BulletProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Bullet: ({ className, sentiment, size, tooltip, tooltipBaseId, "data-testid": dataTestId, prominence, children, disabled, style, }: BulletProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Bullet/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { Tooltip } from "../Tooltip/index.js";
 import { bullet } from "./styles.css.js";
 const Bullet = ({
@@ -13,12 +13,15 @@ const Bullet = ({
   children,
   disabled,
   style
-}) => /* @__PURE__ */ jsx(Tooltip, { id: tooltipBaseId, text: tooltip, children: /* @__PURE__ */ jsx("div", { className: `${className ? `${className} ` : ""}${bullet({
-  disabled,
-  prominence,
-  sentiment,
-  size
-})}`, "data-testid": dataTestId, style, children }) });
+}) => /* @__PURE__ */ jsx(Tooltip, { id: tooltipBaseId, text: tooltip, children: /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: `${className ? `${className} ` : ""}${bullet({ disabled, prominence, sentiment, size })}`,
+    "data-testid": dataTestId,
+    style,
+    children
+  }
+) });
 export {
   Bullet
 };

package/dist/components/Button/constants.d.ts

@@ -1,3 +1,4 @@
+export declare const SIZE_KEY: readonly ["large", "medium", "small", "xsmall"];
 export declare const SIZE_HEIGHT: {
     readonly large: "600";
     readonly medium: "500";

package/dist/components/Button/index.d.ts

@@ -1,7 +1,4 @@
 import type { AriaRole, ButtonHTMLAttributes, CSSProperties, MouseEventHandler, ReactNode } from 'react';
-import { SIZE_HEIGHT } from './constants';
-type ButtonSize = keyof typeof SIZE_HEIGHT;
-export declare const buttonSizes: ButtonSize[];
 /**
  * Button component is used to trigger an action or event, such as submitting a form, opening a dialog,
  * canceling an action, or performing a delete operation.
@@ -48,4 +45,3 @@ export declare const Button: import("react").ForwardRefExoticComponent<{
     target?: string;
     download?: string;
 } & import("react").RefAttributes<Element>>;
-export {};