@dbcdk/react-components 0.0.167 → 0.0.169

package/dist/components/attribute-chip/AttributeChip.module.css

@@ -1,64 +0,0 @@
-.container {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-2xs);
-  white-space: nowrap;
-  border-radius: var(--border-radius-default);
-  border: 1px solid var(--color-border-subtle);
-  background: var(--color-neutral);
-  color: var(--color-fg-default);
-  font-family: var(--font-family);
-  font-weight: var(--font-weight-default);
-  /* All text here is single-line and vertically centered via flex, so use a
-     tight line-height instead of the paragraph-oriented default — that
-     avoids uneven leading around the glyphs at different font-sizes. */
-  line-height: 1;
-  --attribute-chip-padding-inline: var(--spacing-xxs);
-  padding-inline: var(--attribute-chip-padding-inline);
-}
-
-.label,
-.value,
-.marker {
-  display: inline-flex;
-  align-items: center;
-  height: 100%;
-}
-
-.label {
-  color: var(--color-fg-subtle);
-  font-size: 0.85em;
-}
-
-.value {
-  font-weight: var(--font-weight-medium);
-}
-
-.marker {
-  inline-size: var(--border-width-medium);
-  block-size: 0.9em;
-  flex: 0 0 auto;
-  border-radius: var(--border-radius-sm);
-  background: var(--attribute-chip-marker-color, var(--color-brand));
-  margin-inline: var(--spacing-2xs) var(--spacing-2xs);
-}
-
-.separator {
-  color: var(--color-border-default);
-}
-
-/* Sizes */
-.sm {
-  height: var(--component-size-xs);
-  font-size: var(--font-size-xs);
-}
-
-.md {
-  height: var(--component-size-sm);
-  font-size: var(--font-size-sm);
-}
-
-.lg {
-  height: var(--component-size-md);
-  font-size: var(--font-size-md);
-}

package/dist/components/avatar/Avatar.cjs

@@ -1,111 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var styles = require('./Avatar.module.css');
-var severity = require('../../constants/severity');
-var sizes = require('../../constants/sizes');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-function Avatar({
-  image,
-  imgSrc,
-  imgAlt,
-  fullName,
-  color = "brand",
-  button,
-  size = "md",
-  className,
-  fullWidth = false,
-  photographerCredit,
-  ...rest
-}) {
-  const text = (() => {
-    if (!fullName) return "";
-    const parts = fullName.trim().split(/\s+/);
-    if (parts.length === 1) {
-      return parts[0].charAt(0).toUpperCase();
-    }
-    return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();
-  })();
-  const styleVars = {
-    "--bg": severity.SeverityBgColor[color],
-    "--text": severity.SeverityTextColor[color],
-    "--size": fullWidth ? "100%" : sizes.sizes[size]
-  };
-  const pathId = React__namespace.useId();
-  const renderImage = () => {
-    if (image) {
-      if (React__namespace.isValidElement(image)) {
-        const mergedClass = [image.props.className, styles__default.default.image].filter(Boolean).join(" ");
-        return React__namespace.cloneElement(image, { className: mergedClass });
-      }
-      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.imageSlot, children: image });
-    }
-    if (imgSrc) {
-      return /* @__PURE__ */ jsxRuntime.jsx("img", { className: styles__default.default.image, src: imgSrc, alt: imgAlt });
-    }
-    const avatarSizeClass = [styles__default.default.avatar];
-    if (size === "xs") avatarSizeClass.push(styles__default.default["size-xs"]);
-    if (size === "sm") avatarSizeClass.push(styles__default.default["size-sm"]);
-    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: avatarSizeClass.join(" "), "aria-hidden": "true", children: text });
-  };
-  if (button) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        ...rest,
-        className: [styles__default.default.container, styles__default.default.button, className].filter(Boolean).join(" "),
-        style: styleVars,
-        children: renderImage()
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: [styles__default.default.wrapper, className].filter(Boolean).join(" "), style: styleVars, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.container, children: renderImage() }),
-    photographerCredit && /* @__PURE__ */ jsxRuntime.jsxs(
-      "svg",
-      {
-        className: styles__default.default.creditText,
-        viewBox: "0 0 100 100",
-        "aria-hidden": "true",
-        focusable: "false",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx(
-            "path",
-            {
-              id: pathId,
-              d: "\n                M 50, 50\n                m -42, 0\n                a 42,42 0 1,1 84,0\n                a 42,42 0 1,1 -84,0\n              "
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx("text", { children: /* @__PURE__ */ jsxRuntime.jsx("textPath", { xlinkHref: `#${pathId}`, startOffset: "50%", textAnchor: "middle", children: photographerCredit }) })
-        ]
-      }
-    )
-  ] });
-}
-
-exports.Avatar = Avatar;

