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

package/esm/Dropzone/Dropzone.js

@@ -1,9 +1,9 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-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;
 
@@ -11,12 +11,13 @@ 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) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-import cx from "classnames";
+import cx from "clsx";
 import { Fragment, useCallback, useMemo, useState } from "react";
 import { useDropzone } from "react-dropzone";
 import { Check, UploadCloud, X } from "react-feather";
 import { IconButton } from "../Button";
 import { useFieldState } from "../Field";
+import { useLocale } from "../Satellite";
 import stl from "../styles/helpers/satellitePrefixer";
 import { formatHumanSize } from "../utils/formatters";
 import { uniqueId } from "../utils/uniqueId";
@@ -36,6 +37,9 @@ var STATUS_CLASSNAMES = {
   invalid: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["input-invalid"]))),
   validated: ""
 };
+var DEFAULT_DROPZONE_LOCALE = {
+  clearInput: "Clear input"
+};
 
 var InvalidIcon = function InvalidIcon() {
   return /*#__PURE__*/_jsx(X, {
@@ -59,8 +63,13 @@ export var Dropzone = function Dropzone(_ref2) {
       clearable = _ref2$clearable === void 0 ? false : _ref2$clearable,
       onChange = _ref2.onChange,
       className = _ref2.className,
+      propsLocale = _ref2.locale,
       props = _objectWithoutProperties(_ref2, _excluded);
 
+  var contextLocale = useLocale("dropzone");
+
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_DROPZONE_LOCALE), contextLocale), propsLocale);
+
   var _useState = useState([]),
       _useState2 = _slicedToArray(_useState, 2),
       files = _useState2[0],
@@ -104,7 +113,7 @@ export var Dropzone = function Dropzone(_ref2) {
   var StatusIcon = status === "invalid" ? InvalidIcon : status === "validated" ? ValidatedIcon : Fragment;
   return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({}, getRootProps({
     "aria-controls": dropzoneId,
-    className: cx(stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n            input group\n            ", "\n            ", "\n            min-h-16 cursor-pointer\n            ", ""])), focused && "input-focused", disabled && "input-disabled cursor-not-allowed", isDragReject ? "border-red-200 cursor-not-allowed" : isDragActive ? "border-nebula-500" : null), STATUS_CLASSNAMES[status], className),
+    className: cx(stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n            input group\n            ", "\n            ", "\n            min-h-16 cursor-pointer\n            ", ""])), focused && "input-focused", disabled && "input-disabled cursor-not-allowed", isDragReject ? "border-red-200 cursor-not-allowed" : isDragActive ? "border-accent-500" : null), STATUS_CLASSNAMES[status], className),
     onClick: function onClick(evt) {
       // Helps with https://github.com/react-dropzone/react-dropzone/issues/182
       if (evt.target.closest("label")) {
@@ -139,14 +148,14 @@ export var Dropzone = function Dropzone(_ref2) {
           className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["", ""])), disabled ? "text-grey-200" : "text-grey-500")
         }), /*#__PURE__*/_jsx("p", {
           className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["", ""])), 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__*/_jsx("span", {
       className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral([""]))),
       children: /*#__PURE__*/_jsx(IconButton, {
         className: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["mr-2 ", ""])), focused ? "visible" : "invisible group-hover:visible"),
-        title: "Clear input",
+        title: locale.clearInput,
         icon: X,
         variant: "subtle",
         size: "small",

package/esm/EmptyState/EmptyState.js

@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24;
 
-import cx from "classnames";
+import cx from "clsx";
 import FlexGrid from "../FlexGrid";
 import stl from "../styles/helpers/satellitePrefixer";
 import { jsx as _jsx } from "react/jsx-runtime";

package/esm/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/esm/EmptyState/EmptyState.tailwind.js

@@ -1,17 +1,14 @@
+import _plugin from "tailwindcss/plugin";
 // @ts-check
-
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
-var emptyStatePlugin = function emptyStatePlugin(_ref) {
+var plugin = _plugin;
+var emptyStatePlugin = plugin(function (_ref) {
   var addComponents = _ref.addComponents;
   // Empty State illustration
   addComponents({
     ".empty-state-illustration": {
-      minWidth: 500,
-      minHeight: 500
+      minWidth: "500px",
+      minHeight: "500px"
     }
   });
-};
-
+});
 export default emptyStatePlugin;

package/esm/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/esm/Field/Field.js

@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 
-import cx from "classnames";
+import cx from "clsx";
 import { AlertCircle } from "react-feather";
 import stl from "../styles/helpers/satellitePrefixer";
 import FieldStateContext, { DEFAULT_STATE } from "./FieldStateContext";

package/esm/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/esm/Flag/Flag.js

@@ -1,17 +1,26 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
 
-import cx from "classnames";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import cx from "clsx";
 import { useEffect, useRef, useState } from "react";
 import { Check, X } from "react-feather";
 import { IconButton } from "../Button";
 import { Card } from "../Card";
 import ProgressSpinner from "../ProgressSpinner";
+import { useLocale } from "../Satellite";
 import stl from "../styles/helpers/satellitePrefixer";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+var DEFAULT_FLAG_LOCALE = {
+  dismissText: "Dismiss"
+};
 var VARIANT_CLASSNAMES = {
   grey: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["bg-grey-500"]))),
   accent: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["bg-accent-500"]))),
