@algolia/satellite 1.0.0-beta.156 → 1.0.0-beta.158

package/esm/Avatars/UserAvatar.d.ts

@@ -1,6 +1,9 @@
 /// <reference types="react" />
 import type { MinimalUser } from "./types";
-export declare type UserAvatarProps = {
+export declare type UserAvatarLocale = {
+    fallbackText?: string;
+};
+export interface UserAvatarProps {
     /** A minimal user object containing `name`, `email` and `avatar`. */
     user: MinimalUser;
     /**
@@ -10,7 +13,8 @@ export declare type UserAvatarProps = {
     size?: number;
     /** @ignore */
     className?: string;
-};
+    locale?: UserAvatarLocale;
+}
 /** The `UserAvatar` is used as a visual representation of a user. */
-export declare const UserAvatar: ({ className, user, size }: UserAvatarProps) => JSX.Element;
+export declare const UserAvatar: ({ className, user, size, locale: propsLocale }: UserAvatarProps) => JSX.Element;
 export default UserAvatar;

package/esm/Avatars/UserAvatar.js

@@ -1,48 +1,48 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _templateObject, _templateObject2, _templateObject3;
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { AvatarFallback, Image as AvatarImage, Root as AvatarRoot } from "@radix-ui/react-avatar";
 import cx from "clsx";
-import { useEffect, useState } from "react";
+import { useLocale } from "../Satellite";
 import stl from "../styles/helpers/satellitePrefixer";
 import { getUserBackgroundClassName, getUserInitials } from "./utils";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+var DEFAULT_LOCALE = {
+  fallbackText: "User's avatar"
+};
 /** The `UserAvatar` is used as a visual representation of a user. */
 export var UserAvatar = function UserAvatar(_ref) {
   var _user$email;
   var className = _ref.className,
     user = _ref.user,
     _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 32 : _ref$size;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    imageLoaded = _useState2[0],
-    setImageLoaded = _useState2[1];
-  var initials = getUserInitials(user);
-  useEffect(function () {
-    return setImageLoaded(false);
-  }, [user.avatar]);
-  return /*#__PURE__*/_jsxs("div", {
-    role: "img",
-    "aria-label": imageLoaded ? (user === null || user === void 0 ? void 0 : user.name) || "User's avatar" : "User's avatar",
-    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["relative overflow-hidden flex justify-center items-center rounded-full uppercase transition-colors"]))), imageLoaded ? stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["bg-white"]))) : getUserBackgroundClassName((_user$email = user.email) !== null && _user$email !== void 0 ? _user$email : "no-email"), className),
+    size = _ref$size === void 0 ? 32 : _ref$size,
+    propsLocale = _ref.locale;
+  var contextLocale = useLocale("userAvatar");
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_LOCALE), contextLocale), propsLocale);
+  var fallbackName = user.name || user.email || locale.fallbackText;
+  return /*#__PURE__*/_jsxs(AvatarRoot, {
+    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["overflow-hidden flex justify-center items-center rounded-full"]))), getUserBackgroundClassName((_user$email = user.email) !== null && _user$email !== void 0 ? _user$email : "no-email"), className),
     style: {
       width: size,
       height: size
     },
-    children: [!imageLoaded && /*#__PURE__*/_jsx("span", {
-      children: initials
-    }), /*#__PURE__*/_jsx("img", {
-      className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          w-full absolute top-0 left-0\n          transition-opacity ", "\n        "])), imageLoaded ? "opacity-100" : "opacity-0"),
+    children: [/*#__PURE__*/_jsx(AvatarImage, {
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["h-full w-full object-cover"]))),
       src: user.avatar,
-      role: "presentation",
-      alt: "",
-      onLoad: function onLoad() {
-        return setImageLoaded(true);
-      },
-      onError: function onError() {
-        return setImageLoaded(false);
-      }
+      alt: fallbackName
+    }), /*#__PURE__*/_jsxs(AvatarFallback, {
+      className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["flex h-full w-full items-center justify-center uppercase"]))),
+      children: [/*#__PURE__*/_jsx("span", {
+        "aria-hidden": true,
+        children: getUserInitials(user)
+      }), /*#__PURE__*/_jsx("span", {
+        className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["sr-only"]))),
+        children: fallbackName
+      })]
     })]
   });
 };

