@algolia/satellite 1.0.0-beta.133 → 1.0.0-beta.136

package/cjs/Tables/DataTable/components/Body.js

@@ -82,8 +82,8 @@ var Body = function Body(_ref) {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
             className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex justify-center py-6"]))),
             children: errorContent || /*#__PURE__*/(0, _jsxRuntime.jsx)(_EmptyState["default"], {
-              title: (locale === null || locale === void 0 ? void 0 : locale.errorTitle) || "Error",
-              description: (locale === null || locale === void 0 ? void 0 : locale.errorDescription) || "An error occurred while loading data.",
+              title: locale.errorTitle,
+              description: locale.errorDescription,
               centered: true,
               usageContext: "result"
             })
@@ -101,8 +101,8 @@ var Body = function Body(_ref) {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
             className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["flex justify-center py-6"]))),
             children: noDataContent || /*#__PURE__*/(0, _jsxRuntime.jsx)(_EmptyState["default"], {
-              title: (locale === null || locale === void 0 ? void 0 : locale.noDataTitle) || "Empty",
-              description: (locale === null || locale === void 0 ? void 0 : locale.noDataDescription) || "There is no data to display",
+              title: locale.noDataTitle,
+              description: locale.noDataDescription,
               centered: true,
               usageContext: "result"
             })

package/cjs/Tables/DataTable/components/HeaderCell.js

@@ -13,7 +13,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _reactFeather = require("react-feather");
 
@@ -48,7 +48,7 @@ var HeaderCell = function HeaderCell(_ref) {
     onClick: function onClick() {
       return sort && !disabled && onToggleSort(id, sortingDirection === "desc" ? "asc" : sortingDirection === "asc" ? "none" : "desc");
     },
-    className: (0, _classnames["default"])(className, (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["group ", ""])), sort && (disabled ? "cursor-not-allowed" : "cursor-pointer"))),
+    className: (0, _clsx["default"])(className, (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["group ", ""])), sort && (disabled ? "cursor-not-allowed" : "cursor-pointer"))),
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
       className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["inline-flex items-center"]))),
       children: [children, sort ? sortingDirection === "desc" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFeather.ChevronDown, {
@@ -56,7 +56,7 @@ var HeaderCell = function HeaderCell(_ref) {
       }) : sortingDirection === "asc" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFeather.ChevronUp, {
         className: iconClassName
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFeather.ChevronDown, {
-        className: (0, _classnames["default"])(iconClassName, (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["text-grey-300 opacity-0 group-hover:opacity-100"]))))
+        className: (0, _clsx["default"])(iconClassName, (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["text-grey-300 opacity-0 group-hover:opacity-100"]))))
       }) : null]
     })
   }));

package/cjs/Tables/DataTable/components/Loader.d.ts

@@ -2,7 +2,7 @@
 import type { DataTableLocale } from "../DataTable";
 export interface LoaderProps {
     className?: string;
-    locale?: DataTableLocale;
+    locale: Required<DataTableLocale>;
 }
 export declare const Loader: ({ className, locale }: LoaderProps) => JSX.Element;
 export default Loader;

package/cjs/Tables/DataTable/components/Loader.js

@@ -50,8 +50,8 @@ var Loader = function Loader(_ref) {
         className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex justify-center"]))),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressSpinner["default"], {})
       }),
-      title: (locale === null || locale === void 0 ? void 0 : locale.loadingTitle) || "It appears to be taking a while to get your data",
-      description: (locale === null || locale === void 0 ? void 0 : locale.loadingDescription) || "Please hold or try again later",
+      title: locale.loadingTitle,
+      description: locale.loadingDescription,
       centered: true
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressSpinner["default"], {})
   });

package/cjs/Tables/Table/Table.js

@@ -13,7 +13,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
 
