@algolia/satellite 1.7.0 → 1.8.0

package/dist/cjs/Actions/Button/PolymorphicButton.js

@@ -43,7 +43,7 @@ var PolymorphicButton = exports.PolymorphicButton = /*#__PURE__*/(0, _react.forw
     children = props.children,
     cleanedProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
   if (loading) {
-    // @ts-expect-error
+    // @ts-expect-error disabled is not present in PolymorphicButtonProps
     cleanedProps.disabled = true;
   }
   var buttonClassName = (0, _clsx["default"])(BASE_CLASSNAMES, _styles.BUTTON_SIZE_CLASSNAMES[size], _styles.BUTTON_VARIANT_CLASSNAMES[variant], cleanedProps.disabled && (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["btn-disabled"]))), className);
@@ -51,7 +51,7 @@ var PolymorphicButton = exports.PolymorphicButton = /*#__PURE__*/(0, _react.forw
   var iconClassNames = (0, _clsx["default"])((0, _styles.getIconColorClassName)(props), loading && (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["invisible"]))));
   var textClassNames = (0, _clsx["default"])(loading && (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["invisible"]))));
   if ((0, _types.isButtonType)(props) && !Object.prototype.hasOwnProperty.call(cleanedProps, "type")) {
-    // @ts-expect-error
+    // @ts-expect-error type is not present in PolymorphicButtonProps
     cleanedProps.type = "button";
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Component, _objectSpread(_objectSpread({}, cleanedProps), {}, {

package/dist/cjs/Actions/Button/PolymorphicIconButton.js

@@ -51,13 +51,13 @@ var PolymorphicIconButton = exports.PolymorphicIconButton = /*#__PURE__*/(0, _re
     loading = _props$loading === void 0 ? false : _props$loading,
     cleanedProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
   if (loading) {
-    // @ts-expect-error
+    // @ts-expect-error disabled prop is not present in PolymorphicIconButtonProps
     cleanedProps.disabled = true;
   }
   var iconButtonClassName = (0, _clsx["default"])(BASE_CLASSNAMES, SIZE_CLASSNAMES[size], VARIANT_CLASSNAMES[variant], cleanedProps.disabled && (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["btn-disabled"]))), className);
   var loaderClassNames = (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["absolute ", ""])), (variant === "destructive" || variant === "primary") && "text-white");
   if ((0, _types.isButtonType)(props) && !Object.prototype.hasOwnProperty.call(cleanedProps, "type")) {
-    // @ts-ignore
+    // @ts-expect-error type is not present in PolymorphicIconButtonProps
     cleanedProps.type = "button";
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Overlay.TooltipWrapper, {

package/dist/cjs/Actions/Button/types.d.ts

@@ -25,8 +25,8 @@ declare type AsProp<C extends React.ElementType> = {
     as?: C;
 };
 declare type PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);
-declare type PolymorphicComponentProp<C extends React.ElementType, Props = {}> = React.PropsWithChildren<Props & AsProp<C>> & Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;
-export declare type PolymorphicComponentPropWithRef<C extends React.ElementType, Props = {}> = PolymorphicComponentProp<C, Props> & {
+declare type PolymorphicComponentProp<C extends React.ElementType, Props = object> = React.PropsWithChildren<Props & AsProp<C>> & Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;
+export declare type PolymorphicComponentPropWithRef<C extends React.ElementType, Props = object> = PolymorphicComponentProp<C, Props> & {
     ref?: PolymorphicRef<C>;
 };
 export declare type PolymorphicRef<C extends React.ElementType> = React.ComponentPropsWithRef<C>["ref"];

package/dist/cjs/Fields/AutoComplete/AutoComplete.js

@@ -276,7 +276,7 @@ var AutoComplete = exports.AutoComplete = /*#__PURE__*/(0, _react.forwardRef)(fu
       if (!multiple && value && !newInputValue) {
         multipleSelection.setSelectedItems([]);
       }
-      (_menuPopper$update = menuPopper.update) === null || _menuPopper$update === void 0 || _menuPopper$update.call(menuPopper);
+      void ((_menuPopper$update = menuPopper.update) === null || _menuPopper$update === void 0 ? void 0 : _menuPopper$update.call(menuPopper));
     },
     // We need to make sure to define event handlers here so that they can be composed properly
     onFocus: function onFocus(evt) {
@@ -290,7 +290,7 @@ var AutoComplete = exports.AutoComplete = /*#__PURE__*/(0, _react.forwardRef)(fu
     },
     onKeyDown: function onKeyDown(evt) {
       if (combobox.isOpen && ["ArrowLeft", "ArrowRight"].includes(evt.key)) {
-        // @ts-expect-error
+        // @ts-expect-error wrong type
         evt.nativeEvent.preventDownshiftDefault = true;
       }
       if (multiple && creatable && inputValue.trim().length > 0 && separatorKeys !== null && separatorKeys !== void 0 && separatorKeys.includes(evt.key)) {
@@ -328,7 +328,7 @@ var AutoComplete = exports.AutoComplete = /*#__PURE__*/(0, _react.forwardRef)(fu
   if (oldHideMenu.current !== hideMenu) {
     var _menuPopper$update2;
     oldHideMenu.current = hideMenu;
-    (_menuPopper$update2 = menuPopper.update) === null || _menuPopper$update2 === void 0 || _menuPopper$update2.call(menuPopper);
+    void ((_menuPopper$update2 = menuPopper.update) === null || _menuPopper$update2 === void 0 ? void 0 : _menuPopper$update2.call(menuPopper));
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AutoCompleteContext.AutoCompleteProvider, {
     locale: locale,
@@ -336,7 +336,7 @@ var AutoComplete = exports.AutoComplete = /*#__PURE__*/(0, _react.forwardRef)(fu
       className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["flex"]))), className),
       ref: function ref(el) {
         setContainerElement(el);
-        // @ts-expect-error
+        // @ts-expect-error - setContainerMeasureRef does accept HTMLDivElement | null
         setContainerMeasureRef(el);
       },
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {

package/dist/cjs/Fields/DatePicker/components/Calendar.js

@@ -17,10 +17,7 @@ var DatePickerCalendar = exports.DatePickerCalendar = function DatePickerCalenda
   var curatedProps = Object.fromEntries(Object.entries(props).filter(function (_ref) {
     var _ref2 = (0, _slicedToArray2["default"])(_ref, 1),
       key = _ref2[0];
-    return (
-      // @ts-expect-error
-      !excludedDayPickerPropsList.includes(key)
-    );
+    return !excludedDayPickerPropsList.includes(key);
   }));
 
   /**

package/dist/cjs/Fields/Field/Field.js

@@ -57,6 +57,10 @@ var Field = exports.Field = function Field(_ref) {
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     requiredContext = _useState2[0],
     setRequiredContext = _useState2[1];
+  var _useState3 = (0, _react.useState)(undefined),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    elementToFocusContext = _useState4[0],
+    setElementToFocusContext = _useState4[1];
   if (process.env.NODE_ENV !== "production") {
     if (typeof requiredProp !== "undefined" && typeof requiredContext !== "undefined" && requiredProp !== requiredContext) {
       console.warn("The `required` prop is set to different values on both the Field (`required=".concat(requiredProp, "`) and the underlying input component (`required=").concat(requiredContext, "`)."));
@@ -85,13 +89,19 @@ var Field = exports.Field = function Field(_ref) {
       labelId: labelId,
       descriptionId: descriptionId,
       inputId: labelFor,
-      setRequired: setRequiredContext
+      setRequired: setRequiredContext,
+      setElementToFocus: setElementToFocusContext
     },
     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 ? "items-center" : "flex-col"),
         htmlFor: labelFor,
+        onClick: function onClick() {
+          if (!(elementToFocusContext !== null && elementToFocusContext !== void 0 && elementToFocusContext.closest("[aria-disabled=true]")) && !(elementToFocusContext !== null && elementToFocusContext !== void 0 && elementToFocusContext.closest("[disabled=true]"))) {
+            elementToFocusContext === null || elementToFocusContext === void 0 || elementToFocusContext.focus();
+          }
+        },
         children: [hasLabel && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           id: labelId,
           className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["truncate ", ""])), inline ? "mr-2" : "mb-1"),

package/dist/cjs/Fields/Field/FieldContext.d.ts

@@ -13,6 +13,7 @@ export declare type FieldContextValue = {
     descriptionId?: string;
     inputId?: string;
     setRequired?: (required?: boolean) => void;
+    setElementToFocus?: (elementToFocus?: HTMLElement) => void;
 };
 export declare const DEFAULT_FIELD_STATE: FieldState;
 export declare const DEFAULT_CONTEXT_VALUE: FieldContextValue;

package/dist/cjs/Fields/Field/useField.d.ts

@@ -1,5 +1,6 @@
 import type { FieldContextValue } from "./FieldContext";
 export declare type UseFieldProps = {
     required?: boolean;
+    elementToFocus?: HTMLElement;
 };
-export declare const useField: ({ required }?: UseFieldProps) => FieldContextValue;
+export declare const useField: ({ required, elementToFocus }?: UseFieldProps) => FieldContextValue;

package/dist/cjs/Fields/Field/useField.js

@@ -9,18 +9,23 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
 var _FieldContext = require("./FieldContext");
-var _excluded = ["setRequired"];
+var _excluded = ["setRequired", "setElementToFocus"];
 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; }
 var useField = exports.useField = function useField() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    required = _ref.required;
+    required = _ref.required,
+    elementToFocus = _ref.elementToFocus;
   var _useContext = (0, _react.useContext)(_FieldContext.FieldContext),
     setRequired = _useContext.setRequired,
+    setElementToFocus = _useContext.setElementToFocus,
     contextValue = (0, _objectWithoutProperties2["default"])(_useContext, _excluded);
   (0, _react.useEffect)(function () {
     return setRequired === null || setRequired === void 0 ? void 0 : setRequired(required);
   }, [setRequired, required]);
+  (0, _react.useEffect)(function () {
+    return setElementToFocus === null || setElementToFocus === void 0 ? void 0 : setElementToFocus(elementToFocus);
+  }, [setElementToFocus, elementToFocus]);
   return _objectSpread({
     setRequired: setRequired
   }, contextValue);

package/dist/cjs/Fields/Form/stories/ExtraErrors.js

@@ -223,25 +223,12 @@ var FormikExtraErrorsComponent = exports.FormikExtraErrorsComponent = function F
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-full @lg:w-1/2"]))),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.Form, {
-        onSubmit: ( /*#__PURE__*/function () {
-          var _ref3 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3(e) {
-            return _regenerator["default"].wrap(function _callee3$(_context3) {
-              while (1) switch (_context3.prev = _context3.next) {
-                case 0:
-                  setRevalidationEnabled(true);
-                  formik.handleSubmit(e);
-                  // notice that you might want to hook your validations into Formik onSubmit handler (called just above)
-                  // not directly here
-                case 2:
-                case "end":
-                  return _context3.stop();
-              }
-            }, _callee3);
-          }));
-          return function (_x3) {
-            return _ref3.apply(this, arguments);
-          };
-        }()),
+        onSubmit: function onSubmit(e) {
+          setRevalidationEnabled(true);
+          formik.handleSubmit(e);
+          // notice that you might want to hook your validations into Formik onSubmit handler (called just above)
+          // not directly here
+        },
         onChange: function onChange() {
           return setExtraErrors([]);
         },

package/dist/cjs/Fields/Form/stories/MultiStep.js

@@ -6,8 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.RHFMultiStepComponent = exports.FormikMultiStepComponent = void 0;
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
@@ -346,24 +344,13 @@ var RHFMultiStepComponent = exports.RHFMultiStepComponent = function RHFMultiSte
             }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
               variant: "primary",
               "aria-label": "Next step",
-              onClick: /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
-                var valid;
-                return _regenerator["default"].wrap(function _callee$(_context) {
-                  while (1) switch (_context.prev = _context.next) {
-                    case 0:
-                      _context.next = 2;
-                      return trigger(steps[page - 1]);
-                    case 2:
-                      valid = _context.sent;
-                      if (valid) {
-                        goToNextPage();
-                      }
-                    case 4:
-                    case "end":
-                      return _context.stop();
+              onClick: function onClick() {
+                void trigger(steps[page - 1]).then(function (isValid) {
+                  if (isValid) {
+                    goToNextPage();
                   }
-                }, _callee);
-              })),
+                });
+              },
               children: "Next"
             })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
