@algolia/satellite 1.0.0-beta.165 → 1.0.0-beta.167

package/cjs/AutoComplete/AutoComplete.d.ts

@@ -16,5 +16,5 @@ import type { AutoCompleteProps, Option } from "./types";
  * - Provide matching results quickly
  * - Style different data
  */
-export declare const AutoComplete: <O extends Option = Option>({ locale: localeProp, id, name, placeholder, autoFocus, inputValue: inputValueProp, onTextChange, onFocus, onBlur, disabled, clearable, renderValueTemplate, noWrap, separatorKeys, multiple, value, selectOnBlur, onChange, options, optionItemComponent, creatable, createFromInputValue, emptyState, maxResults: maxItems, menuFooter, menuSize, variant, icon: Icon, endItem, className, menuClassName, valuesClassName, }: AutoCompleteProps<O>) => JSX.Element;
+export declare const AutoComplete: <O extends Option = Option>({ locale: localeProp, id, labelId, "aria-label": ariaLabel, name, placeholder, autoFocus, inputValue: inputValueProp, onTextChange, onFocus, onBlur, disabled, clearable, renderValueTemplate, noWrap, separatorKeys, multiple, value, selectOnBlur, onChange, options, optionItemComponent, creatable, createFromInputValue, emptyState, maxResults: maxItems, menuFooter, menuSize, variant, icon: Icon, endItem, className, menuClassName, valuesClassName, internalsRef, }: AutoCompleteProps<O>) => JSX.Element;
 export default AutoComplete;

package/cjs/AutoComplete/AutoComplete.js

@@ -42,6 +42,13 @@ var MENU_POPPER_OPTIONS = {
   }]
 };
 var SHOW_ALL_ITEMS_ID = "__stl_extra_results_option__";
