@khanacademy/wonder-blocks-form 4.9.2 → 4.9.4

package/dist/index.js

@@ -622,15 +622,14 @@ const RadioGroup = React__namespace.forwardRef(function RadioGroup(props, ref) {
   })));
 });
 
-const _excluded$2 = ["id", "type", "value", "name", "disabled", "onKeyDown", "placeholder", "light", "style", "testId", "readOnly", "autoFocus", "autoComplete", "forwardedRef", "onFocus", "onBlur", "onValidate", "validate", "onChange", "required"];
+const _excluded$2 = ["id", "type", "value", "name", "disabled", "onKeyDown", "placeholder", "style", "testId", "readOnly", "autoFocus", "autoComplete", "forwardedRef", "light", "onFocus", "onBlur", "onValidate", "validate", "onChange", "required"];
 const defaultErrorMessage$1 = "This field is required.";
 const StyledInput = wonderBlocksCore.addStyle("input");
 class TextField extends React__namespace.Component {
   constructor(props) {
     super(props);
     this.state = {
-      error: null,
-      focused: false
+      error: null
     };
     this.maybeValidate = newValue => {
       const {
@@ -671,25 +670,30 @@ class TextField extends React__namespace.Component {
       const {
         onFocus
       } = this.props;
-      this.setState({
-        focused: true
-      }, () => {
-        if (onFocus) {
-          onFocus(event);
-        }
-      });
+      if (onFocus) {
+        onFocus(event);
+      }
     };
     this.handleBlur = event => {
       const {
         onBlur
       } = this.props;
-      this.setState({
-        focused: false
-      }, () => {
-        if (onBlur) {
-          onBlur(event);
-        }
-      });
+      if (onBlur) {
+        onBlur(event);
+      }
+    };
+    this.getStyles = () => {
+      const {
+        disabled,
+        light
+      } = this.props;
+      const {
+        error
+      } = this.state;
+      const baseStyles = [styles$2.input, wonderBlocksTypography.styles.LabelMedium];
+      const defaultStyles = [styles$2.default, !disabled && styles$2.defaultFocus, disabled && styles$2.disabled, !!error && styles$2.error];
+      const lightStyles = [styles$2.light, !disabled && styles$2.lightFocus, disabled && styles$2.lightDisabled, !!error && styles$2.lightError];
+      return [...baseStyles, ...(light ? lightStyles : defaultStyles)];
     };
     if (props.validate && props.value !== "") {
       this.state.error = props.validate(props.value) || null;
@@ -710,7 +714,6 @@ class TextField extends React__namespace.Component {
         disabled,
         onKeyDown,
         placeholder,
-        light,
         style,
         testId,
         readOnly,
@@ -723,19 +726,19 @@ class TextField extends React__namespace.Component {
       id: id,
       scope: "text-field"
     }, uniqueId => React__namespace.createElement(StyledInput, _extends__default["default"]({
-      style: [styles$2.input, wonderBlocksTypography.styles.LabelMedium, styles$2.default, disabled ? styles$2.disabled : this.state.focused ? [styles$2.focused, light && styles$2.defaultLight] : !!this.state.error && [styles$2.error, light && styles$2.errorLight], !!this.state.error && styles$2.error, style && style],
+      style: [this.getStyles(), style],
       id: uniqueId,
       type: type,
       placeholder: placeholder,
       value: value,
       name: name,
-      disabled: disabled,
+      "aria-disabled": disabled,
       onChange: this.handleChange,
-      onKeyDown: onKeyDown,
+      onKeyDown: disabled ? undefined : onKeyDown,
       onFocus: this.handleFocus,
       onBlur: this.handleBlur,
       "data-testid": testId,
-      readOnly: readOnly,
+      readOnly: readOnly || disabled,
       autoFocus: autoFocus,
       autoComplete: autoComplete,
       ref: forwardedRef
@@ -753,12 +756,10 @@ const styles$2 = aphrodite.StyleSheet.create({
   input: {
     width: "100%",
     height: 40,
-    borderRadius: 4,
+    borderRadius: wonderBlocksTokens.border.radius.medium_4,
     boxSizing: "border-box",
     paddingLeft: wonderBlocksTokens.spacing.medium_16,
-    margin: 0,
-    outline: "none",
-    boxShadow: "none"
+    margin: 0
   },
   default: {
     background: wonderBlocksTokens.color.white,
@@ -768,12 +769,23 @@ const styles$2 = aphrodite.StyleSheet.create({
       color: wonderBlocksTokens.color.offBlack64
     }
   },
+  defaultFocus: {
+    ":focus-visible": {
+      borderColor: wonderBlocksTokens.color.blue,
+      outline: `1px solid ${wonderBlocksTokens.color.blue}`,
+      outlineOffset: "-2px"
+    }
+  },
   error: {
     background: wonderBlocksTokens.color.fadedRed8,
     border: `1px solid ${wonderBlocksTokens.color.red}`,
     color: wonderBlocksTokens.color.offBlack,
     "::placeholder": {
       color: wonderBlocksTokens.color.offBlack64
+    },
+    ":focus-visible": {
+      outlineColor: wonderBlocksTokens.color.red,
+      borderColor: wonderBlocksTokens.color.red
     }
   },
   disabled: {
@@ -781,22 +793,56 @@ const styles$2 = aphrodite.StyleSheet.create({
     border: `1px solid ${wonderBlocksTokens.color.offBlack16}`,
     color: wonderBlocksTokens.color.offBlack64,
     "::placeholder": {
-      color: wonderBlocksTokens.color.offBlack32
+      color: wonderBlocksTokens.color.offBlack64
+    },
+    cursor: "not-allowed",
+    ":focus-visible": {
+      outline: `2px solid ${wonderBlocksTokens.color.offBlack32}`,
+      outlineOffset: "-3px"
     }
   },
-  focused: {
+  light: {
     background: wonderBlocksTokens.color.white,
-    border: `1px solid ${wonderBlocksTokens.color.blue}`,
+    border: `1px solid ${wonderBlocksTokens.color.offBlack16}`,
     color: wonderBlocksTokens.color.offBlack,
     "::placeholder": {
       color: wonderBlocksTokens.color.offBlack64
     }
   },
-  defaultLight: {
-    boxShadow: `0px 0px 0px 1px ${wonderBlocksTokens.color.blue}, 0px 0px 0px 2px ${wonderBlocksTokens.color.white}`
+  lightFocus: {
+    ":focus-visible": {
+      outline: `3px solid ${wonderBlocksTokens.color.blue}`,
+      outlineOffset: "-4px",
+      borderColor: wonderBlocksTokens.color.white
+    }
+  },
+  lightDisabled: {
+    backgroundColor: "transparent",
+    border: `1px solid ${wonderBlocksTokens.color.white32}`,
+    color: wonderBlocksTokens.color.white64,
+    "::placeholder": {
+      color: wonderBlocksTokens.color.white64
+    },
+    cursor: "not-allowed",
+    ":focus-visible": {
+      borderColor: wonderBlocksTokens.mix(wonderBlocksTokens.color.white32, wonderBlocksTokens.color.blue),
+      outline: `3px solid ${wonderBlocksTokens.color.fadedBlue}`,
+      outlineOffset: "-4px"
+    }
   },
-  errorLight: {
-    boxShadow: `0px 0px 0px 1px ${wonderBlocksTokens.color.red}, 0px 0px 0px 2px ${wonderBlocksTokens.color.white}`
+  lightError: {
+    background: wonderBlocksTokens.color.fadedRed8,
+    border: `1px solid ${wonderBlocksTokens.color.white}`,
+    outline: `2px solid ${wonderBlocksTokens.color.red}`,
+    outlineOffset: "-3px",
+    color: wonderBlocksTokens.color.offBlack,
+    "::placeholder": {
+      color: wonderBlocksTokens.color.offBlack64
+    },
+    ":focus-visible": {
+      outline: `3px solid ${wonderBlocksTokens.color.red}`,
+      outlineOffset: "-4px"
+    }
   }
 });
 var TextField$1 = React__namespace.forwardRef((props, ref) => React__namespace.createElement(TextField, _extends__default["default"]({}, props, {
@@ -1092,7 +1138,7 @@ const TextArea = React__namespace.forwardRef(function TextArea(props, ref) {
     "data-testid": testId,
     ref: ref,
     className: className,
-    style: [...getStyles(), style],
+    style: [getStyles(), style],
     value: value,
     onChange: handleChange,
     placeholder: placeholder,
@@ -1136,7 +1182,7 @@ const styles = aphrodite.StyleSheet.create({
     ":focus-visible": {
       borderColor: wonderBlocksTokens.color.blue,
       outline: `1px solid ${wonderBlocksTokens.color.blue}`,
-      outlineOffset: 0
+      outlineOffset: "-2px"
     }
   },
   disabled: {
@@ -1148,8 +1194,8 @@ const styles = aphrodite.StyleSheet.create({
     },
     cursor: "not-allowed",
     ":focus-visible": {
-      outline: "none",
-      boxShadow: `0 0 0 1px ${wonderBlocksTokens.color.white}, 0 0 0 3px ${wonderBlocksTokens.color.offBlack32}`
+      outline: `2px solid ${wonderBlocksTokens.color.offBlack32}`,
+      outlineOffset: "-3px"
     }
   },
   error: {
@@ -1174,10 +1220,9 @@ const styles = aphrodite.StyleSheet.create({
   },
   lightFocus: {
     ":focus-visible": {
-      outline: `1px solid ${wonderBlocksTokens.color.blue}`,
-      outlineOffset: 0,
-      borderColor: wonderBlocksTokens.color.blue,
-      boxShadow: `0px 0px 0px 2px ${wonderBlocksTokens.color.blue}, 0px 0px 0px 3px ${wonderBlocksTokens.color.white}`
+      outline: `3px solid ${wonderBlocksTokens.color.blue}`,
+      outlineOffset: "-4px",
+      borderColor: wonderBlocksTokens.color.white
     }
   },
   lightDisabled: {
@@ -1190,22 +1235,22 @@ const styles = aphrodite.StyleSheet.create({
     cursor: "not-allowed",
     ":focus-visible": {
       borderColor: wonderBlocksTokens.mix(wonderBlocksTokens.color.white32, wonderBlocksTokens.color.blue),
-      outline: "none",
-      boxShadow: `0 0 0 1px ${wonderBlocksTokens.color.offBlack32}, 0 0 0 3px ${wonderBlocksTokens.color.fadedBlue}`
+      outline: `3px solid ${wonderBlocksTokens.color.fadedBlue}`,
+      outlineOffset: "-4px"
     }
   },
   lightError: {
     background: wonderBlocksTokens.color.fadedRed8,
-    border: `1px solid ${wonderBlocksTokens.color.red}`,
-    boxShadow: `0px 0px 0px 1px ${wonderBlocksTokens.color.red}, 0px 0px 0px 2px ${wonderBlocksTokens.color.white}`,
+    border: `1px solid ${wonderBlocksTokens.color.white}`,
+    outline: `2px solid ${wonderBlocksTokens.color.red}`,
+    outlineOffset: "-3px",
     color: wonderBlocksTokens.color.offBlack,
     "::placeholder": {
       color: wonderBlocksTokens.color.offBlack64
     },
     ":focus-visible": {
-      outlineColor: wonderBlocksTokens.color.red,
-      borderColor: wonderBlocksTokens.color.red,
-      boxShadow: `0px 0px 0px 2px ${wonderBlocksTokens.color.red}, 0px 0px 0px 3px ${wonderBlocksTokens.color.white}`
+      outline: `3px solid ${wonderBlocksTokens.color.red}`,
+      outlineOffset: "-4px"
     }
   }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-form",
-  "version": "4.9.2",
+  "version": "4.9.4",
   "design": "v1",
   "description": "Form components for Wonder Blocks.",
   "main": "dist/index.js",
@@ -16,12 +16,12 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-clickable": "^4.2.7",
-    "@khanacademy/wonder-blocks-core": "^7.0.0",
-    "@khanacademy/wonder-blocks-icon": "^4.1.4",
-    "@khanacademy/wonder-blocks-layout": "^2.2.0",
-    "@khanacademy/wonder-blocks-tokens": "^2.0.0",
-    "@khanacademy/wonder-blocks-typography": "^2.1.15"
+    "@khanacademy/wonder-blocks-clickable": "^4.2.8",
+    "@khanacademy/wonder-blocks-core": "^7.0.1",
+    "@khanacademy/wonder-blocks-icon": "^4.1.5",
+    "@khanacademy/wonder-blocks-layout": "^2.2.1",
+    "@khanacademy/wonder-blocks-tokens": "^2.0.1",
+    "@khanacademy/wonder-blocks-typography": "^2.1.16"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",

package/src/__tests__/__snapshots__/custom-snapshot.test.tsx.snap

@@ -1,247 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CheckboxCore type:default checked:false 1`] = `
-<div>
-  <input
-    aria-checked="false"
-    aria-invalid="false"
-    class=""
-    style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 3px; background-color: rgb(255, 255, 255); border-color: rgba(33,36,44,0.50);"
-    type="checkbox"
-  />
-</div>
-`;
-
-exports[`CheckboxCore type:default checked:null 1`] = `
-<div>
-  <input
-    aria-checked="mixed"
-    aria-invalid="false"
-    class=""
-    style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 0px; border-radius: 3px; background-color: rgb(24, 101, 242);"
-    type="checkbox"
-  />
-  <span
-    class=""
-    style="display: inline-block; vertical-align: text-bottom; flex-shrink: 0; flex-grow: 0; mask-size: 100%; mask-repeat: no-repeat; mask-position: center; background-color: rgb(255, 255, 255); width: 12px; height: 12px; mask-image: url(minus-bold.svg); position: absolute; pointer-events: none; margin: 2px;"
-  />
-</div>
-`;
-
-exports[`CheckboxCore type:default checked:true 1`] = `
-<div>
-  <input
-    aria-checked="true"
-    aria-invalid="false"
-    checked=""
-    class=""
-    style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 0px; border-radius: 3px; background-color: rgb(24, 101, 242);"
-    type="checkbox"
-  />
-  <span
-    class=""
-    style="display: inline-block; vertical-align: text-bottom; flex-shrink: 0; flex-grow: 0; mask-size: 100%; mask-repeat: no-repeat; mask-position: center; background-color: rgb(255, 255, 255); width: 12px; height: 12px; mask-image: url(check-bold.svg); position: absolute; pointer-events: none; margin: 2px;"
-  />
-</div>
-`;
-
-exports[`CheckboxCore type:disabled checked:false 1`] = `
-<div>
-  <input
-    aria-checked="false"
-    aria-invalid="false"
-    class=""
-    disabled=""
-    style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 3px; cursor: auto; background-color: rgb(247, 248, 250); border-color: rgba(33,36,44,0.16);"
-    type="checkbox"
-  />
-</div>
-`;
-
-exports[`CheckboxCore type:disabled checked:null 1`] = `
-<div>
-  <input
-    aria-checked="mixed"
-    aria-invalid="false"
-    class=""
-    disabled=""
-    style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 3px; cursor: auto; background-color: rgb(247, 248, 250); border-color: rgba(33,36,44,0.16);"
-    type="checkbox"
-  />
-  <span
-    class=""
-    style="display: inline-block; vertical-align: text-bottom; flex-shrink: 0; flex-grow: 0; mask-size: 100%; mask-repeat: no-repeat; mask-position: center; background-color: rgba(33, 36, 44, 0.32); width: 12px; height: 12px; mask-image: url(minus-bold.svg); position: absolute; pointer-events: none; margin: 2px;"
-  />
-</div>
-`;
-
-exports[`CheckboxCore type:disabled checked:true 1`] = `
-<div>
-  <input
-    aria-checked="true"
-    aria-invalid="false"
-    checked=""
-    class=""
-    disabled=""
-    style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 3px; cursor: auto; background-color: rgb(247, 248, 250); border-color: rgba(33,36,44,0.16);"
-    type="checkbox"
-  />
-  <span
-    class=""
-    style="display: inline-block; vertical-align: text-bottom; flex-shrink: 0; flex-grow: 0; mask-size: 100%; mask-repeat: no-repeat; mask-position: center; background-color: rgba(33, 36, 44, 0.32); width: 12px; height: 12px; mask-image: url(check-bold.svg); position: absolute; pointer-events: none; margin: 2px;"
-  />
-</div>
-`;
-
-exports[`CheckboxCore type:error checked:false 1`] = `
-<div>
-  <input
-    aria-checked="false"
-    aria-invalid="true"
-    class=""
-    style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 3px; background-color: rgb(252, 238, 236); border-color: #d92916;"
-    type="checkbox"
-  />
-</div>
-`;
-
-exports[`CheckboxCore type:error checked:null 1`] = `
-<div>
-  <input
-    aria-checked="mixed"
-    aria-invalid="true"
-    class=""
-    style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 0px; border-radius: 3px; background-color: rgb(217, 41, 22);"
-    type="checkbox"
-  />
-  <span
-    class=""
-    style="display: inline-block; vertical-align: text-bottom; flex-shrink: 0; flex-grow: 0; mask-size: 100%; mask-repeat: no-repeat; mask-position: center; background-color: rgb(255, 255, 255); width: 12px; height: 12px; mask-image: url(minus-bold.svg); position: absolute; pointer-events: none; margin: 2px;"
-  />
-</div>
-`;
-
-exports[`CheckboxCore type:error checked:true 1`] = `
-<div>
-  <input
-    aria-checked="true"
-    aria-invalid="true"
-    checked=""
-    class=""
-    style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 0px; border-radius: 3px; background-color: rgb(217, 41, 22);"
-    type="checkbox"
-  />
-  <span
-    class=""
-    style="display: inline-block; vertical-align: text-bottom; flex-shrink: 0; flex-grow: 0; mask-size: 100%; mask-repeat: no-repeat; mask-position: center; background-color: rgb(255, 255, 255); width: 12px; height: 12px; mask-image: url(check-bold.svg); position: absolute; pointer-events: none; margin: 2px;"
-  />
-</div>
-`;
-
-exports[`RadioCore type:default checked:false 1`] = `
-<div>
-  <input
-    aria-invalid="false"
-    class=""
-    style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 50%; background-color: rgb(255, 255, 255); border-color: rgba(33,36,44,0.50);"
-    type="radio"
-  />
-</div>
-`;
-
-exports[`RadioCore type:default checked:null 1`] = `
-<div>
-  <input
-    aria-invalid="false"
-    class=""
-    style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 50%; background-color: rgb(255, 255, 255); border-color: rgba(33,36,44,0.50);"
-    type="radio"
-  />
-</div>
-`;
-
-exports[`RadioCore type:default checked:true 1`] = `
-<div>
-  <input
-    aria-invalid="false"
-    checked=""
-    class=""
-    style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 4px; border-radius: 50%; background-color: rgb(255, 255, 255); border-color: #1865f2;"
-    type="radio"
-  />
-</div>
-`;
-
-exports[`RadioCore type:disabled checked:false 1`] = `
-<div>
-  <input
-    aria-invalid="false"
-    class=""
-    disabled=""
-    style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 50%; cursor: auto; background-color: rgb(247, 248, 250); border-color: rgba(33,36,44,0.16);"
-    type="radio"
-  />
-</div>
-`;
-
-exports[`RadioCore type:disabled checked:null 1`] = `
-<div>
-  <input
-    aria-invalid="false"
-    class=""
-    disabled=""
-    style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 50%; cursor: auto; background-color: rgb(247, 248, 250); border-color: rgba(33,36,44,0.16);"
-    type="radio"
-  />
-</div>
-`;
-
-exports[`RadioCore type:disabled checked:true 1`] = `
-<div>
-  <input
-    aria-invalid="false"
-    checked=""
-    class=""
-    disabled=""
-    style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 50%; cursor: auto; background-color: rgb(247, 248, 250); border-color: rgba(33,36,44,0.16);"
-    type="radio"
-  />
-  <span
-    style="position: absolute; top: 4px; left: 4px; height: 8px; width: 8px; border-radius: 50%; background-color: rgba(33, 36, 44, 0.32);"
-  />
-</div>
-`;
-
-exports[`RadioCore type:error checked:false 1`] = `
-<div>
-  <input
-    aria-invalid="true"
-    class=""
-    style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 50%; background-color: rgb(252, 238, 236); border-color: #d92916;"
-    type="radio"
-  />
-</div>
-`;
-
-exports[`RadioCore type:error checked:null 1`] = `
-<div>
-  <input
-    aria-invalid="true"
-    class=""
-    style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 50%; background-color: rgb(252, 238, 236); border-color: #d92916;"
-    type="radio"
-  />
-</div>
-`;
-
-exports[`RadioCore type:error checked:true 1`] = `
-<div>
-  <input
-    aria-invalid="true"
-    checked=""
-    class=""
-    style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 4px; border-radius: 50%; background-color: rgb(255, 255, 255); border-color: #d92916;"
-    type="radio"
-  />
-</div>
-`;

package/src/__tests__/custom-snapshot.test.tsx

@@ -1,48 +0,0 @@
-import * as React from "react";
-import {render} from "@testing-library/react";
-
-import CheckboxCore from "../components/checkbox-core";
-import RadioCore from "../components/radio-core";
-
-const states = ["default", "error", "disabled"];
-const checkedStates = [false, true, null];
-
-describe("CheckboxCore", () => {
-    states.forEach((state: any) => {
-        checkedStates.forEach((checked: any) => {
-            test(`type:${state} checked:${String(checked)}`, () => {
-                const disabled = state === "disabled";
-                const {container} = render(
-                    <CheckboxCore
-                        checked={checked}
-                        disabled={disabled}
-                        error={state === "error"}
-                        onClick={() => {}}
-                    />,
-                );
-
-                expect(container).toMatchSnapshot();
-            });
-        });
-    });
-});
-
-describe("RadioCore", () => {
-    states.forEach((state: any) => {
-        checkedStates.forEach((checked: any) => {
-            test(`type:${state} checked:${String(checked)}`, () => {
-                const disabled = state === "disabled";
-                const {container} = render(
-                    <RadioCore
-                        checked={checked}
-                        disabled={disabled}
-                        error={state === "error"}
-                        onClick={() => {}}
-                    />,
-                );
-
-                expect(container).toMatchSnapshot();
-            });
-        });
-    });
-});