@vkontakte/vkui 8.1.2 → 8.2.0

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

@@ -0,0 +1,10 @@
+import * as shapes from '../../../lib/material/shapes/shapes';
+import { type SpinnerProps } from '../Spinner';
+export interface MaterialSpinnerProps extends SpinnerProps {
+    /**
+     * Последовательность форм между которыми будет происходить анимация.
+     */
+    polygons?: readonly [shapes.ShapeParameters, shapes.ShapeParameters, ...shapes.ShapeParameters[]];
+}
+export declare function ExpressiveSpinner(props: SpinnerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ExpressiveSpinner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExpressiveSpinner.d.ts","sourceRoot":"","sources":["../../../../src/components/Spinner/ExpressiveSpinner/ExpressiveSpinner.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,MAAM,qCAAqC,CAAC;AAI9D,OAAO,EAA4B,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAsBzE,MAAM,WAAW,oBAAqB,SAAQ,YAAY;IACxD;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,eAAe,EAAE,GAAG,MAAM,CAAC,eAAe,EAAE,CAAC,CAAC;CACnG;AA+BD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,YAAY,2CAMpD"}

package/dist/components/Spinner/ExpressiveSpinner/ExpressiveSpinner.js

@@ -0,0 +1,54 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames, hasReactNode } from "@vkontakte/vkjs";
+import { usePlatform } from "../../../hooks/usePlatform.js";
+import * as shapes from "../../../lib/material/shapes/shapes.js";
+import { animationVisibilityDelayStyles } from "../../../styles/animationVisibilityDelay.js";
+import { RootComponent } from "../../RootComponent/RootComponent.js";
+import { VisuallyHidden } from "../../VisuallyHidden/VisuallyHidden.js";
+import { Spinner as SimpleSpinner } from "../Spinner.js";
+import { IconMaterial } from "./icons.js";
+const iconSizeMap = {
+    s: 16,
+    m: 24,
+    l: 32,
+    xl: 44
+};
+const defaultShapesList = [
+    shapes.softBurstParams,
+    shapes.cookie9Params,
+    shapes.pentagonParams,
+    shapes.pillParams,
+    shapes.sunnyParams,
+    shapes.cookie4Params,
+    shapes.ovalParams
+];
+function MaterialSpinner({ polygons = defaultShapesList, size = 'm', children = 'Загружается...', disableAnimation = false, noColor = false, visibilityDelay, ...restProps }) {
+    const iconSize = iconSizeMap[size];
+    return /*#__PURE__*/ _jsxs(RootComponent, {
+        Component: "span",
+        role: "status",
+        ...restProps,
+        baseClassName: classNames("vkuiExpressiveSpinner__host", noColor && "vkuiExpressiveSpinner__noColor", visibilityDelay && "vkuistyles__visibilityDelay"),
+        baseStyle: animationVisibilityDelayStyles(visibilityDelay),
+        children: [
+            /*#__PURE__*/ _jsx(IconMaterial, {
+                size: iconSize,
+                polygons: polygons,
+                disableAnimation: disableAnimation
+            }),
+            hasReactNode(children) && /*#__PURE__*/ _jsx(VisuallyHidden, {
+                children: children
+            })
+        ]
+    });
+}
+export function ExpressiveSpinner(props) {
+    const platform = usePlatform();
+    const Component = platform === 'ios' ? SimpleSpinner : MaterialSpinner;
+    return /*#__PURE__*/ _jsx(Component, {
+        ...props
+    });
+}
+
+//# sourceMappingURL=ExpressiveSpinner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Spinner/ExpressiveSpinner/ExpressiveSpinner.tsx"],"sourcesContent":["'use client';\n\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../../hooks/usePlatform';\nimport * as shapes from '../../../lib/material/shapes/shapes';\nimport { animationVisibilityDelayStyles } from '../../../styles/animationVisibilityDelay';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport { Spinner as SimpleSpinner, type SpinnerProps } from '../Spinner';\nimport { IconMaterial } from './icons';\nimport styles from './ExpressiveSpinner.module.css';\nimport stylesDelay from '../../../styles/animationVisibilityDelay.module.css';\n\nconst iconSizeMap = {\n  s: 16,\n  m: 24,\n  l: 32,\n  xl: 44,\n} as const;\n\nconst defaultShapesList = [\n  shapes.softBurstParams,\n  shapes.cookie9Params,\n  shapes.pentagonParams,\n  shapes.pillParams,\n  shapes.sunnyParams,\n  shapes.cookie4Params,\n  shapes.ovalParams,\n] as const;\n\nexport interface MaterialSpinnerProps extends SpinnerProps {\n  /**\n   * Последовательность форм между которыми будет происходить анимация.\n   */\n  polygons?: readonly [shapes.ShapeParameters, shapes.ShapeParameters, ...shapes.ShapeParameters[]];\n}\n\nfunction MaterialSpinner({\n  polygons = defaultShapesList,\n  size = 'm',\n  children = 'Загружается...',\n  disableAnimation = false,\n  noColor = false,\n  visibilityDelay,\n  ...restProps\n}: MaterialSpinnerProps) {\n  const iconSize = iconSizeMap[size];\n\n  return (\n    <RootComponent\n      Component=\"span\"\n      role=\"status\"\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        noColor && styles.noColor,\n        visibilityDelay && stylesDelay.visibilityDelay,\n      )}\n      baseStyle={animationVisibilityDelayStyles(visibilityDelay)}\n    >\n      <IconMaterial size={iconSize} polygons={polygons} disableAnimation={disableAnimation} />\n      {hasReactNode(children) && <VisuallyHidden>{children}</VisuallyHidden>}\n    </RootComponent>\n  );\n}\n\nexport function ExpressiveSpinner(props: SpinnerProps) {\n  const platform = usePlatform();\n\n  const Component = platform === 'ios' ? SimpleSpinner : MaterialSpinner;\n\n  return <Component {...props} />;\n}\n"],"names":["classNames","hasReactNode","usePlatform","shapes","animationVisibilityDelayStyles","RootComponent","VisuallyHidden","Spinner","SimpleSpinner","IconMaterial","iconSizeMap","s","m","l","xl","defaultShapesList","softBurstParams","cookie9Params","pentagonParams","pillParams","sunnyParams","cookie4Params","ovalParams","MaterialSpinner","polygons","size","children","disableAnimation","noColor","visibilityDelay","restProps","iconSize","Component","role","baseClassName","baseStyle","ExpressiveSpinner","props","platform"],"mappings":"AAAA;;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,WAAW,QAAQ,gCAA6B;AACzD,YAAYC,YAAY,yCAAsC;AAC9D,SAASC,8BAA8B,QAAQ,8CAA2C;AAC1F,SAASC,aAAa,QAAQ,uCAAoC;AAClE,SAASC,cAAc,QAAQ,yCAAsC;AACrE,SAASC,WAAWC,aAAa,QAA2B,gBAAa;AACzE,SAASC,YAAY,QAAQ,aAAU;AAIvC,MAAMC,cAAc;IAClBC,GAAG;IACHC,GAAG;IACHC,GAAG;IACHC,IAAI;AACN;AAEA,MAAMC,oBAAoB;IACxBZ,OAAOa,eAAe;IACtBb,OAAOc,aAAa;IACpBd,OAAOe,cAAc;IACrBf,OAAOgB,UAAU;IACjBhB,OAAOiB,WAAW;IAClBjB,OAAOkB,aAAa;IACpBlB,OAAOmB,UAAU;CAClB;AASD,SAASC,gBAAgB,EACvBC,WAAWT,iBAAiB,EAC5BU,OAAO,GAAG,EACVC,WAAW,gBAAgB,EAC3BC,mBAAmB,KAAK,EACxBC,UAAU,KAAK,EACfC,eAAe,EACf,GAAGC,WACkB;IACrB,MAAMC,WAAWrB,WAAW,CAACe,KAAK;IAElC,qBACE,MAACpB;QACC2B,WAAU;QACVC,MAAK;QACJ,GAAGH,SAAS;QACbI,eAAelC,0CAEb4B,6CACAC;QAEFM,WAAW/B,+BAA+ByB;;0BAE1C,KAACpB;gBAAagB,MAAMM;gBAAUP,UAAUA;gBAAUG,kBAAkBA;;YACnE1B,aAAayB,2BAAa,KAACpB;0BAAgBoB;;;;AAGlD;AAEA,OAAO,SAASU,kBAAkBC,KAAmB;IACnD,MAAMC,WAAWpC;IAEjB,MAAM8B,YAAYM,aAAa,QAAQ9B,gBAAgBe;IAEvD,qBAAO,KAACS;QAAW,GAAGK,KAAK;;AAC7B"}

package/dist/components/Spinner/ExpressiveSpinner/icons.d.ts

