@algolia/satellite 1.6.0 → 1.8.0

package/dist/esm/Actions/Accordion/Accordion.d.ts

@@ -0,0 +1,142 @@
+import * as RadixAccordion from "@radix-ui/react-accordion";
+import type { ReactNode, VFC } from "react";
+import type { IconComponentType } from "../../Icons";
+declare type AccordionSharedProps = {
+    children: ReactNode;
+    /**
+     * Defines a class name for the `Accordion`.
+     */
+    className?: string;
+    /**
+     * Defines whether the `Accordion` is disabled, preventing the user from interacting with the accordion and all its items.
+     */
+    disabled?: boolean;
+};
+declare type AccordionSingleProps = {
+    /**
+     * Defines whether a single or multiple items can be expanded at a time.
+     * @default false
+     */
+    multiple?: false;
+    /**
+     * Defines the controlled value of the item to expand when `multiple` is `false`.
+     * Must be used in conjunction with `onValueChange`.
+     */
+    value?: RadixAccordion.AccordionSingleProps["value"];
+    /**
+     * Defines the value of the item to expand when initially rendered and `multiple` is `false`.
+     * Use when you do not need to control the state of the items.
+     */
+    defaultValue?: RadixAccordion.AccordionSingleProps["defaultValue"];
+    /**
+     * Defines the event handler called when the expanded state of an item changes and `multiple` is `false`.
+     */
+    onChange?: RadixAccordion.AccordionSingleProps["onValueChange"];
+    /**
+     * Allows closing content when clicking trigger for an open item when `multiple` is `false`.
+     * @default true
+     */
+    collapsible?: boolean;
+};
+declare type AccordionMultipleProps = {
+    /**
+     * Defines whether a single or multiple items can be expanded at a time.
+     * @default false
+     */
+    multiple: true;
+    /**
+     * Defines the controlled value of the item to expand when `multiple` is `true`.
+     * Must be used in conjunction with `onValueChange`.
+     */
+    value?: RadixAccordion.AccordionMultipleProps["value"];
+    /**
+     * Defines the value of the item to expand when initially rendered when `multiple` is `true`.
+     * Use when you do not need to control the state of the items.
+     */
+    defaultValue?: RadixAccordion.AccordionMultipleProps["defaultValue"];
+    /**
+     * Defines the event handler called when the expanded state of an item changes and `multiple` is `true`.
+     */
+    onChange?: RadixAccordion.AccordionMultipleProps["onValueChange"];
+    /**
+     * Only available when `multiple` is `false`.
+     */
+    collapsible?: never;
+};
+export declare type AccordionProps = AccordionSharedProps & (AccordionSingleProps | AccordionMultipleProps);
+export declare type AccordionItemProps = {
+    children: ReactNode;
+    /**
+     * Defines a class name for the item.
+     */
+    className?: string;
+    /**
+     * Defines a unique value for the item.
+     */
+    value: string;
+    /**
+     * Defines whether the item is disabled, preventing the user from interacting with the item.
+     */
+    disabled?: boolean;
+};
+export declare type AccordionHeaderProps = {
+    /**
+     * Defines the title of the header.
+     */
+    children: ReactNode;
+    /**
+     * Defines a class name for the header.
+     */
+    className?: string;
+    /**
+     * Defines an icon to display next to the title and description.
+     */
+    icon?: IconComponentType;
+    /**
+     * Defines a class name for the icon.
+     */
+    iconClassName?: string;
+    /**
+     * Defines a class name for the icon background.
+     */
+    iconBgClassName?: string;
+    /**
+     * Defines a description for the header.
+     */
+    description?: ReactNode;
+    /**
+     * Defines a meta value for the header.
+     */
+    meta?: ReactNode;
+    /**
+     * Defines an icon to display as the trigger.
+     * Defaults to a chevron icon.
+     */
+    triggerIcon?: IconComponentType;
+    /**
+     * Defines a class name for the trigger.
+     */
+    triggerClassName?: string;
+};
+export declare type AccordionContentProps = {
+    children: ReactNode;
+    /**
+     * Defines a class name for the content.
+     */
+    className?: string;
+};
+declare type AccordionComponent = VFC<AccordionProps> & {
+    Item: typeof AccordionItem;
+    Header: typeof AccordionHeader;
+    Content: typeof AccordionContent;
+};
+/**
+ * The `Accordion` component is a compact section for revealing and hiding content, ideal for keeping interfaces clean.
+ *
+ * See the [Accordion documentation page](https://satellite.algolia.com/components/actions/accordion) for more information.
+ */
+export declare const Accordion: AccordionComponent;
+declare const AccordionItem: import("react").ForwardRefExoticComponent<AccordionItemProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const AccordionHeader: import("react").ForwardRefExoticComponent<AccordionHeaderProps & import("react").RefAttributes<HTMLButtonElement>>;
+declare const AccordionContent: import("react").ForwardRefExoticComponent<AccordionContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/esm/Actions/Accordion/Accordion.js

