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

package/cjs/ProgressBar/ProgressBar.js

@@ -1,6 +1,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -8,39 +9,46 @@ exports["default"] = exports.ProgressBar = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var Progress = _interopRequireWildcard(require("@radix-ui/react-progress"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _react = require("react");
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _clamp = require("../utils/clamp");
 var _prefersReducedMotion = require("../utils/prefersReducedMotion");
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2;
-var _excluded = ["value", "className", "barClassName"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _excluded = ["value", "max", "className", "barClassName"];
+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; }
 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) { (0, _defineProperty2["default"])(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; }
 /**
- * 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.
  */
 var ProgressBar = exports.ProgressBar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var value = _ref.value,
+    _ref$max = _ref.max,
+    max = _ref$max === void 0 ? 100 : _ref$max,
     className = _ref.className,
     barClassName = _ref.barClassName,
     props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({
-    ref: ref
-  }, props), {}, {
+  if (value < 0 || value > max) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn("ProgressBar: Invalid `value` of ".concat(value, ". The `value` prop must be between 0 and ").concat(max, " (`max` prop). The `value` has been clamped to the range of 0 to ").concat(max, "."));
+    }
+    value = (0, _clamp.clamp)(value, 0, max);
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Progress.Root, _objectSpread(_objectSpread({}, props), {}, {
+    ref: ref,
+    value: value,
+    max: max,
     className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["progress-bar"]))), className),
-    role: "progressbar",
-    "aria-valuenow": value,
-    "aria-valuemin": 0,
-    "aria-valuemax": 100,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["progress-bar-progress"]))), barClassName),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Progress.Indicator, {
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["progress-bar-progress transition-transform ease-in-out origin-left"]))), _prefersReducedMotion.prefersReducedMotion ? (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["duration-150"]))) : (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["duration-500"]))), barClassName),
       style: {
-        width: "".concat(value, "%"),
-        transition: _prefersReducedMotion.prefersReducedMotion ? "width 150ms ease-in-out" : "width 500ms ease-in-out"
+        transform: "scaleX(".concat(value / max, ")")
       }
     })
   }));

package/cjs/Sidebar/SidebarLinksGroup/SidebarLinksGroup.js

@@ -65,7 +65,8 @@ var SidebarLinksGroup = exports.SidebarLinksGroup = function SidebarLinksGroup(p
       "aria-controls": contentId,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(props.icon, {
         className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["shrink-0 text-grey-500 mr-3"]))),
-        size: "1rem"
+        width: "1rem",
+        height: "1rem"
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["truncate display-subheading uppercase text-grey-800 group-focus:text-accent-500 group-hover:text-accent-500 mr-2"]))),
         children: props.title

package/cjs/types.d.ts

@@ -1,6 +1,6 @@
-import type { Icon as FeatherIcon, IconProps as FeatherIconProps } from "react-feather";
-export declare type IconProps = FeatherIconProps;
-export declare type IconComponentType = FeatherIcon;
+import type { ComponentClass, SVGAttributes, VoidFunctionComponent } from "react";
+export declare type IconProps = SVGAttributes<SVGElement>;
+export declare type IconComponentType = VoidFunctionComponent<IconProps> | ComponentClass<IconProps>;
 export declare type ColorVariant = "accent" | "grey" | "green" | "blue" | "orange" | "red";
 /**
  * Ensures at least one type is required

package/cjs/utils/clamp.d.ts

@@ -0,0 +1 @@
+export declare function clamp(val: number, min: number, max: number): number;

package/cjs/utils/clamp.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.clamp = clamp;
+function clamp(val, min, max) {
+  return Math.min(max, Math.max(min, val));
+}

package/cjs/utils/prefersReducedMotion.js

@@ -4,9 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.prefersReducedMotion = void 0;
+var _window$matchMedia, _window;
 /**
  * Checks if the user has `prefers-reduced-motion` enabled
  *
  * @returns {boolean}
  */