package/dist/components/avatar/Avatar.d.ts

@@ -1,17 +0,0 @@
-import * as React from 'react';
-import type { ButtonHTMLAttributes, JSX } from 'react';
-import type { Severity } from '../../constants/severity.types';
-import type { Size } from '../../types/sizes.types';
-interface AvatarProps extends Partial<ButtonHTMLAttributes<HTMLButtonElement>> {
-    image?: React.ReactNode;
-    imgSrc?: string;
-    imgAlt?: string;
-    fullName?: string;
-    color?: Severity;
-    button?: boolean;
-    size?: Size;
-    fullWidth?: boolean;
-    photographerCredit?: string;
-}
-export declare function Avatar({ image, imgSrc, imgAlt, fullName, color, button, size, className, fullWidth, photographerCredit, ...rest }: AvatarProps): JSX.Element;
-export {};

package/dist/components/avatar/Avatar.js

@@ -1,86 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import * as React from 'react';
-import styles from './Avatar.module.css';
-import { SeverityTextColor, SeverityBgColor } from '../../constants/severity';
-import { sizes } from '../../constants/sizes';
-
-function Avatar({
-  image,
-  imgSrc,
-  imgAlt,
-  fullName,
-  color = "brand",
-  button,
-  size = "md",
-  className,
-  fullWidth = false,
-  photographerCredit,
-  ...rest
-}) {
-  const text = (() => {
-    if (!fullName) return "";
-    const parts = fullName.trim().split(/\s+/);
-    if (parts.length === 1) {
-      return parts[0].charAt(0).toUpperCase();
-    }
-    return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();
-  })();
-  const styleVars = {
-    "--bg": SeverityBgColor[color],
-    "--text": SeverityTextColor[color],
-    "--size": fullWidth ? "100%" : sizes[size]
-  };
-  const pathId = React.useId();
-  const renderImage = () => {
-    if (image) {
-      if (React.isValidElement(image)) {
-        const mergedClass = [image.props.className, styles.image].filter(Boolean).join(" ");
-        return React.cloneElement(image, { className: mergedClass });
-      }
-      return /* @__PURE__ */ jsx("span", { className: styles.imageSlot, children: image });
-    }
-    if (imgSrc) {
-      return /* @__PURE__ */ jsx("img", { className: styles.image, src: imgSrc, alt: imgAlt });
-    }
-    const avatarSizeClass = [styles.avatar];
-    if (size === "xs") avatarSizeClass.push(styles["size-xs"]);
-    if (size === "sm") avatarSizeClass.push(styles["size-sm"]);
-    return /* @__PURE__ */ jsx("span", { className: avatarSizeClass.join(" "), "aria-hidden": "true", children: text });
-  };
-  if (button) {
-    return /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        ...rest,
-        className: [styles.container, styles.button, className].filter(Boolean).join(" "),
-        style: styleVars,
-        children: renderImage()
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs("div", { className: [styles.wrapper, className].filter(Boolean).join(" "), style: styleVars, children: [
-    /* @__PURE__ */ jsx("div", { className: styles.container, children: renderImage() }),
-    photographerCredit && /* @__PURE__ */ jsxs(
-      "svg",
-      {
-        className: styles.creditText,
-        viewBox: "0 0 100 100",
-        "aria-hidden": "true",
-        focusable: "false",
-        children: [
-          /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(
-            "path",
-            {
-              id: pathId,
-              d: "\n                M 50, 50\n                m -42, 0\n                a 42,42 0 1,1 84,0\n                a 42,42 0 1,1 -84,0\n              "
-            }
-          ) }),
-          /* @__PURE__ */ jsx("text", { children: /* @__PURE__ */ jsx("textPath", { xlinkHref: `#${pathId}`, startOffset: "50%", textAnchor: "middle", children: photographerCredit }) })
-        ]
-      }
-    )
-  ] });
-}
-
-export { Avatar };

