@algolia/satellite 2.0.0 → 2.1.0-rc.1

package/dist/cjs/Fields/DateRangeInput/DateRangeInput.d.ts

@@ -0,0 +1,51 @@
+/// <reference types="react" />
+import type { DateRangePickerProps, DateRangePickerTimeRange } from "../DatePicker";
+import type { InputProps } from "../Input";
+export declare type DateRangeInputValue = DateRangePickerTimeRange | null;
+export declare type DateRangeInputLocale = {
+    tooltip?: (open: boolean) => string;
+};
+export interface DateRangeInputProps extends Omit<InputProps, "type" | "defaultValue" | "value" | "onChange" | "locale" | "endItem"> {
+    /**
+     * Defines the default value of the `DateRangeInput`.
+     */
+    defaultValue?: DateRangeInputValue;
+    /**
+     * Defines the value of the `DateRangeInput`.
+     */
+    value?: DateRangeInputValue;
+    /**
+     * Defines the function to call when the `DateRangeInput` value changes.
+     */
+    onChange?: (value: DateRangeInputValue) => void;
+    /**
+     * Defines the format of the `DateRangeInput` value.
+     * @default "MM/dd/yyyy"
+     */
+    valueFormat?: string;
+    /**
+     * Defines the separator of the `DateRangeInput` value.
+     * @default "/"
+     */
+    segmentSeparator?: string;
+    /**
+     * Defines the range separator (between start and end date) of the `DateRangeInput` value.
+     * @default " - "
+     */
+    rangeSeparator?: string;
+    /**
+     * Defines the locale of the `DateRangeInput`.
+     */
+    locale?: DateRangeInputLocale;
+    /**
+     * Defines the props to pass to the `DateRangePicker`.
+     */
+    dateRangePickerProps?: Omit<DateRangePickerProps, "range" | "onAction" | "renderTarget" | "popoverAnchor">;
+}
+/**
+ * The `DateRangeInput` component provides a date range input field with an integrated date range picker.
+ * It allows the user to either enter a date range manually or select a start and end date from a calendar interface.
+ *
+ * See the [DateRangeInput documentation page](https://satellite.algolia.com/8261d6576/p/62aeda-date-range-input) for more information.
+ */
+export declare const DateRangeInput: import("react").ForwardRefExoticComponent<DateRangeInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/cjs/Fields/DateRangeInput/DateRangeInput.js

