@algolia/satellite 2.0.0-rc.6 → 2.1.0-rc.1

package/dist/esm/Fields/DateRangeInput/DateRangeInput.js

@@ -0,0 +1,225 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+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) { _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 cx from "clsx";
+import { endOfDay, format, isValid, parse, startOfDay } from "date-fns";
+import { forwardRef, useEffect, useMemo, useState } from "react";
+import { IconButton } from "../../Actions";
+import { CalendarIcon } from "../../Icons";
+import { useLocale } from "../../Satellite";
+import stl from "../../styles/helpers/satellitePrefixer";
+import { DateRangePickerActionTypes } from "../DatePicker";
+import { DateRangePicker } from "../DatePicker";
+import { getDateRange } from "../DatePicker/utils";
+import { Input } from "../Input";
+import { jsx as _jsx } from "react/jsx-runtime";
+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 = parse(startDateStr, format, referenceDate);
+  var endDate = parse(endDateStr, format, referenceDate);
+
+  // See https://github.com/date-fns/date-fns/issues/942#issuecomment-516808982
+  var validStartDate = isValid(startDate) ? startDate : null;
+  var validEndDate = isValid(endDate) ? endDate : null;
+  var isCompleteDateRange = value.length === format.length * 2 + rangeSeparator.length;
+  if (isCompleteDateRange) {
+    if (validStartDate && validEndDate) {
+      return {
+        start: startOfDay(validStartDate),
+        end: endOfDay(validEndDate)
+      };
+    } else if (validStartDate && !validEndDate) {
+      return {
+        start: 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 += format(range.start, valueFormat);
+  }
+  if (range.end) {
+    result += "".concat(rangeSeparator).concat(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.
+ */
+export var DateRangeInput = /*#__PURE__*/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 = _objectWithoutProperties(_ref, _excluded);
+  // Get localization from context and merge with props and defaults
+  var contextLocale = 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 = useState(defaultValue ? formatDateRange(defaultValue, valueFormat, rangeSeparator) : ""),
+    _useState2 = _slicedToArray(_useState, 2),
+    inputValue = _useState2[0],
+    setInputValue = _useState2[1];
+  var _useState3 = useState((_ref2 = controlledValue !== null && controlledValue !== void 0 ? controlledValue : defaultValue) !== null && _ref2 !== void 0 ? _ref2 : null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    internalValue = _useState4[0],
+    setInternalValue = _useState4[1];
+  var isControlled = controlledValue !== undefined;
+  var rawValue = isControlled ? controlledValue : internalValue;
+  var value = useMemo(function () {
+    return rawValue ? {
+      start: rawValue.start ? startOfDay(rawValue.start) : null,
+      end: rawValue.end ? 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 === DateRangePickerActionTypes.dateSelect) {
+      var selectedDateRange = 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;
+      });
+    }
+  };
+  useEffect(function () {
+    if (isControlled && value) {
+      setInputValue(formatDateRange(value, valueFormat, rangeSeparator));
+    }
+  }, [isControlled, value, valueFormat, rangeSeparator]);
+  return /*#__PURE__*/_jsx(Input, _objectSpread(_objectSpread({
+    value: inputValue,
+    onChange: handleInputChange
+  }, inputProps), {}, {
+    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["min-w-64"]))), inputProps.className),
+    type: "text",
+    onKeyUp: handleInputKeyUp,
+    ref: ref,
+    id: id,
+    placeholder: placeholder,
+    endItem: /*#__PURE__*/_jsx(DateRangePicker, _objectSpread(_objectSpread({}, dateRangePickerProps), {}, {
+      renderTarget: function renderTarget(_ref3) {
+        var isOpen = _ref3.isOpen,
+          toggle = _ref3.toggle;
+        return /*#__PURE__*/_jsx(IconButton, {
+          disabled: inputProps.disabled,
+          showTooltip: inputProps.disabled ? false : undefined,
+          variant: "subtle",
+          title: locale.tooltip(isOpen),
+          icon: CalendarIcon,
+          className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["-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__*/_jsx("div", {
+        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["absolute inset-0 pointer-events-none"])))
+      }),
+      value: value,
+      onAction: handleDateRangePickerAction
+    }))
+  }));
+});
+DateRangeInput.displayName = "DateRangeInput";

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

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

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

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

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

@@ -10,13 +10,13 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import cx from "clsx";
 import { forwardRef, Fragment, useCallback, useImperativeHandle, useMemo, useState } from "react";
 import { useDropzone } from "react-dropzone";
