@algolia/satellite 2.3.0-rc.4 → 2.3.0-rc.6

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

@@ -1,7 +1,7 @@
 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, _templateObject49, _templateObject50;
+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;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -19,6 +19,8 @@ import { Input } from "./../../Input";
 import { RadioButton, RadioGroup } from "./../../RadioGroup";
 import { RangeSlider } from "./../../RangeSlider";
 import { Select } from "./../../Select";
+import { SelectableCard } from "./../../SelectableCard/SelectableCard";
+import { SelectableCardGroup } from "./../../SelectableCard/SelectableCardGroup";
 import { Switch } from "./../../Switch";
 import { TextArea } from "./../../TextArea";
 import stl from "./../../../styles/helpers/satellitePrefixer";
@@ -33,6 +35,7 @@ var initialFormData = {
   employmentStatus: "",
   birthday: null,
   age: "",
+  hobbies: [],
   interest: 0,
   idealLocation: [0, 50],
   profilePicture: null,
@@ -50,6 +53,7 @@ var jobPositions = ["Frontend Developer", "Backend Developer", "Fullstack Develo
 var now = new Date();
 var genders = ["please select", "woman", "man", "transgender man", "transgender woman", "non-binary", "agender", "prefer not to state"];
 var employmentStatuses = ["employed", "unemployed", "student"];
+var hobbies = ["reading", "writing", "coding"];
 var zodSchema = z.object({
   firstName: z.string().min(1, {
     message: "You must specify a first name"
@@ -110,6 +114,15 @@ var zodSchema = z.object({
   }).lte(100, {
     message: "You must be at most 100 years old"
   }),
+  hobbies: z.array(z["enum"](hobbies, {
+    errorMap: function errorMap() {
+      return {
+        message: "You must specify at least one hobby"
+      };
+    }
+  })).min(1, {
+    message: "You must specify at least one hobby"
+  }),
   interest: z.number().min(5, {
     message: "Your level of interest must be at least 5"
   }),
@@ -405,18 +418,50 @@ export var RHFComplexComponent = function RHFComplexComponent() {
             });
           }
         }), /*#__PURE__*/_jsx(Controller, {
-          name: "interest",
+          name: "hobbies",
           control: control,
           render: function render(_ref10) {
             var field = _ref10.field;
+            return /*#__PURE__*/_jsx(Field, {
+              label: "Hobbies",
+              labelFor: hobbies[0],
+              description: "Please specify your hobbies",
+              state: getFieldState("hobbies"),
+              className: stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["w-full"]))),
+              children: /*#__PURE__*/_jsx(SelectableCardGroup, {
+                type: "multiple",
+                className: stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["flex gap-2"]))),
+                value: field.value,
+                onValueChange: field.onChange,
+                required: true,
+                children: hobbies.map(function (hobby) {
+                  return /*#__PURE__*/_jsx("label", {
+                    htmlFor: hobby,
+                    className: stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["flex-1 cursor-pointer"]))),
+                    children: /*#__PURE__*/_jsx(SelectableCard, {
+                      id: hobby,
+                      value: hobby,
+                      className: stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["p-4"]))),
+                      children: capitalize(hobby)
+                    })
+                  }, hobby);
+                })
+              })
+            });
+          }
+        }), /*#__PURE__*/_jsx(Controller, {
+          name: "interest",
+          control: control,
+          render: function render(_ref11) {
+            var field = _ref11.field;
             return /*#__PURE__*/_jsxs(Field, {
               label: "Interest",
               labelFor: "interest",
               description: "Please specify your interest",
               state: getFieldState("interest"),
-              className: stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["w-full"]))),
+              className: stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["w-full"]))),
               children: [/*#__PURE__*/_jsxs("p", {
-                className: stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["display-caption flex justify-between mb-2"]))),
+                className: stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["display-caption flex justify-between mb-2"]))),
                 children: [/*#__PURE__*/_jsx("span", {
                   children: "0"
                 }), /*#__PURE__*/_jsx("span", {
@@ -435,16 +480,16 @@ export var RHFComplexComponent = function RHFComplexComponent() {
         }), /*#__PURE__*/_jsx(Controller, {
           name: "idealLocation",
           control: control,
-          render: function render(_ref11) {
-            var field = _ref11.field;
+          render: function render(_ref12) {
+            var field = _ref12.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"]))),
+              className: stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["w-full"]))),
               children: [/*#__PURE__*/_jsxs("p", {
-                className: stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["display-caption flex justify-between mb-2"]))),
+                className: stl(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["display-caption flex justify-between mb-2"]))),
                 children: [/*#__PURE__*/_jsx("span", {
                   children: "0 km"
                 }), /*#__PURE__*/_jsx("span", {
@@ -470,14 +515,14 @@ export var RHFComplexComponent = function RHFComplexComponent() {
         }), /*#__PURE__*/_jsx(Controller, {
           name: "profilePicture",
           control: control,
-          render: function render(_ref12) {
-            var field = _ref12.field;
+          render: function render(_ref13) {
+            var field = _ref13.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"]))),
+              className: stl(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["w-full"]))),
               children: /*#__PURE__*/_jsx(Dropzone, _objectSpread(_objectSpread({
                 id: "profilePicture",
                 minSize: 1024 * 1024 * 1,
@@ -493,14 +538,14 @@ export var RHFComplexComponent = function RHFComplexComponent() {
         }), /*#__PURE__*/_jsx(Controller, {
           name: "bio",
           control: control,
-          render: function render(_ref13) {
-            var field = _ref13.field;
+          render: function render(_ref14) {
+            var field = _ref14.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"]))),
+              className: stl(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["w-full"]))),
               children: /*#__PURE__*/_jsx(TextArea, _objectSpread({
                 id: "bio",
                 required: true
@@ -510,14 +555,14 @@ export var RHFComplexComponent = function RHFComplexComponent() {
         }), /*#__PURE__*/_jsx(Controller, {
           name: "acceptTerms",
           control: control,
-          render: function render(_ref14) {
-            var field = _ref14.field;
+          render: function render(_ref15) {
+            var field = _ref15.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"]))),
+              className: stl(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["w-full"]))),
               inline: true,
               children: /*#__PURE__*/_jsx(Checkbox, _objectSpread({
                 id: "acceptTerms",
@@ -529,14 +574,14 @@ export var RHFComplexComponent = function RHFComplexComponent() {
         }), /*#__PURE__*/_jsx(Controller, {
           name: "newsletter",
           control: control,
-          render: function render(_ref15) {
-            var field = _ref15.field;
+          render: function render(_ref16) {
+            var field = _ref16.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"]))),
+              className: stl(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["w-full"]))),
               inline: true,
               children: /*#__PURE__*/_jsx(Switch, _objectSpread({
                 id: "newsletter",
@@ -546,7 +591,7 @@ export var RHFComplexComponent = function RHFComplexComponent() {
             });
           }
         }), /*#__PURE__*/_jsxs("div", {
-          className: stl(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["flex gap-2"]))),
+          className: stl(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["flex gap-2"]))),
           children: [/*#__PURE__*/_jsx(FormSubmit, {
             variant: "primary",
             "aria-label": "Save the form",
@@ -560,9 +605,9 @@ export var RHFComplexComponent = function RHFComplexComponent() {
           })]
         })]
       }), /*#__PURE__*/_jsx("hr", {
-        className: stl(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["text-grey-500"])))
+        className: stl(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["text-grey-500"])))
       }), /*#__PURE__*/_jsx("code", {
-        className: stl(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["whitespace-pre display-code"]))),
+        className: stl(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["whitespace-pre display-code"]))),
         children: JSON.stringify(formData, null, 2)
       })]
     })
