@algolia/satellite 1.6.0 → 1.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (86) hide show
  1. package/dist/cjs/Actions/Accordion/Accordion.d.ts +142 -0
  2. package/dist/cjs/Actions/Accordion/Accordion.js +149 -0
  3. package/dist/cjs/Actions/Accordion/Accordion.tailwind.d.ts +5 -0
  4. package/dist/cjs/Actions/Accordion/Accordion.tailwind.js +44 -0
  5. package/dist/cjs/Actions/ToggleGroup/ToggleGroup.d.ts +2 -2
  6. package/dist/cjs/Actions/index.d.ts +2 -0
  7. package/dist/cjs/Actions/index.js +18 -0
  8. package/dist/cjs/Fields/Field/Field.js +1 -1
  9. package/dist/cjs/Fields/Form/Form.d.ts +12 -10
  10. package/dist/cjs/Fields/Form/Form.js +50 -38
  11. package/dist/cjs/Fields/Form/FormContext.d.ts +6 -6
  12. package/dist/cjs/Fields/Form/FormContext.js +2 -2
  13. package/dist/cjs/Fields/Form/index.d.ts +4 -3
  14. package/dist/cjs/Fields/Form/index.js +31 -21
  15. package/dist/cjs/Fields/Form/stories/AsynchronousValidation.js +142 -127
  16. package/dist/cjs/Fields/Form/stories/Complex.js +648 -642
  17. package/dist/cjs/Fields/Form/stories/DependentFieldsValidation.js +127 -121
  18. package/dist/cjs/Fields/Form/stories/DirtyFields.js +195 -189
  19. package/dist/cjs/Fields/Form/stories/DynamicFieldsValidation.js +251 -245
  20. package/dist/cjs/Fields/Form/stories/ExtraErrors.js +289 -0
  21. package/dist/cjs/Fields/Form/stories/FieldArrays.js +180 -174
  22. package/dist/cjs/Fields/Form/stories/JSONForms.js +58 -55
  23. package/dist/cjs/Fields/Form/stories/MultiStep.js +474 -468
  24. package/dist/cjs/Fields/Form/stories/ValidationStrategies.js +243 -237
  25. package/dist/cjs/Fields/Form/useForm.d.ts +1 -1
  26. package/dist/cjs/Fields/Form/useForm.js +3 -3
  27. package/dist/cjs/Helpers/utilities/focusable.tailwind.js +1 -1
  28. package/dist/cjs/Indicators/Skeleton/Skeleton.d.ts +7 -0
  29. package/dist/cjs/Indicators/Skeleton/Skeleton.js +12 -5
  30. package/dist/cjs/Layout/Sidebar/SidebarButtonLink.js +1 -1
  31. package/dist/cjs/Layout/Sidebar/SidebarLink.js +2 -2
  32. package/dist/cjs/Layout/Sidebar/SidebarLinksGroup/SidebarGroupLink.js +1 -1
  33. package/dist/cjs/Layout/Sidebar/SidebarLinksGroup/SidebarLinksGroup.js +4 -5
  34. package/dist/cjs/Layout/Tables/DataTable/DataTable.d.ts +3 -1
  35. package/dist/cjs/Layout/Tables/DataTable/DataTable.js +3 -0
  36. package/dist/cjs/Layout/Tables/Table/Table.d.ts +2 -0
  37. package/dist/cjs/Layout/Tables/Table/Table.js +4 -2
  38. package/dist/cjs/Layout/Tables/Table/Table.tailwind.js +6 -1
  39. package/dist/cjs/Overlay/MenuButton/components/items/LinkItem.d.ts +1 -1
  40. package/dist/cjs/Overlay/MenuButton/components/items/ToggleItem.d.ts +1 -1
  41. package/dist/cjs/styles/tailwind.config.js +1 -1
  42. package/dist/cjs/utils/isCssPropertySupported.d.ts +1 -1
  43. package/dist/esm/Actions/Accordion/Accordion.d.ts +142 -0
  44. package/dist/esm/Actions/Accordion/Accordion.js +139 -0
  45. package/dist/esm/Actions/Accordion/Accordion.tailwind.d.ts +5 -0
  46. package/dist/esm/Actions/Accordion/Accordion.tailwind.js +43 -0
  47. package/dist/esm/Actions/ToggleGroup/ToggleGroup.d.ts +2 -2
  48. package/dist/esm/Actions/index.d.ts +2 -0
  49. package/dist/esm/Actions/index.js +2 -2
  50. package/dist/esm/Fields/Field/Field.js +2 -2
  51. package/dist/esm/Fields/Form/Form.d.ts +12 -10
  52. package/dist/esm/Fields/Form/Form.js +52 -40
  53. package/dist/esm/Fields/Form/FormContext.d.ts +6 -6
  54. package/dist/esm/Fields/Form/FormContext.js +1 -1
  55. package/dist/esm/Fields/Form/index.d.ts +4 -3
  56. package/dist/esm/Fields/Form/index.js +2 -3
  57. package/dist/esm/Fields/Form/stories/AsynchronousValidation.js +143 -128
  58. package/dist/esm/Fields/Form/stories/Complex.js +649 -643
  59. package/dist/esm/Fields/Form/stories/DependentFieldsValidation.js +128 -122
  60. package/dist/esm/Fields/Form/stories/DirtyFields.js +196 -190
  61. package/dist/esm/Fields/Form/stories/DynamicFieldsValidation.js +252 -246
  62. package/dist/esm/Fields/Form/stories/ExtraErrors.js +279 -0
  63. package/dist/esm/Fields/Form/stories/FieldArrays.js +181 -175
  64. package/dist/esm/Fields/Form/stories/JSONForms.js +59 -56
  65. package/dist/esm/Fields/Form/stories/MultiStep.js +475 -469
  66. package/dist/esm/Fields/Form/stories/ValidationStrategies.js +244 -238
  67. package/dist/esm/Fields/Form/useForm.d.ts +1 -1
  68. package/dist/esm/Fields/Form/useForm.js +3 -3
  69. package/dist/esm/Helpers/utilities/focusable.tailwind.js +1 -1
  70. package/dist/esm/Indicators/Skeleton/Skeleton.d.ts +7 -0
  71. package/dist/esm/Indicators/Skeleton/Skeleton.js +12 -5
  72. package/dist/esm/Layout/Sidebar/SidebarButtonLink.js +1 -1
  73. package/dist/esm/Layout/Sidebar/SidebarLink.js +2 -2
  74. package/dist/esm/Layout/Sidebar/SidebarLinksGroup/SidebarGroupLink.js +1 -1
  75. package/dist/esm/Layout/Sidebar/SidebarLinksGroup/SidebarLinksGroup.js +4 -5
  76. package/dist/esm/Layout/Tables/DataTable/DataTable.d.ts +3 -1
  77. package/dist/esm/Layout/Tables/DataTable/DataTable.js +3 -0
  78. package/dist/esm/Layout/Tables/Table/Table.d.ts +2 -0
  79. package/dist/esm/Layout/Tables/Table/Table.js +4 -2
  80. package/dist/esm/Layout/Tables/Table/Table.tailwind.js +6 -1
  81. package/dist/esm/Overlay/MenuButton/components/items/LinkItem.d.ts +1 -1
  82. package/dist/esm/Overlay/MenuButton/components/items/ToggleItem.d.ts +1 -1
  83. package/dist/esm/styles/tailwind.config.js +1 -1
  84. package/dist/esm/utils/isCssPropertySupported.d.ts +1 -1
  85. package/dist/satellite.min.css +1 -1
  86. package/package.json +2 -1
