@vitality-ds/components 5.7.0 → 6.0.0-alpha.1

package/dist/esm/EmptyState/components/EmptyStateImage/Images/padlock.js

@@ -1,32 +1,34 @@
 import React from "react";
 // eslint-disable-next-line import/prefer-default-export
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function PadlockImage() {
-  return /*#__PURE__*/React.createElement("svg", {
+  return /*#__PURE__*/_jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "74",
     height: "100",
     fill: "none",
-    viewBox: "0 0 74 100"
-  }, /*#__PURE__*/React.createElement("path", {
-    className: "illustrationStroke",
-    fillRule: "evenodd",
-    d: "M8 34a6 6 0 00-6 6v52a6 6 0 006 6h58a6 6 0 006-6V40a6 6 0 00-6-6H8zm0-2a8 8 0 00-8 8v52a8 8 0 008 8h58a8 8 0 008-8V40a8 8 0 00-8-8H8z",
-    clipRule: "evenodd"
-  }), /*#__PURE__*/React.createElement("path", {
-    className: "illustrationFill",
-    d: "M37 0c12.15 0 22 9.85 22 22v12H46V22a9 9 0 10-18 0v12H15V22C15 9.85 24.85 0 37 0z"
-  }), /*#__PURE__*/React.createElement("path", {
-    className: "illustrationStroke",
-    fillRule: "evenodd",
-    d: "M57 22c0-11.046-8.954-20-20-20s-20 8.954-20 20v10h9V22c0-6.075 4.925-11 11-11s11 4.925 11 11v10h9V22zm2 0C59 9.85 49.15 0 37 0S15 9.85 15 22v12h13V22a9 9 0 1118 0v12h13V22z",
-    clipRule: "evenodd"
-  }), /*#__PURE__*/React.createElement("path", {
-    className: "illustrationFill",
-    d: "M42 67.245a8 8 0 10-10 0V78a5 5 0 0010 0V67.245z"
-  }), /*#__PURE__*/React.createElement("path", {
-    className: "illustrationStroke",
-    fillRule: "evenodd",
-    d: "M40 66.285l.75-.6a6 6 0 10-7.498 0l.748.6V78a3 3 0 106 0V66.285zm-8 .96a8 8 0 1110 0V78a5 5 0 01-10 0V67.245zM21.553 15.394a1 1 0 01-.447-1.341c2.092-4.185 5.267-7.386 9.543-8.99a1 1 0 01.702 1.873c-3.723 1.396-6.549 4.195-8.456 8.011a1 1 0 01-1.342.447zM19.999 24A1 1 0 0119 22.999L20 23l-1-.001v-.031a10.082 10.082 0 01.009-.355 28.334 28.334 0 01.511-4.308 1 1 0 011.962.39 26.341 26.341 0 00-.474 3.989l-.007.243v.06L21 23v.002a1 1 0 01-1.001.998z",
-    clipRule: "evenodd"
-  }));
+    viewBox: "0 0 74 100",
+    children: [/*#__PURE__*/_jsx("path", {
+      className: "illustrationStroke",
+      fillRule: "evenodd",
+      d: "M8 34a6 6 0 00-6 6v52a6 6 0 006 6h58a6 6 0 006-6V40a6 6 0 00-6-6H8zm0-2a8 8 0 00-8 8v52a8 8 0 008 8h58a8 8 0 008-8V40a8 8 0 00-8-8H8z",
+      clipRule: "evenodd"
+    }), /*#__PURE__*/_jsx("path", {
+      className: "illustrationFill",
+      d: "M37 0c12.15 0 22 9.85 22 22v12H46V22a9 9 0 10-18 0v12H15V22C15 9.85 24.85 0 37 0z"
+    }), /*#__PURE__*/_jsx("path", {
+      className: "illustrationStroke",
+      fillRule: "evenodd",
+      d: "M57 22c0-11.046-8.954-20-20-20s-20 8.954-20 20v10h9V22c0-6.075 4.925-11 11-11s11 4.925 11 11v10h9V22zm2 0C59 9.85 49.15 0 37 0S15 9.85 15 22v12h13V22a9 9 0 1118 0v12h13V22z",
+      clipRule: "evenodd"
+    }), /*#__PURE__*/_jsx("path", {
+      className: "illustrationFill",
+      d: "M42 67.245a8 8 0 10-10 0V78a5 5 0 0010 0V67.245z"
+    }), /*#__PURE__*/_jsx("path", {
+      className: "illustrationStroke",
+      fillRule: "evenodd",
+      d: "M40 66.285l.75-.6a6 6 0 10-7.498 0l.748.6V78a3 3 0 106 0V66.285zm-8 .96a8 8 0 1110 0V78a5 5 0 01-10 0V67.245zM21.553 15.394a1 1 0 01-.447-1.341c2.092-4.185 5.267-7.386 9.543-8.99a1 1 0 01.702 1.873c-3.723 1.396-6.549 4.195-8.456 8.011a1 1 0 01-1.342.447zM19.999 24A1 1 0 0119 22.999L20 23l-1-.001v-.031a10.082 10.082 0 01.009-.355 28.334 28.334 0 01.511-4.308 1 1 0 011.962.39 26.341 26.341 0 00-.474 3.989l-.007.243v.06L21 23v.002a1 1 0 01-1.001.998z",
+      clipRule: "evenodd"
+    })]
+  });
 }

