fix(Checkbox): simple width

packages/vkui/src/components/Checkbox/Checkbox.e2e-playground.tsx

@@ -7,22 +7,24 @@ import {
 } from '@vkui-e2e/playground-helpers';
 import { Checkbox, type CheckboxProps } from './Checkbox';
 
-const baseRender = ({ children = 'label', ...restProps }: CheckboxProps) => (
-  <Checkbox {...restProps}>{children}</Checkbox>
-);
+const baseRender = (props: CheckboxProps) => <Checkbox {...props} />;
 
 export const CheckboxPlayground = (props: ComponentPlaygroundProps) => {
   return (
     <ComponentPlayground
       {...props}
       propSets={[
         {
+          children: ['label'],
           checked: [false, true],
           disabled: [undefined, true],
+          $adaptivity: 'y',
         },
         {
+          children: ['label'],
           indeterminate: [true],
           disabled: [undefined, true],
+          $adaptivity: 'y',
         },
       ]}
     >

packages/vkui/src/components/Checkbox/Checkbox.module.css

@@ -95,6 +95,28 @@
   opacity: var(--vkui--opacity_disable_accessibility);
 }
 
+/**
+ * simple
+ */
+
+.Checkbox--simple {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  border-radius: 50%;
+  width: var(--vkui--size_field_height--regular);
+  height: var(--vkui--size_field_height--regular);
+}
+
+.Checkbox--simple .Checkbox__content {
+  display: none;
+}
+
+.Checkbox--simple .Checkbox__icon {
+  margin: 0;
+}
+
 /**
  * sizeY COMPACT
  */
@@ -104,6 +126,11 @@
   min-height: var(--vkui--size_field_height--compact);
 }
 
+.Checkbox--sizeY-compact.Checkbox--simple {
+  width: var(--vkui--size_field_height--compact);
+  height: var(--vkui--size_field_height--compact);
+}
+
 .Checkbox--sizeY-compact .Checkbox__title {
   margin-top: 8px;
 }
@@ -122,6 +149,11 @@
     min-height: var(--vkui--size_field_height--compact);
   }
 
+  .Checkbox--sizeY-none.Checkbox--simple {
+    width: var(--vkui--size_field_height--compact);
+    height: var(--vkui--size_field_height--compact);
+  }
+
   .Checkbox--sizeY-none .Checkbox__title {
     margin-top: 8px;
   }
@@ -134,19 +166,3 @@
     margin-bottom: 8px;
   }
 }
-
-.Checkbox--simple {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 0;
-  border-radius: 50%;
-}
-
-.Checkbox--simple .Checkbox__content {
-  display: none;
-}
-
-.Checkbox--simple .Checkbox__icon {
-  margin: 0;
-}