-var prefersReducedMotion = exports.prefersReducedMotion = typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches === true;
+var prefersReducedMotion = exports.prefersReducedMotion = typeof window !== "undefined" && ((_window$matchMedia = (_window = window).matchMedia) === null || _window$matchMedia === void 0 ? void 0 : _window$matchMedia.call(_window, "(prefers-reduced-motion: reduce)").matches) === true;

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

@@ -13,7 +13,7 @@ import { usePopper } from "react-popper";
 import useMeasure from "react-use/lib/useMeasure";
 import { Card } from "../Card";
 import { ClickAwayContainer } from "../ClickAwayContainer";
-import { useFieldState } from "../Field";
+import { useField } from "../Field";
 import { useCreatePortal, useLocale } from "../Satellite";
 import ScrollIndicator from "../ScrollIndicator";
 import stl from "../styles/helpers/satellitePrefixer";
@@ -36,6 +36,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.
@@ -56,6 +63,8 @@ var SHOW_ALL_ITEMS_ID = "__stl_extra_results_option__";
 export var 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,
@@ -87,10 +96,12 @@ export var AutoComplete = function AutoComplete(_ref) {
     endItem = _ref.endItem,
     className = _ref.className,
     menuClassName = _ref.menuClassName,
-    valuesClassName = _ref.valuesClassName;
+    valuesClassName = _ref.valuesClassName,
+    internalsRef = _ref.internalsRef;
   var createPortal = useCreatePortal();
-  var _useFieldState = useFieldState(),
-    status = _useFieldState.status;
+  var _useField = useField(),
+    status = _useField.state.status,
+    fieldLabelId = _useField.labelId;
   var localeContext = useLocale("autoComplete");
   var locale = useMemo(function () {
     return _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_AUTOCOMPLETE_LOCALE), localeContext), localeProp);
@@ -158,6 +169,8 @@ export var AutoComplete = function AutoComplete(_ref) {
     }
   });
   var combobox = useCombobox({
+    inputId: id,
+    labelId: labelId !== null && labelId !== void 0 ? labelId : fieldLabelId,
     items: items,
     itemToString: optionToString,
     scrollIntoView: function scrollIntoView(node) {
@@ -238,7 +251,9 @@ export var 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,
@@ -270,7 +285,7 @@ export var AutoComplete = function AutoComplete(_ref) {
         }
       }
     }
-  }));
+  })));
   useEffect(function () {
     if (!combobox.isOpen) return;
     if (items.length === 0 && combobox.highlightedIndex >= 0) {
@@ -290,6 +305,12 @@ export var AutoComplete = function AutoComplete(_ref) {
       }));
     };
   }, [optionItemComponent, locale]);
