@vkontakte/vkui 6.0.3 → 6.1.0

package/dist/cssm/components/SelectMimicry/SelectMimicry.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SelectMimicry/SelectMimicry.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAutoFocus } from '../../hooks/useAutoFocus';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { getFormFieldModeFromSelectType } from '../../lib/select';\nimport { HasAlign, HasRootRef } from '../../types';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport type { SelectType } from '../Select/Select';\nimport { SelectTypography } from '../SelectTypography/SelectTypography';\nimport styles from '../Select/Select.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Select--sizeY-none'],\n  ['compact']: styles['Select--sizeY-compact'],\n};\n\nexport interface SelectMimicryProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasAlign,\n    Pick<FormFieldProps, 'before' | 'after' | 'status'> {\n  multiline?: boolean;\n  disabled?: boolean;\n  selectType?: SelectType;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SelectMimicry\n */\nexport const SelectMimicry = ({\n  tabIndex = 0,\n  placeholder,\n  children,\n  align,\n  getRootRef,\n  multiline,\n  disabled,\n  onClick,\n  before,\n  after = <DropdownIcon />,\n  selectType = 'default',\n  status,\n  className,\n  autoFocus,\n  ...restProps\n}: SelectMimicryProps) => {\n  const rootRef = useExternRef(getRootRef);\n\n  const { sizeY = 'none' } = useAdaptivity();\n  const title = children || placeholder;\n\n  useAutoFocus(rootRef, autoFocus);\n\n  return (\n    <FormField\n      {...restProps}\n      tabIndex={disabled ? undefined : tabIndex}\n      className={classNames(\n        styles['Select'],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        !children && styles['Select--empty'],\n        multiline && styles['Select--multiline'],\n        align === 'center' && styles['Select--align-center'],\n        align === 'right' && styles['Select--align-right'],\n        before && styles['Select--hasBefore'],\n        className,\n      )}\n      getRootRef={rootRef}\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled}\n      before={before}\n      after={after}\n      mode={getFormFieldModeFromSelectType(selectType)}\n      status={status}\n    >\n      <div className={styles['Select__container']}>\n        <SelectTypography selectType={selectType} className={styles['Select__title']}>\n          {title}\n        </SelectTypography>\n      </div>\n    </FormField>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useAutoFocus","useExternRef","getFormFieldModeFromSelectType","DropdownIcon","FormField","SelectTypography","styles","sizeYClassNames","none","SelectMimicry","tabIndex","placeholder","children","align","getRootRef","multiline","disabled","onClick","before","after","selectType","status","className","autoFocus","restProps","rootRef","sizeY","title","undefined","mode","div"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,8BAA8B,QAAQ,mBAAmB;AAElE,SAASC,YAAY,QAAQ,+BAA+B;AAC5D,SAASC,SAAS,QAAwB,yBAAyB;AAEnE,SAASC,gBAAgB,QAAQ,uCAAuC;AACxE,OAAOC,YAAY,8BAA8B;AAEjD,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,qBAAqB;IAClC,CAAC,UAAU,EAAEA,MAAM,CAAC,wBAAwB;AAC9C;AAYA;;CAEC,GACD,OAAO,MAAMG,gBAAgB,CAAC,EAC5BC,WAAW,CAAC,EACZC,WAAW,EACXC,QAAQ,EACRC,KAAK,EACLC,UAAU,EACVC,SAAS,EACTC,QAAQ,EACRC,OAAO,EACPC,MAAM,EACNC,sBAAQ,oBAAChB,mBAAe,EACxBiB,aAAa,SAAS,EACtBC,MAAM,EACNC,SAAS,EACTC,SAAS,EACT,GAAGC,WACgB;IACnB,MAAMC,UAAUxB,aAAaa;IAE7B,MAAM,EAAEY,QAAQ,MAAM,EAAE,GAAG3B;IAC3B,MAAM4B,QAAQf,YAAYD;IAE1BX,aAAayB,SAASF;IAEtB,qBACE,oBAACnB;QACE,GAAGoB,SAAS;QACbd,UAAUM,WAAWY,YAAYlB;QACjCY,WAAWxB,WACTQ,MAAM,CAAC,SAAS,EAChBoB,UAAU,aAAanB,eAAe,CAACmB,MAAM,EAC7C,CAACd,YAAYN,MAAM,CAAC,gBAAgB,EACpCS,aAAaT,MAAM,CAAC,oBAAoB,EACxCO,UAAU,YAAYP,MAAM,CAAC,uBAAuB,EACpDO,UAAU,WAAWP,MAAM,CAAC,sBAAsB,EAClDY,UAAUZ,MAAM,CAAC,oBAAoB,EACrCgB;QAEFR,YAAYW;QACZR,SAASD,WAAWY,YAAYX;QAChCD,UAAUA;QACVE,QAAQA;QACRC,OAAOA;QACPU,MAAM3B,+BAA+BkB;QACrCC,QAAQA;qBAER,oBAACS;QAAIR,WAAWhB,MAAM,CAAC,oBAAoB;qBACzC,oBAACD;QAAiBe,YAAYA;QAAYE,WAAWhB,MAAM,CAAC,gBAAgB;OACzEqB;AAKX,EAAE"}
+{"version":3,"sources":["../../../../src/components/SelectMimicry/SelectMimicry.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAutoFocus } from '../../hooks/useAutoFocus';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { getFormFieldModeFromSelectType } from '../../lib/select';\nimport { HasAlign, HasRootRef } from '../../types';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport type { SelectType } from '../Select/Select';\nimport { SelectTypography } from '../SelectTypography/SelectTypography';\nimport styles from '../Select/Select.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Select--sizeY-none'],\n  ['compact']: styles['Select--sizeY-compact'],\n};\n\nexport interface SelectMimicryProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasAlign,\n    Pick<FormFieldProps, 'before' | 'after' | 'status'> {\n  multiline?: boolean;\n  disabled?: boolean;\n  selectType?: SelectType;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SelectMimicry\n */\nexport const SelectMimicry = ({\n  tabIndex = 0,\n  placeholder,\n  children,\n  align,\n  getRootRef,\n  multiline,\n  disabled,\n  onClick,\n  before,\n  after = <DropdownIcon />,\n  selectType = 'default',\n  status,\n  className,\n  autoFocus,\n  ...restProps\n}: SelectMimicryProps) => {\n  const rootRef = useExternRef(getRootRef);\n\n  const { sizeY = 'none' } = useAdaptivity();\n  const title = children || placeholder;\n\n  useAutoFocus(rootRef, autoFocus);\n\n  return (\n    <FormField\n      {...restProps}\n      tabIndex={disabled ? undefined : tabIndex}\n      className={classNames(\n        styles['Select'],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        !children && styles['Select--empty'],\n        multiline && styles['Select--multiline'],\n        align === 'center' && styles['Select--align-center'],\n        align === 'right' && styles['Select--align-right'],\n        before && styles['Select--hasBefore'],\n        className,\n      )}\n      getRootRef={rootRef}\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled}\n      before={before}\n      after={after}\n      mode={getFormFieldModeFromSelectType(selectType)}\n      status={status}\n    >\n      <div className={styles['Select__container']}>\n        <SelectTypography selectType={selectType} className={styles['Select__title']}>\n          {title}\n        </SelectTypography>\n      </div>\n    </FormField>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useAutoFocus","useExternRef","getFormFieldModeFromSelectType","DropdownIcon","FormField","SelectTypography","styles","sizeYClassNames","none","SelectMimicry","tabIndex","placeholder","children","align","getRootRef","multiline","disabled","onClick","before","after","selectType","status","className","autoFocus","restProps","rootRef","sizeY","title","undefined","mode","div"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,8BAA8B,QAAQ,mBAAmB;AAElE,SAASC,YAAY,QAAQ,+BAA+B;AAC5D,SAASC,SAAS,QAAwB,yBAAyB;AAEnE,SAASC,gBAAgB,QAAQ,uCAAuC;AACxE,OAAOC,YAAY,8BAA8B;AAEjD,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,qBAAqB;IAClC,CAAC,UAAU,EAAEA,MAAM,CAAC,wBAAwB;AAC9C;AAYA;;CAEC,GACD,OAAO,MAAMG,gBAAgB,CAAC,EAC5BC,WAAW,CAAC,EACZC,WAAW,EACXC,QAAQ,EACRC,KAAK,EACLC,UAAU,EACVC,SAAS,EACTC,QAAQ,EACRC,OAAO,EACPC,MAAM,EACNC,sBAAQ,KAAChB,iBAAe,EACxBiB,aAAa,SAAS,EACtBC,MAAM,EACNC,SAAS,EACTC,SAAS,EACT,GAAGC,WACgB;IACnB,MAAMC,UAAUxB,aAAaa;IAE7B,MAAM,EAAEY,QAAQ,MAAM,EAAE,GAAG3B;IAC3B,MAAM4B,QAAQf,YAAYD;IAE1BX,aAAayB,SAASF;IAEtB,qBACE,KAACnB;QACE,GAAGoB,SAAS;QACbd,UAAUM,WAAWY,YAAYlB;QACjCY,WAAWxB,WACTQ,MAAM,CAAC,SAAS,EAChBoB,UAAU,aAAanB,eAAe,CAACmB,MAAM,EAC7C,CAACd,YAAYN,MAAM,CAAC,gBAAgB,EACpCS,aAAaT,MAAM,CAAC,oBAAoB,EACxCO,UAAU,YAAYP,MAAM,CAAC,uBAAuB,EACpDO,UAAU,WAAWP,MAAM,CAAC,sBAAsB,EAClDY,UAAUZ,MAAM,CAAC,oBAAoB,EACrCgB;QAEFR,YAAYW;QACZR,SAASD,WAAWY,YAAYX;QAChCD,UAAUA;QACVE,QAAQA;QACRC,OAAOA;QACPU,MAAM3B,+BAA+BkB;QACrCC,QAAQA;kBAER,cAAA,KAACS;YAAIR,WAAWhB,MAAM,CAAC,oBAAoB;sBACzC,cAAA,KAACD;gBAAiBe,YAAYA;gBAAYE,WAAWhB,MAAM,CAAC,gBAAgB;0BACzEqB;;;;AAKX,EAAE"}

package/dist/cssm/components/SelectTypography/SelectTypography.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { HasChildren, HTMLAttributesWithRootRef } from '../../types';
 import type { SelectType } from '../Select/Select';
 export interface SelectTypographyProps extends HTMLAttributesWithRootRef<HTMLSpanElement>, HasChildren {
@@ -7,5 +6,5 @@ export interface SelectTypographyProps extends HTMLAttributesWithRootRef<HTMLSpa
 /**
  * @private
  */
-export declare const SelectTypography: ({ selectType, children, ...restProps }: SelectTypographyProps) => React.JSX.Element;
+export declare const SelectTypography: ({ selectType, children, ...restProps }: SelectTypographyProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SelectTypography.d.ts.map

package/dist/cssm/components/SelectTypography/SelectTypography.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectTypography.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectTypography/SelectTypography.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AACrE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAGnD,MAAM,WAAW,qBACf,SAAQ,yBAAyB,CAAC,eAAe,CAAC,EAChD,WAAW;IACb,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,2CAI1B,qBAAqB,sBAMvB,CAAC"}
+{"version":3,"file":"SelectTypography.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectTypography/SelectTypography.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AACrE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAGnD,MAAM,WAAW,qBACf,SAAQ,yBAAyB,CAAC,eAAe,CAAC,EAChD,WAAW;IACb,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,2CAI1B,qBAAqB,4CAMvB,CAAC"}

package/dist/cssm/components/SelectTypography/SelectTypography.js

@@ -1,12 +1,13 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Text } from '../Typography/Text/Text';
 /**
  * @private
  */ export const SelectTypography = ({ selectType = 'default', children, ...restProps })=>{
-    return /*#__PURE__*/ React.createElement(Text, {
+    return /*#__PURE__*/ _jsx(Text, {
         weight: selectType === 'accent' ? '2' : '3',
-        ...restProps
-    }, children);
+        ...restProps,
+        children: children
+    });
 };
 
 //# sourceMappingURL=SelectTypography.js.map

package/dist/cssm/components/SelectTypography/SelectTypography.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SelectTypography/SelectTypography.tsx"],"sourcesContent":["import * as React from 'react';\nimport { HasChildren, HTMLAttributesWithRootRef } from '../../types';\nimport type { SelectType } from '../Select/Select';\nimport { Text } from '../Typography/Text/Text';\n\nexport interface SelectTypographyProps\n  extends HTMLAttributesWithRootRef<HTMLSpanElement>,\n    HasChildren {\n  selectType?: SelectType;\n}\n\n/**\n * @private\n */\nexport const SelectTypography = ({\n  selectType = 'default',\n  children,\n  ...restProps\n}: SelectTypographyProps) => {\n  return (\n    <Text weight={selectType === 'accent' ? '2' : '3'} {...restProps}>\n      {children}\n    </Text>\n  );\n};\n"],"names":["React","Text","SelectTypography","selectType","children","restProps","weight"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,SAASC,IAAI,QAAQ,0BAA0B;AAQ/C;;CAEC,GACD,OAAO,MAAMC,mBAAmB,CAAC,EAC/BC,aAAa,SAAS,EACtBC,QAAQ,EACR,GAAGC,WACmB;IACtB,qBACE,oBAACJ;QAAKK,QAAQH,eAAe,WAAW,MAAM;QAAM,GAAGE,SAAS;OAC7DD;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/components/SelectTypography/SelectTypography.tsx"],"sourcesContent":["import { HasChildren, HTMLAttributesWithRootRef } from '../../types';\nimport type { SelectType } from '../Select/Select';\nimport { Text } from '../Typography/Text/Text';\n\nexport interface SelectTypographyProps\n  extends HTMLAttributesWithRootRef<HTMLSpanElement>,\n    HasChildren {\n  selectType?: SelectType;\n}\n\n/**\n * @private\n */\nexport const SelectTypography = ({\n  selectType = 'default',\n  children,\n  ...restProps\n}: SelectTypographyProps) => {\n  return (\n    <Text weight={selectType === 'accent' ? '2' : '3'} {...restProps}>\n      {children}\n    </Text>\n  );\n};\n"],"names":["Text","SelectTypography","selectType","children","restProps","weight"],"rangeMappings":";;;;;;;;;;","mappings":";AAEA,SAASA,IAAI,QAAQ,0BAA0B;AAQ/C;;CAEC,GACD,OAAO,MAAMC,mBAAmB,CAAC,EAC/BC,aAAa,SAAS,EACtBC,QAAQ,EACR,GAAGC,WACmB;IACtB,qBACE,KAACJ;QAAKK,QAAQH,eAAe,WAAW,MAAM;QAAM,GAAGE,SAAS;kBAC7DD;;AAGP,EAAE"}

package/dist/cssm/components/Separator/Separator.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { HTMLAttributesWithRootRef } from '../../types';
 export interface SeparatorProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     /**
@@ -9,5 +8,5 @@ export interface SeparatorProps extends HTMLAttributesWithRootRef<HTMLDivElement
 /**
  * @see https://vkcom.github.io/VKUI/#/Separator
  */
-export declare const Separator: ({ wide, ...restProps }: SeparatorProps) => React.JSX.Element;
+export declare const Separator: ({ wide, ...restProps }: SeparatorProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Separator.d.ts.map

package/dist/cssm/components/Separator/Separator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Separator.d.ts","sourceRoot":"","sources":["../../../../src/components/Separator/Separator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAIxD,MAAM,WAAW,cAAe,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC/E;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED;;GAEG;AACH,eAAO,MAAM,SAAS,2BAA4B,cAAc,sBAO/D,CAAC"}
+{"version":3,"file":"Separator.d.ts","sourceRoot":"","sources":["../../../../src/components/Separator/Separator.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAIxD,MAAM,WAAW,cAAe,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC/E;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED;;GAEG;AACH,eAAO,MAAM,SAAS,2BAA4B,cAAc,4CAO/D,CAAC"}

package/dist/cssm/components/Separator/Separator.js

@@ -1,14 +1,15 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { classNames } from '@vkontakte/vkjs';
 import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './Separator.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/Separator
- */ export const Separator = ({ wide, ...restProps })=>/*#__PURE__*/ React.createElement(RootComponent, {
+ */ export const Separator = ({ wide, ...restProps })=>/*#__PURE__*/ _jsx(RootComponent, {
         ...restProps,
-        baseClassName: classNames(styles['Separator'], !wide && styles['Separator--padded'])
-    }, /*#__PURE__*/ React.createElement("hr", {
-        className: styles['Separator__in']
-    }));
+        baseClassName: classNames(styles['Separator'], !wide && styles['Separator--padded']),
+        children: /*#__PURE__*/ _jsx("hr", {
+            className: styles['Separator__in']
+        })
+    });
 
 //# sourceMappingURL=Separator.js.map

package/dist/cssm/components/Separator/Separator.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Separator.module.css';\n\nexport interface SeparatorProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * С этим свойством компонент не будет иметь отступы слева и справа\n   */\n  wide?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Separator\n */\nexport const Separator = ({ wide, ...restProps }: SeparatorProps) => (\n  <RootComponent\n    {...restProps}\n    baseClassName={classNames(styles['Separator'], !wide && styles['Separator--padded'])}\n  >\n    <hr className={styles['Separator__in']} />\n  </RootComponent>\n);\n"],"names":["React","classNames","RootComponent","styles","Separator","wide","restProps","baseClassName","hr","className"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,yBAAyB;AAS5C;;CAEC,GACD,OAAO,MAAMC,YAAY,CAAC,EAAEC,IAAI,EAAE,GAAGC,WAA2B,iBAC9D,oBAACJ;QACE,GAAGI,SAAS;QACbC,eAAeN,WAAWE,MAAM,CAAC,YAAY,EAAE,CAACE,QAAQF,MAAM,CAAC,oBAAoB;qBAEnF,oBAACK;QAAGC,WAAWN,MAAM,CAAC,gBAAgB;QAExC"}
+{"version":3,"sources":["../../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Separator.module.css';\n\nexport interface SeparatorProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * С этим свойством компонент не будет иметь отступы слева и справа\n   */\n  wide?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Separator\n */\nexport const Separator = ({ wide, ...restProps }: SeparatorProps) => (\n  <RootComponent\n    {...restProps}\n    baseClassName={classNames(styles['Separator'], !wide && styles['Separator--padded'])}\n  >\n    <hr className={styles['Separator__in']} />\n  </RootComponent>\n);\n"],"names":["classNames","RootComponent","styles","Separator","wide","restProps","baseClassName","hr","className"],"rangeMappings":";;;;;;;;;;;;","mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,yBAAyB;AAS5C;;CAEC,GACD,OAAO,MAAMC,YAAY,CAAC,EAAEC,IAAI,EAAE,GAAGC,WAA2B,iBAC9D,KAACJ;QACE,GAAGI,SAAS;QACbC,eAAeN,WAAWE,MAAM,CAAC,YAAY,EAAE,CAACE,QAAQF,MAAM,CAAC,oBAAoB;kBAEnF,cAAA,KAACK;YAAGC,WAAWN,MAAM,CAAC,gBAAgB;;OAExC"}

package/dist/cssm/components/SimpleCell/Chevron/Chevron.d.ts

@@ -2,5 +2,5 @@ import * as React from 'react';
 export interface ChevronProps extends Omit<React.SVGProps<SVGSVGElement>, 'width' | 'height'> {
     size?: 's' | 'm';
 }
-export declare const Chevron: ({ size, ...restProps }: ChevronProps) => React.JSX.Element;
+export declare const Chevron: ({ size, ...restProps }: ChevronProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Chevron.d.ts.map

package/dist/cssm/components/SimpleCell/Chevron/Chevron.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chevron.d.ts","sourceRoot":"","sources":["../../../../../src/components/SimpleCell/Chevron/Chevron.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC3F,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;CAClB;AAED,eAAO,MAAM,OAAO,2BAAkC,YAAY,sBAIjE,CAAC"}
+{"version":3,"file":"Chevron.d.ts","sourceRoot":"","sources":["../../../../../src/components/SimpleCell/Chevron/Chevron.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC3F,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;CAClB;AAED,eAAO,MAAM,OAAO,2BAAkC,YAAY,4CAIjE,CAAC"}

package/dist/cssm/components/SimpleCell/Chevron/Chevron.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { Icon16Chevron, Icon24ChevronCompactRight } from '@vkontakte/icons';
 const iconSize = {
@@ -6,7 +7,9 @@ const iconSize = {
 };
 export const Chevron = ({ size = 'm', ...restProps })=>{
     const Icon = iconSize[size];
-    return /*#__PURE__*/ React.createElement(Icon, restProps);
+    return /*#__PURE__*/ _jsx(Icon, {
+        ...restProps
+    });
 };
 
 //# sourceMappingURL=Chevron.js.map

package/dist/cssm/components/SimpleCell/Chevron/Chevron.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/SimpleCell/Chevron/Chevron.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Chevron, Icon24ChevronCompactRight } from '@vkontakte/icons';\n\nconst iconSize = {\n  s: Icon16Chevron,\n  m: Icon24ChevronCompactRight,\n};\n\nexport interface ChevronProps extends Omit<React.SVGProps<SVGSVGElement>, 'width' | 'height'> {\n  size?: 's' | 'm';\n}\n\nexport const Chevron = ({ size = 'm', ...restProps }: ChevronProps) => {\n  const Icon = iconSize[size];\n\n  return <Icon {...restProps} />;\n};\n"],"names":["React","Icon16Chevron","Icon24ChevronCompactRight","iconSize","s","m","Chevron","size","restProps","Icon"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,yBAAyB,QAAQ,mBAAmB;AAE5E,MAAMC,WAAW;IACfC,GAAGH;IACHI,GAAGH;AACL;AAMA,OAAO,MAAMI,UAAU,CAAC,EAAEC,OAAO,GAAG,EAAE,GAAGC,WAAyB;IAChE,MAAMC,OAAON,QAAQ,CAACI,KAAK;IAE3B,qBAAO,oBAACE,MAASD;AACnB,EAAE"}
+{"version":3,"sources":["../../../../../src/components/SimpleCell/Chevron/Chevron.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Chevron, Icon24ChevronCompactRight } from '@vkontakte/icons';\n\nconst iconSize = {\n  s: Icon16Chevron,\n  m: Icon24ChevronCompactRight,\n};\n\nexport interface ChevronProps extends Omit<React.SVGProps<SVGSVGElement>, 'width' | 'height'> {\n  size?: 's' | 'm';\n}\n\nexport const Chevron = ({ size = 'm', ...restProps }: ChevronProps) => {\n  const Icon = iconSize[size];\n\n  return <Icon {...restProps} />;\n};\n"],"names":["React","Icon16Chevron","Icon24ChevronCompactRight","iconSize","s","m","Chevron","size","restProps","Icon"],"rangeMappings":";;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,yBAAyB,QAAQ,mBAAmB;AAE5E,MAAMC,WAAW;IACfC,GAAGH;IACHI,GAAGH;AACL;AAMA,OAAO,MAAMI,UAAU,CAAC,EAAEC,OAAO,GAAG,EAAE,GAAGC,WAAyB;IAChE,MAAMC,OAAON,QAAQ,CAACI,KAAK;IAE3B,qBAAO,KAACE;QAAM,GAAGD,SAAS;;AAC5B,EAAE"}

package/dist/cssm/components/SimpleCell/SimpleCell.d.ts

@@ -65,5 +65,5 @@ export interface SimpleCellProps extends SimpleCellOwnProps, TappableProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/SimpleCell
  */
-export declare const SimpleCell: ({ badgeBeforeTitle, badgeAfterTitle, badgeBeforeSubtitle, badgeAfterSubtitle, before, indicator, children, after, expandable, multiline, subhead, subtitle, extraSubtitle, className, chevronSize, ...restProps }: SimpleCellProps) => React.JSX.Element;
+export declare const SimpleCell: ({ badgeBeforeTitle, badgeAfterTitle, badgeBeforeSubtitle, badgeAfterSubtitle, before, indicator, children, after, expandable, multiline, subhead, subtitle, extraSubtitle, className, chevronSize, ...restProps }: SimpleCellProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SimpleCell.d.ts.map

package/dist/cssm/components/SimpleCell/SimpleCell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SimpleCell.d.ts","sourceRoot":"","sources":["../../../../src/components/SimpleCell/SimpleCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAY,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAY/D,MAAM,WAAW,kBAAmB,SAAQ,YAAY;IACtD;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC;;OAEG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC;;OAEG;IACH,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtC;;OAEG;IACH,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC/B;;OAEG;IACH,WAAW,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,eAAgB,SAAQ,kBAAkB,EAAE,aAAa;CAAG;AAE7E;;GAEG;AACH,eAAO,MAAM,UAAU,sNAiBpB,eAAe,sBAqFjB,CAAC"}
+{"version":3,"file":"SimpleCell.d.ts","sourceRoot":"","sources":["../../../../src/components/SimpleCell/SimpleCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAY,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAY/D,MAAM,WAAW,kBAAmB,SAAQ,YAAY;IACtD;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC;;OAEG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC;;OAEG;IACH,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtC;;OAEG;IACH,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC/B;;OAEG;IACH,WAAW,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,eAAgB,SAAQ,kBAAkB,EAAE,aAAa;CAAG;AAE7E;;GAEG;AACH,eAAO,MAAM,UAAU,sNAiBpB,eAAe,4CAqFjB,CAAC"}

package/dist/cssm/components/SimpleCell/SimpleCell.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { classNames, hasReactNode } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
@@ -19,47 +20,83 @@ const sizeYClassNames = {
     const hasChevron = expandable === 'always' || expandable === 'auto' && platform === 'ios';
     const hasAfter = hasReactNode(after) || hasChevron;
     const { sizeY = 'none' } = useAdaptivity();
-    return /*#__PURE__*/ React.createElement(Tappable, {
+    return /*#__PURE__*/ _jsxs(Tappable, {
         ...restProps,
-        className: classNames(styles['SimpleCell'], sizeY !== 'regular' && sizeYClassNames[sizeY], multiline && styles['SimpleCell--mult'], className)
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: classNames(styles['SimpleCell__before'], platform === 'ios' && styles['SimpleCell__before--ios'])
-    }, before), /*#__PURE__*/ React.createElement("div", {
-        className: styles['SimpleCell__middle']
-    }, subhead && /*#__PURE__*/ React.createElement(Subhead, {
-        Component: "span",
-        className: classNames(styles['SimpleCell__text'], styles['SimpleCell__subhead'])
-    }, subhead), /*#__PURE__*/ React.createElement("div", {
-        className: styles['SimpleCell__content']
-    }, badgeBeforeTitle && /*#__PURE__*/ React.createElement("span", {
-        className: styles['SimpleCell__badge']
-    }, badgeBeforeTitle), /*#__PURE__*/ React.createElement(Headline, {
-        Component: "span",
-        className: styles['SimpleCell__children'],
-        weight: "3"
-    }, children), hasReactNode(badgeAfterTitle) && /*#__PURE__*/ React.createElement("span", {
-        className: styles['SimpleCell__badge']
-    }, badgeAfterTitle)), subtitle && /*#__PURE__*/ React.createElement("div", {
-        className: styles['SimpleCell__content']
-    }, badgeBeforeSubtitle && /*#__PURE__*/ React.createElement("span", {
-        className: styles['SimpleCell__badge']
-    }, badgeBeforeSubtitle), /*#__PURE__*/ React.createElement(Footnote, {
-        normalize: false,
-        className: classNames(styles['SimpleCell__text'], styles['SimpleCell__subtitle'])
-    }, subtitle), badgeAfterSubtitle && /*#__PURE__*/ React.createElement("span", {
-        className: styles['SimpleCell__badge']
-    }, badgeAfterSubtitle)), extraSubtitle && /*#__PURE__*/ React.createElement(Footnote, {
-        className: classNames(styles['SimpleCell__text'], styles['SimpleCell__extraSubtitle'])
-    }, extraSubtitle)), hasReactNode(indicator) && /*#__PURE__*/ React.createElement(Headline, {
-        Component: "span",
-        weight: "3",
-        className: styles['SimpleCell__indicator']
-    }, indicator), hasAfter && /*#__PURE__*/ React.createElement("div", {
-        className: classNames(styles['SimpleCell__after'], 'vkuiInternalSimpleCell__after')
-    }, after, hasChevron && /*#__PURE__*/ React.createElement(Chevron, {
-        size: chevronSize,
-        className: styles['SimpleCell__chevronIcon']
-    })));
+        className: classNames(styles['SimpleCell'], sizeY !== 'regular' && sizeYClassNames[sizeY], multiline && styles['SimpleCell--mult'], className),
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: classNames(styles['SimpleCell__before'], platform === 'ios' && styles['SimpleCell__before--ios']),
+                children: before
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: styles['SimpleCell__middle'],
+                children: [
+                    subhead && /*#__PURE__*/ _jsx(Subhead, {
+                        Component: "span",
+                        className: classNames(styles['SimpleCell__text'], styles['SimpleCell__subhead']),
+                        children: subhead
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: styles['SimpleCell__content'],
+                        children: [
+                            badgeBeforeTitle && /*#__PURE__*/ _jsx("span", {
+                                className: styles['SimpleCell__badge'],
+                                children: badgeBeforeTitle
+                            }),
+                            /*#__PURE__*/ _jsx(Headline, {
+                                Component: "span",
+                                className: styles['SimpleCell__children'],
+                                weight: "3",
+                                children: children
+                            }),
+                            hasReactNode(badgeAfterTitle) && /*#__PURE__*/ _jsx("span", {
+                                className: styles['SimpleCell__badge'],
+                                children: badgeAfterTitle
+                            })
+                        ]
+                    }),
+                    subtitle && /*#__PURE__*/ _jsxs("div", {
+                        className: styles['SimpleCell__content'],
+                        children: [
+                            badgeBeforeSubtitle && /*#__PURE__*/ _jsx("span", {
+                                className: styles['SimpleCell__badge'],
+                                children: badgeBeforeSubtitle
+                            }),
+                            /*#__PURE__*/ _jsx(Footnote, {
+                                normalize: false,
+                                className: classNames(styles['SimpleCell__text'], styles['SimpleCell__subtitle']),
+                                children: subtitle
+                            }),
+                            badgeAfterSubtitle && /*#__PURE__*/ _jsx("span", {
+                                className: styles['SimpleCell__badge'],
+                                children: badgeAfterSubtitle
+                            })
+                        ]
+                    }),
+                    extraSubtitle && /*#__PURE__*/ _jsx(Footnote, {
+                        className: classNames(styles['SimpleCell__text'], styles['SimpleCell__extraSubtitle']),
+                        children: extraSubtitle
+                    })
+                ]
+            }),
+            hasReactNode(indicator) && /*#__PURE__*/ _jsx(Headline, {
+                Component: "span",
+                weight: "3",
+                className: styles['SimpleCell__indicator'],
+                children: indicator
+            }),
+            hasAfter && /*#__PURE__*/ _jsxs("div", {
+                className: classNames(styles['SimpleCell__after'], 'vkuiInternalSimpleCell__after'),
+                children: [
+                    after,
+                    hasChevron && /*#__PURE__*/ _jsx(Chevron, {
+                        size: chevronSize,
+                        className: styles['SimpleCell__chevronIcon']
+                    })
+                ]
+            })
+        ]
+    });
 };
 
 //# sourceMappingURL=SimpleCell.js.map

package/dist/cssm/components/SimpleCell/SimpleCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SimpleCell/SimpleCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HasComponent } from '../../types';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Chevron } from './Chevron/Chevron';\nimport styles from './SimpleCell.module.css';\n\nconst sizeYClassNames = {\n  none: styles['SimpleCell--sizeY-none'],\n  ['compact']: styles['SimpleCell--sizeY-compact'],\n};\n\nexport interface SimpleCellOwnProps extends HasComponent {\n  /**\n   * Иконка 28 или `<Avatar size={28|32|40|48|72} />`\n   */\n  before?: React.ReactNode;\n  /**\n   * Иконка 12 или `<Badge />`. Добавится слева от текста `children`.\n   */\n  badgeBeforeTitle?: React.ReactNode;\n  /**\n   * Иконка 12 или `<Badge />`. Добавится справа от текста `children`.\n   */\n  badgeAfterTitle?: React.ReactNode;\n  /**\n   * Иконка 12. Добавится слева от текста `subtitle`.\n   */\n  badgeBeforeSubtitle?: React.ReactNode;\n  /**\n   * Иконка 12. Добавится справа от текста `subtitle`.\n   */\n  badgeAfterSubtitle?: React.ReactNode;\n  /**\n   * Контейнер для текста справа от `children`.\n   */\n  indicator?: React.ReactNode;\n  /**\n   * Дополнительная строка текста над `children`.\n   */\n  subhead?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children`.\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children` и `subtitle`.\n   */\n  extraSubtitle?: React.ReactNode;\n  /**\n   * Иконка 24|28 или `<Switch />`. Располагается справа от `indicator`.\n   */\n  after?: React.ReactNode;\n  /**\n   * Убирает анимацию нажатия\n   */\n  disabled?: boolean;\n  /**\n   * В режиме `auto` в iOS добавляет chevron справа.\n   * Передавать `always`, если предполагается переход при клике по ячейке.\n   */\n  expandable?: 'auto' | 'always';\n  /**\n   * Размер chevron\n   */\n  chevronSize?: 's' | 'm';\n  /**\n   * Включает многострочный режим для отображения текста\n   */\n  multiline?: boolean;\n}\n\nexport interface SimpleCellProps extends SimpleCellOwnProps, TappableProps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SimpleCell\n */\nexport const SimpleCell = ({\n  badgeBeforeTitle,\n  badgeAfterTitle,\n  badgeBeforeSubtitle,\n  badgeAfterSubtitle,\n  before,\n  indicator,\n  children,\n  after,\n  expandable,\n  multiline,\n  subhead,\n  subtitle,\n  extraSubtitle,\n  className,\n  chevronSize = 'm',\n  ...restProps\n}: SimpleCellProps) => {\n  const platform = usePlatform();\n\n  const hasChevron = expandable === 'always' || (expandable === 'auto' && platform === 'ios');\n\n  const hasAfter = hasReactNode(after) || hasChevron;\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      className={classNames(\n        styles['SimpleCell'],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        multiline && styles['SimpleCell--mult'],\n        className,\n      )}\n    >\n      <div\n        className={classNames(\n          styles['SimpleCell__before'],\n          platform === 'ios' && styles['SimpleCell__before--ios'],\n        )}\n      >\n        {before}\n      </div>\n      <div className={styles['SimpleCell__middle']}>\n        {subhead && (\n          <Subhead\n            Component=\"span\"\n            className={classNames(styles['SimpleCell__text'], styles['SimpleCell__subhead'])}\n          >\n            {subhead}\n          </Subhead>\n        )}\n        <div className={styles['SimpleCell__content']}>\n          {badgeBeforeTitle && (\n            <span className={styles['SimpleCell__badge']}>{badgeBeforeTitle}</span>\n          )}\n          <Headline Component=\"span\" className={styles['SimpleCell__children']} weight=\"3\">\n            {children}\n          </Headline>\n          {hasReactNode(badgeAfterTitle) && (\n            <span className={styles['SimpleCell__badge']}>{badgeAfterTitle}</span>\n          )}\n        </div>\n        {subtitle && (\n          <div className={styles['SimpleCell__content']}>\n            {badgeBeforeSubtitle && (\n              <span className={styles['SimpleCell__badge']}>{badgeBeforeSubtitle}</span>\n            )}\n            <Footnote\n              normalize={false}\n              className={classNames(styles['SimpleCell__text'], styles['SimpleCell__subtitle'])}\n            >\n              {subtitle}\n            </Footnote>\n            {badgeAfterSubtitle && (\n              <span className={styles['SimpleCell__badge']}>{badgeAfterSubtitle}</span>\n            )}\n          </div>\n        )}\n        {extraSubtitle && (\n          <Footnote\n            className={classNames(styles['SimpleCell__text'], styles['SimpleCell__extraSubtitle'])}\n          >\n            {extraSubtitle}\n          </Footnote>\n        )}\n      </div>\n      {hasReactNode(indicator) && (\n        <Headline Component=\"span\" weight=\"3\" className={styles['SimpleCell__indicator']}>\n          {indicator}\n        </Headline>\n      )}\n      {hasAfter && (\n        <div className={classNames(styles['SimpleCell__after'], 'vkuiInternalSimpleCell__after')}>\n          {after}\n          {hasChevron && (\n            <Chevron size={chevronSize} className={styles['SimpleCell__chevronIcon']} />\n          )}\n        </div>\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","Tappable","Footnote","Headline","Subhead","Chevron","styles","sizeYClassNames","none","SimpleCell","badgeBeforeTitle","badgeAfterTitle","badgeBeforeSubtitle","badgeAfterSubtitle","before","indicator","children","after","expandable","multiline","subhead","subtitle","extraSubtitle","className","chevronSize","restProps","platform","hasChevron","hasAfter","sizeY","div","Component","span","weight","normalize","size"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AAEtD,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,OAAO,QAAQ,oBAAoB;AAC5C,OAAOC,YAAY,0BAA0B;AAE7C,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,yBAAyB;IACtC,CAAC,UAAU,EAAEA,MAAM,CAAC,4BAA4B;AAClD;AAgEA;;CAEC,GACD,OAAO,MAAMG,aAAa,CAAC,EACzBC,gBAAgB,EAChBC,eAAe,EACfC,mBAAmB,EACnBC,kBAAkB,EAClBC,MAAM,EACNC,SAAS,EACTC,QAAQ,EACRC,KAAK,EACLC,UAAU,EACVC,SAAS,EACTC,OAAO,EACPC,QAAQ,EACRC,aAAa,EACbC,SAAS,EACTC,cAAc,GAAG,EACjB,GAAGC,WACa;IAChB,MAAMC,WAAW1B;IAEjB,MAAM2B,aAAaT,eAAe,YAAaA,eAAe,UAAUQ,aAAa;IAErF,MAAME,WAAW9B,aAAamB,UAAUU;IACxC,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAG9B;IAE3B,qBACE,oBAACE;QACE,GAAGwB,SAAS;QACbF,WAAW1B,WACTS,MAAM,CAAC,aAAa,EACpBuB,UAAU,aAAatB,eAAe,CAACsB,MAAM,EAC7CV,aAAab,MAAM,CAAC,mBAAmB,EACvCiB;qBAGF,oBAACO;QACCP,WAAW1B,WACTS,MAAM,CAAC,qBAAqB,EAC5BoB,aAAa,SAASpB,MAAM,CAAC,0BAA0B;OAGxDQ,uBAEH,oBAACgB;QAAIP,WAAWjB,MAAM,CAAC,qBAAqB;OACzCc,yBACC,oBAAChB;QACC2B,WAAU;QACVR,WAAW1B,WAAWS,MAAM,CAAC,mBAAmB,EAAEA,MAAM,CAAC,sBAAsB;OAE9Ec,wBAGL,oBAACU;QAAIP,WAAWjB,MAAM,CAAC,sBAAsB;OAC1CI,kCACC,oBAACsB;QAAKT,WAAWjB,MAAM,CAAC,oBAAoB;OAAGI,iCAEjD,oBAACP;QAAS4B,WAAU;QAAOR,WAAWjB,MAAM,CAAC,uBAAuB;QAAE2B,QAAO;OAC1EjB,WAEFlB,aAAaa,kCACZ,oBAACqB;QAAKT,WAAWjB,MAAM,CAAC,oBAAoB;OAAGK,mBAGlDU,0BACC,oBAACS;QAAIP,WAAWjB,MAAM,CAAC,sBAAsB;OAC1CM,qCACC,oBAACoB;QAAKT,WAAWjB,MAAM,CAAC,oBAAoB;OAAGM,oCAEjD,oBAACV;QACCgC,WAAW;QACXX,WAAW1B,WAAWS,MAAM,CAAC,mBAAmB,EAAEA,MAAM,CAAC,uBAAuB;OAE/Ee,WAEFR,oCACC,oBAACmB;QAAKT,WAAWjB,MAAM,CAAC,oBAAoB;OAAGO,sBAIpDS,+BACC,oBAACpB;QACCqB,WAAW1B,WAAWS,MAAM,CAAC,mBAAmB,EAAEA,MAAM,CAAC,4BAA4B;OAEpFgB,iBAINxB,aAAaiB,4BACZ,oBAACZ;QAAS4B,WAAU;QAAOE,QAAO;QAAIV,WAAWjB,MAAM,CAAC,wBAAwB;OAC7ES,YAGJa,0BACC,oBAACE;QAAIP,WAAW1B,WAAWS,MAAM,CAAC,oBAAoB,EAAE;OACrDW,OACAU,4BACC,oBAACtB;QAAQ8B,MAAMX;QAAaD,WAAWjB,MAAM,CAAC,0BAA0B;;AAMpF,EAAE"}
+{"version":3,"sources":["../../../../src/components/SimpleCell/SimpleCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HasComponent } from '../../types';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Chevron } from './Chevron/Chevron';\nimport styles from './SimpleCell.module.css';\n\nconst sizeYClassNames = {\n  none: styles['SimpleCell--sizeY-none'],\n  ['compact']: styles['SimpleCell--sizeY-compact'],\n};\n\nexport interface SimpleCellOwnProps extends HasComponent {\n  /**\n   * Иконка 28 или `<Avatar size={28|32|40|48|72} />`\n   */\n  before?: React.ReactNode;\n  /**\n   * Иконка 12 или `<Badge />`. Добавится слева от текста `children`.\n   */\n  badgeBeforeTitle?: React.ReactNode;\n  /**\n   * Иконка 12 или `<Badge />`. Добавится справа от текста `children`.\n   */\n  badgeAfterTitle?: React.ReactNode;\n  /**\n   * Иконка 12. Добавится слева от текста `subtitle`.\n   */\n  badgeBeforeSubtitle?: React.ReactNode;\n  /**\n   * Иконка 12. Добавится справа от текста `subtitle`.\n   */\n  badgeAfterSubtitle?: React.ReactNode;\n  /**\n   * Контейнер для текста справа от `children`.\n   */\n  indicator?: React.ReactNode;\n  /**\n   * Дополнительная строка текста над `children`.\n   */\n  subhead?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children`.\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children` и `subtitle`.\n   */\n  extraSubtitle?: React.ReactNode;\n  /**\n   * Иконка 24|28 или `<Switch />`. Располагается справа от `indicator`.\n   */\n  after?: React.ReactNode;\n  /**\n   * Убирает анимацию нажатия\n   */\n  disabled?: boolean;\n  /**\n   * В режиме `auto` в iOS добавляет chevron справа.\n   * Передавать `always`, если предполагается переход при клике по ячейке.\n   */\n  expandable?: 'auto' | 'always';\n  /**\n   * Размер chevron\n   */\n  chevronSize?: 's' | 'm';\n  /**\n   * Включает многострочный режим для отображения текста\n   */\n  multiline?: boolean;\n}\n\nexport interface SimpleCellProps extends SimpleCellOwnProps, TappableProps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SimpleCell\n */\nexport const SimpleCell = ({\n  badgeBeforeTitle,\n  badgeAfterTitle,\n  badgeBeforeSubtitle,\n  badgeAfterSubtitle,\n  before,\n  indicator,\n  children,\n  after,\n  expandable,\n  multiline,\n  subhead,\n  subtitle,\n  extraSubtitle,\n  className,\n  chevronSize = 'm',\n  ...restProps\n}: SimpleCellProps) => {\n  const platform = usePlatform();\n\n  const hasChevron = expandable === 'always' || (expandable === 'auto' && platform === 'ios');\n\n  const hasAfter = hasReactNode(after) || hasChevron;\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      className={classNames(\n        styles['SimpleCell'],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        multiline && styles['SimpleCell--mult'],\n        className,\n      )}\n    >\n      <div\n        className={classNames(\n          styles['SimpleCell__before'],\n          platform === 'ios' && styles['SimpleCell__before--ios'],\n        )}\n      >\n        {before}\n      </div>\n      <div className={styles['SimpleCell__middle']}>\n        {subhead && (\n          <Subhead\n            Component=\"span\"\n            className={classNames(styles['SimpleCell__text'], styles['SimpleCell__subhead'])}\n          >\n            {subhead}\n          </Subhead>\n        )}\n        <div className={styles['SimpleCell__content']}>\n          {badgeBeforeTitle && (\n            <span className={styles['SimpleCell__badge']}>{badgeBeforeTitle}</span>\n          )}\n          <Headline Component=\"span\" className={styles['SimpleCell__children']} weight=\"3\">\n            {children}\n          </Headline>\n          {hasReactNode(badgeAfterTitle) && (\n            <span className={styles['SimpleCell__badge']}>{badgeAfterTitle}</span>\n          )}\n        </div>\n        {subtitle && (\n          <div className={styles['SimpleCell__content']}>\n            {badgeBeforeSubtitle && (\n              <span className={styles['SimpleCell__badge']}>{badgeBeforeSubtitle}</span>\n            )}\n            <Footnote\n              normalize={false}\n              className={classNames(styles['SimpleCell__text'], styles['SimpleCell__subtitle'])}\n            >\n              {subtitle}\n            </Footnote>\n            {badgeAfterSubtitle && (\n              <span className={styles['SimpleCell__badge']}>{badgeAfterSubtitle}</span>\n            )}\n          </div>\n        )}\n        {extraSubtitle && (\n          <Footnote\n            className={classNames(styles['SimpleCell__text'], styles['SimpleCell__extraSubtitle'])}\n          >\n            {extraSubtitle}\n          </Footnote>\n        )}\n      </div>\n      {hasReactNode(indicator) && (\n        <Headline Component=\"span\" weight=\"3\" className={styles['SimpleCell__indicator']}>\n          {indicator}\n        </Headline>\n      )}\n      {hasAfter && (\n        <div className={classNames(styles['SimpleCell__after'], 'vkuiInternalSimpleCell__after')}>\n          {after}\n          {hasChevron && (\n            <Chevron size={chevronSize} className={styles['SimpleCell__chevronIcon']} />\n          )}\n        </div>\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","Tappable","Footnote","Headline","Subhead","Chevron","styles","sizeYClassNames","none","SimpleCell","badgeBeforeTitle","badgeAfterTitle","badgeBeforeSubtitle","badgeAfterSubtitle","before","indicator","children","after","expandable","multiline","subhead","subtitle","extraSubtitle","className","chevronSize","restProps","platform","hasChevron","hasAfter","sizeY","div","Component","span","weight","normalize","size"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AAEtD,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,OAAO,QAAQ,oBAAoB;AAC5C,OAAOC,YAAY,0BAA0B;AAE7C,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,yBAAyB;IACtC,CAAC,UAAU,EAAEA,MAAM,CAAC,4BAA4B;AAClD;AAgEA;;CAEC,GACD,OAAO,MAAMG,aAAa,CAAC,EACzBC,gBAAgB,EAChBC,eAAe,EACfC,mBAAmB,EACnBC,kBAAkB,EAClBC,MAAM,EACNC,SAAS,EACTC,QAAQ,EACRC,KAAK,EACLC,UAAU,EACVC,SAAS,EACTC,OAAO,EACPC,QAAQ,EACRC,aAAa,EACbC,SAAS,EACTC,cAAc,GAAG,EACjB,GAAGC,WACa;IAChB,MAAMC,WAAW1B;IAEjB,MAAM2B,aAAaT,eAAe,YAAaA,eAAe,UAAUQ,aAAa;IAErF,MAAME,WAAW9B,aAAamB,UAAUU;IACxC,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAG9B;IAE3B,qBACE,MAACE;QACE,GAAGwB,SAAS;QACbF,WAAW1B,WACTS,MAAM,CAAC,aAAa,EACpBuB,UAAU,aAAatB,eAAe,CAACsB,MAAM,EAC7CV,aAAab,MAAM,CAAC,mBAAmB,EACvCiB;;0BAGF,KAACO;gBACCP,WAAW1B,WACTS,MAAM,CAAC,qBAAqB,EAC5BoB,aAAa,SAASpB,MAAM,CAAC,0BAA0B;0BAGxDQ;;0BAEH,MAACgB;gBAAIP,WAAWjB,MAAM,CAAC,qBAAqB;;oBACzCc,yBACC,KAAChB;wBACC2B,WAAU;wBACVR,WAAW1B,WAAWS,MAAM,CAAC,mBAAmB,EAAEA,MAAM,CAAC,sBAAsB;kCAE9Ec;;kCAGL,MAACU;wBAAIP,WAAWjB,MAAM,CAAC,sBAAsB;;4BAC1CI,kCACC,KAACsB;gCAAKT,WAAWjB,MAAM,CAAC,oBAAoB;0CAAGI;;0CAEjD,KAACP;gCAAS4B,WAAU;gCAAOR,WAAWjB,MAAM,CAAC,uBAAuB;gCAAE2B,QAAO;0CAC1EjB;;4BAEFlB,aAAaa,kCACZ,KAACqB;gCAAKT,WAAWjB,MAAM,CAAC,oBAAoB;0CAAGK;;;;oBAGlDU,0BACC,MAACS;wBAAIP,WAAWjB,MAAM,CAAC,sBAAsB;;4BAC1CM,qCACC,KAACoB;gCAAKT,WAAWjB,MAAM,CAAC,oBAAoB;0CAAGM;;0CAEjD,KAACV;gCACCgC,WAAW;gCACXX,WAAW1B,WAAWS,MAAM,CAAC,mBAAmB,EAAEA,MAAM,CAAC,uBAAuB;0CAE/Ee;;4BAEFR,oCACC,KAACmB;gCAAKT,WAAWjB,MAAM,CAAC,oBAAoB;0CAAGO;;;;oBAIpDS,+BACC,KAACpB;wBACCqB,WAAW1B,WAAWS,MAAM,CAAC,mBAAmB,EAAEA,MAAM,CAAC,4BAA4B;kCAEpFgB;;;;YAINxB,aAAaiB,4BACZ,KAACZ;gBAAS4B,WAAU;gBAAOE,QAAO;gBAAIV,WAAWjB,MAAM,CAAC,wBAAwB;0BAC7ES;;YAGJa,0BACC,MAACE;gBAAIP,WAAW1B,WAAWS,MAAM,CAAC,oBAAoB,EAAE;;oBACrDW;oBACAU,4BACC,KAACtB;wBAAQ8B,MAAMX;wBAAaD,WAAWjB,MAAM,CAAC,0BAA0B;;;;;;AAMpF,EAAE"}

package/dist/cssm/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface SkeletonProps extends HTMLAttributesWithRootRef<HTMLDivElement | HTMLSpanElement>, Pick<React.CSSProperties, 'width' | 'height' | 'inlineSize' | 'blockSize' | 'maxWidth' | 'maxInlineSize' | 'borderRadius' | 'margin'> {
+    /**
+     * Начальный цвет анимации
+     */
+    colorFrom?: string;
+    /**
+     * Финальный цвет анимации
+     */
+    colorTo?: string;
+    /**
+     * Выключает анимацию, в результате чего показывается только один цвет
+     */
+    noAnimation?: boolean;
+    /**
+     * Длительность анимации в секундах
+     */
+    duration?: number;
+}
+/**
+ * > Старайтесь минимизировать количество заглушек на экране. Не каждый элемент
+ * > на экране должен заменяться заглушкой.
+ * >
+ * > Текстовые блоки лучше сокращать до трёх строк. Ширина последней строки
+ * > скелета вычисляется, как 75% от ширины текстового блока. Высота скелетона
+ * > автоматически подстраивается под размер шрифта, поэтому идеально
+ * > вписывается в слоты компонентов, которые обычно ожидают текст.
+ *
+ * @since 6.1.0
+ */
+export declare const Skeleton: ({ width, height, inlineSize, blockSize, maxWidth, maxInlineSize, borderRadius, style, children, colorFrom, colorTo, noAnimation, duration, margin, ...restProps }: SkeletonProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Skeleton.d.ts.map

package/dist/cssm/components/Skeleton/Skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAuB,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAI7E,MAAM,WAAW,aACf,SAAQ,yBAAyB,CAAC,cAAc,GAAG,eAAe,CAAC,EACjE,IAAI,CACF,KAAK,CAAC,aAAa,EACjB,OAAO,GACP,QAAQ,GACR,YAAY,GACZ,WAAW,GACX,UAAU,GACV,eAAe,GACf,cAAc,GACd,QAAQ,CACX;IACH;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,QAAQ,sKAgBlB,aAAa,4CAqCf,CAAC"}

package/dist/cssm/components/Skeleton/Skeleton.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { RootComponent } from '../RootComponent/RootComponent';
+import styles from './Skeleton.module.css';
+/**
+ * > Старайтесь минимизировать количество заглушек на экране. Не каждый элемент
+ * > на экране должен заменяться заглушкой.
+ * >
+ * > Текстовые блоки лучше сокращать до трёх строк. Ширина последней строки
+ * > скелета вычисляется, как 75% от ширины текстового блока. Высота скелетона
+ * > автоматически подстраивается под размер шрифта, поэтому идеально
+ * > вписывается в слоты компонентов, которые обычно ожидают текст.
+ *
+ * @since 6.1.0
+ */ export const Skeleton = ({ width, height, inlineSize, blockSize, maxWidth, maxInlineSize, borderRadius, style, children, colorFrom, colorTo, noAnimation, duration, margin, ...restProps })=>{
+    const skeletonStyle = {
+        width,
+        height,
+        inlineSize,
+        blockSize,
+        maxWidth,
+        maxInlineSize,
+        borderRadius,
+        margin
+    };
+    if (colorFrom) {
+        skeletonStyle['--vkui_internal--skeleton_color_from'] = colorFrom;
+    }
+    if (colorTo) {
+        skeletonStyle['--vkui_internal--skeleton_color_to'] = colorTo;
+    }
+    if (Number.isFinite(duration)) {
+        skeletonStyle['--vkui_internal--skeleton_animation_duration'] = `${duration}s`;
+    }
+    return /*#__PURE__*/ _jsx(RootComponent, {
+        Component: "span",
+        baseClassName: classNames(styles['Skeleton'], noAnimation && styles['Skeleton--disableAnimation']),
+        style: {
+            ...skeletonStyle,
+            ...style
+        },
+        ...restProps,
+        children: children || /*#__PURE__*/ _jsx(_Fragment, {
+            children: "‌"
+        })
+    });
+};
+
+//# sourceMappingURL=Skeleton.js.map

package/dist/cssm/components/Skeleton/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Skeleton.module.css';\n\nexport interface SkeletonProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement | HTMLSpanElement>,\n    Pick<\n      React.CSSProperties,\n      | 'width'\n      | 'height'\n      | 'inlineSize'\n      | 'blockSize'\n      | 'maxWidth'\n      | 'maxInlineSize'\n      | 'borderRadius'\n      | 'margin'\n    > {\n  /**\n   * Начальный цвет анимации\n   */\n  colorFrom?: string;\n\n  /**\n   * Финальный цвет анимации\n   */\n  colorTo?: string;\n\n  /**\n   * Выключает анимацию, в результате чего показывается только один цвет\n   */\n  noAnimation?: boolean;\n\n  /**\n   * Длительность анимации в секундах\n   */\n  duration?: number;\n}\n\n/**\n * > Старайтесь минимизировать количество заглушек на экране. Не каждый элемент\n * > на экране должен заменяться заглушкой.\n * >\n * > Текстовые блоки лучше сокращать до трёх строк. Ширина последней строки\n * > скелета вычисляется, как 75% от ширины текстового блока. Высота скелетона\n * > автоматически подстраивается под размер шрифта, поэтому идеально\n * > вписывается в слоты компонентов, которые обычно ожидают текст.\n *\n * @since 6.1.0\n */\nexport const Skeleton = ({\n  width,\n  height,\n  inlineSize,\n  blockSize,\n  maxWidth,\n  maxInlineSize,\n  borderRadius,\n  style,\n  children,\n  colorFrom,\n  colorTo,\n  noAnimation,\n  duration,\n  margin,\n  ...restProps\n}: SkeletonProps) => {\n  const skeletonStyle: React.CSSProperties & CSSCustomProperties = {\n    width,\n    height,\n    inlineSize,\n    blockSize,\n    maxWidth,\n    maxInlineSize,\n    borderRadius,\n    margin,\n  };\n\n  if (colorFrom) {\n    skeletonStyle['--vkui_internal--skeleton_color_from'] = colorFrom;\n  }\n\n  if (colorTo) {\n    skeletonStyle['--vkui_internal--skeleton_color_to'] = colorTo;\n  }\n\n  if (Number.isFinite(duration)) {\n    skeletonStyle['--vkui_internal--skeleton_animation_duration'] = `${duration}s`;\n  }\n\n  return (\n    <RootComponent\n      Component=\"span\"\n      baseClassName={classNames(\n        styles['Skeleton'],\n        noAnimation && styles['Skeleton--disableAnimation'],\n      )}\n      style={{ ...skeletonStyle, ...style }}\n      {...restProps}\n    >\n      {children || <>&zwnj;</>}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","RootComponent","styles","Skeleton","width","height","inlineSize","blockSize","maxWidth","maxInlineSize","borderRadius","style","children","colorFrom","colorTo","noAnimation","duration","margin","restProps","skeletonStyle","Number","isFinite","Component","baseClassName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,wBAAwB;AAoC3C;;;;;;;;;;CAUC,GACD,OAAO,MAAMC,WAAW,CAAC,EACvBC,KAAK,EACLC,MAAM,EACNC,UAAU,EACVC,SAAS,EACTC,QAAQ,EACRC,aAAa,EACbC,YAAY,EACZC,KAAK,EACLC,QAAQ,EACRC,SAAS,EACTC,OAAO,EACPC,WAAW,EACXC,QAAQ,EACRC,MAAM,EACN,GAAGC,WACW;IACd,MAAMC,gBAA2D;QAC/Df;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAO;IACF;IAEA,IAAIJ,WAAW;QACbM,aAAa,CAAC,uCAAuC,GAAGN;IAC1D;IAEA,IAAIC,SAAS;QACXK,aAAa,CAAC,qCAAqC,GAAGL;IACxD;IAEA,IAAIM,OAAOC,QAAQ,CAACL,WAAW;QAC7BG,aAAa,CAAC,+CAA+C,GAAG,CAAC,EAAEH,SAAS,CAAC,CAAC;IAChF;IAEA,qBACE,KAACf;QACCqB,WAAU;QACVC,eAAevB,WACbE,MAAM,CAAC,WAAW,EAClBa,eAAeb,MAAM,CAAC,6BAA6B;QAErDS,OAAO;YAAE,GAAGQ,aAAa;YAAE,GAAGR,KAAK;QAAC;QACnC,GAAGO,SAAS;kBAEZN,0BAAY;sBAAE;;;AAGrB,EAAE"}

package/dist/cssm/components/Skeleton/Skeleton.module.css

@@ -0,0 +1,65 @@
+@keyframes skeleton {
+  from {
+    transform: translateX(0);
+  }
+
+  to {
+    transform: translateX(var(--vkui_internal--skeleton_width));
+  }
+}
+
+.Skeleton {
+  --vkui_internal--skeleton_width: 300px;
+  --vkui_internal--skeleton_color_from: var(--vkui--color_skeleton_from);
+  --vkui_internal--skeleton_color_to: var(--vkui--color_skeleton_to);
+  --vkui_internal--skeleton_animation_duration: 1.5s;
+
+  display: inline-flex;
+  position: relative;
+  inline-size: 100%;
+  max-inline-size: 100%;
+  line-height: 1;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.Skeleton::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  inset-inline-start: calc(-1 * var(--vkui_internal--skeleton_width));
+  animation-duration: var(--vkui_internal--skeleton_animation_duration);
+  animation-iteration-count: infinite;
+  animation-name: skeleton;
+  background-attachment: fixed;
+  animation-timing-function: var(--vkui--animation_easing_platform);
+  background-size: var(--vkui_internal--skeleton_width) 100%;
+  background-color: var(--vkui_internal--skeleton_color_from);
+  background-image: linear-gradient(
+    to right,
+    var(--vkui_internal--skeleton_color_from) 0,
+    var(--vkui_internal--skeleton_color_to) 50%,
+    var(--vkui_internal--skeleton_color_from) 75%
+  );
+}
+
+/* Если скелетон находится внутри другого скелетона он меняет цвет */
+
+.Skeleton .Skeleton {
+  --vkui_internal--skeleton_color_from: var(--vkui--color_background_content);
+  --vkui_internal--skeleton_color_to: var(--vkui--color_background_tertiary);
+}
+
+.Skeleton .Skeleton .Skeleton {
+  --vkui_internal--skeleton_color_from: var(--vkui--color_skeleton_from);
+  --vkui_internal--skeleton_color_to: var(--vkui--color_skeleton_to);
+}
+
+.Skeleton--disableAnimation {
+  /**
+   * Safari тратит время не пересчет анимации даже если элемент скрыт
+   * Для повышения производительности анимацию необходимо выключить
+   */
+  animation-name: none;
+  background-image: none;
+}

package/dist/cssm/components/Slider/Slider.d.ts

@@ -21,6 +21,10 @@ export interface SliderBaseProps extends Omit<HTMLAttributesWithRootRef<HTMLDivE
      */
     getAriaValueText?: (value: number, index: number) => string;
     withTooltip?: boolean;
+    /**
+     * Размер ползунка.
+     */
+    size?: 's' | 'm' | 'l';
 }
 export interface SliderProps extends SliderBaseProps {
     multiple?: false;
@@ -37,5 +41,5 @@ export interface SliderMultipleProps extends SliderBaseProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/Slider
  */
-export declare const Slider: ({ step, min, max, value: valueProp, multiple: multipleProp, defaultValue, disabled, className, getRootRef, getAriaLabel, getAriaValueText, onChange, withTooltip, ...restProps }: SliderProps | SliderMultipleProps) => React.JSX.Element;
+export declare const Slider: ({ step, min, max, value: valueProp, multiple: multipleProp, defaultValue, disabled, className, getRootRef, getAriaLabel, getAriaValueText, onChange, withTooltip, size, ...restProps }: SliderProps | SliderMultipleProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Slider.d.ts.map

package/dist/cssm/components/Slider/Slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAS,KAAK,UAAU,EAA0B,MAAM,gBAAgB,CAAC;AAoBhF,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,cAAc,GAAG,UAAU,CAAC;IAC9F,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACzC;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC5D,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,WAAY,SAAQ,eAAe;IAClD,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,GAAG,KAAK,CAAC,WAAW,KAAK,IAAI,CAAC;CAC3E;AAED,MAAM,WAAW,mBAAoB,SAAQ,eAAe;IAC1D,QAAQ,EAAE,IAAI,CAAC;IACf,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,KAAK,EAAE,UAAU,GAAG,KAAK,CAAC,WAAW,KAAK,IAAI,CAAC;CACrF;AAED;;GAEG;AACH,eAAO,MAAM,MAAM,qLAehB,WAAW,GAAG,mBAAmB,sBAkMnC,CAAC"}
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAS,KAAK,UAAU,EAA0B,MAAM,gBAAgB,CAAC;AA0BhF,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,cAAc,GAAG,UAAU,CAAC;IAC9F,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACzC;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC5D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CACxB;AAED,MAAM,WAAW,WAAY,SAAQ,eAAe;IAClD,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,GAAG,KAAK,CAAC,WAAW,KAAK,IAAI,CAAC;CAC3E;AAED,MAAM,WAAW,mBAAoB,SAAQ,eAAe;IAC1D,QAAQ,EAAE,IAAI,CAAC;IACf,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,KAAK,EAAE,UAAU,GAAG,KAAK,CAAC,WAAW,KAAK,IAAI,CAAC;CACrF;AAED;;GAEG;AACH,eAAO,MAAM,MAAM,2LAgBhB,WAAW,GAAG,mBAAmB,4CAmMnC,CAAC"}