@vkontakte/vkui 5.3.1 → 5.4.0

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

@@ -19,7 +19,7 @@ const sizeYClassNames = {
     return /*#__PURE__*/ React.createElement(FormField, {
         ...restProps,
         tabIndex: disabled ? undefined : tabIndex,
-        className: classNames(styles['Select'], sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], !children && styles['Select--empty'], multiline && styles['Select--multiline'], align === 'center' && styles['Select--align-center'], align === 'right' && styles['Select--align-right'], before && styles['Select--hasBefore'], after && styles['Select--hasAfter'], className),
+        className: classNames(styles['Select'], sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], !children && styles['Select--empty'], multiline && styles['Select--multiline'], align === 'center' && styles['Select--align-center'], align === 'right' && styles['Select--align-right'], before && styles['Select--hasBefore'], className),
         getRootRef: getRootRef,
         onClick: disabled ? undefined : onClick,
         disabled: disabled,

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 { SizeType } from '../../lib/adaptivity';\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  [SizeType.COMPACT]: styles['Select--sizeY-compact'],\n};\n\nexport interface SelectMimicryProps\n  extends React.HTMLAttributes<HTMLElement>,\n    HasAlign,\n    HasRootRef<HTMLElement>,\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  ...restProps\n}: SelectMimicryProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const title = children || placeholder;\n\n  return (\n    <FormField\n      {...restProps}\n      tabIndex={disabled ? undefined : tabIndex}\n      className={classNames(\n        styles['Select'],\n        sizeY !== SizeType.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        after && styles['Select--hasAfter'],\n        className,\n      )}\n      getRootRef={getRootRef}\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","SizeType","getFormFieldModeFromSelectType","DropdownIcon","FormField","SelectTypography","styles","sizeYClassNames","none","COMPACT","SelectMimicry","tabIndex","placeholder","children","align","getRootRef","multiline","disabled","onClick","before","after","selectType","status","className","restProps","sizeY","title","undefined","REGULAR","mode","div"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,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,CAACL,SAASQ,OAAO,CAAC,EAAEH,MAAM,CAAC,wBAAwB;AACrD;AAYA;;CAEC,GACD,OAAO,MAAMI,gBAAgB,CAAC,EAC5BC,UAAW,EAAC,EACZC,YAAW,EACXC,SAAQ,EACRC,MAAK,EACLC,WAAU,EACVC,UAAS,EACTC,SAAQ,EACRC,QAAO,EACPC,OAAM,EACNC,qBAAQ,oBAACjB,oBAAe,EACxBkB,YAAa,UAAS,EACtBC,OAAM,EACNC,UAAS,EACT,GAAGC,WACgB,GAAK;IACxB,MAAM,EAAEC,OAAQ,OAAM,EAAE,GAAGzB;IAC3B,MAAM0B,QAAQb,YAAYD;IAE1B,qBACE,oBAACR;QACE,GAAGoB,SAAS;QACbb,UAAUM,WAAWU,YAAYhB,QAAQ;QACzCY,WAAWxB,WACTO,MAAM,CAAC,SAAS,EAChBmB,UAAUxB,SAAS2B,OAAO,IAAIrB,eAAe,CAACkB,MAAM,EACpD,CAACZ,YAAYP,MAAM,CAAC,gBAAgB,EACpCU,aAAaV,MAAM,CAAC,oBAAoB,EACxCQ,UAAU,YAAYR,MAAM,CAAC,uBAAuB,EACpDQ,UAAU,WAAWR,MAAM,CAAC,sBAAsB,EAClDa,UAAUb,MAAM,CAAC,oBAAoB,EACrCc,SAASd,MAAM,CAAC,mBAAmB,EACnCiB;QAEFR,YAAYA;QACZG,SAASD,WAAWU,YAAYT,OAAO;QACvCD,UAAUA;QACVE,QAAQA;QACRC,OAAOA;QACPS,MAAM3B,+BAA+BmB;QACrCC,QAAQA;qBAER,oBAACQ;QAAIP,WAAWjB,MAAM,CAAC,oBAAoB;qBACzC,oBAACD;QAAiBgB,YAAYA;QAAYE,WAAWjB,MAAM,CAAC,gBAAgB;OACzEoB;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 { SizeType } from '../../lib/adaptivity';\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  [SizeType.COMPACT]: styles['Select--sizeY-compact'],\n};\n\nexport interface SelectMimicryProps\n  extends React.HTMLAttributes<HTMLElement>,\n    HasAlign,\n    HasRootRef<HTMLElement>,\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  ...restProps\n}: SelectMimicryProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const title = children || placeholder;\n\n  return (\n    <FormField\n      {...restProps}\n      tabIndex={disabled ? undefined : tabIndex}\n      className={classNames(\n        styles['Select'],\n        sizeY !== SizeType.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={getRootRef}\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","SizeType","getFormFieldModeFromSelectType","DropdownIcon","FormField","SelectTypography","styles","sizeYClassNames","none","COMPACT","SelectMimicry","tabIndex","placeholder","children","align","getRootRef","multiline","disabled","onClick","before","after","selectType","status","className","restProps","sizeY","title","undefined","REGULAR","mode","div"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,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,CAACL,SAASQ,OAAO,CAAC,EAAEH,MAAM,CAAC,wBAAwB;AACrD;AAYA;;CAEC,GACD,OAAO,MAAMI,gBAAgB,CAAC,EAC5BC,UAAW,EAAC,EACZC,YAAW,EACXC,SAAQ,EACRC,MAAK,EACLC,WAAU,EACVC,UAAS,EACTC,SAAQ,EACRC,QAAO,EACPC,OAAM,EACNC,qBAAQ,oBAACjB,oBAAe,EACxBkB,YAAa,UAAS,EACtBC,OAAM,EACNC,UAAS,EACT,GAAGC,WACgB,GAAK;IACxB,MAAM,EAAEC,OAAQ,OAAM,EAAE,GAAGzB;IAC3B,MAAM0B,QAAQb,YAAYD;IAE1B,qBACE,oBAACR;QACE,GAAGoB,SAAS;QACbb,UAAUM,WAAWU,YAAYhB,QAAQ;QACzCY,WAAWxB,WACTO,MAAM,CAAC,SAAS,EAChBmB,UAAUxB,SAAS2B,OAAO,IAAIrB,eAAe,CAACkB,MAAM,EACpD,CAACZ,YAAYP,MAAM,CAAC,gBAAgB,EACpCU,aAAaV,MAAM,CAAC,oBAAoB,EACxCQ,UAAU,YAAYR,MAAM,CAAC,uBAAuB,EACpDQ,UAAU,WAAWR,MAAM,CAAC,sBAAsB,EAClDa,UAAUb,MAAM,CAAC,oBAAoB,EACrCiB;QAEFR,YAAYA;QACZG,SAASD,WAAWU,YAAYT,OAAO;QACvCD,UAAUA;QACVE,QAAQA;QACRC,OAAOA;QACPS,MAAM3B,+BAA+BmB;QACrCC,QAAQA;qBAER,oBAACQ;QAAIP,WAAWjB,MAAM,CAAC,oBAAoB;qBACzC,oBAACD;QAAiBgB,YAAYA;QAAYE,WAAWjB,MAAM,CAAC,gBAAgB;OACzEoB;AAKX,EAAE"}

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

@@ -1,9 +1,8 @@
 import * as React from 'react';
+import { HasChildren } from '../../types';
 import type { SelectType } from '../Select/Select';
-export interface SelectTypographyProps {
+export interface SelectTypographyProps extends React.HTMLAttributes<HTMLSpanElement>, HasChildren {
     selectType?: SelectType;
-    className?: string;
-    children?: React.ReactNode;
 }
 /**
  * @private

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 { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport type { SelectType } from '../Select/Select';\nimport styles from './SelectTypography.module.css';\n\nconst sizeYClassNames = {\n  none: styles['SelectTypography--sizeY-none'],\n  compact: styles['SelectTypography--sizeY-compact'],\n};\n\nconst platformClassNames = {\n  vkcom: styles['SelectTypography--vkcom'],\n  android: styles['SelectTypography--android'],\n};\n\nexport interface SelectTypographyProps {\n  selectType?: SelectType;\n  className?: string;\n  children?: React.ReactNode;\n}\n\n/**\n * @private\n */\nexport const SelectTypography = ({\n  selectType = 'default',\n  children,\n  className,\n  ...restProps\n}: SelectTypographyProps) => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <span\n      className={classNames(\n        styles['SelectTypography'],\n        platformClassNames.hasOwnProperty(platform) && platformClassNames[platform],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        selectType === 'accent' && styles['SelectTypography--selectType-accent'],\n        className,\n      )}\n      {...restProps}\n    >\n      {children}\n    </span>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","usePlatform","SizeType","styles","sizeYClassNames","none","compact","platformClassNames","vkcom","android","SelectTypography","selectType","children","className","restProps","platform","sizeY","span","hasOwnProperty","REGULAR"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,OAAOC,YAAY,gCAAgC;AAEnD,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,+BAA+B;IAC5CG,SAASH,MAAM,CAAC,kCAAkC;AACpD;AAEA,MAAMI,qBAAqB;IACzBC,OAAOL,MAAM,CAAC,0BAA0B;IACxCM,SAASN,MAAM,CAAC,4BAA4B;AAC9C;AAQA;;CAEC,GACD,OAAO,MAAMO,mBAAmB,CAAC,EAC/BC,YAAa,UAAS,EACtBC,SAAQ,EACRC,UAAS,EACT,GAAGC,WACmB,GAAK;IAC3B,MAAMC,WAAWd;IACjB,MAAM,EAAEe,OAAQ,OAAM,EAAE,GAAGhB;IAE3B,qBACE,oBAACiB;QACCJ,WAAWd,WACTI,MAAM,CAAC,mBAAmB,EAC1BI,mBAAmBW,cAAc,CAACH,aAAaR,kBAAkB,CAACQ,SAAS,EAC3EC,UAAUd,SAASiB,OAAO,IAAIf,eAAe,CAACY,MAAM,EACpDL,eAAe,YAAYR,MAAM,CAAC,sCAAsC,EACxEU;QAED,GAAGC,SAAS;OAEZF;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/components/SelectTypography/SelectTypography.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasChildren } from '../../types';\nimport type { SelectType } from '../Select/Select';\nimport styles from './SelectTypography.module.css';\n\nconst sizeYClassNames = {\n  none: styles['SelectTypography--sizeY-none'],\n  compact: styles['SelectTypography--sizeY-compact'],\n};\n\nconst platformClassNames = {\n  vkcom: styles['SelectTypography--vkcom'],\n  android: styles['SelectTypography--android'],\n};\n\nexport interface SelectTypographyProps extends React.HTMLAttributes<HTMLSpanElement>, HasChildren {\n  selectType?: SelectType;\n}\n\n/**\n * @private\n */\nexport const SelectTypography = ({\n  selectType = 'default',\n  children,\n  className,\n  ...restProps\n}: SelectTypographyProps) => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <span\n      className={classNames(\n        styles['SelectTypography'],\n        platformClassNames.hasOwnProperty(platform) && platformClassNames[platform],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        selectType === 'accent' && styles['SelectTypography--selectType-accent'],\n        className,\n      )}\n      {...restProps}\n    >\n      {children}\n    </span>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","usePlatform","SizeType","styles","sizeYClassNames","none","compact","platformClassNames","vkcom","android","SelectTypography","selectType","children","className","restProps","platform","sizeY","span","hasOwnProperty","REGULAR"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAGhD,OAAOC,YAAY,gCAAgC;AAEnD,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,+BAA+B;IAC5CG,SAASH,MAAM,CAAC,kCAAkC;AACpD;AAEA,MAAMI,qBAAqB;IACzBC,OAAOL,MAAM,CAAC,0BAA0B;IACxCM,SAASN,MAAM,CAAC,4BAA4B;AAC9C;AAMA;;CAEC,GACD,OAAO,MAAMO,mBAAmB,CAAC,EAC/BC,YAAa,UAAS,EACtBC,SAAQ,EACRC,UAAS,EACT,GAAGC,WACmB,GAAK;IAC3B,MAAMC,WAAWd;IACjB,MAAM,EAAEe,OAAQ,OAAM,EAAE,GAAGhB;IAE3B,qBACE,oBAACiB;QACCJ,WAAWd,WACTI,MAAM,CAAC,mBAAmB,EAC1BI,mBAAmBW,cAAc,CAACH,aAAaR,kBAAkB,CAACQ,SAAS,EAC3EC,UAAUd,SAASiB,OAAO,IAAIf,eAAe,CAACY,MAAM,EACpDL,eAAe,YAAYR,MAAM,CAAC,sCAAsC,EACxEU;QAED,GAAGC,SAAS;OAEZF;AAGP,EAAE"}

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

@@ -1 +1,30 @@
-.vkuiSelectTypography--selectType-accent{font-size:15px;font-size:var(--vkui--font_paragraph--font_size--regular);font-weight:600;font-weight:var(--vkui--font_weight_accent1);line-height:20px;line-height:var(--vkui--font_paragraph--line_height--regular)}:not(.vkuiSelectTypography--selectType-accent).vkuiSelectTypography{font-size:16px;font-size:var(--vkui--font_headline1--font_size--regular);font-weight:400;font-weight:var(--vkui--font_weight_accent3);line-height:20px;line-height:var(--vkui--font_headline1--line_height--regular)}.vkuiSelectTypography--selectType-accent.vkuiSelectTypography--android{font-weight:500;font-weight:var(--vkui--font_weight_accent2)}.vkuiSelectTypography--sizeY-compact:not(.vkuiSelectTypography--selectType-accent),.vkuiSelectTypography--vkcom:not(.vkuiSelectTypography--selectType-accent){font-size:15px;font-size:var(--vkui--font_text--font_size--compact);font-weight:400;font-weight:var(--vkui--font_weight_accent3);line-height:20px;line-height:var(--vkui--font_text--line_height--compact)}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiSelectTypography--sizeY-none:not(.vkuiSelectTypography--selectType-accent){font-size:15px;font-size:var(--vkui--font_text--font_size--compact);font-weight:400;font-weight:var(--vkui--font_weight_accent3);line-height:20px;line-height:var(--vkui--font_text--line_height--compact)}}
+.SelectTypography--selectType-accent {
+  font-size: var(--vkui--font_paragraph--font_size--regular);
+  line-height: var(--vkui--font_paragraph--line_height--regular);
+  font-weight: var(--vkui--font_weight_accent1);
+}
+
+:not(.SelectTypography--selectType-accent).SelectTypography {
+  font-size: var(--vkui--font_headline1--font_size--regular);
+  line-height: var(--vkui--font_headline1--line_height--regular);
+  font-weight: var(--vkui--font_weight_accent3);
+}
+
+.SelectTypography--selectType-accent.SelectTypography--android {
+  font-weight: var(--vkui--font_weight_accent2);
+}
+
+.SelectTypography--vkcom:not(.SelectTypography--selectType-accent),
+.SelectTypography--sizeY-compact:not(.SelectTypography--selectType-accent) {
+  font-size: var(--vkui--font_text--font_size--compact);
+  line-height: var(--vkui--font_text--line_height--compact);
+  font-weight: var(--vkui--font_weight_accent3);
+}
+
+@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
+  .SelectTypography--sizeY-none:not(.SelectTypography--selectType-accent) {
+    font-size: var(--vkui--font_text--font_size--compact);
+    line-height: var(--vkui--font_text--line_height--compact);
+    font-weight: var(--vkui--font_weight_accent3);
+  }
+}

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