@@ -0,0 +1,231 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DateRangeInput = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _dateFns = require("date-fns");
+var _react = require("react");
+var _Actions = require("../../Actions");
+var _Icons = require("../../Icons");
+var _Satellite = require("../../Satellite");
+var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
+var _DatePicker = require("../DatePicker");
+var _utils = require("../DatePicker/utils");
+var _Input = require("../Input");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2, _templateObject3;
+var _excluded = ["id", "defaultValue", "value", "onChange", "valueFormat", "placeholder", "segmentSeparator", "rangeSeparator", "locale", "dateRangePickerProps"];
+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_DATE_RANGE_INPUT_LOCALE = {
+  tooltip: function tooltip(open) {
+    return "".concat(open ? "Close" : "Open", " date range picker");
+  }
+};
+var NOW = new Date();
+/**
+ * Parses and validates a date range string
+ * @param {string} value - The date string to parse
+ * @param {string} format - The expected format of the date string
+ * @param {Date} referenceDate - A reference date to use for parsing
+ * @returns {DateRangeInputValue} The parsed Date object if valid, null otherwise
+ */
+var parseAndValidateDateRange = function parseAndValidateDateRange(value, format, referenceDate, rangeSeparator) {
+  var _splittedDate$, _splittedDate$2;
+  var splittedDate = value.split(rangeSeparator.trim());
+  var startDateStr = (_splittedDate$ = splittedDate[0]) === null || _splittedDate$ === void 0 ? void 0 : _splittedDate$.trim();
+  var endDateStr = (_splittedDate$2 = splittedDate[1]) === null || _splittedDate$2 === void 0 ? void 0 : _splittedDate$2.trim();
+  var startDate = (0, _dateFns.parse)(startDateStr, format, referenceDate);
+  var endDate = (0, _dateFns.parse)(endDateStr, format, referenceDate);
+
+  // See https://github.com/date-fns/date-fns/issues/942#issuecomment-516808982
+  var validStartDate = (0, _dateFns.isValid)(startDate) ? startDate : null;
+  var validEndDate = (0, _dateFns.isValid)(endDate) ? endDate : null;
+  var isCompleteDateRange = value.length === format.length * 2 + rangeSeparator.length;
+  if (isCompleteDateRange) {
+    if (validStartDate && validEndDate) {
+      return {
+        start: (0, _dateFns.startOfDay)(validStartDate),
+        end: (0, _dateFns.endOfDay)(validEndDate)
+      };
+    } else if (validStartDate && !validEndDate) {
+      return {
+        start: (0, _dateFns.startOfDay)(validStartDate),
+        end: null
+      };
+    }
+  }
+  return null;
+};
+
+/**
+ * Formats a date range into a string using the specified format and separator.
+ *
+ * @param {DateRangeInputValue} range - The date range to format.
+ * @param {string} valueFormat - The format string to use for formatting the dates.
+ * @param {string} [rangeSeparator="-"] - The separator to use between the start and end dates.
+ * @returns {string} The formatted date range string.
+ */
+var formatDateRange = function formatDateRange(range, valueFormat, rangeSeparator) {
+  var result = "";
+  if (!range) {
+    return result;
+  }
+  if (range.start) {
+    result += (0, _dateFns.format)(range.start, valueFormat);
+  }
+  if (range.end) {
+    result += "".concat(rangeSeparator).concat((0, _dateFns.format)(range.end, valueFormat));
+  }
+  return result;
+};
+
+/**
+ * The `DateRangeInput` component provides a date range input field with an integrated date range picker.
+ * It allows the user to either enter a date range manually or select a start and end date from a calendar interface.
+ *
+ * See the [DateRangeInput documentation page](https://satellite.algolia.com/8261d6576/p/62aeda-date-range-input) for more information.
+ */
+var DateRangeInput = exports.DateRangeInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var _ref2;
+  var id = _ref.id,
+    defaultValue = _ref.defaultValue,
+    controlledValue = _ref.value,
+    onChange = _ref.onChange,
+    _valueFormat = _ref.valueFormat,
+    _placeholder = _ref.placeholder,
+    _ref$segmentSeparator = _ref.segmentSeparator,
+    segmentSeparator = _ref$segmentSeparator === void 0 ? "/" : _ref$segmentSeparator,
+    _ref$rangeSeparator = _ref.rangeSeparator,
+    rangeSeparator = _ref$rangeSeparator === void 0 ? " - " : _ref$rangeSeparator,
+    propsLocale = _ref.locale,
+    dateRangePickerProps = _ref.dateRangePickerProps,
+    inputProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  // Get localization from context and merge with props and defaults
+  var contextLocale = (0, _Satellite.useLocale)("dateRangeInput");
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_DATE_RANGE_INPUT_LOCALE), contextLocale), propsLocale);
+
+  // Defaults
+  var valueFormat = _valueFormat || "MM".concat(segmentSeparator, "dd").concat(segmentSeparator, "yyyy");
+  var placeholder = _placeholder || "mm".concat(segmentSeparator, "dd").concat(segmentSeparator, "yyyy").concat(rangeSeparator, "mm").concat(segmentSeparator, "dd").concat(segmentSeparator, "yyyy");
+
+  // State for input value and internal date value
+  var _useState = (0, _react.useState)(defaultValue ? formatDateRange(defaultValue, valueFormat, rangeSeparator) : ""),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    inputValue = _useState2[0],
+    setInputValue = _useState2[1];
+  var _useState3 = (0, _react.useState)((_ref2 = controlledValue !== null && controlledValue !== void 0 ? controlledValue : defaultValue) !== null && _ref2 !== void 0 ? _ref2 : null),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    internalValue = _useState4[0],
+    setInternalValue = _useState4[1];
+  var isControlled = controlledValue !== undefined;
+  var rawValue = isControlled ? controlledValue : internalValue;
+  var value = (0, _react.useMemo)(function () {
+    return rawValue ? {
+      start: rawValue.start ? (0, _dateFns.startOfDay)(rawValue.start) : null,
+      end: rawValue.end ? (0, _dateFns.startOfDay)(rawValue.end) : null
+    } : null;
+  }, [rawValue]);
+
+  /**
+   * Handles changes to the `DateRangeInput` input field
+   */
+  var handleInputChange = function handleInputChange(e) {
+    var value = e.currentTarget.value;
+    setInputValue(value);
+    var dateRange = parseAndValidateDateRange(value, valueFormat, NOW, rangeSeparator);
+    if (!isControlled) {
+      setInternalValue(dateRange);
+    }
+    onChange === null || onChange === void 0 || onChange(dateRange);
+  };
+
+  /**
+   * Handles changes from the `DateRangeInput` date range picker
+   */
+  var handleDateRangePickerAction = function handleDateRangePickerAction(action) {
+    if (action.type === _DatePicker.DateRangePickerActionTypes.dateSelect) {
+      var selectedDateRange = (0, _utils.getDateRange)(value !== null && value !== void 0 ? value : {
+        start: null,
+        end: null
+      }, action.payload);
+      if (!isControlled) {
+        setInternalValue(selectedDateRange);
+        setInputValue(formatDateRange(selectedDateRange, valueFormat, rangeSeparator));
+      }
+      onChange === null || onChange === void 0 || onChange(selectedDateRange);
+    }
+  };
+
+  /**
+   * Handles the `DateRangeInput` value key up event
+   */
+  var handleInputKeyUp = function handleInputKeyUp(e) {
+    if (e.key === "Backspace" || e.key === "Delete") {
+      return;
+    }
+    var value = e.currentTarget.value;
+    var valueLength = value.length;
+
+    // Handle formatting the first and second dates (MM/DD/YYYY)
+    if (valueLength === 2 || valueLength === 5 || valueLength === 15 || valueLength === 18) {
+      // Add separator after the first date (MM/ or MM/DD)
+      setInputValue(function (v) {
+        return v + segmentSeparator;
+      });
+    }
+
+    // Handle adding the separator between the dates ( - )
+    if (valueLength === 10) {
+      setInputValue(function (v) {
+        return v + rangeSeparator;
+      });
+    }
+  };
+  (0, _react.useEffect)(function () {
+    if (isControlled && value) {
+      setInputValue(formatDateRange(value, valueFormat, rangeSeparator));
+    }
+  }, [isControlled, value, valueFormat, rangeSeparator]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread(_objectSpread({
+    value: inputValue,
+    onChange: handleInputChange
+  }, inputProps), {}, {
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["min-w-64"]))), inputProps.className),
+    type: "text",
+    onKeyUp: handleInputKeyUp,
+    ref: ref,
+    id: id,
+    placeholder: placeholder,
+    endItem: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DatePicker.DateRangePicker, _objectSpread(_objectSpread({}, dateRangePickerProps), {}, {
+      renderTarget: function renderTarget(_ref3) {
+        var isOpen = _ref3.isOpen,
+          toggle = _ref3.toggle;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Actions.IconButton, {
+          disabled: inputProps.disabled,
+          showTooltip: inputProps.disabled ? false : undefined,
+          variant: "subtle",
+          title: locale.tooltip(isOpen),
+          icon: _Icons.CalendarIcon,
+          className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["-mr-2"]))),
+          onClick: toggle
+        });
+      },
+      popoverSide: (dateRangePickerProps === null || dateRangePickerProps === void 0 ? void 0 : dateRangePickerProps.popoverSide) || "bottom",
+      popoverAlign: (dateRangePickerProps === null || dateRangePickerProps === void 0 ? void 0 : dateRangePickerProps.popoverAlign) || "end",
+      popoverAnchor: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["absolute inset-0 pointer-events-none"])))
+      }),
+      value: value,
+      onAction: handleDateRangePickerAction
+    }))
+  }));
+});
+DateRangeInput.displayName = "DateRangeInput";