+var updateRef = function updateRef(ref, value) {
+  if (typeof ref === "function") {
+    ref(value);
+  } else if (ref) {
+    ref.current = value;
+  }
+};
 
 /**
  * Autocomplete is a search-as-you-type function that matches what a person types, usually the beginning of a word, or a prefix, with a word list. Not to be confused with auto-suggestion that predicts the end of a query.
@@ -62,6 +69,8 @@ var SHOW_ALL_ITEMS_ID = "__stl_extra_results_option__";
 var AutoComplete = exports.AutoComplete = function AutoComplete(_ref) {
   var localeProp = _ref.locale,
     id = _ref.id,
+    labelId = _ref.labelId,
+    ariaLabel = _ref["aria-label"],
     name = _ref.name,
     placeholder = _ref.placeholder,
     autoFocus = _ref.autoFocus,
@@ -93,10 +102,12 @@ var AutoComplete = exports.AutoComplete = function AutoComplete(_ref) {
     endItem = _ref.endItem,
     className = _ref.className,
     menuClassName = _ref.menuClassName,
-    valuesClassName = _ref.valuesClassName;
+    valuesClassName = _ref.valuesClassName,
+    internalsRef = _ref.internalsRef;
   var createPortal = (0, _Satellite.useCreatePortal)();
-  var _useFieldState = (0, _Field.useFieldState)(),
-    status = _useFieldState.status;
+  var _useField = (0, _Field.useField)(),
+    status = _useField.state.status,
+    fieldLabelId = _useField.labelId;
   var localeContext = (0, _Satellite.useLocale)("autoComplete");
   var locale = (0, _react.useMemo)(function () {
     return _objectSpread(_objectSpread(_objectSpread({}, _utils.DEFAULT_AUTOCOMPLETE_LOCALE), localeContext), localeProp);
@@ -164,6 +175,8 @@ var AutoComplete = exports.AutoComplete = function AutoComplete(_ref) {
     }
   });
   var combobox = (0, _downshift.useCombobox)({
+    inputId: id,
+    labelId: labelId !== null && labelId !== void 0 ? labelId : fieldLabelId,
     items: items,
     itemToString: _utils.optionToString,
     scrollIntoView: function scrollIntoView(node) {
@@ -244,7 +257,9 @@ var AutoComplete = exports.AutoComplete = function AutoComplete(_ref) {
       return Boolean(item.disabled);
     }
   });
-  var inputProps = combobox.getInputProps(multipleSelection.getDropdownProps({
+  var inputProps = combobox.getInputProps(_objectSpread({
+    "aria-label": ariaLabel
+  }, multipleSelection.getDropdownProps({
     ref: inputRef,
     autoFocus: autoFocus,
     disabled: disabled,
@@ -276,7 +291,7 @@ var AutoComplete = exports.AutoComplete = function AutoComplete(_ref) {
         }
       }
     }
-  }));
+  })));
   (0, _react.useEffect)(function () {
     if (!combobox.isOpen) return;
     if (items.length === 0 && combobox.highlightedIndex >= 0) {
@@ -296,6 +311,12 @@ var AutoComplete = exports.AutoComplete = function AutoComplete(_ref) {
       }));
     };
   }, [optionItemComponent, locale]);
+  (0, _react.useEffect)(function () {
+    updateRef(internalsRef, {
+      inputRef: inputRef,
+      inputValue: inputValue
+    });
+  }, [inputRef, internalsRef, inputValue]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AutocompleteContext.AutocompleteProvider, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex"]))), className),
@@ -312,7 +333,8 @@ var AutoComplete = exports.AutoComplete = function AutoComplete(_ref) {
         },
         children: [Icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
           className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["mr-4 shrink-0"]))), (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["", ""])), disabled ? "text-grey-200" : inputFocused ? "text-accent-600" : "text-grey-500")),
-          size: "1rem"
+          width: "1rem",
+          height: "1rem"
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["flex items-center flex-1 max-h-full"]))), !noWrap && (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["flex-wrap overflow-y-scroll no-scrollbar"]))), multiple && (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["-ml-1"]))), valuesClassName),
           children: [multiple && selectedItems.map(function (option, index) {

package/cjs/AutoComplete/index.d.ts

@@ -3,4 +3,5 @@ export * from "./components/DefaultOptionItem";
 export * from "./components/AutoCompleteEmptyState";
 export * from "./components/AutocompleteContext";
 export * from "./types";
+export { defaultCreateFromInputValue } from "./utils";
 export { default } from "./AutoComplete";

package/cjs/AutoComplete/index.js

@@ -4,13 +4,21 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {};
+var _exportNames = {
+  defaultCreateFromInputValue: true
+};
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
     return _AutoComplete["default"];
   }
 });
+Object.defineProperty(exports, "defaultCreateFromInputValue", {
+  enumerable: true,
+  get: function get() {
+    return _utils.defaultCreateFromInputValue;
+  }
+});
 var _AutoComplete = _interopRequireWildcard(require("./AutoComplete"));
 Object.keys(_AutoComplete).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -71,5 +79,6 @@ Object.keys(_types).forEach(function (key) {
     }
   });
 });
+var _utils = require("./utils");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }

package/cjs/AutoComplete/types.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentType, FocusEventHandler, ReactNode } from "react";
+import type { ComponentType, FocusEventHandler, ForwardedRef, ReactNode, RefObject } from "react";
 import type { IconComponentType } from "../types";
 export declare type AutoCompleteVariant = "medium" | "large";
 export declare type AutoCompleteLocale = {
@@ -11,6 +11,8 @@ export declare type AutoCompleteLocale = {
 };
 export interface AutoCompleteBaseProps<T extends Option = Option> {
     id?: string;
+    "aria-label"?: string;
+    labelId?: string;
     icon?: IconComponentType;
     name?: string;
     className?: string;
@@ -44,6 +46,14 @@ export interface AutoCompleteBaseProps<T extends Option = Option> {
      */
     menuSize?: "medium" | "large";
     locale?: AutoCompleteLocale;