@@ -58,7 +58,7 @@ var Table = function Table(_ref) {
       highlight = _ref$highlight === void 0 ? true : _ref$highlight,
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["rounded text-grey-900 bg-white display-body"]))), className),
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["rounded text-grey-900 bg-white display-body"]))), className),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["overflow-x-auto"]))),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("table", _objectSpread(_objectSpread({}, props), {}, {

package/cjs/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/cjs/Tables/Table/Table.tailwind.js

@@ -1,11 +1,9 @@
 "use strict";
 
 // purgecss whitelist: th, td, tr
+var plugin = require("tailwindcss/plugin");
 
-/**
- * @type {import('../../tailwind-types').TailwindPlugin}
- */
-var tablePlugin = function tablePlugin(_ref) {
+var tablePlugin = plugin(function (_ref) {
   var addComponents = _ref.addComponents,
       theme = _ref.theme;
   addComponents({
@@ -38,6 +36,5 @@ var tablePlugin = function tablePlugin(_ref) {
       }
     }
   });
-};
-
+});
 module.exports = tablePlugin;

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

@@ -9,7 +9,7 @@ exports["default"] = exports.Footer = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _satellitePrefixer = _interopRequireDefault(require("../../../styles/helpers/satellitePrefixer"));
 
@@ -26,7 +26,7 @@ var Footer = function Footer(_ref) {
     small: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["py-1 px-4"])))
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-100 border-t border-grey-200 text-grey-600 flex items-center justify-center"]))), SIZE_CLASSNAMES[size]),
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-100 border-t border-grey-200 text-grey-600 flex items-center justify-center"]))), SIZE_CLASSNAMES[size]),
     children: children
   });
 };

package/cjs/Tabs/ContentTabs.js

@@ -13,7 +13,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _tabs = require("@reach/tabs");
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _react = require("react");
 
