@vkontakte/vkui 6.0.3 → 6.1.0

package/dist/cjs/components/Snackbar/subcomponents/Basic/Basic.js

@@ -10,16 +10,24 @@ Object.defineProperty(exports, "Basic", {
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 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 _useAdaptivity = require("../../../../hooks/useAdaptivity");
 const _RootComponent = require("../../../RootComponent/RootComponent");
 const _Paragraph = require("../../../Typography/Paragraph/Paragraph");
 const _Subhead = require("../../../Typography/Subhead/Subhead");
 const stylesLayout = {
+    none: "vkuiSnackbar--layout-none",
     vertical: "vkuiSnackbar--layout-vertical",
     horizontal: "vkuiSnackbar--layout-horizontal"
 };
+const sizeYClassNames = {
+    none: "vkuiSnackbar--sizeY-none",
+    regular: "vkuiSnackbar--sizeY-regular"
+};
 function Basic(_param) {
     var { layout: layoutProps, action, after, before, mode, subtitle, children } = _param, restProps = _object_without_properties._(_param, [
         "layout",
@@ -30,22 +38,38 @@ function Basic(_param) {
         "subtitle",
         "children"
     ]);
-    const layout = layoutProps || (after || subtitle ? 'vertical' : 'horizontal');
-    return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread._({
-        baseClassName: (0, _vkjs.classNames)("vkuiSnackbar__body", stylesLayout[layout], mode === 'dark' && "vkuiSnackbar--mode-dark")
-    }, restProps), before && /*#__PURE__*/ _react.createElement("div", {
-        className: "vkuiSnackbar__before"
-    }, before), /*#__PURE__*/ _react.createElement("div", {
-        className: "vkuiSnackbar__content"
-    }, /*#__PURE__*/ _react.createElement(_Paragraph.Paragraph, {
-        className: "vkuiSnackbar__content-text"
-    }, children), subtitle && !action && /*#__PURE__*/ _react.createElement(_Subhead.Subhead, {
-        className: "vkuiSnackbar__content-subtitle"
-    }, subtitle), action && !subtitle && /*#__PURE__*/ _react.createElement("div", {
-        className: "vkuiSnackbar__action"
-    }, action)), after && /*#__PURE__*/ _react.createElement("div", {
-        className: "vkuiSnackbar__after"
-    }, after));
+    const { sizeY = 'none' } = (0, _useAdaptivity.useAdaptivity)();
+    const layout = after || subtitle ? 'vertical' : 'none';
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, restProps), {
+        baseClassName: (0, _vkjs.classNames)("vkuiSnackbar__body", stylesLayout[layoutProps || layout], sizeY !== 'compact' && sizeYClassNames[sizeY], mode === 'dark' && "vkuiSnackbar--mode-dark"),
+        children: [
+            before && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: "vkuiSnackbar__before",
+                children: before
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                className: "vkuiSnackbar__content",
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Paragraph.Paragraph, {
+                        className: "vkuiSnackbar__content-text",
+                        children: children
+                    }),
+                    subtitle && !action && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Subhead.Subhead, {
+                        className: "vkuiSnackbar__content-subtitle",
+                        children: subtitle
+                    }),
+                    action && !subtitle && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: "vkuiSnackbar__action",
+                        children: action
+                    })
+                ]
+            }),
+            after && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: "vkuiSnackbar__after",
+                children: after
+            })
+        ]
+    }));
 }
 
 //# sourceMappingURL=Basic.js.map