package/esm/Badge/Badge.d.ts

@@ -1,6 +1,6 @@
 import type { FunctionComponent, HTMLAttributes, ReactNode } from "react";
 import type { AtLeastOne, ColorVariant, IconComponentType } from "../types";
-export declare type BadgeSizes = "default" | "small";
+export declare type BadgeSizes = "small" | "medium" | "large";
 export declare type BadgeVariants = ColorVariant | "pink";
 interface BaseBadgeProps extends HTMLAttributes<HTMLDivElement> {
     /** @default "grey" */
@@ -21,7 +21,7 @@ export declare type BadgeProps = BaseBadgeProps & AtLeastOne<BadgeContentProps>;
  *
  * - Stay consistent with badge content (text), don't vary your vocabulary
  * - Bages usually come after a textual information or explanation
- * - Don't use badges where traditional error messages  (such as form validation) can be used instead
+ * - Don't use badges where traditional error messages (such as form validation) can be used instead
  * - Don't use badges with combination of buttons
  * - Badges are not interactive
  *

package/esm/Badge/Badge.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _excluded = ["children", "value", "icon", "variant", "size", "className"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import cx from "clsx";
@@ -21,8 +21,9 @@ var VARIANT_CLASSNAMES = {
   pink: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["bg-pink-100 border-pink-200 text-pink-700"])))
 };
 var SIZE_CLASSNAMES = {
-  "default": stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["h-6 display-body px-2 space-x-2"]))),
-  small: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["h-4 display-caption px-1 space-x-1"])))
+  small: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["h-4 display-caption px-1 space-x-1"]))),
+  medium: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["h-5 display-body px-2 space-x-2"]))),
+  large: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["h-6 display-body px-2 space-x-2"])))
 };
 
 /**
@@ -30,7 +31,7 @@ var SIZE_CLASSNAMES = {
  *
  * - Stay consistent with badge content (text), don't vary your vocabulary
  * - Bages usually come after a textual information or explanation
- * - Don't use badges where traditional error messages  (such as form validation) can be used instead
+ * - Don't use badges where traditional error messages (such as form validation) can be used instead
  * - Don't use badges with combination of buttons
  * - Badges are not interactive
  *
@@ -47,7 +48,7 @@ export var Badge = function Badge(_ref) {
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? "grey" : _ref$variant,
     _ref$size = _ref.size,
-    size = _ref$size === void 0 ? "default" : _ref$size,
+    size = _ref$size === void 0 ? "large" : _ref$size,
     className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded);
   var badgeClassName = cx(BASE_CLASSNAMES, VARIANT_CLASSNAMES[variant], SIZE_CLASSNAMES[size], className);
@@ -58,7 +59,7 @@ export var Badge = function Badge(_ref) {
         size: ".8em"
       })
     }), isRenderedChild(children) && /*#__PURE__*/_jsx("span", {
-      className: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["truncate"]))),
+      className: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["truncate"]))),
       children: children
     }), isRenderedChild(value) && /*#__PURE__*/_jsx("span", {
       children: value

package/esm/Banners/Alert/Alert.js

@@ -31,7 +31,7 @@ var ICON_VARIANTS = {
 var ICON_CLASSNAME_VARIANTS = {
   grey: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["text-grey-600"]))),
   accent: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["text-accent-600"]))),
-  green: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["text-green-700"]))),
+  green: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["text-green-600"]))),
   orange: stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["text-orange-600"]))),
   red: stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["text-red-600"])))
 };

package/esm/Button/Button.d.ts

@@ -1,8 +1,6 @@
 /// <reference types="react" />
-import { AcceptableButtonType, ButtonBaseProps, ExtractProps } from "./types";
-export declare type ButtonProps<T extends AcceptableButtonType = "button"> = ButtonBaseProps & ExtractProps<T> & {
-    as?: T;
-};
+import { type PolymorphicButtonProps } from "./PolymorphicButton";
+export declare type ButtonProps = Omit<PolymorphicButtonProps<"button">, "as" | "ref">;
 /**
  * Buttons are used to trigger user actions (like "Add", "Close" or "Save") or navigate users elsewhere through the links. Buttons can contain a combination of a clear label and an icon while links are always text.
  *
@@ -17,5 +15,5 @@ export declare type ButtonProps<T extends AcceptableButtonType = "button"> = But
  * - Use icon-only button for an action that is less critical and doesn't have to drag too much of user attention
  * - Buttons can take the full width to fill the parent container
  */
