@vkontakte/vkui 5.4.1 → 5.4.2

package/dist/cjs/components/ActionSheet/ActionSheetDefaultIosCloseItem.js

@@ -16,7 +16,7 @@ var ActionSheetDefaultIosCloseItem = function(props) {
     return /*#__PURE__*/ _react.createElement(_actionSheetItem.ActionSheetItem, _objectSpread({
         autoClose: true,
         mode: "cancel"
-    }, props), "Отменить");
+    }, props), "Отмена");
 };
 
 //# sourceMappingURL=ActionSheetDefaultIosCloseItem.js.map

package/dist/cjs/components/ActionSheet/ActionSheetDefaultIosCloseItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheetDefaultIosCloseItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ActionSheetItem, ActionSheetItemProps } from '../ActionSheetItem/ActionSheetItem';\n\nexport const ActionSheetDefaultIosCloseItem = (props: ActionSheetItemProps) => {\n  return (\n    <ActionSheetItem autoClose mode=\"cancel\" {...props}>\n      Отменить\n    </ActionSheetItem>\n  );\n};\n"],"names":["ActionSheetDefaultIosCloseItem","props","ActionSheetItem","autoClose","mode"],"mappings":";;;;+BAGaA;;;eAAAA;;;;;2DAHU;+BAC+B;AAE/C,IAAMA,iCAAiC,SAACC,OAAgC;IAC7E,qBACE,qBAACC,gCAAe;QAACC,WAAAA,IAAS;QAACC,MAAK;OAAaH,QAAO;AAIxD"}
+{"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheetDefaultIosCloseItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ActionSheetItem, ActionSheetItemProps } from '../ActionSheetItem/ActionSheetItem';\n\nexport const ActionSheetDefaultIosCloseItem = (props: ActionSheetItemProps) => {\n  return (\n    <ActionSheetItem autoClose mode=\"cancel\" {...props}>\n      Отмена\n    </ActionSheetItem>\n  );\n};\n"],"names":["ActionSheetDefaultIosCloseItem","props","ActionSheetItem","autoClose","mode"],"mappings":";;;;+BAGaA;;;eAAAA;;;;;2DAHU;+BAC+B;AAE/C,IAAMA,iCAAiC,SAACC,OAAgC;IAC7E,qBACE,qBAACC,gCAAe;QAACC,WAAAA,IAAS;QAACC,MAAK;OAAaH,QAAO;AAIxD"}

package/dist/cjs/components/ActionSheetItem/ActionSheetItem.js

@@ -23,6 +23,7 @@ var _actionSheetContext = require("../ActionSheet/ActionSheetContext");
 var _tappable = require("../Tappable/Tappable");
 var _subhead = require("../Typography/Subhead/Subhead");
 var _text = require("../Typography/Text/Text");