@@ -38,7 +47,11 @@ export 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 = useLocale("flag");
+
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_FLAG_LOCALE), contextLocale), propsLocale);
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -74,7 +87,7 @@ export var Flag = function Flag(_ref) {
         size: 16,
         className: cx(stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["mt-1"]))), VARIANT_SPINNER_CLASSNAMES[variant])
       }) : /*#__PURE__*/_jsx(Icon, {
-        className: cx(stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["flex-shrink-0 text-white rounded-full p-2px mt-1"]))), VARIANT_CLASSNAMES[variant]),
+        className: cx(stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["shrink-0 text-white rounded-full p-2px mt-1"]))), VARIANT_CLASSNAMES[variant]),
         size: 16
       }), /*#__PURE__*/_jsxs("div", {
         className: stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["flex-1 ml-4"]))),
@@ -86,7 +99,7 @@ export var Flag = function Flag(_ref) {
             children: children
           }), onDismiss && /*#__PURE__*/_jsx(IconButton, {
             icon: X,
-            title: "Dismiss",
+            title: locale.dismissText,
             variant: "subtle",
             size: "small",
             onClick: onDismiss

package/esm/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/esm/Flag/Flag.tailwind.js

@@ -1,40 +1,33 @@
+import _plugin from "tailwindcss/plugin";
 // @ts-check
-
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
-var flagPlugin = function flagPlugin(_ref) {
+var plugin = _plugin;
+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")
     }
   });
-};
-
+});
 export default flagPlugin;

package/esm/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/esm/Flag/Flags.js

@@ -9,8 +9,8 @@ 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) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-import { createPortal } from "react-dom";
 import { CSSTransition, TransitionGroup } from "react-transition-group";
+import { useCreatePortal } from "../Satellite";
 import stl from "../styles/helpers/satellitePrefixer";
 import Flag from "./Flag";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -56,7 +56,8 @@ var TRANSITION_TIMEOUT = 500;
 export var Flags = function Flags(_ref) {
   var _ref$notifications = _ref.notifications,
       notifications = _ref$notifications === void 0 ? [] : _ref$notifications;
-  return /*#__PURE__*/createPortal( /*#__PURE__*/_jsx(TransitionGroup, {
+  var createPortal = useCreatePortal();
+  return createPortal( /*#__PURE__*/_jsx(TransitionGroup, {
     className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["z-notification bottom-0 right-0 fixed flex flex-col items-end p-4"]))),
     component: "ul",
     children: notifications.map(function (_ref2) {
@@ -81,6 +82,6 @@ export var Flags = function Flags(_ref) {
         })
       }, id);
     })
-  }), document.body);
+  }));
 };
 export default Flags;

package/esm/Flag/types.d.ts

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

package/esm/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/esm/FlexGrid/FlexGrid.js

@@ -3,7 +3,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
 
 // Heavily inspired by https://github.com/Shopify/polaris-react/blob/2b34f8609e9f08c1a767abea0a235bcc17706b63/src/components/Stack/Stack.tsx#L1
-import cx from "classnames";
+import cx from "clsx";
 import { Children, isValidElement } from "react";
 import stl from "../styles/helpers/satellitePrefixer";
 import isRenderedChild from "../utils/isRenderedChild";

package/esm/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/esm/FlexGrid/FlexGrid.tailwind.js

@@ -4,15 +4,13 @@ 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) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
+import _plugin from "tailwindcss/plugin";
 // @ts-check
-
-/**
- * Taking some heavy pointers from Polaris https://github.com/Shopify/polaris-react/blob/2b34f8609e9f08c1a767abea0a235bcc17706b63/src/components/Stack/Stack.scss#L1 🙇🏻‍♂️
- **/
-
+var plugin = _plugin;
 /**
  * @param {string} value
  */
+
 var negate = function negate(value) {
   return "-".concat(value);
 };
@@ -34,11 +32,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({
@@ -48,7 +46,7 @@ var flexGridPlugin = function flexGridPlugin(_ref) {
     ".flex-grid-inner": {
       "> *": {
         flex: "0 0 auto",
-        minWidth: 0,
+        minWidth: "0px",
         maxWidth: "100%"
       }
     },
@@ -72,6 +70,5 @@ var flexGridPlugin = function flexGridPlugin(_ref) {
     ".flex-grid-lg": _objectSpread({}, generateSpacing(theme("spacing.6"))),
     ".flex-grid-xl": _objectSpread({}, generateSpacing(theme("spacing.8")))
   });
-};
-
+});
 export default flexGridPlugin;

