@algolia/satellite 1.0.0-beta.132 → 1.0.0-beta.135

package/cjs/Switch/SwitchOption.js

@@ -35,7 +35,7 @@ var SwitchOption = function SwitchOption(_ref) {
   var checked = context.value === value;
   var inputDisabled = context.disabled || disabled;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", _objectSpread(_objectSpread({
-    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n        inline-flex justify-center items-center min-w-16 max-w-48 px-4 z-10 flex-grow flex-shrink\n        ", "\n        ", "\n      "])), inputDisabled ? "cursor-not-allowed opacity-60 rounded bg-grey-100" : "cursor-pointer", !checked && !inputDisabled && "rounded hover:bg-accent-200 hover:bg-opacity-20 transition-colors duration-100 ease-linear")
+    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n        inline-flex grow shrink justify-center items-center min-w-16 max-w-48 px-4 z-10\n        ", "\n        ", "\n      "])), inputDisabled ? "cursor-not-allowed opacity-60 rounded bg-grey-100" : "cursor-pointer", !checked && !inputDisabled && "rounded hover:bg-accent-200/20 transition-colors duration-100 ease-linear")
   }, (0, _utils.buildAnimationProps)(context.name, value)), {}, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
       className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["w-0 h-0 opacity-0"]))),

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

@@ -1,6 +1,15 @@
 import type { ReactNode } from "react";
 import type { ColumnDefinition, DataConfiguration, GetItemId, PaginationConfiguration, Row, SelectMode, Sorting, Status } from "./types";
 declare type CanSelectItem<Item> = (item: Item, idx: number) => boolean;
+export declare type DataTableLocale = {
+    selectAllButton?: string;
+    noDataTitle?: string;
+    noDataDescription?: string;
+    loadingTitle?: string;
+    loadingDescription?: string;
+    errorTitle?: string;
+    errorDescription?: string;
+};
 interface BaseDataTableProps<Item> {
     data: Item[];
     itemId?: GetItemId<Item>;
@@ -13,6 +22,7 @@ interface BaseDataTableProps<Item> {
     columns: ColumnDefinition<Item>[];
     canHoverRow?(row: Row<Item>): boolean;
     onRowHoveredChanged?(row: Row<Item> | null): void;
+    locale?: DataTableLocale;
 }
 declare type DataTableWithSelectMode<Item> = {
     selectMode: Exclude<SelectMode, "none">;
@@ -46,5 +56,5 @@ export declare type DataTableProps<Item> = BaseDataTableProps<Item> & (DataTable
  * - If a cell is empty or unavailable, keep the cell empty to reduce noise and help with legibility.
  * - Truncate long text to make it fit into a cell. However, choose column width wisely based on expected values, and adjust the table accordingly
  */
-export declare const DataTable: <Item extends {}>({ data, itemId, columns, onChange, status, noDataContent, errorContent, sorting, pagination, selectMode, selection, onSelectionChange, canSelectItem, canHoverRow, onRowHoveredChanged, }: DataTableProps<Item>) => JSX.Element;
+export declare const DataTable: <Item extends {}>({ data, itemId, columns, onChange, status, noDataContent, errorContent, sorting, pagination, selectMode, selection, onSelectionChange, canSelectItem, canHoverRow, onRowHoveredChanged, locale: propsLocale, }: DataTableProps<Item>) => JSX.Element;
 export default DataTable;

package/cjs/Tables/DataTable/DataTable.js

@@ -7,14 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.DataTable = void 0;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _compact = _interopRequireDefault(require("lodash/compact"));
 
 var _get = _interopRequireDefault(require("lodash/get"));
@@ -25,6 +25,8 @@ var _Checkbox = _interopRequireDefault(require("../../Checkbox"));
 
 var _RadioGroup = require("../../RadioGroup");
 
+var _Satellite = require("../../Satellite");
+
 var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
 
 var _utils = require("../../utils");
@@ -47,6 +49,16 @@ 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_DATATABLE_LOCALE = {
+  selectAllButton: "Select all",
+  noDataTitle: "Empty",
+  noDataDescription: "There is no data to display",
+  loadingTitle: "It appears to be taking a while to get your data",
+  loadingDescription: "Please hold or try again later",
+  errorTitle: "Error",
+  errorDescription: "An error occurred while loading data."
+};
+
 var DEFAULT_GET_ITEM_ID = function DEFAULT_GET_ITEM_ID(_, idx) {
   return String(idx);
 };
@@ -90,7 +102,11 @@ var DataTable = function DataTable(_ref) {
       onSelectionChange = _ref.onSelectionChange,
       canSelectItem = _ref.canSelectItem,
       canHoverRow = _ref.canHoverRow,
-      onRowHoveredChanged = _ref.onRowHoveredChanged;
+      onRowHoveredChanged = _ref.onRowHoveredChanged,
+      propsLocale = _ref.locale;
+  var contextLocale = (0, _Satellite.useLocale)("dataTable");
+
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_DATATABLE_LOCALE), contextLocale), propsLocale);
 
   if (process.env.NODE_ENV !== "production") {
     var _selection$length;
@@ -152,7 +168,7 @@ var DataTable = function DataTable(_ref) {
       var isChecked = selectionLength === dataLength;
       var isIndeterminate = selectionLength > 0 && selectionLength !== dataLength;
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox["default"], {
-        "aria-label": "Select all" // Small hack to position the checkbox in the center of the header
+        "aria-label": locale.selectAllButton // Small hack to position the checkbox in the center of the header
         ,
         className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["absolute mb-2.5"]))),
         checked: isChecked,
@@ -239,9 +255,10 @@ var DataTable = function DataTable(_ref) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["relative"]))),
     children: [status === "loading" && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["absolute bg-white z-10 bg-opacity-50 w-full h-full flex items-center justify-center"]))),