-import { IconButton } from "../../Actions";
-import { CheckIcon, UploadCloudIcon, XIcon } from "../../Icons";
-import { useLocale } from "../../Satellite";
-import stl from "../../styles/helpers/satellitePrefixer";
-import { formatHumanSize } from "../../utils/formatters";
-import { uniqueId } from "../../utils/uniqueId";
-import { useField } from "../Field";
+import { IconButton } from "./../../Actions";
+import { useField } from "./../Field";
+import { CheckIcon, UploadCloudIcon, XIcon } from "./../../Icons";
+import { useLocale } from "./../../Satellite";
+import stl from "./../../styles/helpers/satellitePrefixer";
+import { formatHumanSize } from "./../../utils/formatters";
+import { uniqueId } from "./../../utils/uniqueId";
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 var DropzoneFileItem = function DropzoneFileItem(_ref) {
   var file = _ref.file,
@@ -61,7 +61,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.
  */
 export var Dropzone = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   var id = _ref2.id,

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

@@ -3,17 +3,17 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 import cx from "clsx";
 import { useEffect, useMemo, useState } from "react";
-import { AlertCircleIcon } from "../../Icons";
-import stl from "../../styles/helpers/satellitePrefixer";
-import { uniqueId } from "../../utils";
-import { getTextFromReactNode } from "../../utils/getTextFromReactNode";
-import { useForm } from "../Form/useForm";
 import { DEFAULT_FIELD_STATE, FieldContext } from "./FieldContext";
+import { useForm } from "./../Form/useForm";
+import { AlertCircleIcon } from "./../../Icons";
+import stl from "./../../styles/helpers/satellitePrefixer";
+import { uniqueId } from "./../../utils";
+import { getTextFromReactNode } from "./../../utils/getTextFromReactNode";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * 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 var Field = function Field(_ref) {
   var className = _ref.className,

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

@@ -7,12 +7,12 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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 cx from "clsx";
 import { forwardRef, useState } from "react";
-import { IconButton } from "../../Actions";
-import { AlertTriangleIcon, FileTextIcon, TrashIcon } from "../../Icons";
-import { useLocale } from "../../Satellite";
-import stl from "../../styles/helpers/satellitePrefixer";
-import { formatHumanSize } from "../../utils/formatters";
-import { Dropzone } from "../Dropzone";
+import { IconButton } from "./../../Actions";
+import { Dropzone } from "./../Dropzone";
+import { AlertTriangleIcon, FileTextIcon, TrashIcon } from "./../../Icons";
+import { useLocale } from "./../../Satellite";
+import stl from "./../../styles/helpers/satellitePrefixer";
+import { formatHumanSize } from "./../../utils/formatters";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var FileCard = function FileCard(_ref) {
   var file = _ref.file,
@@ -55,7 +55,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.
  */
 export var FilePicker = /*#__PURE__*/forwardRef(function (props, ref) {
   var contextLocale = useLocale("filePicker");

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

@@ -15,13 +15,13 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import cx from "clsx";
 import isEmpty from "lodash/isEmpty";
 import { useCallback, useState } from "react";
-import { Button } from "../../Actions";
-import { XOctagonIcon } from "../../Icons";
-import { Alert } from "../../Indicators";
-import { useLocale } from "../../Satellite";
-import stl from "../../styles/helpers/satellitePrefixer";
 import { FormContext } from "./FormContext";
 import { useForm } from "./useForm";
+import { Button } from "./../../Actions";
+import { XOctagonIcon } from "./../../Icons";
+import { Alert } from "./../../Indicators";
+import { useLocale } from "./../../Satellite";
+import stl from "./../../styles/helpers/satellitePrefixer";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var DEFAULT_ERROR_MESSAGE_LOCALE = {
   errorTitle: function errorTitle(invalidFields, extraErrors) {
@@ -94,6 +94,12 @@ export var 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.
+ */
 export var Form = function Form(_ref6) {
   var children = _ref6.children,
     props = _objectWithoutProperties(_ref6, _excluded2);

package/dist/esm/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/esm/Fields/Form/stories/AsynchronousValidation.js

@@ -12,11 +12,11 @@ import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import * as yup from "yup";
 import { z } from "zod";
-import stl from "../../../styles/helpers/satellitePrefixer";
-import { Field } from "../../Field";
-import { Input } from "../../Input";
-import { Form, FormErrorMessage, FormReset, FormSubmit } from "../Form";
 import { useFormikAutoFocusOnError } from "./utils/useFormikAutoFocusOnError";
+import { Field } from "./../..";
+import { Form, FormErrorMessage, FormReset, FormSubmit } from "./../Form";
+import { Input } from "./../../Input";
+import stl from "./../../../styles/helpers/satellitePrefixer";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var initialFormData = {
   username: "",

package/dist/esm/Fields/Form/stories/Complex.js

@@ -11,17 +11,17 @@ import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import * as yup from "yup";
 import { z } from "zod";
-import stl from "../../../styles/helpers/satellitePrefixer";
-import { Field } from "../../Field";
-import { AutoComplete, Checkbox, DateInput, Dropzone } from "../../index";
-import { Input } from "../../Input";
-import { RadioButton, RadioGroup } from "../../RadioGroup";
-import { RangeSlider } from "../../RangeSlider";
-import { Select } from "../../Select";
-import { Switch } from "../../Switch";
-import { TextArea } from "../../TextArea";
-import { Form, FormErrorMessage, FormReset, FormSubmit } from "../Form";
 import { useFormikAutoFocusOnError } from "./utils/useFormikAutoFocusOnError";
+import { AutoComplete, Checkbox, DateInput, Dropzone } from "./../..";
+import { Field } from "./../../Field";
+import { Form, FormErrorMessage, FormReset, FormSubmit } from "./../Form";
+import { Input } from "./../../Input";
+import { RadioButton, RadioGroup } from "./../../RadioGroup";
+import { RangeSlider } from "./../../RangeSlider";
+import { Select } from "./../../Select";
+import { Switch } from "./../../Switch";
+import { TextArea } from "./../../TextArea";
+import stl from "./../../../styles/helpers/satellitePrefixer";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var initialFormData = {
   firstName: "",

package/dist/esm/Fields/Form/stories/DependentFieldsValidation.js

@@ -10,11 +10,11 @@ import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import * as yup from "yup";
 import { z } from "zod";
-import stl from "../../../styles/helpers/satellitePrefixer";
-import { Field } from "../../Field";
-import { Input } from "../../Input";
-import { Form, FormErrorMessage, FormReset, FormSubmit } from "../Form";
 import { useFormikAutoFocusOnError } from "./utils/useFormikAutoFocusOnError";
+import { Field } from "./../../Field";
+import { Form, FormErrorMessage, FormReset, FormSubmit } from "./../Form";
+import { Input } from "./../../Input";
+import stl from "./../../../styles/helpers/satellitePrefixer";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var initialFormData = {
   password: "",

package/dist/esm/Fields/Form/stories/DirtyFields.js

@@ -11,13 +11,13 @@ import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import * as yup from "yup";
 import { z } from "zod";
-import { InfoIcon } from "../../../Icons";
-import { Alert } from "../../../Indicators";
-import stl from "../../../styles/helpers/satellitePrefixer";
-import { Field } from "../../Field";
-import { Input } from "../../Input";
-import { Form, FormErrorMessage, FormReset, FormSubmit } from "../Form";
 import { useFormikAutoFocusOnError } from "./utils/useFormikAutoFocusOnError";
+import { Field } from "./../../Field";
+import { Form, FormErrorMessage, FormReset, FormSubmit } from "./../Form";
+import { Input } from "./../../Input";
+import { InfoIcon } from "./../../../Icons";
+import { Alert } from "./../../../Indicators";
+import stl from "./../../../styles/helpers/satellitePrefixer";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var initialFormData = {
   name: "John Doe",

package/dist/esm/Fields/Form/stories/DynamicFieldsValidation.js

@@ -12,12 +12,12 @@ import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import * as yup from "yup";
 import { z } from "zod";
-import stl from "../../../styles/helpers/satellitePrefixer";
-import { Field } from "../../Field";
-import { Input } from "../../Input";
-import { Select } from "../../Select";
-import { Form, FormErrorMessage, FormReset, FormSubmit } from "../Form";
 import { useFormikAutoFocusOnError } from "./utils/useFormikAutoFocusOnError";
+import { Field } from "./../../Field";
+import { Form, FormErrorMessage, FormReset, FormSubmit } from "./../Form";
+import { Input } from "./../../Input";
+import { Select } from "./../../Select";
+import stl from "./../../../styles/helpers/satellitePrefixer";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var professions = ["please select", "doctor", "teacher", "other"];
 var initialFormData = {

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

@@ -12,11 +12,11 @@ import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import * as yup from "yup";
 import { z } from "zod";
-import stl from "../../../styles/helpers/satellitePrefixer";
-import { Field } from "../../Field";
-import { Input } from "../../Input";
-import { Form, FormErrorMessage, FormReset, FormSubmit } from "../Form";
 import { useFormikAutoFocusOnError } from "./utils/useFormikAutoFocusOnError";
+import { Field } from "./../../Field";
+import { Form, FormErrorMessage, FormReset, FormSubmit } from "./../Form";
+import { Input } from "./../../Input";
+import stl from "./../../../styles/helpers/satellitePrefixer";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var initialFormData = {
   email: ""

package/dist/esm/Fields/Form/stories/FieldArrays.js

@@ -13,14 +13,14 @@ import { FormProvider } from "react-hook-form";
 import { Controller, useFieldArray, useForm } from "react-hook-form";
 import * as yup from "yup";
 import { z } from "zod";
-import { Button, IconButton } from "../../../Actions";
-import { MinusIcon, PlusIcon } from "../../../Icons";
-import stl from "../../../styles/helpers/satellitePrefixer";
-import { Field } from "../../Field";
-import { AutoComplete } from "../../index";
-import { Select } from "../../Select";
-import { Form, FormErrorMessage, FormReset, FormSubmit } from "../Form";
 import { useFormikAutoFocusOnError } from "./utils/useFormikAutoFocusOnError";
+import { Button, IconButton } from "./../../../Actions";
+import { AutoComplete } from "./../..";
+import { Field } from "./../../Field";
+import { Form, FormErrorMessage, FormReset, FormSubmit } from "./../Form";
+import { Select } from "./../../Select";
+import { MinusIcon, PlusIcon } from "./../../../Icons";
+import stl from "./../../../styles/helpers/satellitePrefixer";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 var facets = ["size", "price", "gender", "color", "brand"];
 var autocompleteFacets = facets.map(function (facet) {

package/dist/esm/Fields/Form/stories/JSONForms.js

@@ -13,19 +13,19 @@ import ajvErrors from "ajv-errors";
 import cx from "clsx";
 import capitalize from "lodash/capitalize";
 import { createContext, useContext, useState } from "react";
-import stl from "../../../styles/helpers/satellitePrefixer";
-import { AutoComplete } from "../../AutoComplete";
-import { Checkbox } from "../../Checkbox";
-import { DatePicker } from "../../DatePicker";
-import { Dropzone } from "../../Dropzone";
-import { Field } from "../../Field";
-import { Input } from "../../Input/Input";
-import { RadioButton, RadioGroup } from "../../RadioGroup";
-import { RangeSlider } from "../../RangeSlider";
-import { Select } from "../../Select";
-import { Switch } from "../../Switch";
-import { TextArea } from "../../TextArea";
-import { Form, FormErrorMessage, FormReset, FormSubmit } from "../Form";
+import { AutoComplete } from "./../../AutoComplete";
+import { Checkbox } from "./../../Checkbox";
+import { DatePicker } from "./../../DatePicker";
+import { Dropzone } from "./../../Dropzone";
+import { Field } from "./../../Field";
+import { Form, FormErrorMessage, FormReset, FormSubmit } from "./../Form";
+import { Input } from "./../../Input/Input";
+import { RadioButton, RadioGroup } from "./../../RadioGroup";
+import { RangeSlider } from "./../../RangeSlider";
+import { Select } from "./../../Select";
+import { Switch } from "./../../Switch";
+import { TextArea } from "./../../TextArea";
+import stl from "./../../../styles/helpers/satellitePrefixer";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var schema = {
   type: "object",

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

@@ -14,14 +14,14 @@ import { Controller } from "react-hook-form";
 import { useForm } from "react-hook-form";
 import * as yup from "yup";
 import { z } from "zod";
-import { Button } from "../../../Actions/Button/Button";
-import { DotPagination } from "../../../Navigation/Pagination/DotPagination";
-import stl from "../../../styles/helpers/satellitePrefixer";
-import { Checkbox } from "../../Checkbox";
-import { Field } from "../../Field";
-import { RadioButton } from "../../RadioGroup";
-import { Form, FormErrorMessage, FormSubmit } from "../Form";
 import { useFormikAutoFocusOnError } from "./utils/useFormikAutoFocusOnError";
+import { Button } from "./../../../Actions/Button/Button";
+import { Checkbox } from "./../../Checkbox";
+import { Field } from "./../../Field";
+import { Form, FormErrorMessage, FormSubmit } from "./../Form";
+import { RadioButton } from "./../../RadioGroup";
+import { DotPagination } from "./../../../Navigation/Pagination/DotPagination";
+import stl from "./../../../styles/helpers/satellitePrefixer";
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 var variantsEnum = ["separate", "group"];
 var outOfStockEnum = ["show", "hide"];