@algolia/satellite 1.0.0-v3.99 → 1.1.0

package/dist/esm/Icons/WorkspaceSwitcherIcon.js

@@ -0,0 +1,27 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["width", "height"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { forwardRef } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var WorkspaceSwitcherIcon = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _ref$width = _ref.width,
+    width = _ref$width === void 0 ? 24 : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 24 : _ref$height,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx("svg", _objectSpread(_objectSpread({
+    ref: ref,
+    xmlns: "http://www.w3.org/2000/svg",
+    width: width,
+    height: height,
+    viewBox: "0 0 14 14"
+  }, rest), {}, {
+    children: /*#__PURE__*/_jsx("path", {
+      fill: "currentColor",
+      d: "M.499.25h3.553v3.553H.499zm0 4.974h3.553v3.553H.499zm0 4.973h3.553v3.553H.499zM5.472.25h3.553v3.553H5.472zm0 4.974h3.553v3.553H5.472zm0 4.973h3.553v3.553H5.472zM10.446.25h3.553v3.553h-3.553zm0 4.974h3.553v3.553h-3.553zm0 4.973h3.553v3.553h-3.553z"
+    })
+  }));
+});
+WorkspaceSwitcherIcon.displayName = "WorkspaceSwitcherIcon";

package/dist/esm/Icons/index.d.ts

