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

package/cjs/Tag/Tag.d.ts

@@ -2,20 +2,40 @@ import type { DetailedHTMLProps, HTMLAttributes, MouseEventHandler } from "react
 import type { ColorVariant } from "../types";
 export declare type TagVariants = ColorVariant | "pink";
 export declare type TagLocale = {
-    removeButton?: string | ((title: string) => string);
+    addButton?: string | ((title: string) => string);
+    deleteButton?: string | ((title: string) => string);
 };
 export interface TagProps extends DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> {
     /**
      * The "pink" variant should only be used for **Algolia admin** related things.
      * @default "grey"
-     * */
+     */
     variant?: TagVariants;
+    /**
+     * Handler function called when the "add" button is clicked.
+     */
+    onAdd?: MouseEventHandler<HTMLElement>;
+    /**
+     * The tooltip text to display when hovering over the "add" button.
+     */
+    addTooltip?: string;
+    /**
+     * Handler function called when the "delete" button is clicked.
+     */
     onDelete?: MouseEventHandler<HTMLElement>;
+    /**
+     * The tooltip text to display when hovering over the "delete" button.
+     */
+    deleteTooltip?: string;
+    /**
+     * Customize the text describing the "add" and "delete" buttons.
+     * If not provided, default values will be used.
+     */
     locale?: TagLocale;
 }
 /**
- * Use tags to visually label UI objects for quick recognition and navigation. (!) **Tags can be added or removed from an object by users**.
- * Keep in mind that tags increase the amount of visual noise, particularly when combined with other visual labelling elements, so use them in moderation. Tags can be added or removed from an object by users.
+ * Use tags to visually label UI objects for quick recognition and navigation. (!) **Tags can be added or deleted from an object by users**.
+ * Keep in mind that tags increase the amount of visual noise, particularly when combined with other visual labelling elements, so use them in moderation. Tags can be added or deleted from an object by users.
  *
  * - For status information, use badges instead
  * - For tallies or counts, use badges
@@ -30,9 +50,9 @@ export interface TagProps extends DetailedHTMLProps<HTMLAttributes<HTMLSpanEleme
  * - **Error**: `variant="red"`
  *
  * ## Usability best practices
- * - Present tags close to or within the input control to allow users to add and remove tags
+ * - Present tags close to or within the input control to allow users to add and delete tags
  * - When writing tags, avoid line-wrapping
  * - Define the max width of text within a tag. Once the text reaches the max, truncate with ellipses
  */
-export declare const Tag: import("react").ForwardRefExoticComponent<Pick<TagProps, "key" | "id" | "color" | "translate" | "hidden" | "dir" | "slot" | "style" | "title" | "accessKey" | "draggable" | "lang" | "className" | "prefix" | "children" | "contentEditable" | "inputMode" | "tabIndex" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "variant" | "locale" | "onDelete"> & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const Tag: import("react").ForwardRefExoticComponent<Pick<TagProps, "key" | "id" | "color" | "translate" | "hidden" | "dir" | "slot" | "style" | "title" | "accessKey" | "draggable" | "lang" | "className" | "prefix" | "children" | "contentEditable" | "inputMode" | "tabIndex" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "variant" | "locale" | "onAdd" | "addTooltip" | "onDelete" | "deleteTooltip"> & import("react").RefAttributes<HTMLSpanElement>>;
 export default Tag;

package/cjs/Tag/Tag.js

@@ -13,14 +13,18 @@ var _react = require("react");
 var _reactFeather = require("react-feather");
 var _Satellite = require("../Satellite");
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _Tooltip = require("../Tooltip");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["children", "variant", "className", "onDelete", "locale"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
+var _excluded = ["children", "variant", "className", "onAdd", "addTooltip", "onDelete", "deleteTooltip", "locale"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
 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 DEFAULT_TAG_LOCALE = {
-  removeButton: function removeButton(title) {
-    return "Remove ".concat(title);
+  addButton: function addButton(title) {
+    return "Add ".concat(title);
+  },
+  deleteButton: function deleteButton(title) {
+    return "Delete ".concat(title);
   }
 };
 var VARIANT_CLASSNAMES = {
@@ -32,7 +36,7 @@ var VARIANT_CLASSNAMES = {
   red: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["bg-red-100 border-red-200 text-red-700"]))),
   pink: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["bg-pink-100 border-pink-200 text-pink-700"])))
 };
-var BUTTON_CLOSE_VARIANT_CLASSNAMES = {
+var BUTTON_VARIANT_CLASSNAMES = {
   accent: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["border-accent-200 hover:bg-accent-200 focus:bg-accent-200"]))),
   grey: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["border-grey-200 hover:bg-grey-200 focus:bg-grey-200"]))),
   blue: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["border-blue-200 hover:bg-blue-200 focus:bg-blue-200"]))),