@@ -583,10 +628,11 @@ var yupSchema = yup.object({
     return value < now;
   }),
   age: yup.number().min(18, "You must be at least 18 years old").max(100, "You must be at most 100 years old").required("You must specify an age"),
+  hobbies: yup.array(yup.string().oneOf(hobbies)).min(1, "You must specify at least one hobby"),
   interest: yup.number().min(5, "Your level of interest must be at least 5").required(),
   idealLocation: yup.array(yup.number().min(10, "Your minimum ideal location must be 10 km").max(40, "Your maximum ideal location must be 40 km").required()).required(),
-  profilePicture: yup.mixed().nullable().test("profilePicture", function (_ref16) {
-    var value = _ref16.value;
+  profilePicture: yup.mixed().nullable().test("profilePicture", function (_ref17) {
+    var value = _ref17.value;
     return value.errors.map(function (error) {
       return error.message;
     }).join(", ");
@@ -638,9 +684,9 @@ export var FormikComplexComponent = function FormikComplexComponent() {
   };
   useFormikAutoFocusOnError(formik);
   return /*#__PURE__*/_jsx("div", {
-    className: stl(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["@container w-full flex justify-center"]))),
+    className: stl(_templateObject30 || (_templateObject30 = _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"]))),
+      className: stl(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["flex flex-col gap-8 w-full @lg:w-1/2"]))),
       children: [/*#__PURE__*/_jsxs(Form, {
         onSubmit: function onSubmit(e) {
           setRevalidationEnabled(true);
@@ -650,13 +696,13 @@ export var FormikComplexComponent = function FormikComplexComponent() {
           setRevalidationEnabled(false);
           formik.handleReset(e);
         },
-        className: stl(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["flex flex-col items-start gap-6 min-w-72"]))),
+        className: stl(_templateObject32 || (_templateObject32 = _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"]))),
+          className: stl(_templateObject33 || (_templateObject33 = _taggedTemplateLiteral(["w-full"]))),
           children: /*#__PURE__*/_jsx(Input, _objectSpread({
             id: "firstName",
             placeholder: "John",
@@ -667,7 +713,7 @@ export var FormikComplexComponent = function FormikComplexComponent() {
           labelFor: "lastName",
           description: "Please enter your last name",
           state: getFieldState("lastName"),
-          className: stl(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["w-full"]))),
+          className: stl(_templateObject34 || (_templateObject34 = _taggedTemplateLiteral(["w-full"]))),
           children: /*#__PURE__*/_jsx(Input, _objectSpread({
             id: "lastName",
             placeholder: "Doe",
@@ -678,7 +724,7 @@ export var FormikComplexComponent = function FormikComplexComponent() {
           labelFor: "password",
           description: "Please enter your password",
           state: getFieldState("password"),
-          className: stl(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["w-full"]))),
+          className: stl(_templateObject35 || (_templateObject35 = _taggedTemplateLiteral(["w-full"]))),
           children: /*#__PURE__*/_jsx(Input, _objectSpread({
             id: "password",
             placeholder: "Password",
@@ -690,14 +736,14 @@ export var FormikComplexComponent = function FormikComplexComponent() {
           labelFor: civilities[0],
           description: "Please enter your civility",
           state: getFieldState("civility"),
-          className: stl(_templateObject32 || (_templateObject32 = _taggedTemplateLiteral(["w-full"]))),
+          className: stl(_templateObject36 || (_templateObject36 = _taggedTemplateLiteral(["w-full"]))),
           children: /*#__PURE__*/_jsx("div", {
-            className: stl(_templateObject33 || (_templateObject33 = _taggedTemplateLiteral(["flex gap-4 display-body"]))),
+            className: stl(_templateObject37 || (_templateObject37 = _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"]))),
+                className: stl(_templateObject38 || (_templateObject38 = _taggedTemplateLiteral(["flex items-center gap-1"]))),
                 children: [/*#__PURE__*/_jsx(RadioButton, _objectSpread({
                   id: civility,
                   "aria-labelledby": civility,
@@ -715,7 +761,7 @@ export var FormikComplexComponent = function FormikComplexComponent() {
           labelFor: "gender",
           description: "Please specify your gender",
           state: getFieldState("gender"),
-          className: stl(_templateObject35 || (_templateObject35 = _taggedTemplateLiteral(["w-full"]))),
+          className: stl(_templateObject39 || (_templateObject39 = _taggedTemplateLiteral(["w-full"]))),
           children: /*#__PURE__*/_jsx(Select, _objectSpread(_objectSpread({
             id: "gender",
             required: true
@@ -732,7 +778,7 @@ export var FormikComplexComponent = function FormikComplexComponent() {
           labelFor: "jobPositions",
           description: "Please specify the job positions you are interested in",
           state: getFieldState("jobPositions"),
-          className: stl(_templateObject36 || (_templateObject36 = _taggedTemplateLiteral(["w-full"]))),
+          className: stl(_templateObject40 || (_templateObject40 = _taggedTemplateLiteral(["w-full"]))),
           children: /*#__PURE__*/_jsx(AutoComplete, {
             id: "jobPositions",
             options: jobPositions,
@@ -751,7 +797,7 @@ export var FormikComplexComponent = function FormikComplexComponent() {
           labelFor: "employmentStatus",
           description: "Please specify your employment status",
           state: getFieldState("employmentStatus"),
-          className: stl(_templateObject37 || (_templateObject37 = _taggedTemplateLiteral(["w-full"]))),
+          className: stl(_templateObject41 || (_templateObject41 = _taggedTemplateLiteral(["w-full"]))),
           children: /*#__PURE__*/_jsx(RadioGroup, {
             id: "employmentStatus",
             required: true,
@@ -771,7 +817,7 @@ export var FormikComplexComponent = function FormikComplexComponent() {
           labelFor: "birthday",
           description: "Please specify your birthday",
           state: getFieldState("birthday"),
-          className: stl(_templateObject38 || (_templateObject38 = _taggedTemplateLiteral(["w-full"]))),
+          className: stl(_templateObject42 || (_templateObject42 = _taggedTemplateLiteral(["w-full"]))),
           children: /*#__PURE__*/_jsx(DateInput, {
             id: "birthday",
             required: true,
@@ -792,7 +838,7 @@ export var FormikComplexComponent = function FormikComplexComponent() {
           labelFor: "age",
           description: "Please specify your age",
           state: getFieldState("age"),
-          className: stl(_templateObject39 || (_templateObject39 = _taggedTemplateLiteral(["w-full"]))),
+          className: stl(_templateObject43 || (_templateObject43 = _taggedTemplateLiteral(["w-full"]))),
           children: /*#__PURE__*/_jsx(Input, _objectSpread({
             id: "age",
             type: "number",
@@ -800,14 +846,41 @@ export var FormikComplexComponent = function FormikComplexComponent() {
             step: 1,
             required: true
           }, formik.getFieldProps("age")))
+        }), /*#__PURE__*/_jsx(Field, {
+          label: "Hobbies",
+          labelFor: hobbies[0],
+          description: "Please specify your hobbies",
+          state: getFieldState("hobbies"),
+          className: stl(_templateObject44 || (_templateObject44 = _taggedTemplateLiteral(["w-full"]))),
+          children: /*#__PURE__*/_jsx(SelectableCardGroup, {
+            type: "multiple",
+            className: stl(_templateObject45 || (_templateObject45 = _taggedTemplateLiteral(["flex gap-2"]))),
+            value: formik.values.hobbies,
+            onValueChange: function onValueChange(value) {
+              return formik.setFieldValue("hobbies", value);
+            },
+            required: true,
+            children: hobbies.map(function (hobby) {
+              return /*#__PURE__*/_jsx("label", {
+                htmlFor: hobby,
+                className: stl(_templateObject46 || (_templateObject46 = _taggedTemplateLiteral(["flex-1 cursor-pointer"]))),
+                children: /*#__PURE__*/_jsx(SelectableCard, {
+                  id: hobby,
+                  value: hobby,
+                  className: stl(_templateObject47 || (_templateObject47 = _taggedTemplateLiteral(["p-4"]))),
+                  children: capitalize(hobby)
+                })
+              }, hobby);
+            })
+          })
         }), /*#__PURE__*/_jsxs(Field, {
           label: "Interest",
           labelFor: "interest",
           description: "Please specify your interest",
           state: getFieldState("interest"),
-          className: stl(_templateObject40 || (_templateObject40 = _taggedTemplateLiteral(["w-full"]))),
+          className: stl(_templateObject48 || (_templateObject48 = _taggedTemplateLiteral(["w-full"]))),
           children: [/*#__PURE__*/_jsxs("p", {
-            className: stl(_templateObject41 || (_templateObject41 = _taggedTemplateLiteral(["display-caption flex justify-between mb-2"]))),
+            className: stl(_templateObject49 || (_templateObject49 = _taggedTemplateLiteral(["display-caption flex justify-between mb-2"]))),
             children: [/*#__PURE__*/_jsx("span", {
               children: "0"
             }), /*#__PURE__*/_jsx("span", {
@@ -830,9 +903,9 @@ export var FormikComplexComponent = function FormikComplexComponent() {
           labelFor: "idealLocation",
           description: "Please specify your ideal location",
           state: getFieldState("idealLocation"),
-          className: stl(_templateObject42 || (_templateObject42 = _taggedTemplateLiteral(["w-full"]))),
+          className: stl(_templateObject50 || (_templateObject50 = _taggedTemplateLiteral(["w-full"]))),
           children: [/*#__PURE__*/_jsxs("p", {
-            className: stl(_templateObject43 || (_templateObject43 = _taggedTemplateLiteral(["display-caption flex justify-between mb-2"]))),
+            className: stl(_templateObject51 || (_templateObject51 = _taggedTemplateLiteral(["display-caption flex justify-between mb-2"]))),
             children: [/*#__PURE__*/_jsx("span", {
               children: "0 km"
             }), /*#__PURE__*/_jsx("span", {
@@ -862,7 +935,7 @@ export var FormikComplexComponent = function FormikComplexComponent() {
           labelFor: "profilePicture",
           description: "Please upload your profile picture, 1 MB minimum",
           state: getFieldState("profilePicture"),
-          className: stl(_templateObject44 || (_templateObject44 = _taggedTemplateLiteral(["w-full"]))),
+          className: stl(_templateObject52 || (_templateObject52 = _taggedTemplateLiteral(["w-full"]))),
           children: /*#__PURE__*/_jsx(Dropzone, {
             id: "profilePicture",
             minSize: 1024 * 1024 * 1,
@@ -877,7 +950,7 @@ export var FormikComplexComponent = function FormikComplexComponent() {
           labelFor: "bio",
           description: "Please write a short bio",
           state: getFieldState("bio"),
-          className: stl(_templateObject45 || (_templateObject45 = _taggedTemplateLiteral(["w-full"]))),
+          className: stl(_templateObject53 || (_templateObject53 = _taggedTemplateLiteral(["w-full"]))),
           children: /*#__PURE__*/_jsx(TextArea, _objectSpread({
             id: "bio",
             required: true
@@ -887,7 +960,7 @@ export var FormikComplexComponent = function FormikComplexComponent() {
           labelFor: "acceptTerms",
           description: "Please accept the terms",
           state: getFieldState("acceptTerms"),
-          className: stl(_templateObject46 || (_templateObject46 = _taggedTemplateLiteral(["w-full"]))),
+          className: stl(_templateObject54 || (_templateObject54 = _taggedTemplateLiteral(["w-full"]))),
           inline: true,
           children: /*#__PURE__*/_jsx(Checkbox, _objectSpread({
             id: "acceptTerms",
@@ -899,7 +972,7 @@ export var FormikComplexComponent = function FormikComplexComponent() {
           labelFor: "newsletter",
           description: "Do you want to receive our newsletter?",
           state: getFieldState("newsletter"),
-          className: stl(_templateObject47 || (_templateObject47 = _taggedTemplateLiteral(["w-full"]))),
+          className: stl(_templateObject55 || (_templateObject55 = _taggedTemplateLiteral(["w-full"]))),
           inline: true,
           children: /*#__PURE__*/_jsx(Switch, _objectSpread({
             id: "newsletter",
@@ -907,7 +980,7 @@ export var FormikComplexComponent = function FormikComplexComponent() {
             checked: formik.values.newsletter
           }, formik.getFieldProps("newsletter")))
         }), /*#__PURE__*/_jsxs("div", {
-          className: stl(_templateObject48 || (_templateObject48 = _taggedTemplateLiteral(["flex gap-2"]))),
+          className: stl(_templateObject56 || (_templateObject56 = _taggedTemplateLiteral(["flex gap-2"]))),
           children: [/*#__PURE__*/_jsx(FormSubmit, {
             variant: "primary",
             "aria-label": "Save the form",
@@ -921,9 +994,9 @@ export var FormikComplexComponent = function FormikComplexComponent() {
           })]
         })]
       }), /*#__PURE__*/_jsx("hr", {
-        className: stl(_templateObject49 || (_templateObject49 = _taggedTemplateLiteral(["text-grey-500"])))
+        className: stl(_templateObject57 || (_templateObject57 = _taggedTemplateLiteral(["text-grey-500"])))
       }), /*#__PURE__*/_jsx("code", {
-        className: stl(_templateObject50 || (_templateObject50 = _taggedTemplateLiteral(["whitespace-pre display-code"]))),
+        className: stl(_templateObject58 || (_templateObject58 = _taggedTemplateLiteral(["whitespace-pre display-code"]))),
         children: JSON.stringify(formData, null, 2)
       })]
     })

package/dist/esm/Fields/RadioGroup/RadioButton.js

@@ -6,9 +6,10 @@ var _excluded = ["className", "required"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import cx from "clsx";
-import { forwardRef } from "react";
+import { forwardRef, useMemo } from "react";
 import { useField } from "./../Field";
 import stl from "./../../styles/helpers/satellitePrefixer";
+import { uniqueId } from "./../../utils";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * The `RadioButton` component is a control that allows single selection from a set of options.
@@ -24,14 +25,20 @@ export var RadioButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
       required: required
     }),
     state = _useField.state,
-    descriptionId = _useField.descriptionId;
+    descriptionId = _useField.descriptionId,
+    inputId = _useField.inputId;
+  var id = useMemo(function () {
+    var _ref2, _props$id;
+    return (_ref2 = (_props$id = props.id) !== null && _props$id !== void 0 ? _props$id : inputId) !== null && _ref2 !== void 0 ? _ref2 : uniqueId("radio-button");
+  }, [props.id, inputId]);
   var isInvalid = state.status === "invalid";
   return /*#__PURE__*/_jsx("input", _objectSpread(_objectSpread({
     "aria-describedby": descriptionId
   }, props), {}, {
     required: required,
+    id: id,
     "aria-invalid": isInvalid,
-    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["radio-button focusable ", ""])), isInvalid && "radio-button-invalid"), className),
+    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["radio-button focusable-visible ", ""])), isInvalid && "radio-button-invalid"), className),
     type: "radio",
     ref: ref
   }));

package/dist/esm/Fields/RadioGroup/RadioButton.tailwind.js

@@ -38,7 +38,7 @@ var radioButtonPlugin = plugin(function (_ref) {
           background: theme("colors.accent.600"),
           borderRadius: "50%"
         },
-        "&:hover": {
+        "&:not(.radio-button:disabled):hover": {
           borderColor: theme("colors.accent.700")
         }
       },

package/dist/esm/Fields/RadioGroup/RadioGroupItem.js

@@ -43,7 +43,7 @@ export var RadioGroupItem = function RadioGroupItem(_ref) {
       className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex-1 truncate ", ""])), textPosition === "right" ? "ml-2" : "mr-2"),
       children: children
     }), /*#__PURE__*/_jsx(RadioButton, {
-      id: checked || isFirstChild && !contextValue ? id : undefined,
+      id: checked || isFirstChild && !contextValue ? id : uniqueId("radio-group-item"),
       className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["shrink-0 self-start mt-1"]))),
       value: value,
       checked: checked,

package/dist/esm/Fields/Select/Select.tailwind.js

@@ -50,9 +50,10 @@ var selectPlugin = plugin(function (_ref) {
       },
       "&:disabled": {
         cursor: "not-allowed",
-        color: theme("colors.grey.300"),
-        backgroundImage: "\n          ".concat(selectIconBG(theme("colors.grey.300")), ",\n          linear-gradient(-180deg, ").concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.100"), " 100%)\n        "),
-        borderColor: disabledColor(theme("colors.grey.200")),
+        color: theme("colors.grey.600"),
+        backgroundColor: theme("colors.grey.100"),
+        backgroundImage: selectIconBG(theme("colors.grey.600")),
+        borderColor: theme("colors.grey.200"),
         boxShadow: "none"
       }
     },

package/dist/esm/Fields/SelectableCard/SelectableCard.d.ts

@@ -0,0 +1,35 @@
+import type { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from "react";
+import type { CardProps } from "../../Layout";
+import { Card } from "../../Layout";
+declare type SelectableCardBaseProps = Omit<CardProps, "elevation"> & {
+    /**
+     * The color of the selected card.
+     */
+    selectedColor?: keyof typeof SELECTED_COLOR_CLASSNAMES;
+};
+export declare type SelectableCardProps = SelectableCardBaseProps & {
+    /**
+     * Whether the `SelectableCard` is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The value of the `SelectableCard`.
+     */
+    value: string;
+};
+interface SelectableCardType extends ForwardRefExoticComponent<PropsWithoutRef<SelectableCardProps> & RefAttributes<HTMLElement>> {
+    Header: typeof Card.Header;
+    Title: typeof Card.Title;
+}
+declare const SELECTED_COLOR_CLASSNAMES: {
+    readonly grey: string;
+    readonly pink: string;
+    readonly accent: string;
+    readonly blue: string;
+    readonly green: string;
+    readonly orange: string;
+    readonly red: string;
+    readonly xenon: string;
+};
+export declare const SelectableCard: SelectableCardType;
+export {};