+    /** @deprecated Use of this props is discouraged and is only there for backwards compatibility */
+    internalsRef?: ForwardedRef<AutoCompleteInternals>;
+}
+export interface AutoCompleteInternals {
+    /** Current internal inputValue */
+    inputValue: string;
+    /** RefObject containing the underlying combobox input element */
+    inputRef: RefObject<HTMLInputElement>;
 }
 export interface AutoCompleteSingleProps<T extends Option = Option> extends AutoCompleteBaseProps<T> {
     multiple?: false;

package/cjs/Badge/Badge.js

@@ -64,7 +64,8 @@ var Badge = exports.Badge = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
     className: badgeClassName,
     children: [Icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
-        size: ".8em"
+        width: ".8em",
+        height: ".8em"
       })
     }), (0, _isRenderedChild["default"])(children) && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       className: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["truncate"]))),

package/cjs/Banners/Alert/Alert.js

@@ -111,7 +111,8 @@ var Alert = exports.Alert = function Alert(_ref) {
     style: style,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
       className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["\n            shrink-0 mr-2\n            ", "\n            "])), title ? "mt-0.5" : "mt-2px"), ICON_CLASSNAME_VARIANTS[variant]),
-      size: "1rem"
+      width: "1rem",
+      height: "1rem"
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: (0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["flex flex-1 flex-col ", ""])), onDismiss && "mr-6"),
       children: [!!title && /*#__PURE__*/(0, _jsxRuntime.jsx)("h4", {

package/cjs/Button/PolymorphicButton.js

@@ -62,13 +62,15 @@ var PolymorphicButton = exports.PolymorphicButton = /*#__PURE__*/(0, _react.forw
       size: _styles.BUTTON_LOADER_ICON_SIZES[size],
       thickness: 1
     }), StartIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(StartIcon, {
-      size: ICON_SIZE,
+      width: ICON_SIZE,
+      height: ICON_SIZE,
       className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["shrink-0"]))), iconClassNames)
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["truncate text-center px-1"]))), textClassNames),
       children: children
     }), EndIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(EndIcon, {
-      size: ICON_SIZE,
+      width: ICON_SIZE,
+      height: ICON_SIZE,
       className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["shrink-0"]))), iconClassNames)
     })]
   }));

package/cjs/Button/PolymorphicIconButton.js

@@ -76,7 +76,8 @@ var PolymorphicIconButton = exports.PolymorphicIconButton = /*#__PURE__*/(0, _re
           thickness: 1
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
           className: (0, _clsx["default"])(loading && (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["invisible"])))),
-          size: "1em"
+          width: "1em",
+          height: "1em"
         })]
       })
     }))

package/cjs/Checkbox/Checkbox.js

@@ -49,8 +49,9 @@ var Checkbox = exports.Checkbox = /*#__PURE__*/(0, _react.forwardRef)(function (
   var id = (0, _react.useMemo)(function () {
     return checkboxProps.id || generateFieldId();
   }, [checkboxProps.id]);
-  var _useFieldState = (0, _Field.useFieldState)(),
-    status = _useFieldState.status;
+  var _useField = (0, _Field.useField)(),
+    status = _useField.state.status,
+    labelId = _useField.labelId;
   var isControlled = typeof checked === "boolean";
   var _useState = (0, _react.useState)(Boolean(isControlled ? checked : defaultChecked)),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -78,6 +79,7 @@ var Checkbox = exports.Checkbox = /*#__PURE__*/(0, _react.forwardRef)(function (
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({}, checkboxProps), {}, {
         "aria-checked": indeterminate ? "mixed" : isChecked,
         id: id,
+        "aria-labelledby": labelId,
         className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n              opacity-0 absolute inset-0\n              ", "\n            "])), disabled ? "cursor-not-allowed" : "cursor-pointer"),
         type: "checkbox",
         ref: ref,

package/cjs/Dropdown/components/DropdownButtonItem.js

@@ -30,7 +30,8 @@ var DropdownButtonItem = exports.DropdownButtonItem = function DropdownButtonIte
     className: (0, _clsx["default"])(mergedProps.className, (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["w-full"])))),
     children: [StartIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(StartIcon, {
       className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["mr-2 shrink-0 ", ""])), showDestructiveVariant ? "text-red-700" : "text-grey-500"),
-      size: "1rem"
+      width: "1rem",
+      height: "1rem"
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["w-full truncate ", ""])), showDestructiveVariant && "text-red-700"),
       children: children

