@vkontakte/vkui 5.2.1 → 5.2.2

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

@@ -60,11 +60,12 @@ var ActionSheetItem = function ActionSheetItem(_ref) {
   }
   var isRich = subtitle || meta || selectable;
   var isCentered = !isRich && !before && platform === _platform.Platform.IOS;
-  return /*#__PURE__*/React.createElement(_Tappable.Tappable, (0, _extends2.default)({}, restProps, {
+  return /*#__PURE__*/React.createElement(_Tappable.Tappable, (0, _extends2.default)({
+    Component: Component
+  }, restProps, {
     onClick: selectable ? onClick : onItemClick(onClick, onImmediateClick, Boolean(autoClose)),
     activeMode: platform === _platform.Platform.IOS ? "vkuiActionSheetItem--active" : undefined,
-    className: (0, _vkjs.classNames)("vkuiActionSheetItem", platform === _platform.Platform.IOS && "vkuiActionSheetItem--ios", styles["ActionSheetItem--mode-".concat(mode)], sizeY === _adaptivity.SizeType.COMPACT && "vkuiActionSheetItem--sizeY-compact", isRich && "vkuiActionSheetItem--rich", isDesktop && "vkuiActionSheetItem--desktop", className),
-    Component: Component
+    className: (0, _vkjs.classNames)("vkuiActionSheetItem", platform === _platform.Platform.IOS && "vkuiActionSheetItem--ios", styles["ActionSheetItem--mode-".concat(mode)], sizeY === _adaptivity.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/cjs/components/ActionSheetItem/ActionSheetItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionSheetItem.js","names":["ActionSheetItem","children","autoClose","mode","meta","subtitle","before","selectable","value","name","checked","defaultChecked","onChange","onClick","onImmediateClick","multiline","iconCheckedProp","iconChecked","className","restProps","platform","usePlatform","React","useContext","ActionSheetContext","onItemClick","noop","isDesktop","useAdaptivityWithJSMediaQueries","sizeY","SizeType","COMPACT","Component","href","isRich","isCentered","Platform","IOS","Boolean","undefined","classNames","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":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAA+C;AA+B/C;AACA;AACA;AACA,IAAMA,eAAe,GAAG,SAAlBA,eAAe,OAmBO;EAAA,IAlB1BC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IAAA,iBACTC,IAAI;IAAJA,IAAI,0BAAG,SAAS;IAChBC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IACRC,MAAM,QAANA,MAAM;IACNC,UAAU,QAAVA,UAAU;IACVC,KAAK,QAALA,KAAK;IACLC,IAAI,QAAJA,IAAI;IACJC,OAAO,QAAPA,OAAO;IACPC,cAAc,QAAdA,cAAc;IACdC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACPC,gBAAgB,QAAhBA,gBAAgB;IAAA,sBAChBC,SAAS;IAATA,SAAS,+BAAG,KAAK;IACJC,eAAe,QAA5BC,WAAW;IACXC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAC9B,wBACEC,KAAK,CAACC,UAAU,CAAsCC,sCAAkB,CAAC;IAAA,0CADnEC,WAAW;IAAXA,WAAW,sCAAG;MAAA,OAAMC,UAAI;IAAA;IAAEC,SAAS,qBAATA,SAAS;EAE3C,4BAAkB,IAAAC,gEAA+B,GAAE;IAA3CC,KAAK,yBAALA,KAAK;EAEb,IAAMZ,WAAW,GACfD,eAAe,KACda,KAAK,KAAKC,oBAAQ,CAACC,OAAO,gBAAG,oBAAC,0BAAmB,OAAG,gBAAG,oBAAC,0BAAmB,OAAG,CAAC;EAElF,IAAIC,SAA4B,GAAGb,SAAS,CAACc,IAAI,GAAG,GAAG,GAAG,KAAK;EAE/D,IAAI1B,UAAU,EAAE;IACdyB,SAAS,GAAG,OAAO;EACrB;EAEA,IAAME,MAAM,GAAG7B,QAAQ,IAAID,IAAI,IAAIG,UAAU;EAC7C,IAAM4B,UAAU,GAAG,CAACD,MAAM,IAAI,CAAC5B,MAAM,IAAIc,QAAQ,KAAKgB,kBAAQ,CAACC,GAAG;EAElE,oBACE,oBAAC,kBAAQ,6BACHlB,SAAS;IACb,OAAO,EAAEZ,UAAU,GAAGM,OAAO,GAAGY,WAAW,CAACZ,OAAO,EAAEC,gBAAgB,EAAEwB,OAAO,CAACpC,SAAS,CAAC,CAAE;IAC3F,UAAU,EAAEkB,QAAQ,KAAKgB,kBAAQ,CAACC,GAAG,mCAAuCE,SAAU;IACtF,SAAS,EAAE,IAAAC,gBAAU,yBAEnBpB,QAAQ,KAAKgB,kBAAQ,CAACC,GAAG,8BAAkC,EAC3DI,MAAM,iCAA0BtC,IAAI,EAAG,EACvC0B,KAAK,KAAKC,oBAAQ,CAACC,OAAO,wCAA4C,EACtEG,MAAM,+BAAmC,EACzCP,SAAS,kCAAsC,EAC/CT,SAAS,CACT;IACF,SAAS,EAAEc;EAAU,IAEpB1B,MAAM,iBAAI;IAAK,SAAS;EAAoC,GAAEA,MAAM,CAAO,eAC5E;IACE,SAAS,EAAE,IAAAkC,gBAAU,oCAEnB,CAACzB,SAAS,mCAAuC;EACjD,gBAEF;IACE,SAAS,EAAE,IAAAyB,gBAAU,kCAEnBL,UAAU,mCAAuC;EACjD,gBAEF,oBAAC,UAAI;IACH,MAAM,EAAEhC,IAAI,KAAK,QAAQ,GAAG,GAAG,GAAGoC,SAAU;IAC5C,SAAS;EAAsC,GAE9CtC,QAAQ,CACJ,EACNG,IAAI,iBAAI,oBAAC,UAAI;IAAC,SAAS;EAAkC,GAAEA,IAAI,CAAQ,CACpE,EACLC,QAAQ,iBAAI,oBAAC,gBAAO;IAAC,SAAS;EAAsC,GAAEA,QAAQ,CAAW,CACtF,EACLE,UAAU,iBACT;IAAK,SAAS;EAAmC,gBAC/C;IACE,IAAI,EAAC,OAAO;IACZ,SAAS,8BAAmC;IAC5C,IAAI,EAAEE,IAAK;IACX,KAAK,EAAED,KAAM;IACb,QAAQ,EAAEI,QAAS;IACnB,OAAO,EAAEa,WAAW,CAACC,UAAI,EAAEA,UAAI,EAAEY,OAAO,CAACpC,SAAS,CAAC,CAAE;IACrD,cAAc,EAAES,cAAe;IAC/B,OAAO,EAAED,OAAQ;IACjB,QAAQ,EAAES,SAAS,CAACuB;EAAS,EAC7B,eACF;IAAK,SAAS;EAAoC,GAAEzB,WAAW,CAAO,CAEzE,CACQ;AAEf,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"ActionSheetItem.js","names":["ActionSheetItem","children","autoClose","mode","meta","subtitle","before","selectable","value","name","checked","defaultChecked","onChange","onClick","onImmediateClick","multiline","iconCheckedProp","iconChecked","className","restProps","platform","usePlatform","React","useContext","ActionSheetContext","onItemClick","noop","isDesktop","useAdaptivityWithJSMediaQueries","sizeY","SizeType","COMPACT","Component","href","isRich","isCentered","Platform","IOS","Boolean","undefined","classNames","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/cjs/components/Alert/Alert.js

@@ -27,7 +27,7 @@ var _Footnote = require("../Typography/Footnote/Footnote");
 var _Text = require("../Typography/Text/Text");
 var _Title = require("../Typography/Title/Title");
 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"];
 var AlertHeader = function AlertHeader(props) {
   var platform = (0, _usePlatform.usePlatform)();
@@ -74,15 +74,13 @@ var AlertAction = function AlertAction(_ref) {
     return onItemClick(action);
   }, [onItemClick, action]);
   if (platform === _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 = (0, _objectWithoutProperties2.default)(action, _excluded2);
     return /*#__PURE__*/React.createElement(_Tappable.Tappable, (0, _extends2.default)({
-      Component: restActionProps.href ? 'a' : Component,
+      Component: restActionProps.href ? 'a' : 'button',
       className: (0, _vkjs.classNames)("vkuiAlert__action", styles["Alert__action--mode-".concat(_mode)]),
       onClick: handleItemClick
     }, restActionProps, restProps), title);

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

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","names":["AlertHeader","props","platform","usePlatform","Platform","IOS","AlertText","VKCOM","AlertAction","action","onItemClick","restProps","handleItemClick","React","useCallback","Component","title","actionProp","autoClose","mode","restActionProps","href","classNames","styles","target","Alert","actions","actionsLayout","children","className","style","text","header","onClose","dismissLabel","useAdaptivityWithJSMediaQueries","isDesktop","useWaitTransitionFinish","waitTransitionFinish","useState","closing","setClosing","elementRef","useRef","resolvedActionsLayout","timeout","close","current","e","propertyName","item","useScrollLock","stopPropagation","hasReactNode","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":["AlertHeader","props","platform","usePlatform","Platform","IOS","AlertText","VKCOM","AlertAction","action","onItemClick","restProps","handleItemClick","React","useCallback","title","actionProp","autoClose","mode","restActionProps","href","classNames","styles","Component","target","Alert","actions","actionsLayout","children","className","style","text","header","onClose","dismissLabel","useAdaptivityWithJSMediaQueries","isDesktop","useWaitTransitionFinish","waitTransitionFinish","useState","closing","setClosing","elementRef","useRef","resolvedActionsLayout","timeout","close","current","e","propertyName","item","useScrollLock","stopPropagation","hasReactNode","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/cjs/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/cjs/components/Button/Button.js

@@ -17,7 +17,7 @@ var _adaptivity = require("../../lib/adaptivity");
 var _platform = require("../../lib/platform");
 var _Spinner = require("../Spinner/Spinner");
 var _Tappable = require("../Tappable/Tappable");
-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;
 var sizeYClassNames = (_sizeYClassNames = {
   none: "vkuiButton--sizeY-none"
@@ -40,8 +40,6 @@ 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,
@@ -56,9 +54,9 @@ var Button = function Button(_ref) {
   var platform = (0, _usePlatform.usePlatform)();
   return /*#__PURE__*/React.createElement(_Tappable.Tappable, (0, _extends2.default)({
     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/cjs/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":["sizeYClassNames","none","SizeType","COMPACT","REGULAR","Button","size","mode","appearance","stretched","align","children","before","after","getRootRef","Component","loading","onClick","stopPropagation","className","restProps","hasIcons","Boolean","hasIconOnly","useAdaptivity","sizeY","platform","usePlatform","href","undefined","classNames","styles","Platform","ANDROID","IOS","hasReactNode","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":["sizeYClassNames","none","SizeType","COMPACT","REGULAR","Button","size","mode","appearance","stretched","align","children","before","after","getRootRef","loading","onClick","stopPropagation","className","restProps","hasIcons","Boolean","hasIconOnly","useAdaptivity","sizeY","platform","usePlatform","href","undefined","classNames","styles","Platform","ANDROID","IOS","hasReactNode","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/cjs/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/cjs/components/IconButton/IconButton.js

@@ -17,7 +17,7 @@ var _adaptivity = require("../../lib/adaptivity");
 var _platform = require("../../lib/platform");
 var _warnOnce = require("../../lib/warnOnce");
 var _Tappable = require("../Tappable/Tappable");
-var _excluded = ["children", "Component", "className"];
+var _excluded = ["children", "className"];
 var sizeYClassNames = (0, _defineProperty2.default)({
   none: "vkuiIconButton--sizeY-none"
 }, _adaptivity.SizeType.COMPACT, "vkuiIconButton--sizeY-compact");
@@ -28,8 +28,6 @@ var warn = (0, _warnOnce.warnOnce)('IconButton');
  */
 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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var platform = (0, _usePlatform.usePlatform)();
@@ -44,9 +42,9 @@ var IconButton = function IconButton(_ref) {
   }
   return /*#__PURE__*/React.createElement(_Tappable.Tappable, (0, _extends2.default)({
     activeEffectDelay: 200,
-    activeMode: "background"
+    activeMode: "background",
+    Component: restProps.href ? 'a' : 'button'
   }, restProps, {
-    Component: restProps.href ? 'a' : Component,
     className: (0, _vkjs.classNames)("vkuiIconButton", sizeY !== _adaptivity.SizeType.REGULAR && sizeYClassNames[sizeY], platform === _platform.Platform.IOS && "vkuiIconButton--ios", className)
   }), children);
 };

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

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","names":["sizeYClassNames","none","SizeType","COMPACT","warn","warnOnce","IconButton","children","Component","className","restProps","platform","usePlatform","useAdaptivity","sizeY","process","env","NODE_ENV","isAccessible","COMMON_WARNINGS","a11y","href","classNames","REGULAR","Platform","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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAA+D;AAG/D,IAAMA,eAAe;EACnBC,IAAI;AAAkC,GACrCC,oBAAQ,CAACC,OAAO,kCAClB;AAMD,IAAMC,IAAI,GAAG,IAAAC,kBAAQ,EAAC,YAAY,CAAC;;AAEnC;AACA;AACA;AACO,IAAMC,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,GAAG,IAAAC,wBAAW,GAAE;EAC9B,qBAA2B,IAAAC,6BAAa,GAAE;IAAA,sCAAlCC,KAAK;IAALA,KAAK,qCAAG,MAAM;EAEtB,IAAIC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,EAAE;IAC1C,IAAMC,YAAY,GAAGR,SAAS,CAAC,YAAY,CAAC,IAAIA,SAAS,CAAC,iBAAiB,CAAC;IAE5E,IAAI,CAACQ,YAAY,EAAE;MACjBd,IAAI,CAACe,yBAAe,CAACC,IAAI,CAACV,SAAS,CAACW,IAAI,GAAG,WAAW,GAAG,aAAa,CAAC,EAAE,OAAO,CAAC;IACnF;EACF;EAEA,oBACE,oBAAC,kBAAQ;IACP,iBAAiB,EAAE,GAAI;IACvB,UAAU,EAAC;EAAY,GACnBX,SAAS;IACb,SAAS,EAAEA,SAAS,CAACW,IAAI,GAAG,GAAG,GAAGb,SAAU;IAC5C,SAAS,EAAE,IAAAc,gBAAU,oBAEnBR,KAAK,KAAKZ,oBAAQ,CAACqB,OAAO,IAAIvB,eAAe,CAACc,KAAK,CAAC,EACpDH,QAAQ,KAAKa,kBAAQ,CAACC,GAAG,yBAA6B,EACtDhB,SAAS;EACT,IAEDF,QAAQ,CACA;AAEf,CAAC;AAAC"}
+{"version":3,"file":"IconButton.js","names":["sizeYClassNames","none","SizeType","COMPACT","warn","warnOnce","IconButton","children","className","restProps","platform","usePlatform","useAdaptivity","sizeY","process","env","NODE_ENV","isAccessible","COMMON_WARNINGS","a11y","href","classNames","REGULAR","Platform","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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAA+D;AAG/D,IAAMA,eAAe;EACnBC,IAAI;AAAkC,GACrCC,oBAAQ,CAACC,OAAO,kCAClB;AAMD,IAAMC,IAAI,GAAG,IAAAC,kBAAQ,EAAC,YAAY,CAAC;;AAEnC;AACA;AACA;AACO,IAAMC,UAAU,GAAG,SAAbA,UAAU,OAA+D;EAAA,IAAzDC,QAAQ,QAARA,QAAQ;IAAEC,SAAS,QAATA,SAAS;IAAKC,SAAS;EAC5D,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAC9B,qBAA2B,IAAAC,6BAAa,GAAE;IAAA,sCAAlCC,KAAK;IAALA,KAAK,qCAAG,MAAM;EAEtB,IAAIC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,EAAE;IAC1C,IAAMC,YAAY,GAAGR,SAAS,CAAC,YAAY,CAAC,IAAIA,SAAS,CAAC,iBAAiB,CAAC;IAE5E,IAAI,CAACQ,YAAY,EAAE;MACjBb,IAAI,CAACc,yBAAe,CAACC,IAAI,CAACV,SAAS,CAACW,IAAI,GAAG,WAAW,GAAG,aAAa,CAAC,EAAE,OAAO,CAAC;IACnF;EACF;EAEA,oBACE,oBAAC,kBAAQ;IACP,iBAAiB,EAAE,GAAI;IACvB,UAAU,EAAC,YAAY;IACvB,SAAS,EAAEX,SAAS,CAACW,IAAI,GAAG,GAAG,GAAG;EAAS,GACvCX,SAAS;IACb,SAAS,EAAE,IAAAY,gBAAU,oBAEnBR,KAAK,KAAKX,oBAAQ,CAACoB,OAAO,IAAItB,eAAe,CAACa,KAAK,CAAC,EACpDH,QAAQ,KAAKa,kBAAQ,CAACC,GAAG,yBAA6B,EACtDhB,SAAS;EACT,IAEDD,QAAQ,CACA;AAEf,CAAC;AAAC"}

package/dist/cjs/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/cjs/components/Input/Input.js

@@ -14,7 +14,7 @@ var _vkjs = require("@vkontakte/vkjs");
 var _useAdaptivity2 = require("../../hooks/useAdaptivity");
 var _adaptivity = require("../../lib/adaptivity");
 var _FormField = require("../FormField/FormField");
-var _excluded = ["type", "align", "getRef", "className", "getRootRef", "style", "before", "after", "status"];
+var _excluded = ["type", "align", "getRef", "className", "getRootRef", "style", "before", "after", "status", "mode"];
 var sizeYClassNames = (0, _defineProperty2.default)({
   none: "vkuiInput--sizeY-none"
 }, _adaptivity.SizeType.COMPACT, "vkuiInput--sizeY-compact");
@@ -32,6 +32,7 @@ var Input = function Input(_ref) {
     before = _ref.before,
     after = _ref.after,
     status = _ref.status,
+    mode = _ref.mode,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
     _useAdaptivity$sizeY = _useAdaptivity.sizeY,
@@ -43,6 +44,7 @@ var Input = function Input(_ref) {
     before: before,
     after: after,
     disabled: restProps.disabled,
+    mode: mode,
     status: status
   }, /*#__PURE__*/React.createElement("input", (0, _extends2.default)({}, restProps, {
     type: type,

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

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["sizeYClassNames","none","SizeType","COMPACT","Input","type","align","getRef","className","getRootRef","style","before","after","status","restProps","useAdaptivity","sizeY","classNames","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;AACA;AACA;AACA;AAEA;AAAmE;AAGnE,IAAMA,eAAe;EACnBC,IAAI;AAA6B,GAChCC,oBAAQ,CAACC,OAAO,6BAClB;AASD;AACA;AACA;AACO,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,qBAA2B,IAAAC,6BAAa,GAAE;IAAA,sCAAlCC,KAAK;IAALA,KAAK,qCAAG,MAAM;EAEtB,oBACE,oBAAC,oBAAS;IACR,KAAK,EAAEN,KAAM;IACb,SAAS,EAAE,IAAAO,gBAAU,eAEnBX,KAAK,IAAIY,MAAM,wBAAiBZ,KAAK,EAAG,EACxCU,KAAK,KAAKd,oBAAQ,CAACiB,OAAO,IAAInB,eAAe,CAACgB,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,EAAEE,SAAS,CAACM,QAAS;IAC7B,MAAM,EAAEP;EAAO,gBAEf,wDAAWC,SAAS;IAAE,IAAI,EAAET,IAAK;IAAC,SAAS,iBAAsB;IAAC,GAAG,EAAEE;EAAO,GAAG,CACvE;AAEhB,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"Input.js","names":["sizeYClassNames","none","SizeType","COMPACT","Input","type","align","getRef","className","getRootRef","style","before","after","status","mode","restProps","useAdaptivity","sizeY","classNames","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;AACA;AACA;AACA;AAEA;AAAmE;AAGnE,IAAMA,eAAe;EACnBC,IAAI;AAA6B,GAChCC,oBAAQ,CAACC,OAAO,6BAClB;AASD;AACA;AACA;AACO,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,qBAA2B,IAAAC,6BAAa,GAAE;IAAA,sCAAlCC,KAAK;IAALA,KAAK,qCAAG,MAAM;EAEtB,oBACE,oBAAC,oBAAS;IACR,KAAK,EAAEP,KAAM;IACb,SAAS,EAAE,IAAAQ,gBAAU,eAEnBZ,KAAK,IAAIa,MAAM,wBAAiBb,KAAK,EAAG,EACxCW,KAAK,KAAKf,oBAAQ,CAACkB,OAAO,IAAIpB,eAAe,CAACiB,KAAK,CAAC,EACpDN,MAAM,0BAA8B,EACpCC,KAAK,yBAA6B,EAClCJ,SAAS,CACT;IACF,UAAU,EAAEC,UAAW;IACvB,MAAM,EAAEE,MAAO;IACf,KAAK,EAAEC,KAAM;IACb,QAAQ,EAAEG,SAAS,CAACM,QAAS;IAC7B,IAAI,EAAEP,IAAK;IACX,MAAM,EAAED;EAAO,gBAEf,wDAAWE,SAAS;IAAE,IAAI,EAAEV,IAAK;IAAC,SAAS,iBAAsB;IAAC,GAAG,EAAEE;EAAO,GAAG,CACvE;AAEhB,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;AAAA"}

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

@@ -13,6 +13,7 @@ var _vkjs = require("@vkontakte/vkjs");
 var _useAdaptivityWithJSMediaQueries = require("../../hooks/useAdaptivityWithJSMediaQueries");
 var _useOrientationChange = require("../../hooks/useOrientationChange");
 var _usePlatform = require("../../hooks/usePlatform");
+var _adaptivity = require("../../lib/adaptivity");
 var _getNavId = require("../../lib/getNavId");
 var _platform = require("../../lib/platform");
 var _utils = require("../../lib/utils");
@@ -21,10 +22,6 @@ var _ModalDismissButton = require("../ModalDismissButton/ModalDismissButton");
 var _ModalRootContext = require("../ModalRoot/ModalRootContext");
 var _types = require("../ModalRoot/types");
 var _excluded = ["children", "header", "size", "onOpen", "onOpened", "onClose", "onClosed", "settlingHeight", "dynamicContentHeight", "getModalContentRef", "nav", "id", "hideCloseButton", "className"];
-var sizeXClassNames = {
-  regular: "vkuiModalPage--sizeX-regular",
-  compact: ''
-};
 var sizeClassName = {
   s: "vkuiModalPage--size-s",
   m: "vkuiModalPage--size-m",
@@ -71,7 +68,7 @@ var ModalPage = function ModalPage(_ref) {
     refs = _useModalRegistry.refs;
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, restProps, {
     id: id,
-    className: (0, _vkjs.classNames)("vkuiModalPage", platform === _platform.Platform.IOS && "vkuiModalPage--ios", isDesktop && "vkuiModalPage--desktop", sizeXClassNames[sizeX], typeof size === 'string' && sizeClassName[size], className)
+    className: (0, _vkjs.classNames)("vkuiModalPage", platform === _platform.Platform.IOS && "vkuiModalPage--ios", isDesktop && "vkuiModalPage--desktop", sizeX === _adaptivity.SizeType.REGULAR && "vkuiModalPage--sizeX-regular", typeof size === 'string' && sizeClassName[size], className)
   }), /*#__PURE__*/React.createElement("div", {
     className: "vkuiModalPage__in-wrap",
     style: {

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

@@ -1 +1 @@
-{"version":3,"file":"ModalPage.js","names":["sizeXClassNames","regular","compact","sizeClassName","s","m","l","warn","warnOnce","ModalPage","children","header","size","sizeProp","onOpen","onOpened","onClose","onClosed","settlingHeight","dynamicContentHeight","getModalContentRef","nav","id","hideCloseButton","className","restProps","React","useContext","ModalRootContext","updateModalHeight","platform","usePlatform","orientation","useOrientationChange","useAdaptivityWithJSMediaQueries","sizeX","isDesktop","useEffect","isCloseButtonShown","modalContext","useModalRegistry","getNavId","ModalType","PAGE","refs","classNames","Platform","IOS","maxWidth","undefined","innerElement","headerElement","multiRef","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":["sizeClassName","s","m","l","warn","warnOnce","ModalPage","children","header","size","sizeProp","onOpen","onOpened","onClose","onClosed","settlingHeight","dynamicContentHeight","getModalContentRef","nav","id","hideCloseButton","className","restProps","React","useContext","ModalRootContext","updateModalHeight","platform","usePlatform","orientation","useOrientationChange","useAdaptivityWithJSMediaQueries","sizeX","isDesktop","useEffect","isCloseButtonShown","modalContext","useModalRegistry","getNavId","ModalType","PAGE","refs","classNames","Platform","IOS","SizeType","REGULAR","maxWidth","undefined","innerElement","headerElement","multiRef","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/cjs/components/Pagination/Pagination.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","names":["pageSizeYClassNames","none","SizeType","COMPACT","REGULAR","getPageAriaLabelDefault","page","isCurrent","Pagination","currentPage","siblingCount","boundaryCount","totalPages","disabled","getPageAriaLabel","prevButtonAriaLabel","nextButtonAriaLabel","getRootRef","onChange","className","resetProps","useAdaptivity","sizeY","pages","usePagination","isFirstPage","isLastPage","handlePrevClick","React","useCallback","handleClick","event","currentTarget","dataset","Number","handleNextClick","renderPages","classNames","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":["pageSizeYClassNames","none","SizeType","COMPACT","REGULAR","getPageAriaLabelDefault","page","isCurrent","Pagination","currentPage","siblingCount","boundaryCount","totalPages","disabled","getPageAriaLabel","prevButtonAriaLabel","nextButtonAriaLabel","getRootRef","onChange","className","resetProps","useAdaptivity","sizeY","pages","usePagination","isFirstPage","isLastPage","handlePrevClick","React","useCallback","handleClick","event","currentTarget","dataset","Number","handleNextClick","renderPages","classNames","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":";;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAgD;AAAA;AAGhD,IAAMA,mBAAmB;EACvBC,IAAI;AAAwC,uDAC3CC,oBAAQ,CAACC,OAAO,8FAChBD,oBAAQ,CAACE,OAAO,+DAClB;AAED,SAASC,uBAAuB,CAACC,IAAY,EAAEC,SAAkB,EAAU;EACzE,OAAOA,SAAS,aAAMD,IAAI,2HAA4BA,IAAI,sDAAW;AACvE;AA2CA;AACA;AACA;AACO,IAAME,UAAU,GAAG,SAAbA,UAAU,OAaA;EAAA,4BAZrBC,WAAW;IAAXA,WAAW,iCAAG,CAAC;IAAA,yBACfC,YAAY;IAAZA,YAAY,kCAAG,CAAC;IAAA,0BAChBC,aAAa;IAAbA,aAAa,mCAAG,CAAC;IAAA,uBACjBC,UAAU;IAAVA,UAAU,gCAAG,CAAC;IACdC,QAAQ,QAARA,QAAQ;IAAA,6BACRC,gBAAgB;IAAhBA,gBAAgB,sCAAGT,uBAAuB;IAAA,6BAC1CU,mBAAmB;IAAnBA,mBAAmB,sCAAG,gCAAgC;IAAA,6BACtDC,mBAAmB;IAAnBA,mBAAmB,sCAAG,+BAA+B;IACrDC,UAAU,QAAVA,UAAU;IACVC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,UAAU;EAEb,qBAA2B,IAAAC,6BAAa,GAAE;IAAA,sCAAlCC,KAAK;IAALA,KAAK,qCAAG,MAAM;EAEtB,IAAMC,KAAK,GAAG,IAAAC,4BAAa,EAAC;IAC1Bf,WAAW,EAAXA,WAAW;IACXG,UAAU,EAAVA,UAAU;IACVF,YAAY,EAAZA,YAAY;IACZC,aAAa,EAAbA;EACF,CAAC,CAAC;EACF,IAAMc,WAAW,GAAGhB,WAAW,KAAK,CAAC;EACrC,IAAMiB,UAAU,GAAGjB,WAAW,KAAKG,UAAU;EAE7C,IAAMe,eAAe,GAAGC,KAAK,CAACC,WAAW,CAAC,YAAM;IAC9C,IAAIX,QAAQ,IAAI,CAACO,WAAW,EAAE;MAC5BP,QAAQ,CAACT,WAAW,GAAG,CAAC,CAAC;IAC3B;EACF,CAAC,EAAE,CAACA,WAAW,EAAEgB,WAAW,EAAEP,QAAQ,CAAC,CAAC;EAExC,IAAMY,WAAW,GAAGF,KAAK,CAACC,WAAW,CACnC,UAACE,KAAoC,EAAK;IACxC,IAAMzB,IAAY,GAAGyB,KAAK,CAACC,aAAa,CAACC,OAAO,CAAC3B,IAAI,IAAI,GAAG;IAC5DY,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAGgB,MAAM,CAAC5B,IAAI,CAAC,CAAC;EAC1B,CAAC,EACD,CAACY,QAAQ,CAAC,CACX;EAED,IAAMiB,eAAe,GAAGP,KAAK,CAACC,WAAW,CAAC,YAAM;IAC9C,IAAIX,QAAQ,IAAI,CAACQ,UAAU,EAAE;MAC3BR,QAAQ,CAACT,WAAW,GAAG,CAAC,CAAC;IAC3B;EACF,CAAC,EAAE,CAACA,WAAW,EAAEiB,UAAU,EAAER,QAAQ,CAAC,CAAC;EAEvC,IAAMkB,WAAW,GAAGR,KAAK,CAACC,WAAW,CACnC,UAACvB,IAAwB,EAAK;IAC5B,QAAQA,IAAI;MACV,KAAK,gBAAgB;MACrB,KAAK,cAAc;QACjB,oBACE;UAAI,GAAG,EAAEA;QAAK,gBACZ;UACE,SAAS,EAAE,IAAA+B,gBAAU,iEAGnBrC,mBAAmB,CAACsB,KAAK,CAAC,EAC1BT,QAAQ,oCAAwC;QAChD,GACH,QAED,CAAM,CACH;MAET;QAAS;UACP,IAAMN,UAAS,GAAGD,IAAI,KAAKG,WAAW;UACtC,oBACE;YAAI,GAAG,EAAEH;UAAK,gBACZ,oBAAC,kBAAQ;YACP,SAAS,EAAE,IAAA+B,gBAAU,0BAEnBrC,mBAAmB,CAACsB,KAAK,CAAC,EAC1Bf,UAAS,mCAAuC,EAChDM,QAAQ,oCAAwC,CAChD;YACF,UAAU,sCAA2C;YACrD,SAAS,qCAA0C;YACnD,SAAS,EAAE,CAACN,UAAU;YACtB,QAAQ,EAAE,CAACA,UAAU;YACrB,gBAAgB,EAAC,SAAS;YAC1B,QAAQ,EAAEM,QAAS;YACnB,aAAWP,IAAK;YAChB,gBAAcC,UAAS,GAAG,IAAI,GAAG+B,SAAU;YAC3C,cAAYxB,gBAAgB,CAACR,IAAI,EAAEC,UAAS,CAAE;YAC9C,OAAO,EAAEuB;UAAY,GAEpBxB,IAAI,CACI,CACR;QAET;IAAC;EAEL,CAAC,EACD,CAACgB,KAAK,EAAEb,WAAW,EAAEI,QAAQ,EAAEC,gBAAgB,EAAEgB,WAAW,CAAC,CAC9D;EAED,oBACE;IACE,SAAS,EAAE,IAAAO,gBAAU,oBAAuBlB,SAAS,CAAE;IACvD,IAAI,EAAC,YAAY;IACjB,cAAW,4HAAwB;IACnC,GAAG,EAAEF;EAAW,GACZG,UAAU,gBAEd;IAAI,SAAS;EAA6B,gBACxC;IAAI,SAAS;EAA4C,gBACvD,oBAAC,cAAM;IACL,IAAI,EAAC,GAAG;IACR,MAAM,eAAE,oBAAC,+BAAwB;MAAC,KAAK,EAAE;IAAG,EAAI;IAChD,UAAU,EAAC,QAAQ;IACnB,IAAI,EAAC,UAAU;IACf,QAAQ,EAAEK,WAAW,IAAIZ,QAAS;IAClC,cAAYE,mBAAoB;IAChC,OAAO,EAAEY;EAAgB,EACzB,CACC,EACJJ,KAAK,CAACgB,GAAG,CAACH,WAAW,CAAC,eACvB;IAAI,SAAS;EAA4C,gBACvD,oBAAC,cAAM;IACL,IAAI,EAAC,GAAG;IACR,KAAK,eAAE,oBAAC,gCAAyB;MAAC,KAAK,EAAE;IAAG,EAAI;IAChD,UAAU,EAAC,QAAQ;IACnB,IAAI,EAAC,UAAU;IACf,QAAQ,EAAEV,UAAU,IAAIb,QAAS;IACjC,cAAYG,mBAAoB;IAChC,OAAO,EAAEmB;EAAgB,EACzB,CACC,CACF,CACD;AAEV,CAAC;AAAC"}

package/dist/cjs/components/PanelHeader/PanelHeader.js

@@ -13,6 +13,7 @@ var _vkjs = require("@vkontakte/vkjs");
 var _useAdaptivity2 = require("../../hooks/useAdaptivity");
 var _useAdaptivityConditionalRender = require("../../hooks/useAdaptivityConditionalRender");
 var _usePlatform = require("../../hooks/usePlatform");
+var _adaptivity = require("../../lib/adaptivity");
 var _platform = require("../../lib/platform");
 var _ConfigProviderContext = require("../ConfigProvider/ConfigProviderContext");
 var _FixedLayout = require("../FixedLayout/FixedLayout");
@@ -33,9 +34,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,
@@ -61,6 +61,7 @@ var PanelHeaderIn = function PanelHeaderIn(_ref) {
   }, children)), /*#__PURE__*/React.createElement("div", {
     className: "vkuiPanelHeader__after"
   }, (webviewType === _ConfigProviderContext.WebviewType.INTERNAL || isInsideModal) && after)), separator && platform === _platform.Platform.VKCOM && /*#__PURE__*/React.createElement(_Separator.Separator, {
+    className: "vkuiPanelHeader__separator",
     wide: true
   }));
 };
@@ -96,7 +97,7 @@ var PanelHeader = function PanelHeader(_ref2) {
     adaptiveSizeX = _useAdaptivityConditi.sizeX;
   var isFixed = fixed !== undefined ? fixed : platform !== _platform.Platform.VKCOM;
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, restProps, {
-    className: (0, _vkjs.classNames)("vkuiPanelHeader", getPlatformClassName(platform), transparent && "vkuiPanelHeader--trnsp", shadow && "vkuiPanelHeader--shadow", visor && "vkuiPanelHeader--vis", separator && visor && "vkuiPanelHeader--sep", webviewType === _ConfigProviderContext.WebviewType.VKAPPS && !isInsideModal && "vkuiPanelHeader--vkapps", !before && "vkuiPanelHeader--no-before", !after && "vkuiPanelHeader--no-after", isFixed && "vkuiPanelHeader--fixed", sizeXClassNames[sizeX], className),
+    className: (0, _vkjs.classNames)("vkuiPanelHeader", getPlatformClassName(platform), transparent && "vkuiPanelHeader--trnsp", shadow && "vkuiPanelHeader--shadow", visor && "vkuiPanelHeader--vis", separator && visor && "vkuiPanelHeader--sep", webviewType === _ConfigProviderContext.WebviewType.VKAPPS && !isInsideModal && "vkuiPanelHeader--vkapps", !before && "vkuiPanelHeader--no-before", !after && "vkuiPanelHeader--no-after", isFixed && "vkuiPanelHeader--fixed", sizeX !== _adaptivity.SizeType.COMPACT && sizeXClassNames[sizeX], className),
     ref: isFixed ? getRootRef : getRef
   }), isFixed ? /*#__PURE__*/React.createElement(_FixedLayout.FixedLayout, {
     className: "vkuiPanelHeader__fixed",

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

@@ -1 +1 @@
-{"version":3,"file":"PanelHeader.js","names":["getPlatformClassName","platform","sizeXClassNames","compact","regular","none","PanelHeaderIn","before","after","separator","children","useConfigProvider","webviewType","React","useContext","ModalRootContext","isInsideModal","usePlatform","Platform","VKCOM","WebviewType","INTERNAL","PanelHeader","visor","transparent","shadow","getRef","getRootRef","fixed","className","restProps","useAdaptivity","sizeX","useAdaptivityConditionalRender","adaptiveSizeX","isFixed","undefined","classNames","VKAPPS"],"sources":["../../../../src/components/PanelHeader/PanelHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { useConfigProvider, WebviewType } from '../ConfigProvider/ConfigProviderContext';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport { ModalRootContext } from '../ModalRoot/ModalRootContext';\nimport { Separator } from '../Separator/Separator';\nimport { Spacing } from '../Spacing/Spacing';\nimport { TooltipContainer } from '../Tooltip/TooltipContainer';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './PanelHeader.module.css';\n\nfunction getPlatformClassName(platform: string): string {\n  switch (platform) {\n    case 'ios':\n      return styles['PanelHeader--ios'];\n    case 'vkcom':\n      return styles['PanelHeader--vkcom'];\n    default:\n      return styles['PanelHeader--android'];\n  }\n}\n\nconst sizeXClassNames = {\n  compact: '',\n  regular: styles['PanelHeader--sizeX-regular'],\n  none: styles['PanelHeader--sizeX-none'],\n};\n\nexport interface PanelHeaderProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  before?: React.ReactNode;\n  after?: React.ReactNode;\n  separator?: boolean;\n  transparent?: boolean;\n  shadow?: boolean;\n  /**\n   * Если `false`, то шапка будет нулевой высоты и контент панели \"залезет\" под неё\n   */\n  visor?: boolean;\n  /**\n   * Если `false`, то шапка будет в потоке. По умолчанию `true`, но если платформа vkcom, то по умолчанию `false`.\n   */\n  fixed?: boolean;\n}\n\nconst PanelHeaderIn = ({ before, after, separator, children }: PanelHeaderProps) => {\n  const { webviewType } = useConfigProvider();\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const platform = usePlatform();\n\n  return (\n    <React.Fragment>\n      <TooltipContainer fixed className={styles['PanelHeader__in']}>\n        <div className={styles['PanelHeader__before']}>{before}</div>\n        <div className={styles['PanelHeader__content']}>\n          {platform === Platform.VKCOM ? (\n            <Text weight=\"2\">{children}</Text>\n          ) : (\n            <span className={styles['PanelHeader__content-in']}>{children}</span>\n          )}\n        </div>\n        <div className={styles['PanelHeader__after']}>\n          {(webviewType === WebviewType.INTERNAL || isInsideModal) && after}\n        </div>\n      </TooltipContainer>\n      {separator && platform === Platform.VKCOM && <Separator wide />}\n    </React.Fragment>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeader\n */\nexport const PanelHeader = ({\n  before,\n  children,\n  after,\n  separator = true,\n  visor = true,\n  transparent = false,\n  shadow,\n  getRef,\n  getRootRef,\n  fixed,\n  className,\n  ...restProps\n}: PanelHeaderProps) => {\n  const platform = usePlatform();\n  const { webviewType } = useConfigProvider();\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const { sizeX = 'none' } = useAdaptivity();\n  const { sizeX: adaptiveSizeX } = useAdaptivityConditionalRender();\n  let isFixed = fixed !== undefined ? fixed : platform !== Platform.VKCOM;\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['PanelHeader'],\n        getPlatformClassName(platform),\n        transparent && styles['PanelHeader--trnsp'],\n        shadow && styles['PanelHeader--shadow'],\n        visor && styles['PanelHeader--vis'],\n        separator && visor && styles['PanelHeader--sep'],\n        webviewType === WebviewType.VKAPPS && !isInsideModal && styles['PanelHeader--vkapps'],\n        !before && styles['PanelHeader--no-before'],\n        !after && styles['PanelHeader--no-after'],\n        isFixed && styles['PanelHeader--fixed'],\n        sizeXClassNames[sizeX],\n        className,\n      )}\n      ref={isFixed ? getRootRef : getRef}\n    >\n      {isFixed ? (\n        <FixedLayout className={styles['PanelHeader__fixed']} vertical=\"top\" getRootRef={getRef}>\n          <PanelHeaderIn before={before} after={after} separator={separator}>\n            {children}\n          </PanelHeaderIn>\n        </FixedLayout>\n      ) : (\n        <PanelHeaderIn before={before} after={after} separator={separator}>\n          {children}\n        </PanelHeaderIn>\n      )}\n      {separator && visor && platform !== Platform.VKCOM && (\n        <React.Fragment>\n          {adaptiveSizeX.compact && <Separator className={adaptiveSizeX.compact.className} />}\n          {adaptiveSizeX.regular && (\n            <Spacing className={adaptiveSizeX.regular.className} size={16} />\n          )}\n        </React.Fragment>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"PanelHeader.js","names":["getPlatformClassName","platform","sizeXClassNames","none","regular","PanelHeaderIn","before","after","separator","children","useConfigProvider","webviewType","React","useContext","ModalRootContext","isInsideModal","usePlatform","Platform","VKCOM","WebviewType","INTERNAL","PanelHeader","visor","transparent","shadow","getRef","getRootRef","fixed","className","restProps","useAdaptivity","sizeX","useAdaptivityConditionalRender","adaptiveSizeX","isFixed","undefined","classNames","VKAPPS","SizeType","COMPACT","compact"],"sources":["../../../../src/components/PanelHeader/PanelHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { useConfigProvider, WebviewType } from '../ConfigProvider/ConfigProviderContext';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport { ModalRootContext } from '../ModalRoot/ModalRootContext';\nimport { Separator } from '../Separator/Separator';\nimport { Spacing } from '../Spacing/Spacing';\nimport { TooltipContainer } from '../Tooltip/TooltipContainer';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './PanelHeader.module.css';\n\nfunction getPlatformClassName(platform: string): string {\n  switch (platform) {\n    case 'ios':\n      return styles['PanelHeader--ios'];\n    case 'vkcom':\n      return styles['PanelHeader--vkcom'];\n    default:\n      return styles['PanelHeader--android'];\n  }\n}\n\nconst sizeXClassNames = {\n  none: styles['PanelHeader--sizeX-none'],\n  regular: styles['PanelHeader--sizeX-regular'],\n};\n\nexport interface PanelHeaderProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  before?: React.ReactNode;\n  after?: React.ReactNode;\n  separator?: boolean;\n  transparent?: boolean;\n  shadow?: boolean;\n  /**\n   * Если `false`, то шапка будет нулевой высоты и контент панели \"залезет\" под неё\n   */\n  visor?: boolean;\n  /**\n   * Если `false`, то шапка будет в потоке. По умолчанию `true`, но если платформа vkcom, то по умолчанию `false`.\n   */\n  fixed?: boolean;\n}\n\nconst PanelHeaderIn = ({ before, after, separator, children }: PanelHeaderProps) => {\n  const { webviewType } = useConfigProvider();\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const platform = usePlatform();\n\n  return (\n    <React.Fragment>\n      <TooltipContainer fixed className={styles['PanelHeader__in']}>\n        <div className={styles['PanelHeader__before']}>{before}</div>\n        <div className={styles['PanelHeader__content']}>\n          {platform === Platform.VKCOM ? (\n            <Text weight=\"2\">{children}</Text>\n          ) : (\n            <span className={styles['PanelHeader__content-in']}>{children}</span>\n          )}\n        </div>\n        <div className={styles['PanelHeader__after']}>\n          {(webviewType === WebviewType.INTERNAL || isInsideModal) && after}\n        </div>\n      </TooltipContainer>\n      {separator && platform === Platform.VKCOM && (\n        <Separator className={styles['PanelHeader__separator']} wide />\n      )}\n    </React.Fragment>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeader\n */\nexport const PanelHeader = ({\n  before,\n  children,\n  after,\n  separator = true,\n  visor = true,\n  transparent = false,\n  shadow,\n  getRef,\n  getRootRef,\n  fixed,\n  className,\n  ...restProps\n}: PanelHeaderProps) => {\n  const platform = usePlatform();\n  const { webviewType } = useConfigProvider();\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const { sizeX = 'none' } = useAdaptivity();\n  const { sizeX: adaptiveSizeX } = useAdaptivityConditionalRender();\n  let isFixed = fixed !== undefined ? fixed : platform !== Platform.VKCOM;\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['PanelHeader'],\n        getPlatformClassName(platform),\n        transparent && styles['PanelHeader--trnsp'],\n        shadow && styles['PanelHeader--shadow'],\n        visor && styles['PanelHeader--vis'],\n        separator && visor && styles['PanelHeader--sep'],\n        webviewType === WebviewType.VKAPPS && !isInsideModal && styles['PanelHeader--vkapps'],\n        !before && styles['PanelHeader--no-before'],\n        !after && styles['PanelHeader--no-after'],\n        isFixed && styles['PanelHeader--fixed'],\n        sizeX !== SizeType.COMPACT && sizeXClassNames[sizeX],\n        className,\n      )}\n      ref={isFixed ? getRootRef : getRef}\n    >\n      {isFixed ? (\n        <FixedLayout className={styles['PanelHeader__fixed']} vertical=\"top\" getRootRef={getRef}>\n          <PanelHeaderIn before={before} after={after} separator={separator}>\n            {children}\n          </PanelHeaderIn>\n        </FixedLayout>\n      ) : (\n        <PanelHeaderIn before={before} after={after} separator={separator}>\n          {children}\n        </PanelHeaderIn>\n      )}\n      {separator && visor && platform !== Platform.VKCOM && (\n        <React.Fragment>\n          {adaptiveSizeX.compact && <Separator className={adaptiveSizeX.compact.className} />}\n          {adaptiveSizeX.regular && (\n            <Spacing className={adaptiveSizeX.regular.className} size={16} />\n          )}\n        </React.Fragment>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}