@@ -5,10 +5,8 @@ import styles from './Separator.module.css';
  * @see https://vkcom.github.io/VKUI/#/Separator
  */ export const Separator = ({ wide , className , ...restProps })=>/*#__PURE__*/ React.createElement("div", {
         ...restProps,
-        "aria-hidden": true,
-        className: classNames(styles['Separator'], !wide && styles['Separator--padded'], className),
-        role: "separator"
-    }, /*#__PURE__*/ React.createElement("div", {
+        className: classNames(styles['Separator'], !wide && styles['Separator--padded'], className)
+    }, /*#__PURE__*/ React.createElement("hr", {
         className: styles['Separator__in']
     }));
 

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 styles from './Separator.module.css';\n\nexport interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * С этим свойством компонент не будет иметь отступы слева и справа\n   */\n  wide?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Separator\n */\nexport const Separator = ({ wide, className, ...restProps }: SeparatorProps) => (\n  <div\n    {...restProps}\n    aria-hidden\n    className={classNames(styles['Separator'], !wide && styles['Separator--padded'], className)}\n    role=\"separator\"\n  >\n    <div className={styles['Separator__in']} />\n  </div>\n);\n"],"names":["React","classNames","styles","Separator","wide","className","restProps","div","aria-hidden","role"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,OAAOC,YAAY,yBAAyB;AAS5C;;CAEC,GACD,OAAO,MAAMC,YAAY,CAAC,EAAEC,KAAI,EAAEC,UAAS,EAAE,GAAGC,WAA2B,iBACzE,oBAACC;QACE,GAAGD,SAAS;QACbE,eAAAA,IAAW;QACXH,WAAWJ,WAAWC,MAAM,CAAC,YAAY,EAAE,CAACE,QAAQF,MAAM,CAAC,oBAAoB,EAAEG;QACjFI,MAAK;qBAEL,oBAACF;QAAIF,WAAWH,MAAM,CAAC,gBAAgB;QAEzC"}
+{"version":3,"sources":["../../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './Separator.module.css';\n\nexport interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * С этим свойством компонент не будет иметь отступы слева и справа\n   */\n  wide?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Separator\n */\nexport const Separator = ({ wide, className, ...restProps }: SeparatorProps) => (\n  <div\n    {...restProps}\n    className={classNames(styles['Separator'], !wide && styles['Separator--padded'], className)}\n  >\n    <hr className={styles['Separator__in']} />\n  </div>\n);\n"],"names":["React","classNames","styles","Separator","wide","className","restProps","div","hr"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,OAAOC,YAAY,yBAAyB;AAS5C;;CAEC,GACD,OAAO,MAAMC,YAAY,CAAC,EAAEC,KAAI,EAAEC,UAAS,EAAE,GAAGC,WAA2B,iBACzE,oBAACC;QACE,GAAGD,SAAS;QACbD,WAAWJ,WAAWC,MAAM,CAAC,YAAY,EAAE,CAACE,QAAQF,MAAM,CAAC,oBAAoB,EAAEG;qBAEjF,oBAACG;QAAGH,WAAWH,MAAM,CAAC,gBAAgB;QAExC"}

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

@@ -1 +1,48 @@
-.vkuiSeparator{color:#d7d8d9;color:var(--vkui--color_separator_primary)}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){.vkuiSeparator{color:#cbcccd;color:var(--vkui--color_separator_primary2x)}}@media (-webkit-min-device-pixel-ratio:3),(min-resolution:3dppx){.vkuiSeparator{color:#bebfc1;color:var(--vkui--color_separator_primary3x)}}.vkuiSeparator__in{background:currentColor;height:1px;height:var(--vkui_internal--thin_border);transform-origin:center top}.vkuiSeparator--padded .vkuiSeparator__in{margin-left:16px;margin-left:var(--vkui--size_base_padding_horizontal--regular);margin-right:16px;margin-right:var(--vkui--size_base_padding_horizontal--regular)}.vkuiInternalModalPage--sizeX-regular .vkuiSeparator--padded{padding-left:8px;padding-right:8px}@media (min-width:768px){.vkuiInternalModalPage--sizeX-none .vkuiSeparator--padded{padding-left:8px;padding-right:8px}}
+.Separator {
+  color: var(--vkui--color_separator_primary);
+}
+
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
+  .Separator {
+    color: var(--vkui--color_separator_primary2x);
+  }
+}
+
+@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
+  .Separator {
+    color: var(--vkui--color_separator_primary3x);
+  }
+}
+
+.Separator__in {
+  height: var(--vkui_internal--thin_border);
+  margin: 0;
+  background: currentColor;
+  color: inherit;
+  border: none;
+  transform-origin: center top;
+}
+
+.Separator--padded .Separator__in {
+  margin-left: var(--vkui--size_base_padding_horizontal--regular);
+  margin-right: var(--vkui--size_base_padding_horizontal--regular);
+}
+
+/*
+ * CMP:
+ * ModalPage
+ */
+
+:global(.vkuiInternalModalPage--sizeX-regular) .Separator--padded {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+
+/* FIXME: Мертвый код */
+
+@media (min-width: 768px) {
+  :global(.vkuiInternalModalPage--sizeX-none) .Separator--padded {
+    padding-left: 8px;
+    padding-right: 8px;
+  }
+}

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

@@ -6,6 +6,7 @@ import { usePlatform } from '../../hooks/usePlatform';
 import { SizeType } from '../../lib/adaptivity';
 import { Platform } from '../../lib/platform';
 import { Tappable } from '../Tappable/Tappable';
+import { Footnote } from '../Typography/Footnote/Footnote';
 import { Headline } from '../Typography/Headline/Headline';
 import { Subhead } from '../Typography/Subhead/Subhead';
 import styles from './SimpleCell.module.css';
@@ -29,7 +30,7 @@ const sizeYClassNames = {
         ...restProps,
         className: classNames(styles['SimpleCell'], 'vkuiInternalSimpleCell', platformClassNames.hasOwnProperty(platform) ? platformClassNames[platform] : platformClassNames.android, sizeYClassNames[sizeY], multiline && styles['SimpleCell--mult'], className)
     }, before, /*#__PURE__*/ React.createElement("div", {
-        className: styles['SimpleCell__main']
+        className: classNames(styles['SimpleCell__main'], 'vkuiInternalSimpleCell__main')
     }, subhead && /*#__PURE__*/ React.createElement(Subhead, {
         Component: "span",
         className: classNames(styles['SimpleCell__text'], styles['SimpleCell__subhead'])
@@ -47,12 +48,14 @@ const sizeYClassNames = {
         className: styles['SimpleCell__content']
     }, badgeBeforeSubtitle && /*#__PURE__*/ React.createElement("span", {
         className: styles['SimpleCell__badge']
-    }, badgeBeforeSubtitle), /*#__PURE__*/ React.createElement("span", {
-        className: classNames(styles['SimpleCell__typography'], styles['SimpleCell__text'], styles['SimpleCell__subtitle'])
+    }, 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("span", {
-        className: classNames(styles['SimpleCell__typography'], styles['SimpleCell__text'], styles['SimpleCell__extraSubtitle'])
+    }, badgeAfterSubtitle)), extraSubtitle && /*#__PURE__*/ React.createElement(Footnote, {
+        normalize: false,
+        className: classNames(styles['SimpleCell__text'], styles['SimpleCell__extraSubtitle'])
     }, extraSubtitle)), hasReactNode(indicator) && /*#__PURE__*/ React.createElement(Headline, {
         Component: "span",
         weight: "3",

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 { Icon24Chevron } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { HasComponent } from '../../types';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './SimpleCell.module.css';\n\nconst platformClassNames = {\n  ios: classNames(styles['SimpleCell--ios'], 'vkuiInternalSimpleCell--ios'),\n  android: styles['SimpleCell--android'],\n  vkcom: styles['SimpleCell--vkcom'],\n};\n\nconst sizeYClassNames = {\n  none: classNames(styles['SimpleCell--sizeY-none'], 'vkuiInternalSimpleCell--sizeY-none'),\n  [SizeType.COMPACT]: classNames(\n    styles['SimpleCell--sizeY-compact'],\n    'vkuiInternalSimpleCell--sizeY-compact',\n  ),\n  [SizeType.REGULAR]: styles['SimpleCell--sizeY-regular'],\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   * В iOS добавляет chevron справа. Передавать `true`, если предполагается переход при клике по ячейке.\n   */\n  expandable?: boolean;\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  ...restProps\n}: SimpleCellProps) => {\n  const platform = usePlatform();\n  const hasAfter = hasReactNode(after) || (expandable && platform === Platform.IOS);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      className={classNames(\n        styles['SimpleCell'],\n        'vkuiInternalSimpleCell',\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        sizeYClassNames[sizeY],\n        multiline && styles['SimpleCell--mult'],\n        className,\n      )}\n    >\n      {before}\n      <div className={styles['SimpleCell__main']}>\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            <span\n              className={classNames(\n                styles['SimpleCell__typography'],\n                styles['SimpleCell__text'],\n                styles['SimpleCell__subtitle'],\n              )}\n            >\n              {subtitle}\n            </span>\n            {badgeAfterSubtitle && (\n              <span className={styles['SimpleCell__badge']}>{badgeAfterSubtitle}</span>\n            )}\n          </div>\n        )}\n        {extraSubtitle && (\n          <span\n            className={classNames(\n              styles['SimpleCell__typography'],\n              styles['SimpleCell__text'],\n              styles['SimpleCell__extraSubtitle'],\n            )}\n          >\n            {extraSubtitle}\n          </span>\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          {expandable && platform === Platform.IOS && <Icon24Chevron />}\n        </div>\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","Icon24Chevron","classNames","hasReactNode","useAdaptivity","usePlatform","SizeType","Platform","Tappable","Headline","Subhead","styles","platformClassNames","ios","android","vkcom","sizeYClassNames","none","COMPACT","REGULAR","SimpleCell","badgeBeforeTitle","badgeAfterTitle","badgeBeforeSubtitle","badgeAfterSubtitle","before","indicator","children","after","expandable","multiline","subhead","subtitle","extraSubtitle","className","restProps","platform","hasAfter","IOS","sizeY","hasOwnProperty","div","Component","span","weight"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/SimpleCell/SimpleCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Chevron } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\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 styles from './SimpleCell.module.css';\n\nconst platformClassNames = {\n  ios: classNames(styles['SimpleCell--ios'], 'vkuiInternalSimpleCell--ios'),\n  android: styles['SimpleCell--android'],\n  vkcom: styles['SimpleCell--vkcom'],\n};\n\nconst sizeYClassNames = {\n  none: classNames(styles['SimpleCell--sizeY-none'], 'vkuiInternalSimpleCell--sizeY-none'),\n  [SizeType.COMPACT]: classNames(\n    styles['SimpleCell--sizeY-compact'],\n    'vkuiInternalSimpleCell--sizeY-compact',\n  ),\n  [SizeType.REGULAR]: styles['SimpleCell--sizeY-regular'],\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   * В iOS добавляет chevron справа. Передавать `true`, если предполагается переход при клике по ячейке.\n   */\n  expandable?: boolean;\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  ...restProps\n}: SimpleCellProps) => {\n  const platform = usePlatform();\n  const hasAfter = hasReactNode(after) || (expandable && platform === Platform.IOS);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      className={classNames(\n        styles['SimpleCell'],\n        'vkuiInternalSimpleCell',\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        sizeYClassNames[sizeY],\n        multiline && styles['SimpleCell--mult'],\n        className,\n      )}\n    >\n      {before}\n      <div className={classNames(styles['SimpleCell__main'], 'vkuiInternalSimpleCell__main')}>\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            normalize={false}\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          {expandable && platform === Platform.IOS && <Icon24Chevron />}\n        </div>\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","Icon24Chevron","classNames","hasReactNode","useAdaptivity","usePlatform","SizeType","Platform","Tappable","Footnote","Headline","Subhead","styles","platformClassNames","ios","android","vkcom","sizeYClassNames","none","COMPACT","REGULAR","SimpleCell","badgeBeforeTitle","badgeAfterTitle","badgeBeforeSubtitle","badgeAfterSubtitle","before","indicator","children","after","expandable","multiline","subhead","subtitle","extraSubtitle","className","restProps","platform","hasAfter","IOS","sizeY","hasOwnProperty","div","Component","span","weight","normalize"],"mappings":"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"}

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

@@ -1 +1,223 @@
-.vkuiSimpleCell{align-items:center;color:#000;color:var(--vkui--color_text_primary);display:flex;min-height:48px;padding-left:16px;padding-left:var(--vkui--size_base_padding_horizontal--regular);padding-right:16px;padding-right:var(--vkui--size_base_padding_horizontal--regular);text-decoration:none;white-space:nowrap}.vkuiSimpleCell--mult{white-space:normal}.vkuiSimpleCell--mult .vkuiSimpleCell__children{text-overflow:clip}.vkuiSimpleCell__main{flex-grow:1;max-width:100%;min-width:0;overflow:hidden}.vkuiSimpleCell>.vkuiIcon{color:#2688eb;color:var(--vkui--color_icon_accent);flex-shrink:0;padding-bottom:10px;padding-right:12px;padding-top:10px}.vkuiSimpleCell>.vkuiIcon--28{padding-right:16px}.vkuiSimpleCell__subhead{color:#6d7885;color:var(--vkui--color_text_subhead)}.vkuiSimpleCell__text{overflow:hidden;text-overflow:ellipsis}.vkuiSimpleCell__extraSubtitle,.vkuiSimpleCell__subtitle{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiSimpleCell .vkuiSimpleCell__content{align-content:flex-start;align-items:center;display:flex;justify-content:space-between;max-width:100%}.vkuiSimpleCell:not(.vkuiSimpleCell--mult) .vkuiSimpleCell__content{justify-content:flex-start}.vkuiSimpleCell__children{color:inherit;display:block;overflow:hidden;text-overflow:ellipsis}.vkuiSimpleCell--mult .vkuiSimpleCell__children,.vkuiSimpleCell--mult .vkuiSimpleCell__subtitle{flex:1 1 auto}.vkuiSimpleCell__badge{color:#2688eb;color:var(--vkui--color_icon_accent);display:inline-block;flex-grow:0;flex-shrink:0}.vkuiSimpleCell__content>:not(:last-child){margin-right:4px}.vkuiSimpleCell__indicator{color:#818c99;color:var(--vkui--color_text_secondary);min-width:0;overflow:hidden;padding-left:4px;text-overflow:ellipsis;white-space:nowrap}.vkuiSimpleCell__after{align-items:center;color:#2688eb;color:var(--vkui--color_icon_accent);display:flex;flex-shrink:0}.vkuiSimpleCell__after>.vkuiIcon{padding-left:8px}.vkuiSimpleCell__after>.vkuiIcon:last-child{padding-right:2px}.vkuiSimpleCell__after .vkuiIconButton:last-child{margin-right:-12px}.vkuiSimpleCell__typography{font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_footnote--font_family--regular);font-size:13px;font-size:var(--vkui--font_footnote--font_size--regular);font-weight:400;font-weight:var(--vkui--font_footnote--font_weight--regular);line-height:16px;line-height:var(--vkui--font_footnote--line_height--regular)}.vkuiSimpleCell--ios .vkuiSimpleCell__indicator,.vkuiSimpleCell--ios .vkuiSimpleCell__main{padding-bottom:11px;padding-top:9px}.vkuiSimpleCell--ios>.vkuiIcon--28{padding-left:4px}.vkuiSimpleCell--ios .vkuiSimpleCell__after .vkuiIcon--chevron_24{color:#b8c1cc;color:var(--vkui--color_icon_tertiary);padding-left:12px;padding-right:4px}.vkuiSimpleCell--ios .vkuiSimpleCell__after .vkuiIconButton:last-child{margin-right:-9px}.vkuiSimpleCell--sizeY-regular.vkuiSimpleCell--ios>.vkuiAvatar:not(.vkuiAvatar--size-32)~.vkuiSimpleCell__indicator,.vkuiSimpleCell--sizeY-regular.vkuiSimpleCell--ios>.vkuiAvatar:not(.vkuiAvatar--size-32)~.vkuiSimpleCell__main .vkuiSimpleCell__children{font-size:16px;line-height:20px}@media (max-width:767.9px) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiSimpleCell--sizeY-none.vkuiSimpleCell--ios>.vkuiAvatar:not(.vkuiAvatar--size-32)~.vkuiSimpleCell__indicator,.vkuiSimpleCell--sizeY-none.vkuiSimpleCell--ios>.vkuiAvatar:not(.vkuiAvatar--size-32)~.vkuiSimpleCell__main .vkuiSimpleCell__children{font-size:16px;line-height:20px}}.vkuiSimpleCell--android .vkuiSimpleCell__indicator,.vkuiSimpleCell--android .vkuiSimpleCell__main,.vkuiSimpleCell--vkcom .vkuiSimpleCell__indicator,.vkuiSimpleCell--vkcom .vkuiSimpleCell__main{padding-bottom:10px;padding-top:11px}.vkuiSimpleCell--sizeY-compact{min-height:44px}.vkuiSimpleCell--sizeY-compact .vkuiSimpleCell__indicator,.vkuiSimpleCell--sizeY-compact .vkuiSimpleCell__main{padding-bottom:10px;padding-top:10px}.vkuiSimpleCell--sizeY-compact .vkuiSimpleCell__description,.vkuiSimpleCell--sizeY-compact>.vkuiAvatar--size-28~.vkuiSimpleCell__main .vkuiSimpleCell__description,.vkuiSimpleCell--sizeY-compact>.vkuiAvatar--size-32~.vkuiSimpleCell__main .vkuiSimpleCell__description{margin-top:1px}.vkuiSimpleCell--sizeY-compact .vkuiSimpleCell__badge .vkuiBadge{transform:translateY(.5px)}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiSimpleCell--sizeY-none{min-height:44px}.vkuiSimpleCell--sizeY-none .vkuiSimpleCell__indicator,.vkuiSimpleCell--sizeY-none .vkuiSimpleCell__main{padding-bottom:10px;padding-top:10px}.vkuiSimpleCell--sizeY-none .vkuiSimpleCell__description,.vkuiSimpleCell--sizeY-none>.vkuiAvatar--size-28~.vkuiSimpleCell__main .vkuiSimpleCell__description,.vkuiSimpleCell--sizeY-none>.vkuiAvatar--size-32~.vkuiSimpleCell__main .vkuiSimpleCell__description{margin-top:1px}.vkuiSimpleCell--sizeY-none .vkuiSimpleCell__badge .vkuiBadge{transform:translateY(.5px)}}.vkuiInternalFormItem>.vkuiSimpleCell{margin:0 calc(-1 * 16px);margin:0 calc(-1 * var(--vkui--size_base_padding_horizontal--regular))}.vkuiSimpleCell__main>:not(:first-child){margin-top:2px}
+.SimpleCell {
+  display: flex;
+  align-items: center;
+  min-height: 48px;
+  white-space: nowrap;
+  text-decoration: none;
+  color: var(--vkui--color_text_primary);
+  padding-left: var(--vkui--size_base_padding_horizontal--regular);
+  padding-right: var(--vkui--size_base_padding_horizontal--regular);
+}
+
+.SimpleCell--mult {
+  white-space: normal;
+}
+
+.SimpleCell--mult .SimpleCell__children {
+  text-overflow: initial;
+}
+
+.SimpleCell__main {
+  max-width: 100%;
+  flex-grow: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.SimpleCell > :global(.vkuiIcon) {
+  padding-top: 10px;
+  padding-bottom: 10px;
+  padding-right: 12px;
+  flex-shrink: 0;
+  color: var(--vkui--color_icon_accent);
+}
+
+.SimpleCell > :global(.vkuiIcon--28) {
+  padding-right: 16px;
+}
+
+.SimpleCell__subhead {
+  color: var(--vkui--color_text_subhead);
+}
+
+.SimpleCell__text {
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.SimpleCell__subtitle,
+.SimpleCell__extraSubtitle {
+  color: var(--vkui--color_text_secondary);
+}
+
+.SimpleCell .SimpleCell__content {
+  display: flex;
+  align-content: flex-start;
+  align-items: center;
+  justify-content: space-between;
+  max-width: 100%;
+}
+
+.SimpleCell:not(.SimpleCell--mult) .SimpleCell__content {
+  justify-content: flex-start;
+}
+
+.SimpleCell__children {
+  color: inherit;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: block;
+}
+
+.SimpleCell--mult .SimpleCell__children,
+.SimpleCell--mult .SimpleCell__subtitle {
+  flex: 1 1 auto;
+}
+
+.SimpleCell__badge {
+  display: inline-block;
+  flex-grow: 0;
+  flex-shrink: 0;
+  color: var(--vkui--color_icon_accent);
+}
+
+.SimpleCell__content > *:not(:last-child) {
+  margin-right: 4px;
+}
+
+.SimpleCell__indicator {
+  color: var(--vkui--color_text_secondary);
+  min-width: 0;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  padding-left: 4px;
+}
+
+.SimpleCell__after {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  color: var(--vkui--color_icon_accent);
+}
+
+.SimpleCell__after > :global(.vkuiIcon) {
+  padding-left: 8px;
+}
+
+.SimpleCell__after > :global(.vkuiIcon):last-child {
+  padding-right: 2px;
+}
+
+/**
+ * iOS
+ */
+
+.SimpleCell--ios .SimpleCell__main,
+.SimpleCell--ios .SimpleCell__indicator {
+  padding-top: 9px;
+  padding-bottom: 11px;
+}
+
+.SimpleCell--ios > :global(.vkuiIcon--28) {
+  padding-left: 4px;
+}
+
+.SimpleCell--ios .SimpleCell__after :global(.vkuiIcon--chevron_24) {
+  color: var(--vkui--color_icon_tertiary);
+  padding-right: 4px;
+  padding-left: 12px;
+}
+
+.SimpleCell--sizeY-regular.SimpleCell--ios
+  > .Avatar:not(.Avatar--size-32)
+  ~ .SimpleCell__main
+  .SimpleCell__children,
+.SimpleCell--sizeY-regular.SimpleCell--ios
+  > .Avatar:not(.Avatar--size-32)
+  ~ .SimpleCell__indicator {
+  font-size: 16px;
+  line-height: 20px;
+}
+
+@media (pointer: coarse) and (min-height: 415px),(pointer: none) and (min-height: 415px),(max-width: 767.9px) and (min-height: 415px) {
+  .SimpleCell--sizeY-none.SimpleCell--ios
+    > .Avatar:not(.Avatar--size-32)
+    ~ .SimpleCell__main
+    .SimpleCell__children,
+  .SimpleCell--sizeY-none.SimpleCell--ios > .Avatar:not(.Avatar--size-32) ~ .SimpleCell__indicator {
+    font-size: 16px;
+    line-height: 20px;
+  }
+}
+
+/**
+ * Android & VKCOM
+ */
+
+.SimpleCell--android .SimpleCell__main,
+.SimpleCell--android .SimpleCell__indicator,
+.SimpleCell--vkcom .SimpleCell__main,
+.SimpleCell--vkcom .SimpleCell__indicator {
+  padding-top: 11px;
+  padding-bottom: 10px;
+}
+
+/**
+ * sizeY === 'compact'
+ */
+
+.SimpleCell--sizeY-compact {
+  min-height: 44px;
+}
+
+.SimpleCell--sizeY-compact .SimpleCell__main,
+.SimpleCell--sizeY-compact .SimpleCell__indicator {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.SimpleCell--sizeY-compact .SimpleCell__description,
+.SimpleCell--sizeY-compact > .Avatar--size-32 ~ .SimpleCell__main .SimpleCell__description,
+.SimpleCell--sizeY-compact > .Avatar--size-28 ~ .SimpleCell__main .SimpleCell__description {
+  margin-top: 1px;
+}
+
+.SimpleCell--sizeY-compact .SimpleCell__badge .Badge {
+  transform: translateY(0.5px);
+}
+
+@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
+  .SimpleCell--sizeY-none {
+    min-height: 44px;
+  }
+
+  .SimpleCell--sizeY-none .SimpleCell__main,
+  .SimpleCell--sizeY-none .SimpleCell__indicator {
+    padding-top: 10px;
+    padding-bottom: 10px;
+  }
+
+  .SimpleCell--sizeY-none .SimpleCell__description,
+  .SimpleCell--sizeY-none > .Avatar--size-32 ~ .SimpleCell__main .SimpleCell__description,
+  .SimpleCell--sizeY-none > .Avatar--size-28 ~ .SimpleCell__main .SimpleCell__description {
+    margin-top: 1px;
+  }
+
+  .SimpleCell--sizeY-none .SimpleCell__badge .Badge {
+    transform: translateY(0.5px);
+  }
+}
+
+/**
+ * CMP:
+ * FormItem
+ */
+
+:global(.vkuiInternalFormItem) > .SimpleCell {
+  margin: 0 calc(-1 * var(--vkui--size_base_padding_horizontal--regular));
+}
+
+.SimpleCell__main > *:not(:first-child) {
+  margin-top: 2px;
+}

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

@@ -1 +1,134 @@
-.vkuiSlider{height:28px;padding:0 14px;position:relative}.vkuiSlider:before{background-color:#e1e3e6;background-color:var(--vkui--color_track_background);border-radius:1px;content:"";height:2px;left:0;position:absolute;top:13px;width:100%}.vkuiSlider__in{height:100%;position:relative}.vkuiSlider__dragger{height:0;left:0;position:absolute;top:13px;width:0}.vkuiSlider__dragger:before{background:#2688eb;background:var(--vkui--color_background_accent);border-radius:1px;content:"";height:2px;left:-14px;position:absolute;top:0;width:calc(100% + 28px)}.vkuiSlider__thumb{background:#fff;background:var(--vkui--color_background_contrast);border:.5px solid rgba(0,0,0,.12);border:.5px solid var(--vkui--color_separator_primary_alpha);border-radius:14px;box-shadow:0 0 2px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.08);box-shadow:var(--vkui--elevation3);height:28px;position:absolute;top:-13px;transition:transform .1s ease;width:28px}.vkuiSlider__thumb--start{left:-14px}.vkuiSlider__thumb--end{right:-14px}.vkuiSlider--disabled{opacity:.64;opacity:var(--vkui--opacity_disable_accessibility)}.vkuiSlider--sizeY-compact{height:24px;padding:0 12px}.vkuiSlider--sizeY-compact .vkuiSlider__dragger,.vkuiSlider--sizeY-compact:before{top:11px}.vkuiSlider--sizeY-compact .vkuiSlider__dragger:before{left:-12px;width:calc(100% + 24px)}.vkuiSlider--sizeY-compact .vkuiSlider__thumb{height:24px;top:-11px;width:24px}.vkuiSlider--sizeY-compact .vkuiSlider__thumb--start{left:-12px}.vkuiSlider--sizeY-compact .vkuiSlider__thumb--end{right:-12px}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiSlider--sizeY-none{height:24px;padding:0 12px}.vkuiSlider--sizeY-none .vkuiSlider__dragger,.vkuiSlider--sizeY-none:before{top:11px}.vkuiSlider--sizeY-none .vkuiSlider__dragger:before{left:-12px;width:calc(100% + 24px)}.vkuiSlider--sizeY-none .vkuiSlider__thumb{height:24px;top:-11px;width:24px}.vkuiSlider--sizeY-none .vkuiSlider__thumb--start{left:-12px}.vkuiSlider--sizeY-none .vkuiSlider__thumb--end{right:-12px}}
+.Slider {
+  position: relative;
+  height: 28px;
+  padding: 0 14px;
+}
+
+.Slider::before {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  background-color: var(--vkui--color_track_background);
+  content: '';
+  top: 13px;
+  height: 2px;
+  border-radius: 1px;
+}
+
+.Slider__in {
+  height: 100%;
+  position: relative;
+}
+
+.Slider__dragger {
+  position: absolute;
+  left: 0;
+  width: 0;
+  height: 0;
+  top: 13px;
+}
+
+.Slider__dragger::before {
+  position: absolute;
+  top: 0;
+  width: calc(100% + 28px);
+  background: var(--vkui--color_background_accent);
+  content: '';
+  left: -14px;
+  height: 2px;
+  border-radius: 1px;
+}
+
+.Slider__thumb {
+  position: absolute;
+  top: -13px;
+  width: 28px;
+  height: 28px;
+  transition: transform 0.1s ease;
+  border-radius: 14px;
+  background: var(--vkui--color_background_contrast);
+  box-shadow: var(--vkui--elevation3);
+  border: 0.5px solid var(--vkui--color_separator_primary_alpha);
+}
+
+.Slider__thumb--start {
+  left: -14px;
+}
+
+.Slider__thumb--end {
+  right: -14px;
+}
+
+.Slider--disabled {
+  opacity: var(--vkui--opacity_disable_accessibility);
+}
+
+/**
+ * sizeY COMPACT
+ */
+
+.Slider--sizeY-compact {
+  height: 24px;
+  padding: 0 12px;
+}
+
+.Slider--sizeY-compact::before {
+  top: 11px;
+}
+
+.Slider--sizeY-compact .Slider__dragger {
+  top: 11px;
+}
+
+.Slider--sizeY-compact .Slider__dragger::before {
+  width: calc(100% + 24px);
+  left: -12px;
+}
+
+.Slider--sizeY-compact .Slider__thumb {
+  top: -11px;
+  width: 24px;
+  height: 24px;
+}
+
+.Slider--sizeY-compact .Slider__thumb--start {
+  left: -12px;
+}
+
+.Slider--sizeY-compact .Slider__thumb--end {
+  right: -12px;
+}
+
+@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
+  .Slider--sizeY-none {
+    height: 24px;
+    padding: 0 12px;
+  }
+
+  .Slider--sizeY-none::before {
+    top: 11px;
+  }
+
+  .Slider--sizeY-none .Slider__dragger {
+    top: 11px;
+  }
+
+  .Slider--sizeY-none .Slider__dragger::before {
+    width: calc(100% + 24px);
+    left: -12px;
+  }
+
+  .Slider--sizeY-none .Slider__thumb {
+    top: -11px;
+    width: 24px;
+    height: 24px;
+  }
+
+  .Slider--sizeY-none .Slider__thumb--start {
+    left: -12px;
+  }
+
+  .Slider--sizeY-none .Slider__thumb--end {
+    right: -12px;
+  }
+}