+  useEffect(function () {
+    updateRef(internalsRef, {
+      inputRef: inputRef,
+      inputValue: inputValue
+    });
+  }, [inputRef, internalsRef, inputValue]);
   return /*#__PURE__*/_jsx(AutocompleteProvider, {
     children: /*#__PURE__*/_jsxs("div", {
       className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex"]))), className),
@@ -306,7 +327,8 @@ export var AutoComplete = function AutoComplete(_ref) {
         },
         children: [Icon && /*#__PURE__*/_jsx(Icon, {
           className: cx(stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["mr-4 shrink-0"]))), stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["", ""])), disabled ? "text-grey-200" : inputFocused ? "text-accent-600" : "text-grey-500")),
-          size: "1rem"
+          width: "1rem",
+          height: "1rem"
         }), /*#__PURE__*/_jsxs("div", {
           className: cx(stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["flex items-center flex-1 max-h-full"]))), !noWrap && stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["flex-wrap overflow-y-scroll no-scrollbar"]))), multiple && stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["-ml-1"]))), valuesClassName),
           children: [multiple && selectedItems.map(function (option, index) {

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

@@ -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/esm/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/esm/Badge/Badge.js

@@ -58,7 +58,8 @@ export var Badge = /*#__PURE__*/forwardRef(function (_ref, ref) {
     className: badgeClassName,
     children: [Icon && /*#__PURE__*/_jsx("span", {
       children: /*#__PURE__*/_jsx(Icon, {
-        size: ".8em"
+        width: ".8em",
+        height: ".8em"
       })
     }), isRenderedChild(children) && /*#__PURE__*/_jsx("span", {
       className: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["truncate"]))),

package/esm/Banners/Alert/Alert.js

@@ -105,7 +105,8 @@ export var Alert = function Alert(_ref) {
     style: style,
     children: [/*#__PURE__*/_jsx(Icon, {
       className: cx(stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n            shrink-0 mr-2\n            ", "\n            "])), title ? "mt-0.5" : "mt-2px"), ICON_CLASSNAME_VARIANTS[variant]),
-      size: "1rem"
+      width: "1rem",
+      height: "1rem"
     }), /*#__PURE__*/_jsxs("div", {
       className: stl(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["flex flex-1 flex-col ", ""])), onDismiss && "mr-6"),
       children: [!!title && /*#__PURE__*/_jsx("h4", {

package/esm/Button/PolymorphicButton.js

@@ -53,13 +53,15 @@ export var PolymorphicButton = /*#__PURE__*/forwardRef(function (props, ref) {
       size: BUTTON_LOADER_ICON_SIZES[size],
       thickness: 1
     }), StartIcon && /*#__PURE__*/_jsx(StartIcon, {
-      size: ICON_SIZE,
+      width: ICON_SIZE,
+      height: ICON_SIZE,
       className: cx(stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["shrink-0"]))), iconClassNames)
     }), /*#__PURE__*/_jsx("span", {
       className: cx(stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["truncate text-center px-1"]))), textClassNames),
       children: children
     }), EndIcon && /*#__PURE__*/_jsx(EndIcon, {
-      size: ICON_SIZE,
+      width: ICON_SIZE,
+      height: ICON_SIZE,
       className: cx(stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["shrink-0"]))), iconClassNames)
     })]
   }));

package/esm/Button/PolymorphicIconButton.js

@@ -71,7 +71,8 @@ export var PolymorphicIconButton = /*#__PURE__*/forwardRef(function (props, ref)
           thickness: 1
         }), /*#__PURE__*/_jsx(Icon, {
           className: cx(loading && stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["invisible"])))),
-          size: "1em"
+          width: "1em",
+          height: "1em"
         })]
       })
     }))

package/esm/Checkbox/Checkbox.js

@@ -9,7 +9,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import cx from "clsx";
 import { forwardRef, useMemo, useState } from "react";
 import { Check, Minus } from "react-feather";
-import { useFieldState } from "../Field";
+import { useField } from "../Field";
 import stl from "../styles/helpers/satellitePrefixer";
 import isRenderedChild from "../utils/isRenderedChild";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -43,8 +43,9 @@ export var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var id = useMemo(function () {
     return checkboxProps.id || generateFieldId();
   }, [checkboxProps.id]);
-  var _useFieldState = useFieldState(),
-    status = _useFieldState.status;
+  var _useField = useField(),
+    status = _useField.state.status,
+    labelId = _useField.labelId;
   var isControlled = typeof checked === "boolean";
   var _useState = useState(Boolean(isControlled ? checked : defaultChecked)),
     _useState2 = _slicedToArray(_useState, 2),
@@ -72,6 +73,7 @@ export var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
       }), /*#__PURE__*/_jsx("input", _objectSpread(_objectSpread({}, checkboxProps), {}, {
         "aria-checked": indeterminate ? "mixed" : isChecked,
         id: id,
+        "aria-labelledby": labelId,
         className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n              opacity-0 absolute inset-0\n              ", "\n            "])), disabled ? "cursor-not-allowed" : "cursor-pointer"),
         type: "checkbox",
         ref: ref,

package/esm/Dropdown/components/DropdownButtonItem.js

@@ -24,7 +24,8 @@ export var DropdownButtonItem = function DropdownButtonItem(props) {
     className: cx(mergedProps.className, stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["w-full"])))),
     children: [StartIcon && /*#__PURE__*/_jsx(StartIcon, {
       className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["mr-2 shrink-0 ", ""])), showDestructiveVariant ? "text-red-700" : "text-grey-500"),
-      size: "1rem"
+      width: "1rem",
+      height: "1rem"
     }), /*#__PURE__*/_jsx("span", {
       className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["w-full truncate ", ""])), showDestructiveVariant && "text-red-700"),
       children: children