package/dist/components/avatar/Avatar.module.css

@@ -1,91 +0,0 @@
-.container {
-  inline-size: var(--size);
-  block-size: var(--size);
-  max-inline-size: var(--component-size-xl);
-  aspect-ratio: 1 / 1;
-  border-radius: var(--border-radius-round);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: var(--font-weight-normal);
-  overflow: hidden;
-}
-
-.container.button {
-  cursor: pointer;
-  border: 0;
-  padding: 0;
-  background: transparent; /* important */
-  transition:
-    background-color var(--transition-fast) var(--ease-standard),
-    opacity var(--transition-fast) var(--ease-standard);
-}
-
-.container.button:hover .avatar {
-  background-color: color-mix(in srgb, var(--bg) 25%, var(--color-bg-surface));
-}
-
-.container.button:active {
-  opacity: 0.8;
-}
-
-.avatar {
-  inline-size: 80%;
-  block-size: 80%;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-
-  /* moved here */
-  background-color: color-mix(in srgb, var(--bg) 20%, var(--color-bg-surface));
-  color: var(--bg);
-
-  font-size: var(--font-size-sm);
-  line-height: 1;
-  text-transform: uppercase;
-}
-
-.avatar.size-xs,
-.avatar.size-sm {
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-normal);
-}
-
-.image {
-  inline-size: 100%;
-  block-size: 100%;
-  object-fit: cover;
-  display: block;
-  border-radius: 50%; /* important if image fills avatar */
-}
-
-.imageSlot {
-  display: contents;
-}
-
-.wrapper {
-  position: relative;
-  display: inline-block;
-  inline-size: var(--size);
-  block-size: var(--size);
-  max-inline-size: var(--component-size-xl);
-  aspect-ratio: 1 / 1;
-  color: var(--text);
-}
-
-.creditText {
-  position: absolute;
-  inset: 0;
-  inline-size: 100%;
-  block-size: 100%;
-  pointer-events: none;
-  fill: currentColor;
-}
-
-.creditText text {
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}

package/dist/components/breadcrumbs/Breadcrumbs.cjs

@@ -1,24 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var styles = require('./Breadcrumbs.module.css');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-function Breadcrumbs({
-  items,
-  ...navProps
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx("nav", { className: styles__default.default.breadcrumbs, "aria-label": "breadcrumb", ...navProps, children: /* @__PURE__ */ jsxRuntime.jsx("ul", { children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
-      item.icon && item.icon,
-      item.onClick ? /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: item.onClick, children: item.label }) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: item.label })
-    ] }),
-    index < items.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.separator, children: "/" })
-  ] }, `breadcrumbItem-${item.label}-${index}`)) }) });
-}
-
-exports.Breadcrumbs = Breadcrumbs;

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

@@ -1,12 +0,0 @@
-import type { ReactNode, HTMLAttributes, JSX } from 'react';
-export interface BreadcrumbItem {
-    label: string | ReactNode;
-    onClick?: () => void;
-    icon?: ReactNode;
-    disabled?: boolean;
-    hidden?: boolean;
-}
-export interface BreadcrumbsProps {
-    items: BreadcrumbItem[];
-}
-export declare function Breadcrumbs({ items, ...navProps }: BreadcrumbsProps & HTMLAttributes<HTMLElement>): JSX.Element;

package/dist/components/breadcrumbs/Breadcrumbs.js