@@ -0,0 +1,20 @@
+import type { ComponentClass, SVGAttributes, VoidFunctionComponent } from "react";
+export declare type IconProps = SVGAttributes<SVGElement>;
+export declare type IconComponentType = VoidFunctionComponent<IconProps> | ComponentClass<IconProps>;
+export { DragHandleIcon } from "./DragHandleIcon";
+export { NoFiltersIcon } from "./NoFiltersIcon";
+export { CrawlerIcon } from "./CrawlerIcon";
+export { NeuralSearchIcon } from "./NeuralSearchIcon";
+export { UnpinIcon } from "./UnpinIcon";
+export { PinIcon } from "./PinIcon";
+export { SettingsCategoryPagesIcon } from "./SettingsCategoryPagesIcon";
+export { SettingsConsequencesIcon } from "./SettingsConsequencesIcon";
+export { WorkspaceSwitcherIcon } from "./WorkspaceSwitcherIcon";
+export { AlgoliaSearchIcon } from "./AlgoliaSearchIcon";
+export { AlgoliaRecommendIcon } from "./AlgoliaRecommendIcon";
+export { ContextIcon } from "./ContextIcon";
+export { QueryBreakdownIcon } from "./QueryBreakdownIcon";
+export { BulbIcon } from "./BulbIcon";
+export { TestingIcon } from "./TestingIcon";
+export { RocketIcon } from "./RocketIcon";
+export { ActivityIcon, AirplayIcon, AlertCircleIcon, AlertOctagonIcon, AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, AnchorIcon, ApertureIcon, ArchiveIcon, ArrowDownCircleIcon, ArrowDownIcon, ArrowDownLeftIcon, ArrowDownRightIcon, ArrowLeftCircleIcon, ArrowLeftIcon, ArrowRightCircleIcon, ArrowRightIcon, ArrowUpCircleIcon, ArrowUpIcon, ArrowUpLeftIcon, ArrowUpRightIcon, AtSignIcon, AwardIcon, BanIcon, BarChart2Icon, BarChartIcon, BatteryChargingIcon, BatteryIcon, BellIcon, BellOffIcon, BluetoothIcon, BoldIcon, BookIcon, BookmarkIcon, BookOpenIcon, BoxIcon, BriefcaseIcon, CalendarIcon, CameraIcon, CameraOffIcon, CastIcon, CheckCircleIcon, CheckIcon, CheckSquareIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, ChevronUpIcon, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloudDrizzleIcon, CloudIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, CodeIcon, CodepenIcon, CodesandboxIcon, CoffeeIcon, ColumnsIcon, CommandIcon, CompassIcon, CopyIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, CpuIcon, CreditCardIcon, CropIcon, CrosshairIcon, DatabaseIcon, DeleteIcon, DiscIcon, DivideCircleIcon, DivideIcon, DivideSquareIcon, DollarSignIcon, DownloadCloudIcon, DownloadIcon, DribbbleIcon, DropletIcon, Edit2Icon, Edit3Icon, EditIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FacebookIcon, FastForwardIcon, FeatherIcon, FigmaIcon, FileIcon, FileMinusIcon, FilePlusIcon, FileTextIcon, FilmIcon, FilterIcon, FlagIcon, FlaskConicalIcon, FolderIcon, FolderMinusIcon, FolderPlusIcon, FramerIcon, FrownIcon, GiftIcon, GitBranchIcon, GitCommitIcon, GithubIcon, GitlabIcon, GitMergeIcon, GitPullRequestIcon, GlobeIcon, HardDriveIcon, HashIcon, HeadphonesIcon, HeartIcon, HelpCircleIcon, HexagonIcon, HomeIcon, ImageIcon, InboxIcon, InfoIcon, InstagramIcon, ItalicIcon, KeyIcon, LayersIcon, LayoutIcon, LayoutGridIcon, LifeBuoyIcon, Link2Icon, LinkedinIcon, LinkIcon, ListIcon, LoaderIcon, LockIcon, LogInIcon, LogOutIcon, MailIcon, MapIcon, MapPinIcon, Maximize2Icon, MaximizeIcon, MehIcon, MenuIcon, MessageCircleIcon, MessageSquareIcon, MicIcon, MicOffIcon, Minimize2Icon, MinimizeIcon, MinusCircleIcon, MinusIcon, MinusSquareIcon, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, MousePointerIcon, MoveIcon, MusicIcon, Navigation2Icon, NavigationIcon, OctagonIcon, PackageIcon, PaperclipIcon, PauseCircleIcon, PauseIcon, PenToolIcon, PercentIcon, PhoneCallIcon, PhoneForwardedIcon, PhoneIcon, PhoneIncomingIcon, PhoneMissedIcon, PhoneOffIcon, PhoneOutgoingIcon, PieChartIcon, PlayCircleIcon, PlayIcon, PlusCircleIcon, PlusIcon, PlusSquareIcon, PocketIcon, PowerIcon, PrinterIcon, RadioIcon, RefreshCcwIcon, RefreshCwIcon, RepeatIcon, RewindIcon, RotateCcwIcon, RotateCwIcon, RssIcon, SaveIcon, ScissorsIcon, SearchIcon, SendIcon, ServerIcon, SettingsIcon, Share2Icon, ShareIcon, ShieldIcon, ShieldOffIcon, ShoppingBagIcon, ShoppingCartIcon, ShuffleIcon, SidebarIcon, SkipBackIcon, SkipForwardIcon, SlackIcon, SlidersIcon, SmartphoneIcon, SmileIcon, SpeakerIcon, SquareIcon, StarIcon, StopCircleIcon, SunIcon, SunriseIcon, SunsetIcon, TableIcon, TabletIcon, TagIcon, TargetIcon, TerminalIcon, ThermometerIcon, ThumbsDownIcon, ThumbsUpIcon, ToggleLeftIcon, ToggleRightIcon, Trash2Icon, TrashIcon, TrelloIcon, TrendingDownIcon, TrendingUpIcon, TriangleIcon, TruckIcon, TvIcon, TwitchIcon, TwitterIcon, TypeIcon, UmbrellaIcon, UnderlineIcon, UnlockIcon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserMinusIcon, UserPlusIcon, UsersIcon, UserXIcon, VideoIcon, VideoOffIcon, VoicemailIcon, Volume1Icon, Volume2Icon, VolumeIcon, VolumeXIcon, WatchIcon, WifiIcon, WifiOffIcon, WindIcon, WrenchIcon, XCircleIcon, XIcon, XOctagonIcon, XSquareIcon, YoutubeIcon, ZapIcon, ZapOffIcon, ZoomInIcon, ZoomOutIcon, } from "lucide-react";