package/dist/esm/EmptyState/components/EmptyStateImage/Images/referenceScreen.js

@@ -1,33 +1,35 @@
 import React from "react";
 
 // eslint-disable-next-line import/prefer-default-export
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function ReferenceScreenImage() {
-  return /*#__PURE__*/React.createElement("svg", {
+  return /*#__PURE__*/_jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "125",
     height: "100",
     fill: "none",
-    viewBox: "0 0 125 100"
-  }, /*#__PURE__*/React.createElement("path", {
-    className: "illustrationStroke",
-    fillRule: "evenodd",
-    d: "M28 64.722l.001-4.222a1 1 0 012 0v6a1 1 0 01-2 0v-1.778zM29 56.5a1 1 0 01-1-1l.003-12.416V39a1 1 0 012 0v4.084L30 55.5a1 1 0 01-1 1z",
-    clipRule: "evenodd"
-  }), /*#__PURE__*/React.createElement("path", {
-    className: "illustrationStroke",
-    fillRule: "evenodd",
-    d: "M66 86h31a3 3 0 003-3V39a3 3 0 00-3-3H29a3 3 0 00-3 3v44a3 3 0 003 3h31v8.418l-8.96 1.194A1.2 1.2 0 0051.2 98h23.6a1.2 1.2 0 00.16-2.388L66 94.418V86zm2 6.667V88h29a5 5 0 005-5V39a5 5 0 00-5-5H29a5 5 0 00-5 5v44a5 5 0 005 5h29v4.667l-7.224.963A3.2 3.2 0 0051.2 100h23.602a3.2 3.2 0 00.423-6.37L68 92.667z",
-    clipRule: "evenodd"
-  }), /*#__PURE__*/React.createElement("path", {
-    className: "illustrationFill",
-    d: "M101.584 85h21.679c9.909-46.7-24.21-85-60.722-85-35.386 0-73.683 36.45-59.52 85h21.395A4.983 4.983 0 0124 83V39a5 5 0 015-5h68a5 5 0 015 5v44c0 .711-.148 1.388-.416 2z"
-  }), /*#__PURE__*/React.createElement("path", {
-    className: "illustrationFill",
-    d: "M63.5 60.5l31.407-20.483c1.33-.868 3.092.086 3.092 1.675V82a2 2 0 01-2 2H35.49c-1.97 0-2.754-2.545-1.127-3.653L63.5 60.5z"
-  }), /*#__PURE__*/React.createElement("path", {
-    className: "illustrationStroke",
-    fillRule: "evenodd",
-    d: "M80 66v-3a3 3 0 10-3 3h3zm-3-8a5 5 0 000 10h5v-5a5 5 0 00-5-5zM88 66h3a3 3 0 10-3-3v3zm8-3a5 5 0 00-10 0v5h5a5 5 0 005-5zM88 74v3a3 3 0 103-3h-3zm3 8a5 5 0 000-10h-5v5a5 5 0 005 5zM80 74h-3a3 3 0 103 3v-3zm-8 3a5 5 0 0010 0v-5h-5a5 5 0 00-5 5zM86 74h-4v-2h4v2zM86 68h-4v-2h4v2zM80 72v-4h2v4h-2zM86 72v-4h2v4h-2zM3.5 85a1 1 0 011-1h21a1 1 0 110 2h-21a1 1 0 01-1-1zm96 0a1 1 0 011-1H122a1 1 0 010 2h-21.5a1 1 0 01-1-1z",
-    clipRule: "evenodd"
-  }));
+    viewBox: "0 0 125 100",
+    children: [/*#__PURE__*/_jsx("path", {
+      className: "illustrationStroke",
+      fillRule: "evenodd",
+      d: "M28 64.722l.001-4.222a1 1 0 012 0v6a1 1 0 01-2 0v-1.778zM29 56.5a1 1 0 01-1-1l.003-12.416V39a1 1 0 012 0v4.084L30 55.5a1 1 0 01-1 1z",
+      clipRule: "evenodd"
+    }), /*#__PURE__*/_jsx("path", {
+      className: "illustrationStroke",
+      fillRule: "evenodd",
+      d: "M66 86h31a3 3 0 003-3V39a3 3 0 00-3-3H29a3 3 0 00-3 3v44a3 3 0 003 3h31v8.418l-8.96 1.194A1.2 1.2 0 0051.2 98h23.6a1.2 1.2 0 00.16-2.388L66 94.418V86zm2 6.667V88h29a5 5 0 005-5V39a5 5 0 00-5-5H29a5 5 0 00-5 5v44a5 5 0 005 5h29v4.667l-7.224.963A3.2 3.2 0 0051.2 100h23.602a3.2 3.2 0 00.423-6.37L68 92.667z",
+      clipRule: "evenodd"
+    }), /*#__PURE__*/_jsx("path", {
+      className: "illustrationFill",
+      d: "M101.584 85h21.679c9.909-46.7-24.21-85-60.722-85-35.386 0-73.683 36.45-59.52 85h21.395A4.983 4.983 0 0124 83V39a5 5 0 015-5h68a5 5 0 015 5v44c0 .711-.148 1.388-.416 2z"
+    }), /*#__PURE__*/_jsx("path", {
+      className: "illustrationFill",
+      d: "M63.5 60.5l31.407-20.483c1.33-.868 3.092.086 3.092 1.675V82a2 2 0 01-2 2H35.49c-1.97 0-2.754-2.545-1.127-3.653L63.5 60.5z"
+    }), /*#__PURE__*/_jsx("path", {
+      className: "illustrationStroke",
+      fillRule: "evenodd",
+      d: "M80 66v-3a3 3 0 10-3 3h3zm-3-8a5 5 0 000 10h5v-5a5 5 0 00-5-5zM88 66h3a3 3 0 10-3-3v3zm8-3a5 5 0 00-10 0v5h5a5 5 0 005-5zM88 74v3a3 3 0 103-3h-3zm3 8a5 5 0 000-10h-5v5a5 5 0 005 5zM80 74h-3a3 3 0 103 3v-3zm-8 3a5 5 0 0010 0v-5h-5a5 5 0 00-5 5zM86 74h-4v-2h4v2zM86 68h-4v-2h4v2zM80 72v-4h2v4h-2zM86 72v-4h2v4h-2zM3.5 85a1 1 0 011-1h21a1 1 0 110 2h-21a1 1 0 01-1-1zm96 0a1 1 0 011-1H122a1 1 0 010 2h-21.5a1 1 0 01-1-1z",
+      clipRule: "evenodd"
+    })]
+  });
 }

