Warn in dev for child validation rather than return null (#180)

Co-authored-by: Tyler Grove <tyler.grove@vimeo.com>

src/components/inputs/Checkbox/CheckboxSet.tsx

@@ -73,8 +73,7 @@ function CheckboxSetComponent({
     checksSet(initialState);
   }, [children, coupled, defaultChecked]);
 
-  if (!validate(children, 'checkbox') && DEV)
-    console.warn('Unable to validate children on CheckboxSet');
+  validate(children, 'checkbox');
 
   const allChecked = checks.every((check) => check);
   const someChecked = !allChecked && checks.some((check) => check);
@@ -128,7 +127,5 @@ function CheckboxSetComponent({
   );
 }
 
-const DEV = process.env.NODE_ENV === 'development';
-
 const toggle = (index) => (checked) =>
   checked.map((val, i) => (index === i ? !val : val));

src/components/inputs/Radio/RadioSet.tsx

@@ -44,7 +44,7 @@ function RadioSetComponent({
     initialCheckedIndex
   );
 
-  if (!validate(children, 'radio')) return null;
+  validate(children, 'radio');
 
   function onChange(event) {
     if (event.target.checked) {

src/components/inputs/Shared.ts

@@ -9,6 +9,8 @@ import { rgba, rem } from 'polished';
 import { blue, white } from '../../color';
 import { Statuses } from '../../themes';
 
+const isDev = process?.env?.NODE_ENV === 'development';
+
 export function inputColors({ theme, disabled = false, format }) {
   if (!format || !theme.formats[format]) format = 'basic';
 
@@ -283,7 +285,7 @@ export function validate(
   const Name = type.charAt(0).toUpperCase() + type.slice(1);
   const valid = children.every(compareMetas(type));
 
-  if (!valid) {
+  if (!valid && isDev) {
     console.warn(
       `<${Name}Set /> children must be <${Name} />.`,
       children