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

package/cjs/Dropzone/Dropzone.js

@@ -7,12 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.Dropzone = void 0;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
@@ -29,6 +29,8 @@ var _Button = require("../Button");
 
 var _Field = require("../Field");
 
+var _Satellite = require("../Satellite");
+
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 
 var _formatters = require("../utils/formatters");
@@ -37,7 +39,7 @@ var _uniqueId = require("../utils/uniqueId");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _excluded = ["id", "placeholder", "disabled", "multiple", "clearable", "onChange", "className"];
+var _excluded = ["id", "placeholder", "disabled", "multiple", "clearable", "onChange", "className", "locale"];
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
 
@@ -58,6 +60,9 @@ var STATUS_CLASSNAMES = {
   invalid: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["input-invalid"]))),
   validated: ""
 };
+var DEFAULT_DROPZONE_LOCALE = {
+  clearInput: "Clear input"
+};
 
 var InvalidIcon = function InvalidIcon() {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFeather.X, {
@@ -81,7 +86,11 @@ var Dropzone = function Dropzone(_ref2) {
       clearable = _ref2$clearable === void 0 ? false : _ref2$clearable,
       onChange = _ref2.onChange,
       className = _ref2.className,
+      propsLocale = _ref2.locale,
       props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
+  var contextLocale = (0, _Satellite.useLocale)("dropzone");
+
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_DROPZONE_LOCALE), contextLocale), propsLocale);
 
   var _useState = (0, _react.useState)([]),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -161,14 +170,14 @@ var Dropzone = function Dropzone(_ref2) {
           className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["", ""])), disabled ? "text-grey-200" : "text-grey-500")
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
           className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["", ""])), disabled ? "text-grey-300" : "typo-subdued"),
-          children: placeholder !== null && placeholder !== void 0 ? placeholder : "Drop ".concat(multiple ? "files" : "file", " here or click to select.")
+          children: placeholder || "Drop ".concat(multiple ? "files" : "file", " here or click to select.")
         })]
       })
     }), clearable && !disabled && !isValueEmpty && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])([""]))),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
         className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["mr-2 ", ""])), focused ? "visible" : "invisible group-hover:visible"),
-        title: "Clear input",
+        title: locale.clearInput,
         icon: _reactFeather.X,
         variant: "subtle",
         size: "small",

package/cjs/EmptyState/EmptyState.tailwind.d.ts

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

package/cjs/EmptyState/EmptyState.tailwind.js

@@ -1,19 +1,16 @@
 "use strict";
 
 // @ts-check
+var plugin = require("tailwindcss/plugin");
 
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
-var emptyStatePlugin = function emptyStatePlugin(_ref) {
+var emptyStatePlugin = plugin(function (_ref) {
   var addComponents = _ref.addComponents;
   // Empty State illustration
   addComponents({
     ".empty-state-illustration": {
-      minWidth: 500,
-      minHeight: 500
+      minWidth: "500px",
+      minHeight: "500px"
     }
   });
-};
-
+});
 module.exports = emptyStatePlugin;

package/cjs/Field/Field.d.ts