package/dist/esm/Icons/index.js

@@ -0,0 +1,22 @@
+// Not using ComponentType because it adds children to the props through the use of FunctionComponent.
+// TODO: Use ComponentType directly when upgrading to React 18
+// Custom icons
+export { DragHandleIcon } from "./DragHandleIcon";
+export { NoFiltersIcon } from "./NoFiltersIcon";
+export { CrawlerIcon } from "./CrawlerIcon";
+export { NeuralSearchIcon } from "./NeuralSearchIcon";
+export { UnpinIcon } from "./UnpinIcon";
+export { PinIcon } from "./PinIcon";
+export { SettingsCategoryPagesIcon } from "./SettingsCategoryPagesIcon";
+export { SettingsConsequencesIcon } from "./SettingsConsequencesIcon";
+export { WorkspaceSwitcherIcon } from "./WorkspaceSwitcherIcon";
+export { AlgoliaSearchIcon } from "./AlgoliaSearchIcon";
+export { AlgoliaRecommendIcon } from "./AlgoliaRecommendIcon";
+export { ContextIcon } from "./ContextIcon";
+export { QueryBreakdownIcon } from "./QueryBreakdownIcon";
+export { BulbIcon } from "./BulbIcon";
+export { TestingIcon } from "./TestingIcon";
+export { RocketIcon } from "./RocketIcon";
+
+// Feather icons
+export { ActivityIcon, AirplayIcon, AlertCircleIcon, AlertOctagonIcon, AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, AnchorIcon, ApertureIcon, ArchiveIcon, ArrowDownCircleIcon, ArrowDownIcon, ArrowDownLeftIcon, ArrowDownRightIcon, ArrowLeftCircleIcon, ArrowLeftIcon, ArrowRightCircleIcon, ArrowRightIcon, ArrowUpCircleIcon, ArrowUpIcon, ArrowUpLeftIcon, ArrowUpRightIcon, AtSignIcon, AwardIcon, BanIcon, BarChart2Icon, BarChartIcon, BatteryChargingIcon, BatteryIcon, BellIcon, BellOffIcon, BluetoothIcon, BoldIcon, BookIcon, BookmarkIcon, BookOpenIcon, BoxIcon, BriefcaseIcon, CalendarIcon, CameraIcon, CameraOffIcon, CastIcon, CheckCircleIcon, CheckIcon, CheckSquareIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, ChevronUpIcon, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloudDrizzleIcon, CloudIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, CodeIcon, CodepenIcon, CodesandboxIcon, CoffeeIcon, ColumnsIcon, CommandIcon, CompassIcon, CopyIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, CpuIcon, CreditCardIcon, CropIcon, CrosshairIcon, DatabaseIcon, DeleteIcon, DiscIcon, DivideCircleIcon, DivideIcon, DivideSquareIcon, DollarSignIcon, DownloadCloudIcon, DownloadIcon, DribbbleIcon, DropletIcon, Edit2Icon, Edit3Icon, EditIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FacebookIcon, FastForwardIcon, FeatherIcon, FigmaIcon, FileIcon, FileMinusIcon, FilePlusIcon, FileTextIcon, FilmIcon, FilterIcon, FlagIcon, FlaskConicalIcon, FolderIcon, FolderMinusIcon, FolderPlusIcon, FramerIcon, FrownIcon, GiftIcon, GitBranchIcon, GitCommitIcon, GithubIcon, GitlabIcon, GitMergeIcon, GitPullRequestIcon, GlobeIcon, HardDriveIcon, HashIcon, HeadphonesIcon, HeartIcon, HelpCircleIcon, HexagonIcon, HomeIcon, ImageIcon, InboxIcon, InfoIcon, InstagramIcon, ItalicIcon, KeyIcon, LayersIcon, LayoutIcon, LayoutGridIcon, LifeBuoyIcon, Link2Icon, LinkedinIcon, LinkIcon, ListIcon, LoaderIcon, LockIcon, LogInIcon, LogOutIcon, MailIcon, MapIcon, MapPinIcon, Maximize2Icon, MaximizeIcon, MehIcon, MenuIcon, MessageCircleIcon, MessageSquareIcon, MicIcon, MicOffIcon, Minimize2Icon, MinimizeIcon, MinusCircleIcon, MinusIcon, MinusSquareIcon, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, MousePointerIcon, MoveIcon, MusicIcon, Navigation2Icon, NavigationIcon, OctagonIcon, PackageIcon, PaperclipIcon, PauseCircleIcon, PauseIcon, PenToolIcon, PercentIcon, PhoneCallIcon, PhoneForwardedIcon, PhoneIcon, PhoneIncomingIcon, PhoneMissedIcon, PhoneOffIcon, PhoneOutgoingIcon, PieChartIcon, PlayCircleIcon, PlayIcon, PlusCircleIcon, PlusIcon, PlusSquareIcon, PocketIcon, PowerIcon, PrinterIcon, RadioIcon, RefreshCcwIcon, RefreshCwIcon, RepeatIcon, RewindIcon, RotateCcwIcon, RotateCwIcon, RssIcon, SaveIcon, ScissorsIcon, SearchIcon, SendIcon, ServerIcon, SettingsIcon, Share2Icon, ShareIcon, ShieldIcon, ShieldOffIcon, ShoppingBagIcon, ShoppingCartIcon, ShuffleIcon, SidebarIcon, SkipBackIcon, SkipForwardIcon, SlackIcon, SlidersIcon, SmartphoneIcon, SmileIcon, SpeakerIcon, SquareIcon, StarIcon, StopCircleIcon, SunIcon, SunriseIcon, SunsetIcon, TableIcon, TabletIcon, TagIcon, TargetIcon, TerminalIcon, ThermometerIcon, ThumbsDownIcon, ThumbsUpIcon, ToggleLeftIcon, ToggleRightIcon, Trash2Icon, TrashIcon, TrelloIcon, TrendingDownIcon, TrendingUpIcon, TriangleIcon, TruckIcon, TvIcon, TwitchIcon, TwitterIcon, TypeIcon, UmbrellaIcon, UnderlineIcon, UnlockIcon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserMinusIcon, UserPlusIcon, UsersIcon, UserXIcon, VideoIcon, VideoOffIcon, VoicemailIcon, Volume1Icon, Volume2Icon, VolumeIcon, VolumeXIcon, WatchIcon, WifiIcon, WifiOffIcon, WindIcon, WrenchIcon, XCircleIcon, XIcon, XOctagonIcon, XSquareIcon, YoutubeIcon, ZapIcon, ZapOffIcon, ZoomInIcon, ZoomOutIcon } from "lucide-react";