package/dist/cjs/Fields/DateRangeInput/index.d.ts

@@ -0,0 +1,2 @@
+export type { DateRangeInputLocale as ExperimentalDateRangeInputLocale } from "./DateRangeInput";
+export { DateRangeInput as ExperimentalDateRangeInput } from "./DateRangeInput";

package/dist/cjs/Fields/DateRangeInput/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ExperimentalDateRangeInput", {
+  enumerable: true,
+  get: function get() {
+    return _DateRangeInput.DateRangeInput;
+  }
+});
+var _DateRangeInput = require("./DateRangeInput");

package/dist/cjs/Fields/Dropzone/Dropzone.d.ts

@@ -112,6 +112,6 @@ export declare type DropzoneProps = DropzoneBaseProps & Omit<ReactDropZoneProps,
 /**
  * The `Dropzone` component is used to upload files.
  *
- * See the [Dropzone documentation page](https://satellite.algolia.com/components/forms/dropzone) for more information.
+ * See the [Dropzone documentation page](https://satellite.algolia.com/8261d6576/p/11f945-dropzone) for more information.
  */
 export declare const Dropzone: import("react").ForwardRefExoticComponent<DropzoneBaseProps & Omit<ReactDropZoneProps, "multiple" | "onDropAccepted" | "onDropRejected"> & import("react").RefAttributes<HTMLElement>>;