@@ -14,6 +14,7 @@ export interface FieldProps {
      */
     state?: FieldState;
     inline?: boolean;
+    children: ReactNode;
 }
 /**
  * Use text fields to help users enter, select, and search for text. Text fields are normally found within a form but can also be part of a modal, search, or card

package/cjs/Flag/Flag.d.ts

@@ -1,5 +1,6 @@
 import type { FunctionComponent } from "react";
 import type { Notification } from "./types";
+export declare type FlagLocale = Notification["locale"];
 export declare type FlagProps = Omit<Notification, "id" | "content">;
 export declare const Flag: FunctionComponent<FlagProps>;
 export default Flag;

package/cjs/Flag/Flag.js

@@ -9,6 +9,8 @@ exports["default"] = exports.Flag = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -23,12 +25,21 @@ var _Card = require("../Card");
 
 var _ProgressSpinner = _interopRequireDefault(require("../ProgressSpinner"));
 
+var _Satellite = require("../Satellite");
+
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var DEFAULT_FLAG_LOCALE = {
+  dismissText: "Dismiss"
+};
 var VARIANT_CLASSNAMES = {
   grey: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["bg-grey-500"]))),
   accent: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["bg-accent-500"]))),
@@ -56,7 +67,11 @@ var Flag = function Flag(_ref) {
       _ref$variant = _ref.variant,
       variant = _ref$variant === void 0 ? "accent" : _ref$variant,
       autoDismissAfter = _ref.autoDismissAfter,
+      propsLocale = _ref.locale,
       children = _ref.children;
+  var contextLocale = (0, _Satellite.useLocale)("flag");
+
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_FLAG_LOCALE), contextLocale), propsLocale);
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -92,7 +107,7 @@ var Flag = function Flag(_ref) {
         size: 16,
         className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["mt-1"]))), VARIANT_SPINNER_CLASSNAMES[variant])
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
-        className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["flex-shrink-0 text-white rounded-full p-2px mt-1"]))), VARIANT_CLASSNAMES[variant]),
+        className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["shrink-0 text-white rounded-full p-2px mt-1"]))), VARIANT_CLASSNAMES[variant]),
         size: 16
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["flex-1 ml-4"]))),
@@ -104,7 +119,7 @@ var Flag = function Flag(_ref) {
             children: children
           }), onDismiss && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
             icon: _reactFeather.X,
-            title: "Dismiss",
+            title: locale.dismissText,
             variant: "subtle",
             size: "small",
             onClick: onDismiss

package/cjs/Flag/Flag.tailwind.d.ts

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

package/cjs/Flag/Flag.tailwind.js

@@ -1,42 +1,35 @@
 "use strict";
 
 // @ts-check
+var plugin = require("tailwindcss/plugin");
 
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
-var flagPlugin = function flagPlugin(_ref) {
+var flagPlugin = plugin(function (_ref) {
   var addComponents = _ref.addComponents;
-
-  /**
-   * @param {string} color
-   */
   var TRANSITION_TIMEOUT = 500;
   addComponents({
     ".flag": {
-      width: 320
+      width: "320px"
     }
   });
   addComponents({
     ".flags_item-enter": {
-      opacity: 0.01,
+      opacity: "0.01",
       transform: "translate(0, 80px)"
     },
     ".flags_item-enter-active": {
-      opacity: 1,
+      opacity: "1",
       transform: "translate(0, 0)",
       transition: "all ".concat(TRANSITION_TIMEOUT, "ms ease-in")
     },
     ".flags_item-exit": {
-      opacity: 1,
+      opacity: "1",
       transform: "translate(0, 0)"
     },
     ".flags_item-exit-active": {
-      opacity: 0.01,
+      opacity: "0.01",
       transform: "translate(0, 80px)",
       transition: "all ".concat(TRANSITION_TIMEOUT, "ms ease-in")
     }
   });
-};
-
+});
 module.exports = flagPlugin;

package/cjs/Flag/Flags.d.ts

@@ -44,5 +44,5 @@ export interface FlagsProps {
  *
  * When there are multiple flags, they will stack on top of one another with the most recent flag on top. When a user dismisses a flag, any older flags 'below' will come to the top. Careful consideration should be taken to take into account the ordering and priority of flags in the stack. Never use dismissible and non-dismissible flags in a stack as flags that automatically dismiss can do so and not be visible to the user.
  */
-export declare const Flags: ({ notifications }: FlagsProps) => import("react").ReactPortal;
+export declare const Flags: ({ notifications }: FlagsProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 export default Flags;

package/cjs/Flag/Flags.js

@@ -13,10 +13,10 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _reactDom = require("react-dom");
-
 var _reactTransitionGroup = require("react-transition-group");
 
+var _Satellite = require("../Satellite");
+
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 
 var _Flag = _interopRequireDefault(require("./Flag"));
@@ -73,7 +73,8 @@ var TRANSITION_TIMEOUT = 500;
 var Flags = function Flags(_ref) {
   var _ref$notifications = _ref.notifications,
       notifications = _ref$notifications === void 0 ? [] : _ref$notifications;
-  return /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.TransitionGroup, {
+  var createPortal = (0, _Satellite.useCreatePortal)();
+  return createPortal( /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.TransitionGroup, {
     className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["z-notification bottom-0 right-0 fixed flex flex-col items-end p-4"]))),
     component: "ul",
     children: notifications.map(function (_ref2) {
@@ -97,7 +98,7 @@ var Flags = function Flags(_ref) {
         })
       }, id);
     })