package/dist/esm/EmptyState/components/EmptyStateImage/Images/speechBubble.js

@@ -1,37 +1,39 @@
 import React from "react";
 // eslint-disable-next-line import/prefer-default-export
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function SpeechBubbleImage() {
-  return /*#__PURE__*/React.createElement("svg", {
+  return /*#__PURE__*/_jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "220",
     height: "102",
     fill: "none",
-    viewBox: "0 0 220 102"
-  }, /*#__PURE__*/React.createElement("path", {
-    className: "illustrationFill",
-    d: "M171 46.269c0 15.935-9.654 29.999-24.371 38.378l.088 1.433h48.246a7.107 7.107 0 005.051-12.107 7.081 7.081 0 00-5.051-2.109h-6.094a7.107 7.107 0 01-7.107-7.108 7.106 7.106 0 017.107-7.108h19.293a7.109 7.109 0 100-14.216h-22.338a7.108 7.108 0 000-14.216h-18.709c2.508 5.28 3.885 11.033 3.885 17.053zM73.55 15H62.958a7.11 7.11 0 00-.072 14.216H22.34a7.108 7.108 0 100 14.216h25.385a7.11 7.11 0 110 14.216H7.107a7.108 7.108 0 000 14.216H46.71a7.108 7.108 0 000 14.216h39.34C69.836 77.934 59 63.152 59 46.27c0-6.02 1.377-11.773 3.885-17.053C65.393 23.936 69.03 19.129 73.55 15z"
-  }), /*#__PURE__*/React.createElement("path", {
-    className: "illustrationFill",
-    d: "M205.117 78.972a7.108 7.108 0 1014.216 0 7.108 7.108 0 00-14.216 0z"
-  }), /*#__PURE__*/React.createElement("path", {
-    className: "illustrationStroke",
-    fillRule: "evenodd",
-    d: "M144.556 83.757l1.084-.617C159.868 75.04 169 61.572 169 46.5 169 22.255 145.188 2 115 2S61 22.255 61 46.5 84.813 91 115 91c5.023 0 9.883-.566 14.492-1.622l.837-.192 15.183 10.062-.956-15.491zm-14.617 7.57A66.848 66.848 0 01115 93c-30.928 0-56-20.819-56-46.5S84.072 0 115 0s56 20.819 56 46.5c0 15.936-9.654 30-24.371 38.378l.88 14.246c.101 1.649-1.725 2.703-3.101 1.791l-14.469-9.588z",
-    clipRule: "evenodd"
-  }), /*#__PURE__*/React.createElement("path", {
-    className: "illustrationStroke",
-    fillRule: "evenodd",
-    d: "M74.293 30.918a1 1 0 01.35 1.37 33.882 33.882 0 00-2.318 4.696 1 1 0 01-1.857-.742 35.894 35.894 0 012.455-4.973 1 1 0 011.37-.35zM93.33 14.86a1 1 0 01-.473 1.333c-6.522 3.113-12.009 7.507-15.963 12.745a1 1 0 11-1.596-1.205c4.164-5.517 9.913-10.107 16.698-13.345a1 1 0 011.333.472z",
-    clipRule: "evenodd"
-  }), /*#__PURE__*/React.createElement("path", {
-    className: "illustrationFill",
-    fillRule: "evenodd",
-    d: "M94.434 52.787a6.093 6.093 0 110-12.185 6.093 6.093 0 010 12.185zm19.294 0a6.093 6.093 0 110-12.186 6.093 6.093 0 010 12.186zm19.293 0a6.093 6.093 0 110-12.186 6.093 6.093 0 010 12.186z",
-    clipRule: "evenodd"
-  }), /*#__PURE__*/React.createElement("path", {
-    className: "illustrationStroke",
-    fillRule: "evenodd",
-    d: "M94.434 41.602a5.093 5.093 0 100 10.185 5.093 5.093 0 000-10.185zm-7.092 5.092a7.093 7.093 0 1114.185 0 7.093 7.093 0 01-14.185 0zm26.386-5.092a5.093 5.093 0 100 10.185 5.093 5.093 0 000-10.185zm-7.093 5.092a7.092 7.092 0 1114.185 0 7.092 7.092 0 01-14.185 0zm26.386-5.092a5.093 5.093 0 100 10.185 5.093 5.093 0 000-10.185zm-7.093 5.092a7.093 7.093 0 1114.186.001 7.093 7.093 0 01-14.186 0z",
-    clipRule: "evenodd"
-  }));
+    viewBox: "0 0 220 102",
+    children: [/*#__PURE__*/_jsx("path", {
+      className: "illustrationFill",
+      d: "M171 46.269c0 15.935-9.654 29.999-24.371 38.378l.088 1.433h48.246a7.107 7.107 0 005.051-12.107 7.081 7.081 0 00-5.051-2.109h-6.094a7.107 7.107 0 01-7.107-7.108 7.106 7.106 0 017.107-7.108h19.293a7.109 7.109 0 100-14.216h-22.338a7.108 7.108 0 000-14.216h-18.709c2.508 5.28 3.885 11.033 3.885 17.053zM73.55 15H62.958a7.11 7.11 0 00-.072 14.216H22.34a7.108 7.108 0 100 14.216h25.385a7.11 7.11 0 110 14.216H7.107a7.108 7.108 0 000 14.216H46.71a7.108 7.108 0 000 14.216h39.34C69.836 77.934 59 63.152 59 46.27c0-6.02 1.377-11.773 3.885-17.053C65.393 23.936 69.03 19.129 73.55 15z"
+    }), /*#__PURE__*/_jsx("path", {
+      className: "illustrationFill",
+      d: "M205.117 78.972a7.108 7.108 0 1014.216 0 7.108 7.108 0 00-14.216 0z"
+    }), /*#__PURE__*/_jsx("path", {
+      className: "illustrationStroke",
+      fillRule: "evenodd",
+      d: "M144.556 83.757l1.084-.617C159.868 75.04 169 61.572 169 46.5 169 22.255 145.188 2 115 2S61 22.255 61 46.5 84.813 91 115 91c5.023 0 9.883-.566 14.492-1.622l.837-.192 15.183 10.062-.956-15.491zm-14.617 7.57A66.848 66.848 0 01115 93c-30.928 0-56-20.819-56-46.5S84.072 0 115 0s56 20.819 56 46.5c0 15.936-9.654 30-24.371 38.378l.88 14.246c.101 1.649-1.725 2.703-3.101 1.791l-14.469-9.588z",
+      clipRule: "evenodd"
+    }), /*#__PURE__*/_jsx("path", {
+      className: "illustrationStroke",
+      fillRule: "evenodd",
+      d: "M74.293 30.918a1 1 0 01.35 1.37 33.882 33.882 0 00-2.318 4.696 1 1 0 01-1.857-.742 35.894 35.894 0 012.455-4.973 1 1 0 011.37-.35zM93.33 14.86a1 1 0 01-.473 1.333c-6.522 3.113-12.009 7.507-15.963 12.745a1 1 0 11-1.596-1.205c4.164-5.517 9.913-10.107 16.698-13.345a1 1 0 011.333.472z",
+      clipRule: "evenodd"
+    }), /*#__PURE__*/_jsx("path", {
+      className: "illustrationFill",
+      fillRule: "evenodd",
+      d: "M94.434 52.787a6.093 6.093 0 110-12.185 6.093 6.093 0 010 12.185zm19.294 0a6.093 6.093 0 110-12.186 6.093 6.093 0 010 12.186zm19.293 0a6.093 6.093 0 110-12.186 6.093 6.093 0 010 12.186z",
+      clipRule: "evenodd"
+    }), /*#__PURE__*/_jsx("path", {
+      className: "illustrationStroke",
+      fillRule: "evenodd",
+      d: "M94.434 41.602a5.093 5.093 0 100 10.185 5.093 5.093 0 000-10.185zm-7.092 5.092a7.093 7.093 0 1114.185 0 7.093 7.093 0 01-14.185 0zm26.386-5.092a5.093 5.093 0 100 10.185 5.093 5.093 0 000-10.185zm-7.093 5.092a7.092 7.092 0 1114.185 0 7.092 7.092 0 01-14.185 0zm26.386-5.092a5.093 5.093 0 100 10.185 5.093 5.093 0 000-10.185zm-7.093 5.092a7.093 7.093 0 1114.186.001 7.093 7.093 0 01-14.186 0z",
+      clipRule: "evenodd"
+    })]
+  });
 }

