@vkontakte/vkui 5.3.2 → 5.4.1

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

@@ -1 +1,211 @@
-.vkuiFormField{-webkit-tap-highlight-color:transparent;align-items:center;border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);box-sizing:border-box;display:flex;font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);isolation:isolate;min-height:44px;min-height:var(--vkui--size_field_height--regular);position:relative}.vkuiFormField--sizeY-compact{min-height:36px;min-height:var(--vkui--size_field_height--compact)}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiFormField--sizeY-none{min-height:36px;min-height:var(--vkui--size_field_height--compact)}}.vkuiFormField>*{border-radius:inherit;z-index:1;z-index:var(--vkui_internal--z_index_form_field_element)}.vkuiFormField__after,.vkuiFormField__before{align-content:center;align-items:center;color:#99a2ad;color:var(--vkui--color_icon_secondary);display:flex;flex-shrink:0;height:100%;justify-content:center;min-width:44px;min-width:var(--vkui--size_field_height--regular);position:relative;z-index:6;z-index:var(--vkui_internal--z_index_form_field_side)}.vkuiFormField--sizeY-compact .vkuiFormField__after,.vkuiFormField--sizeY-compact .vkuiFormField__before{height:36px;height:var(--vkui--size_field_height--compact);min-width:36px;min-width:var(--vkui--size_field_height--compact)}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiFormField--sizeY-none .vkuiFormField__after,.vkuiFormField--sizeY-none .vkuiFormField__before{height:36px;height:var(--vkui--size_field_height--compact);min-width:36px;min-width:var(--vkui--size_field_height--compact)}}.vkuiFormField__before{color:#2688eb;color:var(--vkui--color_icon_accent)}.vkuiFormField__after{color:#99a2ad;color:var(--vkui--color_icon_secondary)}.vkuiFormField__border{border:1px solid transparent;border:var(--vkui_internal--thin_border) solid transparent;border-radius:inherit;box-sizing:border-box;height:100%;left:0;pointer-events:none;position:absolute;top:0;transform-origin:left top;width:100%;z-index:2;z-index:var(--vkui_internal--z_index_form_field_border)}.vkuiFormField--mode-default .vkuiFormField__border{border-color:rgba(0,0,0,.12);border-color:var(--vkui--color_field_border_alpha)}.vkuiFormField--mode-default{background-color:#f2f3f5;background-color:var(--vkui--color_field_background)}.vkuiFormField--status-error .vkuiFormField__border,.vkuiInternalFormItem--status-error .vkuiFormField__border{border-color:#e64646;border-color:var(--vkui--color_stroke_negative);z-index:3;z-index:var(--vkui_internal--z_index_form_field_status)}.vkuiFormField--status-error,.vkuiInternalFormItem--status-error .vkuiFormField{background-color:#faebeb;background-color:var(--vkui--color_background_negative_tint)}.vkuiFormField--status-valid .vkuiFormField__border,.vkuiInternalFormItem--status-valid .vkuiFormField__border{border-color:#4bb34b;border-color:var(--vkui--color_stroke_positive);z-index:3;z-index:var(--vkui_internal--z_index_form_field_status)}.vkuiFormField--disabled{cursor:default;opacity:.64;opacity:var(--vkui--opacity_disable_accessibility);pointer-events:none}.vkuiFormField--hover{background-color:#f2f3f5;background-color:var(--vkui--color_field_background)}.vkuiFormField--mode-default.vkuiFormField--hover .vkuiFormField__border{border-color:rgba(0,0,0,.24);border-color:var(--vkui--color_field_border_alpha--hover);z-index:4;z-index:var(--vkui_internal--z_index_form_field_border_hover)}.vkuiFormField :focus{outline:none}.vkuiFormField :focus~.vkuiFormField__border,.vkuiFormField:focus-within .vkuiFormField__border{border-color:#2688eb;border-color:var(--vkui--color_stroke_accent);z-index:5;z-index:var(--vkui_internal--z_index_form_field_focus)}.vkuiInternalModalCardBase__header+.vkuiFormField,.vkuiInternalModalCardBase__subheader+.vkuiFormField{margin-top:16px}.vkuiInternalNativeSelect .vkuiFormField__after{pointer-events:none}.vkuiInternalCalendarHeader__picker .vkuiFormField__after{min-width:12px;padding-right:8px}.vkuiInternalChipsInput .vkuiFormField__after{z-index:6;z-index:var(--vkui_internal--z_index_form_field_side)}.vkuiInternalFormLayoutGroup--segmented .vkuiFormField{isolation:auto;z-index:auto}.vkuiInternalFormLayoutGroup--segmented .vkuiInternalRemovable__content>.vkuiFormItem:not(:first-of-type):not(:last-of-type) .vkuiFormField,.vkuiInternalFormLayoutGroup--segmented>.vkuiFormItem:not(:first-of-type):not(:last-of-type) .vkuiFormField{border-radius:0}.vkuiInternalFormLayoutGroup--segmented .vkuiInternalRemovable__content>:first-of-type:not(:last-of-type) .vkuiFormField,.vkuiInternalFormLayoutGroup--segmented>:first-of-type:not(:last-of-type) .vkuiFormField{border-bottom-right-radius:0;border-top-right-radius:0}.vkuiInternalFormLayoutGroup--segmented .vkuiInternalRemovable__content>.vkuiFormItem:not(:first-of-type):last-of-type .vkuiFormField,.vkuiInternalFormLayoutGroup--segmented>.vkuiFormItem:not(:first-of-type):last-of-type .vkuiFormField{border-bottom-left-radius:0;border-top-left-radius:0}
+.FormField {
+  position: relative;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  min-height: var(--vkui--size_field_height--regular);
+  font-family: var(--vkui--font_family_base);
+  -webkit-tap-highlight-color: transparent;
+  isolation: isolate;
+  border-radius: var(--vkui--size_border_radius--regular);
+  outline: none;
+}
+
+.FormField--sizeY-compact {
+  min-height: var(--vkui--size_field_height--compact);
+}
+
+@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
+  .FormField--sizeY-none {
+    min-height: var(--vkui--size_field_height--compact);
+  }
+}
+
+/* stylelint-disable-next-line vkui/atomic */
+
+.FormField > * {
+  border-radius: inherit;
+  z-index: var(--vkui_internal--z_index_form_field_element);
+}
+
+.FormField__before,
+.FormField__after {
+  position: relative;
+  z-index: var(--vkui_internal--z_index_form_field_side);
+  display: flex;
+  align-items: center;
+  align-content: center;
+  justify-content: center;
+  flex-shrink: 0;
+  min-width: var(--vkui--size_field_height--regular);
+  height: 100%;
+  color: var(--vkui--color_icon_secondary);
+}
+
+.FormField--sizeY-compact .FormField__before,
+.FormField--sizeY-compact .FormField__after {
+  min-width: var(--vkui--size_field_height--compact);
+  height: var(--vkui--size_field_height--compact);
+}
+
+@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
+  .FormField--sizeY-none .FormField__before,
+  .FormField--sizeY-none .FormField__after {
+    min-width: var(--vkui--size_field_height--compact);
+    height: var(--vkui--size_field_height--compact);
+  }
+}
+
+.FormField__before {
+  color: var(--vkui--color_icon_accent);
+}
+
+.FormField__after {
+  color: var(--vkui--color_icon_secondary);
+}
+
+.FormField__border {
+  pointer-events: none;
+  position: absolute;
+  z-index: var(--vkui_internal--z_index_form_field_border);
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  transform-origin: left top;
+  border: var(--vkui_internal--thin_border) solid transparent;
+  border-radius: inherit;
+}
+
+.FormField--mode-default .FormField__border {
+  border-color: var(--vkui--color_field_border_alpha);
+}
+
+.FormField--mode-default {
+  background-color: var(--vkui--color_field_background);
+}
+
+/**
+ * [start]
+ * CMP:
+ * FormItem
+ */
+
+:global(.vkuiInternalFormItem--status-error) .FormField__border,
+.FormField--status-error .FormField__border {
+  border-color: var(--vkui--color_stroke_negative);
+  z-index: var(--vkui_internal--z_index_form_field_status);
+}
+
+:global(.vkuiInternalFormItem--status-error) .FormField,
+.FormField--status-error {
+  background-color: var(--vkui--color_background_negative_tint);
+}
+
+:global(.vkuiInternalFormItem--status-valid) .FormField__border,
+.FormField--status-valid .FormField__border {
+  border-color: var(--vkui--color_stroke_positive);
+  z-index: var(--vkui_internal--z_index_form_field_status);
+}
+
+/* [end] */
+
+.FormField--disabled {
+  opacity: var(--vkui--opacity_disable_accessibility);
+  cursor: default;
+  pointer-events: none;
+}
+
+.FormField--hover {
+  background-color: var(--vkui--color_field_background);
+}
+
+.FormField--mode-default.FormField--hover .FormField__border {
+  border-color: var(--vkui--color_field_border_alpha--hover);
+  z-index: var(--vkui_internal--z_index_form_field_border_hover);
+}
+
+/* stylelint-disable-next-line vkui/atomic */
+
+.FormField *:focus {
+  outline: none;
+}
+
+/**
+ * CMP:
+ * ModalCardBase
+ */
+
+:global(.vkuiInternalModalCardBase__header) + .FormField,
+:global(.vkuiInternalModalCardBase__subheader) + .FormField {
+  margin-top: 16px;
+}
+
+/**
+ * CMP:
+ * NativeSelect
+ */
+
+:global(.vkuiInternalNativeSelect) .FormField__after {
+  pointer-events: none;
+}
+
+/**
+ * CMP:
+ * CalendarHeader
+ */
+
+:global(.vkuiInternalCalendarHeader__picker) .FormField__after {
+  min-width: 12px;
+  padding-right: 8px;
+}
+
+/**
+ * CMP:
+ * ChipsInput
+ */
+
+:global(.vkuiInternalChipsInput) .FormField__after {
+  z-index: var(--vkui_internal--z_index_form_field_side);
+}
+
+/**
+ * CMP:
+ * FormLayoutGroup
+ */
+
+:global(.vkuiInternalFormLayoutGroup--segmented) .FormField {
+  z-index: auto;
+  isolation: auto;
+}
+
+:global(.vkuiInternalFormLayoutGroup--segmented)
+  > :global(.vkuiInternalFormItem):not(:first-of-type):not(:last-of-type)
+  .FormField,
+:global(.vkuiInternalFormLayoutGroup--segmented)
+  :global(.vkuiInternalRemovable__content)
+  > :global(.vkuiInternalFormItem):not(:first-of-type):not(:last-of-type)
+  .FormField {
+  border-radius: 0;
+}
+
+:global(.vkuiInternalFormLayoutGroup--segmented) > *:first-of-type:not(:last-of-type) .FormField,
+:global(.vkuiInternalFormLayoutGroup--segmented)
+  :global(.vkuiInternalRemovable__content)
+  > *:first-of-type:not(:last-of-type)
+  .FormField {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+:global(.vkuiInternalFormLayoutGroup--segmented)
+  > :global(.vkuiInternalFormItem):not(:first-of-type):last-of-type
+  .FormField,
+:global(.vkuiInternalFormLayoutGroup--segmented)
+  :global(.vkuiInternalRemovable__content)
+  > :global(.vkuiInternalFormItem):not(:first-of-type):last-of-type
+  .FormField {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}

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

@@ -7,8 +7,10 @@ export interface FormItemProps extends React.AllHTMLAttributes<HTMLElement>, Has
     status?: 'default' | 'error' | 'valid';
     /**
      * Дает возможность удалить `FormItem`. Рекомендуется использовать только для `Input` или `Select`.
+     *
+     * Режим `indent` предназначен для визуального отступа
      */
-    removable?: boolean;
+    removable?: boolean | 'indent';
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/FormItem

package/dist/cssm/components/FormItem/FormItem.js

@@ -35,7 +35,8 @@ const sizeYClassNames = {
                 onRemove(e, rootEl.current);
             }
         },
