@algolia/satellite 1.6.0 → 1.7.0

package/dist/cjs/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/cjs/Actions/Accordion/Accordion.js

@@ -0,0 +1,149 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Accordion = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var RadixAccordion = _interopRequireWildcard(require("@radix-ui/react-accordion"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = require("react");
+var _Icons = require("../../Icons");
+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, _templateObject17;
+var _excluded = ["children", "className"],
+  _excluded2 = ["onChange", "multiple"],
+  _excluded3 = ["onChange", "multiple", "collapsible"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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.
+ */
+var Accordion = exports.Accordion = function Accordion(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var sharedProps = {
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex flex-col"]))), className)
+  };
+  if (props.multiple) {
+    var _onChange = props.onChange,
+      _multiple = props.multiple,
+      _rest = (0, _objectWithoutProperties2["default"])(props, _excluded2);
+    return /*#__PURE__*/(0, _jsxRuntime.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 = (0, _objectWithoutProperties2["default"])(props, _excluded3);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(RadixAccordion.Root, _objectSpread(_objectSpread(_objectSpread({}, rest), sharedProps), {}, {
+    type: "single",
+    onValueChange: onChange,
+    collapsible: collapsible,
+    children: children
+  }));
+};
+Accordion.displayName = "Accordion";
+var AccordionItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
+  var value = _ref2.value,
+    disabled = _ref2.disabled,
+    children = _ref2.children,
+    className = _ref2.className;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(RadixAccordion.Item, {
+    value: value,
+    disabled: disabled,
+    ref: ref,
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["group/accordion-item flex flex-col"]))), className),
+    children: children
+  });
+});
+AccordionItem.displayName = "AccordionItem";
+var AccordionHeader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref3, ref) {
+  var children = _ref3.children,
+    description = _ref3.description,
+    Icon = _ref3.icon,
+    _ref3$iconClassName = _ref3.iconClassName,
+    iconClassName = _ref3$iconClassName === void 0 ? (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["typo-subdued"]))) : _ref3$iconClassName,
+    _ref3$iconBgClassName = _ref3.iconBgClassName,
+    iconBgClassName = _ref3$iconBgClassName === void 0 ? (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-100"]))) : _ref3$iconBgClassName,
+    meta = _ref3.meta,
+    triggerIcon = _ref3.triggerIcon,
+    triggerClassName = _ref3.triggerClassName,
+    className = _ref3.className;
+  var TriggerIcon = triggerIcon || _Icons.ChevronDownIcon;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(RadixAccordion.Header, {
+    className: className,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(RadixAccordion.Trigger, {
+      ref: ref,
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["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__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["flex items-center gap-x-3 grow"]))),
+        children: [Icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["rounded-full w-8 h-8 flex items-center justify-center shrink-0"]))), iconBgClassName),
+          "aria-hidden": true,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
+            className: (0, _clsx["default"])(iconClassName, (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["group-disabled/accordion-trigger:text-grey-300"])))),
+            width: ICON_SIZE,
+            height: ICON_SIZE
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-y-1 text-left grow"]))),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["typo-display-heading line-clamp-2 group-disabled/accordion-trigger:text-grey-300"]))),
+            children: children
+          }), typeof description !== "undefined" && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["typo-display-body typo-subdued line-clamp-3 group-disabled/accordion-trigger:text-grey-300"]))),
+            children: description
+          })]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["flex items-center gap-x-2"]))),
+        children: [typeof meta !== "undefined" && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["typo-display-caption group-disabled/accordion-trigger:text-grey-300"]))),
+          children: meta
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(TriggerIcon, {
+          className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["shrink-0 typo-subdued group-disabled/accordion-trigger:text-grey-300"]))),
+          // Don't rotate the trigger icon if it's a custom one.
+          !triggerIcon && (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])([" 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__*/(0, _react.forwardRef)(function (_ref4, ref) {
+  var children = _ref4.children,
+    className = _ref4.className;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(RadixAccordion.Content, {
+    ref: ref,
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["typo-display-body typo-subdued overflow-hidden accordion-content"]))), className),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["px-4 pt-2 pb-4"]))),
+      children: children
+    })
+  });
+});
+AccordionContent.displayName = "AccordionContent";
+Accordion.Item = AccordionItem;
+Accordion.Header = AccordionHeader;
+Accordion.Content = AccordionContent;

package/dist/cjs/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/cjs/Actions/Accordion/Accordion.tailwind.js

@@ -0,0 +1,44 @@
+"use strict";
+
+// @ts-check
+var plugin = require("tailwindcss/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 */
+  });
+});
+module.exports = accordionPlugin;

package/dist/cjs/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/cjs/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/cjs/Actions/index.js