@@ -0,0 +1,139 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
+var _excluded = ["children", "className"],
+  _excluded2 = ["onChange", "multiple"],
+  _excluded3 = ["onChange", "multiple", "collapsible"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import * as RadixAccordion from "@radix-ui/react-accordion";
+import cx from "clsx";
+import { forwardRef } from "react";
+import { ChevronDownIcon } from "../../Icons";
+import stl from "../../styles/helpers/satellitePrefixer";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var ICON_SIZE = 16;
+var TRIGGER_ICON_SIZE = 20;
+
+/**
+ * The `Accordion` component is a compact section for revealing and hiding content, ideal for keeping interfaces clean.
+ *
+ * See the [Accordion documentation page](https://satellite.algolia.com/components/actions/accordion) for more information.
+ */
+export var Accordion = function Accordion(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var sharedProps = {
+    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex flex-col"]))), className)
+  };
+  if (props.multiple) {
+    var _onChange = props.onChange,
+      _multiple = props.multiple,
+      _rest = _objectWithoutProperties(props, _excluded2);
+    return /*#__PURE__*/_jsx(RadixAccordion.Root, _objectSpread(_objectSpread(_objectSpread({}, _rest), sharedProps), {}, {
+      type: "multiple",
+      onValueChange: _onChange,
+      children: children
+    }));
+  }
+  var onChange = props.onChange,
+    multiple = props.multiple,
+    _props$collapsible = props.collapsible,
+    collapsible = _props$collapsible === void 0 ? true : _props$collapsible,
+    rest = _objectWithoutProperties(props, _excluded3);
+  return /*#__PURE__*/_jsx(RadixAccordion.Root, _objectSpread(_objectSpread(_objectSpread({}, rest), sharedProps), {}, {
+    type: "single",
+    onValueChange: onChange,
+    collapsible: collapsible,
+    children: children
+  }));
+};
+Accordion.displayName = "Accordion";
+var AccordionItem = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var value = _ref2.value,
+    disabled = _ref2.disabled,
+    children = _ref2.children,
+    className = _ref2.className;
+  return /*#__PURE__*/_jsx(RadixAccordion.Item, {
+    value: value,
+    disabled: disabled,
+    ref: ref,
+    className: cx(stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["group/accordion-item flex flex-col"]))), className),
+    children: children
+  });
+});
+AccordionItem.displayName = "AccordionItem";
+var AccordionHeader = /*#__PURE__*/forwardRef(function (_ref3, ref) {
+  var children = _ref3.children,
+    description = _ref3.description,
+    Icon = _ref3.icon,
+    _ref3$iconClassName = _ref3.iconClassName,
+    iconClassName = _ref3$iconClassName === void 0 ? stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["typo-subdued"]))) : _ref3$iconClassName,
+    _ref3$iconBgClassName = _ref3.iconBgClassName,
+    iconBgClassName = _ref3$iconBgClassName === void 0 ? stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["bg-grey-100"]))) : _ref3$iconBgClassName,
+    meta = _ref3.meta,
+    triggerIcon = _ref3.triggerIcon,
+    triggerClassName = _ref3.triggerClassName,
+    className = _ref3.className;
+  var TriggerIcon = triggerIcon || ChevronDownIcon;
+  return /*#__PURE__*/_jsx(RadixAccordion.Header, {
+    className: className,
+    children: /*#__PURE__*/_jsxs(RadixAccordion.Trigger, {
+      ref: ref,
+      className: cx(stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["group/accordion-trigger flex gap-x-3 items-center w-full justify-between px-3.5 py-2.5 group-first/accordion-item:rounded-t group-last/accordion-item:rounded-b bg-white border-2 border-transparent focus-visible:outline-none focus-visible:border-accent-600 enabled:hover:bg-grey-50 motion-safe:transition-colors"]))), triggerClassName),
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["flex items-center gap-x-3 grow"]))),
+        children: [Icon && /*#__PURE__*/_jsx("span", {
+          className: cx(stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["rounded-full w-8 h-8 flex items-center justify-center shrink-0"]))), iconBgClassName),
+          "aria-hidden": true,
+          children: /*#__PURE__*/_jsx(Icon, {
+            className: cx(iconClassName, stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["group-disabled/accordion-trigger:text-grey-300"])))),
+            width: ICON_SIZE,
+            height: ICON_SIZE
+          })
+        }), /*#__PURE__*/_jsxs("div", {
+          className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["flex flex-col gap-y-1 text-left grow"]))),
+          children: [/*#__PURE__*/_jsx("div", {
+            className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["typo-display-heading line-clamp-2 group-disabled/accordion-trigger:text-grey-300"]))),
+            children: children
+          }), typeof description !== "undefined" && /*#__PURE__*/_jsx("div", {
+            className: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["typo-display-body typo-subdued line-clamp-3 group-disabled/accordion-trigger:text-grey-300"]))),
+            children: description
+          })]
+        })]
+      }), /*#__PURE__*/_jsxs("div", {
+        className: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["flex items-center gap-x-2"]))),
+        children: [typeof meta !== "undefined" && /*#__PURE__*/_jsx("div", {
+          className: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["typo-display-caption group-disabled/accordion-trigger:text-grey-300"]))),
+          children: meta
+        }), /*#__PURE__*/_jsx(TriggerIcon, {
+          className: cx(stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["shrink-0 typo-subdued group-disabled/accordion-trigger:text-grey-300"]))),
+          // Don't rotate the trigger icon if it's a custom one.
+          !triggerIcon && stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral([" group-data-[state=open]/accordion-trigger:rotate-180 motion-safe:transition-transform motion-safe:duration-300 motion-safe:ease-out"])))),
+          width: TRIGGER_ICON_SIZE,
+          height: TRIGGER_ICON_SIZE,
+          "aria-hidden": true
+        })]
+      })]
+    })
+  });
+});
+AccordionHeader.displayName = "AccordionHeader";
+var AccordionContent = /*#__PURE__*/forwardRef(function (_ref4, ref) {
+  var children = _ref4.children,
+    className = _ref4.className;
+  return /*#__PURE__*/_jsx(RadixAccordion.Content, {
+    ref: ref,
+    className: cx(stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["typo-display-body typo-subdued overflow-hidden accordion-content"]))), className),
+    children: /*#__PURE__*/_jsx("div", {
+      className: stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["px-4 pt-2 pb-4"]))),
+      children: children
+    })
+  });
+});
+AccordionContent.displayName = "AccordionContent";
+Accordion.Item = AccordionItem;
+Accordion.Header = AccordionHeader;
+Accordion.Content = AccordionContent;