-export declare const Button: <T extends AcceptableButtonType = "button">(props: ButtonProps<T>) => JSX.Element;
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 export default Button;

package/esm/Button/Button.js

@@ -1,19 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _excluded = ["as", "className", "variant", "size", "startIcon", "endIcon", "loading", "children"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-import cx from "clsx";
-import ProgressSpinner from "../ProgressSpinner";
-import stl from "../styles/helpers/satellitePrefixer";
-import { BUTTON_LOADER_ICON_SIZES, BUTTON_SIZE_CLASSNAMES, BUTTON_VARIANT_CLASSNAMES, getIconColorClassName } from "./styles";
-import { isButtonType } from "./types";
+import { forwardRef } from "react";
+import { PolymorphicButton } from "./PolymorphicButton";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var BASE_CLASSNAMES = stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["btn inline-flex justify-center items-center px-4 typo-display-body"])));
-
 /**
  * Buttons are used to trigger user actions (like "Add", "Close" or "Save") or navigate users elsewhere through the links. Buttons can contain a combination of a clear label and an icon while links are always text.
  *
@@ -28,45 +18,11 @@ var BASE_CLASSNAMES = stl(_templateObject || (_templateObject = _taggedTemplateL
  * - Use icon-only button for an action that is less critical and doesn't have to drag too much of user attention
  * - Buttons can take the full width to fill the parent container
  */
-export var Button = function Button(props) {
-  var _props$as = props.as,
-    Component = _props$as === void 0 ? "button" : _props$as,
-    className = props.className,
-    _props$variant = props.variant,
-    variant = _props$variant === void 0 ? "neutral" : _props$variant,
-    _props$size = props.size,
-    size = _props$size === void 0 ? "medium" : _props$size,
-    StartIcon = props.startIcon,
-    EndIcon = props.endIcon,
-    _props$loading = props.loading,
-    loading = _props$loading === void 0 ? false : _props$loading,
-    children = props.children,
-    cleanedProps = _objectWithoutProperties(props, _excluded);
-  if (loading) {
-    cleanedProps.disabled = true;
-  }
-  var buttonClassName = cx(BASE_CLASSNAMES, BUTTON_SIZE_CLASSNAMES[size], BUTTON_VARIANT_CLASSNAMES[variant], cleanedProps.disabled && stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["btn-disabled"]))), className);
-  var loaderClassNames = stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["absolute ", ""])), (variant === "destructive" || variant === "primary") && "text-white");
-  var iconClassNames = cx(getIconColorClassName(props), loading && stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["invisible"]))));
-  var textClassNames = cx(loading && stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["invisible"]))));
-  if (isButtonType(props) && !Object.prototype.hasOwnProperty.call(cleanedProps, "type")) {
-    // @ts-ignore
-    cleanedProps.type = "button";
-  }
-  return /*#__PURE__*/_jsxs(Component, _objectSpread(_objectSpread({}, cleanedProps), {}, {
-    className: buttonClassName,
-    children: [loading && /*#__PURE__*/_jsx(ProgressSpinner, {
-      className: loaderClassNames,
-      size: BUTTON_LOADER_ICON_SIZES[size],
-      thickness: 1
-    }), StartIcon && /*#__PURE__*/_jsx(StartIcon, {
-      className: cx(stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["shrink-0 pr-2"]))), iconClassNames)
-    }), /*#__PURE__*/_jsx("span", {
-      className: cx(stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["truncate text-center"]))), textClassNames),
-      children: children
-    }), EndIcon && /*#__PURE__*/_jsx(EndIcon, {
-      className: cx(stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["shrink-0 pl-2"]))), iconClassNames)
-    })]
+export var Button = /*#__PURE__*/forwardRef(function (props, ref) {
+  return /*#__PURE__*/_jsx(PolymorphicButton, _objectSpread(_objectSpread({}, props), {}, {
+    as: "button",
+    ref: ref
   }));
-};
+});
+Button.displayName = "Button";
 export default Button;