@@ -3,9 +3,20 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  ExperimentalAccordion: true
+};
+Object.defineProperty(exports, "ExperimentalAccordion", {
+  enumerable: true,
+  get: function get() {
+    return _Accordion.Accordion;
+  }
+});
+var _Accordion = require("./Accordion/Accordion");
 var _Button = require("./Button/Button");
 Object.keys(_Button).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _Button[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -17,6 +28,7 @@ Object.keys(_Button).forEach(function (key) {
 var _ButtonGroup = require("./ButtonGroup/ButtonGroup");
 Object.keys(_ButtonGroup).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ButtonGroup[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -28,6 +40,7 @@ Object.keys(_ButtonGroup).forEach(function (key) {
 var _ButtonLink = require("./ButtonLink/ButtonLink");
 Object.keys(_ButtonLink).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ButtonLink[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -39,6 +52,7 @@ Object.keys(_ButtonLink).forEach(function (key) {
 var _IconButton = require("./IconButton/IconButton");
 Object.keys(_IconButton).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _IconButton[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -50,6 +64,7 @@ Object.keys(_IconButton).forEach(function (key) {
 var _IconButtonLink = require("./IconButtonLink/IconButtonLink");
 Object.keys(_IconButtonLink).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _IconButtonLink[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -61,6 +76,7 @@ Object.keys(_IconButtonLink).forEach(function (key) {
 var _Switch = require("./Switch");
 Object.keys(_Switch).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _Switch[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -72,6 +88,7 @@ Object.keys(_Switch).forEach(function (key) {
 var _ToggleButton = require("./ToggleButton/ToggleButton");
 Object.keys(_ToggleButton).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ToggleButton[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -83,6 +100,7 @@ Object.keys(_ToggleButton).forEach(function (key) {
 var _ToggleGroup = require("./ToggleGroup/ToggleGroup");
 Object.keys(_ToggleGroup).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ToggleGroup[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,

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

@@ -62,7 +62,7 @@ var Field = exports.Field = function Field(_ref) {
       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 = (0, _useForm.useExperimentalForm)();
+  var form = (0, _useForm.useForm)();
   var addField = form === null || form === void 0 ? void 0 : form.addField;
   var removeField = form === null || form === void 0 ? void 0 : form.removeField;
   (0, _react.useEffect)(function () {

package/dist/cjs/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>;

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

@@ -5,12 +5,13 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ExperimentalFormSubmit = exports.ExperimentalFormReset = exports.ExperimentalFormErrorMessage = exports.ExperimentalForm = void 0;
+exports.FormSubmit = exports.FormReset = exports.FormErrorMessage = exports.Form = void 0;
 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 _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _clsx = _interopRequireDefault(require("clsx"));
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
 var _react = require("react");
 var _Actions = require("../../Actions");
 var _Icons = require("../../Icons");
@@ -20,51 +21,61 @@ var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/sa
 var _FormContext = require("./FormContext");
 var _useForm = require("./useForm");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["className", "locale"],
+var _excluded = ["className", "extraErrors", "locale"],
   _excluded2 = ["children"],
   _excluded3 = ["children"],
   _excluded4 = ["children"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 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_ERROR_MESSAGE_LOCALE = {
-  errorText: function errorText(invalidFields) {
+  errorTitle: function errorTitle(invalidFields, extraErrors) {
+    var _extraErrors$length;
+    if ((0, _isEmpty["default"])(invalidFields) && (extraErrors === null || extraErrors === void 0 ? void 0 : extraErrors.length) === 1) return extraErrors[0];
+    var errorCount = invalidFields.length + ((_extraErrors$length = extraErrors === null || extraErrors === void 0 ? void 0 : extraErrors.length) !== null && _extraErrors$length !== void 0 ? _extraErrors$length : 0);
+    return "There ".concat(errorCount > 1 ? "are" : "is", " ").concat(errorCount, " error").concat(errorCount > 1 ? "s" : "", " below.");
+  },
+  errorText: function errorText(invalidFields, extraErrors) {
     var firstInvalidField = invalidFields[0];
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["display-heading mb-2"]))),
-        children: ["Please fix ", invalidFields.length, " error", invalidFields.length > 1 ? "s" : "", " below and try again."]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col"]))),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
-          href: "#",
-          className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["text-black underline hover:text-grey-800"]))),
-          onClick: function onClick(e) {
-            e.preventDefault();
-            var label = document.querySelector("label[for=\"".concat(firstInvalidField.labelFor, "\"]"));
-            label === null || label === void 0 || label.scrollIntoView({
-              behavior: "smooth",
-              block: "start"
-            });
-            label === null || label === void 0 || label.focus({
-              preventScroll: true
-            });
-          },
-          children: "Go to first error"
-        })
+    var focusInvalidFieldLink = /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+      href: "#",
+      className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["text-black underline hover:text-grey-800"]))),
+      onClick: function onClick(e) {
+        e.preventDefault();
+        var label = document.querySelector("label[for=\"".concat(firstInvalidField.labelFor, "\"]"));
+        label === null || label === void 0 || label.scrollIntoView({
+          behavior: "smooth",
+          block: "start"
+        });
+        label === null || label === void 0 || label.focus({
+          preventScroll: true
+        });
+      },
+      children: "Focus first invalid field."
+    });
+    if (!(0, _isEmpty["default"])(invalidFields) && (0, _isEmpty["default"])(extraErrors)) return focusInvalidFieldLink;
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("ul", {
+      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["list-disc"]))),
+      children: [extraErrors && extraErrors.length > 1 && extraErrors.map(function (items, index) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+          children: items
+        }, index + "-error");
+      }), invalidFields.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
+        children: ["There ", invalidFields.length > 1 ? "are" : "is", " ", invalidFields.length, " invalid field", invalidFields.length > 1 ? "s" : "", ". ", focusInvalidFieldLink]
       })]
     });
   }
 };
-var ExperimentalFormErrorMessage = exports.ExperimentalFormErrorMessage = function ExperimentalFormErrorMessage(_ref) {
+var FormErrorMessage = exports.FormErrorMessage = function FormErrorMessage(_ref) {
   var className = _ref.className,
+    extraErrors = _ref.extraErrors,
     propsLocale = _ref.locale,
     props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var contextLocale = (0, _Satellite.useLocale)("form");
   var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_ERROR_MESSAGE_LOCALE), contextLocale), propsLocale);
-  var form = (0, _useForm.useExperimentalForm)();
+  var form = (0, _useForm.useForm)();
   if (!form) return null;
   var invalidFields = Object.entries(form.fields).filter(function (_ref2) {
     var _ref3 = (0, _slicedToArray2["default"])(_ref2, 2),
@@ -77,19 +88,20 @@ var ExperimentalFormErrorMessage = exports.ExperimentalFormErrorMessage = functi
       value = _ref5[1];
     return value;
   });
-  return invalidFields.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Indicators.Alert, _objectSpread(_objectSpread({
+  return (0, _isEmpty["default"])(invalidFields) && (0, _isEmpty["default"])(extraErrors) ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Indicators.Alert, _objectSpread(_objectSpread({
     variant: "red",
-    icon: _Icons.XOctagonIcon
+    icon: _Icons.XOctagonIcon,
+    title: locale.errorTitle(invalidFields, extraErrors)
   }, props), {}, {
-    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))), className),
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))), className),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       "aria-live": "assertive",
-      className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["whitespace-break-spaces"]))),
-      children: locale.errorText(invalidFields)
+      className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["whitespace-break-spaces"]))),
+      children: locale.errorText(invalidFields, extraErrors)
     })
