@vkontakte/vkui 5.2.1 → 5.2.2

package/dist/cssm/components/ActionSheetItem/ActionSheetItem.js

@@ -53,11 +53,12 @@ var ActionSheetItem = function ActionSheetItem(_ref) {
   }
   var isRich = subtitle || meta || selectable;
   var isCentered = !isRich && !before && platform === Platform.IOS;
-  return /*#__PURE__*/React.createElement(Tappable, _extends({}, restProps, {
+  return /*#__PURE__*/React.createElement(Tappable, _extends({
+    Component: Component
+  }, restProps, {
     onClick: selectable ? onClick : onItemClick(onClick, onImmediateClick, Boolean(autoClose)),
     activeMode: platform === Platform.IOS ? "vkuiActionSheetItem--active" : undefined,
-    className: classNames("vkuiActionSheetItem", platform === Platform.IOS && "vkuiActionSheetItem--ios", styles["ActionSheetItem--mode-".concat(mode)], sizeY === SizeType.COMPACT && "vkuiActionSheetItem--sizeY-compact", isRich && "vkuiActionSheetItem--rich", isDesktop && "vkuiActionSheetItem--desktop", className),
-    Component: Component
+    className: classNames("vkuiActionSheetItem", platform === Platform.IOS && "vkuiActionSheetItem--ios", styles["ActionSheetItem--mode-".concat(mode)], sizeY === SizeType.COMPACT && "vkuiActionSheetItem--sizeY-compact", isRich && "vkuiActionSheetItem--rich", isDesktop && "vkuiActionSheetItem--desktop", className)
   }), before && /*#__PURE__*/React.createElement("div", {
     className: "vkuiActionSheetItem__before"
   }, before), /*#__PURE__*/React.createElement("div", {

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

@@ -1 +1 @@
-{"version":3,"file":"ActionSheetItem.js","names":["React","Icon20CheckCircleOn","Icon24CheckCircleOn","classNames","noop","useAdaptivityWithJSMediaQueries","usePlatform","SizeType","Platform","ActionSheetContext","Tappable","Subhead","Text","ActionSheetItem","children","autoClose","mode","meta","subtitle","before","selectable","value","name","checked","defaultChecked","onChange","onClick","onImmediateClick","multiline","iconCheckedProp","iconChecked","className","restProps","platform","useContext","onItemClick","isDesktop","sizeY","COMPACT","Component","href","isRich","isCentered","IOS","Boolean","undefined","styles","disabled"],"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      {...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        styles[`ActionSheetItem--mode-${mode}`],\n        sizeY === SizeType.COMPACT && styles['ActionSheetItem--sizeY-compact'],\n        isRich && styles['ActionSheetItem--rich'],\n        isDesktop && styles['ActionSheetItem--desktop'],\n        className,\n      )}\n      Component={Component}\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"],"mappings":"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"}
+{"version":3,"file":"ActionSheetItem.js","names":["React","Icon20CheckCircleOn","Icon24CheckCircleOn","classNames","noop","useAdaptivityWithJSMediaQueries","usePlatform","SizeType","Platform","ActionSheetContext","Tappable","Subhead","Text","ActionSheetItem","children","autoClose","mode","meta","subtitle","before","selectable","value","name","checked","defaultChecked","onChange","onClick","onImmediateClick","multiline","iconCheckedProp","iconChecked","className","restProps","platform","useContext","onItemClick","isDesktop","sizeY","COMPACT","Component","href","isRich","isCentered","IOS","Boolean","undefined","styles","disabled"],"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        styles[`ActionSheetItem--mode-${mode}`],\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"],"mappings":"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"}

package/dist/cssm/components/Alert/Alert.js

@@ -2,7 +2,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/extends";
 var _excluded = ["action", "onItemClick"],
-  _excluded2 = ["Component", "title", "action", "autoClose", "mode"],
+  _excluded2 = ["title", "action", "autoClose", "mode"],
   _excluded3 = ["actions", "actionsLayout", "children", "className", "style", "text", "header", "onClose", "dismissLabel"];
 import * as React from 'react';
 import { classNames, hasReactNode } from '@vkontakte/vkjs';
@@ -67,15 +67,13 @@ var AlertAction = function AlertAction(_ref) {
     return onItemClick(action);
   }, [onItemClick, action]);
   if (platform === Platform.IOS) {
-    var _action$Component = action.Component,
-      Component = _action$Component === void 0 ? 'button' : _action$Component,
-      title = action.title,
+    var title = action.title,
       actionProp = action.action,
       autoClose = action.autoClose,
       _mode = action.mode,
       restActionProps = _objectWithoutProperties(action, _excluded2);
     return /*#__PURE__*/React.createElement(Tappable, _extends({
-      Component: restActionProps.href ? 'a' : Component,
+      Component: restActionProps.href ? 'a' : 'button',
       className: classNames("vkuiAlert__action", styles["Alert__action--mode-".concat(_mode)]),
       onClick: handleItemClick
     }, restActionProps, restProps), title);

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

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","names":["React","classNames","hasReactNode","useAdaptivityWithJSMediaQueries","usePlatform","useWaitTransitionFinish","Platform","stopPropagation","useScrollLock","Button","FocusTrap","ModalDismissButton","PopoutWrapper","Tappable","Caption","Footnote","Text","Title","AlertHeader","props","platform","IOS","AlertText","VKCOM","AlertAction","action","onItemClick","restProps","handleItemClick","useCallback","Component","title","actionProp","autoClose","mode","restActionProps","href","styles","target","Alert","actions","actionsLayout","children","className","style","text","header","onClose","dismissLabel","isDesktop","waitTransitionFinish","useState","closing","setClosing","elementRef","useRef","resolvedActionsLayout","timeout","close","current","e","propertyName","item","map","i"],"sources":["../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';\nimport { Platform } from '../../lib/platform';\nimport { stopPropagation } from '../../lib/utils';\nimport { AnchorHTMLAttributesOnly } from '../../types';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { Button, ButtonProps } from '../Button/Button';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Alert.module.css';\n\nexport interface AlertActionInterface\n  extends Pick<ButtonProps, 'Component'>,\n    AnchorHTMLAttributesOnly {\n  title: string;\n  action?: VoidFunction;\n  autoClose?: boolean;\n  mode: 'cancel' | 'destructive' | 'default';\n}\n\nexport interface AlertProps extends React.HTMLAttributes<HTMLElement> {\n  actionsLayout?: 'vertical' | 'horizontal';\n  actions?: AlertActionInterface[];\n  header?: React.ReactNode;\n  text?: React.ReactNode;\n  onClose: VoidFunction;\n\n  /**\n   * `aria-label` для кнопки закрытия. Необходим, чтобы кнопка была доступной.\n   */\n  dismissLabel?: string;\n}\n\ntype ItemClickHandler = (item: AlertActionInterface) => void;\n\ninterface AlertTypography {\n  id: string;\n  children?: React.ReactNode;\n}\n\nconst AlertHeader = (props: AlertTypography) => {\n  const platform = usePlatform();\n\n  switch (platform) {\n    case Platform.IOS:\n      return <Title className={styles['Alert__header']} weight=\"1\" level=\"3\" {...props} />;\n    default:\n      return <Title className={styles['Alert__header']} weight=\"2\" level=\"2\" {...props} />;\n  }\n};\n\nconst AlertText = (props: AlertTypography) => {\n  const platform = usePlatform();\n\n  switch (platform) {\n    case Platform.VKCOM:\n      return <Footnote className={styles['Alert__text']} {...props} />;\n    case Platform.IOS:\n      return <Caption className={styles['Alert__text']} {...props} />;\n    default:\n      return <Text Component=\"span\" className={styles['Alert__text']} weight=\"3\" {...props} />;\n  }\n};\n\ninterface AlertActionProps {\n  action: AlertActionInterface;\n  onItemClick: ItemClickHandler;\n}\n\nconst AlertAction = ({ action, onItemClick, ...restProps }: AlertActionProps) => {\n  const platform = usePlatform();\n  const handleItemClick = React.useCallback(() => onItemClick(action), [onItemClick, action]);\n\n  if (platform === Platform.IOS) {\n    const {\n      Component = 'button',\n      title,\n      action: actionProp,\n      autoClose,\n      mode,\n      ...restActionProps\n    } = action;\n\n    return (\n      <Tappable\n        Component={restActionProps.href ? 'a' : Component}\n        className={classNames(styles['Alert__action'], styles[`Alert__action--mode-${mode}`])}\n        onClick={handleItemClick}\n        {...restActionProps}\n        {...restProps}\n      >\n        {title}\n      </Tappable>\n    );\n  }\n\n  let mode: ButtonProps['mode'] = 'tertiary';\n\n  if (platform === Platform.VKCOM) {\n    mode = action.mode === 'cancel' ? 'secondary' : 'primary';\n  }\n\n  return (\n    <Button\n      className={classNames(styles['Alert__button'], styles[`Alert__button--mode-${action.mode}`])}\n      mode={mode}\n      size=\"m\"\n      onClick={handleItemClick}\n      Component={action.Component}\n      href={action.href}\n      target={action.target}\n    >\n      {action.title}\n    </Button>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Alert\n */\nexport const Alert = ({\n  actions = [],\n  actionsLayout = 'horizontal',\n  children,\n  className,\n  style,\n  text,\n  header,\n  onClose,\n  dismissLabel = 'Закрыть предупреждение',\n  ...restProps\n}: AlertProps) => {\n  const platform = usePlatform();\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n  const { waitTransitionFinish } = useWaitTransitionFinish();\n\n  const [closing, setClosing] = React.useState(false);\n\n  const elementRef = React.useRef<HTMLDivElement>(null);\n\n  const resolvedActionsLayout: AlertProps['actionsLayout'] =\n    platform === Platform.VKCOM ? 'horizontal' : actionsLayout;\n\n  const timeout = platform === Platform.IOS ? 300 : 200;\n\n  const close = React.useCallback(() => {\n    setClosing(true);\n    waitTransitionFinish(\n      elementRef.current,\n      (e?: TransitionEvent) => {\n        if (!e || e.propertyName === 'opacity') {\n          onClose();\n        }\n      },\n      timeout,\n    );\n  }, [elementRef, waitTransitionFinish, onClose, timeout]);\n\n  const onItemClick: ItemClickHandler = React.useCallback(\n    (item: AlertActionInterface) => {\n      const { action, autoClose } = item;\n\n      if (autoClose) {\n        setClosing(true);\n        waitTransitionFinish(\n          elementRef.current,\n          (e?: TransitionEvent) => {\n            if (!e || e.propertyName === 'opacity') {\n              onClose();\n              action && action();\n            }\n          },\n          timeout,\n        );\n      } else {\n        action && action();\n      }\n    },\n    [elementRef, waitTransitionFinish, onClose, timeout],\n  );\n\n  useScrollLock();\n\n  return (\n    <PopoutWrapper className={className} closing={closing} style={style} onClick={close}>\n      <FocusTrap\n        {...restProps}\n        getRootRef={elementRef}\n        onClick={stopPropagation}\n        onClose={close}\n        timeout={timeout}\n        className={classNames(\n          styles['Alert'],\n          platform === Platform.IOS && styles['Alert--ios'],\n          platform === Platform.VKCOM && styles['Alert--vkcom'],\n          resolvedActionsLayout === 'vertical' ? styles['Alert--v'] : styles['Alert--h'],\n          closing && styles['Alert--closing'],\n          isDesktop && styles['Alert--desktop'],\n        )}\n        role=\"alertdialog\"\n        aria-modal\n        aria-labelledby=\"vkui--alert--title\"\n        aria-describedby=\"vkui--alert--desc\"\n      >\n        <div className={styles['Alert__content']}>\n          {hasReactNode(header) && <AlertHeader id=\"vkui--alert--title\">{header}</AlertHeader>}\n          {hasReactNode(text) && <AlertText id=\"vkui--alert--desc\">{text}</AlertText>}\n          {children}\n        </div>\n        <div className={styles['Alert__actions']}>\n          {actions.map((action, i) => (\n            <AlertAction key={i} action={action} onItemClick={onItemClick} />\n          ))}\n        </div>\n        {isDesktop && <ModalDismissButton onClick={close} aria-label={dismissLabel} />}\n      </FocusTrap>\n    </PopoutWrapper>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Alert.js","names":["React","classNames","hasReactNode","useAdaptivityWithJSMediaQueries","usePlatform","useWaitTransitionFinish","Platform","stopPropagation","useScrollLock","Button","FocusTrap","ModalDismissButton","PopoutWrapper","Tappable","Caption","Footnote","Text","Title","AlertHeader","props","platform","IOS","AlertText","VKCOM","AlertAction","action","onItemClick","restProps","handleItemClick","useCallback","title","actionProp","autoClose","mode","restActionProps","href","styles","Component","target","Alert","actions","actionsLayout","children","className","style","text","header","onClose","dismissLabel","isDesktop","waitTransitionFinish","useState","closing","setClosing","elementRef","useRef","resolvedActionsLayout","timeout","close","current","e","propertyName","item","map","i"],"sources":["../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';\nimport { Platform } from '../../lib/platform';\nimport { stopPropagation } from '../../lib/utils';\nimport { AnchorHTMLAttributesOnly } from '../../types';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { Button, ButtonProps } from '../Button/Button';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Alert.module.css';\n\nexport interface AlertActionInterface\n  extends Pick<ButtonProps, 'Component'>,\n    AnchorHTMLAttributesOnly {\n  title: string;\n  action?: VoidFunction;\n  autoClose?: boolean;\n  mode: 'cancel' | 'destructive' | 'default';\n}\n\nexport interface AlertProps extends React.HTMLAttributes<HTMLElement> {\n  actionsLayout?: 'vertical' | 'horizontal';\n  actions?: AlertActionInterface[];\n  header?: React.ReactNode;\n  text?: React.ReactNode;\n  onClose: VoidFunction;\n\n  /**\n   * `aria-label` для кнопки закрытия. Необходим, чтобы кнопка была доступной.\n   */\n  dismissLabel?: string;\n}\n\ntype ItemClickHandler = (item: AlertActionInterface) => void;\n\ninterface AlertTypography {\n  id: string;\n  children?: React.ReactNode;\n}\n\nconst AlertHeader = (props: AlertTypography) => {\n  const platform = usePlatform();\n\n  switch (platform) {\n    case Platform.IOS:\n      return <Title className={styles['Alert__header']} weight=\"1\" level=\"3\" {...props} />;\n    default:\n      return <Title className={styles['Alert__header']} weight=\"2\" level=\"2\" {...props} />;\n  }\n};\n\nconst AlertText = (props: AlertTypography) => {\n  const platform = usePlatform();\n\n  switch (platform) {\n    case Platform.VKCOM:\n      return <Footnote className={styles['Alert__text']} {...props} />;\n    case Platform.IOS:\n      return <Caption className={styles['Alert__text']} {...props} />;\n    default:\n      return <Text Component=\"span\" className={styles['Alert__text']} weight=\"3\" {...props} />;\n  }\n};\n\ninterface AlertActionProps {\n  action: AlertActionInterface;\n  onItemClick: ItemClickHandler;\n}\n\nconst AlertAction = ({ action, onItemClick, ...restProps }: AlertActionProps) => {\n  const platform = usePlatform();\n  const handleItemClick = React.useCallback(() => onItemClick(action), [onItemClick, action]);\n\n  if (platform === Platform.IOS) {\n    const { title, action: actionProp, autoClose, mode, ...restActionProps } = action;\n\n    return (\n      <Tappable\n        Component={restActionProps.href ? 'a' : 'button'}\n        className={classNames(styles['Alert__action'], styles[`Alert__action--mode-${mode}`])}\n        onClick={handleItemClick}\n        {...restActionProps}\n        {...restProps}\n      >\n        {title}\n      </Tappable>\n    );\n  }\n\n  let mode: ButtonProps['mode'] = 'tertiary';\n\n  if (platform === Platform.VKCOM) {\n    mode = action.mode === 'cancel' ? 'secondary' : 'primary';\n  }\n\n  return (\n    <Button\n      className={classNames(styles['Alert__button'], styles[`Alert__button--mode-${action.mode}`])}\n      mode={mode}\n      size=\"m\"\n      onClick={handleItemClick}\n      Component={action.Component}\n      href={action.href}\n      target={action.target}\n    >\n      {action.title}\n    </Button>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Alert\n */\nexport const Alert = ({\n  actions = [],\n  actionsLayout = 'horizontal',\n  children,\n  className,\n  style,\n  text,\n  header,\n  onClose,\n  dismissLabel = 'Закрыть предупреждение',\n  ...restProps\n}: AlertProps) => {\n  const platform = usePlatform();\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n  const { waitTransitionFinish } = useWaitTransitionFinish();\n\n  const [closing, setClosing] = React.useState(false);\n\n  const elementRef = React.useRef<HTMLDivElement>(null);\n\n  const resolvedActionsLayout: AlertProps['actionsLayout'] =\n    platform === Platform.VKCOM ? 'horizontal' : actionsLayout;\n\n  const timeout = platform === Platform.IOS ? 300 : 200;\n\n  const close = React.useCallback(() => {\n    setClosing(true);\n    waitTransitionFinish(\n      elementRef.current,\n      (e?: TransitionEvent) => {\n        if (!e || e.propertyName === 'opacity') {\n          onClose();\n        }\n      },\n      timeout,\n    );\n  }, [elementRef, waitTransitionFinish, onClose, timeout]);\n\n  const onItemClick: ItemClickHandler = React.useCallback(\n    (item: AlertActionInterface) => {\n      const { action, autoClose } = item;\n\n      if (autoClose) {\n        setClosing(true);\n        waitTransitionFinish(\n          elementRef.current,\n          (e?: TransitionEvent) => {\n            if (!e || e.propertyName === 'opacity') {\n              onClose();\n              action && action();\n            }\n          },\n          timeout,\n        );\n      } else {\n        action && action();\n      }\n    },\n    [elementRef, waitTransitionFinish, onClose, timeout],\n  );\n\n  useScrollLock();\n\n  return (\n    <PopoutWrapper className={className} closing={closing} style={style} onClick={close}>\n      <FocusTrap\n        {...restProps}\n        getRootRef={elementRef}\n        onClick={stopPropagation}\n        onClose={close}\n        timeout={timeout}\n        className={classNames(\n          styles['Alert'],\n          platform === Platform.IOS && styles['Alert--ios'],\n          platform === Platform.VKCOM && styles['Alert--vkcom'],\n          resolvedActionsLayout === 'vertical' ? styles['Alert--v'] : styles['Alert--h'],\n          closing && styles['Alert--closing'],\n          isDesktop && styles['Alert--desktop'],\n        )}\n        role=\"alertdialog\"\n        aria-modal\n        aria-labelledby=\"vkui--alert--title\"\n        aria-describedby=\"vkui--alert--desc\"\n      >\n        <div className={styles['Alert__content']}>\n          {hasReactNode(header) && <AlertHeader id=\"vkui--alert--title\">{header}</AlertHeader>}\n          {hasReactNode(text) && <AlertText id=\"vkui--alert--desc\">{text}</AlertText>}\n          {children}\n        </div>\n        <div className={styles['Alert__actions']}>\n          {actions.map((action, i) => (\n            <AlertAction key={i} action={action} onItemClick={onItemClick} />\n          ))}\n        </div>\n        {isDesktop && <ModalDismissButton onClick={close} aria-label={dismissLabel} />}\n      </FocusTrap>\n    </PopoutWrapper>\n  );\n};\n"],"mappings":"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"}

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

@@ -15,4 +15,4 @@ export interface ButtonProps extends Omit<TappableProps, 'size'>, VKUIButtonProp
 /**
  * @see https://vkcom.github.io/VKUI/#/Button
  */
-export declare const Button: ({ size, mode, appearance, stretched, align, children, before, after, getRootRef, Component, loading, onClick, stopPropagation, className, ...restProps }: ButtonProps) => JSX.Element;
+export declare const Button: ({ size, mode, appearance, stretched, align, children, before, after, getRootRef, loading, onClick, stopPropagation, className, ...restProps }: ButtonProps) => JSX.Element;

package/dist/cssm/components/Button/Button.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["size", "mode", "appearance", "stretched", "align", "children", "before", "after", "getRootRef", "Component", "loading", "onClick", "stopPropagation", "className"];
+var _excluded = ["size", "mode", "appearance", "stretched", "align", "children", "before", "after", "getRootRef", "loading", "onClick", "stopPropagation", "className"];
 var _sizeYClassNames;
 import * as React from 'react';
 import { classNames, hasReactNode } from '@vkontakte/vkjs';
@@ -33,8 +33,6 @@ export var Button = function Button(_ref) {
     before = _ref.before,
     after = _ref.after,
     getRootRef = _ref.getRootRef,
-    _ref$Component = _ref.Component,
-    Component = _ref$Component === void 0 ? 'button' : _ref$Component,
     loading = _ref.loading,
     onClick = _ref.onClick,
     _ref$stopPropagation = _ref.stopPropagation,
@@ -49,9 +47,9 @@ export var Button = function Button(_ref) {
   var platform = usePlatform();
   return /*#__PURE__*/React.createElement(Tappable, _extends({
     hoverMode: "vkuiButton--hover",
-    activeMode: "vkuiButton--active"
+    activeMode: "vkuiButton--active",
+    Component: restProps.href ? 'a' : 'button'
   }, restProps, {
-    Component: restProps.href ? 'a' : Component,
     onClick: loading ? undefined : onClick,
     focusVisibleMode: "outside",
     stopPropagation: stopPropagation,

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

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","SizeType","Platform","Spinner","Tappable","sizeYClassNames","none","COMPACT","REGULAR","Button","size","mode","appearance","stretched","align","children","before","after","getRootRef","Component","loading","onClick","stopPropagation","className","restProps","hasIcons","Boolean","hasIconOnly","sizeY","platform","href","undefined","styles","ANDROID","IOS","process","env","NODE_ENV"],"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { HasAlign } from '../../types';\nimport { Spinner } from '../Spinner/Spinner';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport styles from './Button.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Button--sizeY-none'],\n  [SizeType.COMPACT]: styles['Button--sizeY-compact'],\n  [SizeType.REGULAR]: styles['Button--sizeY-regular'],\n};\n\nexport interface VKUIButtonProps extends HasAlign {\n  mode?: 'primary' | 'secondary' | 'tertiary' | 'outline' | 'link';\n  appearance?: 'accent' | 'positive' | 'negative' | 'neutral' | 'overlay' | 'accent-invariable';\n  size?: 's' | 'm' | 'l';\n  stretched?: boolean;\n  before?: React.ReactNode;\n  after?: React.ReactNode;\n  loading?: boolean;\n}\n\nexport interface ButtonProps extends Omit<TappableProps, 'size'>, VKUIButtonProps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Button\n */\nexport const Button = ({\n  size = 's',\n  mode = 'primary',\n  appearance = 'accent',\n  stretched = false,\n  align = 'center',\n  children,\n  before,\n  after,\n  getRootRef,\n  Component = 'button',\n  loading,\n  onClick,\n  stopPropagation = true,\n  className,\n  ...restProps\n}: ButtonProps) => {\n  const hasIcons = Boolean(before || after);\n  const hasIconOnly = !children && Boolean(after) !== Boolean(before);\n  const { sizeY = 'none' } = useAdaptivity();\n  const platform = usePlatform();\n\n  return (\n    <Tappable\n      hoverMode={styles['Button--hover']}\n      activeMode={styles['Button--active']}\n      {...restProps}\n      Component={restProps.href ? 'a' : Component}\n      onClick={loading ? undefined : onClick}\n      focusVisibleMode=\"outside\"\n      stopPropagation={stopPropagation}\n      className={classNames(\n        className,\n        styles.Button,\n        styles[`Button--size-${size}`],\n        styles[`Button--mode-${mode}`],\n        styles[`Button--appearance-${appearance}`],\n        styles[`Button--align-${align}`],\n        sizeYClassNames[sizeY],\n        platform === Platform.ANDROID && styles[`Button--android`],\n        platform === Platform.IOS && styles[`Button--ios`],\n        stretched && styles['Button--stretched'],\n        hasIcons && styles['Button--with-icon'],\n        hasIconOnly && !stretched && styles['Button--singleIcon'],\n        loading && styles['Button--loading'],\n      )}\n      getRootRef={getRootRef}\n    >\n      {loading && <Spinner size=\"small\" className={styles.Button__spinner} />}\n      <span className={styles.Button__in}>\n        {hasReactNode(before) && (\n          <span\n            className={styles.Button__before}\n            role=\"presentation\"\n            data-testid={process.env.NODE_ENV === 'test' ? 'before' : undefined}\n          >\n            {before}\n          </span>\n        )}\n        {hasReactNode(children) && (\n          <span\n            className={styles.Button__content}\n            data-testid={process.env.NODE_ENV === 'test' ? 'children' : undefined}\n          >\n            {children}\n          </span>\n        )}\n        {hasReactNode(after) && (\n          <span\n            className={styles.Button__after}\n            role=\"presentation\"\n            data-testid={process.env.NODE_ENV === 'test' ? 'after' : undefined}\n          >\n            {after}\n          </span>\n        )}\n      </span>\n    </Tappable>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Button.js","names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","SizeType","Platform","Spinner","Tappable","sizeYClassNames","none","COMPACT","REGULAR","Button","size","mode","appearance","stretched","align","children","before","after","getRootRef","loading","onClick","stopPropagation","className","restProps","hasIcons","Boolean","hasIconOnly","sizeY","platform","href","undefined","styles","ANDROID","IOS","process","env","NODE_ENV"],"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { HasAlign } from '../../types';\nimport { Spinner } from '../Spinner/Spinner';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport styles from './Button.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Button--sizeY-none'],\n  [SizeType.COMPACT]: styles['Button--sizeY-compact'],\n  [SizeType.REGULAR]: styles['Button--sizeY-regular'],\n};\n\nexport interface VKUIButtonProps extends HasAlign {\n  mode?: 'primary' | 'secondary' | 'tertiary' | 'outline' | 'link';\n  appearance?: 'accent' | 'positive' | 'negative' | 'neutral' | 'overlay' | 'accent-invariable';\n  size?: 's' | 'm' | 'l';\n  stretched?: boolean;\n  before?: React.ReactNode;\n  after?: React.ReactNode;\n  loading?: boolean;\n}\n\nexport interface ButtonProps extends Omit<TappableProps, 'size'>, VKUIButtonProps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Button\n */\nexport const Button = ({\n  size = 's',\n  mode = 'primary',\n  appearance = 'accent',\n  stretched = false,\n  align = 'center',\n  children,\n  before,\n  after,\n  getRootRef,\n  loading,\n  onClick,\n  stopPropagation = true,\n  className,\n  ...restProps\n}: ButtonProps) => {\n  const hasIcons = Boolean(before || after);\n  const hasIconOnly = !children && Boolean(after) !== Boolean(before);\n  const { sizeY = 'none' } = useAdaptivity();\n  const platform = usePlatform();\n\n  return (\n    <Tappable\n      hoverMode={styles['Button--hover']}\n      activeMode={styles['Button--active']}\n      Component={restProps.href ? 'a' : 'button'}\n      {...restProps}\n      onClick={loading ? undefined : onClick}\n      focusVisibleMode=\"outside\"\n      stopPropagation={stopPropagation}\n      className={classNames(\n        className,\n        styles.Button,\n        styles[`Button--size-${size}`],\n        styles[`Button--mode-${mode}`],\n        styles[`Button--appearance-${appearance}`],\n        styles[`Button--align-${align}`],\n        sizeYClassNames[sizeY],\n        platform === Platform.ANDROID && styles[`Button--android`],\n        platform === Platform.IOS && styles[`Button--ios`],\n        stretched && styles['Button--stretched'],\n        hasIcons && styles['Button--with-icon'],\n        hasIconOnly && !stretched && styles['Button--singleIcon'],\n        loading && styles['Button--loading'],\n      )}\n      getRootRef={getRootRef}\n    >\n      {loading && <Spinner size=\"small\" className={styles.Button__spinner} />}\n      <span className={styles.Button__in}>\n        {hasReactNode(before) && (\n          <span\n            className={styles.Button__before}\n            role=\"presentation\"\n            data-testid={process.env.NODE_ENV === 'test' ? 'before' : undefined}\n          >\n            {before}\n          </span>\n        )}\n        {hasReactNode(children) && (\n          <span\n            className={styles.Button__content}\n            data-testid={process.env.NODE_ENV === 'test' ? 'children' : undefined}\n          >\n            {children}\n          </span>\n        )}\n        {hasReactNode(after) && (\n          <span\n            className={styles.Button__after}\n            role=\"presentation\"\n            data-testid={process.env.NODE_ENV === 'test' ? 'after' : undefined}\n          >\n            {after}\n          </span>\n        )}\n      </span>\n    </Tappable>\n  );\n};\n"],"mappings":"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"}

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

@@ -1 +1 @@
-.vkuiCounter{align-items:center;background:#b8c1cc;background:var(--vkui--color_icon_tertiary);color:#fff;color:var(--vkui--color_text_contrast);display:flex;justify-content:center}.vkuiCounter__in{box-sizing:border-box;display:block;padding-left:5px;padding-right:5px;text-align:center;width:100%}.vkuiCounter--mode-primary{background:#2688eb;background:var(--vkui--color_background_accent);color:#fff;color:var(--vkui--color_text_contrast)}.vkuiCounter--mode-prominent{background:#ff3347;background:var(--vkui--color_accent_red);color:#fff;color:var(--vkui--color_text_contrast)}.vkuiCounter--mode-contrast{background:#fff;background:var(--vkui--color_background_content);color:#2688eb;color:var(--vkui--color_text_accent_themed)}.vkuiCounter--size-m{border-radius:12px;height:24px;min-width:24px}.vkuiCounter--size-s{border-radius:9px;height:18px;min-width:18px}.vkuiButton--mode-primary.vkuiButton--appearance-accent .vkuiCounter--mode-inherit{background-color:#fff;background-color:var(--vkui--color_background_content);color:#2688eb;color:var(--vkui--color_text_accent_themed)}.vkuiButton--mode-outline.vkuiButton--appearance-accent .vkuiCounter--mode-inherit,.vkuiButton--mode-secondary.vkuiButton--appearance-accent .vkuiCounter--mode-inherit,.vkuiButton--mode-tertiary.vkuiButton--appearance-accent .vkuiCounter--mode-inherit{background-color:#2688eb;background-color:var(--vkui--color_background_accent_themed);color:#fff;color:var(--vkui--color_text_contrast_themed)}.vkuiButton--mode-primary.vkuiButton--appearance-positive .vkuiCounter--mode-inherit{background-color:#fff;background-color:var(--vkui--color_background_contrast);color:#4bb34b;color:var(--vkui--color_text_positive)}.vkuiButton--mode-outline.vkuiButton--appearance-positive .vkuiCounter--mode-inherit,.vkuiButton--mode-secondary.vkuiButton--appearance-positive .vkuiCounter--mode-inherit,.vkuiButton--mode-tertiary.vkuiButton--appearance-positive .vkuiCounter--mode-inherit{background-color:#4bb34b;background-color:var(--vkui--color_background_positive);color:#fff;color:var(--vkui--color_text_contrast)}.vkuiButton--mode-primary.vkuiButton--appearance-negative .vkuiCounter--mode-inherit{background-color:#fff;background-color:var(--vkui--color_background_contrast);color:#e64646;color:var(--vkui--color_text_negative)}.vkuiButton--mode-outline.vkuiButton--appearance-negative .vkuiCounter--mode-inherit,.vkuiButton--mode-secondary.vkuiButton--appearance-negative .vkuiCounter--mode-inherit,.vkuiButton--mode-tertiary.vkuiButton--appearance-negative .vkuiCounter--mode-inherit{background-color:#e64646;background-color:var(--vkui--color_background_negative);color:#fff;color:var(--vkui--color_text_contrast)}.vkuiButton--mode-primary.vkuiButton--appearance-neutral .vkuiCounter--mode-inherit{background-color:#fff;background-color:var(--vkui--color_background_content);color:#000;color:var(--vkui--color_text_primary_invariably)}.vkuiButton--mode-outline.vkuiButton--appearance-neutral .vkuiCounter--mode-inherit,.vkuiButton--mode-secondary.vkuiButton--appearance-neutral .vkuiCounter--mode-inherit,.vkuiButton--mode-tertiary.vkuiButton--appearance-neutral .vkuiCounter--mode-inherit{background-color:#2688eb;background-color:var(--vkui--color_background_accent);color:#fff;color:var(--vkui--color_text_contrast)}.vkuiButton--mode-primary.vkuiButton--appearance-overlay .vkuiCounter--mode-inherit{background-color:#2c2d2e;background-color:var(--vkui--color_icon_primary_invariably);color:#fff;color:var(--vkui--color_text_contrast)}.vkuiButton--mode-outline.vkuiButton--appearance-overlay .vkuiCounter--mode-inherit,.vkuiButton--mode-secondary.vkuiButton--appearance-overlay .vkuiCounter--mode-inherit,.vkuiButton--mode-tertiary.vkuiButton--appearance-overlay .vkuiCounter--mode-inherit{background-color:#fff;background-color:var(--vkui--color_background_contrast);color:#000;color:var(--vkui--color_text_primary_invariably)}.vkuiWriteBarIcon .vkuiCounter--mode-inherit{background:#4bb34b;background:var(--vkui--color_background_positive);color:#fff;color:var(--vkui--color_text_contrast)}.vkuiSubnavigationButton .vkuiCounter--mode-inherit{background:#2688eb;background:var(--vkui--color_background_accent);color:#fff;color:var(--vkui--color_text_contrast)}.vkuiSubnavigationButton--selected:not(.vkuiSubnavigationButton--mode-tertiary) .vkuiCounter--mode-inherit{background-color:#fff;background-color:var(--vkui--color_background_content);color:#2688eb;color:var(--vkui--color_text_accent_themed)}
+.vkuiCounter{align-items:center;background:#b8c1cc;background:var(--vkui--color_icon_tertiary);color:#fff;color:var(--vkui--color_text_contrast);display:flex;justify-content:center}.vkuiCounter__in{box-sizing:border-box;display:block;padding-left:5px;padding-right:5px;text-align:center;width:100%}.vkuiCounter--mode-primary{background:#2688eb;background:var(--vkui--color_background_accent);color:#fff;color:var(--vkui--color_text_contrast)}.vkuiCounter--mode-prominent{background:#ff3347;background:var(--vkui--color_accent_red);color:#fff;color:var(--vkui--color_text_contrast)}.vkuiCounter--mode-contrast{background:#fff;background:var(--vkui--color_background_content);color:#2688eb;color:var(--vkui--color_text_accent_themed)}.vkuiCounter--size-m{border-radius:12px;height:24px;min-width:24px}.vkuiCounter--size-s{border-radius:9px;height:18px;min-width:18px}.vkuiButton--mode-primary.vkuiButton--appearance-accent .vkuiCounter--mode-inherit{background-color:#fff;background-color:var(--vkui--color_background_content);color:#2688eb;color:var(--vkui--color_text_accent_themed)}.vkuiButton--mode-outline.vkuiButton--appearance-accent .vkuiCounter--mode-inherit,.vkuiButton--mode-secondary.vkuiButton--appearance-accent .vkuiCounter--mode-inherit,.vkuiButton--mode-tertiary.vkuiButton--appearance-accent .vkuiCounter--mode-inherit{background-color:#2688eb;background-color:var(--vkui--color_background_accent_themed);color:#fff;color:var(--vkui--color_text_contrast_themed)}.vkuiButton--mode-primary.vkuiButton--appearance-positive .vkuiCounter--mode-inherit{background-color:#fff;background-color:var(--vkui--color_background_contrast);color:#4bb34b;color:var(--vkui--color_text_positive)}.vkuiButton--mode-outline.vkuiButton--appearance-positive .vkuiCounter--mode-inherit,.vkuiButton--mode-secondary.vkuiButton--appearance-positive .vkuiCounter--mode-inherit,.vkuiButton--mode-tertiary.vkuiButton--appearance-positive .vkuiCounter--mode-inherit{background-color:#4bb34b;background-color:var(--vkui--color_background_positive);color:#fff;color:var(--vkui--color_text_contrast)}.vkuiButton--mode-primary.vkuiButton--appearance-negative .vkuiCounter--mode-inherit{background-color:#fff;background-color:var(--vkui--color_background_contrast);color:#e64646;color:var(--vkui--color_text_negative)}.vkuiButton--mode-outline.vkuiButton--appearance-negative .vkuiCounter--mode-inherit,.vkuiButton--mode-secondary.vkuiButton--appearance-negative .vkuiCounter--mode-inherit,.vkuiButton--mode-tertiary.vkuiButton--appearance-negative .vkuiCounter--mode-inherit{background-color:#e64646;background-color:var(--vkui--color_background_negative);color:#fff;color:var(--vkui--color_text_contrast)}.vkuiButton--mode-primary.vkuiButton--appearance-neutral .vkuiCounter--mode-inherit{background-color:#fff;background-color:var(--vkui--color_background_content);color:#000;color:var(--vkui--color_text_primary_invariably)}.vkuiButton--mode-outline.vkuiButton--appearance-neutral .vkuiCounter--mode-inherit,.vkuiButton--mode-secondary.vkuiButton--appearance-neutral .vkuiCounter--mode-inherit,.vkuiButton--mode-tertiary.vkuiButton--appearance-neutral .vkuiCounter--mode-inherit{background-color:#2688eb;background-color:var(--vkui--color_background_accent);color:#fff;color:var(--vkui--color_text_contrast)}.vkuiButton--mode-primary.vkuiButton--appearance-overlay .vkuiCounter--mode-inherit{background-color:#2c2d2e;background-color:var(--vkui--color_icon_primary_invariably);color:#fff;color:var(--vkui--color_text_contrast)}.vkuiButton--mode-outline.vkuiButton--appearance-overlay .vkuiCounter--mode-inherit,.vkuiButton--mode-secondary.vkuiButton--appearance-overlay .vkuiCounter--mode-inherit,.vkuiButton--mode-tertiary.vkuiButton--appearance-overlay .vkuiCounter--mode-inherit{background-color:#fff;background-color:var(--vkui--color_background_contrast);color:#000;color:var(--vkui--color_text_primary_invariably)}.vkuiWriteBarIcon .vkuiCounter--mode-inherit{background:#4bb34b;background:var(--vkui--color_background_positive);color:#fff;color:var(--vkui--color_text_contrast_themed)}.vkuiSubnavigationButton .vkuiCounter--mode-inherit{background:#2688eb;background:var(--vkui--color_background_accent_themed);color:#fff;color:var(--vkui--color_text_contrast_themed)}.vkuiSubnavigationButton--selected:not(.vkuiSubnavigationButton--mode-tertiary) .vkuiCounter--mode-inherit{background-color:#fff;background-color:var(--vkui--color_background_content);color:#2688eb;color:var(--vkui--color_text_accent_themed)}

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

@@ -1 +1 @@
-.vkuiHeader{align-items:baseline;display:flex;font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);justify-content:space-between;padding:0 0 0 16px;padding-left:var(--vkui--size_base_padding_horizontal--regular);padding-right:16px;padding-right:var(--vkui--size_base_padding_horizontal--regular);-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}.vkuiHeader__main{color:#000;color:var(--vkui--color_text_primary);min-width:0;overflow:hidden;text-overflow:ellipsis}.vkuiHeader__content{align-items:baseline;display:flex}.vkuiHeader__content-in{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiHeader__content-in--multiline{white-space:normal;word-break:break-word}.vkuiHeader--multiline{white-space:normal}.vkuiHeader__subtitle{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiHeader--mode-primary .vkuiHeader__content:not(:last-child){margin-top:-1px}.vkuiHeader--mode-secondary:not(.vkuiHeader--pi) .vkuiHeader__main,.vkuiHeader--mode-tertiary .vkuiHeader__main,.vkuiHeader__indicator{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiHeader__indicator{flex-shrink:0;margin-left:6px}.vkuiHeader--mode-primary .vkuiHeader__indicator{color:#6d7885;color:var(--vkui--color_text_subhead)}.vkuiHeader:not(.vkuiHeader--pi) .vkuiHeader__indicator{align-self:center}.vkuiHeader--mode-secondary .vkuiHeader__indicator{margin-left:8px}.vkuiHeader__aside{margin-left:12px;white-space:nowrap}.vkuiHeader__aside>.vkuiIcon{color:#99a2ad;color:var(--vkui--color_icon_secondary);position:relative}.vkuiHeader__aside>.vkuiIcon--24{top:3px}.vkuiHeader__aside>.vkuiIcon--16{top:1px}.vkuiHeader--android .vkuiHeader__main{margin:15px 0 9px}.vkuiHeader--android.vkuiHeader--mode-tertiary .vkuiHeader__main{margin-top:11px}.vkuiHeader--ios .vkuiHeader__main{margin:13px 0 9px}.vkuiHeader--ios.vkuiHeader--mode-secondary .vkuiHeader__main{margin:14px 0 10px}.vkuiHeader--ios.vkuiHeader--mode-tertiary .vkuiHeader__main{margin-top:9px}.vkuiHeader--vkcom{align-items:center;height:64px}.vkuiHeader--vkcom .vkuiHeader__main{color:#000;color:var(--vkui--color_text_primary)}.vkuiHeader--vkcom.vkuiHeader--mode-primary .vkuiHeader__content:not(:last-child){margin-top:0}.vkuiHeader--vkcom.vkuiHeader--mode-secondary{height:56px}.vkuiHeader--vkcom.vkuiHeader--mode-tertiary{height:40px}.vkuiGroup--mode-plain:not(:first-of-type) .vkuiGroup__inner>.vkuiHeader:first-child{margin-top:-16px}@media (max-width:767.9px){.vkuiGroup--mode-none:not(:first-of-type) .vkuiGroup__inner>.vkuiHeader:first-child{margin-top:-16px}}.vkuiGroup--mode-card>.vkuiGroup__inner>.vkuiHeader:not(.vkuiHeader--mode-tertiary):first-child{margin-top:-4px}@media (min-width:768px){.vkuiGroup--mode-none>.vkuiGroup__inner>.vkuiHeader:not(.vkuiHeader--mode-tertiary):first-child{margin-top:-4px}}
+.vkuiHeader{align-items:baseline;display:flex;font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);justify-content:space-between;padding:0 0 0 16px;padding-left:var(--vkui--size_base_padding_horizontal--regular);padding-right:16px;padding-right:var(--vkui--size_base_padding_horizontal--regular);-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}.vkuiHeader__main{color:#000;color:var(--vkui--color_text_primary);min-width:0;overflow:hidden;text-overflow:ellipsis}.vkuiHeader__content{align-items:baseline;display:flex}.vkuiHeader__content-in{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiHeader__content-in--multiline{white-space:normal;word-break:break-word}.vkuiHeader--multiline{white-space:normal}.vkuiHeader__subtitle{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiHeader--mode-primary .vkuiHeader__content:not(:last-child){margin-top:-1px}.vkuiHeader--mode-secondary:not(.vkuiHeader--pi) .vkuiHeader__main,.vkuiHeader--mode-tertiary .vkuiHeader__main,.vkuiHeader__indicator{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiHeader__indicator{flex-shrink:0;margin-left:6px}.vkuiHeader--mode-primary .vkuiHeader__indicator{color:#6d7885;color:var(--vkui--color_text_subhead)}.vkuiHeader:not(.vkuiHeader--pi) .vkuiHeader__indicator{align-self:center}.vkuiHeader--mode-secondary .vkuiHeader__indicator{margin-left:8px}.vkuiHeader__aside{margin-left:12px;white-space:nowrap}.vkuiHeader__aside>.vkuiIcon{color:#99a2ad;color:var(--vkui--color_icon_secondary);position:relative}.vkuiHeader__aside>.vkuiIcon--24{top:3px}.vkuiHeader__aside>.vkuiIcon--16{top:1px}.vkuiHeader--android .vkuiHeader__main{margin:15px 0 9px}.vkuiHeader--android.vkuiHeader--mode-tertiary .vkuiHeader__main{margin-top:11px}.vkuiHeader--ios .vkuiHeader__main{margin:13px 0 9px}.vkuiHeader--ios.vkuiHeader--mode-secondary .vkuiHeader__main{margin:14px 0 10px}.vkuiHeader--ios.vkuiHeader--mode-tertiary .vkuiHeader__main{margin-top:9px}.vkuiHeader--vkcom{align-items:center;height:64px}.vkuiHeader--vkcom .vkuiHeader__main{color:#000;color:var(--vkui--color_text_primary)}.vkuiHeader--vkcom.vkuiHeader--mode-primary .vkuiHeader__content:not(:last-child){margin-top:0}.vkuiHeader--vkcom.vkuiHeader--mode-secondary{height:56px}.vkuiHeader--vkcom.vkuiHeader--mode-tertiary{height:40px}.vkuiGroup--mode-plain:not(:first-of-type) .vkuiGroup__inner>.vkuiHeader:first-child,.vkuiGroup--mode-plain:not(:first-of-type) .vkuiGroup__inner>.vkuiTappable:first-child>.vkuiHeader{margin-top:-16px}@media (max-width:767.9px){.vkuiGroup--mode-none:not(:first-of-type) .vkuiGroup__inner>.vkuiHeader:first-child,.vkuiGroup--mode-none:not(:first-of-type) .vkuiGroup__inner>.vkuiTappable:first-child>.vkuiHeader{margin-top:-16px}}.vkuiGroup--mode-card>.vkuiGroup__inner>.vkuiHeader:not(.vkuiHeader--mode-tertiary):first-child,.vkuiGroup--mode-card>.vkuiGroup__inner>.vkuiTappable:first-child>.vkuiHeader:not(.vkuiHeader--mode-tertiary){margin-top:-4px}@media (min-width:768px){.vkuiGroup--mode-none>.vkuiGroup__inner>.vkuiHeader:not(.vkuiHeader--mode-tertiary):first-child,.vkuiGroup--mode-none>.vkuiGroup__inner>.vkuiTappable:first-child>.vkuiHeader:not(.vkuiHeader--mode-tertiary){margin-top:-4px}}

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

@@ -6,4 +6,4 @@ export interface IconButtonProps extends TappableProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/IconButton
  */
-export declare const IconButton: ({ children, Component, className, ...restProps }: IconButtonProps) => JSX.Element;
+export declare const IconButton: ({ children, className, ...restProps }: IconButtonProps) => JSX.Element;

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["children", "Component", "className"];
+var _excluded = ["children", "className"];
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
@@ -21,8 +21,6 @@ var warn = warnOnce('IconButton');
  */
 export var IconButton = function IconButton(_ref) {
   var children = _ref.children,
-    _ref$Component = _ref.Component,
-    Component = _ref$Component === void 0 ? 'button' : _ref$Component,
     className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded);
   var platform = usePlatform();
@@ -37,9 +35,9 @@ export var IconButton = function IconButton(_ref) {
   }
   return /*#__PURE__*/React.createElement(Tappable, _extends({
     activeEffectDelay: 200,
-    activeMode: "background"
+    activeMode: "background",
+    Component: restProps.href ? 'a' : 'button'
   }, restProps, {
-    Component: restProps.href ? 'a' : Component,
     className: classNames("vkuiIconButton", sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], platform === Platform.IOS && "vkuiIconButton--ios", className)
   }), children);
 };

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

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","names":["React","classNames","useAdaptivity","usePlatform","SizeType","Platform","COMMON_WARNINGS","warnOnce","Tappable","sizeYClassNames","none","COMPACT","warn","IconButton","children","Component","className","restProps","platform","sizeY","process","env","NODE_ENV","isAccessible","a11y","href","REGULAR","IOS"],"sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport styles from './IconButton.module.css';\n\nconst sizeYClassNames = {\n  none: styles['IconButton--sizeY-none'],\n  [SizeType.COMPACT]: styles['IconButton--sizeY-compact'],\n};\n\nexport interface IconButtonProps extends TappableProps {\n  children?: React.ReactNode;\n}\n\nconst warn = warnOnce('IconButton');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/IconButton\n */\nexport const IconButton = ({\n  children,\n  Component = 'button',\n  className,\n  ...restProps\n}: IconButtonProps) => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n\n  if (process.env.NODE_ENV === 'development') {\n    const isAccessible = restProps['aria-label'] || restProps['aria-labelledby'];\n\n    if (!isAccessible) {\n      warn(COMMON_WARNINGS.a11y[restProps.href ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n\n  return (\n    <Tappable\n      activeEffectDelay={200}\n      activeMode=\"background\"\n      {...restProps}\n      Component={restProps.href ? 'a' : Component}\n      className={classNames(\n        styles['IconButton'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        platform === Platform.IOS && styles['IconButton--ios'],\n        className,\n      )}\n    >\n      {children}\n    </Tappable>\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,eAAe,EAAEC,QAAQ,QAAQ,oBAAoB;AAC9D,SAASC,QAAQ,QAAuB,sBAAsB;AAAC;AAG/D,IAAMC,eAAe;EACnBC,IAAI;AAAkC,GACrCN,QAAQ,CAACO,OAAO,kCAClB;AAMD,IAAMC,IAAI,GAAGL,QAAQ,CAAC,YAAY,CAAC;;AAEnC;AACA;AACA;AACA,OAAO,IAAMM,UAAU,GAAG,SAAbA,UAAU,OAKA;EAAA,IAJrBC,QAAQ,QAARA,QAAQ;IAAA,sBACRC,SAAS;IAATA,SAAS,+BAAG,QAAQ;IACpBC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAGf,WAAW,EAAE;EAC9B,qBAA2BD,aAAa,EAAE;IAAA,sCAAlCiB,KAAK;IAALA,KAAK,qCAAG,MAAM;EAEtB,IAAIC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,EAAE;IAC1C,IAAMC,YAAY,GAAGN,SAAS,CAAC,YAAY,CAAC,IAAIA,SAAS,CAAC,iBAAiB,CAAC;IAE5E,IAAI,CAACM,YAAY,EAAE;MACjBX,IAAI,CAACN,eAAe,CAACkB,IAAI,CAACP,SAAS,CAACQ,IAAI,GAAG,WAAW,GAAG,aAAa,CAAC,EAAE,OAAO,CAAC;IACnF;EACF;EAEA,oBACE,oBAAC,QAAQ;IACP,iBAAiB,EAAE,GAAI;IACvB,UAAU,EAAC;EAAY,GACnBR,SAAS;IACb,SAAS,EAAEA,SAAS,CAACQ,IAAI,GAAG,GAAG,GAAGV,SAAU;IAC5C,SAAS,EAAEd,UAAU,mBAEnBkB,KAAK,KAAKf,QAAQ,CAACsB,OAAO,IAAIjB,eAAe,CAACU,KAAK,CAAC,EACpDD,QAAQ,KAAKb,QAAQ,CAACsB,GAAG,yBAA6B,EACtDX,SAAS;EACT,IAEDF,QAAQ,CACA;AAEf,CAAC"}
+{"version":3,"file":"IconButton.js","names":["React","classNames","useAdaptivity","usePlatform","SizeType","Platform","COMMON_WARNINGS","warnOnce","Tappable","sizeYClassNames","none","COMPACT","warn","IconButton","children","className","restProps","platform","sizeY","process","env","NODE_ENV","isAccessible","a11y","href","REGULAR","IOS"],"sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport styles from './IconButton.module.css';\n\nconst sizeYClassNames = {\n  none: styles['IconButton--sizeY-none'],\n  [SizeType.COMPACT]: styles['IconButton--sizeY-compact'],\n};\n\nexport interface IconButtonProps extends TappableProps {\n  children?: React.ReactNode;\n}\n\nconst warn = warnOnce('IconButton');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/IconButton\n */\nexport const IconButton = ({ children, className, ...restProps }: IconButtonProps) => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n\n  if (process.env.NODE_ENV === 'development') {\n    const isAccessible = restProps['aria-label'] || restProps['aria-labelledby'];\n\n    if (!isAccessible) {\n      warn(COMMON_WARNINGS.a11y[restProps.href ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n\n  return (\n    <Tappable\n      activeEffectDelay={200}\n      activeMode=\"background\"\n      Component={restProps.href ? 'a' : 'button'}\n      {...restProps}\n      className={classNames(\n        styles['IconButton'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        platform === Platform.IOS && styles['IconButton--ios'],\n        className,\n      )}\n    >\n      {children}\n    </Tappable>\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,eAAe,EAAEC,QAAQ,QAAQ,oBAAoB;AAC9D,SAASC,QAAQ,QAAuB,sBAAsB;AAAC;AAG/D,IAAMC,eAAe;EACnBC,IAAI;AAAkC,GACrCN,QAAQ,CAACO,OAAO,kCAClB;AAMD,IAAMC,IAAI,GAAGL,QAAQ,CAAC,YAAY,CAAC;;AAEnC;AACA;AACA;AACA,OAAO,IAAMM,UAAU,GAAG,SAAbA,UAAU,OAA+D;EAAA,IAAzDC,QAAQ,QAARA,QAAQ;IAAEC,SAAS,QAATA,SAAS;IAAKC,SAAS;EAC5D,IAAMC,QAAQ,GAAGd,WAAW,EAAE;EAC9B,qBAA2BD,aAAa,EAAE;IAAA,sCAAlCgB,KAAK;IAALA,KAAK,qCAAG,MAAM;EAEtB,IAAIC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,EAAE;IAC1C,IAAMC,YAAY,GAAGN,SAAS,CAAC,YAAY,CAAC,IAAIA,SAAS,CAAC,iBAAiB,CAAC;IAE5E,IAAI,CAACM,YAAY,EAAE;MACjBV,IAAI,CAACN,eAAe,CAACiB,IAAI,CAACP,SAAS,CAACQ,IAAI,GAAG,WAAW,GAAG,aAAa,CAAC,EAAE,OAAO,CAAC;IACnF;EACF;EAEA,oBACE,oBAAC,QAAQ;IACP,iBAAiB,EAAE,GAAI;IACvB,UAAU,EAAC,YAAY;IACvB,SAAS,EAAER,SAAS,CAACQ,IAAI,GAAG,GAAG,GAAG;EAAS,GACvCR,SAAS;IACb,SAAS,EAAEf,UAAU,mBAEnBiB,KAAK,KAAKd,QAAQ,CAACqB,OAAO,IAAIhB,eAAe,CAACS,KAAK,CAAC,EACpDD,QAAQ,KAAKZ,QAAQ,CAACqB,GAAG,yBAA6B,EACtDX,SAAS;EACT,IAEDD,QAAQ,CACA;AAEf,CAAC"}

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

@@ -6,4 +6,4 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>,
 /**
  * @see https://vkcom.github.io/VKUI/#/Input
  */
-export declare const Input: ({ type, align, getRef, className, getRootRef, style, before, after, status, ...restProps }: InputProps) => JSX.Element;
+export declare const Input: ({ type, align, getRef, className, getRootRef, style, before, after, status, mode, ...restProps }: InputProps) => JSX.Element;

package/dist/cssm/components/Input/Input.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["type", "align", "getRef", "className", "getRootRef", "style", "before", "after", "status"];
+var _excluded = ["type", "align", "getRef", "className", "getRootRef", "style", "before", "after", "status", "mode"];
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
@@ -25,6 +25,7 @@ export var Input = function Input(_ref) {
     before = _ref.before,
     after = _ref.after,
     status = _ref.status,
+    mode = _ref.mode,
     restProps = _objectWithoutProperties(_ref, _excluded);
   var _useAdaptivity = useAdaptivity(),
     _useAdaptivity$sizeY = _useAdaptivity.sizeY,
@@ -36,6 +37,7 @@ export var Input = function Input(_ref) {
     before: before,
     after: after,
     disabled: restProps.disabled,
+    mode: mode,
     status: status
   }, /*#__PURE__*/React.createElement("input", _extends({}, restProps, {
     type: type,

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

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["React","classNames","useAdaptivity","SizeType","FormField","sizeYClassNames","none","COMPACT","Input","type","align","getRef","className","getRootRef","style","before","after","status","restProps","sizeY","styles","REGULAR","disabled"],"sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport styles from './Input.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Input--sizeY-none'],\n  [SizeType.COMPACT]: styles['Input--sizeY-compact'],\n};\n\nexport interface InputProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement>,\n    HasRootRef<HTMLDivElement>,\n    HasAlign,\n    FormFieldProps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Input\n */\nexport const Input = ({\n  type = 'text',\n  align,\n  getRef,\n  className,\n  getRootRef,\n  style,\n  before,\n  after,\n  status,\n  ...restProps\n}: InputProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <FormField\n      style={style}\n      className={classNames(\n        styles['Input'],\n        align && styles[`Input--align-${align}`],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        before && styles['Input--hasBefore'],\n        after && styles['Input--hasAfter'],\n        className,\n      )}\n      getRootRef={getRootRef}\n      before={before}\n      after={after}\n      disabled={restProps.disabled}\n      status={status}\n    >\n      <input {...restProps} type={type} className={styles['Input__el']} ref={getRef} />\n    </FormField>\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,QAAQ,QAAQ,sBAAsB;AAE/C,SAASC,SAAS,QAAwB,wBAAwB;AAAC;AAGnE,IAAMC,eAAe;EACnBC,IAAI;AAA6B,GAChCH,QAAQ,CAACI,OAAO,6BAClB;AASD;AACA;AACA;AACA,OAAO,IAAMC,KAAK,GAAG,SAARA,KAAK,OAWA;EAAA,qBAVhBC,IAAI;IAAJA,IAAI,0BAAG,MAAM;IACbC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACNC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACVC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACHC,SAAS;EAEZ,qBAA2BhB,aAAa,EAAE;IAAA,sCAAlCiB,KAAK;IAALA,KAAK,qCAAG,MAAM;EAEtB,oBACE,oBAAC,SAAS;IACR,KAAK,EAAEL,KAAM;IACb,SAAS,EAAEb,UAAU,cAEnBS,KAAK,IAAIU,MAAM,wBAAiBV,KAAK,EAAG,EACxCS,KAAK,KAAKhB,QAAQ,CAACkB,OAAO,IAAIhB,eAAe,CAACc,KAAK,CAAC,EACpDJ,MAAM,0BAA8B,EACpCC,KAAK,yBAA6B,EAClCJ,SAAS,CACT;IACF,UAAU,EAAEC,UAAW;IACvB,MAAM,EAAEE,MAAO;IACf,KAAK,EAAEC,KAAM;IACb,QAAQ,EAAEE,SAAS,CAACI,QAAS;IAC7B,MAAM,EAAEL;EAAO,gBAEf,0CAAWC,SAAS;IAAE,IAAI,EAAET,IAAK;IAAC,SAAS,iBAAsB;IAAC,GAAG,EAAEE;EAAO,GAAG,CACvE;AAEhB,CAAC;AAAC;EAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"Input.js","names":["React","classNames","useAdaptivity","SizeType","FormField","sizeYClassNames","none","COMPACT","Input","type","align","getRef","className","getRootRef","style","before","after","status","mode","restProps","sizeY","styles","REGULAR","disabled"],"sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport styles from './Input.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Input--sizeY-none'],\n  [SizeType.COMPACT]: styles['Input--sizeY-compact'],\n};\n\nexport interface InputProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement>,\n    HasRootRef<HTMLDivElement>,\n    HasAlign,\n    FormFieldProps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Input\n */\nexport const Input = ({\n  type = 'text',\n  align,\n  getRef,\n  className,\n  getRootRef,\n  style,\n  before,\n  after,\n  status,\n  mode,\n  ...restProps\n}: InputProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <FormField\n      style={style}\n      className={classNames(\n        styles['Input'],\n        align && styles[`Input--align-${align}`],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        before && styles['Input--hasBefore'],\n        after && styles['Input--hasAfter'],\n        className,\n      )}\n      getRootRef={getRootRef}\n      before={before}\n      after={after}\n      disabled={restProps.disabled}\n      mode={mode}\n      status={status}\n    >\n      <input {...restProps} type={type} className={styles['Input__el']} ref={getRef} />\n    </FormField>\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,QAAQ,QAAQ,sBAAsB;AAE/C,SAASC,SAAS,QAAwB,wBAAwB;AAAC;AAGnE,IAAMC,eAAe;EACnBC,IAAI;AAA6B,GAChCH,QAAQ,CAACI,OAAO,6BAClB;AASD;AACA;AACA;AACA,OAAO,IAAMC,KAAK,GAAG,SAARA,KAAK,OAYA;EAAA,qBAXhBC,IAAI;IAAJA,IAAI,0BAAG,MAAM;IACbC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACNC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACVC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACNC,IAAI,QAAJA,IAAI;IACDC,SAAS;EAEZ,qBAA2BjB,aAAa,EAAE;IAAA,sCAAlCkB,KAAK;IAALA,KAAK,qCAAG,MAAM;EAEtB,oBACE,oBAAC,SAAS;IACR,KAAK,EAAEN,KAAM;IACb,SAAS,EAAEb,UAAU,cAEnBS,KAAK,IAAIW,MAAM,wBAAiBX,KAAK,EAAG,EACxCU,KAAK,KAAKjB,QAAQ,CAACmB,OAAO,IAAIjB,eAAe,CAACe,KAAK,CAAC,EACpDL,MAAM,0BAA8B,EACpCC,KAAK,yBAA6B,EAClCJ,SAAS,CACT;IACF,UAAU,EAAEC,UAAW;IACvB,MAAM,EAAEE,MAAO;IACf,KAAK,EAAEC,KAAM;IACb,QAAQ,EAAEG,SAAS,CAACI,QAAS;IAC7B,IAAI,EAAEL,IAAK;IACX,MAAM,EAAED;EAAO,gBAEf,0CAAWE,SAAS;IAAE,IAAI,EAAEV,IAAK;IAAC,SAAS,iBAAsB;IAAC,GAAG,EAAEE;EAAO,GAAG,CACvE;AAEhB,CAAC;AAAC;EAAA;EAAA;EAAA;AAAA"}

package/dist/cssm/components/ModalPage/ModalPage.js

@@ -6,6 +6,7 @@ import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
 import { useOrientationChange } from '../../hooks/useOrientationChange';
 import { usePlatform } from '../../hooks/usePlatform';
+import { SizeType } from '../../lib/adaptivity';
 import { getNavId } from '../../lib/getNavId';
 import { Platform } from '../../lib/platform';
 import { multiRef } from '../../lib/utils';
@@ -14,10 +15,6 @@ import { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';
 import { ModalRootContext, useModalRegistry } from '../ModalRoot/ModalRootContext';
 import { ModalType } from '../ModalRoot/types';
 import "./ModalPage.module.css";
-var sizeXClassNames = {
-  regular: "vkuiModalPage--sizeX-regular",
-  compact: ''
-};
 var sizeClassName = {
   s: "vkuiModalPage--size-s",
   m: "vkuiModalPage--size-m",
@@ -64,7 +61,7 @@ export var ModalPage = function ModalPage(_ref) {
     refs = _useModalRegistry.refs;
   return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
     id: id,
-    className: classNames("vkuiModalPage", platform === Platform.IOS && "vkuiModalPage--ios", isDesktop && "vkuiModalPage--desktop", sizeXClassNames[sizeX], typeof size === 'string' && sizeClassName[size], className)
+    className: classNames("vkuiModalPage", platform === Platform.IOS && "vkuiModalPage--ios", isDesktop && "vkuiModalPage--desktop", sizeX === SizeType.REGULAR && "vkuiModalPage--sizeX-regular", typeof size === 'string' && sizeClassName[size], className)
   }), /*#__PURE__*/React.createElement("div", {
     className: "vkuiModalPage__in-wrap",
     style: {

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

@@ -1 +1 @@
-{"version":3,"file":"ModalPage.js","names":["React","classNames","useAdaptivityWithJSMediaQueries","useOrientationChange","usePlatform","getNavId","Platform","multiRef","warnOnce","ModalDismissButton","ModalRootContext","useModalRegistry","ModalType","sizeXClassNames","regular","compact","sizeClassName","s","m","l","warn","ModalPage","children","header","size","sizeProp","onOpen","onOpened","onClose","onClosed","settlingHeight","dynamicContentHeight","getModalContentRef","nav","id","hideCloseButton","className","restProps","useContext","updateModalHeight","platform","orientation","sizeX","isDesktop","useEffect","isCloseButtonShown","modalContext","PAGE","refs","IOS","maxWidth","undefined","innerElement","headerElement","contentElement"],"sources":["../../../../src/components/ModalPage/ModalPage.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useOrientationChange } from '../../hooks/useOrientationChange';\nimport { usePlatform } from '../../hooks/usePlatform';\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 styles from './ModalPage.module.css';\n\nconst sizeXClassNames = {\n  regular: styles['ModalPage--sizeX-regular'],\n  compact: '',\n};\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,\n  hideCloseButton = false,\n  className,\n  ...restProps\n}: ModalPageProps) => {\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  return (\n    <div\n      {...restProps}\n      id={id}\n      className={classNames(\n        styles['ModalPage'],\n        platform === Platform.IOS && styles['ModalPage--ios'],\n        isDesktop && styles['ModalPage--desktop'],\n        sizeXClassNames[sizeX],\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  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"ModalPage.js","names":["React","classNames","useAdaptivityWithJSMediaQueries","useOrientationChange","usePlatform","SizeType","getNavId","Platform","multiRef","warnOnce","ModalDismissButton","ModalRootContext","useModalRegistry","ModalType","sizeClassName","s","m","l","warn","ModalPage","children","header","size","sizeProp","onOpen","onOpened","onClose","onClosed","settlingHeight","dynamicContentHeight","getModalContentRef","nav","id","hideCloseButton","className","restProps","useContext","updateModalHeight","platform","orientation","sizeX","isDesktop","useEffect","isCloseButtonShown","modalContext","PAGE","refs","IOS","REGULAR","maxWidth","undefined","innerElement","headerElement","contentElement"],"sources":["../../../../src/components/ModalPage/ModalPage.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\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 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,\n  hideCloseButton = false,\n  className,\n  ...restProps\n}: ModalPageProps) => {\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  return (\n    <div\n      {...restProps}\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 && styles['ModalPage--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  );\n};\n"],"mappings":"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"}

package/dist/cssm/components/Pagination/Pagination.js

@@ -74,7 +74,7 @@ export var Pagination = function Pagination(_ref) {
           key: page
         }, /*#__PURE__*/React.createElement("div", {
           className: classNames("vkuiPagination__page", "vkuiPagination__page--type-ellipsis", pageSizeYClassNames[sizeY], disabled && "vkuiPagination__page--disabled")
-        }, "..."));
+        }, "\u2026"));
       default:
         {
           var _isCurrent = page === currentPage;

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

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","names":["React","Icon24ChevronCompactLeft","Icon24ChevronCompactRight","classNames","useAdaptivity","usePagination","SizeType","Button","Tappable","pageSizeYClassNames","none","COMPACT","REGULAR","getPageAriaLabelDefault","page","isCurrent","Pagination","currentPage","siblingCount","boundaryCount","totalPages","disabled","getPageAriaLabel","prevButtonAriaLabel","nextButtonAriaLabel","getRootRef","onChange","className","resetProps","sizeY","pages","isFirstPage","isLastPage","handlePrevClick","useCallback","handleClick","event","currentTarget","dataset","Number","handleNextClick","renderPages","undefined","map"],"sources":["../../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24ChevronCompactLeft, Icon24ChevronCompactRight } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { PaginationPageType, usePagination } from '../../hooks/usePagination';\nimport { SizeType } from '../../lib/adaptivity';\nimport type { HasRootRef } from '../../types';\nimport { Button } from '../Button/Button';\nimport { Tappable } from '../Tappable/Tappable';\nimport styles from './Pagination.module.css';\n\nconst pageSizeYClassNames = {\n  none: styles['Pagination__page--sizeY-none'],\n  [SizeType.COMPACT]: styles['Pagination__page--sizeY-compact'],\n  [SizeType.REGULAR]: styles['Pagination__page--sizeY-regular'],\n};\n\nfunction getPageAriaLabelDefault(page: number, isCurrent: boolean): string {\n  return isCurrent ? `${page} страница` : `Перейти на ${page} страницу`;\n}\n\nexport interface PaginationProps\n  extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'>,\n    HasRootRef<HTMLElement> {\n  /**\n   * Текущая страница.\n   */\n  currentPage?: number;\n  /**\n   * Кол-во всегда видимых страниц по краям текущей страницы.\n   */\n  siblingCount?: number;\n  /**\n   * Кол-во всегда видимых страниц в начале и в конце.\n   */\n  boundaryCount?: number;\n  /**\n   * Общее кол-во страниц.\n   */\n  totalPages?: number;\n  /**\n   * Блокировка всех кнопок.\n   */\n  disabled?: boolean;\n  /**\n   * Переопределение `aria-label` для кнопки навигации назад.\n   * По умолчанию используется текст на \"ru_RU\".\n   */\n  prevButtonAriaLabel?: string;\n  /**\n   * Переопределение `aria-label` для кнопки навигации вперёд.\n   * По умолчанию используется текст на \"ru_RU\".\n   */\n  nextButtonAriaLabel?: string;\n  /**\n   * Функция для переопределения и/или локализации `aria-label` атрибута.\n   * По умолчанию используется текст на \"ru_RU\".\n   */\n  getPageAriaLabel?(page: number, isCurrent: boolean): string;\n  onChange?(page: number): void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Pagination\n */\nexport const Pagination = ({\n  currentPage = 1,\n  siblingCount = 1,\n  boundaryCount = 1,\n  totalPages = 1,\n  disabled,\n  getPageAriaLabel = getPageAriaLabelDefault,\n  prevButtonAriaLabel = 'Перейти на предыдущую страницу',\n  nextButtonAriaLabel = 'Перейти на следующую страницу',\n  getRootRef,\n  onChange,\n  className,\n  ...resetProps\n}: PaginationProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const pages = usePagination({\n    currentPage,\n    totalPages,\n    siblingCount,\n    boundaryCount,\n  });\n  const isFirstPage = currentPage === 1;\n  const isLastPage = currentPage === totalPages;\n\n  const handlePrevClick = React.useCallback(() => {\n    if (onChange && !isFirstPage) {\n      onChange(currentPage - 1);\n    }\n  }, [currentPage, isFirstPage, onChange]);\n\n  const handleClick = React.useCallback(\n    (event: React.MouseEvent<HTMLElement>) => {\n      const page: string = event.currentTarget.dataset.page || '1';\n      onChange?.(Number(page));\n    },\n    [onChange],\n  );\n\n  const handleNextClick = React.useCallback(() => {\n    if (onChange && !isLastPage) {\n      onChange(currentPage + 1);\n    }\n  }, [currentPage, isLastPage, onChange]);\n\n  const renderPages = React.useCallback(\n    (page: PaginationPageType) => {\n      switch (page) {\n        case 'start-ellipsis':\n        case 'end-ellipsis':\n          return (\n            <li key={page}>\n              <div\n                className={classNames(\n                  styles['Pagination__page'],\n                  styles['Pagination__page--type-ellipsis'],\n                  pageSizeYClassNames[sizeY],\n                  disabled && styles['Pagination__page--disabled'],\n                )}\n              >\n                ...\n              </div>\n            </li>\n          );\n        default: {\n          const isCurrent = page === currentPage;\n          return (\n            <li key={page}>\n              <Tappable\n                className={classNames(\n                  styles['Pagination__page'],\n                  pageSizeYClassNames[sizeY],\n                  isCurrent && styles['Pagination__page--current'],\n                  disabled && styles['Pagination__page--disabled'],\n                )}\n                activeMode={styles['Pagination__page--state-active']}\n                hoverMode={styles['Pagination__page--state-hover']}\n                hasActive={!isCurrent}\n                hasHover={!isCurrent}\n                focusVisibleMode=\"outside\"\n                disabled={disabled}\n                data-page={page}\n                aria-current={isCurrent ? true : undefined}\n                aria-label={getPageAriaLabel(page, isCurrent)}\n                onClick={handleClick}\n              >\n                {page}\n              </Tappable>\n            </li>\n          );\n        }\n      }\n    },\n    [sizeY, currentPage, disabled, getPageAriaLabel, handleClick],\n  );\n\n  return (\n    <nav\n      className={classNames(styles['Pagination'], className)}\n      role=\"navigation\"\n      aria-label=\"Навигация по страницам\"\n      ref={getRootRef}\n      {...resetProps}\n    >\n      <ul className={styles['Pagination__list']}>\n        <li className={styles['Pagination__prevButtonContainer']}>\n          <Button\n            size=\"l\"\n            before={<Icon24ChevronCompactLeft width={24} />}\n            appearance=\"accent\"\n            mode=\"tertiary\"\n            disabled={isFirstPage || disabled}\n            aria-label={prevButtonAriaLabel}\n            onClick={handlePrevClick}\n          />\n        </li>\n        {pages.map(renderPages)}\n        <li className={styles['Pagination__nextButtonContainer']}>\n          <Button\n            size=\"l\"\n            after={<Icon24ChevronCompactRight width={24} />}\n            appearance=\"accent\"\n            mode=\"tertiary\"\n            disabled={isLastPage || disabled}\n            aria-label={nextButtonAriaLabel}\n            onClick={handleNextClick}\n          />\n        </li>\n      </ul>\n    </nav>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Pagination.js","names":["React","Icon24ChevronCompactLeft","Icon24ChevronCompactRight","classNames","useAdaptivity","usePagination","SizeType","Button","Tappable","pageSizeYClassNames","none","COMPACT","REGULAR","getPageAriaLabelDefault","page","isCurrent","Pagination","currentPage","siblingCount","boundaryCount","totalPages","disabled","getPageAriaLabel","prevButtonAriaLabel","nextButtonAriaLabel","getRootRef","onChange","className","resetProps","sizeY","pages","isFirstPage","isLastPage","handlePrevClick","useCallback","handleClick","event","currentTarget","dataset","Number","handleNextClick","renderPages","undefined","map"],"sources":["../../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24ChevronCompactLeft, Icon24ChevronCompactRight } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { PaginationPageType, usePagination } from '../../hooks/usePagination';\nimport { SizeType } from '../../lib/adaptivity';\nimport type { HasRootRef } from '../../types';\nimport { Button } from '../Button/Button';\nimport { Tappable } from '../Tappable/Tappable';\nimport styles from './Pagination.module.css';\n\nconst pageSizeYClassNames = {\n  none: styles['Pagination__page--sizeY-none'],\n  [SizeType.COMPACT]: styles['Pagination__page--sizeY-compact'],\n  [SizeType.REGULAR]: styles['Pagination__page--sizeY-regular'],\n};\n\nfunction getPageAriaLabelDefault(page: number, isCurrent: boolean): string {\n  return isCurrent ? `${page} страница` : `Перейти на ${page} страницу`;\n}\n\nexport interface PaginationProps\n  extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'>,\n    HasRootRef<HTMLElement> {\n  /**\n   * Текущая страница.\n   */\n  currentPage?: number;\n  /**\n   * Кол-во всегда видимых страниц по краям текущей страницы.\n   */\n  siblingCount?: number;\n  /**\n   * Кол-во всегда видимых страниц в начале и в конце.\n   */\n  boundaryCount?: number;\n  /**\n   * Общее кол-во страниц.\n   */\n  totalPages?: number;\n  /**\n   * Блокировка всех кнопок.\n   */\n  disabled?: boolean;\n  /**\n   * Переопределение `aria-label` для кнопки навигации назад.\n   * По умолчанию используется текст на \"ru_RU\".\n   */\n  prevButtonAriaLabel?: string;\n  /**\n   * Переопределение `aria-label` для кнопки навигации вперёд.\n   * По умолчанию используется текст на \"ru_RU\".\n   */\n  nextButtonAriaLabel?: string;\n  /**\n   * Функция для переопределения и/или локализации `aria-label` атрибута.\n   * По умолчанию используется текст на \"ru_RU\".\n   */\n  getPageAriaLabel?(page: number, isCurrent: boolean): string;\n  onChange?(page: number): void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Pagination\n */\nexport const Pagination = ({\n  currentPage = 1,\n  siblingCount = 1,\n  boundaryCount = 1,\n  totalPages = 1,\n  disabled,\n  getPageAriaLabel = getPageAriaLabelDefault,\n  prevButtonAriaLabel = 'Перейти на предыдущую страницу',\n  nextButtonAriaLabel = 'Перейти на следующую страницу',\n  getRootRef,\n  onChange,\n  className,\n  ...resetProps\n}: PaginationProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const pages = usePagination({\n    currentPage,\n    totalPages,\n    siblingCount,\n    boundaryCount,\n  });\n  const isFirstPage = currentPage === 1;\n  const isLastPage = currentPage === totalPages;\n\n  const handlePrevClick = React.useCallback(() => {\n    if (onChange && !isFirstPage) {\n      onChange(currentPage - 1);\n    }\n  }, [currentPage, isFirstPage, onChange]);\n\n  const handleClick = React.useCallback(\n    (event: React.MouseEvent<HTMLElement>) => {\n      const page: string = event.currentTarget.dataset.page || '1';\n      onChange?.(Number(page));\n    },\n    [onChange],\n  );\n\n  const handleNextClick = React.useCallback(() => {\n    if (onChange && !isLastPage) {\n      onChange(currentPage + 1);\n    }\n  }, [currentPage, isLastPage, onChange]);\n\n  const renderPages = React.useCallback(\n    (page: PaginationPageType) => {\n      switch (page) {\n        case 'start-ellipsis':\n        case 'end-ellipsis':\n          return (\n            <li key={page}>\n              <div\n                className={classNames(\n                  styles['Pagination__page'],\n                  styles['Pagination__page--type-ellipsis'],\n                  pageSizeYClassNames[sizeY],\n                  disabled && styles['Pagination__page--disabled'],\n                )}\n              >\n                &#8230;\n              </div>\n            </li>\n          );\n        default: {\n          const isCurrent = page === currentPage;\n          return (\n            <li key={page}>\n              <Tappable\n                className={classNames(\n                  styles['Pagination__page'],\n                  pageSizeYClassNames[sizeY],\n                  isCurrent && styles['Pagination__page--current'],\n                  disabled && styles['Pagination__page--disabled'],\n                )}\n                activeMode={styles['Pagination__page--state-active']}\n                hoverMode={styles['Pagination__page--state-hover']}\n                hasActive={!isCurrent}\n                hasHover={!isCurrent}\n                focusVisibleMode=\"outside\"\n                disabled={disabled}\n                data-page={page}\n                aria-current={isCurrent ? true : undefined}\n                aria-label={getPageAriaLabel(page, isCurrent)}\n                onClick={handleClick}\n              >\n                {page}\n              </Tappable>\n            </li>\n          );\n        }\n      }\n    },\n    [sizeY, currentPage, disabled, getPageAriaLabel, handleClick],\n  );\n\n  return (\n    <nav\n      className={classNames(styles['Pagination'], className)}\n      role=\"navigation\"\n      aria-label=\"Навигация по страницам\"\n      ref={getRootRef}\n      {...resetProps}\n    >\n      <ul className={styles['Pagination__list']}>\n        <li className={styles['Pagination__prevButtonContainer']}>\n          <Button\n            size=\"l\"\n            before={<Icon24ChevronCompactLeft width={24} />}\n            appearance=\"accent\"\n            mode=\"tertiary\"\n            disabled={isFirstPage || disabled}\n            aria-label={prevButtonAriaLabel}\n            onClick={handlePrevClick}\n          />\n        </li>\n        {pages.map(renderPages)}\n        <li className={styles['Pagination__nextButtonContainer']}>\n          <Button\n            size=\"l\"\n            after={<Icon24ChevronCompactRight width={24} />}\n            appearance=\"accent\"\n            mode=\"tertiary\"\n            disabled={isLastPage || disabled}\n            aria-label={nextButtonAriaLabel}\n            onClick={handleNextClick}\n          />\n        </li>\n      </ul>\n    </nav>\n  );\n};\n"],"mappings":"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"}

package/dist/cssm/components/PanelHeader/PanelHeader.js

@@ -6,6 +6,7 @@ import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';
 import { usePlatform } from '../../hooks/usePlatform';
+import { SizeType } from '../../lib/adaptivity';
 import { Platform } from '../../lib/platform';
 import { useConfigProvider, WebviewType } from '../ConfigProvider/ConfigProviderContext';
 import { FixedLayout } from '../FixedLayout/FixedLayout';
@@ -26,9 +27,8 @@ function getPlatformClassName(platform) {
   }
 }
 var sizeXClassNames = {
-  compact: '',
-  regular: "vkuiPanelHeader--sizeX-regular",
-  none: "vkuiPanelHeader--sizeX-none"
+  none: "vkuiPanelHeader--sizeX-none",
+  regular: "vkuiPanelHeader--sizeX-regular"
 };
 var PanelHeaderIn = function PanelHeaderIn(_ref) {
   var before = _ref.before,
@@ -54,6 +54,7 @@ var PanelHeaderIn = function PanelHeaderIn(_ref) {
   }, children)), /*#__PURE__*/React.createElement("div", {
     className: "vkuiPanelHeader__after"
   }, (webviewType === WebviewType.INTERNAL || isInsideModal) && after)), separator && platform === Platform.VKCOM && /*#__PURE__*/React.createElement(Separator, {
+    className: "vkuiPanelHeader__separator",
     wide: true
   }));
 };
@@ -89,7 +90,7 @@ export var PanelHeader = function PanelHeader(_ref2) {
     adaptiveSizeX = _useAdaptivityConditi.sizeX;
   var isFixed = fixed !== undefined ? fixed : platform !== Platform.VKCOM;
   return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
-    className: classNames("vkuiPanelHeader", getPlatformClassName(platform), transparent && "vkuiPanelHeader--trnsp", shadow && "vkuiPanelHeader--shadow", visor && "vkuiPanelHeader--vis", separator && visor && "vkuiPanelHeader--sep", webviewType === WebviewType.VKAPPS && !isInsideModal && "vkuiPanelHeader--vkapps", !before && "vkuiPanelHeader--no-before", !after && "vkuiPanelHeader--no-after", isFixed && "vkuiPanelHeader--fixed", sizeXClassNames[sizeX], className),
+    className: classNames("vkuiPanelHeader", getPlatformClassName(platform), transparent && "vkuiPanelHeader--trnsp", shadow && "vkuiPanelHeader--shadow", visor && "vkuiPanelHeader--vis", separator && visor && "vkuiPanelHeader--sep", webviewType === WebviewType.VKAPPS && !isInsideModal && "vkuiPanelHeader--vkapps", !before && "vkuiPanelHeader--no-before", !after && "vkuiPanelHeader--no-after", isFixed && "vkuiPanelHeader--fixed", sizeX !== SizeType.COMPACT && sizeXClassNames[sizeX], className),
     ref: isFixed ? getRootRef : getRef
   }), isFixed ? /*#__PURE__*/React.createElement(FixedLayout, {
     className: "vkuiPanelHeader__fixed",