package/dist/esm/Icons/utils.d.ts

@@ -0,0 +1 @@
+export declare function getUniqueIconId(): string;

package/dist/esm/Icons/utils.js

@@ -0,0 +1,4 @@
+import { uniqueId } from "../utils";
+export function getUniqueIconId() {
+  return uniqueId("satellite-icon-");
+}

package/dist/esm/Input/Input.d.ts

@@ -0,0 +1,27 @@
+import type { InputHTMLAttributes, ReactNode } from "react";
+import type { IconComponentType } from "../Icons";
+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;
+    /**
+     * Define whether or not a "clear input" x button should show on hover
+     * @default false
+     */
+    clearable?: boolean;
+    locale?: InputPropsLocale;
+}
+/**
+ * The `Input` component is a flexible, user-friendly component for efficient text and number entry across forms and applications.
+ *
+ * See the [Input documentation page](https://satellite.algolia.com/components/forms/input) for more information.
+ */
+export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/esm/Input/Input.js

@@ -0,0 +1,219 @@
+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", "locale", "required"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import cx from "clsx";
+import { forwardRef, Fragment, useEffect, useState } from "react";
+import { IconButton } from "../Button";
+import { useField } from "../Field";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon, SearchIcon as SearchBaseIcon, XIcon } from "../Icons";
+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"]))),
+  validated: ""
+};
+var VARIANT_CLASSNAMES = {
+  small: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["input-small"]))),
+  medium: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["input-medium"]))),
+  large: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["input-large"])))
+};
+var SearchIcon = function SearchIcon(props) {
+  return /*#__PURE__*/_jsx(SearchBaseIcon, _objectSpread(_objectSpread({}, props), {}, {
+    role: "img",
+    "aria-label": "Search Icon"
+  }));
+};
+var InvalidIcon = function InvalidIcon() {
+  return /*#__PURE__*/_jsx(XIcon, {
+    className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["mr-4 h-4 w-4 text-white bg-red-700 p-px rounded-full"])))
+  });
+};
+var ValidatedIcon = function ValidatedIcon() {
+  return /*#__PURE__*/_jsx(CheckIcon, {
+    className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["mr-4 h-4 w-4 text-white bg-accent-600 p-px rounded-full"])))
+  });
+};
+
+/**
+ * The `Input` component is a flexible, user-friendly component for efficient text and number entry across forms and applications.
+ *
+ * See the [Input documentation page](https://satellite.algolia.com/components/forms/input) for more information.
+ */
+export var Input = /*#__PURE__*/forwardRef(function (_ref, externalRef) {
+  var _inputProps$id;
+  var className = _ref.className,
+    style = _ref.style,
+    startIcon = _ref.startIcon,
+    endItem = _ref.endItem,
+    disabled = _ref.disabled,
+    readOnly = _ref.readOnly,
+    clearableProp = _ref.clearable,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? "text" : _ref$type,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "medium" : _ref$variant,
+    propsLocale = _ref.locale,
+    required = _ref.required,
+    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],
+    setFocused = _useState2[1];
+  var _useForwardedRef = useForwardedRef(externalRef),
+    _useForwardedRef2 = _slicedToArray(_useForwardedRef, 2),
+    inputRefCallback = _useForwardedRef2[0],
+    inputRef = _useForwardedRef2[1];
+  var triggerInputChange = useTriggerInputChange(inputRef);
+  var _useField = useField({
+      required: required
+    }),
+    status = _useField.state.status,
+    labelId = _useField.labelId,
+    descriptionId = _useField.descriptionId,
+    inputId = _useField.inputId;
+  var isControlled = ("value" in inputProps);
+  var _useState3 = useState(function () {
+      return isControlled ? inputProps.value : inputProps.defaultValue;
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    internalValue = _useState4[0],
+    setInternalValue = _useState4[1];
+  var isValueEmpty = typeof internalValue !== "number" && !(internalValue !== null && internalValue !== void 0 && internalValue.length);
+  useEffect(function () {
+    if (isControlled) {
+      setInternalValue(inputProps.value);
+    }
+  }, [inputProps.value, isControlled]);
+  var Icon = startIcon ? startIcon : type === "search" ? SearchIcon : undefined;
+  var iconSize = variant === "small" ? "1rem" : "1.5rem";
+  var isInvalid = status === "invalid";
+  var StatusIcon = isInvalid ? InvalidIcon : status === "validated" ? ValidatedIcon : Fragment;
+  var clearable = typeof clearableProp === "boolean" ? clearableProp : type === "search";
+  return /*#__PURE__*/_jsxs("div", {
+    className: cx(stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n            input group\n            ", "\n            ", "\n          "])), focused && "input-focused", disabled && "input-disabled"), VARIANT_CLASSNAMES[variant], STATUS_CLASSNAMES[status], className),
+    style: style,
+    onClick: function onClick() {
+      var _inputRef$current;
+      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+    },
+    children: [Icon && /*#__PURE__*/_jsx(Icon, {
+      className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["ml-4 shrink-0 ", ""])), disabled ? "text-grey-200" : focused ? "text-accent-600" : "text-grey-500"),
+      width: iconSize,
+      height: iconSize
+    }), /*#__PURE__*/_jsx("input", _objectSpread(_objectSpread({
+      className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["mx-4 no-search-input-decoration"]))),
+      ref: inputRefCallback,
+      type: type,
+      "aria-labelledby": labelId,
+      "aria-describedby": descriptionId
+    }, inputProps), {}, {
+      id: (_inputProps$id = inputProps.id) !== null && _inputProps$id !== void 0 ? _inputProps$id : inputId,
+      required: required,
+      "aria-invalid": isInvalid,
+      readOnly: readOnly,
+      disabled: disabled,
+      onChange: function onChange(evt) {
+        var _inputProps$onChange;
+        (_inputProps$onChange = inputProps.onChange) === null || _inputProps$onChange === void 0 || _inputProps$onChange.call(inputProps, evt);
+        if (!isControlled) {
+          setInternalValue(evt.target.value);
+        }
+      },
+      onFocus: function onFocus(evt) {
+        var _inputProps$onFocus;
+        setFocused(true);
+        (_inputProps$onFocus = inputProps.onFocus) === null || _inputProps$onFocus === void 0 || _inputProps$onFocus.call(inputProps, evt);
+      },
+      onBlur: function onBlur(evt) {
+        var _inputProps$onBlur;
+        setFocused(false);
+        (_inputProps$onBlur = inputProps.onBlur) === null || _inputProps$onBlur === void 0 || _inputProps$onBlur.call(inputProps, evt);
+      }
+    })), clearable && !disabled && !readOnly && !isValueEmpty ? /*#__PURE__*/_jsx(IconButton, {
+      className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["mr-2 ", ""])), focused ? "visible" : "invisible group-hover:visible"),
+      title: locale.clearInput,
+      icon: XIcon,
+      variant: "subtle",
+      size: "small",
+      tabIndex: -1,
+      "aria-hidden": true,
+      onClick: function onClick(evt) {
+        evt.preventDefault();
+        triggerInputChange("");
+      }
+    }) : null, !!endItem && /*#__PURE__*/_jsx("div", {
+      className: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["mr-4"]))),
+      children: endItem
+    }), /*#__PURE__*/_jsx(StatusIcon, {}), type === "number" && !disabled && /*#__PURE__*/_jsxs("div", {
+      className: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["input-spinner"]))),
+      children: [/*#__PURE__*/_jsx("button", {
+        tabIndex: -1,
+        type: "button",
+        disabled: readOnly,
+        className: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["input-spinner-button ", ""])), readOnly && "cursor-not-allowed"),
+        "aria-label": locale.increment,
+        onClick: function onClick() {
+          var _inputRef$current$val, _inputRef$current2;
+          var step = inputProps.step ? parseFloat(String(inputProps.step)) : 1;
+          var max = isNil(inputProps.max) ? Number.MAX_SAFE_INTEGER : parseFloat(String(inputProps.max));
+          var currentValue = parseFloat((_inputRef$current$val = (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.value) !== null && _inputRef$current$val !== void 0 ? _inputRef$current$val : "0");
+          if (Number.isNaN(currentValue)) {
+            currentValue = 0;
+          }
+          if (currentValue + step <= max) {
+            triggerInputChange(String(currentValue + step));
+          } else {
+            triggerInputChange(String(max));
+          }
+        },
+        children: /*#__PURE__*/_jsx(ChevronUpIcon, {
+          size: 12,
+          className: cx(isInvalid && stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["text-red-700"]))))
+        })
+      }), /*#__PURE__*/_jsx("button", {
+        tabIndex: -1,
+        type: "button",
+        disabled: readOnly,
+        className: stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["input-spinner-button ", ""])), readOnly && "cursor-not-allowed"),
+        "aria-label": locale.decrement,
+        onClick: function onClick() {
+          var _inputRef$current$val2, _inputRef$current3;
+          var step = inputProps.step ? parseFloat(String(inputProps.step)) : 1;
+          var min = isNil(inputProps.min) ? Number.MIN_SAFE_INTEGER : parseFloat(String(inputProps.min));
+          var currentValue = parseFloat((_inputRef$current$val2 = (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.value) !== null && _inputRef$current$val2 !== void 0 ? _inputRef$current$val2 : "0");
+          if (Number.isNaN(currentValue)) {
+            currentValue = 0;
+          }
+          if (currentValue - step >= min) {
+            triggerInputChange(String(currentValue - step));
+          } else {
+            triggerInputChange(String(min));
+          }
+        },
+        children: /*#__PURE__*/_jsx(ChevronDownIcon, {
+          size: 12,
+          className: cx(isInvalid && stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["text-red-700"]))))
+        })
+      })]
+    })]
+  });
+});
+Input.displayName = "Input";