package/dist/cjs/components/Snackbar/subcomponents/Basic/Basic.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/Snackbar/subcomponents/Basic/Basic.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../../../types';\nimport { RootComponent } from '../../../RootComponent/RootComponent';\nimport { Paragraph } from '../../../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../../../Typography/Subhead/Subhead';\nimport styles from './Basic.module.css';\n\nconst stylesLayout = {\n  vertical: styles['Snackbar--layout-vertical'],\n  horizontal: styles['Snackbar--layout-horizontal'],\n};\n\nexport interface BasicProps {\n  /**\n   * Элемент действия.\n   * Не может использоваться одновременно с `subtitle`\n   */\n  action?: React.ReactNode;\n\n  /**\n   * Контент в правой части, может быть иконкой 24x24\n   */\n  after?: React.ReactNode;\n\n  /**\n   * Варианты расположения кнопки действия\n   * По умолчанию на десктопах, или при наличии элементов `after` или `subtitle`\n   * имеет значение `vertical`, в остальных случаях `horizontal`\n   */\n  layout?: 'vertical' | 'horizontal';\n\n  /**\n   * Может быть следующими компонентами:\n   *  - цветная иконка 24x24 или 28x28 пикселя\n   *  - `<Avatar size={32} />`\n   *  - `<Image size={40} />`\n   */\n  before?: React.ReactNode;\n\n  /**\n   * Задает стиль снекбара\n   */\n  mode?: 'default' | 'dark';\n\n  /**\n   * Дополнительная строка текста под `children`.\n   * Не может использоваться одновременно с `action`\n   */\n  subtitle?: React.ReactNode;\n}\n\nexport interface SnackbarBasicProps extends HTMLAttributesWithRootRef<HTMLDivElement>, BasicProps {}\n\nexport function Basic({\n  layout: layoutProps,\n  action,\n  after,\n  before,\n  mode,\n  subtitle,\n  children,\n  ...restProps\n}: SnackbarBasicProps) {\n  const layout = layoutProps || (after || subtitle ? 'vertical' : 'horizontal');\n\n  return (\n    <RootComponent\n      baseClassName={classNames(\n        styles['Snackbar__body'],\n        stylesLayout[layout],\n        mode === 'dark' && styles['Snackbar--mode-dark'],\n      )}\n      {...restProps}\n    >\n      {before && <div className={styles['Snackbar__before']}>{before}</div>}\n\n      <div className={styles['Snackbar__content']}>\n        <Paragraph className={styles['Snackbar__content-text']}>{children}</Paragraph>\n        {subtitle && !action && (\n          <Subhead className={styles['Snackbar__content-subtitle']}>{subtitle}</Subhead>\n        )}\n\n        {action && !subtitle && <div className={styles['Snackbar__action']}>{action}</div>}\n      </div>\n\n      {after && <div className={styles['Snackbar__after']}>{after}</div>}\n    </RootComponent>\n  );\n}\n"],"names":["Basic","stylesLayout","vertical","horizontal","layout","layoutProps","action","after","before","mode","subtitle","children","restProps","RootComponent","baseClassName","classNames","div","className","Paragraph","Subhead"],"mappings":";;;;+BAsDgBA;;;eAAAA;;;;;;iEAtDO;sBACI;+BAEG;2BACJ;yBACF;AAGxB,MAAMC,eAAe;IACnBC,QAAQ;IACRC,UAAU;AACZ;AA2CO,SAASH,MAAM;QAAA,EACpBI,QAAQC,WAAW,EACnBC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,IAAI,EACJC,QAAQ,EACRC,QAAQ,EAEW,GATC,QAQjBC,yCARiB;QACpBR;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAMP,SAASC,eAAgBE,CAAAA,SAASG,WAAW,aAAa,YAAW;IAE3E,qBACE,qBAACG,4BAAa;QACZC,eAAeC,IAAAA,gBAAU,wBAEvBd,YAAY,CAACG,OAAO,EACpBK,SAAS;OAEPG,YAEHJ,wBAAU,qBAACQ;QAAIC,SAAS;OAA+BT,uBAExD,qBAACQ;QAAIC,SAAS;qBACZ,qBAACC,oBAAS;QAACD,SAAS;OAAqCN,WACxDD,YAAY,CAACJ,wBACZ,qBAACa,gBAAO;QAACF,SAAS;OAAyCP,WAG5DJ,UAAU,CAACI,0BAAY,qBAACM;QAAIC,SAAS;OAA+BX,UAGtEC,uBAAS,qBAACS;QAAIC,SAAS;OAA8BV;AAG5D"}
+{"version":3,"sources":["../../../../../../src/components/Snackbar/subcomponents/Basic/Basic.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../../../hooks/useAdaptivity';\nimport { HTMLAttributesWithRootRef } from '../../../../types';\nimport { RootComponent } from '../../../RootComponent/RootComponent';\nimport { Paragraph } from '../../../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../../../Typography/Subhead/Subhead';\nimport styles from './Basic.module.css';\n\nconst stylesLayout = {\n  none: styles['Snackbar--layout-none'],\n  vertical: styles['Snackbar--layout-vertical'],\n  horizontal: styles['Snackbar--layout-horizontal'],\n};\n\nconst sizeYClassNames = {\n  none: styles['Snackbar--sizeY-none'],\n  regular: styles['Snackbar--sizeY-regular'],\n};\n\nexport interface BasicProps {\n  /**\n   * Элемент действия.\n   * Не может использоваться одновременно с `subtitle`\n   */\n  action?: React.ReactNode;\n\n  /**\n   * Контент в правой части, может быть иконкой 24x24\n   */\n  after?: React.ReactNode;\n\n  /**\n   * Варианты расположения кнопки действия\n   * По умолчанию на десктопах, или при наличии элементов `after` или `subtitle`\n   * имеет значение `vertical`, в остальных случаях `horizontal`\n   */\n  layout?: 'vertical' | 'horizontal';\n\n  /**\n   * Может быть следующими компонентами:\n   *  - цветная иконка 24x24 или 28x28 пикселя\n   *  - `<Avatar size={32} />`\n   *  - `<Image size={40} />`\n   */\n  before?: React.ReactNode;\n\n  /**\n   * Задает стиль снекбара\n   */\n  mode?: 'default' | 'dark';\n\n  /**\n   * Дополнительная строка текста под `children`.\n   * Не может использоваться одновременно с `action`\n   */\n  subtitle?: React.ReactNode;\n}\n\nexport interface SnackbarBasicProps extends HTMLAttributesWithRootRef<HTMLDivElement>, BasicProps {}\n\nexport function Basic({\n  layout: layoutProps,\n  action,\n  after,\n  before,\n  mode,\n  subtitle,\n  children,\n  ...restProps\n}: SnackbarBasicProps) {\n  const { sizeY = 'none' } = useAdaptivity();\n  const layout = after || subtitle ? 'vertical' : 'none';\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['Snackbar__body'],\n        stylesLayout[layoutProps || layout],\n        sizeY !== 'compact' && sizeYClassNames[sizeY],\n        mode === 'dark' && styles['Snackbar--mode-dark'],\n      )}\n    >\n      {before && <div className={styles['Snackbar__before']}>{before}</div>}\n\n      <div className={styles['Snackbar__content']}>\n        <Paragraph className={styles['Snackbar__content-text']}>{children}</Paragraph>\n        {subtitle && !action && (\n          <Subhead className={styles['Snackbar__content-subtitle']}>{subtitle}</Subhead>\n        )}\n\n        {action && !subtitle && <div className={styles['Snackbar__action']}>{action}</div>}\n      </div>\n\n      {after && <div className={styles['Snackbar__after']}>{after}</div>}\n    </RootComponent>\n  );\n}\n"],"names":["Basic","stylesLayout","none","vertical","horizontal","sizeYClassNames","regular","layout","layoutProps","action","after","before","mode","subtitle","children","restProps","sizeY","useAdaptivity","RootComponent","baseClassName","classNames","div","className","Paragraph","Subhead"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA6DgBA;;;eAAAA;;;;;;;;iEA7DO;sBACI;+BACG;+BAEA;2BACJ;yBACF;AAGxB,MAAMC,eAAe;IACnBC,IAAI;IACJC,QAAQ;IACRC,UAAU;AACZ;AAEA,MAAMC,kBAAkB;IACtBH,IAAI;IACJI,OAAO;AACT;AA2CO,SAASN,MAAM;QAAA,EACpBO,QAAQC,WAAW,EACnBC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,IAAI,EACJC,QAAQ,EACRC,QAAQ,EAEW,GATC,QAQjBC,yCARiB;QACpBR;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IACxC,MAAMV,SAASG,SAASG,WAAW,aAAa;IAEhD,qBACE,sBAACK,4BAAa,8CACRH;QACJI,eAAeC,IAAAA,gBAAU,wBAEvBnB,YAAY,CAACO,eAAeD,OAAO,EACnCS,UAAU,aAAaX,eAAe,CAACW,MAAM,EAC7CJ,SAAS;;YAGVD,wBAAU,qBAACU;gBAAIC,SAAS;0BAA+BX;;0BAExD,sBAACU;gBAAIC,SAAS;;kCACZ,qBAACC,oBAAS;wBAACD,SAAS;kCAAqCR;;oBACxDD,YAAY,CAACJ,wBACZ,qBAACe,gBAAO;wBAACF,SAAS;kCAAyCT;;oBAG5DJ,UAAU,CAACI,0BAAY,qBAACQ;wBAAIC,SAAS;kCAA+Bb;;;;YAGtEC,uBAAS,qBAACW;gBAAIC,SAAS;0BAA8BZ;;;;AAG5D"}

package/dist/cjs/components/Snackbar/types.d.ts

@@ -0,0 +1,9 @@
+export type SnackbarPlacement = 'top-start' | 'top' | 'top-end' | 'bottom-start' | 'bottom' | 'bottom-end';
+export type ShiftData = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    shifted: boolean;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/cjs/components/Snackbar/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/Snackbar/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,iBAAiB,GACzB,WAAW,GACX,KAAK,GACL,SAAS,GACT,cAAc,GACd,QAAQ,GACR,YAAY,CAAC;AAEjB,MAAM,MAAM,SAAS,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,CAAC"}

package/dist/cjs/components/Snackbar/types.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+//# sourceMappingURL=types.js.map

package/dist/cjs/components/Snackbar/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Snackbar/types.ts"],"names":[],"rangeMappings":"","mappings":""}

package/dist/cjs/components/Snackbar/utils.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import type { ShiftData, SnackbarPlacement } from './types';
+export declare function resolveOffsetYCssStyle(placement: SnackbarPlacement, style?: React.CSSProperties, offsetY?: React.CSSProperties['inset']): import("react").CSSProperties | undefined;
+export declare function getInitialShiftData(width: number, height: number): {
+    shifted: boolean;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export declare function getMovedShiftData(placement: SnackbarPlacement, shiftData: ShiftData, nextShift: {
+    x: number;
+    y: number;
+}): ShiftData;
+export declare function shouldBeClosedByShiftData(placement: SnackbarPlacement, shiftData: ShiftData, relativeClientRect: DOMRect, velocity: {
+    x: number;
+    y: number;
+}): boolean;
+//# sourceMappingURL=utils.d.ts.map

package/dist/cjs/components/Snackbar/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/components/Snackbar/utils.ts"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE5D,wBAAgB,sBAAsB,CACpC,SAAS,EAAE,iBAAiB,EAC5B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,EAC3B,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,6CAevC;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;;;;;;EAQhE;AAED,wBAAgB,iBAAiB,CAC/B,SAAS,EAAE,iBAAiB,EAC5B,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,aA6BpC;AAID,wBAAgB,yBAAyB,CACvC,SAAS,EAAE,iBAAiB,EAC5B,SAAS,EAAE,SAAS,EACpB,kBAAkB,EAAE,OAAO,EAC3B,QAAQ,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,WA2CnC"}

package/dist/cjs/components/Snackbar/utils.js

@@ -0,0 +1,124 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    getInitialShiftData: function() {
+        return getInitialShiftData;
+    },
+    getMovedShiftData: function() {
+        return getMovedShiftData;
+    },
+    resolveOffsetYCssStyle: function() {
+        return resolveOffsetYCssStyle;
+    },
+    shouldBeClosedByShiftData: function() {
+        return shouldBeClosedByShiftData;
+    }
+});
+const _object_spread = require("@swc/helpers/_/_object_spread");
+const _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+const _animation = require("../../lib/animation");
+function resolveOffsetYCssStyle(placement, style, offsetY) {
+    if (offsetY === undefined) {
+        return style;
+    }
+    switch(placement){
+        case 'top-start':
+        case 'top':
+        case 'top-end':
+            return _object_spread_props._(_object_spread._({}, style), {
+                top: offsetY
+            });
+        case 'bottom-start':
+        case 'bottom':
+        case 'bottom-end':
+            return _object_spread_props._(_object_spread._({}, style), {
+                bottom: offsetY
+            });
+    }
+}
+function getInitialShiftData(width, height) {
+    return {
+        shifted: false,
+        x: 0,
+        y: 0,
+        width,
+        height
+    };
+}
+function getMovedShiftData(placement, shiftData, nextShift) {
+    switch(placement){
+        case 'top-start':
+        case 'bottom-start':
+            shiftData.x = (0, _animation.rubberbandIfOutOfBounds)(nextShift.x, -shiftData.width, 0);
+            break;
+        case 'top-end':
+        case 'bottom-end':
+            shiftData.x = (0, _animation.rubberbandIfOutOfBounds)(nextShift.x, 0, shiftData.width);
+            break;
+    }
+    switch(placement){
+        case 'top-start':
+        case 'top':
+        case 'top-end':
+            shiftData.y = (0, _animation.rubberbandIfOutOfBounds)(nextShift.y, -shiftData.height, 0);
+            break;
+        case 'bottom-start':
+        case 'bottom':
+        case 'bottom-end':
+            shiftData.y = (0, _animation.rubberbandIfOutOfBounds)(nextShift.y, 0, shiftData.height);
+            break;
+    }
+    shiftData.shifted = true;
+    return shiftData;
+}
+const MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE = 200;
+function shouldBeClosedByShiftData(placement, shiftData, relativeClientRect, velocity) {
+    if (!shiftData.shifted) {
+        return false;
+    }
+    const shouldBeClosedThreshold = {
+        x: false,
+        y: false
+    };
+    const shouldBeClosedByVelocity = {
+        x: false,
+        y: false
+    };
+    switch(placement){
+        case 'top-start':
+        case 'bottom-start':
+            shouldBeClosedThreshold.x = relativeClientRect.x < -relativeClientRect.width / 2;
+            shouldBeClosedByVelocity.x = velocity.x < -MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE;
+            break;
+        case 'top-end':
+        case 'bottom-end':
+            shouldBeClosedThreshold.x = relativeClientRect.x > relativeClientRect.width / 2;
+            shouldBeClosedByVelocity.x = velocity.x > MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE;
+            break;
+    }
+    switch(placement){
+        case 'top-start':
+        case 'top':
+        case 'top-end':
+            shouldBeClosedThreshold.y = relativeClientRect.y < -relativeClientRect.height / 2;
+            shouldBeClosedByVelocity.y = velocity.y < -MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE;
+            break;
+        case 'bottom-start':
+        case 'bottom':
+        case 'bottom-end':
+            shouldBeClosedThreshold.y = relativeClientRect.y > relativeClientRect.height / 2;
+            shouldBeClosedByVelocity.y = velocity.y > MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE;
+            break;
+    }
+    return shouldBeClosedThreshold.x || shouldBeClosedByVelocity.x || shouldBeClosedThreshold.y || /* istanbul ignore next: подсвечивает жёлтым и пишет "branch not covered" */ shouldBeClosedByVelocity.y;
+}
+
+//# sourceMappingURL=utils.js.map