-  }), document.body);
+  }));
 };
 
 exports.Flags = Flags;

package/cjs/Flag/types.d.ts

@@ -15,4 +15,8 @@ export interface Notification {
     variant?: ColorVariant;
     onDismiss?: () => void;
     autoDismissAfter?: number;
+    locale?: {
+        dismissText?: string;
+    };
+    children?: ReactNode;
 }

package/cjs/FlexGrid/FlexGrid.d.ts

@@ -1,4 +1,4 @@
-import type { FunctionComponent } from "react";
+import type { FunctionComponent, ReactNode } from "react";
 export declare type FlexGridDirection = "row" | "column";
 export declare type FlexGridAlignment = "leading" | "trailing" | "center" | "fill" | "baseline";
 export declare type FlexGridDistribution = "equalSpacing" | "leading" | "trailing" | "center" | "fill" | "fillEvenly";
@@ -11,6 +11,7 @@ export interface FlexGridProps {
     alignment?: FlexGridAlignment;
     distribution?: FlexGridDistribution;
     spacing?: FlexGridSpacing;
+    children: ReactNode;
 }
 export declare const FlexGrid: FunctionComponent<FlexGridProps>;
 export default FlexGrid;

package/cjs/FlexGrid/FlexGrid.tailwind.d.ts

@@ -1,5 +1,8 @@
 export = flexGridPlugin;
 /**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
-declare const flexGridPlugin: import('../tailwind-types').TailwindPlugin;
+ * Taking some heavy pointers from Polaris https://github.com/Shopify/polaris-react/blob/2b34f8609e9f08c1a767abea0a235bcc17706b63/src/components/Stack/Stack.scss#L1 🙇🏻‍♂️
+ **/
+declare const flexGridPlugin: {
+    handler: import("tailwindcss/types/config").PluginCreator;
+    config?: import("tailwindcss").Config | undefined;
+};

package/cjs/FlexGrid/FlexGrid.tailwind.js

@@ -9,14 +9,12 @@ 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; }
 
 // @ts-check
-
-/**
- * Taking some heavy pointers from Polaris https://github.com/Shopify/polaris-react/blob/2b34f8609e9f08c1a767abea0a235bcc17706b63/src/components/Stack/Stack.scss#L1 🙇🏻‍♂️
- **/
-
+var plugin = require("tailwindcss/plugin");
 /**
  * @param {string} value
  */
+
+
 var negate = function negate(value) {
   return "-".concat(value);
 };