package/cjs/Dropdown/components/DropdownLinkItem.js

@@ -35,7 +35,8 @@ var DropdownLinkItem = exports.DropdownLinkItem = function DropdownLinkItem(prop
   }, mergedProps), {}, {
     children: [StartIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(StartIcon, {
       className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["mr-2 shrink-0 text-grey-500"]))),
-      size: "1rem"
+      width: "1rem",
+      height: "1rem"
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["w-full truncate"]))),
       children: children

package/cjs/Dropdown/components/DropdownToggleItem.js

@@ -30,7 +30,8 @@ var DropdownToggleItem = exports.DropdownToggleItem = function DropdownToggleIte
     className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex items-center"]))), className),
     children: [StartIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(StartIcon, {
       className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["mr-2 shrink-0 text-grey-500"]))),
-      size: "1rem"
+      width: "1rem",
+      height: "1rem"
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["flex-1 truncate mr-4"]))),
       children: children

package/cjs/Dropzone/Dropzone.js

@@ -70,8 +70,9 @@ var Dropzone = exports.Dropzone = function Dropzone(_ref2) {
     _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
     focused = _useState4[0],
     setFocused = _useState4[1];
-  var _useFieldState = (0, _Field.useFieldState)(),
-    status = _useFieldState.status;
+  var _useField = (0, _Field.useField)(),
+    status = _useField.state.status,
+    labelId = _useField.labelId;
   var onDrop = (0, _react.useCallback)(function (acceptedFiles, fileRejections) {
     var updatedFiles = multiple ? [].concat((0, _toConsumableArray2["default"])(files), (0, _toConsumableArray2["default"])(acceptedFiles)) : acceptedFiles;
     setFiles(updatedFiles);
@@ -110,6 +111,7 @@ var Dropzone = exports.Dropzone = function Dropzone(_ref2) {
   })), {}, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread({}, getInputProps({
       id: dropzoneId,
+      "aria-labelledby": labelId,
       onFocus: function onFocus() {
         return setFocused(true);
       },

package/cjs/Field/Field.d.ts

@@ -1,10 +1,11 @@
-import type { ReactChild, ReactNode, VFC } from "react";
-import type { FieldState } from "./FieldStateContext";
+import { type ReactChild, type ReactNode, type VFC } from "react";
+import type { FieldState } from "./FieldContext";
 export interface FieldProps {
     /** @ignore */
     className?: string;
     /** Label to display above the nested input */
     label?: ReactChild;
+    labelId?: string;
     labelFor?: string;
     /** Helpful description to show below the `Field` */
     description?: ReactNode;

package/cjs/Field/Field.js

@@ -1,20 +1,19 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.Field = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _clsx = _interopRequireDefault(require("clsx"));
+var _react = require("react");
 var _reactFeather = require("react-feather");
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
-var _FieldStateContext = _interopRequireWildcard(require("./FieldStateContext"));
+var _utils = require("../utils");
+var _FieldContext = require("./FieldContext");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 /**
  * 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
  *
@@ -53,20 +52,31 @@ var Field = exports.Field = function Field(_ref) {
   var className = _ref.className,
     label = _ref.label,
     labelFor = _ref.labelFor,
+    labelIdProp = _ref.labelId,
     description = _ref.description,
     _ref$state = _ref.state,
-    state = _ref$state === void 0 ? _FieldStateContext.DEFAULT_STATE : _ref$state,
+    state = _ref$state === void 0 ? _FieldContext.DEFAULT_FIELD_STATE : _ref$state,
     _ref$inline = _ref.inline,
     inline = _ref$inline === void 0 ? false : _ref$inline,
     children = _ref.children;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FieldStateContext["default"].Provider, {
-    value: state,
+  var hasLabel = !!label;
+  var labelId = (0, _react.useMemo)(
+  // eslint-disable-next-line @algolia/satellite/prefer-stl-helper
+  function () {
+    return hasLabel ? labelIdProp !== null && labelIdProp !== void 0 ? labelIdProp : (0, _utils.uniqueId)("stl-field-label-") : undefined;
+  }, [labelIdProp, hasLabel]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FieldContext.FieldContext.Provider, {
+    value: {
+      state: state,
+      labelId: labelId
+    },
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: className,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
         className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["cursor-pointer flex ", ""])), !inline && "flex-col"),
         htmlFor: labelFor,
-        children: [!!label && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: [hasLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          id: labelId,
           className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["truncate ", ""])), inline ? "mr-2" : "mb-1"),
           children: label
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

package/cjs/Field/FieldContext.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+export declare type FieldState = {
+    status: "default";
+} | {
+    status: "validated";
+} | {
+    status: "invalid";
+    errors: string[];
+};
+export declare type FieldContextValue = {
+    state: FieldState;
+    labelId?: string;
+};
+export declare const DEFAULT_FIELD_STATE: FieldState;
+export declare const DEFAULT_CONTEXT_VALUE: FieldContextValue;
+export declare const FieldContext: import("react").Context<FieldContextValue>;

package/cjs/Field/FieldContext.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FieldContext = exports.DEFAULT_FIELD_STATE = exports.DEFAULT_CONTEXT_VALUE = void 0;
+var _react = require("react");
+var DEFAULT_FIELD_STATE = exports.DEFAULT_FIELD_STATE = {
+  status: "default"
+};
+var DEFAULT_CONTEXT_VALUE = exports.DEFAULT_CONTEXT_VALUE = {
+  state: DEFAULT_FIELD_STATE
+};
+var FieldContext = exports.FieldContext = /*#__PURE__*/(0, _react.createContext)(DEFAULT_CONTEXT_VALUE);

package/cjs/Field/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./Field";
-export * from "./FieldStateContext";
-export * from "./useFieldState";
+export type { FieldState, FieldContextValue } from "./FieldContext";
+export { FieldContext } from "./FieldContext";
+export * from "./useField";
 export { default } from "./Field";

package/cjs/Field/index.js

@@ -4,7 +4,15 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {};
+var _exportNames = {
+  FieldContext: true
+};
+Object.defineProperty(exports, "FieldContext", {
+  enumerable: true,
+  get: function get() {
+    return _FieldContext.FieldContext;
+  }
+});
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
@@ -23,27 +31,16 @@ Object.keys(_Field).forEach(function (key) {
     }
   });
 });
-var _FieldStateContext = require("./FieldStateContext");
-Object.keys(_FieldStateContext).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _FieldStateContext[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _FieldStateContext[key];
-    }
-  });
-});
-var _useFieldState = require("./useFieldState");
-Object.keys(_useFieldState).forEach(function (key) {
+var _FieldContext = require("./FieldContext");
+var _useField = require("./useField");
+Object.keys(_useField).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _useFieldState[key]) return;
+  if (key in exports && exports[key] === _useField[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _useFieldState[key];
+      return _useField[key];
     }
   });
 });

