@vkontakte/vkui 6.0.3 → 6.1.0

package/dist/cjs/components/CalendarTime/CalendarTime.js

@@ -11,6 +11,7 @@ Object.defineProperty(exports, "CalendarTime", {
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _object_spread = require("@swc/helpers/_/_object_spread");
 const _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _date = require("../../lib/date");
 const _AdaptivityProvider = require("../AdaptivityProvider/AdaptivityProvider");
@@ -49,39 +50,53 @@ const CalendarTime = ({ value, doneButtonText = 'Готово', onChange, onClos
         onChange,
         value
     ]);
-    return /*#__PURE__*/ _react.createElement("div", {
-        className: "vkuiCalendarTime"
-    }, /*#__PURE__*/ _react.createElement("div", {
-        className: "vkuiCalendarTime__picker"
-    }, /*#__PURE__*/ _react.createElement(_AdaptivityProvider.AdaptivityProvider, {
-        sizeY: "compact"
-    }, /*#__PURE__*/ _react.createElement(_CustomSelect.CustomSelect, {
-        value: value.getHours(),
-        options: localHours,
-        onChange: onHoursChange,
-        forceDropdownPortal: false,
-        "aria-label": changeHoursLabel
-    }))), /*#__PURE__*/ _react.createElement("div", {
-        className: "vkuiCalendarTime__divider"
-    }, ":"), /*#__PURE__*/ _react.createElement("div", {
-        className: "vkuiCalendarTime__picker"
-    }, /*#__PURE__*/ _react.createElement(_AdaptivityProvider.AdaptivityProvider, {
-        sizeY: "compact"
-    }, /*#__PURE__*/ _react.createElement(_CustomSelect.CustomSelect, {
-        value: value.getMinutes(),
-        options: localMinutes,
-        onChange: onMinutesChange,
-        forceDropdownPortal: false,
-        "aria-label": changeMinutesLabel
-    }))), /*#__PURE__*/ _react.createElement("div", {
-        className: "vkuiCalendarTime__button"
-    }, /*#__PURE__*/ _react.createElement(_AdaptivityProvider.AdaptivityProvider, {
-        sizeY: "compact"
-    }, /*#__PURE__*/ _react.createElement(_Button.Button, {
-        mode: "secondary",
-        onClick: onClose,
-        size: "l"
-    }, doneButtonText))));
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        className: "vkuiCalendarTime",
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: "vkuiCalendarTime__picker",
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_AdaptivityProvider.AdaptivityProvider, {
+                    sizeY: "compact",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_CustomSelect.CustomSelect, {
+                        value: value.getHours(),
+                        options: localHours,
+                        onChange: onHoursChange,
+                        forceDropdownPortal: false,
+                        "aria-label": changeHoursLabel
+                    })
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: "vkuiCalendarTime__divider",
+                children: ":"
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: "vkuiCalendarTime__picker",
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_AdaptivityProvider.AdaptivityProvider, {
+                    sizeY: "compact",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_CustomSelect.CustomSelect, {
+                        value: value.getMinutes(),
+                        options: localMinutes,
+                        onChange: onMinutesChange,
+                        forceDropdownPortal: false,
+                        "aria-label": changeMinutesLabel
+                    })
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: "vkuiCalendarTime__button",
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_AdaptivityProvider.AdaptivityProvider, {
+                    sizeY: "compact",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.Button, {
+                        mode: "secondary",
+                        onClick: onClose,
+                        size: "l",
+                        children: doneButtonText
+                    })
+                })
+            })
+        ]
+    });
 };
 
 //# sourceMappingURL=CalendarTime.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CalendarTime/CalendarTime.tsx"],"sourcesContent":["import * as React from 'react';\nimport { setHours, setMinutes } from '../../lib/date';\nimport { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';\nimport { Button } from '../Button/Button';\nimport { CustomSelect } from '../CustomSelect/CustomSelect';\nimport styles from './CalendarTime.module.css';\n\nexport interface CalendarTimeProps {\n  value: Date;\n  doneButtonText?: string;\n  changeHoursLabel?: string;\n  changeMinutesLabel?: string;\n  onChange?: (value: Date) => void;\n  onClose?: () => void;\n  isDayDisabled?: (day: Date, withTime?: boolean) => boolean;\n}\n\nconst hours: Array<{\n  value: number;\n  label: string;\n}> = [];\nfor (let i = 0; i < 24; i += 1) {\n  hours.push({ value: i, label: String(i).padStart(2, '0') });\n}\n\nconst minutes: Array<{\n  value: number;\n  label: string;\n}> = [];\nfor (let i = 0; i < 60; i += 1) {\n  minutes.push({ value: i, label: String(i).padStart(2, '0') });\n}\n\nexport const CalendarTime = ({\n  value,\n  doneButtonText = 'Готово',\n  onChange,\n  onClose,\n  changeHoursLabel,\n  changeMinutesLabel,\n  isDayDisabled,\n}: CalendarTimeProps) => {\n  const localHours = isDayDisabled\n    ? hours.map((hour) => {\n        return { ...hour, disabled: isDayDisabled(setHours(value, hour.value), true) };\n      })\n    : hours;\n\n  const localMinutes = isDayDisabled\n    ? minutes.map((minute) => {\n        return { ...minute, disabled: isDayDisabled(setMinutes(value, minute.value), true) };\n      })\n    : minutes;\n\n  const onHoursChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLSelectElement>) =>\n      onChange?.(setHours(value, Number(event.target.value))),\n    [onChange, value],\n  );\n  const onMinutesChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLSelectElement>) =>\n      onChange?.(setMinutes(value, Number(event.target.value))),\n    [onChange, value],\n  );\n\n  return (\n    <div className={styles['CalendarTime']}>\n      <div className={styles['CalendarTime__picker']}>\n        <AdaptivityProvider sizeY=\"compact\">\n          <CustomSelect\n            value={value.getHours()}\n            options={localHours}\n            onChange={onHoursChange}\n            forceDropdownPortal={false}\n            aria-label={changeHoursLabel}\n          />\n        </AdaptivityProvider>\n      </div>\n      <div className={styles['CalendarTime__divider']}>:</div>\n      <div className={styles['CalendarTime__picker']}>\n        <AdaptivityProvider sizeY=\"compact\">\n          <CustomSelect\n            value={value.getMinutes()}\n            options={localMinutes}\n            onChange={onMinutesChange}\n            forceDropdownPortal={false}\n            aria-label={changeMinutesLabel}\n          />\n        </AdaptivityProvider>\n      </div>\n      <div className={styles['CalendarTime__button']}>\n        <AdaptivityProvider sizeY=\"compact\">\n          <Button mode=\"secondary\" onClick={onClose} size=\"l\">\n            {doneButtonText}\n          </Button>\n        </AdaptivityProvider>\n      </div>\n    </div>\n  );\n};\n"],"names":["CalendarTime","hours","i","push","value","label","String","padStart","minutes","doneButtonText","onChange","onClose","changeHoursLabel","changeMinutesLabel","isDayDisabled","localHours","map","hour","disabled","setHours","localMinutes","minute","setMinutes","onHoursChange","React","useCallback","event","Number","target","onMinutesChange","div","className","AdaptivityProvider","sizeY","CustomSelect","getHours","options","forceDropdownPortal","aria-label","getMinutes","Button","mode","onClick","size"],"mappings":";;;;+BAiCaA;;;eAAAA;;;;;;iEAjCU;sBACc;oCACF;wBACZ;8BACM;AAa7B,MAAMC,QAGD,EAAE;AACP,IAAK,IAAIC,IAAI,GAAGA,IAAI,IAAIA,KAAK,EAAG;IAC9BD,MAAME,IAAI,CAAC;QAAEC,OAAOF;QAAGG,OAAOC,OAAOJ,GAAGK,QAAQ,CAAC,GAAG;IAAK;AAC3D;AAEA,MAAMC,UAGD,EAAE;AACP,IAAK,IAAIN,IAAI,GAAGA,IAAI,IAAIA,KAAK,EAAG;IAC9BM,QAAQL,IAAI,CAAC;QAAEC,OAAOF;QAAGG,OAAOC,OAAOJ,GAAGK,QAAQ,CAAC,GAAG;IAAK;AAC7D;AAEO,MAAMP,eAAe,CAAC,EAC3BI,KAAK,EACLK,iBAAiB,QAAQ,EACzBC,QAAQ,EACRC,OAAO,EACPC,gBAAgB,EAChBC,kBAAkB,EAClBC,aAAa,EACK;IAClB,MAAMC,aAAaD,gBACfb,MAAMe,GAAG,CAAC,CAACC;QACT,OAAO,4CAAKA;YAAMC,UAAUJ,cAAcK,IAAAA,cAAQ,EAACf,OAAOa,KAAKb,KAAK,GAAG;;IACzE,KACAH;IAEJ,MAAMmB,eAAeN,gBACjBN,QAAQQ,GAAG,CAAC,CAACK;QACX,OAAO,4CAAKA;YAAQH,UAAUJ,cAAcQ,IAAAA,gBAAU,EAAClB,OAAOiB,OAAOjB,KAAK,GAAG;;IAC/E,KACAI;IAEJ,MAAMe,gBAAgBC,OAAMC,WAAW,CACrC,CAACC,QACChB,qBAAAA,+BAAAA,SAAWS,IAAAA,cAAQ,EAACf,OAAOuB,OAAOD,MAAME,MAAM,CAACxB,KAAK,KACtD;QAACM;QAAUN;KAAM;IAEnB,MAAMyB,kBAAkBL,OAAMC,WAAW,CACvC,CAACC,QACChB,qBAAAA,+BAAAA,SAAWY,IAAAA,gBAAU,EAAClB,OAAOuB,OAAOD,MAAME,MAAM,CAACxB,KAAK,KACxD;QAACM;QAAUN;KAAM;IAGnB,qBACE,qBAAC0B;QAAIC,SAAS;qBACZ,qBAACD;QAAIC,SAAS;qBACZ,qBAACC,sCAAkB;QAACC,OAAM;qBACxB,qBAACC,0BAAY;QACX9B,OAAOA,MAAM+B,QAAQ;QACrBC,SAASrB;QACTL,UAAUa;QACVc,qBAAqB;QACrBC,cAAY1B;wBAIlB,qBAACkB;QAAIC,SAAS;OAAmC,oBACjD,qBAACD;QAAIC,SAAS;qBACZ,qBAACC,sCAAkB;QAACC,OAAM;qBACxB,qBAACC,0BAAY;QACX9B,OAAOA,MAAMmC,UAAU;QACvBH,SAAShB;QACTV,UAAUmB;QACVQ,qBAAqB;QACrBC,cAAYzB;wBAIlB,qBAACiB;QAAIC,SAAS;qBACZ,qBAACC,sCAAkB;QAACC,OAAM;qBACxB,qBAACO,cAAM;QAACC,MAAK;QAAYC,SAAS/B;QAASgC,MAAK;OAC7ClC;AAMb"}