package/dist/esm/Actions/Accordion/Accordion.tailwind.d.ts

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

package/dist/esm/Actions/Accordion/Accordion.tailwind.js

@@ -0,0 +1,43 @@
+import _plugin from "tailwindcss/plugin";
+// @ts-check
+var plugin = _plugin;
+var accordionPlugin = plugin(function (_ref) {
+  var addComponents = _ref.addComponents;
+  var animationDuration = "300ms";
+  var animationEasing = "ease-out";
+  addComponents({
+    /* eslint-disable @algolia/stl/prefer-stl-helper */
+    "@media (prefers-reduced-motion: no-preference)": {
+      ".accordion-content": {
+        "&[data-state='open']": {
+          animation: "stl-accordion-content-slide-down ".concat(animationDuration, " ").concat(animationEasing)
+        },
+        "&[data-state='closed']": {
+          animation: "stl-accordion-content-slide-up ".concat(animationDuration, " ").concat(animationEasing)
+        }
+      }
+    },
+    "@keyframes stl-accordion-content-slide-down": {
+      from: {
+        height: "0",
+        opacity: "0"
+      },
+      to: {
+        height: "var(--radix-accordion-content-height)",
+        opacity: "1"
+      }
+    },
+    "@keyframes stl-accordion-content-slide-up": {
+      from: {
+        height: "var(--radix-accordion-content-height)",
+        opacity: "1"
+      },
+      to: {
+        height: "0",
+        opacity: "0"
+      }
+    }
+    /* eslint-enable @algolia/stl/prefer-stl-helper */
+  });
+});
+export default accordionPlugin;

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

@@ -33,7 +33,7 @@ export var PolymorphicButton = /*#__PURE__*/forwardRef(function (props, ref) {
     children = props.children,
     cleanedProps = _objectWithoutProperties(props, _excluded);
   if (loading) {
-    // @ts-expect-error
+    // @ts-expect-error disabled is not present in PolymorphicButtonProps
     cleanedProps.disabled = true;
   }
   var buttonClassName = cx(BASE_CLASSNAMES, BUTTON_SIZE_CLASSNAMES[size], BUTTON_VARIANT_CLASSNAMES[variant], cleanedProps.disabled && stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["btn-disabled"]))), className);
