@vkontakte/vkui 5.8.2 → 5.9.1

package/dist/components/FormLayoutGroup/FormLayoutGroup.js

@@ -25,18 +25,16 @@ var sizeYClassNames = _define_property({
     ]);
     var _useAdaptivity = useAdaptivity(), _useAdaptivity_sizeY = _useAdaptivity.sizeY, sizeY = _useAdaptivity_sizeY === void 0 ? "none" : _useAdaptivity_sizeY;
     var isRemovable = removable && mode === "horizontal";
-    var isSegmented = segmented && mode === "horizontal";
     var rootEl = useExternRef(getRootRef);
     return /*#__PURE__*/ React.createElement(RootComponent, _object_spread({
         getRootRef: rootEl,
-        baseClassName: classNames(sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], mode === "horizontal" && classNames("vkuiFormLayoutGroup--mode-horizontal", "vkuiInternalFormLayoutGroup--mode-horizontal"), isRemovable && classNames("vkuiFormLayoutGroup--removable", "vkuiInternalFormLayoutGroup--removable"), isSegmented && classNames("vkuiFormLayoutGroup--segmented", "vkuiInternalFormLayoutGroup--segmented"))
+        baseClassName: classNames(sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], mode === "horizontal" && classNames("vkuiFormLayoutGroup--mode-horizontal", "vkuiInternalFormLayoutGroup--mode-horizontal"), mode === "vertical" && classNames("vkuiFormLayoutGroup--mode-vertical", "vkuiInternalFormLayoutGroup--mode-vertical"), isRemovable && classNames("vkuiFormLayoutGroup--removable", "vkuiInternalFormLayoutGroup--removable"), segmented && classNames("vkuiFormLayoutGroup--segmented", "vkuiInternalFormLayoutGroup--segmented"))
     }, restProps), isRemovable ? /*#__PURE__*/ React.createElement(Removable, {
         className: "vkuiFormLayoutGroup__removable",
         align: "start",
         removePlaceholder: removePlaceholder,
         onRemove: function(e) {
-            var _rootEl;
-            if ((_rootEl = rootEl) === null || _rootEl === void 0 ? void 0 : _rootEl.current) {
+            if (rootEl === null || rootEl === void 0 ? void 0 : rootEl.current) {
                 onRemove(e, rootEl.current);
             }
         },

package/dist/components/FormLayoutGroup/FormLayoutGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/FormLayoutGroup/FormLayoutGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './FormLayoutGroup.module.css';\n\nconst sizeYClassNames = {\n  none: classNames(\n    styles['FormLayoutGroup--sizeY-none'],\n    'vkuiInternalFormLayoutGroup--sizeY-none',\n  ),\n  [SizeType.COMPACT]: classNames(\n    styles['FormLayoutGroup--sizeY-compact'],\n    'vkuiInternalFormLayoutGroup--sizeY-compact',\n  ),\n};\n\nexport interface FormLayoutGroupProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    RemovableProps {\n  mode?: 'vertical' | 'horizontal';\n  /**\n   * Только для режима horizontal. Дает возможность удалить всю группу `FormItem`.\n   *\n   * Режим `indent` предназначен для визуального отступа.\n   */\n  removable?: boolean | 'indent';\n\n  /**\n   * Только для режима horizontal. Дает возможность склеить несколько `FormItem`.\n   */\n  segmented?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormLayoutGroup\n */\nexport const FormLayoutGroup = ({\n  children,\n  mode = 'vertical',\n  removable,\n  segmented,\n  removePlaceholder = 'Удалить',\n  onRemove = noop,\n  getRootRef,\n  ...restProps\n}: FormLayoutGroupProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const isRemovable = removable && mode === 'horizontal';\n  const isSegmented = segmented && mode === 'horizontal';\n  const rootEl = useExternRef(getRootRef);\n\n  return (\n    <RootComponent\n      getRootRef={rootEl}\n      baseClassName={classNames(\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        mode === 'horizontal' &&\n          classNames(\n            styles['FormLayoutGroup--mode-horizontal'],\n            'vkuiInternalFormLayoutGroup--mode-horizontal',\n          ),\n        isRemovable &&\n          classNames(\n            styles['FormLayoutGroup--removable'],\n            'vkuiInternalFormLayoutGroup--removable',\n          ),\n        isSegmented &&\n          classNames(\n            styles['FormLayoutGroup--segmented'],\n            'vkuiInternalFormLayoutGroup--segmented',\n          ),\n      )}\n      {...restProps}\n    >\n      {isRemovable ? (\n        <Removable\n          className={styles['FormLayoutGroup__removable']}\n          align=\"start\"\n          removePlaceholder={removePlaceholder}\n          onRemove={(e) => {\n            if (rootEl?.current) {\n              onRemove(e, rootEl.current);\n            }\n          }}\n          indent={removable === 'indent'}\n        >\n          {children}\n        </Removable>\n      ) : (\n        <React.Fragment>\n          {children}\n          <span className={styles['FormLayoutGroup__offset']} aria-hidden />\n        </React.Fragment>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","noop","useAdaptivity","useExternRef","SizeType","Removable","RootComponent","sizeYClassNames","none","COMPACT","FormLayoutGroup","children","mode","removable","segmented","removePlaceholder","onRemove","getRootRef","restProps","sizeY","isRemovable","isSegmented","rootEl","baseClassName","REGULAR","className","align","e","current","indent","Fragment","span","aria-hidden"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,IAAI,QAAQ,kBAAkB;AACnD,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,SAAS,QAAwB,yBAAyB;AACnE,SAASC,aAAa,QAAQ,iCAAiC;AAG/D,IAAMC,kBAKJ;IAJAC,MAAMR,8CAEJ;GAEDI,SAASK,OAAO,EAAGT,iDAElB;AAqBJ;;CAEC,GACD,OAAO,IAAMU,kBAAkB;QAC7BC,kBAAAA,+BACAC,MAAAA,gCAAO,0BACPC,mBAAAA,WACAC,mBAAAA,6CACAC,mBAAAA,0DAAoB,+DACpBC,UAAAA,wCAAWf,wBACXgB,oBAAAA,YACGC;QAPHP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAA2Bf,iBAAAA,wCAAAA,eAAnBiB,OAAAA,0CAAQ;IAChB,IAAMC,cAAcP,aAAaD,SAAS;IAC1C,IAAMS,cAAcP,aAAaF,SAAS;IAC1C,IAAMU,SAASnB,aAAac;IAE5B,qBACE,oBAACX;QACCW,YAAYK;QACZC,eAAevB,WACbmB,UAAUf,SAASoB,OAAO,IAAIjB,eAAe,CAACY,MAAM,EACpDP,SAAS,gBACPZ,mDAEE,iDAEJoB,eACEpB,6CAEE,2CAEJqB,eACErB,6CAEE;OAGFkB,YAEHE,4BACC,oBAACf;QACCoB,SAAS;QACTC,OAAM;QACNX,mBAAmBA;QACnBC,UAAU,SAACW;gBACLL;YAAJ,KAAIA,UAAAA,oBAAAA,8BAAAA,QAAQM,OAAO,EAAE;gBACnBZ,SAASW,GAAGL,OAAOM,OAAO;YAC5B;QACF;QACAC,QAAQhB,cAAc;OAErBF,0BAGH,oBAACZ,MAAM+B,QAAQ,QACZnB,wBACD,oBAACoB;QAAKN,SAAS;QAAqCO,eAAAA;;AAK9D,EAAE"}
+{"version":3,"sources":["../../../src/components/FormLayoutGroup/FormLayoutGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './FormLayoutGroup.module.css';\n\nconst sizeYClassNames = {\n  none: classNames(\n    styles['FormLayoutGroup--sizeY-none'],\n    'vkuiInternalFormLayoutGroup--sizeY-none',\n  ),\n  [SizeType.COMPACT]: classNames(\n    styles['FormLayoutGroup--sizeY-compact'],\n    'vkuiInternalFormLayoutGroup--sizeY-compact',\n  ),\n};\n\nexport interface FormLayoutGroupProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    RemovableProps {\n  mode?: 'vertical' | 'horizontal';\n  /**\n   * Только для режима horizontal. Дает возможность удалить всю группу `FormItem`.\n   *\n   * Режим `indent` предназначен для визуального отступа.\n   */\n  removable?: boolean | 'indent';\n\n  /**\n   * Дает возможность склеить несколько `FormItem`.\n   */\n  segmented?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormLayoutGroup\n */\nexport const FormLayoutGroup = ({\n  children,\n  mode = 'vertical',\n  removable,\n  segmented,\n  removePlaceholder = 'Удалить',\n  onRemove = noop,\n  getRootRef,\n  ...restProps\n}: FormLayoutGroupProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const isRemovable = removable && mode === 'horizontal';\n  const rootEl = useExternRef(getRootRef);\n\n  return (\n    <RootComponent\n      getRootRef={rootEl}\n      baseClassName={classNames(\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        mode === 'horizontal' &&\n          classNames(\n            styles['FormLayoutGroup--mode-horizontal'],\n            'vkuiInternalFormLayoutGroup--mode-horizontal',\n          ),\n        mode === 'vertical' &&\n          classNames(\n            styles['FormLayoutGroup--mode-vertical'],\n            'vkuiInternalFormLayoutGroup--mode-vertical',\n          ),\n        isRemovable &&\n          classNames(\n            styles['FormLayoutGroup--removable'],\n            'vkuiInternalFormLayoutGroup--removable',\n          ),\n        segmented &&\n          classNames(\n            styles['FormLayoutGroup--segmented'],\n            'vkuiInternalFormLayoutGroup--segmented',\n          ),\n      )}\n      {...restProps}\n    >\n      {isRemovable ? (\n        <Removable\n          className={styles['FormLayoutGroup__removable']}\n          align=\"start\"\n          removePlaceholder={removePlaceholder}\n          onRemove={(e) => {\n            if (rootEl?.current) {\n              onRemove(e, rootEl.current);\n            }\n          }}\n          indent={removable === 'indent'}\n        >\n          {children}\n        </Removable>\n      ) : (\n        <React.Fragment>\n          {children}\n          <span className={styles['FormLayoutGroup__offset']} aria-hidden />\n        </React.Fragment>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","noop","useAdaptivity","useExternRef","SizeType","Removable","RootComponent","sizeYClassNames","none","COMPACT","FormLayoutGroup","children","mode","removable","segmented","removePlaceholder","onRemove","getRootRef","restProps","sizeY","isRemovable","rootEl","baseClassName","REGULAR","className","align","e","current","indent","Fragment","span","aria-hidden"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,IAAI,QAAQ,kBAAkB;AACnD,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,SAAS,QAAwB,yBAAyB;AACnE,SAASC,aAAa,QAAQ,iCAAiC;AAG/D,IAAMC,kBAKJ;IAJAC,MAAMR,8CAEJ;GAEDI,SAASK,OAAO,EAAGT,iDAElB;AAqBJ;;CAEC,GACD,OAAO,IAAMU,kBAAkB;QAC7BC,kBAAAA,+BACAC,MAAAA,gCAAO,0BACPC,mBAAAA,WACAC,mBAAAA,6CACAC,mBAAAA,0DAAoB,+DACpBC,UAAAA,wCAAWf,wBACXgB,oBAAAA,YACGC;QAPHP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAA2Bf,iBAAAA,wCAAAA,eAAnBiB,OAAAA,0CAAQ;IAChB,IAAMC,cAAcP,aAAaD,SAAS;IAC1C,IAAMS,SAASlB,aAAac;IAE5B,qBACE,oBAACX;QACCW,YAAYI;QACZC,eAAetB,WACbmB,UAAUf,SAASmB,OAAO,IAAIhB,eAAe,CAACY,MAAM,EACpDP,SAAS,gBACPZ,mDAEE,iDAEJY,SAAS,cACPZ,iDAEE,+CAEJoB,eACEpB,6CAEE,2CAEJc,aACEd,6CAEE;OAGFkB,YAEHE,4BACC,oBAACf;QACCmB,SAAS;QACTC,OAAM;QACNV,mBAAmBA;QACnBC,UAAU,SAACU;YACT,IAAIL,mBAAAA,6BAAAA,OAAQM,OAAO,EAAE;gBACnBX,SAASU,GAAGL,OAAOM,OAAO;YAC5B;QACF;QACAC,QAAQf,cAAc;OAErBF,0BAGH,oBAACZ,MAAM8B,QAAQ,QACZlB,wBACD,oBAACmB;QAAKN,SAAS;QAAqCO,eAAAA;;AAK9D,EAAE"}

package/dist/components/FormStatus/FormStatus.d.ts

@@ -8,3 +8,4 @@ export interface FormStatusProps extends HTMLAttributesWithRootRef<HTMLDivElemen
  * @see https://vkcom.github.io/VKUI/#/FormStatus
  */
 export declare const FormStatus: ({ mode, children, className, ...restProps }: FormStatusProps) => React.JSX.Element;
+//# sourceMappingURL=FormStatus.d.ts.map

package/dist/components/FormStatus/FormStatus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormStatus.d.ts","sourceRoot":"","sources":["../../../src/components/FormStatus/FormStatus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAIxD,MAAM,WAAW,eAAgB,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAChF,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC3B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,gDAAiD,eAAe,sBAatF,CAAC"}

package/dist/components/Gallery/Gallery.d.ts

@@ -3,8 +3,10 @@ import { BaseGalleryProps } from '../BaseGallery/types';
 export interface GalleryProps extends BaseGalleryProps {
     initialSlideIndex?: number;
     timeout?: number;
+    looped?: boolean;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Gallery
  */
-export declare const Gallery: ({ initialSlideIndex, children, timeout, onChange, bullets, ...props }: GalleryProps) => React.JSX.Element;
+export declare const Gallery: ({ initialSlideIndex, children, timeout, onChange, bullets, looped, ...props }: GalleryProps) => React.JSX.Element | null;
+//# sourceMappingURL=Gallery.d.ts.map

package/dist/components/Gallery/Gallery.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Gallery.d.ts","sourceRoot":"","sources":["../../../src/components/Gallery/Gallery.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAExD,MAAM,WAAW,YAAa,SAAQ,gBAAgB;IACpD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;GAEG;AACH,eAAO,MAAM,OAAO,kFAQjB,YAAY,6BAyDd,CAAC"}

package/dist/components/Gallery/Gallery.js

@@ -4,17 +4,20 @@ import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import * as React from "react";
 import { clamp } from "../../helpers/math";
+import { useIsClient } from "../../hooks/useIsClient";
 import { useTimeout } from "../../hooks/useTimeout";
 import { BaseGallery } from "../BaseGallery/BaseGallery";
+import { CarouselBase } from "../BaseGallery/CarouselBase/CarouselBase";
 /**
  * @see https://vkcom.github.io/VKUI/#/Gallery
  */ export var Gallery = function(_param) {
-    var _param_initialSlideIndex = _param.initialSlideIndex, initialSlideIndex = _param_initialSlideIndex === void 0 ? 0 : _param_initialSlideIndex, children = _param.children, _param_timeout = _param.timeout, timeout = _param_timeout === void 0 ? 0 : _param_timeout, onChange = _param.onChange, bullets = _param.bullets, props = _object_without_properties(_param, [
+    var _param_initialSlideIndex = _param.initialSlideIndex, initialSlideIndex = _param_initialSlideIndex === void 0 ? 0 : _param_initialSlideIndex, children = _param.children, _param_timeout = _param.timeout, timeout = _param_timeout === void 0 ? 0 : _param_timeout, onChange = _param.onChange, bullets = _param.bullets, looped = _param.looped, props = _object_without_properties(_param, [
         "initialSlideIndex",
         "children",
         "timeout",
         "onChange",
-        "bullets"
+        "bullets",
+        "looped"
     ]);
     var _React_useState = _sliced_to_array(React.useState(initialSlideIndex), 2), localSlideIndex = _React_useState[0], setSlideIndex = _React_useState[1];
     var isControlled = typeof props.slideIndex === "number";
@@ -29,6 +32,7 @@ import { BaseGallery } from "../BaseGallery/BaseGallery";
         children
     ]);
     var childCount = slides.length;
+    var isClient = useIsClient();
     var handleChange = React.useCallback(function(current) {
         if (current === slideIndex) {
             return;
@@ -64,7 +68,11 @@ import { BaseGallery } from "../BaseGallery/BaseGallery";
         safeSlideIndex,
         slideIndex
     ]);
-    return /*#__PURE__*/ React.createElement(BaseGallery, _object_spread_props(_object_spread({
+    if (!isClient) {
+        return null;
+    }
+    var Component = looped ? CarouselBase : BaseGallery;
+    return /*#__PURE__*/ React.createElement(Component, _object_spread_props(_object_spread({
         isDraggable: isDraggable
     }, props), {
         bullets: childCount > 0 && bullets,

package/dist/components/Gallery/Gallery.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Gallery/Gallery.tsx"],"sourcesContent":["import * as React from 'react';\nimport { clamp } from '../../helpers/math';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { BaseGallery } from '../BaseGallery/BaseGallery';\nimport { BaseGalleryProps } from '../BaseGallery/types';\n\nexport interface GalleryProps extends BaseGalleryProps {\n  initialSlideIndex?: number;\n  timeout?: number;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Gallery\n */\nexport const Gallery = ({\n  initialSlideIndex = 0,\n  children,\n  timeout = 0,\n  onChange,\n  bullets,\n  ...props\n}: GalleryProps) => {\n  const [localSlideIndex, setSlideIndex] = React.useState(initialSlideIndex);\n  const isControlled = typeof props.slideIndex === 'number';\n  const slideIndex = isControlled ? props.slideIndex ?? 0 : localSlideIndex;\n  const isDraggable = !isControlled || Boolean(onChange);\n  const slides = React.useMemo(\n    () => React.Children.toArray(children).filter((item) => Boolean(item)),\n    [children],\n  );\n  const childCount = slides.length;\n\n  const handleChange: GalleryProps['onChange'] = React.useCallback(\n    (current: number) => {\n      if (current === slideIndex) {\n        return;\n      }\n      !isControlled && setSlideIndex(current);\n      onChange && onChange(current);\n    },\n    [isControlled, onChange, slideIndex],\n  );\n\n  const autoplay = useTimeout(() => handleChange((slideIndex + 1) % childCount), timeout);\n  React.useEffect(\n    () => (timeout ? autoplay.set() : autoplay.clear()),\n    [timeout, slideIndex, autoplay],\n  );\n\n  // prevent invalid slideIndex\n  // any slide index is invalid with no slides, just keep it as is\n  const safeSlideIndex = childCount > 0 ? clamp(slideIndex, 0, childCount - 1) : slideIndex;\n  // notify parent in controlled mode\n  React.useEffect(() => {\n    if (onChange && safeSlideIndex !== slideIndex) {\n      onChange(safeSlideIndex);\n    }\n    setSlideIndex(safeSlideIndex);\n  }, [onChange, safeSlideIndex, slideIndex]);\n\n  return (\n    <BaseGallery\n      isDraggable={isDraggable}\n      {...props}\n      bullets={childCount > 0 && bullets}\n      slideIndex={safeSlideIndex}\n      onChange={handleChange}\n    >\n      {slides}\n    </BaseGallery>\n  );\n};\n"],"names":["React","clamp","useTimeout","BaseGallery","Gallery","initialSlideIndex","children","timeout","onChange","bullets","props","useState","localSlideIndex","setSlideIndex","isControlled","slideIndex","isDraggable","Boolean","slides","useMemo","Children","toArray","filter","item","childCount","length","handleChange","useCallback","current","autoplay","useEffect","set","clear","safeSlideIndex"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,QAAQ,qBAAqB;AAC3C,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,WAAW,QAAQ,6BAA6B;AAQzD;;CAEC,GACD,OAAO,IAAMC,UAAU;0CACrBC,mBAAAA,0DAAoB,8BACpBC,kBAAAA,kCACAC,SAAAA,sCAAU,oBACVC,kBAAAA,UACAC,iBAAAA,SACGC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAyCT,mCAAAA,MAAMW,QAAQ,CAACN,wBAAjDO,kBAAkCZ,oBAAjBa,gBAAiBb;IACzC,IAAMc,eAAe,OAAOJ,MAAMK,UAAU,KAAK;QACfL;IAAlC,IAAMK,aAAaD,eAAeJ,CAAAA,oBAAAA,MAAMK,UAAU,cAAhBL,+BAAAA,oBAAoB,IAAIE;IAC1D,IAAMI,cAAc,CAACF,gBAAgBG,QAAQT;IAC7C,IAAMU,SAASlB,MAAMmB,OAAO,CAC1B;eAAMnB,MAAMoB,QAAQ,CAACC,OAAO,CAACf,UAAUgB,MAAM,CAAC,SAACC;mBAASN,QAAQM;;OAChE;QAACjB;KAAS;IAEZ,IAAMkB,aAAaN,OAAOO,MAAM;IAEhC,IAAMC,eAAyC1B,MAAM2B,WAAW,CAC9D,SAACC;QACC,IAAIA,YAAYb,YAAY;YAC1B;QACF;QACA,CAACD,gBAAgBD,cAAce;QAC/BpB,YAAYA,SAASoB;IACvB,GACA;QAACd;QAAcN;QAAUO;KAAW;IAGtC,IAAMc,WAAW3B,WAAW;eAAMwB,aAAa,AAACX,CAAAA,aAAa,CAAA,IAAKS;OAAajB;IAC/EP,MAAM8B,SAAS,CACb;eAAOvB,UAAUsB,SAASE,GAAG,KAAKF,SAASG,KAAK;OAChD;QAACzB;QAASQ;QAAYc;KAAS;IAGjC,6BAA6B;IAC7B,gEAAgE;IAChE,IAAMI,iBAAiBT,aAAa,IAAIvB,MAAMc,YAAY,GAAGS,aAAa,KAAKT;IAC/E,mCAAmC;IACnCf,MAAM8B,SAAS,CAAC;QACd,IAAItB,YAAYyB,mBAAmBlB,YAAY;YAC7CP,SAASyB;QACX;QACApB,cAAcoB;IAChB,GAAG;QAACzB;QAAUyB;QAAgBlB;KAAW;IAEzC,qBACE,oBAACZ;QACCa,aAAaA;OACTN;QACJD,SAASe,aAAa,KAAKf;QAC3BM,YAAYkB;QACZzB,UAAUkB;QAETR;AAGP,EAAE"}
+{"version":3,"sources":["../../../src/components/Gallery/Gallery.tsx"],"sourcesContent":["import * as React from 'react';\nimport { clamp } from '../../helpers/math';\nimport { useIsClient } from '../../hooks/useIsClient';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { BaseGallery } from '../BaseGallery/BaseGallery';\nimport { CarouselBase } from '../BaseGallery/CarouselBase/CarouselBase';\nimport { BaseGalleryProps } from '../BaseGallery/types';\n\nexport interface GalleryProps extends BaseGalleryProps {\n  initialSlideIndex?: number;\n  timeout?: number;\n  // Отвечает за зацикливание слайдов\n  looped?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Gallery\n */\nexport const Gallery = ({\n  initialSlideIndex = 0,\n  children,\n  timeout = 0,\n  onChange,\n  bullets,\n  looped,\n  ...props\n}: GalleryProps) => {\n  const [localSlideIndex, setSlideIndex] = React.useState(initialSlideIndex);\n  const isControlled = typeof props.slideIndex === 'number';\n  const slideIndex = isControlled ? props.slideIndex ?? 0 : localSlideIndex;\n  const isDraggable = !isControlled || Boolean(onChange);\n  const slides = React.useMemo(\n    () => React.Children.toArray(children).filter((item) => Boolean(item)),\n    [children],\n  );\n  const childCount = slides.length;\n  const isClient = useIsClient();\n\n  const handleChange: GalleryProps['onChange'] = React.useCallback(\n    (current: number) => {\n      if (current === slideIndex) {\n        return;\n      }\n      !isControlled && setSlideIndex(current);\n      onChange && onChange(current);\n    },\n    [isControlled, onChange, slideIndex],\n  );\n\n  const autoplay = useTimeout(() => handleChange((slideIndex + 1) % childCount), timeout);\n  React.useEffect(\n    () => (timeout ? autoplay.set() : autoplay.clear()),\n    [timeout, slideIndex, autoplay],\n  );\n\n  // prevent invalid slideIndex\n  // any slide index is invalid with no slides, just keep it as is\n  const safeSlideIndex = childCount > 0 ? clamp(slideIndex, 0, childCount - 1) : slideIndex;\n  // notify parent in controlled mode\n  React.useEffect(() => {\n    if (onChange && safeSlideIndex !== slideIndex) {\n      onChange(safeSlideIndex);\n    }\n    setSlideIndex(safeSlideIndex);\n  }, [onChange, safeSlideIndex, slideIndex]);\n\n  if (!isClient) {\n    return null;\n  }\n\n  const Component = looped ? CarouselBase : BaseGallery;\n\n  return (\n    <Component\n      isDraggable={isDraggable}\n      {...props}\n      bullets={childCount > 0 && bullets}\n      slideIndex={safeSlideIndex}\n      onChange={handleChange}\n    >\n      {slides}\n    </Component>\n  );\n};\n"],"names":["React","clamp","useIsClient","useTimeout","BaseGallery","CarouselBase","Gallery","initialSlideIndex","children","timeout","onChange","bullets","looped","props","useState","localSlideIndex","setSlideIndex","isControlled","slideIndex","isDraggable","Boolean","slides","useMemo","Children","toArray","filter","item","childCount","length","isClient","handleChange","useCallback","current","autoplay","useEffect","set","clear","safeSlideIndex","Component"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,QAAQ,qBAAqB;AAC3C,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,WAAW,QAAQ,6BAA6B;AACzD,SAASC,YAAY,QAAQ,2CAA2C;AAUxE;;CAEC,GACD,OAAO,IAAMC,UAAU;0CACrBC,mBAAAA,0DAAoB,8BACpBC,kBAAAA,kCACAC,SAAAA,sCAAU,oBACVC,kBAAAA,UACAC,iBAAAA,SACAC,gBAAAA,QACGC;QANHN;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAyCZ,mCAAAA,MAAMc,QAAQ,CAACP,wBAAjDQ,kBAAkCf,oBAAjBgB,gBAAiBhB;IACzC,IAAMiB,eAAe,OAAOJ,MAAMK,UAAU,KAAK;QACfL;IAAlC,IAAMK,aAAaD,eAAeJ,CAAAA,oBAAAA,MAAMK,UAAU,cAAhBL,+BAAAA,oBAAoB,IAAIE;IAC1D,IAAMI,cAAc,CAACF,gBAAgBG,QAAQV;IAC7C,IAAMW,SAASrB,MAAMsB,OAAO,CAC1B;eAAMtB,MAAMuB,QAAQ,CAACC,OAAO,CAAChB,UAAUiB,MAAM,CAAC,SAACC;mBAASN,QAAQM;;OAChE;QAAClB;KAAS;IAEZ,IAAMmB,aAAaN,OAAOO,MAAM;IAChC,IAAMC,WAAW3B;IAEjB,IAAM4B,eAAyC9B,MAAM+B,WAAW,CAC9D,SAACC;QACC,IAAIA,YAAYd,YAAY;YAC1B;QACF;QACA,CAACD,gBAAgBD,cAAcgB;QAC/BtB,YAAYA,SAASsB;IACvB,GACA;QAACf;QAAcP;QAAUQ;KAAW;IAGtC,IAAMe,WAAW9B,WAAW;eAAM2B,aAAa,AAACZ,CAAAA,aAAa,CAAA,IAAKS;OAAalB;IAC/ET,MAAMkC,SAAS,CACb;eAAOzB,UAAUwB,SAASE,GAAG,KAAKF,SAASG,KAAK;OAChD;QAAC3B;QAASS;QAAYe;KAAS;IAGjC,6BAA6B;IAC7B,gEAAgE;IAChE,IAAMI,iBAAiBV,aAAa,IAAI1B,MAAMiB,YAAY,GAAGS,aAAa,KAAKT;IAC/E,mCAAmC;IACnClB,MAAMkC,SAAS,CAAC;QACd,IAAIxB,YAAY2B,mBAAmBnB,YAAY;YAC7CR,SAAS2B;QACX;QACArB,cAAcqB;IAChB,GAAG;QAAC3B;QAAU2B;QAAgBnB;KAAW;IAEzC,IAAI,CAACW,UAAU;QACb,OAAO;IACT;IAEA,IAAMS,YAAY1B,SAASP,eAAeD;IAE1C,qBACE,oBAACkC;QACCnB,aAAaA;OACTN;QACJF,SAASgB,aAAa,KAAKhB;QAC3BO,YAAYmB;QACZ3B,UAAUoB;QAETT;AAGP,EAAE"}

package/dist/components/Gradient/Gradient.d.ts

@@ -14,3 +14,4 @@ export interface GradientProps extends HTMLAttributesWithRootRef<HTMLDivElement>
  * @see https://vkcom.github.io/VKUI/#/Gradient
  */
 export declare const Gradient: ({ mode, to, ...restProps }: GradientProps) => React.JSX.Element;
+//# sourceMappingURL=Gradient.d.ts.map

package/dist/components/Gradient/Gradient.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Gradient.d.ts","sourceRoot":"","sources":["../../../src/components/Gradient/Gradient.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAexD,MAAM,WAAW,aAAc,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC9E;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;IAClC;;OAEG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,+BAAiD,aAAa,sBAQlF,CAAC"}

package/dist/components/GridAvatar/GridAvatar.d.ts

@@ -17,3 +17,4 @@ export declare const GridAvatar: {
     ({ src, size, className, children, ...restProps }: GridAvatarProps): React.JSX.Element;
     Badge: ({ className, ...restProps }: import("../ImageBase/ImageBase").ImageBaseBadgeProps) => React.JSX.Element;
 };
+//# sourceMappingURL=GridAvatar.d.ts.map

package/dist/components/GridAvatar/GridAvatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridAvatar.d.ts","sourceRoot":"","sources":["../../../src/components/GridAvatar/GridAvatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxE,OAAO,EAAmB,KAAK,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AAG/F,OAAO,EAAE,oBAAoB,EAAE,CAAC;AAEhC,eAAO,MAAM,wBAAwB,KAAK,CAAC;AAE3C,eAAO,MAAM,eAAe,IAAI,CAAC;AAEjC,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,cAAc,EAAE,KAAK,GAAG,cAAc,CAAC;IACnF;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,EAAE,CAAC;CAChB;AAID;;GAEG;AACH,eAAO,MAAM,UAAU;uDAMpB,eAAe;;CAuBjB,CAAC"}

package/dist/components/GridAvatar/GridAvatarBadge/GridAvatarBadge.d.ts

@@ -2,3 +2,4 @@ import * as React from 'react';
 import { type ImageBaseBadgeProps } from '../../ImageBase/ImageBase';
 export type GridAvatarBadgeProps = ImageBaseBadgeProps;
 export declare const GridAvatarBadge: ({ className, ...restProps }: GridAvatarBadgeProps) => React.JSX.Element;
+//# sourceMappingURL=GridAvatarBadge.d.ts.map

package/dist/components/GridAvatar/GridAvatarBadge/GridAvatarBadge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridAvatarBadge.d.ts","sourceRoot":"","sources":["../../../../src/components/GridAvatar/GridAvatarBadge/GridAvatarBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAa,KAAK,mBAAmB,EAAoB,MAAM,2BAA2B,CAAC;AAGlG,MAAM,MAAM,oBAAoB,GAAG,mBAAmB,CAAC;AAEvD,eAAO,MAAM,eAAe,gCAAiC,oBAAoB,sBAYhF,CAAC"}

package/dist/components/Group/Group.d.ts

@@ -25,3 +25,4 @@ export interface GroupProps extends HTMLAttributesWithRootRef<HTMLElement> {
  * @see https://vkcom.github.io/VKUI/#/Group
  */
 export declare const Group: ({ header, description, children, separator, mode: modeProps, padding, tabIndex: tabIndexProp, ...restProps }: GroupProps) => React.JSX.Element;
+//# sourceMappingURL=Group.d.ts.map

package/dist/components/Group/Group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Group.d.ts","sourceRoot":"","sources":["../../../src/components/Group/Group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAsDxD,MAAM,WAAW,UAAW,SAAQ,yBAAyB,CAAC,WAAW,CAAC;IACxE,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IACrC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;CACrB;AAGD;;GAEG;AACH,eAAO,MAAM,KAAK,iHASf,UAAU,sBA6DZ,CAAC"}

package/dist/components/Header/Header.d.ts

@@ -18,3 +18,4 @@ export interface HeaderProps extends HTMLAttributesWithRootRef<HTMLElement> {
  * @see https://vkcom.github.io/VKUI/#/Header
  */
 export declare const Header: ({ mode, size, children, subtitle, indicator, aside, multiline, ...restProps }: HeaderProps) => React.JSX.Element;
+//# sourceMappingURL=Header.d.ts.map

package/dist/components/Header/Header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/components/Header/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAgB,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAStE,MAAM,WAAW,WAAY,SAAQ,yBAAyB,CAAC,WAAW,CAAC;IACzE,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;IAC5C,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AA6CD;;GAEG;AACH,eAAO,MAAM,MAAM,kFAShB,WAAW,sBAuDb,CAAC"}

package/dist/components/Header/Header.js

@@ -77,11 +77,10 @@ var stylesMode = {
         "aside",
         "multiline"
     ]);
-    var platform = usePlatform();
     return /*#__PURE__*/ React.createElement(RootComponent, _object_spread_props(_object_spread({
         Component: "header"
     }, restProps), {
-        baseClassName: classNames("vkuiHeader", platform === Platform.IOS && "vkuiHeader--ios", stylesMode[mode], isPrimitiveReactNode(indicator) && "vkuiHeader--pi", hasReactNode(subtitle) && "vkuiHeader--with-subtitle")
+        baseClassName: classNames("vkuiHeader", stylesMode[mode], size === "large" && "vkuiHeader--large", isPrimitiveReactNode(indicator) && "vkuiHeader--pi", hasReactNode(subtitle) && "vkuiHeader--with-subtitle")
     }), /*#__PURE__*/ React.createElement("div", {
         className: "vkuiHeader__main"
     }, /*#__PURE__*/ React.createElement(HeaderContent, {

package/dist/components/Header/Header.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Header/Header.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasComponent, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Header.module.css';\n\nexport interface HeaderProps extends HTMLAttributesWithRootRef<HTMLElement> {\n  mode?: 'primary' | 'secondary' | 'tertiary';\n  size?: 'regular' | 'large';\n  subtitle?: React.ReactNode;\n  /**\n   * Допускаются иконки, текст, Link\n   */\n  aside?: React.ReactNode;\n  /**\n   * Допускаются текст, Indicator\n   */\n  indicator?: React.ReactNode;\n  multiline?: boolean;\n}\n\ntype HeaderContentProps = Pick<HeaderProps, 'children' | 'mode' | 'size' | 'className'> &\n  HasComponent;\n\nconst HeaderContent = ({ mode, size, ...restProps }: HeaderContentProps) => {\n  const isLarge = size === 'large';\n\n  const platform = usePlatform();\n  if (platform === Platform.IOS) {\n    switch (mode) {\n      case 'primary':\n        return isLarge ? (\n          <Title level=\"2\" weight=\"2\" {...restProps} />\n        ) : (\n          <Title weight=\"1\" level=\"3\" {...restProps} />\n        );\n      case 'secondary':\n        return <Footnote weight=\"1\" caps {...restProps} />;\n      case 'tertiary':\n        return <Title weight=\"1\" level=\"3\" {...restProps} />;\n    }\n  }\n\n  switch (mode) {\n    case 'primary':\n      return isLarge ? (\n        <Title level=\"2\" weight=\"2\" {...restProps} />\n      ) : (\n        <Headline weight=\"2\" {...restProps} />\n      );\n    case 'secondary':\n      return <Footnote weight=\"1\" caps {...restProps} />;\n    case 'tertiary':\n      return <Headline weight=\"2\" {...restProps} />;\n  }\n\n  return null;\n};\n\nconst stylesMode = {\n  primary: styles['Header--mode-primary'],\n  secondary: styles['Header--mode-secondary'],\n  tertiary: styles['Header--mode-tertiary'],\n};\n/**\n * @see https://vkcom.github.io/VKUI/#/Header\n */\nexport const Header = ({\n  mode = 'primary',\n  size = 'regular',\n  children,\n  subtitle,\n  indicator,\n  aside,\n  multiline,\n  ...restProps\n}: HeaderProps) => {\n  const platform = usePlatform();\n\n  return (\n    <RootComponent\n      Component=\"header\"\n      {...restProps}\n      baseClassName={classNames(\n        styles['Header'],\n        platform === Platform.IOS && styles['Header--ios'],\n        stylesMode[mode],\n        isPrimitiveReactNode(indicator) && styles['Header--pi'],\n        hasReactNode(subtitle) && styles['Header--with-subtitle'],\n      )}\n    >\n      <div className={styles['Header__main']}>\n        <HeaderContent\n          className={styles['Header__content']}\n          Component=\"span\"\n          mode={mode}\n          size={size}\n        >\n          <span\n            className={classNames(\n              styles['Header__content-in'],\n              multiline && styles['Header__content--multiline'],\n            )}\n          >\n            {children}\n          </span>\n          {hasReactNode(indicator) && (\n            <Footnote className={styles['Header__indicator']} weight=\"2\">\n              {indicator}\n            </Footnote>\n          )}\n        </HeaderContent>\n\n        {hasReactNode(subtitle) && (\n          <Subhead\n            className={classNames(\n              styles['Header__subtitle'],\n              multiline && styles['Header__content--multiline'],\n            )}\n            Component=\"span\"\n          >\n            {subtitle}\n          </Subhead>\n        )}\n      </div>\n\n      {hasReactNode(aside) && (\n        <Paragraph className={styles['Header__aside']} Component=\"span\">\n          {aside}\n        </Paragraph>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","hasReactNode","isPrimitiveReactNode","usePlatform","Platform","RootComponent","Footnote","Headline","Paragraph","Subhead","Title","HeaderContent","mode","size","restProps","isLarge","platform","IOS","level","weight","caps","stylesMode","primary","secondary","tertiary","Header","children","subtitle","indicator","aside","multiline","Component","baseClassName","div","className","span"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,EAAEC,oBAAoB,QAAQ,kBAAkB;AACjF,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,SAAS,QAAQ,oCAAoC;AAC9D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,KAAK,QAAQ,4BAA4B;AAqBlD,IAAMC,gBAAgB;QAAGC,cAAAA,MAAMC,cAAAA,MAASC;QAAfF;QAAMC;;IAC7B,IAAME,UAAUF,SAAS;IAEzB,IAAMG,WAAWb;IACjB,IAAIa,aAAaZ,SAASa,GAAG,EAAE;QAC7B,OAAQL;YACN,KAAK;gBACH,OAAOG,wBACL,oBAACL;oBAAMQ,OAAM;oBAAIC,QAAO;mBAAQL,4BAEhC,oBAACJ;oBAAMS,QAAO;oBAAID,OAAM;mBAAQJ;YAEpC,KAAK;gBACH,qBAAO,oBAACR;oBAASa,QAAO;oBAAIC,MAAAA;mBAASN;YACvC,KAAK;gBACH,qBAAO,oBAACJ;oBAAMS,QAAO;oBAAID,OAAM;mBAAQJ;QAC3C;IACF;IAEA,OAAQF;QACN,KAAK;YACH,OAAOG,wBACL,oBAACL;gBAAMQ,OAAM;gBAAIC,QAAO;eAAQL,4BAEhC,oBAACP;gBAASY,QAAO;eAAQL;QAE7B,KAAK;YACH,qBAAO,oBAACR;gBAASa,QAAO;gBAAIC,MAAAA;eAASN;QACvC,KAAK;YACH,qBAAO,oBAACP;gBAASY,QAAO;eAAQL;IACpC;IAEA,OAAO;AACT;AAEA,IAAMO,aAAa;IACjBC,OAAO;IACPC,SAAS;IACTC,QAAQ;AACV;AACA;;CAEC,GACD,OAAO,IAAMC,SAAS;6BACpBb,MAAAA,gCAAO,8CACPC,MAAAA,gCAAO,yBACPa,kBAAAA,UACAC,kBAAAA,UACAC,mBAAAA,WACAC,eAAAA,OACAC,mBAAAA,WACGhB;QAPHF;QACAC;QACAa;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAMd,WAAWb;IAEjB,qBACE,oBAACE;QACC0B,WAAU;OACNjB;QACJkB,eAAehC,yBAEbgB,aAAaZ,SAASa,GAAG,uBACzBI,UAAU,CAACT,KAAK,EAChBV,qBAAqB0B,gCACrB3B,aAAa0B;sBAGf,oBAACM;QAAIC,SAAS;qBACZ,oBAACvB;QACCuB,SAAS;QACTH,WAAU;QACVnB,MAAMA;QACNC,MAAMA;qBAEN,oBAACsB;QACCD,WAAWlC,qCAET8B;OAGDJ,WAEFzB,aAAa2B,4BACZ,oBAACtB;QAAS4B,SAAS;QAA+Bf,QAAO;OACtDS,aAKN3B,aAAa0B,2BACZ,oBAAClB;QACCyB,WAAWlC,mCAET8B;QAEFC,WAAU;OAETJ,YAKN1B,aAAa4B,wBACZ,oBAACrB;QAAU0B,SAAS;QAA2BH,WAAU;OACtDF;AAKX,EAAE"}
+{"version":3,"sources":["../../../src/components/Header/Header.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasComponent, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Header.module.css';\n\nexport interface HeaderProps extends HTMLAttributesWithRootRef<HTMLElement> {\n  mode?: 'primary' | 'secondary' | 'tertiary';\n  size?: 'regular' | 'large';\n  subtitle?: React.ReactNode;\n  /**\n   * Допускаются иконки, текст, Link\n   */\n  aside?: React.ReactNode;\n  /**\n   * Допускаются текст, Indicator\n   */\n  indicator?: React.ReactNode;\n  multiline?: boolean;\n}\n\ntype HeaderContentProps = Pick<HeaderProps, 'children' | 'mode' | 'size' | 'className'> &\n  HasComponent;\n\nconst HeaderContent = ({ mode, size, ...restProps }: HeaderContentProps) => {\n  const isLarge = size === 'large';\n\n  const platform = usePlatform();\n  if (platform === Platform.IOS) {\n    switch (mode) {\n      case 'primary':\n        return isLarge ? (\n          <Title level=\"2\" weight=\"2\" {...restProps} />\n        ) : (\n          <Title weight=\"1\" level=\"3\" {...restProps} />\n        );\n      case 'secondary':\n        return <Footnote weight=\"1\" caps {...restProps} />;\n      case 'tertiary':\n        return <Title weight=\"1\" level=\"3\" {...restProps} />;\n    }\n  }\n\n  switch (mode) {\n    case 'primary':\n      return isLarge ? (\n        <Title level=\"2\" weight=\"2\" {...restProps} />\n      ) : (\n        <Headline weight=\"2\" {...restProps} />\n      );\n    case 'secondary':\n      return <Footnote weight=\"1\" caps {...restProps} />;\n    case 'tertiary':\n      return <Headline weight=\"2\" {...restProps} />;\n  }\n\n  return null;\n};\n\nconst stylesMode = {\n  primary: styles['Header--mode-primary'],\n  secondary: styles['Header--mode-secondary'],\n  tertiary: styles['Header--mode-tertiary'],\n};\n/**\n * @see https://vkcom.github.io/VKUI/#/Header\n */\nexport const Header = ({\n  mode = 'primary',\n  size = 'regular',\n  children,\n  subtitle,\n  indicator,\n  aside,\n  multiline,\n  ...restProps\n}: HeaderProps) => {\n  return (\n    <RootComponent\n      Component=\"header\"\n      {...restProps}\n      baseClassName={classNames(\n        styles['Header'],\n        stylesMode[mode],\n        size === 'large' && styles['Header--large'],\n        isPrimitiveReactNode(indicator) && styles['Header--pi'],\n        hasReactNode(subtitle) && styles['Header--with-subtitle'],\n      )}\n    >\n      <div className={styles['Header__main']}>\n        <HeaderContent\n          className={styles['Header__content']}\n          Component=\"span\"\n          mode={mode}\n          size={size}\n        >\n          <span\n            className={classNames(\n              styles['Header__content-in'],\n              multiline && styles['Header__content--multiline'],\n            )}\n          >\n            {children}\n          </span>\n          {hasReactNode(indicator) && (\n            <Footnote className={styles['Header__indicator']} weight=\"2\">\n              {indicator}\n            </Footnote>\n          )}\n        </HeaderContent>\n\n        {hasReactNode(subtitle) && (\n          <Subhead\n            className={classNames(\n              styles['Header__subtitle'],\n              multiline && styles['Header__content--multiline'],\n            )}\n            Component=\"span\"\n          >\n            {subtitle}\n          </Subhead>\n        )}\n      </div>\n\n      {hasReactNode(aside) && (\n        <Paragraph className={styles['Header__aside']} Component=\"span\">\n          {aside}\n        </Paragraph>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","hasReactNode","isPrimitiveReactNode","usePlatform","Platform","RootComponent","Footnote","Headline","Paragraph","Subhead","Title","HeaderContent","mode","size","restProps","isLarge","platform","IOS","level","weight","caps","stylesMode","primary","secondary","tertiary","Header","children","subtitle","indicator","aside","multiline","Component","baseClassName","div","className","span"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,EAAEC,oBAAoB,QAAQ,kBAAkB;AACjF,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,SAAS,QAAQ,oCAAoC;AAC9D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,KAAK,QAAQ,4BAA4B;AAqBlD,IAAMC,gBAAgB;QAAGC,cAAAA,MAAMC,cAAAA,MAASC;QAAfF;QAAMC;;IAC7B,IAAME,UAAUF,SAAS;IAEzB,IAAMG,WAAWb;IACjB,IAAIa,aAAaZ,SAASa,GAAG,EAAE;QAC7B,OAAQL;YACN,KAAK;gBACH,OAAOG,wBACL,oBAACL;oBAAMQ,OAAM;oBAAIC,QAAO;mBAAQL,4BAEhC,oBAACJ;oBAAMS,QAAO;oBAAID,OAAM;mBAAQJ;YAEpC,KAAK;gBACH,qBAAO,oBAACR;oBAASa,QAAO;oBAAIC,MAAAA;mBAASN;YACvC,KAAK;gBACH,qBAAO,oBAACJ;oBAAMS,QAAO;oBAAID,OAAM;mBAAQJ;QAC3C;IACF;IAEA,OAAQF;QACN,KAAK;YACH,OAAOG,wBACL,oBAACL;gBAAMQ,OAAM;gBAAIC,QAAO;eAAQL,4BAEhC,oBAACP;gBAASY,QAAO;eAAQL;QAE7B,KAAK;YACH,qBAAO,oBAACR;gBAASa,QAAO;gBAAIC,MAAAA;eAASN;QACvC,KAAK;YACH,qBAAO,oBAACP;gBAASY,QAAO;eAAQL;IACpC;IAEA,OAAO;AACT;AAEA,IAAMO,aAAa;IACjBC,OAAO;IACPC,SAAS;IACTC,QAAQ;AACV;AACA;;CAEC,GACD,OAAO,IAAMC,SAAS;6BACpBb,MAAAA,gCAAO,8CACPC,MAAAA,gCAAO,yBACPa,kBAAAA,UACAC,kBAAAA,UACAC,mBAAAA,WACAC,eAAAA,OACAC,mBAAAA,WACGhB;QAPHF;QACAC;QACAa;QACAC;QACAC;QACAC;QACAC;;IAGA,qBACE,oBAACzB;QACC0B,WAAU;OACNjB;QACJkB,eAAehC,yBAEbqB,UAAU,CAACT,KAAK,EAChBC,SAAS,gCACTX,qBAAqB0B,gCACrB3B,aAAa0B;sBAGf,oBAACM;QAAIC,SAAS;qBACZ,oBAACvB;QACCuB,SAAS;QACTH,WAAU;QACVnB,MAAMA;QACNC,MAAMA;qBAEN,oBAACsB;QACCD,WAAWlC,qCAET8B;OAGDJ,WAEFzB,aAAa2B,4BACZ,oBAACtB;QAAS4B,SAAS;QAA+Bf,QAAO;OACtDS,aAKN3B,aAAa0B,2BACZ,oBAAClB;QACCyB,WAAWlC,mCAET8B;QAEFC,WAAU;OAETJ,YAKN1B,aAAa4B,wBACZ,oBAACrB;QAAU0B,SAAS;QAA2BH,WAAU;OACtDF;AAKX,EAAE"}

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

@@ -20,3 +20,4 @@ export interface HorizontalCellProps extends React.AnchorHTMLAttributes<HTMLElem
  * @see https://vkcom.github.io/VKUI/#/HorizontalCell
  */
 export declare const HorizontalCell: ({ className, header, style, subtitle, size, children, getRootRef, getRef, extraSubtitle, ...restProps }: HorizontalCellProps) => React.JSX.Element;
+//# sourceMappingURL=HorizontalCell.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HorizontalCell.d.ts","sourceRoot":"","sources":["../../../src/components/HorizontalCell/HorizontalCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,UAAU,EAA6B,MAAM,aAAa,CAAC;AA0B1F,MAAM,WAAW,mBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,WAAW,CAAC,EAC7C,UAAU,CAAC,cAAc,CAAC,EAC1B,MAAM,CAAC,cAAc,CAAC,EACtB,YAAY;IACd,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,cAAc,4GAWxB,mBAAmB,sBAyBrB,CAAC"}

package/dist/components/HorizontalCell/HorizontalCell.js

@@ -44,7 +44,7 @@ var CellTypography = function(_param) {
         getRootRef: getRef
     }, restProps), hasReactNode(children) && /*#__PURE__*/ React.createElement("div", {
         className: "vkuiHorizontalCell__image"
-    }, children), /*#__PURE__*/ React.createElement("div", {
+    }, children), (header || subtitle || extraSubtitle) && /*#__PURE__*/ React.createElement("div", {
         className: "vkuiHorizontalCell__content"
     }, hasReactNode(header) && /*#__PURE__*/ React.createElement(CellTypography, {
         size: size

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/HorizontalCell/HorizontalCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { HasComponent, HasRef, HasRootRef, HTMLAttributesWithRootRef } from '../../types';\nimport { Avatar } from '../Avatar/Avatar';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './HorizontalCell.module.css';\n\nconst stylesSize = {\n  s: styles['HorizontalCell--size-s'],\n  m: styles['HorizontalCell--size-m'],\n  l: styles['HorizontalCell--size-l'],\n};\n\ninterface CellTypographyProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  size: HorizontalCellProps['size'];\n}\n\nconst CellTypography = ({ size, children, ...restProps }: CellTypographyProps) => {\n  return size === 's' ? (\n    <Caption {...restProps}>{children}</Caption>\n  ) : (\n    <Subhead {...restProps}>{children}</Subhead>\n  );\n};\n\nexport interface HorizontalCellProps\n  extends React.AnchorHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement>,\n    HasComponent {\n  size?: 's' | 'm' | 'l';\n  /**\n   * Заголовок\n   */\n  header?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children`.\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children` и `subtitle`.\n   */\n  extraSubtitle?: React.ReactNode;\n  disabled?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/HorizontalCell\n */\nexport const HorizontalCell = ({\n  className,\n  header,\n  style,\n  subtitle,\n  size = 's',\n  children = <Avatar size={56} />,\n  getRootRef,\n  getRef,\n  extraSubtitle,\n  ...restProps\n}: HorizontalCellProps) => {\n  return (\n    <div\n      ref={getRootRef}\n      style={style}\n      className={classNames(styles['HorizontalCell'], stylesSize[size], className)}\n    >\n      <Tappable className={styles['HorizontalCell__body']} getRootRef={getRef} {...restProps}>\n        {hasReactNode(children) && (\n          <div className={styles['HorizontalCell__image']}>{children}</div>\n        )}\n        <div className={styles['HorizontalCell__content']}>\n          {hasReactNode(header) && <CellTypography size={size}>{header}</CellTypography>}\n          {hasReactNode(subtitle) && (\n            <Footnote className={styles['HorizontalCell__subtitle']}>{subtitle}</Footnote>\n          )}\n          {hasReactNode(extraSubtitle) && (\n            <Footnote className={styles['HorizontalCell__subtitle']}>{extraSubtitle}</Footnote>\n          )}\n        </div>\n      </Tappable>\n    </div>\n  );\n};\n"],"names":["React","classNames","hasReactNode","Avatar","Tappable","Caption","Footnote","Subhead","stylesSize","s","m","l","CellTypography","size","children","restProps","HorizontalCell","className","header","style","subtitle","getRootRef","getRef","extraSubtitle","div","ref"],"mappings":";;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAE3D,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AAGxD,IAAMC,aAAa;IACjBC,CAAC;IACDC,CAAC;IACDC,CAAC;AACH;AAMA,IAAMC,iBAAiB;QAAGC,cAAAA,MAAMC,kBAAAA,UAAaC;QAAnBF;QAAMC;;IAC9B,OAAOD,SAAS,oBACd,oBAACR,SAAYU,WAAYD,0BAEzB,oBAACP,SAAYQ,WAAYD;AAE7B;AAuBA;;CAEC,GACD,OAAO,IAAME,iBAAiB;QAC5BC,mBAAAA,WACAC,gBAAAA,QACAC,eAAAA,OACAC,kBAAAA,+BACAP,MAAAA,gCAAO,4CACPC,UAAAA,sDAAW,oBAACX;QAAOU,MAAM;0BACzBQ,oBAAAA,YACAC,gBAAAA,QACAC,uBAAAA,eACGR;QATHE;QACAC;QACAC;QACAC;QACAP;QACAC;QACAO;QACAC;QACAC;;IAGA,qBACE,oBAACC;QACCC,KAAKJ;QACLF,OAAOA;QACPF,WAAWhB,iCAAqCO,UAAU,CAACK,KAAK,EAAEI;qBAElE,oBAACb;QAASa,SAAS;QAAkCI,YAAYC;OAAYP,YAC1Eb,aAAaY,2BACZ,oBAACU;QAAIP,SAAS;OAAoCH,yBAEpD,oBAACU;QAAIP,SAAS;OACXf,aAAagB,yBAAW,oBAACN;QAAeC,MAAMA;OAAOK,SACrDhB,aAAakB,2BACZ,oBAACd;QAASW,SAAS;OAAuCG,WAE3DlB,aAAaqB,gCACZ,oBAACjB;QAASW,SAAS;OAAuCM;AAMtE,EAAE"}
+{"version":3,"sources":["../../../src/components/HorizontalCell/HorizontalCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { HasComponent, HasRef, HasRootRef, HTMLAttributesWithRootRef } from '../../types';\nimport { Avatar } from '../Avatar/Avatar';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './HorizontalCell.module.css';\n\nconst stylesSize = {\n  s: styles['HorizontalCell--size-s'],\n  m: styles['HorizontalCell--size-m'],\n  l: styles['HorizontalCell--size-l'],\n};\n\ninterface CellTypographyProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  size: HorizontalCellProps['size'];\n}\n\nconst CellTypography = ({ size, children, ...restProps }: CellTypographyProps) => {\n  return size === 's' ? (\n    <Caption {...restProps}>{children}</Caption>\n  ) : (\n    <Subhead {...restProps}>{children}</Subhead>\n  );\n};\n\nexport interface HorizontalCellProps\n  extends React.AnchorHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement>,\n    HasComponent {\n  size?: 's' | 'm' | 'l';\n  /**\n   * Заголовок\n   */\n  header?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children`.\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children` и `subtitle`.\n   */\n  extraSubtitle?: React.ReactNode;\n  disabled?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/HorizontalCell\n */\nexport const HorizontalCell = ({\n  className,\n  header,\n  style,\n  subtitle,\n  size = 's',\n  children = <Avatar size={56} />,\n  getRootRef,\n  getRef,\n  extraSubtitle,\n  ...restProps\n}: HorizontalCellProps) => {\n  return (\n    <div\n      ref={getRootRef}\n      style={style}\n      className={classNames(styles['HorizontalCell'], stylesSize[size], className)}\n    >\n      <Tappable className={styles['HorizontalCell__body']} getRootRef={getRef} {...restProps}>\n        {hasReactNode(children) && (\n          <div className={styles['HorizontalCell__image']}>{children}</div>\n        )}\n        {(header || subtitle || extraSubtitle) && (\n          <div className={styles['HorizontalCell__content']}>\n            {hasReactNode(header) && <CellTypography size={size}>{header}</CellTypography>}\n            {hasReactNode(subtitle) && (\n              <Footnote className={styles['HorizontalCell__subtitle']}>{subtitle}</Footnote>\n            )}\n            {hasReactNode(extraSubtitle) && (\n              <Footnote className={styles['HorizontalCell__subtitle']}>{extraSubtitle}</Footnote>\n            )}\n          </div>\n        )}\n      </Tappable>\n    </div>\n  );\n};\n"],"names":["React","classNames","hasReactNode","Avatar","Tappable","Caption","Footnote","Subhead","stylesSize","s","m","l","CellTypography","size","children","restProps","HorizontalCell","className","header","style","subtitle","getRootRef","getRef","extraSubtitle","div","ref"],"mappings":";;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAE3D,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AAGxD,IAAMC,aAAa;IACjBC,CAAC;IACDC,CAAC;IACDC,CAAC;AACH;AAMA,IAAMC,iBAAiB;QAAGC,cAAAA,MAAMC,kBAAAA,UAAaC;QAAnBF;QAAMC;;IAC9B,OAAOD,SAAS,oBACd,oBAACR,SAAYU,WAAYD,0BAEzB,oBAACP,SAAYQ,WAAYD;AAE7B;AAuBA;;CAEC,GACD,OAAO,IAAME,iBAAiB;QAC5BC,mBAAAA,WACAC,gBAAAA,QACAC,eAAAA,OACAC,kBAAAA,+BACAP,MAAAA,gCAAO,4CACPC,UAAAA,sDAAW,oBAACX;QAAOU,MAAM;0BACzBQ,oBAAAA,YACAC,gBAAAA,QACAC,uBAAAA,eACGR;QATHE;QACAC;QACAC;QACAC;QACAP;QACAC;QACAO;QACAC;QACAC;;IAGA,qBACE,oBAACC;QACCC,KAAKJ;QACLF,OAAOA;QACPF,WAAWhB,iCAAqCO,UAAU,CAACK,KAAK,EAAEI;qBAElE,oBAACb;QAASa,SAAS;QAAkCI,YAAYC;OAAYP,YAC1Eb,aAAaY,2BACZ,oBAACU;QAAIP,SAAS;OAAoCH,WAEnD,AAACI,CAAAA,UAAUE,YAAYG,aAAY,mBAClC,oBAACC;QAAIP,SAAS;OACXf,aAAagB,yBAAW,oBAACN;QAAeC,MAAMA;OAAOK,SACrDhB,aAAakB,2BACZ,oBAACd;QAASW,SAAS;OAAuCG,WAE3DlB,aAAaqB,gCACZ,oBAACjB;QAASW,SAAS;OAAuCM;AAOxE,EAAE"}

package/dist/components/HorizontalCellShowMore/HorizontalCellShowMore.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { HasRef, HasRootRef, LiteralUnion } from '../../types';
 import type { ImageBaseSize } from '../ImageBase/ImageBase';
 import { TappableProps } from '../Tappable/Tappable';
@@ -33,3 +33,4 @@ export interface HorizontalCellShowMoreProps extends Omit<TappableProps, 'getRoo
     compensateLastCellIndent?: boolean;
 }
 export declare const HorizontalCellShowMore: ({ className, style, getRef, getRootRef, compensateLastCellIndent, height, size, children, ...restProps }: HorizontalCellShowMoreProps) => React.JSX.Element;
+//# sourceMappingURL=HorizontalCellShowMore.d.ts.map

package/dist/components/HorizontalCellShowMore/HorizontalCellShowMore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HorizontalCellShowMore.d.ts","sourceRoot":"","sources":["../../../src/components/HorizontalCellShowMore/HorizontalCellShowMore.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC/D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAY,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAC/D,OAAO,EAAW,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAStE,MAAM,WAAW,2BACf,SAAQ,IAAI,CAAC,aAAa,EAAE,YAAY,GAAG,MAAM,CAAC,EAChD,MAAM,CAAC,WAAW,CAAC,EACnB,UAAU,CAAC,cAAc,CAAC;IAC5B;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IAC7C;;;OAGG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB;;;SAGK;IACL,QAAQ,CAAC,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC;IACpC;;;;OAIG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC;AAED,eAAO,MAAM,sBAAsB,6GAUhC,2BAA2B,sBA+B7B,CAAC"}

package/dist/components/HorizontalCellShowMore/HorizontalCellShowMore.js

@@ -1,6 +1,6 @@
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
-import React from "react";
+import * as React from "react";
 import { Icon28ChevronRightCircle } from "@vkontakte/icons";
 import { classNames } from "@vkontakte/vkjs";
 import { Tappable } from "../Tappable/Tappable";

package/dist/components/HorizontalCellShowMore/HorizontalCellShowMore.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/HorizontalCellShowMore/HorizontalCellShowMore.tsx"],"sourcesContent":["import React from 'react';\nimport { Icon28ChevronRightCircle } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRef, HasRootRef, LiteralUnion } from '../../types';\nimport type { ImageBaseSize } from '../ImageBase/ImageBase';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Subhead, SubheadProps } from '../Typography/Subhead/Subhead';\nimport styles from './HorizontalCellShowMore.module.css';\n\nconst sizeClassNames = {\n  s: styles['HorizontalCellShowMore--size-s'],\n  m: styles['HorizontalCellShowMore--size-m'],\n  l: styles['HorizontalCellShowMore--size-l'],\n};\n\nexport interface HorizontalCellShowMoreProps\n  extends Omit<TappableProps, 'getRootRef' | 'size'>,\n    HasRef<HTMLElement>,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Задаёт высоту компонента. Должeн соответствовать размеру картинок\n   * внутри соседних `HorizontalCell` компонентов.\n   *\n   * Используйте размеры заданные дизайн-системой (см. типы).\n   *\n   * > ⚠️ Использование кастомного размера – это пограничный кейс.\n   *\n   * Игнорируется если `size='s'`.\n   */\n  height?: LiteralUnion<ImageBaseSize, number>;\n  /**\n   * Задаёт размер компонента. Аналогичен такому же пропу у [HorizontalCell](https://vkcom.github.io/VKUI/#/HorizontalCellShowMore?id=props).\n   * Должен соответствовать значению пропа `size` соседних `HorizontalCell`.\n   */\n  size?: 's' | 'm' | 'l';\n  /**\n   * Предназначен для отрисовки текста.\n   * По умолчанию для `size='s'` содержит текст `Все` для других размеров `Показать все`.\n   * */\n  children?: SubheadProps['children'];\n  /**\n   * Позволяет компенсировать особый правый отступ у предшевствующего элементa `HorizontalCell`,\n   * в том случае, если тот элемент последний в родителе.\n   * Если `HorizontalCellShowMore` находится на одном уровне с остальными `HorizontalCell`, то этот проп использовать не нужно.\n   */\n  compensateLastCellIndent?: boolean;\n}\n\nexport const HorizontalCellShowMore = ({\n  className,\n  style,\n  getRef,\n  getRootRef,\n  compensateLastCellIndent,\n  height,\n  size = 's',\n  children = size === 's' ? 'Все' : 'Показать все',\n  ...restProps\n}: HorizontalCellShowMoreProps) => {\n  return (\n    <div\n      style={style}\n      className={classNames(\n        styles['HorizontalCellShowMore'],\n        compensateLastCellIndent && styles['HorizontalCellShowMore--compensate-last-cell-indent'],\n        sizeClassNames[size],\n        className,\n      )}\n      ref={getRootRef}\n    >\n      <Tappable\n        style={size === 's' ? undefined : { height }}\n        className={styles['HorizontalCellShowMore__body']}\n        getRootRef={getRef}\n        activeMode=\"opacity\"\n        hoverMode=\"opacity\"\n        {...restProps}\n      >\n        <Icon28ChevronRightCircle\n          className={styles['HorizontalCellShowMore__icon']}\n          fill=\"currentColor\"\n        />\n\n        <Subhead className={styles['HorizontalCellShowMore__text']} weight=\"2\">\n          {children}\n        </Subhead>\n      </Tappable>\n    </div>\n  );\n};\n"],"names":["React","Icon28ChevronRightCircle","classNames","Tappable","Subhead","sizeClassNames","s","m","l","HorizontalCellShowMore","className","style","getRef","getRootRef","compensateLastCellIndent","height","size","children","restProps","div","ref","undefined","activeMode","hoverMode","fill","weight"],"mappings":";;AAAA,OAAOA,WAAW,QAAQ;AAC1B,SAASC,wBAAwB,QAAQ,mBAAmB;AAC5D,SAASC,UAAU,QAAQ,kBAAkB;AAG7C,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,SAASC,OAAO,QAAsB,gCAAgC;AAGtE,IAAMC,iBAAiB;IACrBC,CAAC;IACDC,CAAC;IACDC,CAAC;AACH;AAmCA,OAAO,IAAMC,yBAAyB;QACpCC,mBAAAA,WACAC,eAAAA,OACAC,gBAAAA,QACAC,oBAAAA,YACAC,kCAAAA,0BACAC,gBAAAA,6BACAC,MAAAA,gCAAO,4CACPC,UAAAA,wCAAWD,SAAS,MAAM,QAAQ,kCAC/BE;QARHR;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,qBACE,oBAACE;QACCR,OAAOA;QACPD,WAAWR,yCAETY,uFACAT,cAAc,CAACW,KAAK,EACpBN;QAEFU,KAAKP;qBAEL,oBAACV;QACCQ,OAAOK,SAAS,MAAMK,YAAY;YAAEN,QAAAA;QAAO;QAC3CL,SAAS;QACTG,YAAYD;QACZU,YAAW;QACXC,WAAU;OACNL,0BAEJ,oBAACjB;QACCS,SAAS;QACTc,MAAK;sBAGP,oBAACpB;QAAQM,SAAS;QAA0Ce,QAAO;OAChER;AAKX,EAAE"}
+{"version":3,"sources":["../../../src/components/HorizontalCellShowMore/HorizontalCellShowMore.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon28ChevronRightCircle } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRef, HasRootRef, LiteralUnion } from '../../types';\nimport type { ImageBaseSize } from '../ImageBase/ImageBase';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Subhead, SubheadProps } from '../Typography/Subhead/Subhead';\nimport styles from './HorizontalCellShowMore.module.css';\n\nconst sizeClassNames = {\n  s: styles['HorizontalCellShowMore--size-s'],\n  m: styles['HorizontalCellShowMore--size-m'],\n  l: styles['HorizontalCellShowMore--size-l'],\n};\n\nexport interface HorizontalCellShowMoreProps\n  extends Omit<TappableProps, 'getRootRef' | 'size'>,\n    HasRef<HTMLElement>,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Задаёт высоту компонента. Должeн соответствовать размеру картинок\n   * внутри соседних `HorizontalCell` компонентов.\n   *\n   * Используйте размеры заданные дизайн-системой (см. типы).\n   *\n   * > ⚠️ Использование кастомного размера – это пограничный кейс.\n   *\n   * Игнорируется если `size='s'`.\n   */\n  height?: LiteralUnion<ImageBaseSize, number>;\n  /**\n   * Задаёт размер компонента. Аналогичен такому же пропу у [HorizontalCell](https://vkcom.github.io/VKUI/#/HorizontalCellShowMore?id=props).\n   * Должен соответствовать значению пропа `size` соседних `HorizontalCell`.\n   */\n  size?: 's' | 'm' | 'l';\n  /**\n   * Предназначен для отрисовки текста.\n   * По умолчанию для `size='s'` содержит текст `Все` для других размеров `Показать все`.\n   * */\n  children?: SubheadProps['children'];\n  /**\n   * Позволяет компенсировать особый правый отступ у предшевствующего элементa `HorizontalCell`,\n   * в том случае, если тот элемент последний в родителе.\n   * Если `HorizontalCellShowMore` находится на одном уровне с остальными `HorizontalCell`, то этот проп использовать не нужно.\n   */\n  compensateLastCellIndent?: boolean;\n}\n\nexport const HorizontalCellShowMore = ({\n  className,\n  style,\n  getRef,\n  getRootRef,\n  compensateLastCellIndent,\n  height,\n  size = 's',\n  children = size === 's' ? 'Все' : 'Показать все',\n  ...restProps\n}: HorizontalCellShowMoreProps) => {\n  return (\n    <div\n      style={style}\n      className={classNames(\n        styles['HorizontalCellShowMore'],\n        compensateLastCellIndent && styles['HorizontalCellShowMore--compensate-last-cell-indent'],\n        sizeClassNames[size],\n        className,\n      )}\n      ref={getRootRef}\n    >\n      <Tappable\n        style={size === 's' ? undefined : { height }}\n        className={styles['HorizontalCellShowMore__body']}\n        getRootRef={getRef}\n        activeMode=\"opacity\"\n        hoverMode=\"opacity\"\n        {...restProps}\n      >\n        <Icon28ChevronRightCircle\n          className={styles['HorizontalCellShowMore__icon']}\n          fill=\"currentColor\"\n        />\n\n        <Subhead className={styles['HorizontalCellShowMore__text']} weight=\"2\">\n          {children}\n        </Subhead>\n      </Tappable>\n    </div>\n  );\n};\n"],"names":["React","Icon28ChevronRightCircle","classNames","Tappable","Subhead","sizeClassNames","s","m","l","HorizontalCellShowMore","className","style","getRef","getRootRef","compensateLastCellIndent","height","size","children","restProps","div","ref","undefined","activeMode","hoverMode","fill","weight"],"mappings":";;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,QAAQ,mBAAmB;AAC5D,SAASC,UAAU,QAAQ,kBAAkB;AAG7C,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,SAASC,OAAO,QAAsB,gCAAgC;AAGtE,IAAMC,iBAAiB;IACrBC,CAAC;IACDC,CAAC;IACDC,CAAC;AACH;AAmCA,OAAO,IAAMC,yBAAyB;QACpCC,mBAAAA,WACAC,eAAAA,OACAC,gBAAAA,QACAC,oBAAAA,YACAC,kCAAAA,0BACAC,gBAAAA,6BACAC,MAAAA,gCAAO,4CACPC,UAAAA,wCAAWD,SAAS,MAAM,QAAQ,kCAC/BE;QARHR;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,qBACE,oBAACE;QACCR,OAAOA;QACPD,WAAWR,yCAETY,uFACAT,cAAc,CAACW,KAAK,EACpBN;QAEFU,KAAKP;qBAEL,oBAACV;QACCQ,OAAOK,SAAS,MAAMK,YAAY;YAAEN,QAAAA;QAAO;QAC3CL,SAAS;QACTG,YAAYD;QACZU,YAAW;QACXC,WAAU;OACNL,0BAEJ,oBAACjB;QACCS,SAAS;QACTc,MAAK;sBAGP,oBAACpB;QAAQM,SAAS;QAA0Ce,QAAO;OAChER;AAKX,EAAE"}

package/dist/components/HorizontalScroll/HorizontalScroll.d.ts

@@ -27,3 +27,4 @@ export interface HorizontalScrollProps extends HTMLAttributesWithRootRef<HTMLDiv
  * @see https://vkcom.github.io/VKUI/#/HorizontalScroll
  */
 export declare const HorizontalScroll: ({ children, getScrollToLeft, getScrollToRight, showArrows, arrowSize, arrowOffsetY, scrollAnimationDuration, getRef, scrollOnAnyWheel, ...restProps }: HorizontalScrollProps) => React.JSX.Element;
+//# sourceMappingURL=HorizontalScroll.d.ts.map

package/dist/components/HorizontalScroll/HorizontalScroll.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HorizontalScroll.d.ts","sourceRoot":"","sources":["../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,MAAM,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAqBhE,MAAM,MAAM,qBAAqB,GAAG,CAAC,eAAe,EAAE,MAAM,KAAK,MAAM,CAAC;AAExE,MAAM,WAAW,qBACf,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAC/C,MAAM,CAAC,cAAc,CAAC;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,qBAAqB,CAAC;IACxC;;OAEG;IACH,gBAAgB,CAAC,EAAE,qBAAqB,CAAC;IACzC,SAAS,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACtB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAChC,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AA2GD;;GAEG;AACH,eAAO,MAAM,gBAAgB,0JAW1B,qBAAqB,sBA+IvB,CAAC"}

package/dist/components/HorizontalScroll/HorizontalScroll.js

@@ -5,6 +5,7 @@ import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import * as React from "react";
 import { classNames, noop } from "@vkontakte/vkjs";
 import { useAdaptivityHasPointer } from "../../hooks/useAdaptivityHasPointer";
+import { useDirection } from "../../hooks/useDirection";
 import { useEventListener } from "../../hooks/useEventListener";
 import { useExternRef } from "../../hooks/useExternRef";
 import { easeInOutSine } from "../../lib/fx";
@@ -15,11 +16,25 @@ import { ScrollArrow } from "../ScrollArrow/ScrollArrow";
  */ function now() {
     return performance && performance.now ? performance.now() : Date.now();
 }
+/**
+ * Округление к большему по модулю
+ *
+ * ## Пример
+ *
+ * ```ts
+ * import { strict as assert } from 'node:assert';
+ *
+ * assert.equal(roundingAwayFromZero(5.1), 6)
+ * assert.equal(roundingAwayFromZero(-5.1), -6)
+ * ```
+ */ function roundingAwayFromZero(value) {
+    return value > 0 ? Math.ceil(value) : Math.floor(value);
+}
 /**
  * Округляем el.scrollLeft
  * https://github.com/VKCOM/VKUI/pull/2445
  */ var roundUpElementScrollLeft = function(el) {
-    return Math.ceil(el.scrollLeft);
+    return roundingAwayFromZero(el.scrollLeft);
 };
 /**
  * Код анимации скрола, на основе полифила: https://github.com/iamdustan/smoothscroll
@@ -27,19 +42,24 @@ import { ScrollArrow } from "../ScrollArrow/ScrollArrow";
  * @var {number} SCROLL_ONE_FRAME_TIME время анимации скролла
  */ var SCROLL_ONE_FRAME_TIME = 250;
 function doScroll(param) {
-    var scrollElement = param.scrollElement, getScrollPosition = param.getScrollPosition, animationQueue = param.animationQueue, onScrollToRightBorder = param.onScrollToRightBorder, onScrollEnd = param.onScrollEnd, onScrollStart = param.onScrollStart, initialScrollWidth = param.initialScrollWidth, _param_scrollAnimationDuration = param.scrollAnimationDuration, scrollAnimationDuration = _param_scrollAnimationDuration === void 0 ? SCROLL_ONE_FRAME_TIME : _param_scrollAnimationDuration;
+    var scrollElement = param.scrollElement, getScrollPosition = param.getScrollPosition, animationQueue = param.animationQueue, onScrollToEndBorder = param.onScrollToEndBorder, onScrollEnd = param.onScrollEnd, onScrollStart = param.onScrollStart, initialScrollWidth = param.initialScrollWidth, _param_scrollAnimationDuration = param.scrollAnimationDuration, scrollAnimationDuration = _param_scrollAnimationDuration === void 0 ? SCROLL_ONE_FRAME_TIME : _param_scrollAnimationDuration, textDirection = param.textDirection;
     if (!scrollElement || !getScrollPosition) {
         return;
     }
     /**
-   * максимальное значение сдвига влево
-   */ var maxLeft = initialScrollWidth - scrollElement.offsetWidth;
-    var startLeft = roundUpElementScrollLeft(scrollElement);
-    var endLeft = getScrollPosition(startLeft);
+   * крайнее значение сдвига
+   */ var extremeScrollLeft = (textDirection === "ltr" ? 1 : -1) * (initialScrollWidth - scrollElement.offsetWidth);
+    var startScrollLeft = roundUpElementScrollLeft(scrollElement);
+    var endScrollLeft = getScrollPosition(startScrollLeft);
     onScrollStart();
-    if (endLeft >= maxLeft) {
-        onScrollToRightBorder();
-        endLeft = maxLeft;
+    /**
+   * Если окончание прокрутки вышло за ноль
+   */ if (startScrollLeft * endScrollLeft < 0) {
+        endScrollLeft = 0;
+    }
+    if (Math.abs(endScrollLeft) >= Math.abs(extremeScrollLeft)) {
+        onScrollToEndBorder();
+        endScrollLeft = extremeScrollLeft;
     }
     var startTime = now();
     (function scroll() {
@@ -50,9 +70,10 @@ function doScroll(param) {
         var time = now();
         var elapsed = Math.min((time - startTime) / scrollAnimationDuration, 1);
         var value = easeInOutSine(elapsed);
-        var currentLeft = startLeft + (endLeft - startLeft) * value;
-        scrollElement.scrollLeft = Math.ceil(currentLeft);
-        if (roundUpElementScrollLeft(scrollElement) !== Math.max(0, endLeft) && elapsed !== 1) {
+        var currentScrollLeft = startScrollLeft + (endScrollLeft - startScrollLeft) * value;
+        scrollElement.scrollLeft = roundingAwayFromZero(currentScrollLeft);
+        var scrollEnd = textDirection === "ltr" ? Math.max(0, endScrollLeft) : Math.min(0, endScrollLeft);
+        if (roundUpElementScrollLeft(scrollElement) !== scrollEnd && elapsed !== 1) {
             requestAnimationFrame(scroll);
             return;
         }
@@ -79,20 +100,23 @@ function doScroll(param) {
     ]);
     var _React_useState = _sliced_to_array(React.useState(false), 2), canScrollLeft = _React_useState[0], setCanScrollLeft = _React_useState[1];
     var _React_useState1 = _sliced_to_array(React.useState(false), 2), canScrollRight = _React_useState1[0], setCanScrollRight = _React_useState1[1];
+    var _useDirection = _sliced_to_array(useDirection(), 2), directionRef = _useDirection[0], tmp = _useDirection[1], textDirection = tmp === void 0 ? "ltr" : tmp;
+    var setCanScrollStart = textDirection === "ltr" ? setCanScrollLeft : setCanScrollRight;
+    var setCanScrollEnd = textDirection === "ltr" ? setCanScrollRight : setCanScrollLeft;
     var isCustomScrollingRef = React.useRef(false);
-    var scrollerRef = useExternRef(getRef);
+    var scrollerRef = useExternRef(getRef, directionRef);
     var animationQueue = React.useRef([]);
     var hasPointer = useAdaptivityHasPointer();
     var scrollTo = React.useCallback(function(getScrollPosition) {
         var scrollElement = scrollerRef.current;
         animationQueue.current.push(function() {
-            var _scrollElement_firstElementChild, _scrollElement;
+            var _scrollElement_firstElementChild;
             return doScroll({
                 scrollElement: scrollElement,
                 getScrollPosition: getScrollPosition,
                 animationQueue: animationQueue.current,
-                onScrollToRightBorder: function() {
-                    return setCanScrollRight(false);
+                onScrollToEndBorder: function() {
+                    return setCanScrollEnd(false);
                 },
                 onScrollEnd: function() {
                     return isCustomScrollingRef.current = false;
@@ -100,16 +124,19 @@ function doScroll(param) {
                 onScrollStart: function() {
                     return isCustomScrollingRef.current = true;
                 },
-                initialScrollWidth: ((_scrollElement = scrollElement) === null || _scrollElement === void 0 ? void 0 : (_scrollElement_firstElementChild = _scrollElement.firstElementChild) === null || _scrollElement_firstElementChild === void 0 ? void 0 : _scrollElement_firstElementChild.scrollWidth) || 0,
-                scrollAnimationDuration: scrollAnimationDuration
+                initialScrollWidth: (scrollElement === null || scrollElement === void 0 ? void 0 : (_scrollElement_firstElementChild = scrollElement.firstElementChild) === null || _scrollElement_firstElementChild === void 0 ? void 0 : _scrollElement_firstElementChild.scrollWidth) || 0,
+                scrollAnimationDuration: scrollAnimationDuration,
+                textDirection: textDirection
             });
         });
         if (animationQueue.current.length === 1) {
             animationQueue.current[0]();
         }
     }, [
+        scrollerRef,
         scrollAnimationDuration,
-        scrollerRef
+        textDirection,
+        setCanScrollEnd
     ]);
     var scrollToLeft = React.useCallback(function() {
         var getScrollPosition = getScrollToLeft !== null && getScrollToLeft !== void 0 ? getScrollToLeft : function(i) {
@@ -134,13 +161,15 @@ function doScroll(param) {
     var calculateArrowsVisibility = React.useCallback(function() {
         if (showArrows && hasPointer && scrollerRef.current && !isCustomScrollingRef.current) {
             var scrollElement = scrollerRef.current;
-            setCanScrollLeft(scrollElement.scrollLeft > 0);
-            setCanScrollRight(roundUpElementScrollLeft(scrollElement) + scrollElement.offsetWidth < scrollElement.scrollWidth);
+            setCanScrollStart(scrollElement.scrollLeft !== 0);
+            setCanScrollEnd(Math.abs(roundUpElementScrollLeft(scrollElement)) + scrollElement.offsetWidth < scrollElement.scrollWidth);
         }
     }, [
+        showArrows,
         hasPointer,
         scrollerRef,
-        showArrows
+        setCanScrollStart,
+        setCanScrollEnd
     ]);
     var scrollEvent = useEventListener("scroll", calculateArrowsVisibility);
     React.useEffect(function addScrollerRefToScrollEvent() {