@@ -43,8 +47,8 @@ var BUTTON_CLOSE_VARIANT_CLASSNAMES = {
 };
 
 /**
- * Use tags to visually label UI objects for quick recognition and navigation. (!) **Tags can be added or removed from an object by users**.
- * Keep in mind that tags increase the amount of visual noise, particularly when combined with other visual labelling elements, so use them in moderation. Tags can be added or removed from an object by users.
+ * Use tags to visually label UI objects for quick recognition and navigation. (!) **Tags can be added or deleted from an object by users**.
+ * Keep in mind that tags increase the amount of visual noise, particularly when combined with other visual labelling elements, so use them in moderation. Tags can be added or deleted from an object by users.
  *
  * - For status information, use badges instead
  * - For tallies or counts, use badges
@@ -59,7 +63,7 @@ var BUTTON_CLOSE_VARIANT_CLASSNAMES = {
  * - **Error**: `variant="red"`
  *
  * ## Usability best practices
- * - Present tags close to or within the input control to allow users to add and remove tags
+ * - Present tags close to or within the input control to allow users to add and delete tags
  * - When writing tags, avoid line-wrapping
  * - Define the max width of text within a tag. Once the text reaches the max, truncate with ellipses
  */
@@ -68,31 +72,59 @@ var Tag = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? "grey" : _ref$variant,
     className = _ref.className,
+    onAdd = _ref.onAdd,
+    addTooltip = _ref.addTooltip,
     onDelete = _ref.onDelete,
+    deleteTooltip = _ref.deleteTooltip,
     propsLocale = _ref.locale,
     props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var title = typeof children === "string" ? children : "tag";
   var contextLocale = (0, _Satellite.useLocale)("tag");
   var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_TAG_LOCALE), contextLocale), propsLocale);
   var tagClassName = (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["tag"]))), VARIANT_CLASSNAMES[variant], className);
-  var editable = Boolean(onDelete);
+  var addable = Boolean(onAdd);
+  var deletable = Boolean(onDelete);
+  var handleAdd = function handleAdd(evt) {
+    evt.stopPropagation();
+    onAdd === null || onAdd === void 0 ? void 0 : onAdd(evt);
+  };
   var handleDelete = function handleDelete(evt) {
     evt.stopPropagation();
     onDelete === null || onDelete === void 0 ? void 0 : onDelete(evt);
   };
+  var content = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    className: (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["truncate flex-1 leading-base"]))),
+    children: children
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", _objectSpread(_objectSpread({}, props), {}, {
     className: tagClassName,
     ref: ref,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      className: (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["truncate flex-1"]))),
-      children: children
-    }), editable && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["tag-close-button"]))), BUTTON_CLOSE_VARIANT_CLASSNAMES[variant]),
-      type: "button",
-      onClick: handleDelete,
-      "aria-label": typeof locale.removeButton === "function" ? locale.removeButton(title) : locale.removeButton,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFeather.X, {
-        size: "1em"
+    children: [addable ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.TooltipWrapper, {
+      content: addTooltip,
+      hideDelay: 0,
+      placement: "bottom",
+      wrapperClassName: (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["h-full"]))),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["tag-add-button"]))), !deletable && (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["-mr-2"]))), BUTTON_VARIANT_CLASSNAMES[variant]),
+        type: "button",
+        onClick: handleAdd,
+        "aria-label": typeof locale.addButton === "function" ? locale.addButton(title) : locale.addButton,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFeather.Plus, {
+          size: "1em"
+        }), content]
+      })
+    }) : content, deletable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.TooltipWrapper, {
+      content: deleteTooltip,
+      hideDelay: 0,
+      placement: "bottom-start",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["tag-close-button p-1"]))), !addable && (0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["ml-2"]))), BUTTON_VARIANT_CLASSNAMES[variant]),
+        type: "button",
+        onClick: handleDelete,
+        "aria-label": typeof locale.deleteButton === "function" ? locale.deleteButton(title) : locale.deleteButton,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFeather.X, {
+          size: "1em"
+        })
       })
     })]
   }));

package/cjs/Tag/Tag.tailwind.js