@@ -603,7 +590,7 @@ var FormikMultiStepComponent = exports.FormikMultiStepComponent = function Formi
                   }, formik.getFieldProps("sorting")), {}, {
                     onChange: function onChange() {
                       var fieldProps = formik.getFieldProps("sorting");
-                      formik.setFieldValue("sorting", fieldProps.value.includes(option) ? fieldProps.value.filter(function (v) {
+                      void formik.setFieldValue("sorting", fieldProps.value.includes(option) ? fieldProps.value.filter(function (v) {
                         return v !== option;
                       }) : [].concat((0, _toConsumableArray2["default"])(fieldProps.value), [option]));
                     }
@@ -634,7 +621,7 @@ var FormikMultiStepComponent = exports.FormikMultiStepComponent = function Formi
                     checked: formik.values.filters.includes(option),
                     onChange: function onChange() {
                       var fieldProps = formik.getFieldProps("filters");
-                      formik.setFieldValue("filters", fieldProps.value.includes(option) ? fieldProps.value.filter(function (v) {
+                      void formik.setFieldValue("filters", fieldProps.value.includes(option) ? fieldProps.value.filter(function (v) {
                         return v !== option;
                       }) : [].concat((0, _toConsumableArray2["default"])(fieldProps.value), [option]));
                     }
@@ -661,20 +648,11 @@ var FormikMultiStepComponent = exports.FormikMultiStepComponent = function Formi
             }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
               variant: "primary",
               "aria-label": "Next step",
-              onClick: /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
-                return _regenerator["default"].wrap(function _callee2$(_context2) {
-                  while (1) switch (_context2.prev = _context2.next) {
-                    case 0:
-                      _context2.next = 2;
-                      return formik.validateField(steps[page - 1]);
-                    case 2:
-                      setNextPageClicked(true); // See workaround above
-                    case 3:
-                    case "end":
-                      return _context2.stop();
-                  }
-                }, _callee2);
-              })),
+              onClick: function onClick() {
+                void formik.validateField(steps[page - 1]).then(function () {
+                  return setNextPageClicked(true);
+                });
+              },
               children: "Next"
             })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {

package/dist/cjs/Fields/Form/stories/ValidationStrategies.js

@@ -6,8 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.RHFValidationStrategiesComponent = exports.FormikValidationStrategiesComponent = void 0;
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -189,7 +187,7 @@ var RHFValidationStrategiesComponent = exports.RHFValidationStrategiesComponent
                   e.target.value = formatInputValue(e, 4, " ");
                   field.onChange(e);
                   if (e.target.value.length === 19) {
-                    trigger("cardNumber");
+                    void trigger("cardNumber");
                   }
                 }
               }))
