@algolia/satellite 1.0.0-beta.131 → 1.0.0-beta.134

package/esm/Tables/DataTable/utils.d.ts

@@ -1,4 +1,4 @@
-import type { Row, DeterminatePagination, IndeterminatePagination, PaginationConfiguration, AdvancedColumnDefinition } from "./types";
+import type { AdvancedColumnDefinition, DeterminatePagination, IndeterminatePagination, PaginationConfiguration, Row } from "./types";
 export declare const isDeterminatePagination: (pagination: PaginationConfiguration) => pagination is DeterminatePagination;
 export declare const isIndeterminatePagination: (pagination: PaginationConfiguration) => pagination is IndeterminatePagination;
 export declare const getCellValue: <Item extends {}>(column: AdvancedColumnDefinition<Item>, row: Row<Item>) => any;

package/esm/Tables/Table/Table.d.ts

@@ -1,6 +1,6 @@
-import React from "react";
-export interface TableProps extends React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement> {
-    footer?: React.ReactNode;
+import type { DetailedHTMLProps, ReactNode, TableHTMLAttributes } from "react";
+export interface TableProps extends DetailedHTMLProps<TableHTMLAttributes<HTMLTableElement>, HTMLTableElement> {
+    footer?: ReactNode;
     smallFooter?: boolean;
     hasActions?: boolean;
     highlight?: boolean;

package/esm/Tables/Table/Table.js

@@ -1,14 +1,20 @@
-import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 
 var _templateObject, _templateObject2, _templateObject3;
 
 var _excluded = ["className", "footer", "smallFooter", "hasActions", "highlight"];
-import React from "react";
+
+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 "classnames";
 import stl from "../../styles/helpers/satellitePrefixer";
 import Footer from "./components/Footer";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 
 /**
  * Tables are used to structure content in a grid to make it easier to see relationships and to facilitate understanding.
@@ -39,14 +45,17 @@ export var Table = function Table(_ref) {
       highlight = _ref$highlight === void 0 ? true : _ref$highlight,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement("div", {
-    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["rounded text-grey-900 bg-white display-body"]))), className)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["overflow-x-auto"])))
-  }, /*#__PURE__*/React.createElement("table", _extends({}, props, {
-    className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["table ", " ", ""])), hasActions && "table-with-actions", highlight && "table-with-highlight")
-  }))), footer && /*#__PURE__*/React.createElement(Footer, {
-    size: smallFooter ? "small" : "default"
-  }, footer));
+  return /*#__PURE__*/_jsxs("div", {
+    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["rounded text-grey-900 bg-white display-body"]))), className),
+    children: [/*#__PURE__*/_jsx("div", {
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["overflow-x-auto"]))),
+      children: /*#__PURE__*/_jsx("table", _objectSpread(_objectSpread({}, props), {}, {
+        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["table ", " ", ""])), hasActions && "table-with-actions", highlight && "table-with-highlight")
+      }))
+    }), footer && /*#__PURE__*/_jsx(Footer, {
+      size: smallFooter ? "small" : "default",
+      children: footer
+    })]
+  });
 };
 export default Table;

package/esm/Tables/Table/Table.tailwind.d.ts

@@ -1,5 +1,5 @@
 export = tablePlugin;
-/**
- * @type {import('../../tailwind-types').TailwindPlugin}
- */
-declare const tablePlugin: import('../../tailwind-types').TailwindPlugin;
+declare const tablePlugin: {
+    handler: import("tailwindcss/types/config").PluginCreator;
+    config?: import("tailwindcss").Config | undefined;
+};

package/esm/Tables/Table/Table.tailwind.js

@@ -1,9 +1,7 @@
+import _plugin from "tailwindcss/plugin";
 // purgecss whitelist: th, td, tr
-
-/**
- * @type {import('../../tailwind-types').TailwindPlugin}
- */
-var tablePlugin = function tablePlugin(_ref) {
+var plugin = _plugin;
+var tablePlugin = plugin(function (_ref) {
   var addComponents = _ref.addComponents,
       theme = _ref.theme;
   addComponents({
@@ -36,6 +34,5 @@ var tablePlugin = function tablePlugin(_ref) {
       }
     }
   });
-};
-
+});
 export default tablePlugin;

package/esm/Tables/Table/components/Footer.d.ts

@@ -1,8 +1,8 @@
-import React from "react";
+import type { ReactNode } from "react";
 export declare type FooterSizes = "default" | "small";
 export interface FooterProps {
     size?: FooterSizes;
-    children?: React.ReactNode;
+    children?: ReactNode;
 }
 export declare const Footer: ({ size, children }: FooterProps) => JSX.Element;
 export default Footer;

