@algolia/satellite 2.3.0-rc.5 → 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/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 {};

package/dist/esm/Fields/SelectableCard/SelectableCard.js

@@ -0,0 +1,100 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _excluded = ["value", "selectedColor", "children", "id", "className"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18;
+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 { Checkbox, RadioButton, useField } from "..";
+import { Card } from "../../Layout";
+import stl from "../../styles/helpers/satellitePrefixer";
+import { useSelectableCardContext } from "./SelectableCardContext";
+
+// We need to omit the `elevation` prop because we handle it ourselves.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var SELECTED_COLOR_CLASSNAMES = {
+  grey: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["border-grey-600"]))),
+  pink: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["border-pink-600"]))),
+  accent: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["border-accent-600"]))),
+  blue: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["border-blue-600"]))),
+  green: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["border-green-600"]))),
+  orange: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["border-orange-600"]))),
+  red: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["border-red-600"]))),
+  xenon: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["border-xenon-600"])))
+};
+export var SelectableCard = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var value = _ref.value,
+    _ref$selectedColor = _ref.selectedColor,
+    selectedColor = _ref$selectedColor === void 0 ? "xenon" : _ref$selectedColor,
+    children = _ref.children,
+    id = _ref.id,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useSelectableCardCon = useSelectableCardContext(),
+    name = _useSelectableCardCon.name,
+    isControlled = _useSelectableCardCon.isControlled,
+    setValue = _useSelectableCardCon.setValue,
+    onValueChange = _useSelectableCardCon.onValueChange,
+    type = _useSelectableCardCon.type,
+    valueContext = _useSelectableCardCon.value,
+    disabledContext = _useSelectableCardCon.disabled;
+  var disabled = props.disabled || disabledContext;
+  var selected = valueContext === null || valueContext === void 0 ? void 0 : valueContext.includes(value);
+  var _useField = useField(),
+    status = _useField.state.status;
+  var isInvalid = status === "invalid";
+  var handleCheckboxChange = function handleCheckboxChange(evt) {
+    var _valueContext$filter;
+    var newValue = selected ? (_valueContext$filter = valueContext === null || valueContext === void 0 ? void 0 : valueContext.filter(function (v) {
+      return v !== value;
+    })) !== null && _valueContext$filter !== void 0 ? _valueContext$filter : [] : [].concat(_toConsumableArray(valueContext !== null && valueContext !== void 0 ? valueContext : []), [value]);
+    if (!isControlled && !evt.isDefaultPrevented()) {
+      setValue(newValue);
+    }
+    onValueChange === null || onValueChange === void 0 || onValueChange(newValue);
+  };
+  var handleRadioButtonChange = function handleRadioButtonChange(evt) {
+    var newValue = [evt.target.value];
+    if (!isControlled && !evt.isDefaultPrevented()) {
+      setValue(newValue);
+    }
+    onValueChange === null || onValueChange === void 0 || onValueChange(newValue);
+  };
+  return /*#__PURE__*/_jsxs(Card, _objectSpread(_objectSpread({
+    ref: ref,
+    fullBleed: true,
+    className: cx(stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["relative border transition-[shadow,border]"]))), !disabled && !selected && !isInvalid && stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["border-transparent"]))),
+    // Disabled
+    disabled && stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["bg-grey-100 border-grey-200 text-grey-300 shadow-none cursor-not-allowed [&>*]:text-grey-300"]))),
+    // Selected
+    selected && stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["card-z200"]))), !disabled && selected && !isInvalid && SELECTED_COLOR_CLASSNAMES[selectedColor],
+    // Hovered
+    !disabled && !selected && !isInvalid && stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["hover:border-grey-200"]))), // Focused
+    stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["focusable-visible-within"]))), !selected && stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["focus-within:border-grey-200"]))),
+    // Invalid
+    isInvalid && stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["border-red-700 shadow-none"]))),
+    // Custom
+    className)
+  }, props), {}, {
+    children: [type === "multiple" ? /*#__PURE__*/_jsx(Checkbox, {
+      id: id,
+      disabled: disabled,
+      checked: selected,
+      className: cx(stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["absolute right-4 top-4 z-10"])))),
+      onChange: handleCheckboxChange,
+      name: name
+    }) : /*#__PURE__*/_jsx(RadioButton, {
+      id: id,
+      disabled: disabled,
+      checked: selected,
+      className: cx(stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["absolute right-4 top-4 z-10"])))),
+      onChange: handleRadioButtonChange,
+      value: value,
+      name: name
+    }), children]
+  }));
+});
+SelectableCard.displayName = "SelectableCard";