@@ -221,7 +219,7 @@ var RHFValidationStrategiesComponent = exports.RHFValidationStrategiesComponent
                     field.onChange(e);
                   },
                   onBlur: function onBlur() {
-                    trigger("cardExpirationDate");
+                    void trigger("cardExpirationDate");
                     field.onBlur();
                   }
                 }))
@@ -246,7 +244,7 @@ var RHFValidationStrategiesComponent = exports.RHFValidationStrategiesComponent
                   required: true
                 }, field), {}, {
                   onBlur: function onBlur() {
-                    trigger("cardCVC");
+                    void trigger("cardCVC");
                     field.onBlur();
                   }
                 }))
@@ -368,29 +366,14 @@ var FormikValidationStrategiesComponent = exports.FormikValidationStrategiesComp
             startIcon: _Icons.CreditCardIcon,
             required: true
           }, formik.getFieldProps("cardNumber")), {}, {
-            onChange: ( /*#__PURE__*/function () {
-              var _ref5 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(e) {
-                var value;
-                return _regenerator["default"].wrap(function _callee$(_context) {
-                  while (1) switch (_context.prev = _context.next) {
-                    case 0:
-                      value = formatInputValue(e, 4, " ");
-                      _context.next = 3;
-                      return formik.setFieldValue("cardNumber", value);
-                    case 3:
-                      if (value.length === 19) {
-                        formik.validateField("cardNumber");
-                      }
-                    case 4:
-                    case "end":
-                      return _context.stop();
-                  }
-                }, _callee);
-              }));
-              return function (_x) {
-                return _ref5.apply(this, arguments);
-              };
-            }())
+            onChange: function onChange(e) {
+              var value = formatInputValue(e, 4, " ");
+              formik.setFieldValue("cardNumber", value).then(function () {
+                if (value.length === 19) {
+                  void formik.validateField("cardNumber");
+                }
+              }, function () {});
+            }
           }))
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["w-full flex gap-4 flex-col @xl:flex-row"]))),
@@ -413,7 +396,7 @@ var FormikValidationStrategiesComponent = exports.FormikValidationStrategiesComp
                 formik.getFieldProps("cardExpirationDate").onChange(e);
               },
               onBlur: function onBlur(e) {
-                formik.validateField("cardExpirationDate");
+                void formik.validateField("cardExpirationDate");
                 formik.getFieldProps("cardExpirationDate").onBlur(e);
               }
             }))
