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

package/cjs/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/cjs/Badge/Badge.js

@@ -13,7 +13,7 @@ var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satel
 var _isRenderedChild = _interopRequireDefault(require("../utils/isRenderedChild"));
 var _jsxRuntime = require("react/jsx-runtime");
 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) { (0, _defineProperty2["default"])(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; }
 var BASE_CLASSNAMES = (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  inline-flex items-center justify-center\n  rounded-full border\n  overflow-hidden\n"])));
@@ -27,8 +27,9 @@ var VARIANT_CLASSNAMES = {
   pink: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["bg-pink-100 border-pink-200 text-pink-700"])))
 };
 var SIZE_CLASSNAMES = {
-  "default": (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["h-6 display-body px-2 space-x-2"]))),
-  small: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["h-4 display-caption px-1 space-x-1"])))
+  small: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["h-4 display-caption px-1 space-x-1"]))),
+  medium: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["h-5 display-body px-2 space-x-2"]))),
+  large: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["h-6 display-body px-2 space-x-2"])))
 };
 
 /**
@@ -36,7 +37,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
  *
@@ -53,7 +54,7 @@ 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 = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var badgeClassName = (0, _clsx["default"])(BASE_CLASSNAMES, VARIANT_CLASSNAMES[variant], SIZE_CLASSNAMES[size], className);
@@ -64,7 +65,7 @@ var Badge = function Badge(_ref) {
         size: ".8em"
       })
     }), (0, _isRenderedChild["default"])(children) && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["truncate"]))),
+      className: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["truncate"]))),
       children: children
     }), (0, _isRenderedChild["default"])(value) && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       children: value

package/cjs/Banners/Alert/Alert.js

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

package/cjs/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/cjs/Button/Button.js

@@ -6,20 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.Button = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _clsx = _interopRequireDefault(require("clsx"));
-var _ProgressSpinner = _interopRequireDefault(require("../ProgressSpinner"));
-var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
-var _styles = require("./styles");
-var _types = require("./types");
+var _react = require("react");
+var _PolymorphicButton = require("./PolymorphicButton");
 var _jsxRuntime = require("react/jsx-runtime");
-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) { (0, _defineProperty2["default"])(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; }
-var BASE_CLASSNAMES = (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["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.
  *
@@ -34,47 +25,13 @@ var BASE_CLASSNAMES = (0, _satellitePrefixer["default"])(_templateObject || (_te
  * - 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
  */
-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 = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  if (loading) {
-    cleanedProps.disabled = true;
-  }
-  var buttonClassName = (0, _clsx["default"])(BASE_CLASSNAMES, _styles.BUTTON_SIZE_CLASSNAMES[size], _styles.BUTTON_VARIANT_CLASSNAMES[variant], cleanedProps.disabled && (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["btn-disabled"]))), className);
-  var loaderClassNames = (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["absolute ", ""])), (variant === "destructive" || variant === "primary") && "text-white");
-  var iconClassNames = (0, _clsx["default"])((0, _styles.getIconColorClassName)(props), loading && (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["invisible"]))));
-  var textClassNames = (0, _clsx["default"])(loading && (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["invisible"]))));
-  if ((0, _types.isButtonType)(props) && !Object.prototype.hasOwnProperty.call(cleanedProps, "type")) {
-    // @ts-ignore
-    cleanedProps.type = "button";
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Component, _objectSpread(_objectSpread({}, cleanedProps), {}, {
-    className: buttonClassName,
-    children: [loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressSpinner["default"], {
-      className: loaderClassNames,
-      size: _styles.BUTTON_LOADER_ICON_SIZES[size],
-      thickness: 1
-    }), StartIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(StartIcon, {
-      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["shrink-0 pr-2"]))), iconClassNames)
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["truncate text-center"]))), textClassNames),
-      children: children
-    }), EndIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(EndIcon, {
-      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["shrink-0 pl-2"]))), iconClassNames)
-    })]
+var Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PolymorphicButton.PolymorphicButton, _objectSpread(_objectSpread({}, props), {}, {
+    as: "button",
+    ref: ref
   }));
-};
+});
 exports.Button = Button;
+Button.displayName = "Button";
 var _default = Button;
 exports["default"] = _default;

package/cjs/Button/IconButton.d.ts

@@ -1,20 +1,5 @@
 /// <reference types="react" />
-import type { TooltipWrapperBaseProps } from "../Tooltip/types";
-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;
-    /** @default "top" */
-    tooltipPlacement?: TooltipWrapperBaseProps["placement"];
-    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/cjs/Button/IconButton.js

@@ -5,75 +5,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.IconButton = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _clsx = _interopRequireDefault(require("clsx"));
-var _ProgressSpinner = _interopRequireDefault(require("../ProgressSpinner"));
-var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
-var _Tooltip = require("../Tooltip");
-var _styles = require("./styles");
-var _types = require("./types");
+var _react = require("react");
+var _PolymorphicIconButton = require("./PolymorphicIconButton");
 var _jsxRuntime = require("react/jsx-runtime");