@@ -1,13 +1,13 @@
1
1
  /// <reference types="react" />
2
2
  import type { FieldState } from "../Field";
3
- export declare type ExperimentalFormContextField = {
3
+ export declare type FormContextField = {
4
4
  state: FieldState;
5
5
  label: string;
6
6
  labelFor: string;
7
7
  };
8
- export declare type ExperimentalFormContextValue = {
9
- fields: Record<string, ExperimentalFormContextField>;
10
- addField: (field: ExperimentalFormContextField) => void;
11
- removeField: (field: ExperimentalFormContextField) => void;
8
+ export declare type FormContextValue = {
9
+ fields: Record<string, FormContextField>;
10
+ addField: (field: FormContextField) => void;
11
+ removeField: (field: FormContextField) => void;
12
12
  };
13
- export declare const ExperimentalFormContext: import("react").Context<ExperimentalFormContextValue | null>;
13
+ export declare const FormContext: import("react").Context<FormContextValue | null>;
@@ -3,6 +3,6 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.ExperimentalFormContext = void 0;
6
+ exports.FormContext = void 0;
7
7
  var _react = require("react");
8
- var ExperimentalFormContext = exports.ExperimentalFormContext = /*#__PURE__*/(0, _react.createContext)(null);
8
+ var FormContext = exports.FormContext = /*#__PURE__*/(0, _react.createContext)(null);
@@ -1,3 +1,4 @@
1
- export * from "./Form";
2
- export type { ExperimentalFormContextField, ExperimentalFormContextValue } from "./FormContext";
3
- export * from "./useForm";
1
+ export type { FormProps as ExperimentalFormProps, FormLocale as ExperimentalFormLocale, FormErrorMessageProps as ExperimentalFormErrorMessageProps, } from "./Form";
2
+ export { Form as ExperimentalForm, FormErrorMessage as ExperimentalFormErrorMessage, FormSubmit as ExperimentalFormSubmit, FormReset as ExperimentalFormReset, } from "./Form";
3
+ export type { FormContextField as ExperimentalFormContextField, FormContextValue as ExperimentalFormContextValue, } from "./FormContext";
4
+ export { useForm as useExperimentalForm } from "./useForm";
@@ -3,25 +3,35 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- var _Form = require("./Form");
7
- Object.keys(_Form).forEach(function (key) {
8
- if (key === "default" || key === "__esModule") return;
9
- if (key in exports && exports[key] === _Form[key]) return;
10
- Object.defineProperty(exports, key, {
11
- enumerable: true,
12
- get: function get() {
13
- return _Form[key];
14
- }
15
- });
6
+ Object.defineProperty(exports, "ExperimentalForm", {
7
+ enumerable: true,
8
+ get: function get() {
9
+ return _Form.Form;
10
+ }
11
+ });
12
+ Object.defineProperty(exports, "ExperimentalFormErrorMessage", {
13
+ enumerable: true,
14
+ get: function get() {
15
+ return _Form.FormErrorMessage;
16
+ }
17
+ });
18
+ Object.defineProperty(exports, "ExperimentalFormReset", {
19
+ enumerable: true,
20
+ get: function get() {
21
+ return _Form.FormReset;
22
+ }
16
23
  });
17
- var _useForm = require("./useForm");
18
- Object.keys(_useForm).forEach(function (key) {
19
- if (key === "default" || key === "__esModule") return;
20
- if (key in exports && exports[key] === _useForm[key]) return;
21
- Object.defineProperty(exports, key, {
22
- enumerable: true,
23
- get: function get() {
24
- return _useForm[key];
25
- }
26
- });
27
- });
24
+ Object.defineProperty(exports, "ExperimentalFormSubmit", {
25
+ enumerable: true,
26
+ get: function get() {
27
+ return _Form.FormSubmit;
28
+ }
29
+ });
30
+ Object.defineProperty(exports, "useExperimentalForm", {
31
+ enumerable: true,
32
+ get: function get() {
33
+ return _useForm.useForm;
34
+ }
35
+ });
36
+ var _Form = require("./Form");
37
+ var _useForm = require("./useForm");
@@ -23,7 +23,7 @@ var _Input = require("../../Input");
23
23
  var _Form = require("../Form");
24
24
  var _useFormikAutoFocusOnError = require("./utils/useFormikAutoFocusOnError");
25
25
  var _jsxRuntime = require("react/jsx-runtime");
26
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
26
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
27
27
  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); }
28
28
  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; }
29
29
  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; }