package/dist/esm/Input/Input.tailwind.d.ts

@@ -0,0 +1,5 @@
+export = inputPlugin;
+declare const inputPlugin: {
+    handler: import("tailwindcss/types/config").PluginCreator;
+    config?: Partial<import("tailwindcss/types/config").Config> | undefined;
+};

package/dist/esm/Input/Input.tailwind.js

@@ -0,0 +1,129 @@
+import _rgba from "../styles/rgba";
+import _disabledColor from "../styles/disabledColor";
+import _plugin from "tailwindcss/plugin";
+// @ts-check
+var plugin = _plugin;
+var disabledColor = _disabledColor;
+var rgba = _rgba;
+var inputPlugin = plugin(function (_ref) {
+  var addComponents = _ref.addComponents,
+    theme = _ref.theme;
+  addComponents({
+    ".input": {
+      position: "relative",
+      display: "flex",
+      alignItems: "center",
+      cursor: "text",
+      fontSize: theme("fontSize.base"),
+      lineHeight: theme("lineHeight.base"),
+      backgroundColor: theme("colors.white"),
+      border: "1px solid ".concat(theme("colors.grey.500")),
+      outline: "1px solid transparent",
+      borderRadius: theme("borderRadius.DEFAULT"),
+      boxShadow: "inset 0px 1px 4px 0px ".concat(rgba(theme("colors.grey.500"), 0.3)),
+      overflow: "hidden",
+      transition: "all 100ms ease-in-out",
+      "&:not(.input-disabled, .input-focused):hover": {
+        borderColor: theme("colors.grey.600"),
+        ".input-spinner-button": {
+          borderColor: theme("colors.grey.600")
+        }
+      },
+      input: {
+        flex: "1",
+        minWidth: "0px",
+        caretColor: theme("colors.grey.600"),
+        color: theme("colors.grey.900"),
+        background: "transparent",
+        "&[type=number]": {
+          "-moz-appearance": "textfield"
+        },
+        "&[type=number]::-webkit-inner-spin-button, &[type=number]::-webkit-outer-spin-button": {
+          "-webkit-appearance": "none",
+          margin: "0px"
+        },
+        "&:focus": {
+          outline: "none"
+        },
+        "&::placeholder": {
+          color: theme("colors.grey.600")
+        }
+      }
+    },
+    ".input-focused, .input:focus-within": {
+      borderColor: theme("colors.accent.600"),
+      boxShadow: "0px 1px 0px 0px ".concat(theme("colors.shadow.5")),
+      ".input-spinner-button": {
+        borderColor: theme("colors.accent.600")
+      }
+    },
+    ".input-disabled": {
+      cursor: "not-allowed",
+      background: "linear-gradient(-180deg, ".concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.100"), " 100%)"),
+      borderColor: disabledColor(theme("colors.grey.200")),
+      boxShadow: "none",
+      "input, input::placeholder": {
+        color: theme("colors.grey.300"),
+        pointerEvents: "none"
+      }
+    },
+    ".input-small": {
+      height: "2rem"
+    },
+    ".input-medium": {
+      height: "2.5rem"
+    },
+    ".input-large": {
+      height: "3rem"
+    },
+    ".input-invalid:not(.input-disabled)": {
+      backgroundColor: theme("colors.red.100"),
+      borderColor: theme("colors.red.700"),
+      ".input-spinner-button": {
+        background: theme("colors.red.100"),
+        borderColor: theme("colors.red.700")
+      },
+      "&:hover": {
+        background: theme("colors.red.50"),
+        borderColor: theme("colors.red.700"),
+        ".input-spinner-button": {
+          borderColor: theme("colors.red.700")
+        }
+      },
+      "&.input-focused, &.input:focus-within": {
+        outlineColor: theme("colors.red.700")
+      }
+    }
+  });
+  addComponents({
+    ".input-spinner": {
+      display: "flex",
+      flexDirection: "column",
+      height: "100%",
+      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.500"),
+      borderStyle: "solid",
+      borderLeftWidth: "1px",
+      flex: "1",
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      "&:focus": {
+        outline: "none"
+      },
+      "&:not(:last-child)": {
+        borderBottomWidth: "1px"
+      },
+      // This is to counterbalance the width of the first button's bottom border
+      // so that the two buttons have the same height.
+      "&:last-child": {
+        paddingTop: "1px"
+      }
+    }
+  });
+});
+export default inputPlugin;