+var _title = require("../Typography/Title/Title");
 /**
  * @see https://vkcom.github.io/VKUI/#/ActionSheetItem
  */ var ActionSheetItem = function(_param) {
@@ -62,15 +63,18 @@ var _text = require("../Typography/Text/Text");
     }, restProps), {
         onClick: selectable ? onClick : onItemClick(onClick, onImmediateClick, Boolean(autoClose)),
         activeMode: platform === _platform.Platform.IOS ? "vkuiActionSheetItem--active" : undefined,
-        className: (0, _vkjs.classNames)("vkuiActionSheetItem", platform === _platform.Platform.IOS && "vkuiActionSheetItem--ios", mode === "cancel" && "vkuiActionSheetItem--mode-cancel", mode === "destructive" && "vkuiActionSheetItem--mode-destructive", sizeY === _adaptivity.SizeType.COMPACT && "vkuiActionSheetItem--sizeY-compact", isRich && "vkuiActionSheetItem--rich", isDesktop && "vkuiActionSheetItem--desktop", className)
+        className: (0, _vkjs.classNames)("vkuiActionSheetItem", platform === _platform.Platform.IOS && "vkuiActionSheetItem--ios", mode === "cancel" && "vkuiActionSheetItem--mode-cancel", mode === "destructive" && "vkuiActionSheetItem--mode-destructive", sizeY === _adaptivity.SizeType.COMPACT && "vkuiActionSheetItem--sizeY-compact", isRich && "vkuiActionSheetItem--rich", isDesktop && "vkuiActionSheetItem--desktop", selectable && "vkuiActionSheetItem--selectable", className)
     }), before && /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiActionSheetItem__before"
     }, before), /*#__PURE__*/ _react.createElement("div", {
         className: (0, _vkjs.classNames)("vkuiActionSheetItem__container", !multiline && "vkuiActionSheetItem--ellipsis")
     }, /*#__PURE__*/ _react.createElement("div", {
         className: (0, _vkjs.classNames)("vkuiActionSheetItem__content", isCentered && "vkuiActionSheetItem--centered")
-    }, /*#__PURE__*/ _react.createElement(_text.Text, {
-        weight: mode === "cancel" ? "2" : undefined,
+    }, platform === _platform.Platform.IOS ? /*#__PURE__*/ _react.createElement(_title.Title, {
+        className: "vkuiActionSheetItem__children",
+        weight: mode === "cancel" ? "2" : "3",
+        level: isCentered ? "2" : "3"
+    }, children) : /*#__PURE__*/ _react.createElement(_text.Text, {
         className: "vkuiActionSheetItem__children"
     }, children), meta && /*#__PURE__*/ _react.createElement(_text.Text, {
         className: "vkuiActionSheetItem__meta"

package/dist/cjs/components/ActionSheetItem/ActionSheetItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ActionSheetItem/ActionSheetItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon20CheckCircleOn, Icon24CheckCircleOn } from '@vkontakte/icons';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { ActionSheetContext, type ActionSheetContextType } from '../ActionSheet/ActionSheetContext';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './ActionSheetItem.module.css';\n\nexport interface ActionSheetItemProps\n  extends React.HTMLAttributes<HTMLElement>,\n    React.AnchorHTMLAttributes<HTMLElement>,\n    Pick<React.InputHTMLAttributes<HTMLInputElement>, 'name' | 'checked' | 'value'> {\n  mode?: 'default' | 'destructive' | 'cancel';\n  before?: React.ReactNode;\n  meta?: React.ReactNode;\n  subtitle?: React.ReactNode;\n  autoClose?: boolean;\n  selectable?: boolean;\n  disabled?: boolean;\n  /**\n   * Все текстовые элементы при необходимости занимают несколько строк\n   */\n  multiline?: boolean;\n  /**\n   * Если autoClose === true, onClick будет вызван после завершения анимации скрытия и после вызова onClose.\n   * Из этого следует, что в объекте события значения полей типа `currentTarget` будут не определены.\n   * Если вам нужен объект события именно на момент клика, используйте `onImmediateClick`.\n   */\n  onClick?: React.MouseEventHandler<HTMLElement>;\n  onImmediateClick?: React.MouseEventHandler<HTMLElement>;\n  /**\n   * Иконка для `checked` режима.\n   */\n  iconChecked?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ActionSheetItem\n */\nconst ActionSheetItem = ({\n  children,\n  autoClose,\n  mode = 'default',\n  meta,\n  subtitle,\n  before,\n  selectable,\n  value,\n  name,\n  checked,\n  defaultChecked,\n  onChange,\n  onClick,\n  onImmediateClick,\n  multiline = false,\n  iconChecked: iconCheckedProp,\n  className,\n  ...restProps\n}: ActionSheetItemProps) => {\n  const platform = usePlatform();\n  const { onItemClick = () => noop, isDesktop } =\n    React.useContext<ActionSheetContextType<HTMLElement>>(ActionSheetContext);\n  const { sizeY } = useAdaptivityWithJSMediaQueries();\n\n  const iconChecked =\n    iconCheckedProp ||\n    (sizeY === SizeType.COMPACT ? <Icon20CheckCircleOn /> : <Icon24CheckCircleOn />);\n\n  let Component: React.ElementType = restProps.href ? 'a' : 'div';\n\n  if (selectable) {\n    Component = 'label';\n  }\n\n  const isRich = subtitle || meta || selectable;\n  const isCentered = !isRich && !before && platform === Platform.IOS;\n\n  return (\n    <Tappable\n      Component={Component}\n      {...restProps}\n      onClick={selectable ? onClick : onItemClick(onClick, onImmediateClick, Boolean(autoClose))}\n      activeMode={platform === Platform.IOS ? styles['ActionSheetItem--active'] : undefined}\n      className={classNames(\n        styles['ActionSheetItem'],\n        platform === Platform.IOS && styles['ActionSheetItem--ios'],\n        mode === 'cancel' && styles['ActionSheetItem--mode-cancel'],\n        mode === 'destructive' && styles['ActionSheetItem--mode-destructive'],\n        sizeY === SizeType.COMPACT && styles['ActionSheetItem--sizeY-compact'],\n        isRich && styles['ActionSheetItem--rich'],\n        isDesktop && styles['ActionSheetItem--desktop'],\n        className,\n      )}\n    >\n      {before && <div className={styles['ActionSheetItem__before']}>{before}</div>}\n      <div\n        className={classNames(\n          styles['ActionSheetItem__container'],\n          !multiline && styles['ActionSheetItem--ellipsis'],\n        )}\n      >\n        <div\n          className={classNames(\n            styles['ActionSheetItem__content'],\n            isCentered && styles['ActionSheetItem--centered'],\n          )}\n        >\n          <Text\n            weight={mode === 'cancel' ? '2' : undefined}\n            className={styles['ActionSheetItem__children']}\n          >\n            {children}\n          </Text>\n          {meta && <Text className={styles['ActionSheetItem__meta']}>{meta}</Text>}\n        </div>\n        {subtitle && <Subhead className={styles['ActionSheetItem__subtitle']}>{subtitle}</Subhead>}\n      </div>\n      {selectable && (\n        <div className={styles['ActionSheetItem__after']}>\n          <input\n            type=\"radio\"\n            className={styles['ActionSheetItem__radio']}\n            name={name}\n            value={value}\n            onChange={onChange}\n            onClick={onItemClick(noop, noop, Boolean(autoClose))}\n            defaultChecked={defaultChecked}\n            checked={checked}\n            disabled={restProps.disabled}\n          />\n          <div className={styles['ActionSheetItem__marker']}>{iconChecked}</div>\n        </div>\n      )}\n    </Tappable>\n  );\n};\n\nexport { ActionSheetItem };\n"],"names":["ActionSheetItem","children","autoClose","mode","meta","subtitle","before","selectable","value","name","checked","defaultChecked","onChange","onClick","onImmediateClick","multiline","iconChecked","iconCheckedProp","className","restProps","platform","usePlatform","React","useContext","ActionSheetContext","onItemClick","noop","isDesktop","sizeY","useAdaptivityWithJSMediaQueries","SizeType","COMPACT","Icon20CheckCircleOn","Icon24CheckCircleOn","Component","href","isRich","isCentered","Platform","IOS","Tappable","Boolean","activeMode","undefined","classNames","div","Text","weight","Subhead","input","type","disabled"],"mappings":";;;;+BA8ISA;;;eAAAA;;;;;;;2DA9Ic;qBACkC;oBACxB;+CACe;2BACpB;0BACH;wBACA;kCACuC;wBACvC;uBACD;oBACH;AA+BrB;;CAEC,GACD,IAAMA,kBAAkB,iBAmBI;QAlB1BC,kBAAAA,UACAC,mBAAAA,gCACAC,MAAAA,gCAAO,yBACPC,cAAAA,MACAC,kBAAAA,UACAC,gBAAAA,QACAC,oBAAAA,YACAC,eAAAA,OACAC,cAAAA,MACAC,iBAAAA,SACAC,wBAAAA,gBACAC,kBAAAA,UACAC,iBAAAA,SACAC,0BAAAA,4CACAC,WAAAA,0CAAY,KAAK,qBACjBC,AAAaC,yBAAbD,aACAE,mBAAAA,WACGC;QAjBHlB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;;IAGA,IAAME,WAAWC,IAAAA,wBAAW;IAC5B,IACEC,oBAAAA,OAAMC,UAAU,CAAsCC,sCAAkB,mCAAxEF,kBADMG,aAAAA,yDAAc;eAAMC,UAAI;uCAAEC,YAChCL,kBADgCK;IAElC,IAAM,AAAEC,QAAUC,IAAAA,gEAA+B,IAAzCD;IAER,IAAMZ,cACJC,mBACCW,CAAAA,UAAUE,oBAAQ,CAACC,OAAO,iBAAG,qBAACC,0BAAmB,wBAAM,qBAACC,0BAAmB,OAAG,AAAD;IAEhF,IAAIC,YAA+Bf,UAAUgB,IAAI,GAAG,MAAM,KAAK;IAE/D,IAAI5B,YAAY;QACd2B,YAAY;IACd,CAAC;IAED,IAAME,SAAS/B,YAAYD,QAAQG;IACnC,IAAM8B,aAAa,CAACD,UAAU,CAAC9B,UAAUc,aAAakB,kBAAQ,CAACC,GAAG;IAElE,qBACE,qBAACC,kBAAQ;QACPN,WAAWA;OACPf;QACJN,SAASN,aAAaM,UAAUY,YAAYZ,SAASC,kBAAkB2B,QAAQvC,WAAW;QAC1FwC,YAAYtB,aAAakB,kBAAQ,CAACC,GAAG,mCAAuCI,SAAS;QACrFzB,WAAW0B,IAAAA,gBAAU,yBAEnBxB,aAAakB,kBAAQ,CAACC,GAAG,gCACzBpC,SAAS,gDACTA,SAAS,0DACTyB,UAAUE,oBAAQ,CAACC,OAAO,0CAC1BK,uCACAT,6CACAT;QAGDZ,wBAAU,qBAACuC;QAAI3B,SAAS;OAAsCZ,uBAC/D,qBAACuC;QACC3B,WAAW0B,IAAAA,gBAAU,oCAEnB,CAAC7B;qBAGH,qBAAC8B;QACC3B,WAAW0B,IAAAA,gBAAU,kCAEnBP;qBAGF,qBAACS,UAAI;QACHC,QAAQ5C,SAAS,WAAW,MAAMwC,SAAS;QAC3CzB,SAAS;OAERjB,WAEFG,sBAAQ,qBAAC0C,UAAI;QAAC5B,SAAS;OAAoCd,QAE7DC,0BAAY,qBAAC2C,gBAAO;QAAC9B,SAAS;OAAwCb,YAExEE,4BACC,qBAACsC;QAAI3B,SAAS;qBACZ,qBAAC+B;QACCC,MAAK;QACLhC,SAAS;QACTT,MAAMA;QACND,OAAOA;QACPI,UAAUA;QACVC,SAASY,YAAYC,UAAI,EAAEA,UAAI,EAAEe,QAAQvC;QACzCS,gBAAgBA;QAChBD,SAASA;QACTyC,UAAUhC,UAAUgC,QAAQ;sBAE9B,qBAACN;QAAI3B,SAAS;OAAsCF;AAK9D"}
+{"version":3,"sources":["../../../../src/components/ActionSheetItem/ActionSheetItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon20CheckCircleOn, Icon24CheckCircleOn } from '@vkontakte/icons';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { ActionSheetContext, type ActionSheetContextType } from '../ActionSheet/ActionSheetContext';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './ActionSheetItem.module.css';\n\nexport interface ActionSheetItemProps\n  extends React.HTMLAttributes<HTMLElement>,\n    React.AnchorHTMLAttributes<HTMLElement>,\n    Pick<React.InputHTMLAttributes<HTMLInputElement>, 'name' | 'checked' | 'value'> {\n  mode?: 'default' | 'destructive' | 'cancel';\n  before?: React.ReactNode;\n  meta?: React.ReactNode;\n  subtitle?: React.ReactNode;\n  autoClose?: boolean;\n  selectable?: boolean;\n  disabled?: boolean;\n  /**\n   * Все текстовые элементы при необходимости занимают несколько строк\n   */\n  multiline?: boolean;\n  /**\n   * Если autoClose === true, onClick будет вызван после завершения анимации скрытия и после вызова onClose.\n   * Из этого следует, что в объекте события значения полей типа `currentTarget` будут не определены.\n   * Если вам нужен объект события именно на момент клика, используйте `onImmediateClick`.\n   */\n  onClick?: React.MouseEventHandler<HTMLElement>;\n  onImmediateClick?: React.MouseEventHandler<HTMLElement>;\n  /**\n   * Иконка для `checked` режима.\n   */\n  iconChecked?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ActionSheetItem\n */\nconst ActionSheetItem = ({\n  children,\n  autoClose,\n  mode = 'default',\n  meta,\n  subtitle,\n  before,\n  selectable,\n  value,\n  name,\n  checked,\n  defaultChecked,\n  onChange,\n  onClick,\n  onImmediateClick,\n  multiline = false,\n  iconChecked: iconCheckedProp,\n  className,\n  ...restProps\n}: ActionSheetItemProps) => {\n  const platform = usePlatform();\n  const { onItemClick = () => noop, isDesktop } =\n    React.useContext<ActionSheetContextType<HTMLElement>>(ActionSheetContext);\n  const { sizeY } = useAdaptivityWithJSMediaQueries();\n\n  const iconChecked =\n    iconCheckedProp ||\n    (sizeY === SizeType.COMPACT ? <Icon20CheckCircleOn /> : <Icon24CheckCircleOn />);\n\n  let Component: React.ElementType = restProps.href ? 'a' : 'div';\n\n  if (selectable) {\n    Component = 'label';\n  }\n\n  const isRich = subtitle || meta || selectable;\n  const isCentered = !isRich && !before && platform === Platform.IOS;\n\n  return (\n    <Tappable\n      Component={Component}\n      {...restProps}\n      onClick={selectable ? onClick : onItemClick(onClick, onImmediateClick, Boolean(autoClose))}\n      activeMode={platform === Platform.IOS ? styles['ActionSheetItem--active'] : undefined}\n      className={classNames(\n        styles['ActionSheetItem'],\n        platform === Platform.IOS && styles['ActionSheetItem--ios'],\n        mode === 'cancel' && styles['ActionSheetItem--mode-cancel'],\n        mode === 'destructive' && styles['ActionSheetItem--mode-destructive'],\n        sizeY === SizeType.COMPACT && styles['ActionSheetItem--sizeY-compact'],\n        isRich && styles['ActionSheetItem--rich'],\n        isDesktop && styles['ActionSheetItem--desktop'],\n        selectable && styles['ActionSheetItem--selectable'],\n        className,\n      )}\n    >\n      {before && <div className={styles['ActionSheetItem__before']}>{before}</div>}\n      <div\n        className={classNames(\n          styles['ActionSheetItem__container'],\n          !multiline && styles['ActionSheetItem--ellipsis'],\n        )}\n      >\n        <div\n          className={classNames(\n            styles['ActionSheetItem__content'],\n            isCentered && styles['ActionSheetItem--centered'],\n          )}\n        >\n          {platform === Platform.IOS ? (\n            <Title\n              className={styles['ActionSheetItem__children']}\n              weight={mode === 'cancel' ? '2' : '3'}\n              level={isCentered ? '2' : '3'}\n            >\n              {children}\n            </Title>\n          ) : (\n            <Text className={styles['ActionSheetItem__children']}>{children}</Text>\n          )}\n          {meta && <Text className={styles['ActionSheetItem__meta']}>{meta}</Text>}\n        </div>\n        {subtitle && <Subhead className={styles['ActionSheetItem__subtitle']}>{subtitle}</Subhead>}\n      </div>\n      {selectable && (\n        <div className={styles['ActionSheetItem__after']}>\n          <input\n            type=\"radio\"\n            className={styles['ActionSheetItem__radio']}\n            name={name}\n            value={value}\n            onChange={onChange}\n            onClick={onItemClick(noop, noop, Boolean(autoClose))}\n            defaultChecked={defaultChecked}\n            checked={checked}\n            disabled={restProps.disabled}\n          />\n          <div className={styles['ActionSheetItem__marker']}>{iconChecked}</div>\n        </div>\n      )}\n    </Tappable>\n  );\n};\n\nexport { ActionSheetItem };\n"],"names":["ActionSheetItem","children","autoClose","mode","meta","subtitle","before","selectable","value","name","checked","defaultChecked","onChange","onClick","onImmediateClick","multiline","iconChecked","iconCheckedProp","className","restProps","platform","usePlatform","React","useContext","ActionSheetContext","onItemClick","noop","isDesktop","sizeY","useAdaptivityWithJSMediaQueries","SizeType","COMPACT","Icon20CheckCircleOn","Icon24CheckCircleOn","Component","href","isRich","isCentered","Platform","IOS","Tappable","Boolean","activeMode","undefined","classNames","div","Title","weight","level","Text","Subhead","input","type","disabled"],"mappings":";;;;+BAqJSA;;;eAAAA;;;;;;;2DArJc;qBACkC;oBACxB;+CACe;2BACpB;0BACH;wBACA;kCACuC;wBACvC;uBACD;oBACH;qBACC;AA+BtB;;CAEC,GACD,IAAMA,kBAAkB,iBAmBI;QAlB1BC,kBAAAA,UACAC,mBAAAA,gCACAC,MAAAA,gCAAO,yBACPC,cAAAA,MACAC,kBAAAA,UACAC,gBAAAA,QACAC,oBAAAA,YACAC,eAAAA,OACAC,cAAAA,MACAC,iBAAAA,SACAC,wBAAAA,gBACAC,kBAAAA,UACAC,iBAAAA,SACAC,0BAAAA,4CACAC,WAAAA,0CAAY,KAAK,qBACjBC,AAAaC,yBAAbD,aACAE,mBAAAA,WACGC;QAjBHlB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;;IAGA,IAAME,WAAWC,IAAAA,wBAAW;IAC5B,IACEC,oBAAAA,OAAMC,UAAU,CAAsCC,sCAAkB,mCAAxEF,kBADMG,aAAAA,yDAAc;eAAMC,UAAI;uCAAEC,YAChCL,kBADgCK;IAElC,IAAM,AAAEC,QAAUC,IAAAA,gEAA+B,IAAzCD;IAER,IAAMZ,cACJC,mBACCW,CAAAA,UAAUE,oBAAQ,CAACC,OAAO,iBAAG,qBAACC,0BAAmB,wBAAM,qBAACC,0BAAmB,OAAG,AAAD;IAEhF,IAAIC,YAA+Bf,UAAUgB,IAAI,GAAG,MAAM,KAAK;IAE/D,IAAI5B,YAAY;QACd2B,YAAY;IACd,CAAC;IAED,IAAME,SAAS/B,YAAYD,QAAQG;IACnC,IAAM8B,aAAa,CAACD,UAAU,CAAC9B,UAAUc,aAAakB,kBAAQ,CAACC,GAAG;IAElE,qBACE,qBAACC,kBAAQ;QACPN,WAAWA;OACPf;QACJN,SAASN,aAAaM,UAAUY,YAAYZ,SAASC,kBAAkB2B,QAAQvC,WAAW;QAC1FwC,YAAYtB,aAAakB,kBAAQ,CAACC,GAAG,mCAAuCI,SAAS;QACrFzB,WAAW0B,IAAAA,gBAAU,yBAEnBxB,aAAakB,kBAAQ,CAACC,GAAG,gCACzBpC,SAAS,gDACTA,SAAS,0DACTyB,UAAUE,oBAAQ,CAACC,OAAO,0CAC1BK,uCACAT,6CACApB,iDACAW;QAGDZ,wBAAU,qBAACuC;QAAI3B,SAAS;OAAsCZ,uBAC/D,qBAACuC;QACC3B,WAAW0B,IAAAA,gBAAU,oCAEnB,CAAC7B;qBAGH,qBAAC8B;QACC3B,WAAW0B,IAAAA,gBAAU,kCAEnBP;OAGDjB,aAAakB,kBAAQ,CAACC,GAAG,iBACxB,qBAACO,YAAK;QACJ5B,SAAS;QACT6B,QAAQ5C,SAAS,WAAW,MAAM,GAAG;QACrC6C,OAAOX,aAAa,MAAM,GAAG;OAE5BpC,0BAGH,qBAACgD,UAAI;QAAC/B,SAAS;OAAwCjB,SACxD,EACAG,sBAAQ,qBAAC6C,UAAI;QAAC/B,SAAS;OAAoCd,QAE7DC,0BAAY,qBAAC6C,gBAAO;QAAChC,SAAS;OAAwCb,YAExEE,4BACC,qBAACsC;QAAI3B,SAAS;qBACZ,qBAACiC;QACCC,MAAK;QACLlC,SAAS;QACTT,MAAMA;QACND,OAAOA;QACPI,UAAUA;QACVC,SAASY,YAAYC,UAAI,EAAEA,UAAI,EAAEe,QAAQvC;QACzCS,gBAAgBA;QAChBD,SAASA;QACT2C,UAAUlC,UAAUkC,QAAQ;sBAE9B,qBAACR;QAAI3B,SAAS;OAAsCF;AAK9D"}

package/dist/cjs/components/Banner/Banner.js

@@ -53,14 +53,14 @@ var Banner = function(_param) {
     }, before), /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiBanner__content"
     }, (0, _vkjs.hasReactNode)(header) && /*#__PURE__*/ _react.createElement(HeaderTypography, {
-        Component: "span",
-        className: "vkuiBanner__header",
+        Component: "p",
         weight: "2",
         level: size === "m" ? "2" : "1"
     }, header), (0, _vkjs.hasReactNode)(subheader) && /*#__PURE__*/ _react.createElement(SubheaderTypography, {
-        Component: "span",
+        Component: "p",
         className: "vkuiBanner__subheader"
     }, subheader), (0, _vkjs.hasReactNode)(text) && /*#__PURE__*/ _react.createElement(_text.Text, {
+        Component: "p",
         className: "vkuiBanner__text"
     }, text), (0, _vkjs.hasReactNode)(actions) && _react.Children.count(actions) > 0 && /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiBanner__actions"

package/dist/cjs/components/Banner/Banner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon24Cancel,\n  Icon24Chevron,\n  Icon24DismissDark,\n  Icon24DismissSubstract,\n} from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasRootRef } from '../../types';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Banner.module.css';\n\nexport interface BannerProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLElement> {\n  /**\n   * Тип баннера.\n   */\n  mode?: 'tint' | 'image';\n  size?: 's' | 'm';\n  /**\n   * Тип действия в правой части баннера.\n   *\n   * - `dismiss` – отображается иконка крестика, при клике на неё сработает свойство `onDismiss`.\n   * - `expand` – отображается иконка шеврона, которая подразумевает, что при клике на баннер можно куда-то перейти.\n   */\n  asideMode?: 'dismiss' | 'expand';\n  /**\n   * Срабатывает при клике на иконку крестика при `asideMode=\"dismiss\"`.\n   */\n  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * `aria-label` для кнопки при `asideMode=\"dismiss\". Необходим, чтобы кнопка была доступной.\n   */\n  dismissLabel?: string;\n  /**\n   * Содержимое, отображаемое в левой части баннера.\n   */\n  before?: React.ReactNode;\n  /**\n   * Заголовок. <br />\n   * При использовании этого свойства рекомендуется не указывать `text`.\n   */\n  header?: React.ReactNode;\n  /**\n   * Подзаголовок. <br />\n   * При использовании этого свойства рекомендуется не указывать `text`.\n   */\n  subheader?: React.ReactNode;\n  /**\n   * Текст баннера. <br />\n   * Это свойство следует использовать без указания `header` и `subheader`.\n   */\n  text?: React.ReactNode;\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * - `light` – в качестве фона используется светлое изображение, цвет текста в баннере будет тёмным.\n   * - `dark` – в качестве фона используется тёмное изображение, цвет текста будет светлым.\n   */\n  imageTheme?: 'light' | 'dark';\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * Элемент, который нужно стилизовать цветом и/или фоном. Этот элемент будет растянут на 100% ширины и высоты баннера.\n   */\n  background?: React.ReactNode;\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button).\n   *\n   * - В режиме `tint` или `image` со светлым фоном используйте только с параметрами:\n   *    - `mode=\"primary\"`\n   *    - `mode=\"secondary\"`\n   * - В режиме `image` с тёмным фоном используйте с параметрами:\n   *    - `appearance=\"overlay\"`.\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `gap=\"m\" mode=\"horizontal\" stretched`\n   * - `gap=\"m\" mode=\"vertical\" stretched`\n   */\n  actions?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Banner\n */\nexport const Banner = ({\n  mode = 'tint',\n  imageTheme = 'dark',\n  size = 's',\n  before,\n  asideMode,\n  header,\n  subheader,\n  text,\n  children,\n  background,\n  actions,\n  onDismiss,\n  dismissLabel = 'Скрыть',\n  className,\n  getRootRef,\n  ...restProps\n}: BannerProps) => {\n  const platform = usePlatform();\n\n  const HeaderTypography = size === 'm' ? Title : Headline;\n  const SubheaderTypography = size === 'm' ? Text : Subhead;\n\n  const IconDismissIOS = mode === 'image' ? Icon24DismissDark : Icon24DismissSubstract;\n\n  const content = (\n    <React.Fragment>\n      {mode === 'image' && background && (\n        <div aria-hidden className={styles['Banner__bg']}>\n          {background}\n        </div>\n      )}\n\n      {before && <div className={styles['Banner__before']}>{before}</div>}\n\n      <div className={styles['Banner__content']}>\n        {hasReactNode(header) && (\n          <HeaderTypography\n            Component=\"span\"\n            className={styles['Banner__header']}\n            weight=\"2\"\n            level={size === 'm' ? '2' : '1'}\n          >\n            {header}\n          </HeaderTypography>\n        )}\n        {hasReactNode(subheader) && (\n          <SubheaderTypography Component=\"span\" className={styles['Banner__subheader']}>\n            {subheader}\n          </SubheaderTypography>\n        )}\n        {hasReactNode(text) && <Text className={styles['Banner__text']}>{text}</Text>}\n        {hasReactNode(actions) && React.Children.count(actions) > 0 && (\n          <div className={styles['Banner__actions']}>{actions}</div>\n        )}\n      </div>\n    </React.Fragment>\n  );\n\n  return (\n    <section\n      {...restProps}\n      className={classNames(\n        styles['Banner'],\n        platform === Platform.IOS && styles['Banner--ios'],\n        mode === 'image' && styles['Banner--mode-image'],\n        {\n          s: styles['Banner--size-s'],\n          m: styles['Banner--size-m'],\n        }[size],\n        mode === 'image' && imageTheme === 'dark' && styles['Banner--inverted'],\n        className,\n      )}\n      ref={getRootRef}\n    >\n      {asideMode === 'expand' ? (\n        <Tappable\n          className={styles['Banner__in']}\n          activeMode={platform === Platform.IOS ? 'opacity' : 'background'}\n          role=\"button\"\n        >\n          {content}\n\n          <div className={styles['Banner__aside']}>\n            <Icon24Chevron />\n          </div>\n        </Tappable>\n      ) : (\n        <div className={styles['Banner__in']}>\n          {content}\n\n          {asideMode === 'dismiss' && (\n            <div className={styles['Banner__aside']}>\n              <IconButton\n                aria-label={dismissLabel}\n                className={styles['Banner__dismiss']}\n                onClick={onDismiss}\n                hoverMode=\"opacity\"\n                hasActive={false}\n              >\n                {platform === Platform.IOS ? <IconDismissIOS /> : <Icon24Cancel />}\n              </IconButton>\n            </div>\n          )}\n        </div>\n      )}\n    </section>\n  );\n};\n"],"names":["Banner","mode","imageTheme","size","before","asideMode","header","subheader","text","children","background","actions","onDismiss","dismissLabel","className","getRootRef","restProps","platform","usePlatform","HeaderTypography","Title","Headline","SubheaderTypography","Text","Subhead","IconDismissIOS","Icon24DismissDark","Icon24DismissSubstract","content","React","Fragment","div","aria-hidden","hasReactNode","Component","weight","level","Children","count","section","classNames","Platform","IOS","s","m","ref","Tappable","activeMode","role","Icon24Chevron","IconButton","aria-label","onClick","hoverMode","hasActive","Icon24Cancel"],"mappings":";;;;+BA4FaA;;;eAAAA;;;;;;;2DA5FU;qBAMhB;oBACkC;2BACb;wBACH;0BAEE;wBACF;wBACA;uBACD;oBACH;qBACC;AA4Ef,IAAMA,SAAS,iBAiBH;6BAhBjBC,MAAAA,gCAAO,iDACPC,YAAAA,4CAAa,iDACbC,MAAAA,gCAAO,mBACPC,gBAAAA,QACAC,mBAAAA,WACAC,gBAAAA,QACAC,mBAAAA,WACAC,cAAAA,MACAC,kBAAAA,UACAC,oBAAAA,YACAC,iBAAAA,SACAC,mBAAAA,wCACAC,cAAAA,gDAAe,gCACfC,mBAAAA,WACAC,oBAAAA,YACGC;QAfHf;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA,wBAAW;IAE5B,IAAMC,mBAAmBhB,SAAS,MAAMiB,YAAK,GAAGC,kBAAQ;IACxD,IAAMC,sBAAsBnB,SAAS,MAAMoB,UAAI,GAAGC,gBAAO;IAEzD,IAAMC,iBAAiBxB,SAAS,UAAUyB,wBAAiB,GAAGC,6BAAsB;IAEpF,IAAMC,wBACJ,qBAACC,OAAMC,QAAQ,QACZ7B,SAAS,WAAWS,4BACnB,qBAACqB;QAAIC,eAAAA,IAAW;QAAClB,SAAS;OACvBJ,aAIJN,wBAAU,qBAAC2B;QAAIjB,SAAS;OAA6BV,uBAEtD,qBAAC2B;QAAIjB,SAAS;OACXmB,IAAAA,kBAAY,EAAC3B,yBACZ,qBAACa;QACCe,WAAU;QACVpB,SAAS;QACTqB,QAAO;QACPC,OAAOjC,SAAS,MAAM,MAAM,GAAG;OAE9BG,SAGJ2B,IAAAA,kBAAY,EAAC1B,4BACZ,qBAACe;QAAoBY,WAAU;QAAOpB,SAAS;OAC5CP,YAGJ0B,IAAAA,kBAAY,EAACzB,uBAAS,qBAACe,UAAI;QAACT,SAAS;OAA2BN,OAChEyB,IAAAA,kBAAY,EAACtB,YAAYkB,OAAMQ,QAAQ,CAACC,KAAK,CAAC3B,WAAW,mBACxD,qBAACoB;QAAIjB,SAAS;OAA8BH;IAMpD,qBACE,qBAAC4B,gDACKvB;QACJF,WAAW0B,IAAAA,gBAAU,gBAEnBvB,aAAawB,kBAAQ,CAACC,GAAG,uBACzBzC,SAAS,qCACT;YACE0C,CAAC;YACDC,CAAC;QACH,CAAC,CAACzC,KAAK,EACPF,SAAS,WAAWC,eAAe,kCACnCY;QAEF+B,KAAK9B;QAEJV,cAAc,yBACb,qBAACyC,kBAAQ;QACPhC,SAAS;QACTiC,YAAY9B,aAAawB,kBAAQ,CAACC,GAAG,GAAG,YAAY,YAAY;QAChEM,MAAK;OAEJpB,uBAED,qBAACG;QAAIjB,SAAS;qBACZ,qBAACmC,oBAAa,0BAIlB,qBAAClB;QAAIjB,SAAS;OACXc,SAEAvB,cAAc,2BACb,qBAAC0B;QAAIjB,SAAS;qBACZ,qBAACoC,sBAAU;QACTC,cAAYtC;QACZC,SAAS;QACTsC,SAASxC;QACTyC,WAAU;QACVC,WAAW,KAAK;OAEfrC,aAAawB,kBAAQ,CAACC,GAAG,iBAAG,qBAACjB,sCAAoB,qBAAC8B,mBAAY,OAAG,GAK3E;AAGP"}
+{"version":3,"sources":["../../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon24Cancel,\n  Icon24Chevron,\n  Icon24DismissDark,\n  Icon24DismissSubstract,\n} from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasRootRef } from '../../types';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Banner.module.css';\n\nexport interface BannerProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLElement> {\n  /**\n   * Тип баннера.\n   */\n  mode?: 'tint' | 'image';\n  size?: 's' | 'm';\n  /**\n   * Тип действия в правой части баннера.\n   *\n   * - `dismiss` – отображается иконка крестика, при клике на неё сработает свойство `onDismiss`.\n   * - `expand` – отображается иконка шеврона, которая подразумевает, что при клике на баннер можно куда-то перейти.\n   */\n  asideMode?: 'dismiss' | 'expand';\n  /**\n   * Срабатывает при клике на иконку крестика при `asideMode=\"dismiss\"`.\n   */\n  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * `aria-label` для кнопки при `asideMode=\"dismiss\". Необходим, чтобы кнопка была доступной.\n   */\n  dismissLabel?: string;\n  /**\n   * Содержимое, отображаемое в левой части баннера.\n   */\n  before?: React.ReactNode;\n  /**\n   * Заголовок. <br />\n   * При использовании этого свойства рекомендуется не указывать `text`.\n   */\n  header?: React.ReactNode;\n  /**\n   * Подзаголовок. <br />\n   * При использовании этого свойства рекомендуется не указывать `text`.\n   */\n  subheader?: React.ReactNode;\n  /**\n   * Текст баннера. <br />\n   * Это свойство следует использовать без указания `header` и `subheader`.\n   */\n  text?: React.ReactNode;\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * - `light` – в качестве фона используется светлое изображение, цвет текста в баннере будет тёмным.\n   * - `dark` – в качестве фона используется тёмное изображение, цвет текста будет светлым.\n   */\n  imageTheme?: 'light' | 'dark';\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * Элемент, который нужно стилизовать цветом и/или фоном. Этот элемент будет растянут на 100% ширины и высоты баннера.\n   */\n  background?: React.ReactNode;\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button).\n   *\n   * - В режиме `tint` или `image` со светлым фоном используйте только с параметрами:\n   *    - `mode=\"primary\"`\n   *    - `mode=\"secondary\"`\n   * - В режиме `image` с тёмным фоном используйте с параметрами:\n   *    - `appearance=\"overlay\"`.\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `gap=\"m\" mode=\"horizontal\" stretched`\n   * - `gap=\"m\" mode=\"vertical\" stretched`\n   */\n  actions?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Banner\n */\nexport const Banner = ({\n  mode = 'tint',\n  imageTheme = 'dark',\n  size = 's',\n  before,\n  asideMode,\n  header,\n  subheader,\n  text,\n  children,\n  background,\n  actions,\n  onDismiss,\n  dismissLabel = 'Скрыть',\n  className,\n  getRootRef,\n  ...restProps\n}: BannerProps) => {\n  const platform = usePlatform();\n\n  const HeaderTypography = size === 'm' ? Title : Headline;\n  const SubheaderTypography = size === 'm' ? Text : Subhead;\n\n  const IconDismissIOS = mode === 'image' ? Icon24DismissDark : Icon24DismissSubstract;\n\n  const content = (\n    <>\n      {mode === 'image' && background && (\n        <div aria-hidden className={styles['Banner__bg']}>\n          {background}\n        </div>\n      )}\n\n      {before && <div className={styles['Banner__before']}>{before}</div>}\n\n      <div className={styles['Banner__content']}>\n        {hasReactNode(header) && (\n          <HeaderTypography Component=\"p\" weight=\"2\" level={size === 'm' ? '2' : '1'}>\n            {header}\n          </HeaderTypography>\n        )}\n        {hasReactNode(subheader) && (\n          <SubheaderTypography Component=\"p\" className={styles['Banner__subheader']}>\n            {subheader}\n          </SubheaderTypography>\n        )}\n        {hasReactNode(text) && (\n          <Text Component=\"p\" className={styles['Banner__text']}>\n            {text}\n          </Text>\n        )}\n        {hasReactNode(actions) && React.Children.count(actions) > 0 && (\n          <div className={styles['Banner__actions']}>{actions}</div>\n        )}\n      </div>\n    </>\n  );\n\n  return (\n    <section\n      {...restProps}\n      className={classNames(\n        styles['Banner'],\n        platform === Platform.IOS && styles['Banner--ios'],\n        mode === 'image' && styles['Banner--mode-image'],\n        {\n          s: styles['Banner--size-s'],\n          m: styles['Banner--size-m'],\n        }[size],\n        mode === 'image' && imageTheme === 'dark' && styles['Banner--inverted'],\n        className,\n      )}\n      ref={getRootRef}\n    >\n      {asideMode === 'expand' ? (\n        <Tappable\n          className={styles['Banner__in']}\n          activeMode={platform === Platform.IOS ? 'opacity' : 'background'}\n          role=\"button\"\n        >\n          {content}\n\n          <div className={styles['Banner__aside']}>\n            <Icon24Chevron />\n          </div>\n        </Tappable>\n      ) : (\n        <div className={styles['Banner__in']}>\n          {content}\n\n          {asideMode === 'dismiss' && (\n            <div className={styles['Banner__aside']}>\n              <IconButton\n                aria-label={dismissLabel}\n                className={styles['Banner__dismiss']}\n                onClick={onDismiss}\n                hoverMode=\"opacity\"\n                hasActive={false}\n              >\n                {platform === Platform.IOS ? <IconDismissIOS /> : <Icon24Cancel />}\n              </IconButton>\n            </div>\n          )}\n        </div>\n      )}\n    </section>\n  );\n};\n"],"names":["Banner","mode","imageTheme","size","before","asideMode","header","subheader","text","children","background","actions","onDismiss","dismissLabel","className","getRootRef","restProps","platform","usePlatform","HeaderTypography","Title","Headline","SubheaderTypography","Text","Subhead","IconDismissIOS","Icon24DismissDark","Icon24DismissSubstract","content","div","aria-hidden","hasReactNode","Component","weight","level","React","Children","count","section","classNames","Platform","IOS","s","m","ref","Tappable","activeMode","role","Icon24Chevron","IconButton","aria-label","onClick","hoverMode","hasActive","Icon24Cancel"],"mappings":";;;;+BA4FaA;;;eAAAA;;;;;;;2DA5FU;qBAMhB;oBACkC;2BACb;wBACH;0BAEE;wBACF;wBACA;uBACD;oBACH;qBACC;AA4Ef,IAAMA,SAAS,iBAiBH;6BAhBjBC,MAAAA,gCAAO,iDACPC,YAAAA,4CAAa,iDACbC,MAAAA,gCAAO,mBACPC,gBAAAA,QACAC,mBAAAA,WACAC,gBAAAA,QACAC,mBAAAA,WACAC,cAAAA,MACAC,kBAAAA,UACAC,oBAAAA,YACAC,iBAAAA,SACAC,mBAAAA,wCACAC,cAAAA,gDAAe,gCACfC,mBAAAA,WACAC,oBAAAA,YACGC;QAfHf;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA,wBAAW;IAE5B,IAAMC,mBAAmBhB,SAAS,MAAMiB,YAAK,GAAGC,kBAAQ;IACxD,IAAMC,sBAAsBnB,SAAS,MAAMoB,UAAI,GAAGC,gBAAO;IAEzD,IAAMC,iBAAiBxB,SAAS,UAAUyB,wBAAiB,GAAGC,6BAAsB;IAEpF,IAAMC,wBACJ,4CACG3B,SAAS,WAAWS,4BACnB,qBAACmB;QAAIC,eAAAA,IAAW;QAAChB,SAAS;OACvBJ,aAIJN,wBAAU,qBAACyB;QAAIf,SAAS;OAA6BV,uBAEtD,qBAACyB;QAAIf,SAAS;OACXiB,IAAAA,kBAAY,EAACzB,yBACZ,qBAACa;QAAiBa,WAAU;QAAIC,QAAO;QAAIC,OAAO/B,SAAS,MAAM,MAAM,GAAG;OACvEG,SAGJyB,IAAAA,kBAAY,EAACxB,4BACZ,qBAACe;QAAoBU,WAAU;QAAIlB,SAAS;OACzCP,YAGJwB,IAAAA,kBAAY,EAACvB,uBACZ,qBAACe,UAAI;QAACS,WAAU;QAAIlB,SAAS;OAC1BN,OAGJuB,IAAAA,kBAAY,EAACpB,YAAYwB,OAAMC,QAAQ,CAACC,KAAK,CAAC1B,WAAW,mBACxD,qBAACkB;QAAIf,SAAS;OAA8BH;IAMpD,qBACE,qBAAC2B,gDACKtB;QACJF,WAAWyB,IAAAA,gBAAU,gBAEnBtB,aAAauB,kBAAQ,CAACC,GAAG,uBACzBxC,SAAS,qCACT;YACEyC,CAAC;YACDC,CAAC;QACH,CAAC,CAACxC,KAAK,EACPF,SAAS,WAAWC,eAAe,kCACnCY;QAEF8B,KAAK7B;QAEJV,cAAc,yBACb,qBAACwC,kBAAQ;QACP/B,SAAS;QACTgC,YAAY7B,aAAauB,kBAAQ,CAACC,GAAG,GAAG,YAAY,YAAY;QAChEM,MAAK;OAEJnB,uBAED,qBAACC;QAAIf,SAAS;qBACZ,qBAACkC,oBAAa,0BAIlB,qBAACnB;QAAIf,SAAS;OACXc,SAEAvB,cAAc,2BACb,qBAACwB;QAAIf,SAAS;qBACZ,qBAACmC,sBAAU;QACTC,cAAYrC;QACZC,SAAS;QACTqC,SAASvC;QACTwC,WAAU;QACVC,WAAW,KAAK;OAEfpC,aAAauB,kBAAQ,CAACC,GAAG,iBAAG,qBAAChB,sCAAoB,qBAAC6B,mBAAY,OAAG,GAK3E;AAGP"}

package/dist/cjs/components/Cell/CellDragger/CellDragger.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
 import { DraggableProps } from '../useDraggable';
-type CellDraggerProps = DraggableProps & React.HTMLAttributes<HTMLElement>;
-export declare const CellDragger: ({ onDragStart, onDragMove, onDragEnd, className, ...restProps }: CellDraggerProps) => JSX.Element;
+type CellDraggerProps = DraggableProps & Omit<React.HTMLAttributes<HTMLElement>, keyof DraggableProps>;
+export declare const CellDragger: ({ onDragStart, onDragMove, onDragEnd, onClick, className, ...restProps }: CellDraggerProps) => JSX.Element;
 export {};

package/dist/cjs/components/Cell/CellDragger/CellDragger.js

@@ -18,22 +18,26 @@ var _usePlatform = require("../../../hooks/usePlatform");
 var _platform = require("../../../lib/platform");
 var _touch = require("../../Touch/Touch");
 var CellDragger = function(_param) {
-    var onDragStart = _param.onDragStart, onDragMove = _param.onDragMove, onDragEnd = _param.onDragEnd, className = _param.className, restProps = _objectWithoutProperties(_param, [
+    var onDragStart = _param.onDragStart, onDragMove = _param.onDragMove, onDragEnd = _param.onDragEnd, onClick = _param.onClick, className = _param.className, restProps = _objectWithoutProperties(_param, [
         "onDragStart",
         "onDragMove",
         "onDragEnd",
+        "onClick",
         "className"
     ]);
     var platform = (0, _usePlatform.usePlatform)();
-    var onClick = _react.useCallback(function(e) {
-        e.preventDefault();
-    }, []);
+    var handleClick = function(event) {
+        event.preventDefault();
+        if (onClick) {
+            onClick(event);
+        }
+    };
     return /*#__PURE__*/ _react.createElement(_touch.Touch, _objectSpread({
         className: (0, _vkjs.classNames)("vkuiCellDragger", className),
         onStart: onDragStart,
         onMoveY: onDragMove,
         onEnd: onDragEnd,
-        onClick: onClick
+        onClick: handleClick
     }, restProps), platform === _platform.Platform.IOS ? /*#__PURE__*/ _react.createElement(_icons.Icon24ReorderIos, null) : /*#__PURE__*/ _react.createElement(_icons.Icon24Reorder, null));
 };
 

package/dist/cjs/components/Cell/CellDragger/CellDragger.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Cell/CellDragger/CellDragger.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Reorder, Icon24ReorderIos } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../../hooks/usePlatform';\nimport { Platform } from '../../../lib/platform';\nimport { Touch } from '../../Touch/Touch';\nimport { DraggableProps } from '../useDraggable';\nimport styles from './CellDragger.module.css';\n\ntype CellDraggerProps = DraggableProps & React.HTMLAttributes<HTMLElement>;\n\nexport const CellDragger = ({\n  onDragStart,\n  onDragMove,\n  onDragEnd,\n  className,\n  ...restProps\n}: CellDraggerProps) => {\n  const platform = usePlatform();\n\n  const onClick = React.useCallback((e: React.MouseEvent) => {\n    e.preventDefault();\n  }, []);\n\n  return (\n    <Touch\n      className={classNames(styles['CellDragger'], className)}\n      onStart={onDragStart}\n      onMoveY={onDragMove}\n      onEnd={onDragEnd}\n      onClick={onClick}\n      {...restProps}\n    >\n      {platform === Platform.IOS ? <Icon24ReorderIos /> : <Icon24Reorder />}\n    </Touch>\n  );\n};\n"],"names":["CellDragger","onDragStart","onDragMove","onDragEnd","className","restProps","platform","usePlatform","onClick","React","useCallback","e","preventDefault","Touch","classNames","onStart","onMoveY","onEnd","Platform","IOS","Icon24ReorderIos","Icon24Reorder"],"mappings":";;;;+BAWaA;;;eAAAA;;;;;;2DAXU;qBACyB;oBACrB;2BACC;wBACH;qBACH;AAMf,IAAMA,cAAc,iBAMH;QALtBC,qBAAAA,aACAC,oBAAAA,YACAC,mBAAAA,WACAC,mBAAAA,WACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA,wBAAW;IAE5B,IAAMC,UAAUC,OAAMC,WAAW,CAAC,SAACC,GAAwB;QACzDA,EAAEC,cAAc;IAClB,GAAG,EAAE;IAEL,qBACE,qBAACC,YAAK;QACJT,WAAWU,IAAAA,gBAAU,qBAAwBV;QAC7CW,SAASd;QACTe,SAASd;QACTe,OAAOd;QACPK,SAASA;OACLH,YAEHC,aAAaY,kBAAQ,CAACC,GAAG,iBAAG,qBAACC,uBAAgB,wBAAM,qBAACC,oBAAa,OAAG;AAG3E"}
+{"version":3,"sources":["../../../../../src/components/Cell/CellDragger/CellDragger.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Reorder, Icon24ReorderIos } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../../hooks/usePlatform';\nimport { Platform } from '../../../lib/platform';\nimport { Touch } from '../../Touch/Touch';\nimport { DraggableProps } from '../useDraggable';\nimport styles from './CellDragger.module.css';\n\ntype CellDraggerProps = DraggableProps &\n  Omit<React.HTMLAttributes<HTMLElement>, keyof DraggableProps>;\n\nexport const CellDragger = ({\n  onDragStart,\n  onDragMove,\n  onDragEnd,\n  onClick,\n  className,\n  ...restProps\n}: CellDraggerProps) => {\n  const platform = usePlatform();\n\n  const handleClick = (event: React.MouseEvent<HTMLElement>) => {\n    event.preventDefault();\n    if (onClick) {\n      onClick(event);\n    }\n  };\n\n  return (\n    <Touch\n      className={classNames(styles['CellDragger'], className)}\n      onStart={onDragStart}\n      onMoveY={onDragMove}\n      onEnd={onDragEnd}\n      onClick={handleClick}\n      {...restProps}\n    >\n      {platform === Platform.IOS ? <Icon24ReorderIos /> : <Icon24Reorder />}\n    </Touch>\n  );\n};\n"],"names":["CellDragger","onDragStart","onDragMove","onDragEnd","onClick","className","restProps","platform","usePlatform","handleClick","event","preventDefault","Touch","classNames","onStart","onMoveY","onEnd","Platform","IOS","Icon24ReorderIos","Icon24Reorder"],"mappings":";;;;+BAYaA;;;eAAAA;;;;;;2DAZU;qBACyB;oBACrB;2BACC;wBACH;qBACH;AAOf,IAAMA,cAAc,iBAOH;QANtBC,qBAAAA,aACAC,oBAAAA,YACAC,mBAAAA,WACAC,iBAAAA,SACAC,mBAAAA,WACGC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA,wBAAW;IAE5B,IAAMC,cAAc,SAACC,OAAyC;QAC5DA,MAAMC,cAAc;QACpB,IAAIP,SAAS;YACXA,QAAQM;QACV,CAAC;IACH;IAEA,qBACE,qBAACE,YAAK;QACJP,WAAWQ,IAAAA,gBAAU,qBAAwBR;QAC7CS,SAASb;QACTc,SAASb;QACTc,OAAOb;QACPC,SAASK;OACLH,YAEHC,aAAaU,kBAAQ,CAACC,GAAG,iBAAG,qBAACC,uBAAgB,wBAAM,qBAACC,oBAAa,OAAG;AAG3E"}

package/dist/cjs/components/Cell/useDraggable.d.ts

@@ -2,9 +2,9 @@ import * as React from 'react';
 import { TouchEvent } from '../Touch/Touch';
 import { CellProps } from './Cell';
 export interface DraggableProps {
-    onDragStart: () => void;
-    onDragEnd: () => void;
-    onDragMove: (e: TouchEvent) => void;
+    onDragStart(event: TouchEvent): void;
+    onDragEnd(event: TouchEvent): void;
+    onDragMove(event: TouchEvent): void;
 }
 interface UseDraggableProps extends DraggableProps {
     dragging: boolean;

package/dist/cjs/components/Cell/useDraggable.js

@@ -19,12 +19,14 @@ var useDraggable = function(param) {
     var _React_useState3 = _slicedToArray(_react.useState(0), 2), dragEndIndex = _React_useState3[0], setDragEndIndex = _React_useState3[1];
     var _React_useState4 = _slicedToArray(_react.useState(0), 2), dragShift = _React_useState4[0], setDragShift = _React_useState4[1];
     var _React_useState5 = _slicedToArray(_react.useState(undefined), 2), dragDirection = _React_useState5[0], setDragDirection = _React_useState5[1];
-    var onDragStart = function() {
+    var onDragStart = function(event) {
         var _rootEl_parentElement;
         var rootEl = rootElRef.current;
         if (!rootEl) {
             return;
         }
+        event.originalEvent.stopPropagation();
+        event.originalEvent.preventDefault();
         setDragging(true);
         var _siblings = [];
         if ((_rootEl_parentElement = rootEl.parentElement) === null || _rootEl_parentElement === void 0 ? void 0 : _rootEl_parentElement.childNodes) {
@@ -36,14 +38,15 @@ var useDraggable = function(param) {
         setSiblings(_siblings);
         setDragShift(0);
     };
-    var onDragMove = function(e) {
-        e.originalEvent.preventDefault();
+    var onDragMove = function(event) {
+        event.originalEvent.stopPropagation();
+        event.originalEvent.preventDefault();
         var rootEl = rootElRef.current;
         if (rootEl) {
-            rootEl.style.transform = "translateY(".concat(e.shiftY, "px)");
+            rootEl.style.transform = "translateY(".concat(event.shiftY, "px)");
             var rootGesture = rootEl.getBoundingClientRect();
-            setDragDirection(dragShift - e.shiftY < 0 ? "down" : "up");
-            setDragShift(e.shiftY);
+            setDragDirection(dragShift - event.shiftY < 0 ? "down" : "up");
+            setDragShift(event.shiftY);
             setDragEndIndex(dragStartIndex);
             siblings.forEach(function(sibling, siblingIndex) {
                 var siblingGesture = sibling.getBoundingClientRect();
@@ -78,7 +81,9 @@ var useDraggable = function(param) {
             });
         }
     };
-    var onDragEnd = function() {
+    var onDragEnd = function(event) {
+        event.originalEvent.stopPropagation();
+        event.originalEvent.preventDefault();
         var _ref = [
             dragStartIndex,
             dragEndIndex

package/dist/cjs/components/Cell/useDraggable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Cell/useDraggable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TouchEvent } from '../Touch/Touch';\nimport { CellProps } from './Cell';\n\nexport interface DraggableProps {\n  onDragStart: () => void;\n  onDragEnd: () => void;\n  onDragMove: (e: TouchEvent) => void;\n}\n\ninterface UseDraggableProps extends DraggableProps {\n  dragging: boolean;\n}\n\nexport const useDraggable = <T extends HTMLElement>({\n  rootElRef,\n  onDragFinish,\n}: Pick<CellProps, 'onDragFinish'> & {\n  rootElRef: React.MutableRefObject<T | null>;\n}) => {\n  const [dragging, setDragging] = React.useState<boolean>(false);\n\n  const [siblings, setSiblings] = React.useState<HTMLElement[]>([]);\n  const [dragStartIndex, setDragStartIndex] = React.useState<number>(0);\n  const [dragEndIndex, setDragEndIndex] = React.useState<number>(0);\n  const [dragShift, setDragShift] = React.useState<number>(0);\n  const [dragDirection, setDragDirection] = React.useState<'down' | 'up' | undefined>(undefined);\n\n  const onDragStart = () => {\n    const rootEl = rootElRef.current;\n    if (!rootEl) {\n      return;\n    }\n\n    setDragging(true);\n\n    let _siblings: HTMLElement[] = [];\n    if (rootEl.parentElement?.childNodes) {\n      _siblings = Array.from(rootEl.parentElement.children) as HTMLElement[];\n    }\n    const idx = _siblings.indexOf(rootEl);\n\n    setDragStartIndex(idx);\n    setDragEndIndex(idx);\n    setSiblings(_siblings);\n    setDragShift(0);\n  };\n\n  const onDragMove = (e: TouchEvent) => {\n    e.originalEvent.preventDefault();\n\n    const rootEl = rootElRef.current;\n\n    if (rootEl) {\n      rootEl.style.transform = `translateY(${e.shiftY}px)`;\n      const rootGesture = rootEl.getBoundingClientRect();\n\n      setDragDirection(dragShift - e.shiftY < 0 ? 'down' : 'up');\n      setDragShift(e.shiftY);\n      setDragEndIndex(dragStartIndex);\n\n      siblings.forEach((sibling: HTMLElement, siblingIndex: number) => {\n        const siblingGesture = sibling.getBoundingClientRect();\n        const siblingHalfHeight = siblingGesture.height / 2;\n\n        const rootOverSibling = rootGesture.bottom > siblingGesture.top + siblingHalfHeight;\n        const rootUnderSibling = rootGesture.top < siblingGesture.bottom - siblingHalfHeight;\n\n        if (dragStartIndex < siblingIndex) {\n          if (rootOverSibling) {\n            if (dragDirection === 'down') {\n              sibling.style.transform = 'translateY(-100%)';\n            }\n\n            setDragEndIndex((dragEndIndex) => dragEndIndex + 1);\n          }\n          if (rootUnderSibling && dragDirection === 'up') {\n            sibling.style.transform = 'translateY(0)';\n          }\n        } else if (dragStartIndex > siblingIndex) {\n          if (rootUnderSibling) {\n            if (dragDirection === 'up') {\n              sibling.style.transform = 'translateY(100%)';\n            }\n\n            setDragEndIndex((dragEndIndex) => dragEndIndex - 1);\n          }\n          if (rootOverSibling && dragDirection === 'down') {\n            sibling.style.transform = 'translateY(0)';\n          }\n        }\n      });\n    }\n  };\n\n  const onDragEnd = () => {\n    const [from, to] = [dragStartIndex, dragEndIndex];\n\n    siblings.forEach((sibling: HTMLElement) => {\n      sibling.style.transform = '';\n    });\n\n    setSiblings([]);\n    setDragEndIndex(0);\n    setDragStartIndex(0);\n    setDragDirection(undefined);\n    setDragShift(0);\n\n    setDragging(false);\n\n    onDragFinish && onDragFinish({ from, to });\n  };\n\n  const useDraggableProps: UseDraggableProps = {\n    onDragStart,\n    onDragMove,\n    onDragEnd,\n    dragging,\n  };\n\n  return useDraggableProps;\n};\n"],"names":["useDraggable","rootElRef","onDragFinish","React","useState","dragging","setDragging","siblings","setSiblings","dragStartIndex","setDragStartIndex","dragEndIndex","setDragEndIndex","dragShift","setDragShift","undefined","dragDirection","setDragDirection","onDragStart","rootEl","current","_siblings","parentElement","childNodes","Array","from","children","idx","indexOf","onDragMove","e","originalEvent","preventDefault","style","transform","shiftY","rootGesture","getBoundingClientRect","forEach","sibling","siblingIndex","siblingGesture","siblingHalfHeight","height","rootOverSibling","bottom","top","rootUnderSibling","onDragEnd","to","useDraggableProps"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Cell/useDraggable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TouchEvent } from '../Touch/Touch';\nimport { CellProps } from './Cell';\n\nexport interface DraggableProps {\n  onDragStart(event: TouchEvent): void;\n  onDragEnd(event: TouchEvent): void;\n  onDragMove(event: TouchEvent): void;\n}\n\ninterface UseDraggableProps extends DraggableProps {\n  dragging: boolean;\n}\n\nexport const useDraggable = <T extends HTMLElement>({\n  rootElRef,\n  onDragFinish,\n}: Pick<CellProps, 'onDragFinish'> & {\n  rootElRef: React.MutableRefObject<T | null>;\n}) => {\n  const [dragging, setDragging] = React.useState<boolean>(false);\n\n  const [siblings, setSiblings] = React.useState<HTMLElement[]>([]);\n  const [dragStartIndex, setDragStartIndex] = React.useState<number>(0);\n  const [dragEndIndex, setDragEndIndex] = React.useState<number>(0);\n  const [dragShift, setDragShift] = React.useState<number>(0);\n  const [dragDirection, setDragDirection] = React.useState<'down' | 'up' | undefined>(undefined);\n\n  const onDragStart = (event: TouchEvent) => {\n    const rootEl = rootElRef.current;\n    if (!rootEl) {\n      return;\n    }\n    event.originalEvent.stopPropagation();\n    event.originalEvent.preventDefault();\n\n    setDragging(true);\n\n    let _siblings: HTMLElement[] = [];\n    if (rootEl.parentElement?.childNodes) {\n      _siblings = Array.from(rootEl.parentElement.children) as HTMLElement[];\n    }\n    const idx = _siblings.indexOf(rootEl);\n\n    setDragStartIndex(idx);\n    setDragEndIndex(idx);\n    setSiblings(_siblings);\n    setDragShift(0);\n  };\n\n  const onDragMove = (event: TouchEvent) => {\n    event.originalEvent.stopPropagation();\n    event.originalEvent.preventDefault();\n\n    const rootEl = rootElRef.current;\n\n    if (rootEl) {\n      rootEl.style.transform = `translateY(${event.shiftY}px)`;\n      const rootGesture = rootEl.getBoundingClientRect();\n\n      setDragDirection(dragShift - event.shiftY < 0 ? 'down' : 'up');\n      setDragShift(event.shiftY);\n      setDragEndIndex(dragStartIndex);\n\n      siblings.forEach((sibling: HTMLElement, siblingIndex: number) => {\n        const siblingGesture = sibling.getBoundingClientRect();\n        const siblingHalfHeight = siblingGesture.height / 2;\n\n        const rootOverSibling = rootGesture.bottom > siblingGesture.top + siblingHalfHeight;\n        const rootUnderSibling = rootGesture.top < siblingGesture.bottom - siblingHalfHeight;\n\n        if (dragStartIndex < siblingIndex) {\n          if (rootOverSibling) {\n            if (dragDirection === 'down') {\n              sibling.style.transform = 'translateY(-100%)';\n            }\n\n            setDragEndIndex((dragEndIndex) => dragEndIndex + 1);\n          }\n          if (rootUnderSibling && dragDirection === 'up') {\n            sibling.style.transform = 'translateY(0)';\n          }\n        } else if (dragStartIndex > siblingIndex) {\n          if (rootUnderSibling) {\n            if (dragDirection === 'up') {\n              sibling.style.transform = 'translateY(100%)';\n            }\n\n            setDragEndIndex((dragEndIndex) => dragEndIndex - 1);\n          }\n          if (rootOverSibling && dragDirection === 'down') {\n            sibling.style.transform = 'translateY(0)';\n          }\n        }\n      });\n    }\n  };\n\n  const onDragEnd = (event: TouchEvent) => {\n    event.originalEvent.stopPropagation();\n    event.originalEvent.preventDefault();\n\n    const [from, to] = [dragStartIndex, dragEndIndex];\n\n    siblings.forEach((sibling: HTMLElement) => {\n      sibling.style.transform = '';\n    });\n\n    setSiblings([]);\n    setDragEndIndex(0);\n    setDragStartIndex(0);\n    setDragDirection(undefined);\n    setDragShift(0);\n\n    setDragging(false);\n\n    onDragFinish && onDragFinish({ from, to });\n  };\n\n  const useDraggableProps: UseDraggableProps = {\n    onDragStart,\n    onDragMove,\n    onDragEnd,\n    dragging,\n  };\n\n  return useDraggableProps;\n};\n"],"names":["useDraggable","rootElRef","onDragFinish","React","useState","dragging","setDragging","siblings","setSiblings","dragStartIndex","setDragStartIndex","dragEndIndex","setDragEndIndex","dragShift","setDragShift","undefined","dragDirection","setDragDirection","onDragStart","event","rootEl","current","originalEvent","stopPropagation","preventDefault","_siblings","parentElement","childNodes","Array","from","children","idx","indexOf","onDragMove","style","transform","shiftY","rootGesture","getBoundingClientRect","forEach","sibling","siblingIndex","siblingGesture","siblingHalfHeight","height","rootOverSibling","bottom","top","rootUnderSibling","onDragEnd","to","useDraggableProps"],"mappings":"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"}

package/dist/cjs/components/HorizontalCell/HorizontalCell.d.ts

@@ -2,11 +2,21 @@ import * as React from 'react';
 import { HasComponent, HasRef, HasRootRef } from '../../types';
 export interface HorizontalCellProps extends React.AnchorHTMLAttributes<HTMLElement>, HasRootRef<HTMLDivElement>, HasRef<HTMLDivElement>, HasComponent {
     size?: 's' | 'm' | 'l';
+    /**
+     * Заголовок
+     */
     header?: React.ReactNode;
+    /**
+     * Дополнительная строка текста под `children`.
+     */
     subtitle?: React.ReactNode;
+    /**
+     * Дополнительная строка текста под `children` и `subtitle`.
+     */
+    extraSubtitle?: React.ReactNode;
     disabled?: boolean;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/HorizontalCell
  */
-export declare const HorizontalCell: ({ className, header, style, subtitle, size, children, getRootRef, getRef, ...restProps }: HorizontalCellProps) => JSX.Element;
+export declare const HorizontalCell: ({ className, header, style, subtitle, size, children, getRootRef, getRef, extraSubtitle, ...restProps }: HorizontalCellProps) => JSX.Element;

package/dist/cjs/components/HorizontalCell/HorizontalCell.js

@@ -28,7 +28,7 @@ var CellTypography = function(_param) {
 var HorizontalCell = function(_param) {
     var className = _param.className, header = _param.header, style = _param.style, subtitle = _param.subtitle, _param_size = _param.size, size = _param_size === void 0 ? "s" : _param_size, _param_children = _param.children, children = _param_children === void 0 ? /*#__PURE__*/ _react.createElement(_avatar.Avatar, {
         size: 56
-    }) : _param_children, getRootRef = _param.getRootRef, getRef = _param.getRef, restProps = _objectWithoutProperties(_param, [
+    }) : _param_children, getRootRef = _param.getRootRef, getRef = _param.getRef, extraSubtitle = _param.extraSubtitle, restProps = _objectWithoutProperties(_param, [
         "className",
         "header",
         "style",
@@ -36,7 +36,8 @@ var HorizontalCell = function(_param) {
         "size",
         "children",
         "getRootRef",
-        "getRef"
+        "getRef",
+        "extraSubtitle"
     ]);
     return /*#__PURE__*/ _react.createElement("div", {
         ref: getRootRef,
@@ -57,7 +58,9 @@ var HorizontalCell = function(_param) {
         size: size
     }, header), (0, _vkjs.hasReactNode)(subtitle) && /*#__PURE__*/ _react.createElement(_footnote.Footnote, {
         className: "vkuiHorizontalCell__subtitle"
-    }, subtitle))));
+    }, subtitle), (0, _vkjs.hasReactNode)(extraSubtitle) && /*#__PURE__*/ _react.createElement(_footnote.Footnote, {
+        className: "vkuiHorizontalCell__subtitle"
+    }, extraSubtitle))));
 };
 
 //# sourceMappingURL=HorizontalCell.js.map

package/dist/cjs/components/HorizontalCell/HorizontalCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/HorizontalCell/HorizontalCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { HasComponent, HasRef, HasRootRef } from '../../types';\nimport { Avatar } from '../Avatar/Avatar';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './HorizontalCell.module.css';\n\ninterface CellTypographyProps extends React.HTMLAttributes<HTMLDivElement> {\n  size: HorizontalCellProps['size'];\n}\n\nconst CellTypography = ({ size, children, ...restProps }: CellTypographyProps) => {\n  return size === 's' ? (\n    <Caption {...restProps}>{children}</Caption>\n  ) : (\n    <Subhead {...restProps}>{children}</Subhead>\n  );\n};\n\nexport interface HorizontalCellProps\n  extends React.AnchorHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement>,\n    HasComponent {\n  size?: 's' | 'm' | 'l';\n  header?: React.ReactNode;\n  subtitle?: React.ReactNode;\n  disabled?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/HorizontalCell\n */\nexport const HorizontalCell = ({\n  className,\n  header,\n  style,\n  subtitle,\n  size = 's',\n  children = <Avatar size={56} />,\n  getRootRef,\n  getRef,\n  ...restProps\n}: HorizontalCellProps) => {\n  return (\n    <div\n      ref={getRootRef}\n      style={style}\n      className={classNames(\n        styles['HorizontalCell'],\n        {\n          s: styles['HorizontalCell--size-s'],\n          m: styles['HorizontalCell--size-m'],\n          l: styles['HorizontalCell--size-l'],\n        }[size],\n        className,\n      )}\n    >\n      <Tappable className={styles['HorizontalCell__body']} getRootRef={getRef} {...restProps}>\n        {hasReactNode(children) && (\n          <div className={styles['HorizontalCell__image']}>{children}</div>\n        )}\n        <div className={styles['HorizontalCell__content']}>\n          {hasReactNode(header) && <CellTypography size={size}>{header}</CellTypography>}\n          {hasReactNode(subtitle) && (\n            <Footnote className={styles['HorizontalCell__subtitle']}>{subtitle}</Footnote>\n          )}\n        </div>\n      </Tappable>\n    </div>\n  );\n};\n"],"names":["HorizontalCell","CellTypography","size","children","restProps","Caption","Subhead","className","header","style","subtitle","Avatar","getRootRef","getRef","div","ref","classNames","s","m","l","Tappable","hasReactNode","Footnote"],"mappings":";;;;+BAoCaA;;;eAAAA;;;;;;2DApCU;oBACkB;sBAElB;wBACE;uBACD;wBACC;uBACD;AAOxB,IAAMC,iBAAiB,iBAA2D;QAAxDC,cAAAA,MAAMC,kBAAAA,UAAaC;QAAnBF;QAAMC;;IAC9B,OAAOD,SAAS,oBACd,qBAACG,gBAAO,EAAKD,WAAYD,0BAEzB,qBAACG,gBAAO,EAAKF,WAAYD,SAC1B;AACH;AAgBO,IAAMH,iBAAiB,iBAUH;QATzBO,mBAAAA,WACAC,gBAAAA,QACAC,eAAAA,OACAC,kBAAAA,+BACAR,MAAAA,gCAAO,4CACPC,UAAAA,sDAAW,qBAACQ,cAAM;QAACT,MAAM;0BACzBU,oBAAAA,YACAC,gBAAAA,QACGT;QARHG;QACAC;QACAC;QACAC;QACAR;QACAC;QACAS;QACAC;;IAGA,qBACE,qBAACC;QACCC,KAAKH;QACLH,OAAOA;QACPF,WAAWS,IAAAA,gBAAU,wBAEnB;YACEC,CAAC;YACDC,CAAC;YACDC,CAAC;QACH,CAAC,CAACjB,KAAK,EACPK;qBAGF,qBAACa,kBAAQ;QAACb,SAAS;QAAkCK,YAAYC;OAAYT,YAC1EiB,IAAAA,kBAAY,EAAClB,2BACZ,qBAACW;QAAIP,SAAS;OAAoCJ,yBAEpD,qBAACW;QAAIP,SAAS;OACXc,IAAAA,kBAAY,EAACb,yBAAW,qBAACP;QAAeC,MAAMA;OAAOM,SACrDa,IAAAA,kBAAY,EAACX,2BACZ,qBAACY,kBAAQ;QAACf,SAAS;OAAuCG;AAMtE"}
+{"version":3,"sources":["../../../../src/components/HorizontalCell/HorizontalCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { HasComponent, HasRef, HasRootRef } from '../../types';\nimport { Avatar } from '../Avatar/Avatar';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './HorizontalCell.module.css';\n\ninterface CellTypographyProps extends React.HTMLAttributes<HTMLDivElement> {\n  size: HorizontalCellProps['size'];\n}\n\nconst CellTypography = ({ size, children, ...restProps }: CellTypographyProps) => {\n  return size === 's' ? (\n    <Caption {...restProps}>{children}</Caption>\n  ) : (\n    <Subhead {...restProps}>{children}</Subhead>\n  );\n};\n\nexport interface HorizontalCellProps\n  extends React.AnchorHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement>,\n    HasComponent {\n  size?: 's' | 'm' | 'l';\n  /**\n   * Заголовок\n   */\n  header?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children`.\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children` и `subtitle`.\n   */\n  extraSubtitle?: React.ReactNode;\n  disabled?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/HorizontalCell\n */\nexport const HorizontalCell = ({\n  className,\n  header,\n  style,\n  subtitle,\n  size = 's',\n  children = <Avatar size={56} />,\n  getRootRef,\n  getRef,\n  extraSubtitle,\n  ...restProps\n}: HorizontalCellProps) => {\n  return (\n    <div\n      ref={getRootRef}\n      style={style}\n      className={classNames(\n        styles['HorizontalCell'],\n        {\n          s: styles['HorizontalCell--size-s'],\n          m: styles['HorizontalCell--size-m'],\n          l: styles['HorizontalCell--size-l'],\n        }[size],\n        className,\n      )}\n    >\n      <Tappable className={styles['HorizontalCell__body']} getRootRef={getRef} {...restProps}>\n        {hasReactNode(children) && (\n          <div className={styles['HorizontalCell__image']}>{children}</div>\n        )}\n        <div className={styles['HorizontalCell__content']}>\n          {hasReactNode(header) && <CellTypography size={size}>{header}</CellTypography>}\n          {hasReactNode(subtitle) && (\n            <Footnote className={styles['HorizontalCell__subtitle']}>{subtitle}</Footnote>\n          )}\n          {hasReactNode(extraSubtitle) && (\n            <Footnote className={styles['HorizontalCell__subtitle']}>{extraSubtitle}</Footnote>\n          )}\n        </div>\n      </Tappable>\n    </div>\n  );\n};\n"],"names":["HorizontalCell","CellTypography","size","children","restProps","Caption","Subhead","className","header","style","subtitle","Avatar","getRootRef","getRef","extraSubtitle","div","ref","classNames","s","m","l","Tappable","hasReactNode","Footnote"],"mappings":";;;;+BA8CaA;;;eAAAA;;;;;;2DA9CU;oBACkB;sBAElB;wBACE;uBACD;wBACC;uBACD;AAOxB,IAAMC,iBAAiB,iBAA2D;QAAxDC,cAAAA,MAAMC,kBAAAA,UAAaC;QAAnBF;QAAMC;;IAC9B,OAAOD,SAAS,oBACd,qBAACG,gBAAO,EAAKD,WAAYD,0BAEzB,qBAACG,gBAAO,EAAKF,WAAYD,SAC1B;AACH;AA0BO,IAAMH,iBAAiB,iBAWH;QAVzBO,mBAAAA,WACAC,gBAAAA,QACAC,eAAAA,OACAC,kBAAAA,+BACAR,MAAAA,gCAAO,4CACPC,UAAAA,sDAAW,qBAACQ,cAAM;QAACT,MAAM;0BACzBU,oBAAAA,YACAC,gBAAAA,QACAC,uBAAAA,eACGV;QATHG;QACAC;QACAC;QACAC;QACAR;QACAC;QACAS;QACAC;QACAC;;IAGA,qBACE,qBAACC;QACCC,KAAKJ;QACLH,OAAOA;QACPF,WAAWU,IAAAA,gBAAU,wBAEnB;YACEC,CAAC;YACDC,CAAC;YACDC,CAAC;QACH,CAAC,CAAClB,KAAK,EACPK;qBAGF,qBAACc,kBAAQ;QAACd,SAAS;QAAkCK,YAAYC;OAAYT,YAC1EkB,IAAAA,kBAAY,EAACnB,2BACZ,qBAACY;QAAIR,SAAS;OAAoCJ,yBAEpD,qBAACY;QAAIR,SAAS;OACXe,IAAAA,kBAAY,EAACd,yBAAW,qBAACP;QAAeC,MAAMA;OAAOM,SACrDc,IAAAA,kBAAY,EAACZ,2BACZ,qBAACa,kBAAQ;QAAChB,SAAS;OAAuCG,WAE3DY,IAAAA,kBAAY,EAACR,gCACZ,qBAACS,kBAAQ;QAAChB,SAAS;OAAuCO;AAMtE"}

package/dist/cjs/components/ImageBase/ImageBase.js

@@ -112,7 +112,7 @@ var ImageBase = function(_param) {
             width: size,
             height: size
         }),
-        className: (0, _vkjs.classNames)(className, "vkuiImageBase", sizeClassName, withBorder && "vkuiImageBase--withBorder", loaded && "vkuiImageBase--loaded"),
+        className: (0, _vkjs.classNames)(className, "vkuiImageBase", sizeClassName, loaded && "vkuiImageBase--loaded"),
         role: hasSrc ? "img" : "presentation",
         "aria-label": ariaLabel,
         onClick: onClick
@@ -134,7 +134,10 @@ var ImageBase = function(_param) {
         onError: handleImageError
     }), fallbackIcon && /*#__PURE__*/ _react.createElement("div", {
         className: (0, _vkjs.classNames)("vkuiImageBase__fallback")
-    }, fallbackIcon), children));
+    }, fallbackIcon), children, withBorder && /*#__PURE__*/ _react.createElement("div", {
+        "aria-hidden": true,
+        className: "vkuiImageBase__border"
+    })));
 };
 ImageBase.Badge = _imageBaseBadge.ImageBaseBadge;
 ImageBase.Overlay = _imageBaseOverlay.ImageBaseOverlay;