package/dist/cjs/components/Snackbar/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Snackbar/utils.ts"],"sourcesContent":["import { rubberbandIfOutOfBounds } from '../../lib/animation';\nimport type { ShiftData, SnackbarPlacement } from './types';\n\nexport function resolveOffsetYCssStyle(\n  placement: SnackbarPlacement,\n  style?: React.CSSProperties,\n  offsetY?: React.CSSProperties['inset'],\n) {\n  if (offsetY === undefined) {\n    return style;\n  }\n  switch (placement) {\n    case 'top-start':\n    case 'top':\n    case 'top-end':\n      return { ...style, top: offsetY };\n    case 'bottom-start':\n    case 'bottom':\n    case 'bottom-end':\n      return { ...style, bottom: offsetY };\n  }\n}\n\nexport function getInitialShiftData(width: number, height: number) {\n  return {\n    shifted: false,\n    x: 0,\n    y: 0,\n    width,\n    height,\n  };\n}\n\nexport function getMovedShiftData(\n  placement: SnackbarPlacement,\n  shiftData: ShiftData,\n  nextShift: { x: number; y: number },\n) {\n  switch (placement) {\n    case 'top-start':\n    case 'bottom-start':\n      shiftData.x = rubberbandIfOutOfBounds(nextShift.x, -shiftData.width, 0);\n      break;\n    case 'top-end':\n    case 'bottom-end':\n      shiftData.x = rubberbandIfOutOfBounds(nextShift.x, 0, shiftData.width);\n      break;\n  }\n\n  switch (placement) {\n    case 'top-start':\n    case 'top':\n    case 'top-end':\n      shiftData.y = rubberbandIfOutOfBounds(nextShift.y, -shiftData.height, 0);\n      break;\n    case 'bottom-start':\n    case 'bottom':\n    case 'bottom-end':\n      shiftData.y = rubberbandIfOutOfBounds(nextShift.y, 0, shiftData.height);\n      break;\n  }\n\n  shiftData.shifted = true;\n\n  return shiftData;\n}\n\nconst MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE = 200;\n\nexport function shouldBeClosedByShiftData(\n  placement: SnackbarPlacement,\n  shiftData: ShiftData,\n  relativeClientRect: DOMRect,\n  velocity: { x: number; y: number },\n) {\n  if (!shiftData.shifted) {\n    return false;\n  }\n  const shouldBeClosedThreshold = { x: false, y: false };\n  const shouldBeClosedByVelocity = { x: false, y: false };\n\n  switch (placement) {\n    case 'top-start':\n    case 'bottom-start':\n      shouldBeClosedThreshold.x = relativeClientRect.x < -relativeClientRect.width / 2;\n      shouldBeClosedByVelocity.x = velocity.x < -MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE;\n      break;\n    case 'top-end':\n    case 'bottom-end':\n      shouldBeClosedThreshold.x = relativeClientRect.x > relativeClientRect.width / 2;\n      shouldBeClosedByVelocity.x = velocity.x > MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE;\n      break;\n  }\n\n  switch (placement) {\n    case 'top-start':\n    case 'top':\n    case 'top-end':\n      shouldBeClosedThreshold.y = relativeClientRect.y < -relativeClientRect.height / 2;\n      shouldBeClosedByVelocity.y = velocity.y < -MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE;\n      break;\n    case 'bottom-start':\n    case 'bottom':\n    case 'bottom-end':\n      shouldBeClosedThreshold.y = relativeClientRect.y > relativeClientRect.height / 2;\n      shouldBeClosedByVelocity.y = velocity.y > MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE;\n      break;\n  }\n\n  return (\n    shouldBeClosedThreshold.x ||\n    shouldBeClosedByVelocity.x ||\n    shouldBeClosedThreshold.y ||\n    /* istanbul ignore next: подсвечивает жёлтым и пишет \"branch not covered\" */\n    shouldBeClosedByVelocity.y\n  );\n}\n"],"names":["getInitialShiftData","getMovedShiftData","resolveOffsetYCssStyle","shouldBeClosedByShiftData","placement","style","offsetY","undefined","top","bottom","width","height","shifted","x","y","shiftData","nextShift","rubberbandIfOutOfBounds","MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE","relativeClientRect","velocity","shouldBeClosedThreshold","shouldBeClosedByVelocity"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAuBgBA,mBAAmB;eAAnBA;;IAUAC,iBAAiB;eAAjBA;;IA9BAC,sBAAsB;eAAtBA;;IAkEAC,yBAAyB;eAAzBA;;;;;2BArEwB;AAGjC,SAASD,uBACdE,SAA4B,EAC5BC,KAA2B,EAC3BC,OAAsC;IAEtC,IAAIA,YAAYC,WAAW;QACzB,OAAOF;IACT;IACA,OAAQD;QACN,KAAK;QACL,KAAK;QACL,KAAK;YACH,OAAO,4CAAKC;gBAAOG,KAAKF;;QAC1B,KAAK;QACL,KAAK;QACL,KAAK;YACH,OAAO,4CAAKD;gBAAOI,QAAQH;;IAC/B;AACF;AAEO,SAASN,oBAAoBU,KAAa,EAAEC,MAAc;IAC/D,OAAO;QACLC,SAAS;QACTC,GAAG;QACHC,GAAG;QACHJ;QACAC;IACF;AACF;AAEO,SAASV,kBACdG,SAA4B,EAC5BW,SAAoB,EACpBC,SAAmC;IAEnC,OAAQZ;QACN,KAAK;QACL,KAAK;YACHW,UAAUF,CAAC,GAAGI,IAAAA,kCAAuB,EAACD,UAAUH,CAAC,EAAE,CAACE,UAAUL,KAAK,EAAE;YACrE;QACF,KAAK;QACL,KAAK;YACHK,UAAUF,CAAC,GAAGI,IAAAA,kCAAuB,EAACD,UAAUH,CAAC,EAAE,GAAGE,UAAUL,KAAK;YACrE;IACJ;IAEA,OAAQN;QACN,KAAK;QACL,KAAK;QACL,KAAK;YACHW,UAAUD,CAAC,GAAGG,IAAAA,kCAAuB,EAACD,UAAUF,CAAC,EAAE,CAACC,UAAUJ,MAAM,EAAE;YACtE;QACF,KAAK;QACL,KAAK;QACL,KAAK;YACHI,UAAUD,CAAC,GAAGG,IAAAA,kCAAuB,EAACD,UAAUF,CAAC,EAAE,GAAGC,UAAUJ,MAAM;YACtE;IACJ;IAEAI,UAAUH,OAAO,GAAG;IAEpB,OAAOG;AACT;AAEA,MAAMG,wCAAwC;AAEvC,SAASf,0BACdC,SAA4B,EAC5BW,SAAoB,EACpBI,kBAA2B,EAC3BC,QAAkC;IAElC,IAAI,CAACL,UAAUH,OAAO,EAAE;QACtB,OAAO;IACT;IACA,MAAMS,0BAA0B;QAAER,GAAG;QAAOC,GAAG;IAAM;IACrD,MAAMQ,2BAA2B;QAAET,GAAG;QAAOC,GAAG;IAAM;IAEtD,OAAQV;QACN,KAAK;QACL,KAAK;YACHiB,wBAAwBR,CAAC,GAAGM,mBAAmBN,CAAC,GAAG,CAACM,mBAAmBT,KAAK,GAAG;YAC/EY,yBAAyBT,CAAC,GAAGO,SAASP,CAAC,GAAG,CAACK;YAC3C;QACF,KAAK;QACL,KAAK;YACHG,wBAAwBR,CAAC,GAAGM,mBAAmBN,CAAC,GAAGM,mBAAmBT,KAAK,GAAG;YAC9EY,yBAAyBT,CAAC,GAAGO,SAASP,CAAC,GAAGK;YAC1C;IACJ;IAEA,OAAQd;QACN,KAAK;QACL,KAAK;QACL,KAAK;YACHiB,wBAAwBP,CAAC,GAAGK,mBAAmBL,CAAC,GAAG,CAACK,mBAAmBR,MAAM,GAAG;YAChFW,yBAAyBR,CAAC,GAAGM,SAASN,CAAC,GAAG,CAACI;YAC3C;QACF,KAAK;QACL,KAAK;QACL,KAAK;YACHG,wBAAwBP,CAAC,GAAGK,mBAAmBL,CAAC,GAAGK,mBAAmBR,MAAM,GAAG;YAC/EW,yBAAyBR,CAAC,GAAGM,SAASN,CAAC,GAAGI;YAC1C;IACJ;IAEA,OACEG,wBAAwBR,CAAC,IACzBS,yBAAyBT,CAAC,IAC1BQ,wBAAwBP,CAAC,IACzB,0EAA0E,GAC1EQ,yBAAyBR,CAAC;AAE9B"}

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