+{"version":3,"sources":["../../../../src/components/CalendarTime/CalendarTime.tsx"],"sourcesContent":["import * as React from 'react';\nimport { setHours, setMinutes } from '../../lib/date';\nimport { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';\nimport { Button } from '../Button/Button';\nimport { CustomSelect } from '../CustomSelect/CustomSelect';\nimport styles from './CalendarTime.module.css';\n\nexport interface CalendarTimeProps {\n  value: Date;\n  doneButtonText?: string;\n  changeHoursLabel?: string;\n  changeMinutesLabel?: string;\n  onChange?: (value: Date) => void;\n  onClose?: () => void;\n  isDayDisabled?: (day: Date, withTime?: boolean) => boolean;\n}\n\nconst hours: Array<{\n  value: number;\n  label: string;\n}> = [];\nfor (let i = 0; i < 24; i += 1) {\n  hours.push({ value: i, label: String(i).padStart(2, '0') });\n}\n\nconst minutes: Array<{\n  value: number;\n  label: string;\n}> = [];\nfor (let i = 0; i < 60; i += 1) {\n  minutes.push({ value: i, label: String(i).padStart(2, '0') });\n}\n\nexport const CalendarTime = ({\n  value,\n  doneButtonText = 'Готово',\n  onChange,\n  onClose,\n  changeHoursLabel,\n  changeMinutesLabel,\n  isDayDisabled,\n}: CalendarTimeProps) => {\n  const localHours = isDayDisabled\n    ? hours.map((hour) => {\n        return { ...hour, disabled: isDayDisabled(setHours(value, hour.value), true) };\n      })\n    : hours;\n\n  const localMinutes = isDayDisabled\n    ? minutes.map((minute) => {\n        return { ...minute, disabled: isDayDisabled(setMinutes(value, minute.value), true) };\n      })\n    : minutes;\n\n  const onHoursChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLSelectElement>) =>\n      onChange?.(setHours(value, Number(event.target.value))),\n    [onChange, value],\n  );\n  const onMinutesChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLSelectElement>) =>\n      onChange?.(setMinutes(value, Number(event.target.value))),\n    [onChange, value],\n  );\n\n  return (\n    <div className={styles['CalendarTime']}>\n      <div className={styles['CalendarTime__picker']}>\n        <AdaptivityProvider sizeY=\"compact\">\n          <CustomSelect\n            value={value.getHours()}\n            options={localHours}\n            onChange={onHoursChange}\n            forceDropdownPortal={false}\n            aria-label={changeHoursLabel}\n          />\n        </AdaptivityProvider>\n      </div>\n      <div className={styles['CalendarTime__divider']}>:</div>\n      <div className={styles['CalendarTime__picker']}>\n        <AdaptivityProvider sizeY=\"compact\">\n          <CustomSelect\n            value={value.getMinutes()}\n            options={localMinutes}\n            onChange={onMinutesChange}\n            forceDropdownPortal={false}\n            aria-label={changeMinutesLabel}\n          />\n        </AdaptivityProvider>\n      </div>\n      <div className={styles['CalendarTime__button']}>\n        <AdaptivityProvider sizeY=\"compact\">\n          <Button mode=\"secondary\" onClick={onClose} size=\"l\">\n            {doneButtonText}\n          </Button>\n        </AdaptivityProvider>\n      </div>\n    </div>\n  );\n};\n"],"names":["CalendarTime","hours","i","push","value","label","String","padStart","minutes","doneButtonText","onChange","onClose","changeHoursLabel","changeMinutesLabel","isDayDisabled","localHours","map","hour","disabled","setHours","localMinutes","minute","setMinutes","onHoursChange","React","useCallback","event","Number","target","onMinutesChange","div","className","AdaptivityProvider","sizeY","CustomSelect","getHours","options","forceDropdownPortal","aria-label","getMinutes","Button","mode","onClick","size"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAiCaA;;;eAAAA;;;;;;;iEAjCU;sBACc;oCACF;wBACZ;8BACM;AAa7B,MAAMC,QAGD,EAAE;AACP,IAAK,IAAIC,IAAI,GAAGA,IAAI,IAAIA,KAAK,EAAG;IAC9BD,MAAME,IAAI,CAAC;QAAEC,OAAOF;QAAGG,OAAOC,OAAOJ,GAAGK,QAAQ,CAAC,GAAG;IAAK;AAC3D;AAEA,MAAMC,UAGD,EAAE;AACP,IAAK,IAAIN,IAAI,GAAGA,IAAI,IAAIA,KAAK,EAAG;IAC9BM,QAAQL,IAAI,CAAC;QAAEC,OAAOF;QAAGG,OAAOC,OAAOJ,GAAGK,QAAQ,CAAC,GAAG;IAAK;AAC7D;AAEO,MAAMP,eAAe,CAAC,EAC3BI,KAAK,EACLK,iBAAiB,QAAQ,EACzBC,QAAQ,EACRC,OAAO,EACPC,gBAAgB,EAChBC,kBAAkB,EAClBC,aAAa,EACK;IAClB,MAAMC,aAAaD,gBACfb,MAAMe,GAAG,CAAC,CAACC;QACT,OAAO,4CAAKA;YAAMC,UAAUJ,cAAcK,IAAAA,cAAQ,EAACf,OAAOa,KAAKb,KAAK,GAAG;;IACzE,KACAH;IAEJ,MAAMmB,eAAeN,gBACjBN,QAAQQ,GAAG,CAAC,CAACK;QACX,OAAO,4CAAKA;YAAQH,UAAUJ,cAAcQ,IAAAA,gBAAU,EAAClB,OAAOiB,OAAOjB,KAAK,GAAG;;IAC/E,KACAI;IAEJ,MAAMe,gBAAgBC,OAAMC,WAAW,CACrC,CAACC,QACChB,qBAAAA,+BAAAA,SAAWS,IAAAA,cAAQ,EAACf,OAAOuB,OAAOD,MAAME,MAAM,CAACxB,KAAK,KACtD;QAACM;QAAUN;KAAM;IAEnB,MAAMyB,kBAAkBL,OAAMC,WAAW,CACvC,CAACC,QACChB,qBAAAA,+BAAAA,SAAWY,IAAAA,gBAAU,EAAClB,OAAOuB,OAAOD,MAAME,MAAM,CAACxB,KAAK,KACxD;QAACM;QAAUN;KAAM;IAGnB,qBACE,sBAAC0B;QAAIC,SAAS;;0BACZ,qBAACD;gBAAIC,SAAS;0BACZ,cAAA,qBAACC,sCAAkB;oBAACC,OAAM;8BACxB,cAAA,qBAACC,0BAAY;wBACX9B,OAAOA,MAAM+B,QAAQ;wBACrBC,SAASrB;wBACTL,UAAUa;wBACVc,qBAAqB;wBACrBC,cAAY1B;;;;0BAIlB,qBAACkB;gBAAIC,SAAS;0BAAmC;;0BACjD,qBAACD;gBAAIC,SAAS;0BACZ,cAAA,qBAACC,sCAAkB;oBAACC,OAAM;8BACxB,cAAA,qBAACC,0BAAY;wBACX9B,OAAOA,MAAMmC,UAAU;wBACvBH,SAAShB;wBACTV,UAAUmB;wBACVQ,qBAAqB;wBACrBC,cAAYzB;;;;0BAIlB,qBAACiB;gBAAIC,SAAS;0BACZ,cAAA,qBAACC,sCAAkB;oBAACC,OAAM;8BACxB,cAAA,qBAACO,cAAM;wBAACC,MAAK;wBAAYC,SAAS/B;wBAASgC,MAAK;kCAC7ClC;;;;;;AAMb"}

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

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { HTMLAttributesWithRootRef } from '../../types';
 export interface CardProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     mode?: 'tint' | 'shadow' | 'outline' | 'outline-tint';
@@ -6,5 +5,5 @@ export interface CardProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/Card
  */
-export declare const Card: ({ mode, ...restProps }: CardProps) => React.JSX.Element;
+export declare const Card: ({ mode, ...restProps }: CardProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Card.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAIxD,MAAM,WAAW,SAAU,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC1E,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,cAAc,CAAC;CACvD;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,2BAAqC,SAAS,sBAa9D,CAAC"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAIxD,MAAM,WAAW,SAAU,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC1E,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,cAAc,CAAC;CACvD;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,2BAAqC,SAAS,4CAa9D,CAAC"}

package/dist/cjs/components/Card/Card.js

@@ -8,11 +8,10 @@ Object.defineProperty(exports, "Card", {
         return Card;
     }
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _object_spread = require("@swc/helpers/_/_object_spread");
 const _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 const _object_without_properties = require("@swc/helpers/_/_object_without_properties");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _jsxruntime = require("react/jsx-runtime");
 const _vkjs = require("@vkontakte/vkjs");
 const _RootComponent = require("../RootComponent/RootComponent");
 const Card = (_param)=>{
@@ -20,7 +19,7 @@ const Card = (_param)=>{
         "mode"
     ]);
     const withBorder = mode === 'outline' || mode === 'outline-tint';
-    return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, restProps), {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, restProps), {
         baseClassName: (0, _vkjs.classNames)("vkuiCard", mode === 'outline' && "vkuiCard--mode-outline", mode === 'shadow' && "vkuiCard--mode-shadow", withBorder && "vkuiCard--withBorder")
     }));
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Card.module.css';\n\nexport interface CardProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  mode?: 'tint' | 'shadow' | 'outline' | 'outline-tint';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Card\n */\nexport const Card = ({ mode = 'tint', ...restProps }: CardProps) => {\n  const withBorder = mode === 'outline' || mode === 'outline-tint';\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['Card'],\n        mode === 'outline' && styles['Card--mode-outline'],\n        mode === 'shadow' && styles['Card--mode-shadow'],\n        withBorder && styles['Card--withBorder'],\n      )}\n    />\n  );\n};\n"],"names":["Card","mode","restProps","withBorder","RootComponent","baseClassName","classNames"],"mappings":";;;;+BAaaA;;;eAAAA;;;;;;;iEAbU;sBACI;+BAEG;AAUvB,MAAMA,OAAO;QAAC,EAAEC,OAAO,MAAM,EAA2B,WAAtBC;QAAlBD;;IACrB,MAAME,aAAaF,SAAS,aAAaA,SAAS;IAClD,qBACE,qBAACG,4BAAa,8CACRF;QACJG,eAAeC,IAAAA,gBAAU,cAEvBL,SAAS,uCACTA,SAAS,qCACTE;;AAIR"}
+{"version":3,"sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Card.module.css';\n\nexport interface CardProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  mode?: 'tint' | 'shadow' | 'outline' | 'outline-tint';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Card\n */\nexport const Card = ({ mode = 'tint', ...restProps }: CardProps) => {\n  const withBorder = mode === 'outline' || mode === 'outline-tint';\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['Card'],\n        mode === 'outline' && styles['Card--mode-outline'],\n        mode === 'shadow' && styles['Card--mode-shadow'],\n        withBorder && styles['Card--withBorder'],\n      )}\n    />\n  );\n};\n"],"names":["Card","mode","restProps","withBorder","RootComponent","baseClassName","classNames"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYaA;;;eAAAA;;;;;;;sBAZc;+BAEG;AAUvB,MAAMA,OAAO;QAAC,EAAEC,OAAO,MAAM,EAA2B,WAAtBC;QAAlBD;;IACrB,MAAME,aAAaF,SAAS,aAAaA,SAAS;IAClD,qBACE,qBAACG,4BAAa,8CACRF;QACJG,eAAeC,IAAAA,gBAAU,cAEvBL,SAAS,uCACTA,SAAS,qCACTE;;AAIR"}

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

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { HTMLAttributesWithRootRef } from '../../types';
 export interface CardGridProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     size?: 's' | 'm' | 'l';
@@ -10,5 +9,5 @@ export interface CardGridProps extends HTMLAttributesWithRootRef<HTMLDivElement>
 /**
  * @see https://vkcom.github.io/VKUI/#/CardGrid
  */
-export declare const CardGrid: ({ size, spaced, ...restProps }: CardGridProps) => React.JSX.Element;
+export declare const CardGrid: ({ size, spaced, ...restProps }: CardGridProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=CardGrid.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CardGrid.d.ts","sourceRoot":"","sources":["../../../../src/components/CardGrid/CardGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAexD,MAAM,WAAW,aAAc,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC9E,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,mCAAkD,aAAa,sBAenF,CAAC"}
+{"version":3,"file":"CardGrid.d.ts","sourceRoot":"","sources":["../../../../src/components/CardGrid/CardGrid.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAexD,MAAM,WAAW,aAAc,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC9E,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,mCAAkD,aAAa,4CAenF,CAAC"}

package/dist/cjs/components/CardGrid/CardGrid.js

@@ -8,11 +8,10 @@ Object.defineProperty(exports, "CardGrid", {
         return CardGrid;
     }
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _object_spread = require("@swc/helpers/_/_object_spread");
 const _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 const _object_without_properties = require("@swc/helpers/_/_object_without_properties");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _jsxruntime = require("react/jsx-runtime");
 const _vkjs = require("@vkontakte/vkjs");
 const _useAdaptivity = require("../../hooks/useAdaptivity");
 const _RootComponent = require("../RootComponent/RootComponent");
@@ -31,7 +30,7 @@ const CardGrid = (_param)=>{
         "spaced"
     ]);
     const { sizeX = 'none' } = (0, _useAdaptivity.useAdaptivity)();
-    return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, restProps), {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, restProps), {
         baseClassName: (0, _vkjs.classNames)("vkuiCardGrid", 'vkuiInternalCardGrid', spaced && "vkuiCardGrid--spaced", stylesSize[size], sizeX !== 'regular' && sizeXClassNames[sizeX])
     }));
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CardGrid/CardGrid.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './CardGrid.module.css';\n\nconst sizeXClassNames = {\n  none: styles['CardGrid--sizeX-none'],\n  ['compact']: styles['CardGrid--sizeX-compact'],\n};\n\nconst stylesSize = {\n  s: 'vkuiInternalCardGrid--size-s',\n  m: 'vkuiInternalCardGrid--size-m',\n  l: 'vkuiInternalCardGrid--size-l',\n};\n\nexport interface CardGridProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  size?: 's' | 'm' | 'l';\n  /**\n   * Если true, то вокруг компонента присутствуют стандартные отсупы сверху/снизу и слева/справа\n   */\n  spaced?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CardGrid\n */\nexport const CardGrid = ({ size = 's', spaced = false, ...restProps }: CardGridProps) => {\n  const { sizeX = 'none' } = useAdaptivity();\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['CardGrid'],\n        'vkuiInternalCardGrid',\n        spaced && styles['CardGrid--spaced'],\n        stylesSize[size],\n        sizeX !== 'regular' && sizeXClassNames[sizeX],\n      )}\n    />\n  );\n};\n"],"names":["CardGrid","sizeXClassNames","none","stylesSize","s","m","l","size","spaced","restProps","sizeX","useAdaptivity","RootComponent","baseClassName","classNames"],"mappings":";;;;+BA6BaA;;;eAAAA;;;;;;;iEA7BU;sBACI;+BACG;+BAEA;AAG9B,MAAMC,kBAAkB;IACtBC,IAAI;IACJ,CAAC,UAAU;AACb;AAEA,MAAMC,aAAa;IACjBC,GAAG;IACHC,GAAG;IACHC,GAAG;AACL;AAaO,MAAMN,WAAW;QAAC,EAAEO,OAAO,GAAG,EAAEC,SAAS,KAAK,EAA+B,WAA1BC;QAA/BF;QAAYC;;IACrC,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IAExC,qBACE,qBAACC,4BAAa,8CACRH;QACJI,eAAeC,IAAAA,gBAAU,kBAEvB,wBACAN,kCACAL,UAAU,CAACI,KAAK,EAChBG,UAAU,aAAaT,eAAe,CAACS,MAAM;;AAIrD"}
+{"version":3,"sources":["../../../../src/components/CardGrid/CardGrid.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './CardGrid.module.css';\n\nconst sizeXClassNames = {\n  none: styles['CardGrid--sizeX-none'],\n  ['compact']: styles['CardGrid--sizeX-compact'],\n};\n\nconst stylesSize = {\n  s: 'vkuiInternalCardGrid--size-s',\n  m: 'vkuiInternalCardGrid--size-m',\n  l: 'vkuiInternalCardGrid--size-l',\n};\n\nexport interface CardGridProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  size?: 's' | 'm' | 'l';\n  /**\n   * Если true, то вокруг компонента присутствуют стандартные отсупы сверху/снизу и слева/справа\n   */\n  spaced?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CardGrid\n */\nexport const CardGrid = ({ size = 's', spaced = false, ...restProps }: CardGridProps) => {\n  const { sizeX = 'none' } = useAdaptivity();\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['CardGrid'],\n        'vkuiInternalCardGrid',\n        spaced && styles['CardGrid--spaced'],\n        stylesSize[size],\n        sizeX !== 'regular' && sizeXClassNames[sizeX],\n      )}\n    />\n  );\n};\n"],"names":["CardGrid","sizeXClassNames","none","stylesSize","s","m","l","size","spaced","restProps","sizeX","useAdaptivity","RootComponent","baseClassName","classNames"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA4BaA;;;eAAAA;;;;;;;sBA5Bc;+BACG;+BAEA;AAG9B,MAAMC,kBAAkB;IACtBC,IAAI;IACJ,CAAC,UAAU;AACb;AAEA,MAAMC,aAAa;IACjBC,GAAG;IACHC,GAAG;IACHC,GAAG;AACL;AAaO,MAAMN,WAAW;QAAC,EAAEO,OAAO,GAAG,EAAEC,SAAS,KAAK,EAA+B,WAA1BC;QAA/BF;QAAYC;;IACrC,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IAExC,qBACE,qBAACC,4BAAa,8CACRH;QACJI,eAAeC,IAAAA,gBAAU,kBAEvB,wBACAN,kCACAL,UAAU,CAACI,KAAK,EAChBG,UAAU,aAAaT,eAAe,CAACS,MAAM;;AAIrD"}

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

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { HTMLAttributesWithRootRef } from '../../types';
 import { HorizontalScrollProps } from '../HorizontalScroll/HorizontalScroll';
 export interface CardScrollProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
@@ -12,5 +11,5 @@ export interface CardScrollProps extends HTMLAttributesWithRootRef<HTMLDivElemen
 /**
  * @see https://vkcom.github.io/VKUI/#/CardScroll
  */
-export declare const CardScroll: ({ children, size, showArrows, noSpaces, ...restProps }: CardScrollProps) => React.JSX.Element;
+export declare const CardScroll: ({ children, size, showArrows, noSpaces, ...restProps }: CardScrollProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=CardScroll.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CardScroll.d.ts","sourceRoot":"","sources":["../../../../src/components/CardScroll/CardScroll.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAoB,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAU/F,MAAM,WAAW,eAAgB,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAChF;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,KAAK,CAAC;IAC/B,UAAU,CAAC,EAAE,qBAAqB,CAAC,YAAY,CAAC,CAAC;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,2DAMpB,eAAe,sBAiFjB,CAAC"}
+{"version":3,"file":"CardScroll.d.ts","sourceRoot":"","sources":["../../../../src/components/CardScroll/CardScroll.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAoB,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAU/F,MAAM,WAAW,eAAgB,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAChF;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,KAAK,CAAC;IAC/B,UAAU,CAAC,EAAE,qBAAqB,CAAC,YAAY,CAAC,CAAC;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,2DAMpB,eAAe,4CAiFjB,CAAC"}

package/dist/cjs/components/CardScroll/CardScroll.js

@@ -12,6 +12,7 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
 const _object_spread = require("@swc/helpers/_/_object_spread");
 const _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 const _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _vkjs = require("@vkontakte/vkjs");
 const _dom = require("../../lib/dom");
@@ -64,21 +65,28 @@ const CardScroll = (_param)=>{
         }
         return slide.offsetLeft - gapRef.current.offsetWidth;
     }
-    return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, restProps), {
-        baseClassName: (0, _vkjs.classNames)("vkuiCardScroll", 'vkuiInternalCardScroll', size !== false && stylesSize[size], !noSpaces && "vkuiCardScroll--withSpaces")
-    }), /*#__PURE__*/ _react.createElement(_HorizontalScroll.HorizontalScroll, {
-        getScrollToLeft: getScrollToLeft,
-        getScrollToRight: getScrollToRight,
-        showArrows: showArrows
-    }, /*#__PURE__*/ _react.createElement("div", {
-        className: "vkuiCardScroll__in",
-        ref: refContainer
-    }, /*#__PURE__*/ _react.createElement("span", {
-        className: "vkuiCardScroll__gap",
-        ref: gapRef
-    }), children, /*#__PURE__*/ _react.createElement("span", {
-        className: "vkuiCardScroll__gap"
-    }))));
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, restProps), {
+        baseClassName: (0, _vkjs.classNames)("vkuiCardScroll", 'vkuiInternalCardScroll', size !== false && stylesSize[size], !noSpaces && "vkuiCardScroll--withSpaces"),
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_HorizontalScroll.HorizontalScroll, {
+            getScrollToLeft: getScrollToLeft,
+            getScrollToRight: getScrollToRight,
+            showArrows: showArrows,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                className: "vkuiCardScroll__in",
+                ref: refContainer,
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                        className: "vkuiCardScroll__gap",
+                        ref: gapRef
+                    }),
+                    children,
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                        className: "vkuiCardScroll__gap"
+                    })
+                ]
+            })
+        })
+    }));
 };
 
 //# sourceMappingURL=CardScroll.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CardScroll/CardScroll.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useDOM } from '../../lib/dom';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { HorizontalScroll, HorizontalScrollProps } from '../HorizontalScroll/HorizontalScroll';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './CardScroll.module.css';\n\nconst stylesSize = {\n  s: 'vkuiInternalCardScroll--size-s',\n  m: 'vkuiInternalCardScroll--size-m',\n  l: 'vkuiInternalCardScroll--size-l',\n};\n\nexport interface CardScrollProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * При `size=false` ширина `Card` будет регулироваться контентом внутри. В остальных случаях — будет явно задана в процентах.\n   */\n  size?: 's' | 'm' | 'l' | false;\n  showArrows?: HorizontalScrollProps['showArrows'];\n  noSpaces?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CardScroll\n */\nexport const CardScroll = ({\n  children,\n  size = 's',\n  showArrows = true,\n  noSpaces = false,\n  ...restProps\n}: CardScrollProps) => {\n  const refContainer = React.useRef<HTMLDivElement>(null);\n  const gapRef = React.useRef<HTMLDivElement>(null);\n\n  const { window } = useDOM();\n\n  function getScrollToLeft(offset: number): number {\n    if (!refContainer.current || !gapRef.current) {\n      return offset;\n    }\n    const containerWidth = refContainer.current.offsetWidth;\n    const slideIndex = ([...refContainer.current.children] as HTMLElement[]).findIndex(\n      (el: HTMLElement) =>\n        el.offsetLeft +\n          el.offsetWidth +\n          parseInt(window!.getComputedStyle(el).marginRight) -\n          offset >=\n        0,\n    );\n\n    if (slideIndex === -1) {\n      return offset;\n    }\n\n    if (slideIndex === 0) {\n      return 0;\n    }\n\n    const slide = refContainer.current.children[slideIndex] as HTMLElement;\n\n    const scrollTo =\n      slide.offsetLeft - (containerWidth - slide.offsetWidth) + gapRef.current.offsetWidth;\n\n    if (scrollTo <= 2 * gapRef.current.offsetWidth) {\n      return 0;\n    }\n\n    return scrollTo;\n  }\n\n  function getScrollToRight(offset: number): number {\n    if (!refContainer.current || !gapRef.current) {\n      return offset;\n    }\n\n    const containerWidth = refContainer.current.offsetWidth;\n    const slide = Array.prototype.find.call(\n      refContainer.current.children,\n      (el: HTMLElement) => el.offsetLeft + el.offsetWidth - offset > containerWidth,\n    ) as HTMLElement;\n\n    if (!slide) {\n      return offset;\n    }\n\n    return slide.offsetLeft - gapRef.current.offsetWidth;\n  }\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['CardScroll'],\n        'vkuiInternalCardScroll',\n        size !== false && stylesSize[size],\n        !noSpaces && styles['CardScroll--withSpaces'],\n      )}\n    >\n      <HorizontalScroll\n        getScrollToLeft={getScrollToLeft}\n        getScrollToRight={getScrollToRight}\n        showArrows={showArrows}\n      >\n        <div className={styles['CardScroll__in']} ref={refContainer}>\n          <span className={styles['CardScroll__gap']} ref={gapRef} />\n          {children}\n          <span className={styles['CardScroll__gap']} />\n        </div>\n      </HorizontalScroll>\n    </RootComponent>\n  );\n};\n"],"names":["CardScroll","stylesSize","s","m","l","children","size","showArrows","noSpaces","restProps","refContainer","React","useRef","gapRef","window","useDOM","getScrollToLeft","offset","current","containerWidth","offsetWidth","slideIndex","findIndex","el","offsetLeft","parseInt","getComputedStyle","marginRight","slide","scrollTo","getScrollToRight","Array","prototype","find","call","RootComponent","baseClassName","classNames","HorizontalScroll","div","className","ref","span"],"mappings":";;;;+BA0BaA;;;eAAAA;;;;;;;iEA1BU;sBACI;qBACJ;kCAEiC;+BAC1B;AAG9B,MAAMC,aAAa;IACjBC,GAAG;IACHC,GAAG;IACHC,GAAG;AACL;AAcO,MAAMJ,aAAa;QAAC,EACzBK,QAAQ,EACRC,OAAO,GAAG,EACVC,aAAa,IAAI,EACjBC,WAAW,KAAK,EAEA,WADbC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,MAAME,eAAeC,OAAMC,MAAM,CAAiB;IAClD,MAAMC,SAASF,OAAMC,MAAM,CAAiB;IAE5C,MAAM,EAAEE,MAAM,EAAE,GAAGC,IAAAA,WAAM;IAEzB,SAASC,gBAAgBC,MAAc;QACrC,IAAI,CAACP,aAAaQ,OAAO,IAAI,CAACL,OAAOK,OAAO,EAAE;YAC5C,OAAOD;QACT;QACA,MAAME,iBAAiBT,aAAaQ,OAAO,CAACE,WAAW;QACvD,MAAMC,aAAa,AAAC;eAAIX,aAAaQ,OAAO,CAACb,QAAQ;SAAC,CAAmBiB,SAAS,CAChF,CAACC,KACCA,GAAGC,UAAU,GACXD,GAAGH,WAAW,GACdK,SAASX,OAAQY,gBAAgB,CAACH,IAAII,WAAW,IACjDV,UACF;QAGJ,IAAII,eAAe,CAAC,GAAG;YACrB,OAAOJ;QACT;QAEA,IAAII,eAAe,GAAG;YACpB,OAAO;QACT;QAEA,MAAMO,QAAQlB,aAAaQ,OAAO,CAACb,QAAQ,CAACgB,WAAW;QAEvD,MAAMQ,WACJD,MAAMJ,UAAU,GAAIL,CAAAA,iBAAiBS,MAAMR,WAAW,AAAD,IAAKP,OAAOK,OAAO,CAACE,WAAW;QAEtF,IAAIS,YAAY,IAAIhB,OAAOK,OAAO,CAACE,WAAW,EAAE;YAC9C,OAAO;QACT;QAEA,OAAOS;IACT;IAEA,SAASC,iBAAiBb,MAAc;QACtC,IAAI,CAACP,aAAaQ,OAAO,IAAI,CAACL,OAAOK,OAAO,EAAE;YAC5C,OAAOD;QACT;QAEA,MAAME,iBAAiBT,aAAaQ,OAAO,CAACE,WAAW;QACvD,MAAMQ,QAAQG,MAAMC,SAAS,CAACC,IAAI,CAACC,IAAI,CACrCxB,aAAaQ,OAAO,CAACb,QAAQ,EAC7B,CAACkB,KAAoBA,GAAGC,UAAU,GAAGD,GAAGH,WAAW,GAAGH,SAASE;QAGjE,IAAI,CAACS,OAAO;YACV,OAAOX;QACT;QAEA,OAAOW,MAAMJ,UAAU,GAAGX,OAAOK,OAAO,CAACE,WAAW;IACtD;IAEA,qBACE,qBAACe,4BAAa,8CACR1B;QACJ2B,eAAeC,IAAAA,gBAAU,oBAEvB,0BACA/B,SAAS,SAASL,UAAU,CAACK,KAAK,EAClC,CAACE;sBAGH,qBAAC8B,kCAAgB;QACftB,iBAAiBA;QACjBc,kBAAkBA;QAClBvB,YAAYA;qBAEZ,qBAACgC;QAAIC,SAAS;QAA4BC,KAAK/B;qBAC7C,qBAACgC;QAAKF,SAAS;QAA6BC,KAAK5B;QAChDR,wBACD,qBAACqC;QAAKF,SAAS;;AAKzB"}
