@vkontakte/vkui 5.3.2 → 5.4.0

package/dist/cssm/components/FormItem/FormItem.module.css

@@ -1 +1,104 @@
-.vkuiFormItem{display:block;padding:12px 16px;padding:var(--vkui--size_form_item_padding_vertical--regular) var(--vkui--size_base_padding_horizontal--regular)}.vkuiFormItem--removable{padding-left:0;padding-right:0}.vkuiFormItem__removable{flex-basis:0;flex-grow:1;flex-shrink:0;max-width:100%;min-width:1px;overflow:hidden;padding:0}.vkuiFormItem__top{color:#6d7885;color:var(--vkui--color_text_subhead);overflow:hidden;padding-bottom:8px;padding-top:2px;text-overflow:ellipsis;white-space:nowrap}.vkuiFormItem__bottom{color:#818c99;color:var(--vkui--color_text_secondary);padding-top:8px}.vkuiFormItem--status-error .vkuiFormItem__bottom{color:#e64646;color:var(--vkui--color_text_negative)}.vkuiFormItem--status-valid .vkuiFormItem__bottom,.vkuiFormItem--verified .vkuiFormItem__bottom{color:#4bb34b;color:var(--vkui--color_text_positive)}.vkuiFormItem--sizeY-compact .vkuiFormItem__top{padding-bottom:6px}.vkuiFormItem--sizeY-compact .vkuiFormItem__bottom{padding-top:6px}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiFormItem--sizeY-none .vkuiFormItem__top{padding-bottom:6px}.vkuiFormItem--sizeY-none .vkuiFormItem__bottom{padding-top:6px}}.vkuiInternalFormLayoutGroup--mode-horizontal .vkuiFormItem{flex-basis:0;flex-grow:1;flex-shrink:0;max-width:100%;min-width:1px;padding:0}.vkuiInternalFormLayoutGroup--mode-horizontal:not(.vkuiInternalFormLayoutGroup--segmented) .vkuiFormItem+.vkuiFormItem{margin-left:24px}.vkuiFormItem--withTop .vkuiFormItem__removable,.vkuiInternalFormLayoutGroup--mode-horizontal .vkuiFormItem--withTop{margin-top:calc(-2px - 18px - 8px);margin-top:calc(-2px - var(--vkui--font_subhead--line_height--regular) - 8px)}.vkuiFormItem--sizeY-compact.vkuiFormItem--withTop .vkuiFormItem__removable,.vkuiInternalFormLayoutGroup--mode-horizontal .vkuiFormItem--sizeY-compact.vkuiFormItem--withTop{margin-top:calc(-2px - 16px - 6px);margin-top:calc(-2px - var(--vkui--font_subhead--line_height--compact) - 6px)}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiFormItem--sizeY-none.vkuiFormItem--withTop .vkuiFormItem__removable,.vkuiInternalFormLayoutGroup--mode-horizontal .vkuiFormItem--sizeY-none.vkuiFormItem--withTop{margin-top:calc(-2px - 16px - 6px);margin-top:calc(-2px - var(--vkui--font_subhead--line_height--compact) - 6px)}}
+.FormItem {
+  display: block;
+  padding: var(--vkui--size_form_item_padding_vertical--regular)
+    var(--vkui--size_base_padding_horizontal--regular);
+}
+
+.FormItem--removable {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.FormItem__removable {
+  max-width: 100%;
+  flex-grow: 1;
+  flex-shrink: 0;
+  flex-basis: 0;
+  padding: 0;
+  min-width: 1px;
+  overflow: hidden;
+}
+
+.FormItem__top {
+  padding-top: 2px;
+  padding-bottom: 8px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: var(--vkui--color_text_subhead);
+}
+
+.FormItem__bottom {
+  color: var(--vkui--color_text_secondary);
+  padding-top: 8px;
+}
+
+.FormItem--status-error .FormItem__bottom {
+  color: var(--vkui--color_text_negative);
+}
+
+.FormItem--status-valid .FormItem__bottom,
+.FormItem--verified .FormItem__bottom {
+  color: var(--vkui--color_text_positive);
+}
+
+/**
+ * sizeY COMPACT
+ */
+
+.FormItem--sizeY-compact .FormItem__top {
+  padding-bottom: 6px;
+}
+
+.FormItem--sizeY-compact .FormItem__bottom {
+  padding-top: 6px;
+}
+
+@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
+  .FormItem--sizeY-none .FormItem__top {
+    padding-bottom: 6px;
+  }
+
+  .FormItem--sizeY-none .FormItem__bottom {
+    padding-top: 6px;
+  }
+}
+
+/**
+ * CMP:
+ * FormLayoutGroup
+ */
+
+:global(.vkuiInternalFormLayoutGroup--mode-horizontal) .FormItem {
+  max-width: 100%;
+  flex-grow: 1;
+  flex-shrink: 0;
+  flex-basis: 0;
+  padding: 0;
+  min-width: 1px;
+}
+
+:global(.vkuiInternalFormLayoutGroup--mode-horizontal):not(
+    :global(.vkuiInternalFormLayoutGroup--segmented)
+  )
+  .FormItem
+  + .FormItem {
+  margin-left: 24px;
+}
+
+.FormItem--withTop .FormItem__removable,
+:global(.vkuiInternalFormLayoutGroup--mode-horizontal) .FormItem--withTop {
+  margin-top: calc(-2px - var(--vkui--font_subhead--line_height--regular) - 8px);
+}
+
+.FormItem--sizeY-compact.FormItem--withTop .FormItem__removable,
+:global(.vkuiInternalFormLayoutGroup--mode-horizontal) .FormItem--sizeY-compact.FormItem--withTop {
+  margin-top: calc(-2px - var(--vkui--font_subhead--line_height--compact) - 6px);
+}
+
+@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
+  .FormItem--sizeY-none.FormItem--withTop .FormItem__removable,
+  :global(.vkuiInternalFormLayoutGroup--mode-horizontal) .FormItem--sizeY-none.FormItem--withTop {
+    margin-top: calc(-2px - var(--vkui--font_subhead--line_height--compact) - 6px);
+  }
+}

package/dist/cssm/components/FormLayout/FormLayout.module.css

@@ -1 +1,18 @@
-.vkuiFormLayout{position:relative}.vkuiFormLayout__submit{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;height:0;left:0;padding:0;pointer-events:none;position:absolute;top:0;visibility:hidden;width:0}
+.FormLayout {
+  position: relative;
+}
+
+.FormLayout__submit {
+  position: absolute;
+  visibility: hidden;
+  pointer-events: none;
+  left: 0;
+  top: 0;
+  padding: 0;
+  width: 0;
+  height: 0;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  border: none;
+}

package/dist/cssm/components/FormLayoutGroup/FormLayoutGroup.d.ts

@@ -5,8 +5,10 @@ export interface FormLayoutGroupProps extends React.HTMLAttributes<HTMLDivElemen
     mode?: 'vertical' | 'horizontal';
     /**
      * Только для режима horizontal. Дает возможность удалить всю группу `FormItem`.
+     *
+     * Режим `indent` предназначен для визуального отступа.
      */