@@ -59,7 +59,7 @@ var ContentTabs = function ContentTabs(_ref) {
     onChange: handleTabsChange,
     defaultIndex: internalTabIndex,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_tabs.TabList, {
-      className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["tabs-tabbar border-b border-grey-200 flex overflow-x-auto whitespace-nowrap space-x-6"]))), className),
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["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,
@@ -68,7 +68,7 @@ var ContentTabs = function ContentTabs(_ref) {
             label = _ref2.label,
             value = _ref2.value;
         return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_tabs.Tab, {
-          className: (0, _classnames["default"])(_utils.ACTIVE_UNDERLINE_VARIANT_CLASSNAMES[variant], (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["tab pb-3 text-base leading-sm"]))), className),
+          className: (0, _clsx["default"])(_utils.ACTIVE_UNDERLINE_VARIANT_CLASSNAMES[variant], (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["tab pb-3 text-base leading-sm"]))), className),
           disabled: disabled,
           children: [label, value && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge["default"], {
             size: "small",

package/cjs/Tabs/LinkTabs.js

@@ -9,7 +9,7 @@ exports.defaultUrlMatcher = exports["default"] = exports.LinkTabs = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _useLocation = _interopRequireDefault(require("react-use/lib/useLocation"));
 
@@ -73,7 +73,7 @@ var LinkTabs = function LinkTabs(_ref) {
   tabIndex = tabIndex === -1 ? 0 : tabIndex;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("nav", {
     role: "tablist",
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["tabs-tabbar border-b border-grey-200 flex overflow-x-auto whitespace-nowrap space-x-6"]))), className),
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["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__*/(0, _jsxRuntime.jsx)(_LinkTab["default"], {
         tab: tab,

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

@@ -1,48 +1,46 @@
 "use strict";
 
 // @ts-check
+var plugin = require("tailwindcss/plugin");
 
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
-var tabsPlugin = function tabsPlugin(_ref) {
+var tabsPlugin = plugin(function (_ref) {
   var addComponents = _ref.addComponents,
       theme = _ref.theme;
   addComponents({
     ".tabs-tabbar": {
       scrollBehavior: "smooth"
     },
-    ".tab[data-selected]": {
+    ".tab[aria-selected=true]": {
       color: theme("colors.grey.900")
     },
-    ".tab-grey[data-selected], .tab-grey:hover, .tab-grey:focus": {
+    ".tab-grey[aria-selected=true], .tab-grey:hover, .tab-grey:focus": {
       borderBottomColor: theme("colors.grey.300")
     },
-    ".tab-accent[data-selected], .tab-accent:hover, .tab-accent:focus": {
+    ".tab-accent[aria-selected=true], .tab-accent:hover, .tab-accent:focus": {
       borderBottomColor: theme("colors.accent.600")
     },
-    ".tab-blue[data-selected], .tab-blue:hover, .tab-blue:focus": {
+    ".tab-blue[aria-selected=true], .tab-blue:hover, .tab-blue:focus": {
       borderBottomColor: theme("colors.blue.600")
     },
-    ".tab-green[data-selected], .tab-green:hover, .tab-green:focus": {
+    ".tab-green[aria-selected=true], .tab-green:hover, .tab-green:focus": {
       borderBottomColor: theme("colors.green.600")
     },
-    ".tab-orange[data-selected], .tab-orange:hover, .tab-orange:focus": {
+    ".tab-orange[aria-selected=true], .tab-orange:hover, .tab-orange:focus": {
       borderBottomColor: theme("colors.orange.600")
     },
-    ".tab-red[data-selected], .tab-red:hover, .tab-red:focus": {
+    ".tab-red[aria-selected=true], .tab-red:hover, .tab-red:focus": {
       borderBottomColor: theme("colors.red.600")
     },
     ".tab": {
-      flexShrink: 0,
-      borderBottomWidth: 3,
+      flexShrink: "0",
+      borderBottomWidth: "3px",
       borderBottomColor: "transparent",
       color: theme("colors.grey.600"),
       cursor: "pointer",
       display: "inline-flex",
       justifyContent: "center",
       minWidth: theme("spacing.12"),
-      "&[disabled], &[data-disabled=true]": {
+      "&[disabled], &[aria-disabled=true]": {
         color: theme("colors.grey.400"),
         borderBottomColor: "transparent",
         cursor: "not-allowed"
@@ -52,6 +50,5 @@ var tabsPlugin = function tabsPlugin(_ref) {
       }
     }
   });
-};
-
+});
 module.exports = tabsPlugin;

package/cjs/Tabs/components/LinkTab.js

@@ -11,7 +11,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _Badge = _interopRequireDefault(require("../../Badge"));
 
@@ -39,7 +39,7 @@ var getNextNonDisabledSibling = function getNextNonDisabledSibling(el) {
     var _next, _next$nextElementSibl, _next2, _next3, _next3$parentElement;
 
     next = (_next$nextElementSibl = (_next2 = next) === null || _next2 === void 0 ? void 0 : _next2.nextElementSibling) !== null && _next$nextElementSibl !== void 0 ? _next$nextElementSibl : (_next3 = next) === null || _next3 === void 0 ? void 0 : (_next3$parentElement = _next3.parentElement) === null || _next3$parentElement === void 0 ? void 0 : _next3$parentElement.firstElementChild;
-  } while (Boolean((_next = next) === null || _next === void 0 ? void 0 : _next.getAttribute("data-disabled")));
+  } while (Boolean((_next = next) === null || _next === void 0 ? void 0 : _next.getAttribute("aria-disabled")));
 
   return (_ref = next) !== null && _ref !== void 0 ? _ref : null;
 };
@@ -54,7 +54,7 @@ var getPreviousNonDisabledSibling = function getPreviousNonDisabledSibling(el) {
     var _next4, _next$previousElement, _next5, _next6, _next6$parentElement;
 
     next = (_next$previousElement = (_next5 = next) === null || _next5 === void 0 ? void 0 : _next5.previousElementSibling) !== null && _next$previousElement !== void 0 ? _next$previousElement : (_next6 = next) === null || _next6 === void 0 ? void 0 : (_next6$parentElement = _next6.parentElement) === null || _next6$parentElement === void 0 ? void 0 : _next6$parentElement.lastElementChild;
-  } while (Boolean((_next4 = next) === null || _next4 === void 0 ? void 0 : _next4.getAttribute("data-disabled")));
+  } while (Boolean((_next4 = next) === null || _next4 === void 0 ? void 0 : _next4.getAttribute("aria-disabled")));
 
   return (_ref2 = next) !== null && _ref2 !== void 0 ? _ref2 : null;
 };
@@ -66,16 +66,16 @@ var LinkTab = function LinkTab(_ref3) {
   var variant = tab.variant || "accent";
   var selectionProps = selected ? {
     "aria-selected": true,
-    "data-selected": true
+    tabIndex: 0
   } : {
-    "aria-selected": false
+    "aria-selected": false,
+    tabIndex: -1
   };
   var linkProps = (0, _useLinkProps["default"])({
     href: tab.to,
+    disabled: tab.disabled,
     onClick: function onClick(evt) {
-      if (tab.disabled) {
-        evt.preventDefault();
-      } else if (_onClick) {
+      if (_onClick) {
         _onClick(evt);
       }
     }
@@ -83,9 +83,7 @@ var LinkTab = function LinkTab(_ref3) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("a", _objectSpread(_objectSpread(_objectSpread({}, linkProps), selectionProps), {}, {
     id: tab.id,
     role: "tab",
-    className: (0, _classnames["default"])(_utils.ACTIVE_UNDERLINE_VARIANT_CLASSNAMES[variant], (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["tab pb-3 text-base leading-sm hover:no-underline"]))), tab.className),
-    tabIndex: selected ? 0 : -1,
-    "data-disabled": tab.disabled,
+    className: (0, _clsx["default"])(_utils.ACTIVE_UNDERLINE_VARIANT_CLASSNAMES[variant], (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["tab pb-3 text-base leading-sm hover:no-underline"]))), tab.className),
     onKeyDown: function onKeyDown(evt) {
       if (tab.disabled) return;
 

package/cjs/Tag/Tag.d.ts

@@ -1,6 +1,9 @@
 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);
+};
 export interface TagProps extends DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> {
     /**
      * The "pink" variant should only be used for **Algolia admin** related things.
@@ -8,9 +11,7 @@ export interface TagProps extends DetailedHTMLProps<HTMLAttributes<HTMLSpanEleme
      * */
     variant?: TagVariants;
     onDelete?: MouseEventHandler<HTMLElement>;
-    locale?: {
-        removeButton?: string;
-    };
+    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**.
@@ -33,5 +34,5 @@ export interface TagProps extends DetailedHTMLProps<HTMLAttributes<HTMLSpanEleme
  * - 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, "hidden" | "dir" | "slot" | "style" | "title" | "color" | "translate" | "children" | "key" | "variant" | "className" | "locale" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "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"> & 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" | "onDelete" | "locale"> & import("react").RefAttributes<HTMLSpanElement>>;
 export default Tag;

package/cjs/Tag/Tag.js

@@ -13,12 +13,14 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _react = require("react");
 
 var _reactFeather = require("react-feather");
 
+var _Satellite = require("../Satellite");
+
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 
 var _jsxRuntime = require("react/jsx-runtime");
@@ -31,6 +33,11 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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);
+  }
+};
 var VARIANT_CLASSNAMES = {
   accent: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["bg-accent-100 border-accent-200 text-accent-700"]))),
   grey: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-100 border-grey-200 text-grey-700"]))),
@@ -77,18 +84,19 @@ var Tag = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       variant = _ref$variant === void 0 ? "grey" : _ref$variant,
       className = _ref.className,
       onDelete = _ref.onDelete,
-      locale = _ref.locale,
+      propsLocale = _ref.locale,
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var title = typeof children === "string" ? children : "tag";
-  var tagClassName = (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["tag"]))), VARIANT_CLASSNAMES[variant], className);
+  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 handleDelete = function handleDelete(evt) {
     evt.stopPropagation();
-
-    if (onDelete) {
-      onDelete(evt);
-    }
+    onDelete === null || onDelete === void 0 ? void 0 : onDelete(evt);
   };
 
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", _objectSpread(_objectSpread({}, props), {}, {
@@ -99,10 +107,10 @@ var Tag = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       className: (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["truncate flex-1"]))),
       children: children
     }), editable && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-      className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["tag-close-button"]))), BUTTON_CLOSE_VARIANT_CLASSNAMES[variant]),