@@ -41,7 +41,7 @@ export var PolymorphicButton = /*#__PURE__*/forwardRef(function (props, ref) {
   var iconClassNames = cx(getIconColorClassName(props), loading && stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["invisible"]))));
   var textClassNames = cx(loading && stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["invisible"]))));
   if (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__*/_jsxs(Component, _objectSpread(_objectSpread({}, cleanedProps), {}, {

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

@@ -44,13 +44,13 @@ export var PolymorphicIconButton = /*#__PURE__*/forwardRef(function (props, ref)
     loading = _props$loading === void 0 ? false : _props$loading,
     cleanedProps = _objectWithoutProperties(props, _excluded);
   if (loading) {
-    // @ts-expect-error
+    // @ts-expect-error disabled prop is not present in PolymorphicIconButtonProps
     cleanedProps.disabled = true;
   }
   var iconButtonClassName = cx(BASE_CLASSNAMES, SIZE_CLASSNAMES[size], VARIANT_CLASSNAMES[variant], cleanedProps.disabled && stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["btn-disabled"]))), className);
   var loaderClassNames = stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["absolute ", ""])), (variant === "destructive" || variant === "primary") && "text-white");
   if (isButtonType(props) && !Object.prototype.hasOwnProperty.call(cleanedProps, "type")) {
-    // @ts-ignore
+    // @ts-expect-error type is not present in PolymorphicIconButtonProps
     cleanedProps.type = "button";
   }
   return /*#__PURE__*/_jsx(TooltipWrapper, {

package/dist/esm/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/esm/Actions/ToggleGroup/ToggleGroup.d.ts

@@ -15,7 +15,7 @@ declare type ToggleGroupSingleProps = {
     type: "single";
     /**
      * Defines the controlled value of the pressed item.
-     * Must be used in conjunction with `onValueChange`.
+     * Must be used in conjunction with `onChange`.
      */
     value?: RadixToggleGroupSingleProps["value"];
     /**
@@ -31,7 +31,7 @@ declare type ToggleGroupMultipleProps = {
     type: "multiple";
     /**
      * Defines the controlled value of the pressed items.
-     * Must be used in conjunction with `onValueChange`.
+     * Must be used in conjunction with `onChange`.
      */
     value?: RadixToggleGroupMultipleProps["value"];
     /**

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

@@ -1,3 +1,5 @@
+export type { AccordionProps as ExperimentalAccordionProps, AccordionContentProps as ExperimentalAccordionContentProps, AccordionHeaderProps as ExperimentalAccordionHeaderProps, AccordionItemProps as ExperimentalAccordionItemProps, } from "./Accordion/Accordion";
+export { Accordion as ExperimentalAccordion } from "./Accordion/Accordion";
 export * from "./Button/Button";
 export * from "./ButtonGroup/ButtonGroup";
 export * from "./ButtonLink/ButtonLink";

package/dist/esm/Actions/index.js

@@ -1,3 +1,4 @@
+export { Accordion as ExperimentalAccordion } from "./Accordion/Accordion";
 export * from "./Button/Button";
 export * from "./ButtonGroup/ButtonGroup";
 export * from "./ButtonLink/ButtonLink";
@@ -5,5 +6,4 @@ export * from "./IconButton/IconButton";
 export * from "./IconButtonLink/IconButtonLink";
 export * from "./Switch";
 export * from "./ToggleButton/ToggleButton";
-export * from "./ToggleGroup/ToggleGroup";
-export {};
+export * from "./ToggleGroup/ToggleGroup";

package/dist/esm/Fields/AutoComplete/AutoComplete.js

@@ -271,7 +271,7 @@ export var AutoComplete = /*#__PURE__*/forwardRef(function (_ref, ref) {
       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) {
@@ -285,7 +285,7 @@ export var AutoComplete = /*#__PURE__*/forwardRef(function (_ref, ref) {
     },
     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)) {
@@ -323,7 +323,7 @@ export var AutoComplete = /*#__PURE__*/forwardRef(function (_ref, ref) {
   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__*/_jsx(AutoCompleteProvider, {
     locale: locale,
@@ -331,7 +331,7 @@ export var AutoComplete = /*#__PURE__*/forwardRef(function (_ref, ref) {
       className: cx(stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["flex"]))), className),
       ref: function ref(el) {
         setContainerElement(el);
-        // @ts-expect-error
+        // @ts-expect-error - setContainerMeasureRef does accept HTMLDivElement | null
         setContainerMeasureRef(el);
       },
       children: [/*#__PURE__*/_jsxs("div", {

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

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

package/dist/esm/Fields/Field/Field.js

@@ -7,7 +7,7 @@ import { AlertCircleIcon } from "../../Icons";
 import stl from "../../styles/helpers/satellitePrefixer";
 import { uniqueId } from "../../utils";
 import { getTextFromReactNode } from "../../utils/getTextFromReactNode";
-import { useExperimentalForm } from "../Form/useForm";
+import { useForm } from "../Form/useForm";
 import { DEFAULT_FIELD_STATE, FieldContext } from "./FieldContext";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
@@ -50,12 +50,16 @@ export var Field = function Field(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     requiredContext = _useState2[0],
     setRequiredContext = _useState2[1];
+  var _useState3 = useState(undefined),
+    _useState4 = _slicedToArray(_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, "`)."));
     }
   }
-  var form = useExperimentalForm();
+  var form = useForm();
   var addField = form === null || form === void 0 ? void 0 : form.addField;
   var removeField = form === null || form === void 0 ? void 0 : form.removeField;
   useEffect(function () {
@@ -78,13 +82,19 @@ export var Field = function Field(_ref) {
       labelId: labelId,
       descriptionId: descriptionId,
       inputId: labelFor,
-      setRequired: setRequiredContext
+      setRequired: setRequiredContext,
+      setElementToFocus: setElementToFocusContext
     },
     children: /*#__PURE__*/_jsxs("div", {
       className: className,
       children: [/*#__PURE__*/_jsxs("label", {
         className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["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__*/_jsxs("div", {
           id: labelId,
           className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["truncate ", ""])), inline ? "mr-2" : "mb-1"),

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

@@ -1,19 +1,24 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-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) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { useContext, useEffect } from "react";
 import { FieldContext } from "./FieldContext";
 export var useField = function useField() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    required = _ref.required;
+    required = _ref.required,
+    elementToFocus = _ref.elementToFocus;
   var _useContext = useContext(FieldContext),
     setRequired = _useContext.setRequired,
+    setElementToFocus = _useContext.setElementToFocus,
     contextValue = _objectWithoutProperties(_useContext, _excluded);
   useEffect(function () {
     return setRequired === null || setRequired === void 0 ? void 0 : setRequired(required);
   }, [setRequired, required]);
+  useEffect(function () {
+    return setElementToFocus === null || setElementToFocus === void 0 ? void 0 : setElementToFocus(elementToFocus);
+  }, [setElementToFocus, elementToFocus]);
   return _objectSpread({
     setRequired: setRequired
   }, contextValue);

package/dist/esm/Fields/Form/Form.d.ts

@@ -1,16 +1,18 @@
 import type { FC, HTMLAttributes, ReactNode, VFC } from "react";
 import type { ButtonProps } from "../../Actions";
 import type { AlertProps } from "../../Indicators";
-import type { ExperimentalFormContextField } from "./FormContext";
-export interface ExperimentalFormProps extends HTMLAttributes<HTMLFormElement> {
+import type { FormContextField } from "./FormContext";
+export interface FormProps extends HTMLAttributes<HTMLFormElement> {
 }
-export declare type ExperimentalFormLocale = {
-    errorText?: (invalidFields: ExperimentalFormContextField[]) => ReactNode;
+export declare type FormLocale = {
+    errorTitle?: (invalidFields: FormContextField[], extraErrors?: string[]) => ReactNode;
+    errorText?: (invalidFields: FormContextField[], extraErrors?: string[]) => ReactNode;
 };
-export interface ExperimentalFormErrorMessageProps extends Omit<AlertProps, "children"> {
-    locale?: ExperimentalFormLocale;
+export interface FormErrorMessageProps extends Omit<AlertProps, "children"> {
+    locale?: FormLocale;
+    extraErrors?: string[];
 }
-export declare const ExperimentalFormErrorMessage: VFC<ExperimentalFormErrorMessageProps>;
-export declare const ExperimentalForm: FC<ExperimentalFormProps>;
-export declare const ExperimentalFormSubmit: FC<ButtonProps>;
-export declare const ExperimentalFormReset: FC<ButtonProps>;
+export declare const FormErrorMessage: VFC<FormErrorMessageProps>;
+export declare const Form: FC<FormProps>;
+export declare const FormSubmit: FC<ButtonProps>;
+export declare const FormReset: FC<ButtonProps>;