package/esm/Button/Button.tailwind.js

@@ -60,7 +60,6 @@ var buttonPlugin = plugin(function (_ref) {
       },
       "&:active, &.btn-active": {
         borderColor: theme("colors.grey.200"),
-        backgroundImage: theme("color.grey.100"),
         boxShadow: "\n          inset 0 1px 4px 0 ".concat(rgba(theme("colors.grey.500"), 0.4), ",\n          inset 0 1px 1px 0 ").concat(rgba(theme("colors.grey.500"), 0.4), ",\n          0 1px 0 0 ").concat(theme("colors.shadow.5"), "\n        ")
       },
       "&:disabled, &.btn-disabled": {
@@ -115,7 +114,6 @@ var buttonPlugin = plugin(function (_ref) {
         boxShadow: "\n          inset 0 1px 0 0 ".concat(rgba(theme("colors.white"), 0.06), ",\n          0 0 0 1px ").concat(theme("colors.red.800"), ",\n          0 2px 0 1px ").concat(theme("colors.shadow.10"), "\n        ")
       },
       "&:active, &.btn-active": {
-        backgroundImage: theme("colors.red.700"),
         borderColor: theme("colors.red.800"),
         boxShadow: "\n          inset 0 1px 4px 0 ".concat(rgba(theme("colors.red.900"), 0.4), ",\n          inset 0 1px 1px 0 ").concat(rgba(theme("colors.red.900"), 0.6), ",\n          0 1px 0 0 ").concat(theme("colors.shadow.5"), "\n        ")
       },

package/esm/Button/IconButton.d.ts

@@ -1,17 +1,5 @@
 /// <reference types="react" />
-import type { IconComponentType } from "../types";
-import { AcceptableButtonType, ButtonSize, ButtonVariant, ExtractProps } from "./types";
-export interface IconButtonBaseProps {
-    variant?: ButtonVariant;
-    size?: ButtonSize;
-    disabled?: boolean;
-    icon: IconComponentType;
-    title: string;
-    showTooltip?: boolean;
-    loading?: boolean;
-}
-export declare type IconButtonProps<T extends AcceptableButtonType> = IconButtonBaseProps & ExtractProps<T> & {
-    as?: T;
-};
-export declare const IconButton: <T extends AcceptableButtonType = "button">(props: IconButtonProps<T>) => JSX.Element;
+import { type PolymorphicIconButtonProps } from "./PolymorphicIconButton";
+export declare type IconButtonProps = Omit<PolymorphicIconButtonProps<"button">, "as" | "ref">;
+export declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 export default IconButton;

package/esm/Button/IconButton.js

@@ -1,70 +1,14 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _excluded = ["as", "className", "variant", "size", "icon", "title", "showTooltip", "loading"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-import cx from "clsx";
-import ProgressSpinner from "../ProgressSpinner";
-import stl from "../styles/helpers/satellitePrefixer";
-import { TooltipWrapper } from "../Tooltip";
-import { BUTTON_LOADER_ICON_SIZES, BUTTON_VARIANT_CLASSNAMES } from "./styles";
-import { isButtonType } from "./types";
+import { forwardRef } from "react";
+import { PolymorphicIconButton } from "./PolymorphicIconButton";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var BASE_CLASSNAMES = stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["btn inline-flex items-center justify-center"])));
-var SIZE_CLASSNAMES = {
-  small: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["h-6 w-6 text-mobile md:text-sm"]))),
-  medium: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["h-8 w-8 text-md"]))),
-  large: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["h-10 w-10 text-lg"])))
-};
-var VARIANT_CLASSNAMES = _objectSpread(_objectSpread({}, BUTTON_VARIANT_CLASSNAMES), {}, {
-  neutral: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["btn-neutral text-grey-600"])))
+export var IconButton = /*#__PURE__*/forwardRef(function (props, ref) {
+  return /*#__PURE__*/_jsx(PolymorphicIconButton, _objectSpread(_objectSpread({}, props), {}, {
+    as: "button",
+    ref: ref
+  }));
 });
