@dhis2-ui/checkbox 9.10.3 → 9.11.1-beta.1

package/build/es/checkbox/{checkbox.stories.js → checkbox.prod.stories.js}

@@ -1,38 +1,40 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import { sharedPropTypes } from '@dhis2/ui-constants';
 import React from 'react';
 import { Checkbox } from './index.js';
 const subtitle = 'A checkbox is a control that allows a user to toggle an option.';
-const description = "\nCheckboxes are used when an option can be toggled on or off. Toggling a checkbox on (true) is always considered a positive action and should reflect a positive/true/on state. Multiple checkboxes can be used in a list where a user can toggle multiple elements.\n\nDo not use checkboxes in a list of several options where only a single option can be toggled, use [radio buttons](../?path=/docs/forms-radio-radio--default) here instead.\n\nIf there are many options that need to select from, consider using a [select](../?path=/docs/forms-single-select-single-select--with-options) instead.\n\n```js\nimport { Checkbox } from '@dhis2/ui'\n```\n";
+const description = `
+Checkboxes are used when an option can be toggled on or off. Toggling a checkbox on (true) is always considered a positive action and should reflect a positive/true/on state. Multiple checkboxes can be used in a list where a user can toggle multiple elements.
+
+Do not use checkboxes in a list of several options where only a single option can be toggled, use [radio buttons](../?path=/docs/forms-radio-radio--default) here instead.
 
+If there are many options that need to select from, consider using a [select](../?path=/docs/forms-single-select-single-select--with-options) instead.
+
+\`\`\`js
+import { Checkbox } from '@dhis2/ui'
+\`\`\`
+`;
 window.onChange = (payload, event) => {
   console.log('onClick payload', payload);
   console.log('onClick event', event);
 };
-
 window.onFocus = (payload, event) => {
   console.log('onFocus payload', payload);
   console.log('onFocus event', event);
 };
-
 window.onBlur = (payload, event) => {
   console.log('onBlur payload', payload);
   console.log('onBlur event', event);
 };
-
 const onChange = function () {
   return window.onChange(...arguments);
 };
-
 const onFocus = function () {
   return window.onFocus(...arguments);
 };
-
 const onBlur = function () {
   return window.onBlur(...arguments);
 };
-
 const defaultArgs = {
   name: 'Ex',
   label: 'Checkbox',
@@ -63,28 +65,31 @@ export default {
     }
   },
   // Sets default args on all stories unless overridden