@@ -1,18 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { Fragment } from 'react';
-import styles from './Breadcrumbs.module.css';
-
-function Breadcrumbs({
-  items,
-  ...navProps
-}) {
-  return /* @__PURE__ */ jsx("nav", { className: styles.breadcrumbs, "aria-label": "breadcrumb", ...navProps, children: /* @__PURE__ */ jsx("ul", { children: items.map((item, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("li", { children: [
-      item.icon && item.icon,
-      item.onClick ? /* @__PURE__ */ jsx("button", { onClick: item.onClick, children: item.label }) : /* @__PURE__ */ jsx("span", { children: item.label })
-    ] }),
-    index < items.length - 1 && /* @__PURE__ */ jsx("span", { className: styles.separator, children: "/" })
-  ] }, `breadcrumbItem-${item.label}-${index}`)) }) });
-}
-
-export { Breadcrumbs };

package/dist/components/breadcrumbs/Breadcrumbs.module.css

@@ -1,77 +0,0 @@
-.breadcrumbs {
-  font-family: var(--font-family);
-}
-
-.breadcrumbs ul {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-xs);
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  font-size: var(--font-size-sm);
-}
-
-.breadcrumbs li {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-xxs);
-  padding-block: calc(var(--spacing-xxs) + var(--density));
-  padding-inline: 0;
-  color: var(--color-fg-muted);
-  border-radius: var(--border-radius-sm);
-  position: relative;
-  transition:
-    color var(--transition-fast) var(--ease-standard),
-    background-color var(--transition-fast) var(--ease-standard);
-}
-
-.breadcrumbs li:hover button {
-  color: var(--color-fg-default);
-  cursor: pointer;
-}
-
-.breadcrumbs li[aria-current='page'],
-.breadcrumbs li:last-of-type {
-  color: var(--color-fg-default);
-  cursor: default;
-}
-
-.breadcrumbs li[aria-current='page'] button,
-.breadcrumbs li:last-of-type button {
-  font-weight: var(--font-weight-medium);
-}
-
-.separator {
-  display: flex;
-  align-items: center;
-  color: var(--color-fg-subtle);
-  font-size: var(--font-size-md);
-}
-
-.breadcrumbs li svg {
-  inline-size: var(--icon-size-sm);
-  block-size: var(--icon-size-sm);
-}
-
-.breadcrumbs a,
-.breadcrumbs button,
-.breadcrumbs [role='link'] {
-  all: unset;
-  color: inherit;
-  border-radius: var(--border-radius-default);
-  padding-block: var(--spacing-xxs);
-}
-
-.breadcrumbs a:focus-visible,
-.breadcrumbs button:focus-visible,
-.breadcrumbs [role='link']:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-ring);
-}
-
-.breadcrumbs [aria-disabled='true'],
-.breadcrumbs .is-disabled {
-  color: var(--color-disabled-fg);
-  pointer-events: none;
-}

package/dist/components/button/Button.cjs