package/esm/Dropdown/components/DropdownLinkItem.js

@@ -29,7 +29,8 @@ export var DropdownLinkItem = function DropdownLinkItem(props) {
   }, mergedProps), {}, {
     children: [StartIcon && /*#__PURE__*/_jsx(StartIcon, {
       className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["mr-2 shrink-0 text-grey-500"]))),
-      size: "1rem"
+      width: "1rem",
+      height: "1rem"
     }), /*#__PURE__*/_jsx("span", {
       className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["w-full truncate"]))),
       children: children

package/esm/Dropdown/components/DropdownToggleItem.js

@@ -24,7 +24,8 @@ export var DropdownToggleItem = function DropdownToggleItem(props) {
     className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex items-center"]))), className),
     children: [StartIcon && /*#__PURE__*/_jsx(StartIcon, {
       className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["mr-2 shrink-0 text-grey-500"]))),
-      size: "1rem"
+      width: "1rem",
+      height: "1rem"
     }), /*#__PURE__*/_jsx("span", {
       className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["flex-1 truncate mr-4"]))),
       children: children

package/esm/Dropzone/Dropzone.js

@@ -12,7 +12,7 @@ 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 { useField } from "../Field";
 import { useLocale } from "../Satellite";
 import stl from "../styles/helpers/satellitePrefixer";
 import { formatHumanSize } from "../utils/formatters";