package/dist/cjs/components/ImageBase/ImageBase.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ImageBase/ImageBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HasRef, HasRootRef } from '../../types';\nimport { ImageBaseBadge, type ImageBaseBadgeProps } from './ImageBaseBadge/ImageBaseBadge';\nimport { ImageBaseOverlay, type ImageBaseOverlayProps } from './ImageBaseOverlay/ImageBaseOverlay';\nimport { ImageBaseContext } from './context';\nimport type { ImageBaseContextProps, ImageBaseExpectedIconProps, ImageBaseSize } from './types';\nimport { validateFallbackIcon, validateSize } from './validators';\nimport styles from './ImageBase.module.css';\n\nexport type {\n  ImageBaseSize,\n  ImageBaseExpectedIconProps,\n  ImageBaseBadgeProps,\n  ImageBaseOverlayProps,\n  ImageBaseContextProps,\n};\n\nexport {\n  getBadgeIconSizeByImageBaseSize,\n  getFallbackIconSizeByImageBaseSize,\n  getOverlayIconSizeByImageBaseSize,\n} from './helpers';\n\nexport { ImageBaseContext };\n\nexport interface ImageBaseProps\n  extends React.ImgHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLImageElement> {\n  /**\n   * Задаёт размер картинки.\n   *\n   * Используйте размеры заданные дизайн-системой `16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 72 | 80 | 88 | 96`.\n   *\n   * > ⚠️ Использование кастомного размера – это пограничный кейс.\n   */\n  size?: ImageBaseSize | number;\n  /**\n   * Включает или отключает обводку.\n   */\n  withBorder?: boolean;\n  /**\n   * Фолбек на случай, если картинка не прогрузилась.\n   *\n   * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getFallbackIconSizeByImageBaseSize()`.\n   *\n   * > Предпочтительней использовать иконки из `@vkontakte/icons`.\n   *\n   * > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n   * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n   * > использовали иконку.\n   *\n   * > ⚠️ Может перекрывать `children`.\n   */\n  fallbackIcon?: React.ReactElement<ImageBaseExpectedIconProps>;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ImageBase\n */\nexport const ImageBase = ({\n  alt,\n  crossOrigin,\n  decoding,\n  loading,\n  referrerPolicy,\n  sizes,\n  src,\n  srcSet,\n  useMap,\n  getRef,\n  size = 24,\n  width,\n  height,\n  style,\n  className,\n  getRootRef,\n  withBorder = true,\n  'fallbackIcon': fallbackIconProp,\n  children,\n  'aria-label': ariaLabel,\n  onClick,\n  onLoad,\n  onError,\n  ...restProps\n}: ImageBaseProps) => {\n  const [loaded, setLoaded] = React.useState(false);\n  const [failed, setFailed] = React.useState(false);\n\n  const hasSrc = src || srcSet;\n  const needShowFallbackIcon = (failed || !hasSrc) && React.isValidElement(fallbackIconProp);\n\n  const fallbackIcon = needShowFallbackIcon ? fallbackIconProp : null;\n\n  if (process.env.NODE_ENV === 'development') {\n    validateSize(size);\n    if (fallbackIcon) {\n      validateFallbackIcon(size, { name: 'fallbackIcon', value: fallbackIcon });\n    }\n  }\n\n  const handleImageLoad = (event: React.SyntheticEvent<HTMLImageElement>) => {\n    setLoaded(true);\n    setFailed(false);\n    onLoad?.(event);\n  };\n\n  const handleImageError = (event: React.SyntheticEvent<HTMLImageElement>) => {\n    setLoaded(false);\n    setFailed(true);\n    onError?.(event);\n  };\n\n  const sizeClassName = (() => {\n    switch (size) {\n      case 28:\n        return styles['ImageBase--size-28'];\n      case 32:\n        return styles['ImageBase--size-32'];\n      case 40:\n        return styles['ImageBase--size-40'];\n      case 48:\n        return styles['ImageBase--size-48'];\n      case 72:\n        return styles['ImageBase--size-72'];\n    }\n\n    return null;\n  })();\n\n  return (\n    <ImageBaseContext.Provider value={{ size }}>\n      <div\n        {...restProps}\n        ref={getRootRef}\n        style={{ ...style, width: size, height: size }}\n        className={classNames(\n          className,\n          styles['ImageBase'],\n          sizeClassName,\n          withBorder && styles['ImageBase--withBorder'],\n          loaded && styles['ImageBase--loaded'],\n        )}\n        role={hasSrc ? 'img' : 'presentation'}\n        aria-label={ariaLabel}\n        onClick={onClick}\n      >\n        {hasSrc && (\n          <img\n            ref={getRef}\n            alt={alt}\n            className={styles['ImageBase__img']}\n            crossOrigin={crossOrigin}\n            decoding={decoding}\n            loading={loading}\n            referrerPolicy={referrerPolicy}\n            sizes={sizes}\n            src={src}\n            srcSet={srcSet}\n            useMap={useMap}\n            width={width}\n            height={height}\n            onLoad={handleImageLoad}\n            onError={handleImageError}\n          />\n        )}\n        {fallbackIcon && (\n          <div className={classNames(styles['ImageBase__fallback'])}>{fallbackIcon}</div>\n        )}\n        {children}\n      </div>\n    </ImageBaseContext.Provider>\n  );\n};\n\nImageBase.Badge = ImageBaseBadge;\n\nImageBase.Overlay = ImageBaseOverlay;\n"],"names":["getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","ImageBaseContext","ImageBase","alt","crossOrigin","decoding","loading","referrerPolicy","sizes","src","srcSet","useMap","getRef","size","width","height","style","className","getRootRef","withBorder","fallbackIconProp","children","ariaLabel","onClick","onLoad","onError","restProps","React","useState","loaded","setLoaded","failed","setFailed","hasSrc","needShowFallbackIcon","isValidElement","fallbackIcon","process","env","NODE_ENV","validateSize","validateFallbackIcon","name","value","handleImageLoad","event","handleImageError","sizeClassName","Provider","div","ref","classNames","role","aria-label","img","Badge","ImageBaseBadge","Overlay","ImageBaseOverlay"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/ImageBase/ImageBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HasRef, HasRootRef } from '../../types';\nimport { ImageBaseBadge, type ImageBaseBadgeProps } from './ImageBaseBadge/ImageBaseBadge';\nimport { ImageBaseOverlay, type ImageBaseOverlayProps } from './ImageBaseOverlay/ImageBaseOverlay';\nimport { ImageBaseContext } from './context';\nimport type { ImageBaseContextProps, ImageBaseExpectedIconProps, ImageBaseSize } from './types';\nimport { validateFallbackIcon, validateSize } from './validators';\nimport styles from './ImageBase.module.css';\n\nexport type {\n  ImageBaseSize,\n  ImageBaseExpectedIconProps,\n  ImageBaseBadgeProps,\n  ImageBaseOverlayProps,\n  ImageBaseContextProps,\n};\n\nexport {\n  getBadgeIconSizeByImageBaseSize,\n  getFallbackIconSizeByImageBaseSize,\n  getOverlayIconSizeByImageBaseSize,\n} from './helpers';\n\nexport { ImageBaseContext };\n\nexport interface ImageBaseProps\n  extends React.ImgHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLImageElement> {\n  /**\n   * Задаёт размер картинки.\n   *\n   * Используйте размеры заданные дизайн-системой `16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 72 | 80 | 88 | 96`.\n   *\n   * > ⚠️ Использование кастомного размера – это пограничный кейс.\n   */\n  size?: ImageBaseSize | number;\n  /**\n   * Включает или отключает обводку.\n   */\n  withBorder?: boolean;\n  /**\n   * Фолбек на случай, если картинка не прогрузилась.\n   *\n   * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getFallbackIconSizeByImageBaseSize()`.\n   *\n   * > Предпочтительней использовать иконки из `@vkontakte/icons`.\n   *\n   * > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n   * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n   * > использовали иконку.\n   *\n   * > ⚠️ Может перекрывать `children`.\n   */\n  fallbackIcon?: React.ReactElement<ImageBaseExpectedIconProps>;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ImageBase\n */\nexport const ImageBase = ({\n  alt,\n  crossOrigin,\n  decoding,\n  loading,\n  referrerPolicy,\n  sizes,\n  src,\n  srcSet,\n  useMap,\n  getRef,\n  size = 24,\n  width,\n  height,\n  style,\n  className,\n  getRootRef,\n  withBorder = true,\n  'fallbackIcon': fallbackIconProp,\n  children,\n  'aria-label': ariaLabel,\n  onClick,\n  onLoad,\n  onError,\n  ...restProps\n}: ImageBaseProps) => {\n  const [loaded, setLoaded] = React.useState(false);\n  const [failed, setFailed] = React.useState(false);\n\n  const hasSrc = src || srcSet;\n  const needShowFallbackIcon = (failed || !hasSrc) && React.isValidElement(fallbackIconProp);\n\n  const fallbackIcon = needShowFallbackIcon ? fallbackIconProp : null;\n\n  if (process.env.NODE_ENV === 'development') {\n    validateSize(size);\n    if (fallbackIcon) {\n      validateFallbackIcon(size, { name: 'fallbackIcon', value: fallbackIcon });\n    }\n  }\n\n  const handleImageLoad = (event: React.SyntheticEvent<HTMLImageElement>) => {\n    setLoaded(true);\n    setFailed(false);\n    onLoad?.(event);\n  };\n\n  const handleImageError = (event: React.SyntheticEvent<HTMLImageElement>) => {\n    setLoaded(false);\n    setFailed(true);\n    onError?.(event);\n  };\n\n  const sizeClassName = (() => {\n    switch (size) {\n      case 28:\n        return styles['ImageBase--size-28'];\n      case 32:\n        return styles['ImageBase--size-32'];\n      case 40:\n        return styles['ImageBase--size-40'];\n      case 48:\n        return styles['ImageBase--size-48'];\n      case 72:\n        return styles['ImageBase--size-72'];\n    }\n\n    return null;\n  })();\n\n  return (\n    <ImageBaseContext.Provider value={{ size }}>\n      <div\n        {...restProps}\n        ref={getRootRef}\n        style={{ ...style, width: size, height: size }}\n        className={classNames(\n          className,\n          styles['ImageBase'],\n          sizeClassName,\n          loaded && styles['ImageBase--loaded'],\n        )}\n        role={hasSrc ? 'img' : 'presentation'}\n        aria-label={ariaLabel}\n        onClick={onClick}\n      >\n        {hasSrc && (\n          <img\n            ref={getRef}\n            alt={alt}\n            className={styles['ImageBase__img']}\n            crossOrigin={crossOrigin}\n            decoding={decoding}\n            loading={loading}\n            referrerPolicy={referrerPolicy}\n            sizes={sizes}\n            src={src}\n            srcSet={srcSet}\n            useMap={useMap}\n            width={width}\n            height={height}\n            onLoad={handleImageLoad}\n            onError={handleImageError}\n          />\n        )}\n        {fallbackIcon && (\n          <div className={classNames(styles['ImageBase__fallback'])}>{fallbackIcon}</div>\n        )}\n        {children}\n        {withBorder && <div aria-hidden className={styles['ImageBase__border']} />}\n      </div>\n    </ImageBaseContext.Provider>\n  );\n};\n\nImageBase.Badge = ImageBaseBadge;\n\nImageBase.Overlay = ImageBaseOverlay;\n"],"names":["getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","ImageBaseContext","ImageBase","alt","crossOrigin","decoding","loading","referrerPolicy","sizes","src","srcSet","useMap","getRef","size","width","height","style","className","getRootRef","withBorder","fallbackIconProp","children","ariaLabel","onClick","onLoad","onError","restProps","React","useState","loaded","setLoaded","failed","setFailed","hasSrc","needShowFallbackIcon","isValidElement","fallbackIcon","process","env","NODE_ENV","validateSize","validateFallbackIcon","name","value","handleImageLoad","event","handleImageError","sizeClassName","Provider","div","ref","classNames","role","aria-label","img","aria-hidden","Badge","ImageBaseBadge","Overlay","ImageBaseOverlay"],"mappings":"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"}