package/dist/esm/EmptyState/components/EmptyStateImage/index.js

@@ -2,9 +2,12 @@ import React from "react";
 import getComponentFromLookup from "../../../helpers/logic/get-component-from-lookup";
 import IMAGE_COMPONENT_MAP from "./constants";
 import { BaseEmptyStateImage } from "./styled";
+import { jsx as _jsx } from "react/jsx-runtime";
 function EmptyStateImage(_ref) {
   var image = _ref.image;
   var mappedImage = getComponentFromLookup(IMAGE_COMPONENT_MAP, image, "folder", null);
-  return /*#__PURE__*/React.createElement(BaseEmptyStateImage, null, mappedImage);
+  return /*#__PURE__*/_jsx(BaseEmptyStateImage, {
+    children: mappedImage
+  });
 }
 export default EmptyStateImage;

package/dist/esm/EmptyState/index.js

@@ -7,6 +7,7 @@ import { EMPTY_OBJ } from "../helpers/logic/empties";
 import Typography from "../Typography";
 import EmptyStateImage from "./components/EmptyStateImage";
 import { BaseEmptyStateContainer } from "./styled";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function EmptyState(_ref) {
   var _ref$image = _ref.image,
     image = _ref$image === void 0 ? "folder" : _ref$image,
@@ -17,17 +18,22 @@ function EmptyState(_ref) {
   var _ref2 = buttonProps || EMPTY_OBJ,
     label = _ref2.label,
     restButtonProps = _objectWithoutProperties(_ref2, _excluded);
-  return /*#__PURE__*/React.createElement(BaseEmptyStateContainer, null, /*#__PURE__*/React.createElement(EmptyStateImage, {
-    image: image
-  }), /*#__PURE__*/React.createElement(Typography, {
-    variant: "display200"
-  }, title), description && /*#__PURE__*/React.createElement(Typography, {
-    variant: "caption",
-    textAlign: "center"
-  }, description), label && /*#__PURE__*/React.createElement(Button, _extends({}, restButtonProps, {
-    size: "default",
-    shouldFitContainer: false,
-    appearance: "primary"
-  }), label));
+  return /*#__PURE__*/_jsxs(BaseEmptyStateContainer, {
+    children: [/*#__PURE__*/_jsx(EmptyStateImage, {
+      image: image
+    }), /*#__PURE__*/_jsx(Typography, {
+      variant: "display200",
+      children: title
+    }), description && /*#__PURE__*/_jsx(Typography, {
+      variant: "caption",
+      textAlign: "center",
+      children: description
+    }), label && /*#__PURE__*/_jsx(Button, _extends({}, restButtonProps, {
+      size: "default",
+      shouldFitContainer: false,
+      appearance: "primary",
+      children: label
+    }))]
+  });
 }
 export default EmptyState;

package/dist/esm/Flex/index.js

@@ -3,6 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["width", "height", "position", "maxWidth", "minWidth", "maxHeight", "minHeight", "htmlTag", "direction", "spacing", "align", "justify", "wrap", "css", "style"];
 import React from "react";
 import { BaseFlex } from "./styled";
+import { jsx as _jsx } from "react/jsx-runtime";
 function Flex(_ref) {
   var width = _ref.width,
     height = _ref.height,
@@ -25,7 +26,7 @@ function Flex(_ref) {
     css = _ref.css,
     style = _ref.style,
     restProps = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(BaseFlex, _extends({
+  return /*#__PURE__*/_jsx(BaseFlex, _extends({
     spacing: spacing,
     align: align,
     justify: justify,

package/dist/esm/Form/CheckboxList/hooks/useCheckedItems.spec.js

@@ -1,4 +1,4 @@
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react";
 import useCheckedItems from "./useCheckedItems";
 describe("useCheckedItems", function () {
   var mount = function mount() {

package/dist/esm/Form/CheckboxList/hooks/useHandleChange.spec.js

@@ -1,4 +1,4 @@
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react";
 import { handleChange } from "../logic";
 import useHandleChange from "./useHandleChange";
 var mockHandleChange = jest.fn();

package/dist/esm/Form/CheckboxList/index.js

@@ -3,6 +3,7 @@ import Checkbox from "../../Input/Checkbox";
 import useCheckedItems from "./hooks/useCheckedItems";
 import useHandleChange from "./hooks/useHandleChange";
 import { BaseCheckboxListContainer } from "./styled";
+import { jsx as _jsx } from "react/jsx-runtime";
 function CheckboxList(_ref) {
   var _ref$onChange = _ref.onChange,
     onChange = _ref$onChange === void 0 ? function () {
@@ -21,34 +22,34 @@ function CheckboxList(_ref) {
   useEffect(function () {
     onChange(checkedItems);
   }, [checkedItems, onChange]);
-  return /*#__PURE__*/React.createElement(BaseCheckboxListContainer, {
+  return /*#__PURE__*/_jsx(BaseCheckboxListContainer, {
     role: "group",
     direction: direction,
-    "aria-labelledby": ariaLabelledBy
-  }, options === null || options === void 0 ? void 0 : options.map(function (_ref2) {
-    var label = _ref2.label,
-      id = _ref2.id,
-      optionValue = _ref2.value,
-      name = _ref2.name,
-      optionDisabled = _ref2.disabled;
-    return /*#__PURE__*/React.createElement(Checkbox, {
-      key: optionValue,
-      disabled: disabled || optionDisabled,
-      label: label,
-      id: id,
-      value: optionValue,
-      checked: checkedItems.includes(optionValue),
-      onChange: function onChange() {
-        return handleChange(optionValue);
-      }
-      /**
-       * In checkbox groups, the `name` field should be the same across all checkboxes
-       * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#handling_multiple_checkboxes
-       *
-       * We use the `name` prop passed to the CheckboxList, but still allow the user to set a `name` on a per-Checkbox basis if need be via each item passed to the `options` array.
-       * */,
-      name: name || checkboxListName
-    });
-  }));
+    "aria-labelledby": ariaLabelledBy,
+    children: options === null || options === void 0 ? void 0 : options.map(function (_ref2) {
+      var label = _ref2.label,
+        id = _ref2.id,
+        optionValue = _ref2.value,
+        name = _ref2.name,
+        optionDisabled = _ref2.disabled;
+      return /*#__PURE__*/_jsx(Checkbox, {
+        disabled: disabled || optionDisabled,
+        label: label,
+        id: id,
+        value: optionValue,
+        checked: checkedItems.includes(optionValue),
+        onChange: function onChange() {
+          return handleChange(optionValue);
+        }
+        /**
+         * In checkbox groups, the `name` field should be the same across all checkboxes
+         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#handling_multiple_checkboxes
+         *
+         * We use the `name` prop passed to the CheckboxList, but still allow the user to set a `name` on a per-Checkbox basis if need be via each item passed to the `options` array.
+         * */,
+        name: name || checkboxListName
+      }, optionValue);
+    })
+  });
 }
 export default CheckboxList;

package/dist/esm/Form/CheckboxList/index.spec.js

@@ -1,12 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
-import { shallow } from "enzyme";
+import { render, screen } from "@testing-library/react";
 import React from "react";
-import { EMPTY_OBJ } from "../../helpers/logic/empties";
-import Checkbox from "../../Input/Checkbox";
-import useCheckedItems from "./hooks/useCheckedItems";
-import useHandleChange from "./hooks/useHandleChange";
 import CheckboxList from "./index";
-import { BaseCheckboxListContainer } from "./styled";
+import { jsx as _jsx } from "react/jsx-runtime";
 var defaultProps = {
   onChange: jest.fn(),
   value: [],
@@ -14,136 +10,62 @@ var defaultProps = {
   options: [{
     label: "foo",
     value: "foo",
-    id: "foo",
-    name: "foo",
-    onChange: function onChange() {
-      return "";
-    },
-    checked: false
+    id: "foo"
   }, {
     label: "bar",
     value: "bar",
-    id: "bar",
-    name: "bar",
-    onChange: function onChange() {
-      return "";
-    },
-    checked: false
+    id: "bar"
   }]
 };
-var mount = function mount() {
-  var customProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : EMPTY_OBJ;
-  return shallow(/*#__PURE__*/React.createElement(CheckboxList, _extends({}, defaultProps, customProps)));
-};
-var mockUseCheckedItems = {
-  checkedItems: ["foo"],
-  setCheckedItems: jest.fn()
-};
-jest.mock("./hooks/useCheckedItems", function () {
-  return jest.fn(function () {
-    return mockUseCheckedItems;
-  });
-});
-jest.mock("./hooks/useHandleChange", function () {
-  return jest.fn(function () {
-    return jest.fn();
-  });
-});
-describe("CheckboxList", function () {
-  it("should be defined", function () {
-    expect(CheckboxList).toBeDefined();
-  });
-  it("should call the correct hooks", function () {
-    mount();
-    expect(useCheckedItems).toHaveBeenCalledWith(defaultProps.value);
-    expect(useHandleChange).toHaveBeenCalledWith(mockUseCheckedItems.checkedItems, mockUseCheckedItems.setCheckedItems);
+describe("<CheckboxList />", function () {
+  it("renders a group container with role='group'", function () {
+    render(/*#__PURE__*/_jsx(CheckboxList, _extends({}, defaultProps)));
+    expect(screen.getByRole("group")).toBeTruthy();
   });
-  it("should render correctly", function () {
-    var wrapper = mount();
-    var baseCheckboxListContainer = wrapper.find(BaseCheckboxListContainer);
-    expect(baseCheckboxListContainer).toHaveLength(1);
-    expect(baseCheckboxListContainer.prop("role")).toEqual("group");
-    var checkbox = wrapper.find(Checkbox);
-    expect(checkbox).toHaveLength(2);
-    expect(checkbox.at(0).prop("label")).toEqual(defaultProps.options[0].label);
-    expect(checkbox.at(0).prop("value")).toEqual(defaultProps.options[0].value);
-    expect(checkbox.at(0).prop("name")).toEqual(defaultProps.options[0].value);
-    expect(checkbox.at(0).prop("checked")).toEqual(true);
-    expect(checkbox.at(0).prop("disabled")).toBeFalsy();
-    expect(checkbox.at(1).prop("label")).toEqual(defaultProps.options[1].label);
-    expect(checkbox.at(1).prop("value")).toEqual(defaultProps.options[1].value);
-    expect(checkbox.at(1).prop("name")).toEqual(defaultProps.options[1].value);
-    expect(checkbox.at(1).prop("checked")).toEqual(false);
-    expect(checkbox.at(1).prop("disabled")).toBeFalsy();
+  it("renders one checkbox per option", function () {
+    render(/*#__PURE__*/_jsx(CheckboxList, _extends({}, defaultProps)));
+    expect(screen.getAllByRole("checkbox")).toHaveLength(2);
   });
-  it("should disable all checkboxes when disabled prop is true", function () {
-    var wrapper = mount({
+  it("disables every checkbox when the list-level `disabled` prop is true", function () {
+    render(/*#__PURE__*/_jsx(CheckboxList, _extends({}, defaultProps, {
       disabled: true
+    })));
+    var boxes = screen.getAllByRole("checkbox");
+    expect(boxes).toHaveLength(2);
+    boxes.forEach(function (box) {
+      return expect(box.disabled).toBe(true);
     });
-    var checkbox = wrapper.find(Checkbox);
-    expect(checkbox).toHaveLength(2);
-    expect(checkbox.at(0).prop("disabled")).toBe(true);
-    expect(checkbox.at(1).prop("disabled")).toBe(true);
   });
-  it("should disable individual checkboxes via options", function () {
-    var customOptions = [{
-      label: "foo",
-      value: "foo",
-      id: "foo",
-      name: "foo",
-      onChange: function onChange() {
-        return "";
-      },
-      checked: false,
-      disabled: true
-    }, {
-      label: "bar",
-      value: "bar",
-      id: "bar",
-      name: "bar",
-      onChange: function onChange() {
-        return "";
-      },
-      checked: false,
-      disabled: false
-    }];
-    var wrapper = mount({
-      options: customOptions
-    });
-    var checkbox = wrapper.find(Checkbox);
-    expect(checkbox).toHaveLength(2);
-    expect(checkbox.at(0).prop("disabled")).toBe(true);
-    expect(checkbox.at(1).prop("disabled")).toBe(false);
+  it("disables only the matching checkbox when an individual option.disabled is set", function () {
+    render(/*#__PURE__*/_jsx(CheckboxList, _extends({}, defaultProps, {
+      options: [{
+        label: "foo",
+        value: "foo",
+        id: "foo",
+        disabled: true
+      }, {
+        label: "bar",
+        value: "bar",
+        id: "bar",
+        disabled: false
+      }]
+    })));
+    var boxes = screen.getAllByRole("checkbox");
+    expect(boxes[0].disabled).toBe(true);
+    expect(boxes[1].disabled).toBe(false);
   });
-  it("should disable all checkboxes when both disabled prop and individual option disabled are set", function () {
-    var customOptions = [{
-      label: "foo",
-      value: "foo",
-      id: "foo",
-      name: "foo",
-      onChange: function onChange() {
-        return "";
-      },
-      checked: false,
-      disabled: true
-    }, {
-      label: "bar",
-      value: "bar",
-      id: "bar",
-      name: "bar",
-      onChange: function onChange() {
-        return "";
-      },
-      checked: false,
-      disabled: false
-    }];
-    var wrapper = mount({
-      disabled: true,
-      options: customOptions
-    });
-    var checkbox = wrapper.find(Checkbox);
-    expect(checkbox).toHaveLength(2);
-    expect(checkbox.at(0).prop("disabled")).toBe(true);
-    expect(checkbox.at(1).prop("disabled")).toBe(true);
+  it("reflects the `value` prop in each checkbox's aria-checked state", function () {
+    render(/*#__PURE__*/_jsx(CheckboxList, _extends({}, defaultProps, {
+      value: ["foo"]
+    })));
+    var boxes = screen.getAllByRole("checkbox");
+    expect(boxes[0].getAttribute("aria-checked")).toBe("true");
+    expect(boxes[1].getAttribute("aria-checked")).toBe("false");
   });
+
+  // Note: the `name` prop is consumed by Radix's Checkbox.Root, which only
+  // emits a hidden <input name="..."> when inside a <form>. We don't assert
+  // on `name` in DOM here because the rendered button doesn't carry it; the
+  // form-submission path is the right place to verify (separate integration
+  // test).
 });

package/dist/esm/Form/FormField/components/FormFieldLabel/index.js

@@ -1,12 +1,14 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["fieldType"];
 import React from "react";
 import Label from "../../../Label";
 import Legend from "../../../Legend";
 import { FIELD_TYPES_USING_LEGEND } from "./constants";
+import { jsx as _jsx } from "react/jsx-runtime";
 function FormFieldLabel(_ref) {
   var fieldType = _ref.fieldType,
     restProps = _objectWithoutProperties(_ref, _excluded);
-  return FIELD_TYPES_USING_LEGEND.includes(fieldType) ? /*#__PURE__*/React.createElement(Legend, restProps) : /*#__PURE__*/React.createElement(Label, restProps);
+  return FIELD_TYPES_USING_LEGEND.includes(fieldType) ? /*#__PURE__*/_jsx(Legend, _extends({}, restProps)) : /*#__PURE__*/_jsx(Label, _extends({}, restProps));
 }
 export default FormFieldLabel;

package/dist/esm/Form/FormField/components/FormFieldLabel/index.spec.js

@@ -2,9 +2,10 @@ import { render } from "@testing-library/react";
 import React from "react";
 import { getLabelledById } from "../../logic";
 import FormFieldLabel from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 describe("getInputComponent", function () {
   it("should return a <label> component when no fieldType is provided", function () {
-    var _render = render(/*#__PURE__*/React.createElement(FormFieldLabel, {
+    var _render = render(/*#__PURE__*/_jsx(FormFieldLabel, {
         id: getLabelledById("foo"),
         fieldType: "text",
         content: "Foo",
@@ -14,7 +15,7 @@ describe("getInputComponent", function () {
     expect(container.children[0].tagName).toEqual("LABEL");
   });
   it("should return a <label> component when no fieldType `text` is provided", function () {
-    var _render2 = render(/*#__PURE__*/React.createElement(FormFieldLabel, {
+    var _render2 = render(/*#__PURE__*/_jsx(FormFieldLabel, {
         id: getLabelledById("foo"),
         fieldType: "text",
         content: "Foo",
@@ -24,7 +25,7 @@ describe("getInputComponent", function () {
     expect(container.children[0].tagName).toEqual("LABEL");
   });
   it("should return a <legend> element when passed a checkbox type", function () {
-    var _render3 = render(/*#__PURE__*/React.createElement(FormFieldLabel, {
+    var _render3 = render(/*#__PURE__*/_jsx(FormFieldLabel, {
         id: getLabelledById("foo"),
         fieldType: "checkbox",
         content: "Foo",