+      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": (locale === null || locale === void 0 ? void 0 : locale.removeButton) || "Remove ".concat(title),
+      "aria-label": typeof locale.removeButton === "function" ? locale.removeButton(title) : locale.removeButton,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFeather.X, {
         size: "1em"
       })

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

@@ -1,11 +1,9 @@
 "use strict";
 
 // @ts-check
+var plugin = require("tailwindcss/plugin");
 
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
-var tagPlugin = function tagPlugin(_ref) {
+var tagPlugin = plugin(function (_ref) {
   var addComponents = _ref.addComponents,
       theme = _ref.theme;
   addComponents({
@@ -28,15 +26,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")
       }
     }
   });
-};
-
+});
 module.exports = tagPlugin;

package/cjs/TextArea/TextArea.js

@@ -13,7 +13,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _react = require("react");
 
@@ -33,7 +33,7 @@ var TextArea = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var className = _ref.className,
       otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("textarea", _objectSpread(_objectSpread({}, otherProps), {}, {
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["text-area"]))), className),
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["text-area"]))), className),
     ref: ref
   }));
 });

package/cjs/TextArea/TextArea.tailwind.d.ts

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

package/cjs/TextArea/TextArea.tailwind.js

@@ -1,15 +1,13 @@
 "use strict";
 
 // @ts-check