package/esm/Tables/Table/components/Footer.js

@@ -2,9 +2,9 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2, _templateObject3;
 
-import React from "react";
 import cx from "classnames";
 import stl from "../../../styles/helpers/satellitePrefixer";
+import { jsx as _jsx } from "react/jsx-runtime";
 export var Footer = function Footer(_ref) {
   var _ref$size = _ref.size,
       size = _ref$size === void 0 ? "default" : _ref$size,
@@ -13,8 +13,9 @@ export var Footer = function Footer(_ref) {
     "default": stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["py-3 px-4"]))),
     small: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["py-1 px-4"])))
   };
-  return /*#__PURE__*/React.createElement("div", {
-    className: cx(stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["bg-grey-100 border-t border-grey-200 text-grey-600 flex items-center justify-center"]))), SIZE_CLASSNAMES[size])
-  }, children);
+  return /*#__PURE__*/_jsx("div", {
+    className: cx(stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["bg-grey-100 border-t border-grey-200 text-grey-600 flex items-center justify-center"]))), SIZE_CLASSNAMES[size]),
+    children: children
+  });
 };
 export default Footer;

package/esm/Tabs/ContentTabs.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { ContentTabsProps } from "./types";
+import type { ContentTabsProps } from "./types";
 export declare const ContentTabs: ({ className, tabs, tabIndex, defaultIndex, onChange }: ContentTabsProps) => JSX.Element;
 export default ContentTabs;

package/esm/Tabs/ContentTabs.js

@@ -3,12 +3,14 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-import React, { useState, useEffect } from "react";
+import { Tabs as ReachTabs, Tab, TabList, TabPanel, TabPanels } from "@reach/tabs";
 import cx from "classnames";
-import { Tabs as ReachTabs, TabList, Tab, TabPanels, TabPanel } from "@reach/tabs";
-import stl from "../styles/helpers/satellitePrefixer";
+import { useEffect, useState } from "react";
 import Badge from "../Badge";
+import stl from "../styles/helpers/satellitePrefixer";
 import { ACTIVE_UNDERLINE_VARIANT_CLASSNAMES } from "./utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 export var ContentTabs = function ContentTabs(_ref) {
   var className = _ref.className,
       tabs = _ref.tabs,
@@ -36,35 +38,40 @@ export var ContentTabs = function ContentTabs(_ref) {
     }
   };
 
-  return /*#__PURE__*/React.createElement(ReachTabs, {
+  return /*#__PURE__*/_jsxs(ReachTabs, {
     index: internalTabIndex,
     onChange: handleTabsChange,
-    defaultIndex: internalTabIndex
-  }, /*#__PURE__*/React.createElement(TabList, {
-    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["tabs-tabbar border-b border-grey-200 flex overflow-x-auto whitespace-nowrap space-x-6"]))), className)
-  }, tabs.map(function (_ref2, index) {
-    var _ref2$variant = _ref2.variant,
-        variant = _ref2$variant === void 0 ? "accent" : _ref2$variant,
-        className = _ref2.className,
-        disabled = _ref2.disabled,
-        label = _ref2.label,
-        value = _ref2.value;
-    return /*#__PURE__*/React.createElement(Tab, {
-      key: index,
-      className: cx(ACTIVE_UNDERLINE_VARIANT_CLASSNAMES[variant], stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["tab pb-3 text-base leading-sm"]))), className),
-      disabled: disabled
-    }, label, value && /*#__PURE__*/React.createElement(Badge, {
-      size: "small",
-      variant: variant,
-      className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["ml-2 text-grey-600"])))
-    }, value));
-  })), /*#__PURE__*/React.createElement(TabPanels, null, tabs.map(function (_ref3, index) {
-    var content = _ref3.content;
-    var isActive = internalTabIndex === index;
-    return /*#__PURE__*/React.createElement(TabPanel, {
-      key: index,
-      className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["focus:outline-none"])))
-    }, isActive ? content : null);
-  })));
+    defaultIndex: internalTabIndex,
+    children: [/*#__PURE__*/_jsx(TabList, {
+      className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["tabs-tabbar border-b border-grey-200 flex overflow-x-auto whitespace-nowrap space-x-6"]))), className),
+      children: tabs.map(function (_ref2, index) {
+        var _ref2$variant = _ref2.variant,
+            variant = _ref2$variant === void 0 ? "accent" : _ref2$variant,
+            className = _ref2.className,
+            disabled = _ref2.disabled,
+            label = _ref2.label,
+            value = _ref2.value;
+        return /*#__PURE__*/_jsxs(Tab, {
+          className: cx(ACTIVE_UNDERLINE_VARIANT_CLASSNAMES[variant], stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["tab pb-3 text-base leading-sm"]))), className),
+          disabled: disabled,
+          children: [label, value && /*#__PURE__*/_jsx(Badge, {
+            size: "small",
+            variant: variant,
+            className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["ml-2 text-grey-600"]))),
+            children: value
+          })]
+        }, index);
+      })
+    }), /*#__PURE__*/_jsx(TabPanels, {
+      children: tabs.map(function (_ref3, index) {
+        var content = _ref3.content;
+        var isActive = internalTabIndex === index;
+        return /*#__PURE__*/_jsx(TabPanel, {
+          className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["focus:outline-none"]))),
+          children: isActive ? content : null
+        }, index);
+      })
+    })]
+  });
 };
 export default ContentTabs;