@@ -1,13 +1,15 @@
-import * as React from 'react';
 import { HTMLAttributesWithRootRef } from '../../types';
+export declare const ALLOWED_SIZES: readonly ["3xs", "2xs", "xs", "s", "m", "l", "xl", "2xl", "3xl", "4xl"];
+type Size = (typeof ALLOWED_SIZES)[number];
 export interface SpacingProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     /**
      * Высота спэйсинга
      */
-    size?: number;
+    size?: number | Size;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Spacing
  */
-export declare const Spacing: ({ size, style: styleProp, ...restProps }: SpacingProps) => React.JSX.Element;
+export declare const Spacing: ({ size, style: styleProp, ...restProps }: SpacingProps) => import("react/jsx-runtime").JSX.Element;
+export {};
 //# sourceMappingURL=Spacing.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Spacing.d.ts","sourceRoot":"","sources":["../../../../src/components/Spacing/Spacing.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAIxD,MAAM,WAAW,YAAa,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC7E;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,eAAO,MAAM,OAAO,6CAAkD,YAAY,sBAQjF,CAAC"}
+{"version":3,"file":"Spacing.d.ts","sourceRoot":"","sources":["../../../../src/components/Spacing/Spacing.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAIxD,eAAO,MAAM,aAAa,yEAWhB,CAAC;AACX,KAAK,IAAI,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAE3C,MAAM,WAAW,YAAa,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC7E;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AACD;;GAEG;AACH,eAAO,MAAM,OAAO,6CAAoD,YAAY,4CAOnF,CAAC"}

package/dist/cjs/components/Spacing/Spacing.js

@@ -2,9 +2,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "Spacing", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    ALLOWED_SIZES: function() {
+        return ALLOWED_SIZES;
+    },
+    Spacing: function() {
         return Spacing;
     }
 });
@@ -12,21 +20,41 @@ 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 _RootComponent = require("../RootComponent/RootComponent");
+const ALLOWED_SIZES = [
+    '3xs',
+    '2xs',
+    'xs',
+    's',
+    'm',
+    'l',
+    'xl',
+    '2xl',
+    '3xl',
+    '4xl'
+];
 const Spacing = (_param)=>{
-    var { size = 8, style: styleProp } = _param, restProps = _object_without_properties._(_param, [
+    var { size = 'm', style: styleProp } = _param, restProps = _object_without_properties._(_param, [
         "size",
         "style"
     ]);
-    const style = _object_spread._({
-        height: size,
-        padding: `${size / 2}px 0`
-    }, styleProp);
-    return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, restProps), {
+    const style = _object_spread._({}, getSizeStyle(size), styleProp);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, restProps), {
         baseClassName: "vkuiSpacing",
         style: style
     }));
 };
+function getSizeStyle(size) {
+    const sizeValue = getSizeValue(size);
+    return {
+        height: sizeValue,
+        padding: `calc(${sizeValue} / 2px) 0`
+    };
+}
+function getSizeValue(size) {
+    return typeof size === 'string' ? `var(--vkui--spacing_size_${size})` : size;
+}
 
 //# sourceMappingURL=Spacing.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Spacing/Spacing.tsx"],"sourcesContent":["import * as React from 'react';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Spacing.module.css';\n\nexport interface SpacingProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Высота спэйсинга\n   */\n  size?: number;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Spacing\n */\nexport const Spacing = ({ size = 8, style: styleProp, ...restProps }: SpacingProps) => {\n  const style: React.CSSProperties = {\n    height: size,\n    padding: `${size / 2}px 0`,\n    ...styleProp,\n  };\n\n  return <RootComponent {...restProps} baseClassName={styles['Spacing']} style={style} />;\n};\n"],"names":["Spacing","size","style","styleProp","restProps","height","padding","RootComponent","baseClassName"],"mappings":";;;;+BAeaA;;;eAAAA;;;;;;;iEAfU;+BAEO;AAavB,MAAMA,UAAU;QAAC,EAAEC,OAAO,CAAC,EAAEC,OAAOC,SAAS,EAA8B,WAAzBC;QAA/BH;QAAUC;;IAClC,MAAMA,QAA6B;QACjCG,QAAQJ;QACRK,SAAS,CAAC,EAAEL,OAAO,EAAE,IAAI,CAAC;OACvBE;IAGL,qBAAO,qBAACI,4BAAa,8CAAKH;QAAWI,aAAa;QAAqBN,OAAOA;;AAChF"}