@@ -152,6 +152,10 @@ var RHFAsyncValidationComponent = exports.RHFAsyncValidationComponent = function
152
152
  _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
153
153
  formData = _useState2[0],
154
154
  setFormData = _useState2[1];
155
+ var _useState3 = (0, _react.useState)([]),
156
+ _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
157
+ extraErrors = _useState4[0],
158
+ setExtraErrors = _useState4[1];
155
159
  var _useForm = (0, _reactHookForm.useForm)({
156
160
  defaultValues: initialFormData,
157
161
  reValidateMode: "onChange",
@@ -180,74 +184,82 @@ var RHFAsyncValidationComponent = exports.RHFAsyncValidationComponent = function
180
184
  };
181
185
  }
182
186
  };
183
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
184
- className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-3/5"]))),
185
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.ExperimentalForm, {
186
- onSubmit: handleSubmit(function (data) {
187
- return setFormData(data);
188
- }),
189
- onReset: function onReset() {
190
- return setFormData(initialFormData);
191
- },
192
- className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
193
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
194
- name: "username",
195
- control: control,
196
- render: function render(_ref5) {
197
- var field = _ref5.field;
198
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
199
- label: "Username",
200
- labelFor: "username",
201
- description: "Please enter your username",
202
- state: getFieldState("username"),
203
- className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
204
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
205
- id: "username",
206
- placeholder: "Username",
207
- required: true
208
- }, field))
209
- });
210
- }
211
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
212
- name: "password",
213
- control: control,
214
- render: function render(_ref6) {
215
- var field = _ref6.field;
216
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
217
- label: "Password",
218
- labelFor: "password",
219
- description: "Please enter your password",
220
- state: getFieldState("password"),
221
- className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
222
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
223
- id: "password",
224
- placeholder: "Password",
225
- type: "password",
226
- required: true
227
- }, field))
187
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
188
+ className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["@container w-full flex justify-center"]))),
189
+ children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
190
+ className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-full @lg:w-1/2"]))),
191
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.Form, {
192
+ onSubmit: handleSubmit(function (data) {
193
+ setFormData(data);
194
+ setExtraErrors(function (previousErrors) {
195
+ return previousErrors.concat("first error", "2nd error");
228
196
  });
229
- }
230
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
231
- className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
232
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormSubmit, {
233
- variant: "primary",
234
- "aria-label": "Login to the website",
235
- loading: formState.isSubmitting,
236
- children: "Login"
237
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormReset, {
238
- "aria-label": "Reset the form",
239
- onClick: function onClick() {
240
- return reset();
241
- },
242
- children: "Reset"
197
+ }),
198
+ onReset: function onReset() {
199
+ return setFormData(initialFormData);
200
+ },
201
+ className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
202
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormErrorMessage, {
203
+ extraErrors: extraErrors
204
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
205
+ name: "username",
206
+ control: control,
207
+ render: function render(_ref5) {
208
+ var field = _ref5.field;
209
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
210
+ label: "Username",
211
+ labelFor: "username",
212
+ description: "Please enter your username",
213
+ state: getFieldState("username"),
214
+ className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
215
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
216
+ id: "username",
217
+ placeholder: "Username",
218
+ required: true
219
+ }, field))
220
+ });
221
+ }
222
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
223
+ name: "password",
224
+ control: control,
225
+ render: function render(_ref6) {
226
+ var field = _ref6.field;
227
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
228
+ label: "Password",
229
+ labelFor: "password",
230
+ description: "Please enter your password",
231
+ state: getFieldState("password"),
232
+ className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
233
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
234
+ id: "password",
235
+ placeholder: "Password",
236
+ type: "password",
237
+ required: true
238
+ }, field))
239
+ });
240
+ }
241
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
242
+ className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
243
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormSubmit, {
244
+ variant: "primary",
245
+ "aria-label": "Login to the website",
246
+ loading: formState.isSubmitting,
247
+ children: "Login"
248
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormReset, {
249
+ "aria-label": "Reset the form",
250
+ onClick: function onClick() {
251
+ return reset();
252
+ },
253
+ children: "Reset"
254
+ })]
243
255
  })]