-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) { (0, _defineProperty2["default"])(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; }
-var BASE_CLASSNAMES = (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["btn inline-flex items-center justify-center"])));
-var SIZE_CLASSNAMES = {
-  small: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["h-6 w-6 text-mobile md:text-sm"]))),
-  medium: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["h-8 w-8 text-md"]))),
-  large: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["h-10 w-10 text-lg"])))
-};
-var VARIANT_CLASSNAMES = _objectSpread(_objectSpread({}, _styles.BUTTON_VARIANT_CLASSNAMES), {}, {
-  neutral: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["btn-neutral text-grey-600"])))
+var IconButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PolymorphicIconButton.PolymorphicIconButton, _objectSpread(_objectSpread({}, props), {}, {
+    as: "button",
+    ref: ref
+  }));
 });
-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$tooltipPlaceme = props.tooltipPlacement,
-    tooltipPlacement = _props$tooltipPlaceme === void 0 ? "top" : _props$tooltipPlaceme,
-    _props$loading = props.loading,
-    loading = _props$loading === void 0 ? false : _props$loading,
-    cleanedProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  if (loading) {
-    cleanedProps.disabled = true;
-  }
-  var iconButtonClassName = (0, _clsx["default"])(BASE_CLASSNAMES, SIZE_CLASSNAMES[size], VARIANT_CLASSNAMES[variant], cleanedProps.disabled && (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["btn-disabled"]))), className);
-  var loaderClassNames = (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["absolute ", ""])), (variant === "destructive" || variant === "primary") && "text-white");
-  if ((0, _types.isButtonType)(props) && !Object.prototype.hasOwnProperty.call(cleanedProps, "type")) {
-    // @ts-ignore
-    cleanedProps.type = "button";
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.TooltipWrapper, {
-    delay: 500,
-    show: showTooltip,
-    placement: tooltipPlacement,
-    content: title,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Tag, _objectSpread(_objectSpread({}, cleanedProps), {}, {
-      className: iconButtonClassName,
-      "aria-label": title,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressSpinner["default"], {
-          className: loaderClassNames,
-          size: _styles.BUTTON_LOADER_ICON_SIZES[size],
-          thickness: 1
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
-          className: (0, _clsx["default"])(loading && (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["invisible"])))),
-          size: "1em"
-        })]
-      })
-    }))
-  });
-};
 exports.IconButton = IconButton;
+IconButton.displayName = "IconButton";
 var _default = IconButton;
 exports["default"] = _default;

package/cjs/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/cjs/Button/PolymorphicButton.js

@@ -0,0 +1,76 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PolymorphicButton = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = _interopRequireWildcard(require("react"));
+var _ProgressSpinner = _interopRequireDefault(require("../ProgressSpinner"));
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _styles = require("./styles");
+var _types = require("./types");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["as", "className", "variant", "size", "startIcon", "endIcon", "loading", "children"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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) { (0, _defineProperty2["default"])(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; }
+var BASE_CLASSNAMES = (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["btn inline-flex justify-center items-center px-3 typo-display-body"])));
+var ICON_SIZE = 16;
+/**
+ * `PolymorphicButton` is intended for internal use
+ */
+var PolymorphicButton = /*#__PURE__*/(0, _react.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 = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  if (loading) {
+    // @ts-expect-error
+    cleanedProps.disabled = true;
+  }
+  var buttonClassName = (0, _clsx["default"])(BASE_CLASSNAMES, _styles.BUTTON_SIZE_CLASSNAMES[size], _styles.BUTTON_VARIANT_CLASSNAMES[variant], cleanedProps.disabled && (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["btn-disabled"]))), className);
+  var loaderClassNames = (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["absolute ", ""])), (variant === "destructive" || variant === "primary") && "text-white");
+  var iconClassNames = (0, _clsx["default"])((0, _styles.getIconColorClassName)(props), loading && (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["invisible"]))));
+  var textClassNames = (0, _clsx["default"])(loading && (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["invisible"]))));
+  if ((0, _types.isButtonType)(props) && !Object.prototype.hasOwnProperty.call(cleanedProps, "type")) {
+    // @ts-expect-error
+    cleanedProps.type = "button";
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Component, _objectSpread(_objectSpread({}, cleanedProps), {}, {
+    className: buttonClassName,
+    ref: ref,
+    children: [loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressSpinner["default"], {
+      className: loaderClassNames,
+      size: _styles.BUTTON_LOADER_ICON_SIZES[size],
+      thickness: 1
+    }), StartIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(StartIcon, {
+      size: ICON_SIZE,
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["shrink-0"]))), iconClassNames)
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["truncate text-center px-1"]))), textClassNames),
+      children: children
+    }), EndIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(EndIcon, {
+      size: ICON_SIZE,
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["shrink-0"]))), iconClassNames)
+    })]
+  }));
+});
+exports.PolymorphicButton = PolymorphicButton;
+PolymorphicButton.displayName = "PolymorphicButton";