+{"version":3,"sources":["../../../../src/components/Spacing/Spacing.tsx"],"sourcesContent":["import * as React from 'react';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Spacing.module.css';\n\nexport const ALLOWED_SIZES = [\n  '3xs',\n  '2xs',\n  'xs',\n  's',\n  'm',\n  'l',\n  'xl',\n  '2xl',\n  '3xl',\n  '4xl',\n] as const;\ntype Size = (typeof ALLOWED_SIZES)[number];\n\nexport interface SpacingProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Высота спэйсинга\n   */\n  size?: number | Size;\n}\n/**\n * @see https://vkcom.github.io/VKUI/#/Spacing\n */\nexport const Spacing = ({ size = 'm', style: styleProp, ...restProps }: SpacingProps) => {\n  const style: React.CSSProperties = {\n    ...getSizeStyle(size),\n    ...styleProp,\n  };\n\n  return <RootComponent {...restProps} baseClassName={styles['Spacing']} style={style} />;\n};\n\nfunction getSizeStyle(size: number | Size): React.CSSProperties {\n  const sizeValue = getSizeValue(size);\n\n  return {\n    height: sizeValue,\n    padding: `calc(${sizeValue} / 2px) 0`,\n  };\n}\n\nfunction getSizeValue(size: number | Size): `var(--vkui--spacing_size_${Size})` | number {\n  return typeof size === 'string' ? `var(--vkui--spacing_size_${size})` : size;\n}\n"],"names":["ALLOWED_SIZES","Spacing","size","style","styleProp","restProps","getSizeStyle","RootComponent","baseClassName","sizeValue","getSizeValue","height","padding"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,aAAa;eAAbA;;IAuBAC,OAAO;eAAPA;;;;;;;;iEA5BU;+BAEO;AAGvB,MAAMD,gBAAgB;IAC3B;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;CACD;AAYM,MAAMC,UAAU;QAAC,EAAEC,OAAO,GAAG,EAAEC,OAAOC,SAAS,EAA8B,WAAzBC;QAAjCH;QAAYC;;IACpC,MAAMA,QAA6B,qBAC9BG,aAAaJ,OACbE;IAGL,qBAAO,qBAACG,4BAAa,8CAAKF;QAAWG,aAAa;QAAqBL,OAAOA;;AAChF;AAEA,SAASG,aAAaJ,IAAmB;IACvC,MAAMO,YAAYC,aAAaR;IAE/B,OAAO;QACLS,QAAQF;QACRG,SAAS,CAAC,KAAK,EAAEH,UAAU,SAAS,CAAC;IACvC;AACF;AAEA,SAASC,aAAaR,IAAmB;IACvC,OAAO,OAAOA,SAAS,WAAW,CAAC,yBAAyB,EAAEA,KAAK,CAAC,CAAC,GAAGA;AAC1E"}

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

@@ -7,5 +7,5 @@ export interface SpinnerProps extends HTMLAttributesWithRootRef<HTMLSpanElement>
 /**
  * @see https://vkcom.github.io/VKUI/#/Spinner
  */
-export declare const Spinner: React.MemoExoticComponent<({ size, children, disableAnimation, ...restProps }: SpinnerProps) => React.JSX.Element>;
+export declare const Spinner: React.MemoExoticComponent<({ size, children, disableAnimation, ...restProps }: SpinnerProps) => import("react/jsx-runtime").JSX.Element>;
 //# sourceMappingURL=Spinner.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../../src/components/Spinner/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAKxD,MAAM,WAAW,YAAa,SAAQ,yBAAyB,CAAC,eAAe,CAAC;IAC9E,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;IAChD,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;GAEG;AACH,eAAO,MAAM,OAAO,iFAMf,YAAY,uBAyChB,CAAC"}
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../../src/components/Spinner/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAKxD,MAAM,WAAW,YAAa,SAAQ,yBAAyB,CAAC,eAAe,CAAC;IAC9E,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;IAChD,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;GAEG;AACH,eAAO,MAAM,OAAO,iFAMf,YAAY,6CAyChB,CAAC"}

package/dist/cjs/components/Spinner/Spinner.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");
@@ -35,22 +36,30 @@ const Spinner = /*#__PURE__*/ _react.memo((_param)=>{
         medium: 16,
         large: 22
     }[size];
-    return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({
         Component: "span",
         role: "status"
     }, restProps), {
-        baseClassName: "vkuiSpinner"
-    }), /*#__PURE__*/ _react.createElement(SpinnerIcon, null, !disableAnimation && // TODO [a11y]: use reduced motion hook?
-    //              https://github.com/VKCOM/VKUI/pull/4673
-    /*#__PURE__*/ _react.createElement("animateTransform", {
-        attributeName: "transform",
-        attributeType: "XML",
-        type: "rotate",
-        from: `0 ${center} ${center}`,
-        to: `360 ${center} ${center}`,
-        dur: "0.7s",
-        repeatCount: "indefinite"
-    })), (0, _vkjs.hasReactNode)(children) && /*#__PURE__*/ _react.createElement(_VisuallyHidden.VisuallyHidden, null, children));
+        baseClassName: "vkuiSpinner",
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(SpinnerIcon, {
+                children: !disableAnimation && // TODO [a11y]: use reduced motion hook?
+                //              https://github.com/VKCOM/VKUI/pull/4673
+                /*#__PURE__*/ (0, _jsxruntime.jsx)("animateTransform", {
+                    attributeName: "transform",
+                    attributeType: "XML",
+                    type: "rotate",
+                    from: `0 ${center} ${center}`,
+                    to: `360 ${center} ${center}`,
+                    dur: "0.7s",
+                    repeatCount: "indefinite"
+                })
+            }),
+            (0, _vkjs.hasReactNode)(children) && /*#__PURE__*/ (0, _jsxruntime.jsx)(_VisuallyHidden.VisuallyHidden, {
+                children: children
+            })
+        ]
+    }));
 });
 Spinner.displayName = 'Spinner';
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Spinner, Icon24Spinner, Icon32Spinner, Icon44Spinner } from '@vkontakte/icons';\nimport { hasReactNode } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Spinner.module.css';\n\nexport interface SpinnerProps extends HTMLAttributesWithRootRef<HTMLSpanElement> {\n  size?: 'small' | 'regular' | 'medium' | 'large';\n  disableAnimation?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Spinner\n */\nexport const Spinner = React.memo(\n  ({\n    size = 'regular',\n    children = 'Загружается...',\n    disableAnimation,\n    ...restProps\n  }: SpinnerProps) => {\n    const SpinnerIcon = {\n      small: Icon16Spinner,\n      regular: Icon24Spinner,\n      medium: Icon32Spinner,\n      large: Icon44Spinner,\n    }[size];\n\n    const center = {\n      small: 8,\n      regular: 12,\n      medium: 16,\n      large: 22,\n    }[size];\n\n    return (\n      <RootComponent\n        Component=\"span\"\n        role=\"status\"\n        {...restProps}\n        baseClassName={styles['Spinner']}\n      >\n        <SpinnerIcon>\n          {!disableAnimation && (\n            // TODO [a11y]: use reduced motion hook?\n            //              https://github.com/VKCOM/VKUI/pull/4673\n            <animateTransform\n              attributeName=\"transform\"\n              attributeType=\"XML\"\n              type=\"rotate\"\n              from={`0 ${center} ${center}`}\n              to={`360 ${center} ${center}`}\n              dur=\"0.7s\"\n              repeatCount=\"indefinite\"\n            />\n          )}\n        </SpinnerIcon>\n        {hasReactNode(children) && <VisuallyHidden>{children}</VisuallyHidden>}\n      </RootComponent>\n    );\n  },\n);\n\nSpinner.displayName = 'Spinner';\n"],"names":["Spinner","React","memo","size","children","disableAnimation","restProps","SpinnerIcon","small","Icon16Spinner","regular","Icon24Spinner","medium","Icon32Spinner","large","Icon44Spinner","center","RootComponent","Component","role","baseClassName","animateTransform","attributeName","attributeType","type","from","to","dur","repeatCount","hasReactNode","VisuallyHidden","displayName"],"mappings":";;;;+BAgBaA;;;eAAAA;;;;;;;iEAhBU;uBACoD;sBAC9C;+BAEC;gCACC;AAWxB,MAAMA,wBAAUC,OAAMC,IAAI,CAC/B;QAAC,EACCC,OAAO,SAAS,EAChBC,WAAW,gBAAgB,EAC3BC,gBAAgB,EAEH,WADVC;QAHHH;QACAC;QACAC;;IAGA,MAAME,cAAc;QAClBC,OAAOC,oBAAa;QACpBC,SAASC,oBAAa;QACtBC,QAAQC,oBAAa;QACrBC,OAAOC,oBAAa;IACtB,CAAC,CAACZ,KAAK;IAEP,MAAMa,SAAS;QACbR,OAAO;QACPE,SAAS;QACTE,QAAQ;QACRE,OAAO;IACT,CAAC,CAACX,KAAK;IAEP,qBACE,qBAACc,4BAAa;QACZC,WAAU;QACVC,MAAK;OACDb;QACJc,aAAa;sBAEb,qBAACb,mBACE,CAACF,oBACA,wCAAwC;IACxC,uDAAuD;kBACvD,qBAACgB;QACCC,eAAc;QACdC,eAAc;QACdC,MAAK;QACLC,MAAM,CAAC,EAAE,EAAET,OAAO,CAAC,EAAEA,OAAO,CAAC;QAC7BU,IAAI,CAAC,IAAI,EAAEV,OAAO,CAAC,EAAEA,OAAO,CAAC;QAC7BW,KAAI;QACJC,aAAY;SAIjBC,IAAAA,kBAAY,EAACzB,2BAAa,qBAAC0B,8BAAc,QAAE1B;AAGlD;AAGFJ,QAAQ+B,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Spinner, Icon24Spinner, Icon32Spinner, Icon44Spinner } from '@vkontakte/icons';\nimport { hasReactNode } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Spinner.module.css';\n\nexport interface SpinnerProps extends HTMLAttributesWithRootRef<HTMLSpanElement> {\n  size?: 'small' | 'regular' | 'medium' | 'large';\n  disableAnimation?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Spinner\n */\nexport const Spinner = React.memo(\n  ({\n    size = 'regular',\n    children = 'Загружается...',\n    disableAnimation,\n    ...restProps\n  }: SpinnerProps) => {\n    const SpinnerIcon = {\n      small: Icon16Spinner,\n      regular: Icon24Spinner,\n      medium: Icon32Spinner,\n      large: Icon44Spinner,\n    }[size];\n\n    const center = {\n      small: 8,\n      regular: 12,\n      medium: 16,\n      large: 22,\n    }[size];\n\n    return (\n      <RootComponent\n        Component=\"span\"\n        role=\"status\"\n        {...restProps}\n        baseClassName={styles['Spinner']}\n      >\n        <SpinnerIcon>\n          {!disableAnimation && (\n            // TODO [a11y]: use reduced motion hook?\n            //              https://github.com/VKCOM/VKUI/pull/4673\n            <animateTransform\n              attributeName=\"transform\"\n              attributeType=\"XML\"\n              type=\"rotate\"\n              from={`0 ${center} ${center}`}\n              to={`360 ${center} ${center}`}\n              dur=\"0.7s\"\n              repeatCount=\"indefinite\"\n            />\n          )}\n        </SpinnerIcon>\n        {hasReactNode(children) && <VisuallyHidden>{children}</VisuallyHidden>}\n      </RootComponent>\n    );\n  },\n);\n\nSpinner.displayName = 'Spinner';\n"],"names":["Spinner","React","memo","size","children","disableAnimation","restProps","SpinnerIcon","small","Icon16Spinner","regular","Icon24Spinner","medium","Icon32Spinner","large","Icon44Spinner","center","RootComponent","Component","role","baseClassName","animateTransform","attributeName","attributeType","type","from","to","dur","repeatCount","hasReactNode","VisuallyHidden","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAgBaA;;;eAAAA;;;;;;;;iEAhBU;uBACoD;sBAC9C;+BAEC;gCACC;AAWxB,MAAMA,wBAAUC,OAAMC,IAAI,CAC/B;QAAC,EACCC,OAAO,SAAS,EAChBC,WAAW,gBAAgB,EAC3BC,gBAAgB,EAEH,WADVC;QAHHH;QACAC;QACAC;;IAGA,MAAME,cAAc;QAClBC,OAAOC,oBAAa;QACpBC,SAASC,oBAAa;QACtBC,QAAQC,oBAAa;QACrBC,OAAOC,oBAAa;IACtB,CAAC,CAACZ,KAAK;IAEP,MAAMa,SAAS;QACbR,OAAO;QACPE,SAAS;QACTE,QAAQ;QACRE,OAAO;IACT,CAAC,CAACX,KAAK;IAEP,qBACE,sBAACc,4BAAa;QACZC,WAAU;QACVC,MAAK;OACDb;QACJc,aAAa;;0BAEb,qBAACb;0BACE,CAACF,oBACA,wCAAwC;gBACxC,uDAAuD;8BACvD,qBAACgB;oBACCC,eAAc;oBACdC,eAAc;oBACdC,MAAK;oBACLC,MAAM,CAAC,EAAE,EAAET,OAAO,CAAC,EAAEA,OAAO,CAAC;oBAC7BU,IAAI,CAAC,IAAI,EAAEV,OAAO,CAAC,EAAEA,OAAO,CAAC;oBAC7BW,KAAI;oBACJC,aAAY;;;YAIjBC,IAAAA,kBAAY,EAACzB,2BAAa,qBAAC0B,8BAAc;0BAAE1B;;;;AAGlD;AAGFJ,QAAQ+B,WAAW,GAAG"}

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

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { HTMLAttributesWithRootRef } from '../../types';
 export interface SplitColProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     width?: number | string;
@@ -21,5 +20,5 @@ export interface SplitColProps extends HTMLAttributesWithRootRef<HTMLDivElement>
 /**
  * @see https://vkcom.github.io/VKUI/#/SplitCol
  */
-export declare const SplitCol: (props: SplitColProps) => React.JSX.Element;
+export declare const SplitCol: (props: SplitColProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SplitCol.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SplitCol.d.ts","sourceRoot":"","sources":["../../../../src/components/SplitCol/SplitCol.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAyCxD,MAAM,WAAW,aAAc,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC9E,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,UAAW,aAAa,sBA+C5C,CAAC"}
+{"version":3,"file":"SplitCol.d.ts","sourceRoot":"","sources":["../../../../src/components/SplitCol/SplitCol.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAyCxD,MAAM,WAAW,aAAc,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC9E,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,UAAW,aAAa,4CA+C5C,CAAC"}

package/dist/cjs/components/SplitCol/SplitCol.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 _useAdaptivity = require("../../hooks/useAdaptivity");
@@ -75,19 +76,22 @@ const SplitCol = (props)=>{
         colRef: baseRef,
         animate
     });
-    return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, restProps), {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, restProps), {
         style: _object_spread_props._(_object_spread._({}, style), {
             width: width,
             maxWidth: maxWidth,
             minWidth: minWidth
         }),
         getRootRef: baseRef,
-        baseClassName: (0, _vkjs.classNames)("vkuiSplitCol", (0, _adaptivity.viewWidthToClassName)(breakpointClassNames, viewWidth), autoSpaced && (0, _vkjs.classNames)("vkuiSplitCol--spaced-auto", 'vkuiInternalSplitCol--spaced-auto'), fixed && "vkuiSplitCol--fixed", stretchedOnMobile && "vkuiSplitCol--stretched-on-mobile")
-    }), /*#__PURE__*/ _react.createElement(_SplitColContext.SplitColContext.Provider, {
-        value: contextValue
-    }, fixed ? /*#__PURE__*/ _react.createElement("div", {
-        className: "vkuiSplitCol__fixedInner"
-    }, children) : children));
+        baseClassName: (0, _vkjs.classNames)("vkuiSplitCol", (0, _adaptivity.viewWidthToClassName)(breakpointClassNames, viewWidth), autoSpaced && (0, _vkjs.classNames)("vkuiSplitCol--spaced-auto", 'vkuiInternalSplitCol--spaced-auto'), fixed && "vkuiSplitCol--fixed", stretchedOnMobile && "vkuiSplitCol--stretched-on-mobile"),
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_SplitColContext.SplitColContext.Provider, {
+            value: contextValue,
+            children: fixed ? /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: "vkuiSplitCol__fixedInner",
+                children: children
+            }) : children
+        })
+    }));
 };
 
 //# sourceMappingURL=SplitCol.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SplitCol/SplitCol.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useMediaQueries } from '../../hooks/useMediaQueries';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { ViewWidth, viewWidthToClassName } from '../../lib/adaptivity';\nimport { matchMediaListAddListener, matchMediaListRemoveListener } from '../../lib/matchMedia';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { SplitColContext } from './SplitColContext';\nimport styles from './SplitCol.module.css';\n\nconst breakpointClassNames = {\n  none: classNames(styles['SplitCol--viewWidth-none'], 'vkuiInternalSplitCol--viewWidth-none'),\n  tabletMinus: styles['SplitCol--viewWidth-tabletMinus'],\n  smallTabletPlus: styles['SplitCol--viewWidth-smallTabletPlus'],\n  tabletPlus: 'vkuiInternalSplitCol--viewWidth-tabletPlus',\n};\n\nfunction useTransitionAnimate(animateProp?: boolean) {\n  const { viewWidth } = useAdaptivity();\n  const [animate, setAnimate] = React.useState(Boolean(animateProp));\n  const mediaQueries = useMediaQueries();\n\n  React.useEffect(() => {\n    if (animateProp !== undefined) {\n      setAnimate(animateProp);\n      return;\n    }\n\n    if (viewWidth !== undefined) {\n      setAnimate(viewWidth < ViewWidth.TABLET);\n      return;\n    }\n\n    // eslint-disable-next-line no-restricted-properties\n    const listener = () => setAnimate(!mediaQueries.smallTabletPlus.matches);\n    listener();\n\n    matchMediaListAddListener(mediaQueries.smallTabletPlus, listener);\n    return () => {\n      matchMediaListRemoveListener(mediaQueries.smallTabletPlus, listener);\n    };\n  }, [animateProp, viewWidth, mediaQueries]);\n\n  return animate;\n}\n\nexport interface SplitColProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  width?: number | string;\n  maxWidth?: number | string;\n  minWidth?: number | string;\n  /**\n   * Если false, то переходы между Panel происходят без анимации\n   */\n  animate?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины при ширине больше чем `smallTablet`\n   */\n  autoSpaced?: boolean;\n  fixed?: boolean;\n  /**\n   * Если true, то ширина контейнера становится 100% при ширине меньше чем `tablet`\n   */\n  stretchedOnMobile?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitCol\n */\nexport const SplitCol = (props: SplitColProps) => {\n  const {\n    children,\n    width,\n    maxWidth,\n    minWidth,\n    animate: animateProp,\n    fixed,\n    style,\n    autoSpaced,\n    stretchedOnMobile,\n    getRootRef,\n    ...restProps\n  } = props;\n  const baseRef = useExternRef(getRootRef);\n  const { viewWidth } = useAdaptivity();\n  const animate = useTransitionAnimate(animateProp);\n\n  const contextValue = useObjectMemo({\n    colRef: baseRef,\n    animate,\n  });\n\n  return (\n    <RootComponent\n      {...restProps}\n      style={{\n        ...style,\n        width: width,\n        maxWidth: maxWidth,\n        minWidth: minWidth,\n      }}\n      getRootRef={baseRef}\n      baseClassName={classNames(\n        styles['SplitCol'],\n        viewWidthToClassName(breakpointClassNames, viewWidth),\n        autoSpaced &&\n          classNames(styles['SplitCol--spaced-auto'], 'vkuiInternalSplitCol--spaced-auto'),\n        fixed && styles['SplitCol--fixed'],\n        stretchedOnMobile && styles['SplitCol--stretched-on-mobile'],\n      )}\n    >\n      <SplitColContext.Provider value={contextValue}>\n        {fixed ? <div className={styles['SplitCol__fixedInner']}>{children}</div> : children}\n      </SplitColContext.Provider>\n    </RootComponent>\n  );\n};\n"],"names":["SplitCol","breakpointClassNames","none","classNames","tabletMinus","smallTabletPlus","tabletPlus","useTransitionAnimate","animateProp","viewWidth","useAdaptivity","animate","setAnimate","React","useState","Boolean","mediaQueries","useMediaQueries","useEffect","undefined","ViewWidth","TABLET","listener","matches","matchMediaListAddListener","matchMediaListRemoveListener","props","children","width","maxWidth","minWidth","fixed","style","autoSpaced","stretchedOnMobile","getRootRef","restProps","baseRef","useExternRef","contextValue","useObjectMemo","colRef","RootComponent","baseClassName","viewWidthToClassName","SplitColContext","Provider","value","div","className"],"mappings":";;;;+BAuEaA;;;eAAAA;;;;;;;iEAvEU;sBACI;+BACG;8BACD;iCACG;+BACF;4BACkB;4BACwB;+BAE1C;iCACE;AAGhC,MAAMC,uBAAuB;IAC3BC,MAAMC,IAAAA,gBAAU,kCAAqC;IACrDC,WAAW;IACXC,eAAe;IACfC,YAAY;AACd;AAEA,SAASC,qBAAqBC,WAAqB;IACjD,MAAM,EAAEC,SAAS,EAAE,GAAGC,IAAAA,4BAAa;IACnC,MAAM,CAACC,SAASC,WAAW,GAAGC,OAAMC,QAAQ,CAACC,QAAQP;IACrD,MAAMQ,eAAeC,IAAAA,gCAAe;IAEpCJ,OAAMK,SAAS,CAAC;QACd,IAAIV,gBAAgBW,WAAW;YAC7BP,WAAWJ;YACX;QACF;QAEA,IAAIC,cAAcU,WAAW;YAC3BP,WAAWH,YAAYW,qBAAS,CAACC,MAAM;YACvC;QACF;QAEA,oDAAoD;QACpD,MAAMC,WAAW,IAAMV,WAAW,CAACI,aAAaX,eAAe,CAACkB,OAAO;QACvED;QAEAE,IAAAA,qCAAyB,EAACR,aAAaX,eAAe,EAAEiB;QACxD,OAAO;YACLG,IAAAA,wCAA4B,EAACT,aAAaX,eAAe,EAAEiB;QAC7D;IACF,GAAG;QAACd;QAAaC;QAAWO;KAAa;IAEzC,OAAOL;AACT;AAwBO,MAAMX,WAAW,CAAC0B;IACvB,MAAM,EACJC,QAAQ,EACRC,KAAK,EACLC,QAAQ,EACRC,QAAQ,EACRnB,SAASH,WAAW,EACpBuB,KAAK,EACLC,KAAK,EACLC,UAAU,EACVC,iBAAiB,EACjBC,UAAU,EAEX,GAAGT,OADCU,yCACDV;QAXFC;QACAC;QACAC;QACAC;QACAnB;QACAoB;QACAC;QACAC;QACAC;QACAC;;IAGF,MAAME,UAAUC,IAAAA,0BAAY,EAACH;IAC7B,MAAM,EAAE1B,SAAS,EAAE,GAAGC,IAAAA,4BAAa;IACnC,MAAMC,UAAUJ,qBAAqBC;IAErC,MAAM+B,eAAeC,IAAAA,4BAAa,EAAC;QACjCC,QAAQJ;QACR1B;IACF;IAEA,qBACE,qBAAC+B,4BAAa,8CACRN;QACJJ,OAAO,4CACFA;YACHJ,OAAOA;YACPC,UAAUA;YACVC,UAAUA;;QAEZK,YAAYE;QACZM,eAAexC,IAAAA,gBAAU,kBAEvByC,IAAAA,gCAAoB,EAAC3C,sBAAsBQ,YAC3CwB,cACE9B,IAAAA,gBAAU,+BAAkC,sCAC9C4B,gCACAG;sBAGF,qBAACW,gCAAe,CAACC,QAAQ;QAACC,OAAOR;OAC9BR,sBAAQ,qBAACiB;QAAIC,SAAS;OAAmCtB,YAAkBA;AAIpF"}