package/dist/esm/Input/index.d.ts

@@ -0,0 +1 @@
+export * from "./Input";

package/dist/esm/Input/index.js

@@ -0,0 +1 @@
+export * from "./Input";

package/dist/esm/Insert/Insert.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode, VFC } from "react";
+import type { BadgeVariants } from "../Badge";
+declare type InsertContext = {
+    label: string;
+    variant?: BadgeVariants;
+};
+export interface InsertProps {
+    /** Descriptive title for the `Insert` */
+    title: ReactNode;
+    contexts?: Array<string | InsertContext>;
+    children: ReactNode;
+}
+/**
+ * The `Insert` component is used to give extra information to the user about the flow they are in or to highlight and define some terms used.
+ *
+ * See the [Insert documentation page](https://satellite.algolia.com/layouts/insert) for more information.
+ */
+export declare const Insert: VFC<InsertProps>;
+export {};

package/dist/esm/Insert/Insert.js

@@ -0,0 +1,44 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+import { Badge } from "../Badge";
+import stl from "../styles/helpers/satellitePrefixer";
+import { onlyText } from "../utils/onlyText";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The `Insert` component is used to give extra information to the user about the flow they are in or to highlight and define some terms used.
+ *
+ * See the [Insert documentation page](https://satellite.algolia.com/layouts/insert) for more information.
+ */
+export var Insert = function Insert(_ref) {
+  var title = _ref.title,
+    contexts = _ref.contexts,
+    children = _ref.children;
+  return /*#__PURE__*/_jsxs("aside", {
+    "aria-label": onlyText(title),
+    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["inline-flex flex-col self-start p-4 bg-grey-100 rounded"]))),
+    children: [contexts ? /*#__PURE__*/_jsx("span", {
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["block space-x-2 mb-4"]))),
+      children: contexts.map(function (context, idx) {
+        var _ref2 = typeof context === "string" ? {
+            label: context
+          } : context,
+          label = _ref2.label,
+          _ref2$variant = _ref2.variant,
+          variant = _ref2$variant === void 0 ? "grey" : _ref2$variant;
+        return /*#__PURE__*/_jsx(Badge, {
+          variant: variant,
+          children: label
+        }, idx);
+      })
+    }) : null, /*#__PURE__*/_jsxs("div", {
+      children: [/*#__PURE__*/_jsx("p", {
+        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["display-heading mb-2"]))),
+        children: title
+      }), /*#__PURE__*/_jsx("span", {
+        className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["display-body typo-subdued"]))),
+        children: children
+      })]
+    })]
+  });
+};

package/dist/esm/Insert/index.d.ts

@@ -0,0 +1 @@
+export * from "./Insert";

package/dist/esm/Insert/index.js

@@ -0,0 +1 @@
+export * from "./Insert";

package/dist/esm/InstantSearch/InstantSearch.tailwind.d.ts

@@ -0,0 +1,5 @@
+declare const _exports: {
+    handler: import("tailwindcss/types/config").PluginCreator;
+    config?: Partial<import("tailwindcss/types/config").Config> | undefined;
+};
+export = _exports;