@algolia/satellite - npm Package Compare versions

Comparing version 1.6.0 to 1.7.0

dist/cjs/Actions/index.d.ts

@@ -0,1 +1,3 @@
+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";
@@ -2,0 +4,0 @@ export * from "./ButtonGroup/ButtonGroup";

dist/cjs/Actions/index.js

@@ -6,5 +6,16 @@ "use strict";
 });
+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;
@@ -21,2 +32,3 @@ Object.defineProperty(exports, key, {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ButtonGroup[key]) return;
@@ -33,2 +45,3 @@ Object.defineProperty(exports, key, {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ButtonLink[key]) return;
@@ -45,2 +58,3 @@ Object.defineProperty(exports, key, {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _IconButton[key]) return;
@@ -57,2 +71,3 @@ Object.defineProperty(exports, key, {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _IconButtonLink[key]) return;
@@ -69,2 +84,3 @@ Object.defineProperty(exports, key, {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _Switch[key]) return;
@@ -81,2 +97,3 @@ Object.defineProperty(exports, key, {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ToggleButton[key]) return;
@@ -93,2 +110,3 @@ Object.defineProperty(exports, key, {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ToggleGroup[key]) return;
@@ -95,0 +113,0 @@ Object.defineProperty(exports, key, {

dist/cjs/Actions/ToggleGroup/ToggleGroup.d.ts

@@ -18,3 +18,3 @@ import type { ToggleGroupItemProps as RadixToggleGroupItemProps, ToggleGroupMultipleProps as RadixToggleGroupMultipleProps, ToggleGroupImplProps as RadixToggleGroupSharedProps, ToggleGroupSingleProps as RadixToggleGroupSingleProps } from "@radix-ui/react-toggle-group";
      * Defines the controlled value of the pressed item.
-     * Must be used in conjunction with `onValueChange`.
+     * Must be used in conjunction with `onChange`.
      */
@@ -35,3 +35,3 @@ value?: RadixToggleGroupSingleProps["value"];
      * Defines the controlled value of the pressed items.
-     * Must be used in conjunction with `onValueChange`.
+     * Must be used in conjunction with `onChange`.
      */
@@ -38,0 +38,0 @@ value?: RadixToggleGroupMultipleProps["value"];

dist/cjs/Fields/Field/Field.js

@@ -65,3 +65,3 @@ "use strict";
   }
-  var form = (0, _useForm.useExperimentalForm)();
+  var form = (0, _useForm.useForm)();
   var addField = form === null || form === void 0 ? void 0 : form.addField;
@@ -68,0 +68,0 @@ var removeField = form === null || form === void 0 ? void 0 : form.removeField;

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

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

dist/cjs/Fields/Form/Form.js

@@ -8,3 +8,3 @@ "use strict";
 });
-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"));
@@ -15,2 +15,3 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _clsx = _interopRequireDefault(require("clsx"));
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
 var _react = require("react");
@@ -25,7 +26,7 @@ var _Actions = require("../../Actions");
 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 + ""; }
@@ -36,26 +37,35 @@ 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); }
 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]
       })]
@@ -65,4 +75,5 @@ });
 };
-var ExperimentalFormErrorMessage = exports.ExperimentalFormErrorMessage = function ExperimentalFormErrorMessage(_ref) {
+var FormErrorMessage = exports.FormErrorMessage = function FormErrorMessage(_ref) {
   var className = _ref.className,
+    extraErrors = _ref.extraErrors,
     propsLocale = _ref.locale,
@@ -72,3 +83,3 @@ props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   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;
@@ -86,15 +97,16 @@ var invalidFields = Object.entries(form.fields).filter(function (_ref2) {
   });
-  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,
@@ -119,3 +131,3 @@ props = (0, _objectWithoutProperties2["default"])(_ref6, _excluded2);
   }, []);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormContext.ExperimentalFormContext.Provider, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormContext.FormContext.Provider, {
     value: {
@@ -133,3 +145,3 @@ fields: fields,
 };
-var ExperimentalFormSubmit = exports.ExperimentalFormSubmit = function ExperimentalFormSubmit(_ref7) {
+var FormSubmit = exports.FormSubmit = function FormSubmit(_ref7) {
   var children = _ref7.children,
@@ -142,3 +154,3 @@ props = (0, _objectWithoutProperties2["default"])(_ref7, _excluded3);
 };
-var ExperimentalFormReset = exports.ExperimentalFormReset = function ExperimentalFormReset(_ref8) {
+var FormReset = exports.FormReset = function FormReset(_ref8) {
   var children = _ref8.children,
@@ -145,0 +157,0 @@ props = (0, _objectWithoutProperties2["default"])(_ref8, _excluded4);

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

 /// <reference types="react" />
 import type { FieldState } from "../Field";
-export declare type ExperimentalFormContextField = {
+export declare type FormContextField = {
     state: FieldState;
@@ -8,7 +8,7 @@ label: string;
 };
-export declare type ExperimentalFormContextValue = {
-    fields: Record<string, ExperimentalFormContextField>;
-    addField: (field: ExperimentalFormContextField) => void;
-    removeField: (field: ExperimentalFormContextField) => void;
+export declare type FormContextValue = {
+    fields: Record<string, FormContextField>;
+    addField: (field: FormContextField) => void;
+    removeField: (field: FormContextField) => void;
 };
-export declare const ExperimentalFormContext: import("react").Context<ExperimentalFormContextValue | null>;
+export declare const FormContext: import("react").Context<FormContextValue | null>;

dist/cjs/Fields/Form/FormContext.js

@@ -6,4 +6,4 @@ "use strict";
 });
-exports.ExperimentalFormContext = void 0;
+exports.FormContext = void 0;
 var _react = require("react");
-var ExperimentalFormContext = exports.ExperimentalFormContext = /*#__PURE__*/(0, _react.createContext)(null);
+var FormContext = exports.FormContext = /*#__PURE__*/(0, _react.createContext)(null);

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

@@ -1,3 +0,4 @@
-export * from "./Form";
-export type { ExperimentalFormContextField, ExperimentalFormContextValue } from "./FormContext";
-export * from "./useForm";
+export type { FormProps as ExperimentalFormProps, FormLocale as ExperimentalFormLocale, FormErrorMessageProps as ExperimentalFormErrorMessageProps, } from "./Form";
+export { Form as ExperimentalForm, FormErrorMessage as ExperimentalFormErrorMessage, FormSubmit as ExperimentalFormSubmit, FormReset as ExperimentalFormReset, } from "./Form";
+export type { FormContextField as ExperimentalFormContextField, FormContextValue as ExperimentalFormContextValue, } from "./FormContext";
+export { useForm as useExperimentalForm } from "./useForm";

dist/cjs/Fields/Form/index.js

@@ -6,23 +6,33 @@ "use strict";
 });
+Object.defineProperty(exports, "ExperimentalForm", {
+  enumerable: true,
+  get: function get() {
+    return _Form.Form;
+  }
+});
+Object.defineProperty(exports, "ExperimentalFormErrorMessage", {
+  enumerable: true,
+  get: function get() {
+    return _Form.FormErrorMessage;
+  }
+});
+Object.defineProperty(exports, "ExperimentalFormReset", {
+  enumerable: true,
+  get: function get() {
+    return _Form.FormReset;
+  }
+});
+Object.defineProperty(exports, "ExperimentalFormSubmit", {
+  enumerable: true,
+  get: function get() {
+    return _Form.FormSubmit;
+  }
+});
+Object.defineProperty(exports, "useExperimentalForm", {
+  enumerable: true,
+  get: function get() {
+    return _useForm.useForm;
+  }
+});
 var _Form = require("./Form");
-Object.keys(_Form).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _Form[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _Form[key];
-    }
-  });
-});
-var _useForm = require("./useForm");
-Object.keys(_useForm).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _useForm[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _useForm[key];
-    }
-  });
-});
+var _useForm = require("./useForm");

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

@@ -26,3 +26,3 @@ "use strict";
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -156,2 +156,6 @@ 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; }
     setFormData = _useState2[1];
+  var _useState3 = (0, _react.useState)([]),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    extraErrors = _useState4[0],
+    setExtraErrors = _useState4[1];
   var _useForm = (0, _reactHookForm.useForm)({
@@ -185,70 +189,78 @@ defaultValues: initialFormData,
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-3/5"]))),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.ExperimentalForm, {
-      onSubmit: handleSubmit(function (data) {
-        return setFormData(data);
-      }),
-      onReset: function onReset() {
-        return setFormData(initialFormData);
-      },
-      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
-        name: "username",
-        control: control,
-        render: function render(_ref5) {
-          var field = _ref5.field;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-            label: "Username",
-            labelFor: "username",
-            description: "Please enter your username",
-            state: getFieldState("username"),
-            className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
-              id: "username",
-              placeholder: "Username",
-              required: true
-            }, field))
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["@container w-full flex justify-center"]))),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-full @lg:w-1/2"]))),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.Form, {
+        onSubmit: handleSubmit(function (data) {
+          setFormData(data);
+          setExtraErrors(function (previousErrors) {
+            return previousErrors.concat("first error", "2nd error");
           });
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
-        name: "password",
-        control: control,
-        render: function render(_ref6) {
-          var field = _ref6.field;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-            label: "Password",
-            labelFor: "password",
-            description: "Please enter your password",
-            state: getFieldState("password"),
-            className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
-              id: "password",
-              placeholder: "Password",
-              type: "password",
-              required: true
-            }, field))
-          });
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormSubmit, {
-          variant: "primary",
-          "aria-label": "Login to the website",
-          loading: formState.isSubmitting,
-          children: "Login"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormReset, {
-          "aria-label": "Reset the form",
-          onClick: function onClick() {
-            return reset();
-          },
-          children: "Reset"
+        }),
+        onReset: function onReset() {
+          return setFormData(initialFormData);
+        },
+        className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormErrorMessage, {
+          extraErrors: extraErrors
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+          name: "username",
+          control: control,
+          render: function render(_ref5) {
+            var field = _ref5.field;
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+              label: "Username",
+              labelFor: "username",
+              description: "Please enter your username",
+              state: getFieldState("username"),
+              className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
+                id: "username",
+                placeholder: "Username",
+                required: true
+              }, field))
+            });
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+          name: "password",
+          control: control,
+          render: function render(_ref6) {
+            var field = _ref6.field;
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+              label: "Password",
+              labelFor: "password",
+              description: "Please enter your password",
+              state: getFieldState("password"),
+              className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
+                id: "password",
+                placeholder: "Password",
+                type: "password",
+                required: true
+              }, field))
+            });
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormSubmit, {
+            variant: "primary",
+            "aria-label": "Login to the website",
+            loading: formState.isSubmitting,
+            children: "Login"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormReset, {
+            "aria-label": "Reset the form",
+            onClick: function onClick() {
+              return reset();
+            },
+            children: "Reset"
+          })]
         })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
+        className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
+        className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
+        children: JSON.stringify(formData, null, 2)
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
-      className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
-      className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
-      children: JSON.stringify(formData, null, 2)
-    })]
+    })
   });
@@ -304,10 +316,10 @@ };
 var FormikAsyncValidationComponent = exports.FormikAsyncValidationComponent = function FormikAsyncValidationComponent() {
-  var _useState3 = (0, _react.useState)(initialFormData),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    formData = _useState4[0],
-    setFormData = _useState4[1];
-  var _useState5 = (0, _react.useState)(false),
+  var _useState5 = (0, _react.useState)(initialFormData),
     _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-    revalidationEnabled = _useState6[0],
-    setRevalidationEnabled = _useState6[1];
+    formData = _useState6[0],
+    setFormData = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    revalidationEnabled = _useState8[0],
+    setRevalidationEnabled = _useState8[1];
   var formik = (0, _formik.useFormik)({
@@ -343,59 +355,62 @@ initialValues: initialFormData,
   (0, _useFormikAutoFocusOnError.useFormikAutoFocusOnError)(formik);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-3/5"]))),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.ExperimentalForm, {
-      onSubmit: function onSubmit(e) {
-        setRevalidationEnabled(true);
-        formik.handleSubmit(e);
-      },
-      onReset: function onReset(e) {
-        setRevalidationEnabled(false);
-        formik.handleReset(e);
-      },
-      className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-        label: "Username",
-        labelFor: "username",
-        description: "Please enter your username",
-        state: getFieldState("username"),
-        className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
-          id: "username",
-          placeholder: "Username",
-          required: true
-        }, formik.getFieldProps("username")))
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-        label: "Password",
-        labelFor: "password",
-        description: "Please enter your password",
-        state: getFieldState("password"),
-        className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
-          id: "password",
-          placeholder: "Password",
-          type: "password",
-          required: true
-        }, formik.getFieldProps("password")))
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormSubmit, {
-          variant: "primary",
-          "aria-label": "Login to the website",
-          loading: formik.isValidating,
-          children: "Login"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormReset, {
-          "aria-label": "Reset the form",
-          onClick: function onClick() {
-            return formik.resetForm();
-          },
-          children: "Reset"
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["@container w-full flex justify-center"]))),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-full @lg:w-1/2"]))),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.Form, {
+        onSubmit: function onSubmit(e) {
+          setRevalidationEnabled(true);
+          formik.handleSubmit(e);
+        },
+        onReset: function onReset(e) {
+          setRevalidationEnabled(false);
+          formik.handleReset(e);
+        },
+        className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+          label: "Username",
+          labelFor: "username",
+          description: "Please enter your username",
+          state: getFieldState("username"),
+          className: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
+            id: "username",
+            placeholder: "Username",
+            required: true
+          }, formik.getFieldProps("username")))
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+          label: "Password",
+          labelFor: "password",
+          description: "Please enter your password",
+          state: getFieldState("password"),
+          className: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
+            id: "password",
+            placeholder: "Password",
+            type: "password",
+            required: true
+          }, formik.getFieldProps("password")))
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormSubmit, {
+            variant: "primary",
+            "aria-label": "Login to the website",
+            loading: formik.isValidating,
+            children: "Login"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormReset, {
+            "aria-label": "Reset the form",
+            onClick: function onClick() {
+              return formik.resetForm();
+            },
+            children: "Reset"
+          })]
         })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
+        className: (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
+        className: (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
+        children: JSON.stringify(formData, null, 2)
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
-      className: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
-      className: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
-      children: JSON.stringify(formData, null, 2)
-    })]
+    })
   });
 };

dist/cjs/Fields/Form/stories/Complex.js

@@ -31,3 +31,3 @@ "use strict";
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44, _templateObject45, _templateObject46, _templateObject47, _templateObject48;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44, _templateObject45, _templateObject46, _templateObject47, _templateObject48, _templateObject49, _templateObject50;
 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); }
@@ -204,369 +204,372 @@ 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; }
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-3/5"]))),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.ExperimentalForm, {
-      onSubmit: handleSubmit(function (data) {
-        return setFormData(data);
-      }),
-      onReset: function onReset() {
-        return setFormData(initialFormData);
-      },
-      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
-        name: "firstName",
-        control: control,
-        render: function render(_ref) {
-          var field = _ref.field;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-            label: "First Name",
-            labelFor: "firstName",
-            description: "Please enter your first name",
-            state: getFieldState("firstName"),
-            className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
-              id: "firstName",
-              placeholder: "John",
-              required: true
-            }, field))
-          });
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
-        name: "lastName",
-        control: control,
-        render: function render(_ref2) {
-          var field = _ref2.field;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-            label: "Last Name",
-            labelFor: "lastName",
-            description: "Please enter your last name",
-            state: getFieldState("lastName"),
-            className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
-              id: "lastName",
-              placeholder: "Doe",
-              required: true
-            }, field))
-          });
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
-        name: "password",
-        control: control,
-        render: function render(_ref3) {
-          var field = _ref3.field;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-            label: "Password",
-            labelFor: "password",
-            description: "Please enter your password",
-            state: getFieldState("password"),
-            className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
-              id: "password",
-              placeholder: "Password",
-              type: "password",
-              required: true
-            }, field))
-          });
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
-        name: "civility",
-        control: control,
-        render: function render(_ref4) {
-          var field = _ref4.field;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-            label: "Civility",
-            labelFor: civilities[0],
-            description: "Please enter your civility",
-            state: getFieldState("civility"),
-            className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["flex gap-4 display-body"]))),
-              children: civilities.map(function (civility) {
-                return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-                  htmlFor: civility,
-                  className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["flex items-center gap-1"]))),
-                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioGroup.RadioButton, _objectSpread(_objectSpread({
-                    id: civility,
-                    "aria-labelledby": civility,
-                    required: true,
-                    checked: civility === field.value
-                  }, field), {}, {
-                    value: civility
-                  })), (0, _capitalize["default"])(civility)]
-                }, civility);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["@container w-full flex justify-center"]))),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-full @lg:w-1/2"]))),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.Form, {
+        onSubmit: handleSubmit(function (data) {
+          return setFormData(data);
+        }),
+        onReset: function onReset() {
+          return setFormData(initialFormData);
+        },
+        className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+          name: "firstName",
+          control: control,
+          render: function render(_ref) {
+            var field = _ref.field;
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+              label: "First Name",
+              labelFor: "firstName",
+              description: "Please enter your first name",
+              state: getFieldState("firstName"),
+              className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
+                id: "firstName",
+                placeholder: "John",
+                required: true
+              }, field))
+            });
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+          name: "lastName",
+          control: control,
+          render: function render(_ref2) {
+            var field = _ref2.field;
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+              label: "Last Name",
+              labelFor: "lastName",
+              description: "Please enter your last name",
+              state: getFieldState("lastName"),
+              className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
+                id: "lastName",
+                placeholder: "Doe",
+                required: true
+              }, field))
+            });
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+          name: "password",
+          control: control,
+          render: function render(_ref3) {
+            var field = _ref3.field;
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+              label: "Password",
+              labelFor: "password",
+              description: "Please enter your password",
+              state: getFieldState("password"),
+              className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
+                id: "password",
+                placeholder: "Password",
+                type: "password",
+                required: true
+              }, field))
+            });
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+          name: "civility",
+          control: control,
+          render: function render(_ref4) {
+            var field = _ref4.field;
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+              label: "Civility",
+              labelFor: civilities[0],
+              description: "Please enter your civility",
+              state: getFieldState("civility"),
+              className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["flex gap-4 display-body"]))),
+                children: civilities.map(function (civility) {
+                  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+                    htmlFor: civility,
+                    className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["flex items-center gap-1"]))),
+                    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioGroup.RadioButton, _objectSpread(_objectSpread({
+                      id: civility,
+                      "aria-labelledby": civility,
+                      required: true,
+                      checked: civility === field.value
+                    }, field), {}, {
+                      value: civility
+                    })), (0, _capitalize["default"])(civility)]
+                  }, civility);
+                })
               })
-            })
-          });
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
-        name: "gender",
-        control: control,
-        render: function render(_ref5) {
-          var field = _ref5.field;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-            label: "Gender",
-            labelFor: "gender",
-            description: "Please specify your gender",
-            state: getFieldState("gender"),
-            className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.Select, _objectSpread(_objectSpread({
-              id: "gender",
-              required: true
-            }, field), {}, {
-              children: genders.map(function (gender) {
-                return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-                  value: gender,
-                  children: (0, _capitalize["default"])(gender)
-                }, gender);
-              })
-            }))
-          });
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
-        name: "jobPositions",
-        control: control,
-        render: function render(_ref6) {
-          var field = _ref6.field;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-            label: "Job Positions",
-            labelFor: "jobPositions",
-            description: "Please specify the job positions you are interested in",
-            state: getFieldState("jobPositions"),
-            className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.AutoComplete, _objectSpread({
-              id: "jobPositions",
-              options: jobPositions,
-              placeholder: jobPositions[0].label,
-              multiple: true,
-              required: true,
-              clearable: true
-            }, field))
-          });
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
-        name: "employmentStatus",
-        control: control,
-        render: function render(_ref7) {
-          var field = _ref7.field;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-            label: "Employment Status",
-            labelFor: "employmentStatus",
-            description: "Please specify your employment status",
-            state: getFieldState("employmentStatus"),
-            className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioGroup.RadioGroup, _objectSpread(_objectSpread({
-              id: "employmentStatus",
-              required: true
-            }, field), {}, {
-              children: employmentStatuses.map(function (employmentStatus) {
-                return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioGroup.RadioGroup.Item, {
-                  value: employmentStatus,
-                  children: (0, _capitalize["default"])(employmentStatus)
-                }, employmentStatus);
-              })
-            }))
-          });
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
-        name: "birthday",
-        control: control,
-        render: function render(_ref8) {
-          var field = _ref8.field;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-            label: "Birthday",
-            labelFor: "birthday",
-            description: "Please specify your birthday",
-            state: getFieldState("birthday"),
-            className: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.DatePicker, _objectSpread({
-              id: "birthday",
-              calendarProps: {
-                disabled: {
-                  after: now
+            });
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+          name: "gender",
+          control: control,
+          render: function render(_ref5) {
+            var field = _ref5.field;
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+              label: "Gender",
+              labelFor: "gender",
+              description: "Please specify your gender",
+              state: getFieldState("gender"),
+              className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.Select, _objectSpread(_objectSpread({
+                id: "gender",
+                required: true
+              }, field), {}, {
+                children: genders.map(function (gender) {
+                  return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+                    value: gender,
+                    children: (0, _capitalize["default"])(gender)
+                  }, gender);
+                })
+              }))
+            });
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+          name: "jobPositions",
+          control: control,
+          render: function render(_ref6) {
+            var field = _ref6.field;
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+              label: "Job Positions",
+              labelFor: "jobPositions",
+              description: "Please specify the job positions you are interested in",
+              state: getFieldState("jobPositions"),
+              className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.AutoComplete, _objectSpread({
+                id: "jobPositions",
+                options: jobPositions,
+                placeholder: jobPositions[0].label,
+                multiple: true,
+                required: true,
+                clearable: true
+              }, field))
+            });
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+          name: "employmentStatus",
+          control: control,
+          render: function render(_ref7) {
+            var field = _ref7.field;
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+              label: "Employment Status",
+              labelFor: "employmentStatus",
+              description: "Please specify your employment status",
+              state: getFieldState("employmentStatus"),
+              className: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioGroup.RadioGroup, _objectSpread(_objectSpread({
+                id: "employmentStatus",
+                required: true
+              }, field), {}, {
+                children: employmentStatuses.map(function (employmentStatus) {
+                  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioGroup.RadioGroup.Item, {
+                    value: employmentStatus,
+                    children: (0, _capitalize["default"])(employmentStatus)
+                  }, employmentStatus);
+                })
+              }))
+            });
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+          name: "birthday",
+          control: control,
+          render: function render(_ref8) {
+            var field = _ref8.field;
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+              label: "Birthday",
+              labelFor: "birthday",
+              description: "Please specify your birthday",
+              state: getFieldState("birthday"),
+              className: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.DatePicker, _objectSpread({
+                id: "birthday",
+                calendarProps: {
+                  disabled: {
+                    after: now
+                  }
+                },
+                required: true
+              }, field))
+            });
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+          name: "age",
+          control: control,
+          render: function render(_ref9) {
+            var field = _ref9.field;
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+              label: "Age",
+              labelFor: "age",
+              description: "Please specify your age",
+              state: getFieldState("age"),
+              className: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
+                id: "age",
+                type: "number",
+                placeholder: "18",
+                step: 1,
+                required: true
+              }, field))
+            });
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+          name: "interest",
+          control: control,
+          render: function render(_ref10) {
+            var field = _ref10.field;
+            return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Field.Field, {
+              label: "Interest",
+              labelFor: "interest",
+              description: "Please specify your interest",
+              state: getFieldState("interest"),
+              className: (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+                className: (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["display-caption flex justify-between mb-2"]))),
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                  children: "0"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                  children: "5"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                  children: "10"
+                })]
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RangeSlider.RangeSlider, _objectSpread({
+                id: "interest",
+                min: 0,
+                max: 10,
+                required: true
+              }, field))]
+            });
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+          name: "idealLocation",
+          control: control,
+          render: function render(_ref11) {
+            var field = _ref11.field;
+            return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Field.Field, {
+              label: "Ideal Location",
+              labelFor: "idealLocation",
+              description: "Please specify your ideal location",
+              state: getFieldState("idealLocation"),
+              className: (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+                className: (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["display-caption flex justify-between mb-2"]))),
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                  children: "0 km"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                  children: "10 km"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                  children: "20 km"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                  children: "30 km"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                  children: "40 km"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                  children: "50 km"
+                })]
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RangeSlider.RangeSlider, _objectSpread({
+                id: "idealLocation",
+                min: 0,
+                max: 50,
+                step: 10,
+                required: true
+              }, field))]
+            });
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+          name: "profilePicture",
+          control: control,
+          render: function render(_ref12) {
+            var field = _ref12.field;
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+              label: "Profile Picture",
+              labelFor: "profilePicture",
+              description: "Please upload your profile picture, 1 MB minimum",
+              state: getFieldState("profilePicture"),
+              className: (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Dropzone, _objectSpread(_objectSpread({
+                id: "profilePicture",
+                minSize: 1024 * 1024 * 1,
+                accept: [".png", ".jpg"],
+                required: true
+              }, field), {}, {
+                onChange: function onChange(acceptedFiles, rejectedFiles) {
+                  return field.onChange(rejectedFiles.length > 0 ? rejectedFiles[0] : acceptedFiles[0]);
                 }
-              },
-              required: true
-            }, field))
-          });
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
-        name: "age",
-        control: control,
-        render: function render(_ref9) {
-          var field = _ref9.field;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-            label: "Age",
-            labelFor: "age",
-            description: "Please specify your age",
-            state: getFieldState("age"),
-            className: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
-              id: "age",
-              type: "number",
-              placeholder: "18",
-              step: 1,
-              required: true
-            }, field))
-          });
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
-        name: "interest",
-        control: control,
-        render: function render(_ref10) {
-          var field = _ref10.field;
-          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Field.Field, {
-            label: "Interest",
-            labelFor: "interest",
-            description: "Please specify your interest",
-            state: getFieldState("interest"),
-            className: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
-              className: (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["display-caption flex justify-between mb-2"]))),
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                children: "0"
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                children: "5"
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                children: "10"
-              })]
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RangeSlider.RangeSlider, _objectSpread({
-              id: "interest",
-              min: 0,
-              max: 10,
-              required: true
-            }, field))]
-          });
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
-        name: "idealLocation",
-        control: control,
-        render: function render(_ref11) {
-          var field = _ref11.field;
-          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Field.Field, {
-            label: "Ideal Location",
-            labelFor: "idealLocation",
-            description: "Please specify your ideal location",
-            state: getFieldState("idealLocation"),
-            className: (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
-              className: (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["display-caption flex justify-between mb-2"]))),
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                children: "0 km"
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                children: "10 km"
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                children: "20 km"
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                children: "30 km"
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                children: "40 km"
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                children: "50 km"
-              })]
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RangeSlider.RangeSlider, _objectSpread({
-              id: "idealLocation",
-              min: 0,
-              max: 50,
-              step: 10,
-              required: true
-            }, field))]
-          });
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
-        name: "profilePicture",
-        control: control,
-        render: function render(_ref12) {
-          var field = _ref12.field;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-            label: "Profile Picture",
-            labelFor: "profilePicture",
-            description: "Please upload your profile picture, 1 MB minimum",
-            state: getFieldState("profilePicture"),
-            className: (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Dropzone, _objectSpread(_objectSpread({
-              id: "profilePicture",
-              minSize: 1024 * 1024 * 1,
-              accept: [".png", ".jpg"],
-              required: true
-            }, field), {}, {
-              onChange: function onChange(acceptedFiles, rejectedFiles) {
-                return field.onChange(rejectedFiles.length > 0 ? rejectedFiles[0] : acceptedFiles[0]);
-              }
-            }))
-          });
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
-        name: "bio",
-        control: control,
-        render: function render(_ref13) {
-          var field = _ref13.field;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-            label: "Bio",
-            labelFor: "bio",
-            description: "Please write a short bio",
-            state: getFieldState("bio"),
-            className: (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextArea.TextArea, _objectSpread({
-              id: "bio",
-              required: true
-            }, field))
-          });
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
-        name: "acceptTerms",
-        control: control,
-        render: function render(_ref14) {
-          var field = _ref14.field;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-            label: "Accept Terms",
-            labelFor: "acceptTerms",
-            description: "Please accept the terms",
-            state: getFieldState("acceptTerms"),
-            className: (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
-            inline: true,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Checkbox, _objectSpread({
-              id: "acceptTerms",
-              required: true,
-              checked: getValues("acceptTerms")
-            }, field))
-          });
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
-        name: "newsletter",
-        control: control,
-        render: function render(_ref15) {
-          var field = _ref15.field;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-            label: "Receive Newsletter",
-            labelFor: "newsletter",
-            description: "Do you want to receive our newsletter?",
-            state: getFieldState("newsletter"),
-            className: (0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
-            inline: true,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toggle.Toggle, _objectSpread({
-              id: "newsletter",
-              required: true,
-              checked: getValues("newsletter")
-            }, field))
-          });
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: (0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormSubmit, {
-          variant: "primary",
-          "aria-label": "Save the form",
-          children: "Save"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormReset, {
-          "aria-label": "Reset the form",
-          onClick: function onClick() {
-            return reset();
-          },
-          children: "Reset"
+              }))
+            });
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+          name: "bio",
+          control: control,
+          render: function render(_ref13) {
+            var field = _ref13.field;
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+              label: "Bio",
+              labelFor: "bio",
+              description: "Please write a short bio",
+              state: getFieldState("bio"),
+              className: (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextArea.TextArea, _objectSpread({
+                id: "bio",
+                required: true
+              }, field))
+            });
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+          name: "acceptTerms",
+          control: control,
+          render: function render(_ref14) {
+            var field = _ref14.field;
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+              label: "Accept Terms",
+              labelFor: "acceptTerms",
+              description: "Please accept the terms",
+              state: getFieldState("acceptTerms"),
+              className: (0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+              inline: true,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Checkbox, _objectSpread({
+                id: "acceptTerms",
+                required: true,
+                checked: getValues("acceptTerms")
+              }, field))
+            });
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+          name: "newsletter",
+          control: control,
+          render: function render(_ref15) {
+            var field = _ref15.field;
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+              label: "Receive Newsletter",
+              labelFor: "newsletter",
+              description: "Do you want to receive our newsletter?",
+              state: getFieldState("newsletter"),
+              className: (0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+              inline: true,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toggle.Toggle, _objectSpread({
+                id: "newsletter",
+                required: true,
+                checked: getValues("newsletter")
+              }, field))
+            });
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: (0, _satellitePrefixer["default"])(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormSubmit, {
+            variant: "primary",
+            "aria-label": "Save the form",
+            children: "Save"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormReset, {
+            "aria-label": "Reset the form",
+            onClick: function onClick() {
+              return reset();
+            },
+            children: "Reset"
+          })]
         })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
+        className: (0, _satellitePrefixer["default"])(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
+        className: (0, _satellitePrefixer["default"])(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
+        children: JSON.stringify(formData, null, 2)
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
-      className: (0, _satellitePrefixer["default"])(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
-      className: (0, _satellitePrefixer["default"])(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
-      children: JSON.stringify(formData, null, 2)
-    })]
+    })
   });
@@ -641,288 +644,291 @@ };
   (0, _useFormikAutoFocusOnError.useFormikAutoFocusOnError)(formik);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: (0, _satellitePrefixer["default"])(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-3/5"]))),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.ExperimentalForm, {
-      onSubmit: function onSubmit(e) {
-        setRevalidationEnabled(true);
-        formik.handleSubmit(e);
-      },
-      onReset: function onReset(e) {
-        setRevalidationEnabled(false);
-        formik.handleReset(e);
-      },
-      className: (0, _satellitePrefixer["default"])(_templateObject26 || (_templateObject26 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-        label: "First Name",
-        labelFor: "firstName",
-        description: "Please enter your first name",
-        state: getFieldState("firstName"),
-        className: (0, _satellitePrefixer["default"])(_templateObject27 || (_templateObject27 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
-          id: "firstName",
-          placeholder: "John",
-          required: true
-        }, formik.getFieldProps("firstName")))
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-        label: "Last Name",
-        labelFor: "lastName",
-        description: "Please enter your last name",
-        state: getFieldState("lastName"),
-        className: (0, _satellitePrefixer["default"])(_templateObject28 || (_templateObject28 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
-          id: "lastName",
-          placeholder: "Doe",
-          required: true
-        }, formik.getFieldProps("lastName")))
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-        label: "Password",
-        labelFor: "password",
-        description: "Please enter your password",
-        state: getFieldState("password"),
-        className: (0, _satellitePrefixer["default"])(_templateObject29 || (_templateObject29 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
-          id: "password",
-          placeholder: "Password",
-          type: "password",
-          required: true
-        }, formik.getFieldProps("password")))
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-        label: "Civility",
-        labelFor: civilities[0],
-        description: "Please enter your civility",
-        state: getFieldState("civility"),
-        className: (0, _satellitePrefixer["default"])(_templateObject30 || (_templateObject30 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: (0, _satellitePrefixer["default"])(_templateObject31 || (_templateObject31 = (0, _taggedTemplateLiteral2["default"])(["flex gap-4 display-body"]))),
-          children: civilities.map(function (civility, index) {
-            return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-              id: index === 0 ? "civility" : undefined,
-              htmlFor: civility,
-              className: (0, _satellitePrefixer["default"])(_templateObject32 || (_templateObject32 = (0, _taggedTemplateLiteral2["default"])(["flex items-center gap-1"]))),
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioGroup.RadioButton, _objectSpread({
-                id: civility,
-                "aria-labelledby": civility,
-                required: true
-              }, formik.getFieldProps({
-                name: "civility",
-                value: civility,
-                type: "radio"
-              }))), (0, _capitalize["default"])(civility)]
-            }, civility);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _satellitePrefixer["default"])(_templateObject26 || (_templateObject26 = (0, _taggedTemplateLiteral2["default"])(["@container w-full flex justify-center"]))),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _satellitePrefixer["default"])(_templateObject27 || (_templateObject27 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-full @lg:w-1/2"]))),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.Form, {
+        onSubmit: function onSubmit(e) {
+          setRevalidationEnabled(true);
+          formik.handleSubmit(e);
+        },
+        onReset: function onReset(e) {
+          setRevalidationEnabled(false);
+          formik.handleReset(e);
+        },
+        className: (0, _satellitePrefixer["default"])(_templateObject28 || (_templateObject28 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+          label: "First Name",
+          labelFor: "firstName",
+          description: "Please enter your first name",
+          state: getFieldState("firstName"),
+          className: (0, _satellitePrefixer["default"])(_templateObject29 || (_templateObject29 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
+            id: "firstName",
+            placeholder: "John",
+            required: true
+          }, formik.getFieldProps("firstName")))
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+          label: "Last Name",
+          labelFor: "lastName",
+          description: "Please enter your last name",
+          state: getFieldState("lastName"),
+          className: (0, _satellitePrefixer["default"])(_templateObject30 || (_templateObject30 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
+            id: "lastName",
+            placeholder: "Doe",
+            required: true
+          }, formik.getFieldProps("lastName")))
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+          label: "Password",
+          labelFor: "password",
+          description: "Please enter your password",
+          state: getFieldState("password"),
+          className: (0, _satellitePrefixer["default"])(_templateObject31 || (_templateObject31 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
+            id: "password",
+            placeholder: "Password",
+            type: "password",
+            required: true
+          }, formik.getFieldProps("password")))
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+          label: "Civility",
+          labelFor: civilities[0],
+          description: "Please enter your civility",
+          state: getFieldState("civility"),
+          className: (0, _satellitePrefixer["default"])(_templateObject32 || (_templateObject32 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: (0, _satellitePrefixer["default"])(_templateObject33 || (_templateObject33 = (0, _taggedTemplateLiteral2["default"])(["flex gap-4 display-body"]))),
+            children: civilities.map(function (civility, index) {
+              return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+                id: index === 0 ? "civility" : undefined,
+                htmlFor: civility,
+                className: (0, _satellitePrefixer["default"])(_templateObject34 || (_templateObject34 = (0, _taggedTemplateLiteral2["default"])(["flex items-center gap-1"]))),
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioGroup.RadioButton, _objectSpread({
+                  id: civility,
+                  "aria-labelledby": civility,
+                  required: true
+                }, formik.getFieldProps({
+                  name: "civility",
+                  value: civility,
+                  type: "radio"
+                }))), (0, _capitalize["default"])(civility)]
+              }, civility);
+            })
           })
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-        label: "Gender",
-        labelFor: "gender",
-        description: "Please specify your gender",
-        state: getFieldState("gender"),
-        className: (0, _satellitePrefixer["default"])(_templateObject33 || (_templateObject33 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.Select, _objectSpread(_objectSpread({
-          id: "gender",
-          required: true
-        }, formik.getFieldProps("gender")), {}, {
-          children: genders.map(function (gender) {
-            return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-              value: gender,
-              children: (0, _capitalize["default"])(gender)
-            }, gender);
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+          label: "Gender",
+          labelFor: "gender",
+          description: "Please specify your gender",
+          state: getFieldState("gender"),
+          className: (0, _satellitePrefixer["default"])(_templateObject35 || (_templateObject35 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.Select, _objectSpread(_objectSpread({
+            id: "gender",
+            required: true
+          }, formik.getFieldProps("gender")), {}, {
+            children: genders.map(function (gender) {
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+                value: gender,
+                children: (0, _capitalize["default"])(gender)
+              }, gender);
+            })
+          }))
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+          label: "Job Positions",
+          labelFor: "jobPositions",
+          description: "Please specify the job positions you are interested in",
+          state: getFieldState("jobPositions"),
+          className: (0, _satellitePrefixer["default"])(_templateObject36 || (_templateObject36 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.AutoComplete, {
+            id: "jobPositions",
+            options: jobPositions,
+            placeholder: jobPositions[0].label,
+            multiple: true,
+            required: true,
+            clearable: true,
+            onChange: function onChange(value) {
+              return formik.setFieldValue("jobPositions", value);
+            },
+            onBlur: formik.handleBlur,
+            value: formik.values.jobPositions
           })
-        }))
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-        label: "Job Positions",
-        labelFor: "jobPositions",
-        description: "Please specify the job positions you are interested in",
-        state: getFieldState("jobPositions"),
-        className: (0, _satellitePrefixer["default"])(_templateObject34 || (_templateObject34 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.AutoComplete, {
-          id: "jobPositions",
-          options: jobPositions,
-          placeholder: jobPositions[0].label,
-          multiple: true,
-          required: true,
-          clearable: true,
-          onChange: function onChange(value) {
-            return formik.setFieldValue("jobPositions", value);
-          },
-          onBlur: formik.handleBlur,
-          value: formik.values.jobPositions
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-        label: "Employment Status",
-        labelFor: "employmentStatus",
-        description: "Please specify your employment status",
-        state: getFieldState("employmentStatus"),
-        className: (0, _satellitePrefixer["default"])(_templateObject35 || (_templateObject35 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioGroup.RadioGroup, {
-          id: "employmentStatus",
-          required: true,
-          onChange: function onChange(value) {
-            return formik.setFieldValue("employmentStatus", value);
-          },
-          value: formik.values.employmentStatus,
-          children: employmentStatuses.map(function (employmentStatus) {
-            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioGroup.RadioGroup.Item, {
-              value: employmentStatus,
-              children: (0, _capitalize["default"])(employmentStatus)
-            }, employmentStatus);
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+          label: "Employment Status",
+          labelFor: "employmentStatus",
+          description: "Please specify your employment status",
+          state: getFieldState("employmentStatus"),
+          className: (0, _satellitePrefixer["default"])(_templateObject37 || (_templateObject37 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioGroup.RadioGroup, {
+            id: "employmentStatus",
+            required: true,
+            onChange: function onChange(value) {
+              return formik.setFieldValue("employmentStatus", value);
+            },
+            value: formik.values.employmentStatus,
+            children: employmentStatuses.map(function (employmentStatus) {
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioGroup.RadioGroup.Item, {
+                value: employmentStatus,
+                children: (0, _capitalize["default"])(employmentStatus)
+              }, employmentStatus);
+            })
           })
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-        label: "Birthday",
-        labelFor: "birthday",
-        description: "Please specify your birthday",
-        state: getFieldState("birthday"),
-        className: (0, _satellitePrefixer["default"])(_templateObject36 || (_templateObject36 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.DatePicker, {
-          id: "birthday",
-          calendarProps: {
-            disabled: {
-              after: now
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+          label: "Birthday",
+          labelFor: "birthday",
+          description: "Please specify your birthday",
+          state: getFieldState("birthday"),
+          className: (0, _satellitePrefixer["default"])(_templateObject38 || (_templateObject38 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.DatePicker, {
+            id: "birthday",
+            calendarProps: {
+              disabled: {
+                after: now
+              }
+            },
+            required: true,
+            onChange: function onChange(value) {
+              return formik.setFieldValue("birthday", value);
+            },
+            value: formik.values.birthday
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+          label: "Age",
+          labelFor: "age",
+          description: "Please specify your age",
+          state: getFieldState("age"),
+          className: (0, _satellitePrefixer["default"])(_templateObject39 || (_templateObject39 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
+            id: "age",
+            type: "number",
+            placeholder: "18",
+            step: 1,
+            required: true
+          }, formik.getFieldProps("age")))
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Field.Field, {
+          label: "Interest",
+          labelFor: "interest",
+          description: "Please specify your interest",
+          state: getFieldState("interest"),
+          className: (0, _satellitePrefixer["default"])(_templateObject40 || (_templateObject40 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+            className: (0, _satellitePrefixer["default"])(_templateObject41 || (_templateObject41 = (0, _taggedTemplateLiteral2["default"])(["display-caption flex justify-between mb-2"]))),
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              children: "0"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              children: "5"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              children: "10"
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RangeSlider.RangeSlider, {
+            id: "interest",
+            min: 0,
+            max: 10,
+            required: true,
+            onChange: function onChange(value) {
+              return formik.setFieldValue("interest", value);
+            },
+            value: formik.values.interest
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Field.Field, {
+          label: "Ideal Location",
+          labelFor: "idealLocation",
+          description: "Please specify your ideal location",
+          state: getFieldState("idealLocation"),
+          className: (0, _satellitePrefixer["default"])(_templateObject42 || (_templateObject42 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+            className: (0, _satellitePrefixer["default"])(_templateObject43 || (_templateObject43 = (0, _taggedTemplateLiteral2["default"])(["display-caption flex justify-between mb-2"]))),
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              children: "0 km"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              children: "10 km"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              children: "20 km"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              children: "30 km"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              children: "40 km"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              children: "50 km"
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RangeSlider.RangeSlider, {
+            id: "idealLocation",
+            min: 0,
+            max: 50,
+            step: 10,
+            required: true,
+            onChange: function onChange(value) {
+              return formik.setFieldValue("idealLocation", value);
+            },
+            value: formik.values.idealLocation
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+          label: "Profile Picture",
+          labelFor: "profilePicture",
+          description: "Please upload your profile picture, 1 MB minimum",
+          state: getFieldState("profilePicture"),
+          className: (0, _satellitePrefixer["default"])(_templateObject44 || (_templateObject44 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Dropzone, {
+            id: "profilePicture",
+            minSize: 1024 * 1024 * 1,
+            accept: [".png", ".jpg"],
+            required: true,
+            onChange: function onChange(acceptedFiles, rejectedFiles) {
+              return formik.setFieldValue("profilePicture", rejectedFiles.length > 0 ? rejectedFiles[0] : acceptedFiles[0]);
             }
-          },
-          required: true,
-          onChange: function onChange(value) {
-            return formik.setFieldValue("birthday", value);
-          },
-          value: formik.values.birthday
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-        label: "Age",
-        labelFor: "age",
-        description: "Please specify your age",
-        state: getFieldState("age"),
-        className: (0, _satellitePrefixer["default"])(_templateObject37 || (_templateObject37 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
-          id: "age",
-          type: "number",
-          placeholder: "18",
-          step: 1,
-          required: true
-        }, formik.getFieldProps("age")))
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Field.Field, {
-        label: "Interest",
-        labelFor: "interest",
-        description: "Please specify your interest",
-        state: getFieldState("interest"),
-        className: (0, _satellitePrefixer["default"])(_templateObject38 || (_templateObject38 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
-          className: (0, _satellitePrefixer["default"])(_templateObject39 || (_templateObject39 = (0, _taggedTemplateLiteral2["default"])(["display-caption flex justify-between mb-2"]))),
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            children: "0"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            children: "5"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            children: "10"
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+          label: "Bio",
+          labelFor: "bio",
+          description: "Please write a short bio",
+          state: getFieldState("bio"),
+          className: (0, _satellitePrefixer["default"])(_templateObject45 || (_templateObject45 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextArea.TextArea, _objectSpread({
+            id: "bio",
+            required: true
+          }, formik.getFieldProps("bio")))
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+          label: "Accept Terms",
+          labelFor: "acceptTerms",
+          description: "Please accept the terms",
+          state: getFieldState("acceptTerms"),
+          className: (0, _satellitePrefixer["default"])(_templateObject46 || (_templateObject46 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+          inline: true,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Checkbox, _objectSpread({
+            id: "acceptTerms",
+            required: true,
+            checked: formik.values.acceptTerms
+          }, formik.getFieldProps("acceptTerms")))
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+          label: "Receive Newsletter",
+          labelFor: "newsletter",
+          description: "Do you want to receive our newsletter?",
+          state: getFieldState("newsletter"),
+          className: (0, _satellitePrefixer["default"])(_templateObject47 || (_templateObject47 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+          inline: true,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toggle.Toggle, _objectSpread({
+            id: "newsletter",
+            required: true,
+            checked: formik.values.newsletter
+          }, formik.getFieldProps("newsletter")))
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: (0, _satellitePrefixer["default"])(_templateObject48 || (_templateObject48 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormSubmit, {
+            variant: "primary",
+            "aria-label": "Save the form",
+            children: "Save"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormReset, {
+            "aria-label": "Reset the form",
+            onClick: function onClick() {
+              return formik.resetForm();
+            },
+            children: "Reset"
           })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RangeSlider.RangeSlider, {
-          id: "interest",
-          min: 0,
-          max: 10,
-          required: true,
-          onChange: function onChange(value) {
-            return formik.setFieldValue("interest", value);
-          },
-          value: formik.values.interest
         })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Field.Field, {
-        label: "Ideal Location",
-        labelFor: "idealLocation",
-        description: "Please specify your ideal location",
-        state: getFieldState("idealLocation"),
-        className: (0, _satellitePrefixer["default"])(_templateObject40 || (_templateObject40 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
-          className: (0, _satellitePrefixer["default"])(_templateObject41 || (_templateObject41 = (0, _taggedTemplateLiteral2["default"])(["display-caption flex justify-between mb-2"]))),
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            children: "0 km"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            children: "10 km"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            children: "20 km"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            children: "30 km"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            children: "40 km"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            children: "50 km"
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RangeSlider.RangeSlider, {
-          id: "idealLocation",
-          min: 0,
-          max: 50,
-          step: 10,
-          required: true,
-          onChange: function onChange(value) {
-            return formik.setFieldValue("idealLocation", value);
-          },
-          value: formik.values.idealLocation
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-        label: "Profile Picture",
-        labelFor: "profilePicture",
-        description: "Please upload your profile picture, 1 MB minimum",
-        state: getFieldState("profilePicture"),
-        className: (0, _satellitePrefixer["default"])(_templateObject42 || (_templateObject42 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Dropzone, {
-          id: "profilePicture",
-          minSize: 1024 * 1024 * 1,
-          accept: [".png", ".jpg"],
-          required: true,
-          onChange: function onChange(acceptedFiles, rejectedFiles) {
-            return formik.setFieldValue("profilePicture", rejectedFiles.length > 0 ? rejectedFiles[0] : acceptedFiles[0]);
-          }
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-        label: "Bio",
-        labelFor: "bio",
-        description: "Please write a short bio",
-        state: getFieldState("bio"),
-        className: (0, _satellitePrefixer["default"])(_templateObject43 || (_templateObject43 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextArea.TextArea, _objectSpread({
-          id: "bio",
-          required: true
-        }, formik.getFieldProps("bio")))
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-        label: "Accept Terms",
-        labelFor: "acceptTerms",
-        description: "Please accept the terms",
-        state: getFieldState("acceptTerms"),
-        className: (0, _satellitePrefixer["default"])(_templateObject44 || (_templateObject44 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
-        inline: true,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Checkbox, _objectSpread({
-          id: "acceptTerms",
-          required: true,
-          checked: formik.values.acceptTerms
-        }, formik.getFieldProps("acceptTerms")))
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-        label: "Receive Newsletter",
-        labelFor: "newsletter",
-        description: "Do you want to receive our newsletter?",
-        state: getFieldState("newsletter"),
-        className: (0, _satellitePrefixer["default"])(_templateObject45 || (_templateObject45 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
-        inline: true,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toggle.Toggle, _objectSpread({
-          id: "newsletter",
-          required: true,
-          checked: formik.values.newsletter
-        }, formik.getFieldProps("newsletter")))
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: (0, _satellitePrefixer["default"])(_templateObject46 || (_templateObject46 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormSubmit, {
-          variant: "primary",
-          "aria-label": "Save the form",
-          children: "Save"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormReset, {
-          "aria-label": "Reset the form",
-          onClick: function onClick() {
-            return formik.resetForm();
-          },
-          children: "Reset"
-        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
+        className: (0, _satellitePrefixer["default"])(_templateObject49 || (_templateObject49 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
+        className: (0, _satellitePrefixer["default"])(_templateObject50 || (_templateObject50 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
+        children: JSON.stringify(formData, null, 2)
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
-      className: (0, _satellitePrefixer["default"])(_templateObject47 || (_templateObject47 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
-      className: (0, _satellitePrefixer["default"])(_templateObject48 || (_templateObject48 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
-      children: JSON.stringify(formData, null, 2)
-    })]
+    })
   });
 };

dist/cjs/Fields/Form/stories/DependentFieldsValidation.js

@@ -24,3 +24,3 @@ "use strict";
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -80,70 +80,73 @@ 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; }
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-3/5"]))),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.ExperimentalForm, {
-      onSubmit: handleSubmit(function (data) {
-        return setFormData(data);
-      }),
-      onReset: function onReset() {
-        return setFormData(initialFormData);
-      },
-      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
-        name: "password",
-        control: control,
-        render: function render(_ref) {
-          var field = _ref.field;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-            label: "Password",
-            labelFor: "password",
-            description: "Please enter your password",
-            state: getFieldState("password"),
-            className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
-              id: "password",
-              placeholder: "Password",
-              type: "password",
-              required: true
-            }, field))
-          });
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
-        name: "confirmPassword",
-        control: control,
-        render: function render(_ref2) {
-          var field = _ref2.field;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-            label: "Confirm Password",
-            labelFor: "confirmPassword",
-            description: "Please confirm your password",
-            state: getFieldState("confirmPassword"),
-            className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
-              id: "confirmPassword",
-              placeholder: "Confirm password",
-              type: "password",
-              required: true
-            }, field))
-          });
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormSubmit, {
-          variant: "primary",
-          "aria-label": "Save the form",
-          children: "Save"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormReset, {
-          "aria-label": "Reset the form",
-          onClick: function onClick() {
-            return reset();
-          },
-          children: "Reset"
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["@container w-full flex justify-center"]))),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-full @lg:w-1/2"]))),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.Form, {
+        onSubmit: handleSubmit(function (data) {
+          return setFormData(data);
+        }),
+        onReset: function onReset() {
+          return setFormData(initialFormData);
+        },
+        className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+          name: "password",
+          control: control,
+          render: function render(_ref) {
+            var field = _ref.field;
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+              label: "Password",
+              labelFor: "password",
+              description: "Please enter your password",
+              state: getFieldState("password"),
+              className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
+                id: "password",
+                placeholder: "Password",
+                type: "password",
+                required: true
+              }, field))
+            });
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+          name: "confirmPassword",
+          control: control,
+          render: function render(_ref2) {
+            var field = _ref2.field;
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+              label: "Confirm Password",
+              labelFor: "confirmPassword",
+              description: "Please confirm your password",
+              state: getFieldState("confirmPassword"),
+              className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
+                id: "confirmPassword",
+                placeholder: "Confirm password",
+                type: "password",
+                required: true
+              }, field))
+            });
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormSubmit, {
+            variant: "primary",
+            "aria-label": "Save the form",
+            children: "Save"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormReset, {
+            "aria-label": "Reset the form",
+            onClick: function onClick() {
+              return reset();
+            },
+            children: "Reset"
+          })]
         })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
+        className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
+        className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
+        children: JSON.stringify(formData, null, 2)
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
-      className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
-      className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
-      children: JSON.stringify(formData, null, 2)
-    })]
+    })
   });
@@ -194,59 +197,62 @@ };
   (0, _useFormikAutoFocusOnError.useFormikAutoFocusOnError)(formik);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-3/5"]))),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.ExperimentalForm, {
-      onSubmit: function onSubmit(e) {
-        setRevalidationEnabled(true);
-        formik.handleSubmit(e);
-      },
-      onReset: function onReset(e) {
-        setRevalidationEnabled(false);
-        formik.handleReset(e);
-      },
-      className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-        label: "Password",
-        labelFor: "password",
-        description: "Please enter your password",
-        state: getFieldState("password"),
-        className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
-          id: "password",
-          placeholder: "Password",
-          type: "password",
-          required: true
-        }, formik.getFieldProps("password")))
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-        label: "Confirm Password",
-        labelFor: "confirmPassword",
-        description: "Please confirm your password",
-        state: getFieldState("confirmPassword"),
-        className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
-          id: "confirmPassword",
-          placeholder: "Confirm password",
-          type: "password",
-          required: true
-        }, formik.getFieldProps("confirmPassword")))
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormSubmit, {
-          variant: "primary",
-          "aria-label": "Save the form",
-          children: "Save"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormReset, {
-          "aria-label": "Reset the form",
-          onClick: function onClick() {
-            return formik.resetForm();
-          },
-          children: "Reset"
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["@container w-full flex justify-center"]))),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-full @lg:w-1/2"]))),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.Form, {
+        onSubmit: function onSubmit(e) {
+          setRevalidationEnabled(true);
+          formik.handleSubmit(e);
+        },
+        onReset: function onReset(e) {
+          setRevalidationEnabled(false);
+          formik.handleReset(e);
+        },
+        className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+          label: "Password",
+          labelFor: "password",
+          description: "Please enter your password",
+          state: getFieldState("password"),
+          className: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
+            id: "password",
+            placeholder: "Password",
+            type: "password",
+            required: true
+          }, formik.getFieldProps("password")))
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+          label: "Confirm Password",
+          labelFor: "confirmPassword",
+          description: "Please confirm your password",
+          state: getFieldState("confirmPassword"),
+          className: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
+            id: "confirmPassword",
+            placeholder: "Confirm password",
+            type: "password",
+            required: true
+          }, formik.getFieldProps("confirmPassword")))
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormSubmit, {
+            variant: "primary",
+            "aria-label": "Save the form",
+            children: "Save"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormReset, {
+            "aria-label": "Reset the form",
+            onClick: function onClick() {
+              return formik.resetForm();
+            },
+            children: "Reset"
+          })]
         })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
+        className: (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
+        className: (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
+        children: JSON.stringify(formData, null, 2)
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
-      className: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
-      className: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
-      children: JSON.stringify(formData, null, 2)
-    })]
+    })
   });
 };

dist/cjs/Fields/Form/stories/DirtyFields.js

@@ -27,3 +27,3 @@ "use strict";
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30;
 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); }
@@ -90,111 +90,114 @@ 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; }
   var dirtyFieldsNb = Object.keys(formState.dirtyFields).length;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-3/5"]))),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.ExperimentalForm, {
-      onSubmit: handleSubmit(function (data) {
-        return setFormData(data);
-      }),
-      onReset: function onReset() {
-        return setFormData(initialFormData);
-      },
-      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
-        name: "name",
-        control: control,
-        render: function render(_ref) {
-          var field = _ref.field;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-            label: "Name",
-            labelFor: "name",
-            description: "Please enter your name",
-            state: getFieldState("name"),
-            className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))), isFieldDirty("name") && (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["text-xenon-500"])))),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
-              id: "name",
-              placeholder: "Name",
-              required: true
-            }, field))
-          });
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
-        name: "email",
-        control: control,
-        render: function render(_ref2) {
-          var field = _ref2.field;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-            label: "Email",
-            labelFor: "email",
-            description: "Please enter your email",
-            state: getFieldState("email"),
-            className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))), isFieldDirty("email") && (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["text-xenon-500"])))),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
-              id: "email",
-              placeholder: "Email",
-              required: true
-            }, field))
-          });
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
-        name: "company",
-        control: control,
-        render: function render(_ref3) {
-          var field = _ref3.field;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-            label: "Company",
-            labelFor: "company",
-            description: "Please enter your company",
-            state: getFieldState("company"),
-            className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))), isFieldDirty("company") && (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["text-xenon-500"])))),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
-              id: "company",
-              placeholder: "Company",
-              required: true
-            }, field))
-          });
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
-        name: "phoneNumber",
-        control: control,
-        render: function render(_ref4) {
-          var field = _ref4.field;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-            label: "Phone Number",
-            labelFor: "phoneNumber",
-            description: "Please enter your phone number",
-            state: getFieldState("phoneNumber"),
-            className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))), isFieldDirty("phoneNumber") && (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["text-xenon-500"])))),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
-              id: "phoneNumber",
-              placeholder: "Phone number",
-              required: true
-            }, field))
-          });
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormSubmit, {
-          variant: "primary",
-          "aria-label": "Save updated changes",
-          disabled: !formState.isDirty,
-          children: "Save changes"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormReset, {
-          "aria-label": "Reset the form",
-          disabled: !formState.isDirty,
-          onClick: function onClick() {
-            return reset();
-          },
-          children: "Reset"
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["@container w-full flex justify-center"]))),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-full @lg:w-1/2"]))),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.Form, {
+        onSubmit: handleSubmit(function (data) {
+          return setFormData(data);
+        }),
+        onReset: function onReset() {
+          return setFormData(initialFormData);
+        },
+        className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+          name: "name",
+          control: control,
+          render: function render(_ref) {
+            var field = _ref.field;
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+              label: "Name",
+              labelFor: "name",
+              description: "Please enter your name",
+              state: getFieldState("name"),
+              className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))), isFieldDirty("name") && (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["text-xenon-500"])))),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
+                id: "name",
+                placeholder: "Name",
+                required: true
+              }, field))
+            });
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+          name: "email",
+          control: control,
+          render: function render(_ref2) {
+            var field = _ref2.field;
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+              label: "Email",
+              labelFor: "email",
+              description: "Please enter your email",
+              state: getFieldState("email"),
+              className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))), isFieldDirty("email") && (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["text-xenon-500"])))),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
+                id: "email",
+                placeholder: "Email",
+                required: true
+              }, field))
+            });
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+          name: "company",
+          control: control,
+          render: function render(_ref3) {
+            var field = _ref3.field;
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+              label: "Company",
+              labelFor: "company",
+              description: "Please enter your company",
+              state: getFieldState("company"),
+              className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))), isFieldDirty("company") && (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["text-xenon-500"])))),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
+                id: "company",
+                placeholder: "Company",
+                required: true
+              }, field))
+            });
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+          name: "phoneNumber",
+          control: control,
+          render: function render(_ref4) {
+            var field = _ref4.field;
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+              label: "Phone Number",
+              labelFor: "phoneNumber",
+              description: "Please enter your phone number",
+              state: getFieldState("phoneNumber"),
+              className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))), isFieldDirty("phoneNumber") && (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["text-xenon-500"])))),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
+                id: "phoneNumber",
+                placeholder: "Phone number",
+                required: true
+              }, field))
+            });
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormSubmit, {
+            variant: "primary",
+            "aria-label": "Save updated changes",
+            disabled: !formState.isDirty,
+            children: "Save changes"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormReset, {
+            "aria-label": "Reset the form",
+            disabled: !formState.isDirty,
+            onClick: function onClick() {
+              return reset();
+            },
+            children: "Reset"
+          })]
+        }), dirtyFieldsNb > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Indicators.Alert, {
+          variant: "accent",
+          icon: _Icons.InfoIcon,
+          className: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+          children: [dirtyFieldsNb, " updated fields"]
         })]
-      }), dirtyFieldsNb > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Indicators.Alert, {
-        variant: "accent",
-        icon: _Icons.InfoIcon,
-        className: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
-        children: [dirtyFieldsNb, " updated fields"]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
+        className: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
+        className: (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
+        children: JSON.stringify(formData, null, 2)
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
-      className: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
-      className: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
-      children: JSON.stringify(formData, null, 2)
-    })]
+    })
   });
@@ -257,86 +260,89 @@ };
   (0, _useFormikAutoFocusOnError.useFormikAutoFocusOnError)(formik);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-3/5"]))),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.ExperimentalForm, {
-      onSubmit: function onSubmit(e) {
-        setRevalidationEnabled(true);
-        formik.handleSubmit(e);
-      },
-      onReset: function onReset(e) {
-        setRevalidationEnabled(false);
-        formik.handleReset(e);
-      },
-      className: (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-        label: "Name",
-        labelFor: "name",
-        description: "Please enter your name",
-        state: getFieldState("name"),
-        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))), isFieldDirty("name") && (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["text-xenon-500"])))),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
-          id: "name",
-          placeholder: "Name",
-          required: true
-        }, formik.getFieldProps("name")))
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-        label: "Email",
-        labelFor: "email",
-        description: "Please enter your email",
-        state: getFieldState("email"),
-        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))), isFieldDirty("email") && (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["text-xenon-500"])))),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
-          id: "email",
-          placeholder: "Email",
-          required: true
-        }, formik.getFieldProps("email")))
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-        label: "Company",
-        labelFor: "company",
-        description: "Please enter your company",
-        state: getFieldState("company"),
-        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))), isFieldDirty("company") && (0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["text-xenon-500"])))),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
-          id: "company",
-          placeholder: "Company",
-          required: true
-        }, formik.getFieldProps("company")))
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-        label: "Phone Number",
-        labelFor: "phoneNumber",
-        description: "Please enter your phone number",
-        state: getFieldState("phoneNumber"),
-        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))), isFieldDirty("phoneNumber") && (0, _satellitePrefixer["default"])(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2["default"])(["text-xenon-500"])))),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
-          id: "phoneNumber",
-          placeholder: "Phone number",
-          required: true
-        }, formik.getFieldProps("phoneNumber")))
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: (0, _satellitePrefixer["default"])(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormSubmit, {
-          variant: "primary",
-          "aria-label": "Save updated changes",
-          disabled: !formik.dirty,
-          children: "Save changes"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormReset, {
-          "aria-label": "Reset the form",
-          disabled: !formik.dirty,
-          onClick: function onClick() {
-            return formik.resetForm();
-          },
-          children: "Reset"
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["@container w-full flex justify-center"]))),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-full @lg:w-1/2"]))),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.Form, {
+        onSubmit: function onSubmit(e) {
+          setRevalidationEnabled(true);
+          formik.handleSubmit(e);
+        },
+        onReset: function onReset(e) {
+          setRevalidationEnabled(false);
+          formik.handleReset(e);
+        },
+        className: (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+          label: "Name",
+          labelFor: "name",
+          description: "Please enter your name",
+          state: getFieldState("name"),
+          className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))), isFieldDirty("name") && (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["text-xenon-500"])))),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
+            id: "name",
+            placeholder: "Name",
+            required: true
+          }, formik.getFieldProps("name")))
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+          label: "Email",
+          labelFor: "email",
+          description: "Please enter your email",
+          state: getFieldState("email"),
+          className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))), isFieldDirty("email") && (0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["text-xenon-500"])))),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
+            id: "email",
+            placeholder: "Email",
+            required: true
+          }, formik.getFieldProps("email")))
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+          label: "Company",
+          labelFor: "company",
+          description: "Please enter your company",
+          state: getFieldState("company"),
+          className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))), isFieldDirty("company") && (0, _satellitePrefixer["default"])(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2["default"])(["text-xenon-500"])))),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
+            id: "company",
+            placeholder: "Company",
+            required: true
+          }, formik.getFieldProps("company")))
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+          label: "Phone Number",
+          labelFor: "phoneNumber",
+          description: "Please enter your phone number",
+          state: getFieldState("phoneNumber"),
+          className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))), isFieldDirty("phoneNumber") && (0, _satellitePrefixer["default"])(_templateObject26 || (_templateObject26 = (0, _taggedTemplateLiteral2["default"])(["text-xenon-500"])))),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
+            id: "phoneNumber",
+            placeholder: "Phone number",
+            required: true
+          }, formik.getFieldProps("phoneNumber")))
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: (0, _satellitePrefixer["default"])(_templateObject27 || (_templateObject27 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormSubmit, {
+            variant: "primary",
+            "aria-label": "Save updated changes",
+            disabled: !formik.dirty,
+            children: "Save changes"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormReset, {
+            "aria-label": "Reset the form",
+            disabled: !formik.dirty,
+            onClick: function onClick() {
+              return formik.resetForm();
+            },
+            children: "Reset"
+          })]
+        }), dirtyFieldsNb > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Indicators.Alert, {
+          variant: "accent",
+          icon: _Icons.InfoIcon,
+          className: (0, _satellitePrefixer["default"])(_templateObject28 || (_templateObject28 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+          children: [dirtyFieldsNb, " updated fields"]
         })]
-      }), dirtyFieldsNb > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Indicators.Alert, {
-        variant: "accent",
-        icon: _Icons.InfoIcon,
-        className: (0, _satellitePrefixer["default"])(_templateObject26 || (_templateObject26 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
-        children: [dirtyFieldsNb, " updated fields"]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
+        className: (0, _satellitePrefixer["default"])(_templateObject29 || (_templateObject29 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
+        className: (0, _satellitePrefixer["default"])(_templateObject30 || (_templateObject30 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
+        children: JSON.stringify(formData, null, 2)
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
-      className: (0, _satellitePrefixer["default"])(_templateObject27 || (_templateObject27 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
-      className: (0, _satellitePrefixer["default"])(_templateObject28 || (_templateObject28 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
-      children: JSON.stringify(formData, null, 2)
-    })]
+    })
   });
 };

dist/cjs/Fields/Form/stories/DynamicFieldsValidation.js

@@ -27,3 +27,3 @@ "use strict";
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30;
 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); }
@@ -110,146 +110,149 @@ 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; }
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-3/5"]))),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.ExperimentalForm, {
-      onSubmit: handleSubmit(function (data) {
-        return setFormData(data);
-      }),
-      onReset: function onReset() {
-        return setFormData(initialFormData);
-      },
-      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
-        name: "name",
-        control: control,
-        render: function render(_ref) {
-          var field = _ref.field;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-            label: "Name",
-            labelFor: "name",
-            description: "Please enter your name",
-            state: getFieldState("name"),
-            className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
-              id: "name",
-              placeholder: "John Doe",
-              required: true
-            }, field))
-          });
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
-        name: "email",
-        control: control,
-        render: function render(_ref2) {
-          var field = _ref2.field;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-            label: "Email",
-            labelFor: "email",
-            description: "Please enter your email",
-            state: getFieldState("email"),
-            className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
-              id: "email",
-              placeholder: "[e-mail]",
-              required: true
-            }, field))
-          });
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
-        name: "profession",
-        control: control,
-        render: function render(_ref3) {
-          var field = _ref3.field;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-            label: "Profession",
-            labelFor: "profession",
-            description: "Please specify your profession",
-            state: getFieldState("profession"),
-            className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.Select, _objectSpread(_objectSpread({
-              id: "profession",
-              required: true
-            }, field), {}, {
-              children: professions.map(function (profession) {
-                return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-                  value: profession,
-                  children: (0, _capitalize["default"])(profession)
-                }, profession);
-              })
-            }))
-          });
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
-        name: "hospitalName",
-        control: control,
-        render: function render(_ref4) {
-          var field = _ref4.field;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-            label: "Hospital Name",
-            labelFor: "hospitalName",
-            description: "Please enter an hospital name",
-            state: getFieldState("hospitalName"),
-            className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))), profession !== "doctor" && (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["hidden"])))),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
-              id: "hospitalName",
-              placeholder: "Name",
-              required: true
-            }, field))
-          });
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
-        name: "schoolName",
-        control: control,
-        render: function render(_ref5) {
-          var field = _ref5.field;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-            label: "School Name",
-            labelFor: "schoolName",
-            description: "Please enter a school name",
-            state: getFieldState("schoolName"),
-            className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))), profession !== "teacher" && (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["hidden"])))),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
-              id: "schoolName",
-              placeholder: "Name",
-              required: true
-            }, field))
-          });
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
-        name: "otherProfession",
-        control: control,
-        render: function render(_ref6) {
-          var field = _ref6.field;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-            label: "Other Profession",
-            labelFor: "otherProfession",
-            description: "Please enter an other profession",
-            state: getFieldState("otherProfession"),
-            className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))), profession !== "other" && (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["hidden"])))),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
-              id: "otherProfession",
-              placeholder: "Profession",
-              required: true
-            }, field))
-          });
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormSubmit, {
-          variant: "primary",
-          "aria-label": "Save the form",
-          children: "Save"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormReset, {
-          "aria-label": "Reset the form",
-          onClick: function onClick() {
-            return reset();
-          },
-          children: "Reset"
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["@container w-full flex justify-center"]))),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-full @lg:w-1/2"]))),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.Form, {
+        onSubmit: handleSubmit(function (data) {
+          return setFormData(data);
+        }),
+        onReset: function onReset() {
+          return setFormData(initialFormData);
+        },
+        className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+          name: "name",
+          control: control,
+          render: function render(_ref) {
+            var field = _ref.field;
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+              label: "Name",
+              labelFor: "name",
+              description: "Please enter your name",
+              state: getFieldState("name"),
+              className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
+                id: "name",
+                placeholder: "John Doe",
+                required: true
+              }, field))
+            });
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+          name: "email",
+          control: control,
+          render: function render(_ref2) {
+            var field = _ref2.field;
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+              label: "Email",
+              labelFor: "email",
+              description: "Please enter your email",
+              state: getFieldState("email"),
+              className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
+                id: "email",
+                placeholder: "[e-mail]",
+                required: true
+              }, field))
+            });
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+          name: "profession",
+          control: control,
+          render: function render(_ref3) {
+            var field = _ref3.field;
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+              label: "Profession",
+              labelFor: "profession",
+              description: "Please specify your profession",
+              state: getFieldState("profession"),
+              className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.Select, _objectSpread(_objectSpread({
+                id: "profession",
+                required: true
+              }, field), {}, {
+                children: professions.map(function (profession) {
+                  return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+                    value: profession,
+                    children: (0, _capitalize["default"])(profession)
+                  }, profession);
+                })
+              }))
+            });
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+          name: "hospitalName",
+          control: control,
+          render: function render(_ref4) {
+            var field = _ref4.field;
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+              label: "Hospital Name",
+              labelFor: "hospitalName",
+              description: "Please enter an hospital name",
+              state: getFieldState("hospitalName"),
+              className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))), profession !== "doctor" && (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["hidden"])))),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
+                id: "hospitalName",
+                placeholder: "Name",
+                required: true
+              }, field))
+            });
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+          name: "schoolName",
+          control: control,
+          render: function render(_ref5) {
+            var field = _ref5.field;
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+              label: "School Name",
+              labelFor: "schoolName",
+              description: "Please enter a school name",
+              state: getFieldState("schoolName"),
+              className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))), profession !== "teacher" && (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["hidden"])))),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
+                id: "schoolName",
+                placeholder: "Name",
+                required: true
+              }, field))
+            });
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+          name: "otherProfession",
+          control: control,
+          render: function render(_ref6) {
+            var field = _ref6.field;
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+              label: "Other Profession",
+              labelFor: "otherProfession",
+              description: "Please enter an other profession",
+              state: getFieldState("otherProfession"),
+              className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))), profession !== "other" && (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["hidden"])))),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
+                id: "otherProfession",
+                placeholder: "Profession",
+                required: true
+              }, field))
+            });
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormSubmit, {
+            variant: "primary",
+            "aria-label": "Save the form",
+            children: "Save"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormReset, {
+            "aria-label": "Reset the form",
+            onClick: function onClick() {
+              return reset();
+            },
+            children: "Reset"
+          })]
         })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
+        className: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
+        className: (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
+        children: JSON.stringify(formData, null, 2)
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
-      className: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
-      className: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
-      children: JSON.stringify(formData, null, 2)
-    })]
+    })
   });
@@ -322,107 +325,110 @@ };
   (0, _useFormikAutoFocusOnError.useFormikAutoFocusOnError)(formik);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-3/5"]))),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.ExperimentalForm, {
-      onSubmit: function onSubmit(e) {
-        setRevalidationEnabled(true);
-        formik.handleSubmit(e);
-      },
-      onReset: function onReset(e) {
-        setRevalidationEnabled(false);
-        formik.handleReset(e);
-      },
-      className: (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-        label: "Name",
-        labelFor: "name",
-        description: "Please enter your name",
-        state: getFieldState("name"),
-        className: (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
-          id: "name",
-          placeholder: "John Doe",
-          required: true
-        }, formik.getFieldProps("name")))
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-        label: "Email",
-        labelFor: "email",
-        description: "Please enter your email",
-        state: getFieldState("email"),
-        className: (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
-          id: "email",
-          placeholder: "[e-mail]",
-          required: true
-        }, formik.getFieldProps("email")))
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-        label: "Profession",
-        labelFor: "profession",
-        description: "Please specify your profession",
-        state: getFieldState("profession"),
-        className: (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.Select, _objectSpread(_objectSpread({
-          id: "profession",
-          required: true
-        }, formik.getFieldProps("profession")), {}, {
-          children: professions.map(function (profession) {
-            return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-              value: profession,
-              children: (0, _capitalize["default"])(profession)
-            }, profession);
-          })
-        }))
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-        label: "Hospital Name",
-        labelFor: "hospitalName",
-        description: "Please enter an hospital name",
-        state: getFieldState("hospitalName"),
-        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))), formik.values.profession !== "doctor" && (0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["hidden"])))),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
-          id: "hospitalName",
-          placeholder: "Name",
-          required: true
-        }, formik.getFieldProps("hospitalName")))
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-        label: "School Name",
-        labelFor: "schoolName",
-        description: "Please enter a school name",
-        state: getFieldState("schoolName"),
-        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))), formik.values.profession !== "teacher" && (0, _satellitePrefixer["default"])(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2["default"])(["hidden"])))),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
-          id: "schoolName",
-          placeholder: "Name",
-          required: true
-        }, formik.getFieldProps("schoolName")))
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-        label: "Other Profession",
-        labelFor: "otherProfession",
-        description: "Please enter an other profession",
-        state: getFieldState("otherProfession"),
-        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))), formik.values.profession !== "other" && (0, _satellitePrefixer["default"])(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteral2["default"])(["hidden"])))),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
-          id: "otherProfession",
-          placeholder: "Profession",
-          required: true
-        }, formik.getFieldProps("otherProfession")))
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: (0, _satellitePrefixer["default"])(_templateObject26 || (_templateObject26 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormSubmit, {
-          variant: "primary",
-          "aria-label": "Save the form",
-          children: "Save"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormReset, {
-          "aria-label": "Reset the form",
-          onClick: function onClick() {
-            return formik.resetForm();
-          },
-          children: "Reset"
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["@container w-full flex justify-center"]))),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-full @lg:w-1/2"]))),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.Form, {
+        onSubmit: function onSubmit(e) {
+          setRevalidationEnabled(true);
+          formik.handleSubmit(e);
+        },
+        onReset: function onReset(e) {
+          setRevalidationEnabled(false);
+          formik.handleReset(e);
+        },
+        className: (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+          label: "Name",
+          labelFor: "name",
+          description: "Please enter your name",
+          state: getFieldState("name"),
+          className: (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
+            id: "name",
+            placeholder: "John Doe",
+            required: true
+          }, formik.getFieldProps("name")))
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+          label: "Email",
+          labelFor: "email",
+          description: "Please enter your email",
+          state: getFieldState("email"),
+          className: (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
+            id: "email",
+            placeholder: "[e-mail]",
+            required: true
+          }, formik.getFieldProps("email")))
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+          label: "Profession",
+          labelFor: "profession",
+          description: "Please specify your profession",
+          state: getFieldState("profession"),
+          className: (0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.Select, _objectSpread(_objectSpread({
+            id: "profession",
+            required: true
+          }, formik.getFieldProps("profession")), {}, {
+            children: professions.map(function (profession) {
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+                value: profession,
+                children: (0, _capitalize["default"])(profession)
+              }, profession);
+            })
+          }))
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+          label: "Hospital Name",
+          labelFor: "hospitalName",
+          description: "Please enter an hospital name",
+          state: getFieldState("hospitalName"),
+          className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))), formik.values.profession !== "doctor" && (0, _satellitePrefixer["default"])(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2["default"])(["hidden"])))),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
+            id: "hospitalName",
+            placeholder: "Name",
+            required: true
+          }, formik.getFieldProps("hospitalName")))
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+          label: "School Name",
+          labelFor: "schoolName",
+          description: "Please enter a school name",
+          state: getFieldState("schoolName"),
+          className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))), formik.values.profession !== "teacher" && (0, _satellitePrefixer["default"])(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteral2["default"])(["hidden"])))),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
+            id: "schoolName",
+            placeholder: "Name",
+            required: true
+          }, formik.getFieldProps("schoolName")))
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+          label: "Other Profession",
+          labelFor: "otherProfession",
+          description: "Please enter an other profession",
+          state: getFieldState("otherProfession"),
+          className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject26 || (_templateObject26 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))), formik.values.profession !== "other" && (0, _satellitePrefixer["default"])(_templateObject27 || (_templateObject27 = (0, _taggedTemplateLiteral2["default"])(["hidden"])))),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
+            id: "otherProfession",
+            placeholder: "Profession",
+            required: true
+          }, formik.getFieldProps("otherProfession")))
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: (0, _satellitePrefixer["default"])(_templateObject28 || (_templateObject28 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormSubmit, {
+            variant: "primary",
+            "aria-label": "Save the form",
+            children: "Save"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormReset, {
+            "aria-label": "Reset the form",
+            onClick: function onClick() {
+              return formik.resetForm();
+            },
+            children: "Reset"
+          })]
         })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
+        className: (0, _satellitePrefixer["default"])(_templateObject29 || (_templateObject29 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
+        className: (0, _satellitePrefixer["default"])(_templateObject30 || (_templateObject30 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
+        children: JSON.stringify(formData, null, 2)
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
-      className: (0, _satellitePrefixer["default"])(_templateObject27 || (_templateObject27 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
-      className: (0, _satellitePrefixer["default"])(_templateObject28 || (_templateObject28 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
-      children: JSON.stringify(formData, null, 2)
-    })]
+    })
   });
 };

dist/cjs/Fields/Form/stories/FieldArrays.js

@@ -27,3 +27,3 @@ "use strict";
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30;
 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); }
@@ -114,67 +114,70 @@ 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; }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-full"]))),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactHookForm.FormProvider, _objectSpread(_objectSpread({}, api), {}, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.ExperimentalForm, {
-        onSubmit: handleSubmit(function (data) {
-          return setFormData(data);
-        }),
-        onReset: function onReset() {
-          return setFormData(initialFormData);
-        },
-        className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormErrorMessage, {}), fields.map(function (field, index) {
-          return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["w-full flex flex-col gap-2"]))),
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-              className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["w-full flex items-center justify-between"]))),
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                children: index === 0 ? "Only display items that match this group" : "And"
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Actions.IconButton, {
-                title: "Remove group",
-                variant: "subtle",
-                icon: _Icons.MinusIcon,
-                disabled: fields.length === 1,
-                onClick: function onClick() {
-                  return remove(index);
-                }
+    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["@container w-full flex justify-center"]))),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-full"]))),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactHookForm.FormProvider, _objectSpread(_objectSpread({}, api), {}, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.Form, {
+          onSubmit: handleSubmit(function (data) {
+            return setFormData(data);
+          }),
+          onReset: function onReset() {
+            return setFormData(initialFormData);
+          },
+          className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormErrorMessage, {}), fields.map(function (field, index) {
+            return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["w-full flex flex-col gap-2"]))),
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["w-full flex items-center justify-between"]))),
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                  children: index === 0 ? "Only display items that match this group" : "And"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Actions.IconButton, {
+                  title: "Remove group",
+                  variant: "subtle",
+                  icon: _Icons.MinusIcon,
+                  disabled: fields.length === 1,
+                  onClick: function onClick() {
+                    return remove(index);
+                  }
+                })]
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(RHFFilter, {
+                parentIndex: index
               })]
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(RHFFilter, {
-              parentIndex: index
-            })]
-          }, field.id);
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Actions.Button, {
-          variant: "subtle",
-          startIcon: _Icons.PlusIcon,
-          onClick: function onClick() {
-            return (
-              // It accepts `object` and object[]`, so we need to append an array of array
-              append([[{
-                facet: undefined,
-                operator: "is",
-                value: undefined
-              }]])
-            );
-          },
-          children: "And"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormSubmit, {
-            variant: "primary",
-            "aria-label": "Apply changes",
-            children: "Apply"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormReset, {
-            "aria-label": "Reset the form",
+            }, field.id);
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Actions.Button, {
+            variant: "subtle",
+            startIcon: _Icons.PlusIcon,
             onClick: function onClick() {
-              return reset();
+              return (
+                // It accepts `object` and object[]`, so we need to append an array of array
+                append([[{
+                  facet: undefined,
+                  operator: "is",
+                  value: undefined
+                }]])
+              );
             },
-            children: "Reset"
+            children: "And"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormSubmit, {
+              variant: "primary",
+              "aria-label": "Apply changes",
+              children: "Apply"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormReset, {
+              "aria-label": "Reset the form",
+              onClick: function onClick() {
+                return reset();
+              },
+              children: "Reset"
+            })]
           })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
+          className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
+          className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
+          children: JSON.stringify(formData, null, 2)
         })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
-        className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
-        className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
-        children: JSON.stringify(formData, null, 2)
-      })]
-    }))
+      }))
+    })
   });
@@ -217,8 +220,8 @@ };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["w-full flex flex-col items-start gap-6 bg-grey-100 border border-grey-200 rounded p-4"]))),
+    className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["w-full flex flex-col items-start gap-6 bg-grey-100 border border-grey-200 rounded p-4"]))),
     children: [fields.map(function (field, index) {
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["w-full flex items-stretch gap-2"]))),
+        className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["w-full flex items-stretch gap-2 flex-col @xl:flex-row"]))),
         children: [index > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["mt-8"]))),
+          className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["mt-0 @xl:mt-8"]))),
           children: "Or"
@@ -234,3 +237,3 @@ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
               state: getFieldState("filterGroups.".concat(parentIndex, ".").concat(index, ".facet")),
-              className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+              className: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.AutoComplete, _objectSpread({
@@ -256,3 +259,3 @@ id: "filterGroups.".concat(parentIndex, ".").concat(index, ".facet"),
                 id: "filterGroups.".concat(parentIndex, ".").concat(index, ".operator"),
-                className: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["w-min"]))),
+                className: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["w-min"]))),
                 required: true
@@ -279,3 +282,3 @@ }, field), {}, {
               state: getFieldState("filterGroups.".concat(parentIndex, ".").concat(index, ".value")),
-              className: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+              className: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.AutoComplete, _objectSpread({
@@ -294,3 +297,3 @@ id: "filterGroups.".concat(parentIndex, ".").concat(index, ".value"),
           icon: _Icons.MinusIcon,
-          className: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["mt-8 shrink-0"]))),
+          className: (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["shrink-0 mt-0 @lg:mt-8"]))),
           disabled: fields.length === 1,
@@ -338,104 +341,107 @@ onClick: function onClick() {
     setRevalidationEnabled = _useState6[1];
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-full"]))),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_formik.Formik, {
-      initialValues: initialFormData,
-      validateOnChange: revalidationEnabled,
-      validateOnBlur: revalidationEnabled,
-      validationSchema: yupSchema,
-      onSubmit: function onSubmit(values) {
-        // We need to transform the values here because transforms in Yup are run before validations
-        var transformedValues = _objectSpread(_objectSpread({}, values), {}, {
-          filterGroups: values.filterGroups.map(function (group) {
-            return group.map(function (item) {
-              var _item$facet, _item$value;
-              return _objectSpread(_objectSpread({}, item), {}, {
-                facet: (_item$facet = item.facet) === null || _item$facet === void 0 ? void 0 : _item$facet.label,
-                value: (_item$value = item.value) === null || _item$value === void 0 ? void 0 : _item$value.label
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["@container w-full flex justify-center"]))),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-full"]))),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_formik.Formik, {
+        initialValues: initialFormData,
+        validateOnChange: revalidationEnabled,
+        validateOnBlur: revalidationEnabled,
+        validationSchema: yupSchema,
+        onSubmit: function onSubmit(values) {
+          // We need to transform the values here because transforms in Yup are run before validations
+          var transformedValues = _objectSpread(_objectSpread({}, values), {}, {
+            filterGroups: values.filterGroups.map(function (group) {
+              return group.map(function (item) {
+                var _item$facet, _item$value;
+                return _objectSpread(_objectSpread({}, item), {}, {
+                  facet: (_item$facet = item.facet) === null || _item$facet === void 0 ? void 0 : _item$facet.label,
+                  value: (_item$value = item.value) === null || _item$value === void 0 ? void 0 : _item$value.label
+                });
               });
-            });
-          })
-        });
-        setFormData(transformedValues);
-      },
-      onReset: function onReset() {
-        return setFormData(initialFormData);
-      },
-      render: function render(_ref5) {
-        var handleSubmit = _ref5.handleSubmit,
-          handleReset = _ref5.handleReset,
-          values = _ref5.values,
-          resetForm = _ref5.resetForm;
-        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.ExperimentalForm, {
-          onSubmit: function onSubmit(e) {
-            setRevalidationEnabled(true);
-            handleSubmit(e);
-          },
-          onReset: function onReset(e) {
-            setRevalidationEnabled(false);
-            handleReset(e);
-          },
-          className: (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_formik.FieldArray, {
-            name: "filterGroups",
-            render: function render(_ref6) {
-              var push = _ref6.push,
-                remove = _ref6.remove;
-              return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-                children: [values.filterGroups.map(function (_, index) {
-                  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-                    className: (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["w-full flex flex-col gap-2"]))),
-                    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-                      className: (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["w-full flex items-center justify-between"]))),
-                      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                        children: index === 0 ? "Only display items that match this group" : "And"
-                      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Actions.IconButton, {
-                        title: "Remove group",
-                        variant: "subtle",
-                        icon: _Icons.MinusIcon,
-                        disabled: values.filterGroups.length === 1,
-                        onClick: function onClick() {
-                          return remove(index);
-                        }
+            })
+          });
+          setFormData(transformedValues);
+        },
+        onReset: function onReset() {
+          return setFormData(initialFormData);
+        },
+        render: function render(_ref5) {
+          var handleSubmit = _ref5.handleSubmit,
+            handleReset = _ref5.handleReset,
+            values = _ref5.values,
+            resetForm = _ref5.resetForm;
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.Form, {
+            onSubmit: function onSubmit(e) {
+              setRevalidationEnabled(true);
+              handleSubmit(e);
+            },
+            onReset: function onReset(e) {
+              setRevalidationEnabled(false);
+              handleReset(e);
+            },
+            className: (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_formik.FieldArray, {
+              name: "filterGroups",
+              render: function render(_ref6) {
+                var push = _ref6.push,
+                  remove = _ref6.remove;
+                return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                  children: [values.filterGroups.map(function (_, index) {
+                    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                      className: (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["w-full flex flex-col gap-2"]))),
+                      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                        className: (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["w-full flex items-center justify-between"]))),
+                        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                          children: index === 0 ? "Only display items that match this group" : "And"
+                        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Actions.IconButton, {
+                          title: "Remove group",
+                          variant: "subtle",
+                          icon: _Icons.MinusIcon,
+                          disabled: values.filterGroups.length === 1,
+                          onClick: function onClick() {
+                            return remove(index);
+                          }
+                        })]
+                      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(FormikFilter, {
+                        parentIndex: index
                       })]
-                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(FormikFilter, {
-                      parentIndex: index
-                    })]
-                  }, index);
-                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Actions.Button, {
-                  variant: "subtle",
-                  startIcon: _Icons.PlusIcon,
-                  onClick: function onClick() {
-                    return push([{
-                      facet: undefined,
-                      operator: "is",
-                      value: undefined
-                    }]);
-                  },
-                  children: "And"
-                })]
-              });
-            }
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormSubmit, {
-              variant: "primary",
-              "aria-label": "Apply changes",
-              children: "Apply"
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormReset, {
-              "aria-label": "Reset the form",
-              onClick: function onClick() {
-                return resetForm();
-              },
-              children: "Reset"
+                    }, index);
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Actions.Button, {
+                    variant: "subtle",
+                    startIcon: _Icons.PlusIcon,
+                    onClick: function onClick() {
+                      return push([{
+                        facet: undefined,
+                        operator: "is",
+                        value: undefined
+                      }]);
+                    },
+                    children: "And"
+                  })]
+                });
+              }
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: (0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormSubmit, {
+                variant: "primary",
+                "aria-label": "Apply changes",
+                children: "Apply"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormReset, {
+                "aria-label": "Reset the form",
+                onClick: function onClick() {
+                  return resetForm();
+                },
+                children: "Reset"
+              })]
             })]
-          })]
-        });
-      }
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
-      className: (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
-      className: (0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
-      children: JSON.stringify(formData, null, 2)
-    })]
+          });
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
+        className: (0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
+        className: (0, _satellitePrefixer["default"])(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
+        children: JSON.stringify(formData, null, 2)
+      })]
+    })
   });
@@ -471,9 +477,9 @@ };
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: (0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["w-full flex flex-col items-start gap-6 bg-grey-100 border border-grey-200 rounded p-4"]))),
+        className: (0, _satellitePrefixer["default"])(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2["default"])(["w-full flex flex-col items-start gap-6 bg-grey-100 border border-grey-200 rounded p-4"]))),
         children: [formik.values.filterGroups[parentIndex].map(function (_, index) {
           var _form$values$filterGr;
           return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: (0, _satellitePrefixer["default"])(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2["default"])(["w-full flex items-stretch gap-2"]))),
+            className: (0, _satellitePrefixer["default"])(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteral2["default"])(["w-full flex items-stretch gap-2 flex-col @xl:flex-row"]))),
             children: [index > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: (0, _satellitePrefixer["default"])(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2["default"])(["mt-8"]))),
+              className: (0, _satellitePrefixer["default"])(_templateObject26 || (_templateObject26 = (0, _taggedTemplateLiteral2["default"])(["mt-0 @xl:mt-8"]))),
               children: "Or"
@@ -484,3 +490,3 @@ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
               state: getFieldState("filterGroups.".concat(parentIndex, ".").concat(index, ".facet")),
-              className: (0, _satellitePrefixer["default"])(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+              className: (0, _satellitePrefixer["default"])(_templateObject27 || (_templateObject27 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.AutoComplete, _objectSpread(_objectSpread({
@@ -505,3 +511,3 @@ id: "filterGroups.".concat(parentIndex, ".").concat(index, ".facet"),
                 id: "filterGroups.".concat(parentIndex, ".").concat(index, ".operator"),
-                className: (0, _satellitePrefixer["default"])(_templateObject26 || (_templateObject26 = (0, _taggedTemplateLiteral2["default"])(["w-min"]))),
+                className: (0, _satellitePrefixer["default"])(_templateObject28 || (_templateObject28 = (0, _taggedTemplateLiteral2["default"])(["w-min"]))),
                 required: true
@@ -520,3 +526,3 @@ }, form.getFieldProps("filterGroups.".concat(parentIndex, ".").concat(index, ".operator"))), {}, {
               state: getFieldState("filterGroups.".concat(parentIndex, ".").concat(index, ".value")),
-              className: (0, _satellitePrefixer["default"])(_templateObject27 || (_templateObject27 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+              className: (0, _satellitePrefixer["default"])(_templateObject29 || (_templateObject29 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.AutoComplete, _objectSpread(_objectSpread({
@@ -539,3 +545,3 @@ id: "filterGroups.".concat(parentIndex, ".").concat(index, ".value"),
               icon: _Icons.MinusIcon,
-              className: (0, _satellitePrefixer["default"])(_templateObject28 || (_templateObject28 = (0, _taggedTemplateLiteral2["default"])(["mt-8 shrink-0"]))),
+              className: (0, _satellitePrefixer["default"])(_templateObject30 || (_templateObject30 = (0, _taggedTemplateLiteral2["default"])(["shrink-0 mt-0 @lg:mt-8"]))),
               disabled: form.values.filterGroups[parentIndex].length === 1,
@@ -542,0 +548,0 @@ onClick: function onClick() {

dist/cjs/Fields/Form/stories/JSONForms.js

@@ -32,3 +32,3 @@ "use strict";
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
 var schema = {
@@ -882,61 +882,64 @@ type: "object",
     setValidationMode = _useState10[1];
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-3/5"]))),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.ExperimentalForm, {
-      onSubmit: function onSubmit(e) {
-        e.preventDefault();
-        setValidationMode("ValidateAndShow");
-        if (!errors.length) {
-          setFormData(internalFormData);
-        }
-      },
-      onReset: function onReset() {
-        setInternalFormData(initialFormData);
-        setFormData(initialFormData);
-        setAdditionalErrors([]);
-        setValidationMode("ValidateAndHide");
-      },
-      className: (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(AdditionalErrorsContext.Provider, {
-        value: {
-          setAdditionalErrors: setAdditionalErrors
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["@container w-full flex justify-center"]))),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-full @lg:w-1/2"]))),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.Form, {
+        onSubmit: function onSubmit(e) {
+          e.preventDefault();
+          setValidationMode("ValidateAndShow");
+          if (!errors.length) {
+            setFormData(internalFormData);
+          }
         },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vanillaRenderers.JsonFormsStyleContext.Provider, {
-          value: styleContextValue,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.JsonForms, {
-            schema: schema,
-            uischema: uischema,
-            data: internalFormData,
-            renderers: renderers,
-            ajv: ajv,
-            validationMode: validationMode,
-            additionalErrors: additionalErrors,
-            onChange: function onChange(_ref12) {
-              var data = _ref12.data,
-                errors = _ref12.errors;
-              setInternalFormData(data);
-              setErrors((errors === null || errors === void 0 ? void 0 : errors.map(function (error) {
-                return error.message || "";
-              })) || []);
-            }
+        onReset: function onReset() {
+          setInternalFormData(initialFormData);
+          setFormData(initialFormData);
+          setAdditionalErrors([]);
+          setValidationMode("ValidateAndHide");
+        },
+        className: (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(AdditionalErrorsContext.Provider, {
+          value: {
+            setAdditionalErrors: setAdditionalErrors
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vanillaRenderers.JsonFormsStyleContext.Provider, {
+            value: styleContextValue,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.JsonForms, {
+              schema: schema,
+              uischema: uischema,
+              data: internalFormData,
+              renderers: renderers,
+              ajv: ajv,
+              validationMode: validationMode,
+              additionalErrors: additionalErrors,
+              onChange: function onChange(_ref12) {
+                var data = _ref12.data,
+                  errors = _ref12.errors;
+                setInternalFormData(data);
+                setErrors((errors === null || errors === void 0 ? void 0 : errors.map(function (error) {
+                  return error.message || "";
+                })) || []);
+              }
+            })
           })
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormSubmit, {
-          variant: "primary",
-          "aria-label": "Save the form",
-          children: "Save"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormReset, {
-          "aria-label": "Reset the form",
-          children: "Reset"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormSubmit, {
+            variant: "primary",
+            "aria-label": "Save the form",
+            children: "Save"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormReset, {
+            "aria-label": "Reset the form",
+            children: "Reset"
+          })]
         })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
+        className: (0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
+        className: (0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
+        children: JSON.stringify(formData, null, 2)
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
-      className: (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
-      className: (0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
-      children: JSON.stringify(formData, null, 2)
-    })]
+    })
   });
 };

dist/cjs/Fields/Form/stories/MultiStep.js

@@ -32,3 +32,3 @@ "use strict";
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44, _templateObject45, _templateObject46, _templateObject47, _templateObject48, _templateObject49, _templateObject50, _templateObject51, _templateObject52, _templateObject53, _templateObject54, _templateObject55, _templateObject56, _templateObject57, _templateObject58, _templateObject59, _templateObject60, _templateObject61, _templateObject62, _templateObject63, _templateObject64, _templateObject65, _templateObject66, _templateObject67, _templateObject68, _templateObject69, _templateObject70;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44, _templateObject45, _templateObject46, _templateObject47, _templateObject48, _templateObject49, _templateObject50, _templateObject51, _templateObject52, _templateObject53, _templateObject54, _templateObject55, _templateObject56, _templateObject57, _templateObject58, _templateObject59, _templateObject60, _templateObject61, _templateObject62, _templateObject63, _templateObject64, _templateObject65, _templateObject66, _templateObject67, _templateObject68, _templateObject69, _templateObject70, _templateObject71, _templateObject72;
 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); }
@@ -135,259 +135,262 @@ 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; }
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-4/5"]))),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.ExperimentalForm, {
-      onSubmit: handleSubmit(function (data) {
-        return setFormData(data);
-      }),
-      onReset: function onReset() {
-        return setFormData(initialFormData);
-      },
-      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 overflow-hidden"]))),
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormErrorMessage, {
-        locale: {
-          errorText: function errorText(invalidFields) {
-            return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-                className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (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"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col"]))),
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
-                  href: "#",
-                  className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["text-black underline hover:text-grey-800"]))),
-                  onClick: function onClick(e) {
-                    e.preventDefault();
-                    var firstInvalid = steps.find(function (step) {
-                      return getFieldState(step).status === "invalid";
-                    });
-                    if (firstInvalid) {
-                      goToPage(steps.indexOf(firstInvalid) + 1);
-                    }
-                  },
-                  children: "Go to first error"
-                })
-              })]
-            });
-          }
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["flex transition-transform ease-out duration-500"]))),
-        style: {
-          transform: "translateX(-".concat((page - 1) * 100, "%)")
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["@container w-full flex justify-center"]))),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-full @lg:w-4/5"]))),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.Form, {
+        onSubmit: handleSubmit(function (data) {
+          return setFormData(data);
+        }),
+        onReset: function onReset() {
+          return setFormData(initialFormData);
         },
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
-          name: "variants",
-          control: control,
-          render: function render(_ref) {
-            var field = _ref.field;
-            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-              label: /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
-                className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["display-xlarge whitespace-normal inline"]))),
-                children: "How should we display products that contain multiple variants?"
-              }),
-              labelFor: variantsEnum[0],
-              state: getFieldState("variants"),
-              className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["w-full shrink-0"]))),
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["mt-7"]))),
-                children: variantsOptions.map(function (option) {
-                  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-                    htmlFor: option.value,
-                    className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-3 p-6 rounded display-body transition-colors hover:bg-grey-100"]))),
-                    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-                      className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["flex items-center gap-2"]))),
-                      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioGroup.RadioButton, _objectSpread(_objectSpread({
-                        id: option.value,
-                        "aria-labelledby": option.value,
-                        required: true
-                      }, field), {}, {
-                        value: option.value,
-                        className: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["shrink-0"])))
-                      })), option.title]
-                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                      className: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["ml-6 typo-subdued"]))),
-                      children: option.description
-                    })]
-                  }, option.value);
-                })
-              })
-            });
+        className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 overflow-hidden"]))),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormErrorMessage, {
+          locale: {
+            errorText: function errorText(invalidFields) {
+              return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                  className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (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"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col"]))),
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+                    href: "#",
+                    className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["text-black underline hover:text-grey-800"]))),
+                    onClick: function onClick(e) {
+                      e.preventDefault();
+                      var firstInvalid = steps.find(function (step) {
+                        return getFieldState(step).status === "invalid";
+                      });
+                      if (firstInvalid) {
+                        goToPage(steps.indexOf(firstInvalid) + 1);
+                      }
+                    },
+                    children: "Go to first error"
+                  })
+                })]
+              });
+            }
           }
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
-          name: "outOfStock",
-          control: control,
-          render: function render(_ref2) {
-            var field = _ref2.field;
-            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-              label: /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
-                className: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["display-xlarge whitespace-normal inline"]))),
-                children: "How would you like to show out-of-stock items?"
-              }),
-              labelFor: outOfStockEnum[0],
-              state: getFieldState("outOfStock"),
-              className: (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["w-full shrink-0"]))),
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                className: (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["mt-7"]))),
-                children: outOfStockOptions.map(function (option) {
-                  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-                    htmlFor: option.value,
-                    className: (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-3 p-6 rounded display-body transition-colors hover:bg-grey-100"]))),
-                    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-                      className: (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["flex items-center gap-2"]))),
-                      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioGroup.RadioButton, _objectSpread(_objectSpread({
-                        id: option.value,
-                        "aria-labelledby": option.value,
-                        required: true
-                      }, field), {}, {
-                        value: option.value,
-                        className: (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["shrink-0"])))
-                      })), option.title]
-                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                      className: (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["ml-6 typo-subdued"]))),
-                      children: option.description
-                    })]
-                  }, option.value);
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["flex transition-transform ease-out duration-500"]))),
+          style: {
+            transform: "translateX(-".concat((page - 1) * 100, "%)")
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+            name: "variants",
+            control: control,
+            render: function render(_ref) {
+              var field = _ref.field;
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+                label: /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+                  className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["display-xlarge whitespace-normal inline"]))),
+                  children: "How should we display products that contain multiple variants?"
+                }),
+                labelFor: variantsEnum[0],
+                state: getFieldState("variants"),
+                className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["w-full shrink-0"]))),
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                  className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["mt-7"]))),
+                  children: variantsOptions.map(function (option) {
+                    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+                      htmlFor: option.value,
+                      className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-3 p-6 rounded display-body transition-colors hover:bg-grey-100"]))),
+                      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                        className: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["flex items-center gap-2"]))),
+                        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioGroup.RadioButton, _objectSpread(_objectSpread({
+                          id: option.value,
+                          "aria-labelledby": option.value,
+                          required: true
+                        }, field), {}, {
+                          value: option.value,
+                          className: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["shrink-0"])))
+                        })), option.title]
+                      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                        className: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["ml-6 typo-subdued"]))),
+                        children: option.description
+                      })]
+                    }, option.value);
+                  })
                 })
-              })
-            });
-          }
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
-          name: "sorting",
-          control: control,
-          render: function render(_ref3) {
-            var field = _ref3.field;
-            return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Field.Field, {
-              label: /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
-                className: (0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["display-xlarge whitespace-normal inline"]))),
-                children: "Select how your customers can sort their search results"
-              }),
-              labelFor: sortingOptions[0],
-              state: getFieldState("sorting"),
-              className: (0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["w-full shrink-0"]))),
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                className: (0, _satellitePrefixer["default"])(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2["default"])(["mt-4 typo-subdued"]))),
-                children: "Select the sort order options you'd like to show customers. You can change these later."
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                className: (0, _satellitePrefixer["default"])(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2["default"])(["mt-7"]))),
-                children: sortingOptions.map(function (option) {
-                  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-                    htmlFor: option,
-                    className: (0, _satellitePrefixer["default"])(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2 p-4 rounded display-body transition-colors hover:bg-grey-100"]))),
-                    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.Checkbox, _objectSpread(_objectSpread({
-                      id: option,
-                      required: true,
-                      checked: getValues("sorting").includes(option)
-                    }, field), {}, {
-                      onChange: function onChange() {
-                        return field.onChange(field.value.includes(option) ? field.value.filter(function (v) {
-                          return v !== option;
-                        }) : [].concat((0, _toConsumableArray2["default"])(field.value), [option]));
-                      }
-                    })), (0, _capitalize["default"])(option)]
-                  }, option);
+              });
+            }
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+            name: "outOfStock",
+            control: control,
+            render: function render(_ref2) {
+              var field = _ref2.field;
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+                label: /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+                  className: (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["display-xlarge whitespace-normal inline"]))),
+                  children: "How would you like to show out-of-stock items?"
+                }),
+                labelFor: outOfStockEnum[0],
+                state: getFieldState("outOfStock"),
+                className: (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["w-full shrink-0"]))),
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                  className: (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["mt-7"]))),
+                  children: outOfStockOptions.map(function (option) {
+                    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+                      htmlFor: option.value,
+                      className: (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-3 p-6 rounded display-body transition-colors hover:bg-grey-100"]))),
+                      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                        className: (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["flex items-center gap-2"]))),
+                        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioGroup.RadioButton, _objectSpread(_objectSpread({
+                          id: option.value,
+                          "aria-labelledby": option.value,
+                          required: true
+                        }, field), {}, {
+                          value: option.value,
+                          className: (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["shrink-0"])))
+                        })), option.title]
+                      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                        className: (0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["ml-6 typo-subdued"]))),
+                        children: option.description
+                      })]
+                    }, option.value);
+                  })
                 })
-              })]
-            });
-          }
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
-          name: "filters",
-          control: control,
-          render: function render(_ref4) {
-            var field = _ref4.field;
-            return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Field.Field, {
-              label: /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
-                className: (0, _satellitePrefixer["default"])(_templateObject26 || (_templateObject26 = (0, _taggedTemplateLiteral2["default"])(["display-xlarge whitespace-normal inline"]))),
-                children: "Add filters to help narrow results"
-              }),
-              labelFor: filtersOptions[0],
-              state: getFieldState("filters"),
-              className: (0, _satellitePrefixer["default"])(_templateObject27 || (_templateObject27 = (0, _taggedTemplateLiteral2["default"])(["w-full shrink-0"]))),
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-                className: (0, _satellitePrefixer["default"])(_templateObject28 || (_templateObject28 = (0, _taggedTemplateLiteral2["default"])(["mt-4 typo-subdued"]))),
-                children: ["Select the filter options customers can use to refine results.", /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), "You can edit these after setup."]
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                className: (0, _satellitePrefixer["default"])(_templateObject29 || (_templateObject29 = (0, _taggedTemplateLiteral2["default"])(["mt-7"]))),
-                children: filtersOptions.map(function (option) {
-                  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-                    htmlFor: option,
-                    className: (0, _satellitePrefixer["default"])(_templateObject30 || (_templateObject30 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2 p-4 rounded display-body transition-colors hover:bg-grey-100"]))),
-                    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.Checkbox, _objectSpread(_objectSpread({
-                      id: option,
-                      required: true,
-                      checked: getValues("filters").includes(option)
-                    }, field), {}, {
-                      onChange: function onChange() {
-                        return field.onChange(field.value.includes(option) ? field.value.filter(function (v) {
-                          return v !== option;
-                        }) : [].concat((0, _toConsumableArray2["default"])(field.value), [option]));
+              });
+            }
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+            name: "sorting",
+            control: control,
+            render: function render(_ref3) {
+              var field = _ref3.field;
+              return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Field.Field, {
+                label: /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+                  className: (0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["display-xlarge whitespace-normal inline"]))),
+                  children: "Select how your customers can sort their search results"
+                }),
+                labelFor: sortingOptions[0],
+                state: getFieldState("sorting"),
+                className: (0, _satellitePrefixer["default"])(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2["default"])(["w-full shrink-0"]))),
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                  className: (0, _satellitePrefixer["default"])(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2["default"])(["mt-4 typo-subdued"]))),
+                  children: "Select the sort order options you'd like to show customers. You can change these later."
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                  className: (0, _satellitePrefixer["default"])(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteral2["default"])(["mt-7"]))),
+                  children: sortingOptions.map(function (option) {
+                    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+                      htmlFor: option,
+                      className: (0, _satellitePrefixer["default"])(_templateObject26 || (_templateObject26 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2 p-4 rounded display-body transition-colors hover:bg-grey-100"]))),
+                      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.Checkbox, _objectSpread(_objectSpread({
+                        id: option,
+                        required: true,
+                        checked: getValues("sorting").includes(option)
+                      }, field), {}, {
+                        onChange: function onChange() {
+                          return field.onChange(field.value.includes(option) ? field.value.filter(function (v) {
+                            return v !== option;
+                          }) : [].concat((0, _toConsumableArray2["default"])(field.value), [option]));
+                        }
+                      })), (0, _capitalize["default"])(option)]
+                    }, option);
+                  })
+                })]
+              });
+            }
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+            name: "filters",
+            control: control,
+            render: function render(_ref4) {
+              var field = _ref4.field;
+              return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Field.Field, {
+                label: /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+                  className: (0, _satellitePrefixer["default"])(_templateObject27 || (_templateObject27 = (0, _taggedTemplateLiteral2["default"])(["display-xlarge whitespace-normal inline"]))),
+                  children: "Add filters to help narrow results"
+                }),
+                labelFor: filtersOptions[0],
+                state: getFieldState("filters"),
+                className: (0, _satellitePrefixer["default"])(_templateObject28 || (_templateObject28 = (0, _taggedTemplateLiteral2["default"])(["w-full shrink-0"]))),
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                  className: (0, _satellitePrefixer["default"])(_templateObject29 || (_templateObject29 = (0, _taggedTemplateLiteral2["default"])(["mt-4 typo-subdued"]))),
+                  children: ["Select the filter options customers can use to refine results.", /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), "You can edit these after setup."]
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                  className: (0, _satellitePrefixer["default"])(_templateObject30 || (_templateObject30 = (0, _taggedTemplateLiteral2["default"])(["mt-7"]))),
+                  children: filtersOptions.map(function (option) {
+                    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+                      htmlFor: option,
+                      className: (0, _satellitePrefixer["default"])(_templateObject31 || (_templateObject31 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2 p-4 rounded display-body transition-colors hover:bg-grey-100"]))),
+                      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.Checkbox, _objectSpread(_objectSpread({
+                        id: option,
+                        required: true,
+                        checked: getValues("filters").includes(option)
+                      }, field), {}, {
+                        onChange: function onChange() {
+                          return field.onChange(field.value.includes(option) ? field.value.filter(function (v) {
+                            return v !== option;
+                          }) : [].concat((0, _toConsumableArray2["default"])(field.value), [option]));
+                        }
+                      })), (0, _capitalize["default"])(option)]
+                    }, option);
+                  })
+                })]
+              });
+            }
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: (0, _satellitePrefixer["default"])(_templateObject32 || (_templateObject32 = (0, _taggedTemplateLiteral2["default"])(["w-full flex justify-between"]))),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: (0, _satellitePrefixer["default"])(_templateObject33 || (_templateObject33 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
+              "aria-label": "Previous step",
+              disabled: page <= 1,
+              onClick: function onClick() {
+                return goToPreviousPage();
+              },
+              children: "Back"
+            }), page >= steps.length ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormSubmit, {
+              variant: "primary",
+              "aria-label": "Complete",
+              children: "Complete"
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
+              variant: "primary",
+              "aria-label": "Next step",
+              onClick: /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+                var valid;
+                return _regenerator["default"].wrap(function _callee$(_context) {
+                  while (1) switch (_context.prev = _context.next) {
+                    case 0:
+                      _context.next = 2;
+                      return trigger(steps[page - 1]);
+                    case 2:
+                      valid = _context.sent;
+                      if (valid) {
+                        goToNextPage();
                       }
-                    })), (0, _capitalize["default"])(option)]
-                  }, option);
-                })
-              })]
-            });
-          }
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: (0, _satellitePrefixer["default"])(_templateObject31 || (_templateObject31 = (0, _taggedTemplateLiteral2["default"])(["w-full flex justify-between"]))),
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: (0, _satellitePrefixer["default"])(_templateObject32 || (_templateObject32 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
-            "aria-label": "Previous step",
-            disabled: page <= 1,
+                    case 4:
+                    case "end":
+                      return _context.stop();
+                  }
+                }, _callee);
+              })),
+              children: "Next"
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
+            variant: "subtle",
+            "aria-label": "Reset the form",
             onClick: function onClick() {
-              return goToPreviousPage();
+              reset();
+              goToPage(1);
             },
-            children: "Back"
-          }), page >= steps.length ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormSubmit, {
-            variant: "primary",
-            "aria-label": "Complete",
-            children: "Complete"
-          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
-            variant: "primary",
-            "aria-label": "Next step",
-            onClick: /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
-              var valid;
-              return _regenerator["default"].wrap(function _callee$(_context) {
-                while (1) switch (_context.prev = _context.next) {
-                  case 0:
-                    _context.next = 2;
-                    return trigger(steps[page - 1]);
-                  case 2:
-                    valid = _context.sent;
-                    if (valid) {
-                      goToNextPage();
-                    }
-                  case 4:
-                  case "end":
-                    return _context.stop();
-                }
-              }, _callee);
-            })),
-            children: "Next"
+            children: "Reset"
           })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
-          variant: "subtle",
-          "aria-label": "Reset the form",
-          onClick: function onClick() {
-            reset();
-            goToPage(1);
-          },
-          children: "Reset"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: (0, _satellitePrefixer["default"])(_templateObject34 || (_templateObject34 = (0, _taggedTemplateLiteral2["default"])(["mt-8 mx-auto"]))),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DotPagination.DotPagination, {
+            nbPages: steps.length,
+            currentPage: page,
+            onChange: goToPage,
+            size: "small"
+          })
         })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: (0, _satellitePrefixer["default"])(_templateObject33 || (_templateObject33 = (0, _taggedTemplateLiteral2["default"])(["mt-8 mx-auto"]))),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DotPagination.DotPagination, {
-          nbPages: steps.length,
-          currentPage: page,
-          onChange: goToPage,
-          size: "small"
-        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
+        className: (0, _satellitePrefixer["default"])(_templateObject35 || (_templateObject35 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
+        className: (0, _satellitePrefixer["default"])(_templateObject36 || (_templateObject36 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
+        children: JSON.stringify(formData, null, 2)
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
-      className: (0, _satellitePrefixer["default"])(_templateObject34 || (_templateObject34 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
-      className: (0, _satellitePrefixer["default"])(_templateObject35 || (_templateObject35 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
-      children: JSON.stringify(formData, null, 2)
-    })]
+    })
   });
@@ -467,237 +470,240 @@ };
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: (0, _satellitePrefixer["default"])(_templateObject36 || (_templateObject36 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-4/5"]))),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.ExperimentalForm, {
-      onSubmit: function onSubmit(e) {
-        setRevalidationEnabled(true);
-        formik.handleSubmit(e);
-      },
-      onReset: function onReset(e) {
-        setRevalidationEnabled(false);
-        formik.handleReset(e);
-      },
-      className: (0, _satellitePrefixer["default"])(_templateObject37 || (_templateObject37 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 overflow-hidden"]))),
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormErrorMessage, {
-        locale: {
-          errorText: function errorText(invalidFields) {
-            return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-                className: (0, _satellitePrefixer["default"])(_templateObject38 || (_templateObject38 = (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"])(_templateObject39 || (_templateObject39 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col"]))),
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
-                  href: "#",
-                  className: (0, _satellitePrefixer["default"])(_templateObject40 || (_templateObject40 = (0, _taggedTemplateLiteral2["default"])(["text-black underline hover:text-grey-800"]))),
-                  onClick: function onClick(e) {
-                    e.preventDefault();
-                    var firstInvalid = steps.find(function (step) {
-                      return getFieldState(step).status === "invalid";
-                    });
-                    if (firstInvalid) {
-                      goToPage(steps.indexOf(firstInvalid) + 1);
-                    }
-                  },
-                  children: "Go to first error"
-                })
-              })]
-            });
-          }
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: (0, _satellitePrefixer["default"])(_templateObject41 || (_templateObject41 = (0, _taggedTemplateLiteral2["default"])(["flex transition-transform ease-out duration-500"]))),
-        style: {
-          transform: "translateX(-".concat((page - 1) * 100, "%)")
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _satellitePrefixer["default"])(_templateObject37 || (_templateObject37 = (0, _taggedTemplateLiteral2["default"])(["@container w-full flex justify-center"]))),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _satellitePrefixer["default"])(_templateObject38 || (_templateObject38 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-full @lg:w-4/5"]))),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.Form, {
+        onSubmit: function onSubmit(e) {
+          setRevalidationEnabled(true);
+          formik.handleSubmit(e);
         },
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-          label: /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
-            className: (0, _satellitePrefixer["default"])(_templateObject42 || (_templateObject42 = (0, _taggedTemplateLiteral2["default"])(["display-xlarge whitespace-normal inline"]))),
-            children: "How should we display products that contain multiple variants?"
-          }),
-          labelFor: variantsEnum[0],
-          state: getFieldState("variants"),
-          className: (0, _satellitePrefixer["default"])(_templateObject43 || (_templateObject43 = (0, _taggedTemplateLiteral2["default"])(["w-full shrink-0"]))),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: (0, _satellitePrefixer["default"])(_templateObject44 || (_templateObject44 = (0, _taggedTemplateLiteral2["default"])(["mt-7"]))),
-            children: variantsOptions.map(function (option) {
-              return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-                htmlFor: option.value,
-                className: (0, _satellitePrefixer["default"])(_templateObject45 || (_templateObject45 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-3 p-6 rounded display-body transition-colors hover:bg-grey-100"]))),
+        onReset: function onReset(e) {
+          setRevalidationEnabled(false);
+          formik.handleReset(e);
+        },
+        className: (0, _satellitePrefixer["default"])(_templateObject39 || (_templateObject39 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 overflow-hidden"]))),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormErrorMessage, {
+          locale: {
+            errorText: function errorText(invalidFields) {
+              return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
                 children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-                  className: (0, _satellitePrefixer["default"])(_templateObject46 || (_templateObject46 = (0, _taggedTemplateLiteral2["default"])(["flex items-center gap-2"]))),
-                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioGroup.RadioButton, _objectSpread(_objectSpread({
-                    id: option.value,
-                    "aria-labelledby": option.value,
-                    required: true
-                  }, formik.getFieldProps({
-                    name: "variants",
-                    value: option.value,
-                    type: "radio"
-                  })), {}, {
-                    className: (0, _satellitePrefixer["default"])(_templateObject47 || (_templateObject47 = (0, _taggedTemplateLiteral2["default"])(["shrink-0"])))
-                  })), option.title]
+                  className: (0, _satellitePrefixer["default"])(_templateObject40 || (_templateObject40 = (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"])(_templateObject48 || (_templateObject48 = (0, _taggedTemplateLiteral2["default"])(["ml-6 typo-subdued"]))),
-                  children: option.description
+                  className: (0, _satellitePrefixer["default"])(_templateObject41 || (_templateObject41 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col"]))),
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+                    href: "#",
+                    className: (0, _satellitePrefixer["default"])(_templateObject42 || (_templateObject42 = (0, _taggedTemplateLiteral2["default"])(["text-black underline hover:text-grey-800"]))),
+                    onClick: function onClick(e) {
+                      e.preventDefault();
+                      var firstInvalid = steps.find(function (step) {
+                        return getFieldState(step).status === "invalid";
+                      });
+                      if (firstInvalid) {
+                        goToPage(steps.indexOf(firstInvalid) + 1);
+                      }
+                    },
+                    children: "Go to first error"
+                  })
                 })]
-              }, option.value);
+              });
+            }
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: (0, _satellitePrefixer["default"])(_templateObject43 || (_templateObject43 = (0, _taggedTemplateLiteral2["default"])(["flex transition-transform ease-out duration-500"]))),
+          style: {
+            transform: "translateX(-".concat((page - 1) * 100, "%)")
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+            label: /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+              className: (0, _satellitePrefixer["default"])(_templateObject44 || (_templateObject44 = (0, _taggedTemplateLiteral2["default"])(["display-xlarge whitespace-normal inline"]))),
+              children: "How should we display products that contain multiple variants?"
+            }),
+            labelFor: variantsEnum[0],
+            state: getFieldState("variants"),
+            className: (0, _satellitePrefixer["default"])(_templateObject45 || (_templateObject45 = (0, _taggedTemplateLiteral2["default"])(["w-full shrink-0"]))),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: (0, _satellitePrefixer["default"])(_templateObject46 || (_templateObject46 = (0, _taggedTemplateLiteral2["default"])(["mt-7"]))),
+              children: variantsOptions.map(function (option) {
+                return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+                  htmlFor: option.value,
+                  className: (0, _satellitePrefixer["default"])(_templateObject47 || (_templateObject47 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-3 p-6 rounded display-body transition-colors hover:bg-grey-100"]))),
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                    className: (0, _satellitePrefixer["default"])(_templateObject48 || (_templateObject48 = (0, _taggedTemplateLiteral2["default"])(["flex items-center gap-2"]))),
+                    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioGroup.RadioButton, _objectSpread(_objectSpread({
+                      id: option.value,
+                      "aria-labelledby": option.value,
+                      required: true
+                    }, formik.getFieldProps({
+                      name: "variants",
+                      value: option.value,
+                      type: "radio"
+                    })), {}, {
+                      className: (0, _satellitePrefixer["default"])(_templateObject49 || (_templateObject49 = (0, _taggedTemplateLiteral2["default"])(["shrink-0"])))
+                    })), option.title]
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                    className: (0, _satellitePrefixer["default"])(_templateObject50 || (_templateObject50 = (0, _taggedTemplateLiteral2["default"])(["ml-6 typo-subdued"]))),
+                    children: option.description
+                  })]
+                }, option.value);
+              })
             })
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-          label: /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
-            className: (0, _satellitePrefixer["default"])(_templateObject49 || (_templateObject49 = (0, _taggedTemplateLiteral2["default"])(["display-xlarge whitespace-normal inline"]))),
-            children: "How would you like to show out-of-stock items?"
-          }),
-          labelFor: outOfStockEnum[0],
-          state: getFieldState("outOfStock"),
-          className: (0, _satellitePrefixer["default"])(_templateObject50 || (_templateObject50 = (0, _taggedTemplateLiteral2["default"])(["w-full shrink-0"]))),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: (0, _satellitePrefixer["default"])(_templateObject51 || (_templateObject51 = (0, _taggedTemplateLiteral2["default"])(["mt-7"]))),
-            children: outOfStockOptions.map(function (option) {
-              return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-                htmlFor: option.value,
-                className: (0, _satellitePrefixer["default"])(_templateObject52 || (_templateObject52 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-3 p-6 rounded display-body transition-colors hover:bg-grey-100"]))),
-                children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-                  className: (0, _satellitePrefixer["default"])(_templateObject53 || (_templateObject53 = (0, _taggedTemplateLiteral2["default"])(["flex items-center gap-2"]))),
-                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioGroup.RadioButton, _objectSpread(_objectSpread({
-                    id: option.value,
-                    "aria-labelledby": option.value,
-                    required: true
-                  }, formik.getFieldProps({
-                    name: "outOfStock",
-                    value: option.value,
-                    type: "radio"
-                  })), {}, {
-                    className: (0, _satellitePrefixer["default"])(_templateObject54 || (_templateObject54 = (0, _taggedTemplateLiteral2["default"])(["shrink-0"])))
-                  })), option.title]
-                }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                  className: (0, _satellitePrefixer["default"])(_templateObject55 || (_templateObject55 = (0, _taggedTemplateLiteral2["default"])(["ml-6 typo-subdued"]))),
-                  children: option.description
-                })]
-              }, option.value);
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+            label: /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+              className: (0, _satellitePrefixer["default"])(_templateObject51 || (_templateObject51 = (0, _taggedTemplateLiteral2["default"])(["display-xlarge whitespace-normal inline"]))),
+              children: "How would you like to show out-of-stock items?"
+            }),
+            labelFor: outOfStockEnum[0],
+            state: getFieldState("outOfStock"),
+            className: (0, _satellitePrefixer["default"])(_templateObject52 || (_templateObject52 = (0, _taggedTemplateLiteral2["default"])(["w-full shrink-0"]))),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: (0, _satellitePrefixer["default"])(_templateObject53 || (_templateObject53 = (0, _taggedTemplateLiteral2["default"])(["mt-7"]))),
+              children: outOfStockOptions.map(function (option) {
+                return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+                  htmlFor: option.value,
+                  className: (0, _satellitePrefixer["default"])(_templateObject54 || (_templateObject54 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-3 p-6 rounded display-body transition-colors hover:bg-grey-100"]))),
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                    className: (0, _satellitePrefixer["default"])(_templateObject55 || (_templateObject55 = (0, _taggedTemplateLiteral2["default"])(["flex items-center gap-2"]))),
+                    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioGroup.RadioButton, _objectSpread(_objectSpread({
+                      id: option.value,
+                      "aria-labelledby": option.value,
+                      required: true
+                    }, formik.getFieldProps({
+                      name: "outOfStock",
+                      value: option.value,
+                      type: "radio"
+                    })), {}, {
+                      className: (0, _satellitePrefixer["default"])(_templateObject56 || (_templateObject56 = (0, _taggedTemplateLiteral2["default"])(["shrink-0"])))
+                    })), option.title]
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                    className: (0, _satellitePrefixer["default"])(_templateObject57 || (_templateObject57 = (0, _taggedTemplateLiteral2["default"])(["ml-6 typo-subdued"]))),
+                    children: option.description
+                  })]
+                }, option.value);
+              })
             })
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Field.Field, {
-          label: /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
-            className: (0, _satellitePrefixer["default"])(_templateObject56 || (_templateObject56 = (0, _taggedTemplateLiteral2["default"])(["display-xlarge whitespace-normal inline"]))),
-            children: "Select how your customers can sort their search results"
-          }),
-          labelFor: sortingOptions[0],
-          state: getFieldState("sorting"),
-          className: (0, _satellitePrefixer["default"])(_templateObject57 || (_templateObject57 = (0, _taggedTemplateLiteral2["default"])(["w-full shrink-0"]))),
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: (0, _satellitePrefixer["default"])(_templateObject58 || (_templateObject58 = (0, _taggedTemplateLiteral2["default"])(["mt-4 typo-subdued"]))),
-            children: "Select the sort order options you'd like to show customers. You can change these later."
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: (0, _satellitePrefixer["default"])(_templateObject59 || (_templateObject59 = (0, _taggedTemplateLiteral2["default"])(["mt-7"]))),
-            children: sortingOptions.map(function (option) {
-              return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-                htmlFor: option,
-                className: (0, _satellitePrefixer["default"])(_templateObject60 || (_templateObject60 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2 p-4 rounded display-body transition-colors hover:bg-grey-100"]))),
-                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.Checkbox, _objectSpread(_objectSpread({
-                  id: option,
-                  required: true,
-                  checked: formik.values.sorting.includes(option)
-                }, formik.getFieldProps("sorting")), {}, {
-                  onChange: function onChange() {
-                    var fieldProps = formik.getFieldProps("sorting");
-                    formik.setFieldValue("sorting", fieldProps.value.includes(option) ? fieldProps.value.filter(function (v) {
-                      return v !== option;
-                    }) : [].concat((0, _toConsumableArray2["default"])(fieldProps.value), [option]));
-                  }
-                })), (0, _capitalize["default"])(option)]
-              }, option);
-            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Field.Field, {
+            label: /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+              className: (0, _satellitePrefixer["default"])(_templateObject58 || (_templateObject58 = (0, _taggedTemplateLiteral2["default"])(["display-xlarge whitespace-normal inline"]))),
+              children: "Select how your customers can sort their search results"
+            }),
+            labelFor: sortingOptions[0],
+            state: getFieldState("sorting"),
+            className: (0, _satellitePrefixer["default"])(_templateObject59 || (_templateObject59 = (0, _taggedTemplateLiteral2["default"])(["w-full shrink-0"]))),
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: (0, _satellitePrefixer["default"])(_templateObject60 || (_templateObject60 = (0, _taggedTemplateLiteral2["default"])(["mt-4 typo-subdued"]))),
+              children: "Select the sort order options you'd like to show customers. You can change these later."
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: (0, _satellitePrefixer["default"])(_templateObject61 || (_templateObject61 = (0, _taggedTemplateLiteral2["default"])(["mt-7"]))),
+              children: sortingOptions.map(function (option) {
+                return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+                  htmlFor: option,
+                  className: (0, _satellitePrefixer["default"])(_templateObject62 || (_templateObject62 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2 p-4 rounded display-body transition-colors hover:bg-grey-100"]))),
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.Checkbox, _objectSpread(_objectSpread({
+                    id: option,
+                    required: true,
+                    checked: formik.values.sorting.includes(option)
+                  }, formik.getFieldProps("sorting")), {}, {
+                    onChange: function onChange() {
+                      var fieldProps = formik.getFieldProps("sorting");
+                      formik.setFieldValue("sorting", fieldProps.value.includes(option) ? fieldProps.value.filter(function (v) {
+                        return v !== option;
+                      }) : [].concat((0, _toConsumableArray2["default"])(fieldProps.value), [option]));
+                    }
+                  })), (0, _capitalize["default"])(option)]
+                }, option);
+              })
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Field.Field, {
+            label: /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+              className: (0, _satellitePrefixer["default"])(_templateObject63 || (_templateObject63 = (0, _taggedTemplateLiteral2["default"])(["display-xlarge whitespace-normal inline"]))),
+              children: "Add filters to help narrow results"
+            }),
+            labelFor: filtersOptions[0],
+            state: getFieldState("filters"),
+            className: (0, _satellitePrefixer["default"])(_templateObject64 || (_templateObject64 = (0, _taggedTemplateLiteral2["default"])(["w-full shrink-0"]))),
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: (0, _satellitePrefixer["default"])(_templateObject65 || (_templateObject65 = (0, _taggedTemplateLiteral2["default"])(["mt-4 typo-subdued"]))),
+              children: ["Select the filter options customers can use to refine results.", /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), "You can edit these after setup."]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: (0, _satellitePrefixer["default"])(_templateObject66 || (_templateObject66 = (0, _taggedTemplateLiteral2["default"])(["mt-7"]))),
+              children: filtersOptions.map(function (option) {
+                return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+                  htmlFor: option,
+                  className: (0, _satellitePrefixer["default"])(_templateObject67 || (_templateObject67 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2 p-4 rounded display-body transition-colors hover:bg-grey-100"]))),
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.Checkbox, {
+                    id: option,
+                    required: true,
+                    checked: formik.values.filters.includes(option),
+                    onChange: function onChange() {
+                      var fieldProps = formik.getFieldProps("filters");
+                      formik.setFieldValue("filters", fieldProps.value.includes(option) ? fieldProps.value.filter(function (v) {
+                        return v !== option;
+                      }) : [].concat((0, _toConsumableArray2["default"])(fieldProps.value), [option]));
+                    }
+                  }), (0, _capitalize["default"])(option)]
+                }, option);
+              })
+            })]
           })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Field.Field, {
-          label: /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
-            className: (0, _satellitePrefixer["default"])(_templateObject61 || (_templateObject61 = (0, _taggedTemplateLiteral2["default"])(["display-xlarge whitespace-normal inline"]))),
-            children: "Add filters to help narrow results"
-          }),
-          labelFor: filtersOptions[0],
-          state: getFieldState("filters"),
-          className: (0, _satellitePrefixer["default"])(_templateObject62 || (_templateObject62 = (0, _taggedTemplateLiteral2["default"])(["w-full shrink-0"]))),
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: (0, _satellitePrefixer["default"])(_templateObject68 || (_templateObject68 = (0, _taggedTemplateLiteral2["default"])(["w-full flex justify-between"]))),
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: (0, _satellitePrefixer["default"])(_templateObject63 || (_templateObject63 = (0, _taggedTemplateLiteral2["default"])(["mt-4 typo-subdued"]))),
-            children: ["Select the filter options customers can use to refine results.", /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), "You can edit these after setup."]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: (0, _satellitePrefixer["default"])(_templateObject64 || (_templateObject64 = (0, _taggedTemplateLiteral2["default"])(["mt-7"]))),
-            children: filtersOptions.map(function (option) {
-              return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-                htmlFor: option,
-                className: (0, _satellitePrefixer["default"])(_templateObject65 || (_templateObject65 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2 p-4 rounded display-body transition-colors hover:bg-grey-100"]))),
-                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.Checkbox, {
-                  id: option,
-                  required: true,
-                  checked: formik.values.filters.includes(option),
-                  onChange: function onChange() {
-                    var fieldProps = formik.getFieldProps("filters");
-                    formik.setFieldValue("filters", fieldProps.value.includes(option) ? fieldProps.value.filter(function (v) {
-                      return v !== option;
-                    }) : [].concat((0, _toConsumableArray2["default"])(fieldProps.value), [option]));
+            className: (0, _satellitePrefixer["default"])(_templateObject69 || (_templateObject69 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
+              "aria-label": "Previous step",
+              disabled: page <= 1,
+              onClick: function onClick() {
+                return goToPreviousPage();
+              },
+              children: "Back"
+            }), page >= steps.length ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormSubmit, {
+              variant: "primary",
+              "aria-label": "Complete",
+              children: "Complete"
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
+              variant: "primary",
+              "aria-label": "Next step",
+              onClick: /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+                return _regenerator["default"].wrap(function _callee2$(_context2) {
+                  while (1) switch (_context2.prev = _context2.next) {
+                    case 0:
+                      _context2.next = 2;
+                      return formik.validateField(steps[page - 1]);
+                    case 2:
+                      setNextPageClicked(true); // See workaround above
+                    case 3:
+                    case "end":
+                      return _context2.stop();
                   }
-                }), (0, _capitalize["default"])(option)]
-              }, option);
-            })
-          })]
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: (0, _satellitePrefixer["default"])(_templateObject66 || (_templateObject66 = (0, _taggedTemplateLiteral2["default"])(["w-full flex justify-between"]))),
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: (0, _satellitePrefixer["default"])(_templateObject67 || (_templateObject67 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
-            "aria-label": "Previous step",
-            disabled: page <= 1,
+                }, _callee2);
+              })),
+              children: "Next"
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
+            variant: "subtle",
+            "aria-label": "Reset the form",
             onClick: function onClick() {
-              return goToPreviousPage();
+              formik.resetForm();
+              goToPage(1);
             },
-            children: "Back"
-          }), page >= steps.length ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormSubmit, {
-            variant: "primary",
-            "aria-label": "Complete",
-            children: "Complete"
-          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
-            variant: "primary",
-            "aria-label": "Next step",
-            onClick: /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
-              return _regenerator["default"].wrap(function _callee2$(_context2) {
-                while (1) switch (_context2.prev = _context2.next) {
-                  case 0:
-                    _context2.next = 2;
-                    return formik.validateField(steps[page - 1]);
-                  case 2:
-                    setNextPageClicked(true); // See workaround above
-                  case 3:
-                  case "end":
-                    return _context2.stop();
-                }
-              }, _callee2);
-            })),
-            children: "Next"
+            children: "Reset"
           })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
-          variant: "subtle",
-          "aria-label": "Reset the form",
-          onClick: function onClick() {
-            formik.resetForm();
-            goToPage(1);
-          },
-          children: "Reset"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: (0, _satellitePrefixer["default"])(_templateObject70 || (_templateObject70 = (0, _taggedTemplateLiteral2["default"])(["mt-8 mx-auto"]))),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DotPagination.DotPagination, {
+            nbPages: steps.length,
+            currentPage: page,
+            onChange: goToPage,
+            size: "small"
+          })
         })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: (0, _satellitePrefixer["default"])(_templateObject68 || (_templateObject68 = (0, _taggedTemplateLiteral2["default"])(["mt-8 mx-auto"]))),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DotPagination.DotPagination, {
-          nbPages: steps.length,
-          currentPage: page,
-          onChange: goToPage,
-          size: "small"
-        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
+        className: (0, _satellitePrefixer["default"])(_templateObject71 || (_templateObject71 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
+        className: (0, _satellitePrefixer["default"])(_templateObject72 || (_templateObject72 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
+        children: JSON.stringify(formData, null, 2)
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
-      className: (0, _satellitePrefixer["default"])(_templateObject69 || (_templateObject69 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
-      className: (0, _satellitePrefixer["default"])(_templateObject70 || (_templateObject70 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
-      children: JSON.stringify(formData, null, 2)
-    })]
+    })
   });
 };

dist/cjs/Fields/Form/stories/ValidationStrategies.js

@@ -27,3 +27,3 @@ "use strict";
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
 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); }
@@ -140,112 +140,57 @@ 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; }
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-5/6"]))),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.ExperimentalForm, {
-      onSubmit: handleSubmit(function (data) {
-        return setFormData(data);
-      }),
-      onReset: function onReset() {
-        return setFormData(initialFormData);
-      },
-      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
-        name: "cardOwner",
-        control: control,
-        render: function render(_ref) {
-          var field = _ref.field;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-            label: "Card Owner",
-            labelFor: "cardOwner",
-            description: "Please enter the card owner",
-            state: getFieldState("cardOwner"),
-            className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
-              id: "cardOwner",
-              placeholder: "John Doe",
-              required: true
-            }, field))
-          });
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
-        name: "cardNumber",
-        control: control,
-        render: function render(_ref2) {
-          var field = _ref2.field;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-            label: "Card Number",
-            labelFor: "cardNumber",
-            description: "Please enter the card number",
-            state: getFieldState("cardNumber"),
-            className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread(_objectSpread({
-              id: "cardNumber",
-              placeholder: "Card number",
-              maxLength: 16 + 3 // 3 spaces
-              ,
-              startIcon: _Icons.CreditCardIcon,
-              required: true
-            }, field), {}, {
-              onChange: function onChange(e) {
-                e.target.value = formatInputValue(e, 4, " ");
-                field.onChange(e);
-                if (e.target.value.length === 19) {
-                  trigger("cardNumber");
-                }
-              }
-            }))
-          });
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["w-full flex gap-4"]))),
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
-          name: "cardExpirationDate",
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["@container w-full flex justify-center"]))),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-full @lg:w-1/2"]))),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.Form, {
+        onSubmit: handleSubmit(function (data) {
+          return setFormData(data);
+        }),
+        onReset: function onReset() {
+          return setFormData(initialFormData);
+        },
+        className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+          name: "cardOwner",
           control: control,
-          render: function render(_ref3) {
-            var field = _ref3.field;
+          render: function render(_ref) {
+            var field = _ref.field;
             return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-              label: "Card Expiration Date",
-              labelFor: "cardExpirationDate",
-              description: "Please enter the card expiration date",
-              state: getFieldState("cardExpirationDate"),
-              className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread(_objectSpread({
-                id: "cardExpirationDate",
-                placeholder: "MM/YY",
-                maxLength: 4 + 1 // 1 slash
-                ,
-                startIcon: _Icons.CalendarIcon,
+              label: "Card Owner",
+              labelFor: "cardOwner",
+              description: "Please enter the card owner",
+              state: getFieldState("cardOwner"),
+              className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
+                id: "cardOwner",
+                placeholder: "John Doe",
                 required: true
-              }, field), {}, {
-                onChange: function onChange(e) {
-                  e.target.value = formatInputValue(e, 2, "/");
-                  field.onChange(e);
-                },
-                onBlur: function onBlur() {
-                  trigger("cardExpirationDate");
-                  field.onBlur();
-                }
-              }))
+              }, field))
             });
           }
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
-          name: "cardCVC",
+          name: "cardNumber",
           control: control,
-          render: function render(_ref4) {
-            var field = _ref4.field;
+          render: function render(_ref2) {
+            var field = _ref2.field;
             return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-              label: "Card CVC",
-              labelFor: "cardCVC",
-              description: "Please enter the card security code",
-              state: getFieldState("cardCVC"),
-              className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+              label: "Card Number",
+              labelFor: "cardNumber",
+              description: "Please enter the card number",
+              state: getFieldState("cardNumber"),
+              className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread(_objectSpread({
-                id: "cardCVC",
-                placeholder: "CVC",
-                maxLength: 4,
-                startIcon: _Icons.LockIcon,
+                id: "cardNumber",
+                placeholder: "Card number",
+                maxLength: 16 + 3 // 3 spaces
+                ,
+                startIcon: _Icons.CreditCardIcon,
                 required: true
               }, field), {}, {
-                onBlur: function onBlur() {
-                  trigger("cardCVC");
-                  field.onBlur();
+                onChange: function onChange(e) {
+                  e.target.value = formatInputValue(e, 4, " ");
+                  field.onChange(e);
+                  if (e.target.value.length === 19) {
+                    trigger("cardNumber");
+                  }
                 }
@@ -255,23 +200,81 @@ }))
           }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["w-full flex gap-4 flex-col @xl:flex-row"]))),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+            name: "cardExpirationDate",
+            control: control,
+            render: function render(_ref3) {
+              var field = _ref3.field;
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+                label: "Card Expiration Date",
+                labelFor: "cardExpirationDate",
+                description: "Please enter the card expiration date",
+                state: getFieldState("cardExpirationDate"),
+                className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread(_objectSpread({
+                  id: "cardExpirationDate",
+                  placeholder: "MM/YY",
+                  maxLength: 4 + 1 // 1 slash
+                  ,
+                  startIcon: _Icons.CalendarIcon,
+                  required: true
+                }, field), {}, {
+                  onChange: function onChange(e) {
+                    e.target.value = formatInputValue(e, 2, "/");
+                    field.onChange(e);
+                  },
+                  onBlur: function onBlur() {
+                    trigger("cardExpirationDate");
+                    field.onBlur();
+                  }
+                }))
+              });
+            }
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+            name: "cardCVC",
+            control: control,
+            render: function render(_ref4) {
+              var field = _ref4.field;
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+                label: "Card CVC",
+                labelFor: "cardCVC",
+                description: "Please enter the card security code",
+                state: getFieldState("cardCVC"),
+                className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread(_objectSpread({
+                  id: "cardCVC",
+                  placeholder: "CVC",
+                  maxLength: 4,
+                  startIcon: _Icons.LockIcon,
+                  required: true
+                }, field), {}, {
+                  onBlur: function onBlur() {
+                    trigger("cardCVC");
+                    field.onBlur();
+                  }
+                }))
+              });
+            }
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormSubmit, {
+            variant: "primary",
+            "aria-label": "Save the form",
+            children: "Save"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormReset, {
+            "aria-label": "Reset the form",
+            onClick: function onClick() {
+              return reset();
+            },
+            children: "Reset"
+          })]
         })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormSubmit, {
-          variant: "primary",
-          "aria-label": "Save the form",
-          children: "Save"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormReset, {
-          "aria-label": "Reset the form",
-          onClick: function onClick() {
-            return reset();
-          },
-          children: "Reset"
-        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
+        className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
+        className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
+        children: JSON.stringify(formData, null, 2)
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
-      className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
-      className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
-      children: JSON.stringify(formData, null, 2)
-    })]
+    })
   });
@@ -332,128 +335,131 @@ };
   (0, _useFormikAutoFocusOnError.useFormikAutoFocusOnError)(formik);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-5/6"]))),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.ExperimentalForm, {
-      onSubmit: function onSubmit(e) {
-        setRevalidationEnabled(true);
-        formik.handleSubmit(e);
-      },
-      onReset: function onReset(e) {
-        setRevalidationEnabled(false);
-        formik.handleReset(e);
-      },
-      className: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-        label: "Card Owner",
-        labelFor: "cardOwner",
-        description: "Please enter the card owner",
-        state: getFieldState("cardOwner"),
-        className: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
-          id: "cardOwner",
-          placeholder: "John Doe",
-          required: true
-        }, formik.getFieldProps("cardOwner")))
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-        label: "Card Number",
-        labelFor: "cardNumber",
-        description: "Please enter the card number",
-        state: getFieldState("cardNumber"),
-        className: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread(_objectSpread({
-          id: "cardNumber",
-          placeholder: "Card number",
-          maxLength: 16 + 3 // 3 spaces
-          ,
-          startIcon: _Icons.CreditCardIcon,
-          required: true
-        }, formik.getFieldProps("cardNumber")), {}, {
-          onChange: ( /*#__PURE__*/function () {
-            var _ref5 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(e) {
-              var value;
-              return _regenerator["default"].wrap(function _callee$(_context) {
-                while (1) switch (_context.prev = _context.next) {
-                  case 0:
-                    value = formatInputValue(e, 4, " ");
-                    _context.next = 3;
-                    return formik.setFieldValue("cardNumber", value);
-                  case 3:
-                    if (value.length === 19) {
-                      formik.validateField("cardNumber");
-                    }
-                  case 4:
-                  case "end":
-                    return _context.stop();
-                }
-              }, _callee);
-            }));
-            return function (_x) {
-              return _ref5.apply(this, arguments);
-            };
-          }())
-        }))
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["w-full flex gap-4"]))),
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-          label: "Card Expiration Date",
-          labelFor: "cardExpirationDate",
-          description: "Please enter the card expiration date",
-          state: getFieldState("cardExpirationDate"),
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["@container w-full flex justify-center"]))),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-full @lg:w-1/2"]))),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.Form, {
+        onSubmit: function onSubmit(e) {
+          setRevalidationEnabled(true);
+          formik.handleSubmit(e);
+        },
+        onReset: function onReset(e) {
+          setRevalidationEnabled(false);
+          formik.handleReset(e);
+        },
+        className: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+          label: "Card Owner",
+          labelFor: "cardOwner",
+          description: "Please enter the card owner",
+          state: getFieldState("cardOwner"),
+          className: (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
+            id: "cardOwner",
+            placeholder: "John Doe",
+            required: true
+          }, formik.getFieldProps("cardOwner")))
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+          label: "Card Number",
+          labelFor: "cardNumber",
+          description: "Please enter the card number",
+          state: getFieldState("cardNumber"),
           className: (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread(_objectSpread({
-            id: "cardExpirationDate",
-            placeholder: "MM/YY",
-            maxLength: 4 + 1 // 1 slash
+            id: "cardNumber",
+            placeholder: "Card number",
+            maxLength: 16 + 3 // 3 spaces
             ,
-            startIcon: _Icons.CalendarIcon,
+            startIcon: _Icons.CreditCardIcon,
             required: true
-          }, formik.getFieldProps("cardExpirationDate")), {}, {
-            onChange: function onChange(e) {
-              e.target.value = formatInputValue(e, 2, "/");
-              formik.getFieldProps("cardExpirationDate").onChange(e);
+          }, formik.getFieldProps("cardNumber")), {}, {
+            onChange: ( /*#__PURE__*/function () {
+              var _ref5 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(e) {
+                var value;
+                return _regenerator["default"].wrap(function _callee$(_context) {
+                  while (1) switch (_context.prev = _context.next) {
+                    case 0:
+                      value = formatInputValue(e, 4, " ");
+                      _context.next = 3;
+                      return formik.setFieldValue("cardNumber", value);
+                    case 3:
+                      if (value.length === 19) {
+                        formik.validateField("cardNumber");
+                      }
+                    case 4:
+                    case "end":
+                      return _context.stop();
+                  }
+                }, _callee);
+              }));
+              return function (_x) {
+                return _ref5.apply(this, arguments);
+              };
+            }())
+          }))
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["w-full flex gap-4 flex-col @xl:flex-row"]))),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+            label: "Card Expiration Date",
+            labelFor: "cardExpirationDate",
+            description: "Please enter the card expiration date",
+            state: getFieldState("cardExpirationDate"),
+            className: (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread(_objectSpread({
+              id: "cardExpirationDate",
+              placeholder: "MM/YY",
+              maxLength: 4 + 1 // 1 slash
+              ,
+              startIcon: _Icons.CalendarIcon,
+              required: true
+            }, formik.getFieldProps("cardExpirationDate")), {}, {
+              onChange: function onChange(e) {
+                e.target.value = formatInputValue(e, 2, "/");
+                formik.getFieldProps("cardExpirationDate").onChange(e);
+              },
+              onBlur: function onBlur(e) {
+                formik.validateField("cardExpirationDate");
+                formik.getFieldProps("cardExpirationDate").onBlur(e);
+              }
+            }))
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+            label: "Card CVC",
+            labelFor: "cardCVC",
+            description: "Please enter the card security code",
+            state: getFieldState("cardCVC"),
+            className: (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread(_objectSpread({
+              id: "cardCVC",
+              placeholder: "CVC",
+              maxLength: 4,
+              startIcon: _Icons.LockIcon,
+              required: true
+            }, formik.getFieldProps("cardCVC")), {}, {
+              onBlur: function onBlur(e) {
+                formik.validateField("cardCVC");
+                formik.getFieldProps("cardCVC").onBlur(e);
+              }
+            }))
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormSubmit, {
+            variant: "primary",
+            "aria-label": "Save the form",
+            children: "Save"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormReset, {
+            "aria-label": "Reset the form",
+            onClick: function onClick() {
+              return formik.resetForm();
             },
-            onBlur: function onBlur(e) {
-              formik.validateField("cardExpirationDate");
-              formik.getFieldProps("cardExpirationDate").onBlur(e);
-            }
-          }))
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
-          label: "Card CVC",
-          labelFor: "cardCVC",
-          description: "Please enter the card security code",
-          state: getFieldState("cardCVC"),
-          className: (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread(_objectSpread({
-            id: "cardCVC",
-            placeholder: "CVC",
-            maxLength: 4,
-            startIcon: _Icons.LockIcon,
-            required: true
-          }, formik.getFieldProps("cardCVC")), {}, {
-            onBlur: function onBlur(e) {
-              formik.validateField("cardCVC");
-              formik.getFieldProps("cardCVC").onBlur(e);
-            }
-          }))
+            children: "Reset"
+          })]
         })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormSubmit, {
-          variant: "primary",
-          "aria-label": "Save the form",
-          children: "Save"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormReset, {
-          "aria-label": "Reset the form",
-          onClick: function onClick() {
-            return formik.resetForm();
-          },
-          children: "Reset"
-        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
+        className: (0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
+        className: (0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
+        children: JSON.stringify(formData, null, 2)
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
-      className: (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
-      className: (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
-      children: JSON.stringify(formData, null, 2)
-    })]
+    })
   });
 };

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

@@ -1,1 +0,1 @@
-export declare const useExperimentalForm: () => import("./FormContext").ExperimentalFormContextValue | null;
+export declare const useForm: () => import("./FormContext").FormContextValue | null;

dist/cjs/Fields/Form/useForm.js

@@ -6,7 +6,7 @@ "use strict";
 });
-exports.useExperimentalForm = void 0;
+exports.useForm = void 0;
 var _react = require("react");
 var _FormContext = require("./FormContext");
-var useExperimentalForm = exports.useExperimentalForm = function useExperimentalForm() {
-  return (0, _react.useContext)(_FormContext.ExperimentalFormContext);
+var useForm = exports.useForm = function useForm() {
+  return (0, _react.useContext)(_FormContext.FormContext);
 };

dist/cjs/Helpers/utilities/focusable.tailwind.js

@@ -10,3 +10,3 @@ "use strict";
     theme = _ref.theme;
-  addComponents((0, _defineProperty2["default"])({}, ".focusable:focus,\n    .focusable-within:focus-within,\n    .focusable-visible:focus-visible,\n    .focusable-visible-within:has(:focus-visible),\n    input:focus ~ .focusable-sibling,\n    .focusable-show", {
+  addComponents((0, _defineProperty2["default"])({}, ".focusable:focus,\n    .focusable-within:focus-within,\n    .focusable-visible:focus-visible,\n    .focusable-visible-within:has(:focus-visible),\n    input:focus ~ .focusable-sibling,\n    .focusable-visible-group:focus-visible .focusable-visible-group-item,\n    .focusable-show", {
     outline: "2px solid ".concat(theme("colors.accent.600")),
@@ -13,0 +13,0 @@ outlineOffset: "1px"

dist/cjs/Indicators/Skeleton/Skeleton.d.ts

 import type { FC } from "react";
 export interface SkeletonProps {
     className?: string;
+    size?: keyof typeof DEFAULT_SKELETON_SIZES;
     circle?: boolean;
     image?: boolean;
 }
+declare const DEFAULT_SKELETON_SIZES: {
+    sm: string;
+    md: string;
+    lg: string;
+};
 /**
@@ -13,1 +19,2 @@ * The `Skeleton` component is used to display a placeholder during loading.
 export declare const Skeleton: FC<SkeletonProps>;
+export {};

dist/cjs/Indicators/Skeleton/Skeleton.js

@@ -9,4 +9,4 @@ "use strict";
 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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _clsx = _interopRequireDefault(require("clsx"));
@@ -16,6 +16,12 @@ var _Icons = require("../../Icons");
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2;
-var _excluded = ["circle", "image", "className"];
+var _excluded = ["circle", "image", "className", "size"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 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_SKELETON_SIZES = {
+  sm: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["w-full h-8"]))),
+  md: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["w-full h-16"]))),
+  lg: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["w-full h-32"])))
+};
+
 /**
@@ -33,10 +39,11 @@ * The `Skeleton` component is used to display a placeholder during loading.
     className = _ref.className,
+    size = _ref.size,
     props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, props), {}, {
     "aria-hidden": true,
-    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex animate-pulse bg-grey-200/80 ", ""])), circle ? "rounded-full aspect-square max-w-fit" : "rounded"), className),
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["flex animate-pulse bg-grey-200/80 ", ""])), circle ? "rounded-full aspect-square max-w-fit" : "rounded"), size && DEFAULT_SKELETON_SIZES[size], className),
     children: image ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.ImageIcon, {
-      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["mx-auto self-center text-grey-300/50 w-[40%] h-[40%] max-w-[32px] max-h-[32px]"])))
+      className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["mx-auto self-center text-grey-300/50 w-[40%] h-[40%] max-w-[32px] max-h-[32px]"])))
     }) : null
   }));
 };

dist/cjs/Layout/Sidebar/SidebarButtonLink.js

@@ -69,3 +69,3 @@ "use strict";
       },
-      className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n          h-8 min-w-8 w-full rounded\n          flex items-center space-x-3\n          border border-transparent\n          display-body\n          hover:no-underline focus:no-underline\n          ", "\n          ", "\n          ", "\n          ", "\n        "])), disabled ? "cursor-not-allowed opacity-70" : "focus:border-grey-500", isActive ? "shadow-z100" : !disabled && "hover:border-grey-200", isActive && "bg-gradient-to-b from-white to-grey-50", collapsed ? "pl-2" : "px-2"),
+      className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n          h-8 min-w-8 w-full rounded\n          flex items-center space-x-3\n          border border-transparent\n          display-body\n          hover:no-underline focus:no-underline\n          ", "\n          ", "\n          ", "\n          ", "\n        "])), disabled ? "cursor-not-allowed opacity-70" : "focusable-visible", isActive ? "shadow-z100" : !disabled && "hover:border-grey-200", isActive && "bg-gradient-to-b from-white to-grey-50", collapsed ? "pl-2" : "px-2"),
       "aria-current": isActive,
@@ -72,0 +72,0 @@ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {

dist/cjs/Layout/Sidebar/SidebarLink.js

@@ -33,3 +33,3 @@ "use strict";
     id: id,
-    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n          flex items-center overflow-hidden w-full\n          group hover:no-underline focus:outline-none\n          ", "\n        "])), disabled ? "cursor-not-allowed" : "cursor-pointer"), className),
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n          flex items-center w-full\n          group focusable-visible-group hover:no-underline focus:outline-none\n          ", "\n        "])), disabled ? "cursor-not-allowed" : "cursor-pointer"), className),
     "aria-current": isActive,
@@ -41,3 +41,3 @@ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-      className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n          flex-1 inline-flex items-center overflow-hidden\n          ", ""])), disabled ? "text-grey-300" : isActive ? "font-semibold text-accent-600" : "typo-subdued group-focus:text-accent-600 group-hover:text-accent-600"),
+      className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n          flex-1 inline-flex items-center overflow-hidden\n          ", ""])), disabled ? "text-grey-300" : isActive ? "font-semibold text-accent-600" : "typo-subdued focusable-visible-group-item group-hover:text-accent-600"),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
@@ -44,0 +44,0 @@ className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["truncate"]))),

dist/cjs/Layout/Sidebar/SidebarLinksGroup/SidebarGroupLink.js

@@ -26,3 +26,3 @@ "use strict";
     id: id,
-    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n        inline-flex w-full items-center hover:no-underline focus:outline-none leading-md\n        ", "\n        ", ""])), disabled ? "cursor-not-allowed" : "cursor-pointer", disabled ? "text-grey-300" : active ? "font-semibold text-accent-600" : "typo-subdued hover:text-accent-600 focus:text-accent-600"),
+    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n        inline-flex w-full items-center hover:no-underline leading-md\n        ", "\n        ", ""])), disabled ? "cursor-not-allowed" : "cursor-pointer focusable-visible", disabled ? "text-grey-300" : active ? "font-semibold text-accent-600" : "typo-subdued hover:text-accent-600"),
     "aria-current": active,
@@ -29,0 +29,0 @@ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {

dist/cjs/Layout/Sidebar/SidebarLinksGroup/SidebarLinksGroup.js

@@ -20,3 +20,3 @@ "use strict";
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -62,3 +62,3 @@ 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; }
       type: "button",
-      className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n          flex w-full text-left items-center mb-4 overflow-hidden focus:outline-none group cursor-pointer"]))),
+      className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n          flex w-full text-left items-center mb-4 focus:outline-none group focusable-visible-group cursor-pointer"]))),
       onClick: function onClick() {
@@ -74,3 +74,3 @@ return setIsOpen(!isOpen);
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["truncate display-subheading uppercase text-grey-800 group-focus:text-accent-500 group-hover:text-accent-500 mr-2"]))),
+        className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["truncate display-subheading uppercase text-grey-800 focusable-visible-group-item group-hover:text-accent-500 mr-2"]))),
         children: props.title
@@ -89,6 +89,5 @@ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.ChevronRightIcon, {
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
-        className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["flex-1 space-y-2 overflow-hidden"]))),
+        className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["flex-1 space-y-2 min-w-0"]))),
         children: links.map(function (link, idx) {
           return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
-            className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["overflow-hidden"]))),
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SidebarGroupLink.SidebarGroupLink, _objectSpread(_objectSpread({}, link), {}, {
@@ -95,0 +94,0 @@ active: activeLinkIndex === idx

dist/cjs/Layout/Tables/DataTable/DataTable.d.ts

 import type { ReactNode } from "react";
+import { type DisplayMode } from "../Table";
 import type { ColumnDefinition, DataConfiguration, GetItemId, PaginationConfiguration, Row, SelectMode, Sorting, Status } from "./types";
@@ -24,2 +25,3 @@ declare type CanSelectItem<Item> = (item: Item, idx: number) => boolean;
     onChange?(dataConfiguration: DataConfiguration): void;
+    mode?: DisplayMode;
     /** Specify the global status of the table */
@@ -55,3 +57,3 @@ status?: Status;
  */
-export declare const DataTable: <Item extends {}>({ data, itemId, columns, onChange, status, noDataContent, errorContent, sorting, sortMode, pagination, selectMode, selection, onSelectionChange, canSelectItem, canHoverRow, onRowHoveredChanged, locale, }: DataTableProps<Item>) => import("react/jsx-runtime").JSX.Element;
+export declare const DataTable: <Item extends {}>({ data, itemId, columns, onChange, mode, status, noDataContent, errorContent, sorting, sortMode, pagination, selectMode, selection, onSelectionChange, canSelectItem, canHoverRow, onRowHoveredChanged, locale, }: DataTableProps<Item>) => import("react/jsx-runtime").JSX.Element;
 export {};

dist/cjs/Layout/Tables/DataTable/DataTable.js

@@ -55,2 +55,4 @@ "use strict";
     onChange = _ref.onChange,
+    _ref$mode = _ref.mode,
+    mode = _ref$mode === void 0 ? "comfortable" : _ref$mode,
     _ref$status = _ref.status,
@@ -224,2 +226,3 @@ status = _ref$status === void 0 ? "success" : _ref$status,
       className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["datatable ", " ", ""])), status === "loading" && "pointer-events-none select-none", status === "loading" && data.length === 0 && "h-48"),
+      mode: mode,
       highlight: false,
@@ -226,0 +229,0 @@ footer: shouldRenderPagination() && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Footer.DataTableFooter, {

dist/cjs/Layout/Tables/Table/Table.d.ts

 import type { DetailedHTMLProps, ReactNode, TableHTMLAttributes, VFC } from "react";
+export declare type DisplayMode = "comfortable" | "compact";
 export interface TableProps extends DetailedHTMLProps<TableHTMLAttributes<HTMLTableElement>, HTMLTableElement> {
@@ -7,2 +8,3 @@ footer?: ReactNode;
     highlight?: boolean;
+    mode?: DisplayMode;
 }
@@ -9,0 +11,0 @@ /**

dist/cjs/Layout/Tables/Table/Table.js

@@ -16,3 +16,3 @@ "use strict";
 var _templateObject, _templateObject2, _templateObject3;
-var _excluded = ["className", "footer", "smallFooter", "hasActions", "highlight"];
+var _excluded = ["className", "footer", "smallFooter", "hasActions", "highlight", "mode"];
 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; }
@@ -33,2 +33,4 @@ 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; }
     highlight = _ref$highlight === void 0 ? true : _ref$highlight,
+    _ref$mode = _ref.mode,
+    mode = _ref$mode === void 0 ? "comfortable" : _ref$mode,
     props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
@@ -40,3 +42,3 @@ return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("table", _objectSpread(_objectSpread({}, props), {}, {
-        className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["table ", " ", ""])), hasActions && "table-with-actions", highlight && "table-with-highlight")
+        className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["table ", " ", " ", ""])), mode === "compact" && "table-compact", hasActions && "table-with-actions", highlight && "table-with-highlight")
       }))
@@ -43,0 +45,0 @@ }), !!footer && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TableFooter.TableFooter, {

dist/cjs/Layout/Tables/Table/Table.tailwind.js

@@ -14,3 +14,3 @@ "use strict";
       "th, td": {
-        padding: "14px 16px"
+        padding: "12px 16px"
       },
@@ -28,2 +28,7 @@ thead: {
     },
+    ".table-compact": {
+      "th, td": {
+        padding: "10px 16px"
+      }
+    },
     ".table-with-actions": {
@@ -30,0 +35,0 @@ "th:last-of-type, td:last-of-type": {

dist/cjs/Overlay/MenuButton/components/items/LinkItem.d.ts

@@ -1,3 +0,3 @@
-import type { IconComponentType } from "Icons";
 import type { FC } from "react";
+import type { IconComponentType } from "../../../../Icons";
 import type { BaseItemProps } from "../../useMenuItemProps";
@@ -4,0 +4,0 @@ declare type LinkItemNavigationType = "auto" | "reload" | "newTab";

dist/cjs/Overlay/MenuButton/components/items/ToggleItem.d.ts

 import type { DropdownMenuCheckboxItemProps } from "@radix-ui/react-dropdown-menu";
-import type { IconComponentType } from "Icons";
 import type { FC } from "react";
+import type { IconComponentType } from "../../../../Icons";
 export interface ToggleItemProps extends Omit<DropdownMenuCheckboxItemProps, "asChild"> {
@@ -5,0 +5,0 @@ startIcon?: IconComponentType;

dist/cjs/styles/tailwind.config.js

@@ -144,3 +144,3 @@ "use strict";
   },
-  plugins: [require("@tailwindcss/container-queries"), require("./base.tailwind"), require("../Helpers/utilities/overlay.tailwind"), require("../Helpers/utilities/utilities.tailwind"), require("../Helpers/utilities/focusable.tailwind"), require("../Typography/Typography.tailwind"), require("../Layout/FlexGrid/FlexGrid.tailwind"), require("../Fields/AutoComplete/AutoComplete.tailwind"), require("../Actions/Button/Button.tailwind"), require("../Actions/ToggleGroup/ToggleGroup.tailwind"), require("../Layout/Card/Card.tailwind"), require("../Fields/Checkbox/Checkbox.tailwind"), require("../Indicators/EmptyState/EmptyState.tailwind"), require("../Indicators/Toast/Toast.tailwind"), require("../Helpers/HelpUnderline/HelpUnderline.tailwind"), require("../Fields/Input/Input.tailwind"), require("../Helpers/InstantSearch/InstantSearch.tailwind"), require("../Indicators/KeyboardKey/KeyboardKey.tailwind"), require("../Helpers/Medallion/Medallion.tailwind"), require("../Overlay/Modal/Modal.tailwind"), require("../Indicators/ProgressBar/ProgressBar.tailwind"), require("../Indicators/ProgressSpinner/ProgressSpinner.tailwind"), require("../Fields/RadioGroup/RadioButton.tailwind"), require("../Indicators/ScrollIndicator/ScrollIndicator.tailwind"), require("../Fields/Select/Select.tailwind"), require("../Helpers/Separator/Separator.tailwind"), require("../Actions/Switch/Switch.tailwind"), require("../Navigation/Tabs/Tabs.tailwind"), require("../Layout/Tables/DataTable/DataTable.tailwind"), require("../Layout/Tables/Table/Table.tailwind"), require("../Indicators/Tag/Tag.tailwind"), require("../Fields/TextArea/TextArea.tailwind"), require("../Fields/Toggle/Toggle.tailwind"), require("../Overlay/Tooltip/Tooltip.tailwind"), require("../Helpers/UserContent/UserContent.tailwind"), require("../Fields/DatePicker/DatePicker.tailwind")]
+  plugins: [require("@tailwindcss/container-queries"), require("./base.tailwind"), require("../Helpers/utilities/overlay.tailwind"), require("../Helpers/utilities/utilities.tailwind"), require("../Helpers/utilities/focusable.tailwind"), require("../Typography/Typography.tailwind"), require("../Layout/FlexGrid/FlexGrid.tailwind"), require("../Fields/AutoComplete/AutoComplete.tailwind"), require("../Actions/Button/Button.tailwind"), require("../Actions/ToggleGroup/ToggleGroup.tailwind"), require("../Actions/Accordion/Accordion.tailwind"), require("../Layout/Card/Card.tailwind"), require("../Fields/Checkbox/Checkbox.tailwind"), require("../Indicators/EmptyState/EmptyState.tailwind"), require("../Indicators/Toast/Toast.tailwind"), require("../Helpers/HelpUnderline/HelpUnderline.tailwind"), require("../Fields/Input/Input.tailwind"), require("../Helpers/InstantSearch/InstantSearch.tailwind"), require("../Indicators/KeyboardKey/KeyboardKey.tailwind"), require("../Helpers/Medallion/Medallion.tailwind"), require("../Overlay/Modal/Modal.tailwind"), require("../Indicators/ProgressBar/ProgressBar.tailwind"), require("../Indicators/ProgressSpinner/ProgressSpinner.tailwind"), require("../Fields/RadioGroup/RadioButton.tailwind"), require("../Indicators/ScrollIndicator/ScrollIndicator.tailwind"), require("../Fields/Select/Select.tailwind"), require("../Helpers/Separator/Separator.tailwind"), require("../Actions/Switch/Switch.tailwind"), require("../Navigation/Tabs/Tabs.tailwind"), require("../Layout/Tables/DataTable/DataTable.tailwind"), require("../Layout/Tables/Table/Table.tailwind"), require("../Indicators/Tag/Tag.tailwind"), require("../Fields/TextArea/TextArea.tailwind"), require("../Fields/Toggle/Toggle.tailwind"), require("../Overlay/Tooltip/Tooltip.tailwind"), require("../Helpers/UserContent/UserContent.tailwind"), require("../Fields/DatePicker/DatePicker.tailwind")]
 };

dist/cjs/utils/isCssPropertySupported.d.ts

@@ -1,1 +0,1 @@
-export declare const isCssPropertySupported: <P extends number | typeof Symbol.iterator | "filter" | "fill" | "clipPath" | "marker" | "mask" | "grid" | "fontSize" | "translate" | "content" | "color" | "width" | "height" | "direction" | "alignmentBaseline" | "baselineShift" | "clip" | "clipRule" | "colorInterpolation" | "colorInterpolationFilters" | "cursor" | "display" | "dominantBaseline" | "fillOpacity" | "fillRule" | "floodColor" | "floodOpacity" | "fontFamily" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontVariant" | "fontWeight" | "imageRendering" | "letterSpacing" | "lightingColor" | "markerEnd" | "markerMid" | "markerStart" | "offset" | "opacity" | "order" | "overflow" | "paintOrder" | "pointerEvents" | "rotate" | "scale" | "shapeRendering" | "stopColor" | "stopOpacity" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "textAnchor" | "textDecoration" | "textRendering" | "transform" | "unicodeBidi" | "visibility" | "wordSpacing" | "writingMode" | "left" | "right" | "top" | "bottom" | "all" | "columns" | "padding" | "resize" | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | "animation" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationTimingFunction" | "appearance" | "aspectRatio" | "backfaceVisibility" | "background" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPosition" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "blockSize" | "border" | "borderBlock" | "borderBlockColor" | "borderBlockEnd" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStart" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBlockStyle" | "borderBlockWidth" | "borderBottom" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderColor" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImage" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInline" | "borderInlineColor" | "borderInlineEnd" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStart" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderInlineStyle" | "borderInlineWidth" | "borderLeft" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRadius" | "borderRight" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderStyle" | "borderTop" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "borderWidth" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "clear" | "colorScheme" | "columnCount" | "columnFill" | "columnGap" | "columnRule" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "contain" | "counterIncrement" | "counterReset" | "counterSet" | "cssFloat" | "cssText" | "emptyCells" | "flex" | "flexBasis" | "flexDirection" | "flexFlow" | "flexGrow" | "flexShrink" | "flexWrap" | "float" | "font" | "fontFeatureSettings" | "fontKerning" | "fontOpticalSizing" | "fontSynthesis" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontVariationSettings" | "gap" | "gridArea" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumn" | "gridColumnEnd" | "gridColumnGap" | "gridColumnStart" | "gridGap" | "gridRow" | "gridRowEnd" | "gridRowGap" | "gridRowStart" | "gridTemplate" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hyphens" | "imageOrientation" | "inlineSize" | "inset" | "insetBlock" | "insetBlockEnd" | "insetBlockStart" | "insetInline" | "insetInlineEnd" | "insetInlineStart" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "lineBreak" | "lineHeight" | "listStyle" | "listStyleImage" | "listStylePosition" | "listStyleType" | "margin" | "marginBlock" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInline" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "objectFit" | "objectPosition" | "offsetDistance" | "offsetPath" | "offsetRotate" | "orphans" | "outline" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflowAnchor" | "overflowWrap" | "overflowX" | "overflowY" | "overscrollBehavior" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "paddingBlock" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInline" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "perspective" | "perspectiveOrigin" | "placeContent" | "placeItems" | "placeSelf" | "position" | "printColorAdjust" | "quotes" | "rowGap" | "rubyPosition" | "scrollBehavior" | "scrollMargin" | "scrollMarginBlock" | "scrollMarginBlockEnd" | "scrollMarginBlockStart" | "scrollMarginBottom" | "scrollMarginInline" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPadding" | "scrollPaddingBlock" | "scrollPaddingBlockEnd" | "scrollPaddingBlockStart" | "scrollPaddingBottom" | "scrollPaddingInline" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapStop" | "scrollSnapType" | "scrollbarGutter" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textCombineUpright" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasis" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textOrientation" | "textOverflow" | "textShadow" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "touchAction" | "transformBox" | "transformOrigin" | "transformStyle" | "transition" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "userSelect" | "verticalAlign" | "webkitAlignContent" | "webkitAlignItems" | "webkitAlignSelf" | "webkitAnimation" | "webkitAnimationDelay" | "webkitAnimationDirection" | "webkitAnimationDuration" | "webkitAnimationFillMode" | "webkitAnimationIterationCount" | "webkitAnimationName" | "webkitAnimationPlayState" | "webkitAnimationTimingFunction" | "webkitAppearance" | "webkitBackfaceVisibility" | "webkitBackgroundClip" | "webkitBackgroundOrigin" | "webkitBackgroundSize" | "webkitBorderBottomLeftRadius" | "webkitBorderBottomRightRadius" | "webkitBorderRadius" | "webkitBorderTopLeftRadius" | "webkitBorderTopRightRadius" | "webkitBoxAlign" | "webkitBoxFlex" | "webkitBoxOrdinalGroup" | "webkitBoxOrient" | "webkitBoxPack" | "webkitBoxShadow" | "webkitBoxSizing" | "webkitFilter" | "webkitFlex" | "webkitFlexBasis" | "webkitFlexDirection" | "webkitFlexFlow" | "webkitFlexGrow" | "webkitFlexShrink" | "webkitFlexWrap" | "webkitJustifyContent" | "webkitLineClamp" | "webkitMask" | "webkitMaskBoxImage" | "webkitMaskBoxImageOutset" | "webkitMaskBoxImageRepeat" | "webkitMaskBoxImageSlice" | "webkitMaskBoxImageSource" | "webkitMaskBoxImageWidth" | "webkitMaskClip" | "webkitMaskComposite" | "webkitMaskImage" | "webkitMaskOrigin" | "webkitMaskPosition" | "webkitMaskRepeat" | "webkitMaskSize" | "webkitOrder" | "webkitPerspective" | "webkitPerspectiveOrigin" | "webkitTextFillColor" | "webkitTextSizeAdjust" | "webkitTextStroke" | "webkitTextStrokeColor" | "webkitTextStrokeWidth" | "webkitTransform" | "webkitTransformOrigin" | "webkitTransformStyle" | "webkitTransition" | "webkitTransitionDelay" | "webkitTransitionDuration" | "webkitTransitionProperty" | "webkitTransitionTimingFunction" | "webkitUserSelect" | "whiteSpace" | "widows" | "willChange" | "wordBreak" | "wordWrap" | "zIndex" | "getPropertyPriority" | "getPropertyValue" | "item" | "removeProperty" | "setProperty">(prop: P, value: CSSStyleDeclaration[P]) => boolean;
+export declare const isCssPropertySupported: <P extends number | typeof Symbol.iterator | "filter" | "fill" | "clipPath" | "marker" | "mask" | "grid" | "fontSize" | "translate" | "content" | "color" | "width" | "height" | "direction" | "alignmentBaseline" | "baselineShift" | "clip" | "clipRule" | "colorInterpolation" | "colorInterpolationFilters" | "cursor" | "display" | "dominantBaseline" | "fillOpacity" | "fillRule" | "floodColor" | "floodOpacity" | "fontFamily" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontVariant" | "fontWeight" | "imageRendering" | "letterSpacing" | "lightingColor" | "markerEnd" | "markerMid" | "markerStart" | "offset" | "opacity" | "order" | "overflow" | "paintOrder" | "pointerEvents" | "rotate" | "scale" | "shapeRendering" | "stopColor" | "stopOpacity" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "textAnchor" | "textDecoration" | "textRendering" | "transform" | "unicodeBidi" | "visibility" | "wordSpacing" | "writingMode" | "item" | "all" | "left" | "right" | "top" | "bottom" | "columns" | "padding" | "resize" | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | "animation" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationTimingFunction" | "appearance" | "aspectRatio" | "backfaceVisibility" | "background" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPosition" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "blockSize" | "border" | "borderBlock" | "borderBlockColor" | "borderBlockEnd" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStart" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBlockStyle" | "borderBlockWidth" | "borderBottom" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderColor" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImage" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInline" | "borderInlineColor" | "borderInlineEnd" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStart" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderInlineStyle" | "borderInlineWidth" | "borderLeft" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRadius" | "borderRight" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderStyle" | "borderTop" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "borderWidth" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "clear" | "colorScheme" | "columnCount" | "columnFill" | "columnGap" | "columnRule" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "contain" | "counterIncrement" | "counterReset" | "counterSet" | "cssFloat" | "cssText" | "emptyCells" | "flex" | "flexBasis" | "flexDirection" | "flexFlow" | "flexGrow" | "flexShrink" | "flexWrap" | "float" | "font" | "fontFeatureSettings" | "fontKerning" | "fontOpticalSizing" | "fontSynthesis" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontVariationSettings" | "gap" | "gridArea" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumn" | "gridColumnEnd" | "gridColumnGap" | "gridColumnStart" | "gridGap" | "gridRow" | "gridRowEnd" | "gridRowGap" | "gridRowStart" | "gridTemplate" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hyphens" | "imageOrientation" | "inlineSize" | "inset" | "insetBlock" | "insetBlockEnd" | "insetBlockStart" | "insetInline" | "insetInlineEnd" | "insetInlineStart" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "lineBreak" | "lineHeight" | "listStyle" | "listStyleImage" | "listStylePosition" | "listStyleType" | "margin" | "marginBlock" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInline" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "objectFit" | "objectPosition" | "offsetDistance" | "offsetPath" | "offsetRotate" | "orphans" | "outline" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflowAnchor" | "overflowWrap" | "overflowX" | "overflowY" | "overscrollBehavior" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "paddingBlock" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInline" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "perspective" | "perspectiveOrigin" | "placeContent" | "placeItems" | "placeSelf" | "position" | "printColorAdjust" | "quotes" | "rowGap" | "rubyPosition" | "scrollBehavior" | "scrollMargin" | "scrollMarginBlock" | "scrollMarginBlockEnd" | "scrollMarginBlockStart" | "scrollMarginBottom" | "scrollMarginInline" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPadding" | "scrollPaddingBlock" | "scrollPaddingBlockEnd" | "scrollPaddingBlockStart" | "scrollPaddingBottom" | "scrollPaddingInline" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapStop" | "scrollSnapType" | "scrollbarGutter" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textCombineUpright" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasis" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textOrientation" | "textOverflow" | "textShadow" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "touchAction" | "transformBox" | "transformOrigin" | "transformStyle" | "transition" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "userSelect" | "verticalAlign" | "webkitAlignContent" | "webkitAlignItems" | "webkitAlignSelf" | "webkitAnimation" | "webkitAnimationDelay" | "webkitAnimationDirection" | "webkitAnimationDuration" | "webkitAnimationFillMode" | "webkitAnimationIterationCount" | "webkitAnimationName" | "webkitAnimationPlayState" | "webkitAnimationTimingFunction" | "webkitAppearance" | "webkitBackfaceVisibility" | "webkitBackgroundClip" | "webkitBackgroundOrigin" | "webkitBackgroundSize" | "webkitBorderBottomLeftRadius" | "webkitBorderBottomRightRadius" | "webkitBorderRadius" | "webkitBorderTopLeftRadius" | "webkitBorderTopRightRadius" | "webkitBoxAlign" | "webkitBoxFlex" | "webkitBoxOrdinalGroup" | "webkitBoxOrient" | "webkitBoxPack" | "webkitBoxShadow" | "webkitBoxSizing" | "webkitFilter" | "webkitFlex" | "webkitFlexBasis" | "webkitFlexDirection" | "webkitFlexFlow" | "webkitFlexGrow" | "webkitFlexShrink" | "webkitFlexWrap" | "webkitJustifyContent" | "webkitLineClamp" | "webkitMask" | "webkitMaskBoxImage" | "webkitMaskBoxImageOutset" | "webkitMaskBoxImageRepeat" | "webkitMaskBoxImageSlice" | "webkitMaskBoxImageSource" | "webkitMaskBoxImageWidth" | "webkitMaskClip" | "webkitMaskComposite" | "webkitMaskImage" | "webkitMaskOrigin" | "webkitMaskPosition" | "webkitMaskRepeat" | "webkitMaskSize" | "webkitOrder" | "webkitPerspective" | "webkitPerspectiveOrigin" | "webkitTextFillColor" | "webkitTextSizeAdjust" | "webkitTextStroke" | "webkitTextStrokeColor" | "webkitTextStrokeWidth" | "webkitTransform" | "webkitTransformOrigin" | "webkitTransformStyle" | "webkitTransition" | "webkitTransitionDelay" | "webkitTransitionDuration" | "webkitTransitionProperty" | "webkitTransitionTimingFunction" | "webkitUserSelect" | "whiteSpace" | "widows" | "willChange" | "wordBreak" | "wordWrap" | "zIndex" | "getPropertyPriority" | "getPropertyValue" | "removeProperty" | "setProperty">(prop: P, value: CSSStyleDeclaration[P]) => boolean;

dist/esm/Actions/index.d.ts

@@ -0,1 +1,3 @@
+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";
@@ -2,0 +4,0 @@ export * from "./ButtonGroup/ButtonGroup";

dist/esm/Actions/index.js

@@ -0,1 +1,2 @@
+export { Accordion as ExperimentalAccordion } from "./Accordion/Accordion";
 export * from "./Button/Button";
@@ -8,3 +9,2 @@ export * from "./ButtonGroup/ButtonGroup";
 export * from "./ToggleButton/ToggleButton";
-export * from "./ToggleGroup/ToggleGroup";
-export {};
+export * from "./ToggleGroup/ToggleGroup";

dist/esm/Actions/ToggleGroup/ToggleGroup.d.ts

@@ -18,3 +18,3 @@ import type { ToggleGroupItemProps as RadixToggleGroupItemProps, ToggleGroupMultipleProps as RadixToggleGroupMultipleProps, ToggleGroupImplProps as RadixToggleGroupSharedProps, ToggleGroupSingleProps as RadixToggleGroupSingleProps } from "@radix-ui/react-toggle-group";
      * Defines the controlled value of the pressed item.
-     * Must be used in conjunction with `onValueChange`.
+     * Must be used in conjunction with `onChange`.
      */
@@ -35,3 +35,3 @@ value?: RadixToggleGroupSingleProps["value"];
      * Defines the controlled value of the pressed items.
-     * Must be used in conjunction with `onValueChange`.
+     * Must be used in conjunction with `onChange`.
      */
@@ -38,0 +38,0 @@ value?: RadixToggleGroupMultipleProps["value"];

dist/esm/Fields/Field/Field.js

@@ -10,3 +10,3 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import { getTextFromReactNode } from "../../utils/getTextFromReactNode";
-import { useExperimentalForm } from "../Form/useForm";
+import { useForm } from "../Form/useForm";
 import { DEFAULT_FIELD_STATE, FieldContext } from "./FieldContext";
@@ -59,3 +59,3 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
   }
-  var form = useExperimentalForm();
+  var form = useForm();
   var addField = form === null || form === void 0 ? void 0 : form.addField;
@@ -62,0 +62,0 @@ var removeField = form === null || form === void 0 ? void 0 : form.removeField;

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

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

dist/esm/Fields/Form/Form.js

@@ -6,7 +6,7 @@ import _typeof from "@babel/runtime/helpers/typeof";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-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 + ""; }
@@ -17,2 +17,3 @@ 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); }
 import cx from "clsx";
+import isEmpty from "lodash/isEmpty";
 import { useCallback, useState } from "react";
@@ -24,30 +25,39 @@ import { Button } from "../../Actions";
 import stl from "../../styles/helpers/satellitePrefixer";
-import { ExperimentalFormContext } from "./FormContext";
-import { useExperimentalForm } from "./useForm";
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { FormContext } from "./FormContext";
+import { useForm } from "./useForm";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var DEFAULT_ERROR_MESSAGE_LOCALE = {
-  errorText: function errorText(invalidFields) {
+  errorTitle: function errorTitle(invalidFields, extraErrors) {
+    var _extraErrors$length;
+    if (isEmpty(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__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsxs("div", {
-        className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["display-heading mb-2"]))),
-        children: ["Please fix ", invalidFields.length, " error", invalidFields.length > 1 ? "s" : "", " below and try again."]
-      }), /*#__PURE__*/_jsx("div", {
-        className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex flex-col"]))),
-        children: /*#__PURE__*/_jsx("a", {
-          href: "#",
-          className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["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__*/_jsx("a", {
+      href: "#",
+      className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["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 (!isEmpty(invalidFields) && isEmpty(extraErrors)) return focusInvalidFieldLink;
+    return /*#__PURE__*/_jsxs("ul", {
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["list-disc"]))),
+      children: [extraErrors && extraErrors.length > 1 && extraErrors.map(function (items, index) {
+        return /*#__PURE__*/_jsx("li", {
+          children: items
+        }, index + "-error");
+      }), invalidFields.length > 0 && /*#__PURE__*/_jsxs("li", {
+        children: ["There ", invalidFields.length > 1 ? "are" : "is", " ", invalidFields.length, " invalid field", invalidFields.length > 1 ? "s" : "", ". ", focusInvalidFieldLink]
       })]
@@ -57,4 +67,5 @@ });
 };
-export var ExperimentalFormErrorMessage = function ExperimentalFormErrorMessage(_ref) {
+export var FormErrorMessage = function FormErrorMessage(_ref) {
   var className = _ref.className,
+    extraErrors = _ref.extraErrors,
     propsLocale = _ref.locale,
@@ -64,3 +75,3 @@ props = _objectWithoutProperties(_ref, _excluded);
   var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_ERROR_MESSAGE_LOCALE), contextLocale), propsLocale);
-  var form = useExperimentalForm();
+  var form = useForm();
   if (!form) return null;
@@ -78,15 +89,16 @@ var invalidFields = Object.entries(form.fields).filter(function (_ref2) {
   });
-  return invalidFields.length > 0 ? /*#__PURE__*/_jsx(Alert, _objectSpread(_objectSpread({
+  return isEmpty(invalidFields) && isEmpty(extraErrors) ? null : /*#__PURE__*/_jsx(Alert, _objectSpread(_objectSpread({
     variant: "red",
-    icon: XOctagonIcon
+    icon: XOctagonIcon,
+    title: locale.errorTitle(invalidFields, extraErrors)
   }, props), {}, {
-    className: cx(stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["w-full"]))), className),
+    className: cx(stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["w-full"]))), className),
     children: /*#__PURE__*/_jsx("span", {
       "aria-live": "assertive",
-      className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["whitespace-break-spaces"]))),
-      children: locale.errorText(invalidFields)
+      className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["whitespace-break-spaces"]))),
+      children: locale.errorText(invalidFields, extraErrors)
     })
-  })) : null;
+  }));
 };
-export var ExperimentalForm = function ExperimentalForm(_ref6) {
+export var Form = function Form(_ref6) {
   var children = _ref6.children,
@@ -111,3 +123,3 @@ props = _objectWithoutProperties(_ref6, _excluded2);
   }, []);
-  return /*#__PURE__*/_jsx(ExperimentalFormContext.Provider, {
+  return /*#__PURE__*/_jsx(FormContext.Provider, {
     value: {
@@ -125,3 +137,3 @@ fields: fields,
 };
-export var ExperimentalFormSubmit = function ExperimentalFormSubmit(_ref7) {
+export var FormSubmit = function FormSubmit(_ref7) {
   var children = _ref7.children,
@@ -134,3 +146,3 @@ props = _objectWithoutProperties(_ref7, _excluded3);
 };
-export var ExperimentalFormReset = function ExperimentalFormReset(_ref8) {
+export var FormReset = function FormReset(_ref8) {
   var children = _ref8.children,
@@ -137,0 +149,0 @@ props = _objectWithoutProperties(_ref8, _excluded4);

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

 /// <reference types="react" />
 import type { FieldState } from "../Field";
-export declare type ExperimentalFormContextField = {
+export declare type FormContextField = {
     state: FieldState;
@@ -8,7 +8,7 @@ label: string;
 };
-export declare type ExperimentalFormContextValue = {
-    fields: Record<string, ExperimentalFormContextField>;
-    addField: (field: ExperimentalFormContextField) => void;
-    removeField: (field: ExperimentalFormContextField) => void;
+export declare type FormContextValue = {
+    fields: Record<string, FormContextField>;
+    addField: (field: FormContextField) => void;
+    removeField: (field: FormContextField) => void;
 };
-export declare const ExperimentalFormContext: import("react").Context<ExperimentalFormContextValue | null>;
+export declare const FormContext: import("react").Context<FormContextValue | null>;

dist/esm/Fields/Form/FormContext.js

 import { createContext } from "react";
-export var ExperimentalFormContext = /*#__PURE__*/createContext(null);
+export var FormContext = /*#__PURE__*/createContext(null);

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

@@ -1,3 +0,4 @@
-export * from "./Form";
-export type { ExperimentalFormContextField, ExperimentalFormContextValue } from "./FormContext";
-export * from "./useForm";
+export type { FormProps as ExperimentalFormProps, FormLocale as ExperimentalFormLocale, FormErrorMessageProps as ExperimentalFormErrorMessageProps, } from "./Form";
+export { Form as ExperimentalForm, FormErrorMessage as ExperimentalFormErrorMessage, FormSubmit as ExperimentalFormSubmit, FormReset as ExperimentalFormReset, } from "./Form";
+export type { FormContextField as ExperimentalFormContextField, FormContextValue as ExperimentalFormContextValue, } from "./FormContext";
+export { useForm as useExperimentalForm } from "./useForm";

dist/esm/Fields/Form/index.js

@@ -1,3 +0,2 @@
-export * from "./Form";
-export * from "./useForm";
-export {};
+export { Form as ExperimentalForm, FormErrorMessage as ExperimentalFormErrorMessage, FormSubmit as ExperimentalFormSubmit, FormReset as ExperimentalFormReset } from "./Form";
+export { useForm as useExperimentalForm } from "./useForm";

dist/esm/Fields/Form/stories/AsynchronousValidation.js

@@ -5,3 +5,3 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
 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; }
@@ -19,3 +19,3 @@ 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 { Input } from "../../Input";
-import { ExperimentalForm, ExperimentalFormErrorMessage, ExperimentalFormReset, ExperimentalFormSubmit } from "../Form";
+import { Form, FormErrorMessage, FormReset, FormSubmit } from "../Form";
 import { useFormikAutoFocusOnError } from "./utils/useFormikAutoFocusOnError";
@@ -147,2 +147,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
     setFormData = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    extraErrors = _useState4[0],
+    setExtraErrors = _useState4[1];
   var _useForm = useForm({
@@ -176,70 +180,78 @@ defaultValues: initialFormData,
   };
-  return /*#__PURE__*/_jsxs("div", {
-    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex flex-col gap-8 w-3/5"]))),
-    children: [/*#__PURE__*/_jsxs(ExperimentalForm, {
-      onSubmit: handleSubmit(function (data) {
-        return setFormData(data);
-      }),
-      onReset: function onReset() {
-        return setFormData(initialFormData);
-      },
-      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex flex-col items-start gap-6 min-w-72"]))),
-      children: [/*#__PURE__*/_jsx(ExperimentalFormErrorMessage, {}), /*#__PURE__*/_jsx(Controller, {
-        name: "username",
-        control: control,
-        render: function render(_ref5) {
-          var field = _ref5.field;
-          return /*#__PURE__*/_jsx(Field, {
-            label: "Username",
-            labelFor: "username",
-            description: "Please enter your username",
-            state: getFieldState("username"),
-            className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["w-full"]))),
-            children: /*#__PURE__*/_jsx(Input, _objectSpread({
-              id: "username",
-              placeholder: "Username",
-              required: true
-            }, field))
+  return /*#__PURE__*/_jsx("div", {
+    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["@container w-full flex justify-center"]))),
+    children: /*#__PURE__*/_jsxs("div", {
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex flex-col gap-8 w-full @lg:w-1/2"]))),
+      children: [/*#__PURE__*/_jsxs(Form, {
+        onSubmit: handleSubmit(function (data) {
+          setFormData(data);
+          setExtraErrors(function (previousErrors) {
+            return previousErrors.concat("first error", "2nd error");
           });
-        }
-      }), /*#__PURE__*/_jsx(Controller, {
-        name: "password",
-        control: control,
-        render: function render(_ref6) {
-          var field = _ref6.field;
-          return /*#__PURE__*/_jsx(Field, {
-            label: "Password",
-            labelFor: "password",
-            description: "Please enter your password",
-            state: getFieldState("password"),
-            className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["w-full"]))),
-            children: /*#__PURE__*/_jsx(Input, _objectSpread({
-              id: "password",
-              placeholder: "Password",
-              type: "password",
-              required: true
-            }, field))
-          });
-        }
-      }), /*#__PURE__*/_jsxs("div", {
-        className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["flex gap-2"]))),
-        children: [/*#__PURE__*/_jsx(ExperimentalFormSubmit, {
-          variant: "primary",
-          "aria-label": "Login to the website",
-          loading: formState.isSubmitting,
-          children: "Login"
-        }), /*#__PURE__*/_jsx(ExperimentalFormReset, {
-          "aria-label": "Reset the form",
-          onClick: function onClick() {
-            return reset();
-          },
-          children: "Reset"
+        }),
+        onReset: function onReset() {
+          return setFormData(initialFormData);
+        },
+        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["flex flex-col items-start gap-6 min-w-72"]))),
+        children: [/*#__PURE__*/_jsx(FormErrorMessage, {
+          extraErrors: extraErrors
+        }), /*#__PURE__*/_jsx(Controller, {
+          name: "username",
+          control: control,
+          render: function render(_ref5) {
+            var field = _ref5.field;
+            return /*#__PURE__*/_jsx(Field, {
+              label: "Username",
+              labelFor: "username",
+              description: "Please enter your username",
+              state: getFieldState("username"),
+              className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["w-full"]))),
+              children: /*#__PURE__*/_jsx(Input, _objectSpread({
+                id: "username",
+                placeholder: "Username",
+                required: true
+              }, field))
+            });
+          }
+        }), /*#__PURE__*/_jsx(Controller, {
+          name: "password",
+          control: control,
+          render: function render(_ref6) {
+            var field = _ref6.field;
+            return /*#__PURE__*/_jsx(Field, {
+              label: "Password",
+              labelFor: "password",
+              description: "Please enter your password",
+              state: getFieldState("password"),
+              className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["w-full"]))),
+              children: /*#__PURE__*/_jsx(Input, _objectSpread({
+                id: "password",
+                placeholder: "Password",
+                type: "password",
+                required: true
+              }, field))
+            });
+          }
+        }), /*#__PURE__*/_jsxs("div", {
+          className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["flex gap-2"]))),
+          children: [/*#__PURE__*/_jsx(FormSubmit, {
+            variant: "primary",
+            "aria-label": "Login to the website",
+            loading: formState.isSubmitting,
+            children: "Login"
+          }), /*#__PURE__*/_jsx(FormReset, {
+            "aria-label": "Reset the form",
+            onClick: function onClick() {
+              return reset();
+            },
+            children: "Reset"
+          })]
         })]
+      }), /*#__PURE__*/_jsx("hr", {
+        className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["text-grey-500"])))
+      }), /*#__PURE__*/_jsx("code", {
+        className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["whitespace-pre display-code"]))),
+        children: JSON.stringify(formData, null, 2)
       })]
-    }), /*#__PURE__*/_jsx("hr", {
-      className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["text-grey-500"])))
-    }), /*#__PURE__*/_jsx("code", {
-      className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["whitespace-pre display-code"]))),
-      children: JSON.stringify(formData, null, 2)
-    })]
+    })
   });
@@ -295,10 +307,10 @@ };
 export var FormikAsyncValidationComponent = function FormikAsyncValidationComponent() {
-  var _useState3 = useState(initialFormData),
-    _useState4 = _slicedToArray(_useState3, 2),
-    formData = _useState4[0],
-    setFormData = _useState4[1];
-  var _useState5 = useState(false),
+  var _useState5 = useState(initialFormData),
     _useState6 = _slicedToArray(_useState5, 2),
-    revalidationEnabled = _useState6[0],
-    setRevalidationEnabled = _useState6[1];
+    formData = _useState6[0],
+    setFormData = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    revalidationEnabled = _useState8[0],
+    setRevalidationEnabled = _useState8[1];
   var formik = useFormik({
@@ -334,59 +346,62 @@ initialValues: initialFormData,
   useFormikAutoFocusOnError(formik);
-  return /*#__PURE__*/_jsxs("div", {
-    className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["flex flex-col gap-8 w-3/5"]))),
-    children: [/*#__PURE__*/_jsxs(ExperimentalForm, {
-      onSubmit: function onSubmit(e) {
-        setRevalidationEnabled(true);
-        formik.handleSubmit(e);
-      },
-      onReset: function onReset(e) {
-        setRevalidationEnabled(false);
-        formik.handleReset(e);
-      },
-      className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["flex flex-col items-start gap-6 min-w-72"]))),
-      children: [/*#__PURE__*/_jsx(ExperimentalFormErrorMessage, {}), /*#__PURE__*/_jsx(Field, {
-        label: "Username",
-        labelFor: "username",
-        description: "Please enter your username",
-        state: getFieldState("username"),
-        className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["w-full"]))),
-        children: /*#__PURE__*/_jsx(Input, _objectSpread({
-          id: "username",
-          placeholder: "Username",
-          required: true
-        }, formik.getFieldProps("username")))
-      }), /*#__PURE__*/_jsx(Field, {
-        label: "Password",
-        labelFor: "password",
-        description: "Please enter your password",
-        state: getFieldState("password"),
-        className: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["w-full"]))),
-        children: /*#__PURE__*/_jsx(Input, _objectSpread({
-          id: "password",
-          placeholder: "Password",
-          type: "password",
-          required: true
-        }, formik.getFieldProps("password")))
-      }), /*#__PURE__*/_jsxs("div", {
-        className: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["flex gap-2"]))),
-        children: [/*#__PURE__*/_jsx(ExperimentalFormSubmit, {
-          variant: "primary",
-          "aria-label": "Login to the website",
-          loading: formik.isValidating,
-          children: "Login"
-        }), /*#__PURE__*/_jsx(ExperimentalFormReset, {
-          "aria-label": "Reset the form",
-          onClick: function onClick() {
-            return formik.resetForm();
-          },
-          children: "Reset"
+  return /*#__PURE__*/_jsx("div", {
+    className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["@container w-full flex justify-center"]))),
+    children: /*#__PURE__*/_jsxs("div", {
+      className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["flex flex-col gap-8 w-full @lg:w-1/2"]))),
+      children: [/*#__PURE__*/_jsxs(Form, {
+        onSubmit: function onSubmit(e) {
+          setRevalidationEnabled(true);
+          formik.handleSubmit(e);
+        },
+        onReset: function onReset(e) {
+          setRevalidationEnabled(false);
+          formik.handleReset(e);
+        },
+        className: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["flex flex-col items-start gap-6 min-w-72"]))),
+        children: [/*#__PURE__*/_jsx(FormErrorMessage, {}), /*#__PURE__*/_jsx(Field, {
+          label: "Username",
+          labelFor: "username",
+          description: "Please enter your username",
+          state: getFieldState("username"),
+          className: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["w-full"]))),
+          children: /*#__PURE__*/_jsx(Input, _objectSpread({
+            id: "username",
+            placeholder: "Username",
+            required: true
+          }, formik.getFieldProps("username")))
+        }), /*#__PURE__*/_jsx(Field, {
+          label: "Password",
+          labelFor: "password",
+          description: "Please enter your password",
+          state: getFieldState("password"),
+          className: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["w-full"]))),
+          children: /*#__PURE__*/_jsx(Input, _objectSpread({
+            id: "password",
+            placeholder: "Password",
+            type: "password",
+            required: true
+          }, formik.getFieldProps("password")))
+        }), /*#__PURE__*/_jsxs("div", {
+          className: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["flex gap-2"]))),
+          children: [/*#__PURE__*/_jsx(FormSubmit, {
+            variant: "primary",
+            "aria-label": "Login to the website",
+            loading: formik.isValidating,
+            children: "Login"
+          }), /*#__PURE__*/_jsx(FormReset, {
+            "aria-label": "Reset the form",
+            onClick: function onClick() {
+              return formik.resetForm();
+            },
+            children: "Reset"
+          })]
         })]
+      }), /*#__PURE__*/_jsx("hr", {
+        className: stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["text-grey-500"])))
+      }), /*#__PURE__*/_jsx("code", {
+        className: stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["whitespace-pre display-code"]))),
+        children: JSON.stringify(formData, null, 2)
       })]
-    }), /*#__PURE__*/_jsx("hr", {
-      className: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["text-grey-500"])))
-    }), /*#__PURE__*/_jsx("code", {
-      className: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["whitespace-pre display-code"]))),
-      children: JSON.stringify(formData, null, 2)
-    })]
+    })
   });
 };

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

 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44, _templateObject45, _templateObject46, _templateObject47, _templateObject48;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44, _templateObject45, _templateObject46, _templateObject47, _templateObject48, _templateObject49, _templateObject50;
 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; }
@@ -23,3 +23,3 @@ 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 { Toggle } from "../../Toggle";
-import { ExperimentalForm, ExperimentalFormErrorMessage, ExperimentalFormReset, ExperimentalFormSubmit } from "../Form";
+import { Form, FormErrorMessage, FormReset, FormSubmit } from "../Form";
 import { useFormikAutoFocusOnError } from "./utils/useFormikAutoFocusOnError";
@@ -194,369 +194,372 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
   };
-  return /*#__PURE__*/_jsxs("div", {
-    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex flex-col gap-8 w-3/5"]))),
-    children: [/*#__PURE__*/_jsxs(ExperimentalForm, {
-      onSubmit: handleSubmit(function (data) {
-        return setFormData(data);
-      }),
-      onReset: function onReset() {
-        return setFormData(initialFormData);
-      },
-      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex flex-col items-start gap-6 min-w-72"]))),
-      children: [/*#__PURE__*/_jsx(ExperimentalFormErrorMessage, {}), /*#__PURE__*/_jsx(Controller, {
-        name: "firstName",
-        control: control,
-        render: function render(_ref) {
-          var field = _ref.field;
-          return /*#__PURE__*/_jsx(Field, {
-            label: "First Name",
-            labelFor: "firstName",
-            description: "Please enter your first name",
-            state: getFieldState("firstName"),
-            className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["w-full"]))),
-            children: /*#__PURE__*/_jsx(Input, _objectSpread({
-              id: "firstName",
-              placeholder: "John",
-              required: true
-            }, field))
-          });
-        }
-      }), /*#__PURE__*/_jsx(Controller, {
-        name: "lastName",
-        control: control,
-        render: function render(_ref2) {
-          var field = _ref2.field;
-          return /*#__PURE__*/_jsx(Field, {
-            label: "Last Name",
-            labelFor: "lastName",
-            description: "Please enter your last name",
-            state: getFieldState("lastName"),
-            className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["w-full"]))),
-            children: /*#__PURE__*/_jsx(Input, _objectSpread({
-              id: "lastName",
-              placeholder: "Doe",
-              required: true
-            }, field))
-          });
-        }
-      }), /*#__PURE__*/_jsx(Controller, {
-        name: "password",
-        control: control,
-        render: function render(_ref3) {
-          var field = _ref3.field;
-          return /*#__PURE__*/_jsx(Field, {
-            label: "Password",
-            labelFor: "password",
-            description: "Please enter your password",
-            state: getFieldState("password"),
-            className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["w-full"]))),
-            children: /*#__PURE__*/_jsx(Input, _objectSpread({
-              id: "password",
-              placeholder: "Password",
-              type: "password",
-              required: true
-            }, field))
-          });
-        }
-      }), /*#__PURE__*/_jsx(Controller, {
-        name: "civility",
-        control: control,
-        render: function render(_ref4) {
-          var field = _ref4.field;
-          return /*#__PURE__*/_jsx(Field, {
-            label: "Civility",
-            labelFor: civilities[0],
-            description: "Please enter your civility",
-            state: getFieldState("civility"),
-            className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["w-full"]))),
-            children: /*#__PURE__*/_jsx("div", {
-              className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["flex gap-4 display-body"]))),
-              children: civilities.map(function (civility) {
-                return /*#__PURE__*/_jsxs("label", {
-                  htmlFor: civility,
-                  className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["flex items-center gap-1"]))),
-                  children: [/*#__PURE__*/_jsx(RadioButton, _objectSpread(_objectSpread({
-                    id: civility,
-                    "aria-labelledby": civility,
-                    required: true,
-                    checked: civility === field.value
-                  }, field), {}, {
-                    value: civility
-                  })), capitalize(civility)]
-                }, civility);
+  return /*#__PURE__*/_jsx("div", {
+    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["@container w-full flex justify-center"]))),
+    children: /*#__PURE__*/_jsxs("div", {
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex flex-col gap-8 w-full @lg:w-1/2"]))),
+      children: [/*#__PURE__*/_jsxs(Form, {
+        onSubmit: handleSubmit(function (data) {
+          return setFormData(data);
+        }),
+        onReset: function onReset() {
+          return setFormData(initialFormData);
+        },
+        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["flex flex-col items-start gap-6 min-w-72"]))),
+        children: [/*#__PURE__*/_jsx(FormErrorMessage, {}), /*#__PURE__*/_jsx(Controller, {
+          name: "firstName",
+          control: control,
+          render: function render(_ref) {
+            var field = _ref.field;
+            return /*#__PURE__*/_jsx(Field, {
+              label: "First Name",
+              labelFor: "firstName",
+              description: "Please enter your first name",
+              state: getFieldState("firstName"),
+              className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["w-full"]))),
+              children: /*#__PURE__*/_jsx(Input, _objectSpread({
+                id: "firstName",
+                placeholder: "John",
+                required: true
+              }, field))
+            });
+          }
+        }), /*#__PURE__*/_jsx(Controller, {
+          name: "lastName",
+          control: control,
+          render: function render(_ref2) {
+            var field = _ref2.field;
+            return /*#__PURE__*/_jsx(Field, {
+              label: "Last Name",
+              labelFor: "lastName",
+              description: "Please enter your last name",
+              state: getFieldState("lastName"),
+              className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["w-full"]))),
+              children: /*#__PURE__*/_jsx(Input, _objectSpread({
+                id: "lastName",
+                placeholder: "Doe",
+                required: true
+              }, field))
+            });
+          }
+        }), /*#__PURE__*/_jsx(Controller, {
+          name: "password",
+          control: control,
+          render: function render(_ref3) {
+            var field = _ref3.field;
+            return /*#__PURE__*/_jsx(Field, {
+              label: "Password",
+              labelFor: "password",
+              description: "Please enter your password",
+              state: getFieldState("password"),
+              className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["w-full"]))),
+              children: /*#__PURE__*/_jsx(Input, _objectSpread({
+                id: "password",
+                placeholder: "Password",
+                type: "password",
+                required: true
+              }, field))
+            });
+          }
+        }), /*#__PURE__*/_jsx(Controller, {
+          name: "civility",
+          control: control,
+          render: function render(_ref4) {
+            var field = _ref4.field;
+            return /*#__PURE__*/_jsx(Field, {
+              label: "Civility",
+              labelFor: civilities[0],
+              description: "Please enter your civility",
+              state: getFieldState("civility"),
+              className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["w-full"]))),
+              children: /*#__PURE__*/_jsx("div", {
+                className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["flex gap-4 display-body"]))),
+                children: civilities.map(function (civility) {
+                  return /*#__PURE__*/_jsxs("label", {
+                    htmlFor: civility,
+                    className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["flex items-center gap-1"]))),
+                    children: [/*#__PURE__*/_jsx(RadioButton, _objectSpread(_objectSpread({
+                      id: civility,
+                      "aria-labelledby": civility,
+                      required: true,
+                      checked: civility === field.value
+                    }, field), {}, {
+                      value: civility
+                    })), capitalize(civility)]
+                  }, civility);
+                })
               })
-            })
-          });
-        }
-      }), /*#__PURE__*/_jsx(Controller, {
-        name: "gender",
-        control: control,
-        render: function render(_ref5) {
-          var field = _ref5.field;
-          return /*#__PURE__*/_jsx(Field, {
-            label: "Gender",
-            labelFor: "gender",
-            description: "Please specify your gender",
-            state: getFieldState("gender"),
-            className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["w-full"]))),
-            children: /*#__PURE__*/_jsx(Select, _objectSpread(_objectSpread({
-              id: "gender",
-              required: true
-            }, field), {}, {
-              children: genders.map(function (gender) {
-                return /*#__PURE__*/_jsx("option", {
-                  value: gender,
-                  children: capitalize(gender)
-                }, gender);
-              })
-            }))
-          });
-        }
-      }), /*#__PURE__*/_jsx(Controller, {
-        name: "jobPositions",
-        control: control,
-        render: function render(_ref6) {
-          var field = _ref6.field;
-          return /*#__PURE__*/_jsx(Field, {
-            label: "Job Positions",
-            labelFor: "jobPositions",
-            description: "Please specify the job positions you are interested in",
-            state: getFieldState("jobPositions"),
-            className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["w-full"]))),
-            children: /*#__PURE__*/_jsx(AutoComplete, _objectSpread({
-              id: "jobPositions",
-              options: jobPositions,
-              placeholder: jobPositions[0].label,
-              multiple: true,
-              required: true,
-              clearable: true
-            }, field))
-          });
-        }
-      }), /*#__PURE__*/_jsx(Controller, {
-        name: "employmentStatus",
-        control: control,
-        render: function render(_ref7) {
-          var field = _ref7.field;
-          return /*#__PURE__*/_jsx(Field, {
-            label: "Employment Status",
-            labelFor: "employmentStatus",
-            description: "Please specify your employment status",
-            state: getFieldState("employmentStatus"),
-            className: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["w-full"]))),
-            children: /*#__PURE__*/_jsx(RadioGroup, _objectSpread(_objectSpread({
-              id: "employmentStatus",
-              required: true
-            }, field), {}, {
-              children: employmentStatuses.map(function (employmentStatus) {
-                return /*#__PURE__*/_jsx(RadioGroup.Item, {
-                  value: employmentStatus,
-                  children: capitalize(employmentStatus)
-                }, employmentStatus);
-              })
-            }))
-          });
-        }
-      }), /*#__PURE__*/_jsx(Controller, {
-        name: "birthday",
-        control: control,
-        render: function render(_ref8) {
-          var field = _ref8.field;
-          return /*#__PURE__*/_jsx(Field, {
-            label: "Birthday",
-            labelFor: "birthday",
-            description: "Please specify your birthday",
-            state: getFieldState("birthday"),
-            className: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["w-full"]))),
-            children: /*#__PURE__*/_jsx(DatePicker, _objectSpread({
-              id: "birthday",
-              calendarProps: {
-                disabled: {
-                  after: now
+            });
+          }
+        }), /*#__PURE__*/_jsx(Controller, {
+          name: "gender",
+          control: control,
+          render: function render(_ref5) {
+            var field = _ref5.field;
+            return /*#__PURE__*/_jsx(Field, {
+              label: "Gender",
+              labelFor: "gender",
+              description: "Please specify your gender",
+              state: getFieldState("gender"),
+              className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["w-full"]))),
+              children: /*#__PURE__*/_jsx(Select, _objectSpread(_objectSpread({
+                id: "gender",
+                required: true
+              }, field), {}, {
+                children: genders.map(function (gender) {
+                  return /*#__PURE__*/_jsx("option", {
+                    value: gender,
+                    children: capitalize(gender)
+                  }, gender);
+                })
+              }))
+            });
+          }
+        }), /*#__PURE__*/_jsx(Controller, {
+          name: "jobPositions",
+          control: control,
+          render: function render(_ref6) {
+            var field = _ref6.field;
+            return /*#__PURE__*/_jsx(Field, {
+              label: "Job Positions",
+              labelFor: "jobPositions",
+              description: "Please specify the job positions you are interested in",
+              state: getFieldState("jobPositions"),
+              className: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["w-full"]))),
+              children: /*#__PURE__*/_jsx(AutoComplete, _objectSpread({
+                id: "jobPositions",
+                options: jobPositions,
+                placeholder: jobPositions[0].label,
+                multiple: true,
+                required: true,
+                clearable: true
+              }, field))
+            });
+          }
+        }), /*#__PURE__*/_jsx(Controller, {
+          name: "employmentStatus",
+          control: control,
+          render: function render(_ref7) {
+            var field = _ref7.field;
+            return /*#__PURE__*/_jsx(Field, {
+              label: "Employment Status",
+              labelFor: "employmentStatus",
+              description: "Please specify your employment status",
+              state: getFieldState("employmentStatus"),
+              className: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["w-full"]))),
+              children: /*#__PURE__*/_jsx(RadioGroup, _objectSpread(_objectSpread({
+                id: "employmentStatus",
+                required: true
+              }, field), {}, {
+                children: employmentStatuses.map(function (employmentStatus) {
+                  return /*#__PURE__*/_jsx(RadioGroup.Item, {
+                    value: employmentStatus,
+                    children: capitalize(employmentStatus)
+                  }, employmentStatus);
+                })
+              }))
+            });
+          }
+        }), /*#__PURE__*/_jsx(Controller, {
+          name: "birthday",
+          control: control,
+          render: function render(_ref8) {
+            var field = _ref8.field;
+            return /*#__PURE__*/_jsx(Field, {
+              label: "Birthday",
+              labelFor: "birthday",
+              description: "Please specify your birthday",
+              state: getFieldState("birthday"),
+              className: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["w-full"]))),
+              children: /*#__PURE__*/_jsx(DatePicker, _objectSpread({
+                id: "birthday",
+                calendarProps: {
+                  disabled: {
+                    after: now
+                  }
+                },
+                required: true
+              }, field))
+            });
+          }
+        }), /*#__PURE__*/_jsx(Controller, {
+          name: "age",
+          control: control,
+          render: function render(_ref9) {
+            var field = _ref9.field;
+            return /*#__PURE__*/_jsx(Field, {
+              label: "Age",
+              labelFor: "age",
+              description: "Please specify your age",
+              state: getFieldState("age"),
+              className: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["w-full"]))),
+              children: /*#__PURE__*/_jsx(Input, _objectSpread({
+                id: "age",
+                type: "number",
+                placeholder: "18",
+                step: 1,
+                required: true
+              }, field))
+            });
+          }
+        }), /*#__PURE__*/_jsx(Controller, {
+          name: "interest",
+          control: control,
+          render: function render(_ref10) {
+            var field = _ref10.field;
+            return /*#__PURE__*/_jsxs(Field, {
+              label: "Interest",
+              labelFor: "interest",
+              description: "Please specify your interest",
+              state: getFieldState("interest"),
+              className: stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["w-full"]))),
+              children: [/*#__PURE__*/_jsxs("p", {
+                className: stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["display-caption flex justify-between mb-2"]))),
+                children: [/*#__PURE__*/_jsx("span", {
+                  children: "0"
+                }), /*#__PURE__*/_jsx("span", {
+                  children: "5"
+                }), /*#__PURE__*/_jsx("span", {
+                  children: "10"
+                })]
+              }), /*#__PURE__*/_jsx(RangeSlider, _objectSpread({
+                id: "interest",
+                min: 0,
+                max: 10,
+                required: true
+              }, field))]
+            });
+          }
+        }), /*#__PURE__*/_jsx(Controller, {
+          name: "idealLocation",
+          control: control,
+          render: function render(_ref11) {
+            var field = _ref11.field;
+            return /*#__PURE__*/_jsxs(Field, {
+              label: "Ideal Location",
+              labelFor: "idealLocation",
+              description: "Please specify your ideal location",
+              state: getFieldState("idealLocation"),
+              className: stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["w-full"]))),
+              children: [/*#__PURE__*/_jsxs("p", {
+                className: stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["display-caption flex justify-between mb-2"]))),
+                children: [/*#__PURE__*/_jsx("span", {
+                  children: "0 km"
+                }), /*#__PURE__*/_jsx("span", {
+                  children: "10 km"
+                }), /*#__PURE__*/_jsx("span", {
+                  children: "20 km"
+                }), /*#__PURE__*/_jsx("span", {
+                  children: "30 km"
+                }), /*#__PURE__*/_jsx("span", {
+                  children: "40 km"
+                }), /*#__PURE__*/_jsx("span", {
+                  children: "50 km"
+                })]
+              }), /*#__PURE__*/_jsx(RangeSlider, _objectSpread({
+                id: "idealLocation",
+                min: 0,
+                max: 50,
+                step: 10,
+                required: true
+              }, field))]
+            });
+          }
+        }), /*#__PURE__*/_jsx(Controller, {
+          name: "profilePicture",
+          control: control,
+          render: function render(_ref12) {
+            var field = _ref12.field;
+            return /*#__PURE__*/_jsx(Field, {
+              label: "Profile Picture",
+              labelFor: "profilePicture",
+              description: "Please upload your profile picture, 1 MB minimum",
+              state: getFieldState("profilePicture"),
+              className: stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["w-full"]))),
+              children: /*#__PURE__*/_jsx(Dropzone, _objectSpread(_objectSpread({
+                id: "profilePicture",
+                minSize: 1024 * 1024 * 1,
+                accept: [".png", ".jpg"],
+                required: true
+              }, field), {}, {
+                onChange: function onChange(acceptedFiles, rejectedFiles) {
+                  return field.onChange(rejectedFiles.length > 0 ? rejectedFiles[0] : acceptedFiles[0]);
                 }
-              },
-              required: true
-            }, field))
-          });
-        }
-      }), /*#__PURE__*/_jsx(Controller, {
-        name: "age",
-        control: control,
-        render: function render(_ref9) {
-          var field = _ref9.field;
-          return /*#__PURE__*/_jsx(Field, {
-            label: "Age",
-            labelFor: "age",
-            description: "Please specify your age",
-            state: getFieldState("age"),
-            className: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["w-full"]))),
-            children: /*#__PURE__*/_jsx(Input, _objectSpread({
-              id: "age",
-              type: "number",
-              placeholder: "18",
-              step: 1,
-              required: true
-            }, field))
-          });
-        }
-      }), /*#__PURE__*/_jsx(Controller, {
-        name: "interest",
-        control: control,
-        render: function render(_ref10) {
-          var field = _ref10.field;
-          return /*#__PURE__*/_jsxs(Field, {
-            label: "Interest",
-            labelFor: "interest",
-            description: "Please specify your interest",
-            state: getFieldState("interest"),
-            className: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["w-full"]))),
-            children: [/*#__PURE__*/_jsxs("p", {
-              className: stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["display-caption flex justify-between mb-2"]))),
-              children: [/*#__PURE__*/_jsx("span", {
-                children: "0"
-              }), /*#__PURE__*/_jsx("span", {
-                children: "5"
-              }), /*#__PURE__*/_jsx("span", {
-                children: "10"
-              })]
-            }), /*#__PURE__*/_jsx(RangeSlider, _objectSpread({
-              id: "interest",
-              min: 0,
-              max: 10,
-              required: true
-            }, field))]
-          });
-        }
-      }), /*#__PURE__*/_jsx(Controller, {
-        name: "idealLocation",
-        control: control,
-        render: function render(_ref11) {
-          var field = _ref11.field;
-          return /*#__PURE__*/_jsxs(Field, {
-            label: "Ideal Location",
-            labelFor: "idealLocation",
-            description: "Please specify your ideal location",
-            state: getFieldState("idealLocation"),
-            className: stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["w-full"]))),
-            children: [/*#__PURE__*/_jsxs("p", {
-              className: stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["display-caption flex justify-between mb-2"]))),
-              children: [/*#__PURE__*/_jsx("span", {
-                children: "0 km"
-              }), /*#__PURE__*/_jsx("span", {
-                children: "10 km"
-              }), /*#__PURE__*/_jsx("span", {
-                children: "20 km"
-              }), /*#__PURE__*/_jsx("span", {
-                children: "30 km"
-              }), /*#__PURE__*/_jsx("span", {
-                children: "40 km"
-              }), /*#__PURE__*/_jsx("span", {
-                children: "50 km"
-              })]
-            }), /*#__PURE__*/_jsx(RangeSlider, _objectSpread({
-              id: "idealLocation",
-              min: 0,
-              max: 50,
-              step: 10,
-              required: true
-            }, field))]
-          });
-        }
-      }), /*#__PURE__*/_jsx(Controller, {
-        name: "profilePicture",
-        control: control,
-        render: function render(_ref12) {
-          var field = _ref12.field;
-          return /*#__PURE__*/_jsx(Field, {
-            label: "Profile Picture",
-            labelFor: "profilePicture",
-            description: "Please upload your profile picture, 1 MB minimum",
-            state: getFieldState("profilePicture"),
-            className: stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["w-full"]))),
-            children: /*#__PURE__*/_jsx(Dropzone, _objectSpread(_objectSpread({
-              id: "profilePicture",
-              minSize: 1024 * 1024 * 1,
-              accept: [".png", ".jpg"],
-              required: true
-            }, field), {}, {
-              onChange: function onChange(acceptedFiles, rejectedFiles) {
-                return field.onChange(rejectedFiles.length > 0 ? rejectedFiles[0] : acceptedFiles[0]);
-              }
-            }))
-          });
-        }
-      }), /*#__PURE__*/_jsx(Controller, {
-        name: "bio",
-        control: control,
-        render: function render(_ref13) {
-          var field = _ref13.field;
-          return /*#__PURE__*/_jsx(Field, {
-            label: "Bio",
-            labelFor: "bio",
-            description: "Please write a short bio",
-            state: getFieldState("bio"),
-            className: stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["w-full"]))),
-            children: /*#__PURE__*/_jsx(TextArea, _objectSpread({
-              id: "bio",
-              required: true
-            }, field))
-          });
-        }
-      }), /*#__PURE__*/_jsx(Controller, {
-        name: "acceptTerms",
-        control: control,
-        render: function render(_ref14) {
-          var field = _ref14.field;
-          return /*#__PURE__*/_jsx(Field, {
-            label: "Accept Terms",
-            labelFor: "acceptTerms",
-            description: "Please accept the terms",
-            state: getFieldState("acceptTerms"),
-            className: stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["w-full"]))),
-            inline: true,
-            children: /*#__PURE__*/_jsx(Checkbox, _objectSpread({
-              id: "acceptTerms",
-              required: true,
-              checked: getValues("acceptTerms")
-            }, field))
-          });
-        }
-      }), /*#__PURE__*/_jsx(Controller, {
-        name: "newsletter",
-        control: control,
-        render: function render(_ref15) {
-          var field = _ref15.field;
-          return /*#__PURE__*/_jsx(Field, {
-            label: "Receive Newsletter",
-            labelFor: "newsletter",
-            description: "Do you want to receive our newsletter?",
-            state: getFieldState("newsletter"),
-            className: stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["w-full"]))),
-            inline: true,
-            children: /*#__PURE__*/_jsx(Toggle, _objectSpread({
-              id: "newsletter",
-              required: true,
-              checked: getValues("newsletter")
-            }, field))
-          });
-        }
-      }), /*#__PURE__*/_jsxs("div", {
-        className: stl(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["flex gap-2"]))),
-        children: [/*#__PURE__*/_jsx(ExperimentalFormSubmit, {
-          variant: "primary",
-          "aria-label": "Save the form",
-          children: "Save"
-        }), /*#__PURE__*/_jsx(ExperimentalFormReset, {
-          "aria-label": "Reset the form",
-          onClick: function onClick() {
-            return reset();
-          },
-          children: "Reset"
+              }))
+            });
+          }
+        }), /*#__PURE__*/_jsx(Controller, {
+          name: "bio",
+          control: control,
+          render: function render(_ref13) {
+            var field = _ref13.field;
+            return /*#__PURE__*/_jsx(Field, {
+              label: "Bio",
+              labelFor: "bio",
+              description: "Please write a short bio",
+              state: getFieldState("bio"),
+              className: stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["w-full"]))),
+              children: /*#__PURE__*/_jsx(TextArea, _objectSpread({
+                id: "bio",
+                required: true
+              }, field))
+            });
+          }
+        }), /*#__PURE__*/_jsx(Controller, {
+          name: "acceptTerms",
+          control: control,
+          render: function render(_ref14) {
+            var field = _ref14.field;
+            return /*#__PURE__*/_jsx(Field, {
+              label: "Accept Terms",
+              labelFor: "acceptTerms",
+              description: "Please accept the terms",
+              state: getFieldState("acceptTerms"),
+              className: stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["w-full"]))),
+              inline: true,
+              children: /*#__PURE__*/_jsx(Checkbox, _objectSpread({
+                id: "acceptTerms",
+                required: true,
+                checked: getValues("acceptTerms")
+              }, field))
+            });
+          }
+        }), /*#__PURE__*/_jsx(Controller, {
+          name: "newsletter",
+          control: control,
+          render: function render(_ref15) {
+            var field = _ref15.field;
+            return /*#__PURE__*/_jsx(Field, {
+              label: "Receive Newsletter",
+              labelFor: "newsletter",
+              description: "Do you want to receive our newsletter?",
+              state: getFieldState("newsletter"),
+              className: stl(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["w-full"]))),
+              inline: true,
+              children: /*#__PURE__*/_jsx(Toggle, _objectSpread({
+                id: "newsletter",
+                required: true,
+                checked: getValues("newsletter")
+              }, field))
+            });
+          }
+        }), /*#__PURE__*/_jsxs("div", {
+          className: stl(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["flex gap-2"]))),
+          children: [/*#__PURE__*/_jsx(FormSubmit, {
+            variant: "primary",
+            "aria-label": "Save the form",
+            children: "Save"
+          }), /*#__PURE__*/_jsx(FormReset, {
+            "aria-label": "Reset the form",
+            onClick: function onClick() {
+              return reset();
+            },
+            children: "Reset"
+          })]
         })]
+      }), /*#__PURE__*/_jsx("hr", {
+        className: stl(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["text-grey-500"])))
+      }), /*#__PURE__*/_jsx("code", {
+        className: stl(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["whitespace-pre display-code"]))),
+        children: JSON.stringify(formData, null, 2)
       })]
-    }), /*#__PURE__*/_jsx("hr", {
-      className: stl(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["text-grey-500"])))
-    }), /*#__PURE__*/_jsx("code", {
-      className: stl(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["whitespace-pre display-code"]))),
-      children: JSON.stringify(formData, null, 2)
-    })]
+    })
   });
@@ -631,288 +634,291 @@ };
   useFormikAutoFocusOnError(formik);
-  return /*#__PURE__*/_jsxs("div", {
-    className: stl(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["flex flex-col gap-8 w-3/5"]))),
-    children: [/*#__PURE__*/_jsxs(ExperimentalForm, {
-      onSubmit: function onSubmit(e) {
-        setRevalidationEnabled(true);
-        formik.handleSubmit(e);
-      },
-      onReset: function onReset(e) {
-        setRevalidationEnabled(false);
-        formik.handleReset(e);
-      },
-      className: stl(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["flex flex-col items-start gap-6 min-w-72"]))),
-      children: [/*#__PURE__*/_jsx(ExperimentalFormErrorMessage, {}), /*#__PURE__*/_jsx(Field, {
-        label: "First Name",
-        labelFor: "firstName",
-        description: "Please enter your first name",
-        state: getFieldState("firstName"),
-        className: stl(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["w-full"]))),
-        children: /*#__PURE__*/_jsx(Input, _objectSpread({
-          id: "firstName",
-          placeholder: "John",
-          required: true
-        }, formik.getFieldProps("firstName")))
-      }), /*#__PURE__*/_jsx(Field, {
-        label: "Last Name",
-        labelFor: "lastName",
-        description: "Please enter your last name",
-        state: getFieldState("lastName"),
-        className: stl(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["w-full"]))),
-        children: /*#__PURE__*/_jsx(Input, _objectSpread({
-          id: "lastName",
-          placeholder: "Doe",
-          required: true
-        }, formik.getFieldProps("lastName")))
-      }), /*#__PURE__*/_jsx(Field, {
-        label: "Password",
-        labelFor: "password",
-        description: "Please enter your password",
-        state: getFieldState("password"),
-        className: stl(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["w-full"]))),
-        children: /*#__PURE__*/_jsx(Input, _objectSpread({
-          id: "password",
-          placeholder: "Password",
-          type: "password",
-          required: true
-        }, formik.getFieldProps("password")))
-      }), /*#__PURE__*/_jsx(Field, {
-        label: "Civility",
-        labelFor: civilities[0],
-        description: "Please enter your civility",
-        state: getFieldState("civility"),
-        className: stl(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["w-full"]))),
-        children: /*#__PURE__*/_jsx("div", {
-          className: stl(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["flex gap-4 display-body"]))),
-          children: civilities.map(function (civility, index) {
-            return /*#__PURE__*/_jsxs("label", {
-              id: index === 0 ? "civility" : undefined,
-              htmlFor: civility,
-              className: stl(_templateObject32 || (_templateObject32 = _taggedTemplateLiteral(["flex items-center gap-1"]))),
-              children: [/*#__PURE__*/_jsx(RadioButton, _objectSpread({
-                id: civility,
-                "aria-labelledby": civility,
-                required: true
-              }, formik.getFieldProps({
-                name: "civility",
-                value: civility,
-                type: "radio"
-              }))), capitalize(civility)]
-            }, civility);
+  return /*#__PURE__*/_jsx("div", {
+    className: stl(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["@container w-full flex justify-center"]))),
+    children: /*#__PURE__*/_jsxs("div", {
+      className: stl(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["flex flex-col gap-8 w-full @lg:w-1/2"]))),
+      children: [/*#__PURE__*/_jsxs(Form, {
+        onSubmit: function onSubmit(e) {
+          setRevalidationEnabled(true);
+          formik.handleSubmit(e);
+        },
+        onReset: function onReset(e) {
+          setRevalidationEnabled(false);
+          formik.handleReset(e);
+        },
+        className: stl(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["flex flex-col items-start gap-6 min-w-72"]))),
+        children: [/*#__PURE__*/_jsx(FormErrorMessage, {}), /*#__PURE__*/_jsx(Field, {
+          label: "First Name",
+          labelFor: "firstName",
+          description: "Please enter your first name",
+          state: getFieldState("firstName"),
+          className: stl(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["w-full"]))),
+          children: /*#__PURE__*/_jsx(Input, _objectSpread({
+            id: "firstName",
+            placeholder: "John",
+            required: true
+          }, formik.getFieldProps("firstName")))
+        }), /*#__PURE__*/_jsx(Field, {
+          label: "Last Name",
+          labelFor: "lastName",
+          description: "Please enter your last name",
+          state: getFieldState("lastName"),
+          className: stl(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["w-full"]))),
+          children: /*#__PURE__*/_jsx(Input, _objectSpread({
+            id: "lastName",
+            placeholder: "Doe",
+            required: true
+          }, formik.getFieldProps("lastName")))
+        }), /*#__PURE__*/_jsx(Field, {
+          label: "Password",
+          labelFor: "password",
+          description: "Please enter your password",
+          state: getFieldState("password"),
+          className: stl(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["w-full"]))),
+          children: /*#__PURE__*/_jsx(Input, _objectSpread({
+            id: "password",
+            placeholder: "Password",
+            type: "password",
+            required: true
+          }, formik.getFieldProps("password")))
+        }), /*#__PURE__*/_jsx(Field, {
+          label: "Civility",
+          labelFor: civilities[0],
+          description: "Please enter your civility",
+          state: getFieldState("civility"),
+          className: stl(_templateObject32 || (_templateObject32 = _taggedTemplateLiteral(["w-full"]))),
+          children: /*#__PURE__*/_jsx("div", {
+            className: stl(_templateObject33 || (_templateObject33 = _taggedTemplateLiteral(["flex gap-4 display-body"]))),
+            children: civilities.map(function (civility, index) {
+              return /*#__PURE__*/_jsxs("label", {
+                id: index === 0 ? "civility" : undefined,
+                htmlFor: civility,
+                className: stl(_templateObject34 || (_templateObject34 = _taggedTemplateLiteral(["flex items-center gap-1"]))),
+                children: [/*#__PURE__*/_jsx(RadioButton, _objectSpread({
+                  id: civility,
+                  "aria-labelledby": civility,
+                  required: true
+                }, formik.getFieldProps({
+                  name: "civility",
+                  value: civility,
+                  type: "radio"
+                }))), capitalize(civility)]
+              }, civility);
+            })
           })
-        })
-      }), /*#__PURE__*/_jsx(Field, {
-        label: "Gender",
-        labelFor: "gender",
-        description: "Please specify your gender",
-        state: getFieldState("gender"),
-        className: stl(_templateObject33 || (_templateObject33 = _taggedTemplateLiteral(["w-full"]))),
-        children: /*#__PURE__*/_jsx(Select, _objectSpread(_objectSpread({
-          id: "gender",
-          required: true
-        }, formik.getFieldProps("gender")), {}, {
-          children: genders.map(function (gender) {
-            return /*#__PURE__*/_jsx("option", {
-              value: gender,
-              children: capitalize(gender)
-            }, gender);
+        }), /*#__PURE__*/_jsx(Field, {
+          label: "Gender",
+          labelFor: "gender",
+          description: "Please specify your gender",
+          state: getFieldState("gender"),
+          className: stl(_templateObject35 || (_templateObject35 = _taggedTemplateLiteral(["w-full"]))),
+          children: /*#__PURE__*/_jsx(Select, _objectSpread(_objectSpread({
+            id: "gender",
+            required: true
+          }, formik.getFieldProps("gender")), {}, {
+            children: genders.map(function (gender) {
+              return /*#__PURE__*/_jsx("option", {
+                value: gender,
+                children: capitalize(gender)
+              }, gender);
+            })
+          }))
+        }), /*#__PURE__*/_jsx(Field, {
+          label: "Job Positions",
+          labelFor: "jobPositions",
+          description: "Please specify the job positions you are interested in",
+          state: getFieldState("jobPositions"),
+          className: stl(_templateObject36 || (_templateObject36 = _taggedTemplateLiteral(["w-full"]))),
+          children: /*#__PURE__*/_jsx(AutoComplete, {
+            id: "jobPositions",
+            options: jobPositions,
+            placeholder: jobPositions[0].label,
+            multiple: true,
+            required: true,
+            clearable: true,
+            onChange: function onChange(value) {
+              return formik.setFieldValue("jobPositions", value);
+            },
+            onBlur: formik.handleBlur,
+            value: formik.values.jobPositions
           })
-        }))
-      }), /*#__PURE__*/_jsx(Field, {
-        label: "Job Positions",
-        labelFor: "jobPositions",
-        description: "Please specify the job positions you are interested in",
-        state: getFieldState("jobPositions"),
-        className: stl(_templateObject34 || (_templateObject34 = _taggedTemplateLiteral(["w-full"]))),
-        children: /*#__PURE__*/_jsx(AutoComplete, {
-          id: "jobPositions",
-          options: jobPositions,
-          placeholder: jobPositions[0].label,
-          multiple: true,
-          required: true,
-          clearable: true,
-          onChange: function onChange(value) {
-            return formik.setFieldValue("jobPositions", value);
-          },
-          onBlur: formik.handleBlur,
-          value: formik.values.jobPositions
-        })
-      }), /*#__PURE__*/_jsx(Field, {
-        label: "Employment Status",
-        labelFor: "employmentStatus",
-        description: "Please specify your employment status",
-        state: getFieldState("employmentStatus"),
-        className: stl(_templateObject35 || (_templateObject35 = _taggedTemplateLiteral(["w-full"]))),
-        children: /*#__PURE__*/_jsx(RadioGroup, {
-          id: "employmentStatus",
-          required: true,
-          onChange: function onChange(value) {
-            return formik.setFieldValue("employmentStatus", value);
-          },
-          value: formik.values.employmentStatus,
-          children: employmentStatuses.map(function (employmentStatus) {
-            return /*#__PURE__*/_jsx(RadioGroup.Item, {
-              value: employmentStatus,
-              children: capitalize(employmentStatus)
-            }, employmentStatus);
+        }), /*#__PURE__*/_jsx(Field, {
+          label: "Employment Status",
+          labelFor: "employmentStatus",
+          description: "Please specify your employment status",
+          state: getFieldState("employmentStatus"),
+          className: stl(_templateObject37 || (_templateObject37 = _taggedTemplateLiteral(["w-full"]))),
+          children: /*#__PURE__*/_jsx(RadioGroup, {
+            id: "employmentStatus",
+            required: true,
+            onChange: function onChange(value) {
+              return formik.setFieldValue("employmentStatus", value);
+            },
+            value: formik.values.employmentStatus,
+            children: employmentStatuses.map(function (employmentStatus) {
+              return /*#__PURE__*/_jsx(RadioGroup.Item, {
+                value: employmentStatus,
+                children: capitalize(employmentStatus)
+              }, employmentStatus);
+            })
           })
-        })
-      }), /*#__PURE__*/_jsx(Field, {
-        label: "Birthday",
-        labelFor: "birthday",
-        description: "Please specify your birthday",
-        state: getFieldState("birthday"),
-        className: stl(_templateObject36 || (_templateObject36 = _taggedTemplateLiteral(["w-full"]))),
-        children: /*#__PURE__*/_jsx(DatePicker, {
-          id: "birthday",
-          calendarProps: {
-            disabled: {
-              after: now
+        }), /*#__PURE__*/_jsx(Field, {
+          label: "Birthday",
+          labelFor: "birthday",
+          description: "Please specify your birthday",
+          state: getFieldState("birthday"),
+          className: stl(_templateObject38 || (_templateObject38 = _taggedTemplateLiteral(["w-full"]))),
+          children: /*#__PURE__*/_jsx(DatePicker, {
+            id: "birthday",
+            calendarProps: {
+              disabled: {
+                after: now
+              }
+            },
+            required: true,
+            onChange: function onChange(value) {
+              return formik.setFieldValue("birthday", value);
+            },
+            value: formik.values.birthday
+          })
+        }), /*#__PURE__*/_jsx(Field, {
+          label: "Age",
+          labelFor: "age",
+          description: "Please specify your age",
+          state: getFieldState("age"),
+          className: stl(_templateObject39 || (_templateObject39 = _taggedTemplateLiteral(["w-full"]))),
+          children: /*#__PURE__*/_jsx(Input, _objectSpread({
+            id: "age",
+            type: "number",
+            placeholder: "18",
+            step: 1,
+            required: true
+          }, formik.getFieldProps("age")))
+        }), /*#__PURE__*/_jsxs(Field, {
+          label: "Interest",
+          labelFor: "interest",
+          description: "Please specify your interest",
+          state: getFieldState("interest"),
+          className: stl(_templateObject40 || (_templateObject40 = _taggedTemplateLiteral(["w-full"]))),
+          children: [/*#__PURE__*/_jsxs("p", {
+            className: stl(_templateObject41 || (_templateObject41 = _taggedTemplateLiteral(["display-caption flex justify-between mb-2"]))),
+            children: [/*#__PURE__*/_jsx("span", {
+              children: "0"
+            }), /*#__PURE__*/_jsx("span", {
+              children: "5"
+            }), /*#__PURE__*/_jsx("span", {
+              children: "10"
+            })]
+          }), /*#__PURE__*/_jsx(RangeSlider, {
+            id: "interest",
+            min: 0,
+            max: 10,
+            required: true,
+            onChange: function onChange(value) {
+              return formik.setFieldValue("interest", value);
+            },
+            value: formik.values.interest
+          })]
+        }), /*#__PURE__*/_jsxs(Field, {
+          label: "Ideal Location",
+          labelFor: "idealLocation",
+          description: "Please specify your ideal location",
+          state: getFieldState("idealLocation"),
+          className: stl(_templateObject42 || (_templateObject42 = _taggedTemplateLiteral(["w-full"]))),
+          children: [/*#__PURE__*/_jsxs("p", {
+            className: stl(_templateObject43 || (_templateObject43 = _taggedTemplateLiteral(["display-caption flex justify-between mb-2"]))),
+            children: [/*#__PURE__*/_jsx("span", {
+              children: "0 km"
+            }), /*#__PURE__*/_jsx("span", {
+              children: "10 km"
+            }), /*#__PURE__*/_jsx("span", {
+              children: "20 km"
+            }), /*#__PURE__*/_jsx("span", {
+              children: "30 km"
+            }), /*#__PURE__*/_jsx("span", {
+              children: "40 km"
+            }), /*#__PURE__*/_jsx("span", {
+              children: "50 km"
+            })]
+          }), /*#__PURE__*/_jsx(RangeSlider, {
+            id: "idealLocation",
+            min: 0,
+            max: 50,
+            step: 10,
+            required: true,
+            onChange: function onChange(value) {
+              return formik.setFieldValue("idealLocation", value);
+            },
+            value: formik.values.idealLocation
+          })]
+        }), /*#__PURE__*/_jsx(Field, {
+          label: "Profile Picture",
+          labelFor: "profilePicture",
+          description: "Please upload your profile picture, 1 MB minimum",
+          state: getFieldState("profilePicture"),
+          className: stl(_templateObject44 || (_templateObject44 = _taggedTemplateLiteral(["w-full"]))),
+          children: /*#__PURE__*/_jsx(Dropzone, {
+            id: "profilePicture",
+            minSize: 1024 * 1024 * 1,
+            accept: [".png", ".jpg"],
+            required: true,
+            onChange: function onChange(acceptedFiles, rejectedFiles) {
+              return formik.setFieldValue("profilePicture", rejectedFiles.length > 0 ? rejectedFiles[0] : acceptedFiles[0]);
             }
-          },
-          required: true,
-          onChange: function onChange(value) {
-            return formik.setFieldValue("birthday", value);
-          },
-          value: formik.values.birthday
-        })
-      }), /*#__PURE__*/_jsx(Field, {
-        label: "Age",
-        labelFor: "age",
-        description: "Please specify your age",
-        state: getFieldState("age"),
-        className: stl(_templateObject37 || (_templateObject37 = _taggedTemplateLiteral(["w-full"]))),
-        children: /*#__PURE__*/_jsx(Input, _objectSpread({
-          id: "age",
-          type: "number",
-          placeholder: "18",
-          step: 1,
-          required: true
-        }, formik.getFieldProps("age")))
-      }), /*#__PURE__*/_jsxs(Field, {
-        label: "Interest",
-        labelFor: "interest",
-        description: "Please specify your interest",
-        state: getFieldState("interest"),
-        className: stl(_templateObject38 || (_templateObject38 = _taggedTemplateLiteral(["w-full"]))),
-        children: [/*#__PURE__*/_jsxs("p", {
-          className: stl(_templateObject39 || (_templateObject39 = _taggedTemplateLiteral(["display-caption flex justify-between mb-2"]))),
-          children: [/*#__PURE__*/_jsx("span", {
-            children: "0"
-          }), /*#__PURE__*/_jsx("span", {
-            children: "5"
-          }), /*#__PURE__*/_jsx("span", {
-            children: "10"
+          })
+        }), /*#__PURE__*/_jsx(Field, {
+          label: "Bio",
+          labelFor: "bio",
+          description: "Please write a short bio",
+          state: getFieldState("bio"),
+          className: stl(_templateObject45 || (_templateObject45 = _taggedTemplateLiteral(["w-full"]))),
+          children: /*#__PURE__*/_jsx(TextArea, _objectSpread({
+            id: "bio",
+            required: true
+          }, formik.getFieldProps("bio")))
+        }), /*#__PURE__*/_jsx(Field, {
+          label: "Accept Terms",
+          labelFor: "acceptTerms",
+          description: "Please accept the terms",
+          state: getFieldState("acceptTerms"),
+          className: stl(_templateObject46 || (_templateObject46 = _taggedTemplateLiteral(["w-full"]))),
+          inline: true,
+          children: /*#__PURE__*/_jsx(Checkbox, _objectSpread({
+            id: "acceptTerms",
+            required: true,
+            checked: formik.values.acceptTerms
+          }, formik.getFieldProps("acceptTerms")))
+        }), /*#__PURE__*/_jsx(Field, {
+          label: "Receive Newsletter",
+          labelFor: "newsletter",
+          description: "Do you want to receive our newsletter?",
+          state: getFieldState("newsletter"),
+          className: stl(_templateObject47 || (_templateObject47 = _taggedTemplateLiteral(["w-full"]))),
+          inline: true,
+          children: /*#__PURE__*/_jsx(Toggle, _objectSpread({
+            id: "newsletter",
+            required: true,
+            checked: formik.values.newsletter
+          }, formik.getFieldProps("newsletter")))
+        }), /*#__PURE__*/_jsxs("div", {
+          className: stl(_templateObject48 || (_templateObject48 = _taggedTemplateLiteral(["flex gap-2"]))),
+          children: [/*#__PURE__*/_jsx(FormSubmit, {
+            variant: "primary",
+            "aria-label": "Save the form",
+            children: "Save"
+          }), /*#__PURE__*/_jsx(FormReset, {
+            "aria-label": "Reset the form",
+            onClick: function onClick() {
+              return formik.resetForm();
+            },
+            children: "Reset"
           })]
-        }), /*#__PURE__*/_jsx(RangeSlider, {
-          id: "interest",
-          min: 0,
-          max: 10,
-          required: true,
-          onChange: function onChange(value) {
-            return formik.setFieldValue("interest", value);
-          },
-          value: formik.values.interest
         })]
-      }), /*#__PURE__*/_jsxs(Field, {
-        label: "Ideal Location",
-        labelFor: "idealLocation",
-        description: "Please specify your ideal location",
-        state: getFieldState("idealLocation"),
-        className: stl(_templateObject40 || (_templateObject40 = _taggedTemplateLiteral(["w-full"]))),
-        children: [/*#__PURE__*/_jsxs("p", {
-          className: stl(_templateObject41 || (_templateObject41 = _taggedTemplateLiteral(["display-caption flex justify-between mb-2"]))),
-          children: [/*#__PURE__*/_jsx("span", {
-            children: "0 km"
-          }), /*#__PURE__*/_jsx("span", {
-            children: "10 km"
-          }), /*#__PURE__*/_jsx("span", {
-            children: "20 km"
-          }), /*#__PURE__*/_jsx("span", {
-            children: "30 km"
-          }), /*#__PURE__*/_jsx("span", {
-            children: "40 km"
-          }), /*#__PURE__*/_jsx("span", {
-            children: "50 km"
-          })]
-        }), /*#__PURE__*/_jsx(RangeSlider, {
-          id: "idealLocation",
-          min: 0,
-          max: 50,
-          step: 10,
-          required: true,
-          onChange: function onChange(value) {
-            return formik.setFieldValue("idealLocation", value);
-          },
-          value: formik.values.idealLocation
-        })]
-      }), /*#__PURE__*/_jsx(Field, {
-        label: "Profile Picture",
-        labelFor: "profilePicture",
-        description: "Please upload your profile picture, 1 MB minimum",
-        state: getFieldState("profilePicture"),
-        className: stl(_templateObject42 || (_templateObject42 = _taggedTemplateLiteral(["w-full"]))),
-        children: /*#__PURE__*/_jsx(Dropzone, {
-          id: "profilePicture",
-          minSize: 1024 * 1024 * 1,
-          accept: [".png", ".jpg"],
-          required: true,
-          onChange: function onChange(acceptedFiles, rejectedFiles) {
-            return formik.setFieldValue("profilePicture", rejectedFiles.length > 0 ? rejectedFiles[0] : acceptedFiles[0]);
-          }
-        })
-      }), /*#__PURE__*/_jsx(Field, {
-        label: "Bio",
-        labelFor: "bio",
-        description: "Please write a short bio",
-        state: getFieldState("bio"),
-        className: stl(_templateObject43 || (_templateObject43 = _taggedTemplateLiteral(["w-full"]))),
-        children: /*#__PURE__*/_jsx(TextArea, _objectSpread({
-          id: "bio",
-          required: true
-        }, formik.getFieldProps("bio")))
-      }), /*#__PURE__*/_jsx(Field, {
-        label: "Accept Terms",
-        labelFor: "acceptTerms",
-        description: "Please accept the terms",
-        state: getFieldState("acceptTerms"),
-        className: stl(_templateObject44 || (_templateObject44 = _taggedTemplateLiteral(["w-full"]))),
-        inline: true,
-        children: /*#__PURE__*/_jsx(Checkbox, _objectSpread({
-          id: "acceptTerms",
-          required: true,
-          checked: formik.values.acceptTerms
-        }, formik.getFieldProps("acceptTerms")))
-      }), /*#__PURE__*/_jsx(Field, {
-        label: "Receive Newsletter",
-        labelFor: "newsletter",
-        description: "Do you want to receive our newsletter?",
-        state: getFieldState("newsletter"),
-        className: stl(_templateObject45 || (_templateObject45 = _taggedTemplateLiteral(["w-full"]))),
-        inline: true,
-        children: /*#__PURE__*/_jsx(Toggle, _objectSpread({
-          id: "newsletter",
-          required: true,
-          checked: formik.values.newsletter
-        }, formik.getFieldProps("newsletter")))
-      }), /*#__PURE__*/_jsxs("div", {
-        className: stl(_templateObject46 || (_templateObject46 = _taggedTemplateLiteral(["flex gap-2"]))),
-        children: [/*#__PURE__*/_jsx(ExperimentalFormSubmit, {
-          variant: "primary",
-          "aria-label": "Save the form",
-          children: "Save"
-        }), /*#__PURE__*/_jsx(ExperimentalFormReset, {
-          "aria-label": "Reset the form",
-          onClick: function onClick() {
-            return formik.resetForm();
-          },
-          children: "Reset"
-        })]
+      }), /*#__PURE__*/_jsx("hr", {
+        className: stl(_templateObject49 || (_templateObject49 = _taggedTemplateLiteral(["text-grey-500"])))
+      }), /*#__PURE__*/_jsx("code", {
+        className: stl(_templateObject50 || (_templateObject50 = _taggedTemplateLiteral(["whitespace-pre display-code"]))),
+        children: JSON.stringify(formData, null, 2)
       })]
-    }), /*#__PURE__*/_jsx("hr", {
-      className: stl(_templateObject47 || (_templateObject47 = _taggedTemplateLiteral(["text-grey-500"])))
-    }), /*#__PURE__*/_jsx("code", {
-      className: stl(_templateObject48 || (_templateObject48 = _taggedTemplateLiteral(["whitespace-pre display-code"]))),
-      children: JSON.stringify(formData, null, 2)
-    })]
+    })
   });
 };

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

 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
 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; }
@@ -16,3 +16,3 @@ 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 { Input } from "../../Input";
-import { ExperimentalForm, ExperimentalFormErrorMessage, ExperimentalFormReset, ExperimentalFormSubmit } from "../Form";
+import { Form, FormErrorMessage, FormReset, FormSubmit } from "../Form";
 import { useFormikAutoFocusOnError } from "./utils/useFormikAutoFocusOnError";
@@ -70,70 +70,73 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
   };
-  return /*#__PURE__*/_jsxs("div", {
-    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex flex-col gap-8 w-3/5"]))),
-    children: [/*#__PURE__*/_jsxs(ExperimentalForm, {
-      onSubmit: handleSubmit(function (data) {
-        return setFormData(data);
-      }),
-      onReset: function onReset() {
-        return setFormData(initialFormData);
-      },
-      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex flex-col items-start gap-6 min-w-72"]))),
-      children: [/*#__PURE__*/_jsx(ExperimentalFormErrorMessage, {}), /*#__PURE__*/_jsx(Controller, {
-        name: "password",
-        control: control,
-        render: function render(_ref) {
-          var field = _ref.field;
-          return /*#__PURE__*/_jsx(Field, {
-            label: "Password",
-            labelFor: "password",
-            description: "Please enter your password",
-            state: getFieldState("password"),
-            className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["w-full"]))),
-            children: /*#__PURE__*/_jsx(Input, _objectSpread({
-              id: "password",
-              placeholder: "Password",
-              type: "password",
-              required: true
-            }, field))
-          });
-        }
-      }), /*#__PURE__*/_jsx(Controller, {
-        name: "confirmPassword",
-        control: control,
-        render: function render(_ref2) {
-          var field = _ref2.field;
-          return /*#__PURE__*/_jsx(Field, {
-            label: "Confirm Password",
-            labelFor: "confirmPassword",
-            description: "Please confirm your password",
-            state: getFieldState("confirmPassword"),
-            className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["w-full"]))),
-            children: /*#__PURE__*/_jsx(Input, _objectSpread({
-              id: "confirmPassword",
-              placeholder: "Confirm password",
-              type: "password",
-              required: true
-            }, field))
-          });
-        }
-      }), /*#__PURE__*/_jsxs("div", {
-        className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["flex gap-2"]))),
-        children: [/*#__PURE__*/_jsx(ExperimentalFormSubmit, {
-          variant: "primary",
-          "aria-label": "Save the form",
-          children: "Save"
-        }), /*#__PURE__*/_jsx(ExperimentalFormReset, {
-          "aria-label": "Reset the form",
-          onClick: function onClick() {
-            return reset();
-          },
-          children: "Reset"
+  return /*#__PURE__*/_jsx("div", {
+    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["@container w-full flex justify-center"]))),
+    children: /*#__PURE__*/_jsxs("div", {
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex flex-col gap-8 w-full @lg:w-1/2"]))),
+      children: [/*#__PURE__*/_jsxs(Form, {
+        onSubmit: handleSubmit(function (data) {
+          return setFormData(data);
+        }),
+        onReset: function onReset() {
+          return setFormData(initialFormData);
+        },
+        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["flex flex-col items-start gap-6 min-w-72"]))),
+        children: [/*#__PURE__*/_jsx(FormErrorMessage, {}), /*#__PURE__*/_jsx(Controller, {
+          name: "password",
+          control: control,
+          render: function render(_ref) {
+            var field = _ref.field;
+            return /*#__PURE__*/_jsx(Field, {
+              label: "Password",
+              labelFor: "password",
+              description: "Please enter your password",
+              state: getFieldState("password"),
+              className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["w-full"]))),
+              children: /*#__PURE__*/_jsx(Input, _objectSpread({
+                id: "password",
+                placeholder: "Password",
+                type: "password",
+                required: true
+              }, field))
+            });
+          }
+        }), /*#__PURE__*/_jsx(Controller, {
+          name: "confirmPassword",
+          control: control,
+          render: function render(_ref2) {
+            var field = _ref2.field;
+            return /*#__PURE__*/_jsx(Field, {
+              label: "Confirm Password",
+              labelFor: "confirmPassword",
+              description: "Please confirm your password",
+              state: getFieldState("confirmPassword"),
+              className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["w-full"]))),
+              children: /*#__PURE__*/_jsx(Input, _objectSpread({
+                id: "confirmPassword",
+                placeholder: "Confirm password",
+                type: "password",
+                required: true
+              }, field))
+            });
+          }
+        }), /*#__PURE__*/_jsxs("div", {
+          className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["flex gap-2"]))),
+          children: [/*#__PURE__*/_jsx(FormSubmit, {
+            variant: "primary",
+            "aria-label": "Save the form",
+            children: "Save"
+          }), /*#__PURE__*/_jsx(FormReset, {
+            "aria-label": "Reset the form",
+            onClick: function onClick() {
+              return reset();
+            },
+            children: "Reset"
+          })]
         })]
+      }), /*#__PURE__*/_jsx("hr", {
+        className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["text-grey-500"])))
+      }), /*#__PURE__*/_jsx("code", {
+        className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["whitespace-pre display-code"]))),
+        children: JSON.stringify(formData, null, 2)
       })]
-    }), /*#__PURE__*/_jsx("hr", {
-      className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["text-grey-500"])))
-    }), /*#__PURE__*/_jsx("code", {
-      className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["whitespace-pre display-code"]))),
-      children: JSON.stringify(formData, null, 2)
-    })]
+    })
   });
@@ -184,59 +187,62 @@ };
   useFormikAutoFocusOnError(formik);
-  return /*#__PURE__*/_jsxs("div", {
-    className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["flex flex-col gap-8 w-3/5"]))),
-    children: [/*#__PURE__*/_jsxs(ExperimentalForm, {
-      onSubmit: function onSubmit(e) {
-        setRevalidationEnabled(true);
-        formik.handleSubmit(e);
-      },
-      onReset: function onReset(e) {
-        setRevalidationEnabled(false);
-        formik.handleReset(e);
-      },
-      className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["flex flex-col items-start gap-6 min-w-72"]))),
-      children: [/*#__PURE__*/_jsx(ExperimentalFormErrorMessage, {}), /*#__PURE__*/_jsx(Field, {
-        label: "Password",
-        labelFor: "password",
-        description: "Please enter your password",
-        state: getFieldState("password"),
-        className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["w-full"]))),
-        children: /*#__PURE__*/_jsx(Input, _objectSpread({
-          id: "password",
-          placeholder: "Password",
-          type: "password",
-          required: true
-        }, formik.getFieldProps("password")))
-      }), /*#__PURE__*/_jsx(Field, {
-        label: "Confirm Password",
-        labelFor: "confirmPassword",
-        description: "Please confirm your password",
-        state: getFieldState("confirmPassword"),
-        className: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["w-full"]))),
-        children: /*#__PURE__*/_jsx(Input, _objectSpread({
-          id: "confirmPassword",
-          placeholder: "Confirm password",
-          type: "password",
-          required: true
-        }, formik.getFieldProps("confirmPassword")))
-      }), /*#__PURE__*/_jsxs("div", {
-        className: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["flex gap-2"]))),
-        children: [/*#__PURE__*/_jsx(ExperimentalFormSubmit, {
-          variant: "primary",
-          "aria-label": "Save the form",
-          children: "Save"
-        }), /*#__PURE__*/_jsx(ExperimentalFormReset, {
-          "aria-label": "Reset the form",
-          onClick: function onClick() {
-            return formik.resetForm();
-          },
-          children: "Reset"
+  return /*#__PURE__*/_jsx("div", {
+    className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["@container w-full flex justify-center"]))),
+    children: /*#__PURE__*/_jsxs("div", {
+      className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["flex flex-col gap-8 w-full @lg:w-1/2"]))),
+      children: [/*#__PURE__*/_jsxs(Form, {
+        onSubmit: function onSubmit(e) {
+          setRevalidationEnabled(true);
+          formik.handleSubmit(e);
+        },
+        onReset: function onReset(e) {
+          setRevalidationEnabled(false);
+          formik.handleReset(e);
+        },
+        className: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["flex flex-col items-start gap-6 min-w-72"]))),
+        children: [/*#__PURE__*/_jsx(FormErrorMessage, {}), /*#__PURE__*/_jsx(Field, {
+          label: "Password",
+          labelFor: "password",
+          description: "Please enter your password",
+          state: getFieldState("password"),
+          className: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["w-full"]))),
+          children: /*#__PURE__*/_jsx(Input, _objectSpread({
+            id: "password",
+            placeholder: "Password",
+            type: "password",
+            required: true
+          }, formik.getFieldProps("password")))
+        }), /*#__PURE__*/_jsx(Field, {
+          label: "Confirm Password",
+          labelFor: "confirmPassword",
+          description: "Please confirm your password",
+          state: getFieldState("confirmPassword"),
+          className: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["w-full"]))),
+          children: /*#__PURE__*/_jsx(Input, _objectSpread({
+            id: "confirmPassword",
+            placeholder: "Confirm password",
+            type: "password",
+            required: true
+          }, formik.getFieldProps("confirmPassword")))
+        }), /*#__PURE__*/_jsxs("div", {
+          className: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["flex gap-2"]))),
+          children: [/*#__PURE__*/_jsx(FormSubmit, {
+            variant: "primary",
+            "aria-label": "Save the form",
+            children: "Save"
+          }), /*#__PURE__*/_jsx(FormReset, {
+            "aria-label": "Reset the form",
+            onClick: function onClick() {
+              return formik.resetForm();
+            },
+            children: "Reset"
+          })]
         })]
+      }), /*#__PURE__*/_jsx("hr", {
+        className: stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["text-grey-500"])))
+      }), /*#__PURE__*/_jsx("code", {
+        className: stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["whitespace-pre display-code"]))),
+        children: JSON.stringify(formData, null, 2)
       })]
-    }), /*#__PURE__*/_jsx("hr", {
-      className: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["text-grey-500"])))
-    }), /*#__PURE__*/_jsx("code", {
-      className: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["whitespace-pre display-code"]))),
-      children: JSON.stringify(formData, null, 2)
-    })]
+    })
   });
 };

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

 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30;
 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; }
@@ -19,3 +19,3 @@ 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 { Input } from "../../Input";
-import { ExperimentalForm, ExperimentalFormErrorMessage, ExperimentalFormReset, ExperimentalFormSubmit } from "../Form";
+import { Form, FormErrorMessage, FormReset, FormSubmit } from "../Form";
 import { useFormikAutoFocusOnError } from "./utils/useFormikAutoFocusOnError";
@@ -80,111 +80,114 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
   var dirtyFieldsNb = Object.keys(formState.dirtyFields).length;
-  return /*#__PURE__*/_jsxs("div", {
-    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex flex-col gap-8 w-3/5"]))),
-    children: [/*#__PURE__*/_jsxs(ExperimentalForm, {
-      onSubmit: handleSubmit(function (data) {
-        return setFormData(data);
-      }),
-      onReset: function onReset() {
-        return setFormData(initialFormData);
-      },
-      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex flex-col items-start gap-6 min-w-72"]))),
-      children: [/*#__PURE__*/_jsx(ExperimentalFormErrorMessage, {}), /*#__PURE__*/_jsx(Controller, {
-        name: "name",
-        control: control,
-        render: function render(_ref) {
-          var field = _ref.field;
-          return /*#__PURE__*/_jsx(Field, {
-            label: "Name",
-            labelFor: "name",
-            description: "Please enter your name",
-            state: getFieldState("name"),
-            className: cx(stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["w-full"]))), isFieldDirty("name") && stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["text-xenon-500"])))),
-            children: /*#__PURE__*/_jsx(Input, _objectSpread({
-              id: "name",
-              placeholder: "Name",
-              required: true
-            }, field))
-          });
-        }
-      }), /*#__PURE__*/_jsx(Controller, {
-        name: "email",
-        control: control,
-        render: function render(_ref2) {
-          var field = _ref2.field;
-          return /*#__PURE__*/_jsx(Field, {
-            label: "Email",
-            labelFor: "email",
-            description: "Please enter your email",
-            state: getFieldState("email"),
-            className: cx(stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["w-full"]))), isFieldDirty("email") && stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["text-xenon-500"])))),
-            children: /*#__PURE__*/_jsx(Input, _objectSpread({
-              id: "email",
-              placeholder: "Email",
-              required: true
-            }, field))
-          });
-        }
-      }), /*#__PURE__*/_jsx(Controller, {
-        name: "company",
-        control: control,
-        render: function render(_ref3) {
-          var field = _ref3.field;
-          return /*#__PURE__*/_jsx(Field, {
-            label: "Company",
-            labelFor: "company",
-            description: "Please enter your company",
-            state: getFieldState("company"),
-            className: cx(stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["w-full"]))), isFieldDirty("company") && stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["text-xenon-500"])))),
-            children: /*#__PURE__*/_jsx(Input, _objectSpread({
-              id: "company",
-              placeholder: "Company",
-              required: true
-            }, field))
-          });
-        }
-      }), /*#__PURE__*/_jsx(Controller, {
-        name: "phoneNumber",
-        control: control,
-        render: function render(_ref4) {
-          var field = _ref4.field;
-          return /*#__PURE__*/_jsx(Field, {
-            label: "Phone Number",
-            labelFor: "phoneNumber",
-            description: "Please enter your phone number",
-            state: getFieldState("phoneNumber"),
-            className: cx(stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["w-full"]))), isFieldDirty("phoneNumber") && stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["text-xenon-500"])))),
-            children: /*#__PURE__*/_jsx(Input, _objectSpread({
-              id: "phoneNumber",
-              placeholder: "Phone number",
-              required: true
-            }, field))
-          });
-        }
-      }), /*#__PURE__*/_jsxs("div", {
-        className: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["flex gap-2"]))),
-        children: [/*#__PURE__*/_jsx(ExperimentalFormSubmit, {
-          variant: "primary",
-          "aria-label": "Save updated changes",
-          disabled: !formState.isDirty,
-          children: "Save changes"
-        }), /*#__PURE__*/_jsx(ExperimentalFormReset, {
-          "aria-label": "Reset the form",
-          disabled: !formState.isDirty,
-          onClick: function onClick() {
-            return reset();
-          },
-          children: "Reset"
+  return /*#__PURE__*/_jsx("div", {
+    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["@container w-full flex justify-center"]))),
+    children: /*#__PURE__*/_jsxs("div", {
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex flex-col gap-8 w-full @lg:w-1/2"]))),
+      children: [/*#__PURE__*/_jsxs(Form, {
+        onSubmit: handleSubmit(function (data) {
+          return setFormData(data);
+        }),
+        onReset: function onReset() {
+          return setFormData(initialFormData);
+        },
+        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["flex flex-col items-start gap-6 min-w-72"]))),
+        children: [/*#__PURE__*/_jsx(FormErrorMessage, {}), /*#__PURE__*/_jsx(Controller, {
+          name: "name",
+          control: control,
+          render: function render(_ref) {
+            var field = _ref.field;
+            return /*#__PURE__*/_jsx(Field, {
+              label: "Name",
+              labelFor: "name",
+              description: "Please enter your name",
+              state: getFieldState("name"),
+              className: cx(stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["w-full"]))), isFieldDirty("name") && stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["text-xenon-500"])))),
+              children: /*#__PURE__*/_jsx(Input, _objectSpread({
+                id: "name",
+                placeholder: "Name",
+                required: true
+              }, field))
+            });
+          }
+        }), /*#__PURE__*/_jsx(Controller, {
+          name: "email",
+          control: control,
+          render: function render(_ref2) {
+            var field = _ref2.field;
+            return /*#__PURE__*/_jsx(Field, {
+              label: "Email",
+              labelFor: "email",
+              description: "Please enter your email",
+              state: getFieldState("email"),
+              className: cx(stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["w-full"]))), isFieldDirty("email") && stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["text-xenon-500"])))),
+              children: /*#__PURE__*/_jsx(Input, _objectSpread({
+                id: "email",
+                placeholder: "Email",
+                required: true
+              }, field))
+            });
+          }
+        }), /*#__PURE__*/_jsx(Controller, {
+          name: "company",
+          control: control,
+          render: function render(_ref3) {
+            var field = _ref3.field;
+            return /*#__PURE__*/_jsx(Field, {
+              label: "Company",
+              labelFor: "company",
+              description: "Please enter your company",
+              state: getFieldState("company"),
+              className: cx(stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["w-full"]))), isFieldDirty("company") && stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["text-xenon-500"])))),
+              children: /*#__PURE__*/_jsx(Input, _objectSpread({
+                id: "company",
+                placeholder: "Company",
+                required: true
+              }, field))
+            });
+          }
+        }), /*#__PURE__*/_jsx(Controller, {
+          name: "phoneNumber",
+          control: control,
+          render: function render(_ref4) {
+            var field = _ref4.field;
+            return /*#__PURE__*/_jsx(Field, {
+              label: "Phone Number",
+              labelFor: "phoneNumber",
+              description: "Please enter your phone number",
+              state: getFieldState("phoneNumber"),
+              className: cx(stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["w-full"]))), isFieldDirty("phoneNumber") && stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["text-xenon-500"])))),
+              children: /*#__PURE__*/_jsx(Input, _objectSpread({
+                id: "phoneNumber",
+                placeholder: "Phone number",
+                required: true
+              }, field))
+            });
+          }
+        }), /*#__PURE__*/_jsxs("div", {
+          className: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["flex gap-2"]))),
+          children: [/*#__PURE__*/_jsx(FormSubmit, {
+            variant: "primary",
+            "aria-label": "Save updated changes",
+            disabled: !formState.isDirty,
+            children: "Save changes"
+          }), /*#__PURE__*/_jsx(FormReset, {
+            "aria-label": "Reset the form",
+            disabled: !formState.isDirty,
+            onClick: function onClick() {
+              return reset();
+            },
+            children: "Reset"
+          })]
+        }), dirtyFieldsNb > 0 && /*#__PURE__*/_jsxs(Alert, {
+          variant: "accent",
+          icon: InfoIcon,
+          className: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["w-full"]))),
+          children: [dirtyFieldsNb, " updated fields"]
         })]
-      }), dirtyFieldsNb > 0 && /*#__PURE__*/_jsxs(Alert, {
-        variant: "accent",
-        icon: InfoIcon,
-        className: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["w-full"]))),
-        children: [dirtyFieldsNb, " updated fields"]
+      }), /*#__PURE__*/_jsx("hr", {
+        className: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["text-grey-500"])))
+      }), /*#__PURE__*/_jsx("code", {
+        className: stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["whitespace-pre display-code"]))),
+        children: JSON.stringify(formData, null, 2)
       })]
-    }), /*#__PURE__*/_jsx("hr", {
-      className: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["text-grey-500"])))
-    }), /*#__PURE__*/_jsx("code", {
-      className: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["whitespace-pre display-code"]))),
-      children: JSON.stringify(formData, null, 2)
-    })]
+    })
   });
@@ -247,86 +250,89 @@ };
   useFormikAutoFocusOnError(formik);
-  return /*#__PURE__*/_jsxs("div", {
-    className: stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["flex flex-col gap-8 w-3/5"]))),
-    children: [/*#__PURE__*/_jsxs(ExperimentalForm, {
-      onSubmit: function onSubmit(e) {
-        setRevalidationEnabled(true);
-        formik.handleSubmit(e);
-      },
-      onReset: function onReset(e) {
-        setRevalidationEnabled(false);
-        formik.handleReset(e);
-      },
-      className: stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["flex flex-col items-start gap-6 min-w-72"]))),
-      children: [/*#__PURE__*/_jsx(ExperimentalFormErrorMessage, {}), /*#__PURE__*/_jsx(Field, {
-        label: "Name",
-        labelFor: "name",
-        description: "Please enter your name",
-        state: getFieldState("name"),
-        className: cx(stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["w-full"]))), isFieldDirty("name") && stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["text-xenon-500"])))),
-        children: /*#__PURE__*/_jsx(Input, _objectSpread({
-          id: "name",
-          placeholder: "Name",
-          required: true
-        }, formik.getFieldProps("name")))
-      }), /*#__PURE__*/_jsx(Field, {
-        label: "Email",
-        labelFor: "email",
-        description: "Please enter your email",
-        state: getFieldState("email"),
-        className: cx(stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["w-full"]))), isFieldDirty("email") && stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["text-xenon-500"])))),
-        children: /*#__PURE__*/_jsx(Input, _objectSpread({
-          id: "email",
-          placeholder: "Email",
-          required: true
-        }, formik.getFieldProps("email")))
-      }), /*#__PURE__*/_jsx(Field, {
-        label: "Company",
-        labelFor: "company",
-        description: "Please enter your company",
-        state: getFieldState("company"),
-        className: cx(stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["w-full"]))), isFieldDirty("company") && stl(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["text-xenon-500"])))),
-        children: /*#__PURE__*/_jsx(Input, _objectSpread({
-          id: "company",
-          placeholder: "Company",
-          required: true
-        }, formik.getFieldProps("company")))
-      }), /*#__PURE__*/_jsx(Field, {
-        label: "Phone Number",
-        labelFor: "phoneNumber",
-        description: "Please enter your phone number",
-        state: getFieldState("phoneNumber"),
-        className: cx(stl(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["w-full"]))), isFieldDirty("phoneNumber") && stl(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["text-xenon-500"])))),
-        children: /*#__PURE__*/_jsx(Input, _objectSpread({
-          id: "phoneNumber",
-          placeholder: "Phone number",
-          required: true
-        }, formik.getFieldProps("phoneNumber")))
-      }), /*#__PURE__*/_jsxs("div", {
-        className: stl(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["flex gap-2"]))),
-        children: [/*#__PURE__*/_jsx(ExperimentalFormSubmit, {
-          variant: "primary",
-          "aria-label": "Save updated changes",
-          disabled: !formik.dirty,
-          children: "Save changes"
-        }), /*#__PURE__*/_jsx(ExperimentalFormReset, {
-          "aria-label": "Reset the form",
-          disabled: !formik.dirty,
-          onClick: function onClick() {
-            return formik.resetForm();
-          },
-          children: "Reset"
+  return /*#__PURE__*/_jsx("div", {
+    className: stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["@container w-full flex justify-center"]))),
+    children: /*#__PURE__*/_jsxs("div", {
+      className: stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["flex flex-col gap-8 w-full @lg:w-1/2"]))),
+      children: [/*#__PURE__*/_jsxs(Form, {
+        onSubmit: function onSubmit(e) {
+          setRevalidationEnabled(true);
+          formik.handleSubmit(e);
+        },
+        onReset: function onReset(e) {
+          setRevalidationEnabled(false);
+          formik.handleReset(e);
+        },
+        className: stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["flex flex-col items-start gap-6 min-w-72"]))),
+        children: [/*#__PURE__*/_jsx(FormErrorMessage, {}), /*#__PURE__*/_jsx(Field, {
+          label: "Name",
+          labelFor: "name",
+          description: "Please enter your name",
+          state: getFieldState("name"),
+          className: cx(stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["w-full"]))), isFieldDirty("name") && stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["text-xenon-500"])))),
+          children: /*#__PURE__*/_jsx(Input, _objectSpread({
+            id: "name",
+            placeholder: "Name",
+            required: true
+          }, formik.getFieldProps("name")))
+        }), /*#__PURE__*/_jsx(Field, {
+          label: "Email",
+          labelFor: "email",
+          description: "Please enter your email",
+          state: getFieldState("email"),
+          className: cx(stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["w-full"]))), isFieldDirty("email") && stl(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["text-xenon-500"])))),
+          children: /*#__PURE__*/_jsx(Input, _objectSpread({
+            id: "email",
+            placeholder: "Email",
+            required: true
+          }, formik.getFieldProps("email")))
+        }), /*#__PURE__*/_jsx(Field, {
+          label: "Company",
+          labelFor: "company",
+          description: "Please enter your company",
+          state: getFieldState("company"),
+          className: cx(stl(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["w-full"]))), isFieldDirty("company") && stl(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["text-xenon-500"])))),
+          children: /*#__PURE__*/_jsx(Input, _objectSpread({
+            id: "company",
+            placeholder: "Company",
+            required: true
+          }, formik.getFieldProps("company")))
+        }), /*#__PURE__*/_jsx(Field, {
+          label: "Phone Number",
+          labelFor: "phoneNumber",
+          description: "Please enter your phone number",
+          state: getFieldState("phoneNumber"),
+          className: cx(stl(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["w-full"]))), isFieldDirty("phoneNumber") && stl(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["text-xenon-500"])))),
+          children: /*#__PURE__*/_jsx(Input, _objectSpread({
+            id: "phoneNumber",
+            placeholder: "Phone number",
+            required: true
+          }, formik.getFieldProps("phoneNumber")))
+        }), /*#__PURE__*/_jsxs("div", {
+          className: stl(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["flex gap-2"]))),
+          children: [/*#__PURE__*/_jsx(FormSubmit, {
+            variant: "primary",
+            "aria-label": "Save updated changes",
+            disabled: !formik.dirty,
+            children: "Save changes"
+          }), /*#__PURE__*/_jsx(FormReset, {
+            "aria-label": "Reset the form",
+            disabled: !formik.dirty,
+            onClick: function onClick() {
+              return formik.resetForm();
+            },
+            children: "Reset"
+          })]
+        }), dirtyFieldsNb > 0 && /*#__PURE__*/_jsxs(Alert, {
+          variant: "accent",
+          icon: InfoIcon,
+          className: stl(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["w-full"]))),
+          children: [dirtyFieldsNb, " updated fields"]
         })]
-      }), dirtyFieldsNb > 0 && /*#__PURE__*/_jsxs(Alert, {
-        variant: "accent",
-        icon: InfoIcon,
-        className: stl(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["w-full"]))),
-        children: [dirtyFieldsNb, " updated fields"]
+      }), /*#__PURE__*/_jsx("hr", {
+        className: stl(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["text-grey-500"])))
+      }), /*#__PURE__*/_jsx("code", {
+        className: stl(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["whitespace-pre display-code"]))),
+        children: JSON.stringify(formData, null, 2)
       })]
-    }), /*#__PURE__*/_jsx("hr", {
-      className: stl(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["text-grey-500"])))
-    }), /*#__PURE__*/_jsx("code", {
-      className: stl(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["whitespace-pre display-code"]))),
-      children: JSON.stringify(formData, null, 2)
-    })]
+    })
   });
 };

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

 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30;
 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; }
@@ -19,3 +19,3 @@ 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 { Select } from "../../Select";
-import { ExperimentalForm, ExperimentalFormErrorMessage, ExperimentalFormReset, ExperimentalFormSubmit } from "../Form";
+import { Form, FormErrorMessage, FormReset, FormSubmit } from "../Form";
 import { useFormikAutoFocusOnError } from "./utils/useFormikAutoFocusOnError";
@@ -100,146 +100,149 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
   };
-  return /*#__PURE__*/_jsxs("div", {
-    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex flex-col gap-8 w-3/5"]))),
-    children: [/*#__PURE__*/_jsxs(ExperimentalForm, {
-      onSubmit: handleSubmit(function (data) {
-        return setFormData(data);
-      }),
-      onReset: function onReset() {
-        return setFormData(initialFormData);
-      },
-      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex flex-col items-start gap-6 min-w-72"]))),
-      children: [/*#__PURE__*/_jsx(ExperimentalFormErrorMessage, {}), /*#__PURE__*/_jsx(Controller, {
-        name: "name",
-        control: control,
-        render: function render(_ref) {
-          var field = _ref.field;
-          return /*#__PURE__*/_jsx(Field, {
-            label: "Name",
-            labelFor: "name",
-            description: "Please enter your name",
-            state: getFieldState("name"),
-            className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["w-full"]))),
-            children: /*#__PURE__*/_jsx(Input, _objectSpread({
-              id: "name",
-              placeholder: "John Doe",
-              required: true
-            }, field))
-          });
-        }
-      }), /*#__PURE__*/_jsx(Controller, {
-        name: "email",
-        control: control,
-        render: function render(_ref2) {
-          var field = _ref2.field;
-          return /*#__PURE__*/_jsx(Field, {
-            label: "Email",
-            labelFor: "email",
-            description: "Please enter your email",
-            state: getFieldState("email"),
-            className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["w-full"]))),
-            children: /*#__PURE__*/_jsx(Input, _objectSpread({
-              id: "email",
-              placeholder: "[e-mail]",
-              required: true
-            }, field))
-          });
-        }
-      }), /*#__PURE__*/_jsx(Controller, {
-        name: "profession",
-        control: control,
-        render: function render(_ref3) {
-          var field = _ref3.field;
-          return /*#__PURE__*/_jsx(Field, {
-            label: "Profession",
-            labelFor: "profession",
-            description: "Please specify your profession",
-            state: getFieldState("profession"),
-            className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["w-full"]))),
-            children: /*#__PURE__*/_jsx(Select, _objectSpread(_objectSpread({
-              id: "profession",
-              required: true
-            }, field), {}, {
-              children: professions.map(function (profession) {
-                return /*#__PURE__*/_jsx("option", {
-                  value: profession,
-                  children: capitalize(profession)
-                }, profession);
-              })
-            }))
-          });
-        }
-      }), /*#__PURE__*/_jsx(Controller, {
-        name: "hospitalName",
-        control: control,
-        render: function render(_ref4) {
-          var field = _ref4.field;
-          return /*#__PURE__*/_jsx(Field, {
-            label: "Hospital Name",
-            labelFor: "hospitalName",
-            description: "Please enter an hospital name",
-            state: getFieldState("hospitalName"),
-            className: cx(stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["w-full"]))), profession !== "doctor" && stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["hidden"])))),
-            children: /*#__PURE__*/_jsx(Input, _objectSpread({
-              id: "hospitalName",
-              placeholder: "Name",
-              required: true
-            }, field))
-          });
-        }
-      }), /*#__PURE__*/_jsx(Controller, {
-        name: "schoolName",
-        control: control,
-        render: function render(_ref5) {
-          var field = _ref5.field;
-          return /*#__PURE__*/_jsx(Field, {
-            label: "School Name",
-            labelFor: "schoolName",
-            description: "Please enter a school name",
-            state: getFieldState("schoolName"),
-            className: cx(stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["w-full"]))), profession !== "teacher" && stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["hidden"])))),
-            children: /*#__PURE__*/_jsx(Input, _objectSpread({
-              id: "schoolName",
-              placeholder: "Name",
-              required: true
-            }, field))
-          });
-        }
-      }), /*#__PURE__*/_jsx(Controller, {
-        name: "otherProfession",
-        control: control,
-        render: function render(_ref6) {
-          var field = _ref6.field;
-          return /*#__PURE__*/_jsx(Field, {
-            label: "Other Profession",
-            labelFor: "otherProfession",
-            description: "Please enter an other profession",
-            state: getFieldState("otherProfession"),
-            className: cx(stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["w-full"]))), profession !== "other" && stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["hidden"])))),
-            children: /*#__PURE__*/_jsx(Input, _objectSpread({
-              id: "otherProfession",
-              placeholder: "Profession",
-              required: true
-            }, field))
-          });
-        }
-      }), /*#__PURE__*/_jsxs("div", {
-        className: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["flex gap-2"]))),
-        children: [/*#__PURE__*/_jsx(ExperimentalFormSubmit, {
-          variant: "primary",
-          "aria-label": "Save the form",
-          children: "Save"
-        }), /*#__PURE__*/_jsx(ExperimentalFormReset, {
-          "aria-label": "Reset the form",
-          onClick: function onClick() {
-            return reset();
-          },
-          children: "Reset"
+  return /*#__PURE__*/_jsx("div", {
+    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["@container w-full flex justify-center"]))),
+    children: /*#__PURE__*/_jsxs("div", {
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex flex-col gap-8 w-full @lg:w-1/2"]))),
+      children: [/*#__PURE__*/_jsxs(Form, {
+        onSubmit: handleSubmit(function (data) {
+          return setFormData(data);
+        }),
+        onReset: function onReset() {
+          return setFormData(initialFormData);
+        },
+        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["flex flex-col items-start gap-6 min-w-72"]))),
+        children: [/*#__PURE__*/_jsx(FormErrorMessage, {}), /*#__PURE__*/_jsx(Controller, {
+          name: "name",
+          control: control,
+          render: function render(_ref) {
+            var field = _ref.field;
+            return /*#__PURE__*/_jsx(Field, {
+              label: "Name",
+              labelFor: "name",
+              description: "Please enter your name",
+              state: getFieldState("name"),
+              className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["w-full"]))),
+              children: /*#__PURE__*/_jsx(Input, _objectSpread({
+                id: "name",
+                placeholder: "John Doe",
+                required: true
+              }, field))
+            });
+          }
+        }), /*#__PURE__*/_jsx(Controller, {
+          name: "email",
+          control: control,
+          render: function render(_ref2) {
+            var field = _ref2.field;
+            return /*#__PURE__*/_jsx(Field, {
+              label: "Email",
+              labelFor: "email",
+              description: "Please enter your email",
+              state: getFieldState("email"),
+              className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["w-full"]))),
+              children: /*#__PURE__*/_jsx(Input, _objectSpread({
+                id: "email",
+                placeholder: "[e-mail]",
+                required: true
+              }, field))
+            });
+          }
+        }), /*#__PURE__*/_jsx(Controller, {
+          name: "profession",
+          control: control,
+          render: function render(_ref3) {
+            var field = _ref3.field;
+            return /*#__PURE__*/_jsx(Field, {
+              label: "Profession",
+              labelFor: "profession",
+              description: "Please specify your profession",
+              state: getFieldState("profession"),
+              className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["w-full"]))),
+              children: /*#__PURE__*/_jsx(Select, _objectSpread(_objectSpread({
+                id: "profession",
+                required: true
+              }, field), {}, {
+                children: professions.map(function (profession) {
+                  return /*#__PURE__*/_jsx("option", {
+                    value: profession,
+                    children: capitalize(profession)
+                  }, profession);
+                })
+              }))
+            });
+          }
+        }), /*#__PURE__*/_jsx(Controller, {
+          name: "hospitalName",
+          control: control,
+          render: function render(_ref4) {
+            var field = _ref4.field;
+            return /*#__PURE__*/_jsx(Field, {
+              label: "Hospital Name",
+              labelFor: "hospitalName",
+              description: "Please enter an hospital name",
+              state: getFieldState("hospitalName"),
+              className: cx(stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["w-full"]))), profession !== "doctor" && stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["hidden"])))),
+              children: /*#__PURE__*/_jsx(Input, _objectSpread({
+                id: "hospitalName",
+                placeholder: "Name",
+                required: true
+              }, field))
+            });
+          }
+        }), /*#__PURE__*/_jsx(Controller, {
+          name: "schoolName",
+          control: control,
+          render: function render(_ref5) {
+            var field = _ref5.field;
+            return /*#__PURE__*/_jsx(Field, {
+              label: "School Name",
+              labelFor: "schoolName",
+              description: "Please enter a school name",
+              state: getFieldState("schoolName"),
+              className: cx(stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["w-full"]))), profession !== "teacher" && stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["hidden"])))),
+              children: /*#__PURE__*/_jsx(Input, _objectSpread({
+                id: "schoolName",
+                placeholder: "Name",
+                required: true
+              }, field))
+            });
+          }
+        }), /*#__PURE__*/_jsx(Controller, {
+          name: "otherProfession",
+          control: control,
+          render: function render(_ref6) {
+            var field = _ref6.field;
+            return /*#__PURE__*/_jsx(Field, {
+              label: "Other Profession",
+              labelFor: "otherProfession",
+              description: "Please enter an other profession",
+              state: getFieldState("otherProfession"),
+              className: cx(stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["w-full"]))), profession !== "other" && stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["hidden"])))),
+              children: /*#__PURE__*/_jsx(Input, _objectSpread({
+                id: "otherProfession",
+                placeholder: "Profession",
+                required: true
+              }, field))
+            });
+          }
+        }), /*#__PURE__*/_jsxs("div", {
+          className: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["flex gap-2"]))),
+          children: [/*#__PURE__*/_jsx(FormSubmit, {
+            variant: "primary",
+            "aria-label": "Save the form",
+            children: "Save"
+          }), /*#__PURE__*/_jsx(FormReset, {
+            "aria-label": "Reset the form",
+            onClick: function onClick() {
+              return reset();
+            },
+            children: "Reset"
+          })]
         })]
+      }), /*#__PURE__*/_jsx("hr", {
+        className: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["text-grey-500"])))
+      }), /*#__PURE__*/_jsx("code", {
+        className: stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["whitespace-pre display-code"]))),
+        children: JSON.stringify(formData, null, 2)
       })]
-    }), /*#__PURE__*/_jsx("hr", {
-      className: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["text-grey-500"])))
-    }), /*#__PURE__*/_jsx("code", {
-      className: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["whitespace-pre display-code"]))),
-      children: JSON.stringify(formData, null, 2)
-    })]
+    })
   });
@@ -312,107 +315,110 @@ };
   useFormikAutoFocusOnError(formik);
-  return /*#__PURE__*/_jsxs("div", {
-    className: stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["flex flex-col gap-8 w-3/5"]))),
-    children: [/*#__PURE__*/_jsxs(ExperimentalForm, {
-      onSubmit: function onSubmit(e) {
-        setRevalidationEnabled(true);
-        formik.handleSubmit(e);
-      },
-      onReset: function onReset(e) {
-        setRevalidationEnabled(false);
-        formik.handleReset(e);
-      },
-      className: stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["flex flex-col items-start gap-6 min-w-72"]))),
-      children: [/*#__PURE__*/_jsx(ExperimentalFormErrorMessage, {}), /*#__PURE__*/_jsx(Field, {
-        label: "Name",
-        labelFor: "name",
-        description: "Please enter your name",
-        state: getFieldState("name"),
-        className: stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["w-full"]))),
-        children: /*#__PURE__*/_jsx(Input, _objectSpread({
-          id: "name",
-          placeholder: "John Doe",
-          required: true
-        }, formik.getFieldProps("name")))
-      }), /*#__PURE__*/_jsx(Field, {
-        label: "Email",
-        labelFor: "email",
-        description: "Please enter your email",
-        state: getFieldState("email"),
-        className: stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["w-full"]))),
-        children: /*#__PURE__*/_jsx(Input, _objectSpread({
-          id: "email",
-          placeholder: "[e-mail]",
-          required: true
-        }, formik.getFieldProps("email")))
-      }), /*#__PURE__*/_jsx(Field, {
-        label: "Profession",
-        labelFor: "profession",
-        description: "Please specify your profession",
-        state: getFieldState("profession"),
-        className: stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["w-full"]))),
-        children: /*#__PURE__*/_jsx(Select, _objectSpread(_objectSpread({
-          id: "profession",
-          required: true
-        }, formik.getFieldProps("profession")), {}, {
-          children: professions.map(function (profession) {
-            return /*#__PURE__*/_jsx("option", {
-              value: profession,
-              children: capitalize(profession)
-            }, profession);
-          })
-        }))
-      }), /*#__PURE__*/_jsx(Field, {
-        label: "Hospital Name",
-        labelFor: "hospitalName",
-        description: "Please enter an hospital name",
-        state: getFieldState("hospitalName"),
-        className: cx(stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["w-full"]))), formik.values.profession !== "doctor" && stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["hidden"])))),
-        children: /*#__PURE__*/_jsx(Input, _objectSpread({
-          id: "hospitalName",
-          placeholder: "Name",
-          required: true
-        }, formik.getFieldProps("hospitalName")))
-      }), /*#__PURE__*/_jsx(Field, {
-        label: "School Name",
-        labelFor: "schoolName",
-        description: "Please enter a school name",
-        state: getFieldState("schoolName"),
-        className: cx(stl(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["w-full"]))), formik.values.profession !== "teacher" && stl(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["hidden"])))),
-        children: /*#__PURE__*/_jsx(Input, _objectSpread({
-          id: "schoolName",
-          placeholder: "Name",
-          required: true
-        }, formik.getFieldProps("schoolName")))
-      }), /*#__PURE__*/_jsx(Field, {
-        label: "Other Profession",
-        labelFor: "otherProfession",
-        description: "Please enter an other profession",
-        state: getFieldState("otherProfession"),
-        className: cx(stl(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["w-full"]))), formik.values.profession !== "other" && stl(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["hidden"])))),
-        children: /*#__PURE__*/_jsx(Input, _objectSpread({
-          id: "otherProfession",
-          placeholder: "Profession",
-          required: true
-        }, formik.getFieldProps("otherProfession")))
-      }), /*#__PURE__*/_jsxs("div", {
-        className: stl(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["flex gap-2"]))),
-        children: [/*#__PURE__*/_jsx(ExperimentalFormSubmit, {
-          variant: "primary",
-          "aria-label": "Save the form",
-          children: "Save"
-        }), /*#__PURE__*/_jsx(ExperimentalFormReset, {
-          "aria-label": "Reset the form",
-          onClick: function onClick() {
-            return formik.resetForm();
-          },
-          children: "Reset"
+  return /*#__PURE__*/_jsx("div", {
+    className: stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["@container w-full flex justify-center"]))),
+    children: /*#__PURE__*/_jsxs("div", {
+      className: stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["flex flex-col gap-8 w-full @lg:w-1/2"]))),
+      children: [/*#__PURE__*/_jsxs(Form, {
+        onSubmit: function onSubmit(e) {
+          setRevalidationEnabled(true);
+          formik.handleSubmit(e);
+        },
+        onReset: function onReset(e) {
+          setRevalidationEnabled(false);
+          formik.handleReset(e);
+        },
+        className: stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["flex flex-col items-start gap-6 min-w-72"]))),
+        children: [/*#__PURE__*/_jsx(FormErrorMessage, {}), /*#__PURE__*/_jsx(Field, {
+          label: "Name",
+          labelFor: "name",
+          description: "Please enter your name",
+          state: getFieldState("name"),
+          className: stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["w-full"]))),
+          children: /*#__PURE__*/_jsx(Input, _objectSpread({
+            id: "name",
+            placeholder: "John Doe",
+            required: true
+          }, formik.getFieldProps("name")))
+        }), /*#__PURE__*/_jsx(Field, {
+          label: "Email",
+          labelFor: "email",
+          description: "Please enter your email",
+          state: getFieldState("email"),
+          className: stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["w-full"]))),
+          children: /*#__PURE__*/_jsx(Input, _objectSpread({
+            id: "email",
+            placeholder: "[e-mail]",
+            required: true
+          }, formik.getFieldProps("email")))
+        }), /*#__PURE__*/_jsx(Field, {
+          label: "Profession",
+          labelFor: "profession",
+          description: "Please specify your profession",
+          state: getFieldState("profession"),
+          className: stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["w-full"]))),
+          children: /*#__PURE__*/_jsx(Select, _objectSpread(_objectSpread({
+            id: "profession",
+            required: true
+          }, formik.getFieldProps("profession")), {}, {
+            children: professions.map(function (profession) {
+              return /*#__PURE__*/_jsx("option", {
+                value: profession,
+                children: capitalize(profession)
+              }, profession);
+            })
+          }))
+        }), /*#__PURE__*/_jsx(Field, {
+          label: "Hospital Name",
+          labelFor: "hospitalName",
+          description: "Please enter an hospital name",
+          state: getFieldState("hospitalName"),
+          className: cx(stl(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["w-full"]))), formik.values.profession !== "doctor" && stl(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["hidden"])))),
+          children: /*#__PURE__*/_jsx(Input, _objectSpread({
+            id: "hospitalName",
+            placeholder: "Name",
+            required: true
+          }, formik.getFieldProps("hospitalName")))
+        }), /*#__PURE__*/_jsx(Field, {
+          label: "School Name",
+          labelFor: "schoolName",
+          description: "Please enter a school name",
+          state: getFieldState("schoolName"),
+          className: cx(stl(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["w-full"]))), formik.values.profession !== "teacher" && stl(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["hidden"])))),
+          children: /*#__PURE__*/_jsx(Input, _objectSpread({
+            id: "schoolName",
+            placeholder: "Name",
+            required: true
+          }, formik.getFieldProps("schoolName")))
+        }), /*#__PURE__*/_jsx(Field, {
+          label: "Other Profession",
+          labelFor: "otherProfession",
+          description: "Please enter an other profession",
+          state: getFieldState("otherProfession"),
+          className: cx(stl(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["w-full"]))), formik.values.profession !== "other" && stl(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["hidden"])))),
+          children: /*#__PURE__*/_jsx(Input, _objectSpread({
+            id: "otherProfession",
+            placeholder: "Profession",
+            required: true
+          }, formik.getFieldProps("otherProfession")))
+        }), /*#__PURE__*/_jsxs("div", {
+          className: stl(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["flex gap-2"]))),
+          children: [/*#__PURE__*/_jsx(FormSubmit, {
+            variant: "primary",
+            "aria-label": "Save the form",
+            children: "Save"
+          }), /*#__PURE__*/_jsx(FormReset, {
+            "aria-label": "Reset the form",
+            onClick: function onClick() {
+              return formik.resetForm();
+            },
+            children: "Reset"
+          })]
         })]
+      }), /*#__PURE__*/_jsx("hr", {
+        className: stl(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["text-grey-500"])))
+      }), /*#__PURE__*/_jsx("code", {
+        className: stl(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["whitespace-pre display-code"]))),
+        children: JSON.stringify(formData, null, 2)
       })]
-    }), /*#__PURE__*/_jsx("hr", {
-      className: stl(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["text-grey-500"])))
-    }), /*#__PURE__*/_jsx("code", {
-      className: stl(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["whitespace-pre display-code"]))),
-      children: JSON.stringify(formData, null, 2)
-    })]
+    })
   });
 };

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

 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30;
 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; }
@@ -22,3 +22,3 @@ 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 { Select } from "../../Select";
-import { ExperimentalForm, ExperimentalFormErrorMessage, ExperimentalFormReset, ExperimentalFormSubmit } from "../Form";
+import { Form, FormErrorMessage, FormReset, FormSubmit } from "../Form";
 import { useFormikAutoFocusOnError } from "./utils/useFormikAutoFocusOnError";
@@ -107,67 +107,70 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
   return /*#__PURE__*/_jsx("div", {
-    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex flex-col gap-8 w-full"]))),
-    children: /*#__PURE__*/_jsxs(FormProvider, _objectSpread(_objectSpread({}, api), {}, {
-      children: [/*#__PURE__*/_jsxs(ExperimentalForm, {
-        onSubmit: handleSubmit(function (data) {
-          return setFormData(data);
-        }),
-        onReset: function onReset() {
-          return setFormData(initialFormData);
-        },
-        className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex flex-col items-start gap-6 min-w-72"]))),
-        children: [/*#__PURE__*/_jsx(ExperimentalFormErrorMessage, {}), fields.map(function (field, index) {
-          return /*#__PURE__*/_jsxs("div", {
-            className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["w-full flex flex-col gap-2"]))),
-            children: [/*#__PURE__*/_jsxs("div", {
-              className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["w-full flex items-center justify-between"]))),
-              children: [/*#__PURE__*/_jsx("div", {
-                children: index === 0 ? "Only display items that match this group" : "And"
-              }), /*#__PURE__*/_jsx(IconButton, {
-                title: "Remove group",
-                variant: "subtle",
-                icon: MinusIcon,
-                disabled: fields.length === 1,
-                onClick: function onClick() {
-                  return remove(index);
-                }
+    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["@container w-full flex justify-center"]))),
+    children: /*#__PURE__*/_jsx("div", {
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex flex-col gap-8 w-full"]))),
+      children: /*#__PURE__*/_jsxs(FormProvider, _objectSpread(_objectSpread({}, api), {}, {
+        children: [/*#__PURE__*/_jsxs(Form, {
+          onSubmit: handleSubmit(function (data) {
+            return setFormData(data);
+          }),
+          onReset: function onReset() {
+            return setFormData(initialFormData);
+          },
+          className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["flex flex-col items-start gap-6 min-w-72"]))),
+          children: [/*#__PURE__*/_jsx(FormErrorMessage, {}), fields.map(function (field, index) {
+            return /*#__PURE__*/_jsxs("div", {
+              className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["w-full flex flex-col gap-2"]))),
+              children: [/*#__PURE__*/_jsxs("div", {
+                className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["w-full flex items-center justify-between"]))),
+                children: [/*#__PURE__*/_jsx("div", {
+                  children: index === 0 ? "Only display items that match this group" : "And"
+                }), /*#__PURE__*/_jsx(IconButton, {
+                  title: "Remove group",
+                  variant: "subtle",
+                  icon: MinusIcon,
+                  disabled: fields.length === 1,
+                  onClick: function onClick() {
+                    return remove(index);
+                  }
+                })]
+              }), /*#__PURE__*/_jsx(RHFFilter, {
+                parentIndex: index
               })]
-            }), /*#__PURE__*/_jsx(RHFFilter, {
-              parentIndex: index
-            })]
-          }, field.id);
-        }), /*#__PURE__*/_jsx(Button, {
-          variant: "subtle",
-          startIcon: PlusIcon,
-          onClick: function onClick() {
-            return (
-              // It accepts `object` and object[]`, so we need to append an array of array
-              append([[{
-                facet: undefined,
-                operator: "is",
-                value: undefined
-              }]])
-            );
-          },
-          children: "And"
-        }), /*#__PURE__*/_jsxs("div", {
-          className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["flex gap-2"]))),
-          children: [/*#__PURE__*/_jsx(ExperimentalFormSubmit, {
-            variant: "primary",
-            "aria-label": "Apply changes",
-            children: "Apply"
-          }), /*#__PURE__*/_jsx(ExperimentalFormReset, {
-            "aria-label": "Reset the form",
+            }, field.id);
+          }), /*#__PURE__*/_jsx(Button, {
+            variant: "subtle",
+            startIcon: PlusIcon,
             onClick: function onClick() {
-              return reset();
+              return (
+                // It accepts `object` and object[]`, so we need to append an array of array
+                append([[{
+                  facet: undefined,
+                  operator: "is",
+                  value: undefined
+                }]])
+              );
             },
-            children: "Reset"
+            children: "And"
+          }), /*#__PURE__*/_jsxs("div", {
+            className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["flex gap-2"]))),
+            children: [/*#__PURE__*/_jsx(FormSubmit, {
+              variant: "primary",
+              "aria-label": "Apply changes",
+              children: "Apply"
+            }), /*#__PURE__*/_jsx(FormReset, {
+              "aria-label": "Reset the form",
+              onClick: function onClick() {
+                return reset();
+              },
+              children: "Reset"
+            })]
           })]
+        }), /*#__PURE__*/_jsx("hr", {
+          className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["text-grey-500"])))
+        }), /*#__PURE__*/_jsx("code", {
+          className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["whitespace-pre display-code"]))),
+          children: JSON.stringify(formData, null, 2)
         })]
-      }), /*#__PURE__*/_jsx("hr", {
-        className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["text-grey-500"])))
-      }), /*#__PURE__*/_jsx("code", {
-        className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["whitespace-pre display-code"]))),
-        children: JSON.stringify(formData, null, 2)
-      })]
-    }))
+      }))
+    })
   });
@@ -210,8 +213,8 @@ };
   return /*#__PURE__*/_jsxs("div", {
-    className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["w-full flex flex-col items-start gap-6 bg-grey-100 border border-grey-200 rounded p-4"]))),
+    className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["w-full flex flex-col items-start gap-6 bg-grey-100 border border-grey-200 rounded p-4"]))),
     children: [fields.map(function (field, index) {
       return /*#__PURE__*/_jsxs("div", {
-        className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["w-full flex items-stretch gap-2"]))),
+        className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["w-full flex items-stretch gap-2 flex-col @xl:flex-row"]))),
         children: [index > 0 && /*#__PURE__*/_jsx("div", {
-          className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["mt-8"]))),
+          className: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["mt-0 @xl:mt-8"]))),
           children: "Or"
@@ -227,3 +230,3 @@ }), /*#__PURE__*/_jsx(Controller, {
               state: getFieldState("filterGroups.".concat(parentIndex, ".").concat(index, ".facet")),
-              className: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["w-full"]))),
+              className: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["w-full"]))),
               children: /*#__PURE__*/_jsx(AutoComplete, _objectSpread({
@@ -249,3 +252,3 @@ id: "filterGroups.".concat(parentIndex, ".").concat(index, ".facet"),
                 id: "filterGroups.".concat(parentIndex, ".").concat(index, ".operator"),
-                className: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["w-min"]))),
+                className: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["w-min"]))),
                 required: true
@@ -272,3 +275,3 @@ }, field), {}, {
               state: getFieldState("filterGroups.".concat(parentIndex, ".").concat(index, ".value")),
-              className: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["w-full"]))),
+              className: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["w-full"]))),
               children: /*#__PURE__*/_jsx(AutoComplete, _objectSpread({
@@ -287,3 +290,3 @@ id: "filterGroups.".concat(parentIndex, ".").concat(index, ".value"),
           icon: MinusIcon,
-          className: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["mt-8 shrink-0"]))),
+          className: stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["shrink-0 mt-0 @lg:mt-8"]))),
           disabled: fields.length === 1,
@@ -331,104 +334,107 @@ onClick: function onClick() {
     setRevalidationEnabled = _useState6[1];
-  return /*#__PURE__*/_jsxs("div", {
-    className: stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["flex flex-col gap-8 w-full"]))),
-    children: [/*#__PURE__*/_jsx(Formik, {
-      initialValues: initialFormData,
-      validateOnChange: revalidationEnabled,
-      validateOnBlur: revalidationEnabled,
-      validationSchema: yupSchema,
-      onSubmit: function onSubmit(values) {
-        // We need to transform the values here because transforms in Yup are run before validations
-        var transformedValues = _objectSpread(_objectSpread({}, values), {}, {
-          filterGroups: values.filterGroups.map(function (group) {
-            return group.map(function (item) {
-              var _item$facet, _item$value;
-              return _objectSpread(_objectSpread({}, item), {}, {
-                facet: (_item$facet = item.facet) === null || _item$facet === void 0 ? void 0 : _item$facet.label,
-                value: (_item$value = item.value) === null || _item$value === void 0 ? void 0 : _item$value.label
+  return /*#__PURE__*/_jsx("div", {
+    className: stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["@container w-full flex justify-center"]))),
+    children: /*#__PURE__*/_jsxs("div", {
+      className: stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["flex flex-col gap-8 w-full"]))),
+      children: [/*#__PURE__*/_jsx(Formik, {
+        initialValues: initialFormData,
+        validateOnChange: revalidationEnabled,
+        validateOnBlur: revalidationEnabled,
+        validationSchema: yupSchema,
+        onSubmit: function onSubmit(values) {
+          // We need to transform the values here because transforms in Yup are run before validations
+          var transformedValues = _objectSpread(_objectSpread({}, values), {}, {
+            filterGroups: values.filterGroups.map(function (group) {
+              return group.map(function (item) {
+                var _item$facet, _item$value;
+                return _objectSpread(_objectSpread({}, item), {}, {
+                  facet: (_item$facet = item.facet) === null || _item$facet === void 0 ? void 0 : _item$facet.label,
+                  value: (_item$value = item.value) === null || _item$value === void 0 ? void 0 : _item$value.label
+                });
               });
-            });
-          })
-        });
-        setFormData(transformedValues);
-      },
-      onReset: function onReset() {
-        return setFormData(initialFormData);
-      },
-      render: function render(_ref5) {
-        var handleSubmit = _ref5.handleSubmit,
-          handleReset = _ref5.handleReset,
-          values = _ref5.values,
-          resetForm = _ref5.resetForm;
-        return /*#__PURE__*/_jsxs(ExperimentalForm, {
-          onSubmit: function onSubmit(e) {
-            setRevalidationEnabled(true);
-            handleSubmit(e);
-          },
-          onReset: function onReset(e) {
-            setRevalidationEnabled(false);
-            handleReset(e);
-          },
-          className: stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["flex flex-col items-start gap-6 min-w-72"]))),
-          children: [/*#__PURE__*/_jsx(ExperimentalFormErrorMessage, {}), /*#__PURE__*/_jsx(FieldArray, {
-            name: "filterGroups",
-            render: function render(_ref6) {
-              var push = _ref6.push,
-                remove = _ref6.remove;
-              return /*#__PURE__*/_jsxs(_Fragment, {
-                children: [values.filterGroups.map(function (_, index) {
-                  return /*#__PURE__*/_jsxs("div", {
-                    className: stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["w-full flex flex-col gap-2"]))),
-                    children: [/*#__PURE__*/_jsxs("div", {
-                      className: stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["w-full flex items-center justify-between"]))),
-                      children: [/*#__PURE__*/_jsx("div", {
-                        children: index === 0 ? "Only display items that match this group" : "And"
-                      }), /*#__PURE__*/_jsx(IconButton, {
-                        title: "Remove group",
-                        variant: "subtle",
-                        icon: MinusIcon,
-                        disabled: values.filterGroups.length === 1,
-                        onClick: function onClick() {
-                          return remove(index);
-                        }
+            })
+          });
+          setFormData(transformedValues);
+        },
+        onReset: function onReset() {
+          return setFormData(initialFormData);
+        },
+        render: function render(_ref5) {
+          var handleSubmit = _ref5.handleSubmit,
+            handleReset = _ref5.handleReset,
+            values = _ref5.values,
+            resetForm = _ref5.resetForm;
+          return /*#__PURE__*/_jsxs(Form, {
+            onSubmit: function onSubmit(e) {
+              setRevalidationEnabled(true);
+              handleSubmit(e);
+            },
+            onReset: function onReset(e) {
+              setRevalidationEnabled(false);
+              handleReset(e);
+            },
+            className: stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["flex flex-col items-start gap-6 min-w-72"]))),
+            children: [/*#__PURE__*/_jsx(FormErrorMessage, {}), /*#__PURE__*/_jsx(FieldArray, {
+              name: "filterGroups",
+              render: function render(_ref6) {
+                var push = _ref6.push,
+                  remove = _ref6.remove;
+                return /*#__PURE__*/_jsxs(_Fragment, {
+                  children: [values.filterGroups.map(function (_, index) {
+                    return /*#__PURE__*/_jsxs("div", {
+                      className: stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["w-full flex flex-col gap-2"]))),
+                      children: [/*#__PURE__*/_jsxs("div", {
+                        className: stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["w-full flex items-center justify-between"]))),
+                        children: [/*#__PURE__*/_jsx("div", {
+                          children: index === 0 ? "Only display items that match this group" : "And"
+                        }), /*#__PURE__*/_jsx(IconButton, {
+                          title: "Remove group",
+                          variant: "subtle",
+                          icon: MinusIcon,
+                          disabled: values.filterGroups.length === 1,
+                          onClick: function onClick() {
+                            return remove(index);
+                          }
+                        })]
+                      }), /*#__PURE__*/_jsx(FormikFilter, {
+                        parentIndex: index
                       })]
-                    }), /*#__PURE__*/_jsx(FormikFilter, {
-                      parentIndex: index
-                    })]
-                  }, index);
-                }), /*#__PURE__*/_jsx(Button, {
-                  variant: "subtle",
-                  startIcon: PlusIcon,
-                  onClick: function onClick() {
-                    return push([{
-                      facet: undefined,
-                      operator: "is",
-                      value: undefined
-                    }]);
-                  },
-                  children: "And"
-                })]
-              });
-            }
-          }), /*#__PURE__*/_jsxs("div", {
-            className: stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["flex gap-2"]))),
-            children: [/*#__PURE__*/_jsx(ExperimentalFormSubmit, {
-              variant: "primary",
-              "aria-label": "Apply changes",
-              children: "Apply"
-            }), /*#__PURE__*/_jsx(ExperimentalFormReset, {
-              "aria-label": "Reset the form",
-              onClick: function onClick() {
-                return resetForm();
-              },
-              children: "Reset"
+                    }, index);
+                  }), /*#__PURE__*/_jsx(Button, {
+                    variant: "subtle",
+                    startIcon: PlusIcon,
+                    onClick: function onClick() {
+                      return push([{
+                        facet: undefined,
+                        operator: "is",
+                        value: undefined
+                      }]);
+                    },
+                    children: "And"
+                  })]
+                });
+              }
+            }), /*#__PURE__*/_jsxs("div", {
+              className: stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["flex gap-2"]))),
+              children: [/*#__PURE__*/_jsx(FormSubmit, {
+                variant: "primary",
+                "aria-label": "Apply changes",
+                children: "Apply"
+              }), /*#__PURE__*/_jsx(FormReset, {
+                "aria-label": "Reset the form",
+                onClick: function onClick() {
+                  return resetForm();
+                },
+                children: "Reset"
+              })]
             })]
-          })]
-        });
-      }
-    }), /*#__PURE__*/_jsx("hr", {
-      className: stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["text-grey-500"])))
-    }), /*#__PURE__*/_jsx("code", {
-      className: stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["whitespace-pre display-code"]))),
-      children: JSON.stringify(formData, null, 2)
-    })]
+          });
+        }
+      }), /*#__PURE__*/_jsx("hr", {
+        className: stl(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["text-grey-500"])))
+      }), /*#__PURE__*/_jsx("code", {
+        className: stl(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["whitespace-pre display-code"]))),
+        children: JSON.stringify(formData, null, 2)
+      })]
+    })
   });
@@ -464,9 +470,9 @@ };
       return /*#__PURE__*/_jsxs("div", {
-        className: stl(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["w-full flex flex-col items-start gap-6 bg-grey-100 border border-grey-200 rounded p-4"]))),
+        className: stl(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["w-full flex flex-col items-start gap-6 bg-grey-100 border border-grey-200 rounded p-4"]))),
         children: [formik.values.filterGroups[parentIndex].map(function (_, index) {
           var _form$values$filterGr;
           return /*#__PURE__*/_jsxs("div", {
-            className: stl(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["w-full flex items-stretch gap-2"]))),
+            className: stl(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["w-full flex items-stretch gap-2 flex-col @xl:flex-row"]))),
             children: [index > 0 && /*#__PURE__*/_jsx("div", {
-              className: stl(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["mt-8"]))),
+              className: stl(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["mt-0 @xl:mt-8"]))),
               children: "Or"
@@ -477,3 +483,3 @@ }), /*#__PURE__*/_jsx(Field, {
               state: getFieldState("filterGroups.".concat(parentIndex, ".").concat(index, ".facet")),
-              className: stl(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["w-full"]))),
+              className: stl(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["w-full"]))),
               children: /*#__PURE__*/_jsx(AutoComplete, _objectSpread(_objectSpread({
@@ -498,3 +504,3 @@ id: "filterGroups.".concat(parentIndex, ".").concat(index, ".facet"),
                 id: "filterGroups.".concat(parentIndex, ".").concat(index, ".operator"),
-                className: stl(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["w-min"]))),
+                className: stl(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["w-min"]))),
                 required: true
@@ -513,3 +519,3 @@ }, form.getFieldProps("filterGroups.".concat(parentIndex, ".").concat(index, ".operator"))), {}, {
               state: getFieldState("filterGroups.".concat(parentIndex, ".").concat(index, ".value")),
-              className: stl(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["w-full"]))),
+              className: stl(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["w-full"]))),
               children: /*#__PURE__*/_jsx(AutoComplete, _objectSpread(_objectSpread({
@@ -532,3 +538,3 @@ id: "filterGroups.".concat(parentIndex, ".").concat(index, ".value"),
               icon: MinusIcon,
-              className: stl(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["mt-8 shrink-0"]))),
+              className: stl(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["shrink-0 mt-0 @lg:mt-8"]))),
               disabled: form.values.filterGroups[parentIndex].length === 1,
@@ -535,0 +541,0 @@ onClick: function onClick() {

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

 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
 import { or } from "@jsonforms/core";
@@ -28,3 +28,3 @@ import { hasType, schemaMatches } from "@jsonforms/core";
 import { Toggle } from "../../Toggle";
-import { ExperimentalForm, ExperimentalFormErrorMessage, ExperimentalFormReset, ExperimentalFormSubmit } from "../Form";
+import { Form, FormErrorMessage, FormReset, FormSubmit } from "../Form";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -879,61 +879,64 @@ var schema = {
     setValidationMode = _useState10[1];
-  return /*#__PURE__*/_jsxs("div", {
-    className: stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["flex flex-col gap-8 w-3/5"]))),
-    children: [/*#__PURE__*/_jsxs(ExperimentalForm, {
-      onSubmit: function onSubmit(e) {
-        e.preventDefault();
-        setValidationMode("ValidateAndShow");
-        if (!errors.length) {
-          setFormData(internalFormData);
-        }
-      },
-      onReset: function onReset() {
-        setInternalFormData(initialFormData);
-        setFormData(initialFormData);
-        setAdditionalErrors([]);
-        setValidationMode("ValidateAndHide");
-      },
-      className: stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["flex flex-col items-start gap-6 min-w-72"]))),
-      children: [/*#__PURE__*/_jsx(ExperimentalFormErrorMessage, {}), /*#__PURE__*/_jsx(AdditionalErrorsContext.Provider, {
-        value: {
-          setAdditionalErrors: setAdditionalErrors
+  return /*#__PURE__*/_jsx("div", {
+    className: stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["@container w-full flex justify-center"]))),
+    children: /*#__PURE__*/_jsxs("div", {
+      className: stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["flex flex-col gap-8 w-full @lg:w-1/2"]))),
+      children: [/*#__PURE__*/_jsxs(Form, {
+        onSubmit: function onSubmit(e) {
+          e.preventDefault();
+          setValidationMode("ValidateAndShow");
+          if (!errors.length) {
+            setFormData(internalFormData);
+          }
         },
-        children: /*#__PURE__*/_jsx(JsonFormsStyleContext.Provider, {
-          value: styleContextValue,
-          children: /*#__PURE__*/_jsx(JsonForms, {
-            schema: schema,
-            uischema: uischema,
-            data: internalFormData,
-            renderers: renderers,
-            ajv: ajv,
-            validationMode: validationMode,
-            additionalErrors: additionalErrors,
-            onChange: function onChange(_ref12) {
-              var data = _ref12.data,
-                errors = _ref12.errors;
-              setInternalFormData(data);
-              setErrors((errors === null || errors === void 0 ? void 0 : errors.map(function (error) {
-                return error.message || "";
-              })) || []);
-            }
+        onReset: function onReset() {
+          setInternalFormData(initialFormData);
+          setFormData(initialFormData);
+          setAdditionalErrors([]);
+          setValidationMode("ValidateAndHide");
+        },
+        className: stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["flex flex-col items-start gap-6 min-w-72"]))),
+        children: [/*#__PURE__*/_jsx(FormErrorMessage, {}), /*#__PURE__*/_jsx(AdditionalErrorsContext.Provider, {
+          value: {
+            setAdditionalErrors: setAdditionalErrors
+          },
+          children: /*#__PURE__*/_jsx(JsonFormsStyleContext.Provider, {
+            value: styleContextValue,
+            children: /*#__PURE__*/_jsx(JsonForms, {
+              schema: schema,
+              uischema: uischema,
+              data: internalFormData,
+              renderers: renderers,
+              ajv: ajv,
+              validationMode: validationMode,
+              additionalErrors: additionalErrors,
+              onChange: function onChange(_ref12) {
+                var data = _ref12.data,
+                  errors = _ref12.errors;
+                setInternalFormData(data);
+                setErrors((errors === null || errors === void 0 ? void 0 : errors.map(function (error) {
+                  return error.message || "";
+                })) || []);
+              }
+            })
           })
-        })
-      }), /*#__PURE__*/_jsxs("div", {
-        className: stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["flex gap-2"]))),
-        children: [/*#__PURE__*/_jsx(ExperimentalFormSubmit, {
-          variant: "primary",
-          "aria-label": "Save the form",
-          children: "Save"
-        }), /*#__PURE__*/_jsx(ExperimentalFormReset, {
-          "aria-label": "Reset the form",
-          children: "Reset"
+        }), /*#__PURE__*/_jsxs("div", {
+          className: stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["flex gap-2"]))),
+          children: [/*#__PURE__*/_jsx(FormSubmit, {
+            variant: "primary",
+            "aria-label": "Save the form",
+            children: "Save"
+          }), /*#__PURE__*/_jsx(FormReset, {
+            "aria-label": "Reset the form",
+            children: "Reset"
+          })]
         })]
+      }), /*#__PURE__*/_jsx("hr", {
+        className: stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["text-grey-500"])))
+      }), /*#__PURE__*/_jsx("code", {
+        className: stl(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["whitespace-pre display-code"]))),
+        children: JSON.stringify(formData, null, 2)
       })]
-    }), /*#__PURE__*/_jsx("hr", {
-      className: stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["text-grey-500"])))
-    }), /*#__PURE__*/_jsx("code", {
-      className: stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["whitespace-pre display-code"]))),
-      children: JSON.stringify(formData, null, 2)
-    })]
+    })
   });
 };

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

@@ -6,3 +6,3 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44, _templateObject45, _templateObject46, _templateObject47, _templateObject48, _templateObject49, _templateObject50, _templateObject51, _templateObject52, _templateObject53, _templateObject54, _templateObject55, _templateObject56, _templateObject57, _templateObject58, _templateObject59, _templateObject60, _templateObject61, _templateObject62, _templateObject63, _templateObject64, _templateObject65, _templateObject66, _templateObject67, _templateObject68, _templateObject69, _templateObject70;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44, _templateObject45, _templateObject46, _templateObject47, _templateObject48, _templateObject49, _templateObject50, _templateObject51, _templateObject52, _templateObject53, _templateObject54, _templateObject55, _templateObject56, _templateObject57, _templateObject58, _templateObject59, _templateObject60, _templateObject61, _templateObject62, _templateObject63, _templateObject64, _templateObject65, _templateObject66, _templateObject67, _templateObject68, _templateObject69, _templateObject70, _templateObject71, _templateObject72;
 import _regeneratorRuntime from "@babel/runtime/regenerator";
@@ -26,3 +26,3 @@ 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; }
 import { RadioButton } from "../../RadioGroup";
-import { ExperimentalForm, ExperimentalFormErrorMessage, ExperimentalFormSubmit } from "../Form";
+import { Form, FormErrorMessage, FormSubmit } from "../Form";
 import { useFormikAutoFocusOnError } from "./utils/useFormikAutoFocusOnError";
@@ -127,259 +127,262 @@ import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
   };
-  return /*#__PURE__*/_jsxs("div", {
-    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex flex-col gap-8 w-4/5"]))),
-    children: [/*#__PURE__*/_jsxs(ExperimentalForm, {
-      onSubmit: handleSubmit(function (data) {
-        return setFormData(data);
-      }),
-      onReset: function onReset() {
-        return setFormData(initialFormData);
-      },
-      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex flex-col gap-8 overflow-hidden"]))),
-      children: [/*#__PURE__*/_jsx(ExperimentalFormErrorMessage, {
-        locale: {
-          errorText: function errorText(invalidFields) {
-            return /*#__PURE__*/_jsxs(_Fragment, {
-              children: [/*#__PURE__*/_jsxs("div", {
-                className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["display-heading mb-2"]))),
-                children: ["Please fix ", invalidFields.length, " error", invalidFields.length > 1 ? "s" : "", " below and try again."]
-              }), /*#__PURE__*/_jsx("div", {
-                className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["flex flex-col"]))),
-                children: /*#__PURE__*/_jsx("a", {
-                  href: "#",
-                  className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["text-black underline hover:text-grey-800"]))),
-                  onClick: function onClick(e) {
-                    e.preventDefault();
-                    var firstInvalid = steps.find(function (step) {
-                      return getFieldState(step).status === "invalid";
-                    });
-                    if (firstInvalid) {
-                      goToPage(steps.indexOf(firstInvalid) + 1);
-                    }
-                  },
-                  children: "Go to first error"
-                })
-              })]
-            });
-          }
-        }
-      }), /*#__PURE__*/_jsxs("div", {
-        className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["flex transition-transform ease-out duration-500"]))),
-        style: {
-          transform: "translateX(-".concat((page - 1) * 100, "%)")
+  return /*#__PURE__*/_jsx("div", {
+    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["@container w-full flex justify-center"]))),
+    children: /*#__PURE__*/_jsxs("div", {
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex flex-col gap-8 w-full @lg:w-4/5"]))),
+      children: [/*#__PURE__*/_jsxs(Form, {
+        onSubmit: handleSubmit(function (data) {
+          return setFormData(data);
+        }),
+        onReset: function onReset() {
+          return setFormData(initialFormData);
         },
-        children: [/*#__PURE__*/_jsx(Controller, {
-          name: "variants",
-          control: control,
-          render: function render(_ref) {
-            var field = _ref.field;
-            return /*#__PURE__*/_jsx(Field, {
-              label: /*#__PURE__*/_jsx("h2", {
-                className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["display-xlarge whitespace-normal inline"]))),
-                children: "How should we display products that contain multiple variants?"
-              }),
-              labelFor: variantsEnum[0],
-              state: getFieldState("variants"),
-              className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["w-full shrink-0"]))),
-              children: /*#__PURE__*/_jsx("div", {
-                className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["mt-7"]))),
-                children: variantsOptions.map(function (option) {
-                  return /*#__PURE__*/_jsxs("label", {
-                    htmlFor: option.value,
-                    className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["flex flex-col gap-3 p-6 rounded display-body transition-colors hover:bg-grey-100"]))),
-                    children: [/*#__PURE__*/_jsxs("div", {
-                      className: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["flex items-center gap-2"]))),
-                      children: [/*#__PURE__*/_jsx(RadioButton, _objectSpread(_objectSpread({
-                        id: option.value,
-                        "aria-labelledby": option.value,
-                        required: true
-                      }, field), {}, {
-                        value: option.value,
-                        className: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["shrink-0"])))
-                      })), option.title]
-                    }), /*#__PURE__*/_jsx("div", {
-                      className: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["ml-6 typo-subdued"]))),
-                      children: option.description
-                    })]
-                  }, option.value);
-                })
-              })
-            });
+        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["flex flex-col gap-8 overflow-hidden"]))),
+        children: [/*#__PURE__*/_jsx(FormErrorMessage, {
+          locale: {
+            errorText: function errorText(invalidFields) {
+              return /*#__PURE__*/_jsxs(_Fragment, {
+                children: [/*#__PURE__*/_jsxs("div", {
+                  className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["display-heading mb-2"]))),
+                  children: ["Please fix ", invalidFields.length, " error", invalidFields.length > 1 ? "s" : "", " below and try again."]
+                }), /*#__PURE__*/_jsx("div", {
+                  className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["flex flex-col"]))),
+                  children: /*#__PURE__*/_jsx("a", {
+                    href: "#",
+                    className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["text-black underline hover:text-grey-800"]))),
+                    onClick: function onClick(e) {
+                      e.preventDefault();
+                      var firstInvalid = steps.find(function (step) {
+                        return getFieldState(step).status === "invalid";
+                      });
+                      if (firstInvalid) {
+                        goToPage(steps.indexOf(firstInvalid) + 1);
+                      }
+                    },
+                    children: "Go to first error"
+                  })
+                })]
+              });
+            }
           }
-        }), /*#__PURE__*/_jsx(Controller, {
-          name: "outOfStock",
-          control: control,
-          render: function render(_ref2) {
-            var field = _ref2.field;
-            return /*#__PURE__*/_jsx(Field, {
-              label: /*#__PURE__*/_jsx("h2", {
-                className: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["display-xlarge whitespace-normal inline"]))),
-                children: "How would you like to show out-of-stock items?"
-              }),
-              labelFor: outOfStockEnum[0],
-              state: getFieldState("outOfStock"),
-              className: stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["w-full shrink-0"]))),
-              children: /*#__PURE__*/_jsx("div", {
-                className: stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["mt-7"]))),
-                children: outOfStockOptions.map(function (option) {
-                  return /*#__PURE__*/_jsxs("label", {
-                    htmlFor: option.value,
-                    className: stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["flex flex-col gap-3 p-6 rounded display-body transition-colors hover:bg-grey-100"]))),
-                    children: [/*#__PURE__*/_jsxs("div", {
-                      className: stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["flex items-center gap-2"]))),
-                      children: [/*#__PURE__*/_jsx(RadioButton, _objectSpread(_objectSpread({
-                        id: option.value,
-                        "aria-labelledby": option.value,
-                        required: true
-                      }, field), {}, {
-                        value: option.value,
-                        className: stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["shrink-0"])))
-                      })), option.title]
-                    }), /*#__PURE__*/_jsx("div", {
-                      className: stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["ml-6 typo-subdued"]))),
-                      children: option.description
-                    })]
-                  }, option.value);
+        }), /*#__PURE__*/_jsxs("div", {
+          className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["flex transition-transform ease-out duration-500"]))),
+          style: {
+            transform: "translateX(-".concat((page - 1) * 100, "%)")
+          },
+          children: [/*#__PURE__*/_jsx(Controller, {
+            name: "variants",
+            control: control,
+            render: function render(_ref) {
+              var field = _ref.field;
+              return /*#__PURE__*/_jsx(Field, {
+                label: /*#__PURE__*/_jsx("h2", {
+                  className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["display-xlarge whitespace-normal inline"]))),
+                  children: "How should we display products that contain multiple variants?"
+                }),
+                labelFor: variantsEnum[0],
+                state: getFieldState("variants"),
+                className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["w-full shrink-0"]))),
+                children: /*#__PURE__*/_jsx("div", {
+                  className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["mt-7"]))),
+                  children: variantsOptions.map(function (option) {
+                    return /*#__PURE__*/_jsxs("label", {
+                      htmlFor: option.value,
+                      className: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["flex flex-col gap-3 p-6 rounded display-body transition-colors hover:bg-grey-100"]))),
+                      children: [/*#__PURE__*/_jsxs("div", {
+                        className: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["flex items-center gap-2"]))),
+                        children: [/*#__PURE__*/_jsx(RadioButton, _objectSpread(_objectSpread({
+                          id: option.value,
+                          "aria-labelledby": option.value,
+                          required: true
+                        }, field), {}, {
+                          value: option.value,
+                          className: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["shrink-0"])))
+                        })), option.title]
+                      }), /*#__PURE__*/_jsx("div", {
+                        className: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["ml-6 typo-subdued"]))),
+                        children: option.description
+                      })]
+                    }, option.value);
+                  })
                 })
-              })
-            });
-          }
-        }), /*#__PURE__*/_jsx(Controller, {
-          name: "sorting",
-          control: control,
-          render: function render(_ref3) {
-            var field = _ref3.field;
-            return /*#__PURE__*/_jsxs(Field, {
-              label: /*#__PURE__*/_jsx("h2", {
-                className: stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["display-xlarge whitespace-normal inline"]))),
-                children: "Select how your customers can sort their search results"
-              }),
-              labelFor: sortingOptions[0],
-              state: getFieldState("sorting"),
-              className: stl(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["w-full shrink-0"]))),
-              children: [/*#__PURE__*/_jsx("div", {
-                className: stl(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["mt-4 typo-subdued"]))),
-                children: "Select the sort order options you'd like to show customers. You can change these later."
-              }), /*#__PURE__*/_jsx("div", {
-                className: stl(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["mt-7"]))),
-                children: sortingOptions.map(function (option) {
-                  return /*#__PURE__*/_jsxs("label", {
-                    htmlFor: option,
-                    className: stl(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["flex gap-2 p-4 rounded display-body transition-colors hover:bg-grey-100"]))),
-                    children: [/*#__PURE__*/_jsx(Checkbox, _objectSpread(_objectSpread({
-                      id: option,
-                      required: true,
-                      checked: getValues("sorting").includes(option)
-                    }, field), {}, {
-                      onChange: function onChange() {
-                        return field.onChange(field.value.includes(option) ? field.value.filter(function (v) {
-                          return v !== option;
-                        }) : [].concat(_toConsumableArray(field.value), [option]));
-                      }
-                    })), capitalize(option)]
-                  }, option);
+              });
+            }
+          }), /*#__PURE__*/_jsx(Controller, {
+            name: "outOfStock",
+            control: control,
+            render: function render(_ref2) {
+              var field = _ref2.field;
+              return /*#__PURE__*/_jsx(Field, {
+                label: /*#__PURE__*/_jsx("h2", {
+                  className: stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["display-xlarge whitespace-normal inline"]))),
+                  children: "How would you like to show out-of-stock items?"
+                }),
+                labelFor: outOfStockEnum[0],
+                state: getFieldState("outOfStock"),
+                className: stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["w-full shrink-0"]))),
+                children: /*#__PURE__*/_jsx("div", {
+                  className: stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["mt-7"]))),
+                  children: outOfStockOptions.map(function (option) {
+                    return /*#__PURE__*/_jsxs("label", {
+                      htmlFor: option.value,
+                      className: stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["flex flex-col gap-3 p-6 rounded display-body transition-colors hover:bg-grey-100"]))),
+                      children: [/*#__PURE__*/_jsxs("div", {
+                        className: stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["flex items-center gap-2"]))),
+                        children: [/*#__PURE__*/_jsx(RadioButton, _objectSpread(_objectSpread({
+                          id: option.value,
+                          "aria-labelledby": option.value,
+                          required: true
+                        }, field), {}, {
+                          value: option.value,
+                          className: stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["shrink-0"])))
+                        })), option.title]
+                      }), /*#__PURE__*/_jsx("div", {
+                        className: stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["ml-6 typo-subdued"]))),
+                        children: option.description
+                      })]
+                    }, option.value);
+                  })
                 })
-              })]
-            });
-          }
-        }), /*#__PURE__*/_jsx(Controller, {
-          name: "filters",
-          control: control,
-          render: function render(_ref4) {
-            var field = _ref4.field;
-            return /*#__PURE__*/_jsxs(Field, {
-              label: /*#__PURE__*/_jsx("h2", {
-                className: stl(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["display-xlarge whitespace-normal inline"]))),
-                children: "Add filters to help narrow results"
-              }),
-              labelFor: filtersOptions[0],
-              state: getFieldState("filters"),
-              className: stl(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["w-full shrink-0"]))),
-              children: [/*#__PURE__*/_jsxs("div", {
-                className: stl(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["mt-4 typo-subdued"]))),
-                children: ["Select the filter options customers can use to refine results.", /*#__PURE__*/_jsx("br", {}), "You can edit these after setup."]
-              }), /*#__PURE__*/_jsx("div", {
-                className: stl(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["mt-7"]))),
-                children: filtersOptions.map(function (option) {
-                  return /*#__PURE__*/_jsxs("label", {
-                    htmlFor: option,
-                    className: stl(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["flex gap-2 p-4 rounded display-body transition-colors hover:bg-grey-100"]))),
-                    children: [/*#__PURE__*/_jsx(Checkbox, _objectSpread(_objectSpread({
-                      id: option,
-                      required: true,
-                      checked: getValues("filters").includes(option)
-                    }, field), {}, {
-                      onChange: function onChange() {
-                        return field.onChange(field.value.includes(option) ? field.value.filter(function (v) {
-                          return v !== option;
-                        }) : [].concat(_toConsumableArray(field.value), [option]));
+              });
+            }
+          }), /*#__PURE__*/_jsx(Controller, {
+            name: "sorting",
+            control: control,
+            render: function render(_ref3) {
+              var field = _ref3.field;
+              return /*#__PURE__*/_jsxs(Field, {
+                label: /*#__PURE__*/_jsx("h2", {
+                  className: stl(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["display-xlarge whitespace-normal inline"]))),
+                  children: "Select how your customers can sort their search results"
+                }),
+                labelFor: sortingOptions[0],
+                state: getFieldState("sorting"),
+                className: stl(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["w-full shrink-0"]))),
+                children: [/*#__PURE__*/_jsx("div", {
+                  className: stl(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["mt-4 typo-subdued"]))),
+                  children: "Select the sort order options you'd like to show customers. You can change these later."
+                }), /*#__PURE__*/_jsx("div", {
+                  className: stl(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["mt-7"]))),
+                  children: sortingOptions.map(function (option) {
+                    return /*#__PURE__*/_jsxs("label", {
+                      htmlFor: option,
+                      className: stl(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["flex gap-2 p-4 rounded display-body transition-colors hover:bg-grey-100"]))),
+                      children: [/*#__PURE__*/_jsx(Checkbox, _objectSpread(_objectSpread({
+                        id: option,
+                        required: true,
+                        checked: getValues("sorting").includes(option)
+                      }, field), {}, {
+                        onChange: function onChange() {
+                          return field.onChange(field.value.includes(option) ? field.value.filter(function (v) {
+                            return v !== option;
+                          }) : [].concat(_toConsumableArray(field.value), [option]));
+                        }
+                      })), capitalize(option)]
+                    }, option);
+                  })
+                })]
+              });
+            }
+          }), /*#__PURE__*/_jsx(Controller, {
+            name: "filters",
+            control: control,
+            render: function render(_ref4) {
+              var field = _ref4.field;
+              return /*#__PURE__*/_jsxs(Field, {
+                label: /*#__PURE__*/_jsx("h2", {
+                  className: stl(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["display-xlarge whitespace-normal inline"]))),
+                  children: "Add filters to help narrow results"
+                }),
+                labelFor: filtersOptions[0],
+                state: getFieldState("filters"),
+                className: stl(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["w-full shrink-0"]))),
+                children: [/*#__PURE__*/_jsxs("div", {
+                  className: stl(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["mt-4 typo-subdued"]))),
+                  children: ["Select the filter options customers can use to refine results.", /*#__PURE__*/_jsx("br", {}), "You can edit these after setup."]
+                }), /*#__PURE__*/_jsx("div", {
+                  className: stl(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["mt-7"]))),
+                  children: filtersOptions.map(function (option) {
+                    return /*#__PURE__*/_jsxs("label", {
+                      htmlFor: option,
+                      className: stl(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["flex gap-2 p-4 rounded display-body transition-colors hover:bg-grey-100"]))),
+                      children: [/*#__PURE__*/_jsx(Checkbox, _objectSpread(_objectSpread({
+                        id: option,
+                        required: true,
+                        checked: getValues("filters").includes(option)
+                      }, field), {}, {
+                        onChange: function onChange() {
+                          return field.onChange(field.value.includes(option) ? field.value.filter(function (v) {
+                            return v !== option;
+                          }) : [].concat(_toConsumableArray(field.value), [option]));
+                        }
+                      })), capitalize(option)]
+                    }, option);
+                  })
+                })]
+              });
+            }
+          })]
+        }), /*#__PURE__*/_jsxs("div", {
+          className: stl(_templateObject32 || (_templateObject32 = _taggedTemplateLiteral(["w-full flex justify-between"]))),
+          children: [/*#__PURE__*/_jsxs("div", {
+            className: stl(_templateObject33 || (_templateObject33 = _taggedTemplateLiteral(["flex gap-2"]))),
+            children: [/*#__PURE__*/_jsx(Button, {
+              "aria-label": "Previous step",
+              disabled: page <= 1,
+              onClick: function onClick() {
+                return goToPreviousPage();
+              },
+              children: "Back"
+            }), page >= steps.length ? /*#__PURE__*/_jsx(FormSubmit, {
+              variant: "primary",
+              "aria-label": "Complete",
+              children: "Complete"
+            }) : /*#__PURE__*/_jsx(Button, {
+              variant: "primary",
+              "aria-label": "Next step",
+              onClick: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+                var valid;
+                return _regeneratorRuntime.wrap(function _callee$(_context) {
+                  while (1) switch (_context.prev = _context.next) {
+                    case 0:
+                      _context.next = 2;
+                      return trigger(steps[page - 1]);
+                    case 2:
+                      valid = _context.sent;
+                      if (valid) {
+                        goToNextPage();
                       }
-                    })), capitalize(option)]
-                  }, option);
-                })
-              })]
-            });
-          }
-        })]
-      }), /*#__PURE__*/_jsxs("div", {
-        className: stl(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["w-full flex justify-between"]))),
-        children: [/*#__PURE__*/_jsxs("div", {
-          className: stl(_templateObject32 || (_templateObject32 = _taggedTemplateLiteral(["flex gap-2"]))),
-          children: [/*#__PURE__*/_jsx(Button, {
-            "aria-label": "Previous step",
-            disabled: page <= 1,
+                    case 4:
+                    case "end":
+                      return _context.stop();
+                  }
+                }, _callee);
+              })),
+              children: "Next"
+            })]
+          }), /*#__PURE__*/_jsx(Button, {
+            variant: "subtle",
+            "aria-label": "Reset the form",
             onClick: function onClick() {
-              return goToPreviousPage();
+              reset();
+              goToPage(1);
             },
-            children: "Back"
-          }), page >= steps.length ? /*#__PURE__*/_jsx(ExperimentalFormSubmit, {
-            variant: "primary",
-            "aria-label": "Complete",
-            children: "Complete"
-          }) : /*#__PURE__*/_jsx(Button, {
-            variant: "primary",
-            "aria-label": "Next step",
-            onClick: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-              var valid;
-              return _regeneratorRuntime.wrap(function _callee$(_context) {
-                while (1) switch (_context.prev = _context.next) {
-                  case 0:
-                    _context.next = 2;
-                    return trigger(steps[page - 1]);
-                  case 2:
-                    valid = _context.sent;
-                    if (valid) {
-                      goToNextPage();
-                    }
-                  case 4:
-                  case "end":
-                    return _context.stop();
-                }
-              }, _callee);
-            })),
-            children: "Next"
+            children: "Reset"
           })]
-        }), /*#__PURE__*/_jsx(Button, {
-          variant: "subtle",
-          "aria-label": "Reset the form",
-          onClick: function onClick() {
-            reset();
-            goToPage(1);
-          },
-          children: "Reset"
+        }), /*#__PURE__*/_jsx("div", {
+          className: stl(_templateObject34 || (_templateObject34 = _taggedTemplateLiteral(["mt-8 mx-auto"]))),
+          children: /*#__PURE__*/_jsx(DotPagination, {
+            nbPages: steps.length,
+            currentPage: page,
+            onChange: goToPage,
+            size: "small"
+          })
         })]
-      }), /*#__PURE__*/_jsx("div", {
-        className: stl(_templateObject33 || (_templateObject33 = _taggedTemplateLiteral(["mt-8 mx-auto"]))),
-        children: /*#__PURE__*/_jsx(DotPagination, {
-          nbPages: steps.length,
-          currentPage: page,
-          onChange: goToPage,
-          size: "small"
-        })
+      }), /*#__PURE__*/_jsx("hr", {
+        className: stl(_templateObject35 || (_templateObject35 = _taggedTemplateLiteral(["text-grey-500"])))
+      }), /*#__PURE__*/_jsx("code", {
+        className: stl(_templateObject36 || (_templateObject36 = _taggedTemplateLiteral(["whitespace-pre display-code"]))),
+        children: JSON.stringify(formData, null, 2)
       })]
-    }), /*#__PURE__*/_jsx("hr", {
-      className: stl(_templateObject34 || (_templateObject34 = _taggedTemplateLiteral(["text-grey-500"])))
-    }), /*#__PURE__*/_jsx("code", {
-      className: stl(_templateObject35 || (_templateObject35 = _taggedTemplateLiteral(["whitespace-pre display-code"]))),
-      children: JSON.stringify(formData, null, 2)
-    })]
+    })
   });
@@ -459,237 +462,240 @@ };
   }
-  return /*#__PURE__*/_jsxs("div", {
-    className: stl(_templateObject36 || (_templateObject36 = _taggedTemplateLiteral(["flex flex-col gap-8 w-4/5"]))),
-    children: [/*#__PURE__*/_jsxs(ExperimentalForm, {
-      onSubmit: function onSubmit(e) {
-        setRevalidationEnabled(true);
-        formik.handleSubmit(e);
-      },
-      onReset: function onReset(e) {
-        setRevalidationEnabled(false);
-        formik.handleReset(e);
-      },
-      className: stl(_templateObject37 || (_templateObject37 = _taggedTemplateLiteral(["flex flex-col gap-8 overflow-hidden"]))),
-      children: [/*#__PURE__*/_jsx(ExperimentalFormErrorMessage, {
-        locale: {
-          errorText: function errorText(invalidFields) {
-            return /*#__PURE__*/_jsxs(_Fragment, {
-              children: [/*#__PURE__*/_jsxs("div", {
-                className: stl(_templateObject38 || (_templateObject38 = _taggedTemplateLiteral(["display-heading mb-2"]))),
-                children: ["Please fix ", invalidFields.length, " error", invalidFields.length > 1 ? "s" : "", " below and try again."]
-              }), /*#__PURE__*/_jsx("div", {
-                className: stl(_templateObject39 || (_templateObject39 = _taggedTemplateLiteral(["flex flex-col"]))),
-                children: /*#__PURE__*/_jsx("a", {
-                  href: "#",
-                  className: stl(_templateObject40 || (_templateObject40 = _taggedTemplateLiteral(["text-black underline hover:text-grey-800"]))),
-                  onClick: function onClick(e) {
-                    e.preventDefault();
-                    var firstInvalid = steps.find(function (step) {
-                      return getFieldState(step).status === "invalid";
-                    });
-                    if (firstInvalid) {
-                      goToPage(steps.indexOf(firstInvalid) + 1);
-                    }
-                  },
-                  children: "Go to first error"
-                })
-              })]
-            });
-          }
-        }
-      }), /*#__PURE__*/_jsxs("div", {
-        className: stl(_templateObject41 || (_templateObject41 = _taggedTemplateLiteral(["flex transition-transform ease-out duration-500"]))),
-        style: {
-          transform: "translateX(-".concat((page - 1) * 100, "%)")
+  return /*#__PURE__*/_jsx("div", {
+    className: stl(_templateObject37 || (_templateObject37 = _taggedTemplateLiteral(["@container w-full flex justify-center"]))),
+    children: /*#__PURE__*/_jsxs("div", {
+      className: stl(_templateObject38 || (_templateObject38 = _taggedTemplateLiteral(["flex flex-col gap-8 w-full @lg:w-4/5"]))),
+      children: [/*#__PURE__*/_jsxs(Form, {
+        onSubmit: function onSubmit(e) {
+          setRevalidationEnabled(true);
+          formik.handleSubmit(e);
         },
-        children: [/*#__PURE__*/_jsx(Field, {
-          label: /*#__PURE__*/_jsx("h2", {
-            className: stl(_templateObject42 || (_templateObject42 = _taggedTemplateLiteral(["display-xlarge whitespace-normal inline"]))),
-            children: "How should we display products that contain multiple variants?"
-          }),
-          labelFor: variantsEnum[0],
-          state: getFieldState("variants"),
-          className: stl(_templateObject43 || (_templateObject43 = _taggedTemplateLiteral(["w-full shrink-0"]))),
-          children: /*#__PURE__*/_jsx("div", {
-            className: stl(_templateObject44 || (_templateObject44 = _taggedTemplateLiteral(["mt-7"]))),
-            children: variantsOptions.map(function (option) {
-              return /*#__PURE__*/_jsxs("label", {
-                htmlFor: option.value,
-                className: stl(_templateObject45 || (_templateObject45 = _taggedTemplateLiteral(["flex flex-col gap-3 p-6 rounded display-body transition-colors hover:bg-grey-100"]))),
+        onReset: function onReset(e) {
+          setRevalidationEnabled(false);
+          formik.handleReset(e);
+        },
+        className: stl(_templateObject39 || (_templateObject39 = _taggedTemplateLiteral(["flex flex-col gap-8 overflow-hidden"]))),
+        children: [/*#__PURE__*/_jsx(FormErrorMessage, {
+          locale: {
+            errorText: function errorText(invalidFields) {
+              return /*#__PURE__*/_jsxs(_Fragment, {
                 children: [/*#__PURE__*/_jsxs("div", {
-                  className: stl(_templateObject46 || (_templateObject46 = _taggedTemplateLiteral(["flex items-center gap-2"]))),
-                  children: [/*#__PURE__*/_jsx(RadioButton, _objectSpread(_objectSpread({
-                    id: option.value,
-                    "aria-labelledby": option.value,
-                    required: true
-                  }, formik.getFieldProps({
-                    name: "variants",
-                    value: option.value,
-                    type: "radio"
-                  })), {}, {
-                    className: stl(_templateObject47 || (_templateObject47 = _taggedTemplateLiteral(["shrink-0"])))
-                  })), option.title]
+                  className: stl(_templateObject40 || (_templateObject40 = _taggedTemplateLiteral(["display-heading mb-2"]))),
+                  children: ["Please fix ", invalidFields.length, " error", invalidFields.length > 1 ? "s" : "", " below and try again."]
                 }), /*#__PURE__*/_jsx("div", {
-                  className: stl(_templateObject48 || (_templateObject48 = _taggedTemplateLiteral(["ml-6 typo-subdued"]))),
-                  children: option.description
+                  className: stl(_templateObject41 || (_templateObject41 = _taggedTemplateLiteral(["flex flex-col"]))),
+                  children: /*#__PURE__*/_jsx("a", {
+                    href: "#",
+                    className: stl(_templateObject42 || (_templateObject42 = _taggedTemplateLiteral(["text-black underline hover:text-grey-800"]))),
+                    onClick: function onClick(e) {
+                      e.preventDefault();
+                      var firstInvalid = steps.find(function (step) {
+                        return getFieldState(step).status === "invalid";
+                      });
+                      if (firstInvalid) {
+                        goToPage(steps.indexOf(firstInvalid) + 1);
+                      }
+                    },
+                    children: "Go to first error"
+                  })
                 })]
-              }, option.value);
+              });
+            }
+          }
+        }), /*#__PURE__*/_jsxs("div", {
+          className: stl(_templateObject43 || (_templateObject43 = _taggedTemplateLiteral(["flex transition-transform ease-out duration-500"]))),
+          style: {
+            transform: "translateX(-".concat((page - 1) * 100, "%)")
+          },
+          children: [/*#__PURE__*/_jsx(Field, {
+            label: /*#__PURE__*/_jsx("h2", {
+              className: stl(_templateObject44 || (_templateObject44 = _taggedTemplateLiteral(["display-xlarge whitespace-normal inline"]))),
+              children: "How should we display products that contain multiple variants?"
+            }),
+            labelFor: variantsEnum[0],
+            state: getFieldState("variants"),
+            className: stl(_templateObject45 || (_templateObject45 = _taggedTemplateLiteral(["w-full shrink-0"]))),
+            children: /*#__PURE__*/_jsx("div", {
+              className: stl(_templateObject46 || (_templateObject46 = _taggedTemplateLiteral(["mt-7"]))),
+              children: variantsOptions.map(function (option) {
+                return /*#__PURE__*/_jsxs("label", {
+                  htmlFor: option.value,
+                  className: stl(_templateObject47 || (_templateObject47 = _taggedTemplateLiteral(["flex flex-col gap-3 p-6 rounded display-body transition-colors hover:bg-grey-100"]))),
+                  children: [/*#__PURE__*/_jsxs("div", {
+                    className: stl(_templateObject48 || (_templateObject48 = _taggedTemplateLiteral(["flex items-center gap-2"]))),
+                    children: [/*#__PURE__*/_jsx(RadioButton, _objectSpread(_objectSpread({
+                      id: option.value,
+                      "aria-labelledby": option.value,
+                      required: true
+                    }, formik.getFieldProps({
+                      name: "variants",
+                      value: option.value,
+                      type: "radio"
+                    })), {}, {
+                      className: stl(_templateObject49 || (_templateObject49 = _taggedTemplateLiteral(["shrink-0"])))
+                    })), option.title]
+                  }), /*#__PURE__*/_jsx("div", {
+                    className: stl(_templateObject50 || (_templateObject50 = _taggedTemplateLiteral(["ml-6 typo-subdued"]))),
+                    children: option.description
+                  })]
+                }, option.value);
+              })
             })
-          })
-        }), /*#__PURE__*/_jsx(Field, {
-          label: /*#__PURE__*/_jsx("h2", {
-            className: stl(_templateObject49 || (_templateObject49 = _taggedTemplateLiteral(["display-xlarge whitespace-normal inline"]))),
-            children: "How would you like to show out-of-stock items?"
-          }),
-          labelFor: outOfStockEnum[0],
-          state: getFieldState("outOfStock"),
-          className: stl(_templateObject50 || (_templateObject50 = _taggedTemplateLiteral(["w-full shrink-0"]))),
-          children: /*#__PURE__*/_jsx("div", {
-            className: stl(_templateObject51 || (_templateObject51 = _taggedTemplateLiteral(["mt-7"]))),
-            children: outOfStockOptions.map(function (option) {
-              return /*#__PURE__*/_jsxs("label", {
-                htmlFor: option.value,
-                className: stl(_templateObject52 || (_templateObject52 = _taggedTemplateLiteral(["flex flex-col gap-3 p-6 rounded display-body transition-colors hover:bg-grey-100"]))),
-                children: [/*#__PURE__*/_jsxs("div", {
-                  className: stl(_templateObject53 || (_templateObject53 = _taggedTemplateLiteral(["flex items-center gap-2"]))),
-                  children: [/*#__PURE__*/_jsx(RadioButton, _objectSpread(_objectSpread({
-                    id: option.value,
-                    "aria-labelledby": option.value,
-                    required: true
-                  }, formik.getFieldProps({
-                    name: "outOfStock",
-                    value: option.value,
-                    type: "radio"
-                  })), {}, {
-                    className: stl(_templateObject54 || (_templateObject54 = _taggedTemplateLiteral(["shrink-0"])))
-                  })), option.title]
-                }), /*#__PURE__*/_jsx("div", {
-                  className: stl(_templateObject55 || (_templateObject55 = _taggedTemplateLiteral(["ml-6 typo-subdued"]))),
-                  children: option.description
-                })]
-              }, option.value);
+          }), /*#__PURE__*/_jsx(Field, {
+            label: /*#__PURE__*/_jsx("h2", {
+              className: stl(_templateObject51 || (_templateObject51 = _taggedTemplateLiteral(["display-xlarge whitespace-normal inline"]))),
+              children: "How would you like to show out-of-stock items?"
+            }),
+            labelFor: outOfStockEnum[0],
+            state: getFieldState("outOfStock"),
+            className: stl(_templateObject52 || (_templateObject52 = _taggedTemplateLiteral(["w-full shrink-0"]))),
+            children: /*#__PURE__*/_jsx("div", {
+              className: stl(_templateObject53 || (_templateObject53 = _taggedTemplateLiteral(["mt-7"]))),
+              children: outOfStockOptions.map(function (option) {
+                return /*#__PURE__*/_jsxs("label", {
+                  htmlFor: option.value,
+                  className: stl(_templateObject54 || (_templateObject54 = _taggedTemplateLiteral(["flex flex-col gap-3 p-6 rounded display-body transition-colors hover:bg-grey-100"]))),
+                  children: [/*#__PURE__*/_jsxs("div", {
+                    className: stl(_templateObject55 || (_templateObject55 = _taggedTemplateLiteral(["flex items-center gap-2"]))),
+                    children: [/*#__PURE__*/_jsx(RadioButton, _objectSpread(_objectSpread({
+                      id: option.value,
+                      "aria-labelledby": option.value,
+                      required: true
+                    }, formik.getFieldProps({
+                      name: "outOfStock",
+                      value: option.value,
+                      type: "radio"
+                    })), {}, {
+                      className: stl(_templateObject56 || (_templateObject56 = _taggedTemplateLiteral(["shrink-0"])))
+                    })), option.title]
+                  }), /*#__PURE__*/_jsx("div", {
+                    className: stl(_templateObject57 || (_templateObject57 = _taggedTemplateLiteral(["ml-6 typo-subdued"]))),
+                    children: option.description
+                  })]
+                }, option.value);
+              })
             })
-          })
-        }), /*#__PURE__*/_jsxs(Field, {
-          label: /*#__PURE__*/_jsx("h2", {
-            className: stl(_templateObject56 || (_templateObject56 = _taggedTemplateLiteral(["display-xlarge whitespace-normal inline"]))),
-            children: "Select how your customers can sort their search results"
-          }),
-          labelFor: sortingOptions[0],
-          state: getFieldState("sorting"),
-          className: stl(_templateObject57 || (_templateObject57 = _taggedTemplateLiteral(["w-full shrink-0"]))),
-          children: [/*#__PURE__*/_jsx("div", {
-            className: stl(_templateObject58 || (_templateObject58 = _taggedTemplateLiteral(["mt-4 typo-subdued"]))),
-            children: "Select the sort order options you'd like to show customers. You can change these later."
-          }), /*#__PURE__*/_jsx("div", {
-            className: stl(_templateObject59 || (_templateObject59 = _taggedTemplateLiteral(["mt-7"]))),
-            children: sortingOptions.map(function (option) {
-              return /*#__PURE__*/_jsxs("label", {
-                htmlFor: option,
-                className: stl(_templateObject60 || (_templateObject60 = _taggedTemplateLiteral(["flex gap-2 p-4 rounded display-body transition-colors hover:bg-grey-100"]))),
-                children: [/*#__PURE__*/_jsx(Checkbox, _objectSpread(_objectSpread({
-                  id: option,
-                  required: true,
-                  checked: formik.values.sorting.includes(option)
-                }, formik.getFieldProps("sorting")), {}, {
-                  onChange: function onChange() {
-                    var fieldProps = formik.getFieldProps("sorting");
-                    formik.setFieldValue("sorting", fieldProps.value.includes(option) ? fieldProps.value.filter(function (v) {
-                      return v !== option;
-                    }) : [].concat(_toConsumableArray(fieldProps.value), [option]));
-                  }
-                })), capitalize(option)]
-              }, option);
-            })
+          }), /*#__PURE__*/_jsxs(Field, {
+            label: /*#__PURE__*/_jsx("h2", {
+              className: stl(_templateObject58 || (_templateObject58 = _taggedTemplateLiteral(["display-xlarge whitespace-normal inline"]))),
+              children: "Select how your customers can sort their search results"
+            }),
+            labelFor: sortingOptions[0],
+            state: getFieldState("sorting"),
+            className: stl(_templateObject59 || (_templateObject59 = _taggedTemplateLiteral(["w-full shrink-0"]))),
+            children: [/*#__PURE__*/_jsx("div", {
+              className: stl(_templateObject60 || (_templateObject60 = _taggedTemplateLiteral(["mt-4 typo-subdued"]))),
+              children: "Select the sort order options you'd like to show customers. You can change these later."
+            }), /*#__PURE__*/_jsx("div", {
+              className: stl(_templateObject61 || (_templateObject61 = _taggedTemplateLiteral(["mt-7"]))),
+              children: sortingOptions.map(function (option) {
+                return /*#__PURE__*/_jsxs("label", {
+                  htmlFor: option,
+                  className: stl(_templateObject62 || (_templateObject62 = _taggedTemplateLiteral(["flex gap-2 p-4 rounded display-body transition-colors hover:bg-grey-100"]))),
+                  children: [/*#__PURE__*/_jsx(Checkbox, _objectSpread(_objectSpread({
+                    id: option,
+                    required: true,
+                    checked: formik.values.sorting.includes(option)
+                  }, formik.getFieldProps("sorting")), {}, {
+                    onChange: function onChange() {
+                      var fieldProps = formik.getFieldProps("sorting");
+                      formik.setFieldValue("sorting", fieldProps.value.includes(option) ? fieldProps.value.filter(function (v) {
+                        return v !== option;
+                      }) : [].concat(_toConsumableArray(fieldProps.value), [option]));
+                    }
+                  })), capitalize(option)]
+                }, option);
+              })
+            })]
+          }), /*#__PURE__*/_jsxs(Field, {
+            label: /*#__PURE__*/_jsx("h2", {
+              className: stl(_templateObject63 || (_templateObject63 = _taggedTemplateLiteral(["display-xlarge whitespace-normal inline"]))),
+              children: "Add filters to help narrow results"
+            }),
+            labelFor: filtersOptions[0],
+            state: getFieldState("filters"),
+            className: stl(_templateObject64 || (_templateObject64 = _taggedTemplateLiteral(["w-full shrink-0"]))),
+            children: [/*#__PURE__*/_jsxs("div", {
+              className: stl(_templateObject65 || (_templateObject65 = _taggedTemplateLiteral(["mt-4 typo-subdued"]))),
+              children: ["Select the filter options customers can use to refine results.", /*#__PURE__*/_jsx("br", {}), "You can edit these after setup."]
+            }), /*#__PURE__*/_jsx("div", {
+              className: stl(_templateObject66 || (_templateObject66 = _taggedTemplateLiteral(["mt-7"]))),
+              children: filtersOptions.map(function (option) {
+                return /*#__PURE__*/_jsxs("label", {
+                  htmlFor: option,
+                  className: stl(_templateObject67 || (_templateObject67 = _taggedTemplateLiteral(["flex gap-2 p-4 rounded display-body transition-colors hover:bg-grey-100"]))),
+                  children: [/*#__PURE__*/_jsx(Checkbox, {
+                    id: option,
+                    required: true,
+                    checked: formik.values.filters.includes(option),
+                    onChange: function onChange() {
+                      var fieldProps = formik.getFieldProps("filters");
+                      formik.setFieldValue("filters", fieldProps.value.includes(option) ? fieldProps.value.filter(function (v) {
+                        return v !== option;
+                      }) : [].concat(_toConsumableArray(fieldProps.value), [option]));
+                    }
+                  }), capitalize(option)]
+                }, option);
+              })
+            })]
           })]
-        }), /*#__PURE__*/_jsxs(Field, {
-          label: /*#__PURE__*/_jsx("h2", {
-            className: stl(_templateObject61 || (_templateObject61 = _taggedTemplateLiteral(["display-xlarge whitespace-normal inline"]))),
-            children: "Add filters to help narrow results"
-          }),
-          labelFor: filtersOptions[0],
-          state: getFieldState("filters"),
-          className: stl(_templateObject62 || (_templateObject62 = _taggedTemplateLiteral(["w-full shrink-0"]))),
+        }), /*#__PURE__*/_jsxs("div", {
+          className: stl(_templateObject68 || (_templateObject68 = _taggedTemplateLiteral(["w-full flex justify-between"]))),
           children: [/*#__PURE__*/_jsxs("div", {
-            className: stl(_templateObject63 || (_templateObject63 = _taggedTemplateLiteral(["mt-4 typo-subdued"]))),
-            children: ["Select the filter options customers can use to refine results.", /*#__PURE__*/_jsx("br", {}), "You can edit these after setup."]
-          }), /*#__PURE__*/_jsx("div", {
-            className: stl(_templateObject64 || (_templateObject64 = _taggedTemplateLiteral(["mt-7"]))),
-            children: filtersOptions.map(function (option) {
-              return /*#__PURE__*/_jsxs("label", {
-                htmlFor: option,
-                className: stl(_templateObject65 || (_templateObject65 = _taggedTemplateLiteral(["flex gap-2 p-4 rounded display-body transition-colors hover:bg-grey-100"]))),
-                children: [/*#__PURE__*/_jsx(Checkbox, {
-                  id: option,
-                  required: true,
-                  checked: formik.values.filters.includes(option),
-                  onChange: function onChange() {
-                    var fieldProps = formik.getFieldProps("filters");
-                    formik.setFieldValue("filters", fieldProps.value.includes(option) ? fieldProps.value.filter(function (v) {
-                      return v !== option;
-                    }) : [].concat(_toConsumableArray(fieldProps.value), [option]));
+            className: stl(_templateObject69 || (_templateObject69 = _taggedTemplateLiteral(["flex gap-2"]))),
+            children: [/*#__PURE__*/_jsx(Button, {
+              "aria-label": "Previous step",
+              disabled: page <= 1,
+              onClick: function onClick() {
+                return goToPreviousPage();
+              },
+              children: "Back"
+            }), page >= steps.length ? /*#__PURE__*/_jsx(FormSubmit, {
+              variant: "primary",
+              "aria-label": "Complete",
+              children: "Complete"
+            }) : /*#__PURE__*/_jsx(Button, {
+              variant: "primary",
+              "aria-label": "Next step",
+              onClick: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+                return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+                  while (1) switch (_context2.prev = _context2.next) {
+                    case 0:
+                      _context2.next = 2;
+                      return formik.validateField(steps[page - 1]);
+                    case 2:
+                      setNextPageClicked(true); // See workaround above
+                    case 3:
+                    case "end":
+                      return _context2.stop();
                   }
-                }), capitalize(option)]
-              }, option);
-            })
-          })]
-        })]
-      }), /*#__PURE__*/_jsxs("div", {
-        className: stl(_templateObject66 || (_templateObject66 = _taggedTemplateLiteral(["w-full flex justify-between"]))),
-        children: [/*#__PURE__*/_jsxs("div", {
-          className: stl(_templateObject67 || (_templateObject67 = _taggedTemplateLiteral(["flex gap-2"]))),
-          children: [/*#__PURE__*/_jsx(Button, {
-            "aria-label": "Previous step",
-            disabled: page <= 1,
+                }, _callee2);
+              })),
+              children: "Next"
+            })]
+          }), /*#__PURE__*/_jsx(Button, {
+            variant: "subtle",
+            "aria-label": "Reset the form",
             onClick: function onClick() {
-              return goToPreviousPage();
+              formik.resetForm();
+              goToPage(1);
             },
-            children: "Back"
-          }), page >= steps.length ? /*#__PURE__*/_jsx(ExperimentalFormSubmit, {
-            variant: "primary",
-            "aria-label": "Complete",
-            children: "Complete"
-          }) : /*#__PURE__*/_jsx(Button, {
-            variant: "primary",
-            "aria-label": "Next step",
-            onClick: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-              return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-                while (1) switch (_context2.prev = _context2.next) {
-                  case 0:
-                    _context2.next = 2;
-                    return formik.validateField(steps[page - 1]);
-                  case 2:
-                    setNextPageClicked(true); // See workaround above
-                  case 3:
-                  case "end":
-                    return _context2.stop();
-                }
-              }, _callee2);
-            })),
-            children: "Next"
+            children: "Reset"
           })]
-        }), /*#__PURE__*/_jsx(Button, {
-          variant: "subtle",
-          "aria-label": "Reset the form",
-          onClick: function onClick() {
-            formik.resetForm();
-            goToPage(1);
-          },
-          children: "Reset"
+        }), /*#__PURE__*/_jsx("div", {
+          className: stl(_templateObject70 || (_templateObject70 = _taggedTemplateLiteral(["mt-8 mx-auto"]))),
+          children: /*#__PURE__*/_jsx(DotPagination, {
+            nbPages: steps.length,
+            currentPage: page,
+            onChange: goToPage,
+            size: "small"
+          })
         })]
-      }), /*#__PURE__*/_jsx("div", {
-        className: stl(_templateObject68 || (_templateObject68 = _taggedTemplateLiteral(["mt-8 mx-auto"]))),
-        children: /*#__PURE__*/_jsx(DotPagination, {
-          nbPages: steps.length,
-          currentPage: page,
-          onChange: goToPage,
-          size: "small"
-        })
+      }), /*#__PURE__*/_jsx("hr", {
+        className: stl(_templateObject71 || (_templateObject71 = _taggedTemplateLiteral(["text-grey-500"])))
+      }), /*#__PURE__*/_jsx("code", {
+        className: stl(_templateObject72 || (_templateObject72 = _taggedTemplateLiteral(["whitespace-pre display-code"]))),
+        children: JSON.stringify(formData, null, 2)
       })]
-    }), /*#__PURE__*/_jsx("hr", {
-      className: stl(_templateObject69 || (_templateObject69 = _taggedTemplateLiteral(["text-grey-500"])))
-    }), /*#__PURE__*/_jsx("code", {
-      className: stl(_templateObject70 || (_templateObject70 = _taggedTemplateLiteral(["whitespace-pre display-code"]))),
-      children: JSON.stringify(formData, null, 2)
-    })]
+    })
   });
 };

dist/esm/Fields/Form/stories/ValidationStrategies.js

@@ -5,3 +5,3 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
 import _regeneratorRuntime from "@babel/runtime/regenerator";
@@ -20,3 +20,3 @@ 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; }
 import { Input } from "../../Input";
-import { ExperimentalForm, ExperimentalFormErrorMessage, ExperimentalFormReset, ExperimentalFormSubmit } from "../Form";
+import { Form, FormErrorMessage, FormReset, FormSubmit } from "../Form";
 import { useFormikAutoFocusOnError } from "./utils/useFormikAutoFocusOnError";
@@ -131,112 +131,57 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
   };
-  return /*#__PURE__*/_jsxs("div", {
-    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex flex-col gap-8 w-5/6"]))),
-    children: [/*#__PURE__*/_jsxs(ExperimentalForm, {
-      onSubmit: handleSubmit(function (data) {
-        return setFormData(data);
-      }),
-      onReset: function onReset() {
-        return setFormData(initialFormData);
-      },
-      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex flex-col items-start gap-6 min-w-72"]))),
-      children: [/*#__PURE__*/_jsx(ExperimentalFormErrorMessage, {}), /*#__PURE__*/_jsx(Controller, {
-        name: "cardOwner",
-        control: control,
-        render: function render(_ref) {
-          var field = _ref.field;
-          return /*#__PURE__*/_jsx(Field, {
-            label: "Card Owner",
-            labelFor: "cardOwner",
-            description: "Please enter the card owner",
-            state: getFieldState("cardOwner"),
-            className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["w-full"]))),
-            children: /*#__PURE__*/_jsx(Input, _objectSpread({
-              id: "cardOwner",
-              placeholder: "John Doe",
-              required: true
-            }, field))
-          });
-        }
-      }), /*#__PURE__*/_jsx(Controller, {
-        name: "cardNumber",
-        control: control,
-        render: function render(_ref2) {
-          var field = _ref2.field;
-          return /*#__PURE__*/_jsx(Field, {
-            label: "Card Number",
-            labelFor: "cardNumber",
-            description: "Please enter the card number",
-            state: getFieldState("cardNumber"),
-            className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["w-full"]))),
-            children: /*#__PURE__*/_jsx(Input, _objectSpread(_objectSpread({
-              id: "cardNumber",
-              placeholder: "Card number",
-              maxLength: 16 + 3 // 3 spaces
-              ,
-              startIcon: CreditCardIcon,
-              required: true
-            }, field), {}, {
-              onChange: function onChange(e) {
-                e.target.value = formatInputValue(e, 4, " ");
-                field.onChange(e);
-                if (e.target.value.length === 19) {
-                  trigger("cardNumber");
-                }
-              }
-            }))
-          });
-        }
-      }), /*#__PURE__*/_jsxs("div", {
-        className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["w-full flex gap-4"]))),
-        children: [/*#__PURE__*/_jsx(Controller, {
-          name: "cardExpirationDate",
+  return /*#__PURE__*/_jsx("div", {
+    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["@container w-full flex justify-center"]))),
+    children: /*#__PURE__*/_jsxs("div", {
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex flex-col gap-8 w-full @lg:w-1/2"]))),
+      children: [/*#__PURE__*/_jsxs(Form, {
+        onSubmit: handleSubmit(function (data) {
+          return setFormData(data);
+        }),
+        onReset: function onReset() {
+          return setFormData(initialFormData);
+        },
+        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["flex flex-col items-start gap-6 min-w-72"]))),
+        children: [/*#__PURE__*/_jsx(FormErrorMessage, {}), /*#__PURE__*/_jsx(Controller, {
+          name: "cardOwner",
           control: control,
-          render: function render(_ref3) {
-            var field = _ref3.field;
+          render: function render(_ref) {
+            var field = _ref.field;
             return /*#__PURE__*/_jsx(Field, {
-              label: "Card Expiration Date",
-              labelFor: "cardExpirationDate",
-              description: "Please enter the card expiration date",
-              state: getFieldState("cardExpirationDate"),
-              className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["w-full"]))),
-              children: /*#__PURE__*/_jsx(Input, _objectSpread(_objectSpread({
-                id: "cardExpirationDate",
-                placeholder: "MM/YY",
-                maxLength: 4 + 1 // 1 slash
-                ,
-                startIcon: CalendarIcon,
+              label: "Card Owner",
+              labelFor: "cardOwner",
+              description: "Please enter the card owner",
+              state: getFieldState("cardOwner"),
+              className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["w-full"]))),
+              children: /*#__PURE__*/_jsx(Input, _objectSpread({
+                id: "cardOwner",
+                placeholder: "John Doe",
                 required: true
-              }, field), {}, {
-                onChange: function onChange(e) {
-                  e.target.value = formatInputValue(e, 2, "/");
-                  field.onChange(e);
-                },
-                onBlur: function onBlur() {
-                  trigger("cardExpirationDate");
-                  field.onBlur();
-                }
-              }))
+              }, field))
             });
           }
         }), /*#__PURE__*/_jsx(Controller, {
-          name: "cardCVC",
+          name: "cardNumber",
           control: control,
-          render: function render(_ref4) {
-            var field = _ref4.field;
+          render: function render(_ref2) {
+            var field = _ref2.field;
             return /*#__PURE__*/_jsx(Field, {
-              label: "Card CVC",
-              labelFor: "cardCVC",
-              description: "Please enter the card security code",
-              state: getFieldState("cardCVC"),
-              className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["w-full"]))),
+              label: "Card Number",
+              labelFor: "cardNumber",
+              description: "Please enter the card number",
+              state: getFieldState("cardNumber"),
+              className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["w-full"]))),
               children: /*#__PURE__*/_jsx(Input, _objectSpread(_objectSpread({
-                id: "cardCVC",
-                placeholder: "CVC",
-                maxLength: 4,
-                startIcon: LockIcon,
+                id: "cardNumber",
+                placeholder: "Card number",
+                maxLength: 16 + 3 // 3 spaces
+                ,
+                startIcon: CreditCardIcon,
                 required: true
               }, field), {}, {
-                onBlur: function onBlur() {
-                  trigger("cardCVC");
-                  field.onBlur();
+                onChange: function onChange(e) {
+                  e.target.value = formatInputValue(e, 4, " ");
+                  field.onChange(e);
+                  if (e.target.value.length === 19) {
+                    trigger("cardNumber");
+                  }
                 }
@@ -246,23 +191,81 @@ }))
           }
+        }), /*#__PURE__*/_jsxs("div", {
+          className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["w-full flex gap-4 flex-col @xl:flex-row"]))),
+          children: [/*#__PURE__*/_jsx(Controller, {
+            name: "cardExpirationDate",
+            control: control,
+            render: function render(_ref3) {
+              var field = _ref3.field;
+              return /*#__PURE__*/_jsx(Field, {
+                label: "Card Expiration Date",
+                labelFor: "cardExpirationDate",
+                description: "Please enter the card expiration date",
+                state: getFieldState("cardExpirationDate"),
+                className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["w-full"]))),
+                children: /*#__PURE__*/_jsx(Input, _objectSpread(_objectSpread({
+                  id: "cardExpirationDate",
+                  placeholder: "MM/YY",
+                  maxLength: 4 + 1 // 1 slash
+                  ,
+                  startIcon: CalendarIcon,
+                  required: true
+                }, field), {}, {
+                  onChange: function onChange(e) {
+                    e.target.value = formatInputValue(e, 2, "/");
+                    field.onChange(e);
+                  },
+                  onBlur: function onBlur() {
+                    trigger("cardExpirationDate");
+                    field.onBlur();
+                  }
+                }))
+              });
+            }
+          }), /*#__PURE__*/_jsx(Controller, {
+            name: "cardCVC",
+            control: control,
+            render: function render(_ref4) {
+              var field = _ref4.field;
+              return /*#__PURE__*/_jsx(Field, {
+                label: "Card CVC",
+                labelFor: "cardCVC",
+                description: "Please enter the card security code",
+                state: getFieldState("cardCVC"),
+                className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["w-full"]))),
+                children: /*#__PURE__*/_jsx(Input, _objectSpread(_objectSpread({
+                  id: "cardCVC",
+                  placeholder: "CVC",
+                  maxLength: 4,
+                  startIcon: LockIcon,
+                  required: true
+                }, field), {}, {
+                  onBlur: function onBlur() {
+                    trigger("cardCVC");
+                    field.onBlur();
+                  }
+                }))
+              });
+            }
+          })]
+        }), /*#__PURE__*/_jsxs("div", {
+          className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["flex gap-2"]))),
+          children: [/*#__PURE__*/_jsx(FormSubmit, {
+            variant: "primary",
+            "aria-label": "Save the form",
+            children: "Save"
+          }), /*#__PURE__*/_jsx(FormReset, {
+            "aria-label": "Reset the form",
+            onClick: function onClick() {
+              return reset();
+            },
+            children: "Reset"
+          })]
         })]
-      }), /*#__PURE__*/_jsxs("div", {
-        className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["flex gap-2"]))),
-        children: [/*#__PURE__*/_jsx(ExperimentalFormSubmit, {
-          variant: "primary",
-          "aria-label": "Save the form",
-          children: "Save"
-        }), /*#__PURE__*/_jsx(ExperimentalFormReset, {
-          "aria-label": "Reset the form",
-          onClick: function onClick() {
-            return reset();
-          },
-          children: "Reset"
-        })]
+      }), /*#__PURE__*/_jsx("hr", {
+        className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["text-grey-500"])))
+      }), /*#__PURE__*/_jsx("code", {
+        className: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["whitespace-pre display-code"]))),
+        children: JSON.stringify(formData, null, 2)
       })]
-    }), /*#__PURE__*/_jsx("hr", {
-      className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["text-grey-500"])))
-    }), /*#__PURE__*/_jsx("code", {
-      className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["whitespace-pre display-code"]))),
-      children: JSON.stringify(formData, null, 2)
-    })]
+    })
   });
@@ -323,128 +326,131 @@ };
   useFormikAutoFocusOnError(formik);
-  return /*#__PURE__*/_jsxs("div", {
-    className: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["flex flex-col gap-8 w-5/6"]))),
-    children: [/*#__PURE__*/_jsxs(ExperimentalForm, {
-      onSubmit: function onSubmit(e) {
-        setRevalidationEnabled(true);
-        formik.handleSubmit(e);
-      },
-      onReset: function onReset(e) {
-        setRevalidationEnabled(false);
-        formik.handleReset(e);
-      },
-      className: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["flex flex-col items-start gap-6 min-w-72"]))),
-      children: [/*#__PURE__*/_jsx(ExperimentalFormErrorMessage, {}), /*#__PURE__*/_jsx(Field, {
-        label: "Card Owner",
-        labelFor: "cardOwner",
-        description: "Please enter the card owner",
-        state: getFieldState("cardOwner"),
-        className: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["w-full"]))),
-        children: /*#__PURE__*/_jsx(Input, _objectSpread({
-          id: "cardOwner",
-          placeholder: "John Doe",
-          required: true
-        }, formik.getFieldProps("cardOwner")))
-      }), /*#__PURE__*/_jsx(Field, {
-        label: "Card Number",
-        labelFor: "cardNumber",
-        description: "Please enter the card number",
-        state: getFieldState("cardNumber"),
-        className: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["w-full"]))),
-        children: /*#__PURE__*/_jsx(Input, _objectSpread(_objectSpread({
-          id: "cardNumber",
-          placeholder: "Card number",
-          maxLength: 16 + 3 // 3 spaces
-          ,
-          startIcon: CreditCardIcon,
-          required: true
-        }, formik.getFieldProps("cardNumber")), {}, {
-          onChange: ( /*#__PURE__*/function () {
-            var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(e) {
-              var value;
-              return _regeneratorRuntime.wrap(function _callee$(_context) {
-                while (1) switch (_context.prev = _context.next) {
-                  case 0:
-                    value = formatInputValue(e, 4, " ");
-                    _context.next = 3;
-                    return formik.setFieldValue("cardNumber", value);
-                  case 3:
-                    if (value.length === 19) {
-                      formik.validateField("cardNumber");
-                    }
-                  case 4:
-                  case "end":
-                    return _context.stop();
-                }
-              }, _callee);
-            }));
-            return function (_x) {
-              return _ref5.apply(this, arguments);
-            };
-          }())
-        }))
-      }), /*#__PURE__*/_jsxs("div", {
-        className: stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["w-full flex gap-4"]))),
-        children: [/*#__PURE__*/_jsx(Field, {
-          label: "Card Expiration Date",
-          labelFor: "cardExpirationDate",
-          description: "Please enter the card expiration date",
-          state: getFieldState("cardExpirationDate"),
+  return /*#__PURE__*/_jsx("div", {
+    className: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["@container w-full flex justify-center"]))),
+    children: /*#__PURE__*/_jsxs("div", {
+      className: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["flex flex-col gap-8 w-full @lg:w-1/2"]))),
+      children: [/*#__PURE__*/_jsxs(Form, {
+        onSubmit: function onSubmit(e) {
+          setRevalidationEnabled(true);
+          formik.handleSubmit(e);
+        },
+        onReset: function onReset(e) {
+          setRevalidationEnabled(false);
+          formik.handleReset(e);
+        },
+        className: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["flex flex-col items-start gap-6 min-w-72"]))),
+        children: [/*#__PURE__*/_jsx(FormErrorMessage, {}), /*#__PURE__*/_jsx(Field, {
+          label: "Card Owner",
+          labelFor: "cardOwner",
+          description: "Please enter the card owner",
+          state: getFieldState("cardOwner"),
+          className: stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["w-full"]))),
+          children: /*#__PURE__*/_jsx(Input, _objectSpread({
+            id: "cardOwner",
+            placeholder: "John Doe",
+            required: true
+          }, formik.getFieldProps("cardOwner")))
+        }), /*#__PURE__*/_jsx(Field, {
+          label: "Card Number",
+          labelFor: "cardNumber",
+          description: "Please enter the card number",
+          state: getFieldState("cardNumber"),
           className: stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["w-full"]))),
           children: /*#__PURE__*/_jsx(Input, _objectSpread(_objectSpread({
-            id: "cardExpirationDate",
-            placeholder: "MM/YY",
-            maxLength: 4 + 1 // 1 slash
+            id: "cardNumber",
+            placeholder: "Card number",
+            maxLength: 16 + 3 // 3 spaces
             ,
-            startIcon: CalendarIcon,
+            startIcon: CreditCardIcon,
             required: true
-          }, formik.getFieldProps("cardExpirationDate")), {}, {
-            onChange: function onChange(e) {
-              e.target.value = formatInputValue(e, 2, "/");
-              formik.getFieldProps("cardExpirationDate").onChange(e);
+          }, formik.getFieldProps("cardNumber")), {}, {
+            onChange: ( /*#__PURE__*/function () {
+              var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(e) {
+                var value;
+                return _regeneratorRuntime.wrap(function _callee$(_context) {
+                  while (1) switch (_context.prev = _context.next) {
+                    case 0:
+                      value = formatInputValue(e, 4, " ");
+                      _context.next = 3;
+                      return formik.setFieldValue("cardNumber", value);
+                    case 3:
+                      if (value.length === 19) {
+                        formik.validateField("cardNumber");
+                      }
+                    case 4:
+                    case "end":
+                      return _context.stop();
+                  }
+                }, _callee);
+              }));
+              return function (_x) {
+                return _ref5.apply(this, arguments);
+              };
+            }())
+          }))
+        }), /*#__PURE__*/_jsxs("div", {
+          className: stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["w-full flex gap-4 flex-col @xl:flex-row"]))),
+          children: [/*#__PURE__*/_jsx(Field, {
+            label: "Card Expiration Date",
+            labelFor: "cardExpirationDate",
+            description: "Please enter the card expiration date",
+            state: getFieldState("cardExpirationDate"),
+            className: stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["w-full"]))),
+            children: /*#__PURE__*/_jsx(Input, _objectSpread(_objectSpread({
+              id: "cardExpirationDate",
+              placeholder: "MM/YY",
+              maxLength: 4 + 1 // 1 slash
+              ,
+              startIcon: CalendarIcon,
+              required: true
+            }, formik.getFieldProps("cardExpirationDate")), {}, {
+              onChange: function onChange(e) {
+                e.target.value = formatInputValue(e, 2, "/");
+                formik.getFieldProps("cardExpirationDate").onChange(e);
+              },
+              onBlur: function onBlur(e) {
+                formik.validateField("cardExpirationDate");
+                formik.getFieldProps("cardExpirationDate").onBlur(e);
+              }
+            }))
+          }), /*#__PURE__*/_jsx(Field, {
+            label: "Card CVC",
+            labelFor: "cardCVC",
+            description: "Please enter the card security code",
+            state: getFieldState("cardCVC"),
+            className: stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["w-full"]))),
+            children: /*#__PURE__*/_jsx(Input, _objectSpread(_objectSpread({
+              id: "cardCVC",
+              placeholder: "CVC",
+              maxLength: 4,
+              startIcon: LockIcon,
+              required: true
+            }, formik.getFieldProps("cardCVC")), {}, {
+              onBlur: function onBlur(e) {
+                formik.validateField("cardCVC");
+                formik.getFieldProps("cardCVC").onBlur(e);
+              }
+            }))
+          })]
+        }), /*#__PURE__*/_jsxs("div", {
+          className: stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["flex gap-2"]))),
+          children: [/*#__PURE__*/_jsx(FormSubmit, {
+            variant: "primary",
+            "aria-label": "Save the form",
+            children: "Save"
+          }), /*#__PURE__*/_jsx(FormReset, {
+            "aria-label": "Reset the form",
+            onClick: function onClick() {
+              return formik.resetForm();
             },
-            onBlur: function onBlur(e) {
-              formik.validateField("cardExpirationDate");
-              formik.getFieldProps("cardExpirationDate").onBlur(e);
-            }
-          }))
-        }), /*#__PURE__*/_jsx(Field, {
-          label: "Card CVC",
-          labelFor: "cardCVC",
-          description: "Please enter the card security code",
-          state: getFieldState("cardCVC"),
-          className: stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["w-full"]))),
-          children: /*#__PURE__*/_jsx(Input, _objectSpread(_objectSpread({
-            id: "cardCVC",
-            placeholder: "CVC",
-            maxLength: 4,
-            startIcon: LockIcon,
-            required: true
-          }, formik.getFieldProps("cardCVC")), {}, {
-            onBlur: function onBlur(e) {
-              formik.validateField("cardCVC");
-              formik.getFieldProps("cardCVC").onBlur(e);
-            }
-          }))
+            children: "Reset"
+          })]
         })]
-      }), /*#__PURE__*/_jsxs("div", {
-        className: stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["flex gap-2"]))),
-        children: [/*#__PURE__*/_jsx(ExperimentalFormSubmit, {
-          variant: "primary",
-          "aria-label": "Save the form",
-          children: "Save"
-        }), /*#__PURE__*/_jsx(ExperimentalFormReset, {
-          "aria-label": "Reset the form",
-          onClick: function onClick() {
-            return formik.resetForm();
-          },
-          children: "Reset"
-        })]
+      }), /*#__PURE__*/_jsx("hr", {
+        className: stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["text-grey-500"])))
+      }), /*#__PURE__*/_jsx("code", {
+        className: stl(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["whitespace-pre display-code"]))),
+        children: JSON.stringify(formData, null, 2)
       })]
-    }), /*#__PURE__*/_jsx("hr", {
-      className: stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["text-grey-500"])))
-    }), /*#__PURE__*/_jsx("code", {
-      className: stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["whitespace-pre display-code"]))),
-      children: JSON.stringify(formData, null, 2)
-    })]
+    })
   });
 };

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

@@ -1,1 +0,1 @@
-export declare const useExperimentalForm: () => import("./FormContext").ExperimentalFormContextValue | null;
+export declare const useForm: () => import("./FormContext").FormContextValue | null;

dist/esm/Fields/Form/useForm.js

 import { useContext } from "react";
-import { ExperimentalFormContext } from "./FormContext";
-export var useExperimentalForm = function useExperimentalForm() {
-  return useContext(ExperimentalFormContext);
+import { FormContext } from "./FormContext";
+export var useForm = function useForm() {
+  return useContext(FormContext);
 };

dist/esm/Helpers/utilities/focusable.tailwind.js

@@ -8,3 +8,3 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
     theme = _ref.theme;
-  addComponents(_defineProperty({}, ".focusable:focus,\n    .focusable-within:focus-within,\n    .focusable-visible:focus-visible,\n    .focusable-visible-within:has(:focus-visible),\n    input:focus ~ .focusable-sibling,\n    .focusable-show", {
+  addComponents(_defineProperty({}, ".focusable:focus,\n    .focusable-within:focus-within,\n    .focusable-visible:focus-visible,\n    .focusable-visible-within:has(:focus-visible),\n    input:focus ~ .focusable-sibling,\n    .focusable-visible-group:focus-visible .focusable-visible-group-item,\n    .focusable-show", {
     outline: "2px solid ".concat(theme("colors.accent.600")),
@@ -11,0 +11,0 @@ outlineOffset: "1px"

dist/esm/Indicators/Skeleton/Skeleton.d.ts

 import type { FC } from "react";
 export interface SkeletonProps {
     className?: string;
+    size?: keyof typeof DEFAULT_SKELETON_SIZES;
     circle?: boolean;
     image?: boolean;
 }
+declare const DEFAULT_SKELETON_SIZES: {
+    sm: string;
+    md: string;
+    lg: string;
+};
 /**
@@ -13,1 +19,2 @@ * The `Skeleton` component is used to display a placeholder during loading.
 export declare const Skeleton: FC<SkeletonProps>;
+export {};

dist/esm/Indicators/Skeleton/Skeleton.js

 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _templateObject, _templateObject2;
-var _excluded = ["circle", "image", "className"];
+var _excluded = ["circle", "image", "className", "size"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 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; }
@@ -12,2 +12,8 @@ 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 { jsx as _jsx } from "react/jsx-runtime";
+var DEFAULT_SKELETON_SIZES = {
+  sm: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["w-full h-8"]))),
+  md: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["w-full h-16"]))),
+  lg: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["w-full h-32"])))
+};
+
 /**
@@ -25,10 +31,11 @@ * The `Skeleton` component is used to display a placeholder during loading.
     className = _ref.className,
+    size = _ref.size,
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({}, props), {}, {
     "aria-hidden": true,
-    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex animate-pulse bg-grey-200/80 ", ""])), circle ? "rounded-full aspect-square max-w-fit" : "rounded"), className),
+    className: cx(stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["flex animate-pulse bg-grey-200/80 ", ""])), circle ? "rounded-full aspect-square max-w-fit" : "rounded"), size && DEFAULT_SKELETON_SIZES[size], className),
     children: image ? /*#__PURE__*/_jsx(ImageIcon, {
-      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["mx-auto self-center text-grey-300/50 w-[40%] h-[40%] max-w-[32px] max-h-[32px]"])))
+      className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["mx-auto self-center text-grey-300/50 w-[40%] h-[40%] max-w-[32px] max-h-[32px]"])))
     }) : null
   }));
 };

dist/esm/Layout/Sidebar/SidebarButtonLink.js

@@ -62,3 +62,3 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
       },
-      className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          h-8 min-w-8 w-full rounded\n          flex items-center space-x-3\n          border border-transparent\n          display-body\n          hover:no-underline focus:no-underline\n          ", "\n          ", "\n          ", "\n          ", "\n        "])), disabled ? "cursor-not-allowed opacity-70" : "focus:border-grey-500", isActive ? "shadow-z100" : !disabled && "hover:border-grey-200", isActive && "bg-gradient-to-b from-white to-grey-50", collapsed ? "pl-2" : "px-2"),
+      className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          h-8 min-w-8 w-full rounded\n          flex items-center space-x-3\n          border border-transparent\n          display-body\n          hover:no-underline focus:no-underline\n          ", "\n          ", "\n          ", "\n          ", "\n        "])), disabled ? "cursor-not-allowed opacity-70" : "focusable-visible", isActive ? "shadow-z100" : !disabled && "hover:border-grey-200", isActive && "bg-gradient-to-b from-white to-grey-50", collapsed ? "pl-2" : "px-2"),
       "aria-current": isActive,
@@ -65,0 +65,0 @@ children: [/*#__PURE__*/_jsx(Icon, {

dist/esm/Layout/Sidebar/SidebarLink.js

@@ -26,3 +26,3 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
     id: id,
-    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          flex items-center overflow-hidden w-full\n          group hover:no-underline focus:outline-none\n          ", "\n        "])), disabled ? "cursor-not-allowed" : "cursor-pointer"), className),
+    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          flex items-center w-full\n          group focusable-visible-group hover:no-underline focus:outline-none\n          ", "\n        "])), disabled ? "cursor-not-allowed" : "cursor-pointer"), className),
     "aria-current": isActive,
@@ -34,3 +34,3 @@ children: [/*#__PURE__*/_jsx(Icon, {
     }), /*#__PURE__*/_jsxs("span", {
-      className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          flex-1 inline-flex items-center overflow-hidden\n          ", ""])), disabled ? "text-grey-300" : isActive ? "font-semibold text-accent-600" : "typo-subdued group-focus:text-accent-600 group-hover:text-accent-600"),
+      className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          flex-1 inline-flex items-center overflow-hidden\n          ", ""])), disabled ? "text-grey-300" : isActive ? "font-semibold text-accent-600" : "typo-subdued focusable-visible-group-item group-hover:text-accent-600"),
       children: [/*#__PURE__*/_jsx("span", {
@@ -37,0 +37,0 @@ className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["truncate"]))),

dist/esm/Layout/Sidebar/SidebarLinksGroup/SidebarGroupLink.js

@@ -19,3 +19,3 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
     id: id,
-    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        inline-flex w-full items-center hover:no-underline focus:outline-none leading-md\n        ", "\n        ", ""])), disabled ? "cursor-not-allowed" : "cursor-pointer", disabled ? "text-grey-300" : active ? "font-semibold text-accent-600" : "typo-subdued hover:text-accent-600 focus:text-accent-600"),
+    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        inline-flex w-full items-center hover:no-underline leading-md\n        ", "\n        ", ""])), disabled ? "cursor-not-allowed" : "cursor-pointer focusable-visible", disabled ? "text-grey-300" : active ? "font-semibold text-accent-600" : "typo-subdued hover:text-accent-600"),
     "aria-current": active,
@@ -22,0 +22,0 @@ children: [/*#__PURE__*/_jsx("span", {

dist/esm/Layout/Sidebar/SidebarLinksGroup/SidebarLinksGroup.js

 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 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; }
@@ -54,3 +54,3 @@ 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; }
       type: "button",
-      className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          flex w-full text-left items-center mb-4 overflow-hidden focus:outline-none group cursor-pointer"]))),
+      className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          flex w-full text-left items-center mb-4 focus:outline-none group focusable-visible-group cursor-pointer"]))),
       onClick: function onClick() {
@@ -66,3 +66,3 @@ return setIsOpen(!isOpen);
       }), /*#__PURE__*/_jsx("span", {
-        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["truncate display-subheading uppercase text-grey-800 group-focus:text-accent-500 group-hover:text-accent-500 mr-2"]))),
+        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["truncate display-subheading uppercase text-grey-800 focusable-visible-group-item group-hover:text-accent-500 mr-2"]))),
         children: props.title
@@ -81,6 +81,5 @@ }), /*#__PURE__*/_jsx(ChevronRightIcon, {
       }), /*#__PURE__*/_jsx("ul", {
-        className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["flex-1 space-y-2 overflow-hidden"]))),
+        className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["flex-1 space-y-2 min-w-0"]))),
         children: links.map(function (link, idx) {
           return /*#__PURE__*/_jsx("li", {
-            className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["overflow-hidden"]))),
             children: /*#__PURE__*/_jsx(SidebarGroupLink, _objectSpread(_objectSpread({}, link), {}, {
@@ -87,0 +86,0 @@ active: activeLinkIndex === idx

dist/esm/Layout/Tables/DataTable/DataTable.d.ts

 import type { ReactNode } from "react";
+import { type DisplayMode } from "../Table";
 import type { ColumnDefinition, DataConfiguration, GetItemId, PaginationConfiguration, Row, SelectMode, Sorting, Status } from "./types";
@@ -24,2 +25,3 @@ declare type CanSelectItem<Item> = (item: Item, idx: number) => boolean;
     onChange?(dataConfiguration: DataConfiguration): void;
+    mode?: DisplayMode;
     /** Specify the global status of the table */
@@ -55,3 +57,3 @@ status?: Status;
  */
-export declare const DataTable: <Item extends {}>({ data, itemId, columns, onChange, status, noDataContent, errorContent, sorting, sortMode, pagination, selectMode, selection, onSelectionChange, canSelectItem, canHoverRow, onRowHoveredChanged, locale, }: DataTableProps<Item>) => import("react/jsx-runtime").JSX.Element;
+export declare const DataTable: <Item extends {}>({ data, itemId, columns, onChange, mode, status, noDataContent, errorContent, sorting, sortMode, pagination, selectMode, selection, onSelectionChange, canSelectItem, canHoverRow, onRowHoveredChanged, locale, }: DataTableProps<Item>) => import("react/jsx-runtime").JSX.Element;
 export {};

dist/esm/Layout/Tables/DataTable/DataTable.js

@@ -48,2 +48,4 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
     onChange = _ref.onChange,
+    _ref$mode = _ref.mode,
+    mode = _ref$mode === void 0 ? "comfortable" : _ref$mode,
     _ref$status = _ref.status,
@@ -217,2 +219,3 @@ status = _ref$status === void 0 ? "success" : _ref$status,
       className: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["datatable ", " ", ""])), status === "loading" && "pointer-events-none select-none", status === "loading" && data.length === 0 && "h-48"),
+      mode: mode,
       highlight: false,
@@ -219,0 +222,0 @@ footer: shouldRenderPagination() && /*#__PURE__*/_jsx(DataTableFooter, {

dist/esm/Layout/Tables/Table/Table.d.ts

 import type { DetailedHTMLProps, ReactNode, TableHTMLAttributes, VFC } from "react";
+export declare type DisplayMode = "comfortable" | "compact";
 export interface TableProps extends DetailedHTMLProps<TableHTMLAttributes<HTMLTableElement>, HTMLTableElement> {
@@ -7,2 +8,3 @@ footer?: ReactNode;
     highlight?: boolean;
+    mode?: DisplayMode;
 }
@@ -9,0 +11,0 @@ /**

dist/esm/Layout/Tables/Table/Table.js

@@ -5,3 +5,3 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _templateObject, _templateObject2, _templateObject3;
-var _excluded = ["className", "footer", "smallFooter", "hasActions", "highlight"];
+var _excluded = ["className", "footer", "smallFooter", "hasActions", "highlight", "mode"];
 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; }
@@ -26,2 +26,4 @@ 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; }
     highlight = _ref$highlight === void 0 ? true : _ref$highlight,
+    _ref$mode = _ref.mode,
+    mode = _ref$mode === void 0 ? "comfortable" : _ref$mode,
     props = _objectWithoutProperties(_ref, _excluded);
@@ -33,3 +35,3 @@ return /*#__PURE__*/_jsxs("div", {
       children: /*#__PURE__*/_jsx("table", _objectSpread(_objectSpread({}, props), {}, {
-        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["table ", " ", ""])), hasActions && "table-with-actions", highlight && "table-with-highlight")
+        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["table ", " ", " ", ""])), mode === "compact" && "table-compact", hasActions && "table-with-actions", highlight && "table-with-highlight")
       }))
@@ -36,0 +38,0 @@ }), !!footer && /*#__PURE__*/_jsx(TableFooter, {

dist/esm/Layout/Tables/Table/Table.tailwind.js

@@ -13,3 +13,3 @@ import _plugin from "tailwindcss/plugin";
       "th, td": {
-        padding: "14px 16px"
+        padding: "12px 16px"
       },
@@ -27,2 +27,7 @@ thead: {
     },
+    ".table-compact": {
+      "th, td": {
+        padding: "10px 16px"
+      }
+    },
     ".table-with-actions": {
@@ -29,0 +34,0 @@ "th:last-of-type, td:last-of-type": {

dist/esm/Overlay/MenuButton/components/items/LinkItem.d.ts

@@ -1,3 +0,3 @@
-import type { IconComponentType } from "Icons";
 import type { FC } from "react";
+import type { IconComponentType } from "../../../../Icons";
 import type { BaseItemProps } from "../../useMenuItemProps";
@@ -4,0 +4,0 @@ declare type LinkItemNavigationType = "auto" | "reload" | "newTab";

dist/esm/Overlay/MenuButton/components/items/ToggleItem.d.ts

 import type { DropdownMenuCheckboxItemProps } from "@radix-ui/react-dropdown-menu";
-import type { IconComponentType } from "Icons";
 import type { FC } from "react";
+import type { IconComponentType } from "../../../../Icons";
 export interface ToggleItemProps extends Omit<DropdownMenuCheckboxItemProps, "asChild"> {
@@ -5,0 +5,0 @@ startIcon?: IconComponentType;

dist/esm/styles/tailwind.config.js

@@ -145,3 +145,3 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
   },
-  plugins: [require("@tailwindcss/container-queries"), require("./base.tailwind"), require("../Helpers/utilities/overlay.tailwind"), require("../Helpers/utilities/utilities.tailwind"), require("../Helpers/utilities/focusable.tailwind"), require("../Typography/Typography.tailwind"), require("../Layout/FlexGrid/FlexGrid.tailwind"), require("../Fields/AutoComplete/AutoComplete.tailwind"), require("../Actions/Button/Button.tailwind"), require("../Actions/ToggleGroup/ToggleGroup.tailwind"), require("../Layout/Card/Card.tailwind"), require("../Fields/Checkbox/Checkbox.tailwind"), require("../Indicators/EmptyState/EmptyState.tailwind"), require("../Indicators/Toast/Toast.tailwind"), require("../Helpers/HelpUnderline/HelpUnderline.tailwind"), require("../Fields/Input/Input.tailwind"), require("../Helpers/InstantSearch/InstantSearch.tailwind"), require("../Indicators/KeyboardKey/KeyboardKey.tailwind"), require("../Helpers/Medallion/Medallion.tailwind"), require("../Overlay/Modal/Modal.tailwind"), require("../Indicators/ProgressBar/ProgressBar.tailwind"), require("../Indicators/ProgressSpinner/ProgressSpinner.tailwind"), require("../Fields/RadioGroup/RadioButton.tailwind"), require("../Indicators/ScrollIndicator/ScrollIndicator.tailwind"), require("../Fields/Select/Select.tailwind"), require("../Helpers/Separator/Separator.tailwind"), require("../Actions/Switch/Switch.tailwind"), require("../Navigation/Tabs/Tabs.tailwind"), require("../Layout/Tables/DataTable/DataTable.tailwind"), require("../Layout/Tables/Table/Table.tailwind"), require("../Indicators/Tag/Tag.tailwind"), require("../Fields/TextArea/TextArea.tailwind"), require("../Fields/Toggle/Toggle.tailwind"), require("../Overlay/Tooltip/Tooltip.tailwind"), require("../Helpers/UserContent/UserContent.tailwind"), require("../Fields/DatePicker/DatePicker.tailwind")]
+  plugins: [require("@tailwindcss/container-queries"), require("./base.tailwind"), require("../Helpers/utilities/overlay.tailwind"), require("../Helpers/utilities/utilities.tailwind"), require("../Helpers/utilities/focusable.tailwind"), require("../Typography/Typography.tailwind"), require("../Layout/FlexGrid/FlexGrid.tailwind"), require("../Fields/AutoComplete/AutoComplete.tailwind"), require("../Actions/Button/Button.tailwind"), require("../Actions/ToggleGroup/ToggleGroup.tailwind"), require("../Actions/Accordion/Accordion.tailwind"), require("../Layout/Card/Card.tailwind"), require("../Fields/Checkbox/Checkbox.tailwind"), require("../Indicators/EmptyState/EmptyState.tailwind"), require("../Indicators/Toast/Toast.tailwind"), require("../Helpers/HelpUnderline/HelpUnderline.tailwind"), require("../Fields/Input/Input.tailwind"), require("../Helpers/InstantSearch/InstantSearch.tailwind"), require("../Indicators/KeyboardKey/KeyboardKey.tailwind"), require("../Helpers/Medallion/Medallion.tailwind"), require("../Overlay/Modal/Modal.tailwind"), require("../Indicators/ProgressBar/ProgressBar.tailwind"), require("../Indicators/ProgressSpinner/ProgressSpinner.tailwind"), require("../Fields/RadioGroup/RadioButton.tailwind"), require("../Indicators/ScrollIndicator/ScrollIndicator.tailwind"), require("../Fields/Select/Select.tailwind"), require("../Helpers/Separator/Separator.tailwind"), require("../Actions/Switch/Switch.tailwind"), require("../Navigation/Tabs/Tabs.tailwind"), require("../Layout/Tables/DataTable/DataTable.tailwind"), require("../Layout/Tables/Table/Table.tailwind"), require("../Indicators/Tag/Tag.tailwind"), require("../Fields/TextArea/TextArea.tailwind"), require("../Fields/Toggle/Toggle.tailwind"), require("../Overlay/Tooltip/Tooltip.tailwind"), require("../Helpers/UserContent/UserContent.tailwind"), require("../Fields/DatePicker/DatePicker.tailwind")]
 };

dist/esm/utils/isCssPropertySupported.d.ts

@@ -1,1 +0,1 @@
-export declare const isCssPropertySupported: <P extends number | typeof Symbol.iterator | "filter" | "fill" | "clipPath" | "marker" | "mask" | "grid" | "fontSize" | "translate" | "content" | "color" | "width" | "height" | "direction" | "alignmentBaseline" | "baselineShift" | "clip" | "clipRule" | "colorInterpolation" | "colorInterpolationFilters" | "cursor" | "display" | "dominantBaseline" | "fillOpacity" | "fillRule" | "floodColor" | "floodOpacity" | "fontFamily" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontVariant" | "fontWeight" | "imageRendering" | "letterSpacing" | "lightingColor" | "markerEnd" | "markerMid" | "markerStart" | "offset" | "opacity" | "order" | "overflow" | "paintOrder" | "pointerEvents" | "rotate" | "scale" | "shapeRendering" | "stopColor" | "stopOpacity" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "textAnchor" | "textDecoration" | "textRendering" | "transform" | "unicodeBidi" | "visibility" | "wordSpacing" | "writingMode" | "left" | "right" | "top" | "bottom" | "all" | "columns" | "padding" | "resize" | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | "animation" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationTimingFunction" | "appearance" | "aspectRatio" | "backfaceVisibility" | "background" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPosition" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "blockSize" | "border" | "borderBlock" | "borderBlockColor" | "borderBlockEnd" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStart" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBlockStyle" | "borderBlockWidth" | "borderBottom" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderColor" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImage" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInline" | "borderInlineColor" | "borderInlineEnd" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStart" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderInlineStyle" | "borderInlineWidth" | "borderLeft" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRadius" | "borderRight" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderStyle" | "borderTop" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "borderWidth" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "clear" | "colorScheme" | "columnCount" | "columnFill" | "columnGap" | "columnRule" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "contain" | "counterIncrement" | "counterReset" | "counterSet" | "cssFloat" | "cssText" | "emptyCells" | "flex" | "flexBasis" | "flexDirection" | "flexFlow" | "flexGrow" | "flexShrink" | "flexWrap" | "float" | "font" | "fontFeatureSettings" | "fontKerning" | "fontOpticalSizing" | "fontSynthesis" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontVariationSettings" | "gap" | "gridArea" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumn" | "gridColumnEnd" | "gridColumnGap" | "gridColumnStart" | "gridGap" | "gridRow" | "gridRowEnd" | "gridRowGap" | "gridRowStart" | "gridTemplate" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hyphens" | "imageOrientation" | "inlineSize" | "inset" | "insetBlock" | "insetBlockEnd" | "insetBlockStart" | "insetInline" | "insetInlineEnd" | "insetInlineStart" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "lineBreak" | "lineHeight" | "listStyle" | "listStyleImage" | "listStylePosition" | "listStyleType" | "margin" | "marginBlock" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInline" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "objectFit" | "objectPosition" | "offsetDistance" | "offsetPath" | "offsetRotate" | "orphans" | "outline" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflowAnchor" | "overflowWrap" | "overflowX" | "overflowY" | "overscrollBehavior" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "paddingBlock" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInline" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "perspective" | "perspectiveOrigin" | "placeContent" | "placeItems" | "placeSelf" | "position" | "printColorAdjust" | "quotes" | "rowGap" | "rubyPosition" | "scrollBehavior" | "scrollMargin" | "scrollMarginBlock" | "scrollMarginBlockEnd" | "scrollMarginBlockStart" | "scrollMarginBottom" | "scrollMarginInline" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPadding" | "scrollPaddingBlock" | "scrollPaddingBlockEnd" | "scrollPaddingBlockStart" | "scrollPaddingBottom" | "scrollPaddingInline" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapStop" | "scrollSnapType" | "scrollbarGutter" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textCombineUpright" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasis" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textOrientation" | "textOverflow" | "textShadow" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "touchAction" | "transformBox" | "transformOrigin" | "transformStyle" | "transition" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "userSelect" | "verticalAlign" | "webkitAlignContent" | "webkitAlignItems" | "webkitAlignSelf" | "webkitAnimation" | "webkitAnimationDelay" | "webkitAnimationDirection" | "webkitAnimationDuration" | "webkitAnimationFillMode" | "webkitAnimationIterationCount" | "webkitAnimationName" | "webkitAnimationPlayState" | "webkitAnimationTimingFunction" | "webkitAppearance" | "webkitBackfaceVisibility" | "webkitBackgroundClip" | "webkitBackgroundOrigin" | "webkitBackgroundSize" | "webkitBorderBottomLeftRadius" | "webkitBorderBottomRightRadius" | "webkitBorderRadius" | "webkitBorderTopLeftRadius" | "webkitBorderTopRightRadius" | "webkitBoxAlign" | "webkitBoxFlex" | "webkitBoxOrdinalGroup" | "webkitBoxOrient" | "webkitBoxPack" | "webkitBoxShadow" | "webkitBoxSizing" | "webkitFilter" | "webkitFlex" | "webkitFlexBasis" | "webkitFlexDirection" | "webkitFlexFlow" | "webkitFlexGrow" | "webkitFlexShrink" | "webkitFlexWrap" | "webkitJustifyContent" | "webkitLineClamp" | "webkitMask" | "webkitMaskBoxImage" | "webkitMaskBoxImageOutset" | "webkitMaskBoxImageRepeat" | "webkitMaskBoxImageSlice" | "webkitMaskBoxImageSource" | "webkitMaskBoxImageWidth" | "webkitMaskClip" | "webkitMaskComposite" | "webkitMaskImage" | "webkitMaskOrigin" | "webkitMaskPosition" | "webkitMaskRepeat" | "webkitMaskSize" | "webkitOrder" | "webkitPerspective" | "webkitPerspectiveOrigin" | "webkitTextFillColor" | "webkitTextSizeAdjust" | "webkitTextStroke" | "webkitTextStrokeColor" | "webkitTextStrokeWidth" | "webkitTransform" | "webkitTransformOrigin" | "webkitTransformStyle" | "webkitTransition" | "webkitTransitionDelay" | "webkitTransitionDuration" | "webkitTransitionProperty" | "webkitTransitionTimingFunction" | "webkitUserSelect" | "whiteSpace" | "widows" | "willChange" | "wordBreak" | "wordWrap" | "zIndex" | "getPropertyPriority" | "getPropertyValue" | "item" | "removeProperty" | "setProperty">(prop: P, value: CSSStyleDeclaration[P]) => boolean;
+export declare const isCssPropertySupported: <P extends number | typeof Symbol.iterator | "filter" | "fill" | "clipPath" | "marker" | "mask" | "grid" | "fontSize" | "translate" | "content" | "color" | "width" | "height" | "direction" | "alignmentBaseline" | "baselineShift" | "clip" | "clipRule" | "colorInterpolation" | "colorInterpolationFilters" | "cursor" | "display" | "dominantBaseline" | "fillOpacity" | "fillRule" | "floodColor" | "floodOpacity" | "fontFamily" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontVariant" | "fontWeight" | "imageRendering" | "letterSpacing" | "lightingColor" | "markerEnd" | "markerMid" | "markerStart" | "offset" | "opacity" | "order" | "overflow" | "paintOrder" | "pointerEvents" | "rotate" | "scale" | "shapeRendering" | "stopColor" | "stopOpacity" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "textAnchor" | "textDecoration" | "textRendering" | "transform" | "unicodeBidi" | "visibility" | "wordSpacing" | "writingMode" | "item" | "all" | "left" | "right" | "top" | "bottom" | "columns" | "padding" | "resize" | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | "animation" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationTimingFunction" | "appearance" | "aspectRatio" | "backfaceVisibility" | "background" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPosition" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "blockSize" | "border" | "borderBlock" | "borderBlockColor" | "borderBlockEnd" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStart" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBlockStyle" | "borderBlockWidth" | "borderBottom" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderColor" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImage" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInline" | "borderInlineColor" | "borderInlineEnd" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStart" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderInlineStyle" | "borderInlineWidth" | "borderLeft" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRadius" | "borderRight" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderStyle" | "borderTop" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "borderWidth" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "clear" | "colorScheme" | "columnCount" | "columnFill" | "columnGap" | "columnRule" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "contain" | "counterIncrement" | "counterReset" | "counterSet" | "cssFloat" | "cssText" | "emptyCells" | "flex" | "flexBasis" | "flexDirection" | "flexFlow" | "flexGrow" | "flexShrink" | "flexWrap" | "float" | "font" | "fontFeatureSettings" | "fontKerning" | "fontOpticalSizing" | "fontSynthesis" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontVariationSettings" | "gap" | "gridArea" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumn" | "gridColumnEnd" | "gridColumnGap" | "gridColumnStart" | "gridGap" | "gridRow" | "gridRowEnd" | "gridRowGap" | "gridRowStart" | "gridTemplate" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hyphens" | "imageOrientation" | "inlineSize" | "inset" | "insetBlock" | "insetBlockEnd" | "insetBlockStart" | "insetInline" | "insetInlineEnd" | "insetInlineStart" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "lineBreak" | "lineHeight" | "listStyle" | "listStyleImage" | "listStylePosition" | "listStyleType" | "margin" | "marginBlock" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInline" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "objectFit" | "objectPosition" | "offsetDistance" | "offsetPath" | "offsetRotate" | "orphans" | "outline" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflowAnchor" | "overflowWrap" | "overflowX" | "overflowY" | "overscrollBehavior" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "paddingBlock" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInline" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "perspective" | "perspectiveOrigin" | "placeContent" | "placeItems" | "placeSelf" | "position" | "printColorAdjust" | "quotes" | "rowGap" | "rubyPosition" | "scrollBehavior" | "scrollMargin" | "scrollMarginBlock" | "scrollMarginBlockEnd" | "scrollMarginBlockStart" | "scrollMarginBottom" | "scrollMarginInline" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPadding" | "scrollPaddingBlock" | "scrollPaddingBlockEnd" | "scrollPaddingBlockStart" | "scrollPaddingBottom" | "scrollPaddingInline" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapStop" | "scrollSnapType" | "scrollbarGutter" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textCombineUpright" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasis" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textOrientation" | "textOverflow" | "textShadow" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "touchAction" | "transformBox" | "transformOrigin" | "transformStyle" | "transition" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "userSelect" | "verticalAlign" | "webkitAlignContent" | "webkitAlignItems" | "webkitAlignSelf" | "webkitAnimation" | "webkitAnimationDelay" | "webkitAnimationDirection" | "webkitAnimationDuration" | "webkitAnimationFillMode" | "webkitAnimationIterationCount" | "webkitAnimationName" | "webkitAnimationPlayState" | "webkitAnimationTimingFunction" | "webkitAppearance" | "webkitBackfaceVisibility" | "webkitBackgroundClip" | "webkitBackgroundOrigin" | "webkitBackgroundSize" | "webkitBorderBottomLeftRadius" | "webkitBorderBottomRightRadius" | "webkitBorderRadius" | "webkitBorderTopLeftRadius" | "webkitBorderTopRightRadius" | "webkitBoxAlign" | "webkitBoxFlex" | "webkitBoxOrdinalGroup" | "webkitBoxOrient" | "webkitBoxPack" | "webkitBoxShadow" | "webkitBoxSizing" | "webkitFilter" | "webkitFlex" | "webkitFlexBasis" | "webkitFlexDirection" | "webkitFlexFlow" | "webkitFlexGrow" | "webkitFlexShrink" | "webkitFlexWrap" | "webkitJustifyContent" | "webkitLineClamp" | "webkitMask" | "webkitMaskBoxImage" | "webkitMaskBoxImageOutset" | "webkitMaskBoxImageRepeat" | "webkitMaskBoxImageSlice" | "webkitMaskBoxImageSource" | "webkitMaskBoxImageWidth" | "webkitMaskClip" | "webkitMaskComposite" | "webkitMaskImage" | "webkitMaskOrigin" | "webkitMaskPosition" | "webkitMaskRepeat" | "webkitMaskSize" | "webkitOrder" | "webkitPerspective" | "webkitPerspectiveOrigin" | "webkitTextFillColor" | "webkitTextSizeAdjust" | "webkitTextStroke" | "webkitTextStrokeColor" | "webkitTextStrokeWidth" | "webkitTransform" | "webkitTransformOrigin" | "webkitTransformStyle" | "webkitTransition" | "webkitTransitionDelay" | "webkitTransitionDuration" | "webkitTransitionProperty" | "webkitTransitionTimingFunction" | "webkitUserSelect" | "whiteSpace" | "widows" | "willChange" | "wordBreak" | "wordWrap" | "zIndex" | "getPropertyPriority" | "getPropertyValue" | "removeProperty" | "setProperty">(prop: P, value: CSSStyleDeclaration[P]) => boolean;

package.json

 {
   "name": "@algolia/satellite",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "Algolia design system React components",
@@ -195,2 +195,3 @@ "sideEffects": false,
     "@popperjs/core": "^2.4.4",
+    "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-avatar": "^1.0.3",
@@ -197,0 +198,0 @@ "@radix-ui/react-dialog": "^1.0.4",

No alert changes

Improved metrics

Total package byte prevSize

2493871

increased by3.49%

Number of package files

1355

increased by0.74%

Lines of code

49288

increased by3.11%

Worsened metrics

Dependency count

33

increased by3.13%

Dependency changes

• + Added@radix-ui/react-accordion@^1.1.2

• + Added@radix-ui/react-accordion@1.2.2(transitive)

• + Added@radix-ui/react-collapsible@1.1.2(transitive)