@vkontakte/vkui 6.0.2 → 6.1.0

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

@@ -12,6 +12,7 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
 const _object_spread = require("@swc/helpers/_/_object_spread");
 const _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 const _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _icons = require("@vkontakte/icons");
 const _vkjs = require("@vkontakte/vkjs");
@@ -43,49 +44,79 @@ const Banner = (_param)=>{
     const HeaderTypography = size === 'm' ? _Title.Title : _Headline.Headline;
     const SubheaderTypography = size === 'm' ? _Text.Text : _Subhead.Subhead;
     const IconDismissIOS = mode === 'image' ? _icons.Icon24DismissDark : _icons.Icon24Dismiss;
-    const content = /*#__PURE__*/ _react.createElement(_react.Fragment, null, mode === 'image' && background && /*#__PURE__*/ _react.createElement("div", {
-        "aria-hidden": true,
-        className: "vkuiBanner__bg"
-    }, background), before && /*#__PURE__*/ _react.createElement("div", {
-        className: "vkuiBanner__before"
-    }, before), /*#__PURE__*/ _react.createElement("div", {
-        className: "vkuiBanner__content"
-    }, (0, _vkjs.hasReactNode)(header) && /*#__PURE__*/ _react.createElement(HeaderTypography, {
-        Component: "div",
-        weight: "2",
-        level: size === 'm' ? '2' : '1'
-    }, header), (0, _vkjs.hasReactNode)(subheader) && /*#__PURE__*/ _react.createElement(SubheaderTypography, {
-        Component: "div",
-        className: "vkuiBanner__subheader"
-    }, subheader), (0, _vkjs.hasReactNode)(text) && /*#__PURE__*/ _react.createElement(_Text.Text, {
-        Component: "div",
-        className: "vkuiBanner__text"
-    }, text), (0, _vkjs.hasReactNode)(actions) && _react.Children.count(actions) > 0 && /*#__PURE__*/ _react.createElement("div", {
-        className: "vkuiBanner__actions"
-    }, actions)));
-    return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({
+    const content = /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            mode === 'image' && background && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                "aria-hidden": true,
+                className: "vkuiBanner__bg",
+                children: background
+            }),
+            before && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: "vkuiBanner__before",
+                children: before
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                className: "vkuiBanner__content",
+                children: [
+                    (0, _vkjs.hasReactNode)(header) && /*#__PURE__*/ (0, _jsxruntime.jsx)(HeaderTypography, {
+                        Component: "div",
+                        weight: "2",
+                        level: size === 'm' ? '2' : '1',
+                        children: header
+                    }),
+                    (0, _vkjs.hasReactNode)(subheader) && /*#__PURE__*/ (0, _jsxruntime.jsx)(SubheaderTypography, {
+                        Component: "div",
+                        className: "vkuiBanner__subheader",
+                        children: subheader
+                    }),
+                    (0, _vkjs.hasReactNode)(text) && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.Text, {
+                        Component: "div",
+                        className: "vkuiBanner__text",
+                        children: text
+                    }),
+                    (0, _vkjs.hasReactNode)(actions) && _react.Children.count(actions) > 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: "vkuiBanner__actions",
+                        children: actions
+                    })
+                ]
+            })
+        ]
+    });
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({
         Component: "section"
     }, restProps), {
-        baseClassName: (0, _vkjs.classNames)("vkuiBanner", platform === 'ios' && "vkuiBanner--ios", mode === 'image' && "vkuiBanner--mode-image", size === 'm' && "vkuiBanner--size-m", mode === 'image' && imageTheme === 'dark' && "vkuiBanner--inverted")
-    }), asideMode === 'expand' ? /*#__PURE__*/ _react.createElement(_Tappable.Tappable, {
-        className: "vkuiBanner__in",
-        activeMode: platform === 'ios' ? 'opacity' : 'background',
-        onClick: _vkjs.noop
-    }, content, /*#__PURE__*/ _react.createElement("div", {
-        className: "vkuiBanner__aside"
-    }, /*#__PURE__*/ _react.createElement(_icons.Icon24Chevron, {
-        className: "vkuiBanner__expand"
-    }))) : /*#__PURE__*/ _react.createElement("div", {
-        className: "vkuiBanner__in"
-    }, content, asideMode === 'dismiss' && /*#__PURE__*/ _react.createElement("div", {
-        className: "vkuiBanner__aside"
-    }, /*#__PURE__*/ _react.createElement(_IconButton.IconButton, {
-        label: dismissLabel,
-        className: "vkuiBanner__dismiss",
-        onClick: onDismiss,
-        hoverMode: "opacity",
-        hasActive: false
-    }, platform === 'ios' ? /*#__PURE__*/ _react.createElement(IconDismissIOS, null) : /*#__PURE__*/ _react.createElement(_icons.Icon24Cancel, null)))));
+        baseClassName: (0, _vkjs.classNames)("vkuiBanner", platform === 'ios' && "vkuiBanner--ios", mode === 'image' && "vkuiBanner--mode-image", size === 'm' && "vkuiBanner--size-m", mode === 'image' && imageTheme === 'dark' && "vkuiBanner--inverted"),
+        children: asideMode === 'expand' ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Tappable.Tappable, {
+            className: "vkuiBanner__in",
+            activeMode: platform === 'ios' ? 'opacity' : 'background',
+            onClick: _vkjs.noop,
+            children: [
+                content,
+                /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                    className: "vkuiBanner__aside",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_icons.Icon24Chevron, {
+                        className: "vkuiBanner__expand"
+                    })
+                })
+            ]
+        }) : /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+            className: "vkuiBanner__in",
+            children: [
+                content,
+                asideMode === 'dismiss' && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                    className: "vkuiBanner__aside",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_IconButton.IconButton, {
+                        label: dismissLabel,
+                        className: "vkuiBanner__dismiss",
+                        onClick: onDismiss,
+                        hoverMode: "opacity",
+                        hasActive: false,
+                        children: platform === 'ios' ? /*#__PURE__*/ (0, _jsxruntime.jsx)(IconDismissIOS, {}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_icons.Icon24Cancel, {})
+                    })
+                })
+            ]
+        })
+    }));
 };
 
 //# sourceMappingURL=Banner.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Cancel, Icon24Chevron, Icon24Dismiss, Icon24DismissDark } from '@vkontakte/icons';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { IconButton } from '../IconButton/IconButton';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Banner.module.css';\n\nexport interface BannerProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Тип баннера.\n   */\n  mode?: 'tint' | 'image';\n  size?: 's' | 'm';\n  /**\n   * Тип действия в правой части баннера.\n   *\n   * - `dismiss` – отображается иконка крестика, при клике на неё сработает свойство `onDismiss`.\n   * - `expand` – отображается иконка шеврона, которая подразумевает, что при клике на баннер можно куда-то перейти.\n   */\n  asideMode?: 'dismiss' | 'expand';\n  /**\n   * Срабатывает при клике на иконку крестика при `asideMode=\"dismiss\"`.\n   */\n  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * Текст кнопки закрытия. Делает ее доступной для ассистивных технологий\n   */\n  dismissLabel?: string;\n  /**\n   * Содержимое, отображаемое в левой части баннера.\n   */\n  before?: React.ReactNode;\n  /**\n   * Заголовок.\n   */\n  header?: React.ReactNode;\n  /**\n   * Подзаголовок.\n   */\n  subheader?: React.ReactNode;\n  /**\n   * Текст баннера.\n   */\n  text?: React.ReactNode;\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * - `light` – в качестве фона используется светлое изображение, цвет текста в баннере будет тёмным.\n   * - `dark` – в качестве фона используется тёмное изображение, цвет текста будет светлым.\n   */\n  imageTheme?: 'light' | 'dark';\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * Элемент, который нужно стилизовать цветом и/или фоном. Этот элемент будет растянут на 100% ширины и высоты баннера.\n   */\n  background?: React.ReactNode;\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button).\n   *\n   * - В режиме `tint` или `image` со светлым фоном используйте только с параметрами:\n   *    - `mode=\"primary\"`\n   *    - `mode=\"secondary\"`\n   * - В режиме `image` с тёмным фоном используйте с параметрами:\n   *    - `appearance=\"overlay\"`.\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `gap=\"m\" mode=\"horizontal\" stretched`\n   * - `gap=\"m\" mode=\"vertical\" stretched`\n   */\n  actions?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Banner\n */\nexport const Banner = ({\n  mode = 'tint',\n  imageTheme = 'dark',\n  size = 's',\n  before,\n  asideMode,\n  header,\n  subheader,\n  text,\n  children,\n  background,\n  actions,\n  onDismiss,\n  dismissLabel = 'Скрыть',\n  ...restProps\n}: BannerProps) => {\n  const platform = usePlatform();\n\n  const HeaderTypography = size === 'm' ? Title : Headline;\n  const SubheaderTypography = size === 'm' ? Text : Subhead;\n\n  const IconDismissIOS = mode === 'image' ? Icon24DismissDark : Icon24Dismiss;\n\n  const content = (\n    <>\n      {mode === 'image' && background && (\n        <div aria-hidden className={styles['Banner__bg']}>\n          {background}\n        </div>\n      )}\n\n      {before && <div className={styles['Banner__before']}>{before}</div>}\n\n      <div className={styles['Banner__content']}>\n        {hasReactNode(header) && (\n          <HeaderTypography Component=\"div\" weight=\"2\" level={size === 'm' ? '2' : '1'}>\n            {header}\n          </HeaderTypography>\n        )}\n        {hasReactNode(subheader) && (\n          <SubheaderTypography Component=\"div\" className={styles['Banner__subheader']}>\n            {subheader}\n          </SubheaderTypography>\n        )}\n        {hasReactNode(text) && (\n          <Text Component=\"div\" className={styles['Banner__text']}>\n            {text}\n          </Text>\n        )}\n        {hasReactNode(actions) && React.Children.count(actions) > 0 && (\n          <div className={styles['Banner__actions']}>{actions}</div>\n        )}\n      </div>\n    </>\n  );\n\n  return (\n    <RootComponent\n      Component=\"section\"\n      {...restProps}\n      baseClassName={classNames(\n        styles['Banner'],\n        platform === 'ios' && styles['Banner--ios'],\n        mode === 'image' && styles['Banner--mode-image'],\n        size === 'm' && styles['Banner--size-m'],\n        mode === 'image' && imageTheme === 'dark' && styles['Banner--inverted'],\n      )}\n    >\n      {asideMode === 'expand' ? (\n        <Tappable\n          className={styles['Banner__in']}\n          activeMode={platform === 'ios' ? 'opacity' : 'background'}\n          onClick={noop}\n        >\n          {content}\n\n          <div className={styles['Banner__aside']}>\n            <Icon24Chevron className={styles['Banner__expand']} />\n          </div>\n        </Tappable>\n      ) : (\n        <div className={styles['Banner__in']}>\n          {content}\n\n          {asideMode === 'dismiss' && (\n            <div className={styles['Banner__aside']}>\n              <IconButton\n                label={dismissLabel}\n                className={styles['Banner__dismiss']}\n                onClick={onDismiss}\n                hoverMode=\"opacity\"\n                hasActive={false}\n              >\n                {platform === 'ios' ? <IconDismissIOS /> : <Icon24Cancel />}\n              </IconButton>\n            </div>\n          )}\n        </div>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["Banner","mode","imageTheme","size","before","asideMode","header","subheader","text","children","background","actions","onDismiss","dismissLabel","restProps","platform","usePlatform","HeaderTypography","Title","Headline","SubheaderTypography","Text","Subhead","IconDismissIOS","Icon24DismissDark","Icon24Dismiss","content","div","aria-hidden","className","hasReactNode","Component","weight","level","React","Children","count","RootComponent","baseClassName","classNames","Tappable","activeMode","onClick","noop","Icon24Chevron","IconButton","label","hoverMode","hasActive","Icon24Cancel"],"mappings":";;;;+BAoFaA;;;eAAAA;;;;;;;iEApFU;uBACuD;sBAC/B;6BACnB;4BAED;+BACG;0BACL;0BACA;yBACD;sBACH;uBACC;AAyEf,MAAMA,SAAS;QAAC,EACrBC,OAAO,MAAM,EACbC,aAAa,MAAM,EACnBC,OAAO,GAAG,EACVC,MAAM,EACNC,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,IAAI,EACJC,QAAQ,EACRC,UAAU,EACVC,OAAO,EACPC,SAAS,EACTC,eAAe,QAAQ,EAEX,WADTC;QAbHb;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,WAAWC,IAAAA,wBAAW;IAE5B,MAAMC,mBAAmBd,SAAS,MAAMe,YAAK,GAAGC,kBAAQ;IACxD,MAAMC,sBAAsBjB,SAAS,MAAMkB,UAAI,GAAGC,gBAAO;IAEzD,MAAMC,iBAAiBtB,SAAS,UAAUuB,wBAAiB,GAAGC,oBAAa;IAE3E,MAAMC,wBACJ,4CACGzB,SAAS,WAAWS,4BACnB,qBAACiB;QAAIC,eAAAA;QAAYC,SAAS;OACvBnB,aAIJN,wBAAU,qBAACuB;QAAIE,SAAS;OAA6BzB,uBAEtD,qBAACuB;QAAIE,SAAS;OACXC,IAAAA,kBAAY,EAACxB,yBACZ,qBAACW;QAAiBc,WAAU;QAAMC,QAAO;QAAIC,OAAO9B,SAAS,MAAM,MAAM;OACtEG,SAGJwB,IAAAA,kBAAY,EAACvB,4BACZ,qBAACa;QAAoBW,WAAU;QAAMF,SAAS;OAC3CtB,YAGJuB,IAAAA,kBAAY,EAACtB,uBACZ,qBAACa,UAAI;QAACU,WAAU;QAAMF,SAAS;OAC5BrB,OAGJsB,IAAAA,kBAAY,EAACnB,YAAYuB,OAAMC,QAAQ,CAACC,KAAK,CAACzB,WAAW,mBACxD,qBAACgB;QAAIE,SAAS;OAA8BlB;IAMpD,qBACE,qBAAC0B,4BAAa;QACZN,WAAU;OACNjB;QACJwB,eAAeC,IAAAA,gBAAU,gBAEvBxB,aAAa,4BACbd,SAAS,qCACTE,SAAS,6BACTF,SAAS,WAAWC,eAAe;QAGpCG,cAAc,yBACb,qBAACmC,kBAAQ;QACPX,SAAS;QACTY,YAAY1B,aAAa,QAAQ,YAAY;QAC7C2B,SAASC,UAAI;OAEZjB,uBAED,qBAACC;QAAIE,SAAS;qBACZ,qBAACe,oBAAa;QAACf,SAAS;yBAI5B,qBAACF;QAAIE,SAAS;OACXH,SAEArB,cAAc,2BACb,qBAACsB;QAAIE,SAAS;qBACZ,qBAACgB,sBAAU;QACTC,OAAOjC;QACPgB,SAAS;QACTa,SAAS9B;QACTmC,WAAU;QACVC,WAAW;OAEVjC,aAAa,sBAAQ,qBAACQ,sCAAoB,qBAAC0B,mBAAY;AAQxE"}