@@ -431,7 +414,7 @@ var FormikValidationStrategiesComponent = exports.FormikValidationStrategiesComp
               required: true
             }, formik.getFieldProps("cardCVC")), {}, {
               onBlur: function onBlur(e) {
-                formik.validateField("cardCVC");
+                void formik.validateField("cardCVC");
                 formik.getFieldProps("cardCVC").onBlur(e);
               }
             }))

package/dist/cjs/Fields/RangeSlider/RangeSlider.js

@@ -13,6 +13,7 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _react = require("react");
 var _colors = _interopRequireDefault(require("../../styles/colors"));
 var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
+var _mergeRefs = require("../../utils/mergeRefs");
 var _Field = require("../Field");
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["id", "className", "value", "defaultValue", "onChange", "onCommit", "disabled", "required", "min", "max", "track1Color", "track2Color"];
@@ -56,8 +57,10 @@ var RangeSliderInternal = function RangeSliderInternal(_ref2, ref) {
     track1: disabled ? _colors["default"].grey[200] : track1Color,
     track2: disabled ? _colors["default"].grey[100] : track2Color
   };
+  var thumbRef = (0, _react.useRef)(null);
   var _useField = (0, _Field.useField)({
-      required: required
+      required: required,
+      elementToFocus: thumbRef.current || undefined
     }),
     state = _useField.state,
     labelId = _useField.labelId,