package/esm/HelpUnderline/HelpUnderline.js

@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2, _templateObject3;
 
-import cx from "classnames";
+import cx from "clsx";
 import stl from "../styles/helpers/satellitePrefixer";
 import { TooltipWrapper } from "../Tooltip";
 import { jsx as _jsx } from "react/jsx-runtime";

package/esm/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/esm/HelpUnderline/HelpUnderline.tailwind.js

@@ -1,9 +1,7 @@
+import _plugin from "tailwindcss/plugin";
 // @ts-check
-
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
-var helpUnderlinePlugin = function helpUnderlinePlugin(_ref) {
+var plugin = _plugin;
+var helpUnderlinePlugin = plugin(function (_ref) {
   var addComponents = _ref.addComponents,
       theme = _ref.theme;
   addComponents({
@@ -18,6 +16,5 @@ var helpUnderlinePlugin = function helpUnderlinePlugin(_ref) {
       }
     }
   });
-};
-
+});
 export default helpUnderlinePlugin;

package/esm/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/esm/Input/Input.js

@@ -2,7 +2,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-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;
 
@@ -10,17 +10,23 @@ 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) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-import cx from "classnames";
+import cx from "clsx";
 import { forwardRef, Fragment, useEffect, useState } from "react";
 import { Check, ChevronDown, ChevronUp, Search, X } from "react-feather";
 import { IconButton } from "../Button";
 import useFieldState from "../Field/useFieldState";
+import { useLocale } from "../Satellite";
 import stl from "../styles/helpers/satellitePrefixer";
 import isNil from "../utils/isNil";
 import useForwardedRef from "../utils/useForwardedRef";
 import useTriggerInputChange from "../utils/useTriggerInputChange";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+var DEFAULT_INPUT_LOCALE = {
+  clearInput: "Clear input",
+  increment: "Increment",
+  decrement: "Decrement"
+};
 var STATUS_CLASSNAMES = {
   "default": "",
   invalid: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["input-invalid"]))),
@@ -71,8 +77,13 @@ export var Input = /*#__PURE__*/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 = _objectWithoutProperties(_ref, _excluded);
 
+  var contextLocale = useLocale("input");
+
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_INPUT_LOCALE), contextLocale), propsLocale);
+
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       focused = _useState2[0],
@@ -147,7 +158,7 @@ export var Input = /*#__PURE__*/forwardRef(function (_ref, externalRef) {
       }
     })), clearable && !disabled && !readOnly && !isValueEmpty && /*#__PURE__*/_jsx(IconButton, {
       className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["mr-2 ", ""])), focused ? "visible" : "invisible group-hover:visible"),
-      title: "Clear input",
+      title: locale.clearInput,
       icon: X,
       variant: "subtle",
       size: "small",
@@ -167,7 +178,7 @@ export var Input = /*#__PURE__*/forwardRef(function (_ref, externalRef) {
         type: "button",
         disabled: readOnly,
         className: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["input-spinner-button ", ""])), readOnly && "cursor-not-allowed"),
-        "aria-label": "increment",
+        "aria-label": locale.increment,
         onClick: function onClick() {
           var _inputRef$current$val, _inputRef$current2;
 
@@ -193,7 +204,7 @@ export var Input = /*#__PURE__*/forwardRef(function (_ref, externalRef) {
         type: "button",
         disabled: readOnly,
         className: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["input-spinner-button ", ""])), readOnly && "cursor-not-allowed"),
-        "aria-label": "decrement",
+        "aria-label": locale.decrement,
         onClick: function onClick() {
           var _inputRef$current$val2, _inputRef$current3;
 

package/esm/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/esm/Input/Input.tailwind.js

@@ -1,13 +1,11 @@
-import _disabledColor from "../styles/disabledColor";
 import _rgba from "../styles/rgba";
+import _disabledColor from "../styles/disabledColor";
+import _plugin from "tailwindcss/plugin";
 // @ts-check
-var rgba = _rgba;
+var plugin = _plugin;
 var disabledColor = _disabledColor;
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
-
-var inputPlugin = function inputPlugin(_ref) {
+var rgba = _rgba;
+var inputPlugin = plugin(function (_ref) {
   var addComponents = _ref.addComponents,
       theme = _ref.theme;
   addComponents({
@@ -25,8 +23,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",
@@ -35,7 +33,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"
@@ -78,15 +76,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",
@@ -94,10 +92,9 @@ var inputPlugin = function inputPlugin(_ref) {
         outline: "none"
       },
       "&:not(:last-child)": {
-        borderBottomWidth: 1
+        borderBottomWidth: "1px"
       }
     }
   });
-};
-
+});
 export default inputPlugin;

package/esm/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.