package/esm/Tabs/LinkTabs.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { LinkTabsProps, UrlMatcher } from "./types";
+import type { LinkTabsProps, UrlMatcher } from "./types";
 export declare const defaultUrlMatcher: UrlMatcher;
 /**
  * Tabs are an easy way to organize content by grouping similar information on the same page. Use them to help users navigate between related views within the same context, especially when the number of views may be more than 3.

package/esm/Tabs/LinkTabs.js

@@ -2,12 +2,12 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import React from "react";
 import cx from "classnames";
 import useLocation from "react-use/lib/useLocation";
-import matchLocation from "../utils/matchLocation";
 import stl from "../styles/helpers/satellitePrefixer";
+import matchLocation from "../utils/matchLocation";
 import LinkTab from "./components/LinkTab";
+import { jsx as _jsx } from "react/jsx-runtime";
 export var defaultUrlMatcher = function defaultUrlMatcher(tab, location) {
   return matchLocation(tab.to, {
     pathname: location.pathname || ""
@@ -53,18 +53,18 @@ export var LinkTabs = function LinkTabs(_ref) {
     return urlMatcher(tab, location);
   });
   tabIndex = tabIndex === -1 ? 0 : tabIndex;
-  return /*#__PURE__*/React.createElement("nav", {
+  return /*#__PURE__*/_jsx("nav", {
     role: "tablist",
-    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["tabs-tabbar border-b border-grey-200 flex overflow-x-auto whitespace-nowrap space-x-6"]))), className)
-  }, tabs.map(function (tab, index) {
-    return /*#__PURE__*/React.createElement(LinkTab, {
-      key: tab.to,
-      tab: tab,
-      selected: index === tabIndex,
-      onClick: function onClick(evt) {
-        return onTabClick === null || onTabClick === void 0 ? void 0 : onTabClick(evt, tab);
-      }
-    });
-  }));
+    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["tabs-tabbar border-b border-grey-200 flex overflow-x-auto whitespace-nowrap space-x-6"]))), className),
+    children: tabs.map(function (tab, index) {
+      return /*#__PURE__*/_jsx(LinkTab, {
+        tab: tab,
+        selected: index === tabIndex,
+        onClick: function onClick(evt) {
+          return onTabClick === null || onTabClick === void 0 ? void 0 : onTabClick(evt, tab);
+        }
+      }, tab.to);
+    })
+  });
 };
 export default LinkTabs;

package/esm/Tabs/Tabs.tailwind.d.ts

@@ -1,5 +1,5 @@
 export = tabsPlugin;
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
-declare const tabsPlugin: import('../tailwind-types').TailwindPlugin;
+declare const tabsPlugin: {
+    handler: import("tailwindcss/types/config").PluginCreator;
+    config?: import("tailwindcss").Config | undefined;
+};

package/esm/Tabs/Tabs.tailwind.js

@@ -1,9 +1,7 @@
+import _plugin from "tailwindcss/plugin";
 // @ts-check
-
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
-var tabsPlugin = function tabsPlugin(_ref) {
+var plugin = _plugin;
+var tabsPlugin = plugin(function (_ref) {
   var addComponents = _ref.addComponents,
       theme = _ref.theme;
   addComponents({
@@ -32,8 +30,8 @@ var tabsPlugin = function tabsPlugin(_ref) {
       borderBottomColor: theme("colors.red.600")
     },
     ".tab": {
-      flexShrink: 0,
-      borderBottomWidth: 3,
+      flexShrink: "0",
+      borderBottomWidth: "3px",
       borderBottomColor: "transparent",
       color: theme("colors.grey.600"),
       cursor: "pointer",
@@ -50,6 +48,5 @@ var tabsPlugin = function tabsPlugin(_ref) {
       }
     }
   });
-};
-
+});
 export default tabsPlugin;