@@ -0,0 +1,18 @@
+import * as shapes from '../../../lib/material/shapes/shapes';
+interface IconMaterialProps {
+    /**
+     * Список форм.
+     */
+    polygons: readonly shapes.ShapeParameters[];
+    /**
+     * Размер иконки.
+     */
+    size: number;
+    /**
+     * Отключение анимации.
+     */
+    disableAnimation: boolean;
+}
+export declare function IconMaterial(props: IconMaterialProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=icons.d.ts.map

package/dist/components/Spinner/ExpressiveSpinner/icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../../src/components/Spinner/ExpressiveSpinner/icons.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,MAAM,qCAAqC,CAAC;AAM9D,UAAU,iBAAiB;IACzB;;OAEG;IACH,QAAQ,EAAE,SAAS,MAAM,CAAC,eAAe,EAAE,CAAC;IAC5C;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,gBAAgB,EAAE,OAAO,CAAC;CAC3B;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CAMpD"}

package/dist/components/Spinner/ExpressiveSpinner/icons.js

@@ -0,0 +1,79 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { useAnimationFrame } from "../../../hooks/useAnimationFrame.js";
+import { useReducedMotion } from "../../../lib/animation/index.js";
+import * as shapes from "../../../lib/material/shapes/shapes.js";
+import { interpolate } from "../../../lib/svg/path/interpolate.js";
+import { svgPathToString } from "../../../lib/svg/path/path.js";
+import * as operation from "../../../lib/svg/path/transform.js";
+import { SvgIcon } from "../SvgIcon.js";
+export function IconMaterial(props) {
+    return /*#__PURE__*/ _jsx(SvgIcon, {
+        size: props.size,
+        children: /*#__PURE__*/ _jsx(IconMaterialPath, {
+            ...props
+        })
+    });
+}
+const globalRotationDuration = 4666;
+const morphDuration = 200;
+const morphInterval = 650;
+const fullRotation = 360;
+const quarterRotation = fullRotation / 4;
+function calcProgress(startTime, time, duration, delay = 0) {
+    const fullDuration = duration + delay;
+    const timeProgress = fullDuration * ((time - startTime) % fullDuration / fullDuration);
+    if (timeProgress < delay) {
+        return 0;
+    }
+    return (timeProgress - delay) / duration;
+}
+function IconMaterialPath({ size, polygons, disableAnimation }) {
+    const ref = React.useRef(null);
+    const morphSequence = React.useMemo(()=>{
+        function getShape(index, size) {
+            return shapes.shapeWithRotate(polygons[index], size);
+        }
+        return new Array(polygons.length).fill(0).map((_, index)=>{
+            return interpolate(getShape(index, size), getShape((index + 1) % polygons.length, size), {
+                maxSegmentLength: 2
+            });
+        });
+    }, [
+        size,
+        polygons
+    ]);
+    const initialPath = React.useMemo(()=>svgPathToString(morphSequence[0](0)), [
+        morphSequence
+    ]);
+    const callback = React.useCallback((time)=>{
+        const rotationAnimationProgress = calcProgress(0, time, globalRotationDuration);
+        const globalRotation = rotationAnimationProgress * fullRotation;
+        // TODO: spring({
+        //   dampingRatio: 0.6,
+        //   stiffness: 200,
+        //   visibilityThreshold: 0.1,
+        // })
+        const morphProgress = calcProgress(0, time, morphDuration, morphInterval);
+        const roundMorphIndex = Math.floor(time / (morphDuration + morphInterval));
+        const currentMorphIndex = roundMorphIndex % morphSequence.length;
+        const morphRotationTargetAngle = roundMorphIndex * quarterRotation % fullRotation;
+        const rotation = morphProgress * quarterRotation + morphRotationTargetAngle + globalRotation;
+        const morphFn = morphSequence[currentMorphIndex];
+        const morph = morphFn(morphProgress);
+        ref.current.setAttribute('d', svgPathToString(operation.rotate(morph, size / 2, size / 2, rotation)));
+    }, [
+        morphSequence,
+        size
+    ]);
+    const isReducedMotion = useReducedMotion();
+    useAnimationFrame(callback, disableAnimation || isReducedMotion);
+    return /*#__PURE__*/ _jsx("path", {
+        ref: ref,
+        fill: "currentColor",
+        d: initialPath
+    });
+}
+
+//# sourceMappingURL=icons.js.map

package/dist/components/Spinner/ExpressiveSpinner/icons.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Spinner/ExpressiveSpinner/icons.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useAnimationFrame } from '../../../hooks/useAnimationFrame';\nimport { useReducedMotion } from '../../../lib/animation';\nimport * as shapes from '../../../lib/material/shapes/shapes';\nimport { interpolate } from '../../../lib/svg/path/interpolate';\nimport { svgPathToString } from '../../../lib/svg/path/path';\nimport * as operation from '../../../lib/svg/path/transform';\nimport { SvgIcon } from '../SvgIcon';\n\ninterface IconMaterialProps {\n  /**\n   * Список форм.\n   */\n  polygons: readonly shapes.ShapeParameters[];\n  /**\n   * Размер иконки.\n   */\n  size: number;\n  /**\n   * Отключение анимации.\n   */\n  disableAnimation: boolean;\n}\n\nexport function IconMaterial(props: IconMaterialProps) {\n  return (\n    <SvgIcon size={props.size}>\n      <IconMaterialPath {...props} />\n    </SvgIcon>\n  );\n}\n\nconst globalRotationDuration = 4666;\nconst morphDuration = 200;\nconst morphInterval = 650;\nconst fullRotation = 360;\nconst quarterRotation = fullRotation / 4;\n\nfunction calcProgress(startTime: number, time: number, duration: number, delay = 0) {\n  const fullDuration = duration + delay;\n\n  const timeProgress = fullDuration * (((time - startTime) % fullDuration) / fullDuration);\n\n  if (timeProgress < delay) {\n    return 0;\n  }\n\n  return (timeProgress - delay) / duration;\n}\n\nfunction IconMaterialPath({ size, polygons, disableAnimation }: IconMaterialProps) {\n  const ref = React.useRef<SVGPathElement>(null);\n\n  const morphSequence = React.useMemo(() => {\n    function getShape(index: number, size: number) {\n      return shapes.shapeWithRotate(polygons[index], size);\n    }\n\n    return new Array(polygons.length).fill(0).map((_, index) => {\n      return interpolate(getShape(index, size), getShape((index + 1) % polygons.length, size), {\n        maxSegmentLength: 2,\n      });\n    });\n  }, [size, polygons]);\n\n  const initialPath = React.useMemo(() => svgPathToString(morphSequence[0](0)), [morphSequence]);\n\n  const callback = React.useCallback(\n    (time: number) => {\n      const rotationAnimationProgress = calcProgress(0, time, globalRotationDuration);\n      const globalRotation = rotationAnimationProgress * fullRotation;\n\n      // TODO: spring({\n      //   dampingRatio: 0.6,\n      //   stiffness: 200,\n      //   visibilityThreshold: 0.1,\n      // })\n      const morphProgress = calcProgress(0, time, morphDuration, morphInterval);\n\n      const roundMorphIndex = Math.floor(time / (morphDuration + morphInterval));\n\n      const currentMorphIndex = roundMorphIndex % morphSequence.length;\n\n      const morphRotationTargetAngle = (roundMorphIndex * quarterRotation) % fullRotation;\n      const rotation = morphProgress * quarterRotation + morphRotationTargetAngle + globalRotation;\n\n      const morphFn = morphSequence[currentMorphIndex];\n      const morph = morphFn(morphProgress);\n\n      ref.current!.setAttribute(\n        'd',\n        svgPathToString(operation.rotate(morph, size / 2, size / 2, rotation)),\n      );\n    },\n    [morphSequence, size],\n  );\n\n  const isReducedMotion = useReducedMotion();\n  useAnimationFrame(callback, disableAnimation || isReducedMotion);\n\n  return <path ref={ref} fill=\"currentColor\" d={initialPath}></path>;\n}\n"],"names":["React","useAnimationFrame","useReducedMotion","shapes","interpolate","svgPathToString","operation","SvgIcon","IconMaterial","props","size","IconMaterialPath","globalRotationDuration","morphDuration","morphInterval","fullRotation","quarterRotation","calcProgress","startTime","time","duration","delay","fullDuration","timeProgress","polygons","disableAnimation","ref","useRef","morphSequence","useMemo","getShape","index","shapeWithRotate","Array","length","fill","map","_","maxSegmentLength","initialPath","callback","useCallback","rotationAnimationProgress","globalRotation","morphProgress","roundMorphIndex","Math","floor","currentMorphIndex","morphRotationTargetAngle","rotation","morphFn","morph","current","setAttribute","rotate","isReducedMotion","path","d"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iBAAiB,QAAQ,sCAAmC;AACrE,SAASC,gBAAgB,QAAQ,kCAAyB;AAC1D,YAAYC,YAAY,yCAAsC;AAC9D,SAASC,WAAW,QAAQ,uCAAoC;AAChE,SAASC,eAAe,QAAQ,gCAA6B;AAC7D,YAAYC,eAAe,qCAAkC;AAC7D,SAASC,OAAO,QAAQ,gBAAa;AAiBrC,OAAO,SAASC,aAAaC,KAAwB;IACnD,qBACE,KAACF;QAAQG,MAAMD,MAAMC,IAAI;kBACvB,cAAA,KAACC;YAAkB,GAAGF,KAAK;;;AAGjC;AAEA,MAAMG,yBAAyB;AAC/B,MAAMC,gBAAgB;AACtB,MAAMC,gBAAgB;AACtB,MAAMC,eAAe;AACrB,MAAMC,kBAAkBD,eAAe;AAEvC,SAASE,aAAaC,SAAiB,EAAEC,IAAY,EAAEC,QAAgB,EAAEC,QAAQ,CAAC;IAChF,MAAMC,eAAeF,WAAWC;IAEhC,MAAME,eAAeD,eAAgB,CAAA,AAAEH,CAAAA,OAAOD,SAAQ,IAAKI,eAAgBA,YAAW;IAEtF,IAAIC,eAAeF,OAAO;QACxB,OAAO;IACT;IAEA,OAAO,AAACE,CAAAA,eAAeF,KAAI,IAAKD;AAClC;AAEA,SAAST,iBAAiB,EAAED,IAAI,EAAEc,QAAQ,EAAEC,gBAAgB,EAAqB;IAC/E,MAAMC,MAAM1B,MAAM2B,MAAM,CAAiB;IAEzC,MAAMC,gBAAgB5B,MAAM6B,OAAO,CAAC;QAClC,SAASC,SAASC,KAAa,EAAErB,IAAY;YAC3C,OAAOP,OAAO6B,eAAe,CAACR,QAAQ,CAACO,MAAM,EAAErB;QACjD;QAEA,OAAO,IAAIuB,MAAMT,SAASU,MAAM,EAAEC,IAAI,CAAC,GAAGC,GAAG,CAAC,CAACC,GAAGN;YAChD,OAAO3B,YAAY0B,SAASC,OAAOrB,OAAOoB,SAAS,AAACC,CAAAA,QAAQ,CAAA,IAAKP,SAASU,MAAM,EAAExB,OAAO;gBACvF4B,kBAAkB;YACpB;QACF;IACF,GAAG;QAAC5B;QAAMc;KAAS;IAEnB,MAAMe,cAAcvC,MAAM6B,OAAO,CAAC,IAAMxB,gBAAgBuB,aAAa,CAAC,EAAE,CAAC,KAAK;QAACA;KAAc;IAE7F,MAAMY,WAAWxC,MAAMyC,WAAW,CAChC,CAACtB;QACC,MAAMuB,4BAA4BzB,aAAa,GAAGE,MAAMP;QACxD,MAAM+B,iBAAiBD,4BAA4B3B;QAEnD,iBAAiB;QACjB,uBAAuB;QACvB,oBAAoB;QACpB,8BAA8B;QAC9B,KAAK;QACL,MAAM6B,gBAAgB3B,aAAa,GAAGE,MAAMN,eAAeC;QAE3D,MAAM+B,kBAAkBC,KAAKC,KAAK,CAAC5B,OAAQN,CAAAA,gBAAgBC,aAAY;QAEvE,MAAMkC,oBAAoBH,kBAAkBjB,cAAcM,MAAM;QAEhE,MAAMe,2BAA2B,AAACJ,kBAAkB7B,kBAAmBD;QACvE,MAAMmC,WAAWN,gBAAgB5B,kBAAkBiC,2BAA2BN;QAE9E,MAAMQ,UAAUvB,aAAa,CAACoB,kBAAkB;QAChD,MAAMI,QAAQD,QAAQP;QAEtBlB,IAAI2B,OAAO,CAAEC,YAAY,CACvB,KACAjD,gBAAgBC,UAAUiD,MAAM,CAACH,OAAO1C,OAAO,GAAGA,OAAO,GAAGwC;IAEhE,GACA;QAACtB;QAAelB;KAAK;IAGvB,MAAM8C,kBAAkBtD;IACxBD,kBAAkBuC,UAAUf,oBAAoB+B;IAEhD,qBAAO,KAACC;QAAK/B,KAAKA;QAAKS,MAAK;QAAeuB,GAAGnB;;AAChD"}

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

@@ -0,0 +1,14 @@
+import { type HasRootRef } from '../../types';
+/**
+ * Возвращает класс для иконки.
+ */
+export declare function iconClassName(size: number): string;
+interface SvgIconProps extends React.ComponentProps<'svg'>, HasRootRef<SVGElement> {
+    /**
+     * Размер иконки.
+     */
+    size: number;
+}
+export declare function SvgIcon({ size, children, ...restProps }: SvgIconProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SvgIcon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SvgIcon.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner/SvgIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,aAAa,CAAC;AAG9C;;GAEG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,UAEzC;AAED,UAAU,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC;IAChF;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,OAAO,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,EAAE,YAAY,2CAarE"}

package/dist/components/Spinner/SvgIcon.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RootComponent } from "../RootComponent/RootComponent.js";
+/**
+ * Возвращает класс для иконки.
+ */ export function iconClassName(size) {
+    return `vkuiIcon vkuiIcon--${size} vkuiIcon--w-${size} vkuiIcon--h-${size}`;
+}
+export function SvgIcon({ size, children, ...restProps }) {
+    return /*#__PURE__*/ _jsx(RootComponent, {
+        Component: "svg",
+        baseClassName: iconClassName(size),
+        "aria-hidden": "true",
+        width: size,
+        height: size,
+        ...restProps,
+        children: children
+    });
+}
+
+//# sourceMappingURL=SvgIcon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Spinner/SvgIcon.tsx"],"sourcesContent":["import { type HasRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\n\n/**\n * Возвращает класс для иконки.\n */\nexport function iconClassName(size: number) {\n  return `vkuiIcon vkuiIcon--${size} vkuiIcon--w-${size} vkuiIcon--h-${size}`;\n}\n\ninterface SvgIconProps extends React.ComponentProps<'svg'>, HasRootRef<SVGElement> {\n  /**\n   * Размер иконки.\n   */\n  size: number;\n}\n\nexport function SvgIcon({ size, children, ...restProps }: SvgIconProps) {\n  return (\n    <RootComponent\n      Component=\"svg\"\n      baseClassName={iconClassName(size)}\n      aria-hidden=\"true\"\n      width={size}\n      height={size}\n      {...restProps}\n    >\n      {children}\n    </RootComponent>\n  );\n}\n"],"names":["RootComponent","iconClassName","size","SvgIcon","children","restProps","Component","baseClassName","aria-hidden","width","height"],"mappings":";AACA,SAASA,aAAa,QAAQ,oCAAiC;AAE/D;;CAEC,GACD,OAAO,SAASC,cAAcC,IAAY;IACxC,OAAO,CAAC,mBAAmB,EAAEA,KAAK,aAAa,EAAEA,KAAK,aAAa,EAAEA,MAAM;AAC7E;AASA,OAAO,SAASC,QAAQ,EAAED,IAAI,EAAEE,QAAQ,EAAE,GAAGC,WAAyB;IACpE,qBACE,KAACL;QACCM,WAAU;QACVC,eAAeN,cAAcC;QAC7BM,eAAY;QACZC,OAAOP;QACPQ,QAAQR;QACP,GAAGG,SAAS;kBAEZD;;AAGP"}

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

@@ -1,4 +1,4 @@
-import type * as React from 'react';
+import * as React from 'react';
 export declare function Icon16Spinner({ children }: React.PropsWithChildren): import("react/jsx-runtime").JSX.Element;
 export declare function Icon24Spinner({ children }: React.PropsWithChildren): import("react/jsx-runtime").JSX.Element;
 export declare function Icon32Spinner({ children }: React.PropsWithChildren): import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner/icons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAMpC,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,CAAC,iBAAiB,2CAWlE;AAED,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,CAAC,iBAAiB,2CAWlE;AAED,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,CAAC,iBAAiB,2CAWlE;AAED,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,CAAC,iBAAiB,2CAWlE"}
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner/icons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,CAAC,iBAAiB,2CAWlE;AAED,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,CAAC,iBAAiB,2CAWlE;AAED,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,CAAC,iBAAiB,2CAWlE;AAED,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,CAAC,iBAAiB,2CAWlE"}

package/dist/components/Spinner/icons.js

@@ -1,13 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-function iconClassName(size) {
-    return `vkuiIcon vkuiIcon--${size} vkuiIcon--w-${size} vkuiIcon--h-${size}`;
-}
+import * as React from "react";
+import { SvgIcon } from "./SvgIcon.js";
 export function Icon16Spinner({ children }) {
-    return /*#__PURE__*/ _jsx("svg", {
-        className: iconClassName(16),
-        "aria-hidden": "true",
-        width: "16",
-        height: "16",
+    return /*#__PURE__*/ _jsx(SvgIcon, {
+        size: 16,
         children: /*#__PURE__*/ _jsx("path", {
             fill: "currentColor",
             d: "M8 3.25a4.75 4.75 0 0 0-4.149 7.065.75.75 0 1 1-1.31.732A6.25 6.25 0 1 1 8 14.25a.75.75 0 0 1 .001-1.5 4.75 4.75 0 1 0 0-9.5Z",
@@ -16,11 +12,8 @@ export function Icon16Spinner({ children }) {
     });
 }
 export function Icon24Spinner({ children }) {
-    return /*#__PURE__*/ _jsx("svg", {
-        className: iconClassName(24),
-        "aria-hidden": "true",
-        width: "24",
-        height: "24",
+    return /*#__PURE__*/ _jsx(SvgIcon, {
+        size: 24,
         children: /*#__PURE__*/ _jsx("path", {
             fill: "currentColor",
             d: "M16.394 5.077A8.2 8.2 0 0 0 4.58 15.49a.9.9 0 0 1-1.628.767A10 10 0 1 1 12 22a.9.9 0 0 1 0-1.8 8.2 8.2 0 0 0 4.394-15.123",
@@ -29,11 +22,8 @@ export function Icon24Spinner({ children }) {
     });
 }
 export function Icon32Spinner({ children }) {
-    return /*#__PURE__*/ _jsx("svg", {
-        className: iconClassName(32),
-        "aria-hidden": "true",
-        width: "32",
-        height: "32",
+    return /*#__PURE__*/ _jsx(SvgIcon, {
+        size: 32,
         children: /*#__PURE__*/ _jsx("path", {
             fill: "currentColor",
             d: "M16 32a1.5 1.5 0 0 1 0-3c7.18 0 13-5.82 13-13S23.18 3 16 3 3 8.82 3 16c0 1.557.273 3.074.8 4.502A1.5 1.5 0 1 1 .986 21.54 16 16 0 0 1 0 16C0 7.163 7.163 0 16 0s16 7.163 16 16-7.163 16-16 16",
@@ -42,11 +32,8 @@ export function Icon32Spinner({ children }) {
     });
 }
 export function Icon44Spinner({ children }) {
-    return /*#__PURE__*/ _jsx("svg", {
-        className: iconClassName(44),
-        "aria-hidden": "true",
-        width: "44",
-        height: "44",
+    return /*#__PURE__*/ _jsx(SvgIcon, {
+        size: 44,
         children: /*#__PURE__*/ _jsx("path", {
             fill: "currentColor",
             d: "M22 44a1.5 1.5 0 0 1 0-3c10.493 0 19-8.507 19-19S32.493 3 22 3 3 11.507 3 22c0 2.208.376 4.363 1.103 6.397a1.5 1.5 0 1 1-2.825 1.01A22 22 0 0 1 0 22C0 9.85 9.85 0 22 0s22 9.85 22 22-9.85 22-22 22",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Spinner/icons.tsx"],"sourcesContent":["import type * as React from 'react';\n\nfunction iconClassName(size: number) {\n  return `vkuiIcon vkuiIcon--${size} vkuiIcon--w-${size} vkuiIcon--h-${size}`;\n}\n\nexport function Icon16Spinner({ children }: React.PropsWithChildren) {\n  return (\n    <svg className={iconClassName(16)} aria-hidden=\"true\" width=\"16\" height=\"16\">\n      <path\n        fill=\"currentColor\"\n        d=\"M8 3.25a4.75 4.75 0 0 0-4.149 7.065.75.75 0 1 1-1.31.732A6.25 6.25 0 1 1 8 14.25a.75.75 0 0 1 .001-1.5 4.75 4.75 0 1 0 0-9.5Z\"\n      >\n        {children}\n      </path>\n    </svg>\n  );\n}\n\nexport function Icon24Spinner({ children }: React.PropsWithChildren) {\n  return (\n    <svg className={iconClassName(24)} aria-hidden=\"true\" width=\"24\" height=\"24\">\n      <path\n        fill=\"currentColor\"\n        d=\"M16.394 5.077A8.2 8.2 0 0 0 4.58 15.49a.9.9 0 0 1-1.628.767A10 10 0 1 1 12 22a.9.9 0 0 1 0-1.8 8.2 8.2 0 0 0 4.394-15.123\"\n      >\n        {children}\n      </path>\n    </svg>\n  );\n}\n\nexport function Icon32Spinner({ children }: React.PropsWithChildren) {\n  return (\n    <svg className={iconClassName(32)} aria-hidden=\"true\" width=\"32\" height=\"32\">\n      <path\n        fill=\"currentColor\"\n        d=\"M16 32a1.5 1.5 0 0 1 0-3c7.18 0 13-5.82 13-13S23.18 3 16 3 3 8.82 3 16c0 1.557.273 3.074.8 4.502A1.5 1.5 0 1 1 .986 21.54 16 16 0 0 1 0 16C0 7.163 7.163 0 16 0s16 7.163 16 16-7.163 16-16 16\"\n      >\n        {children}\n      </path>\n    </svg>\n  );\n}\n\nexport function Icon44Spinner({ children }: React.PropsWithChildren) {\n  return (\n    <svg className={iconClassName(44)} aria-hidden=\"true\" width=\"44\" height=\"44\">\n      <path\n        fill=\"currentColor\"\n        d=\"M22 44a1.5 1.5 0 0 1 0-3c10.493 0 19-8.507 19-19S32.493 3 22 3 3 11.507 3 22c0 2.208.376 4.363 1.103 6.397a1.5 1.5 0 1 1-2.825 1.01A22 22 0 0 1 0 22C0 9.85 9.85 0 22 0s22 9.85 22 22-9.85 22-22 22\"\n      >\n        {children}\n      </path>\n    </svg>\n  );\n}\n"],"names":["iconClassName","size","Icon16Spinner","children","svg","className","aria-hidden","width","height","path","fill","d","Icon24Spinner","Icon32Spinner","Icon44Spinner"],"mappings":";AAEA,SAASA,cAAcC,IAAY;IACjC,OAAO,CAAC,mBAAmB,EAAEA,KAAK,aAAa,EAAEA,KAAK,aAAa,EAAEA,MAAM;AAC7E;AAEA,OAAO,SAASC,cAAc,EAAEC,QAAQ,EAA2B;IACjE,qBACE,KAACC;QAAIC,WAAWL,cAAc;QAAKM,eAAY;QAAOC,OAAM;QAAKC,QAAO;kBACtE,cAAA,KAACC;YACCC,MAAK;YACLC,GAAE;sBAEDR;;;AAIT;AAEA,OAAO,SAASS,cAAc,EAAET,QAAQ,EAA2B;IACjE,qBACE,KAACC;QAAIC,WAAWL,cAAc;QAAKM,eAAY;QAAOC,OAAM;QAAKC,QAAO;kBACtE,cAAA,KAACC;YACCC,MAAK;YACLC,GAAE;sBAEDR;;;AAIT;AAEA,OAAO,SAASU,cAAc,EAAEV,QAAQ,EAA2B;IACjE,qBACE,KAACC;QAAIC,WAAWL,cAAc;QAAKM,eAAY;QAAOC,OAAM;QAAKC,QAAO;kBACtE,cAAA,KAACC;YACCC,MAAK;YACLC,GAAE;sBAEDR;;;AAIT;AAEA,OAAO,SAASW,cAAc,EAAEX,QAAQ,EAA2B;IACjE,qBACE,KAACC;QAAIC,WAAWL,cAAc;QAAKM,eAAY;QAAOC,OAAM;QAAKC,QAAO;kBACtE,cAAA,KAACC;YACCC,MAAK;YACLC,GAAE;sBAEDR;;;AAIT"}
+{"version":3,"sources":["../../../src/components/Spinner/icons.tsx"],"sourcesContent":["import * as React from 'react';\nimport { SvgIcon } from './SvgIcon';\n\nexport function Icon16Spinner({ children }: React.PropsWithChildren) {\n  return (\n    <SvgIcon size={16}>\n      <path\n        fill=\"currentColor\"\n        d=\"M8 3.25a4.75 4.75 0 0 0-4.149 7.065.75.75 0 1 1-1.31.732A6.25 6.25 0 1 1 8 14.25a.75.75 0 0 1 .001-1.5 4.75 4.75 0 1 0 0-9.5Z\"\n      >\n        {children}\n      </path>\n    </SvgIcon>\n  );\n}\n\nexport function Icon24Spinner({ children }: React.PropsWithChildren) {\n  return (\n    <SvgIcon size={24}>\n      <path\n        fill=\"currentColor\"\n        d=\"M16.394 5.077A8.2 8.2 0 0 0 4.58 15.49a.9.9 0 0 1-1.628.767A10 10 0 1 1 12 22a.9.9 0 0 1 0-1.8 8.2 8.2 0 0 0 4.394-15.123\"\n      >\n        {children}\n      </path>\n    </SvgIcon>\n  );\n}\n\nexport function Icon32Spinner({ children }: React.PropsWithChildren) {\n  return (\n    <SvgIcon size={32}>\n      <path\n        fill=\"currentColor\"\n        d=\"M16 32a1.5 1.5 0 0 1 0-3c7.18 0 13-5.82 13-13S23.18 3 16 3 3 8.82 3 16c0 1.557.273 3.074.8 4.502A1.5 1.5 0 1 1 .986 21.54 16 16 0 0 1 0 16C0 7.163 7.163 0 16 0s16 7.163 16 16-7.163 16-16 16\"\n      >\n        {children}\n      </path>\n    </SvgIcon>\n  );\n}\n\nexport function Icon44Spinner({ children }: React.PropsWithChildren) {\n  return (\n    <SvgIcon size={44}>\n      <path\n        fill=\"currentColor\"\n        d=\"M22 44a1.5 1.5 0 0 1 0-3c10.493 0 19-8.507 19-19S32.493 3 22 3 3 11.507 3 22c0 2.208.376 4.363 1.103 6.397a1.5 1.5 0 1 1-2.825 1.01A22 22 0 0 1 0 22C0 9.85 9.85 0 22 0s22 9.85 22 22-9.85 22-22 22\"\n      >\n        {children}\n      </path>\n    </SvgIcon>\n  );\n}\n"],"names":["React","SvgIcon","Icon16Spinner","children","size","path","fill","d","Icon24Spinner","Icon32Spinner","Icon44Spinner"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,OAAO,QAAQ,eAAY;AAEpC,OAAO,SAASC,cAAc,EAAEC,QAAQ,EAA2B;IACjE,qBACE,KAACF;QAAQG,MAAM;kBACb,cAAA,KAACC;YACCC,MAAK;YACLC,GAAE;sBAEDJ;;;AAIT;AAEA,OAAO,SAASK,cAAc,EAAEL,QAAQ,EAA2B;IACjE,qBACE,KAACF;QAAQG,MAAM;kBACb,cAAA,KAACC;YACCC,MAAK;YACLC,GAAE;sBAEDJ;;;AAIT;AAEA,OAAO,SAASM,cAAc,EAAEN,QAAQ,EAA2B;IACjE,qBACE,KAACF;QAAQG,MAAM;kBACb,cAAA,KAACC;YACCC,MAAK;YACLC,GAAE;sBAEDJ;;;AAIT;AAEA,OAAO,SAASO,cAAc,EAAEP,QAAQ,EAA2B;IACjE,qBACE,KAACF;QAAQG,MAAM;kBACb,cAAA,KAACC;YACCC,MAAK;YACLC,GAAE;sBAEDJ;;;AAIT"}

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

@@ -2,7 +2,7 @@ import type * as React from 'react';
 import type { HasDataAttribute, HasRootRef, HTMLAttributesWithRootRef } from '../../types';
 export interface SplitLayoutProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     /**
-     * @deprecated Since 7.9.0. Будет удалeно в **VKUI v9**.
+     * @deprecated Since 7.9.0. Будет удалено в **VKUI v9**.
      * Вместо этого используйте `slotProps={ content: { getRootRef: ... } }`.
      */
     getRef?: React.Ref<HTMLDivElement> | undefined;
@@ -18,7 +18,7 @@ export interface SplitLayoutProps extends HTMLAttributesWithRootRef<HTMLDivEleme
     /**
      * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.
      *
-     * @deprecated Since 7.0.0. Будет удалeно в **VKUI v9**.
+     * @deprecated Since 7.0.0. Будет удалено в **VKUI v9**.
      * Начиная с **VKUI v7** компоненты можно располагать в любом
      * месте приложения в пределах `AppRoot`.
      */
@@ -26,7 +26,7 @@ export interface SplitLayoutProps extends HTMLAttributesWithRootRef<HTMLDivEleme
     /**
      * Свойство для отрисовки `ModalRoot`.
      *
-     * @deprecated Since 7.0.0. Будет удалeно в **VKUI v9**.
+     * @deprecated Since 7.0.0. Будет удалено в **VKUI v9**.
      * Начиная с **VKUI v7**  `ModalRoot` можно располагать в любом
      * месте приложения в пределах `AppRoot`.
      */

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SplitLayout/SplitLayout.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useMergeProps } from '../../hooks/useMergeProps';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { HasDataAttribute, HasRootRef, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './SplitLayout.module.css';\n\nconst warn = warnOnce('SplitLayout');\n\nexport interface SplitLayoutProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * @deprecated Since 7.9.0. Будет удалeно в **VKUI v9**.\n   * Вместо этого используйте `slotProps={ content: { getRootRef: ... } }`.\n   */\n  getRef?: React.Ref<HTMLDivElement> | undefined;\n  /**\n   * Свойства, которые можно прокинуть внутрь компонента:\n   * - `root`: свойства для прокидывания в корень компонента;\n   * - `content`: свойства для прокидывания в контент;.\n   */\n  slotProps?:\n    | {\n        root?:\n          | (React.HTMLAttributes<HTMLDivElement> & HasRootRef<HTMLDivElement> & HasDataAttribute)\n          | undefined;\n        content?:\n          | (React.HTMLAttributes<HTMLDivElement> & HasRootRef<HTMLDivElement> & HasDataAttribute)\n          | undefined;\n      }\n    | undefined;\n  /**\n   * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.\n   *\n   * @deprecated Since 7.0.0. Будет удалeно в **VKUI v9**.\n   * Начиная с **VKUI v7** компоненты можно располагать в любом\n   * месте приложения в пределах `AppRoot`.\n   */\n  popout?: React.ReactNode | undefined;\n  /**\n   * Свойство для отрисовки `ModalRoot`.\n   *\n   * @deprecated Since 7.0.0. Будет удалeно в **VKUI v9**.\n   * Начиная с **VKUI v7**  `ModalRoot` можно располагать в любом\n   * месте приложения в пределах `AppRoot`.\n   */\n  modal?: React.ReactNode | undefined;\n  /**\n   * Компонент для отрисовки заголовка.\n   */\n  header?: React.ReactNode | undefined;\n  /**\n   * Центрирует контент.\n   */\n  center?: boolean | undefined;\n}\n\n/**\n * @see https://vkui.io/components/split-layout\n */\nexport const SplitLayout = ({\n  popout,\n  modal,\n  header,\n  center,\n  getRef,\n  children,\n\n  slotProps,\n  ...restProps\n}: SplitLayoutProps): React.ReactNode => {\n  /* istanbul ignore if: не проверяем в тестах */\n  if (process.env.NODE_ENV === 'development') {\n    if (getRef) {\n      warn(\n        'Свойство `getRef` устаревшее, используйте `slotProps={ content: { getRootRef: ... } }`',\n      );\n    }\n    if (popout) {\n      warn(\n        'Свойство `popout` устаревшее. Передаваемый элемент можно рендерить в любом месте приложения.',\n      );\n    }\n    if (modal) {\n      warn(\n        'Свойство `modal` устаревшее. Передаваемый элемент можно рендерить в любом месте приложения.',\n      );\n    }\n  }\n\n  const rootRest = useMergeProps(restProps, slotProps?.root);\n  const contentRest = useMergeProps({ getRootRef: getRef }, slotProps?.content);\n\n  const platform = usePlatform();\n\n  return (\n    <RootComponent\n      baseClassName={classNames(styles.host, platform === 'ios' && styles.ios)}\n      {...rootRest}\n    >\n      {header}\n      <RootComponent\n        baseClassName={classNames(\n          styles.inner,\n          !!header && styles.innerHeader,\n          center && styles.innerCenter,\n        )}\n        {...contentRest}\n      >\n        {children}\n        {modal}\n        {popout}\n      </RootComponent>\n    </RootComponent>\n  );\n};\n"],"names":["classNames","useMergeProps","usePlatform","warnOnce","RootComponent","warn","SplitLayout","popout","modal","header","center","getRef","children","slotProps","restProps","process","env","NODE_ENV","rootRest","root","contentRest","getRootRef","content","platform","baseClassName"],"mappings":"AAAA;;AAGA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,QAAQ,QAAQ,wBAAqB;AAE9C,SAASC,aAAa,QAAQ,oCAAiC;AAG/D,MAAMC,OAAOF,SAAS;AAiDtB;;CAEC,GACD,OAAO,MAAMG,cAAc,CAAC,EAC1BC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,MAAM,EACNC,MAAM,EACNC,QAAQ,EAERC,SAAS,EACT,GAAGC,WACc;IACjB,6CAA6C,GAC7C,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAIN,QAAQ;YACVN,KACE;QAEJ;QACA,IAAIE,QAAQ;YACVF,KACE;QAEJ;QACA,IAAIG,OAAO;YACTH,KACE;QAEJ;IACF;IAEA,MAAMa,WAAWjB,cAAca,WAAWD,WAAWM;IACrD,MAAMC,cAAcnB,cAAc;QAAEoB,YAAYV;IAAO,GAAGE,WAAWS;IAErE,MAAMC,WAAWrB;IAEjB,qBACE,MAACE;QACCoB,eAAexB,oCAAwBuB,aAAa;QACnD,GAAGL,QAAQ;;YAEXT;0BACD,MAACL;gBACCoB,eAAexB,qCAEb,CAAC,CAACS,0CACFC;gBAED,GAAGU,WAAW;;oBAEdR;oBACAJ;oBACAD;;;;;AAIT,EAAE"}
+{"version":3,"sources":["../../../src/components/SplitLayout/SplitLayout.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useMergeProps } from '../../hooks/useMergeProps';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { HasDataAttribute, HasRootRef, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './SplitLayout.module.css';\n\nconst warn = warnOnce('SplitLayout');\n\nexport interface SplitLayoutProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * @deprecated Since 7.9.0. Будет удалено в **VKUI v9**.\n   * Вместо этого используйте `slotProps={ content: { getRootRef: ... } }`.\n   */\n  getRef?: React.Ref<HTMLDivElement> | undefined;\n  /**\n   * Свойства, которые можно прокинуть внутрь компонента:\n   * - `root`: свойства для прокидывания в корень компонента;\n   * - `content`: свойства для прокидывания в контент;.\n   */\n  slotProps?:\n    | {\n        root?:\n          | (React.HTMLAttributes<HTMLDivElement> & HasRootRef<HTMLDivElement> & HasDataAttribute)\n          | undefined;\n        content?:\n          | (React.HTMLAttributes<HTMLDivElement> & HasRootRef<HTMLDivElement> & HasDataAttribute)\n          | undefined;\n      }\n    | undefined;\n  /**\n   * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.\n   *\n   * @deprecated Since 7.0.0. Будет удалено в **VKUI v9**.\n   * Начиная с **VKUI v7** компоненты можно располагать в любом\n   * месте приложения в пределах `AppRoot`.\n   */\n  popout?: React.ReactNode | undefined;\n  /**\n   * Свойство для отрисовки `ModalRoot`.\n   *\n   * @deprecated Since 7.0.0. Будет удалено в **VKUI v9**.\n   * Начиная с **VKUI v7**  `ModalRoot` можно располагать в любом\n   * месте приложения в пределах `AppRoot`.\n   */\n  modal?: React.ReactNode | undefined;\n  /**\n   * Компонент для отрисовки заголовка.\n   */\n  header?: React.ReactNode | undefined;\n  /**\n   * Центрирует контент.\n   */\n  center?: boolean | undefined;\n}\n\n/**\n * @see https://vkui.io/components/split-layout\n */\nexport const SplitLayout = ({\n  popout,\n  modal,\n  header,\n  center,\n  getRef,\n  children,\n\n  slotProps,\n  ...restProps\n}: SplitLayoutProps): React.ReactNode => {\n  /* istanbul ignore if: не проверяем в тестах */\n  if (process.env.NODE_ENV === 'development') {\n    if (getRef) {\n      warn(\n        'Свойство `getRef` устаревшее, используйте `slotProps={ content: { getRootRef: ... } }`',\n      );\n    }\n    if (popout) {\n      warn(\n        'Свойство `popout` устаревшее. Передаваемый элемент можно рендерить в любом месте приложения.',\n      );\n    }\n    if (modal) {\n      warn(\n        'Свойство `modal` устаревшее. Передаваемый элемент можно рендерить в любом месте приложения.',\n      );\n    }\n  }\n\n  const rootRest = useMergeProps(restProps, slotProps?.root);\n  const contentRest = useMergeProps({ getRootRef: getRef }, slotProps?.content);\n\n  const platform = usePlatform();\n\n  return (\n    <RootComponent\n      baseClassName={classNames(styles.host, platform === 'ios' && styles.ios)}\n      {...rootRest}\n    >\n      {header}\n      <RootComponent\n        baseClassName={classNames(\n          styles.inner,\n          !!header && styles.innerHeader,\n          center && styles.innerCenter,\n        )}\n        {...contentRest}\n      >\n        {children}\n        {modal}\n        {popout}\n      </RootComponent>\n    </RootComponent>\n  );\n};\n"],"names":["classNames","useMergeProps","usePlatform","warnOnce","RootComponent","warn","SplitLayout","popout","modal","header","center","getRef","children","slotProps","restProps","process","env","NODE_ENV","rootRest","root","contentRest","getRootRef","content","platform","baseClassName"],"mappings":"AAAA;;AAGA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,QAAQ,QAAQ,wBAAqB;AAE9C,SAASC,aAAa,QAAQ,oCAAiC;AAG/D,MAAMC,OAAOF,SAAS;AAiDtB;;CAEC,GACD,OAAO,MAAMG,cAAc,CAAC,EAC1BC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,MAAM,EACNC,MAAM,EACNC,QAAQ,EAERC,SAAS,EACT,GAAGC,WACc;IACjB,6CAA6C,GAC7C,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAIN,QAAQ;YACVN,KACE;QAEJ;QACA,IAAIE,QAAQ;YACVF,KACE;QAEJ;QACA,IAAIG,OAAO;YACTH,KACE;QAEJ;IACF;IAEA,MAAMa,WAAWjB,cAAca,WAAWD,WAAWM;IACrD,MAAMC,cAAcnB,cAAc;QAAEoB,YAAYV;IAAO,GAAGE,WAAWS;IAErE,MAAMC,WAAWrB;IAEjB,qBACE,MAACE;QACCoB,eAAexB,oCAAwBuB,aAAa;QACnD,GAAGL,QAAQ;;YAEXT;0BACD,MAACL;gBACCoB,eAAexB,qCAEb,CAAC,CAACS,0CACFC;gBAED,GAAGU,WAAW;;oBAEdR;oBACAJ;oBACAD;;;;;AAIT,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"file":"TabsItem.d.ts","sourceRoot":"","sources":["../../../src/components/TabsItem/TabsItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,wBAAwB,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAGvF,OAAO,EAAY,KAAK,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAsBxE,MAAM,WAAW,aACf,SAAQ,yBAAyB,CAAC,WAAW,CAAC,EAC5C,wBAAwB,EACxB,IAAI,CACF,iBAAiB,EACf,WAAW,GACX,YAAY,GACZ,WAAW,GACX,SAAS,GACT,WAAW,GACX,WAAW,GACX,UAAU,GACV,kBAAkB,CACrB;IACH;;;;;OAKG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACrC;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,MAAM,GAAG,SAAS,CAAC;IACjD;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACpC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAChC;AAID;;GAEG;AACH,eAAO,MAAM,QAAQ,GAAI,sLAgBtB,aAAa,KAAG,KAAK,CAAC,SA4IxB,CAAC"}
+{"version":3,"file":"TabsItem.d.ts","sourceRoot":"","sources":["../../../src/components/TabsItem/TabsItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,wBAAwB,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAGvF,OAAO,EAAY,KAAK,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAsBxE,MAAM,WAAW,aACf,SAAQ,yBAAyB,CAAC,WAAW,CAAC,EAC5C,wBAAwB,EACxB,IAAI,CACF,iBAAiB,EACf,WAAW,GACX,YAAY,GACZ,WAAW,GACX,SAAS,GACT,WAAW,GACX,WAAW,GACX,UAAU,GACV,kBAAkB,CACrB;IACH;;;;;OAKG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACrC;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,MAAM,GAAG,SAAS,CAAC;IACjD;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACpC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAChC;AAID;;GAEG;AACH,eAAO,MAAM,QAAQ,GAAI,sLAgBtB,aAAa,KAAG,KAAK,CAAC,SA4IxB,CAAC"}

package/dist/components/TabsItem/TabsItem.js

@@ -4,7 +4,6 @@ import * as React from "react";
 import { classNames, hasReactNode } from "@vkontakte/vkjs";
 import { useAdaptivity } from "../../hooks/useAdaptivity.js";
 import { useExternRef } from "../../hooks/useExternRef.js";
-import { useDOM } from "../../lib/dom.js";
 import { warnOnce } from "../../lib/warnOnce.js";
 import { TabsControllerContext } from "../Tabs/TabsControllerContext.js";
 import { TabsModeContext } from "../Tabs/TabsModeContext.js";
@@ -69,16 +68,15 @@ const warn = warnOnce('TabsItem');
     }
     const rootRef = useExternRef(getRootRef);
     const prevSelectedRef = React.useRef(undefined);
-    const { document } = useDOM();
     React.useEffect(function scrollToSelectedItem() {
         const isInitialRender = prevSelectedRef.current === undefined;
         const shouldScrollToSelected = withScrollToSelectedTab && !isInitialRender && prevSelectedRef.current !== selected && selected;
         prevSelectedRef.current = selected;
-        if (!shouldScrollToSelected || !rootRef.current || !document) {
+        if (!shouldScrollToSelected || !rootRef.current) {
             return;
         }
         const tabDOMRect = rootRef.current.getBoundingClientRect();
-        const isTabVerticallyOutsideOfViewport = tabDOMRect.top < 0 || tabDOMRect.bottom > document.documentElement.clientHeight;
+        const isTabVerticallyOutsideOfViewport = tabDOMRect.top < 0 || tabDOMRect.bottom > rootRef.current.ownerDocument.documentElement.clientHeight;
         /* проверяем, возможен ли вертикальный скролл, а он возможен для scrollIntoView если
        * элемент вертикально вне зоны видимости */ if (isTabVerticallyOutsideOfViewport) {
             return;
@@ -95,7 +93,6 @@ const warn = warnOnce('TabsItem');
          **/ }
     }, [
         rootRef,
-        document,
         scrollBehaviorToSelectedTab,
         withScrollToSelectedTab,
         selected

package/dist/components/TabsItem/TabsItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/TabsItem/TabsItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useDOM } from '../../lib/dom';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { AnchorHTMLAttributesOnly, HTMLAttributesWithRootRef } from '../../types';\nimport { TabsControllerContext } from '../Tabs/TabsControllerContext';\nimport { TabsModeContext } from '../Tabs/TabsModeContext';\nimport { Tappable, type TappableOmitProps } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './TabsItem.module.css';\n\nconst densityClassNames = {\n  none: styles.densityNone,\n  compact: styles.densityCompact,\n};\n\nconst stylesMode = {\n  default: styles.modeDefault,\n  accent: styles.modeAccent,\n  secondary: styles.modeSecondary,\n};\n\nconst fillModeClassNames = {\n  stretched: styles.stretched,\n  shrinked: styles.shrinked,\n};\n\nexport interface TabsItemProps\n  extends HTMLAttributesWithRootRef<HTMLElement>,\n    AnchorHTMLAttributesOnly,\n    Pick<\n      TappableOmitProps,\n      | 'Component'\n      | 'activeMode'\n      | 'hoverMode'\n      | 'hovered'\n      | 'activated'\n      | 'hasActive'\n      | 'hasHover'\n      | 'focusVisibleMode'\n    > {\n  /**\n   * Добавляет иконку слева.\n   *\n   * - Для `mode=\"default\"` используйте иконки размером 24.\n   * - Для всех остальных `mode` используйте иконки размером 20.\n   */\n  before?: React.ReactNode | undefined;\n  /**\n   * Добавляет элемент слева от `after`.\n   *\n   * - `React.ReactElement` – либо [`Badge`](https://vkui.io/components/badge) с параметром `mode=\"prominent\"`.\n   *   Либо [`Counter`](https://vkui.io/components/counter) с параметрами `mode=\"prominent\" size=\"s\"`.\n   * - `number` – для показа текстового блока с переданным числом.\n   */\n  status?: React.ReactElement | number | undefined;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Например, `<Icon16Dropdown />`.\n   */\n  after?: React.ReactNode | undefined;\n  /**\n   * Флаг для отображения выбранного состояния.\n   */\n  selected?: boolean | undefined;\n  /**\n   * Блокировка взаимодействия с компонентом.\n   */\n  disabled?: boolean | undefined;\n}\n\nconst warn = warnOnce('TabsItem');\n\n/**\n * @see https://vkui.io/components/tabs#tabs-item\n */\nexport const TabsItem = ({\n  before,\n  children,\n  status,\n  after,\n  selected: selectedProp = false,\n  role = 'tab',\n  tabIndex: tabIndexProp,\n  getRootRef,\n  hoverMode = styles.hover,\n  activeMode = '',\n  hasActive = false,\n  focusVisibleMode = 'inside',\n  id,\n  onClick,\n  ...restProps\n}: TabsItemProps): React.ReactNode => {\n  const { density = 'none' } = useAdaptivity();\n  const { mode, withGaps, layoutFillMode, scrollBehaviorToSelectedTab, withScrollToSelectedTab } =\n    React.useContext(TabsModeContext);\n  const controller = React.useContext(TabsControllerContext);\n  let statusComponent = null;\n\n  const isTabFlow = role === 'tab';\n\n  const selected = selectedProp || (!!id && controller?.selectedTab === id);\n\n  if (hasReactNode(status)) {\n    statusComponent =\n      typeof status === 'number' ? (\n        <Subhead\n          Component=\"span\"\n          className={classNames(styles.status, styles.statusCount)}\n          weight=\"2\"\n        >\n          <VisuallyHidden>&nbsp;</VisuallyHidden>\n          {status}\n        </Subhead>\n      ) : (\n        <span className={styles.status}>\n          <VisuallyHidden>&nbsp;</VisuallyHidden>\n          {status}\n        </span>\n      );\n  }\n\n  if (process.env.NODE_ENV === 'development' && isTabFlow) {\n    if (!restProps['aria-controls']) {\n      warn(`Передайте в \"aria-controls\" id контролируемого блока`, 'warn');\n    } else if (!id) {\n      warn(\n        `Передайте \"id\" компоненту для использования в \"aria-labelledby\" контролируемого блока`,\n        'warn',\n      );\n    }\n  }\n\n  let tabIndex = tabIndexProp;\n  if (isTabFlow && tabIndex === undefined) {\n    tabIndex = selected ? 0 : -1;\n  }\n\n  const rootRef = useExternRef(getRootRef);\n\n  const prevSelectedRef = React.useRef<boolean | undefined>(undefined);\n\n  const { document } = useDOM();\n  React.useEffect(\n    function scrollToSelectedItem() {\n      const isInitialRender = prevSelectedRef.current === undefined;\n      const shouldScrollToSelected =\n        withScrollToSelectedTab &&\n        !isInitialRender &&\n        prevSelectedRef.current !== selected &&\n        selected;\n\n      prevSelectedRef.current = selected;\n\n      if (!shouldScrollToSelected || !rootRef.current || !document) {\n        return;\n      }\n\n      const tabDOMRect = rootRef.current.getBoundingClientRect();\n      const isTabVerticallyOutsideOfViewport =\n        tabDOMRect.top < 0 || tabDOMRect.bottom > document.documentElement.clientHeight;\n\n      /* проверяем, возможен ли вертикальный скролл, а он возможен для scrollIntoView если\n       * элемент вертикально вне зоны видимости */\n      if (isTabVerticallyOutsideOfViewport) {\n        return;\n      }\n\n      /* Не все браузеры поддерживают используемые нами опции. */\n      try {\n        rootRef.current.scrollIntoView({\n          inline: scrollBehaviorToSelectedTab,\n          block: 'nearest',\n          behavior: 'smooth',\n        });\n      } catch {\n        /* Вызывать scrollIntoView с булевым аргументом не следует, потому что это повлечёт\n         * вертикальный скролл.\n         **/\n      }\n    },\n    [rootRef, document, scrollBehaviorToSelectedTab, withScrollToSelectedTab, selected],\n  );\n\n  const _onClick: React.MouseEventHandler<HTMLElement> = React.useCallback(\n    (e) => {\n      onClick?.(e);\n      if (id) {\n        controller?.onChange(id);\n      }\n    },\n    [id, onClick, controller],\n  );\n\n  return (\n    <Tappable\n      getRootRef={rootRef}\n      hoverMode={hoverMode}\n      activeMode={activeMode}\n      hasActive={hasActive}\n      focusVisibleMode={focusVisibleMode}\n      role={role}\n      aria-selected={selected}\n      tabIndex={tabIndex}\n      baseClassName={classNames(\n        styles.host,\n        mode && stylesMode[mode],\n        selected && styles.selected,\n        density !== 'regular' && densityClassNames[density],\n        withGaps && styles.withGaps,\n        layoutFillMode !== 'auto' && fillModeClassNames[layoutFillMode],\n      )}\n      onClick={controller ? _onClick : onClick}\n      id={id}\n      {...restProps}\n    >\n      {before && <div className={styles.before}>{before}</div>}\n      <Headline\n        Component=\"span\"\n        className={styles.label}\n        level={mode === 'default' ? '1' : '2'}\n        weight=\"2\"\n      >\n        {children}\n      </Headline>\n      {statusComponent}\n      {after && <div className={styles.after}>{after}</div>}\n      {mode === 'default' && (\n        <div className={styles.underline} aria-hidden data-selected={selected} />\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","useExternRef","useDOM","warnOnce","TabsControllerContext","TabsModeContext","Tappable","Headline","Subhead","VisuallyHidden","densityClassNames","none","compact","stylesMode","default","accent","secondary","fillModeClassNames","stretched","shrinked","warn","TabsItem","before","children","status","after","selected","selectedProp","role","tabIndex","tabIndexProp","getRootRef","hoverMode","activeMode","hasActive","focusVisibleMode","id","onClick","restProps","density","mode","withGaps","layoutFillMode","scrollBehaviorToSelectedTab","withScrollToSelectedTab","useContext","controller","statusComponent","isTabFlow","selectedTab","Component","className","weight","span","process","env","NODE_ENV","undefined","rootRef","prevSelectedRef","useRef","document","useEffect","scrollToSelectedItem","isInitialRender","current","shouldScrollToSelected","tabDOMRect","getBoundingClientRect","isTabVerticallyOutsideOfViewport","top","bottom","documentElement","clientHeight","scrollIntoView","inline","block","behavior","_onClick","useCallback","e","onChange","aria-selected","baseClassName","div","level","aria-hidden","data-selected"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/TabsItem/TabsItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { AnchorHTMLAttributesOnly, HTMLAttributesWithRootRef } from '../../types';\nimport { TabsControllerContext } from '../Tabs/TabsControllerContext';\nimport { TabsModeContext } from '../Tabs/TabsModeContext';\nimport { Tappable, type TappableOmitProps } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './TabsItem.module.css';\n\nconst densityClassNames = {\n  none: styles.densityNone,\n  compact: styles.densityCompact,\n};\n\nconst stylesMode = {\n  default: styles.modeDefault,\n  accent: styles.modeAccent,\n  secondary: styles.modeSecondary,\n};\n\nconst fillModeClassNames = {\n  stretched: styles.stretched,\n  shrinked: styles.shrinked,\n};\n\nexport interface TabsItemProps\n  extends HTMLAttributesWithRootRef<HTMLElement>,\n    AnchorHTMLAttributesOnly,\n    Pick<\n      TappableOmitProps,\n      | 'Component'\n      | 'activeMode'\n      | 'hoverMode'\n      | 'hovered'\n      | 'activated'\n      | 'hasActive'\n      | 'hasHover'\n      | 'focusVisibleMode'\n    > {\n  /**\n   * Добавляет иконку слева.\n   *\n   * - Для `mode=\"default\"` используйте иконки размером 24.\n   * - Для всех остальных `mode` используйте иконки размером 20.\n   */\n  before?: React.ReactNode | undefined;\n  /**\n   * Добавляет элемент слева от `after`.\n   *\n   * - `React.ReactElement` – либо [`Badge`](https://vkui.io/components/badge) с параметром `mode=\"prominent\"`.\n   *   Либо [`Counter`](https://vkui.io/components/counter) с параметрами `mode=\"prominent\" size=\"s\"`.\n   * - `number` – для показа текстового блока с переданным числом.\n   */\n  status?: React.ReactElement | number | undefined;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Например, `<Icon16Dropdown />`.\n   */\n  after?: React.ReactNode | undefined;\n  /**\n   * Флаг для отображения выбранного состояния.\n   */\n  selected?: boolean | undefined;\n  /**\n   * Блокировка взаимодействия с компонентом.\n   */\n  disabled?: boolean | undefined;\n}\n\nconst warn = warnOnce('TabsItem');\n\n/**\n * @see https://vkui.io/components/tabs#tabs-item\n */\nexport const TabsItem = ({\n  before,\n  children,\n  status,\n  after,\n  selected: selectedProp = false,\n  role = 'tab',\n  tabIndex: tabIndexProp,\n  getRootRef,\n  hoverMode = styles.hover,\n  activeMode = '',\n  hasActive = false,\n  focusVisibleMode = 'inside',\n  id,\n  onClick,\n  ...restProps\n}: TabsItemProps): React.ReactNode => {\n  const { density = 'none' } = useAdaptivity();\n  const { mode, withGaps, layoutFillMode, scrollBehaviorToSelectedTab, withScrollToSelectedTab } =\n    React.useContext(TabsModeContext);\n  const controller = React.useContext(TabsControllerContext);\n  let statusComponent = null;\n\n  const isTabFlow = role === 'tab';\n\n  const selected = selectedProp || (!!id && controller?.selectedTab === id);\n\n  if (hasReactNode(status)) {\n    statusComponent =\n      typeof status === 'number' ? (\n        <Subhead\n          Component=\"span\"\n          className={classNames(styles.status, styles.statusCount)}\n          weight=\"2\"\n        >\n          <VisuallyHidden>&nbsp;</VisuallyHidden>\n          {status}\n        </Subhead>\n      ) : (\n        <span className={styles.status}>\n          <VisuallyHidden>&nbsp;</VisuallyHidden>\n          {status}\n        </span>\n      );\n  }\n\n  if (process.env.NODE_ENV === 'development' && isTabFlow) {\n    if (!restProps['aria-controls']) {\n      warn(`Передайте в \"aria-controls\" id контролируемого блока`, 'warn');\n    } else if (!id) {\n      warn(\n        `Передайте \"id\" компоненту для использования в \"aria-labelledby\" контролируемого блока`,\n        'warn',\n      );\n    }\n  }\n\n  let tabIndex = tabIndexProp;\n  if (isTabFlow && tabIndex === undefined) {\n    tabIndex = selected ? 0 : -1;\n  }\n\n  const rootRef = useExternRef(getRootRef);\n\n  const prevSelectedRef = React.useRef<boolean | undefined>(undefined);\n\n  React.useEffect(\n    function scrollToSelectedItem() {\n      const isInitialRender = prevSelectedRef.current === undefined;\n      const shouldScrollToSelected =\n        withScrollToSelectedTab &&\n        !isInitialRender &&\n        prevSelectedRef.current !== selected &&\n        selected;\n\n      prevSelectedRef.current = selected;\n\n      if (!shouldScrollToSelected || !rootRef.current) {\n        return;\n      }\n\n      const tabDOMRect = rootRef.current.getBoundingClientRect();\n      const isTabVerticallyOutsideOfViewport =\n        tabDOMRect.top < 0 ||\n        tabDOMRect.bottom > rootRef.current.ownerDocument.documentElement.clientHeight;\n\n      /* проверяем, возможен ли вертикальный скролл, а он возможен для scrollIntoView если\n       * элемент вертикально вне зоны видимости */\n      if (isTabVerticallyOutsideOfViewport) {\n        return;\n      }\n\n      /* Не все браузеры поддерживают используемые нами опции. */\n      try {\n        rootRef.current.scrollIntoView({\n          inline: scrollBehaviorToSelectedTab,\n          block: 'nearest',\n          behavior: 'smooth',\n        });\n      } catch {\n        /* Вызывать scrollIntoView с булевым аргументом не следует, потому что это повлечёт\n         * вертикальный скролл.\n         **/\n      }\n    },\n    [rootRef, scrollBehaviorToSelectedTab, withScrollToSelectedTab, selected],\n  );\n\n  const _onClick: React.MouseEventHandler<HTMLElement> = React.useCallback(\n    (e) => {\n      onClick?.(e);\n      if (id) {\n        controller?.onChange(id);\n      }\n    },\n    [id, onClick, controller],\n  );\n\n  return (\n    <Tappable\n      getRootRef={rootRef}\n      hoverMode={hoverMode}\n      activeMode={activeMode}\n      hasActive={hasActive}\n      focusVisibleMode={focusVisibleMode}\n      role={role}\n      aria-selected={selected}\n      tabIndex={tabIndex}\n      baseClassName={classNames(\n        styles.host,\n        mode && stylesMode[mode],\n        selected && styles.selected,\n        density !== 'regular' && densityClassNames[density],\n        withGaps && styles.withGaps,\n        layoutFillMode !== 'auto' && fillModeClassNames[layoutFillMode],\n      )}\n      onClick={controller ? _onClick : onClick}\n      id={id}\n      {...restProps}\n    >\n      {before && <div className={styles.before}>{before}</div>}\n      <Headline\n        Component=\"span\"\n        className={styles.label}\n        level={mode === 'default' ? '1' : '2'}\n        weight=\"2\"\n      >\n        {children}\n      </Headline>\n      {statusComponent}\n      {after && <div className={styles.after}>{after}</div>}\n      {mode === 'default' && (\n        <div className={styles.underline} aria-hidden data-selected={selected} />\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","useExternRef","warnOnce","TabsControllerContext","TabsModeContext","Tappable","Headline","Subhead","VisuallyHidden","densityClassNames","none","compact","stylesMode","default","accent","secondary","fillModeClassNames","stretched","shrinked","warn","TabsItem","before","children","status","after","selected","selectedProp","role","tabIndex","tabIndexProp","getRootRef","hoverMode","activeMode","hasActive","focusVisibleMode","id","onClick","restProps","density","mode","withGaps","layoutFillMode","scrollBehaviorToSelectedTab","withScrollToSelectedTab","useContext","controller","statusComponent","isTabFlow","selectedTab","Component","className","weight","span","process","env","NODE_ENV","undefined","rootRef","prevSelectedRef","useRef","useEffect","scrollToSelectedItem","isInitialRender","current","shouldScrollToSelected","tabDOMRect","getBoundingClientRect","isTabVerticallyOutsideOfViewport","top","bottom","ownerDocument","documentElement","clientHeight","scrollIntoView","inline","block","behavior","_onClick","useCallback","e","onChange","aria-selected","baseClassName","div","level","aria-hidden","data-selected"],"mappings":"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"}

package/dist/components/Tappable/Tappable.d.ts

@@ -7,13 +7,13 @@ export interface TappableProps extends ClickableProps, StateProps {
      */
     borderRadiusMode?: 'auto' | 'inherit' | undefined;
     /**
-     * @deprecated Since 7.3.0. Будет удалeно в **VKUI v9**.
+     * @deprecated Since 7.3.0. Будет удалено в **VKUI v9**.
      *
      * Используйте свойство `activeMode`.
      */
     activeClassName?: string | undefined;
     /**
-     * @deprecated Since 7.3.0. Будет удалeно в **VKUI v9**.
+     * @deprecated Since 7.3.0. Будет удалено в **VKUI v9**.
      *
      * Используйте свойство `hoverMode`.
      */

package/dist/components/Tappable/Tappable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Tappable/Tappable.tsx"],"sourcesContent":["'use client';\n\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { type SizeTypeValues, ViewWidth, type ViewWidthType } from '../../lib/adaptivity';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { checkClickable, Clickable, type ClickableProps } from '../Clickable/Clickable';\nimport { Ripple, useMaybeNeedRipple, useRipple } from './Ripple';\nimport { activeClass, DEFAULT_STATE_MODE, hoverClass, type StateProps } from './state';\nimport styles from './Tappable.module.css';\n\nfunction getViewWidthClassName(\n  viewWidth: ViewWidthType | 'none',\n  legacySizeX: SizeTypeValues | undefined,\n) {\n  // TODO [>=10]: #9015 Удалить это условие\n  if (legacySizeX !== undefined && legacySizeX === 'compact') {\n    return styles.withBorder;\n  }\n  if (viewWidth === 'none') {\n    return styles.withBorderOnSmallTabletMinus;\n  }\n  if (viewWidth < ViewWidth.SMALL_TABLET) {\n    return styles.withBorder;\n  }\n  return;\n}\n\nfunction hasPointerClassName(hasPointer: boolean | undefined) {\n  switch (hasPointer) {\n    case undefined:\n      return styles.hasPointerNone;\n    case false:\n      return styles.hasPointerFalse;\n  }\n\n  return undefined;\n}\n\nexport interface TappableProps extends ClickableProps, StateProps {\n  /**\n   * Задает border-radius элементу\n   * В режиме `auto` на маленьких экранах `border-radius: 0`, иначе определяется токеном `--vkui--size_border_radius--regular`.\n   */\n  borderRadiusMode?: 'auto' | 'inherit' | undefined;\n  /**\n   * @deprecated Since 7.3.0. Будет удалeно в **VKUI v9**.\n   *\n   * Используйте свойство `activeMode`.\n   */\n  activeClassName?: string | undefined; // TODO [>=9]: удалить неиспользуемое свойство.\n  /**\n   * @deprecated Since 7.3.0. Будет удалeно в **VKUI v9**.\n   *\n   * Используйте свойство `hoverMode`.\n   */\n  hoverClassName?: string | undefined; // TODO [>=9]: удалить неиспользуемое свойство.\n}\n\n/**\n * @deprecated Не наследуйтесь от этого типа и от TappableProps.\n *\n * Компонентам не нужны лишние свойства Tappable компонента.\n */\nexport type TappableOmitProps = Omit<\n  TappableProps,\n  'DefaultComponent' | 'baseClassName' | 'baseStyle'\n>;\n\nexport const Tappable = ({\n  baseClassName,\n  borderRadiusMode = 'auto',\n  children,\n  hoverMode = DEFAULT_STATE_MODE,\n  activeMode = DEFAULT_STATE_MODE,\n  onPointerDown,\n  onPointerCancel,\n  ...restProps\n}: TappableProps): React.ReactNode => {\n  const isClickable = checkClickable(restProps);\n\n  const { sizeX: legacySizeX, viewWidth = 'none', hasPointer } = useAdaptivity();\n\n  const needRipple = useMaybeNeedRipple(activeMode, hasPointer);\n  const { clicks, ...rippleEvents } = useRipple(needRipple, hasPointer);\n\n  const handlers = mergeCalls(rippleEvents, {\n    onPointerDown,\n    onPointerCancel,\n  });\n\n  const typeProps = restProps.Component === 'button' ? { type: 'button' } : {};\n\n  return (\n    <Clickable\n      baseClassName={classNames(\n        'vkuiInternalTappable',\n        baseClassName,\n        styles.host,\n        getViewWidthClassName(viewWidth, legacySizeX),\n        borderRadiusMode === 'inherit' && styles.borderRadiusInherit,\n        hasPointerClassName(hasPointer),\n      )}\n      hoverClassName={hoverClass(hoverMode)}\n      activeClassName={activeClass(activeMode)}\n      {...typeProps}\n      {...handlers}\n      {...restProps}\n    >\n      {children}\n      {isClickable && (hoverMode === 'background' || activeMode === 'background') && (\n        <Ripple needRipple={needRipple} clicks={clicks} />\n      )}\n    </Clickable>\n  );\n};\n"],"names":["classNames","useAdaptivity","ViewWidth","mergeCalls","checkClickable","Clickable","Ripple","useMaybeNeedRipple","useRipple","activeClass","DEFAULT_STATE_MODE","hoverClass","getViewWidthClassName","viewWidth","legacySizeX","undefined","SMALL_TABLET","hasPointerClassName","hasPointer","Tappable","baseClassName","borderRadiusMode","children","hoverMode","activeMode","onPointerDown","onPointerCancel","restProps","isClickable","sizeX","needRipple","clicks","rippleEvents","handlers","typeProps","Component","type","hoverClassName","activeClassName"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAA8BC,SAAS,QAA4B,gCAAuB;AAC1F,SAASC,UAAU,QAAQ,0BAAuB;AAClD,SAASC,cAAc,EAAEC,SAAS,QAA6B,4BAAyB;AACxF,SAASC,MAAM,EAAEC,kBAAkB,EAAEC,SAAS,QAAQ,cAAW;AACjE,SAASC,WAAW,EAAEC,kBAAkB,EAAEC,UAAU,QAAyB,aAAU;AAGvF,SAASC,sBACPC,SAAiC,EACjCC,WAAuC;IAEvC,yCAAyC;IACzC,IAAIA,gBAAgBC,aAAaD,gBAAgB,WAAW;QAC1D;IACF;IACA,IAAID,cAAc,QAAQ;QACxB;IACF;IACA,IAAIA,YAAYX,UAAUc,YAAY,EAAE;QACtC;IACF;IACA;AACF;AAEA,SAASC,oBAAoBC,UAA+B;IAC1D,OAAQA;QACN,KAAKH;YACH;QACF,KAAK;YACH;IACJ;IAEA,OAAOA;AACT;AAgCA,OAAO,MAAMI,WAAW,CAAC,EACvBC,aAAa,EACbC,mBAAmB,MAAM,EACzBC,QAAQ,EACRC,YAAYb,kBAAkB,EAC9Bc,aAAad,kBAAkB,EAC/Be,aAAa,EACbC,eAAe,EACf,GAAGC,WACW;IACd,MAAMC,cAAcxB,eAAeuB;IAEnC,MAAM,EAAEE,OAAOf,WAAW,EAAED,YAAY,MAAM,EAAEK,UAAU,EAAE,GAAGjB;IAE/D,MAAM6B,aAAavB,mBAAmBiB,YAAYN;IAClD,MAAM,EAAEa,MAAM,EAAE,GAAGC,cAAc,GAAGxB,UAAUsB,YAAYZ;IAE1D,MAAMe,WAAW9B,WAAW6B,cAAc;QACxCP;QACAC;IACF;IAEA,MAAMQ,YAAYP,UAAUQ,SAAS,KAAK,WAAW;QAAEC,MAAM;IAAS,IAAI,CAAC;IAE3E,qBACE,MAAC/B;QACCe,eAAepB,WACb,wBACAoB,qCAEAR,sBAAsBC,WAAWC,cACjCO,qBAAqB,kDACrBJ,oBAAoBC;QAEtBmB,gBAAgB1B,WAAWY;QAC3Be,iBAAiB7B,YAAYe;QAC5B,GAAGU,SAAS;QACZ,GAAGD,QAAQ;QACX,GAAGN,SAAS;;YAEZL;YACAM,eAAgBL,CAAAA,cAAc,gBAAgBC,eAAe,YAAW,mBACvE,KAAClB;gBAAOwB,YAAYA;gBAAYC,QAAQA;;;;AAIhD,EAAE"}
+{"version":3,"sources":["../../../src/components/Tappable/Tappable.tsx"],"sourcesContent":["'use client';\n\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { type SizeTypeValues, ViewWidth, type ViewWidthType } from '../../lib/adaptivity';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { checkClickable, Clickable, type ClickableProps } from '../Clickable/Clickable';\nimport { Ripple, useMaybeNeedRipple, useRipple } from './Ripple';\nimport { activeClass, DEFAULT_STATE_MODE, hoverClass, type StateProps } from './state';\nimport styles from './Tappable.module.css';\n\nfunction getViewWidthClassName(\n  viewWidth: ViewWidthType | 'none',\n  legacySizeX: SizeTypeValues | undefined,\n) {\n  // TODO [>=10]: #9015 Удалить это условие\n  if (legacySizeX !== undefined && legacySizeX === 'compact') {\n    return styles.withBorder;\n  }\n  if (viewWidth === 'none') {\n    return styles.withBorderOnSmallTabletMinus;\n  }\n  if (viewWidth < ViewWidth.SMALL_TABLET) {\n    return styles.withBorder;\n  }\n  return;\n}\n\nfunction hasPointerClassName(hasPointer: boolean | undefined) {\n  switch (hasPointer) {\n    case undefined:\n      return styles.hasPointerNone;\n    case false:\n      return styles.hasPointerFalse;\n  }\n\n  return undefined;\n}\n\nexport interface TappableProps extends ClickableProps, StateProps {\n  /**\n   * Задает border-radius элементу\n   * В режиме `auto` на маленьких экранах `border-radius: 0`, иначе определяется токеном `--vkui--size_border_radius--regular`.\n   */\n  borderRadiusMode?: 'auto' | 'inherit' | undefined;\n  /**\n   * @deprecated Since 7.3.0. Будет удалено в **VKUI v9**.\n   *\n   * Используйте свойство `activeMode`.\n   */\n  activeClassName?: string | undefined; // TODO [>=9]: удалить неиспользуемое свойство.\n  /**\n   * @deprecated Since 7.3.0. Будет удалено в **VKUI v9**.\n   *\n   * Используйте свойство `hoverMode`.\n   */\n  hoverClassName?: string | undefined; // TODO [>=9]: удалить неиспользуемое свойство.\n}\n\n/**\n * @deprecated Не наследуйтесь от этого типа и от TappableProps.\n *\n * Компонентам не нужны лишние свойства Tappable компонента.\n */\nexport type TappableOmitProps = Omit<\n  TappableProps,\n  'DefaultComponent' | 'baseClassName' | 'baseStyle'\n>;\n\nexport const Tappable = ({\n  baseClassName,\n  borderRadiusMode = 'auto',\n  children,\n  hoverMode = DEFAULT_STATE_MODE,\n  activeMode = DEFAULT_STATE_MODE,\n  onPointerDown,\n  onPointerCancel,\n  ...restProps\n}: TappableProps): React.ReactNode => {\n  const isClickable = checkClickable(restProps);\n\n  const { sizeX: legacySizeX, viewWidth = 'none', hasPointer } = useAdaptivity();\n\n  const needRipple = useMaybeNeedRipple(activeMode, hasPointer);\n  const { clicks, ...rippleEvents } = useRipple(needRipple, hasPointer);\n\n  const handlers = mergeCalls(rippleEvents, {\n    onPointerDown,\n    onPointerCancel,\n  });\n\n  const typeProps = restProps.Component === 'button' ? { type: 'button' } : {};\n\n  return (\n    <Clickable\n      baseClassName={classNames(\n        'vkuiInternalTappable',\n        baseClassName,\n        styles.host,\n        getViewWidthClassName(viewWidth, legacySizeX),\n        borderRadiusMode === 'inherit' && styles.borderRadiusInherit,\n        hasPointerClassName(hasPointer),\n      )}\n      hoverClassName={hoverClass(hoverMode)}\n      activeClassName={activeClass(activeMode)}\n      {...typeProps}\n      {...handlers}\n      {...restProps}\n    >\n      {children}\n      {isClickable && (hoverMode === 'background' || activeMode === 'background') && (\n        <Ripple needRipple={needRipple} clicks={clicks} />\n      )}\n    </Clickable>\n  );\n};\n"],"names":["classNames","useAdaptivity","ViewWidth","mergeCalls","checkClickable","Clickable","Ripple","useMaybeNeedRipple","useRipple","activeClass","DEFAULT_STATE_MODE","hoverClass","getViewWidthClassName","viewWidth","legacySizeX","undefined","SMALL_TABLET","hasPointerClassName","hasPointer","Tappable","baseClassName","borderRadiusMode","children","hoverMode","activeMode","onPointerDown","onPointerCancel","restProps","isClickable","sizeX","needRipple","clicks","rippleEvents","handlers","typeProps","Component","type","hoverClassName","activeClassName"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAA8BC,SAAS,QAA4B,gCAAuB;AAC1F,SAASC,UAAU,QAAQ,0BAAuB;AAClD,SAASC,cAAc,EAAEC,SAAS,QAA6B,4BAAyB;AACxF,SAASC,MAAM,EAAEC,kBAAkB,EAAEC,SAAS,QAAQ,cAAW;AACjE,SAASC,WAAW,EAAEC,kBAAkB,EAAEC,UAAU,QAAyB,aAAU;AAGvF,SAASC,sBACPC,SAAiC,EACjCC,WAAuC;IAEvC,yCAAyC;IACzC,IAAIA,gBAAgBC,aAAaD,gBAAgB,WAAW;QAC1D;IACF;IACA,IAAID,cAAc,QAAQ;QACxB;IACF;IACA,IAAIA,YAAYX,UAAUc,YAAY,EAAE;QACtC;IACF;IACA;AACF;AAEA,SAASC,oBAAoBC,UAA+B;IAC1D,OAAQA;QACN,KAAKH;YACH;QACF,KAAK;YACH;IACJ;IAEA,OAAOA;AACT;AAgCA,OAAO,MAAMI,WAAW,CAAC,EACvBC,aAAa,EACbC,mBAAmB,MAAM,EACzBC,QAAQ,EACRC,YAAYb,kBAAkB,EAC9Bc,aAAad,kBAAkB,EAC/Be,aAAa,EACbC,eAAe,EACf,GAAGC,WACW;IACd,MAAMC,cAAcxB,eAAeuB;IAEnC,MAAM,EAAEE,OAAOf,WAAW,EAAED,YAAY,MAAM,EAAEK,UAAU,EAAE,GAAGjB;IAE/D,MAAM6B,aAAavB,mBAAmBiB,YAAYN;IAClD,MAAM,EAAEa,MAAM,EAAE,GAAGC,cAAc,GAAGxB,UAAUsB,YAAYZ;IAE1D,MAAMe,WAAW9B,WAAW6B,cAAc;QACxCP;QACAC;IACF;IAEA,MAAMQ,YAAYP,UAAUQ,SAAS,KAAK,WAAW;QAAEC,MAAM;IAAS,IAAI,CAAC;IAE3E,qBACE,MAAC/B;QACCe,eAAepB,WACb,wBACAoB,qCAEAR,sBAAsBC,WAAWC,cACjCO,qBAAqB,kDACrBJ,oBAAoBC;QAEtBmB,gBAAgB1B,WAAWY;QAC3Be,iBAAiB7B,YAAYe;QAC5B,GAAGU,SAAS;QACZ,GAAGD,QAAQ;QACX,GAAGN,SAAS;;YAEZL;YACAM,eAAgBL,CAAAA,cAAc,gBAAgBC,eAAe,YAAW,mBACvE,KAAClB;gBAAOwB,YAAYA;gBAAYC,QAAQA;;;;AAIhD,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"file":"View.d.ts","sourceRoot":"","sources":["../../../src/components/View/View.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAY,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAE/D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAgB7D,eAAO,MAAM,YAAY,8CAAqD,CAAC;AAE/E,MAAM,WAAW,SAAU,SAAQ,yBAAyB,CAAC,WAAW,CAAC,EAAE,UAAU;IACnF;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,MAAM,EAAE,OAAO,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC/E;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;IACvC;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CAAC,CAAC,WAAW,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,GAAG,SAAS,CAAC,GAAG,SAAS,CAAC;IAClF;;OAEG;IACH,iBAAiB,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;IAC7C;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IAC/B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,GAAG,QAAQ,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;CAC7D;AAID;;GAEG;AACH,eAAO,MAAM,IAAI,GAAI,0KAWlB,SAAS,KAAG,KAAK,CAAC,SA0dpB,CAAC"}
+{"version":3,"file":"View.d.ts","sourceRoot":"","sources":["../../../src/components/View/View.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAY,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAE/D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAgB7D,eAAO,MAAM,YAAY,8CAAqD,CAAC;AAE/E,MAAM,WAAW,SAAU,SAAQ,yBAAyB,CAAC,WAAW,CAAC,EAAE,UAAU;IACnF;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,MAAM,EAAE,OAAO,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC/E;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;IACvC;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CAAC,CAAC,WAAW,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,GAAG,SAAS,CAAC,GAAG,SAAS,CAAC;IAClF;;OAEG;IACH,iBAAiB,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;IAC7C;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IAC/B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,GAAG,QAAQ,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;CAC7D;AAID;;GAEG;AACH,eAAO,MAAM,IAAI,GAAI,0KAWlB,SAAS,KAAG,KAAK,CAAC,SAqdpB,CAAC"}