-  })) : null;
+  }));
 };
-var ExperimentalForm = exports.ExperimentalForm = function ExperimentalForm(_ref6) {
+var Form = exports.Form = function Form(_ref6) {
   var children = _ref6.children,
     props = (0, _objectWithoutProperties2["default"])(_ref6, _excluded2);
   var _useState = (0, _react.useState)({}),
@@ -109,7 +121,7 @@ var ExperimentalForm = exports.ExperimentalForm = function ExperimentalForm(_ref
       return rest;
     });
   }, []);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormContext.ExperimentalFormContext.Provider, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormContext.FormContext.Provider, {
     value: {
       fields: fields,
       addField: addField,
@@ -122,7 +134,7 @@ var ExperimentalForm = exports.ExperimentalForm = function ExperimentalForm(_ref
     }))
   });
 };
-var ExperimentalFormSubmit = exports.ExperimentalFormSubmit = function ExperimentalFormSubmit(_ref7) {
+var FormSubmit = exports.FormSubmit = function FormSubmit(_ref7) {
   var children = _ref7.children,
     props = (0, _objectWithoutProperties2["default"])(_ref7, _excluded3);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Actions.Button, _objectSpread(_objectSpread({}, props), {}, {
@@ -130,7 +142,7 @@ var ExperimentalFormSubmit = exports.ExperimentalFormSubmit = function Experimen
     children: children
   }));
 };
-var ExperimentalFormReset = exports.ExperimentalFormReset = function ExperimentalFormReset(_ref8) {
+var FormReset = exports.FormReset = function FormReset(_ref8) {
   var children = _ref8.children,
     props = (0, _objectWithoutProperties2["default"])(_ref8, _excluded4);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Actions.Button, _objectSpread(_objectSpread({}, props), {}, {