package/esm/Tabs/components/LinkTab.d.ts

@@ -1,8 +1,8 @@
-import React from "react";
-import { LinkTab as LinkTabType } from "../types";
+import type { MouseEventHandler } from "react";
+import type { LinkTab as LinkTabType } from "../types";
 export interface LinkTabProps {
     tab: LinkTabType;
-    onClick?: React.MouseEventHandler<HTMLAnchorElement>;
+    onClick?: MouseEventHandler<HTMLAnchorElement>;
     selected: boolean;
 }
 export declare const LinkTab: ({ tab, onClick, selected }: LinkTabProps) => JSX.Element;

package/esm/Tabs/components/LinkTab.js

@@ -1,14 +1,19 @@
-import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
 var _templateObject, _templateObject2;
 
-import React from "react";
+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 "classnames";
-import useLinkProps from "../../utils/useLinkProps";
-import stl from "../../styles/helpers/satellitePrefixer";
 import Badge from "../../Badge";
+import stl from "../../styles/helpers/satellitePrefixer";
+import useLinkProps from "../../utils/useLinkProps";
 import { ACTIVE_UNDERLINE_VARIANT_CLASSNAMES } from "../utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 
 var getNextNonDisabledSibling = function getNextNonDisabledSibling(el) {
   var _ref;
@@ -61,7 +66,7 @@ export var LinkTab = function LinkTab(_ref3) {
       }
     }
   });
-  return /*#__PURE__*/React.createElement("a", _extends({}, linkProps, selectionProps, {
+  return /*#__PURE__*/_jsxs("a", _objectSpread(_objectSpread(_objectSpread({}, linkProps), selectionProps), {}, {
     id: tab.id,
     role: "tab",
     className: cx(ACTIVE_UNDERLINE_VARIANT_CLASSNAMES[variant], stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["tab pb-3 text-base leading-sm hover:no-underline"]))), tab.className),
@@ -79,11 +84,13 @@ export var LinkTab = function LinkTab(_ref3) {
         previousElement === null || previousElement === void 0 ? void 0 : previousElement.click();
         previousElement === null || previousElement === void 0 ? void 0 : previousElement.focus();
       }
-    }
-  }), tab.label, tab.value && /*#__PURE__*/React.createElement(Badge, {
-    size: "small",
-    variant: variant,
-    className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["ml-2 text-grey-600"])))
-  }, tab.value));
+    },
+    children: [tab.label, tab.value && /*#__PURE__*/_jsx(Badge, {
+      size: "small",
+      variant: variant,
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["ml-2 text-grey-600"]))),
+      children: tab.value
+    })]
+  }));
 };
 export default LinkTab;

package/esm/Tabs/types.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
-import { LocationSensorState } from "react-use/lib/useLocation";
-import { ColorVariant } from "../types";
+import type { MouseEvent, ReactNode } from "react";
+import type { LocationSensorState } from "react-use/lib/useLocation";
+import type { ColorVariant } from "../types";
 export interface BaseTab {
     id?: string;
-    label: React.ReactNode;
+    label: ReactNode;
     variant?: ColorVariant;
     disabled?: boolean;
     value?: string;
@@ -18,11 +18,11 @@ export interface LinkTabsProps {
     /** @ignore */
     className?: string;
     tabs: LinkTab[];
-    onTabClick?(event: React.MouseEvent<HTMLAnchorElement>, tab: LinkTab): void;
+    onTabClick?(event: MouseEvent<HTMLAnchorElement>, tab: LinkTab): void;
     urlMatcher?: UrlMatcher;
 }
 export interface ContentTab extends BaseTab {
-    content: React.ReactNode;
+    content: ReactNode;
 }
 export interface ContentTabsProps {
     /** @ignore */

package/esm/Tabs/utils.d.ts

@@ -1,2 +1,2 @@
-import { ColorVariant } from "../types";
+import type { ColorVariant } from "../types";
 export declare const ACTIVE_UNDERLINE_VARIANT_CLASSNAMES: Record<ColorVariant, string>;

package/esm/Tag/Tag.d.ts

@@ -1,13 +1,17 @@
-import React from "react";
+import type { DetailedHTMLProps, HTMLAttributes, MouseEventHandler } from "react";
 import type { ColorVariant } from "../types";
 export declare type TagVariants = ColorVariant | "pink";
-export interface TagProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> {
+export declare type TagLocale = {
+    removeButton?: 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;
-    onDelete?: React.MouseEventHandler<HTMLElement>;
+    onDelete?: MouseEventHandler<HTMLElement>;
+    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**.
@@ -30,5 +34,5 @@ export interface TagProps extends React.DetailedHTMLProps<React.HTMLAttributes<H
  * - 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: React.ForwardRefExoticComponent<Pick<TagProps, "hidden" | "dir" | "slot" | "style" | "title" | "color" | "children" | "key" | "variant" | "className" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "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" | "onDelete"> & 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" | "onDelete" | "locale"> & import("react").RefAttributes<HTMLSpanElement>>;
 export default Tag;

package/esm/Tag/Tag.js

@@ -1,14 +1,26 @@
-import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _excluded = ["children", "variant", "className", "onDelete"];
+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;
 
-import React, { forwardRef } from "react";
+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 "classnames";
+import { forwardRef } from "react";
 import { X } from "react-feather";
+import { useLocale } from "../Satellite";
 import stl from "../styles/helpers/satellitePrefixer";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var DEFAULT_TAG_LOCALE = {
+  removeButton: function removeButton(title) {
+    return "Remove ".concat(title);
+  }
+};
 var VARIANT_CLASSNAMES = {
   accent: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["bg-accent-100 border-accent-200 text-accent-700"]))),
   grey: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["bg-grey-100 border-grey-200 text-grey-700"]))),