-export var IconButton = function IconButton(props) {
-  var _props$as = props.as,
-    Tag = _props$as === void 0 ? "button" : _props$as,
-    className = props.className,
-    _props$variant = props.variant,
-    variant = _props$variant === void 0 ? "neutral" : _props$variant,
-    _props$size = props.size,
-    size = _props$size === void 0 ? "medium" : _props$size,
-    Icon = props.icon,
-    title = props.title,
-    showTooltip = props.showTooltip,
-    _props$loading = props.loading,
-    loading = _props$loading === void 0 ? false : _props$loading,
-    cleanedProps = _objectWithoutProperties(props, _excluded);
-  if (loading) {
-    cleanedProps.disabled = true;
-  }
-  var iconButtonClassName = cx(BASE_CLASSNAMES, SIZE_CLASSNAMES[size], VARIANT_CLASSNAMES[variant], cleanedProps.disabled && stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["btn-disabled"]))), className);
-  var loaderClassNames = stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["absolute ", ""])), (variant === "destructive" || variant === "primary") && "text-white");
-  if (isButtonType(props) && !Object.prototype.hasOwnProperty.call(cleanedProps, "type")) {
-    // @ts-ignore
-    cleanedProps.type = "button";
-  }
-  return /*#__PURE__*/_jsx(TooltipWrapper, {
-    delay: 500,
-    show: showTooltip,
-    placement: "top",
-    content: title,
-    children: /*#__PURE__*/_jsx(Tag, _objectSpread(_objectSpread({}, cleanedProps), {}, {
-      className: iconButtonClassName,
-      "aria-label": title,
-      children: /*#__PURE__*/_jsxs(_Fragment, {
-        children: [loading && /*#__PURE__*/_jsx(ProgressSpinner, {
-          className: loaderClassNames,
-          size: BUTTON_LOADER_ICON_SIZES[size],
-          thickness: 1
-        }), /*#__PURE__*/_jsx(Icon, {
-          className: cx(loading && stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["invisible"])))),
-          size: "1em"
-        })]
-      })
-    }))
-  });
-};
+IconButton.displayName = "IconButton";
 export default IconButton;

package/esm/Button/PolymorphicButton.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { ButtonBaseProps, PolymorphicComponentPropWithRef } from "./types";
+export declare type PolymorphicButtonProps<C extends React.ElementType> = PolymorphicComponentPropWithRef<C, ButtonBaseProps>;
+declare type PolymorphicButtonComponent = (<C extends React.ElementType = "button">(props: PolymorphicButtonProps<C>) => React.ReactElement | null) & {
+    displayName?: string;
+};
+/**
+ * `PolymorphicButton` is intended for internal use
+ */
+export declare const PolymorphicButton: PolymorphicButtonComponent;
+export {};

package/esm/Button/PolymorphicButton.js

