@algolia/satellite 1.5.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/Button/Button.tailwind.js

@@ -47,10 +47,6 @@ var buttonPlugin = plugin(function (_ref) {
         backgroundImage: "linear-gradient(-180deg, ".concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.100"), " 100%)"),
         borderColor: theme("colors.grey.200")
       },
-      "&:focus": {
-        backgroundImage: "linear-gradient(-180deg, ".concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.100"), " 100%)"),
-        boxShadow: "0 2px 0 1px ".concat(theme("colors.shadow.5"))
-      },
       "&:active, &.btn-active": {
         borderColor: theme("colors.grey.200"),
         boxShadow: "\n          inset 0 1px 4px 0 ".concat(rgba(theme("colors.grey.500"), 0.4), ",\n          inset 0 1px 1px 0 ").concat(rgba(theme("colors.grey.500"), 0.4), ",\n          0 1px 0 0 ").concat(theme("colors.shadow.5"), "\n        ")
@@ -73,10 +69,6 @@ var buttonPlugin = plugin(function (_ref) {
         backgroundImage: "linear-gradient(0deg, ".concat(theme("colors.accent.800"), " 0%, ").concat(theme("colors.accent.700"), " 100%)"),
         boxShadow: "\n          inset 0 1px 0 0 ".concat(rgba(theme("colors.white"), 0.06), ",\n          0 1px 0 0 ").concat(theme("colors.shadow.10"), "\n        ")
       },
-      "&:focus": {
-        backgroundImage: "linear-gradient(0deg, ".concat(theme("colors.accent.600"), " 0%, ").concat(theme("colors.accent.700"), " 100%)"),
-        boxShadow: "\n          inset 0 1px 0 0 ".concat(rgba(theme("colors.white"), 0.06), ",\n          0 2px 0 1px ").concat(theme("colors.shadow.10"), "\n        ")
-      },
       "&:active, &.btn-active": {
         backgroundColor: theme("colors.accent.700"),
         borderColor: theme("colors.accent.800"),
@@ -100,10 +92,6 @@ var buttonPlugin = plugin(function (_ref) {
         borderColor: theme("colors.red.800"),
         boxShadow: "\n          inset 0 1px 0 0 ".concat(rgba(theme("colors.white"), 0.06), ",\n          0 1px 0 0 ").concat(theme("colors.shadow.10"), "\n        ")
       },
-      "&:focus": {
-        backgroundImage: "linear-gradient(0deg, ".concat(theme("colors.red.600"), " 0%, ").concat(theme("colors.red.700"), " 100%)"),
-        boxShadow: "\n          inset 0 1px 0 0 ".concat(rgba(theme("colors.white"), 0.06), ",\n          0 2px 0 1px ").concat(theme("colors.shadow.10"), "\n        ")
-      },
       "&:active, &.btn-active": {
         borderColor: theme("colors.red.800"),
         boxShadow: "\n          inset 0 1px 4px 0 ".concat(rgba(theme("colors.red.900"), 0.4), ",\n          inset 0 1px 1px 0 ").concat(rgba(theme("colors.red.900"), 0.6), ",\n          0 1px 0 0 ").concat(theme("colors.shadow.5"), "\n        ")

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 () {
@@ -96,7 +96,7 @@ var Field = exports.Field = function Field(_ref) {
           id: labelId,
           className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["truncate ", ""])), inline ? "mr-2" : "mb-1"),
           children: [label, !hideRequiredIndicator && (requiredProp || requiredContext) && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["text-red-700 ml-0.5"]))),
+            className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["text-red-700 ml-0.5 align-top"]))),
             "aria-hidden": true,
             children: "*"
           })]

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>;