@@ -55,34 +67,39 @@ export var Tag = /*#__PURE__*/forwardRef(function (_ref, ref) {
       variant = _ref$variant === void 0 ? "grey" : _ref$variant,
       className = _ref.className,
       onDelete = _ref.onDelete,
+      propsLocale = _ref.locale,
       props = _objectWithoutProperties(_ref, _excluded);
 
   var title = typeof children === "string" ? children : "tag";
+  var contextLocale = useLocale("tag");
+
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_TAG_LOCALE), contextLocale), propsLocale);
+
   var tagClassName = cx(stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["tag"]))), VARIANT_CLASSNAMES[variant], className);
   var editable = Boolean(onDelete);
 
   var handleDelete = function handleDelete(evt) {
     evt.stopPropagation();
-
-    if (onDelete) {
-      onDelete(evt);
-    }
+    onDelete === null || onDelete === void 0 ? void 0 : onDelete(evt);
   };
 
-  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
+  return /*#__PURE__*/_jsxs("span", _objectSpread(_objectSpread({}, props), {}, {
     className: tagClassName,
     "aria-label": title,
-    ref: ref
-  }), /*#__PURE__*/React.createElement("span", {
-    className: stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["truncate flex-1"])))
-  }, children), editable && /*#__PURE__*/React.createElement("button", {
-    className: cx(stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["tag-close-button"]))), BUTTON_CLOSE_VARIANT_CLASSNAMES[variant]),
-    type: "button",
-    onClick: handleDelete,
-    "aria-label": "Remove ".concat(title)
-  }, /*#__PURE__*/React.createElement(X, {
-    size: "1em"
-  })));
+    ref: ref,
+    children: [/*#__PURE__*/_jsx("span", {
+      className: stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["truncate flex-1"]))),
+      children: children
+    }), editable && /*#__PURE__*/_jsx("button", {
+      className: cx(stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["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__*/_jsx(X, {
+        size: "1em"
+      })
+    })]
+  }));
 });
 Tag.displayName = "Tag";
 export default Tag;

package/esm/Tag/Tag.tailwind.d.ts

@@ -1,5 +1,5 @@
 export = tagPlugin;
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
-declare const tagPlugin: import('../tailwind-types').TailwindPlugin;
+declare const tagPlugin: {
+    handler: import("tailwindcss/types/config").PluginCreator;
+    config?: import("tailwindcss").Config | undefined;
+};

package/esm/Tag/Tag.tailwind.js

@@ -1,9 +1,7 @@
+import _plugin from "tailwindcss/plugin";
 // @ts-check
-
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
-var tagPlugin = function tagPlugin(_ref) {
+var plugin = _plugin;
+var tagPlugin = plugin(function (_ref) {
   var addComponents = _ref.addComponents,
       theme = _ref.theme;
   addComponents({
@@ -26,15 +24,14 @@ var tagPlugin = function tagPlugin(_ref) {
       marginRight: "-".concat(theme("spacing.2")),
       borderLeft: "1px solid transparent",
       "&, &:focus": {
-        outlineWidth: 0
+        outlineWidth: "0px"
       },
       "&:focus-visible": {
-        outlineOffset: -2,
-        outlineWidth: 3,
+        outlineOffset: "-2px",
+        outlineWidth: "3px",
         outlineColor: theme("colors.accent.600")
       }
     }
   });
-};
-
+});
 export default tagPlugin;