@@ -0,0 +1,66 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _excluded = ["as", "className", "variant", "size", "startIcon", "endIcon", "loading", "children"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import cx from "clsx";
+import React, { forwardRef } from "react";
+import ProgressSpinner from "../ProgressSpinner";
+import stl from "../styles/helpers/satellitePrefixer";
+import { BUTTON_LOADER_ICON_SIZES, BUTTON_SIZE_CLASSNAMES, BUTTON_VARIANT_CLASSNAMES, getIconColorClassName } from "./styles";
+import { isButtonType } from "./types";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var BASE_CLASSNAMES = stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["btn inline-flex justify-center items-center px-3 typo-display-body"])));
+var ICON_SIZE = 16;
+/**
+ * `PolymorphicButton` is intended for internal use
+ */
+export var PolymorphicButton = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _props$as = props.as,
+    Component = _props$as === void 0 ? "button" : _props$as,
+    className = props.className,
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? "neutral" : _props$variant,
+    _props$size = props.size,
+    size = _props$size === void 0 ? "medium" : _props$size,
+    StartIcon = props.startIcon,
+    EndIcon = props.endIcon,
+    _props$loading = props.loading,
+    loading = _props$loading === void 0 ? false : _props$loading,
+    children = props.children,
+    cleanedProps = _objectWithoutProperties(props, _excluded);
+  if (loading) {
+    // @ts-expect-error
+    cleanedProps.disabled = true;
+  }
+  var buttonClassName = cx(BASE_CLASSNAMES, BUTTON_SIZE_CLASSNAMES[size], BUTTON_VARIANT_CLASSNAMES[variant], cleanedProps.disabled && stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["btn-disabled"]))), className);
+  var loaderClassNames = stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["absolute ", ""])), (variant === "destructive" || variant === "primary") && "text-white");
+  var iconClassNames = cx(getIconColorClassName(props), loading && stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["invisible"]))));
+  var textClassNames = cx(loading && stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["invisible"]))));
+  if (isButtonType(props) && !Object.prototype.hasOwnProperty.call(cleanedProps, "type")) {
+    // @ts-expect-error
+    cleanedProps.type = "button";
+  }
+  return /*#__PURE__*/_jsxs(Component, _objectSpread(_objectSpread({}, cleanedProps), {}, {
+    className: buttonClassName,
+    ref: ref,
+    children: [loading && /*#__PURE__*/_jsx(ProgressSpinner, {
+      className: loaderClassNames,
+      size: BUTTON_LOADER_ICON_SIZES[size],
+      thickness: 1
+    }), StartIcon && /*#__PURE__*/_jsx(StartIcon, {
+      size: ICON_SIZE,
+      className: cx(stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["shrink-0"]))), iconClassNames)
+    }), /*#__PURE__*/_jsx("span", {
+      className: cx(stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["truncate text-center px-1"]))), textClassNames),
+      children: children
+    }), EndIcon && /*#__PURE__*/_jsx(EndIcon, {
+      size: ICON_SIZE,
+      className: cx(stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["shrink-0"]))), iconClassNames)
+    })]
+  }));
+});
+PolymorphicButton.displayName = "PolymorphicButton";

package/esm/Button/PolymorphicIconButton.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import type { TooltipWrapperBaseProps } from "../Tooltip/types";
+import type { IconComponentType } from "../types";
+import { ButtonSize, ButtonVariant, PolymorphicComponentPropWithRef } from "./types";
+export interface IconButtonBaseProps {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    disabled?: boolean;
+    icon: IconComponentType;
+    title: string;
+    showTooltip?: boolean;
+    /** @default "top" */
+    tooltipPlacement?: TooltipWrapperBaseProps["placement"];
+    loading?: boolean;
+}
+export declare type PolymorphicIconButtonProps<C extends React.ElementType> = PolymorphicComponentPropWithRef<C, IconButtonBaseProps>;
+declare type PolymorphicIconButtonComponent = (<C extends React.ElementType = "button">(props: PolymorphicIconButtonProps<C>) => React.ReactElement | null) & {
+    displayName?: string;
+};
+/**
+ * `PolymorphicIconButton` is intended for internal use
+ */
+export declare const PolymorphicIconButton: PolymorphicIconButtonComponent;
+export {};

package/esm/Button/PolymorphicIconButton.js