@@ -1,150 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var lucideReact = require('lucide-react');
-var React = require('react');
-var useTooltipTrigger = require('../../components/overlay/tooltip/useTooltipTrigger');
-var styles = require('./Button.module.css');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-function cx(...parts) {
-  return parts.filter(Boolean).join(" ");
-}
-function mergeRefs(...refs) {
-  return (node) => {
-    for (const ref of refs) {
-      if (!ref) continue;
-      if (typeof ref === "function") ref(node);
-      else ref.current = node;
-    }
-  };
-}
-const Button = React__namespace.forwardRef(function Button2({
-  variant = "outlined",
-  shape = "default",
-  size = "md",
-  fullWidth,
-  icon,
-  children,
-  loading,
-  active,
-  spinIcon,
-  tooltip,
-  tooltipPlacement = "top",
-  isLink,
-  type = "button",
-  ...rest
-}, ref) {
-  var _a;
-  const { className: userClassName, ...buttonProps } = rest;
-  const computedClassName = cx(
-    styles__default.default.button,
-    styles__default.default[variant],
-    styles__default.default[size],
-    fullWidth ? styles__default.default.fullWidth : "",
-    active ? styles__default.default.active : "",
-    loading ? styles__default.default.loading : "",
-    shape !== "default" ? styles__default.default[shape] : "",
-    userClassName
-  );
-  const tooltipEnabled = Boolean(tooltip);
-  const childRef = isLink && React__namespace.isValidElement(children) ? (_a = children.ref) != null ? _a : null : null;
-  const mergedRef = React__namespace.useMemo(() => mergeRefs(childRef, ref), [childRef, ref]);
-  const { triggerProps, id: tooltipId } = useTooltipTrigger.useTooltipTrigger({
-    content: tooltipEnabled ? tooltip : null,
-    placement: tooltipPlacement,
-    offset: 8
-  });
-  const { ref: hoverRef, onPointerEnter: hoverEnter, onPointerLeave: hoverLeave } = triggerProps;
-  const describedBy = (() => {
-    const existing = typeof buttonProps["aria-describedby"] === "string" ? buttonProps["aria-describedby"] : "";
-    const ids = [existing, tooltipEnabled ? tooltipId : ""].filter(Boolean);
-    return ids.length ? ids.join(" ") : void 0;
-  })();
-  const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx(styles__default.default.icon, spinIcon ? "spin" : ""), children: icon }),
-    children,
-    loading && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "flex", opacity: 0.5 }, className: "spin", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LoaderCircle, {}) })
-  ] });
-  let buttonEl;
-  if (isLink && React__namespace.isValidElement(children)) {
-    const childClassName = typeof children.props.className === "string" ? children.props.className : "";
-    const { disabled, onClick, ...linkButtonProps } = buttonProps;
-    const handleClick = (e) => {
-      if (disabled) {
-        e.preventDefault();
-        return;
-      }
-      onClick == null ? void 0 : onClick(e);
-    };
-    buttonEl = React__namespace.cloneElement(children, {
-      ...linkButtonProps,
-      ref: mergedRef,
-      className: cx(childClassName, computedClassName, styles__default.default.buttonLink),
-      ...tooltipEnabled ? triggerProps : {},
-      "aria-describedby": describedBy,
-      "aria-disabled": disabled ? "true" : void 0,
-      onClick: handleClick,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx(styles__default.default.icon, spinIcon ? "spin" : ""), children: icon }),
-        children.props.children,
-        loading && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "flex", opacity: 0.5 }, className: "spin", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LoaderCircle, {}) })
-      ] })
-    });
-  } else {
-    const isDisabled = Boolean(buttonProps.disabled);
-    buttonEl = /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        className: computedClassName,
-        type,
-        ...buttonProps,
-        ...tooltipEnabled && !isDisabled ? triggerProps : {},
-        "aria-describedby": describedBy,
-        children: content
-      }
-    );
-    if (tooltipEnabled && isDisabled) {
-      buttonEl = /* @__PURE__ */ jsxRuntime.jsx(
-        "span",
-        {
-          ref: hoverRef,
-          onPointerEnter: hoverEnter,
-          onPointerLeave: hoverLeave,
-          style: {
-            display: fullWidth ? "flex" : "inline-flex",
-            cursor: "not-allowed"
-          },
-          children: buttonEl
-        }
-      );
-    }
-  }
-  return buttonEl;
-});
-Button.displayName = "Button";
-
-exports.Button = Button;

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

@@ -1,18 +0,0 @@
-import * as React from 'react';
-import type { Size } from '../../types/sizes.types';
-export type ButtonVariant = 'primary' | 'secondary' | 'outlined' | 'default' | 'inline' | 'success' | 'danger';
-export type ButtonSize = Exclude<Size, 'xl'>;
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    variant?: ButtonVariant;
-    shape?: 'default' | 'rounded' | 'round';
-    size?: ButtonSize;
-    fullWidth?: boolean;
-    icon?: React.ReactNode;
-    loading?: boolean;
-    active?: boolean;
-    spinIcon?: boolean;
-    tooltip?: React.ReactNode;
-    tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left';
-    isLink?: boolean;
-}
-export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;