+      className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["absolute bg-white/50 z-10 w-full h-full flex items-center justify-center"]))),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loader["default"], {
-        className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["-mt-12"])))
+        className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["-mt-12"]))),
+        locale: locale
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Table["default"], {
       className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["datatable ", " ", ""])), status === "loading" && "pointer-events-none select-none", status === "loading" && data.length === 0 && "h-48"),
@@ -265,7 +282,8 @@ var DataTable = function DataTable(_ref) {
         selection: selection,
         canHoverRow: canHoverRow,
         onRowHoverChange: onRowHoverChange,
-        onSelectionChange: onSelectionChange
+        onSelectionChange: onSelectionChange,
+        locale: locale
       })]
     })]
   });

package/cjs/Tables/DataTable/DataTable.tailwind.d.ts

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

package/cjs/Tables/DataTable/DataTable.tailwind.js

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

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

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import type { DataTableProps } from "../DataTable";
+import type { DataTableLocale, DataTableProps } from "../DataTable";
 import type { AdvancedColumnDefinition, Row, SelectMode, Status } from "../types";
 export interface BodyProps<Item> extends Pick<DataTableProps<Item>, "selection" | "onSelectionChange" | "canHoverRow"> {
     rows: Row<Item>[];
@@ -9,6 +9,7 @@ export interface BodyProps<Item> extends Pick<DataTableProps<Item>, "selection"
     columns: AdvancedColumnDefinition<Item>[];
     onRowHoverChange(row: Row<Item> | null): void;
     selectMode: SelectMode;
+    locale: Required<DataTableLocale>;
 }
-export declare const Body: <Item extends {}>({ rows, columns, status, noDataContent, errorContent, selectMode, selection, onSelectionChange, onRowHoverChange, canHoverRow, }: BodyProps<Item>) => JSX.Element;
+export declare const Body: <Item extends {}>({ rows, columns, status, noDataContent, errorContent, selectMode, selection, onSelectionChange, onRowHoverChange, canHoverRow, locale, }: BodyProps<Item>) => JSX.Element;
 export default Body;

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

@@ -43,7 +43,8 @@ var Body = function Body(_ref) {
       _ref$canHoverRow = _ref.canHoverRow,
       canHoverRow = _ref$canHoverRow === void 0 ? function () {
     return true;
-  } : _ref$canHoverRow;
+  } : _ref$canHoverRow,
+      locale = _ref.locale;
 
   var handleRowSelection = function handleRowSelection(row) {
     if (!onSelectionChange) return;
@@ -81,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: "Error",
-              description: "An error occurred while loading data.",
+              title: locale.errorTitle,
+              description: locale.errorDescription,
               centered: true,
               usageContext: "result"
             })
@@ -100,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: "Empty",
-              description: "There is no data to display",
+              title: locale.noDataTitle,
+              description: locale.noDataDescription,
               centered: true,
               usageContext: "result"
             })

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

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

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

@@ -24,7 +24,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject;
 
 var Loader = function Loader(_ref) {
-  var className = _ref.className;
+  var className = _ref.className,
+      locale = _ref.locale;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -49,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: "It appears to be taking a while to get your data",
-      description: "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.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/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

@@ -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);
       }
     }
@@ -84,8 +84,6 @@ var LinkTab = function LinkTab(_ref3) {
     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,
     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,6 +11,7 @@ export interface TagProps extends DetailedHTMLProps<HTMLAttributes<HTMLSpanEleme
      * */
     variant?: TagVariants;
     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 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" | "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

@@ -19,11 +19,13 @@ 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");
 
-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;
 
@@ -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,17 +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,
+      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, _classnames["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), {}, {
@@ -101,7 +110,7 @@ var Tag = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["tag-close-button"]))), BUTTON_CLOSE_VARIANT_CLASSNAMES[variant]),
       type: "button",
       onClick: handleDelete,
-      "aria-label": "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.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.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;
+};