+{"version":3,"sources":["../../../../src/components/CardScroll/CardScroll.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useDOM } from '../../lib/dom';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { HorizontalScroll, HorizontalScrollProps } from '../HorizontalScroll/HorizontalScroll';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './CardScroll.module.css';\n\nconst stylesSize = {\n  s: 'vkuiInternalCardScroll--size-s',\n  m: 'vkuiInternalCardScroll--size-m',\n  l: 'vkuiInternalCardScroll--size-l',\n};\n\nexport interface CardScrollProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * При `size=false` ширина `Card` будет регулироваться контентом внутри. В остальных случаях — будет явно задана в процентах.\n   */\n  size?: 's' | 'm' | 'l' | false;\n  showArrows?: HorizontalScrollProps['showArrows'];\n  noSpaces?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CardScroll\n */\nexport const CardScroll = ({\n  children,\n  size = 's',\n  showArrows = true,\n  noSpaces = false,\n  ...restProps\n}: CardScrollProps) => {\n  const refContainer = React.useRef<HTMLDivElement>(null);\n  const gapRef = React.useRef<HTMLDivElement>(null);\n\n  const { window } = useDOM();\n\n  function getScrollToLeft(offset: number): number {\n    if (!refContainer.current || !gapRef.current) {\n      return offset;\n    }\n    const containerWidth = refContainer.current.offsetWidth;\n    const slideIndex = ([...refContainer.current.children] as HTMLElement[]).findIndex(\n      (el: HTMLElement) =>\n        el.offsetLeft +\n          el.offsetWidth +\n          parseInt(window!.getComputedStyle(el).marginRight) -\n          offset >=\n        0,\n    );\n\n    if (slideIndex === -1) {\n      return offset;\n    }\n\n    if (slideIndex === 0) {\n      return 0;\n    }\n\n    const slide = refContainer.current.children[slideIndex] as HTMLElement;\n\n    const scrollTo =\n      slide.offsetLeft - (containerWidth - slide.offsetWidth) + gapRef.current.offsetWidth;\n\n    if (scrollTo <= 2 * gapRef.current.offsetWidth) {\n      return 0;\n    }\n\n    return scrollTo;\n  }\n\n  function getScrollToRight(offset: number): number {\n    if (!refContainer.current || !gapRef.current) {\n      return offset;\n    }\n\n    const containerWidth = refContainer.current.offsetWidth;\n    const slide = Array.prototype.find.call(\n      refContainer.current.children,\n      (el: HTMLElement) => el.offsetLeft + el.offsetWidth - offset > containerWidth,\n    ) as HTMLElement;\n\n    if (!slide) {\n      return offset;\n    }\n\n    return slide.offsetLeft - gapRef.current.offsetWidth;\n  }\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['CardScroll'],\n        'vkuiInternalCardScroll',\n        size !== false && stylesSize[size],\n        !noSpaces && styles['CardScroll--withSpaces'],\n      )}\n    >\n      <HorizontalScroll\n        getScrollToLeft={getScrollToLeft}\n        getScrollToRight={getScrollToRight}\n        showArrows={showArrows}\n      >\n        <div className={styles['CardScroll__in']} ref={refContainer}>\n          <span className={styles['CardScroll__gap']} ref={gapRef} />\n          {children}\n          <span className={styles['CardScroll__gap']} />\n        </div>\n      </HorizontalScroll>\n    </RootComponent>\n  );\n};\n"],"names":["CardScroll","stylesSize","s","m","l","children","size","showArrows","noSpaces","restProps","refContainer","React","useRef","gapRef","window","useDOM","getScrollToLeft","offset","current","containerWidth","offsetWidth","slideIndex","findIndex","el","offsetLeft","parseInt","getComputedStyle","marginRight","slide","scrollTo","getScrollToRight","Array","prototype","find","call","RootComponent","baseClassName","classNames","HorizontalScroll","div","className","ref","span"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA0BaA;;;eAAAA;;;;;;;;iEA1BU;sBACI;qBACJ;kCAEiC;+BAC1B;AAG9B,MAAMC,aAAa;IACjBC,GAAG;IACHC,GAAG;IACHC,GAAG;AACL;AAcO,MAAMJ,aAAa;QAAC,EACzBK,QAAQ,EACRC,OAAO,GAAG,EACVC,aAAa,IAAI,EACjBC,WAAW,KAAK,EAEA,WADbC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,MAAME,eAAeC,OAAMC,MAAM,CAAiB;IAClD,MAAMC,SAASF,OAAMC,MAAM,CAAiB;IAE5C,MAAM,EAAEE,MAAM,EAAE,GAAGC,IAAAA,WAAM;IAEzB,SAASC,gBAAgBC,MAAc;QACrC,IAAI,CAACP,aAAaQ,OAAO,IAAI,CAACL,OAAOK,OAAO,EAAE;YAC5C,OAAOD;QACT;QACA,MAAME,iBAAiBT,aAAaQ,OAAO,CAACE,WAAW;QACvD,MAAMC,aAAa,AAAC;eAAIX,aAAaQ,OAAO,CAACb,QAAQ;SAAC,CAAmBiB,SAAS,CAChF,CAACC,KACCA,GAAGC,UAAU,GACXD,GAAGH,WAAW,GACdK,SAASX,OAAQY,gBAAgB,CAACH,IAAII,WAAW,IACjDV,UACF;QAGJ,IAAII,eAAe,CAAC,GAAG;YACrB,OAAOJ;QACT;QAEA,IAAII,eAAe,GAAG;YACpB,OAAO;QACT;QAEA,MAAMO,QAAQlB,aAAaQ,OAAO,CAACb,QAAQ,CAACgB,WAAW;QAEvD,MAAMQ,WACJD,MAAMJ,UAAU,GAAIL,CAAAA,iBAAiBS,MAAMR,WAAW,AAAD,IAAKP,OAAOK,OAAO,CAACE,WAAW;QAEtF,IAAIS,YAAY,IAAIhB,OAAOK,OAAO,CAACE,WAAW,EAAE;YAC9C,OAAO;QACT;QAEA,OAAOS;IACT;IAEA,SAASC,iBAAiBb,MAAc;QACtC,IAAI,CAACP,aAAaQ,OAAO,IAAI,CAACL,OAAOK,OAAO,EAAE;YAC5C,OAAOD;QACT;QAEA,MAAME,iBAAiBT,aAAaQ,OAAO,CAACE,WAAW;QACvD,MAAMQ,QAAQG,MAAMC,SAAS,CAACC,IAAI,CAACC,IAAI,CACrCxB,aAAaQ,OAAO,CAACb,QAAQ,EAC7B,CAACkB,KAAoBA,GAAGC,UAAU,GAAGD,GAAGH,WAAW,GAAGH,SAASE;QAGjE,IAAI,CAACS,OAAO;YACV,OAAOX;QACT;QAEA,OAAOW,MAAMJ,UAAU,GAAGX,OAAOK,OAAO,CAACE,WAAW;IACtD;IAEA,qBACE,qBAACe,4BAAa,8CACR1B;QACJ2B,eAAeC,IAAAA,gBAAU,oBAEvB,0BACA/B,SAAS,SAASL,UAAU,CAACK,KAAK,EAClC,CAACE;kBAGH,cAAA,qBAAC8B,kCAAgB;YACftB,iBAAiBA;YACjBc,kBAAkBA;YAClBvB,YAAYA;sBAEZ,cAAA,sBAACgC;gBAAIC,SAAS;gBAA4BC,KAAK/B;;kCAC7C,qBAACgC;wBAAKF,SAAS;wBAA6BC,KAAK5B;;oBAChDR;kCACD,qBAACqC;wBAAKF,SAAS;;;;;;AAKzB"}

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

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import type { SwappedItemRange } from '../../hooks/useDraggableWithDomApi';
 import { HasRootRef } from '../../types';
 import { RemovableProps } from '../Removable/Removable';
@@ -38,7 +37,7 @@ export interface CellProps extends Omit<SimpleCellProps, 'getRootRef'>, Removabl
  * @see https://vkcom.github.io/VKUI/#/Cell
  */
 export declare const Cell: {
-    ({ mode, onRemove, removePlaceholder, onDragFinish, before, after, disabled, draggable, Component: ComponentProps, onChange, name, value, checked, defaultChecked, getRootRef, draggerLabel, className, style, toggleButtonTestId, removeButtonTestId, ...restProps }: CellProps): React.JSX.Element;
-    Checkbox: ({ getRootRef, getRef, className, style, type, ...restProps }: CellCheckboxProps) => React.JSX.Element;
+    ({ mode, onRemove, removePlaceholder, onDragFinish, before, after, disabled, draggable, Component: ComponentProps, onChange, name, value, checked, defaultChecked, getRootRef, draggerLabel, className, style, toggleButtonTestId, removeButtonTestId, ...restProps }: CellProps): import("react/jsx-runtime").JSX.Element;
+    Checkbox: ({ getRootRef, getRef, className, style, type, ...restProps }: CellCheckboxProps) => import("react/jsx-runtime").JSX.Element;
 };
 //# sourceMappingURL=Cell.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Cell.d.ts","sourceRoot":"","sources":["../../../../src/components/Cell/Cell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oCAAoC,CAAC;AAG3E,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAa,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAc,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACvE,OAAO,EAAgB,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAK9E,MAAM,WAAW,SACf,SAAQ,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC,EACzC,cAAc,EACd,UAAU,CAAC,cAAc,CAAC;IAC5B,IAAI,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;IAClC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,gBAAgB,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,IAAI;2QAsBd,SAAS;;CAuGX,CAAC"}
+{"version":3,"file":"Cell.d.ts","sourceRoot":"","sources":["../../../../src/components/Cell/Cell.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oCAAoC,CAAC;AAG3E,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAa,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAc,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACvE,OAAO,EAAgB,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAK9E,MAAM,WAAW,SACf,SAAQ,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC,EACzC,cAAc,EACd,UAAU,CAAC,cAAc,CAAC;IAC5B,IAAI,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;IAClC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,gBAAgB,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,IAAI;2QAsBd,SAAS;;CAuGX,CAAC"}

package/dist/cjs/components/Cell/Cell.js

@@ -12,6 +12,7 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
 const _object_spread = require("@swc/helpers/_/_object_spread");
 const _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 const _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _vkjs = require("@vkontakte/vkjs");
 const _useExternRef = require("../../hooks/useExternRef");
@@ -50,13 +51,14 @@ const Cell = (_param)=>{
     const Component = selectable ? 'label' : ComponentProps;
     const platform = (0, _usePlatform.usePlatform)();
     const rootElRef = (0, _useExternRef.useExternRef)(getRootRef);
-    const dragger = draggable ? /*#__PURE__*/ _react.createElement(_CellDragger.CellDragger, {
+    const dragger = draggable ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_CellDragger.CellDragger, {
         elRef: rootElRef,
         className: "vkuiCell__dragger",
         disabled: disabled,
         onDragStateChange: setDragging,
-        onDragFinish: onDragFinish
-    }, draggerLabel) : null;
+        onDragFinish: onDragFinish,
+        children: draggerLabel
+    }) : null;
     let checkbox;
     if (selectable) {
         const checkboxProps = {
@@ -67,7 +69,7 @@ const Cell = (_param)=>{
             disabled,
             onChange
         };
-        checkbox = /*#__PURE__*/ _react.createElement(_CellCheckbox.CellCheckbox, _object_spread._({
+        checkbox = /*#__PURE__*/ (0, _jsxruntime.jsx)(_CellCheckbox.CellCheckbox, _object_spread._({
             className: "vkuiCell__checkbox"
         }, checkboxProps));
     }
@@ -80,33 +82,46 @@ const Cell = (_param)=>{
     }, restProps), {
         className: "vkuiCell__content",
         Component: Component,
-        before: /*#__PURE__*/ _react.createElement(_react.Fragment, null, draggable && platform !== 'ios' && dragger, selectable && checkbox, before),
-        after: /*#__PURE__*/ _react.createElement(_react.Fragment, null, draggable && platform === 'ios' && dragger, after)
+        before: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_react.Fragment, {
+            children: [
+                draggable && platform !== 'ios' && dragger,
+                selectable && checkbox,
+                before
+            ]
+        }),
+        after: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_react.Fragment, {
+            children: [
+                draggable && platform === 'ios' && dragger,
+                after
+            ]
+        })
     });
     if (restProps.onClick) {
         simpleCellProps.disabled = simpleCellDisabled;
     }
     if (removable) {
-        return /*#__PURE__*/ _react.createElement(_Removable.Removable, {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Removable.Removable, {
             className: (0, _vkjs.classNames)(cellClasses, className),
             style: style,
             getRootRef: rootElRef,
             removePlaceholder: removePlaceholder,
             onRemove: (e)=>onRemove(e, rootElRef.current),
             toggleButtonTestId: toggleButtonTestId,
-            removeButtonTestId: removeButtonTestId
-        }, platform === 'ios' ? ({ isRemoving })=>{
-            if (simpleCellProps.onClick) {
-                simpleCellProps.disabled = isRemoving || !simpleCellProps.disabled;
-            }
-            return /*#__PURE__*/ _react.createElement(_SimpleCell.SimpleCell, simpleCellProps);
-        } : /*#__PURE__*/ _react.createElement(_SimpleCell.SimpleCell, simpleCellProps));
+            removeButtonTestId: removeButtonTestId,
+            children: platform === 'ios' ? ({ isRemoving })=>{
+                if (simpleCellProps.onClick) {
+                    simpleCellProps.disabled = isRemoving || !simpleCellProps.disabled;
+                }
+                return /*#__PURE__*/ (0, _jsxruntime.jsx)(_SimpleCell.SimpleCell, _object_spread._({}, simpleCellProps));
+            } : /*#__PURE__*/ (0, _jsxruntime.jsx)(_SimpleCell.SimpleCell, _object_spread._({}, simpleCellProps))
+        });
     }
-    return /*#__PURE__*/ _react.createElement("div", {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
         className: (0, _vkjs.classNames)(cellClasses, className),
         style: style,
-        ref: rootElRef
-    }, /*#__PURE__*/ _react.createElement(_SimpleCell.SimpleCell, simpleCellProps));
+        ref: rootElRef,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_SimpleCell.SimpleCell, _object_spread._({}, simpleCellProps))
+    });
 };
 Cell.Checkbox = _CellCheckbox.CellCheckbox;
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Cell/Cell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport type { SwappedItemRange } from '../../hooks/useDraggableWithDomApi';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HasRootRef } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { SimpleCell, SimpleCellProps } from '../SimpleCell/SimpleCell';\nimport { CellCheckbox, CellCheckboxProps } from './CellCheckbox/CellCheckbox';\nimport { CellDragger } from './CellDragger/CellDragger';\nimport { DEFAULT_DRAGGABLE_LABEL } from './constants';\nimport styles from './Cell.module.css';\n\nexport interface CellProps\n  extends Omit<SimpleCellProps, 'getRootRef'>,\n    RemovableProps,\n    HasRootRef<HTMLDivElement> {\n  mode?: 'removable' | 'selectable';\n  /**\n   * В режиме перетаскивания ячейка перестает быть кликабельной, то есть при клике переданный onClick вызываться не будет\n   */\n  draggable?: boolean;\n  /**\n   * Имя для input в режиме selectable\n   */\n  name?: string;\n  /**\n   * В режиме selectable реагирует на входящие значения пропса cheсked, как зависящий напрямую от входящего значения\n   */\n  checked?: boolean;\n  /**\n   * В режиме selectable реагирует на входящие значения пропса defaultChecked как неконтролируемый компонент\n   */\n  defaultChecked?: boolean;\n  /**\n   * Коллбэк срабатывает при завершении перетаскивания.\n   * **Важно:** режим перетаскивания не меняет порядок ячеек в DOM. В коллбэке есть объект с полями `from` и `to`.\n   * Эти числа нужны для того, чтобы разработчик понимал, с какого индекса на какой произошел переход. В песочнице\n   * есть рабочий пример с обработкой этих чисел и перерисовкой списка.\n   */\n  onDragFinish?: (swappedItemRange: SwappedItemRange) => void;\n  /**\n   * Текст для кнопки перетаскивания ячейки\n   */\n  draggerLabel?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Cell\n */\nexport const Cell = ({\n  mode,\n  onRemove = noop,\n  removePlaceholder = 'Удалить',\n  onDragFinish,\n  before,\n  after,\n  disabled,\n  draggable,\n  Component: ComponentProps,\n  onChange,\n  name,\n  value,\n  checked,\n  defaultChecked,\n  getRootRef,\n  draggerLabel = DEFAULT_DRAGGABLE_LABEL,\n  className,\n  style,\n  toggleButtonTestId,\n  removeButtonTestId,\n  ...restProps\n}: CellProps) => {\n  const [dragging, setDragging] = React.useState(false);\n  const selectable = mode === 'selectable';\n  const removable = mode === 'removable';\n  const Component = selectable ? 'label' : ComponentProps;\n\n  const platform = usePlatform();\n\n  const rootElRef = useExternRef(getRootRef);\n\n  const dragger = draggable ? (\n    <CellDragger\n      elRef={rootElRef}\n      className={styles['Cell__dragger']}\n      disabled={disabled}\n      onDragStateChange={setDragging}\n      onDragFinish={onDragFinish}\n    >\n      {draggerLabel}\n    </CellDragger>\n  ) : null;\n\n  let checkbox;\n  if (selectable) {\n    const checkboxProps: CellCheckboxProps = {\n      name,\n      value,\n      defaultChecked,\n      checked,\n      disabled,\n      onChange,\n    };\n    checkbox = <CellCheckbox className={styles['Cell__checkbox']} {...checkboxProps} />;\n  }\n\n  const simpleCellDisabled =\n    (draggable && !selectable) || (removable && !restProps.onClick) || disabled;\n  const hasActive = !simpleCellDisabled && !dragging;\n\n  const cellClasses = classNames(\n    styles['Cell'],\n    dragging && styles['Cell--dragging'],\n    platform === 'ios' && styles['Cell--ios'],\n    removable && styles['Cell--removable'],\n    Component === 'label' && styles['Cell--selectable'],\n    disabled && styles['Cell--disabled'],\n  );\n\n  const simpleCellProps: SimpleCellProps = {\n    hasActive: hasActive,\n    hasHover: hasActive && !removable,\n    ...restProps,\n    className: styles['Cell__content'],\n    Component: Component,\n    before: (\n      <React.Fragment>\n        {draggable && platform !== 'ios' && dragger}\n        {selectable && checkbox}\n        {before}\n      </React.Fragment>\n    ),\n    after: (\n      <React.Fragment>\n        {draggable && platform === 'ios' && dragger}\n        {after}\n      </React.Fragment>\n    ),\n  };\n\n  if (restProps.onClick) {\n    simpleCellProps.disabled = simpleCellDisabled;\n  }\n\n  if (removable) {\n    return (\n      <Removable\n        className={classNames(cellClasses, className)}\n        style={style}\n        getRootRef={rootElRef}\n        removePlaceholder={removePlaceholder}\n        onRemove={(e) => onRemove(e, rootElRef.current)}\n        toggleButtonTestId={toggleButtonTestId}\n        removeButtonTestId={removeButtonTestId}\n      >\n        {platform === 'ios' ? (\n          ({ isRemoving }) => {\n            if (simpleCellProps.onClick) {\n              simpleCellProps.disabled = isRemoving || !simpleCellProps.disabled;\n            }\n            return <SimpleCell {...simpleCellProps} />;\n          }\n        ) : (\n          <SimpleCell {...simpleCellProps} />\n        )}\n      </Removable>\n    );\n  }\n\n  return (\n    <div className={classNames(cellClasses, className)} style={style} ref={rootElRef}>\n      <SimpleCell {...simpleCellProps} />\n    </div>\n  );\n};\n\nCell.Checkbox = CellCheckbox;\n"],"names":["Cell","mode","onRemove","noop","removePlaceholder","onDragFinish","before","after","disabled","draggable","Component","ComponentProps","onChange","name","value","checked","defaultChecked","getRootRef","draggerLabel","DEFAULT_DRAGGABLE_LABEL","className","style","toggleButtonTestId","removeButtonTestId","restProps","dragging","setDragging","React","useState","selectable","removable","platform","usePlatform","rootElRef","useExternRef","dragger","CellDragger","elRef","onDragStateChange","checkbox","checkboxProps","CellCheckbox","simpleCellDisabled","onClick","hasActive","cellClasses","classNames","simpleCellProps","hasHover","Fragment","Removable","e","current","isRemoving","SimpleCell","div","ref","Checkbox"],"mappings":";;;;+BAkDaA;;;eAAAA;;;;;;;iEAlDU;sBACU;8BAEJ;6BACD;2BAEc;4BACE;8BACI;6BACpB;2BACY;AAwCjC,MAAMA,OAAO;QAAC,EACnBC,IAAI,EACJC,WAAWC,UAAI,EACfC,oBAAoB,SAAS,EAC7BC,YAAY,EACZC,MAAM,EACNC,KAAK,EACLC,QAAQ,EACRC,SAAS,EACTC,WAAWC,cAAc,EACzBC,QAAQ,EACRC,IAAI,EACJC,KAAK,EACLC,OAAO,EACPC,cAAc,EACdC,UAAU,EACVC,eAAeC,kCAAuB,EACtCC,SAAS,EACTC,KAAK,EACLC,kBAAkB,EAClBC,kBAAkB,EAER,WADPC;QApBHvB;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;QACAC;;IAGA,MAAM,CAACE,UAAUC,YAAY,GAAGC,OAAMC,QAAQ,CAAC;IAC/C,MAAMC,aAAa5B,SAAS;IAC5B,MAAM6B,YAAY7B,SAAS;IAC3B,MAAMS,YAAYmB,aAAa,UAAUlB;IAEzC,MAAMoB,WAAWC,IAAAA,wBAAW;IAE5B,MAAMC,YAAYC,IAAAA,0BAAY,EAACjB;IAE/B,MAAMkB,UAAU1B,0BACd,qBAAC2B,wBAAW;QACVC,OAAOJ;QACPb,SAAS;QACTZ,UAAUA;QACV8B,mBAAmBZ;QACnBrB,cAAcA;OAEba,gBAED;IAEJ,IAAIqB;IACJ,IAAIV,YAAY;QACd,MAAMW,gBAAmC;YACvC3B;YACAC;YACAE;YACAD;YACAP;YACAI;QACF;QACA2B,yBAAW,qBAACE,0BAAY;YAACrB,SAAS;WAAgCoB;IACpE;IAEA,MAAME,qBACJ,AAACjC,aAAa,CAACoB,cAAgBC,aAAa,CAACN,UAAUmB,OAAO,IAAKnC;IACrE,MAAMoC,YAAY,CAACF,sBAAsB,CAACjB;IAE1C,MAAMoB,cAAcC,IAAAA,gBAAU,cAE5BrB,kCACAM,aAAa,0BACbD,oCACApB,cAAc,mCACdF;IAGF,MAAMuC,kBAAmC;QACvCH,WAAWA;QACXI,UAAUJ,aAAa,CAACd;OACrBN;QACHJ,SAAS;QACTV,WAAWA;QACXJ,sBACE,qBAACqB,OAAMsB,QAAQ,QACZxC,aAAasB,aAAa,SAASI,SACnCN,cAAcU,UACdjC;QAGLC,qBACE,qBAACoB,OAAMsB,QAAQ,QACZxC,aAAasB,aAAa,SAASI,SACnC5B;;IAKP,IAAIiB,UAAUmB,OAAO,EAAE;QACrBI,gBAAgBvC,QAAQ,GAAGkC;IAC7B;IAEA,IAAIZ,WAAW;QACb,qBACE,qBAACoB,oBAAS;YACR9B,WAAW0B,IAAAA,gBAAU,EAACD,aAAazB;YACnCC,OAAOA;YACPJ,YAAYgB;YACZ7B,mBAAmBA;YACnBF,UAAU,CAACiD,IAAMjD,SAASiD,GAAGlB,UAAUmB,OAAO;YAC9C9B,oBAAoBA;YACpBC,oBAAoBA;WAEnBQ,aAAa,QACZ,CAAC,EAAEsB,UAAU,EAAE;YACb,IAAIN,gBAAgBJ,OAAO,EAAE;gBAC3BI,gBAAgBvC,QAAQ,GAAG6C,cAAc,CAACN,gBAAgBvC,QAAQ;YACpE;YACA,qBAAO,qBAAC8C,sBAAU,EAAKP;QACzB,kBAEA,qBAACO,sBAAU,EAAKP;IAIxB;IAEA,qBACE,qBAACQ;QAAInC,WAAW0B,IAAAA,gBAAU,EAACD,aAAazB;QAAYC,OAAOA;QAAOmC,KAAKvB;qBACrE,qBAACqB,sBAAU,EAAKP;AAGtB;AAEA/C,KAAKyD,QAAQ,GAAGhB,0BAAY"}
+{"version":3,"sources":["../../../../src/components/Cell/Cell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport type { SwappedItemRange } from '../../hooks/useDraggableWithDomApi';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HasRootRef } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { SimpleCell, SimpleCellProps } from '../SimpleCell/SimpleCell';\nimport { CellCheckbox, CellCheckboxProps } from './CellCheckbox/CellCheckbox';\nimport { CellDragger } from './CellDragger/CellDragger';\nimport { DEFAULT_DRAGGABLE_LABEL } from './constants';\nimport styles from './Cell.module.css';\n\nexport interface CellProps\n  extends Omit<SimpleCellProps, 'getRootRef'>,\n    RemovableProps,\n    HasRootRef<HTMLDivElement> {\n  mode?: 'removable' | 'selectable';\n  /**\n   * В режиме перетаскивания ячейка перестает быть кликабельной, то есть при клике переданный onClick вызываться не будет\n   */\n  draggable?: boolean;\n  /**\n   * Имя для input в режиме selectable\n   */\n  name?: string;\n  /**\n   * В режиме selectable реагирует на входящие значения пропса cheсked, как зависящий напрямую от входящего значения\n   */\n  checked?: boolean;\n  /**\n   * В режиме selectable реагирует на входящие значения пропса defaultChecked как неконтролируемый компонент\n   */\n  defaultChecked?: boolean;\n  /**\n   * Коллбэк срабатывает при завершении перетаскивания.\n   * **Важно:** режим перетаскивания не меняет порядок ячеек в DOM. В коллбэке есть объект с полями `from` и `to`.\n   * Эти числа нужны для того, чтобы разработчик понимал, с какого индекса на какой произошел переход. В песочнице\n   * есть рабочий пример с обработкой этих чисел и перерисовкой списка.\n   */\n  onDragFinish?: (swappedItemRange: SwappedItemRange) => void;\n  /**\n   * Текст для кнопки перетаскивания ячейки\n   */\n  draggerLabel?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Cell\n */\nexport const Cell = ({\n  mode,\n  onRemove = noop,\n  removePlaceholder = 'Удалить',\n  onDragFinish,\n  before,\n  after,\n  disabled,\n  draggable,\n  Component: ComponentProps,\n  onChange,\n  name,\n  value,\n  checked,\n  defaultChecked,\n  getRootRef,\n  draggerLabel = DEFAULT_DRAGGABLE_LABEL,\n  className,\n  style,\n  toggleButtonTestId,\n  removeButtonTestId,\n  ...restProps\n}: CellProps) => {\n  const [dragging, setDragging] = React.useState(false);\n  const selectable = mode === 'selectable';\n  const removable = mode === 'removable';\n  const Component = selectable ? 'label' : ComponentProps;\n\n  const platform = usePlatform();\n\n  const rootElRef = useExternRef(getRootRef);\n\n  const dragger = draggable ? (\n    <CellDragger\n      elRef={rootElRef}\n      className={styles['Cell__dragger']}\n      disabled={disabled}\n      onDragStateChange={setDragging}\n      onDragFinish={onDragFinish}\n    >\n      {draggerLabel}\n    </CellDragger>\n  ) : null;\n\n  let checkbox;\n  if (selectable) {\n    const checkboxProps: CellCheckboxProps = {\n      name,\n      value,\n      defaultChecked,\n      checked,\n      disabled,\n      onChange,\n    };\n    checkbox = <CellCheckbox className={styles['Cell__checkbox']} {...checkboxProps} />;\n  }\n\n  const simpleCellDisabled =\n    (draggable && !selectable) || (removable && !restProps.onClick) || disabled;\n  const hasActive = !simpleCellDisabled && !dragging;\n\n  const cellClasses = classNames(\n    styles['Cell'],\n    dragging && styles['Cell--dragging'],\n    platform === 'ios' && styles['Cell--ios'],\n    removable && styles['Cell--removable'],\n    Component === 'label' && styles['Cell--selectable'],\n    disabled && styles['Cell--disabled'],\n  );\n\n  const simpleCellProps: SimpleCellProps = {\n    hasActive: hasActive,\n    hasHover: hasActive && !removable,\n    ...restProps,\n    className: styles['Cell__content'],\n    Component: Component,\n    before: (\n      <React.Fragment>\n        {draggable && platform !== 'ios' && dragger}\n        {selectable && checkbox}\n        {before}\n      </React.Fragment>\n    ),\n    after: (\n      <React.Fragment>\n        {draggable && platform === 'ios' && dragger}\n        {after}\n      </React.Fragment>\n    ),\n  };\n\n  if (restProps.onClick) {\n    simpleCellProps.disabled = simpleCellDisabled;\n  }\n\n  if (removable) {\n    return (\n      <Removable\n        className={classNames(cellClasses, className)}\n        style={style}\n        getRootRef={rootElRef}\n        removePlaceholder={removePlaceholder}\n        onRemove={(e) => onRemove(e, rootElRef.current)}\n        toggleButtonTestId={toggleButtonTestId}\n        removeButtonTestId={removeButtonTestId}\n      >\n        {platform === 'ios' ? (\n          ({ isRemoving }) => {\n            if (simpleCellProps.onClick) {\n              simpleCellProps.disabled = isRemoving || !simpleCellProps.disabled;\n            }\n            return <SimpleCell {...simpleCellProps} />;\n          }\n        ) : (\n          <SimpleCell {...simpleCellProps} />\n        )}\n      </Removable>\n    );\n  }\n\n  return (\n    <div className={classNames(cellClasses, className)} style={style} ref={rootElRef}>\n      <SimpleCell {...simpleCellProps} />\n    </div>\n  );\n};\n\nCell.Checkbox = CellCheckbox;\n"],"names":["Cell","mode","onRemove","noop","removePlaceholder","onDragFinish","before","after","disabled","draggable","Component","ComponentProps","onChange","name","value","checked","defaultChecked","getRootRef","draggerLabel","DEFAULT_DRAGGABLE_LABEL","className","style","toggleButtonTestId","removeButtonTestId","restProps","dragging","setDragging","React","useState","selectable","removable","platform","usePlatform","rootElRef","useExternRef","dragger","CellDragger","elRef","onDragStateChange","checkbox","checkboxProps","CellCheckbox","simpleCellDisabled","onClick","hasActive","cellClasses","classNames","simpleCellProps","hasHover","Fragment","Removable","e","current","isRemoving","SimpleCell","div","ref","Checkbox"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAkDaA;;;eAAAA;;;;;;;;iEAlDU;sBACU;8BAEJ;6BACD;2BAEc;4BACE;8BACI;6BACpB;2BACY;AAwCjC,MAAMA,OAAO;QAAC,EACnBC,IAAI,EACJC,WAAWC,UAAI,EACfC,oBAAoB,SAAS,EAC7BC,YAAY,EACZC,MAAM,EACNC,KAAK,EACLC,QAAQ,EACRC,SAAS,EACTC,WAAWC,cAAc,EACzBC,QAAQ,EACRC,IAAI,EACJC,KAAK,EACLC,OAAO,EACPC,cAAc,EACdC,UAAU,EACVC,eAAeC,kCAAuB,EACtCC,SAAS,EACTC,KAAK,EACLC,kBAAkB,EAClBC,kBAAkB,EAER,WADPC;QApBHvB;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;QACAC;;IAGA,MAAM,CAACE,UAAUC,YAAY,GAAGC,OAAMC,QAAQ,CAAC;IAC/C,MAAMC,aAAa5B,SAAS;IAC5B,MAAM6B,YAAY7B,SAAS;IAC3B,MAAMS,YAAYmB,aAAa,UAAUlB;IAEzC,MAAMoB,WAAWC,IAAAA,wBAAW;IAE5B,MAAMC,YAAYC,IAAAA,0BAAY,EAACjB;IAE/B,MAAMkB,UAAU1B,0BACd,qBAAC2B,wBAAW;QACVC,OAAOJ;QACPb,SAAS;QACTZ,UAAUA;QACV8B,mBAAmBZ;QACnBrB,cAAcA;kBAEba;SAED;IAEJ,IAAIqB;IACJ,IAAIV,YAAY;QACd,MAAMW,gBAAmC;YACvC3B;YACAC;YACAE;YACAD;YACAP;YACAI;QACF;QACA2B,yBAAW,qBAACE,0BAAY;YAACrB,SAAS;WAAgCoB;IACpE;IAEA,MAAME,qBACJ,AAACjC,aAAa,CAACoB,cAAgBC,aAAa,CAACN,UAAUmB,OAAO,IAAKnC;IACrE,MAAMoC,YAAY,CAACF,sBAAsB,CAACjB;IAE1C,MAAMoB,cAAcC,IAAAA,gBAAU,cAE5BrB,kCACAM,aAAa,0BACbD,oCACApB,cAAc,mCACdF;IAGF,MAAMuC,kBAAmC;QACvCH,WAAWA;QACXI,UAAUJ,aAAa,CAACd;OACrBN;QACHJ,SAAS;QACTV,WAAWA;QACXJ,sBACE,sBAACqB,OAAMsB,QAAQ;;gBACZxC,aAAasB,aAAa,SAASI;gBACnCN,cAAcU;gBACdjC;;;QAGLC,qBACE,sBAACoB,OAAMsB,QAAQ;;gBACZxC,aAAasB,aAAa,SAASI;gBACnC5B;;;;IAKP,IAAIiB,UAAUmB,OAAO,EAAE;QACrBI,gBAAgBvC,QAAQ,GAAGkC;IAC7B;IAEA,IAAIZ,WAAW;QACb,qBACE,qBAACoB,oBAAS;YACR9B,WAAW0B,IAAAA,gBAAU,EAACD,aAAazB;YACnCC,OAAOA;YACPJ,YAAYgB;YACZ7B,mBAAmBA;YACnBF,UAAU,CAACiD,IAAMjD,SAASiD,GAAGlB,UAAUmB,OAAO;YAC9C9B,oBAAoBA;YACpBC,oBAAoBA;sBAEnBQ,aAAa,QACZ,CAAC,EAAEsB,UAAU,EAAE;gBACb,IAAIN,gBAAgBJ,OAAO,EAAE;oBAC3BI,gBAAgBvC,QAAQ,GAAG6C,cAAc,CAACN,gBAAgBvC,QAAQ;gBACpE;gBACA,qBAAO,qBAAC8C,sBAAU,uBAAKP;YACzB,kBAEA,qBAACO,sBAAU,uBAAKP;;IAIxB;IAEA,qBACE,qBAACQ;QAAInC,WAAW0B,IAAAA,gBAAU,EAACD,aAAazB;QAAYC,OAAOA;QAAOmC,KAAKvB;kBACrE,cAAA,qBAACqB,sBAAU,uBAAKP;;AAGtB;AAEA/C,KAAKyD,QAAQ,GAAGhB,0BAAY"}

package/dist/cjs/components/Cell/CellCheckbox/CellCheckbox.d.ts

@@ -7,5 +7,5 @@ export interface CellCheckboxProps extends Pick<CellProps, 'defaultChecked' | 'c
      */
     type?: 'auto' | 'circle' | 'square';
 }
-export declare const CellCheckbox: ({ getRootRef, getRef, className, style, type, ...restProps }: CellCheckboxProps) => React.JSX.Element;
+export declare const CellCheckbox: ({ getRootRef, getRef, className, style, type, ...restProps }: CellCheckboxProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=CellCheckbox.d.ts.map

package/dist/cjs/components/Cell/CellCheckbox/CellCheckbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CellCheckbox.d.ts","sourceRoot":"","sources":["../../../../../src/components/Cell/CellCheckbox/CellCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAGpD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAyBpC,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,SAAS,EAAE,gBAAgB,GAAG,SAAS,CAAC,EACnD,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,UAAU,CAAC,eAAe,CAAC,EAC3B,MAAM,CAAC,gBAAgB,CAAC;IAC1B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAAC;CACrC;AAED,eAAO,MAAM,YAAY,iEAOtB,iBAAiB,sBA6BnB,CAAC"}
+{"version":3,"file":"CellCheckbox.d.ts","sourceRoot":"","sources":["../../../../../src/components/Cell/CellCheckbox/CellCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAGpD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAiCpC,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,SAAS,EAAE,gBAAgB,GAAG,SAAS,CAAC,EACnD,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,UAAU,CAAC,eAAe,CAAC,EAC3B,MAAM,CAAC,gBAAgB,CAAC;IAC1B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAAC;CACrC;AAED,eAAO,MAAM,YAAY,iEAOtB,iBAAiB,4CA6BnB,CAAC"}