+{"version":3,"sources":["../../../../src/components/SplitCol/SplitCol.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useMediaQueries } from '../../hooks/useMediaQueries';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { ViewWidth, viewWidthToClassName } from '../../lib/adaptivity';\nimport { matchMediaListAddListener, matchMediaListRemoveListener } from '../../lib/matchMedia';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { SplitColContext } from './SplitColContext';\nimport styles from './SplitCol.module.css';\n\nconst breakpointClassNames = {\n  none: classNames(styles['SplitCol--viewWidth-none'], 'vkuiInternalSplitCol--viewWidth-none'),\n  tabletMinus: styles['SplitCol--viewWidth-tabletMinus'],\n  smallTabletPlus: styles['SplitCol--viewWidth-smallTabletPlus'],\n  tabletPlus: 'vkuiInternalSplitCol--viewWidth-tabletPlus',\n};\n\nfunction useTransitionAnimate(animateProp?: boolean) {\n  const { viewWidth } = useAdaptivity();\n  const [animate, setAnimate] = React.useState(Boolean(animateProp));\n  const mediaQueries = useMediaQueries();\n\n  React.useEffect(() => {\n    if (animateProp !== undefined) {\n      setAnimate(animateProp);\n      return;\n    }\n\n    if (viewWidth !== undefined) {\n      setAnimate(viewWidth < ViewWidth.TABLET);\n      return;\n    }\n\n    // eslint-disable-next-line no-restricted-properties\n    const listener = () => setAnimate(!mediaQueries.smallTabletPlus.matches);\n    listener();\n\n    matchMediaListAddListener(mediaQueries.smallTabletPlus, listener);\n    return () => {\n      matchMediaListRemoveListener(mediaQueries.smallTabletPlus, listener);\n    };\n  }, [animateProp, viewWidth, mediaQueries]);\n\n  return animate;\n}\n\nexport interface SplitColProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  width?: number | string;\n  maxWidth?: number | string;\n  minWidth?: number | string;\n  /**\n   * Если false, то переходы между Panel происходят без анимации\n   */\n  animate?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины при ширине больше чем `smallTablet`\n   */\n  autoSpaced?: boolean;\n  fixed?: boolean;\n  /**\n   * Если true, то ширина контейнера становится 100% при ширине меньше чем `tablet`\n   */\n  stretchedOnMobile?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitCol\n */\nexport const SplitCol = (props: SplitColProps) => {\n  const {\n    children,\n    width,\n    maxWidth,\n    minWidth,\n    animate: animateProp,\n    fixed,\n    style,\n    autoSpaced,\n    stretchedOnMobile,\n    getRootRef,\n    ...restProps\n  } = props;\n  const baseRef = useExternRef(getRootRef);\n  const { viewWidth } = useAdaptivity();\n  const animate = useTransitionAnimate(animateProp);\n\n  const contextValue = useObjectMemo({\n    colRef: baseRef,\n    animate,\n  });\n\n  return (\n    <RootComponent\n      {...restProps}\n      style={{\n        ...style,\n        width: width,\n        maxWidth: maxWidth,\n        minWidth: minWidth,\n      }}\n      getRootRef={baseRef}\n      baseClassName={classNames(\n        styles['SplitCol'],\n        viewWidthToClassName(breakpointClassNames, viewWidth),\n        autoSpaced &&\n          classNames(styles['SplitCol--spaced-auto'], 'vkuiInternalSplitCol--spaced-auto'),\n        fixed && styles['SplitCol--fixed'],\n        stretchedOnMobile && styles['SplitCol--stretched-on-mobile'],\n      )}\n    >\n      <SplitColContext.Provider value={contextValue}>\n        {fixed ? <div className={styles['SplitCol__fixedInner']}>{children}</div> : children}\n      </SplitColContext.Provider>\n    </RootComponent>\n  );\n};\n"],"names":["SplitCol","breakpointClassNames","none","classNames","tabletMinus","smallTabletPlus","tabletPlus","useTransitionAnimate","animateProp","viewWidth","useAdaptivity","animate","setAnimate","React","useState","Boolean","mediaQueries","useMediaQueries","useEffect","undefined","ViewWidth","TABLET","listener","matches","matchMediaListAddListener","matchMediaListRemoveListener","props","children","width","maxWidth","minWidth","fixed","style","autoSpaced","stretchedOnMobile","getRootRef","restProps","baseRef","useExternRef","contextValue","useObjectMemo","colRef","RootComponent","baseClassName","viewWidthToClassName","SplitColContext","Provider","value","div","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAuEaA;;;eAAAA;;;;;;;;iEAvEU;sBACI;+BACG;8BACD;iCACG;+BACF;4BACkB;4BACwB;+BAE1C;iCACE;AAGhC,MAAMC,uBAAuB;IAC3BC,MAAMC,IAAAA,gBAAU,kCAAqC;IACrDC,WAAW;IACXC,eAAe;IACfC,YAAY;AACd;AAEA,SAASC,qBAAqBC,WAAqB;IACjD,MAAM,EAAEC,SAAS,EAAE,GAAGC,IAAAA,4BAAa;IACnC,MAAM,CAACC,SAASC,WAAW,GAAGC,OAAMC,QAAQ,CAACC,QAAQP;IACrD,MAAMQ,eAAeC,IAAAA,gCAAe;IAEpCJ,OAAMK,SAAS,CAAC;QACd,IAAIV,gBAAgBW,WAAW;YAC7BP,WAAWJ;YACX;QACF;QAEA,IAAIC,cAAcU,WAAW;YAC3BP,WAAWH,YAAYW,qBAAS,CAACC,MAAM;YACvC;QACF;QAEA,oDAAoD;QACpD,MAAMC,WAAW,IAAMV,WAAW,CAACI,aAAaX,eAAe,CAACkB,OAAO;QACvED;QAEAE,IAAAA,qCAAyB,EAACR,aAAaX,eAAe,EAAEiB;QACxD,OAAO;YACLG,IAAAA,wCAA4B,EAACT,aAAaX,eAAe,EAAEiB;QAC7D;IACF,GAAG;QAACd;QAAaC;QAAWO;KAAa;IAEzC,OAAOL;AACT;AAwBO,MAAMX,WAAW,CAAC0B;IACvB,MAAM,EACJC,QAAQ,EACRC,KAAK,EACLC,QAAQ,EACRC,QAAQ,EACRnB,SAASH,WAAW,EACpBuB,KAAK,EACLC,KAAK,EACLC,UAAU,EACVC,iBAAiB,EACjBC,UAAU,EAEX,GAAGT,OADCU,yCACDV;QAXFC;QACAC;QACAC;QACAC;QACAnB;QACAoB;QACAC;QACAC;QACAC;QACAC;;IAGF,MAAME,UAAUC,IAAAA,0BAAY,EAACH;IAC7B,MAAM,EAAE1B,SAAS,EAAE,GAAGC,IAAAA,4BAAa;IACnC,MAAMC,UAAUJ,qBAAqBC;IAErC,MAAM+B,eAAeC,IAAAA,4BAAa,EAAC;QACjCC,QAAQJ;QACR1B;IACF;IAEA,qBACE,qBAAC+B,4BAAa,8CACRN;QACJJ,OAAO,4CACFA;YACHJ,OAAOA;YACPC,UAAUA;YACVC,UAAUA;;QAEZK,YAAYE;QACZM,eAAexC,IAAAA,gBAAU,kBAEvByC,IAAAA,gCAAoB,EAAC3C,sBAAsBQ,YAC3CwB,cACE9B,IAAAA,gBAAU,+BAAkC,sCAC9C4B,gCACAG;kBAGF,cAAA,qBAACW,gCAAe,CAACC,QAAQ;YAACC,OAAOR;sBAC9BR,sBAAQ,qBAACiB;gBAAIC,SAAS;0BAAmCtB;iBAAkBA;;;AAIpF"}

package/dist/cjs/components/SplitCol/SplitColContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SplitCol/SplitColContext.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport interface SplitColContextProps {\n  colRef: React.RefObject<HTMLDivElement> | null;\n  animate: boolean;\n}\n\nexport const SplitColContext = React.createContext<SplitColContextProps>({\n  colRef: null,\n  animate: true,\n});\n\nexport const useSplitCol = () => React.useContext(SplitColContext);\n"],"names":["SplitColContext","useSplitCol","React","createContext","colRef","animate","useContext"],"mappings":";;;;;;;;;;;IAOaA,eAAe;eAAfA;;IAKAC,WAAW;eAAXA;;;;iEAZU;AAOhB,MAAMD,gCAAkBE,OAAMC,aAAa,CAAuB;IACvEC,QAAQ;IACRC,SAAS;AACX;AAEO,MAAMJ,cAAc,IAAMC,OAAMI,UAAU,CAACN"}
+{"version":3,"sources":["../../../../src/components/SplitCol/SplitColContext.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport interface SplitColContextProps {\n  colRef: React.RefObject<HTMLDivElement> | null;\n  animate: boolean;\n}\n\nexport const SplitColContext = React.createContext<SplitColContextProps>({\n  colRef: null,\n  animate: true,\n});\n\nexport const useSplitCol = () => React.useContext(SplitColContext);\n"],"names":["SplitColContext","useSplitCol","React","createContext","colRef","animate","useContext"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAOaA,eAAe;eAAfA;;IAKAC,WAAW;eAAXA;;;;iEAZU;AAOhB,MAAMD,gCAAkBE,OAAMC,aAAa,CAAuB;IACvEC,QAAQ;IACRC,SAAS;AACX;AAEO,MAAMJ,cAAc,IAAMC,OAAMI,UAAU,CAACN"}

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

@@ -10,9 +10,13 @@ export interface SplitLayoutProps extends HTMLAttributesWithRootRef<HTMLDivEleme
      */
     modal?: React.ReactNode;
     header?: React.ReactNode;
+    /**
+     * Центрирует контент.
+     */
+    center?: boolean;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/SplitLayout
  */
-export declare const SplitLayout: ({ popout, modal, header, children, getRootRef, getRef, className, ...restProps }: SplitLayoutProps) => React.JSX.Element;
+export declare const SplitLayout: ({ popout, modal, header, children, getRootRef, getRef, className, center, ...restProps }: SplitLayoutProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SplitLayout.d.ts.map