@vkontakte/vkui 6.5.3 → 6.7.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Snackbar/utils.ts"],"sourcesContent":["import * as React from 'react';\nimport type { MediaQueries } from '../../lib/adaptivity';\nimport { 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): React.CSSProperties | undefined {\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(\n  width: number,\n  height: number,\n  mediaQueries: MediaQueries,\n): ShiftData {\n  return {\n    shifted: false,\n    direction: null,\n    isDesktop: mediaQueries.smallTabletPlus.matches, // eslint-disable-line no-restricted-properties,\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): ShiftData {\n  /* istanbul ignore else: TODO чтобы протестировать кейс в блоке else, нужно мокать useMediaQueries(), чтобы перебивать mediaQueries.smallTabletPlus.matches */\n  if (shiftData.isDesktop) {\n    if (placement.endsWith('start')) {\n      shiftData.x = rubberbandIfOutOfBounds(nextShift.x, -shiftData.width, 0);\n    } else if (placement.endsWith('end')) {\n      shiftData.x = rubberbandIfOutOfBounds(nextShift.x, 0, shiftData.width);\n    }\n\n    if (placement.startsWith('bottom')) {\n      shiftData.y = rubberbandIfOutOfBounds(nextShift.y, 0, shiftData.height);\n    }\n  } else if (placement.startsWith('bottom')) {\n    shiftData.x = nextShift.x;\n\n    const movingToLeft = nextShift.x < 0 ? -1 : null;\n    const movingToRight = nextShift.x > 0 ? 1 : null;\n    shiftData.direction = movingToLeft || movingToRight;\n  }\n\n  if (placement.startsWith('top')) {\n    shiftData.y = rubberbandIfOutOfBounds(nextShift.y, -shiftData.height, 0);\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): boolean {\n  if (!shiftData.shifted) {\n    return false;\n  }\n\n  const shouldBeClosedThreshold = { x: false, y: false };\n  const shouldBeClosedByVelocity = { x: false, y: false };\n\n  /* istanbul ignore else: TODO чтобы протестировать кейс в блоке else, нужно мокать useMediaQueries(), чтобы перебивать mediaQueries.smallTabletPlus.matches */\n  if (shiftData.isDesktop) {\n    if (placement.endsWith('start')) {\n      shouldBeClosedThreshold.x = relativeClientRect.x < -relativeClientRect.width / 2;\n      shouldBeClosedByVelocity.x =\n        relativeClientRect.x < 0 ? velocity.x < -MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE : false;\n    } else if (placement.endsWith('end')) {\n      shouldBeClosedThreshold.x = relativeClientRect.x > relativeClientRect.width / 2;\n      shouldBeClosedByVelocity.x =\n        relativeClientRect.x > 0 ? velocity.x > MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE : false;\n    }\n\n    if (placement.startsWith('bottom')) {\n      shouldBeClosedThreshold.y = relativeClientRect.y > relativeClientRect.height / 2;\n      shouldBeClosedByVelocity.y =\n        relativeClientRect.y > 0 ? velocity.y > MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE : false;\n    }\n  } else if (placement.startsWith('bottom')) {\n    shouldBeClosedThreshold.x =\n      relativeClientRect.x < -relativeClientRect.width / 2 ||\n      relativeClientRect.x > relativeClientRect.width / 2;\n    shouldBeClosedByVelocity.x =\n      (relativeClientRect.x < 0 && velocity.x < -MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE) ||\n      (relativeClientRect.x > 0 && velocity.x > MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE);\n  }\n\n  if (placement.startsWith('top')) {\n    shouldBeClosedThreshold.y = relativeClientRect.y < -relativeClientRect.height / 2;\n    shouldBeClosedByVelocity.y =\n      relativeClientRect.y < 0 ? velocity.y < -MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE : false;\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","mediaQueries","shifted","direction","isDesktop","smallTabletPlus","matches","x","y","shiftData","nextShift","endsWith","rubberbandIfOutOfBounds","startsWith","movingToLeft","movingToRight","MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE","relativeClientRect","velocity","shouldBeClosedThreshold","shouldBeClosedByVelocity"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Snackbar/utils.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { MediaQueries } from '../../lib/adaptivity';\nimport { 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): React.CSSProperties | undefined {\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(\n  width: number,\n  height: number,\n  mediaQueries: MediaQueries,\n): ShiftData {\n  return {\n    shifted: false,\n    direction: null,\n    isDesktop: mediaQueries.smallTabletPlus.matches, // eslint-disable-line no-restricted-properties,\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): ShiftData {\n  /* istanbul ignore else: TODO чтобы протестировать кейс в блоке else, нужно мокать useMediaQueries(), чтобы перебивать mediaQueries.smallTabletPlus.matches */\n  if (shiftData.isDesktop) {\n    if (placement.endsWith('start')) {\n      shiftData.x = rubberbandIfOutOfBounds(nextShift.x, -shiftData.width, 0);\n    } else if (placement.endsWith('end')) {\n      shiftData.x = rubberbandIfOutOfBounds(nextShift.x, 0, shiftData.width);\n    }\n\n    if (placement.startsWith('bottom')) {\n      shiftData.y = rubberbandIfOutOfBounds(nextShift.y, 0, shiftData.height);\n    }\n  } else if (placement.startsWith('bottom')) {\n    shiftData.x = nextShift.x;\n\n    const movingToLeft = nextShift.x < 0 ? -1 : null;\n    const movingToRight = nextShift.x > 0 ? 1 : null;\n    shiftData.direction = movingToLeft || movingToRight;\n  }\n\n  if (placement.startsWith('top')) {\n    shiftData.y = rubberbandIfOutOfBounds(nextShift.y, -shiftData.height, 0);\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): boolean {\n  if (!shiftData.shifted) {\n    return false;\n  }\n\n  const shouldBeClosedThreshold = { x: false, y: false };\n  const shouldBeClosedByVelocity = { x: false, y: false };\n\n  /* istanbul ignore else: TODO чтобы протестировать кейс в блоке else, нужно мокать useMediaQueries(), чтобы перебивать mediaQueries.smallTabletPlus.matches */\n  if (shiftData.isDesktop) {\n    if (placement.endsWith('start')) {\n      shouldBeClosedThreshold.x = relativeClientRect.x < -relativeClientRect.width / 2;\n      shouldBeClosedByVelocity.x =\n        relativeClientRect.x < 0 ? velocity.x < -MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE : false;\n    } else if (placement.endsWith('end')) {\n      shouldBeClosedThreshold.x = relativeClientRect.x > relativeClientRect.width / 2;\n      shouldBeClosedByVelocity.x =\n        relativeClientRect.x > 0 ? velocity.x > MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE : false;\n    }\n\n    if (placement.startsWith('bottom')) {\n      shouldBeClosedThreshold.y = relativeClientRect.y > relativeClientRect.height / 2;\n      shouldBeClosedByVelocity.y =\n        relativeClientRect.y > 0 ? velocity.y > MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE : false;\n    }\n  } else if (placement.startsWith('bottom')) {\n    shouldBeClosedThreshold.x =\n      relativeClientRect.x < -relativeClientRect.width / 2 ||\n      relativeClientRect.x > relativeClientRect.width / 2;\n    shouldBeClosedByVelocity.x =\n      (relativeClientRect.x < 0 && velocity.x < -MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE) ||\n      (relativeClientRect.x > 0 && velocity.x > MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE);\n  }\n\n  if (placement.startsWith('top')) {\n    shouldBeClosedThreshold.y = relativeClientRect.y < -relativeClientRect.height / 2;\n    shouldBeClosedByVelocity.y =\n      relativeClientRect.y < 0 ? velocity.y < -MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE : false;\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","mediaQueries","shifted","direction","isDesktop","smallTabletPlus","matches","x","y","shiftData","nextShift","endsWith","rubberbandIfOutOfBounds","startsWith","movingToLeft","movingToRight","MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE","relativeClientRect","velocity","shouldBeClosedThreshold","shouldBeClosedByVelocity"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { HTMLAttributesWithRootRef } from '../../types';
+import type { HTMLAttributesWithRootRef } from '../../types';
 export declare const CUSTOM_CSS_TOKEN_FOR_USER_GAP = "--vkui_internal--Spacing_gap";
 export declare const sizesClassNames: Record<SpacingSize, string>;
 export type SpacingSize = 's' | 'm' | 'l' | '3xs' | '2xs' | 'xs' | 'xl' | '2xl' | '3xl' | '4xl';
@@ -12,5 +12,5 @@ export interface SpacingProps extends HTMLAttributesWithRootRef<HTMLDivElement>
 /**
  * @see https://vkcom.github.io/VKUI/#/Spacing
  */
-export declare const Spacing: ({ size, style, className, ...restProps }: SpacingProps) => React.ReactNode;
+export declare const Spacing: ({ size, style, ...restProps }: SpacingProps) => React.ReactNode;
 //# 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;AAE/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAIxD,eAAO,MAAM,6BAA6B,iCAAiC,CAAC;AAE5E,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAWvD,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,KAAK,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AAEhG,MAAM,WAAW,YAAa,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC7E;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;CAC7B;AACD;;GAEG;AACH,eAAO,MAAM,OAAO,6CAKjB,YAAY,KAAG,KAAK,CAAC,SAqBvB,CAAC"}
+{"version":3,"file":"Spacing.d.ts","sourceRoot":"","sources":["../../../../src/components/Spacing/Spacing.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAI7D,eAAO,MAAM,6BAA6B,iCAAiC,CAAC;AAE5E,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAWvD,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,KAAK,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AAEhG,MAAM,WAAW,YAAa,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC7E;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;CAC7B;AACD;;GAEG;AACH,eAAO,MAAM,OAAO,kCAAyC,YAAY,KAAG,KAAK,CAAC,SAcjF,CAAC"}

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

@@ -41,28 +41,15 @@ const sizesClassNames = {
     '4xl': "vkuiSpacing--4xl"
 };
 const Spacing = (_param)=>{
-    var { size = 'm', style, className } = _param, restProps = _object_without_properties._(_param, [
+    var { size = 'm', style } = _param, restProps = _object_without_properties._(_param, [
         "size",
-        "style",
-        "className"
+        "style"
     ]);
-    if (typeof size === 'string') {
-        className = className ? (0, _vkjs.classNames)(sizesClassNames[size], className) : sizesClassNames[size];
-    } else {
-        if (style) {
-            // @ts-expect-error: TS7053 В React.CSSProperties не учитывается Custom Properties
-            style[CUSTOM_CSS_TOKEN_FOR_USER_GAP] = size;
-        } else {
-            // @ts-expect-error: TS2353 В React.CSSProperties не учитывается Custom Properties
-            style = {
-                [CUSTOM_CSS_TOKEN_FOR_USER_GAP]: size
-            };
-        }
-    }
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, restProps), {
-        style: style,
-        className: className,
-        baseClassName: "vkuiSpacing"
+        style: _object_spread._({}, typeof size === 'number' && {
+            [CUSTOM_CSS_TOKEN_FOR_USER_GAP]: size
+        }, style),
+        baseClassName: (0, _vkjs.classNames)("vkuiSpacing", typeof size === 'string' && sizesClassNames[size])
     }));
 };
 

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 { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Spacing.module.css';\n\nexport const CUSTOM_CSS_TOKEN_FOR_USER_GAP = '--vkui_internal--Spacing_gap';\n\nexport const sizesClassNames: Record<SpacingSize, string> = {\n  '3xs': styles['Spacing--3xs'],\n  '2xs': styles['Spacing--2xs'],\n  'xs': styles['Spacing--xs'],\n  's': styles['Spacing--s'],\n  'm': styles['Spacing--m'],\n  'l': styles['Spacing--l'],\n  'xl': styles['Spacing--xl'],\n  '2xl': styles['Spacing--2xl'],\n  '3xl': styles['Spacing--3xl'],\n  '4xl': styles['Spacing--4xl'],\n};\n\nexport type SpacingSize = 's' | 'm' | 'l' | '3xs' | '2xs' | 'xs' | 'xl' | '2xl' | '3xl' | '4xl';\n\nexport interface SpacingProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Высота спэйсинга\n   */\n  size?: number | SpacingSize;\n}\n/**\n * @see https://vkcom.github.io/VKUI/#/Spacing\n */\nexport const Spacing = ({\n  size = 'm',\n  style,\n  className,\n  ...restProps\n}: SpacingProps): React.ReactNode => {\n  if (typeof size === 'string') {\n    className = className ? classNames(sizesClassNames[size], className) : sizesClassNames[size];\n  } else {\n    if (style) {\n      // @ts-expect-error: TS7053 В React.CSSProperties не учитывается Custom Properties\n      style[CUSTOM_CSS_TOKEN_FOR_USER_GAP] = size;\n    } else {\n      // @ts-expect-error: TS2353 В React.CSSProperties не учитывается Custom Properties\n      style = { [CUSTOM_CSS_TOKEN_FOR_USER_GAP]: size };\n    }\n  }\n\n  return (\n    <RootComponent\n      {...restProps}\n      style={style}\n      className={className}\n      baseClassName={styles['Spacing']}\n    />\n  );\n};\n"],"names":["CUSTOM_CSS_TOKEN_FOR_USER_GAP","Spacing","sizesClassNames","size","style","className","restProps","classNames","RootComponent","baseClassName"],"mappings":";;;;;;;;;;;IAMaA,6BAA6B;eAA7BA;;IA0BAC,OAAO;eAAPA;;IAxBAC,eAAe;eAAfA;;;;;;;;iEARU;sBACI;+BAEG;AAGvB,MAAMF,gCAAgC;AAEtC,MAAME,kBAA+C;IAC1D,KAAK;IACL,KAAK;IACL,IAAI;IACJ,GAAG;IACH,GAAG;IACH,GAAG;IACH,IAAI;IACJ,KAAK;IACL,KAAK;IACL,KAAK;AACP;AAaO,MAAMD,UAAU;QAAC,EACtBE,OAAO,GAAG,EACVC,KAAK,EACLC,SAAS,EAEI,WADVC;QAHHH;QACAC;QACAC;;IAGA,IAAI,OAAOF,SAAS,UAAU;QAC5BE,YAAYA,YAAYE,IAAAA,gBAAU,EAACL,eAAe,CAACC,KAAK,EAAEE,aAAaH,eAAe,CAACC,KAAK;IAC9F,OAAO;QACL,IAAIC,OAAO;YACT,kFAAkF;YAClFA,KAAK,CAACJ,8BAA8B,GAAGG;QACzC,OAAO;YACL,kFAAkF;YAClFC,QAAQ;gBAAE,CAACJ,8BAA8B,EAAEG;YAAK;QAClD;IACF;IAEA,qBACE,qBAACK,4BAAa,8CACRF;QACJF,OAAOA;QACPC,WAAWA;QACXI,aAAa;;AAGnB"}
+{"version":3,"sources":["../../../../src/components/Spacing/Spacing.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Spacing.module.css';\n\nexport const CUSTOM_CSS_TOKEN_FOR_USER_GAP = '--vkui_internal--Spacing_gap';\n\nexport const sizesClassNames: Record<SpacingSize, string> = {\n  '3xs': styles['Spacing--3xs'],\n  '2xs': styles['Spacing--2xs'],\n  'xs': styles['Spacing--xs'],\n  's': styles['Spacing--s'],\n  'm': styles['Spacing--m'],\n  'l': styles['Spacing--l'],\n  'xl': styles['Spacing--xl'],\n  '2xl': styles['Spacing--2xl'],\n  '3xl': styles['Spacing--3xl'],\n  '4xl': styles['Spacing--4xl'],\n};\n\nexport type SpacingSize = 's' | 'm' | 'l' | '3xs' | '2xs' | 'xs' | 'xl' | '2xl' | '3xl' | '4xl';\n\nexport interface SpacingProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Высота спэйсинга\n   */\n  size?: number | SpacingSize;\n}\n/**\n * @see https://vkcom.github.io/VKUI/#/Spacing\n */\nexport const Spacing = ({ size = 'm', style, ...restProps }: SpacingProps): React.ReactNode => {\n  return (\n    <RootComponent\n      {...restProps}\n      style={{\n        ...(typeof size === 'number' && { [CUSTOM_CSS_TOKEN_FOR_USER_GAP]: size }),\n        ...style,\n      }}\n      baseClassName={classNames(\n        styles['Spacing'],\n        typeof size === 'string' && sizesClassNames[size],\n      )}\n    />\n  );\n};\n"],"names":["CUSTOM_CSS_TOKEN_FOR_USER_GAP","Spacing","sizesClassNames","size","style","restProps","RootComponent","baseClassName","classNames"],"mappings":";;;;;;;;;;;IAMaA,6BAA6B;eAA7BA;;IA0BAC,OAAO;eAAPA;;IAxBAC,eAAe;eAAfA;;;;;;;;iEARU;sBACI;+BAEG;AAGvB,MAAMF,gCAAgC;AAEtC,MAAME,kBAA+C;IAC1D,KAAK;IACL,KAAK;IACL,IAAI;IACJ,GAAG;IACH,GAAG;IACH,GAAG;IACH,IAAI;IACJ,KAAK;IACL,KAAK;IACL,KAAK;AACP;AAaO,MAAMD,UAAU;QAAC,EAAEE,OAAO,GAAG,EAAEC,KAAK,EAA8B,WAAzBC;QAAtBF;QAAYC;;IACpC,qBACE,qBAACE,4BAAa,8CACRD;QACJD,OAAO,qBACD,OAAOD,SAAS,YAAY;YAAE,CAACH,8BAA8B,EAAEG;QAAK,GACrEC;QAELG,eAAeC,IAAAA,gBAAU,iBAEvB,OAAOL,SAAS,YAAYD,eAAe,CAACC,KAAK;;AAIzD"}

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

@@ -1,8 +1,12 @@
 import * as React from 'react';
-import { HTMLAttributesWithRootRef } from '../../types';
+import type { HTMLAttributesWithRootRef } from '../../types';
 export interface SpinnerProps extends HTMLAttributesWithRootRef<HTMLSpanElement> {
     size?: 'small' | 'regular' | 'medium' | 'large';
     disableAnimation?: boolean;
+    /**
+     * Задать цвет можно будет через свойство color родителя
+     */
+    noColor?: boolean;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Spinner

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;AAI/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,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAgE1C,CAAC"}
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../../src/components/Spinner/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAK7D,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;IAC3B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAiE1C,CAAC"}

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

@@ -20,10 +20,11 @@ const _animation = require("../../lib/animation");
 const _RootComponent = require("../RootComponent/RootComponent");
 const _VisuallyHidden = require("../VisuallyHidden/VisuallyHidden");
 const Spinner = /*#__PURE__*/ _react.memo((_param)=>{
-    var { size = 'regular', children = 'Загружается...', disableAnimation = false } = _param, restProps = _object_without_properties._(_param, [
+    var { size = 'regular', children = 'Загружается...', disableAnimation = false, noColor = false } = _param, restProps = _object_without_properties._(_param, [
         "size",
         "children",
-        "disableAnimation"
+        "disableAnimation",
+        "noColor"
     ]);
     const isReducedMotion = (0, _animation.useReducedMotion)();
     const SpinnerIcon = {
@@ -69,7 +70,7 @@ const Spinner = /*#__PURE__*/ _react.memo((_param)=>{
         Component: "span",
         role: "status"
     }, restProps), {
-        baseClassName: "vkuiSpinner",
+        baseClassName: (0, _vkjs.classNames)("vkuiSpinner", noColor && "vkuiSpinner--no-color"),
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsx)(SpinnerIcon, {
                 children: svgAnimateElement

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 { useReducedMotion } from '../../lib/animation';\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.FC<SpinnerProps> = React.memo(\n  ({\n    size = 'regular',\n    children = 'Загружается...',\n    disableAnimation = false,\n    ...restProps\n  }: SpinnerProps) => {\n    const isReducedMotion = useReducedMotion();\n    const SpinnerIcon = {\n      small: Icon16Spinner,\n      regular: Icon24Spinner,\n      medium: Icon32Spinner,\n      large: Icon44Spinner,\n    }[size];\n    let svgAnimateElement: React.ReactNode = null;\n\n    const [isReadyForSetSVGAnimateElement, setIsReadyForSetSVGAnimateElement] = React.useState(\n      disableAnimation ? true : false,\n    );\n\n    React.useEffect(function waitReactHydrationBeforeSetSVGAnimateElement() {\n      setIsReadyForSetSVGAnimateElement(true);\n    }, []);\n\n    if (isReadyForSetSVGAnimateElement && !disableAnimation) {\n      if (isReducedMotion) {\n        svgAnimateElement = (\n          <animate\n            attributeName=\"opacity\"\n            keyTimes=\"0; 0.5; 1\"\n            values=\"1; 0.1; 1\"\n            begin=\"0s\"\n            dur=\"2s\"\n            repeatCount=\"indefinite\"\n          />\n        );\n      } else {\n        const center = { small: 8, regular: 12, medium: 16, large: 22 }[size];\n        svgAnimateElement = (\n          <animateTransform\n            attributeType=\"XML\"\n            attributeName=\"transform\"\n            type=\"rotate\"\n            from={`0 ${center} ${center}`}\n            to={`360 ${center} ${center}`}\n            dur=\"0.7s\"\n            repeatCount=\"indefinite\"\n          />\n        );\n      }\n    }\n\n    return (\n      <RootComponent\n        Component=\"span\"\n        role=\"status\"\n        {...restProps}\n        baseClassName={styles['Spinner']}\n      >\n        <SpinnerIcon>{svgAnimateElement}</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","isReducedMotion","useReducedMotion","SpinnerIcon","small","Icon16Spinner","regular","Icon24Spinner","medium","Icon32Spinner","large","Icon44Spinner","svgAnimateElement","isReadyForSetSVGAnimateElement","setIsReadyForSetSVGAnimateElement","useState","useEffect","waitReactHydrationBeforeSetSVGAnimateElement","animate","attributeName","keyTimes","values","begin","dur","repeatCount","center","animateTransform","attributeType","type","from","to","RootComponent","Component","role","baseClassName","hasReactNode","VisuallyHidden","displayName"],"mappings":";;;;+BAiBaA;;;eAAAA;;;;;;;;iEAjBU;uBACoD;sBAC9C;2BACI;+BAEH;gCACC;AAWxB,MAAMA,wBAAkCC,OAAMC,IAAI,CACvD;QAAC,EACCC,OAAO,SAAS,EAChBC,WAAW,gBAAgB,EAC3BC,mBAAmB,KAAK,EAEX,WADVC;QAHHH;QACAC;QACAC;;IAGA,MAAME,kBAAkBC,IAAAA,2BAAgB;IACxC,MAAMC,cAAc;QAClBC,OAAOC,oBAAa;QACpBC,SAASC,oBAAa;QACtBC,QAAQC,oBAAa;QACrBC,OAAOC,oBAAa;IACtB,CAAC,CAACd,KAAK;IACP,IAAIe,oBAAqC;IAEzC,MAAM,CAACC,gCAAgCC,kCAAkC,GAAGnB,OAAMoB,QAAQ,CACxFhB,mBAAmB,OAAO;IAG5BJ,OAAMqB,SAAS,CAAC,SAASC;QACvBH,kCAAkC;IACpC,GAAG,EAAE;IAEL,IAAID,kCAAkC,CAACd,kBAAkB;QACvD,IAAIE,iBAAiB;YACnBW,kCACE,qBAACM;gBACCC,eAAc;gBACdC,UAAS;gBACTC,QAAO;gBACPC,OAAM;gBACNC,KAAI;gBACJC,aAAY;;QAGlB,OAAO;YACL,MAAMC,SAAS;gBAAErB,OAAO;gBAAGE,SAAS;gBAAIE,QAAQ;gBAAIE,OAAO;YAAG,CAAC,CAACb,KAAK;YACrEe,kCACE,qBAACc;gBACCC,eAAc;gBACdR,eAAc;gBACdS,MAAK;gBACLC,MAAM,CAAC,EAAE,EAAEJ,OAAO,CAAC,EAAEA,OAAO,CAAC;gBAC7BK,IAAI,CAAC,IAAI,EAAEL,OAAO,CAAC,EAAEA,OAAO,CAAC;gBAC7BF,KAAI;gBACJC,aAAY;;QAGlB;IACF;IAEA,qBACE,sBAACO,4BAAa;QACZC,WAAU;QACVC,MAAK;OACDjC;QACJkC,aAAa;;0BAEb,qBAAC/B;0BAAaS;;YACbuB,IAAAA,kBAAY,EAACrC,2BAAa,qBAACsC,8BAAc;0BAAEtC;;;;AAGlD;AAGFJ,QAAQ2C,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 { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useReducedMotion } from '../../lib/animation';\nimport type { 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   * Задать цвет можно будет через свойство color родителя\n   */\n  noColor?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Spinner\n */\nexport const Spinner: React.FC<SpinnerProps> = React.memo(\n  ({\n    size = 'regular',\n    children = 'Загружается...',\n    disableAnimation = false,\n    noColor = false,\n    ...restProps\n  }: SpinnerProps) => {\n    const isReducedMotion = useReducedMotion();\n    const SpinnerIcon = {\n      small: Icon16Spinner,\n      regular: Icon24Spinner,\n      medium: Icon32Spinner,\n      large: Icon44Spinner,\n    }[size];\n    let svgAnimateElement: React.ReactNode = null;\n\n    const [isReadyForSetSVGAnimateElement, setIsReadyForSetSVGAnimateElement] = React.useState(\n      disableAnimation ? true : false,\n    );\n\n    React.useEffect(function waitReactHydrationBeforeSetSVGAnimateElement() {\n      setIsReadyForSetSVGAnimateElement(true);\n    }, []);\n\n    if (isReadyForSetSVGAnimateElement && !disableAnimation) {\n      if (isReducedMotion) {\n        svgAnimateElement = (\n          <animate\n            attributeName=\"opacity\"\n            keyTimes=\"0; 0.5; 1\"\n            values=\"1; 0.1; 1\"\n            begin=\"0s\"\n            dur=\"2s\"\n            repeatCount=\"indefinite\"\n          />\n        );\n      } else {\n        const center = { small: 8, regular: 12, medium: 16, large: 22 }[size];\n        svgAnimateElement = (\n          <animateTransform\n            attributeType=\"XML\"\n            attributeName=\"transform\"\n            type=\"rotate\"\n            from={`0 ${center} ${center}`}\n            to={`360 ${center} ${center}`}\n            dur=\"0.7s\"\n            repeatCount=\"indefinite\"\n          />\n        );\n      }\n    }\n\n    return (\n      <RootComponent\n        Component=\"span\"\n        role=\"status\"\n        {...restProps}\n        baseClassName={classNames(styles['Spinner'], noColor && styles['Spinner--no-color'])}\n      >\n        <SpinnerIcon>{svgAnimateElement}</SpinnerIcon>\n        {hasReactNode(children) && <VisuallyHidden>{children}</VisuallyHidden>}\n      </RootComponent>\n    );\n  },\n);\n\nSpinner.displayName = 'Spinner';\n"],"names":["Spinner","React","memo","size","children","disableAnimation","noColor","restProps","isReducedMotion","useReducedMotion","SpinnerIcon","small","Icon16Spinner","regular","Icon24Spinner","medium","Icon32Spinner","large","Icon44Spinner","svgAnimateElement","isReadyForSetSVGAnimateElement","setIsReadyForSetSVGAnimateElement","useState","useEffect","waitReactHydrationBeforeSetSVGAnimateElement","animate","attributeName","keyTimes","values","begin","dur","repeatCount","center","animateTransform","attributeType","type","from","to","RootComponent","Component","role","baseClassName","classNames","hasReactNode","VisuallyHidden","displayName"],"mappings":";;;;+BAqBaA;;;eAAAA;;;;;;;;iEArBU;uBACoD;sBAClC;2BACR;+BAEH;gCACC;AAexB,MAAMA,wBAAkCC,OAAMC,IAAI,CACvD;QAAC,EACCC,OAAO,SAAS,EAChBC,WAAW,gBAAgB,EAC3BC,mBAAmB,KAAK,EACxBC,UAAU,KAAK,EAEF,WADVC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,MAAME,kBAAkBC,IAAAA,2BAAgB;IACxC,MAAMC,cAAc;QAClBC,OAAOC,oBAAa;QACpBC,SAASC,oBAAa;QACtBC,QAAQC,oBAAa;QACrBC,OAAOC,oBAAa;IACtB,CAAC,CAACf,KAAK;IACP,IAAIgB,oBAAqC;IAEzC,MAAM,CAACC,gCAAgCC,kCAAkC,GAAGpB,OAAMqB,QAAQ,CACxFjB,mBAAmB,OAAO;IAG5BJ,OAAMsB,SAAS,CAAC,SAASC;QACvBH,kCAAkC;IACpC,GAAG,EAAE;IAEL,IAAID,kCAAkC,CAACf,kBAAkB;QACvD,IAAIG,iBAAiB;YACnBW,kCACE,qBAACM;gBACCC,eAAc;gBACdC,UAAS;gBACTC,QAAO;gBACPC,OAAM;gBACNC,KAAI;gBACJC,aAAY;;QAGlB,OAAO;YACL,MAAMC,SAAS;gBAAErB,OAAO;gBAAGE,SAAS;gBAAIE,QAAQ;gBAAIE,OAAO;YAAG,CAAC,CAACd,KAAK;YACrEgB,kCACE,qBAACc;gBACCC,eAAc;gBACdR,eAAc;gBACdS,MAAK;gBACLC,MAAM,CAAC,EAAE,EAAEJ,OAAO,CAAC,EAAEA,OAAO,CAAC;gBAC7BK,IAAI,CAAC,IAAI,EAAEL,OAAO,CAAC,EAAEA,OAAO,CAAC;gBAC7BF,KAAI;gBACJC,aAAY;;QAGlB;IACF;IAEA,qBACE,sBAACO,4BAAa;QACZC,WAAU;QACVC,MAAK;OACDjC;QACJkC,eAAeC,IAAAA,gBAAU,iBAAoBpC;;0BAE7C,qBAACI;0BAAaS;;YACbwB,IAAAA,kBAAY,EAACvC,2BAAa,qBAACwC,8BAAc;0BAAExC;;;;AAGlD;AAGFJ,QAAQ6C,WAAW,GAAG"}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { HTMLAttributesWithRootRef } from '../../types';
+import type { HTMLAttributesWithRootRef } from '../../types';
 export interface SplitColProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     width?: number | string;
     maxWidth?: number | string;

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,KAAG,KAAK,CAAC,SA+CrD,CAAC"}
+{"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,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAyC7D,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,KAAG,KAAK,CAAC,SA+CrD,CAAC"}

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): React.ReactNode => {\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;kBAGF,cAAA,qBAACW,gCAAe,CAACC,QAAQ;YAACC,OAAOR;sBAC9BR,sBAAQ,qBAACiB;gBAAIC,SAAS;0BAAmCtB;iBAAkBA;;;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 type { 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): React.ReactNode => {\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;kBAGF,cAAA,qBAACW,gCAAe,CAACC,QAAQ;YAACC,OAAOR;sBAC9BR,sBAAQ,qBAACiB;gBAAIC,SAAS;0BAAmCtB;iBAAkBA;;;AAIpF"}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { HasRef, HTMLAttributesWithRootRef } from '../../types';
+import type { HasRef, HTMLAttributesWithRootRef } from '../../types';
 export interface SplitLayoutProps extends HTMLAttributesWithRootRef<HTMLDivElement>, HasRef<HTMLDivElement> {
     /**
      * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.

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

@@ -1 +1 @@
-{"version":3,"file":"SplitLayout.d.ts","sourceRoot":"","sources":["../../../../src/components/SplitLayout/SplitLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,MAAM,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAIhE,MAAM,WAAW,gBACf,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAC/C,MAAM,CAAC,cAAc,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,6FAUrB,gBAAgB,KAAG,KAAK,CAAC,SA4B3B,CAAC"}
+{"version":3,"file":"SplitLayout.d.ts","sourceRoot":"","sources":["../../../../src/components/SplitLayout/SplitLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,MAAM,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAIrE,MAAM,WAAW,gBACf,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAC/C,MAAM,CAAC,cAAc,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,6FAUrB,gBAAgB,KAAG,KAAK,CAAC,SA4B3B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SplitLayout/SplitLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HasRef, HTMLAttributesWithRootRef } from '../../types';\nimport { PopoutRoot } from '../PopoutRoot/PopoutRoot';\nimport styles from './SplitLayout.module.css';\n\nexport interface SplitLayoutProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.\n   */\n  popout?: React.ReactNode;\n  /**\n   * Свойство для отрисовки `ModalRoot`.\n   */\n  modal?: React.ReactNode;\n  header?: React.ReactNode;\n  /**\n   * Центрирует контент.\n   */\n  center?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitLayout\n */\nexport const SplitLayout = ({\n  popout,\n  modal,\n  header,\n  children,\n  getRootRef,\n  getRef,\n  className,\n  center,\n  ...restProps\n}: SplitLayoutProps): React.ReactNode => {\n  const platform = usePlatform();\n\n  return (\n    <PopoutRoot\n      className={classNames(\n        styles['SplitLayout'],\n        platform === 'ios' && styles['SplitLayout--ios'],\n      )}\n      popout={popout}\n      modal={modal}\n      getRootRef={getRootRef}\n    >\n      {header}\n      <div\n        {...restProps}\n        ref={getRef}\n        className={classNames(\n          styles['SplitLayout__inner'],\n          !!header && styles['SplitLayout__inner--header'],\n          center && styles['SplitLayout__inner--center'],\n          className,\n        )}\n      >\n        {children}\n      </div>\n    </PopoutRoot>\n  );\n};\n"],"names":["SplitLayout","popout","modal","header","children","getRootRef","getRef","className","center","restProps","platform","usePlatform","PopoutRoot","classNames","div","ref"],"mappings":";;;;+BA4BaA;;;eAAAA;;;;;;;;iEA5BU;sBACI;6BACC;4BAED;AAwBpB,MAAMA,cAAc;QAAC,EAC1BC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,SAAS,EACTC,MAAM,EAEW,WADdC;QARHR;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,WAAWC,IAAAA,wBAAW;IAE5B,qBACE,sBAACC,sBAAU;QACTL,WAAWM,IAAAA,gBAAU,qBAEnBH,aAAa;QAEfT,QAAQA;QACRC,OAAOA;QACPG,YAAYA;;YAEXF;0BACD,qBAACW,mDACKL;gBACJM,KAAKT;gBACLC,WAAWM,IAAAA,gBAAU,4BAEnB,CAAC,CAACV,4CACFK,4CACAD;0BAGDH;;;;AAIT"}
+{"version":3,"sources":["../../../../src/components/SplitLayout/SplitLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { HasRef, HTMLAttributesWithRootRef } from '../../types';\nimport { PopoutRoot } from '../PopoutRoot/PopoutRoot';\nimport styles from './SplitLayout.module.css';\n\nexport interface SplitLayoutProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.\n   */\n  popout?: React.ReactNode;\n  /**\n   * Свойство для отрисовки `ModalRoot`.\n   */\n  modal?: React.ReactNode;\n  header?: React.ReactNode;\n  /**\n   * Центрирует контент.\n   */\n  center?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitLayout\n */\nexport const SplitLayout = ({\n  popout,\n  modal,\n  header,\n  children,\n  getRootRef,\n  getRef,\n  className,\n  center,\n  ...restProps\n}: SplitLayoutProps): React.ReactNode => {\n  const platform = usePlatform();\n\n  return (\n    <PopoutRoot\n      className={classNames(\n        styles['SplitLayout'],\n        platform === 'ios' && styles['SplitLayout--ios'],\n      )}\n      popout={popout}\n      modal={modal}\n      getRootRef={getRootRef}\n    >\n      {header}\n      <div\n        {...restProps}\n        ref={getRef}\n        className={classNames(\n          styles['SplitLayout__inner'],\n          !!header && styles['SplitLayout__inner--header'],\n          center && styles['SplitLayout__inner--center'],\n          className,\n        )}\n      >\n        {children}\n      </div>\n    </PopoutRoot>\n  );\n};\n"],"names":["SplitLayout","popout","modal","header","children","getRootRef","getRef","className","center","restProps","platform","usePlatform","PopoutRoot","classNames","div","ref"],"mappings":";;;;+BA4BaA;;;eAAAA;;;;;;;;iEA5BU;sBACI;6BACC;4BAED;AAwBpB,MAAMA,cAAc;QAAC,EAC1BC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,SAAS,EACTC,MAAM,EAEW,WADdC;QARHR;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,WAAWC,IAAAA,wBAAW;IAE5B,qBACE,sBAACC,sBAAU;QACTL,WAAWM,IAAAA,gBAAU,qBAEnBH,aAAa;QAEfT,QAAQA;QACRC,OAAOA;QACPG,YAAYA;;YAEXF;0BACD,qBAACW,mDACKL;gBACJM,KAAKT;gBACLC,WAAWM,IAAAA,gBAAU,4BAEnB,CAAC,CAACV,4CACFK,4CACAD;0BAGDH;;;;AAIT"}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { HTMLAttributesWithRootRef } from '../../types';
-import { HorizontalScrollProps } from '../HorizontalScroll/HorizontalScroll';
+import type { HTMLAttributesWithRootRef } from '../../types';
+import { type HorizontalScrollProps } from '../HorizontalScroll/HorizontalScroll';
 export interface SubnavigationBarProps extends HTMLAttributesWithRootRef<HTMLDivElement>, Pick<HorizontalScrollProps, 'showArrows' | 'getScrollToLeft' | 'getScrollToRight' | 'scrollAnimationDuration'> {
     mode?: 'fixed' | 'overflow';
 }

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

@@ -1 +1 @@
-{"version":3,"file":"SubnavigationBar.d.ts","sourceRoot":"","sources":["../../../../src/components/SubnavigationBar/SubnavigationBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAEL,qBAAqB,EAEtB,MAAM,sCAAsC,CAAC;AAI9C,MAAM,WAAW,qBACf,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAC/C,IAAI,CACF,qBAAqB,EACrB,YAAY,GAAG,iBAAiB,GAAG,kBAAkB,GAAG,yBAAyB,CAClF;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;CAC7B;AAMD;;GAEG;AACH,eAAO,MAAM,gBAAgB,6GAQ1B,qBAAqB,KAAG,KAAK,CAAC,SAkChC,CAAC"}
+{"version":3,"file":"SubnavigationBar.d.ts","sourceRoot":"","sources":["../../../../src/components/SubnavigationBar/SubnavigationBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAEL,KAAK,qBAAqB,EAE3B,MAAM,sCAAsC,CAAC;AAI9C,MAAM,WAAW,qBACf,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAC/C,IAAI,CACF,qBAAqB,EACrB,YAAY,GAAG,iBAAiB,GAAG,kBAAkB,GAAG,yBAAyB,CAClF;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;CAC7B;AAMD;;GAEG;AACH,eAAO,MAAM,gBAAgB,6GAQ1B,qBAAqB,KAAG,KAAK,CAAC,SAkChC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SubnavigationBar/SubnavigationBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { hasReactNode } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport {\n  HorizontalScroll,\n  HorizontalScrollProps,\n  ScrollPositionHandler,\n} from '../HorizontalScroll/HorizontalScroll';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './SubnavigationBar.module.css';\n\nexport interface SubnavigationBarProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    Pick<\n      HorizontalScrollProps,\n      'showArrows' | 'getScrollToLeft' | 'getScrollToRight' | 'scrollAnimationDuration'\n    > {\n  mode?: 'fixed' | 'overflow';\n}\n\nconst defaultScrollToLeft: ScrollPositionHandler = (x) => x - 240;\n\nconst defaultScrollToRight: ScrollPositionHandler = (x) => x + 240;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SubnavigationBar\n */\nexport const SubnavigationBar = ({\n  mode = 'overflow',\n  children,\n  showArrows = true,\n  getScrollToLeft = defaultScrollToLeft,\n  getScrollToRight = defaultScrollToRight,\n  scrollAnimationDuration,\n  ...restProps\n}: SubnavigationBarProps): React.ReactNode => {\n  let ScrollWrapper: React.ElementType;\n  let scrollWrapperProps = {};\n\n  if (mode === 'fixed') {\n    ScrollWrapper = 'div';\n  } else {\n    ScrollWrapper = HorizontalScroll;\n    scrollWrapperProps = {\n      showArrows,\n      getScrollToLeft,\n      getScrollToRight,\n      scrollAnimationDuration,\n    };\n  }\n\n  return (\n    <RootComponent\n      baseClassName={mode === 'fixed' && styles['SubnavigationBar--mode-fixed']}\n      {...restProps}\n    >\n      <ScrollWrapper className={styles['SubnavigationBar__in']} {...scrollWrapperProps}>\n        <ul className={styles['SubnavigationBar__scrollIn']}>\n          {React.Children.map(children, (child, idx) =>\n            hasReactNode(child) ? (\n              <li key={idx} className={styles['SubnavigationBar__item']}>\n                {child}\n              </li>\n            ) : null,\n          )}\n        </ul>\n      </ScrollWrapper>\n    </RootComponent>\n  );\n};\n"],"names":["SubnavigationBar","defaultScrollToLeft","x","defaultScrollToRight","mode","children","showArrows","getScrollToLeft","getScrollToRight","scrollAnimationDuration","restProps","ScrollWrapper","scrollWrapperProps","HorizontalScroll","RootComponent","baseClassName","className","ul","React","Children","map","child","idx","hasReactNode","li"],"mappings":";;;;+BA2BaA;;;eAAAA;;;;;;;;iEA3BU;sBACM;kCAMtB;+BACuB;AAY9B,MAAMC,sBAA6C,CAACC,IAAMA,IAAI;AAE9D,MAAMC,uBAA8C,CAACD,IAAMA,IAAI;AAKxD,MAAMF,mBAAmB;QAAC,EAC/BI,OAAO,UAAU,EACjBC,QAAQ,EACRC,aAAa,IAAI,EACjBC,kBAAkBN,mBAAmB,EACrCO,mBAAmBL,oBAAoB,EACvCM,uBAAuB,EAED,WADnBC;QANHN;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAIE;IACJ,IAAIC,qBAAqB,CAAC;IAE1B,IAAIR,SAAS,SAAS;QACpBO,gBAAgB;IAClB,OAAO;QACLA,gBAAgBE,kCAAgB;QAChCD,qBAAqB;YACnBN;YACAC;YACAC;YACAC;QACF;IACF;IAEA,qBACE,qBAACK,4BAAa;QACZC,eAAeX,SAAS;OACpBM;kBAEJ,cAAA,qBAACC;YAAcK,SAAS;WAAsCJ;sBAC5D,cAAA,qBAACK;gBAAGD,SAAS;0BACVE,OAAMC,QAAQ,CAACC,GAAG,CAACf,UAAU,CAACgB,OAAOC,MACpCC,IAAAA,kBAAY,EAACF,uBACX,qBAACG;wBAAaR,SAAS;kCACpBK;uBADMC,OAGP;;;;AAMhB"}
+{"version":3,"sources":["../../../../src/components/SubnavigationBar/SubnavigationBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { hasReactNode } from '@vkontakte/vkjs';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport {\n  HorizontalScroll,\n  type HorizontalScrollProps,\n  type ScrollPositionHandler,\n} from '../HorizontalScroll/HorizontalScroll';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './SubnavigationBar.module.css';\n\nexport interface SubnavigationBarProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    Pick<\n      HorizontalScrollProps,\n      'showArrows' | 'getScrollToLeft' | 'getScrollToRight' | 'scrollAnimationDuration'\n    > {\n  mode?: 'fixed' | 'overflow';\n}\n\nconst defaultScrollToLeft: ScrollPositionHandler = (x) => x - 240;\n\nconst defaultScrollToRight: ScrollPositionHandler = (x) => x + 240;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SubnavigationBar\n */\nexport const SubnavigationBar = ({\n  mode = 'overflow',\n  children,\n  showArrows = true,\n  getScrollToLeft = defaultScrollToLeft,\n  getScrollToRight = defaultScrollToRight,\n  scrollAnimationDuration,\n  ...restProps\n}: SubnavigationBarProps): React.ReactNode => {\n  let ScrollWrapper: React.ElementType;\n  let scrollWrapperProps = {};\n\n  if (mode === 'fixed') {\n    ScrollWrapper = 'div';\n  } else {\n    ScrollWrapper = HorizontalScroll;\n    scrollWrapperProps = {\n      showArrows,\n      getScrollToLeft,\n      getScrollToRight,\n      scrollAnimationDuration,\n    };\n  }\n\n  return (\n    <RootComponent\n      baseClassName={mode === 'fixed' && styles['SubnavigationBar--mode-fixed']}\n      {...restProps}\n    >\n      <ScrollWrapper className={styles['SubnavigationBar__in']} {...scrollWrapperProps}>\n        <ul className={styles['SubnavigationBar__scrollIn']}>\n          {React.Children.map(children, (child, idx) =>\n            hasReactNode(child) ? (\n              <li key={idx} className={styles['SubnavigationBar__item']}>\n                {child}\n              </li>\n            ) : null,\n          )}\n        </ul>\n      </ScrollWrapper>\n    </RootComponent>\n  );\n};\n"],"names":["SubnavigationBar","defaultScrollToLeft","x","defaultScrollToRight","mode","children","showArrows","getScrollToLeft","getScrollToRight","scrollAnimationDuration","restProps","ScrollWrapper","scrollWrapperProps","HorizontalScroll","RootComponent","baseClassName","className","ul","React","Children","map","child","idx","hasReactNode","li"],"mappings":";;;;+BA2BaA;;;eAAAA;;;;;;;;iEA3BU;sBACM;kCAMtB;+BACuB;AAY9B,MAAMC,sBAA6C,CAACC,IAAMA,IAAI;AAE9D,MAAMC,uBAA8C,CAACD,IAAMA,IAAI;AAKxD,MAAMF,mBAAmB;QAAC,EAC/BI,OAAO,UAAU,EACjBC,QAAQ,EACRC,aAAa,IAAI,EACjBC,kBAAkBN,mBAAmB,EACrCO,mBAAmBL,oBAAoB,EACvCM,uBAAuB,EAED,WADnBC;QANHN;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAIE;IACJ,IAAIC,qBAAqB,CAAC;IAE1B,IAAIR,SAAS,SAAS;QACpBO,gBAAgB;IAClB,OAAO;QACLA,gBAAgBE,kCAAgB;QAChCD,qBAAqB;YACnBN;YACAC;YACAC;YACAC;QACF;IACF;IAEA,qBACE,qBAACK,4BAAa;QACZC,eAAeX,SAAS;OACpBM;kBAEJ,cAAA,qBAACC;YAAcK,SAAS;WAAsCJ;sBAC5D,cAAA,qBAACK;gBAAGD,SAAS;0BACVE,OAAMC,QAAQ,CAACC,GAAG,CAACf,UAAU,CAACgB,OAAOC,MACpCC,IAAAA,kBAAY,EAACF,uBACX,qBAACG;wBAAaR,SAAS;kCACpBK;uBADMC,OAGP;;;;AAMhB"}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TappableProps } from '../Tappable/Tappable';
+import { type TappableProps } from '../Tappable/Tappable';
 export interface SubnavigationButtonProps extends Omit<TappableProps, 'size'> {
     mode?: 'primary' | 'outline' | 'tertiary';
     appearance?: 'accent' | 'neutral';

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

@@ -1 +1 @@
-{"version":3,"file":"SubnavigationButton.d.ts","sourceRoot":"","sources":["../../../../src/components/SubnavigationButton/SubnavigationButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAY,aAAa,EAAE,MAAM,sBAAsB,CAAC;AA2B/D,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC;IAC3E,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;IAC1C,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAClC,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IAC5B;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAoBD;;GAEG;AACH,eAAO,MAAM,mBAAmB,kHAY7B,wBAAwB,KAAG,KAAK,CAAC,SAgCnC,CAAC"}
+{"version":3,"file":"SubnavigationButton.d.ts","sourceRoot":"","sources":["../../../../src/components/SubnavigationButton/SubnavigationButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AA2BpE,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC;IAC3E,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;IAC1C,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAClC,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IAC5B;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAoBD;;GAEG;AACH,eAAO,MAAM,mBAAmB,kHAY7B,wBAAwB,KAAG,KAAK,CAAC,SAgCnC,CAAC"}

package/dist/cjs/components/SubnavigationButton/SubnavigationButton.js

@@ -36,7 +36,7 @@ const sizeStyles = {
 };
 const sizeYClassNames = {
     none: "vkuiSubnavigationButton--sizeY-none",
-    ['compact']: "vkuiSubnavigationButton--sizeY-compact"
+    compact: "vkuiSubnavigationButton--sizeY-compact"
 };
 const SubnavigationButtonTypography = (_param)=>{
     var { textLevel } = _param, restProps = _object_without_properties._(_param, [

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SubnavigationButton/SubnavigationButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Dropdown } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { HasChildren, HasComponent } from '../../types';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './SubnavigationButton.module.css';\n\nconst appearanceStyles = {\n  accent: styles['SubnavigationButton--appearance-accent'],\n  neutral: styles['SubnavigationButton--appearance-neutral'],\n};\n\nconst modeStyles = {\n  primary: styles['SubnavigationButton--mode-primary'],\n  outline: styles['SubnavigationButton--mode-outline'],\n  tertiary: styles['SubnavigationButton--mode-tertiary'],\n};\n\nconst sizeStyles = {\n  s: styles['SubnavigationButton--size-s'],\n  m: styles['SubnavigationButton--size-m'],\n  l: styles['SubnavigationButton--size-l'],\n};\n\nconst sizeYClassNames = {\n  none: styles['SubnavigationButton--sizeY-none'],\n  ['compact']: styles['SubnavigationButton--sizeY-compact'],\n};\n\nexport interface SubnavigationButtonProps extends Omit<TappableProps, 'size'> {\n  mode?: 'primary' | 'outline' | 'tertiary';\n  appearance?: 'accent' | 'neutral';\n  size?: 's' | 'm' | 'l';\n  selected?: boolean;\n  /**\n   * Размер шрифта. Этим свойством рекомендуется пользоваться, чтобы отрегулировать размер шрифта у кнопок в `<SubnavigationBar mode=\"fixed\" />`\n   */\n  textLevel?: '1' | '2' | '3';\n  /**\n   * Рекомендуется использовать только иконки с размером 24\n   */\n  before?: React.ReactNode;\n  /**\n   * Рекомендуется использовать только `<Counter size=\"s\" />` или `<Badge />`\n   */\n  after?: React.ReactNode;\n  expandable?: boolean;\n}\n\ntype SubnavigationButtonTypographyProps = Pick<\n  SubnavigationButtonProps,\n  'textLevel' | 'className'\n> &\n  HasComponent &\n  HasChildren;\n\nconst SubnavigationButtonTypography = ({\n  textLevel,\n  ...restProps\n}: SubnavigationButtonTypographyProps) => {\n  if (textLevel === '1') {\n    return <Subhead {...restProps} />;\n  }\n\n  return <Caption level={textLevel === '2' ? '1' : '2'} {...restProps} />;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SubnavigationButton\n */\nexport const SubnavigationButton = ({\n  mode = 'primary',\n  appearance = 'accent',\n  size = 'm',\n  selected,\n  textLevel = '1',\n  before,\n  after,\n  expandable,\n  children,\n  className,\n  ...restProps\n}: SubnavigationButtonProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      hasActive={false}\n      focusVisibleMode=\"outside\"\n      className={classNames(\n        styles['SubnavigationButton'],\n        sizeStyles[size],\n        modeStyles[mode],\n        appearanceStyles[appearance],\n        selected && styles['SubnavigationButton--selected'],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        className,\n      )}\n    >\n      <span className={styles['SubnavigationButton__in']}>\n        {before && <span className={styles['SubnavigationButton__before']}>{before}</span>}\n        <SubnavigationButtonTypography\n          textLevel={textLevel}\n          className={styles['SubnavigationButton__label']}\n          Component=\"span\"\n        >\n          {children}\n        </SubnavigationButtonTypography>\n        {after && <span className={styles['SubnavigationButton__after']}>{after}</span>}\n        {expandable && <Icon16Dropdown className={styles['SubnavigationButton__expandableIcon']} />}\n      </span>\n    </Tappable>\n  );\n};\n"],"names":["SubnavigationButton","appearanceStyles","accent","neutral","modeStyles","primary","outline","tertiary","sizeStyles","s","m","l","sizeYClassNames","none","SubnavigationButtonTypography","textLevel","restProps","Subhead","Caption","level","mode","appearance","size","selected","before","after","expandable","children","className","sizeY","useAdaptivity","Tappable","hasActive","focusVisibleMode","classNames","span","Component","Icon16Dropdown"],"mappings":";;;;+BAyEaA;;;eAAAA;;;;;;;;iEAzEU;uBACQ;sBACJ;+BACG;0BAEU;yBAChB;yBACA;AAGxB,MAAMC,mBAAmB;IACvBC,MAAM;IACNC,OAAO;AACT;AAEA,MAAMC,aAAa;IACjBC,OAAO;IACPC,OAAO;IACPC,QAAQ;AACV;AAEA,MAAMC,aAAa;IACjBC,CAAC;IACDC,CAAC;IACDC,CAAC;AACH;AAEA,MAAMC,kBAAkB;IACtBC,IAAI;IACJ,CAAC,UAAU;AACb;AA6BA,MAAMC,gCAAgC;QAAC,EACrCC,SAAS,EAE0B,WADhCC;QADHD;;IAGA,IAAIA,cAAc,KAAK;QACrB,qBAAO,qBAACE,gBAAO,uBAAKD;IACtB;IAEA,qBAAO,qBAACE,gBAAO;QAACC,OAAOJ,cAAc,MAAM,MAAM;OAASC;AAC5D;AAKO,MAAMhB,sBAAsB;QAAC,EAClCoB,OAAO,SAAS,EAChBC,aAAa,QAAQ,EACrBC,OAAO,GAAG,EACVC,QAAQ,EACRR,YAAY,GAAG,EACfS,MAAM,EACNC,KAAK,EACLC,UAAU,EACVC,QAAQ,EACRC,SAAS,EAEgB,WADtBZ;QAVHI;QACAC;QACAC;QACAC;QACAR;QACAS;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IAExC,qBACE,qBAACC,kBAAQ,8CACHf;QACJgB,WAAW;QACXC,kBAAiB;QACjBL,WAAWM,IAAAA,gBAAU,6BAEnB1B,UAAU,CAACc,KAAK,EAChBlB,UAAU,CAACgB,KAAK,EAChBnB,gBAAgB,CAACoB,WAAW,EAC5BE,iDACAM,UAAU,aAAajB,eAAe,CAACiB,MAAM,EAC7CD;kBAGF,cAAA,sBAACO;YAAKP,SAAS;;gBACZJ,wBAAU,qBAACW;oBAAKP,SAAS;8BAA0CJ;;8BACpE,qBAACV;oBACCC,WAAWA;oBACXa,SAAS;oBACTQ,WAAU;8BAETT;;gBAEFF,uBAAS,qBAACU;oBAAKP,SAAS;8BAAyCH;;gBACjEC,4BAAc,qBAACW,qBAAc;oBAACT,SAAS;;;;;AAIhD"}
+{"version":3,"sources":["../../../../src/components/SubnavigationButton/SubnavigationButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Dropdown } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport type { HasChildren, HasComponent } from '../../types';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './SubnavigationButton.module.css';\n\nconst appearanceStyles = {\n  accent: styles['SubnavigationButton--appearance-accent'],\n  neutral: styles['SubnavigationButton--appearance-neutral'],\n};\n\nconst modeStyles = {\n  primary: styles['SubnavigationButton--mode-primary'],\n  outline: styles['SubnavigationButton--mode-outline'],\n  tertiary: styles['SubnavigationButton--mode-tertiary'],\n};\n\nconst sizeStyles = {\n  s: styles['SubnavigationButton--size-s'],\n  m: styles['SubnavigationButton--size-m'],\n  l: styles['SubnavigationButton--size-l'],\n};\n\nconst sizeYClassNames = {\n  none: styles['SubnavigationButton--sizeY-none'],\n  compact: styles['SubnavigationButton--sizeY-compact'],\n};\n\nexport interface SubnavigationButtonProps extends Omit<TappableProps, 'size'> {\n  mode?: 'primary' | 'outline' | 'tertiary';\n  appearance?: 'accent' | 'neutral';\n  size?: 's' | 'm' | 'l';\n  selected?: boolean;\n  /**\n   * Размер шрифта. Этим свойством рекомендуется пользоваться, чтобы отрегулировать размер шрифта у кнопок в `<SubnavigationBar mode=\"fixed\" />`\n   */\n  textLevel?: '1' | '2' | '3';\n  /**\n   * Рекомендуется использовать только иконки с размером 24\n   */\n  before?: React.ReactNode;\n  /**\n   * Рекомендуется использовать только `<Counter size=\"s\" />` или `<Badge />`\n   */\n  after?: React.ReactNode;\n  expandable?: boolean;\n}\n\ntype SubnavigationButtonTypographyProps = Pick<\n  SubnavigationButtonProps,\n  'textLevel' | 'className'\n> &\n  HasComponent &\n  HasChildren;\n\nconst SubnavigationButtonTypography = ({\n  textLevel,\n  ...restProps\n}: SubnavigationButtonTypographyProps) => {\n  if (textLevel === '1') {\n    return <Subhead {...restProps} />;\n  }\n\n  return <Caption level={textLevel === '2' ? '1' : '2'} {...restProps} />;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SubnavigationButton\n */\nexport const SubnavigationButton = ({\n  mode = 'primary',\n  appearance = 'accent',\n  size = 'm',\n  selected,\n  textLevel = '1',\n  before,\n  after,\n  expandable,\n  children,\n  className,\n  ...restProps\n}: SubnavigationButtonProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      hasActive={false}\n      focusVisibleMode=\"outside\"\n      className={classNames(\n        styles['SubnavigationButton'],\n        sizeStyles[size],\n        modeStyles[mode],\n        appearanceStyles[appearance],\n        selected && styles['SubnavigationButton--selected'],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        className,\n      )}\n    >\n      <span className={styles['SubnavigationButton__in']}>\n        {before && <span className={styles['SubnavigationButton__before']}>{before}</span>}\n        <SubnavigationButtonTypography\n          textLevel={textLevel}\n          className={styles['SubnavigationButton__label']}\n          Component=\"span\"\n        >\n          {children}\n        </SubnavigationButtonTypography>\n        {after && <span className={styles['SubnavigationButton__after']}>{after}</span>}\n        {expandable && <Icon16Dropdown className={styles['SubnavigationButton__expandableIcon']} />}\n      </span>\n    </Tappable>\n  );\n};\n"],"names":["SubnavigationButton","appearanceStyles","accent","neutral","modeStyles","primary","outline","tertiary","sizeStyles","s","m","l","sizeYClassNames","none","compact","SubnavigationButtonTypography","textLevel","restProps","Subhead","Caption","level","mode","appearance","size","selected","before","after","expandable","children","className","sizeY","useAdaptivity","Tappable","hasActive","focusVisibleMode","classNames","span","Component","Icon16Dropdown"],"mappings":";;;;+BAyEaA;;;eAAAA;;;;;;;;iEAzEU;uBACQ;sBACJ;+BACG;0BAEe;yBACrB;yBACA;AAGxB,MAAMC,mBAAmB;IACvBC,MAAM;IACNC,OAAO;AACT;AAEA,MAAMC,aAAa;IACjBC,OAAO;IACPC,OAAO;IACPC,QAAQ;AACV;AAEA,MAAMC,aAAa;IACjBC,CAAC;IACDC,CAAC;IACDC,CAAC;AACH;AAEA,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AA6BA,MAAMC,gCAAgC;QAAC,EACrCC,SAAS,EAE0B,WADhCC;QADHD;;IAGA,IAAIA,cAAc,KAAK;QACrB,qBAAO,qBAACE,gBAAO,uBAAKD;IACtB;IAEA,qBAAO,qBAACE,gBAAO;QAACC,OAAOJ,cAAc,MAAM,MAAM;OAASC;AAC5D;AAKO,MAAMjB,sBAAsB;QAAC,EAClCqB,OAAO,SAAS,EAChBC,aAAa,QAAQ,EACrBC,OAAO,GAAG,EACVC,QAAQ,EACRR,YAAY,GAAG,EACfS,MAAM,EACNC,KAAK,EACLC,UAAU,EACVC,QAAQ,EACRC,SAAS,EAEgB,WADtBZ;QAVHI;QACAC;QACAC;QACAC;QACAR;QACAS;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IAExC,qBACE,qBAACC,kBAAQ,8CACHf;QACJgB,WAAW;QACXC,kBAAiB;QACjBL,WAAWM,IAAAA,gBAAU,6BAEnB3B,UAAU,CAACe,KAAK,EAChBnB,UAAU,CAACiB,KAAK,EAChBpB,gBAAgB,CAACqB,WAAW,EAC5BE,iDACAM,UAAU,aAAalB,eAAe,CAACkB,MAAM,EAC7CD;kBAGF,cAAA,sBAACO;YAAKP,SAAS;;gBACZJ,wBAAU,qBAACW;oBAAKP,SAAS;8BAA0CJ;;8BACpE,qBAACV;oBACCC,WAAWA;oBACXa,SAAS;oBACTQ,WAAU;8BAETT;;gBAEFF,uBAAS,qBAACU;oBAAKP,SAAS;8BAAyCH;;gBACjEC,4BAAc,qBAACW,qBAAc;oBAACT,SAAS;;;;;AAIhD"}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { HasRef, HasRootRef } from '../../types';
+import type { HasRef, HasRootRef } from '../../types';
 export interface SwitchProps extends React.InputHTMLAttributes<HTMLInputElement>, HasRootRef<HTMLLabelElement>, HasRef<HTMLInputElement> {
 }
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AASjD,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EACjD,UAAU,CAAC,gBAAgB,CAAC,EAC5B,MAAM,CAAC,gBAAgB,CAAC;CAAG;AAE/B;;GAEG;AACH,eAAO,MAAM,MAAM,8IAWhB,WAAW,KAAG,KAAK,CAAC,SA2EtB,CAAC"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAStD,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EACjD,UAAU,CAAC,gBAAgB,CAAC,EAC5B,MAAM,CAAC,gBAAgB,CAAC;CAAG;AAE/B;;GAEG;AACH,eAAO,MAAM,MAAM,8IAWhB,WAAW,KAAG,KAAK,CAAC,SA2EtB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../hooks/useFocusVisibleClassName';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { HasRef, HasRootRef } from '../../types';\nimport { VisuallyHidden, type VisuallyHiddenProps } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Switch.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Switch--sizeY-none'],\n  compact: styles['Switch--sizeY-compact'],\n};\n\nexport interface SwitchProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasRef<HTMLInputElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Switch\n */\nexport const Switch = ({\n  style,\n  className,\n  getRootRef,\n  getRef,\n  checked: checkedProp,\n  disabled,\n  onBlur: onBlurProp,\n  onFocus: onFocusProp,\n  onClick,\n  ...restProps\n}: SwitchProps): React.ReactNode => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n  const focusVisibleClassNames = useFocusVisibleClassName({ focusVisible, mode: 'outside' });\n  const handleBlur = callMultiple(onBlur, onBlurProp);\n  const handleFocus = callMultiple(onFocus, onFocusProp);\n\n  const [localUncontrolledChecked, setLocalUncontrolledChecked] = React.useState(\n    Boolean(restProps.defaultChecked),\n  );\n  const isControlled = checkedProp !== undefined;\n\n  const syncUncontrolledCheckedStateOnClick = React.useCallback(\n    (e: React.MouseEvent<HTMLInputElement>) => {\n      if (isControlled) {\n        return;\n      }\n\n      const switchTarget = e.target as HTMLInputElement;\n      setLocalUncontrolledChecked(switchTarget.checked);\n    },\n    [isControlled],\n  );\n\n  const inputProps: VisuallyHiddenProps<HTMLInputElement> = {\n    ...restProps,\n    Component: 'input',\n    getRootRef: getRef,\n    type: 'checkbox',\n    role: 'switch',\n    disabled: disabled,\n    onBlur: onBlurProp,\n    onFocus: onFocusProp,\n    onClick: callMultiple(syncUncontrolledCheckedStateOnClick, onClick),\n  };\n\n  if (isControlled) {\n    inputProps.checked = checkedProp;\n    inputProps['aria-checked'] = checkedProp ? 'true' : 'false';\n  } else {\n    inputProps['aria-checked'] = localUncontrolledChecked ? 'true' : 'false';\n  }\n\n  return (\n    <label\n      className={classNames(\n        styles['Switch'],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        platform === 'ios' ? styles['Switch--ios'] : styles['Switch--default'],\n        disabled && styles['Switch--disabled'],\n        focusVisibleClassNames,\n        className,\n      )}\n      style={style}\n      ref={getRootRef}\n    >\n      <VisuallyHidden\n        {...inputProps}\n        className={styles['Switch__inputNative']}\n        onBlur={handleBlur}\n        onFocus={handleFocus}\n      />\n      <span aria-hidden className={styles['Switch__inputFake']}>\n        <span className={styles['Switch__track']} />\n        <span\n          aria-hidden\n          className={classNames(\n            styles['Switch__handle'],\n            platform !== 'ios' && !disabled && styles['Switch__handle--withRipple'],\n          )}\n        />\n      </span>\n    </label>\n  );\n};\n"],"names":["Switch","sizeYClassNames","none","compact","style","className","getRootRef","getRef","checked","checkedProp","disabled","onBlur","onBlurProp","onFocus","onFocusProp","onClick","restProps","platform","usePlatform","sizeY","useAdaptivity","focusVisible","useFocusVisible","focusVisibleClassNames","useFocusVisibleClassName","mode","handleBlur","callMultiple","handleFocus","localUncontrolledChecked","setLocalUncontrolledChecked","React","useState","Boolean","defaultChecked","isControlled","undefined","syncUncontrolledCheckedStateOnClick","useCallback","e","switchTarget","target","inputProps","Component","type","role","label","classNames","ref","VisuallyHidden","span","aria-hidden"],"mappings":";;;;+BAwBaA;;;eAAAA;;;;;;;;iEAxBU;sBACI;+BACG;iCACE;0CACS;6BACb;8BACC;gCAE4B;AAGzD,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAUO,MAAMH,SAAS;QAAC,EACrBI,KAAK,EACLC,SAAS,EACTC,UAAU,EACVC,MAAM,EACNC,SAASC,WAAW,EACpBC,QAAQ,EACRC,QAAQC,UAAU,EAClBC,SAASC,WAAW,EACpBC,OAAO,EAEK,WADTC;QATHZ;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAE;QACAE;;IAGA,MAAME,WAAWC,IAAAA,wBAAW;IAC5B,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IACxC,MAAM,EAAEC,YAAY,EAAEV,MAAM,EAAEE,OAAO,EAAE,GAAGS,IAAAA,gCAAe;IACzD,MAAMC,yBAAyBC,IAAAA,kDAAwB,EAAC;QAAEH;QAAcI,MAAM;IAAU;IACxF,MAAMC,aAAaC,IAAAA,0BAAY,EAAChB,QAAQC;IACxC,MAAMgB,cAAcD,IAAAA,0BAAY,EAACd,SAASC;IAE1C,MAAM,CAACe,0BAA0BC,4BAA4B,GAAGC,OAAMC,QAAQ,CAC5EC,QAAQjB,UAAUkB,cAAc;IAElC,MAAMC,eAAe1B,gBAAgB2B;IAErC,MAAMC,sCAAsCN,OAAMO,WAAW,CAC3D,CAACC;QACC,IAAIJ,cAAc;YAChB;QACF;QAEA,MAAMK,eAAeD,EAAEE,MAAM;QAC7BX,4BAA4BU,aAAahC,OAAO;IAClD,GACA;QAAC2B;KAAa;IAGhB,MAAMO,aAAoD,4CACrD1B;QACH2B,WAAW;QACXrC,YAAYC;QACZqC,MAAM;QACNC,MAAM;QACNnC,UAAUA;QACVC,QAAQC;QACRC,SAASC;QACTC,SAASY,IAAAA,0BAAY,EAACU,qCAAqCtB;;IAG7D,IAAIoB,cAAc;QAChBO,WAAWlC,OAAO,GAAGC;QACrBiC,UAAU,CAAC,eAAe,GAAGjC,cAAc,SAAS;IACtD,OAAO;QACLiC,UAAU,CAAC,eAAe,GAAGb,2BAA2B,SAAS;IACnE;IAEA,qBACE,sBAACiB;QACCzC,WAAW0C,IAAAA,gBAAU,gBAEnB5B,UAAU,aAAalB,eAAe,CAACkB,MAAM,EAC7CF,aAAa,mDACbP,oCACAa,wBACAlB;QAEFD,OAAOA;QACP4C,KAAK1C;;0BAEL,qBAAC2C,8BAAc,8CACTP;gBACJrC,SAAS;gBACTM,QAAQe;gBACRb,SAASe;;0BAEX,sBAACsB;gBAAKC,aAAW;gBAAC9C,SAAS;;kCACzB,qBAAC6C;wBAAK7C,SAAS;;kCACf,qBAAC6C;wBACCC,aAAW;wBACX9C,WAAW0C,IAAAA,gBAAU,wBAEnB9B,aAAa,SAAS,CAACP;;;;;;AAMnC"}
+{"version":3,"sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../hooks/useFocusVisibleClassName';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { callMultiple } from '../../lib/callMultiple';\nimport type { HasRef, HasRootRef } from '../../types';\nimport { VisuallyHidden, type VisuallyHiddenProps } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Switch.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Switch--sizeY-none'],\n  compact: styles['Switch--sizeY-compact'],\n};\n\nexport interface SwitchProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasRef<HTMLInputElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Switch\n */\nexport const Switch = ({\n  style,\n  className,\n  getRootRef,\n  getRef,\n  checked: checkedProp,\n  disabled,\n  onBlur: onBlurProp,\n  onFocus: onFocusProp,\n  onClick,\n  ...restProps\n}: SwitchProps): React.ReactNode => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n  const focusVisibleClassNames = useFocusVisibleClassName({ focusVisible, mode: 'outside' });\n  const handleBlur = callMultiple(onBlur, onBlurProp);\n  const handleFocus = callMultiple(onFocus, onFocusProp);\n\n  const [localUncontrolledChecked, setLocalUncontrolledChecked] = React.useState(\n    Boolean(restProps.defaultChecked),\n  );\n  const isControlled = checkedProp !== undefined;\n\n  const syncUncontrolledCheckedStateOnClick = React.useCallback(\n    (e: React.MouseEvent<HTMLInputElement>) => {\n      if (isControlled) {\n        return;\n      }\n\n      const switchTarget = e.target as HTMLInputElement;\n      setLocalUncontrolledChecked(switchTarget.checked);\n    },\n    [isControlled],\n  );\n\n  const inputProps: VisuallyHiddenProps<HTMLInputElement> = {\n    ...restProps,\n    Component: 'input',\n    getRootRef: getRef,\n    type: 'checkbox',\n    role: 'switch',\n    disabled: disabled,\n    onBlur: onBlurProp,\n    onFocus: onFocusProp,\n    onClick: callMultiple(syncUncontrolledCheckedStateOnClick, onClick),\n  };\n\n  if (isControlled) {\n    inputProps.checked = checkedProp;\n    inputProps['aria-checked'] = checkedProp ? 'true' : 'false';\n  } else {\n    inputProps['aria-checked'] = localUncontrolledChecked ? 'true' : 'false';\n  }\n\n  return (\n    <label\n      className={classNames(\n        styles['Switch'],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        platform === 'ios' ? styles['Switch--ios'] : styles['Switch--default'],\n        disabled && styles['Switch--disabled'],\n        focusVisibleClassNames,\n        className,\n      )}\n      style={style}\n      ref={getRootRef}\n    >\n      <VisuallyHidden\n        {...inputProps}\n        className={styles['Switch__inputNative']}\n        onBlur={handleBlur}\n        onFocus={handleFocus}\n      />\n      <span aria-hidden className={styles['Switch__inputFake']}>\n        <span className={styles['Switch__track']} />\n        <span\n          aria-hidden\n          className={classNames(\n            styles['Switch__handle'],\n            platform !== 'ios' && !disabled && styles['Switch__handle--withRipple'],\n          )}\n        />\n      </span>\n    </label>\n  );\n};\n"],"names":["Switch","sizeYClassNames","none","compact","style","className","getRootRef","getRef","checked","checkedProp","disabled","onBlur","onBlurProp","onFocus","onFocusProp","onClick","restProps","platform","usePlatform","sizeY","useAdaptivity","focusVisible","useFocusVisible","focusVisibleClassNames","useFocusVisibleClassName","mode","handleBlur","callMultiple","handleFocus","localUncontrolledChecked","setLocalUncontrolledChecked","React","useState","Boolean","defaultChecked","isControlled","undefined","syncUncontrolledCheckedStateOnClick","useCallback","e","switchTarget","target","inputProps","Component","type","role","label","classNames","ref","VisuallyHidden","span","aria-hidden"],"mappings":";;;;+BAwBaA;;;eAAAA;;;;;;;;iEAxBU;sBACI;+BACG;iCACE;0CACS;6BACb;8BACC;gCAE4B;AAGzD,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAUO,MAAMH,SAAS;QAAC,EACrBI,KAAK,EACLC,SAAS,EACTC,UAAU,EACVC,MAAM,EACNC,SAASC,WAAW,EACpBC,QAAQ,EACRC,QAAQC,UAAU,EAClBC,SAASC,WAAW,EACpBC,OAAO,EAEK,WADTC;QATHZ;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAE;QACAE;;IAGA,MAAME,WAAWC,IAAAA,wBAAW;IAC5B,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IACxC,MAAM,EAAEC,YAAY,EAAEV,MAAM,EAAEE,OAAO,EAAE,GAAGS,IAAAA,gCAAe;IACzD,MAAMC,yBAAyBC,IAAAA,kDAAwB,EAAC;QAAEH;QAAcI,MAAM;IAAU;IACxF,MAAMC,aAAaC,IAAAA,0BAAY,EAAChB,QAAQC;IACxC,MAAMgB,cAAcD,IAAAA,0BAAY,EAACd,SAASC;IAE1C,MAAM,CAACe,0BAA0BC,4BAA4B,GAAGC,OAAMC,QAAQ,CAC5EC,QAAQjB,UAAUkB,cAAc;IAElC,MAAMC,eAAe1B,gBAAgB2B;IAErC,MAAMC,sCAAsCN,OAAMO,WAAW,CAC3D,CAACC;QACC,IAAIJ,cAAc;YAChB;QACF;QAEA,MAAMK,eAAeD,EAAEE,MAAM;QAC7BX,4BAA4BU,aAAahC,OAAO;IAClD,GACA;QAAC2B;KAAa;IAGhB,MAAMO,aAAoD,4CACrD1B;QACH2B,WAAW;QACXrC,YAAYC;QACZqC,MAAM;QACNC,MAAM;QACNnC,UAAUA;QACVC,QAAQC;QACRC,SAASC;QACTC,SAASY,IAAAA,0BAAY,EAACU,qCAAqCtB;;IAG7D,IAAIoB,cAAc;QAChBO,WAAWlC,OAAO,GAAGC;QACrBiC,UAAU,CAAC,eAAe,GAAGjC,cAAc,SAAS;IACtD,OAAO;QACLiC,UAAU,CAAC,eAAe,GAAGb,2BAA2B,SAAS;IACnE;IAEA,qBACE,sBAACiB;QACCzC,WAAW0C,IAAAA,gBAAU,gBAEnB5B,UAAU,aAAalB,eAAe,CAACkB,MAAM,EAC7CF,aAAa,mDACbP,oCACAa,wBACAlB;QAEFD,OAAOA;QACP4C,KAAK1C;;0BAEL,qBAAC2C,8BAAc,8CACTP;gBACJrC,SAAS;gBACTM,QAAQe;gBACRb,SAASe;;0BAEX,sBAACsB;gBAAKC,aAAW;gBAAC9C,SAAS;;kCACzB,qBAAC6C;wBAAK7C,SAAS;;kCACf,qBAAC6C;wBACCC,aAAW;wBACX9C,WAAW0C,IAAAA,gBAAU,wBAEnB9B,aAAa,SAAS,CAACP;;;;;;AAMnC"}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { HTMLAttributesWithRootRef } from '../../types';
+import type { HTMLAttributesWithRootRef } from '../../types';
 export interface TabbarProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     /**
      * Флаг, который скрывает тень (Android) или границы (iOS)

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

@@ -1 +1 @@
-{"version":3,"file":"Tabbar.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabbar/Tabbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAIxD,MAAM,WAAW,WAAY,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC5E;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;CAC3C;AAkBD;;GAEG;AACH,eAAO,MAAM,MAAM,kCAA2C,WAAW,KAAG,KAAK,CAAC,SAejF,CAAC"}
+{"version":3,"file":"Tabbar.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabbar/Tabbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAI7D,MAAM,WAAW,WAAY,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC5E;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;CAC3C;AAkBD;;GAEG;AACH,eAAO,MAAM,MAAM,kCAA2C,WAAW,KAAG,KAAK,CAAC,SAejF,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Tabbar/Tabbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Tabbar.module.css';\n\nexport interface TabbarProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Флаг, который скрывает тень (Android) или границы (iOS)\n   */\n  plain?: boolean;\n  /**\n   * Задает расположение элементов (вертикальное/горизонтальное)\n   */\n  mode?: 'vertical' | 'horizontal' | 'auto';\n}\n\nconst getItemsLayoutClassName = (\n  itemsLayout: TabbarProps['mode'],\n  children: TabbarProps['children'],\n): string => {\n  switch (itemsLayout) {\n    case 'horizontal':\n      return 'vkuiInternalTabbar--layout-horizontal';\n    case 'vertical':\n      return 'vkuiInternalTabbar--layout-vertical';\n    default:\n      return React.Children.count(children) > 2\n        ? getItemsLayoutClassName('vertical', [])\n        : getItemsLayoutClassName('horizontal', []);\n  }\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabbar\n */\nexport const Tabbar = ({ plain = false, mode, ...restProps }: TabbarProps): React.ReactNode => {\n  const platform = usePlatform();\n\n  return (\n    <RootComponent\n      baseClassName={classNames(\n        'vkuiInternalTabbar',\n        styles['Tabbar'],\n        platform === 'ios' && styles['Tabbar--ios'],\n        getItemsLayoutClassName(mode, restProps.children),\n        !plain && styles['Tabbar--shadow'],\n      )}\n      {...restProps}\n    />\n  );\n};\n"],"names":["Tabbar","getItemsLayoutClassName","itemsLayout","children","React","Children","count","plain","mode","restProps","platform","usePlatform","RootComponent","baseClassName","classNames"],"mappings":";;;;+BAqCaA;;;eAAAA;;;;;;;iEArCU;sBACI;6BACC;+BAEE;AAc9B,MAAMC,0BAA0B,CAC9BC,aACAC;IAEA,OAAQD;QACN,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT;YACE,OAAOE,OAAMC,QAAQ,CAACC,KAAK,CAACH,YAAY,IACpCF,wBAAwB,YAAY,EAAE,IACtCA,wBAAwB,cAAc,EAAE;IAChD;AACF;AAKO,MAAMD,SAAS;QAAC,EAAEO,QAAQ,KAAK,EAAEC,IAAI,EAA6B,WAAxBC;QAAxBF;QAAeC;;IACtC,MAAME,WAAWC,IAAAA,wBAAW;IAE5B,qBACE,qBAACC,4BAAa;QACZC,eAAeC,IAAAA,gBAAU,EACvB,oCAEAJ,aAAa,4BACbT,wBAAwBO,MAAMC,UAAUN,QAAQ,GAChD,CAACI;OAECE;AAGV"}
+{"version":3,"sources":["../../../../src/components/Tabbar/Tabbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Tabbar.module.css';\n\nexport interface TabbarProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Флаг, который скрывает тень (Android) или границы (iOS)\n   */\n  plain?: boolean;\n  /**\n   * Задает расположение элементов (вертикальное/горизонтальное)\n   */\n  mode?: 'vertical' | 'horizontal' | 'auto';\n}\n\nconst getItemsLayoutClassName = (\n  itemsLayout: TabbarProps['mode'],\n  children: TabbarProps['children'],\n): string => {\n  switch (itemsLayout) {\n    case 'horizontal':\n      return 'vkuiInternalTabbar--layout-horizontal';\n    case 'vertical':\n      return 'vkuiInternalTabbar--layout-vertical';\n    default:\n      return React.Children.count(children) > 2\n        ? getItemsLayoutClassName('vertical', [])\n        : getItemsLayoutClassName('horizontal', []);\n  }\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabbar\n */\nexport const Tabbar = ({ plain = false, mode, ...restProps }: TabbarProps): React.ReactNode => {\n  const platform = usePlatform();\n\n  return (\n    <RootComponent\n      baseClassName={classNames(\n        'vkuiInternalTabbar',\n        styles['Tabbar'],\n        platform === 'ios' && styles['Tabbar--ios'],\n        getItemsLayoutClassName(mode, restProps.children),\n        !plain && styles['Tabbar--shadow'],\n      )}\n      {...restProps}\n    />\n  );\n};\n"],"names":["Tabbar","getItemsLayoutClassName","itemsLayout","children","React","Children","count","plain","mode","restProps","platform","usePlatform","RootComponent","baseClassName","classNames"],"mappings":";;;;+BAqCaA;;;eAAAA;;;;;;;iEArCU;sBACI;6BACC;+BAEE;AAc9B,MAAMC,0BAA0B,CAC9BC,aACAC;IAEA,OAAQD;QACN,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT;YACE,OAAOE,OAAMC,QAAQ,CAACC,KAAK,CAACH,YAAY,IACpCF,wBAAwB,YAAY,EAAE,IACtCA,wBAAwB,cAAc,EAAE;IAChD;AACF;AAKO,MAAMD,SAAS;QAAC,EAAEO,QAAQ,KAAK,EAAEC,IAAI,EAA6B,WAAxBC;QAAxBF;QAAeC;;IACtC,MAAME,WAAWC,IAAAA,wBAAW;IAE5B,qBACE,qBAACC,4BAAa;QACZC,eAAeC,IAAAA,gBAAU,EACvB,oCAEAJ,aAAa,4BACbT,wBAAwBO,MAAMC,UAAUN,QAAQ,GAChD,CAACI;OAECE;AAGV"}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { HasComponent, HasRootRef } from '../../types';
+import type { HasComponent, HasRootRef } from '../../types';
 export interface TabbarItemProps extends React.AllHTMLAttributes<HTMLElement>, HasRootRef<HTMLElement>, HasComponent {
     selected?: boolean;
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"TabbarItem.d.ts","sourceRoot":"","sources":["../../../../src/components/TabbarItem/TabbarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAMvD,MAAM,WAAW,eACf,SAAQ,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,EAC1C,UAAU,CAAC,WAAW,CAAC,EACvB,YAAY;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAID;;GAEG;AACH,eAAO,MAAM,UAAU,qFASpB,eAAe,KAAG,KAAK,CAAC,SAgD1B,CAAC"}
+{"version":3,"file":"TabbarItem.d.ts","sourceRoot":"","sources":["../../../../src/components/TabbarItem/TabbarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAM5D,MAAM,WAAW,eACf,SAAQ,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,EAC1C,UAAU,CAAC,WAAW,CAAC,EACvB,YAAY;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAID;;GAEG;AACH,eAAO,MAAM,UAAU,qFASpB,eAAe,KAAG,KAAK,CAAC,SAgD1B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/TabbarItem/TabbarItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './TabbarItem.module.css';\n\nexport interface TabbarItemProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent {\n  selected?: boolean;\n  /**\n   * Текст рядом с иконкой\n   */\n  text?: React.ReactNode;\n  /**\n   * Индикатор над иконкой. Принимает `<Badge mode=\"prominent\" />` или `<Counter size=\"s\" mode=\"prominent\" />`\n   */\n  indicator?: React.ReactNode;\n}\n\nconst warn = warnOnce('TabbarItem');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabbarItem\n */\nexport const TabbarItem = ({\n  children,\n  selected,\n  indicator,\n  text,\n  href,\n  Component = href ? 'a' : 'button',\n  disabled,\n  ...restProps\n}: TabbarItemProps): React.ReactNode => {\n  const platform = usePlatform();\n\n  if (process.env.NODE_ENV === 'development') {\n    const hasAccessibleName = text || restProps['aria-label'] || restProps['aria-labelledby'];\n\n    if (!hasAccessibleName) {\n      warn(COMMON_WARNINGS.a11y[Component === 'a' ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n\n  return (\n    <RootComponent\n      Component={Component}\n      {...restProps}\n      disabled={disabled}\n      href={href}\n      baseClassName={classNames(\n        styles['TabbarItem'],\n        platform === 'ios' && styles['TabbarItem--ios'],\n        platform === 'android' && styles['TabbarItem--android'],\n        selected && styles['TabbarItem--selected'],\n      )}\n    >\n      <Tappable\n        role=\"presentation\"\n        disabled={disabled}\n        activeMode={platform === 'ios' ? styles['TabbarItem__tappable--active'] : 'background'}\n        activeEffectDelay={platform === 'ios' ? 0 : 300}\n        hasHover={false}\n        className={styles['TabbarItem__tappable']}\n        onClick={noop}\n      />\n      <div className={styles['TabbarItem__in']}>\n        <div className={styles['TabbarItem__icon']}>\n          {children}\n          <div className=\"vkuiInternalTabbarItem__label\">\n            {hasReactNode(indicator) && indicator}\n          </div>\n        </div>\n        {text && (\n          <Footnote Component=\"div\" className={styles['TabbarItem__text']} weight=\"2\">\n            {text}\n          </Footnote>\n        )}\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["TabbarItem","warn","warnOnce","children","selected","indicator","text","href","Component","disabled","restProps","platform","usePlatform","process","env","NODE_ENV","hasAccessibleName","COMMON_WARNINGS","a11y","RootComponent","baseClassName","classNames","Tappable","role","activeMode","activeEffectDelay","hasHover","className","onClick","noop","div","hasReactNode","Footnote","weight"],"mappings":";;;;+BA8BaA;;;eAAAA;;;;;;;;iEA9BU;sBACwB;6BACnB;0BACc;+BAEZ;0BACL;0BACA;AAkBzB,MAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAKf,MAAMF,aAAa;QAAC,EACzBG,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,IAAI,EACJC,IAAI,EACJC,YAAYD,OAAO,MAAM,QAAQ,EACjCE,QAAQ,EAEQ,WADbC;QAPHP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,WAAWC,IAAAA,wBAAW;IAE5B,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,MAAMC,oBAAoBV,QAAQI,SAAS,CAAC,aAAa,IAAIA,SAAS,CAAC,kBAAkB;QAEzF,IAAI,CAACM,mBAAmB;YACtBf,KAAKgB,yBAAe,CAACC,IAAI,CAACV,cAAc,MAAM,cAAc,cAAc,EAAE;QAC9E;IACF;IAEA,qBACE,sBAACW,4BAAa;QACZX,WAAWA;OACPE;QACJD,UAAUA;QACVF,MAAMA;QACNa,eAAeC,IAAAA,gBAAU,oBAEvBV,aAAa,gCACbA,aAAa,wCACbP;;0BAGF,qBAACkB,kBAAQ;gBACPC,MAAK;gBACLd,UAAUA;gBACVe,YAAYb,aAAa,6CAAiD;gBAC1Ec,mBAAmBd,aAAa,QAAQ,IAAI;gBAC5Ce,UAAU;gBACVC,SAAS;gBACTC,SAASC,UAAI;;0BAEf,sBAACC;gBAAIH,SAAS;;kCACZ,sBAACG;wBAAIH,SAAS;;4BACXxB;0CACD,qBAAC2B;gCAAIH,WAAU;0CACZI,IAAAA,kBAAY,EAAC1B,cAAcA;;;;oBAG/BC,sBACC,qBAAC0B,kBAAQ;wBAACxB,WAAU;wBAAMmB,SAAS;wBAA8BM,QAAO;kCACrE3B;;;;;;AAMb"}
+{"version":3,"sources":["../../../../src/components/TabbarItem/TabbarItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport type { HasComponent, HasRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './TabbarItem.module.css';\n\nexport interface TabbarItemProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent {\n  selected?: boolean;\n  /**\n   * Текст рядом с иконкой\n   */\n  text?: React.ReactNode;\n  /**\n   * Индикатор над иконкой. Принимает `<Badge mode=\"prominent\" />` или `<Counter size=\"s\" mode=\"prominent\" />`\n   */\n  indicator?: React.ReactNode;\n}\n\nconst warn = warnOnce('TabbarItem');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabbarItem\n */\nexport const TabbarItem = ({\n  children,\n  selected,\n  indicator,\n  text,\n  href,\n  Component = href ? 'a' : 'button',\n  disabled,\n  ...restProps\n}: TabbarItemProps): React.ReactNode => {\n  const platform = usePlatform();\n\n  if (process.env.NODE_ENV === 'development') {\n    const hasAccessibleName = text || restProps['aria-label'] || restProps['aria-labelledby'];\n\n    if (!hasAccessibleName) {\n      warn(COMMON_WARNINGS.a11y[Component === 'a' ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n\n  return (\n    <RootComponent\n      Component={Component}\n      {...restProps}\n      disabled={disabled}\n      href={href}\n      baseClassName={classNames(\n        styles['TabbarItem'],\n        platform === 'ios' && styles['TabbarItem--ios'],\n        platform === 'android' && styles['TabbarItem--android'],\n        selected && styles['TabbarItem--selected'],\n      )}\n    >\n      <Tappable\n        role=\"presentation\"\n        disabled={disabled}\n        activeMode={platform === 'ios' ? styles['TabbarItem__tappable--active'] : 'background'}\n        activeEffectDelay={platform === 'ios' ? 0 : 300}\n        hasHover={false}\n        className={styles['TabbarItem__tappable']}\n        onClick={noop}\n      />\n      <div className={styles['TabbarItem__in']}>\n        <div className={styles['TabbarItem__icon']}>\n          {children}\n          <div className=\"vkuiInternalTabbarItem__label\">\n            {hasReactNode(indicator) && indicator}\n          </div>\n        </div>\n        {text && (\n          <Footnote Component=\"div\" className={styles['TabbarItem__text']} weight=\"2\">\n            {text}\n          </Footnote>\n        )}\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["TabbarItem","warn","warnOnce","children","selected","indicator","text","href","Component","disabled","restProps","platform","usePlatform","process","env","NODE_ENV","hasAccessibleName","COMMON_WARNINGS","a11y","RootComponent","baseClassName","classNames","Tappable","role","activeMode","activeEffectDelay","hasHover","className","onClick","noop","div","hasReactNode","Footnote","weight"],"mappings":";;;;+BA8BaA;;;eAAAA;;;;;;;;iEA9BU;sBACwB;6BACnB;0BACc;+BAEZ;0BACL;0BACA;AAkBzB,MAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAKf,MAAMF,aAAa;QAAC,EACzBG,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,IAAI,EACJC,IAAI,EACJC,YAAYD,OAAO,MAAM,QAAQ,EACjCE,QAAQ,EAEQ,WADbC;QAPHP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,WAAWC,IAAAA,wBAAW;IAE5B,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,MAAMC,oBAAoBV,QAAQI,SAAS,CAAC,aAAa,IAAIA,SAAS,CAAC,kBAAkB;QAEzF,IAAI,CAACM,mBAAmB;YACtBf,KAAKgB,yBAAe,CAACC,IAAI,CAACV,cAAc,MAAM,cAAc,cAAc,EAAE;QAC9E;IACF;IAEA,qBACE,sBAACW,4BAAa;QACZX,WAAWA;OACPE;QACJD,UAAUA;QACVF,MAAMA;QACNa,eAAeC,IAAAA,gBAAU,oBAEvBV,aAAa,gCACbA,aAAa,wCACbP;;0BAGF,qBAACkB,kBAAQ;gBACPC,MAAK;gBACLd,UAAUA;gBACVe,YAAYb,aAAa,6CAAiD;gBAC1Ec,mBAAmBd,aAAa,QAAQ,IAAI;gBAC5Ce,UAAU;gBACVC,SAAS;gBACTC,SAASC,UAAI;;0BAEf,sBAACC;gBAAIH,SAAS;;kCACZ,sBAACG;wBAAIH,SAAS;;4BACXxB;0CACD,qBAAC2B;gCAAIH,WAAU;0CACZI,IAAAA,kBAAY,EAAC1B,cAAcA;;;;oBAG/BC,sBACC,qBAAC0B,kBAAQ;wBAACxB,WAAU;wBAAMmB,SAAS;wBAA8BM,QAAO;kCACrE3B;;;;;;AAMb"}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { HTMLAttributesWithRootRef } from '../../types';
+import type { HTMLAttributesWithRootRef } from '../../types';
 export interface TabsProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     mode?: 'default' | 'accent' | 'secondary';
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAIxD,MAAM,WAAW,SAAU,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC1E,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,WAAW,CAAC;IAC1C;;;OAGG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC;;;;OAIG;IACH,2BAA2B,CAAC,EAAE,qBAAqB,CAAC,QAAQ,CAAC,CAAC;IAC9D;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,UAAU,CAAC;CACpD;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACxB,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,WAAW,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC,CAAC;IACzD,uBAAuB,EAAE,SAAS,CAAC,yBAAyB,CAAC,CAAC;IAC9D,2BAA2B,EAAE,QAAQ,CAAC,SAAS,CAAC,6BAA6B,CAAC,CAAC,CAAC;CACjF;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAOxD,CAAC;AAEL;;GAEG;AACH,eAAO,MAAM,IAAI,iHAQd,SAAS,KAAG,KAAK,CAAC,SAiIpB,CAAC"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAI7D,MAAM,WAAW,SAAU,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC1E,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,WAAW,CAAC;IAC1C;;;OAGG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC;;;;OAIG;IACH,2BAA2B,CAAC,EAAE,qBAAqB,CAAC,QAAQ,CAAC,CAAC;IAC9D;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,UAAU,CAAC;CACpD;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACxB,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,WAAW,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC,CAAC;IACzD,uBAAuB,EAAE,SAAS,CAAC,yBAAyB,CAAC,CAAC;IAC9D,2BAA2B,EAAE,QAAQ,CAAC,SAAS,CAAC,6BAA6B,CAAC,CAAC,CAAC;CACjF;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAOxD,CAAC;AAEL;;GAEG;AACH,eAAO,MAAM,IAAI,iHAQd,SAAS,KAAG,KAAK,CAAC,SAiIpB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { pressedKey } from '../../lib/accessibility';\nimport { useDOM } from '../../lib/dom';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Tabs.module.css';\n\nexport interface TabsProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  mode?: 'default' | 'accent' | 'secondary';\n  /**\n   * Включает прокрутку контейнера до активной (`selected`) вкладки\n   * @since 5.10.0\n   */\n  withScrollToSelectedTab?: boolean;\n  /**\n   * Отвечает за горизонтальное выравнивание при прокрутке до активной вкладки.\n   * @see [scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView)\n   * @since 5.10.0\n   */\n  scrollBehaviorToSelectedTab?: ScrollIntoViewOptions['inline'];\n  /**\n   * При `auto` ширина вкладок определяется контекстом:\n   *  - равномерно занимают всю доступную ширину при вложении в `HorizontalScroll`\n   *  - равномерно занимают всю доступную ширину при `mode=default` и platform !== 'VKCOM'\n   * При `stretched` и `shrinked` вкладки либо равномерно занимают всю ширину,\n   * либо выравниваются по контенту соответственно\n   */\n  layoutFillMode?: 'auto' | 'stretched' | 'shrinked';\n}\n\nexport interface TabsContextProps {\n  mode: TabsProps['mode'];\n  withGaps: boolean;\n  layoutFillMode: NonNullable<TabsProps['layoutFillMode']>;\n  withScrollToSelectedTab: TabsProps['withScrollToSelectedTab'];\n  scrollBehaviorToSelectedTab: Required<TabsProps['scrollBehaviorToSelectedTab']>;\n}\n\nexport const TabsModeContext: React.Context<TabsContextProps> =\n  React.createContext<TabsContextProps>({\n    mode: 'default',\n    withGaps: false,\n    layoutFillMode: 'auto',\n    withScrollToSelectedTab: false,\n    scrollBehaviorToSelectedTab: 'nearest',\n  });\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabs\n */\nexport const Tabs = ({\n  children,\n  mode = 'default',\n  role = 'tablist',\n  withScrollToSelectedTab,\n  scrollBehaviorToSelectedTab = 'nearest',\n  layoutFillMode = 'auto',\n  ...restProps\n}: TabsProps): React.ReactNode => {\n  const platform = usePlatform();\n  const { document } = useDOM();\n\n  const isTabFlow = role === 'tablist';\n\n  const tabsRef = React.useRef<HTMLDivElement>(null);\n\n  const withGaps = mode === 'accent' || mode === 'secondary';\n\n  const getTabEls = () => {\n    if (!tabsRef.current) {\n      return [];\n    }\n\n    return Array.from(\n      // eslint-disable-next-line no-restricted-properties\n      tabsRef.current.querySelectorAll<HTMLDivElement>('[role=tab]:not([disabled])'),\n    );\n  };\n\n  const handleDocumentKeydown = (event: KeyboardEvent) => {\n    if (!document || !tabsRef.current || !isTabFlow) {\n      return;\n    }\n\n    const key = pressedKey(event);\n\n    switch (key) {\n      case 'ArrowLeft':\n      case 'ArrowRight':\n      case 'End':\n      case 'Home': {\n        const tabEls = getTabEls();\n        const currentFocusedElIndex = tabEls.findIndex((el) => document.activeElement === el);\n        if (currentFocusedElIndex === -1) {\n          return;\n        }\n\n        let nextIndex = 0;\n        if (key === 'Home') {\n          nextIndex = 0;\n        } else if (key === 'End') {\n          nextIndex = tabEls.length - 1;\n        } else {\n          const offset = key === 'ArrowRight' ? 1 : -1;\n          nextIndex = currentFocusedElIndex + offset;\n        }\n\n        const nextTabEl = tabEls[nextIndex];\n\n        if (nextTabEl) {\n          event.preventDefault();\n          nextTabEl.focus();\n        }\n\n        break;\n      }\n      /*\n       В JAWS и NVDA стрелка вниз активирует контент.\n       Это не прописано в стандартах, но по ссылке ниже это рекомендуется делать.\n       https://inclusive-components.design/tabbed-interfaces/\n      */\n      case 'ArrowDown': {\n        const tabEls = getTabEls();\n        const currentFocusedEl = tabEls.find((el) => document.activeElement === el);\n\n        if (!currentFocusedEl || currentFocusedEl.getAttribute('aria-selected') !== 'true') {\n          return;\n        }\n\n        const relatedContentElId = currentFocusedEl.getAttribute('aria-controls');\n        if (!relatedContentElId) {\n          return;\n        }\n\n        // eslint-disable-next-line no-restricted-properties\n        const relatedContentEl = document.getElementById(relatedContentElId);\n        if (!relatedContentEl) {\n          return;\n        }\n\n        event.preventDefault();\n        relatedContentEl.focus();\n\n        break;\n      }\n      case 'Space':\n      case 'Enter': {\n        const tabEls = getTabEls();\n        const currentFocusedEl = tabEls.find((el) => document.activeElement === el);\n        if (currentFocusedEl) {\n          currentFocusedEl.click();\n        }\n      }\n    }\n  };\n\n  useGlobalEventListener(document, 'keydown', handleDocumentKeydown, {\n    capture: true,\n  });\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['Tabs'],\n        'vkuiInternalTabs',\n        platform === 'vkcom' && 'vkuiInternalTabs--vkcom',\n        withGaps && classNames(styles['Tabs--withGaps'], 'vkuiInternalTabs--withGaps'),\n        mode === 'default' && styles['Tabs--mode-default'],\n      )}\n      role={role}\n    >\n      <div className={styles['Tabs__in']} ref={tabsRef}>\n        <TabsModeContext.Provider\n          value={{\n            mode,\n            withGaps,\n            layoutFillMode,\n            withScrollToSelectedTab,\n            scrollBehaviorToSelectedTab,\n          }}\n        >\n          {children}\n        </TabsModeContext.Provider>\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["Tabs","TabsModeContext","React","createContext","mode","withGaps","layoutFillMode","withScrollToSelectedTab","scrollBehaviorToSelectedTab","children","role","restProps","platform","usePlatform","document","useDOM","isTabFlow","tabsRef","useRef","getTabEls","current","Array","from","querySelectorAll","handleDocumentKeydown","event","key","pressedKey","tabEls","currentFocusedElIndex","findIndex","el","activeElement","nextIndex","length","offset","nextTabEl","preventDefault","focus","currentFocusedEl","find","getAttribute","relatedContentElId","relatedContentEl","getElementById","click","useGlobalEventListener","capture","RootComponent","baseClassName","classNames","div","className","ref","Provider","value"],"mappings":";;;;;;;;;;;IAqDaA,IAAI;eAAJA;;IAZAC,eAAe;eAAfA;;;;;;;;iEAzCU;sBACI;wCACY;6BACX;+BACD;qBACJ;+BAEO;AAkCvB,MAAMA,gCACXC,OAAMC,aAAa,CAAmB;IACpCC,MAAM;IACNC,UAAU;IACVC,gBAAgB;IAChBC,yBAAyB;IACzBC,6BAA6B;AAC/B;AAKK,MAAMR,OAAO;QAAC,EACnBS,QAAQ,EACRL,OAAO,SAAS,EAChBM,OAAO,SAAS,EAChBH,uBAAuB,EACvBC,8BAA8B,SAAS,EACvCF,iBAAiB,MAAM,EAEb,WADPK;QANHF;QACAL;QACAM;QACAH;QACAC;QACAF;;IAGA,MAAMM,WAAWC,IAAAA,wBAAW;IAC5B,MAAM,EAAEC,QAAQ,EAAE,GAAGC,IAAAA,WAAM;IAE3B,MAAMC,YAAYN,SAAS;IAE3B,MAAMO,UAAUf,OAAMgB,MAAM,CAAiB;IAE7C,MAAMb,WAAWD,SAAS,YAAYA,SAAS;IAE/C,MAAMe,YAAY;QAChB,IAAI,CAACF,QAAQG,OAAO,EAAE;YACpB,OAAO,EAAE;QACX;QAEA,OAAOC,MAAMC,IAAI,CACf,oDAAoD;QACpDL,QAAQG,OAAO,CAACG,gBAAgB,CAAiB;IAErD;IAEA,MAAMC,wBAAwB,CAACC;QAC7B,IAAI,CAACX,YAAY,CAACG,QAAQG,OAAO,IAAI,CAACJ,WAAW;YAC/C;QACF;QAEA,MAAMU,MAAMC,IAAAA,yBAAU,EAACF;QAEvB,OAAQC;YACN,KAAK;YACL,KAAK;YACL,KAAK;YACL,KAAK;gBAAQ;oBACX,MAAME,SAAST;oBACf,MAAMU,wBAAwBD,OAAOE,SAAS,CAAC,CAACC,KAAOjB,SAASkB,aAAa,KAAKD;oBAClF,IAAIF,0BAA0B,CAAC,GAAG;wBAChC;oBACF;oBAEA,IAAII,YAAY;oBAChB,IAAIP,QAAQ,QAAQ;wBAClBO,YAAY;oBACd,OAAO,IAAIP,QAAQ,OAAO;wBACxBO,YAAYL,OAAOM,MAAM,GAAG;oBAC9B,OAAO;wBACL,MAAMC,SAAST,QAAQ,eAAe,IAAI,CAAC;wBAC3CO,YAAYJ,wBAAwBM;oBACtC;oBAEA,MAAMC,YAAYR,MAAM,CAACK,UAAU;oBAEnC,IAAIG,WAAW;wBACbX,MAAMY,cAAc;wBACpBD,UAAUE,KAAK;oBACjB;oBAEA;gBACF;YACA;;;;MAIA,GACA,KAAK;gBAAa;oBAChB,MAAMV,SAAST;oBACf,MAAMoB,mBAAmBX,OAAOY,IAAI,CAAC,CAACT,KAAOjB,SAASkB,aAAa,KAAKD;oBAExE,IAAI,CAACQ,oBAAoBA,iBAAiBE,YAAY,CAAC,qBAAqB,QAAQ;wBAClF;oBACF;oBAEA,MAAMC,qBAAqBH,iBAAiBE,YAAY,CAAC;oBACzD,IAAI,CAACC,oBAAoB;wBACvB;oBACF;oBAEA,oDAAoD;oBACpD,MAAMC,mBAAmB7B,SAAS8B,cAAc,CAACF;oBACjD,IAAI,CAACC,kBAAkB;wBACrB;oBACF;oBAEAlB,MAAMY,cAAc;oBACpBM,iBAAiBL,KAAK;oBAEtB;gBACF;YACA,KAAK;YACL,KAAK;gBAAS;oBACZ,MAAMV,SAAST;oBACf,MAAMoB,mBAAmBX,OAAOY,IAAI,CAAC,CAACT,KAAOjB,SAASkB,aAAa,KAAKD;oBACxE,IAAIQ,kBAAkB;wBACpBA,iBAAiBM,KAAK;oBACxB;gBACF;QACF;IACF;IAEAC,IAAAA,8CAAsB,EAAChC,UAAU,WAAWU,uBAAuB;QACjEuB,SAAS;IACX;IAEA,qBACE,qBAACC,4BAAa,8CACRrC;QACJsC,eAAeC,IAAAA,gBAAU,cAEvB,oBACAtC,aAAa,WAAW,2BACxBP,YAAY6C,IAAAA,gBAAU,wBAA2B,+BACjD9C,SAAS;QAEXM,MAAMA;kBAEN,cAAA,qBAACyC;YAAIC,SAAS;YAAsBC,KAAKpC;sBACvC,cAAA,qBAAChB,gBAAgBqD,QAAQ;gBACvBC,OAAO;oBACLnD;oBACAC;oBACAC;oBACAC;oBACAC;gBACF;0BAECC;;;;AAKX"}
+{"version":3,"sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { pressedKey } from '../../lib/accessibility';\nimport { useDOM } from '../../lib/dom';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Tabs.module.css';\n\nexport interface TabsProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  mode?: 'default' | 'accent' | 'secondary';\n  /**\n   * Включает прокрутку контейнера до активной (`selected`) вкладки\n   * @since 5.10.0\n   */\n  withScrollToSelectedTab?: boolean;\n  /**\n   * Отвечает за горизонтальное выравнивание при прокрутке до активной вкладки.\n   * @see [scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView)\n   * @since 5.10.0\n   */\n  scrollBehaviorToSelectedTab?: ScrollIntoViewOptions['inline'];\n  /**\n   * При `auto` ширина вкладок определяется контекстом:\n   *  - равномерно занимают всю доступную ширину при вложении в `HorizontalScroll`\n   *  - равномерно занимают всю доступную ширину при `mode=default` и platform !== 'VKCOM'\n   * При `stretched` и `shrinked` вкладки либо равномерно занимают всю ширину,\n   * либо выравниваются по контенту соответственно\n   */\n  layoutFillMode?: 'auto' | 'stretched' | 'shrinked';\n}\n\nexport interface TabsContextProps {\n  mode: TabsProps['mode'];\n  withGaps: boolean;\n  layoutFillMode: NonNullable<TabsProps['layoutFillMode']>;\n  withScrollToSelectedTab: TabsProps['withScrollToSelectedTab'];\n  scrollBehaviorToSelectedTab: Required<TabsProps['scrollBehaviorToSelectedTab']>;\n}\n\nexport const TabsModeContext: React.Context<TabsContextProps> =\n  React.createContext<TabsContextProps>({\n    mode: 'default',\n    withGaps: false,\n    layoutFillMode: 'auto',\n    withScrollToSelectedTab: false,\n    scrollBehaviorToSelectedTab: 'nearest',\n  });\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabs\n */\nexport const Tabs = ({\n  children,\n  mode = 'default',\n  role = 'tablist',\n  withScrollToSelectedTab,\n  scrollBehaviorToSelectedTab = 'nearest',\n  layoutFillMode = 'auto',\n  ...restProps\n}: TabsProps): React.ReactNode => {\n  const platform = usePlatform();\n  const { document } = useDOM();\n\n  const isTabFlow = role === 'tablist';\n\n  const tabsRef = React.useRef<HTMLDivElement>(null);\n\n  const withGaps = mode === 'accent' || mode === 'secondary';\n\n  const getTabEls = () => {\n    if (!tabsRef.current) {\n      return [];\n    }\n\n    return Array.from(\n      // eslint-disable-next-line no-restricted-properties\n      tabsRef.current.querySelectorAll<HTMLDivElement>('[role=tab]:not([disabled])'),\n    );\n  };\n\n  const handleDocumentKeydown = (event: KeyboardEvent) => {\n    if (!document || !tabsRef.current || !isTabFlow) {\n      return;\n    }\n\n    const key = pressedKey(event);\n\n    switch (key) {\n      case 'ArrowLeft':\n      case 'ArrowRight':\n      case 'End':\n      case 'Home': {\n        const tabEls = getTabEls();\n        const currentFocusedElIndex = tabEls.findIndex((el) => document.activeElement === el);\n        if (currentFocusedElIndex === -1) {\n          return;\n        }\n\n        let nextIndex = 0;\n        if (key === 'Home') {\n          nextIndex = 0;\n        } else if (key === 'End') {\n          nextIndex = tabEls.length - 1;\n        } else {\n          const offset = key === 'ArrowRight' ? 1 : -1;\n          nextIndex = currentFocusedElIndex + offset;\n        }\n\n        const nextTabEl = tabEls[nextIndex];\n\n        if (nextTabEl) {\n          event.preventDefault();\n          nextTabEl.focus();\n        }\n\n        break;\n      }\n      /*\n       В JAWS и NVDA стрелка вниз активирует контент.\n       Это не прописано в стандартах, но по ссылке ниже это рекомендуется делать.\n       https://inclusive-components.design/tabbed-interfaces/\n      */\n      case 'ArrowDown': {\n        const tabEls = getTabEls();\n        const currentFocusedEl = tabEls.find((el) => document.activeElement === el);\n\n        if (!currentFocusedEl || currentFocusedEl.getAttribute('aria-selected') !== 'true') {\n          return;\n        }\n\n        const relatedContentElId = currentFocusedEl.getAttribute('aria-controls');\n        if (!relatedContentElId) {\n          return;\n        }\n\n        // eslint-disable-next-line no-restricted-properties\n        const relatedContentEl = document.getElementById(relatedContentElId);\n        if (!relatedContentEl) {\n          return;\n        }\n\n        event.preventDefault();\n        relatedContentEl.focus();\n\n        break;\n      }\n      case 'Space':\n      case 'Enter': {\n        const tabEls = getTabEls();\n        const currentFocusedEl = tabEls.find((el) => document.activeElement === el);\n        if (currentFocusedEl) {\n          currentFocusedEl.click();\n        }\n      }\n    }\n  };\n\n  useGlobalEventListener(document, 'keydown', handleDocumentKeydown, {\n    capture: true,\n  });\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['Tabs'],\n        'vkuiInternalTabs',\n        platform === 'vkcom' && 'vkuiInternalTabs--vkcom',\n        withGaps && classNames(styles['Tabs--withGaps'], 'vkuiInternalTabs--withGaps'),\n        mode === 'default' && styles['Tabs--mode-default'],\n      )}\n      role={role}\n    >\n      <div className={styles['Tabs__in']} ref={tabsRef}>\n        <TabsModeContext.Provider\n          value={{\n            mode,\n            withGaps,\n            layoutFillMode,\n            withScrollToSelectedTab,\n            scrollBehaviorToSelectedTab,\n          }}\n        >\n          {children}\n        </TabsModeContext.Provider>\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["Tabs","TabsModeContext","React","createContext","mode","withGaps","layoutFillMode","withScrollToSelectedTab","scrollBehaviorToSelectedTab","children","role","restProps","platform","usePlatform","document","useDOM","isTabFlow","tabsRef","useRef","getTabEls","current","Array","from","querySelectorAll","handleDocumentKeydown","event","key","pressedKey","tabEls","currentFocusedElIndex","findIndex","el","activeElement","nextIndex","length","offset","nextTabEl","preventDefault","focus","currentFocusedEl","find","getAttribute","relatedContentElId","relatedContentEl","getElementById","click","useGlobalEventListener","capture","RootComponent","baseClassName","classNames","div","className","ref","Provider","value"],"mappings":"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"}