@@ -70,14 +73,10 @@ var RangeSliderInternal = function RangeSliderInternal(_ref2, ref) {
     value: coerceToRadixValue(value),
     defaultValue: coerceToRadixValue(defaultValue),
     onValueChange: function onValueChange(value) {
-      return (// @ts-expect-error
-        onChange === null || onChange === void 0 ? void 0 : onChange(value.length === 1 ? value[0] : value)
-      );
+      return onChange === null || onChange === void 0 ? void 0 : onChange(value.length === 1 ? value[0] : value);
     },
     onValueCommit: function onValueCommit(value) {
-      return (// @ts-expect-error
-        onCommit === null || onCommit === void 0 ? void 0 : onCommit(value.length === 1 ? value[0] : value)
-      );
+      return onCommit === null || onCommit === void 0 ? void 0 : onCommit(value.length === 1 ? value[0] : value);
     },
     disabled: disabled,
     max: max,
@@ -95,7 +94,7 @@ var RangeSliderInternal = function RangeSliderInternal(_ref2, ref) {
       })
     }), Array(thumbsCount).fill(undefined).map(function (_, idx) {
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactSlider.SliderThumb, {
-        ref: ref,
+        ref: idx === 0 ? (0, _mergeRefs.mergeRefs)([ref, thumbRef]) : ref,
         id: id && (idx === 0 ? id : "".concat(id, "-").concat(idx)),
         "aria-labelledby": labelId,
         "aria-describedby": descriptionId,

package/dist/cjs/Indicators/ScrollIndicator/ScrollIndicator.js

@@ -30,8 +30,7 @@ var useScrollIndicators = function useScrollIndicators() {
     setElement = _useState2[1];
   var setScrollIndicatorsRef = (0, _react.useCallback)(function (element) {
     setElement(element);
-    // Types are wrong, a ref callback must be able to accept null
-    // @ts-ignore
+    // @ts-expect-error Types are wrong, a ref callback must be able to accept null
     setMeasureRef(element);
   }, [setMeasureRef]);
   var fakeScrollRef = (0, _react.useMemo)(function () {

package/dist/cjs/Layout/Tables/DataTable/DataTable.d.ts

@@ -53,5 +53,5 @@ export declare type DataTableProps<Item> = BaseDataTableProps<Item> & (DataTable
  *
  * See the [Data Table documentation page](https://satellite.algolia.com/layouts/data-table) for more information.
  */
-export declare const DataTable: <Item extends {}>({ data, itemId, columns, onChange, mode, status, noDataContent, errorContent, sorting, sortMode, pagination, selectMode, selection, onSelectionChange, canSelectItem, canHoverRow, onRowHoveredChanged, locale, }: DataTableProps<Item>) => import("react/jsx-runtime").JSX.Element;
+export declare const DataTable: <Item extends object>({ data, itemId, columns, onChange, mode, status, noDataContent, errorContent, sorting, sortMode, pagination, selectMode, selection, onSelectionChange, canSelectItem, canHoverRow, onRowHoveredChanged, locale, }: DataTableProps<Item>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/Layout/Tables/DataTable/components/Body.d.ts

@@ -11,4 +11,4 @@ export interface DataTableBodyProps<Item> extends Pick<DataTableProps<Item>, "se
     selectMode: SelectMode;
     locale: Required<DataTableLocale>;
 }
-export declare const DataTableBody: <Item extends {}>({ rows, columns, status, noDataContent, errorContent, selectMode, selection, onSelectionChange, onRowHoverChange, canHoverRow, locale, }: DataTableBodyProps<Item>) => import("react/jsx-runtime").JSX.Element;
+export declare const DataTableBody: <Item extends object>({ rows, columns, status, noDataContent, errorContent, selectMode, selection, onSelectionChange, onRowHoverChange, canHoverRow, locale, }: DataTableBodyProps<Item>) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/Layout/Tables/DataTable/components/Header.d.ts

@@ -5,4 +5,4 @@ export interface DataTableHeaderProps<Item> {
     onToggleSort: (columnId: string, direction: SortingDirection) => void;
     disabled?: boolean;
 }
-export declare const DataTableHeader: <Item extends {}>({ columns, sorting, onToggleSort, disabled, }: DataTableHeaderProps<Item>) => import("react/jsx-runtime").JSX.Element;
+export declare const DataTableHeader: <Item extends object>({ columns, sorting, onToggleSort, disabled, }: DataTableHeaderProps<Item>) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/Layout/Tables/DataTable/components/HeaderCell.d.ts

@@ -8,4 +8,4 @@ export interface DataTableHeaderCellProps<Item> extends HTMLAttributes<HTMLTable
     onToggleSort: (columnId: string, sortingDirection: SortingDirection) => void;
     children: ReactNode;
 }
-export declare const DataTableHeaderCell: <Item extends {}>({ sortingDirection, onToggleSort, column: { id, className, sort }, disabled, children, ...props }: DataTableHeaderCellProps<Item>) => import("react/jsx-runtime").JSX.Element;
+export declare const DataTableHeaderCell: <Item extends object>({ sortingDirection, onToggleSort, column: { id, className, sort }, disabled, children, ...props }: DataTableHeaderCellProps<Item>) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/Layout/Tables/DataTable/utils.d.ts

@@ -1,4 +1,4 @@
 import type { AdvancedColumnDefinition, DeterminatePagination, IndeterminatePagination, PaginationConfiguration, Row } from "./types";
 export declare const isDeterminatePagination: (pagination: PaginationConfiguration) => pagination is DeterminatePagination;
 export declare const isIndeterminatePagination: (pagination: PaginationConfiguration) => pagination is IndeterminatePagination;
-export declare const getCellValue: <Item extends {}>(column: AdvancedColumnDefinition<Item>, row: Row<Item>) => any;
+export declare const getCellValue: <Item extends object>(column: AdvancedColumnDefinition<Item>, row: Row<Item>) => any;

package/dist/cjs/Navigation/Stepper/Step.js

@@ -17,7 +17,7 @@ var _uniqueId = require("../../utils/uniqueId");
 var _StepperContext = require("./StepperContext");
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["className", "index", "icon", "label", "name", "completed", "disabled"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31;
 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; }
 var BUTTON_SIZE_CLASSNAMES = {
@@ -63,6 +63,7 @@ var Step = exports.Step = function Step(_ref) {
   var activeLocale = typeof locale.activeStep === "function" ? locale.activeStep(stepName) : locale.activeStep;
   var completedLocale = typeof locale.completedStep === "function" ? locale.completedStep(stepName) : locale.completedStep;
   var incompletedLocale = typeof locale.incompletedStep === "function" ? locale.incompletedStep(stepName) : locale.incompletedStep;
+  var isVertical = context.orientation === "vertical";
   var Icon = CustomIcon;
   if (completed) {
     Icon = CheckIconInternal;
@@ -78,7 +79,7 @@ var Step = exports.Step = function Step(_ref) {
       "aria-label": disabled ? disabledLocale : active ? activeLocale : completed ? completedLocale : incompletedLocale,
       "aria-current": active ? "step" : undefined,
       disabled: disabled,
-      tabIndex: index === context.activeStep ? 0 : -1,
+      tabIndex: index === context.focusedStep ? 0 : -1,
       "data-step-idx": index,
       onClick: function onClick() {
         var _context$onStepChange;
@@ -96,20 +97,20 @@ var Step = exports.Step = function Step(_ref) {
         }
       },
       children: [context.connectors && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["absolute -z-10 border-l h-full group-last/step:hidden"]))), completed ? (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["border-green-600"]))) : (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["border-grey-200"]))), CONNECTOR_SIZE_CLASSNAMES[context.size])
+        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["absolute -z-10 group-last/step:hidden"]))), isVertical ? (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["border-l h-full"]))) : (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["border-t w-4 -right-px translate-x-full"]))), completed ? (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["border-green-600"]))) : (0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["border-grey-200"]))), isVertical && CONNECTOR_SIZE_CLASSNAMES[context.size])
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["rounded-full flex items-center justify-center shrink-0 text-sm"]))), !active && !completed && (0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-100"]))), !active && !completed && !disabled && (0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["group-hover/button:bg-white"]))), active && !completed && (0, _satellitePrefixer["default"])(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-800 text-white"]))), completed && (0, _satellitePrefixer["default"])(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2["default"])(["bg-green-600 text-white"]))), ICON_SIZE_CLASSNAMES[context.size]),
+        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["rounded-full flex items-center justify-center shrink-0 text-sm"]))), !active && !completed && (0, _satellitePrefixer["default"])(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-100"]))), !active && !completed && !disabled && (0, _satellitePrefixer["default"])(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2["default"])(["group-hover/button:bg-white"]))), active && !completed && (0, _satellitePrefixer["default"])(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-800 text-white"]))), completed && (0, _satellitePrefixer["default"])(_templateObject26 || (_templateObject26 = (0, _taggedTemplateLiteral2["default"])(["bg-green-600 text-white"]))), ICON_SIZE_CLASSNAMES[context.size]),
         children: Icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
           width: ICON_SIZE[context.size],
           height: ICON_SIZE[context.size]
         }) : index + 1
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: (0, _clsx["default"])(disabled && (0, _satellitePrefixer["default"])(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteral2["default"])(["text-grey-300"])))),
+        className: (0, _clsx["default"])(disabled && (0, _satellitePrefixer["default"])(_templateObject27 || (_templateObject27 = (0, _taggedTemplateLiteral2["default"])(["text-grey-300"])))),
         children: [!!label && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: (0, _satellitePrefixer["default"])(_templateObject26 || (_templateObject26 = (0, _taggedTemplateLiteral2["default"])(["text-sm line-clamp-1"]))),
+          className: (0, _satellitePrefixer["default"])(_templateObject28 || (_templateObject28 = (0, _taggedTemplateLiteral2["default"])(["text-sm line-clamp-1"]))),
           children: label
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject27 || (_templateObject27 = (0, _taggedTemplateLiteral2["default"])(["text-base line-clamp-2"]))), (completed || active) && (0, _satellitePrefixer["default"])(_templateObject28 || (_templateObject28 = (0, _taggedTemplateLiteral2["default"])(["text-grey-900"]))), context.size === "small" && (0, _satellitePrefixer["default"])(_templateObject29 || (_templateObject29 = (0, _taggedTemplateLiteral2["default"])(["text-sm"])))),
+          className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject29 || (_templateObject29 = (0, _taggedTemplateLiteral2["default"])(["text-base line-clamp-2"]))), (completed || active) && (0, _satellitePrefixer["default"])(_templateObject30 || (_templateObject30 = (0, _taggedTemplateLiteral2["default"])(["text-grey-900"]))), context.size === "small" && (0, _satellitePrefixer["default"])(_templateObject31 || (_templateObject31 = (0, _taggedTemplateLiteral2["default"])(["text-sm"])))),
           children: name
         })]
       })]