@@ -17,11 +17,27 @@ var tagPlugin = plugin(function (_ref) {
       fontSize: theme("fontSize.base"),
       lineHeight: theme("lineHeight.sm")
     },
+    ".tag-add-button": {
+      display: "inline-flex",
+      alignItems: "center",
+      height: "100%",
+      paddingLeft: theme("spacing.2"),
+      paddingRight: theme("spacing.2"),
+      marginLeft: "-".concat(theme("spacing.2")),
+      columnGap: theme("spacing.2"),
+      "&, &:focus": {
+        outlineWidth: "0px"
+      },
+      "&:focus-visible": {
+        outlineOffset: "-2px",
+        outlineWidth: "3px",
+        outlineColor: theme("colors.accent.600")
+      }
+    },
     ".tag-close-button": {
       height: "100%",
       paddingLeft: theme("spacing.1"),
       paddingRight: theme("spacing.1"),
-      marginLeft: theme("spacing.2"),
       marginRight: "-".concat(theme("spacing.2")),
       borderLeft: "1px solid transparent",
       "&, &:focus": {

package/cjs/styles/colors.d.ts

@@ -23,6 +23,7 @@ export const pink: {
     300: string;
     200: string;
     100: string;
+    50: string;
 };
 export const nebula: {
     900: string;
@@ -45,6 +46,7 @@ export const xenon: {
     300: string;
     200: string;
     100: string;
+    50: string;
 };
 export const blue: {
     900: string;
@@ -56,6 +58,7 @@ export const blue: {
     300: string;
     200: string;
     100: string;
+    50: string;
 };
 export const green: {
     900: string;
@@ -67,6 +70,7 @@ export const green: {
     300: string;
     200: string;
     100: string;
+    50: string;
 };
 export const orange: {
     900: string;
@@ -78,6 +82,7 @@ export const orange: {
     300: string;
     200: string;
     100: string;
+    50: string;
 };
 export const red: {
     900: string;
@@ -89,4 +94,17 @@ export const red: {
     300: string;
     200: string;
     100: string;
+    50: string;
+};
+export const purple: {
+    900: string;
+    800: string;
+    700: string;
+    600: string;
+    500: string;
+    400: string;
+    300: string;
+    200: string;
+    100: string;
+    50: string;
 };

package/cjs/styles/colors.js

@@ -26,7 +26,8 @@ var colors = {
     400: "#fb5abc",
     300: "#fd89ce",
     200: "#feb9e2",
-    100: "#ffeaf6"
+    100: "#ffeaf6",
+    50: "#fff5fb"
   },
   nebula: {
     900: "#141d61",
@@ -48,7 +49,8 @@ var colors = {
     400: "#457aff",
     300: "#76a0ff",
     200: "#bbd1ff",
-    100: "#f2f4ff"
+    100: "#f2f4ff",
+    50: "#f9f9ff"
   },
   blue: {
     900: "#00526c",
@@ -59,18 +61,20 @@ var colors = {
     400: "#5adaff",
     300: "#89e5ff",
     200: "#b9efff",
-    100: "#e8faff"
+    100: "#e8faff",
+    50: "#f3fdff"
   },
   green: {
-    900: "#005e36",
-    800: "#028950",
-    700: "#06b66c",
-    600: "#0de589",
-    500: "#5feb9e",
-    400: "#88f0b3",
-    300: "#aaf4c8",
-    200: "#c9f8de",
-    100: "#e6fcf3"
+    900: "#005d43",
+    800: "#007046",
+    700: "#008b4a",
+    600: "#00a648",
+    500: "#00c241",
+    400: "#4ade6d",
+    300: "#86f195",
+    200: "#bffbc2",
+    100: "#e5fde4",
+    50: "#f2fef1"
   },
   orange: {
     900: "#963209",
@@ -81,18 +85,32 @@ var colors = {
     400: "#fcbc73",
     300: "#fed59a",
     200: "#ffe9c3",
-    100: "#fff9ec"
+    100: "#fff9ec",
+    50: "#fffcf5"
   },
   red: {
     900: "#83111e",
     800: "#ab1325",
     700: "#d4142a",
-    600: "#ee243c",
+    600: "#e9122c",
     500: "#f4495d",
     400: "#f86e7e",
     300: "#fc95a1",
     200: "#febdc5",
-    100: "#ffe6e9"
+    100: "#ffe6e9",
+    50: "#fff3f4"
+  },
+  purple: {
+    900: "#3c0b93",
+    800: "#5612b7",
+    700: "#731adb",
+    600: "#9524ff",
+    500: "#b75aff",
+    400: "#cc7bff",
+    300: "#e2a7ff",
+    200: "#f2d3ff",
+    100: "#fcf4ff",
+    50: "#fdf9ff"
   }
 };
 module.exports = colors;

package/cjs/types.d.ts

@@ -17,3 +17,12 @@ export declare type AtLeastOne<T, U = {
 export declare type WithRequiredProperty<Type, Key extends keyof Type> = Type & {
     [Property in Key]-?: Type[Property];
 };
+declare type Without<T, U> = {
+    [P in Exclude<keyof T, keyof U>]?: never;
+};
+/**
+ * Makes two types mutually exclusive
+ * https://stackoverflow.com/questions/42123407/does-typescript-support-mutually-exclusive-types
+ */
+export declare type XOR<T, U> = T | U extends object ? (Without<T, U> & U) | (Without<U, T> & T) : T | U;
+export {};

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/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;