package/dist/cjs/components/InfoRow/InfoRow.js

@@ -16,6 +16,7 @@ var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
 var _headline = require("../Typography/Headline/Headline");
 var _subhead = require("../Typography/Subhead/Subhead");
+var _visuallyHidden = require("../VisuallyHidden/VisuallyHidden");
 var InfoRow = function(_param) /*#__PURE__*/ {
     var header = _param.header, children = _param.children, className = _param.className, restProps = _objectWithoutProperties(_param, [
         "header",
@@ -27,9 +28,9 @@ var InfoRow = function(_param) /*#__PURE__*/ {
         className: (0, _vkjs.classNames)("vkuiInfoRow", className),
         weight: "3"
     }), (0, _vkjs.hasReactNode)(header) && /*#__PURE__*/ _react.createElement(_subhead.Subhead, {
-        Component: "span",
+        Component: "strong",
         className: "vkuiInfoRow__header"
-    }, header), children);
+    }, header, /*#__PURE__*/ _react.createElement(_visuallyHidden.VisuallyHidden, null, "\xa0")), children);
 };
 
 //# sourceMappingURL=InfoRow.js.map

package/dist/cjs/components/InfoRow/InfoRow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/InfoRow/InfoRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './InfoRow.module.css';\n\nexport interface InfoRowProps extends React.HTMLAttributes<HTMLDivElement> {\n  header: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/InfoRow\n */\nexport const InfoRow = ({ header, children, className, ...restProps }: InfoRowProps) => (\n  <Headline\n    {...restProps}\n    Component=\"span\"\n    className={classNames(styles['InfoRow'], className)}\n    weight=\"3\"\n  >\n    {hasReactNode(header) && (\n      <Subhead Component=\"span\" className={styles['InfoRow__header']}>\n        {header}\n      </Subhead>\n    )}\n    {children}\n  </Headline>\n);\n"],"names":["InfoRow","header","children","className","restProps","Headline","Component","classNames","weight","hasReactNode","Subhead"],"mappings":";;;;+BAaaA;;;eAAAA;;;;;;;2DAbU;oBACkB;wBAChB;uBACD;AAUjB,IAAMA,UAAU,+BACrB;QADwBC,gBAAAA,QAAQC,kBAAAA,UAAUC,mBAAAA,WAAcC;QAAhCH;QAAQC;QAAUC;;WAC1C,qBAACE,kBAAQ,uCACHD;QACJE,WAAU;QACVH,WAAWI,IAAAA,gBAAU,iBAAoBJ;QACzCK,QAAO;QAENC,IAAAA,kBAAY,EAACR,yBACZ,qBAACS,gBAAO;QAACJ,WAAU;QAAOH,SAAS;OAChCF,SAGJC;AACO"}
+{"version":3,"sources":["../../../../src/components/InfoRow/InfoRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './InfoRow.module.css';\n\nexport interface InfoRowProps extends React.HTMLAttributes<HTMLDivElement> {\n  header: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/InfoRow\n */\nexport const InfoRow = ({ header, children, className, ...restProps }: InfoRowProps) => (\n  <Headline\n    {...restProps}\n    Component=\"span\"\n    className={classNames(styles['InfoRow'], className)}\n    weight=\"3\"\n  >\n    {hasReactNode(header) && (\n      <Subhead Component=\"strong\" className={styles['InfoRow__header']}>\n        {header}\n        <VisuallyHidden>&nbsp;</VisuallyHidden>\n      </Subhead>\n    )}\n    {children}\n  </Headline>\n);\n"],"names":["InfoRow","header","children","className","restProps","Headline","Component","classNames","weight","hasReactNode","Subhead","VisuallyHidden"],"mappings":";;;;+BAcaA;;;eAAAA;;;;;;;2DAdU;oBACkB;wBAChB;uBACD;8BACO;AAUxB,IAAMA,UAAU,+BACrB;QADwBC,gBAAAA,QAAQC,kBAAAA,UAAUC,mBAAAA,WAAcC;QAAhCH;QAAQC;QAAUC;;WAC1C,qBAACE,kBAAQ,uCACHD;QACJE,WAAU;QACVH,WAAWI,IAAAA,gBAAU,iBAAoBJ;QACzCK,QAAO;QAENC,IAAAA,kBAAY,EAACR,yBACZ,qBAACS,gBAAO;QAACJ,WAAU;QAASH,SAAS;OAClCF,sBACD,qBAACU,8BAAc,QAAC,UAGnBT;AACO"}