-    removable?: boolean;
+    removable?: boolean | 'indent';
     /**
      * Только для режима horizontal. Дает возможность склеить несколько `FormItem`.
      */

package/dist/cssm/components/FormLayoutGroup/FormLayoutGroup.js

@@ -28,7 +28,8 @@ const sizeYClassNames = {
             if (rootEl?.current) {
                 onRemove(e, rootEl.current);
             }
-        }
+        },
+        indent: removable === 'indent'
     }, children) : /*#__PURE__*/ React.createElement(React.Fragment, null, children, /*#__PURE__*/ React.createElement("span", {
         className: styles['FormLayoutGroup__offset'],
         "aria-hidden": true

package/dist/cssm/components/FormLayoutGroup/FormLayoutGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/FormLayoutGroup/FormLayoutGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasRootRef } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport styles from './FormLayoutGroup.module.css';\n\nconst sizeYClassNames = {\n  none: classNames(\n    styles['FormLayoutGroup--sizeY-none'],\n    'vkuiInternalFormLayoutGroup--sizeY-none',\n  ),\n  [SizeType.COMPACT]: classNames(\n    styles['FormLayoutGroup--sizeY-compact'],\n    'vkuiInternalFormLayoutGroup--sizeY-compact',\n  ),\n};\n\nexport interface FormLayoutGroupProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    RemovableProps,\n    HasRootRef<HTMLDivElement> {\n  mode?: 'vertical' | 'horizontal';\n  /**\n   * Только для режима horizontal. Дает возможность удалить всю группу `FormItem`.\n   */\n  removable?: boolean;\n\n  /**\n   * Только для режима horizontal. Дает возможность склеить несколько `FormItem`.\n   */\n  segmented?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormLayoutGroup\n */\nexport const FormLayoutGroup = ({\n  children,\n  mode = 'vertical',\n  removable,\n  segmented,\n  removePlaceholder = 'Удалить',\n  onRemove = noop,\n  getRootRef,\n  className,\n  ...restProps\n}: FormLayoutGroupProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const isRemovable = removable && mode === 'horizontal';\n  const isSegmented = segmented && mode === 'horizontal';\n  const rootEl = useExternRef(getRootRef);\n\n  return (\n    <div\n      ref={rootEl}\n      className={classNames(\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        mode === 'horizontal' &&\n          classNames(\n            styles['FormLayoutGroup--mode-horizontal'],\n            'vkuiInternalFormLayoutGroup--mode-horizontal',\n          ),\n        isRemovable &&\n          classNames(\n            styles['FormLayoutGroup--removable'],\n            'vkuiInternalFormLayoutGroup--removable',\n          ),\n        isSegmented &&\n          classNames(\n            styles['FormLayoutGroup--segmented'],\n            'vkuiInternalFormLayoutGroup--segmented',\n          ),\n        className,\n      )}\n      {...restProps}\n    >\n      {isRemovable ? (\n        <Removable\n          className={styles['FormLayoutGroup__removable']}\n          align=\"start\"\n          removePlaceholder={removePlaceholder}\n          onRemove={(e) => {\n            if (rootEl?.current) {\n              onRemove(e, rootEl.current);\n            }\n          }}\n        >\n          {children}\n        </Removable>\n      ) : (\n        <React.Fragment>\n          {children}\n          <span className={styles['FormLayoutGroup__offset']} aria-hidden />\n        </React.Fragment>\n      )}\n    </div>\n  );\n};\n"],"names":["React","classNames","noop","useAdaptivity","useExternRef","SizeType","Removable","styles","sizeYClassNames","none","COMPACT","FormLayoutGroup","children","mode","removable","segmented","removePlaceholder","onRemove","getRootRef","className","restProps","sizeY","isRemovable","isSegmented","rootEl","div","ref","REGULAR","align","e","current","Fragment","span","aria-hidden"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,IAAI,QAAQ,kBAAkB;AACnD,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,SAAS,QAAwB,yBAAyB;AACnE,OAAOC,YAAY,+BAA+B;AAElD,MAAMC,kBAAkB;IACtBC,MAAMR,WACJM,MAAM,CAAC,8BAA8B,EACrC;IAEF,CAACF,SAASK,OAAO,CAAC,EAAET,WAClBM,MAAM,CAAC,iCAAiC,EACxC;AAEJ;AAkBA;;CAEC,GACD,OAAO,MAAMI,kBAAkB,CAAC,EAC9BC,SAAQ,EACRC,MAAO,WAAU,EACjBC,UAAS,EACTC,UAAS,EACTC,mBAAoB,UAAS,EAC7BC,UAAWf,KAAI,EACfgB,WAAU,EACVC,UAAS,EACT,GAAGC,WACkB,GAAK;IAC1B,MAAM,EAAEC,OAAQ,OAAM,EAAE,GAAGlB;IAC3B,MAAMmB,cAAcR,aAAaD,SAAS;IAC1C,MAAMU,cAAcR,aAAaF,SAAS;IAC1C,MAAMW,SAASpB,aAAac;IAE5B,qBACE,oBAACO;QACCC,KAAKF;QACLL,WAAWlB,WACToB,UAAUhB,SAASsB,OAAO,IAAInB,eAAe,CAACa,MAAM,EACpDR,SAAS,gBACPZ,WACEM,MAAM,CAAC,mCAAmC,EAC1C,iDAEJe,eACErB,WACEM,MAAM,CAAC,6BAA6B,EACpC,2CAEJgB,eACEtB,WACEM,MAAM,CAAC,6BAA6B,EACpC,2CAEJY;QAED,GAAGC,SAAS;OAEZE,4BACC,oBAAChB;QACCa,WAAWZ,MAAM,CAAC,6BAA6B;QAC/CqB,OAAM;QACNZ,mBAAmBA;QACnBC,UAAU,CAACY,IAAM;YACf,IAAIL,QAAQM,SAAS;gBACnBb,SAASY,GAAGL,OAAOM,OAAO;YAC5B,CAAC;QACH;OAEClB,0BAGH,oBAACZ,MAAM+B,QAAQ,QACZnB,wBACD,oBAACoB;QAAKb,WAAWZ,MAAM,CAAC,0BAA0B;QAAE0B,eAAAA,IAAW;OAElE;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/components/FormLayoutGroup/FormLayoutGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasRootRef } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport styles from './FormLayoutGroup.module.css';\n\nconst sizeYClassNames = {\n  none: classNames(\n    styles['FormLayoutGroup--sizeY-none'],\n    'vkuiInternalFormLayoutGroup--sizeY-none',\n  ),\n  [SizeType.COMPACT]: classNames(\n    styles['FormLayoutGroup--sizeY-compact'],\n    'vkuiInternalFormLayoutGroup--sizeY-compact',\n  ),\n};\n\nexport interface FormLayoutGroupProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    RemovableProps,\n    HasRootRef<HTMLDivElement> {\n  mode?: 'vertical' | 'horizontal';\n  /**\n   * Только для режима horizontal. Дает возможность удалить всю группу `FormItem`.\n   *\n   * Режим `indent` предназначен для визуального отступа.\n   */\n  removable?: boolean | 'indent';\n\n  /**\n   * Только для режима horizontal. Дает возможность склеить несколько `FormItem`.\n   */\n  segmented?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormLayoutGroup\n */\nexport const FormLayoutGroup = ({\n  children,\n  mode = 'vertical',\n  removable,\n  segmented,\n  removePlaceholder = 'Удалить',\n  onRemove = noop,\n  getRootRef,\n  className,\n  ...restProps\n}: FormLayoutGroupProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const isRemovable = removable && mode === 'horizontal';\n  const isSegmented = segmented && mode === 'horizontal';\n  const rootEl = useExternRef(getRootRef);\n\n  return (\n    <div\n      ref={rootEl}\n      className={classNames(\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        mode === 'horizontal' &&\n          classNames(\n            styles['FormLayoutGroup--mode-horizontal'],\n            'vkuiInternalFormLayoutGroup--mode-horizontal',\n          ),\n        isRemovable &&\n          classNames(\n            styles['FormLayoutGroup--removable'],\n            'vkuiInternalFormLayoutGroup--removable',\n          ),\n        isSegmented &&\n          classNames(\n            styles['FormLayoutGroup--segmented'],\n            'vkuiInternalFormLayoutGroup--segmented',\n          ),\n        className,\n      )}\n      {...restProps}\n    >\n      {isRemovable ? (\n        <Removable\n          className={styles['FormLayoutGroup__removable']}\n          align=\"start\"\n          removePlaceholder={removePlaceholder}\n          onRemove={(e) => {\n            if (rootEl?.current) {\n              onRemove(e, rootEl.current);\n            }\n          }}\n          indent={removable === 'indent'}\n        >\n          {children}\n        </Removable>\n      ) : (\n        <React.Fragment>\n          {children}\n          <span className={styles['FormLayoutGroup__offset']} aria-hidden />\n        </React.Fragment>\n      )}\n    </div>\n  );\n};\n"],"names":["React","classNames","noop","useAdaptivity","useExternRef","SizeType","Removable","styles","sizeYClassNames","none","COMPACT","FormLayoutGroup","children","mode","removable","segmented","removePlaceholder","onRemove","getRootRef","className","restProps","sizeY","isRemovable","isSegmented","rootEl","div","ref","REGULAR","align","e","current","indent","Fragment","span","aria-hidden"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,IAAI,QAAQ,kBAAkB;AACnD,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,SAAS,QAAwB,yBAAyB;AACnE,OAAOC,YAAY,+BAA+B;AAElD,MAAMC,kBAAkB;IACtBC,MAAMR,WACJM,MAAM,CAAC,8BAA8B,EACrC;IAEF,CAACF,SAASK,OAAO,CAAC,EAAET,WAClBM,MAAM,CAAC,iCAAiC,EACxC;AAEJ;AAoBA;;CAEC,GACD,OAAO,MAAMI,kBAAkB,CAAC,EAC9BC,SAAQ,EACRC,MAAO,WAAU,EACjBC,UAAS,EACTC,UAAS,EACTC,mBAAoB,UAAS,EAC7BC,UAAWf,KAAI,EACfgB,WAAU,EACVC,UAAS,EACT,GAAGC,WACkB,GAAK;IAC1B,MAAM,EAAEC,OAAQ,OAAM,EAAE,GAAGlB;IAC3B,MAAMmB,cAAcR,aAAaD,SAAS;IAC1C,MAAMU,cAAcR,aAAaF,SAAS;IAC1C,MAAMW,SAASpB,aAAac;IAE5B,qBACE,oBAACO;QACCC,KAAKF;QACLL,WAAWlB,WACToB,UAAUhB,SAASsB,OAAO,IAAInB,eAAe,CAACa,MAAM,EACpDR,SAAS,gBACPZ,WACEM,MAAM,CAAC,mCAAmC,EAC1C,iDAEJe,eACErB,WACEM,MAAM,CAAC,6BAA6B,EACpC,2CAEJgB,eACEtB,WACEM,MAAM,CAAC,6BAA6B,EACpC,2CAEJY;QAED,GAAGC,SAAS;OAEZE,4BACC,oBAAChB;QACCa,WAAWZ,MAAM,CAAC,6BAA6B;QAC/CqB,OAAM;QACNZ,mBAAmBA;QACnBC,UAAU,CAACY,IAAM;YACf,IAAIL,QAAQM,SAAS;gBACnBb,SAASY,GAAGL,OAAOM,OAAO;YAC5B,CAAC;QACH;QACAC,QAAQjB,cAAc;OAErBF,0BAGH,oBAACZ,MAAMgC,QAAQ,QACZpB,wBACD,oBAACqB;QAAKd,WAAWZ,MAAM,CAAC,0BAA0B;QAAE2B,eAAAA,IAAW;OAElE;AAGP,EAAE"}

package/dist/cssm/components/FormLayoutGroup/FormLayoutGroup.module.css

@@ -1 +1,61 @@
-.vkuiFormLayoutGroup--mode-horizontal{align-items:flex-start;display:flex;flex-wrap:wrap;isolation:isolate;padding:12px 16px;padding:var(--vkui--size_form_item_padding_vertical--regular) var(--vkui--size_base_padding_horizontal--regular)}.vkuiFormLayoutGroup__removable{flex-grow:1;max-width:100%;min-width:0}.vkuiFormLayoutGroup__offset{display:none}.vkuiFormLayoutGroup--mode-horizontal .vkuiInternalFormItem--withTop~.vkuiFormLayoutGroup__offset{display:block;height:calc(2px + 18px + 8px);height:calc(2px + var(--vkui--font_subhead--line_height--regular) + 8px);min-width:100%;order:-1}.vkuiFormLayoutGroup--sizeY-compact.vkuiFormLayoutGroup--mode-horizontal .vkuiInternalFormItem--withTop~.vkuiFormLayoutGroup__offset{height:calc(2px + 16px + 6px);height:calc(2px + var(--vkui--font_subhead--line_height--compact) + 6px)}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiFormLayoutGroup--sizeY-none.vkuiFormLayoutGroup--mode-horizontal .vkuiInternalFormItem--withTop~.vkuiFormLayoutGroup__offset{height:calc(2px + 16px + 6px);height:calc(2px + var(--vkui--font_subhead--line_height--compact) + 6px)}}.vkuiFormLayoutGroup--removable{padding-left:0;padding-right:0}.vkuiFormLayoutGroup--segmented{position:relative}.vkuiFormLayoutGroup--segmented>*{flex:1;min-width:0}.vkuiFormLayoutGroup--segmented>:not(:first-child):not(.vkuiFormLayoutGroup__offset){margin-left:calc(-1 * 1px);margin-left:calc(-1 * var(--vkui_internal--thin_border))}
+.FormLayoutGroup--mode-horizontal {
+  display: flex;
+  padding: var(--vkui--size_form_item_padding_vertical--regular)
+    var(--vkui--size_base_padding_horizontal--regular);
+  flex-wrap: wrap;
+  align-items: flex-start;
+  isolation: isolate;
+}
+
+.FormLayoutGroup__removable {
+  flex-grow: 1;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.FormLayoutGroup__offset {
+  display: none;
+}
+
+.FormLayoutGroup--mode-horizontal
+  :global(.vkuiInternalFormItem--withTop)
+  ~ .FormLayoutGroup__offset {
+  order: -1;
+  display: block;
+  min-width: 100%;
+  height: calc(2px + var(--vkui--font_subhead--line_height--regular) + 8px);
+}
+
+.FormLayoutGroup--sizeY-compact.FormLayoutGroup--mode-horizontal
+  :global(.vkuiInternalFormItem--withTop)
+  ~ .FormLayoutGroup__offset {
+  height: calc(2px + var(--vkui--font_subhead--line_height--compact) + 6px);
+}
+
+@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
+  .FormLayoutGroup--sizeY-none.FormLayoutGroup--mode-horizontal
+    :global(.vkuiInternalFormItem--withTop)
+    ~ .FormLayoutGroup__offset {
+    height: calc(2px + var(--vkui--font_subhead--line_height--compact) + 6px);
+  }
+}
+
+.FormLayoutGroup--removable {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.FormLayoutGroup--segmented {
+  position: relative;
+}
+
+/* stylelint-disable vkui/atomic */
+
+.FormLayoutGroup--segmented > * {
+  min-width: 0;
+  flex: 1;
+}
+
+.FormLayoutGroup--segmented > *:not(:first-child):not(.FormLayoutGroup__offset) {
+  margin-left: calc(-1 * var(--vkui_internal--thin_border));
+}

package/dist/cssm/components/FormStatus/FormStatus.module.css

@@ -1 +1,3 @@
-.vkuiFormStatus--mode-error{color:#e64646;color:var(--vkui--color_background_negative)}
+.FormStatus--mode-error {
+  color: var(--vkui--color_background_negative);
+}

package/dist/cssm/components/Gradient/Gradient.module.css

@@ -1 +1,23 @@
-.vkuiGradient--mode-tint.vkuiGradient--to-top{background:linear-gradient(180deg,hsla(0,0%,98%,0) 0,hsla(0,0%,98%,.036) 13%,hsla(0,0%,98%,.15) 27%,hsla(0,0%,98%,.79) 68%,hsla(0,0%,98%,.95) 84%,#f9f9f9);background:linear-gradient(to bottom,var(--vkui--gradient_tint))}.vkuiGradient--mode-tint.vkuiGradient--to-bottom{background:linear-gradient(0deg,hsla(0,0%,98%,0) 0,hsla(0,0%,98%,.036) 13%,hsla(0,0%,98%,.15) 27%,hsla(0,0%,98%,.79) 68%,hsla(0,0%,98%,.95) 84%,#f9f9f9);background:linear-gradient(to top,var(--vkui--gradient_tint))}.vkuiGradient--mode-white.vkuiGradient--to-top{background:linear-gradient(180deg,hsla(0,0%,100%,0) 0,hsla(0,0%,100%,.036) 13%,hsla(0,0%,100%,.15) 27%,hsla(0,0%,100%,.79) 68%,hsla(0,0%,100%,.95) 84%,#fff);background:linear-gradient(to bottom,var(--vkui--gradient_white))}.vkuiGradient--mode-white.vkuiGradient--to-bottom{background:linear-gradient(0deg,hsla(0,0%,100%,0) 0,hsla(0,0%,100%,.036) 13%,hsla(0,0%,100%,.15) 27%,hsla(0,0%,100%,.79) 68%,hsla(0,0%,100%,.95) 84%,#fff);background:linear-gradient(to top,var(--vkui--gradient_white))}.vkuiGradient--mode-black.vkuiGradient--to-top{background:linear-gradient(180deg,transparent 0,rgba(0,0,0,.014) 13%,rgba(0,0,0,.06) 27%,rgba(0,0,0,.316) 68%,rgba(0,0,0,.38) 84%,rgba(0,0,0,.4));background:linear-gradient(to bottom,var(--vkui--gradient_black))}.vkuiGradient--mode-black.vkuiGradient--to-bottom{background:linear-gradient(0deg,transparent 0,rgba(0,0,0,.014) 13%,rgba(0,0,0,.06) 27%,rgba(0,0,0,.316) 68%,rgba(0,0,0,.38) 84%,rgba(0,0,0,.4));background:linear-gradient(to top,var(--vkui--gradient_black))}
+.Gradient--mode-tint.Gradient--to-top {
+  background: linear-gradient(to bottom, var(--vkui--gradient_tint));
+}
+
+.Gradient--mode-tint.Gradient--to-bottom {
+  background: linear-gradient(to top, var(--vkui--gradient_tint));
+}
+
+.Gradient--mode-white.Gradient--to-top {
+  background: linear-gradient(to bottom, var(--vkui--gradient_white));
+}
+
+.Gradient--mode-white.Gradient--to-bottom {
+  background: linear-gradient(to top, var(--vkui--gradient_white));
+}
+
+.Gradient--mode-black.Gradient--to-top {
+  background: linear-gradient(to bottom, var(--vkui--gradient_black));
+}
+
+.Gradient--mode-black.Gradient--to-bottom {
+  background: linear-gradient(to top, var(--vkui--gradient_black));
+}

package/dist/cssm/components/GridAvatar/GridAvatar.module.css

@@ -1 +1,37 @@
-.vkuiGridAvatar{border-radius:50%}.vkuiGridAvatar__in{border-radius:inherit;display:flex;flex-flow:column wrap;height:100%;overflow:hidden;width:100%}.vkuiGridAvatar__item{background-position:50%;background-size:cover;height:calc(50% - 2px / 2);height:calc(50% - var(--vkui_internal--grid_avatar_image_offset) / 2);margin-right:2px;margin-right:var(--vkui_internal--grid_avatar_image_offset);width:calc(50% - 2px / 2);width:calc(50% - var(--vkui_internal--grid_avatar_image_offset) / 2)}.vkuiGridAvatar__item:only-child{width:100%}.vkuiGridAvatar__item:first-child:not(:nth-last-child(4)),.vkuiGridAvatar__item:nth-child(2):last-child{height:100%}.vkuiGridAvatar__item:nth-last-child(4),.vkuiGridAvatar__item:nth-last-child(n+3)~.vkuiGridAvatar__item:nth-last-child(2){margin-bottom:2px;margin-bottom:var(--vkui_internal--grid_avatar_image_offset)}
+.GridAvatar {
+  border-radius: 50%;
+}
+
+.GridAvatar__in {
+  display: flex;
+  flex-flow: column wrap;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  border-radius: inherit;
+}
+
+.GridAvatar__item {
+  width: calc(50% - var(--vkui_internal--grid_avatar_image_offset) / 2);
+  height: calc(50% - var(--vkui_internal--grid_avatar_image_offset) / 2);
+  margin-right: var(--vkui_internal--grid_avatar_image_offset);
+  background-size: cover;
+  background-position: center;
+}
+
+.GridAvatar__item:only-child {
+  width: 100%;
+}
+
+.GridAvatar__item:first-child:not(:nth-last-child(4)),
+.GridAvatar__item:nth-child(2):last-child {
+  height: 100%;
+}
+
+/* если есть минимум три элемента — выбираем второй с конца */
+
+.GridAvatar__item:nth-last-child(n + 3) ~ .GridAvatar__item:nth-last-child(2),
+/* четвертый с конца */
+.GridAvatar__item:nth-last-child(4) {
+  margin-bottom: var(--vkui_internal--grid_avatar_image_offset);
+}

package/dist/cssm/components/GridAvatar/GridAvatarBadge/GridAvatarBadge.module.css

@@ -1 +1,9 @@
-.vkuiGridAvatarBadge{bottom:0;right:0}.vkuiGridAvatarBadge--shifted{bottom:-2px;right:-2px}
+.GridAvatarBadge {
+  right: 0;
+  bottom: 0;
+}
+
+.GridAvatarBadge--shifted {
+  right: -2px;
+  bottom: -2px;
+}

package/dist/cssm/components/Group/Group.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { HasRootRef } from '../../types';
-export interface GroupProps extends HasRootRef<HTMLElement>, React.HTMLAttributes<HTMLElement> {
+import { HasChildren, HasRootRef } from '../../types';
+export interface GroupProps extends HasRootRef<HTMLElement>, React.HTMLAttributes<HTMLElement>, HasChildren {
     header?: React.ReactNode;
     description?: React.ReactNode;
     /**
@@ -20,6 +20,8 @@ export interface GroupProps extends HasRootRef<HTMLElement>, React.HTMLAttribute
      * Отвечает за отступы вокруг контента в режиме 'card'.
      */
     padding?: 's' | 'm';
-    children?: React.ReactNode;
 }
+/**
+ * @see https://vkcom.github.io/VKUI/#/Group
+ */
 export declare const Group: ({ header, description, children, separator, getRootRef, mode: modeProps, padding, className, tabIndex: tabIndexProp, ...restProps }: GroupProps) => JSX.Element;

package/dist/cssm/components/Group/Group.js

@@ -15,8 +15,10 @@ const sizeXClassNames = {
     [SizeType.COMPACT]: styles['Group--sizeX-compact'],
     [SizeType.REGULAR]: styles['Group--sizeX-regular']
 };
-const warn = warnOnce('TabsItem');
-export const Group = ({ header , description , children , separator ='auto' , getRootRef , mode: modeProps , padding ='m' , className , tabIndex: tabIndexProp , ...restProps })=>{
+const warn = warnOnce('Group');
+/**
+ * @see https://vkcom.github.io/VKUI/#/Group
+ */ export const Group = ({ header , description , children , separator ='auto' , getRootRef , mode: modeProps , padding ='m' , className , tabIndex: tabIndexProp , ...restProps })=>{
     const { isInsideModal  } = React.useContext(ModalRootContext);
     const platform = usePlatform();
     const { sizeX ='none'  } = useAdaptivity();
@@ -35,7 +37,7 @@ export const Group = ({ header , description , children , separator ='auto' , ge
         ...restProps,
         tabIndex: tabIndex,
         ref: getRootRef,
-        className: classNames(styles['Group'], platform === Platform.IOS && styles['Group--ios'], sizeXClassNames[sizeX], mode && ({
+        className: classNames('vkuiInternalGroup', styles['Group'], platform === Platform.IOS && styles['Group--ios'], sizeXClassNames[sizeX], mode && ({
             none: classNames(styles['Group--mode-none'], 'vkuiInternalGroup--mode-none'),
             plain: classNames(styles['Group--mode-plain'], 'vkuiInternalGroup--mode-plain'),
             card: classNames(styles['Group--mode-card'], 'vkuiInternalGroup--mode-card')

package/dist/cssm/components/Group/Group.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Group/Group.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasRootRef } from '../../types';\nimport { ModalRootContext } from '../ModalRoot/ModalRootContext';\nimport { Separator } from '../Separator/Separator';\nimport { Spacing } from '../Spacing/Spacing';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './Group.module.css';\n\nconst sizeXClassNames = {\n  none: styles['Group--sizeX-none'],\n  [SizeType.COMPACT]: styles['Group--sizeX-compact'],\n  [SizeType.REGULAR]: styles['Group--sizeX-regular'],\n};\n\nexport interface GroupProps extends HasRootRef<HTMLElement>, React.HTMLAttributes<HTMLElement> {\n  header?: React.ReactNode;\n  description?: React.ReactNode;\n  /**\n    show - разделитель всегда показывается,\n    hide - разделитель всегда спрятан,\n    auto - разделитель рисуется автоматически между соседними группами.\n   */\n  separator?: 'show' | 'hide' | 'auto';\n  /**\n   * Режим отображения. Если установлен 'card', выглядит как карточка c\n   * обводкой и внешними отступами. Если 'plain' — без отступов и обводки.\n   * По умолчанию режим отображения зависит от `sizeX`. В модальных окнах\n   * по умолчанию 'plain'.\n   */\n  mode?: 'plain' | 'card';\n  /**\n   * Отвечает за отступы вокруг контента в режиме 'card'.\n   */\n  padding?: 's' | 'm';\n  children?: React.ReactNode;\n}\n\nconst warn = warnOnce('TabsItem');\n\nexport const Group = ({\n  header,\n  description,\n  children,\n  separator = 'auto',\n  getRootRef,\n  mode: modeProps,\n  padding = 'm',\n  className,\n  tabIndex: tabIndexProp,\n  ...restProps\n}: GroupProps) => {\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const platform = usePlatform();\n  const { sizeX = 'none' } = useAdaptivity();\n\n  let mode: GroupProps['mode'] | 'none' = modeProps;\n\n  if (!modeProps) {\n    // Подробнее в \"none\" можно прочитать в ADAPTIVITY_GUIDE.md\n    mode = isInsideModal ? 'plain' : 'none';\n  }\n\n  const isTabPanel = restProps.role === 'tabpanel';\n\n  if (\n    process.env.NODE_ENV === 'development' &&\n    isTabPanel &&\n    (!restProps['aria-controls'] || !restProps['id'])\n  ) {\n    warn(\n      'При использовании роли \"tabpanel\" необходимо задать значение свойств \"aria-controls\" и \"id\"',\n    );\n  }\n\n  const tabIndex = isTabPanel && tabIndexProp === undefined ? 0 : tabIndexProp;\n\n  const separatorClassName = classNames(\n    styles['Group__separator'],\n    separator === 'show' && styles['Group__separator--force'],\n  );\n\n  return (\n    <>\n      <section\n        {...restProps}\n        tabIndex={tabIndex}\n        ref={getRootRef}\n        className={classNames(\n          styles['Group'],\n          platform === Platform.IOS && styles['Group--ios'],\n          sizeXClassNames[sizeX],\n          mode &&\n            {\n              none: classNames(styles['Group--mode-none'], 'vkuiInternalGroup--mode-none'),\n              plain: classNames(styles['Group--mode-plain'], 'vkuiInternalGroup--mode-plain'),\n              card: classNames(styles['Group--mode-card'], 'vkuiInternalGroup--mode-card'),\n            }[mode],\n          {\n            s: styles['Group--padding-s'],\n            m: styles['Group--padding-m'],\n          }[padding],\n          className,\n        )}\n      >\n        {header}\n        {children}\n        {hasReactNode(description) && (\n          <Footnote className={styles['Group__description']}>{description}</Footnote>\n        )}\n      </section>\n\n      {separator !== 'hide' && (\n        <React.Fragment>\n          <Spacing\n            className={classNames(separatorClassName, styles['Group__separator--spacing'])}\n            size={16}\n          />\n          <Separator\n            className={classNames(separatorClassName, styles['Group__separator--separator'])}\n          />\n        </React.Fragment>\n      )}\n    </>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","SizeType","Platform","warnOnce","ModalRootContext","Separator","Spacing","Footnote","styles","sizeXClassNames","none","COMPACT","REGULAR","warn","Group","header","description","children","separator","getRootRef","mode","modeProps","padding","className","tabIndex","tabIndexProp","restProps","isInsideModal","useContext","platform","sizeX","isTabPanel","role","process","env","NODE_ENV","undefined","separatorClassName","section","ref","IOS","plain","card","s","m","Fragment","size"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,gBAAgB,QAAQ,gCAAgC;AACjE,SAASC,SAAS,QAAQ,yBAAyB;AACnD,SAASC,OAAO,QAAQ,qBAAqB;AAC7C,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,OAAOC,YAAY,qBAAqB;AAExC,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,oBAAoB;IACjC,CAACP,SAASU,OAAO,CAAC,EAAEH,MAAM,CAAC,uBAAuB;IAClD,CAACP,SAASW,OAAO,CAAC,EAAEJ,MAAM,CAAC,uBAAuB;AACpD;AAyBA,MAAMK,OAAOV,SAAS;AAEtB,OAAO,MAAMW,QAAQ,CAAC,EACpBC,OAAM,EACNC,YAAW,EACXC,SAAQ,EACRC,WAAY,OAAM,EAClBC,WAAU,EACVC,MAAMC,UAAS,EACfC,SAAU,IAAG,EACbC,UAAS,EACTC,UAAUC,aAAY,EACtB,GAAGC,WACQ,GAAK;IAChB,MAAM,EAAEC,cAAa,EAAE,GAAG/B,MAAMgC,UAAU,CAACxB;IAC3C,MAAMyB,WAAW7B;IACjB,MAAM,EAAE8B,OAAQ,OAAM,EAAE,GAAG/B;IAE3B,IAAIqB,OAAoCC;IAExC,IAAI,CAACA,WAAW;QACd,2DAA2D;QAC3DD,OAAOO,gBAAgB,UAAU,MAAM;IACzC,CAAC;IAED,MAAMI,aAAaL,UAAUM,IAAI,KAAK;IAEtC,IACEC,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBACzBJ,cACC,CAAA,CAACL,SAAS,CAAC,gBAAgB,IAAI,CAACA,SAAS,CAAC,KAAK,AAAD,GAC/C;QACAb,KACE;IAEJ,CAAC;IAED,MAAMW,WAAWO,cAAcN,iBAAiBW,YAAY,IAAIX,YAAY;IAE5E,MAAMY,qBAAqBxC,WACzBW,MAAM,CAAC,mBAAmB,EAC1BU,cAAc,UAAUV,MAAM,CAAC,0BAA0B;IAG3D,qBACE,wDACE,oBAAC8B;QACE,GAAGZ,SAAS;QACbF,UAAUA;QACVe,KAAKpB;QACLI,WAAW1B,WACTW,MAAM,CAAC,QAAQ,EACfqB,aAAa3B,SAASsC,GAAG,IAAIhC,MAAM,CAAC,aAAa,EACjDC,eAAe,CAACqB,MAAM,EACtBV,QACE,CAAA;YACEV,MAAMb,WAAWW,MAAM,CAAC,mBAAmB,EAAE;YAC7CiC,OAAO5C,WAAWW,MAAM,CAAC,oBAAoB,EAAE;YAC/CkC,MAAM7C,WAAWW,MAAM,CAAC,mBAAmB,EAAE;QAC/C,CAAA,CAAC,CAACY,KAAK,EACT;YACEuB,GAAGnC,MAAM,CAAC,mBAAmB;YAC7BoC,GAAGpC,MAAM,CAAC,mBAAmB;QAC/B,CAAC,CAACc,QAAQ,EACVC;OAGDR,QACAE,UACAnB,aAAakB,8BACZ,oBAACT;QAASgB,WAAWf,MAAM,CAAC,qBAAqB;OAAGQ,eAIvDE,cAAc,wBACb,oBAACtB,MAAMiD,QAAQ,sBACb,oBAACvC;QACCiB,WAAW1B,WAAWwC,oBAAoB7B,MAAM,CAAC,4BAA4B;QAC7EsC,MAAM;sBAER,oBAACzC;QACCkB,WAAW1B,WAAWwC,oBAAoB7B,MAAM,CAAC,8BAA8B;;AAM3F,EAAE"}
+{"version":3,"sources":["../../../../src/components/Group/Group.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasChildren, HasRootRef } from '../../types';\nimport { ModalRootContext } from '../ModalRoot/ModalRootContext';\nimport { Separator } from '../Separator/Separator';\nimport { Spacing } from '../Spacing/Spacing';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './Group.module.css';\n\nconst sizeXClassNames = {\n  none: styles['Group--sizeX-none'],\n  [SizeType.COMPACT]: styles['Group--sizeX-compact'],\n  [SizeType.REGULAR]: styles['Group--sizeX-regular'],\n};\n\nexport interface GroupProps\n  extends HasRootRef<HTMLElement>,\n    React.HTMLAttributes<HTMLElement>,\n    HasChildren {\n  header?: React.ReactNode;\n  description?: React.ReactNode;\n  /**\n    show - разделитель всегда показывается,\n    hide - разделитель всегда спрятан,\n    auto - разделитель рисуется автоматически между соседними группами.\n   */\n  separator?: 'show' | 'hide' | 'auto';\n  /**\n   * Режим отображения. Если установлен 'card', выглядит как карточка c\n   * обводкой и внешними отступами. Если 'plain' — без отступов и обводки.\n   * По умолчанию режим отображения зависит от `sizeX`. В модальных окнах\n   * по умолчанию 'plain'.\n   */\n  mode?: 'plain' | 'card';\n  /**\n   * Отвечает за отступы вокруг контента в режиме 'card'.\n   */\n  padding?: 's' | 'm';\n}\n\nconst warn = warnOnce('Group');\n/**\n * @see https://vkcom.github.io/VKUI/#/Group\n */\nexport const Group = ({\n  header,\n  description,\n  children,\n  separator = 'auto',\n  getRootRef,\n  mode: modeProps,\n  padding = 'm',\n  className,\n  tabIndex: tabIndexProp,\n  ...restProps\n}: GroupProps) => {\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const platform = usePlatform();\n  const { sizeX = 'none' } = useAdaptivity();\n\n  let mode: GroupProps['mode'] | 'none' = modeProps;\n\n  if (!modeProps) {\n    // Подробнее в \"none\" можно прочитать в ADAPTIVITY_GUIDE.md\n    mode = isInsideModal ? 'plain' : 'none';\n  }\n\n  const isTabPanel = restProps.role === 'tabpanel';\n\n  if (\n    process.env.NODE_ENV === 'development' &&\n    isTabPanel &&\n    (!restProps['aria-controls'] || !restProps['id'])\n  ) {\n    warn(\n      'При использовании роли \"tabpanel\" необходимо задать значение свойств \"aria-controls\" и \"id\"',\n    );\n  }\n\n  const tabIndex = isTabPanel && tabIndexProp === undefined ? 0 : tabIndexProp;\n\n  const separatorClassName = classNames(\n    styles['Group__separator'],\n    separator === 'show' && styles['Group__separator--force'],\n  );\n\n  return (\n    <>\n      <section\n        {...restProps}\n        tabIndex={tabIndex}\n        ref={getRootRef}\n        className={classNames(\n          'vkuiInternalGroup',\n          styles['Group'],\n          platform === Platform.IOS && styles['Group--ios'],\n          sizeXClassNames[sizeX],\n          mode &&\n            {\n              none: classNames(styles['Group--mode-none'], 'vkuiInternalGroup--mode-none'),\n              plain: classNames(styles['Group--mode-plain'], 'vkuiInternalGroup--mode-plain'),\n              card: classNames(styles['Group--mode-card'], 'vkuiInternalGroup--mode-card'),\n            }[mode],\n          {\n            s: styles['Group--padding-s'],\n            m: styles['Group--padding-m'],\n          }[padding],\n          className,\n        )}\n      >\n        {header}\n        {children}\n        {hasReactNode(description) && (\n          <Footnote className={styles['Group__description']}>{description}</Footnote>\n        )}\n      </section>\n\n      {separator !== 'hide' && (\n        <React.Fragment>\n          <Spacing\n            className={classNames(separatorClassName, styles['Group__separator--spacing'])}\n            size={16}\n          />\n          <Separator\n            className={classNames(separatorClassName, styles['Group__separator--separator'])}\n          />\n        </React.Fragment>\n      )}\n    </>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","SizeType","Platform","warnOnce","ModalRootContext","Separator","Spacing","Footnote","styles","sizeXClassNames","none","COMPACT","REGULAR","warn","Group","header","description","children","separator","getRootRef","mode","modeProps","padding","className","tabIndex","tabIndexProp","restProps","isInsideModal","useContext","platform","sizeX","isTabPanel","role","process","env","NODE_ENV","undefined","separatorClassName","section","ref","IOS","plain","card","s","m","Fragment","size"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,gBAAgB,QAAQ,gCAAgC;AACjE,SAASC,SAAS,QAAQ,yBAAyB;AACnD,SAASC,OAAO,QAAQ,qBAAqB;AAC7C,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,OAAOC,YAAY,qBAAqB;AAExC,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,oBAAoB;IACjC,CAACP,SAASU,OAAO,CAAC,EAAEH,MAAM,CAAC,uBAAuB;IAClD,CAACP,SAASW,OAAO,CAAC,EAAEJ,MAAM,CAAC,uBAAuB;AACpD;AA2BA,MAAMK,OAAOV,SAAS;AACtB;;CAEC,GACD,OAAO,MAAMW,QAAQ,CAAC,EACpBC,OAAM,EACNC,YAAW,EACXC,SAAQ,EACRC,WAAY,OAAM,EAClBC,WAAU,EACVC,MAAMC,UAAS,EACfC,SAAU,IAAG,EACbC,UAAS,EACTC,UAAUC,aAAY,EACtB,GAAGC,WACQ,GAAK;IAChB,MAAM,EAAEC,cAAa,EAAE,GAAG/B,MAAMgC,UAAU,CAACxB;IAC3C,MAAMyB,WAAW7B;IACjB,MAAM,EAAE8B,OAAQ,OAAM,EAAE,GAAG/B;IAE3B,IAAIqB,OAAoCC;IAExC,IAAI,CAACA,WAAW;QACd,2DAA2D;QAC3DD,OAAOO,gBAAgB,UAAU,MAAM;IACzC,CAAC;IAED,MAAMI,aAAaL,UAAUM,IAAI,KAAK;IAEtC,IACEC,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBACzBJ,cACC,CAAA,CAACL,SAAS,CAAC,gBAAgB,IAAI,CAACA,SAAS,CAAC,KAAK,AAAD,GAC/C;QACAb,KACE;IAEJ,CAAC;IAED,MAAMW,WAAWO,cAAcN,iBAAiBW,YAAY,IAAIX,YAAY;IAE5E,MAAMY,qBAAqBxC,WACzBW,MAAM,CAAC,mBAAmB,EAC1BU,cAAc,UAAUV,MAAM,CAAC,0BAA0B;IAG3D,qBACE,wDACE,oBAAC8B;QACE,GAAGZ,SAAS;QACbF,UAAUA;QACVe,KAAKpB;QACLI,WAAW1B,WACT,qBACAW,MAAM,CAAC,QAAQ,EACfqB,aAAa3B,SAASsC,GAAG,IAAIhC,MAAM,CAAC,aAAa,EACjDC,eAAe,CAACqB,MAAM,EACtBV,QACE,CAAA;YACEV,MAAMb,WAAWW,MAAM,CAAC,mBAAmB,EAAE;YAC7CiC,OAAO5C,WAAWW,MAAM,CAAC,oBAAoB,EAAE;YAC/CkC,MAAM7C,WAAWW,MAAM,CAAC,mBAAmB,EAAE;QAC/C,CAAA,CAAC,CAACY,KAAK,EACT;YACEuB,GAAGnC,MAAM,CAAC,mBAAmB;YAC7BoC,GAAGpC,MAAM,CAAC,mBAAmB;QAC/B,CAAC,CAACc,QAAQ,EACVC;OAGDR,QACAE,UACAnB,aAAakB,8BACZ,oBAACT;QAASgB,WAAWf,MAAM,CAAC,qBAAqB;OAAGQ,eAIvDE,cAAc,wBACb,oBAACtB,MAAMiD,QAAQ,sBACb,oBAACvC;QACCiB,WAAW1B,WAAWwC,oBAAoB7B,MAAM,CAAC,4BAA4B;QAC7EsC,MAAM;sBAER,oBAACzC;QACCkB,WAAW1B,WAAWwC,oBAAoB7B,MAAM,CAAC,8BAA8B;;AAM3F,EAAE"}

package/dist/cssm/components/Group/Group.module.css

@@ -1 +1,166 @@
-.vkuiGroup{color:#000;color:var(--vkui--color_text_primary);padding-bottom:8px;padding-top:8px}.vkuiGroup__separator--separator,.vkuiGroup__separator--spacing{display:none}.vkuiGroup--mode-plain+.vkuiGroup__separator--spacing+.vkuiGroup__separator--separator,.vkuiGroup--sizeX-compact+.vkuiGroup__separator--spacing+.vkuiGroup__separator--separator{display:block}@media (max-width:767.9px){.vkuiGroup--sizeX-none+.vkuiGroup__separator--spacing+.vkuiGroup__separator--separator{display:block}}.vkuiGroup--sizeX-regular.vkuiGroup--mode-none+.vkuiGroup__separator--spacing{display:block}@media (min-width:768px){.vkuiGroup--sizeX-none.vkuiGroup--mode-none+.vkuiGroup__separator--spacing{display:block}}.vkuiGroup--mode-card.vkuiGroup--padding-s{padding:4px}.vkuiGroup--mode-card.vkuiGroup--padding-m{padding:8px}.vkuiGroup--sizeX-compact{padding-left:0;padding-right:0}@media (min-width:768px){.vkuiGroup--sizeX-none.vkuiGroup--padding-s{padding:4px}.vkuiGroup--sizeX-none.vkuiGroup--padding-m{padding:8px}}.vkuiGroup--mode-card{background:#fff;background:var(--vkui--color_background_content);border-radius:12px;border-radius:var(--vkui--size_border_radius_paper--regular);position:relative}@media (min-width:768px){.vkuiGroup--mode-none.vkuiGroup--sizeX-none{background:#fff;background:var(--vkui--color_background_content);border-radius:12px;border-radius:var(--vkui--size_border_radius_paper--regular);position:relative}}.vkuiGroup--mode-card:after{border-radius:inherit;box-shadow:inset 0 0 0 1px #d7d8d9;box-shadow:inset 0 0 0 var(--vkui_internal--thin_border) var(--vkui--color_separator_primary);content:"";height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}@media (min-width:768px){.vkuiGroup--mode-none:after{border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);box-shadow:inset 0 0 0 var(--vkui_internal--thin_border) var(--vkui--color_field_border_alpha);content:"";height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}}.vkuiGroup--mode-plain+.vkuiGroup__separator,.vkuiGroup--mode-plain+.vkuiGroup__separator+.vkuiGroup__separator{padding-bottom:8px;padding-top:8px}@media (max-width:767.9px){.vkuiGroup--sizeX-none.vkuiGroup--mode-none+.vkuiGroup__separator,.vkuiGroup--sizeX-none.vkuiGroup--mode-none+.vkuiGroup__separator+.vkuiGroup__separator{padding-bottom:8px;padding-top:8px}}.vkuiGroup:last-of-type~.vkuiGroup__separator{display:none}.vkuiGroup--sizeX-regular.vkuiGroup--mode-card:last-of-type+.vkuiGroup__separator--spacing,.vkuiGroup--sizeX-regular.vkuiGroup--mode-none:last-of-type+.vkuiGroup__separator--spacing,.vkuiGroup:last-of-type~.vkuiGroup__separator--force{display:block}@media (min-width:768px){.vkuiGroup--sizeX-none.vkuiGroup--mode-card:last-of-type+.vkuiGroup__separator--spacing,.vkuiGroup--sizeX-none.vkuiGroup--mode-none:last-of-type+.vkuiGroup__separator--spacing{display:block}}.vkuiGroup__description{color:#818c99;color:var(--vkui--color_text_secondary);display:block;padding:4px 16px 16px}.vkuiGroup .vkuiGroup,.vkuiGroup .vkuiGroup+.vkuiGroup__separator{padding-left:0;padding-right:0}.vkuiGroup .vkuiGroup:first-of-type{padding-top:0}.vkuiGroup .vkuiGroup:last-of-type{padding-bottom:0}.vkuiGroup--ios .vkuiGroup__description{padding:4px 12px 16px}.vkuiInternalPanelHeader--vkcom+* .vkuiGroup:first-of-type,.vkuiInternalPanelHeader--vkcom~.vkuiGroup:first-of-type{border-top-left-radius:0;border-top-right-radius:0;position:relative;top:-1px}
+.Group {
+  color: var(--vkui--color_text_primary);
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
+.Group__separator--spacing,
+.Group__separator--separator {
+  display: none;
+}
+
+.Group--sizeX-compact + .Group__separator--spacing + .Group__separator--separator,
+.Group--mode-plain + .Group__separator--spacing + .Group__separator--separator {
+  display: block;
+}
+
+@media (max-width: 767.9px) {
+  .Group--sizeX-none + .Group__separator--spacing + .Group__separator--separator {
+    display: block;
+  }
+}
+
+.Group--sizeX-regular.Group--mode-none + .Group__separator--spacing {
+  display: block;
+}
+
+@media (min-width: 768px) {
+  .Group--sizeX-none.Group--mode-none + .Group__separator--spacing {
+    display: block;
+  }
+}
+
+.Group--mode-card.Group--padding-s {
+  padding: 4px;
+}
+
+.Group--mode-card.Group--padding-m {
+  padding: 8px;
+}
+
+.Group--sizeX-compact {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+@media (min-width: 768px) {
+  .Group--sizeX-none.Group--padding-s {
+    padding: 4px;
+  }
+
+  .Group--sizeX-none.Group--padding-m {
+    padding: 8px;
+  }
+}
+
+.Group--mode-card {
+  background: var(--vkui--color_background_content);
+  border-radius: var(--vkui--size_border_radius_paper--regular);
+  position: relative;
+}
+
+@media (min-width: 768px) {
+  .Group--mode-none.Group--sizeX-none {
+    background: var(--vkui--color_background_content);
+    border-radius: var(--vkui--size_border_radius_paper--regular);
+    position: relative;
+  }
+}
+
+.Group--mode-card::after {
+  content: '';
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  border-radius: inherit;
+  pointer-events: none;
+  box-shadow: inset 0 0 0 var(--vkui_internal--thin_border) var(--vkui--color_separator_primary);
+}
+
+@media (min-width: 768px) {
+  .Group--mode-none::after {
+    content: '';
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    border-radius: inherit;
+    pointer-events: none;
+    box-shadow: inset 0 0 0 var(--vkui_internal--thin_border) var(--vkui--color_field_border_alpha);
+  }
+}
+
+.Group--mode-plain + .Group__separator,
+.Group--mode-plain + .Group__separator + .Group__separator {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
+@media (max-width: 767.9px) {
+  .Group--sizeX-none.Group--mode-none + .Group__separator,
+  .Group--sizeX-none.Group--mode-none + .Group__separator + .Group__separator {
+    padding-top: 8px;
+    padding-bottom: 8px;
+  }
+}
+
+.Group:last-of-type ~ .Group__separator {
+  display: none;
+}
+
+.Group:last-of-type ~ .Group__separator--force,
+.Group--sizeX-regular.Group--mode-none:last-of-type + .Group__separator--spacing,
+.Group--sizeX-regular.Group--mode-card:last-of-type + .Group__separator--spacing {
+  display: block;
+}
+
+@media (min-width: 768px) {
+  .Group--sizeX-none.Group--mode-card:last-of-type + .Group__separator--spacing,
+  .Group--sizeX-none.Group--mode-none:last-of-type + .Group__separator--spacing {
+    display: block;
+  }
+}
+
+.Group__description {
+  display: block;
+  padding: 4px 16px 16px;
+  color: var(--vkui--color_text_secondary);
+}
+
+.Group .Group,
+.Group .Group + .Group__separator {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.Group .Group:first-of-type {
+  padding-top: 0;
+}
+
+.Group .Group:last-of-type {
+  padding-bottom: 0;
+}
+
+/**
+ * iOS
+ */
+
+.Group--ios .Group__description {
+  padding: 4px 12px 16px;
+}
+
+/*
+ * CMP:
+ * PanelHeader
+ */
+
+:global(.vkuiInternalPanelHeader--vkcom) ~ .Group:first-of-type,
+:global(.vkuiInternalPanelHeader--vkcom) + * .Group:first-of-type {
+  position: relative;
+  top: -1px;
+  border-top-right-radius: 0;
+  border-top-left-radius: 0;
+}