fix(Group): move to css sizes

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

@@ -27,13 +27,16 @@
   }
 }
 
-/* ////////////////////////////////////////////////// */
-
 .Group__separator--spacing,
 .Group__separator--separator {
   display: none;
 }
 
+.Group__separator--spacing {
+  position: relative;
+  box-sizing: border-box;
+}
+
 /* stylelint-disable-next-line selector-max-universal */
 .Group--mode-plain + * + .Group__separator--separator {
   display: block;
@@ -48,11 +51,31 @@
 
 .Group--mode-card + .Group__separator--spacing {
   display: block;
+  block-size: 16px;
+  padding-block: 8px;
+  padding-inline: 0;
+}
+
+.Group--sizeX-compact.Group--mode-card + .Group__separator--spacing {
+  display: block;
+  block-size: 8px;
+  padding-block: 4px;
+  padding-inline: 0;
 }
 
 @media (--sizeX-regular) {
   .Group--sizeX-none.Group--mode-none + .Group__separator--spacing {
     display: block;
+    block-size: 16px;
+    padding-block: 8px;
+    padding-inline: 0;
+  }
+}
+@media (--sizeX-compact) {
+  .Group--sizeX-none.Group--mode-card + .Group__separator--spacing {
+    block-size: 8px;
+    padding-block: 4px;
+    padding-inline: 0;
   }
 }
 
@@ -71,8 +94,6 @@
   }
 }
 
-/* ////////////////////////////////////////////////// */
-
 .Group--mode-card.Group--padding-s {
   padding: 4px;
 }
@@ -188,13 +209,11 @@
 }
 
 .Group--mode-plain + .Group__separator + .Group__separator {
-  /* Это отступы когда layout=plain между группами и сепариком вннутри группы в группе ПЕРВОЕ ПРАВИЛО БЕСПОЛЕЗНО */
   padding-block: 8px;
 }
 
 @media (--sizeX-compact) {
   .Group--sizeX-none.Group--mode-none + .Group__separator + .Group__separator {
-    /* Это отступы когда layout=undefined между группами и сепариком вннутри группы в группе ПЕРВОЕ ПРАВИЛО БЕСПОЛЗЕНО */
     padding-block: 8px;
   }
 }
@@ -207,7 +226,6 @@
 }
 
 .Group .Group {
-  /* первое правило бесполезно, потому что всегда применяется к спэйсу, у которого через style задается отступ */
   padding-inline: 0;
 }
 

packages/vkui/src/components/Group/Group.tsx

@@ -1,15 +1,13 @@
 import * as React from 'react';
 import { classNames, hasReactNode } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
-import { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';
 import { SizeTypeValues } from '../../lib/adaptivity';
 import { warnOnce } from '../../lib/warnOnce';
 import { HTMLAttributesWithRootRef } from '../../types';
 import { AppRootContext } from '../AppRoot/AppRootContext';
 import { ModalRootContext } from '../ModalRoot/ModalRootContext';
 import { RootComponent } from '../RootComponent/RootComponent';
 import { Separator } from '../Separator/Separator';
-import { Spacing } from '../Spacing/Spacing';
 import { Footnote } from '../Typography/Footnote/Footnote';
 import styles from './Group.module.css';
 
@@ -96,7 +94,6 @@ export const Group = ({
 }: GroupProps) => {
   const { isInsideModal } = React.useContext(ModalRootContext);
   const { sizeX = 'none' } = useAdaptivity();
-  const { sizeX: adaptiveSizeX } = useAdaptivityConditionalRender();
 
   const mode = useGroupMode(modeProps, sizeX, isInsideModal);
 
@@ -140,14 +137,7 @@ export const Group = ({
         <React.Fragment>
           <div
             className={classNames(styles['Group__separator'], styles['Group__separator--spacing'])}
-          >
-            {adaptiveSizeX.compact && (
-              <Spacing className={adaptiveSizeX.compact.className} size={8} />
-            )}
-            {adaptiveSizeX.regular && (
-              <Spacing className={adaptiveSizeX.regular.className} size={16} />
-            )}
-          </div>
+          />
           <Separator
             className={classNames(
               styles['Group__separator'],