package/dist/cjs/components/ModalPage/ModalPage.js

@@ -56,8 +56,13 @@ var ModalPage = function(_param) {
     var platform = (0, _usePlatform.usePlatform)();
     var orientation = (0, _useOrientationChange.useOrientationChange)();
     var _useAdaptivityWithJSMediaQueries1 = (0, _useAdaptivityWithJSMediaQueries.useAdaptivityWithJSMediaQueries)(), sizeX = _useAdaptivityWithJSMediaQueries1.sizeX, isDesktop = _useAdaptivityWithJSMediaQueries1.isDesktop;
-    _react.useEffect(updateModalHeight, [
+    _react.useEffect(function() {
+        if (dynamicContentHeight) {
+            updateModalHeight();
+        }
+    }, [
         children,
+        dynamicContentHeight,
         orientation,
         updateModalHeight
     ]);

package/dist/cjs/components/ModalPage/ModalPage.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ModalPage/ModalPage.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useId } from '../../hooks/useId';\nimport { useOrientationChange } from '../../hooks/useOrientationChange';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { getNavId, NavIdProps } from '../../lib/getNavId';\nimport { Platform } from '../../lib/platform';\nimport { multiRef } from '../../lib/utils';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';\nimport { ModalRootContext, useModalRegistry } from '../ModalRoot/ModalRootContext';\nimport { ModalType } from '../ModalRoot/types';\nimport { ModalPageContext } from './ModalPageContext';\nimport styles from './ModalPage.module.css';\n\nconst sizeClassName = {\n  s: styles['ModalPage--size-s'],\n  m: styles['ModalPage--size-m'],\n  l: styles['ModalPage--size-l'],\n};\n\nexport interface ModalPageProps extends React.HTMLAttributes<HTMLDivElement>, NavIdProps {\n  /**\n   * Шапка модальной страницы, `<ModalPageHeader />`\n   */\n  header?: React.ReactNode;\n  /**\n   * Задаёт контенту максимальную ширину для десктопной версии.\n   */\n  size?: 's' | 'm' | 'l' | number;\n  /**\n   * Будет вызвано при начале открытия модалки.\n   */\n  onOpen?: VoidFunction;\n  /**\n   * Будет вызвано при окончательном открытии модалки.\n   */\n  onOpened?: VoidFunction;\n  /**\n   * Будет вызвано при начале закрытия модалки.\n   */\n  onClose?: VoidFunction;\n  /**\n   * Будет вызвано при окончательном закрытии модалки.\n   */\n  onClosed?: VoidFunction;\n  /**\n   * Процент, на который изначально будет открыта модальная страница. При `settlingHeight={100}` модальная страница раскрывается на всю высоту.\n   */\n  settlingHeight?: number;\n  /**\n   * Если высота контента в модальной странице может поменяться, нужно установить это свойство\n   */\n  dynamicContentHeight?: boolean;\n  getModalContentRef?: React.Ref<HTMLDivElement>;\n  /**\n   * Скрывает кнопку закрытия (актуально для iOS, т.к. можно отрисовать кнопку закрытия внутри модалки)\n   */\n  hideCloseButton?: boolean;\n}\n\nconst warn = warnOnce('ModalPage');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalPage\n */\nexport const ModalPage = ({\n  children,\n  header,\n  size: sizeProp = 's',\n  onOpen,\n  onOpened,\n  onClose,\n  onClosed,\n  settlingHeight, // 75\n  dynamicContentHeight,\n  getModalContentRef,\n  nav,\n  id: idProp,\n  hideCloseButton = false,\n  className,\n  ...restProps\n}: ModalPageProps) => {\n  const generatingId = useId();\n  const id = idProp || generatingId;\n\n  const { updateModalHeight } = React.useContext(ModalRootContext);\n\n  const platform = usePlatform();\n  const orientation = useOrientationChange();\n  const { sizeX, isDesktop } = useAdaptivityWithJSMediaQueries();\n\n  React.useEffect(updateModalHeight, [children, orientation, updateModalHeight]);\n\n  const isCloseButtonShown = !hideCloseButton && isDesktop;\n  const size = isDesktop ? sizeProp : 's';\n\n  const modalContext = React.useContext(ModalRootContext);\n  const { refs } = useModalRegistry(getNavId({ nav, id }, warn), ModalType.PAGE);\n\n  const contextValue = React.useMemo(() => ({ labelId: `${id}-label` }), [id]);\n\n  return (\n    <ModalPageContext.Provider value={contextValue}>\n      <div\n        {...restProps}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={contextValue.labelId}\n        id={id}\n        className={classNames(\n          styles['ModalPage'],\n          platform === Platform.IOS && styles['ModalPage--ios'],\n          isDesktop && styles['ModalPage--desktop'],\n          sizeX === SizeType.REGULAR && 'vkuiInternalModalPage--sizeX-regular',\n          typeof size === 'string' && sizeClassName[size],\n          className,\n        )}\n      >\n        <div\n          className={styles['ModalPage__in-wrap']}\n          style={{\n            maxWidth: typeof size === 'number' ? size : undefined,\n          }}\n          ref={refs.innerElement}\n        >\n          <div className={styles['ModalPage__in']}>\n            <div className={styles['ModalPage__header']} ref={refs.headerElement}>\n              {header}\n            </div>\n\n            <div className={styles['ModalPage__content-wrap']}>\n              <div\n                className={styles['ModalPage__content']}\n                ref={multiRef<HTMLDivElement>(refs.contentElement, getModalContentRef)}\n              >\n                <div className={styles['ModalPage__content-in']}>{children}</div>\n              </div>\n            </div>\n            {isCloseButtonShown && <ModalDismissButton onClick={onClose || modalContext.onClose} />}\n          </div>\n        </div>\n      </div>\n    </ModalPageContext.Provider>\n  );\n};\n"],"names":["ModalPage","sizeClassName","s","m","l","warn","warnOnce","children","header","sizeProp","size","onOpen","onOpened","onClose","onClosed","settlingHeight","dynamicContentHeight","getModalContentRef","nav","id","idProp","hideCloseButton","className","restProps","generatingId","useId","updateModalHeight","React","useContext","ModalRootContext","platform","usePlatform","orientation","useOrientationChange","useAdaptivityWithJSMediaQueries","sizeX","isDesktop","useEffect","isCloseButtonShown","modalContext","refs","useModalRegistry","getNavId","ModalType","PAGE","contextValue","useMemo","labelId","ModalPageContext","Provider","value","div","role","aria-modal","aria-labelledby","classNames","Platform","IOS","SizeType","REGULAR","style","maxWidth","undefined","ref","innerElement","headerElement","multiRef","contentElement","ModalDismissButton","onClick"],"mappings":";;;;+BAoEaA;;;eAAAA;;;;;;;2DApEU;oBACI;+CACqB;qBAC1B;oCACe;2BACT;0BACH;wBACY;wBACZ;qBACA;wBACA;kCACU;gCACgB;qBACzB;gCACO;AAGjC,IAAMC,gBAAgB;IACpBC,CAAC;IACDC,CAAC;IACDC,CAAC;AACH;AA0CA,IAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAKf,IAAMN,YAAY,iBAgBH;QAfpBO,kBAAAA,UACAC,gBAAAA,QACMC,aAANC,MAAMD,WAAAA,iBAAW,MAAXA,KACNE,gBAAAA,QACAC,kBAAAA,UACAC,iBAAAA,SACAC,kBAAAA,UACAC,wBAAAA,gBACAC,8BAAAA,sBACAC,4BAAAA,oBACAC,aAAAA,KACAC,AAAIC,gBAAJD,oCACAE,iBAAAA,sDAAkB,KAAK,2BACvBC,mBAAAA,WACGC;QAdHhB;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;;IAGA,IAAME,eAAeC,IAAAA,YAAK;IAC1B,IAAMN,KAAKC,UAAUI;IAErB,IAAM,AAAEE,oBAAsBC,OAAMC,UAAU,CAACC,kCAAgB,EAAvDH;IAER,IAAMI,WAAWC,IAAAA,wBAAW;IAC5B,IAAMC,cAAcC,IAAAA,0CAAoB;IACxC,IAA6BC,oCAAAA,IAAAA,gEAA+B,KAApDC,QAAqBD,kCAArBC,OAAOC,YAAcF,kCAAdE;IAEfT,OAAMU,SAAS,CAACX,mBAAmB;QAACnB;QAAUyB;QAAaN;KAAkB;IAE7E,IAAMY,qBAAqB,CAACjB,mBAAmBe;IAC/C,IAAM1B,OAAO0B,YAAY3B,WAAW,GAAG;IAEvC,IAAM8B,eAAeZ,OAAMC,UAAU,CAACC,kCAAgB;IACtD,IAAM,AAAEW,OAASC,IAAAA,kCAAgB,EAACC,IAAAA,kBAAQ,EAAC;QAAExB,KAAAA;QAAKC,IAAAA;IAAG,GAAGd,OAAOsC,gBAAS,CAACC,IAAI,EAArEJ;IAER,IAAMK,eAAelB,OAAMmB,OAAO,CAAC;eAAO;YAAEC,SAAS,AAAC,GAAK,OAAH5B,IAAG;QAAQ;OAAI;QAACA;KAAG;IAE3E,qBACE,qBAAC6B,kCAAgB,CAACC,QAAQ;QAACC,OAAOL;qBAChC,qBAACM,4CACK5B;QACJ6B,MAAK;QACLC,cAAW;QACXC,mBAAiBT,aAAaE,OAAO;QACrC5B,IAAIA;QACJG,WAAWiC,IAAAA,gBAAU,mBAEnBzB,aAAa0B,kBAAQ,CAACC,GAAG,0BACzBrB,uCACAD,UAAUuB,oBAAQ,CAACC,OAAO,IAAI,wCAC9B,OAAOjD,SAAS,YAAYT,aAAa,CAACS,KAAK,EAC/CY;sBAGF,qBAAC6B;QACC7B,SAAS;QACTsC,OAAO;YACLC,UAAU,OAAOnD,SAAS,WAAWA,OAAOoD,SAAS;QACvD;QACAC,KAAKvB,KAAKwB,YAAY;qBAEtB,qBAACb;QAAI7B,SAAS;qBACZ,qBAAC6B;QAAI7B,SAAS;QAA+ByC,KAAKvB,KAAKyB,aAAa;OACjEzD,uBAGH,qBAAC2C;QAAI7B,SAAS;qBACZ,qBAAC6B;QACC7B,SAAS;QACTyC,KAAKG,IAAAA,eAAQ,EAAiB1B,KAAK2B,cAAc,EAAElD;qBAEnD,qBAACkC;QAAI7B,SAAS;OAAoCf,aAGrD+B,oCAAsB,qBAAC8B,sCAAkB;QAACC,SAASxD,WAAW0B,aAAa1B,OAAO;;AAM/F"}
+{"version":3,"sources":["../../../../src/components/ModalPage/ModalPage.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useId } from '../../hooks/useId';\nimport { useOrientationChange } from '../../hooks/useOrientationChange';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { getNavId, NavIdProps } from '../../lib/getNavId';\nimport { Platform } from '../../lib/platform';\nimport { multiRef } from '../../lib/utils';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';\nimport { ModalRootContext, useModalRegistry } from '../ModalRoot/ModalRootContext';\nimport { ModalType } from '../ModalRoot/types';\nimport { ModalPageContext } from './ModalPageContext';\nimport styles from './ModalPage.module.css';\n\nconst sizeClassName = {\n  s: styles['ModalPage--size-s'],\n  m: styles['ModalPage--size-m'],\n  l: styles['ModalPage--size-l'],\n};\n\nexport interface ModalPageProps extends React.HTMLAttributes<HTMLDivElement>, NavIdProps {\n  /**\n   * Шапка модальной страницы, `<ModalPageHeader />`\n   */\n  header?: React.ReactNode;\n  /**\n   * Задаёт контенту максимальную ширину для десктопной версии.\n   */\n  size?: 's' | 'm' | 'l' | number;\n  /**\n   * Будет вызвано при начале открытия модалки.\n   */\n  onOpen?: VoidFunction;\n  /**\n   * Будет вызвано при окончательном открытии модалки.\n   */\n  onOpened?: VoidFunction;\n  /**\n   * Будет вызвано при начале закрытия модалки.\n   */\n  onClose?: VoidFunction;\n  /**\n   * Будет вызвано при окончательном закрытии модалки.\n   */\n  onClosed?: VoidFunction;\n  /**\n   * Процент, на который изначально будет открыта модальная страница. При `settlingHeight={100}` модальная страница раскрывается на всю высоту.\n   */\n  settlingHeight?: number;\n  /**\n   * Если высота контента в модальной странице может поменяться, нужно установить это свойство\n   */\n  dynamicContentHeight?: boolean;\n  getModalContentRef?: React.Ref<HTMLDivElement>;\n  /**\n   * Скрывает кнопку закрытия (актуально для iOS, т.к. можно отрисовать кнопку закрытия внутри модалки)\n   */\n  hideCloseButton?: boolean;\n}\n\nconst warn = warnOnce('ModalPage');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalPage\n */\nexport const ModalPage = ({\n  children,\n  header,\n  size: sizeProp = 's',\n  onOpen,\n  onOpened,\n  onClose,\n  onClosed,\n  settlingHeight, // 75\n  dynamicContentHeight,\n  getModalContentRef,\n  nav,\n  id: idProp,\n  hideCloseButton = false,\n  className,\n  ...restProps\n}: ModalPageProps) => {\n  const generatingId = useId();\n  const id = idProp || generatingId;\n\n  const { updateModalHeight } = React.useContext(ModalRootContext);\n\n  const platform = usePlatform();\n  const orientation = useOrientationChange();\n  const { sizeX, isDesktop } = useAdaptivityWithJSMediaQueries();\n\n  React.useEffect(() => {\n    if (dynamicContentHeight) {\n      updateModalHeight();\n    }\n  }, [children, dynamicContentHeight, orientation, updateModalHeight]);\n\n  const isCloseButtonShown = !hideCloseButton && isDesktop;\n  const size = isDesktop ? sizeProp : 's';\n\n  const modalContext = React.useContext(ModalRootContext);\n  const { refs } = useModalRegistry(getNavId({ nav, id }, warn), ModalType.PAGE);\n\n  const contextValue = React.useMemo(() => ({ labelId: `${id}-label` }), [id]);\n\n  return (\n    <ModalPageContext.Provider value={contextValue}>\n      <div\n        {...restProps}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={contextValue.labelId}\n        id={id}\n        className={classNames(\n          styles['ModalPage'],\n          platform === Platform.IOS && styles['ModalPage--ios'],\n          isDesktop && styles['ModalPage--desktop'],\n          sizeX === SizeType.REGULAR && 'vkuiInternalModalPage--sizeX-regular',\n          typeof size === 'string' && sizeClassName[size],\n          className,\n        )}\n      >\n        <div\n          className={styles['ModalPage__in-wrap']}\n          style={{\n            maxWidth: typeof size === 'number' ? size : undefined,\n          }}\n          ref={refs.innerElement}\n        >\n          <div className={styles['ModalPage__in']}>\n            <div className={styles['ModalPage__header']} ref={refs.headerElement}>\n              {header}\n            </div>\n\n            <div className={styles['ModalPage__content-wrap']}>\n              <div\n                className={styles['ModalPage__content']}\n                ref={multiRef<HTMLDivElement>(refs.contentElement, getModalContentRef)}\n              >\n                <div className={styles['ModalPage__content-in']}>{children}</div>\n              </div>\n            </div>\n            {isCloseButtonShown && <ModalDismissButton onClick={onClose || modalContext.onClose} />}\n          </div>\n        </div>\n      </div>\n    </ModalPageContext.Provider>\n  );\n};\n"],"names":["ModalPage","sizeClassName","s","m","l","warn","warnOnce","children","header","sizeProp","size","onOpen","onOpened","onClose","onClosed","settlingHeight","dynamicContentHeight","getModalContentRef","nav","id","idProp","hideCloseButton","className","restProps","generatingId","useId","updateModalHeight","React","useContext","ModalRootContext","platform","usePlatform","orientation","useOrientationChange","useAdaptivityWithJSMediaQueries","sizeX","isDesktop","useEffect","isCloseButtonShown","modalContext","refs","useModalRegistry","getNavId","ModalType","PAGE","contextValue","useMemo","labelId","ModalPageContext","Provider","value","div","role","aria-modal","aria-labelledby","classNames","Platform","IOS","SizeType","REGULAR","style","maxWidth","undefined","ref","innerElement","headerElement","multiRef","contentElement","ModalDismissButton","onClick"],"mappings":";;;;+BAoEaA;;;eAAAA;;;;;;;2DApEU;oBACI;+CACqB;qBAC1B;oCACe;2BACT;0BACH;wBACY;wBACZ;qBACA;wBACA;kCACU;gCACgB;qBACzB;gCACO;AAGjC,IAAMC,gBAAgB;IACpBC,CAAC;IACDC,CAAC;IACDC,CAAC;AACH;AA0CA,IAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAKf,IAAMN,YAAY,iBAgBH;QAfpBO,kBAAAA,UACAC,gBAAAA,QACMC,aAANC,MAAMD,WAAAA,iBAAW,MAAXA,KACNE,gBAAAA,QACAC,kBAAAA,UACAC,iBAAAA,SACAC,kBAAAA,UACAC,wBAAAA,gBACAC,8BAAAA,sBACAC,4BAAAA,oBACAC,aAAAA,KACAC,AAAIC,gBAAJD,oCACAE,iBAAAA,sDAAkB,KAAK,2BACvBC,mBAAAA,WACGC;QAdHhB;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;;IAGA,IAAME,eAAeC,IAAAA,YAAK;IAC1B,IAAMN,KAAKC,UAAUI;IAErB,IAAM,AAAEE,oBAAsBC,OAAMC,UAAU,CAACC,kCAAgB,EAAvDH;IAER,IAAMI,WAAWC,IAAAA,wBAAW;IAC5B,IAAMC,cAAcC,IAAAA,0CAAoB;IACxC,IAA6BC,oCAAAA,IAAAA,gEAA+B,KAApDC,QAAqBD,kCAArBC,OAAOC,YAAcF,kCAAdE;IAEfT,OAAMU,SAAS,CAAC,WAAM;QACpB,IAAIrB,sBAAsB;YACxBU;QACF,CAAC;IACH,GAAG;QAACnB;QAAUS;QAAsBgB;QAAaN;KAAkB;IAEnE,IAAMY,qBAAqB,CAACjB,mBAAmBe;IAC/C,IAAM1B,OAAO0B,YAAY3B,WAAW,GAAG;IAEvC,IAAM8B,eAAeZ,OAAMC,UAAU,CAACC,kCAAgB;IACtD,IAAM,AAAEW,OAASC,IAAAA,kCAAgB,EAACC,IAAAA,kBAAQ,EAAC;QAAExB,KAAAA;QAAKC,IAAAA;IAAG,GAAGd,OAAOsC,gBAAS,CAACC,IAAI,EAArEJ;IAER,IAAMK,eAAelB,OAAMmB,OAAO,CAAC;eAAO;YAAEC,SAAS,AAAC,GAAK,OAAH5B,IAAG;QAAQ;OAAI;QAACA;KAAG;IAE3E,qBACE,qBAAC6B,kCAAgB,CAACC,QAAQ;QAACC,OAAOL;qBAChC,qBAACM,4CACK5B;QACJ6B,MAAK;QACLC,cAAW;QACXC,mBAAiBT,aAAaE,OAAO;QACrC5B,IAAIA;QACJG,WAAWiC,IAAAA,gBAAU,mBAEnBzB,aAAa0B,kBAAQ,CAACC,GAAG,0BACzBrB,uCACAD,UAAUuB,oBAAQ,CAACC,OAAO,IAAI,wCAC9B,OAAOjD,SAAS,YAAYT,aAAa,CAACS,KAAK,EAC/CY;sBAGF,qBAAC6B;QACC7B,SAAS;QACTsC,OAAO;YACLC,UAAU,OAAOnD,SAAS,WAAWA,OAAOoD,SAAS;QACvD;QACAC,KAAKvB,KAAKwB,YAAY;qBAEtB,qBAACb;QAAI7B,SAAS;qBACZ,qBAAC6B;QAAI7B,SAAS;QAA+ByC,KAAKvB,KAAKyB,aAAa;OACjEzD,uBAGH,qBAAC2C;QAAI7B,SAAS;qBACZ,qBAAC6B;QACC7B,SAAS;QACTyC,KAAKG,IAAAA,eAAQ,EAAiB1B,KAAK2B,cAAc,EAAElD;qBAEnD,qBAACkC;QAAI7B,SAAS;OAAoCf,aAGrD+B,oCAAsB,qBAAC8B,sCAAkB;QAACC,SAASxD,WAAW0B,aAAa1B,OAAO;;AAM/F"}