package/dist/cjs/Navigation/Stepper/Stepper.d.ts

@@ -7,6 +7,7 @@ export declare type StepperLocale = {
     completedStep?: string | ((stepName: string) => string);
 };
 export declare type StepperSizes = "small" | "default" | "large";
+export declare type StepperOrientation = "horizontal" | "vertical";
 export interface StepperProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
     /**
      * Defines the steps of the Stepper.
@@ -27,6 +28,11 @@ export interface StepperProps extends Omit<HTMLAttributes<HTMLDivElement>, "chil
      * @default "default"
      */
     size?: StepperSizes;
+    /**
+     * Defines the orientation of the Stepper.
+     * @default "vertical"
+     */
+    orientation?: StepperOrientation;
     /**
      * Defines whether the connectors should be displayed.
      * @default true

package/dist/cjs/Navigation/Stepper/Stepper.js

@@ -17,8 +17,8 @@ var _Step = require("./Step");
 var _StepperContext = require("./StepperContext");
 var _utils = require("./utils");
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject;
-var _excluded = ["steps", "activeStep", "onStepChange", "size", "connectors", "locale", "className"];
+var _templateObject, _templateObject2, _templateObject3;
+var _excluded = ["steps", "activeStep", "onStepChange", "size", "orientation", "connectors", "locale", "className"];
 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; }
 var DEFAULT_TAG_LOCALE = {
@@ -41,6 +41,8 @@ var Stepper = exports.Stepper = function Stepper(_ref) {
     _onStepChange = _ref.onStepChange,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? "default" : _ref$size,
+    _ref$orientation = _ref.orientation,
+    orientation = _ref$orientation === void 0 ? "vertical" : _ref$orientation,
     _ref$connectors = _ref.connectors,
     connectors = _ref$connectors === void 0 ? true : _ref$connectors,
     propsLocale = _ref.locale,
@@ -87,6 +89,7 @@ var Stepper = exports.Stepper = function Stepper(_ref) {
       activeStep: activeStep,
       focusedStep: focusedStep,
       size: size,
+      orientation: orientation,
       connectors: connectors,
       locale: locale,
       onStepChange: function onStepChange(index) {
@@ -103,11 +106,14 @@ var Stepper = exports.Stepper = function Stepper(_ref) {
       className: (0, _clsx["default"])(className),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("ol", {
         role: "presentation",
-        className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex flex-col isolate"]))),
+        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex isolate"]))), orientation === "vertical" ? (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex-col"]))) : (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["gap-0"])))),
         ref: containerRef,
         onFocus: function onFocus() {
           setFocusedStep(activeStep);
         },
+        onBlur: function onBlur() {
+          setFocusedStep(activeStep);
+        },
         onKeyDown: function onKeyDown(event) {
           switch (event.key) {
             case "ArrowLeft":