@@ -0,0 +1,78 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _excluded = ["as", "className", "variant", "size", "icon", "title", "showTooltip", "tooltipPlacement", "loading"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import cx from "clsx";
+import { forwardRef } from "react";
+import ProgressSpinner from "../ProgressSpinner";
+import stl from "../styles/helpers/satellitePrefixer";
+import { TooltipWrapper } from "../Tooltip";
+import { BUTTON_LOADER_ICON_SIZES, BUTTON_VARIANT_CLASSNAMES } from "./styles";
+import { isButtonType } from "./types";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var BASE_CLASSNAMES = stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["btn inline-flex items-center justify-center"])));
+var SIZE_CLASSNAMES = {
+  small: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["h-6 w-6 text-mobile md:text-sm"]))),
+  medium: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["h-8 w-8 text-md"]))),
+  large: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["h-10 w-10 text-lg"])))
+};
+var VARIANT_CLASSNAMES = _objectSpread(_objectSpread({}, BUTTON_VARIANT_CLASSNAMES), {}, {
+  neutral: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["btn-neutral text-grey-600"])))
+});
+/**
+ * `PolymorphicIconButton` is intended for internal use
+ */
+export var PolymorphicIconButton = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _props$as = props.as,
+    Tag = _props$as === void 0 ? "button" : _props$as,
+    className = props.className,
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? "neutral" : _props$variant,
+    _props$size = props.size,
+    size = _props$size === void 0 ? "medium" : _props$size,
+    Icon = props.icon,
+    title = props.title,
+    showTooltip = props.showTooltip,
+    _props$tooltipPlaceme = props.tooltipPlacement,
+    tooltipPlacement = _props$tooltipPlaceme === void 0 ? "top" : _props$tooltipPlaceme,
+    _props$loading = props.loading,
+    loading = _props$loading === void 0 ? false : _props$loading,
+    cleanedProps = _objectWithoutProperties(props, _excluded);
+  if (loading) {
+    // @ts-expect-error
+    cleanedProps.disabled = true;
+  }
+  var iconButtonClassName = cx(BASE_CLASSNAMES, SIZE_CLASSNAMES[size], VARIANT_CLASSNAMES[variant], cleanedProps.disabled && stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["btn-disabled"]))), className);
+  var loaderClassNames = stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["absolute ", ""])), (variant === "destructive" || variant === "primary") && "text-white");
+  if (isButtonType(props) && !Object.prototype.hasOwnProperty.call(cleanedProps, "type")) {
+    // @ts-ignore
+    cleanedProps.type = "button";
+  }
+  return /*#__PURE__*/_jsx(TooltipWrapper, {
+    delay: 500,
+    show: showTooltip,
+    placement: tooltipPlacement,
+    content: title,
+    children: /*#__PURE__*/_jsx(Tag, _objectSpread(_objectSpread({}, cleanedProps), {}, {
+      className: iconButtonClassName,
+      "aria-label": title,
+      ref: ref,
+      children: /*#__PURE__*/_jsxs(_Fragment, {
+        children: [loading && /*#__PURE__*/_jsx(ProgressSpinner, {
+          className: loaderClassNames,
+          size: BUTTON_LOADER_ICON_SIZES[size],
+          thickness: 1
+        }), /*#__PURE__*/_jsx(Icon, {
+          className: cx(loading && stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["invisible"])))),
+          size: "1em"
+        })]
+      })
+    }))
+  });
+});
+PolymorphicIconButton.displayName = "PolymorphicIconButton";

package/esm/Button/index.d.ts

@@ -1,5 +1,5 @@
 export * from "./Button";
 export * from "./IconButton";
 export * from "./ButtonGroup";
-export * from "./types";
+export { ButtonSize, ButtonVariant } from "./types";
 export { default } from "./Button";

package/esm/Button/index.js

@@ -1,5 +1,5 @@
 export * from "./Button";
 export * from "./IconButton";
 export * from "./ButtonGroup";
-export * from "./types";
+export { ButtonSize, ButtonVariant } from "./types";
 export { default } from "./Button";

package/esm/Button/types.d.ts

@@ -1,12 +1,7 @@
-import type { ComponentType, ReactNode } from "react";
+import type { ReactNode } from "react";
 import type { IconComponentType } from "../types";
 export declare type ButtonVariant = "subtle" | "neutral" | "primary" | "destructive";
 export declare type ButtonSize = "small" | "medium" | "large";
-export declare type MinimalButtonProps = {
-    className?: string;
-};
-export declare type AcceptableButtonType = "a" | "button" | ComponentType<MinimalButtonProps>;
-export declare type ExtractProps<T> = T extends "a" | "button" ? JSX.IntrinsicElements[T] : T extends ComponentType<infer P> ? P : never;
 export interface ButtonBaseProps {
     /** @default "neutral" */
     variant?: ButtonVariant;
@@ -25,3 +20,13 @@ export interface ButtonBaseProps {
     className?: string;
 }
 export declare function isButtonType(props: any): props is JSX.IntrinsicElements["button"];
+declare type AsProp<C extends React.ElementType> = {
+    as?: C;
+};
+declare type PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);
+declare type PolymorphicComponentProp<C extends React.ElementType, Props = {}> = React.PropsWithChildren<Props & AsProp<C>> & Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;
+export declare type PolymorphicComponentPropWithRef<C extends React.ElementType, Props = {}> = PolymorphicComponentProp<C, Props> & {
+    ref?: PolymorphicRef<C>;
+};
+export declare type PolymorphicRef<C extends React.ElementType> = React.ComponentPropsWithRef<C>["ref"];
+export {};