+{"version":3,"sources":["../../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Cancel, Icon24Chevron, Icon24Dismiss, Icon24DismissDark } from '@vkontakte/icons';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { IconButton } from '../IconButton/IconButton';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Banner.module.css';\n\nexport interface BannerProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Тип баннера.\n   */\n  mode?: 'tint' | 'image';\n  size?: 's' | 'm';\n  /**\n   * Тип действия в правой части баннера.\n   *\n   * - `dismiss` – отображается иконка крестика, при клике на неё сработает свойство `onDismiss`.\n   * - `expand` – отображается иконка шеврона, которая подразумевает, что при клике на баннер можно куда-то перейти.\n   */\n  asideMode?: 'dismiss' | 'expand';\n  /**\n   * Срабатывает при клике на иконку крестика при `asideMode=\"dismiss\"`.\n   */\n  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * Текст кнопки закрытия. Делает ее доступной для ассистивных технологий\n   */\n  dismissLabel?: string;\n  /**\n   * Содержимое, отображаемое в левой части баннера.\n   */\n  before?: React.ReactNode;\n  /**\n   * Заголовок.\n   */\n  header?: React.ReactNode;\n  /**\n   * Подзаголовок.\n   */\n  subheader?: React.ReactNode;\n  /**\n   * Текст баннера.\n   */\n  text?: React.ReactNode;\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * - `light` – в качестве фона используется светлое изображение, цвет текста в баннере будет тёмным.\n   * - `dark` – в качестве фона используется тёмное изображение, цвет текста будет светлым.\n   */\n  imageTheme?: 'light' | 'dark';\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * Элемент, который нужно стилизовать цветом и/или фоном. Этот элемент будет растянут на 100% ширины и высоты баннера.\n   */\n  background?: React.ReactNode;\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button).\n   *\n   * - В режиме `tint` или `image` со светлым фоном используйте только с параметрами:\n   *    - `mode=\"primary\"`\n   *    - `mode=\"secondary\"`\n   * - В режиме `image` с тёмным фоном используйте с параметрами:\n   *    - `appearance=\"overlay\"`.\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `gap=\"m\" mode=\"horizontal\" stretched`\n   * - `gap=\"m\" mode=\"vertical\" stretched`\n   */\n  actions?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Banner\n */\nexport const Banner = ({\n  mode = 'tint',\n  imageTheme = 'dark',\n  size = 's',\n  before,\n  asideMode,\n  header,\n  subheader,\n  text,\n  children,\n  background,\n  actions,\n  onDismiss,\n  dismissLabel = 'Скрыть',\n  ...restProps\n}: BannerProps) => {\n  const platform = usePlatform();\n\n  const HeaderTypography = size === 'm' ? Title : Headline;\n  const SubheaderTypography = size === 'm' ? Text : Subhead;\n\n  const IconDismissIOS = mode === 'image' ? Icon24DismissDark : Icon24Dismiss;\n\n  const content = (\n    <>\n      {mode === 'image' && background && (\n        <div aria-hidden className={styles['Banner__bg']}>\n          {background}\n        </div>\n      )}\n\n      {before && <div className={styles['Banner__before']}>{before}</div>}\n\n      <div className={styles['Banner__content']}>\n        {hasReactNode(header) && (\n          <HeaderTypography Component=\"div\" weight=\"2\" level={size === 'm' ? '2' : '1'}>\n            {header}\n          </HeaderTypography>\n        )}\n        {hasReactNode(subheader) && (\n          <SubheaderTypography Component=\"div\" className={styles['Banner__subheader']}>\n            {subheader}\n          </SubheaderTypography>\n        )}\n        {hasReactNode(text) && (\n          <Text Component=\"div\" className={styles['Banner__text']}>\n            {text}\n          </Text>\n        )}\n        {hasReactNode(actions) && React.Children.count(actions) > 0 && (\n          <div className={styles['Banner__actions']}>{actions}</div>\n        )}\n      </div>\n    </>\n  );\n\n  return (\n    <RootComponent\n      Component=\"section\"\n      {...restProps}\n      baseClassName={classNames(\n        styles['Banner'],\n        platform === 'ios' && styles['Banner--ios'],\n        mode === 'image' && styles['Banner--mode-image'],\n        size === 'm' && styles['Banner--size-m'],\n        mode === 'image' && imageTheme === 'dark' && styles['Banner--inverted'],\n      )}\n    >\n      {asideMode === 'expand' ? (\n        <Tappable\n          className={styles['Banner__in']}\n          activeMode={platform === 'ios' ? 'opacity' : 'background'}\n          onClick={noop}\n        >\n          {content}\n\n          <div className={styles['Banner__aside']}>\n            <Icon24Chevron className={styles['Banner__expand']} />\n          </div>\n        </Tappable>\n      ) : (\n        <div className={styles['Banner__in']}>\n          {content}\n\n          {asideMode === 'dismiss' && (\n            <div className={styles['Banner__aside']}>\n              <IconButton\n                label={dismissLabel}\n                className={styles['Banner__dismiss']}\n                onClick={onDismiss}\n                hoverMode=\"opacity\"\n                hasActive={false}\n              >\n                {platform === 'ios' ? <IconDismissIOS /> : <Icon24Cancel />}\n              </IconButton>\n            </div>\n          )}\n        </div>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["Banner","mode","imageTheme","size","before","asideMode","header","subheader","text","children","background","actions","onDismiss","dismissLabel","restProps","platform","usePlatform","HeaderTypography","Title","Headline","SubheaderTypography","Text","Subhead","IconDismissIOS","Icon24DismissDark","Icon24Dismiss","content","div","aria-hidden","className","hasReactNode","Component","weight","level","React","Children","count","RootComponent","baseClassName","classNames","Tappable","activeMode","onClick","noop","Icon24Chevron","IconButton","label","hoverMode","hasActive","Icon24Cancel"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAoFaA;;;eAAAA;;;;;;;;iEApFU;uBACuD;sBAC/B;6BACnB;4BAED;+BACG;0BACL;0BACA;yBACD;sBACH;uBACC;AAyEf,MAAMA,SAAS;QAAC,EACrBC,OAAO,MAAM,EACbC,aAAa,MAAM,EACnBC,OAAO,GAAG,EACVC,MAAM,EACNC,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,IAAI,EACJC,QAAQ,EACRC,UAAU,EACVC,OAAO,EACPC,SAAS,EACTC,eAAe,QAAQ,EAEX,WADTC;QAbHb;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,WAAWC,IAAAA,wBAAW;IAE5B,MAAMC,mBAAmBd,SAAS,MAAMe,YAAK,GAAGC,kBAAQ;IACxD,MAAMC,sBAAsBjB,SAAS,MAAMkB,UAAI,GAAGC,gBAAO;IAEzD,MAAMC,iBAAiBtB,SAAS,UAAUuB,wBAAiB,GAAGC,oBAAa;IAE3E,MAAMC,wBACJ;;YACGzB,SAAS,WAAWS,4BACnB,qBAACiB;gBAAIC,aAAW;gBAACC,SAAS;0BACvBnB;;YAIJN,wBAAU,qBAACuB;gBAAIE,SAAS;0BAA6BzB;;0BAEtD,sBAACuB;gBAAIE,SAAS;;oBACXC,IAAAA,kBAAY,EAACxB,yBACZ,qBAACW;wBAAiBc,WAAU;wBAAMC,QAAO;wBAAIC,OAAO9B,SAAS,MAAM,MAAM;kCACtEG;;oBAGJwB,IAAAA,kBAAY,EAACvB,4BACZ,qBAACa;wBAAoBW,WAAU;wBAAMF,SAAS;kCAC3CtB;;oBAGJuB,IAAAA,kBAAY,EAACtB,uBACZ,qBAACa,UAAI;wBAACU,WAAU;wBAAMF,SAAS;kCAC5BrB;;oBAGJsB,IAAAA,kBAAY,EAACnB,YAAYuB,OAAMC,QAAQ,CAACC,KAAK,CAACzB,WAAW,mBACxD,qBAACgB;wBAAIE,SAAS;kCAA8BlB;;;;;;IAMpD,qBACE,qBAAC0B,4BAAa;QACZN,WAAU;OACNjB;QACJwB,eAAeC,IAAAA,gBAAU,gBAEvBxB,aAAa,4BACbd,SAAS,qCACTE,SAAS,6BACTF,SAAS,WAAWC,eAAe;kBAGpCG,cAAc,yBACb,sBAACmC,kBAAQ;YACPX,SAAS;YACTY,YAAY1B,aAAa,QAAQ,YAAY;YAC7C2B,SAASC,UAAI;;gBAEZjB;8BAED,qBAACC;oBAAIE,SAAS;8BACZ,cAAA,qBAACe,oBAAa;wBAACf,SAAS;;;;2BAI5B,sBAACF;YAAIE,SAAS;;gBACXH;gBAEArB,cAAc,2BACb,qBAACsB;oBAAIE,SAAS;8BACZ,cAAA,qBAACgB,sBAAU;wBACTC,OAAOjC;wBACPgB,SAAS;wBACTa,SAAS9B;wBACTmC,WAAU;wBACVC,WAAW;kCAEVjC,aAAa,sBAAQ,qBAACQ,oCAAoB,qBAAC0B,mBAAY;;;;;;AAQxE"}

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

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { BaseGalleryProps } from './types';
-export declare const BaseGallery: ({ bullets, getRootRef, children, slideWidth, slideIndex, dragDisabled, onDragStart, onDragEnd, onChange, onPrevClick, onNextClick, align, showArrows, getRef, arrowSize, ...restProps }: BaseGalleryProps) => React.JSX.Element;
+export declare const BaseGallery: ({ bullets, getRootRef, children, slideWidth, slideIndex, dragDisabled, onDragStart, onDragEnd, onChange, onPrevClick, onNextClick, align, showArrows, getRef, arrowSize, ...restProps }: BaseGalleryProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=BaseGallery.d.ts.map

package/dist/cjs/components/BaseGallery/BaseGallery.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseGallery.d.ts","sourceRoot":"","sources":["../../../../src/components/BaseGallery/BaseGallery.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,EAAE,gBAAgB,EAAkD,MAAM,SAAS,CAAC;AA2B3F,eAAO,MAAM,WAAW,4LAiBrB,gBAAgB,sBA0UlB,CAAC"}
+{"version":3,"file":"BaseGallery.d.ts","sourceRoot":"","sources":["../../../../src/components/BaseGallery/BaseGallery.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,gBAAgB,EAAkD,MAAM,SAAS,CAAC;AA2B3F,eAAO,MAAM,WAAW,4LAiBrB,gBAAgB,4CA0UlB,CAAC"}

package/dist/cjs/components/BaseGallery/BaseGallery.js

@@ -12,6 +12,7 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
 const _object_spread = require("@swc/helpers/_/_object_spread");
 const _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 const _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _vkjs = require("@vkontakte/vkjs");
 const _useAdaptivityHasPointer = require("../../hooks/useAdaptivityHasPointer");
@@ -279,42 +280,50 @@ const BaseGallery = (_param)=>{
     const canSlideRight = !layoutState.current.isFullyVisible && // we can't move right when gallery layer fully scrolled right, if gallery aligned by left side
     (align === 'left' && layoutState.current.containerWidth - shiftState.shiftX < ((_layoutState_current_layerWidth = layoutState.current.layerWidth) !== null && _layoutState_current_layerWidth !== void 0 ? _layoutState_current_layerWidth : 0) || // otherwise we need to check current slide index (align = right or align = center)
     align !== 'left' && slideIndex < layoutState.current.slides.length - 1);
-    return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, restProps), {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, restProps), {
         baseClassName: (0, _vkjs.classNames)("vkuiBaseGallery", align === 'center' && "vkuiBaseGallery--align-center", slideWidth === 'custom' && "vkuiBaseGallery--custom-width", isDraggable && "vkuiBaseGallery--draggable"),
-        getRootRef: rootRef
-    }), /*#__PURE__*/ _react.createElement(_Touch.Touch, {
-        className: "vkuiBaseGallery__viewport",
-        onStartX: onStart,
-        onMoveX: onMoveX,
-        onEnd: onEnd,
-        style: {
-            width: slideWidth === 'custom' ? '100%' : slideWidth
-        },
-        getRootRef: viewportRef,
-        noSlideClick: true
-    }, /*#__PURE__*/ _react.createElement("div", {
-        className: "vkuiBaseGallery__layer",
-        style: layerStyle
-    }, _react.Children.map(children, (item, i)=>/*#__PURE__*/ _react.createElement("div", {
-            className: "vkuiBaseGallery__slide",
-            key: `slide-${i}`,
-            ref: (el)=>setSlideRef(el, i)
-        }, item)))), bullets && /*#__PURE__*/ _react.createElement("div", {
-        "aria-hidden": true,
-        className: (0, _vkjs.classNames)("vkuiBaseGallery__bullets", stylesBullets[bullets])
-    }, _react.Children.map(children, (_item, index)=>/*#__PURE__*/ _react.createElement("div", {
-            className: (0, _vkjs.classNames)("vkuiBaseGallery__bullet", index === slideIndex && "vkuiBaseGallery__bullet--active"),
-            key: index
-        }))), showArrows && hasPointer && canSlideLeft && /*#__PURE__*/ _react.createElement(_ScrollArrow.ScrollArrow, {
-        className: "vkuiBaseGallery__arrow",
-        direction: "left",
-        onClick: slideLeft,
-        size: arrowSize
-    }), showArrows && hasPointer && canSlideRight && /*#__PURE__*/ _react.createElement(_ScrollArrow.ScrollArrow, {
-        className: "vkuiBaseGallery__arrow",
-        direction: "right",
-        onClick: slideRight,
-        size: arrowSize
+        getRootRef: rootRef,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Touch.Touch, {
+                className: "vkuiBaseGallery__viewport",
+                onStartX: onStart,
+                onMoveX: onMoveX,
+                onEnd: onEnd,
+                style: {
+                    width: slideWidth === 'custom' ? '100%' : slideWidth
+                },
+                getRootRef: viewportRef,
+                noSlideClick: true,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                    className: "vkuiBaseGallery__layer",
+                    style: layerStyle,
+                    children: _react.Children.map(children, (item, i)=>/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                            className: "vkuiBaseGallery__slide",
+                            ref: (el)=>setSlideRef(el, i),
+                            children: item
+                        }, `slide-${i}`))
+                })
+            }),
+            bullets && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                "aria-hidden": true,
+                className: (0, _vkjs.classNames)("vkuiBaseGallery__bullets", stylesBullets[bullets]),
+                children: _react.Children.map(children, (_item, index)=>/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: (0, _vkjs.classNames)("vkuiBaseGallery__bullet", index === slideIndex && "vkuiBaseGallery__bullet--active")
+                    }, index))
+            }),
+            showArrows && hasPointer && canSlideLeft && /*#__PURE__*/ (0, _jsxruntime.jsx)(_ScrollArrow.ScrollArrow, {
+                className: "vkuiBaseGallery__arrow",
+                direction: "left",
+                onClick: slideLeft,
+                size: arrowSize
+            }),
+            showArrows && hasPointer && canSlideRight && /*#__PURE__*/ (0, _jsxruntime.jsx)(_ScrollArrow.ScrollArrow, {
+                className: "vkuiBaseGallery__arrow",
+                direction: "right",
+                onClick: slideRight,
+                size: arrowSize
+            })
+        ]
     }));
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/BaseGallery/BaseGallery.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { ScrollArrow } from '../ScrollArrow/ScrollArrow';\nimport { Touch, TouchEvent } from '../Touch/Touch';\nimport { calcMax, calcMin } from './helpers';\nimport { BaseGalleryProps, GallerySlidesState, LayoutState, ShiftingState } from './types';\nimport styles from './BaseGallery.module.css';\n\nconst ANIMATION_DURATION = 0.24;\n\nconst LAYOUT_DEFAULT_STATE = {\n  containerWidth: 0,\n  viewportOffsetWidth: 0,\n  layerWidth: 0,\n  min: 0,\n  max: 0,\n  slides: [],\n  isFullyVisible: true,\n};\n\nconst SHIFT_DEFAULT_STATE = {\n  animation: undefined,\n  shiftX: 0,\n  dragging: false,\n  deltaX: 0,\n  indent: 0,\n};\n\nconst stylesBullets = {\n  dark: styles['BaseGallery__bullets--dark'],\n  light: styles['BaseGallery__bullets--light'],\n};\nexport const BaseGallery = ({\n  bullets = false,\n  getRootRef,\n  children,\n  slideWidth = '100%',\n  slideIndex = 0,\n  dragDisabled = false,\n  onDragStart,\n  onDragEnd,\n  onChange,\n  onPrevClick,\n  onNextClick,\n  align = 'left',\n  showArrows,\n  getRef,\n  arrowSize = 'l',\n  ...restProps\n}: BaseGalleryProps) => {\n  const slidesStore = React.useRef<Record<string, HTMLDivElement | null>>({});\n  const layoutState = React.useRef<LayoutState>(LAYOUT_DEFAULT_STATE);\n  const [shiftState, setShiftState] = React.useState<ShiftingState>(SHIFT_DEFAULT_STATE);\n\n  const rootRef = useExternRef(getRootRef);\n  const viewportRef = useExternRef(getRef);\n\n  const { window } = useDOM();\n  const hasPointer = useAdaptivityHasPointer();\n\n  const isCenterWithCustomWidth = slideWidth === 'custom' && align === 'center';\n\n  const validateIndent = (value: number) => {\n    const localMax = layoutState.current.max ?? 0;\n    const localMin = layoutState.current.min ?? 0;\n\n    if (value < localMin) {\n      return localMin;\n    } else if (value > localMax) {\n      return localMax;\n    }\n\n    return value;\n  };\n\n  /*\n   * Считает отступ слоя галереи\n   */\n  const calculateIndent = (targetIndex: number) => {\n    if (layoutState.current.isFullyVisible) {\n      return 0;\n    }\n\n    const targetSlide = layoutState.current.slides?.length\n      ? layoutState.current.slides[targetIndex]\n      : null;\n\n    if (targetSlide) {\n      const { coordX, width } = targetSlide;\n\n      if (isCenterWithCustomWidth) {\n        const viewportWidth = layoutState.current.viewportOffsetWidth ?? 0;\n        return viewportWidth / 2 - coordX - width / 2;\n      }\n\n      return validateIndent(-1 * coordX);\n    }\n\n    return 0;\n  };\n\n  /*\n   * Считает отступ слоя галереи во время драга\n   */\n  const calculateDragIndent = () => {\n    const localMax = layoutState.current.max ?? 0;\n    const localMin = layoutState.current.min ?? 0;\n    const indent = shiftState.shiftX + shiftState.deltaX;\n\n    if (indent > localMax) {\n      return localMax + Number((indent - localMax) / 3);\n    } else if (indent < localMin) {\n      return localMin + Number((indent - localMin) / 3);\n    }\n\n    return indent;\n  };\n\n  const initializeSlides = (options: { animation?: boolean } = {}) => {\n    const localSlides =\n      React.Children.map(children, (_item: React.ReactNode, i: number): GallerySlidesState => {\n        const elem = slidesStore.current[`slide-${i}`];\n        return {\n          coordX: elem?.offsetLeft ?? 0,\n          width: elem?.offsetWidth ?? 0,\n        };\n      }) ?? [];\n\n    const localContainerWidth = rootRef.current?.offsetWidth ?? 0;\n    const localViewportOffsetWidth = viewportRef.current?.offsetWidth ?? 0;\n    const localLayerWidth = localSlides.reduce(\n      (val: number, slide: GallerySlidesState) => slide.width + val,\n      0,\n    );\n    const adjustShiftX =\n      localSlides.length <= layoutState.current.slides.length ||\n      layoutState.current.slides[slideIndex]?.coordX !== localSlides[slideIndex]?.coordX;\n\n    layoutState.current = {\n      containerWidth: localContainerWidth,\n      viewportOffsetWidth: localViewportOffsetWidth,\n      layerWidth: localLayerWidth,\n      max: calcMax({\n        slides: localSlides,\n        viewportOffsetWidth: localViewportOffsetWidth,\n        isCenterWithCustomWidth,\n      }),\n      min: calcMin({\n        containerWidth: localContainerWidth,\n        layerWidth: localLayerWidth,\n        slides: localSlides,\n        viewportOffsetWidth: localViewportOffsetWidth,\n        isCenterWithCustomWidth,\n        align,\n      }),\n      slides: localSlides,\n      isFullyVisible: localLayerWidth <= localContainerWidth,\n    };\n\n    setShiftState((prevState) => ({\n      ...prevState,\n      shiftX: adjustShiftX ? calculateIndent(slideIndex) : prevState.shiftX,\n      animation: options.animation ?? prevState.shiftX === validateIndent(prevState.shiftX),\n    }));\n  };\n\n  const onResize = () => {\n    if (shiftState.animation !== undefined) {\n      initializeSlides({ animation: false });\n    }\n  };\n\n  useGlobalEventListener(window, 'resize', onResize);\n\n  useIsomorphicLayoutEffect(() => {\n    initializeSlides({ animation: false });\n  }, [children, align, slideWidth]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (shiftState.animation !== undefined) {\n      setShiftState((prevState) => ({\n        ...prevState,\n        animation: true,\n        deltaX: 0,\n        shiftX: calculateIndent(slideIndex ?? 0),\n      }));\n    }\n  }, [slideIndex]);\n\n  const slideLeft = (event: React.MouseEvent) => {\n    onChange?.(slideIndex - 1);\n    onPrevClick?.(event);\n  };\n\n  const slideRight = (event: React.MouseEvent) => {\n    onChange?.(slideIndex + 1);\n    onNextClick?.(event);\n  };\n\n  /*\n   * Получает индекс слайда, к которому будет осуществлен переход\n   */\n  const getTarget = (e: TouchEvent) => {\n    const expectDeltaX = (shiftState.deltaX / e.duration) * 240 * 0.6;\n    const shift =\n      shiftState.shiftX + shiftState.deltaX + expectDeltaX - (layoutState.current.max ?? 0);\n    const direction = shiftState.deltaX < 0 ? 1 : -1;\n\n    // Находим ближайшую границу слайда к текущему отступу\n    let targetIndex = layoutState.current.slides.reduce(\n      (val: number, item: GallerySlidesState, index: number) => {\n        const previousValue = Math.abs(layoutState.current.slides[val].coordX + shift);\n        const currentValue = Math.abs(item.coordX + shift);\n\n        return previousValue < currentValue ? val : index;\n      },\n      slideIndex,\n    );\n\n    if (targetIndex === slideIndex) {\n      let targetSlide = slideIndex + direction;\n\n      if (targetSlide >= 0 && targetSlide < layoutState.current.slides.length) {\n        if (Math.abs(shiftState.deltaX) > layoutState.current.slides[targetSlide].width * 0.05) {\n          targetIndex = targetSlide;\n        }\n      }\n    }\n\n    return targetIndex;\n  };\n\n  const isDraggable = !dragDisabled && !layoutState.current.isFullyVisible;\n\n  const onStart = (e: TouchEvent) => {\n    e.originalEvent.stopPropagation();\n    if (isDraggable) {\n      onDragStart?.(e);\n      setShiftState((prevState) => ({ ...prevState, animation: false }));\n    }\n  };\n\n  const onMoveX = (e: TouchEvent) => {\n    if (isDraggable) {\n      e.originalEvent.preventDefault();\n\n      if (e.isSlideX) {\n        if (shiftState.deltaX !== e.shiftX) {\n          setShiftState((prevState) => ({\n            ...prevState,\n            deltaX: e.shiftX,\n            dragging: e.isSlideX,\n          }));\n        }\n      }\n    }\n  };\n\n  const onEnd = (e: TouchEvent) => {\n    if (isDraggable) {\n      const targetIndex = e.isSlide ? getTarget(e) : slideIndex ?? 0;\n      onDragEnd?.(e, targetIndex);\n\n      const nextShiftState: Partial<ShiftingState> = {\n        animation: true,\n        dragging: false,\n        deltaX: 0,\n      };\n\n      const shiftXStick = calculateDragIndent();\n      if (targetIndex !== slideIndex) {\n        // Сохраняем сдвиг слайда в том положении, в каком его оставили после драга (fix issue #2185)\n        nextShiftState.shiftX = shiftXStick;\n      }\n\n      setShiftState((prevState) => ({ ...prevState, ...nextShiftState }));\n      if (targetIndex !== slideIndex) {\n        onChange?.(targetIndex);\n      }\n    }\n  };\n\n  const indent = shiftState.dragging ? calculateDragIndent() : shiftState.shiftX;\n\n  const layerStyle = {\n    WebkitTransform: `translateX(${indent}px)`,\n    transform: `translateX(${indent}px)`,\n    WebkitTransition: shiftState.animation\n      ? `-webkit-transform ${ANIMATION_DURATION}s cubic-bezier(.1, 0, .25, 1)`\n      : 'none',\n    transition: shiftState.animation\n      ? `transform ${ANIMATION_DURATION}s cubic-bezier(.1, 0, .25, 1)`\n      : 'none',\n  };\n\n  const setSlideRef = (slideRef: HTMLDivElement | null, slideIndex: number) => {\n    slidesStore.current[`slide-${slideIndex}`] = slideRef;\n  };\n\n  // shiftX is negative number <= 0, we can swipe back only if it is < 0\n  const canSlideLeft = !layoutState.current.isFullyVisible && shiftState.shiftX < 0;\n\n  const canSlideRight =\n    !layoutState.current.isFullyVisible &&\n    // we can't move right when gallery layer fully scrolled right, if gallery aligned by left side\n    ((align === 'left' &&\n      layoutState.current.containerWidth - shiftState.shiftX <\n        (layoutState.current.layerWidth ?? 0)) ||\n      // otherwise we need to check current slide index (align = right or align = center)\n      (align !== 'left' && slideIndex < layoutState.current.slides.length - 1));\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['BaseGallery'],\n        align === 'center' && styles['BaseGallery--align-center'],\n        slideWidth === 'custom' && styles['BaseGallery--custom-width'],\n        isDraggable && styles['BaseGallery--draggable'],\n      )}\n      getRootRef={rootRef}\n    >\n      <Touch\n        className={styles['BaseGallery__viewport']}\n        onStartX={onStart}\n        onMoveX={onMoveX}\n        onEnd={onEnd}\n        style={{ width: slideWidth === 'custom' ? '100%' : slideWidth }}\n        getRootRef={viewportRef}\n        noSlideClick\n      >\n        <div className={styles['BaseGallery__layer']} style={layerStyle}>\n          {React.Children.map(children, (item: React.ReactNode, i: number) => (\n            <div\n              className={styles['BaseGallery__slide']}\n              key={`slide-${i}`}\n              ref={(el) => setSlideRef(el, i)}\n            >\n              {item}\n            </div>\n          ))}\n        </div>\n      </Touch>\n\n      {bullets && (\n        <div\n          aria-hidden\n          className={classNames(styles['BaseGallery__bullets'], stylesBullets[bullets])}\n        >\n          {React.Children.map(children, (_item: React.ReactNode, index: number) => (\n            <div\n              className={classNames(\n                styles['BaseGallery__bullet'],\n                index === slideIndex && styles['BaseGallery__bullet--active'],\n              )}\n              key={index}\n            />\n          ))}\n        </div>\n      )}\n\n      {showArrows && hasPointer && canSlideLeft && (\n        <ScrollArrow\n          className={styles['BaseGallery__arrow']}\n          direction=\"left\"\n          onClick={slideLeft}\n          size={arrowSize}\n        />\n      )}\n      {showArrows && hasPointer && canSlideRight && (\n        <ScrollArrow\n          className={styles['BaseGallery__arrow']}\n          direction=\"right\"\n          onClick={slideRight}\n          size={arrowSize}\n        />\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["BaseGallery","ANIMATION_DURATION","LAYOUT_DEFAULT_STATE","containerWidth","viewportOffsetWidth","layerWidth","min","max","slides","isFullyVisible","SHIFT_DEFAULT_STATE","animation","undefined","shiftX","dragging","deltaX","indent","stylesBullets","dark","light","bullets","getRootRef","children","slideWidth","slideIndex","dragDisabled","onDragStart","onDragEnd","onChange","onPrevClick","onNextClick","align","showArrows","getRef","arrowSize","restProps","slidesStore","React","useRef","layoutState","shiftState","setShiftState","useState","rootRef","useExternRef","viewportRef","window","useDOM","hasPointer","useAdaptivityHasPointer","isCenterWithCustomWidth","validateIndent","value","localMax","current","localMin","calculateIndent","targetIndex","targetSlide","length","coordX","width","viewportWidth","calculateDragIndent","Number","initializeSlides","options","localSlides","Children","map","_item","i","elem","offsetLeft","offsetWidth","localContainerWidth","localViewportOffsetWidth","localLayerWidth","reduce","val","slide","adjustShiftX","calcMax","calcMin","prevState","onResize","useGlobalEventListener","useIsomorphicLayoutEffect","slideLeft","event","slideRight","getTarget","e","expectDeltaX","duration","shift","direction","item","index","previousValue","Math","abs","currentValue","isDraggable","onStart","originalEvent","stopPropagation","onMoveX","preventDefault","isSlideX","onEnd","isSlide","nextShiftState","shiftXStick","layerStyle","WebkitTransform","transform","WebkitTransition","transition","setSlideRef","slideRef","canSlideLeft","canSlideRight","RootComponent","baseClassName","classNames","Touch","className","onStartX","style","noSlideClick","div","key","ref","el","aria-hidden","ScrollArrow","onClick","size"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/BaseGallery/BaseGallery.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { ScrollArrow } from '../ScrollArrow/ScrollArrow';\nimport { Touch, TouchEvent } from '../Touch/Touch';\nimport { calcMax, calcMin } from './helpers';\nimport { BaseGalleryProps, GallerySlidesState, LayoutState, ShiftingState } from './types';\nimport styles from './BaseGallery.module.css';\n\nconst ANIMATION_DURATION = 0.24;\n\nconst LAYOUT_DEFAULT_STATE = {\n  containerWidth: 0,\n  viewportOffsetWidth: 0,\n  layerWidth: 0,\n  min: 0,\n  max: 0,\n  slides: [],\n  isFullyVisible: true,\n};\n\nconst SHIFT_DEFAULT_STATE = {\n  animation: undefined,\n  shiftX: 0,\n  dragging: false,\n  deltaX: 0,\n  indent: 0,\n};\n\nconst stylesBullets = {\n  dark: styles['BaseGallery__bullets--dark'],\n  light: styles['BaseGallery__bullets--light'],\n};\nexport const BaseGallery = ({\n  bullets = false,\n  getRootRef,\n  children,\n  slideWidth = '100%',\n  slideIndex = 0,\n  dragDisabled = false,\n  onDragStart,\n  onDragEnd,\n  onChange,\n  onPrevClick,\n  onNextClick,\n  align = 'left',\n  showArrows,\n  getRef,\n  arrowSize = 'l',\n  ...restProps\n}: BaseGalleryProps) => {\n  const slidesStore = React.useRef<Record<string, HTMLDivElement | null>>({});\n  const layoutState = React.useRef<LayoutState>(LAYOUT_DEFAULT_STATE);\n  const [shiftState, setShiftState] = React.useState<ShiftingState>(SHIFT_DEFAULT_STATE);\n\n  const rootRef = useExternRef(getRootRef);\n  const viewportRef = useExternRef(getRef);\n\n  const { window } = useDOM();\n  const hasPointer = useAdaptivityHasPointer();\n\n  const isCenterWithCustomWidth = slideWidth === 'custom' && align === 'center';\n\n  const validateIndent = (value: number) => {\n    const localMax = layoutState.current.max ?? 0;\n    const localMin = layoutState.current.min ?? 0;\n\n    if (value < localMin) {\n      return localMin;\n    } else if (value > localMax) {\n      return localMax;\n    }\n\n    return value;\n  };\n\n  /*\n   * Считает отступ слоя галереи\n   */\n  const calculateIndent = (targetIndex: number) => {\n    if (layoutState.current.isFullyVisible) {\n      return 0;\n    }\n\n    const targetSlide = layoutState.current.slides?.length\n      ? layoutState.current.slides[targetIndex]\n      : null;\n\n    if (targetSlide) {\n      const { coordX, width } = targetSlide;\n\n      if (isCenterWithCustomWidth) {\n        const viewportWidth = layoutState.current.viewportOffsetWidth ?? 0;\n        return viewportWidth / 2 - coordX - width / 2;\n      }\n\n      return validateIndent(-1 * coordX);\n    }\n\n    return 0;\n  };\n\n  /*\n   * Считает отступ слоя галереи во время драга\n   */\n  const calculateDragIndent = () => {\n    const localMax = layoutState.current.max ?? 0;\n    const localMin = layoutState.current.min ?? 0;\n    const indent = shiftState.shiftX + shiftState.deltaX;\n\n    if (indent > localMax) {\n      return localMax + Number((indent - localMax) / 3);\n    } else if (indent < localMin) {\n      return localMin + Number((indent - localMin) / 3);\n    }\n\n    return indent;\n  };\n\n  const initializeSlides = (options: { animation?: boolean } = {}) => {\n    const localSlides =\n      React.Children.map(children, (_item: React.ReactNode, i: number): GallerySlidesState => {\n        const elem = slidesStore.current[`slide-${i}`];\n        return {\n          coordX: elem?.offsetLeft ?? 0,\n          width: elem?.offsetWidth ?? 0,\n        };\n      }) ?? [];\n\n    const localContainerWidth = rootRef.current?.offsetWidth ?? 0;\n    const localViewportOffsetWidth = viewportRef.current?.offsetWidth ?? 0;\n    const localLayerWidth = localSlides.reduce(\n      (val: number, slide: GallerySlidesState) => slide.width + val,\n      0,\n    );\n    const adjustShiftX =\n      localSlides.length <= layoutState.current.slides.length ||\n      layoutState.current.slides[slideIndex]?.coordX !== localSlides[slideIndex]?.coordX;\n\n    layoutState.current = {\n      containerWidth: localContainerWidth,\n      viewportOffsetWidth: localViewportOffsetWidth,\n      layerWidth: localLayerWidth,\n      max: calcMax({\n        slides: localSlides,\n        viewportOffsetWidth: localViewportOffsetWidth,\n        isCenterWithCustomWidth,\n      }),\n      min: calcMin({\n        containerWidth: localContainerWidth,\n        layerWidth: localLayerWidth,\n        slides: localSlides,\n        viewportOffsetWidth: localViewportOffsetWidth,\n        isCenterWithCustomWidth,\n        align,\n      }),\n      slides: localSlides,\n      isFullyVisible: localLayerWidth <= localContainerWidth,\n    };\n\n    setShiftState((prevState) => ({\n      ...prevState,\n      shiftX: adjustShiftX ? calculateIndent(slideIndex) : prevState.shiftX,\n      animation: options.animation ?? prevState.shiftX === validateIndent(prevState.shiftX),\n    }));\n  };\n\n  const onResize = () => {\n    if (shiftState.animation !== undefined) {\n      initializeSlides({ animation: false });\n    }\n  };\n\n  useGlobalEventListener(window, 'resize', onResize);\n\n  useIsomorphicLayoutEffect(() => {\n    initializeSlides({ animation: false });\n  }, [children, align, slideWidth]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (shiftState.animation !== undefined) {\n      setShiftState((prevState) => ({\n        ...prevState,\n        animation: true,\n        deltaX: 0,\n        shiftX: calculateIndent(slideIndex ?? 0),\n      }));\n    }\n  }, [slideIndex]);\n\n  const slideLeft = (event: React.MouseEvent) => {\n    onChange?.(slideIndex - 1);\n    onPrevClick?.(event);\n  };\n\n  const slideRight = (event: React.MouseEvent) => {\n    onChange?.(slideIndex + 1);\n    onNextClick?.(event);\n  };\n\n  /*\n   * Получает индекс слайда, к которому будет осуществлен переход\n   */\n  const getTarget = (e: TouchEvent) => {\n    const expectDeltaX = (shiftState.deltaX / e.duration) * 240 * 0.6;\n    const shift =\n      shiftState.shiftX + shiftState.deltaX + expectDeltaX - (layoutState.current.max ?? 0);\n    const direction = shiftState.deltaX < 0 ? 1 : -1;\n\n    // Находим ближайшую границу слайда к текущему отступу\n    let targetIndex = layoutState.current.slides.reduce(\n      (val: number, item: GallerySlidesState, index: number) => {\n        const previousValue = Math.abs(layoutState.current.slides[val].coordX + shift);\n        const currentValue = Math.abs(item.coordX + shift);\n\n        return previousValue < currentValue ? val : index;\n      },\n      slideIndex,\n    );\n\n    if (targetIndex === slideIndex) {\n      let targetSlide = slideIndex + direction;\n\n      if (targetSlide >= 0 && targetSlide < layoutState.current.slides.length) {\n        if (Math.abs(shiftState.deltaX) > layoutState.current.slides[targetSlide].width * 0.05) {\n          targetIndex = targetSlide;\n        }\n      }\n    }\n\n    return targetIndex;\n  };\n\n  const isDraggable = !dragDisabled && !layoutState.current.isFullyVisible;\n\n  const onStart = (e: TouchEvent) => {\n    e.originalEvent.stopPropagation();\n    if (isDraggable) {\n      onDragStart?.(e);\n      setShiftState((prevState) => ({ ...prevState, animation: false }));\n    }\n  };\n\n  const onMoveX = (e: TouchEvent) => {\n    if (isDraggable) {\n      e.originalEvent.preventDefault();\n\n      if (e.isSlideX) {\n        if (shiftState.deltaX !== e.shiftX) {\n          setShiftState((prevState) => ({\n            ...prevState,\n            deltaX: e.shiftX,\n            dragging: e.isSlideX,\n          }));\n        }\n      }\n    }\n  };\n\n  const onEnd = (e: TouchEvent) => {\n    if (isDraggable) {\n      const targetIndex = e.isSlide ? getTarget(e) : slideIndex ?? 0;\n      onDragEnd?.(e, targetIndex);\n\n      const nextShiftState: Partial<ShiftingState> = {\n        animation: true,\n        dragging: false,\n        deltaX: 0,\n      };\n\n      const shiftXStick = calculateDragIndent();\n      if (targetIndex !== slideIndex) {\n        // Сохраняем сдвиг слайда в том положении, в каком его оставили после драга (fix issue #2185)\n        nextShiftState.shiftX = shiftXStick;\n      }\n\n      setShiftState((prevState) => ({ ...prevState, ...nextShiftState }));\n      if (targetIndex !== slideIndex) {\n        onChange?.(targetIndex);\n      }\n    }\n  };\n\n  const indent = shiftState.dragging ? calculateDragIndent() : shiftState.shiftX;\n\n  const layerStyle = {\n    WebkitTransform: `translateX(${indent}px)`,\n    transform: `translateX(${indent}px)`,\n    WebkitTransition: shiftState.animation\n      ? `-webkit-transform ${ANIMATION_DURATION}s cubic-bezier(.1, 0, .25, 1)`\n      : 'none',\n    transition: shiftState.animation\n      ? `transform ${ANIMATION_DURATION}s cubic-bezier(.1, 0, .25, 1)`\n      : 'none',\n  };\n\n  const setSlideRef = (slideRef: HTMLDivElement | null, slideIndex: number) => {\n    slidesStore.current[`slide-${slideIndex}`] = slideRef;\n  };\n\n  // shiftX is negative number <= 0, we can swipe back only if it is < 0\n  const canSlideLeft = !layoutState.current.isFullyVisible && shiftState.shiftX < 0;\n\n  const canSlideRight =\n    !layoutState.current.isFullyVisible &&\n    // we can't move right when gallery layer fully scrolled right, if gallery aligned by left side\n    ((align === 'left' &&\n      layoutState.current.containerWidth - shiftState.shiftX <\n        (layoutState.current.layerWidth ?? 0)) ||\n      // otherwise we need to check current slide index (align = right or align = center)\n      (align !== 'left' && slideIndex < layoutState.current.slides.length - 1));\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['BaseGallery'],\n        align === 'center' && styles['BaseGallery--align-center'],\n        slideWidth === 'custom' && styles['BaseGallery--custom-width'],\n        isDraggable && styles['BaseGallery--draggable'],\n      )}\n      getRootRef={rootRef}\n    >\n      <Touch\n        className={styles['BaseGallery__viewport']}\n        onStartX={onStart}\n        onMoveX={onMoveX}\n        onEnd={onEnd}\n        style={{ width: slideWidth === 'custom' ? '100%' : slideWidth }}\n        getRootRef={viewportRef}\n        noSlideClick\n      >\n        <div className={styles['BaseGallery__layer']} style={layerStyle}>\n          {React.Children.map(children, (item: React.ReactNode, i: number) => (\n            <div\n              className={styles['BaseGallery__slide']}\n              key={`slide-${i}`}\n              ref={(el) => setSlideRef(el, i)}\n            >\n              {item}\n            </div>\n          ))}\n        </div>\n      </Touch>\n\n      {bullets && (\n        <div\n          aria-hidden\n          className={classNames(styles['BaseGallery__bullets'], stylesBullets[bullets])}\n        >\n          {React.Children.map(children, (_item: React.ReactNode, index: number) => (\n            <div\n              className={classNames(\n                styles['BaseGallery__bullet'],\n                index === slideIndex && styles['BaseGallery__bullet--active'],\n              )}\n              key={index}\n            />\n          ))}\n        </div>\n      )}\n\n      {showArrows && hasPointer && canSlideLeft && (\n        <ScrollArrow\n          className={styles['BaseGallery__arrow']}\n          direction=\"left\"\n          onClick={slideLeft}\n          size={arrowSize}\n        />\n      )}\n      {showArrows && hasPointer && canSlideRight && (\n        <ScrollArrow\n          className={styles['BaseGallery__arrow']}\n          direction=\"right\"\n          onClick={slideRight}\n          size={arrowSize}\n        />\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["BaseGallery","ANIMATION_DURATION","LAYOUT_DEFAULT_STATE","containerWidth","viewportOffsetWidth","layerWidth","min","max","slides","isFullyVisible","SHIFT_DEFAULT_STATE","animation","undefined","shiftX","dragging","deltaX","indent","stylesBullets","dark","light","bullets","getRootRef","children","slideWidth","slideIndex","dragDisabled","onDragStart","onDragEnd","onChange","onPrevClick","onNextClick","align","showArrows","getRef","arrowSize","restProps","slidesStore","React","useRef","layoutState","shiftState","setShiftState","useState","rootRef","useExternRef","viewportRef","window","useDOM","hasPointer","useAdaptivityHasPointer","isCenterWithCustomWidth","validateIndent","value","localMax","current","localMin","calculateIndent","targetIndex","targetSlide","length","coordX","width","viewportWidth","calculateDragIndent","Number","initializeSlides","options","localSlides","Children","map","_item","i","elem","offsetLeft","offsetWidth","localContainerWidth","localViewportOffsetWidth","localLayerWidth","reduce","val","slide","adjustShiftX","calcMax","calcMin","prevState","onResize","useGlobalEventListener","useIsomorphicLayoutEffect","slideLeft","event","slideRight","getTarget","e","expectDeltaX","duration","shift","direction","item","index","previousValue","Math","abs","currentValue","isDraggable","onStart","originalEvent","stopPropagation","onMoveX","preventDefault","isSlideX","onEnd","isSlide","nextShiftState","shiftXStick","layerStyle","WebkitTransform","transform","WebkitTransition","transition","setSlideRef","slideRef","canSlideLeft","canSlideRight","RootComponent","baseClassName","classNames","Touch","className","onStartX","style","noSlideClick","div","ref","el","aria-hidden","ScrollArrow","onClick","size"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/dist/cjs/components/BaseGallery/CarouselBase/CarouselBase.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { BaseGalleryProps } from '../types';
-export declare const CarouselBase: ({ bullets, getRootRef, children, slideWidth, slideIndex, dragDisabled, onDragStart, onDragEnd, onChange, onPrevClick, onNextClick, align, showArrows, getRef, arrowSize, ...restProps }: BaseGalleryProps) => React.JSX.Element;
+export declare const CarouselBase: ({ bullets, getRootRef, children, slideWidth, slideIndex, dragDisabled, onDragStart, onDragEnd, onChange, onPrevClick, onNextClick, align, showArrows, getRef, arrowSize, ...restProps }: BaseGalleryProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=CarouselBase.d.ts.map

package/dist/cjs/components/BaseGallery/CarouselBase/CarouselBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselBase.d.ts","sourceRoot":"","sources":["../../../../../src/components/BaseGallery/CarouselBase/CarouselBase.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,EAAE,gBAAgB,EAAsB,MAAM,UAAU,CAAC;AAchE,eAAO,MAAM,YAAY,4LAiBtB,gBAAgB,sBAsVlB,CAAC"}
+{"version":3,"file":"CarouselBase.d.ts","sourceRoot":"","sources":["../../../../../src/components/BaseGallery/CarouselBase/CarouselBase.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,gBAAgB,EAAsB,MAAM,UAAU,CAAC;AAchE,eAAO,MAAM,YAAY,4LAiBtB,gBAAgB,4CAsVlB,CAAC"}

package/dist/cjs/components/BaseGallery/CarouselBase/CarouselBase.js

@@ -12,6 +12,7 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
 const _object_spread = require("@swc/helpers/_/_object_spread");
 const _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 const _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _vkjs = require("@vkontakte/vkjs");
 const _useAdaptivityHasPointer = require("../../../hooks/useAdaptivityHasPointer");
@@ -267,42 +268,50 @@ const CarouselBase = (_param)=>{
         slidesStore.current[slideIndex] = slideRef;
     };
     const { canSlideLeft, canSlideRight, isDraggable } = controlElementsState;
-    return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, restProps), {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, restProps), {
         baseClassName: (0, _vkjs.classNames)("vkuiBaseGallery", slideWidth === 'custom' && "vkuiBaseGallery--custom-width", isDraggable && "vkuiBaseGallery--draggable"),
-        getRootRef: rootRef
-    }), /*#__PURE__*/ _react.createElement(_Touch.Touch, {
-        className: "vkuiBaseGallery__viewport",
-        onStartX: onStart,
-        onMoveX: onMoveX,
-        onEnd: onEnd,
-        style: {
-            width: slideWidth === 'custom' ? '100%' : slideWidth
-        },
-        getRootRef: viewportRef,
-        noSlideClick: true
-    }, /*#__PURE__*/ _react.createElement("div", {
-        className: "vkuiBaseGallery__layer",
-        ref: layerRef
-    }, _react.Children.map(children, (item, i)=>/*#__PURE__*/ _react.createElement("div", {
-            className: "vkuiBaseGallery__slide",
-            key: `slide-${i}`,
-            ref: (el)=>setSlideRef(el, i)
-        }, item)))), bullets && /*#__PURE__*/ _react.createElement("div", {
-        "aria-hidden": true,
-        className: (0, _vkjs.classNames)("vkuiBaseGallery__bullets", stylesBullets[bullets])
-    }, _react.Children.map(children, (_item, index)=>/*#__PURE__*/ _react.createElement("div", {
-            className: (0, _vkjs.classNames)("vkuiBaseGallery__bullet", index === slideIndex && "vkuiBaseGallery__bullet--active"),
-            key: index
-        }))), showArrows && hasPointer && canSlideLeft && /*#__PURE__*/ _react.createElement(_ScrollArrow.ScrollArrow, {
-        className: "vkuiBaseGallery__arrow",
-        direction: "left",
-        onClick: slideLeft,
-        size: arrowSize
-    }), showArrows && hasPointer && canSlideRight && /*#__PURE__*/ _react.createElement(_ScrollArrow.ScrollArrow, {
-        className: "vkuiBaseGallery__arrow",
-        direction: "right",
-        onClick: slideRight,
-        size: arrowSize
+        getRootRef: rootRef,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Touch.Touch, {
+                className: "vkuiBaseGallery__viewport",
+                onStartX: onStart,
+                onMoveX: onMoveX,
+                onEnd: onEnd,
+                style: {
+                    width: slideWidth === 'custom' ? '100%' : slideWidth
+                },
+                getRootRef: viewportRef,
+                noSlideClick: true,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                    className: "vkuiBaseGallery__layer",
+                    ref: layerRef,
+                    children: _react.Children.map(children, (item, i)=>/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                            className: "vkuiBaseGallery__slide",
+                            ref: (el)=>setSlideRef(el, i),
+                            children: item
+                        }, `slide-${i}`))
+                })
+            }),
+            bullets && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                "aria-hidden": true,
+                className: (0, _vkjs.classNames)("vkuiBaseGallery__bullets", stylesBullets[bullets]),
+                children: _react.Children.map(children, (_item, index)=>/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: (0, _vkjs.classNames)("vkuiBaseGallery__bullet", index === slideIndex && "vkuiBaseGallery__bullet--active")
+                    }, index))
+            }),
+            showArrows && hasPointer && canSlideLeft && /*#__PURE__*/ (0, _jsxruntime.jsx)(_ScrollArrow.ScrollArrow, {
+                className: "vkuiBaseGallery__arrow",
+                direction: "left",
+                onClick: slideLeft,
+                size: arrowSize
+            }),
+            showArrows && hasPointer && canSlideRight && /*#__PURE__*/ (0, _jsxruntime.jsx)(_ScrollArrow.ScrollArrow, {
+                className: "vkuiBaseGallery__arrow",
+                direction: "right",
+                onClick: slideRight,
+                size: arrowSize
+            })
+        ]
     }));
 };