-        removePlaceholder: removePlaceholder
+        removePlaceholder: removePlaceholder,
+        indent: removable === 'indent'
     }, /*#__PURE__*/ React.createElement("div", {
         className: classNames(styles['FormItem__removable'], 'vkuiInternalFormItem__removable')
     }, wrappedChildren)) : wrappedChildren);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/FormItem/FormItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './FormItem.module.css';\n\nconst sizeYClassNames = {\n  none: classNames(styles['FormItem--sizeY-none'], 'vkuiInternalFormItem--sizeY-none'),\n  [SizeType.COMPACT]: classNames(\n    styles['FormItem--sizeY-compact'],\n    'vkuiInternalFormItem--sizeY-compact',\n  ),\n};\n\nexport interface FormItemProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    RemovableProps {\n  top?: React.ReactNode;\n  bottom?: React.ReactNode;\n  status?: 'default' | 'error' | 'valid';\n  /**\n   * Дает возможность удалить `FormItem`. Рекомендуется использовать только для `Input` или `Select`.\n   */\n  removable?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormItem\n */\nexport const FormItem = ({\n  children,\n  top,\n  bottom,\n  status = 'default',\n  Component = 'div',\n  removable,\n  onRemove = noop,\n  removePlaceholder = 'Удалить',\n  getRootRef,\n  className,\n  ...restProps\n}: FormItemProps) => {\n  const rootEl = useExternRef(getRootRef);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const wrappedChildren = (\n    <React.Fragment>\n      {hasReactNode(top) && <Subhead className={styles['FormItem__top']}>{top}</Subhead>}\n      {children}\n      {hasReactNode(bottom) && <Footnote className={styles['FormItem__bottom']}>{bottom}</Footnote>}\n    </React.Fragment>\n  );\n\n  return (\n    <Component\n      {...restProps}\n      ref={rootEl}\n      className={classNames(\n        styles['FormItem'],\n        'vkuiInternalFormItem',\n        status !== 'default' &&\n          {\n            error: classNames(\n              styles['FormItem--status-error'],\n              'vkuiInternalFormItem--status-error',\n            ),\n            valid: classNames(\n              styles['FormItem--status-valid'],\n              'vkuiInternalFormItem--status-valid',\n            ),\n          }[status],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        hasReactNode(top) &&\n          classNames(styles['FormItem--withTop'], 'vkuiInternalFormItem--withTop'),\n        removable && classNames(styles['FormItem--removable'], 'vkuiInternalFormItem--removable'),\n        className,\n      )}\n    >\n      {removable ? (\n        <Removable\n          align=\"start\"\n          onRemove={(e) => {\n            if (rootEl?.current) {\n              onRemove(e, rootEl.current);\n            }\n          }}\n          removePlaceholder={removePlaceholder}\n        >\n          <div\n            className={classNames(styles['FormItem__removable'], 'vkuiInternalFormItem__removable')}\n          >\n            {wrappedChildren}\n          </div>\n        </Removable>\n      ) : (\n        wrappedChildren\n      )}\n    </Component>\n  );\n};\n"],"names":["React","classNames","hasReactNode","noop","useAdaptivity","useExternRef","SizeType","Removable","Footnote","Subhead","styles","sizeYClassNames","none","COMPACT","FormItem","children","top","bottom","status","Component","removable","onRemove","removePlaceholder","getRootRef","className","restProps","rootEl","sizeY","wrappedChildren","Fragment","ref","error","valid","REGULAR","align","e","current","div"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,kBAAkB;AACjE,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,SAAS,QAAwB,yBAAyB;AACnE,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,kBAAkB;IACtBC,MAAMX,WAAWS,MAAM,CAAC,uBAAuB,EAAE;IACjD,CAACJ,SAASO,OAAO,CAAC,EAAEZ,WAClBS,MAAM,CAAC,0BAA0B,EACjC;AAEJ;AAgBA;;CAEC,GACD,OAAO,MAAMI,WAAW,CAAC,EACvBC,SAAQ,EACRC,IAAG,EACHC,OAAM,EACNC,QAAS,UAAS,EAClBC,WAAY,MAAK,EACjBC,UAAS,EACTC,UAAWlB,KAAI,EACfmB,mBAAoB,UAAS,EAC7BC,WAAU,EACVC,UAAS,EACT,GAAGC,WACW,GAAK;IACnB,MAAMC,SAASrB,aAAakB;IAC5B,MAAM,EAAEI,OAAQ,OAAM,EAAE,GAAGvB;IAE3B,MAAMwB,gCACJ,oBAAC5B,MAAM6B,QAAQ,QACZ3B,aAAac,sBAAQ,oBAACP;QAAQe,WAAWd,MAAM,CAAC,gBAAgB;OAAGM,MACnED,UACAb,aAAae,yBAAW,oBAACT;QAASgB,WAAWd,MAAM,CAAC,mBAAmB;OAAGO;IAI/E,qBACE,oBAACE;QACE,GAAGM,SAAS;QACbK,KAAKJ;QACLF,WAAWvB,WACTS,MAAM,CAAC,WAAW,EAClB,wBACAQ,WAAW,aACT,CAAA;YACEa,OAAO9B,WACLS,MAAM,CAAC,yBAAyB,EAChC;YAEFsB,OAAO/B,WACLS,MAAM,CAAC,yBAAyB,EAChC;QAEJ,CAAA,CAAC,CAACQ,OAAO,EACXS,UAAUrB,SAAS2B,OAAO,IAAItB,eAAe,CAACgB,MAAM,EACpDzB,aAAac,QACXf,WAAWS,MAAM,CAAC,oBAAoB,EAAE,kCAC1CU,aAAanB,WAAWS,MAAM,CAAC,sBAAsB,EAAE,oCACvDc;OAGDJ,0BACC,oBAACb;QACC2B,OAAM;QACNb,UAAU,CAACc,IAAM;YACf,IAAIT,QAAQU,SAAS;gBACnBf,SAASc,GAAGT,OAAOU,OAAO;YAC5B,CAAC;QACH;QACAd,mBAAmBA;qBAEnB,oBAACe;QACCb,WAAWvB,WAAWS,MAAM,CAAC,sBAAsB,EAAE;OAEpDkB,oBAILA,eACD;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/components/FormItem/FormItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './FormItem.module.css';\n\nconst sizeYClassNames = {\n  none: classNames(styles['FormItem--sizeY-none'], 'vkuiInternalFormItem--sizeY-none'),\n  [SizeType.COMPACT]: classNames(\n    styles['FormItem--sizeY-compact'],\n    'vkuiInternalFormItem--sizeY-compact',\n  ),\n};\n\nexport interface FormItemProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    RemovableProps {\n  top?: React.ReactNode;\n  bottom?: React.ReactNode;\n  status?: 'default' | 'error' | 'valid';\n  /**\n   * Дает возможность удалить `FormItem`. Рекомендуется использовать только для `Input` или `Select`.\n   *\n   * Режим `indent` предназначен для визуального отступа\n   */\n  removable?: boolean | 'indent';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormItem\n */\nexport const FormItem = ({\n  children,\n  top,\n  bottom,\n  status = 'default',\n  Component = 'div',\n  removable,\n  onRemove = noop,\n  removePlaceholder = 'Удалить',\n  getRootRef,\n  className,\n  ...restProps\n}: FormItemProps) => {\n  const rootEl = useExternRef(getRootRef);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const wrappedChildren = (\n    <React.Fragment>\n      {hasReactNode(top) && <Subhead className={styles['FormItem__top']}>{top}</Subhead>}\n      {children}\n      {hasReactNode(bottom) && <Footnote className={styles['FormItem__bottom']}>{bottom}</Footnote>}\n    </React.Fragment>\n  );\n\n  return (\n    <Component\n      {...restProps}\n      ref={rootEl}\n      className={classNames(\n        styles['FormItem'],\n        'vkuiInternalFormItem',\n        status !== 'default' &&\n          {\n            error: classNames(\n              styles['FormItem--status-error'],\n              'vkuiInternalFormItem--status-error',\n            ),\n            valid: classNames(\n              styles['FormItem--status-valid'],\n              'vkuiInternalFormItem--status-valid',\n            ),\n          }[status],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        hasReactNode(top) &&\n          classNames(styles['FormItem--withTop'], 'vkuiInternalFormItem--withTop'),\n        removable && classNames(styles['FormItem--removable'], 'vkuiInternalFormItem--removable'),\n        className,\n      )}\n    >\n      {removable ? (\n        <Removable\n          align=\"start\"\n          onRemove={(e) => {\n            if (rootEl?.current) {\n              onRemove(e, rootEl.current);\n            }\n          }}\n          removePlaceholder={removePlaceholder}\n          indent={removable === 'indent'}\n        >\n          <div\n            className={classNames(styles['FormItem__removable'], 'vkuiInternalFormItem__removable')}\n          >\n            {wrappedChildren}\n          </div>\n        </Removable>\n      ) : (\n        wrappedChildren\n      )}\n    </Component>\n  );\n};\n"],"names":["React","classNames","hasReactNode","noop","useAdaptivity","useExternRef","SizeType","Removable","Footnote","Subhead","styles","sizeYClassNames","none","COMPACT","FormItem","children","top","bottom","status","Component","removable","onRemove","removePlaceholder","getRootRef","className","restProps","rootEl","sizeY","wrappedChildren","Fragment","ref","error","valid","REGULAR","align","e","current","indent","div"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,kBAAkB;AACjE,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,SAAS,QAAwB,yBAAyB;AACnE,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,kBAAkB;IACtBC,MAAMX,WAAWS,MAAM,CAAC,uBAAuB,EAAE;IACjD,CAACJ,SAASO,OAAO,CAAC,EAAEZ,WAClBS,MAAM,CAAC,0BAA0B,EACjC;AAEJ;AAkBA;;CAEC,GACD,OAAO,MAAMI,WAAW,CAAC,EACvBC,SAAQ,EACRC,IAAG,EACHC,OAAM,EACNC,QAAS,UAAS,EAClBC,WAAY,MAAK,EACjBC,UAAS,EACTC,UAAWlB,KAAI,EACfmB,mBAAoB,UAAS,EAC7BC,WAAU,EACVC,UAAS,EACT,GAAGC,WACW,GAAK;IACnB,MAAMC,SAASrB,aAAakB;IAC5B,MAAM,EAAEI,OAAQ,OAAM,EAAE,GAAGvB;IAE3B,MAAMwB,gCACJ,oBAAC5B,MAAM6B,QAAQ,QACZ3B,aAAac,sBAAQ,oBAACP;QAAQe,WAAWd,MAAM,CAAC,gBAAgB;OAAGM,MACnED,UACAb,aAAae,yBAAW,oBAACT;QAASgB,WAAWd,MAAM,CAAC,mBAAmB;OAAGO;IAI/E,qBACE,oBAACE;QACE,GAAGM,SAAS;QACbK,KAAKJ;QACLF,WAAWvB,WACTS,MAAM,CAAC,WAAW,EAClB,wBACAQ,WAAW,aACT,CAAA;YACEa,OAAO9B,WACLS,MAAM,CAAC,yBAAyB,EAChC;YAEFsB,OAAO/B,WACLS,MAAM,CAAC,yBAAyB,EAChC;QAEJ,CAAA,CAAC,CAACQ,OAAO,EACXS,UAAUrB,SAAS2B,OAAO,IAAItB,eAAe,CAACgB,MAAM,EACpDzB,aAAac,QACXf,WAAWS,MAAM,CAAC,oBAAoB,EAAE,kCAC1CU,aAAanB,WAAWS,MAAM,CAAC,sBAAsB,EAAE,oCACvDc;OAGDJ,0BACC,oBAACb;QACC2B,OAAM;QACNb,UAAU,CAACc,IAAM;YACf,IAAIT,QAAQU,SAAS;gBACnBf,SAASc,GAAGT,OAAOU,OAAO;YAC5B,CAAC;QACH;QACAd,mBAAmBA;QACnBe,QAAQjB,cAAc;qBAEtB,oBAACkB;QACCd,WAAWvB,WAAWS,MAAM,CAAC,sBAAsB,EAAE;OAEpDkB,oBAILA,eACD;AAGP,EAAE"}

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')