256
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
257
+ className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
258
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
259
+ className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
260
+ children: JSON.stringify(formData, null, 2)
244
261
  })]
245
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
246
- className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
247
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
248
- className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
249
- children: JSON.stringify(formData, null, 2)
250
- })]
262
+ })
251
263
  });
252
264
  };
253
265
  var yupSchema = yup.object({
@@ -298,14 +310,14 @@ var yupSchema = yup.object({
298
310
  })
299
311
  });
300
312
  var FormikAsyncValidationComponent = exports.FormikAsyncValidationComponent = function FormikAsyncValidationComponent() {
301
- var _useState3 = (0, _react.useState)(initialFormData),
302
- _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
303
- formData = _useState4[0],
304
- setFormData = _useState4[1];
305
- var _useState5 = (0, _react.useState)(false),
313
+ var _useState5 = (0, _react.useState)(initialFormData),
306
314
  _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
307
- revalidationEnabled = _useState6[0],
308
- setRevalidationEnabled = _useState6[1];
315
+ formData = _useState6[0],
316
+ setFormData = _useState6[1];
317
+ var _useState7 = (0, _react.useState)(false),
318
+ _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
319
+ revalidationEnabled = _useState8[0],
320
+ setRevalidationEnabled = _useState8[1];
309
321
  var formik = (0, _formik.useFormik)({
310
322
  initialValues: initialFormData,
311
323
  validateOnChange: revalidationEnabled,
@@ -336,61 +348,64 @@ var FormikAsyncValidationComponent = exports.FormikAsyncValidationComponent = fu
336
348
  }
337
349
  };
338
350
  (0, _useFormikAutoFocusOnError.useFormikAutoFocusOnError)(formik);
339
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
340
- className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-3/5"]))),
341
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.ExperimentalForm, {
342
- onSubmit: function onSubmit(e) {
343
- setRevalidationEnabled(true);
344
- formik.handleSubmit(e);
345
- },
346
- onReset: function onReset(e) {
347
- setRevalidationEnabled(false);
348
- formik.handleReset(e);
349
- },
350
- className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
351
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
352
- label: "Username",
353
- labelFor: "username",
354
- description: "Please enter your username",
355
- state: getFieldState("username"),
356
- className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
357
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
358
- id: "username",
359
- placeholder: "Username",
360
- required: true
361
- }, formik.getFieldProps("username")))
362
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
363
- label: "Password",
364
- labelFor: "password",
365
- description: "Please enter your password",
366
- state: getFieldState("password"),
367
- className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
368
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
369
- id: "password",
370
- placeholder: "Password",
371
- type: "password",
372
- required: true
373
- }, formik.getFieldProps("password")))
374
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
375
- className: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
376
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormSubmit, {
377
- variant: "primary",
378
- "aria-label": "Login to the website",
379
- loading: formik.isValidating,
380
- children: "Login"
381
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormReset, {
382
- "aria-label": "Reset the form",
383
- onClick: function onClick() {
384
- return formik.resetForm();
385
- },
386
- children: "Reset"
351
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
352
+ className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["@container w-full flex justify-center"]))),
353
+ children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
354
+ className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-full @lg:w-1/2"]))),
355
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.Form, {
356
+ onSubmit: function onSubmit(e) {
357
+ setRevalidationEnabled(true);
358
+ formik.handleSubmit(e);
359
+ },
360
+ onReset: function onReset(e) {
361
+ setRevalidationEnabled(false);
362
+ formik.handleReset(e);
363
+ },
364
+ className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-6 min-w-72"]))),
365
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
366
+ label: "Username",
367
+ labelFor: "username",
368
+ description: "Please enter your username",
369
+ state: getFieldState("username"),
370
+ className: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
371
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
372
+ id: "username",
373
+ placeholder: "Username",
374
+ required: true
375
+ }, formik.getFieldProps("username")))
376
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
377
+ label: "Password",
378
+ labelFor: "password",
379
+ description: "Please enter your password",
380
+ state: getFieldState("password"),
381
+ className: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
382
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, _objectSpread({
383
+ id: "password",
384
+ placeholder: "Password",
385
+ type: "password",
386
+ required: true
387
+ }, formik.getFieldProps("password")))
388
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
389
+ className: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
390
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormSubmit, {
391
+ variant: "primary",
392
+ "aria-label": "Login to the website",
393
+ loading: formik.isValidating,
394
+ children: "Login"
395
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.FormReset, {
396
+ "aria-label": "Reset the form",
397
+ onClick: function onClick() {
398
+ return formik.resetForm();
399
+ },
400
+ children: "Reset"
401
+ })]
387
402
  })]
403
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
404
+ className: (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
405
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
406
+ className: (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
407
+ children: JSON.stringify(formData, null, 2)
388
408
  })]
389
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
390
- className: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
391
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
392
- className: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre display-code"]))),
393
- children: JSON.stringify(formData, null, 2)
394
- })]
409
+ })
395
410
  });
396
411
  };