-  args: { ...defaultArgs
+  args: {
+    ...defaultArgs
   },
   argTypes: {
-    checked: { ...uniqueOnStateArgType
+    checked: {
+      ...uniqueOnStateArgType
     },
-    indeterminate: { ...uniqueOnStateArgType
+    indeterminate: {
+      ...uniqueOnStateArgType
     },
-    valid: { ...sharedPropTypes.statusArgType
+    valid: {
+      ...sharedPropTypes.statusArgType
     },
-    warning: { ...sharedPropTypes.statusArgType
+    warning: {
+      ...sharedPropTypes.statusArgType
     },
-    error: { ...sharedPropTypes.statusArgType
+    error: {
+      ...sharedPropTypes.statusArgType
     }
   }
 };
-
 const Template = args => /*#__PURE__*/React.createElement(Checkbox, args);
-
 const CheckedUncheckedTemplate = args => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Checkbox, args), /*#__PURE__*/React.createElement(Checkbox, _extends({
   checked: true
 }, args)));
-
 export const Default = Template.bind({});
 Default.args = {
   value: 'default'
@@ -102,7 +107,6 @@ FocusedUnchecked.storyName = 'Focused unchecked';
  * 'initialFocus' causes docs page to scroll away every time a control is
  * changed, so it's disabled
  */
-
 FocusedUnchecked.parameters = {
   docs: {
     disable: true
@@ -178,7 +182,8 @@ FocusedUncheckedDense.parameters = {
   }
 };
 export const FocusedCheckedDense = Template.bind({});
-FocusedCheckedDense.args = { ...FocusedUncheckedDense.args,
+FocusedCheckedDense.args = {
+  ...FocusedUncheckedDense.args,
   checked: true
 };
 FocusedCheckedDense.storyName = 'Focused checked - Dense';
@@ -202,27 +207,32 @@ IndeterminateDense.args = {
 };
 IndeterminateDense.storyName = 'Indeterminate - Dense';
 export const DisabledDense = CheckedUncheckedTemplate.bind({});
-DisabledDense.args = { ...Disabled.args,
+DisabledDense.args = {
+  ...Disabled.args,
   dense: true
 };
 DisabledDense.storyName = 'Disabled - Dense';
 export const ValidDense = CheckedUncheckedTemplate.bind({});
-ValidDense.args = { ...Valid.args,
+ValidDense.args = {
+  ...Valid.args,
   dense: true
 };
 ValidDense.storyName = 'Valid - Dense';
 export const WarningDense = CheckedUncheckedTemplate.bind({});
-WarningDense.args = { ...Warning.args,
+WarningDense.args = {
+  ...Warning.args,
   dense: true
 };
 WarningDense.storyName = 'Warning - Dense';
 export const ErrorDense = CheckedUncheckedTemplate.bind({});
-ErrorDense.args = { ...Error.args,
+ErrorDense.args = {
+  ...Error.args,
   dense: true
 };
 ErrorDense.storyName = 'Error - Dense';
 export const ImageLabelDense = Template.bind({});
-ImageLabelDense.args = { ...ImageLabel.args,
+ImageLabelDense.args = {
+  ...ImageLabel.args,
   dense: true
 };
 ImageLabelDense.storyName = 'Image label - Dense';

package/build/es/checkbox/features/accepts_initial_focus/index.js

@@ -1,6 +1,6 @@
 import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a Checkbox with initialFocus is rendered', () => {
-  cy.visitStory('Checkbox', 'With initialFocus');
+  cy.visitStory('Checkbox', 'With initial focus');
 });
 Then('the Checkbox is focused', () => {
   cy.focused().parent('[data-test="dhis2-uicore-checkbox"]').should('exist');

package/build/es/checkbox/features/can_be_blurred/index.js

@@ -1,6 +1,6 @@
 import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a Checkbox with initialFocus and onBlur handler is rendered', () => {
-  cy.visitStory('Checkbox', 'With initialFocus and onBlur');
+  cy.visitStory('Checkbox', 'With initial focus and on blur');
 });
 When('the Checkbox is blurred', () => {
   cy.get('[data-test="dhis2-uicore-checkbox"] input').blur();

package/build/es/checkbox/features/can_be_changed/index.js

@@ -1,6 +1,6 @@
 import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a Checkbox with onChange handler is rendered', () => {
-  cy.visitStory('Checkbox', 'With onChange');
+  cy.visitStory('Checkbox', 'With on change');
 });
 When('the Checkbox is clicked', () => {
   cy.get('[data-test="dhis2-uicore-checkbox"]').click();

package/build/es/checkbox/features/can_be_disabled/index.js

@@ -1,6 +1,6 @@
 import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a disabled Checkbox with onClick handler is rendered', () => {
-  cy.visitStory('Checkbox', 'Disabled with onClick');
+  cy.visitStory('Checkbox', 'Disabled with on click');
 });
 When('the Checkbox is clicked', () => {
   cy.get('[data-test="dhis2-uicore-checkbox"] input').click({

package/build/es/checkbox/features/can_be_focused/index.js

@@ -1,6 +1,6 @@
 import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a Checkbox with onFocus handler is rendered', () => {
-  cy.visitStory('Checkbox', 'With onFocus');
+  cy.visitStory('Checkbox', 'With on focus');
 });
 When('the Checkbox is focused', () => {
   cy.get('[data-test="dhis2-uicore-checkbox"] input').focus();

package/build/es/checkbox-field/checkbox-field.e2e.stories.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { CheckboxField } from './index.js';
+export default {
+  title: 'CheckboxField'
+};
+export const WithLabelAndRequired = () => /*#__PURE__*/React.createElement(CheckboxField, {
+  name: "Ex",
+  label: "CheckboxField",
+  required: true,
+  value: "checked"
+});
+export const WithHelpText = () => /*#__PURE__*/React.createElement(CheckboxField, {
+  name: "Ex",
+  label: "CheckboxField",
+  value: "checked",
+  helpText: "Help text"
+});
+export const WithLabel = () => /*#__PURE__*/React.createElement(CheckboxField, {
+  name: "Ex",
+  label: "The label",
+  value: "checked"
+});
+export const WithValidationText = () => /*#__PURE__*/React.createElement(CheckboxField, {
+  name: "Ex",
+  label: "The label",
+  value: "checked",
+  validationText: "Validation text"
+});

package/build/es/checkbox-field/checkbox-field.js

@@ -1,10 +1,9 @@
+import { sharedPropTypes } from '@dhis2/ui-constants';
 import { Field } from '@dhis2-ui/field';
 import { Required } from '@dhis2-ui/required';
-import { sharedPropTypes } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { Checkbox } from '../index.js';
-
+import { Checkbox } from '../checkbox/index.js';
 const AddRequired = _ref => {
   let {
     label,
@@ -12,16 +11,14 @@ const AddRequired = _ref => {
     dataTest
   } = _ref;
   return /*#__PURE__*/React.createElement(React.Fragment, null, label, required && /*#__PURE__*/React.createElement(Required, {
-    dataTest: "".concat(dataTest, "-required")
+    dataTest: `${dataTest}-required`
   }));
 };
-
 AddRequired.propTypes = {
   dataTest: PropTypes.string,
   label: PropTypes.node,
   required: PropTypes.bool
 };
-
 const CheckboxField = _ref2 => {
   let {
     value,
@@ -76,7 +73,6 @@ const CheckboxField = _ref2 => {
     initialFocus: initialFocus
   }));
 };
-
 CheckboxField.defaultProps = {
   dataTest: 'dhis2-uiwidgets-checkboxfield'
 };
@@ -84,51 +80,36 @@ CheckboxField.propTypes = {
   checked: PropTypes.bool,
   className: PropTypes.string,
   dataTest: PropTypes.string,
-
   /** Smaller dimensions for information-dense layouts */
   dense: PropTypes.bool,
-
   /** Disables the checkbox */
   disabled: PropTypes.bool,
-
   /** Applies 'error' styling to checkbox and validation text for feedback. Mutually exclusive with `warning` and `valid` props */
   error: sharedPropTypes.statusPropType,
-
   /** Useful instructions for the user */
   helpText: PropTypes.string,
   initialFocus: PropTypes.bool,
-
   /** Labels the checkbox */
   label: PropTypes.node,
-
   /** Name associate with the checkbox. Passed in object as argument to event handlers */
   name: PropTypes.string,
-
   /** Adds an asterisk to indicate this field is required */
   required: PropTypes.bool,
   tabIndex: PropTypes.string,
-
   /** Applies 'valid' styling to checkbox and validation text for feedback. Mutually exclusive with `warning` and `error` props */
   valid: sharedPropTypes.statusPropType,
-
   /** Adds text below the checkbox to provide validation feedback. Acquires styles from `valid`, `warning` and `error` statuses */
   validationText: PropTypes.string,
-
   /** Value associated with the checkbox. Passed in object as argument to event handlers */
   value: PropTypes.string,
-
   /** Applies 'warning' styling to checkbox and validation text for feedback. Mutually exclusive with `valid` and `error` props */
   warning: sharedPropTypes.statusPropType,
-
   /** Called with signature `({ name: string, value: string, checked: bool }, event)` */
   onBlur: PropTypes.func,
-
   /** Called with signature `({ name: string, value: string, checked: bool }, event)` */
   onChange: PropTypes.func,
-
   /** Called with signature `({ name: string, value: string, checked: bool }, event)` */
   onFocus: PropTypes.func,
-
   /** Called with signature `({ name: string, value: string, checked: bool }, event)` */
   onKeyDown: PropTypes.func
 };

package/build/es/checkbox-field/{checkbox-field.stories.js → checkbox-field.prod.stories.js}

@@ -1,19 +1,24 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import { sharedPropTypes } from '@dhis2/ui-constants';
 import React from 'react';
 import { CheckboxField } from './index.js';
-const description = "\nA `CheckboxField` is a Checkbox component wrapped with extra form utilities, including the ability to add a label, help text, and validation text.  Validation styles like 'error' apply to all of these subcomponents.\n\nSee the basic Checkbox for usage and design system guidelines.\n\n```js\nimport { CheckboxField } from '@dhis2/ui'\n```\n";
+const description = `
+A \`CheckboxField\` is a Checkbox component wrapped with extra form utilities, including the ability to add a label, help text, and validation text.  Validation styles like 'error' apply to all of these subcomponents.
+
+See the basic Checkbox for usage and design system guidelines.
 
+\`\`\`js
+import { CheckboxField } from '@dhis2/ui'
+\`\`\`
+`;
 const logger = _ref => {
   let {
     name,
     value,
     checked
   } = _ref;
-  return console.log("name: ".concat(name, ", value: ").concat(value, ", checked: ").concat(checked));
+  return console.log(`name: ${name}, value: ${value}, checked: ${checked}`);
 };
-
 export default {
   title: 'Checkbox Field',
   component: CheckboxField,
@@ -32,34 +37,35 @@ export default {
     onChange: logger
   },
   argTypes: {
-    valid: { ...sharedPropTypes.statusArgType
+    valid: {
+      ...sharedPropTypes.statusArgType
     },
-    warning: { ...sharedPropTypes.statusArgType
+    warning: {
+      ...sharedPropTypes.statusArgType
     },
-    error: { ...sharedPropTypes.statusArgType
+    error: {
+      ...sharedPropTypes.statusArgType
     }
   }
 };
-
 const Template = args => /*#__PURE__*/React.createElement(CheckboxField, args);
-
 const CheckedUncheckedTemplate = args => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CheckboxField, args), /*#__PURE__*/React.createElement(CheckboxField, _extends({}, args, {
   checked: true
 })));
-
 export const Default = Template.bind({});
 export const FocusedUnchecked = Template.bind({});
 FocusedUnchecked.args = {
   initialFocus: true
-}; // Disable stories on docs page that grab focus
-
+};
+// Disable stories on docs page that grab focus
 FocusedUnchecked.parameters = {
   docs: {
     disable: true
   }
 };
 export const FocusedChecked = Template.bind({});
-FocusedChecked.args = { ...FocusedUnchecked.args,
+FocusedChecked.args = {
+  ...FocusedUnchecked.args,
   checked: true
 };
 FocusedChecked.parameters = {
@@ -117,7 +123,8 @@ DefaultDense.args = {
   dense: true
 };
 export const FocusedUncheckedDense = Template.bind({});
-FocusedUncheckedDense.args = { ...DefaultDense.args,
+FocusedUncheckedDense.args = {
+  ...DefaultDense.args,
   ...FocusedUnchecked.args
 };
 FocusedUncheckedDense.parameters = {
@@ -127,7 +134,8 @@ FocusedUncheckedDense.parameters = {
 };
 FocusedUncheckedDense.storyName = 'Focused unchecked - Dense';
 export const FocusedCheckedDense = Template.bind({});
-FocusedCheckedDense.args = { ...DefaultDense.args,
+FocusedCheckedDense.args = {
+  ...DefaultDense.args,
   ...FocusedChecked.args
 };
 FocusedCheckedDense.parameters = {
@@ -137,37 +145,44 @@ FocusedCheckedDense.parameters = {
 };
 FocusedCheckedDense.storyName = 'Focused checked - Dense';
 export const CheckedDense = Template.bind({});
-CheckedDense.args = { ...DefaultDense.args,
+CheckedDense.args = {
+  ...DefaultDense.args,
   ...Checked.args
 };
 CheckedDense.storyName = 'Checked - Dense';
 export const RequiredDense = Template.bind({});
-RequiredDense.args = { ...DefaultDense.args,
+RequiredDense.args = {
+  ...DefaultDense.args,
   ...Required.args
 };
 RequiredDense.storyName = 'Required - Dense';
 export const DisabledDense = CheckedUncheckedTemplate.bind({});
-DisabledDense.args = { ...DefaultDense.args,
+DisabledDense.args = {
+  ...DefaultDense.args,
   ...Disabled.args
 };
 DisabledDense.storyName = 'Disabled - Dense';
 export const ValidDense = CheckedUncheckedTemplate.bind({});
-ValidDense.args = { ...DefaultDense.args,
+ValidDense.args = {
+  ...DefaultDense.args,
   ...Valid.args
 };
 ValidDense.storyName = 'Valid - Dense';
 export const WarningDense = CheckedUncheckedTemplate.bind({});
-WarningDense.args = { ...DefaultDense.args,
+WarningDense.args = {
+  ...DefaultDense.args,
   ...Warning.args
 };
 WarningDense.storyName = 'Warning - Dense';
 export const ErrorDense = CheckedUncheckedTemplate.bind({});
-ErrorDense.args = { ...DefaultDense.args,
+ErrorDense.args = {
+  ...DefaultDense.args,
   ...Error.args
 };
 ErrorDense.storyName = 'Error - Dense';
 export const ImageLabelDense = Template.bind({});
-ImageLabelDense.args = { ...DefaultDense.args,
+ImageLabelDense.args = {
+  ...DefaultDense.args,
   ...ImageLabel.args
 };
 ImageLabelDense.storyName = 'Image label - Dense';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/checkbox",
-    "version": "9.10.3",
+    "version": "9.11.1-beta.1",
     "description": "UI Checkbox",
     "repository": {
         "type": "git",
@@ -22,20 +22,20 @@
         "access": "public"
     },
     "scripts": {
-        "start": "start-storybook -c ../../storybook/config --port 5000",
+        "start": "storybook dev -c ../../storybook/config --port 5000",
         "build": "d2-app-scripts build",
         "test": "d2-app-scripts test --jestConfig ../../jest.config.shared.js"
     },
     "peerDependencies": {
-        "react": "^16.8",
-        "react-dom": "^16.8",
+        "react": "^16.13",
+        "react-dom": "^16.13",
         "styled-jsx": "^4"
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/field": "9.10.3",
-        "@dhis2-ui/required": "9.10.3",
-        "@dhis2/ui-constants": "9.10.3",
+        "@dhis2-ui/field": "9.11.1-beta.1",
+        "@dhis2-ui/required": "9.11.1-beta.1",
+        "@dhis2/ui-constants": "9.11.1-beta.1",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },

package/build/cjs/checkbox/checkbox.stories.e2e.js

@@ -1,55 +0,0 @@
-"use strict";
-
-var _react = require("@storybook/react");
-
-var _react2 = _interopRequireDefault(require("react"));
-
-var _index = require("./index.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-window.onClick = window.Cypress && window.Cypress.cy.stub();
-window.onChange = window.Cypress && window.Cypress.cy.stub();
-window.onBlur = window.Cypress && window.Cypress.cy.stub();
-window.onFocus = window.Cypress && window.Cypress.cy.stub();
-(0, _react.storiesOf)('Checkbox', module).add('With onChange', () => /*#__PURE__*/_react2.default.createElement(_index.Checkbox, {
-  name: "Ex",
-  label: "Checkbox",
-  value: "default",
-  onChange: window.onChange
-})).add('With initialFocus and onBlur', () => /*#__PURE__*/_react2.default.createElement(_index.Checkbox, {
-  initialFocus: true,
-  name: "Ex",
-  label: "Checkbox",
-  value: "default",
-  onBlur: window.onBlur
-})).add('With onFocus', () => /*#__PURE__*/_react2.default.createElement(_index.Checkbox, {
-  name: "Ex",
-  label: "Checkbox",
-  value: "default",
-  onFocus: window.onFocus
-})).add('Disabled with onClick', () => /*#__PURE__*/_react2.default.createElement(_index.Checkbox, {
-  name: "Ex",
-  label: "Checkbox",
-  value: "default",
-  disabled: true,
-  onClick: window.onClick
-})).add('With label', () => /*#__PURE__*/_react2.default.createElement(_index.Checkbox, {
-  name: "Ex",
-  label: "The label",
-  value: "default"
-})).add('With initialFocus', () => /*#__PURE__*/_react2.default.createElement(_index.Checkbox, {
-  name: "Ex",
-  label: "The label",
-  value: "default",
-  initialFocus: true
-})).add('Indeterminate prop', () => /*#__PURE__*/_react2.default.createElement(_index.Checkbox, {
-  name: "Ex",
-  label: "The label",
-  value: "default",
-  indeterminate: true
-})).add('No indeterminate prop', () => /*#__PURE__*/_react2.default.createElement(_index.Checkbox, {
-  name: "Ex",
-  label: "The label",
-  value: "default"
-}));

package/build/cjs/checkbox-field/checkbox-field.stories.e2e.js

@@ -1,30 +0,0 @@
-"use strict";
-
-var _react = require("@storybook/react");
-
-var _react2 = _interopRequireDefault(require("react"));
-
-var _index = require("./index.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-(0, _react.storiesOf)('CheckboxField', module).add('With label and required', () => /*#__PURE__*/_react2.default.createElement(_index.CheckboxField, {
-  name: "Ex",
-  label: "CheckboxField",
-  required: true,
-  value: "checked"
-})).add('With help text', () => /*#__PURE__*/_react2.default.createElement(_index.CheckboxField, {
-  name: "Ex",
-  label: "CheckboxField",
-  value: "checked",
-  helpText: "Help text"
-})).add('With label', () => /*#__PURE__*/_react2.default.createElement(_index.CheckboxField, {
-  name: "Ex",
-  label: "The label",
-  value: "checked"
-})).add('With validation text', () => /*#__PURE__*/_react2.default.createElement(_index.CheckboxField, {
-  name: "Ex",
-  label: "The label",
-  value: "checked",
-  validationText: "Validation text"
-}));

package/build/es/checkbox-field/checkbox-field.stories.e2e.js

@@ -1,23 +0,0 @@
-import { storiesOf } from '@storybook/react';
-import React from 'react';
-import { CheckboxField } from './index.js';
-storiesOf('CheckboxField', module).add('With label and required', () => /*#__PURE__*/React.createElement(CheckboxField, {
-  name: "Ex",
-  label: "CheckboxField",
-  required: true,
-  value: "checked"
-})).add('With help text', () => /*#__PURE__*/React.createElement(CheckboxField, {
-  name: "Ex",
-  label: "CheckboxField",
-  value: "checked",
-  helpText: "Help text"
-})).add('With label', () => /*#__PURE__*/React.createElement(CheckboxField, {
-  name: "Ex",
-  label: "The label",
-  value: "checked"
-})).add('With validation text', () => /*#__PURE__*/React.createElement(CheckboxField, {
-  name: "Ex",
-  label: "The label",
-  value: "checked",
-  validationText: "Validation text"
-}));