package/cjs/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/cjs/Button/PolymorphicIconButton.js

@@ -0,0 +1,84 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PolymorphicIconButton = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = require("react");
+var _ProgressSpinner = _interopRequireDefault(require("../ProgressSpinner"));
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _Tooltip = require("../Tooltip");
+var _styles = require("./styles");
+var _types = require("./types");
+var _jsxRuntime = require("react/jsx-runtime");
+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) { (0, _defineProperty2["default"])(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; }
+var BASE_CLASSNAMES = (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["btn inline-flex items-center justify-center"])));
+var SIZE_CLASSNAMES = {
+  small: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["h-6 w-6 text-mobile md:text-sm"]))),
+  medium: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["h-8 w-8 text-md"]))),
+  large: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["h-10 w-10 text-lg"])))
+};
+var VARIANT_CLASSNAMES = _objectSpread(_objectSpread({}, _styles.BUTTON_VARIANT_CLASSNAMES), {}, {
+  neutral: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["btn-neutral text-grey-600"])))
+});
+/**
+ * `PolymorphicIconButton` is intended for internal use
+ */
+var PolymorphicIconButton = /*#__PURE__*/(0, _react.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 = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  if (loading) {
+    // @ts-expect-error
+    cleanedProps.disabled = true;
+  }
+  var iconButtonClassName = (0, _clsx["default"])(BASE_CLASSNAMES, SIZE_CLASSNAMES[size], VARIANT_CLASSNAMES[variant], cleanedProps.disabled && (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["btn-disabled"]))), className);
+  var loaderClassNames = (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["absolute ", ""])), (variant === "destructive" || variant === "primary") && "text-white");
+  if ((0, _types.isButtonType)(props) && !Object.prototype.hasOwnProperty.call(cleanedProps, "type")) {
+    // @ts-ignore
+    cleanedProps.type = "button";
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.TooltipWrapper, {
+    delay: 500,
+    show: showTooltip,
+    placement: tooltipPlacement,
+    content: title,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Tag, _objectSpread(_objectSpread({}, cleanedProps), {}, {
+      className: iconButtonClassName,
+      "aria-label": title,
+      ref: ref,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressSpinner["default"], {
+          className: loaderClassNames,
+          size: _styles.BUTTON_LOADER_ICON_SIZES[size],
+          thickness: 1
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
+          className: (0, _clsx["default"])(loading && (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["invisible"])))),
+          size: "1em"
+        })]
+      })
+    }))
+  });
+});
+exports.PolymorphicIconButton = PolymorphicIconButton;
+PolymorphicIconButton.displayName = "PolymorphicIconButton";

package/cjs/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/cjs/Button/index.js

@@ -4,7 +4,22 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {};
+var _exportNames = {
+  ButtonSize: true,
+  ButtonVariant: true
+};
+Object.defineProperty(exports, "ButtonSize", {
+  enumerable: true,
+  get: function get() {
+    return _types.ButtonSize;
+  }
+});
+Object.defineProperty(exports, "ButtonVariant", {
+  enumerable: true,
+  get: function get() {
+    return _types.ButtonVariant;
+  }
+});
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
@@ -48,16 +63,5 @@ Object.keys(_ButtonGroup).forEach(function (key) {
   });
 });
 var _types = require("./types");
-Object.keys(_types).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _types[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _types[key];
-    }
-  });
-});
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/cjs/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 {};

package/cjs/Button/types.js

@@ -6,4 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.isButtonType = isButtonType;
 function isButtonType(props) {
   return props && (!props.as || props.as === "button");
-}
+}
+
+// Polymorphic Helpers lifted from https://blog.logrocket.com/build-strongly-typed-polymorphic-components-react-typescript/

package/cjs/Dropdown/DropdownButton.d.ts

@@ -1,11 +1,11 @@
-import type { FunctionComponent, ReactNode } from "react";
+import { ReactNode } from "react";
 import { ButtonProps } from "../Button";
 import { RenderTargetParams } from "./Dropdown";
-export interface DropdownButtonProps extends Omit<ButtonProps<"button">, "title" | "endIcon"> {
+export interface DropdownButtonProps extends Omit<ButtonProps, "title" | "endIcon"> {
     /** Descriptive title for `Dropdown` */
     title: ReactNode;
     renderFooter?: (args: RenderTargetParams) => ReactNode;
     children: ReactNode;
 }
-export declare const DropdownButton: FunctionComponent<DropdownButtonProps>;
+export declare const DropdownButton: import("react").ForwardRefExoticComponent<DropdownButtonProps & import("react").RefAttributes<HTMLButtonElement & HTMLAnchorElement>>;
 export default DropdownButton;