package/cjs/Field/useField.d.ts

@@ -0,0 +1,2 @@
+import type { FieldContextValue } from "./FieldContext";
+export declare const useField: () => FieldContextValue;

package/cjs/Field/useField.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useField = void 0;
+var _react = require("react");
+var _FieldContext = require("./FieldContext");
+var useField = exports.useField = function useField() {
+  return (0, _react.useContext)(_FieldContext.FieldContext);
+};

package/cjs/Input/Input.js

@@ -13,7 +13,7 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _react = require("react");
 var _reactFeather = require("react-feather");
 var _Button = require("../Button");
-var _useFieldState2 = _interopRequireDefault(require("../Field/useFieldState"));
+var _Field = require("../Field");
 var _Satellite = require("../Satellite");
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 var _isNil = _interopRequireDefault(require("../utils/isNil"));
@@ -88,8 +88,9 @@ var Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
     inputRefCallback = _useForwardedRef2[0],
     inputRef = _useForwardedRef2[1];
   var triggerInputChange = (0, _useTriggerInputChange["default"])(inputRef);
-  var _useFieldState = (0, _useFieldState2["default"])(),
-    status = _useFieldState.status;
+  var _useField = (0, _Field.useField)(),
+    status = _useField.state.status,
+    labelId = _useField.labelId;
   var isControlled = ("value" in inputProps);
   var _useState3 = (0, _react.useState)(function () {
       return isControlled ? inputProps.value : inputProps.defaultValue;
@@ -104,6 +105,7 @@ var Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
     }
   }, [inputProps.value, isControlled]);
   var Icon = startIcon ? startIcon : type === "search" ? SearchIcon : undefined;
