@vkontakte/vkui 5.3.1 → 5.4.0

package/dist/cssm/components/HorizontalScroll/HorizontalScrollArrow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/HorizontalScroll/HorizontalScrollArrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon16Chevron,\n  Icon16ChevronLeft,\n  Icon24Chevron,\n  Icon24ChevronCompactLeft,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Tappable } from '../Tappable/Tappable';\nimport styles from './HorizontalScrollArrow.module.css';\n\nexport interface HorizontalScrollArrowProps {\n  direction: 'left' | 'right';\n  size?: 'm' | 'l';\n  onClick(event: React.MouseEvent): void;\n  className?: string;\n}\n\nexport const HorizontalScrollArrow = ({\n  size = 'l',\n  direction,\n  onClick,\n  className,\n  ...restProps\n}: HorizontalScrollArrowProps) => {\n  let ArrowIcon: React.ComponentType<unknown>;\n\n  if (size === 'm') {\n    ArrowIcon = direction === 'left' ? Icon16ChevronLeft : Icon16Chevron;\n  } else {\n    ArrowIcon = direction === 'left' ? Icon24ChevronCompactLeft : Icon24Chevron;\n  }\n\n  return (\n    <Tappable\n      {...restProps}\n      Component=\"button\"\n      hasHover={false}\n      hasActive={false}\n      className={classNames(\n        styles['HorizontalScrollArrow'],\n        {\n          m: styles['HorizontalScrollArrow--size-m'],\n          l: styles['HorizontalScrollArrow--size-l'],\n        }[size],\n        {\n          left: styles['HorizontalScrollArrow--direction-left'],\n          right: styles['HorizontalScrollArrow--direction-right'],\n        }[direction],\n        className,\n      )}\n      onClick={onClick}\n    >\n      <span className={styles['HorizontalScrollArrow__icon']}>\n        <ArrowIcon />\n      </span>\n    </Tappable>\n  );\n};\n"],"names":["React","Icon16Chevron","Icon16ChevronLeft","Icon24Chevron","Icon24ChevronCompactLeft","classNames","Tappable","styles","HorizontalScrollArrow","size","direction","onClick","className","restProps","ArrowIcon","Component","hasHover","hasActive","m","l","left","right","span"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,aAAa,EACbC,iBAAiB,EACjBC,aAAa,EACbC,wBAAwB,QACnB,mBAAmB;AAC1B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,OAAOC,YAAY,qCAAqC;AASxD,OAAO,MAAMC,wBAAwB,CAAC,EACpCC,MAAO,IAAG,EACVC,UAAS,EACTC,QAAO,EACPC,UAAS,EACT,GAAGC,WACwB,GAAK;IAChC,IAAIC;IAEJ,IAAIL,SAAS,KAAK;QAChBK,YAAYJ,cAAc,SAASR,oBAAoBD,aAAa;IACtE,OAAO;QACLa,YAAYJ,cAAc,SAASN,2BAA2BD,aAAa;IAC7E,CAAC;IAED,qBACE,oBAACG;QACE,GAAGO,SAAS;QACbE,WAAU;QACVC,UAAU,KAAK;QACfC,WAAW,KAAK;QAChBL,WAAWP,WACTE,MAAM,CAAC,wBAAwB,EAC/B;YACEW,GAAGX,MAAM,CAAC,gCAAgC;YAC1CY,GAAGZ,MAAM,CAAC,gCAAgC;QAC5C,CAAC,CAACE,KAAK,EACP;YACEW,MAAMb,MAAM,CAAC,wCAAwC;YACrDc,OAAOd,MAAM,CAAC,yCAAyC;QACzD,CAAC,CAACG,UAAU,EACZE;QAEFD,SAASA;qBAET,oBAACW;QAAKV,WAAWL,MAAM,CAAC,8BAA8B;qBACpD,oBAACO;AAIT,EAAE"}
+{"version":3,"sources":["../../../../src/components/HorizontalScroll/HorizontalScrollArrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon16Chevron,\n  Icon16ChevronLeft,\n  Icon24Chevron,\n  Icon24ChevronCompactLeft,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Tappable } from '../Tappable/Tappable';\nimport styles from './HorizontalScrollArrow.module.css';\n\nexport interface HorizontalScrollArrowProps {\n  direction: 'left' | 'right';\n  size?: 'm' | 'l';\n  offsetY?: number | string;\n  onClick(event: React.MouseEvent): void;\n  className?: string;\n}\n\nexport const HorizontalScrollArrow = ({\n  size = 'l',\n  offsetY,\n  direction,\n  onClick,\n  className,\n  ...restProps\n}: HorizontalScrollArrowProps) => {\n  let ArrowIcon: React.ComponentType<unknown>;\n\n  if (size === 'm') {\n    ArrowIcon = direction === 'left' ? Icon16ChevronLeft : Icon16Chevron;\n  } else {\n    ArrowIcon = direction === 'left' ? Icon24ChevronCompactLeft : Icon24Chevron;\n  }\n\n  return (\n    <Tappable\n      {...restProps}\n      Component=\"button\"\n      hasHover={false}\n      hasActive={false}\n      className={classNames(\n        styles['HorizontalScrollArrow'],\n        {\n          m: styles['HorizontalScrollArrow--size-m'],\n          l: styles['HorizontalScrollArrow--size-l'],\n        }[size],\n        {\n          left: styles['HorizontalScrollArrow--direction-left'],\n          right: styles['HorizontalScrollArrow--direction-right'],\n        }[direction],\n        className,\n      )}\n      onClick={onClick}\n    >\n      <span\n        className={styles['HorizontalScrollArrow__icon']}\n        style={offsetY ? { top: offsetY } : undefined}\n      >\n        <ArrowIcon />\n      </span>\n    </Tappable>\n  );\n};\n"],"names":["React","Icon16Chevron","Icon16ChevronLeft","Icon24Chevron","Icon24ChevronCompactLeft","classNames","Tappable","styles","HorizontalScrollArrow","size","offsetY","direction","onClick","className","restProps","ArrowIcon","Component","hasHover","hasActive","m","l","left","right","span","style","top","undefined"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,aAAa,EACbC,iBAAiB,EACjBC,aAAa,EACbC,wBAAwB,QACnB,mBAAmB;AAC1B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,OAAOC,YAAY,qCAAqC;AAUxD,OAAO,MAAMC,wBAAwB,CAAC,EACpCC,MAAO,IAAG,EACVC,QAAO,EACPC,UAAS,EACTC,QAAO,EACPC,UAAS,EACT,GAAGC,WACwB,GAAK;IAChC,IAAIC;IAEJ,IAAIN,SAAS,KAAK;QAChBM,YAAYJ,cAAc,SAAST,oBAAoBD,aAAa;IACtE,OAAO;QACLc,YAAYJ,cAAc,SAASP,2BAA2BD,aAAa;IAC7E,CAAC;IAED,qBACE,oBAACG;QACE,GAAGQ,SAAS;QACbE,WAAU;QACVC,UAAU,KAAK;QACfC,WAAW,KAAK;QAChBL,WAAWR,WACTE,MAAM,CAAC,wBAAwB,EAC/B;YACEY,GAAGZ,MAAM,CAAC,gCAAgC;YAC1Ca,GAAGb,MAAM,CAAC,gCAAgC;QAC5C,CAAC,CAACE,KAAK,EACP;YACEY,MAAMd,MAAM,CAAC,wCAAwC;YACrDe,OAAOf,MAAM,CAAC,yCAAyC;QACzD,CAAC,CAACI,UAAU,EACZE;QAEFD,SAASA;qBAET,oBAACW;QACCV,WAAWN,MAAM,CAAC,8BAA8B;QAChDiB,OAAOd,UAAU;YAAEe,KAAKf;QAAQ,IAAIgB,SAAS;qBAE7C,oBAACX;AAIT,EAAE"}

package/dist/cssm/components/HorizontalScroll/HorizontalScrollArrow.module.css

@@ -1 +1,67 @@
-.vkuiHorizontalScrollArrow{background-color:initial;border:none;cursor:pointer;display:flex;flex-direction:column;height:100%;justify-content:center;opacity:0;padding:0;position:absolute;top:0;transition:opacity .15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:var(--vkui--animation_easing_platform);-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto}.vkuiHorizontalScrollArrow__icon{align-items:center;background-color:#fff;background-color:var(--vkui--color_background_modal);box-shadow:0 0 2px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.08);box-shadow:var(--vkui--elevation3);color:#99a2ad;color:var(--vkui--color_icon_secondary);display:flex;justify-content:center}.vkuiHorizontalScrollArrow--size-m .vkuiHorizontalScrollArrow__icon{border-radius:14px;height:28px;width:28px}.vkuiHorizontalScrollArrow--size-l .vkuiHorizontalScrollArrow__icon{border-radius:24px;height:40px;width:40px}.vkuiHorizontalScrollArrow--direction-left{left:0;padding-left:16px;padding-left:var(--vkui--size_base_padding_horizontal--regular,16px)}.vkuiHorizontalScrollArrow--direction-right{padding-right:16px;padding-right:var(--vkui--size_base_padding_horizontal--regular,16px);right:0}.vkuiInternalBaseGallery:hover .vkuiHorizontalScrollArrow,.vkuiInternalHorizontalScroll:hover .vkuiHorizontalScrollArrow{opacity:.64;opacity:var(--vkui--opacity_disable_accessibility)}.vkuiInternalBaseGallery:hover .vkuiHorizontalScrollArrow:hover,.vkuiInternalHorizontalScroll--withConstArrows .vkuiHorizontalScrollArrow,.vkuiInternalHorizontalScroll--withConstArrows:hover .vkuiHorizontalScrollArrow,.vkuiInternalHorizontalScroll:hover .vkuiHorizontalScrollArrow:hover{opacity:1}
+.HorizontalScrollArrow {
+  position: absolute;
+  cursor: pointer;
+  -webkit-user-select: auto;
+     -moz-user-select: auto;
+      -ms-user-select: auto;
+          user-select: auto;
+  top: 0;
+  height: 100%;
+  padding: 0;
+  opacity: 0;
+  border: none;
+  background-color: transparent;
+  transition: opacity 0.15s;
+  transition-timing-function: var(--vkui--animation_easing_platform);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.HorizontalScrollArrow__icon {
+  position: relative;
+  background-color: var(--vkui--color_background_modal);
+  color: var(--vkui--color_icon_secondary);
+  box-shadow: var(--vkui--elevation3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.HorizontalScrollArrow--size-m .HorizontalScrollArrow__icon {
+  width: 28px;
+  height: 28px;
+  border-radius: 14px;
+}
+
+.HorizontalScrollArrow--size-l .HorizontalScrollArrow__icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 24px;
+}
+
+.HorizontalScrollArrow--direction-left {
+  padding-left: var(--vkui--size_base_padding_horizontal--regular, 16px);
+  left: 0;
+}
+
+.HorizontalScrollArrow--direction-right {
+  padding-right: var(--vkui--size_base_padding_horizontal--regular, 16px);
+  right: 0;
+}
+
+/**
+ * CMP: BaseGallery, HorizontalScroll
+ */
+
+:global(.vkuiInternalBaseGallery):hover .HorizontalScrollArrow,
+:global(.vkuiInternalHorizontalScroll):hover .HorizontalScrollArrow {
+  opacity: var(--vkui--opacity_disable_accessibility);
+}
+
+:global(.vkuiInternalBaseGallery):hover .HorizontalScrollArrow:hover,
+:global(.vkuiInternalHorizontalScroll):hover .HorizontalScrollArrow:hover,
+:global(.vkuiInternalHorizontalScroll--withConstArrows) .HorizontalScrollArrow,
+:global(.vkuiInternalHorizontalScroll--withConstArrows):hover .HorizontalScrollArrow {
+  opacity: 1;
+}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { PopperCommonProps } from '../Popper/Popper';
-export interface HoverPopperProps extends PopperCommonProps {
+export interface HoverPopperProps extends Omit<PopperCommonProps, 'content'> {
     /**
      * Содержимое тултипа
      */

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/HoverPopper/HoverPopper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { usePatchChildrenRef } from '../../hooks/usePatchChildrenRef';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { Popper, PopperCommonProps } from '../Popper/Popper';\n\nexport interface HoverPopperProps extends PopperCommonProps {\n  /**\n   * Содержимое тултипа\n   */\n  content?: React.ReactNode;\n  /**\n   * Если передан, то тултип будет показан/скрыт в зависимости от значения свойства\n   */\n  shown?: boolean;\n  /**\n   * Вызывается при каждом изменении видимости тултипа\n   */\n  onShownChange?: (shown: boolean) => void;\n  /**\n   * Количество миллисекунд, после которых произойдет показ дропдауна\n   */\n  showDelay?: number;\n  /**\n   * Количество миллисекунд, после которых произойдет скрытие дропдауна\n   */\n  hideDelay?: number;\n  /**\n   * Либо jsx-элемент (div, button, etc.), либо компонент со свойством `getRootRef`, которое применяется к корневому элементу компонента\n   */\n  children?: React.ReactElement;\n}\n\nexport const HoverPopper = ({\n  getRef,\n  content,\n  children,\n  onShownChange,\n  shown: _shown,\n  showDelay = 150,\n  hideDelay = 150,\n  ...restProps\n}: HoverPopperProps) => {\n  const [computedShown, setComputedShown] = React.useState(_shown || false);\n\n  const shown = typeof _shown === 'boolean' ? _shown : computedShown;\n\n  const setShown = (value: boolean) => {\n    if (typeof _shown !== 'boolean') {\n      setComputedShown(value);\n    }\n    typeof onShownChange === 'function' && onShownChange(value);\n  };\n\n  const showTimeout = useTimeout(() => {\n    setShown(true);\n  }, showDelay);\n\n  const hideTimeout = useTimeout(() => {\n    setShown(false);\n  }, hideDelay);\n\n  const [childRef, child] = usePatchChildrenRef(children);\n\n  const onTargetEnter = () => {\n    hideTimeout.clear();\n    showTimeout.set();\n  };\n\n  const onTargetLeave = () => {\n    showTimeout.clear();\n    hideTimeout.set();\n  };\n\n  const targetEnterListener = useEventListener('pointerenter', onTargetEnter);\n  const targetLeaveListener = useEventListener('pointerleave', onTargetLeave);\n\n  useIsomorphicLayoutEffect(() => {\n    if (childRef.current) {\n      targetEnterListener.add(childRef.current);\n      targetLeaveListener.add(childRef.current);\n    }\n  }, []);\n\n  return (\n    <React.Fragment>\n      {child}\n      {shown && (\n        <Popper\n          {...restProps}\n          onMouseOver={hideTimeout.clear}\n          onMouseOut={onTargetLeave}\n          getRef={getRef}\n          targetRef={childRef}\n        >\n          {content}\n        </Popper>\n      )}\n    </React.Fragment>\n  );\n};\n"],"names":["React","useEventListener","usePatchChildrenRef","useTimeout","useIsomorphicLayoutEffect","Popper","HoverPopper","getRef","content","children","onShownChange","shown","_shown","showDelay","hideDelay","restProps","computedShown","setComputedShown","useState","setShown","value","showTimeout","hideTimeout","childRef","child","onTargetEnter","clear","set","onTargetLeave","targetEnterListener","targetLeaveListener","current","add","Fragment","onMouseOver","onMouseOut","targetRef"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,QAAQ,+BAA+B;AAChE,SAASC,mBAAmB,QAAQ,kCAAkC;AACtE,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,yBAAyB,QAAQ,sCAAsC;AAChF,SAASC,MAAM,QAA2B,mBAAmB;AA6B7D,OAAO,MAAMC,cAAc,CAAC,EAC1BC,OAAM,EACNC,QAAO,EACPC,SAAQ,EACRC,cAAa,EACbC,OAAOC,OAAM,EACbC,WAAY,IAAG,EACfC,WAAY,IAAG,EACf,GAAGC,WACc,GAAK;IACtB,MAAM,CAACC,eAAeC,iBAAiB,GAAGjB,MAAMkB,QAAQ,CAACN,UAAU,KAAK;IAExE,MAAMD,QAAQ,OAAOC,WAAW,YAAYA,SAASI,aAAa;IAElE,MAAMG,WAAW,CAACC,QAAmB;QACnC,IAAI,OAAOR,WAAW,WAAW;YAC/BK,iBAAiBG;QACnB,CAAC;QACD,OAAOV,kBAAkB,cAAcA,cAAcU;IACvD;IAEA,MAAMC,cAAclB,WAAW,IAAM;QACnCgB,SAAS,IAAI;IACf,GAAGN;IAEH,MAAMS,cAAcnB,WAAW,IAAM;QACnCgB,SAAS,KAAK;IAChB,GAAGL;IAEH,MAAM,CAACS,UAAUC,MAAM,GAAGtB,oBAAoBO;IAE9C,MAAMgB,gBAAgB,IAAM;QAC1BH,YAAYI,KAAK;QACjBL,YAAYM,GAAG;IACjB;IAEA,MAAMC,gBAAgB,IAAM;QAC1BP,YAAYK,KAAK;QACjBJ,YAAYK,GAAG;IACjB;IAEA,MAAME,sBAAsB5B,iBAAiB,gBAAgBwB;IAC7D,MAAMK,sBAAsB7B,iBAAiB,gBAAgB2B;IAE7DxB,0BAA0B,IAAM;QAC9B,IAAImB,SAASQ,OAAO,EAAE;YACpBF,oBAAoBG,GAAG,CAACT,SAASQ,OAAO;YACxCD,oBAAoBE,GAAG,CAACT,SAASQ,OAAO;QAC1C,CAAC;IACH,GAAG,EAAE;IAEL,qBACE,oBAAC/B,MAAMiC,QAAQ,QACZT,OACAb,uBACC,oBAACN;QACE,GAAGU,SAAS;QACbmB,aAAaZ,YAAYI,KAAK;QAC9BS,YAAYP;QACZrB,QAAQA;QACR6B,WAAWb;OAEVf;AAKX,EAAE"}
+{"version":3,"sources":["../../../../src/components/HoverPopper/HoverPopper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { usePatchChildrenRef } from '../../hooks/usePatchChildrenRef';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { Popper, PopperCommonProps } from '../Popper/Popper';\n\nexport interface HoverPopperProps extends Omit<PopperCommonProps, 'content'> {\n  /**\n   * Содержимое тултипа\n   */\n  content?: React.ReactNode;\n  /**\n   * Если передан, то тултип будет показан/скрыт в зависимости от значения свойства\n   */\n  shown?: boolean;\n  /**\n   * Вызывается при каждом изменении видимости тултипа\n   */\n  onShownChange?: (shown: boolean) => void;\n  /**\n   * Количество миллисекунд, после которых произойдет показ дропдауна\n   */\n  showDelay?: number;\n  /**\n   * Количество миллисекунд, после которых произойдет скрытие дропдауна\n   */\n  hideDelay?: number;\n  /**\n   * Либо jsx-элемент (div, button, etc.), либо компонент со свойством `getRootRef`, которое применяется к корневому элементу компонента\n   */\n  children?: React.ReactElement;\n}\n\nexport const HoverPopper = ({\n  getRef,\n  content,\n  children,\n  onShownChange,\n  shown: _shown,\n  showDelay = 150,\n  hideDelay = 150,\n  ...restProps\n}: HoverPopperProps) => {\n  const [computedShown, setComputedShown] = React.useState(_shown || false);\n\n  const shown = typeof _shown === 'boolean' ? _shown : computedShown;\n\n  const setShown = (value: boolean) => {\n    if (typeof _shown !== 'boolean') {\n      setComputedShown(value);\n    }\n    typeof onShownChange === 'function' && onShownChange(value);\n  };\n\n  const showTimeout = useTimeout(() => {\n    setShown(true);\n  }, showDelay);\n\n  const hideTimeout = useTimeout(() => {\n    setShown(false);\n  }, hideDelay);\n\n  const [childRef, child] = usePatchChildrenRef(children);\n\n  const onTargetEnter = () => {\n    hideTimeout.clear();\n    showTimeout.set();\n  };\n\n  const onTargetLeave = () => {\n    showTimeout.clear();\n    hideTimeout.set();\n  };\n\n  const targetEnterListener = useEventListener('pointerenter', onTargetEnter);\n  const targetLeaveListener = useEventListener('pointerleave', onTargetLeave);\n\n  useIsomorphicLayoutEffect(() => {\n    if (childRef.current) {\n      targetEnterListener.add(childRef.current);\n      targetLeaveListener.add(childRef.current);\n    }\n  }, []);\n\n  return (\n    <React.Fragment>\n      {child}\n      {shown && (\n        <Popper\n          {...restProps}\n          onMouseOver={hideTimeout.clear}\n          onMouseOut={onTargetLeave}\n          getRef={getRef}\n          targetRef={childRef}\n        >\n          {content}\n        </Popper>\n      )}\n    </React.Fragment>\n  );\n};\n"],"names":["React","useEventListener","usePatchChildrenRef","useTimeout","useIsomorphicLayoutEffect","Popper","HoverPopper","getRef","content","children","onShownChange","shown","_shown","showDelay","hideDelay","restProps","computedShown","setComputedShown","useState","setShown","value","showTimeout","hideTimeout","childRef","child","onTargetEnter","clear","set","onTargetLeave","targetEnterListener","targetLeaveListener","current","add","Fragment","onMouseOver","onMouseOut","targetRef"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,QAAQ,+BAA+B;AAChE,SAASC,mBAAmB,QAAQ,kCAAkC;AACtE,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,yBAAyB,QAAQ,sCAAsC;AAChF,SAASC,MAAM,QAA2B,mBAAmB;AA6B7D,OAAO,MAAMC,cAAc,CAAC,EAC1BC,OAAM,EACNC,QAAO,EACPC,SAAQ,EACRC,cAAa,EACbC,OAAOC,OAAM,EACbC,WAAY,IAAG,EACfC,WAAY,IAAG,EACf,GAAGC,WACc,GAAK;IACtB,MAAM,CAACC,eAAeC,iBAAiB,GAAGjB,MAAMkB,QAAQ,CAACN,UAAU,KAAK;IAExE,MAAMD,QAAQ,OAAOC,WAAW,YAAYA,SAASI,aAAa;IAElE,MAAMG,WAAW,CAACC,QAAmB;QACnC,IAAI,OAAOR,WAAW,WAAW;YAC/BK,iBAAiBG;QACnB,CAAC;QACD,OAAOV,kBAAkB,cAAcA,cAAcU;IACvD;IAEA,MAAMC,cAAclB,WAAW,IAAM;QACnCgB,SAAS,IAAI;IACf,GAAGN;IAEH,MAAMS,cAAcnB,WAAW,IAAM;QACnCgB,SAAS,KAAK;IAChB,GAAGL;IAEH,MAAM,CAACS,UAAUC,MAAM,GAAGtB,oBAAoBO;IAE9C,MAAMgB,gBAAgB,IAAM;QAC1BH,YAAYI,KAAK;QACjBL,YAAYM,GAAG;IACjB;IAEA,MAAMC,gBAAgB,IAAM;QAC1BP,YAAYK,KAAK;QACjBJ,YAAYK,GAAG;IACjB;IAEA,MAAME,sBAAsB5B,iBAAiB,gBAAgBwB;IAC7D,MAAMK,sBAAsB7B,iBAAiB,gBAAgB2B;IAE7DxB,0BAA0B,IAAM;QAC9B,IAAImB,SAASQ,OAAO,EAAE;YACpBF,oBAAoBG,GAAG,CAACT,SAASQ,OAAO;YACxCD,oBAAoBE,GAAG,CAACT,SAASQ,OAAO;QAC1C,CAAC;IACH,GAAG,EAAE;IAEL,qBACE,oBAAC/B,MAAMiC,QAAQ,QACZT,OACAb,uBACC,oBAACN;QACE,GAAGU,SAAS;QACbmB,aAAaZ,YAAYI,KAAK;QAC9BS,YAAYP;QACZrB,QAAQA;QACR6B,WAAWb;OAEVf;AAKX,EAAE"}

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

@@ -1,7 +1,7 @@
-import * as React from 'react';
+/// <reference types="react" />
+import { HasChildren } from '../../types';
 import { TappableProps } from '../Tappable/Tappable';
-export interface IconButtonProps extends TappableProps {
-    children?: React.ReactNode;
+export interface IconButtonProps extends TappableProps, HasChildren {
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/IconButton

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport styles from './IconButton.module.css';\n\nconst sizeYClassNames = {\n  none: styles['IconButton--sizeY-none'],\n  [SizeType.COMPACT]: styles['IconButton--sizeY-compact'],\n};\n\nexport interface IconButtonProps extends TappableProps {\n  children?: React.ReactNode;\n}\n\nconst warn = warnOnce('IconButton');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/IconButton\n */\nexport const IconButton = ({ children, className, ...restProps }: IconButtonProps) => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n\n  if (process.env.NODE_ENV === 'development') {\n    const isAccessible = restProps['aria-label'] || restProps['aria-labelledby'];\n\n    if (!isAccessible) {\n      warn(COMMON_WARNINGS.a11y[restProps.href ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n\n  return (\n    <Tappable\n      activeEffectDelay={200}\n      activeMode=\"background\"\n      Component={restProps.href ? 'a' : 'button'}\n      {...restProps}\n      className={classNames(\n        styles['IconButton'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        platform === Platform.IOS && styles['IconButton--ios'],\n        className,\n      )}\n    >\n      {children}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","usePlatform","SizeType","Platform","COMMON_WARNINGS","warnOnce","Tappable","styles","sizeYClassNames","none","COMPACT","warn","IconButton","children","className","restProps","platform","sizeY","process","env","NODE_ENV","isAccessible","a11y","href","activeEffectDelay","activeMode","Component","REGULAR","IOS"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,eAAe,EAAEC,QAAQ,QAAQ,qBAAqB;AAC/D,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,OAAOC,YAAY,0BAA0B;AAE7C,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,yBAAyB;IACtC,CAACL,SAASQ,OAAO,CAAC,EAAEH,MAAM,CAAC,4BAA4B;AACzD;AAMA,MAAMI,OAAON,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMO,aAAa,CAAC,EAAEC,SAAQ,EAAEC,UAAS,EAAE,GAAGC,WAA4B,GAAK;IACpF,MAAMC,WAAWf;IACjB,MAAM,EAAEgB,OAAQ,OAAM,EAAE,GAAGjB;IAE3B,IAAIkB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,MAAMC,eAAeN,SAAS,CAAC,aAAa,IAAIA,SAAS,CAAC,kBAAkB;QAE5E,IAAI,CAACM,cAAc;YACjBV,KAAKP,gBAAgBkB,IAAI,CAACP,UAAUQ,IAAI,GAAG,cAAc,aAAa,CAAC,EAAE;QAC3E,CAAC;IACH,CAAC;IAED,qBACE,oBAACjB;QACCkB,mBAAmB;QACnBC,YAAW;QACXC,WAAWX,UAAUQ,IAAI,GAAG,MAAM,QAAQ;QACzC,GAAGR,SAAS;QACbD,WAAWf,WACTQ,MAAM,CAAC,aAAa,EACpBU,UAAUf,SAASyB,OAAO,IAAInB,eAAe,CAACS,MAAM,EACpDD,aAAab,SAASyB,GAAG,IAAIrB,MAAM,CAAC,kBAAkB,EACtDO;OAGDD;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { HasChildren } from '../../types';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport styles from './IconButton.module.css';\n\nconst sizeYClassNames = {\n  none: styles['IconButton--sizeY-none'],\n  [SizeType.COMPACT]: styles['IconButton--sizeY-compact'],\n};\n\nexport interface IconButtonProps extends TappableProps, HasChildren {}\n\nconst warn = warnOnce('IconButton');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/IconButton\n */\nexport const IconButton = ({ children, className, ...restProps }: IconButtonProps) => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n\n  if (process.env.NODE_ENV === 'development') {\n    const isAccessible = restProps['aria-label'] || restProps['aria-labelledby'];\n\n    if (!isAccessible) {\n      warn(COMMON_WARNINGS.a11y[restProps.href ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n\n  return (\n    <Tappable\n      activeEffectDelay={200}\n      activeMode=\"background\"\n      Component={restProps.href ? 'a' : 'button'}\n      {...restProps}\n      className={classNames(\n        styles['IconButton'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        platform === Platform.IOS && styles['IconButton--ios'],\n        className,\n      )}\n    >\n      {children}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","usePlatform","SizeType","Platform","COMMON_WARNINGS","warnOnce","Tappable","styles","sizeYClassNames","none","COMPACT","warn","IconButton","children","className","restProps","platform","sizeY","process","env","NODE_ENV","isAccessible","a11y","href","activeEffectDelay","activeMode","Component","REGULAR","IOS"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,eAAe,EAAEC,QAAQ,QAAQ,qBAAqB;AAE/D,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,OAAOC,YAAY,0BAA0B;AAE7C,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,yBAAyB;IACtC,CAACL,SAASQ,OAAO,CAAC,EAAEH,MAAM,CAAC,4BAA4B;AACzD;AAIA,MAAMI,OAAON,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMO,aAAa,CAAC,EAAEC,SAAQ,EAAEC,UAAS,EAAE,GAAGC,WAA4B,GAAK;IACpF,MAAMC,WAAWf;IACjB,MAAM,EAAEgB,OAAQ,OAAM,EAAE,GAAGjB;IAE3B,IAAIkB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,MAAMC,eAAeN,SAAS,CAAC,aAAa,IAAIA,SAAS,CAAC,kBAAkB;QAE5E,IAAI,CAACM,cAAc;YACjBV,KAAKP,gBAAgBkB,IAAI,CAACP,UAAUQ,IAAI,GAAG,cAAc,aAAa,CAAC,EAAE;QAC3E,CAAC;IACH,CAAC;IAED,qBACE,oBAACjB;QACCkB,mBAAmB;QACnBC,YAAW;QACXC,WAAWX,UAAUQ,IAAI,GAAG,MAAM,QAAQ;QACzC,GAAGR,SAAS;QACbD,WAAWf,WACTQ,MAAM,CAAC,aAAa,EACpBU,UAAUf,SAASyB,OAAO,IAAInB,eAAe,CAACS,MAAM,EACpDD,aAAab,SAASyB,GAAG,IAAIrB,MAAM,CAAC,kBAAkB,EACtDO;OAGDD;AAGP,EAAE"}

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

@@ -1 +1,152 @@
-.vkuiIconButton{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;border-radius:9999px;box-shadow:none;color:currentColor;display:block;height:48px;margin:0;padding:0;position:relative}.vkuiIconButton--sizeY-compact{height:44px}.vkuiIconButton[disabled]{opacity:.64;opacity:var(--vkui--opacity_disable_accessibility)}.vkuiIconButton--ios{border-radius:8px;border-radius:var(--vkui--size_border_radius--regular)}.vkuiIconButton .vkuiIcon--16{padding:16px}.vkuiIconButton .vkuiIcon--16.vkuiIcon--w-8{padding:16px 14px}.vkuiIconButton--sizeY-compact .vkuiIcon--16,.vkuiIconButton--sizeY-compact .vkuiIcon--16.vkuiIcon--w-8{padding:14px}.vkuiIconButton .vkuiIcon--24{padding:12px}.vkuiIconButton .vkuiIcon--28,.vkuiIconButton--sizeY-compact .vkuiIcon--24{padding:10px}.vkuiIconButton--sizeY-compact .vkuiIcon--28{padding:8px}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiIconButton--sizeY-none{height:44px}.vkuiIconButton--sizeY-none .vkuiIcon--16,.vkuiIconButton--sizeY-none .vkuiIcon--16.vkuiIcon--w-8{padding:14px}.vkuiIconButton--sizeY-none .vkuiIcon--24{padding:10px}.vkuiIconButton--sizeY-none .vkuiIcon--28{padding:8px}}.vkuiInternalFormField__after .vkuiIconButton,.vkuiInternalFormItem--removable .vkuiInternalRemovable__content>.vkuiIconButton,.vkuiInternalFormLayoutGroup--removable .vkuiInternalRemovable__content>.vkuiIconButton{align-content:center;align-items:center;border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);display:flex;height:44px;height:var(--vkui--size_field_height--regular);justify-content:center;width:44px;width:var(--vkui--size_field_height--regular)}.vkuiInternalFormField__after .vkuiIconButton .vkuiIcon.vkuiIcon.vkuiIcon{padding:0}.vkuiInternalFormField__after .vkuiIconButton--sizeY-compact{height:36px;height:var(--vkui--size_field_height--compact);width:36px;width:var(--vkui--size_field_height--compact)}.vkuiInternalFormItem--removable .vkuiInternalRemovable__content>.vkuiIconButton--sizeY-compact,.vkuiInternalFormLayoutGroup--removable .vkuiInternalRemovable__content>.vkuiIconButton--sizeY-compact{height:36px;height:var(--vkui--size_field_height--compact)}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiInternalFormField__after .vkuiIconButton--sizeY-none{width:36px;width:var(--vkui--size_field_height--compact)}.vkuiInternalFormField__after .vkuiIconButton--sizeY-none,.vkuiInternalFormItem--removable .vkuiInternalRemovable__content>.vkuiIconButton--sizeY-none,.vkuiInternalFormLayoutGroup--removable .vkuiInternalRemovable__content>.vkuiIconButton--sizeY-none{height:36px;height:var(--vkui--size_field_height--compact)}}
+.IconButton {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background: none;
+  border: none;
+  box-shadow: none;
+  display: block;
+  color: currentColor;
+  padding: 0;
+  margin: 0;
+  position: relative;
+  height: 48px;
+
+  /**
+   * Чтобы закргуление было равно половине высоты.
+   * см. https://stackoverflow.com/questions/27233295/possible-to-make-border-radius-equal-to-half-the-total-height-without-javascript
+   */
+  border-radius: 9999px;
+}
+
+.IconButton--sizeY-compact {
+  height: 44px;
+}
+
+.IconButton[disabled] {
+  opacity: var(--vkui--opacity_disable_accessibility);
+}
+
+.IconButton--ios {
+  border-radius: var(--vkui--size_border_radius--regular);
+}
+
+.IconButton :global(.vkuiIcon--16) {
+  padding: 16px;
+}
+
+.IconButton :global(.vkuiIcon--16.vkuiIcon--w-8) {
+  padding: 16px 14px;
+}
+
+.IconButton--sizeY-compact :global(.vkuiIcon--16),
+.IconButton--sizeY-compact :global(.vkuiIcon--16.vkuiIcon--w-8) {
+  padding: 14px;
+}
+
+.IconButton :global(.vkuiIcon--24) {
+  padding: 12px;
+}
+
+.IconButton--sizeY-compact :global(.vkuiIcon--24) {
+  padding: 10px;
+}
+
+.IconButton :global(.vkuiIcon--28) {
+  padding: 10px;
+}
+
+.IconButton--sizeY-compact :global(.vkuiIcon--28) {
+  padding: 8px;
+}
+
+@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
+  .IconButton--sizeY-none {
+    height: 44px;
+  }
+
+  .IconButton--sizeY-none :global(.vkuiIcon--16),
+  .IconButton--sizeY-none :global(.vkuiIcon--16.vkuiIcon--w-8) {
+    padding: 14px;
+  }
+
+  .IconButton--sizeY-none :global(.vkuiIcon--24) {
+    padding: 10px;
+  }
+
+  .IconButton--sizeY-none :global(.vkuiIcon--28) {
+    padding: 8px;
+  }
+}
+
+/**
+ * CMP:
+ * - FormItem
+ * - FormLayoutGroup
+ * - FormField
+ */
+
+:global(.vkuiInternalFormItem--removable) :global(.vkuiInternalRemovable__content) > .IconButton,
+:global(.vkuiInternalFormLayoutGroup--removable)
+  :global(.vkuiInternalRemovable__content)
+  > .IconButton,
+:global(.vkuiInternalFormField__after) .IconButton {
+  display: flex;
+  align-items: center;
+  align-content: center;
+  justify-content: center;
+  width: var(--vkui--size_field_height--regular);
+  height: var(--vkui--size_field_height--regular);
+  border-radius: var(--vkui--size_border_radius--regular);
+}
+
+:global(.vkuiInternalFormField__after)
+  .IconButton
+  :global(.vkuiIcon):global(.vkuiIcon):global(.vkuiIcon) {
+  padding: 0;
+}
+
+:global(.vkuiInternalFormField__after) .IconButton--sizeY-compact {
+  width: var(--vkui--size_field_height--compact);
+  height: var(--vkui--size_field_height--compact);
+}
+
+:global(.vkuiInternalFormItem--removable)
+  :global(.vkuiInternalRemovable__content)
+  > .IconButton--sizeY-compact,
+:global(.vkuiInternalFormLayoutGroup--removable)
+  :global(.vkuiInternalRemovable__content)
+  > .IconButton--sizeY-compact {
+  height: var(--vkui--size_field_height--compact);
+}
+
+@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
+  :global(.vkuiInternalFormField__after) .IconButton--sizeY-none {
+    width: var(--vkui--size_field_height--compact);
+    height: var(--vkui--size_field_height--compact);
+  }
+
+  :global(.vkuiInternalFormItem--removable)
+    :global(.vkuiInternalRemovable__content)
+    > .IconButton--sizeY-none,
+  :global(.vkuiInternalFormLayoutGroup--removable)
+    :global(.vkuiInternalRemovable__content)
+    > .IconButton--sizeY-none {
+    height: var(--vkui--size_field_height--compact);
+  }
+}
+
+/**
+ * CMP:
+ * SimpleCell
+ */
+
+:global(.vkuiInternalSimpleCell__after) .IconButton:last-child {
+  margin-right: -12px;
+}
+
+:global(.vkuiInternalSimpleCell--ios)
+  :global(.vkuiInternalSimpleCell__after)
+  .IconButton:last-child {
+  margin-right: -9px;
+}

package/dist/cssm/components/Image/ImageBadge/ImageBadge.module.css

@@ -1 +1,10 @@
-.vkuiImageBadge{bottom:-4px;position:absolute;right:-4px}.vkuiImageBadge--shifted{bottom:-3px;right:-3px}
+.ImageBadge {
+  position: absolute;
+  bottom: -4px;
+  right: -4px;
+}
+
+.ImageBadge--shifted {
+  bottom: -3px;
+  right: -3px;
+}

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

@@ -1 +1,131 @@
-.vkuiImageBase{align-items:center;background-color:#f5f5f5;background-color:var(--vkui--color_background_secondary);background-size:cover;box-sizing:border-box;color:#99a2ad;color:var(--vkui--color_icon_secondary);display:flex;flex-shrink:0;justify-content:center;position:relative}.vkuiImageBase--withBorder{box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);box-shadow:inset 0 0 0 var(--vkui_internal--thin_border) var(--vkui--color_image_border_alpha)}.vkuiImageBase__img{border:none;border-radius:inherit;display:block;height:100%;left:0;object-fit:cover;position:absolute;top:0;visibility:hidden;width:100%}.vkuiImageBase--loaded .vkuiImageBase__img{visibility:visible}.vkuiImageBase__fallback{left:auto;position:absolute;top:auto}.vkuiInternalCellButton>.vkuiImageBase .vkuiIcon{color:#2688eb;color:var(--vkui--color_icon_accent)}.vkuiInternalCellButton--mode-danger>.vkuiImageBase .vkuiIcon{color:#e64646;color:var(--vkui--color_icon_negative)}.vkuiInternalPanelHeader__before .vkuiImageBase{margin-left:8px}.vkuiInternalPanelHeader__after .vkuiImageBase{margin-right:8px}.vkuiInternalSimpleCell>.vkuiImageBase{margin-right:12px}.vkuiInternalSimpleCell>.vkuiImageBase--size-28,.vkuiInternalSimpleCell>.vkuiImageBase--size-32{margin-bottom:10px;margin-top:10px}.vkuiInternalSimpleCell>.vkuiImageBase--size-40{margin-bottom:4px;margin-top:4px}.vkuiInternalSimpleCell>.vkuiImageBase--size-48,.vkuiInternalSimpleCell>.vkuiImageBase--size-72{margin-bottom:6px;margin-top:6px}.vkuiInternalSimpleCell--ios>.vkuiImageBase--size-28,.vkuiInternalSimpleCell--ios>.vkuiImageBase--size-32{margin-left:4px}.vkuiInternalSimpleCell--sizeY-compact>.vkuiImageBase--size-28,.vkuiInternalSimpleCell--sizeY-compact>.vkuiImageBase--size-32{margin-bottom:8px;margin-top:8px}.vkuiInternalSimpleCell--sizeY-compact>.vkuiImageBase--size-40{margin-bottom:2px;margin-top:2px}.vkuiInternalSimpleCell--sizeY-compact>.vkuiImageBase--size-48{margin-bottom:4px;margin-top:4px}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiInternalSimpleCell--sizeY-none>.vkuiImageBase--size-28,.vkuiInternalSimpleCell--sizeY-none>.vkuiImageBase--size-32{margin-bottom:8px;margin-top:8px}.vkuiInternalSimpleCell--sizeY-none>.vkuiImageBase--size-40{margin-bottom:2px;margin-top:2px}.vkuiInternalSimpleCell--sizeY-none>.vkuiImageBase--size-48{margin-bottom:4px;margin-top:4px}}
+.ImageBase {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  color: var(--vkui--color_icon_secondary);
+  background-color: var(--vkui--color_background_secondary);
+  background-size: cover;
+}
+
+.ImageBase--withBorder {
+  box-shadow: inset 0 0 0 var(--vkui_internal--thin_border) var(--vkui--color_image_border_alpha);
+}
+
+.ImageBase__img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: none;
+  border-radius: inherit;
+  object-fit: cover;
+  visibility: hidden;
+}
+
+.ImageBase--loaded .ImageBase__img {
+  visibility: visible;
+}
+
+.ImageBase__fallback {
+  position: absolute;
+
+  /* Расчитываем на ценитрирование через родительский `display: flex` */
+  top: auto;
+  left: auto;
+}
+
+/**
+ * CMP:
+ * CellButton
+ */
+
+:global(.vkuiInternalCellButton) > .ImageBase :global(.vkuiIcon) {
+  color: var(--vkui--color_icon_accent);
+}
+
+:global(.vkuiInternalCellButton--mode-danger) > .ImageBase :global(.vkuiIcon) {
+  color: var(--vkui--color_icon_negative);
+}
+
+/**
+ * CMP:
+ * PanelHeader
+ */
+
+:global(.vkuiInternalPanelHeader__before) .ImageBase {
+  margin-left: 8px;
+}
+
+:global(.vkuiInternalPanelHeader__after) .ImageBase {
+  margin-right: 8px;
+}
+
+/**
+ * CMP:
+ * SimpleCell
+ */
+
+:global(.vkuiInternalSimpleCell) > .ImageBase {
+  margin-right: 12px;
+}
+
+:global(.vkuiInternalSimpleCell) > .ImageBase--size-28,
+:global(.vkuiInternalSimpleCell) > .ImageBase--size-32 {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+:global(.vkuiInternalSimpleCell) > .ImageBase--size-40 {
+  margin-top: 4px;
+  margin-bottom: 4px;
+}
+
+:global(.vkuiInternalSimpleCell) > .ImageBase--size-48,
+:global(.vkuiInternalSimpleCell) > .ImageBase--size-72 {
+  margin-top: 6px;
+  margin-bottom: 6px;
+}
+
+:global(.vkuiInternalSimpleCell--ios) > .ImageBase--size-28,
+:global(.vkuiInternalSimpleCell--ios) > .ImageBase--size-32 {
+  margin-left: 4px;
+}
+
+:global(.vkuiInternalSimpleCell--sizeY-compact) > .ImageBase--size-28,
+:global(.vkuiInternalSimpleCell--sizeY-compact) > .ImageBase--size-32 {
+  margin-top: 8px;
+  margin-bottom: 8px;
+}
+
+:global(.vkuiInternalSimpleCell--sizeY-compact) > .ImageBase--size-40 {
+  margin-top: 2px;
+  margin-bottom: 2px;
+}
+
+:global(.vkuiInternalSimpleCell--sizeY-compact) > .ImageBase--size-48 {
+  margin-top: 4px;
+  margin-bottom: 4px;
+}
+
+@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
+  :global(.vkuiInternalSimpleCell--sizeY-none) > .ImageBase--size-28,
+  :global(.vkuiInternalSimpleCell--sizeY-none) > .ImageBase--size-32 {
+    margin-top: 8px;
+    margin-bottom: 8px;
+  }
+
+  :global(.vkuiInternalSimpleCell--sizeY-none) > .ImageBase--size-40 {
+    margin-top: 2px;
+    margin-bottom: 2px;
+  }
+
+  :global(.vkuiInternalSimpleCell--sizeY-none) > .ImageBase--size-48 {
+    margin-top: 4px;
+    margin-bottom: 4px;
+  }
+}

package/dist/cssm/components/ImageBase/ImageBaseBadge/ImageBaseBadge.module.css

@@ -1 +1,28 @@
-.vkuiImageBaseBadge{border-radius:50%;bottom:0;padding:2px;position:absolute;right:0;transform:translate(2px,2px);z-index:1;z-index:var(--vkui_internal--z_index_image_base_badge)}.vkuiImageBaseBadge--background-stroke{background-color:#fff;background-color:var(--vkui_internal--background,var(--vkui--color_background_content))}.vkuiImageBaseBadge--background-shadow:before{border-radius:inherit;bottom:2px;box-shadow:0 0 2px rgba(0,0,0,.03),0 2px 2px rgba(0,0,0,.06);box-shadow:var(--vkui--elevation1);content:"";left:2px;margin:auto;position:absolute;right:2px;top:2px}
+.ImageBaseBadge {
+  position: absolute;
+  z-index: var(--vkui_internal--z_index_image_base_badge);
+  right: 0;
+  bottom: 0;
+  border-radius: 50%;
+
+  /* Смещаем на `padding-top` и `padding-left`, чтобы не учитывать `padding` при позиционировании. */
+  transform: translate(2px, 2px);
+  padding: 2px;
+}
+
+.ImageBaseBadge--background-stroke {
+  /* цвет фона для скрывания элементов */
+  background-color: var(--vkui_internal--background, var(--vkui--color_background_content));
+}
+
+.ImageBaseBadge--background-shadow::before {
+  content: '';
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  bottom: 2px;
+  left: 2px;
+  margin: auto;
+  border-radius: inherit;
+  box-shadow: var(--vkui--elevation1);
+}

package/dist/cssm/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.module.css

@@ -1 +1,36 @@
-.vkuiImageBaseOverlay{align-items:center;border:none;border-radius:inherit;box-shadow:inherit;box-sizing:border-box;display:flex;height:100%;justify-content:center;left:0;opacity:0;position:absolute;top:0;transition:opacity .3s ease-in-out;width:100%;z-index:0;z-index:var(--vkui_internal--z_index_image_base_overlay)}.vkuiImageBaseOverlay--visible{opacity:1}.vkuiImageBaseOverlay--focus-visible{box-shadow:inset 0 0 0 2px #2688eb;box-shadow:inset 0 0 0 2px var(--vkui--color_stroke_accent);opacity:1}.vkuiImageBaseOverlay--theme-light{background-color:hsla(0,0%,100%,.85);background-color:var(--vkui--color_avatar_overlay_inverse_alpha);color:#2688eb;color:var(--vkui--color_icon_accent)}.vkuiImageBaseOverlay--theme-dark{background-color:rgba(0,0,0,.6);background-color:var(--vkui--color_avatar_overlay);color:#fff;color:var(--vkui--color_icon_contrast)}
+.ImageBaseOverlay {
+  position: absolute;
+  z-index: var(--vkui_internal--z_index_image_base_overlay);
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  border: none;
+  border-radius: inherit;
+  box-shadow: inherit;
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
+}
+
+.ImageBaseOverlay--visible {
+  opacity: 1;
+}
+
+.ImageBaseOverlay--focus-visible {
+  opacity: 1;
+  box-shadow: inset 0 0 0 2px var(--vkui--color_stroke_accent);
+}
+
+.ImageBaseOverlay--theme-light {
+  color: var(--vkui--color_icon_accent);
+  background-color: var(--vkui--color_avatar_overlay_inverse_alpha);
+}
+
+.ImageBaseOverlay--theme-dark {
+  color: var(--vkui--color_icon_contrast);
+  background-color: var(--vkui--color_avatar_overlay);
+}

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

@@ -1 +1,17 @@
-.vkuiInfoRow{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}.vkuiInfoRow,.vkuiInfoRow__header{overflow:hidden;text-overflow:ellipsis}.vkuiInfoRow__header{color:#6d7885;color:var(--vkui--color_text_subhead);display:block;margin-bottom:2px;white-space:nowrap}
+.InfoRow {
+  -webkit-user-select: text;
+     -moz-user-select: text;
+      -ms-user-select: text;
+          user-select: text;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.InfoRow__header {
+  display: block;
+  margin-bottom: 2px;
+  color: var(--vkui--color_text_subhead);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

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

@@ -1 +1,101 @@
-.vkuiInput{font-size:16px;line-height:20px;position:relative}.vkuiInput--align-center .vkuiInput__el{text-align:center}.vkuiInput--align-right .vkuiInput__el{text-align:right}.vkuiInput__el{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;border-radius:inherit;box-shadow:none;box-sizing:border-box;color:#000;color:var(--vkui--color_text_primary);font-family:inherit;font-size:16px;font-size:var(--vkui--font_text--font_size--regular);font-weight:400;font-weight:var(--vkui--font_text--font_weight--regular);height:44px;height:var(--vkui--size_field_height--regular);line-height:20px;line-height:var(--vkui--font_text--line_height--regular);margin:0;padding:0 12px;position:relative;width:100%;z-index:1;z-index:var(--vkui_internal--z_index_form_field_element)}.vkuiInput--sizeY-compact .vkuiInput__el{font-size:15px;font-size:var(--vkui--font_text--font_size--compact);height:36px;height:var(--vkui--size_field_height--compact);line-height:20px;line-height:var(--vkui--font_text--line_height--compact)}.vkuiInput--hasBefore .vkuiInput__el{padding-left:0}.vkuiInput--hasAfter .vkuiInput__el{padding-right:0}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiInput--sizeY-none .vkuiInput__el{font-size:15px;font-size:var(--vkui--font_text--font_size--compact);height:36px;height:var(--vkui--size_field_height--compact);line-height:20px;line-height:var(--vkui--font_text--line_height--compact)}}.vkuiInput__el:disabled{opacity:.64;opacity:var(--vkui--opacity_disable_accessibility)}.vkuiInput__el::-webkit-input-placeholder{color:#818c99;color:var(--vkui--color_text_secondary);opacity:1}.vkuiInput__el::-moz-placeholder{color:#818c99;color:var(--vkui--color_text_secondary);opacity:1}.vkuiInput__el::-ms-input-placeholder{color:#818c99;color:var(--vkui--color_text_secondary);opacity:1}.vkuiInput__el::placeholder{color:#818c99;color:var(--vkui--color_text_secondary);opacity:1}.vkuiInput__el:disabled::-webkit-input-placeholder{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiInput__el:disabled::-moz-placeholder{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiInput__el:disabled::-ms-input-placeholder{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiInput__el:disabled::placeholder{color:#818c99;color:var(--vkui--color_text_secondary)}
+.Input {
+  position: relative;
+  line-height: 20px;
+  font-size: 16px;
+}
+
+.Input--align-center .Input__el {
+  text-align: center;
+}
+
+.Input--align-right .Input__el {
+  text-align: right;
+}
+
+.Input__el {
+  height: var(--vkui--size_field_height--regular);
+  margin: 0;
+  width: 100%;
+  box-sizing: border-box;
+  box-shadow: none;
+  border: none;
+  border-radius: inherit;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  font-family: inherit;
+  font-weight: var(--vkui--font_text--font_weight--regular);
+  font-size: var(--vkui--font_text--font_size--regular);
+  line-height: var(--vkui--font_text--line_height--regular);
+  color: var(--vkui--color_text_primary);
+  padding: 0 12px;
+  position: relative;
+  z-index: var(--vkui_internal--z_index_form_field_element);
+  background: transparent;
+}
+
+.Input--sizeY-compact .Input__el {
+  height: var(--vkui--size_field_height--compact);
+  font-size: var(--vkui--font_text--font_size--compact);
+  line-height: var(--vkui--font_text--line_height--compact);
+}
+
+.Input--hasBefore .Input__el {
+  padding-left: 0;
+}
+
+.Input--hasAfter .Input__el {
+  padding-right: 0;
+}
+
+@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
+  .Input--sizeY-none .Input__el {
+    height: var(--vkui--size_field_height--compact);
+    font-size: var(--vkui--font_text--font_size--compact);
+    line-height: var(--vkui--font_text--line_height--compact);
+  }
+}
+
+.Input__el:disabled {
+  opacity: var(--vkui--opacity_disable_accessibility);
+}
+
+.Input__el::-webkit-input-placeholder {
+  color: var(--vkui--color_text_secondary);
+  /* Для Firefox */
+  opacity: 1;
+}
+
+.Input__el::-moz-placeholder {
+  color: var(--vkui--color_text_secondary);
+  /* Для Firefox */
+  opacity: 1;
+}
+
+.Input__el::-ms-input-placeholder {
+  color: var(--vkui--color_text_secondary);
+  /* Для Firefox */
+  opacity: 1;
+}
+
+.Input__el::placeholder {
+  color: var(--vkui--color_text_secondary);
+  /* Для Firefox */
+  opacity: 1;
+}
+
+.Input__el:disabled::-webkit-input-placeholder {
+  color: var(--vkui--color_text_secondary);
+}
+
+.Input__el:disabled::-moz-placeholder {
+  color: var(--vkui--color_text_secondary);
+}
+
+.Input__el:disabled::-ms-input-placeholder {
+  color: var(--vkui--color_text_secondary);
+}
+
+.Input__el:disabled::placeholder {
+  color: var(--vkui--color_text_secondary);
+}