package/dist/cjs/Fields/Dropzone/Dropzone.js

@@ -13,13 +13,13 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _clsx = _interopRequireDefault(require("clsx"));
 var _react = require("react");
 var _reactDropzone = require("react-dropzone");
-var _Actions = require("../../Actions");
-var _Icons = require("../../Icons");
-var _Satellite = require("../../Satellite");
-var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
-var _formatters = require("../../utils/formatters");
-var _uniqueId = require("../../utils/uniqueId");
-var _Field = require("../Field");
+var _Actions = require("./../../Actions");
+var _Field = require("./../Field");
+var _Icons = require("./../../Icons");
+var _Satellite = require("./../../Satellite");
+var _satellitePrefixer = _interopRequireDefault(require("./../../styles/helpers/satellitePrefixer"));
+var _formatters = require("./../../utils/formatters");
+var _uniqueId = require("./../../utils/uniqueId");
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["id", "placeholder", "requirements", "disabled", "multiple", "clearable", "onChange", "className", "locale", "required", "hideFiles"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
@@ -68,7 +68,7 @@ var ValidatedIcon = function ValidatedIcon() {
 /**
  * The `Dropzone` component is used to upload files.
  *
- * See the [Dropzone documentation page](https://satellite.algolia.com/components/forms/dropzone) for more information.
+ * See the [Dropzone documentation page](https://satellite.algolia.com/8261d6576/p/11f945-dropzone) for more information.
  */
 var Dropzone = exports.Dropzone = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
   var id = _ref2.id,

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

@@ -1,4 +1,4 @@
-import { type FC, type ReactChild, type ReactNode } from "react";
+import { type FC, type ReactNode } from "react";
 import type { FieldState } from "./FieldContext";
 export interface FieldProps {
     /**
@@ -8,7 +8,7 @@ export interface FieldProps {
     /**
      * Define a label to display above the nested input.
      */
-    label?: ReactChild;
+    label?: ReactNode;
     /**
      * Define the `id` of the label.
      */
@@ -47,6 +47,6 @@ export interface FieldProps {
 /**
  * The `Field` component is a helper that wraps inputs to streamline labeling, validation, integration into a form.
  *
- * See the [Field documentation page](https://satellite.algolia.com/components/forms/field) for more information.
+ * See the [Field documentation page](https://satellite.algolia.com/8261d6576/p/237982-field) for more information.
  */
 export declare const Field: FC<FieldProps>;

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

@@ -9,18 +9,18 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _react = require("react");
-var _Icons = require("../../Icons");
-var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
-var _utils = require("../../utils");
-var _getTextFromReactNode = require("../../utils/getTextFromReactNode");
-var _useForm = require("../Form/useForm");
 var _FieldContext = require("./FieldContext");
+var _useForm = require("./../Form/useForm");
+var _Icons = require("./../../Icons");
+var _satellitePrefixer = _interopRequireDefault(require("./../../styles/helpers/satellitePrefixer"));
+var _utils = require("./../../utils");
+var _getTextFromReactNode = require("./../../utils/getTextFromReactNode");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 /**
  * The `Field` component is a helper that wraps inputs to streamline labeling, validation, integration into a form.
  *
- * See the [Field documentation page](https://satellite.algolia.com/components/forms/field) for more information.
+ * See the [Field documentation page](https://satellite.algolia.com/8261d6576/p/237982-field) for more information.
  */
 var Field = exports.Field = function Field(_ref) {
   var className = _ref.className,

package/dist/cjs/Fields/FilePicker/FilePicker.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { DropzoneProps } from "../Dropzone";
+import type { DropzoneProps } from "../../Fields/Dropzone";
 export declare type FilePickerLocale = {
     removeFile?: string;
 };
@@ -9,8 +9,8 @@ export declare type FilePickerProps = DropzoneProps & {
 /**
  * The `FilePicker` component allows users to select multiple files for attachment, supporting both drag-and-drop and browse options.
  *
- * See the [FilePicker documentation page](https://satellite.algolia.com/components/forms/file-picker) for more information.
+ * See the [FilePicker documentation page](https://satellite.algolia.com/8261d6576/p/56d52c-file-picker) for more information.
  */
-export declare const FilePicker: import("react").ForwardRefExoticComponent<import("../Dropzone").DropzoneBaseProps & Omit<import("react-dropzone").DropzoneProps, "multiple" | "onDropAccepted" | "onDropRejected"> & {
+export declare const FilePicker: import("react").ForwardRefExoticComponent<import("../../Fields/Dropzone").DropzoneBaseProps & Omit<import("react-dropzone").DropzoneProps, "multiple" | "onDropAccepted" | "onDropRejected"> & {
     locale?: FilePickerLocale | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/dist/cjs/Fields/FilePicker/FilePicker.js

@@ -11,12 +11,12 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _react = require("react");
-var _Actions = require("../../Actions");
-var _Icons = require("../../Icons");
-var _Satellite = require("../../Satellite");
-var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
-var _formatters = require("../../utils/formatters");
-var _Dropzone = require("../Dropzone");
+var _Actions = require("./../../Actions");
+var _Dropzone = require("./../Dropzone");
+var _Icons = require("./../../Icons");
+var _Satellite = require("./../../Satellite");
+var _satellitePrefixer = _interopRequireDefault(require("./../../styles/helpers/satellitePrefixer"));
+var _formatters = require("./../../utils/formatters");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 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; }
@@ -62,7 +62,7 @@ var DEFAULT_FILE_PICKER_LOCALE = {
 /**
  * The `FilePicker` component allows users to select multiple files for attachment, supporting both drag-and-drop and browse options.
  *
- * See the [FilePicker documentation page](https://satellite.algolia.com/components/forms/file-picker) for more information.
+ * See the [FilePicker documentation page](https://satellite.algolia.com/8261d6576/p/56d52c-file-picker) for more information.
  */
 var FilePicker = exports.FilePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var contextLocale = (0, _Satellite.useLocale)("filePicker");

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

@@ -1,7 +1,7 @@
 import type { FC, HTMLAttributes, PropsWithChildren, ReactNode } from "react";
+import type { FormContextField } from "./FormContext";
 import type { ButtonProps } from "../../Actions";
 import type { AlertProps } from "../../Indicators";
-import type { FormContextField } from "./FormContext";
 export interface FormProps extends HTMLAttributes<HTMLFormElement> {
 }
 export declare type FormLocale = {
@@ -13,6 +13,11 @@ export interface FormErrorMessageProps extends Omit<AlertProps, "children"> {
     extraErrors?: string[];
 }
 export declare const FormErrorMessage: FC<FormErrorMessageProps>;
+/**
+ * The `Form` component allows seamless data collection and validation, providing a robust solution for handling complex forms with dynamic input requirements.
+ *
+ * See the [Form documentation page](https://satellite.algolia.com/8261d6576/p/67fa26-form) for more information.
+ */
 export declare const Form: FC<PropsWithChildren<FormProps>>;
 export declare const FormSubmit: FC<PropsWithChildren<ButtonProps>>;
 export declare const FormReset: FC<PropsWithChildren<ButtonProps>>;

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

@@ -13,13 +13,13 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _clsx = _interopRequireDefault(require("clsx"));
 var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
 var _react = require("react");
-var _Actions = require("../../Actions");
-var _Icons = require("../../Icons");
-var _Indicators = require("../../Indicators");
-var _Satellite = require("../../Satellite");
-var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
 var _FormContext = require("./FormContext");
 var _useForm = require("./useForm");
+var _Actions = require("./../../Actions");
+var _Icons = require("./../../Icons");
+var _Indicators = require("./../../Indicators");
+var _Satellite = require("./../../Satellite");
+var _satellitePrefixer = _interopRequireDefault(require("./../../styles/helpers/satellitePrefixer"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["className", "extraErrors", "locale"],
   _excluded2 = ["children"],
@@ -101,6 +101,12 @@ var FormErrorMessage = exports.FormErrorMessage = function FormErrorMessage(_ref
     })
   }));
 };
+
+/**
+ * The `Form` component allows seamless data collection and validation, providing a robust solution for handling complex forms with dynamic input requirements.
+ *
+ * See the [Form documentation page](https://satellite.algolia.com/8261d6576/p/67fa26-form) for more information.
+ */
 var Form = exports.Form = function Form(_ref6) {
   var children = _ref6.children,
     props = (0, _objectWithoutProperties2["default"])(_ref6, _excluded2);

package/dist/cjs/Fields/Form/FormContext.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { FieldState } from "../Field";
+import type { FieldState } from "../../Fields/Field";
 export declare type FormContextField = {
     state: FieldState;
     label: string;

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

@@ -17,11 +17,11 @@ var _react = require("react");
 var _reactHookForm = require("react-hook-form");
 var yup = _interopRequireWildcard(require("yup"));
 var _zod2 = require("zod");
-var _satellitePrefixer = _interopRequireDefault(require("../../../styles/helpers/satellitePrefixer"));
-var _Field = require("../../Field");
-var _Input = require("../../Input");
-var _Form = require("../Form");
 var _useFormikAutoFocusOnError = require("./utils/useFormikAutoFocusOnError");
+var _ = require("./../..");
+var _Form = require("./../Form");
+var _Input = require("./../../Input");
+var _satellitePrefixer = _interopRequireDefault(require("./../../../styles/helpers/satellitePrefixer"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
 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); }
@@ -206,7 +206,7 @@ var RHFAsyncValidationComponent = exports.RHFAsyncValidationComponent = function
           control: control,
           render: function render(_ref5) {
             var field = _ref5.field;
-            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Field, {
               label: "Username",
               labelFor: "username",
               description: "Please enter your username",
@@ -224,7 +224,7 @@ var RHFAsyncValidationComponent = exports.RHFAsyncValidationComponent = function
           control: control,
           render: function render(_ref6) {
             var field = _ref6.field;
-            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Field, {
               label: "Password",
               labelFor: "password",
               description: "Please enter your password",
@@ -362,7 +362,7 @@ var FormikAsyncValidationComponent = exports.FormikAsyncValidationComponent = fu
           formik.handleReset(e);
         },
         className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Field, {
           label: "Username",
           labelFor: "username",
           description: "Please enter your username",
@@ -373,7 +373,7 @@ var FormikAsyncValidationComponent = exports.FormikAsyncValidationComponent = fu
             placeholder: "Username",
             required: true
           }, formik.getFieldProps("username")))
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Field, {
           label: "Password",
           labelFor: "password",
           description: "Please enter your password",