+  var iconSize = variant === "small" ? "1rem" : "1.5rem";
   var StatusIcon = status === "invalid" ? InvalidIcon : status === "validated" ? ValidatedIcon : _react.Fragment;
   var clearable = typeof clearableProp === "boolean" ? clearableProp : type === "search";
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -115,11 +117,13 @@ var Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
     },
     children: [Icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
       className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["ml-4 shrink-0 ", ""])), disabled ? "text-grey-200" : focused ? "text-accent-600" : "text-grey-500"),
-      size: variant === "small" ? "1rem" : "1.5rem"
+      width: iconSize,
+      height: iconSize
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({
       className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["mx-4 no-search-input-decoration"]))),
       ref: inputRefCallback,
-      type: type
+      type: type,
+      "aria-labelledby": labelId
     }, inputProps), {}, {
       readOnly: readOnly,
       disabled: disabled,

package/cjs/Link/Link.d.ts

@@ -7,7 +7,7 @@ export declare type LinkProps = {
 } & AnchorHTMLAttributes<HTMLAnchorElement>;
 export declare const Link: import("react").ForwardRefExoticComponent<{
     href: string;
-    startIcon?: import("react-feather").Icon | undefined;
-    endIcon?: import("react-feather").Icon | undefined;
+    startIcon?: IconComponentType | undefined;
+    endIcon?: IconComponentType | undefined;
 } & AnchorHTMLAttributes<HTMLAnchorElement> & import("react").RefAttributes<HTMLAnchorElement>>;
 export default Link;

package/cjs/Link/Link.js

@@ -39,10 +39,12 @@ var Link = exports.Link = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, re
     className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["typo-link inline-flex items-center"]))), className),
     children: [StartIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(StartIcon, {
       className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["mr-1 shrink-0"]))),
-      size: "1em"
+      width: "1em",
+      height: "1em"
     }), children, EndIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(EndIcon, {
       className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["ml-1 shrink-0"]))),
-      size: "1em"
+      width: "1em",
+      height: "1em"
     })]
   }));
 });

package/cjs/ProgressBar/ProgressBar.d.ts

@@ -1,13 +1,16 @@
 import { type HTMLAttributes } from "react";
 export interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {
-    barClassName?: string;
+    /** The current value of the progress bar. */
     value: number;
+    /** The maximum value of the progress bar. */
+    max?: number;
+    /** The className to apply to the bar element. */
+    barClassName?: string;
 }
 /**
- * Progress bars visually represent the completion of a task or operation.
+ * A progress bar visually indicates the completion status of a task, updating in real-time to guide users.
  *
- * - Progress bars show an indication of how much of the task has been completed and how much is still left.
- * - You should indicate either a percentage or other numeric values (such as - 234/4092 queries processed)
+ * See the [Progress Bar documentation page](https://satellite.algolia.com/components/feedback/progress-bar) for more information.
  */
 export declare const ProgressBar: import("react").ForwardRefExoticComponent<ProgressBarProps & import("react").RefAttributes<HTMLDivElement>>;
 export default ProgressBar;