@@ -64,8 +64,9 @@ export var Dropzone = function Dropzone(_ref2) {
     _useState4 = _slicedToArray(_useState3, 2),
     focused = _useState4[0],
     setFocused = _useState4[1];
-  var _useFieldState = useFieldState(),
-    status = _useFieldState.status;
+  var _useField = useField(),
+    status = _useField.state.status,
+    labelId = _useField.labelId;
   var onDrop = useCallback(function (acceptedFiles, fileRejections) {
     var updatedFiles = multiple ? [].concat(_toConsumableArray(files), _toConsumableArray(acceptedFiles)) : acceptedFiles;
     setFiles(updatedFiles);
@@ -104,6 +105,7 @@ export var Dropzone = function Dropzone(_ref2) {
   })), {}, {
     children: [/*#__PURE__*/_jsx("input", _objectSpread({}, getInputProps({
       id: dropzoneId,
+      "aria-labelledby": labelId,
       onFocus: function onFocus() {
         return setFocused(true);
       },

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

@@ -1,9 +1,11 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 import cx from "clsx";
+import { useMemo } from "react";
 import { AlertCircle } from "react-feather";
 import stl from "../styles/helpers/satellitePrefixer";
-import FieldStateContext, { DEFAULT_STATE } from "./FieldStateContext";
+import { uniqueId } from "../utils";
+import { DEFAULT_FIELD_STATE, FieldContext } from "./FieldContext";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 /**
@@ -44,20 +46,31 @@ export var 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 ? DEFAULT_STATE : _ref$state,
+    state = _ref$state === void 0 ? DEFAULT_FIELD_STATE : _ref$state,
     _ref$inline = _ref.inline,
     inline = _ref$inline === void 0 ? false : _ref$inline,
     children = _ref.children;
-  return /*#__PURE__*/_jsx(FieldStateContext.Provider, {
-    value: state,
+  var hasLabel = !!label;
+  var labelId = useMemo(
+  // eslint-disable-next-line @algolia/satellite/prefer-stl-helper
+  function () {
+    return hasLabel ? labelIdProp !== null && labelIdProp !== void 0 ? labelIdProp : uniqueId("stl-field-label-") : undefined;
+  }, [labelIdProp, hasLabel]);
+  return /*#__PURE__*/_jsx(FieldContext.Provider, {
+    value: {
+      state: state,
+      labelId: labelId
+    },
     children: /*#__PURE__*/_jsxs("div", {
       className: className,
       children: [/*#__PURE__*/_jsxs("label", {
         className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["cursor-pointer flex ", ""])), !inline && "flex-col"),
         htmlFor: labelFor,
-        children: [!!label && /*#__PURE__*/_jsx("div", {
+        children: [hasLabel && /*#__PURE__*/_jsx("div", {
+          id: labelId,
           className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["truncate ", ""])), inline ? "mr-2" : "mb-1"),
           children: label
         }), /*#__PURE__*/_jsx("div", {

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

@@ -0,0 +1,8 @@
+import { createContext } from "react";
+export var DEFAULT_FIELD_STATE = {
+  status: "default"
+};
+export var DEFAULT_CONTEXT_VALUE = {
+  state: DEFAULT_FIELD_STATE
+};
+export var FieldContext = /*#__PURE__*/createContext(DEFAULT_CONTEXT_VALUE);

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

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

package/esm/Field/useField.d.ts

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

package/esm/Field/useField.js

@@ -0,0 +1,5 @@
+import { useContext } from "react";
+import { FieldContext } from "./FieldContext";
+export var useField = function useField() {
+  return useContext(FieldContext);
+};

package/esm/Input/Input.js

@@ -10,7 +10,7 @@ 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 { useField } from "../Field";
 import { useLocale } from "../Satellite";
 import stl from "../styles/helpers/satellitePrefixer";
 import isNil from "../utils/isNil";
@@ -82,8 +82,9 @@ export var Input = /*#__PURE__*/forwardRef(function (_ref, externalRef) {
     inputRefCallback = _useForwardedRef2[0],
     inputRef = _useForwardedRef2[1];
   var triggerInputChange = useTriggerInputChange(inputRef);
-  var _useFieldState = useFieldState(),
-    status = _useFieldState.status;
+  var _useField = useField(),
+    status = _useField.state.status,
+    labelId = _useField.labelId;
   var isControlled = ("value" in inputProps);
   var _useState3 = useState(function () {
       return isControlled ? inputProps.value : inputProps.defaultValue;
@@ -98,6 +99,7 @@ export var Input = /*#__PURE__*/forwardRef(function (_ref, externalRef) {
     }
   }, [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 : Fragment;
   var clearable = typeof clearableProp === "boolean" ? clearableProp : type === "search";
   return /*#__PURE__*/_jsxs("div", {
@@ -109,11 +111,13 @@ export var Input = /*#__PURE__*/forwardRef(function (_ref, externalRef) {
     },
     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"),
-      size: variant === "small" ? "1rem" : "1.5rem"
+      width: iconSize,
+      height: iconSize
     }), /*#__PURE__*/_jsx("input", _objectSpread(_objectSpread({
       className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["mx-4 no-search-input-decoration"]))),
       ref: inputRefCallback,
-      type: type
+      type: type,
+      "aria-labelledby": labelId
     }, inputProps), {}, {
       readOnly: readOnly,
       disabled: disabled,

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

@@ -33,10 +33,12 @@ export var Link = /*#__PURE__*/forwardRef(function (_ref, ref) {
     className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["typo-link inline-flex items-center"]))), className),
     children: [StartIcon && /*#__PURE__*/_jsx(StartIcon, {
       className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["mr-1 shrink-0"]))),
-      size: "1em"
+      width: "1em",
+      height: "1em"
     }), children, EndIcon && /*#__PURE__*/_jsx(EndIcon, {
       className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["ml-1 shrink-0"]))),
-      size: "1em"
+      width: "1em",
+      height: "1em"
     })]
   }));
 });