-var rgba = require("../styles/rgba");
+var plugin = require("tailwindcss/plugin");
 
 var disabledColor = require("../styles/disabledColor");
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
 
+var rgba = require("../styles/rgba");
 
-var textAreaPlugin = function textAreaPlugin(_ref) {
+var textAreaPlugin = plugin(function (_ref) {
   var addComponents = _ref.addComponents,
       theme = _ref.theme;
   addComponents({
@@ -40,6 +38,5 @@ var textAreaPlugin = function textAreaPlugin(_ref) {
       }
     }
   });
-};
-
+});
 module.exports = textAreaPlugin;

package/cjs/Toggle/Toggle.d.ts

@@ -6,5 +6,5 @@ export declare type ToggleProps = Omit<HTMLAttributes<HTMLInputElement>, "childr
  * - Toggles should not require a Save button to apply the changes
  * - If a Save button is needed, try using Radio groups or Checkboxes instead
  */
-export declare const Toggle: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLInputElement>, "children" | "onChange"> & Pick<InputHTMLAttributes<HTMLInputElement>, "required" | "disabled" | "defaultChecked" | "onChange" | "autoFocus" | "checked"> & import("react").RefAttributes<HTMLInputElement>>;
+export declare const Toggle: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLInputElement>, "children" | "onChange"> & Pick<InputHTMLAttributes<HTMLInputElement>, "required" | "disabled" | "autoFocus" | "checked" | "defaultChecked" | "onChange"> & import("react").RefAttributes<HTMLInputElement>>;
 export default Toggle;

package/cjs/Toggle/Toggle.js

@@ -13,7 +13,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _react = require("react");
 
@@ -42,7 +42,7 @@ var Toggle = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       inputProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     translate: "yes",
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["toggle-container"]))), className),
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["toggle-container"]))), className),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({}, inputProps), {}, {
       type: "checkbox",
       ref: ref

package/cjs/Toggle/Toggle.tailwind.d.ts

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