@@ -38,11 +36,11 @@ var generateSpacing = function generateSpacing(spacing) {
   };
 };
 /**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
+ * Taking some heavy pointers from Polaris https://github.com/Shopify/polaris-react/blob/2b34f8609e9f08c1a767abea0a235bcc17706b63/src/components/Stack/Stack.scss#L1 🙇🏻‍♂️
+ **/
 
 
-var flexGridPlugin = function flexGridPlugin(_ref) {
+var flexGridPlugin = plugin(function (_ref) {
   var addComponents = _ref.addComponents,
       theme = _ref.theme;
   addComponents({
@@ -52,7 +50,7 @@ var flexGridPlugin = function flexGridPlugin(_ref) {
     ".flex-grid-inner": {
       "> *": {
         flex: "0 0 auto",
-        minWidth: 0,
+        minWidth: "0px",
         maxWidth: "100%"
       }
     },
@@ -76,6 +74,5 @@ var flexGridPlugin = function flexGridPlugin(_ref) {
     ".flex-grid-lg": _objectSpread({}, generateSpacing(theme("spacing.6"))),
     ".flex-grid-xl": _objectSpread({}, generateSpacing(theme("spacing.8")))
   });
-};
-
+});
 module.exports = flexGridPlugin;

package/cjs/HelpUnderline/HelpUnderline.d.ts

@@ -1,6 +1,7 @@
 import type { FunctionComponent } from "react";
 import { TooltipWrapperProps } from "../Tooltip";
 export interface HelpUnderlineProps {
+    /** @ignore */
     className?: string;
     placement?: TooltipWrapperProps["placement"];
     tooltipClassName?: TooltipWrapperProps["tooltipClassName"];

package/cjs/HelpUnderline/HelpUnderline.tailwind.d.ts

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

package/cjs/HelpUnderline/HelpUnderline.tailwind.js

@@ -1,11 +1,9 @@
 "use strict";
 
 // @ts-check
+var plugin = require("tailwindcss/plugin");
 
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
-var helpUnderlinePlugin = function helpUnderlinePlugin(_ref) {
+var helpUnderlinePlugin = plugin(function (_ref) {
   var addComponents = _ref.addComponents,
       theme = _ref.theme;
   addComponents({
@@ -20,6 +18,5 @@ var helpUnderlinePlugin = function helpUnderlinePlugin(_ref) {
       }
     }
   });
-};
-
+});
 module.exports = helpUnderlinePlugin;

package/cjs/Input/Input.d.ts

@@ -2,12 +2,18 @@ import type { InputHTMLAttributes, ReactNode } from "react";
 import type { IconComponentType } from "../types";
 export declare type InputVariant = "small" | "medium" | "large";
 export declare type InputStatus = "default" | "validated" | "invalid";
+export declare type InputPropsLocale = {
+    clearInput?: string;
+    increment?: string;
+    decrement?: string;
+};
 export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "checked" | "defaultChecked"> {
     type?: "text" | "number" | "search" | "email" | "password";
     variant?: InputVariant;
     startIcon?: IconComponentType;
     endItem?: ReactNode;
     clearable?: boolean;
+    locale?: InputPropsLocale;
 }
 /**
  * Use text fields to help users enter, select, and search for text. Text fields are normally found within a form but can also be part of a modal, search, or card

package/cjs/Input/Input.js

@@ -25,6 +25,8 @@ var _Button = require("../Button");
 
 var _useFieldState2 = _interopRequireDefault(require("../Field/useFieldState"));
 
+var _Satellite = require("../Satellite");
+
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 
 var _isNil = _interopRequireDefault(require("../utils/isNil"));
@@ -35,7 +37,7 @@ var _useTriggerInputChange = _interopRequireDefault(require("../utils/useTrigger
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _excluded = ["className", "style", "startIcon", "endItem", "disabled", "readOnly", "clearable", "type", "variant"];
+var _excluded = ["className", "style", "startIcon", "endItem", "disabled", "readOnly", "clearable", "type", "variant", "locale"];
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
 
@@ -43,6 +45,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_INPUT_LOCALE = {
+  clearInput: "Clear input",
+  increment: "Increment",
+  decrement: "Decrement"
+};
 var STATUS_CLASSNAMES = {
   "default": "",
   invalid: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["input-invalid"]))),
@@ -93,7 +100,11 @@ var Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, externalRef) {
       type = _ref$type === void 0 ? "text" : _ref$type,
       _ref$variant = _ref.variant,
       variant = _ref$variant === void 0 ? "medium" : _ref$variant,
+      propsLocale = _ref.locale,
       inputProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var contextLocale = (0, _Satellite.useLocale)("input");
+
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_INPUT_LOCALE), contextLocale), propsLocale);
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -169,7 +180,7 @@ var Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, externalRef) {
       }
     })), clearable && !disabled && !readOnly && !isValueEmpty && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
       className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["mr-2 ", ""])), focused ? "visible" : "invisible group-hover:visible"),
-      title: "Clear input",
+      title: locale.clearInput,
       icon: _reactFeather.X,
       variant: "subtle",
       size: "small",
@@ -189,7 +200,7 @@ var Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, externalRef) {
         type: "button",
         disabled: readOnly,
         className: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["input-spinner-button ", ""])), readOnly && "cursor-not-allowed"),
-        "aria-label": "increment",
+        "aria-label": locale.increment,
         onClick: function onClick() {
           var _inputRef$current$val, _inputRef$current2;
 
@@ -215,7 +226,7 @@ var Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, externalRef) {
         type: "button",
         disabled: readOnly,
         className: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["input-spinner-button ", ""])), readOnly && "cursor-not-allowed"),
-        "aria-label": "decrement",
+        "aria-label": locale.decrement,
         onClick: function onClick() {
           var _inputRef$current$val2, _inputRef$current3;
 

package/cjs/Input/Input.tailwind.d.ts

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

package/cjs/Input/Input.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 inputPlugin = function inputPlugin(_ref) {
+var inputPlugin = plugin(function (_ref) {
   var addComponents = _ref.addComponents,
       theme = _ref.theme;
   addComponents({
@@ -27,8 +25,8 @@ var inputPlugin = function inputPlugin(_ref) {
       overflow: "hidden",
       transition: "all 100ms ease-in-out",
       input: {
-        flex: 1,
-        minWidth: 0,
+        flex: "1",
+        minWidth: "0px",
         caretColor: theme("colors.grey.600"),
         color: theme("colors.grey.900"),
         background: "transparent",
@@ -37,7 +35,7 @@ var inputPlugin = function inputPlugin(_ref) {
         },
         "&[type=number]::-webkit-inner-spin-button, &[type=number]::-webkit-outer-spin-button": {
           "-webkit-appearance": "none",
-          margin: 0
+          margin: "0px"
         },
         "&:focus": {
           outline: "none"
@@ -80,15 +78,15 @@ var inputPlugin = function inputPlugin(_ref) {
       display: "flex",
       flexDirection: "column",
       height: "100%",
-      width: 24,
-      minWidth: 20
+      width: "24px",
+      minWidth: "20px"
     },
     ".input-spinner-button": {
       background: "linear-gradient(-180deg, ".concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.50"), " 100%)"),
       borderColor: theme("colors.grey.200"),
       borderStyle: "solid",
-      borderLeftWidth: 1,
-      flex: 1,
+      borderLeftWidth: "1px",
+      flex: "1",
       display: "inline-flex",
       alignItems: "center",
       justifyContent: "center",
@@ -96,10 +94,9 @@ var inputPlugin = function inputPlugin(_ref) {
         outline: "none"
       },
       "&:not(:last-child)": {
-        borderBottomWidth: 1
+        borderBottomWidth: "1px"
       }
     }
   });
-};
-
+});
 module.exports = inputPlugin;

package/cjs/Insert/Insert.d.ts

@@ -8,6 +8,7 @@ export interface InsertProps {
     /** Descriptive title for the `Insert` */
     title: ReactNode;
     contexts?: Array<string | InsertContext>;
+    children: ReactNode;
 }
 /**
 * Put more emphasis on side content.

package/cjs/InstantSearch/InstantSearch.tailwind.d.ts

@@ -1,6 +1,5 @@
-declare function _exports({ addComponents, prefix, theme }: {
-    addComponents: any;
-    prefix: any;
-    theme: any;
-}): void;
+declare const _exports: {
+    handler: import("tailwindcss/types/config").PluginCreator;
+    config?: import("tailwindcss").Config | undefined;
+};
 export = _exports;