@vkontakte/vkui 6.5.3 → 6.7.0

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { HTMLAttributesWithRootRef } from '../../types';
+import type { HTMLAttributesWithRootRef } from '../../types';
 export type SegmentedControlValue = string | number | undefined;
 export interface SegmentedControlOptionInterface extends Omit<React.HTMLAttributes<HTMLElement>, 'label'> {
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAUxD,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;AAEhE,MAAM,WAAW,+BACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IACxD;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC;IACxB,KAAK,EAAE,qBAAqB,CAAC;CAC9B;AAED,MAAM,WAAW,qBACf,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACnE,OAAO,EAAE,+BAA+B,EAAE,CAAC;IAC3C,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAClD,KAAK,CAAC,EAAE,qBAAqB,CAAC;IAC9B,YAAY,CAAC,EAAE,qBAAqB,CAAC;CACtC;AAID;;GAEG;AACH,eAAO,MAAM,gBAAgB,4GAS1B,qBAAqB,KAAG,KAAK,CAAC,SAuDhC,CAAC"}
+{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAU7D,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;AAEhE,MAAM,WAAW,+BACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IACxD;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC;IACxB,KAAK,EAAE,qBAAqB,CAAC;CAC9B;AAED,MAAM,WAAW,qBACf,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACnE,OAAO,EAAE,+BAA+B,EAAE,CAAC;IAC3C,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAClD,KAAK,CAAC,EAAE,qBAAqB,CAAC;IAC9B,YAAY,CAAC,EAAE,qBAAqB,CAAC;CACtC;AAID;;GAEG;AACH,eAAO,MAAM,gBAAgB,4GAS1B,qBAAqB,KAAG,KAAK,CAAC,SAuDhC,CAAC"}

package/dist/cssm/components/SegmentedControl/SegmentedControl.js

@@ -10,7 +10,7 @@ import { SegmentedControlOption } from './SegmentedControlOption/SegmentedContro
 import styles from './SegmentedControl.module.css';
 const sizeYClassNames = {
     none: styles['SegmentedControl--sizeY-none'],
-    ['regular']: styles['SegmentedControl--sizeY-regular']
+    regular: styles['SegmentedControl--sizeY-regular']
 };
 const warn = warnOnce('SegmentedControl');
 /**

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { SegmentedControlOption } from './SegmentedControlOption/SegmentedControlOption';\nimport styles from './SegmentedControl.module.css';\n\nconst sizeYClassNames = {\n  none: styles['SegmentedControl--sizeY-none'],\n  ['regular']: styles['SegmentedControl--sizeY-regular'],\n};\n\nexport type SegmentedControlValue = string | number | undefined;\n\nexport interface SegmentedControlOptionInterface\n  extends Omit<React.HTMLAttributes<HTMLElement>, 'label'> {\n  /**\n   * Вставляет элемент перед основным контентом.\n   * Рекомендуется использовать только иконки с размером 20\n   */\n  before?: React.ReactNode;\n  label: React.ReactChild;\n  value: SegmentedControlValue;\n}\n\nexport interface SegmentedControlProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'> {\n  options: SegmentedControlOptionInterface[];\n  size?: 'm' | 'l';\n  name?: string;\n  onChange?: (value: SegmentedControlValue) => void;\n  value?: SegmentedControlValue;\n  defaultValue?: SegmentedControlValue;\n}\n\nconst warn = warnOnce('SegmentedControl');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SegmentedControl\n */\nexport const SegmentedControl = ({\n  size = 'l',\n  name,\n  options,\n  defaultValue = options[0]?.value,\n  children,\n  onChange: onChangeProp,\n  value: valueProp,\n  ...restProps\n}: SegmentedControlProps): React.ReactNode => {\n  const id = React.useId();\n\n  const [value, onChange] = useCustomEnsuredControl({\n    onChange: onChangeProp,\n    value: valueProp,\n    defaultValue,\n  });\n\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const actualIndex = options.findIndex((option) => option.value === value);\n\n  useIsomorphicLayoutEffect(() => {\n    if (actualIndex === -1 && process.env.NODE_ENV === 'development') {\n      warn('defaultValue: такого значения нет среди опций!', 'error');\n    }\n  }, [actualIndex]);\n\n  const translateX = `translateX(${100 * actualIndex}%)`;\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['SegmentedControl'],\n        sizeY !== 'compact' && sizeYClassNames[sizeY],\n        size === 'l' && styles['SegmentedControl--size-l'],\n      )}\n    >\n      <div role=\"radiogroup\" className={styles['SegmentedControl__in']}>\n        {actualIndex > -1 && (\n          <div\n            aria-hidden\n            className={styles['SegmentedControl__slider']}\n            style={{\n              width: `${100 / options.length}%`,\n              transform: translateX,\n            }}\n          />\n        )}\n        {options.map(({ label, ...optionProps }) => (\n          <SegmentedControlOption\n            key={`${optionProps.value}`}\n            {...optionProps}\n            name={name ?? id}\n            checked={value === optionProps.value}\n            onChange={() => onChange(optionProps.value)}\n          >\n            {label}\n          </SegmentedControlOption>\n        ))}\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useCustomEnsuredControl","useIsomorphicLayoutEffect","warnOnce","RootComponent","SegmentedControlOption","styles","sizeYClassNames","none","warn","SegmentedControl","size","name","options","defaultValue","value","children","onChange","onChangeProp","valueProp","restProps","id","useId","sizeY","actualIndex","findIndex","option","process","env","NODE_ENV","translateX","baseClassName","div","role","className","aria-hidden","style","width","length","transform","map","label","optionProps","checked"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,uBAAuB,QAAQ,gCAAgC;AACxE,SAASC,yBAAyB,QAAQ,sCAAsC;AAChF,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,sBAAsB,QAAQ,kDAAkD;AACzF,OAAOC,YAAY,gCAAgC;AAEnD,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,+BAA+B;IAC5C,CAAC,UAAU,EAAEA,MAAM,CAAC,kCAAkC;AACxD;AAyBA,MAAMG,OAAON,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMO,mBAAmB,CAAC,EAC/BC,OAAO,GAAG,EACVC,IAAI,EACJC,OAAO,EACPC,eAAeD,OAAO,CAAC,EAAE,EAAEE,KAAK,EAChCC,QAAQ,EACRC,UAAUC,YAAY,EACtBH,OAAOI,SAAS,EAChB,GAAGC,WACmB;IACtB,MAAMC,KAAKvB,MAAMwB,KAAK;IAEtB,MAAM,CAACP,OAAOE,SAAS,GAAGhB,wBAAwB;QAChDgB,UAAUC;QACVH,OAAOI;QACPL;IACF;IAEA,MAAM,EAAES,QAAQ,MAAM,EAAE,GAAGvB;IAE3B,MAAMwB,cAAcX,QAAQY,SAAS,CAAC,CAACC,SAAWA,OAAOX,KAAK,KAAKA;IAEnEb,0BAA0B;QACxB,IAAIsB,gBAAgB,CAAC,KAAKG,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;YAChEpB,KAAK,kDAAkD;QACzD;IACF,GAAG;QAACe;KAAY;IAEhB,MAAMM,aAAa,CAAC,WAAW,EAAE,MAAMN,YAAY,EAAE,CAAC;IAEtD,qBACE,KAACpB;QACE,GAAGgB,SAAS;QACbW,eAAehC,WACbO,MAAM,CAAC,mBAAmB,EAC1BiB,UAAU,aAAahB,eAAe,CAACgB,MAAM,EAC7CZ,SAAS,OAAOL,MAAM,CAAC,2BAA2B;kBAGpD,cAAA,MAAC0B;YAAIC,MAAK;YAAaC,WAAW5B,MAAM,CAAC,uBAAuB;;gBAC7DkB,cAAc,CAAC,mBACd,KAACQ;oBACCG,aAAW;oBACXD,WAAW5B,MAAM,CAAC,2BAA2B;oBAC7C8B,OAAO;wBACLC,OAAO,CAAC,EAAE,MAAMxB,QAAQyB,MAAM,CAAC,CAAC,CAAC;wBACjCC,WAAWT;oBACb;;gBAGHjB,QAAQ2B,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAE,GAAGC,aAAa,iBACrC,KAACrC;wBAEE,GAAGqC,WAAW;wBACf9B,MAAMA,QAAQS;wBACdsB,SAAS5B,UAAU2B,YAAY3B,KAAK;wBACpCE,UAAU,IAAMA,SAASyB,YAAY3B,KAAK;kCAEzC0B;uBANI,CAAC,EAAEC,YAAY3B,KAAK,CAAC,CAAC;;;;AAYvC,EAAE"}
+{"version":3,"sources":["../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { SegmentedControlOption } from './SegmentedControlOption/SegmentedControlOption';\nimport styles from './SegmentedControl.module.css';\n\nconst sizeYClassNames = {\n  none: styles['SegmentedControl--sizeY-none'],\n  regular: styles['SegmentedControl--sizeY-regular'],\n};\n\nexport type SegmentedControlValue = string | number | undefined;\n\nexport interface SegmentedControlOptionInterface\n  extends Omit<React.HTMLAttributes<HTMLElement>, 'label'> {\n  /**\n   * Вставляет элемент перед основным контентом.\n   * Рекомендуется использовать только иконки с размером 20\n   */\n  before?: React.ReactNode;\n  label: React.ReactChild;\n  value: SegmentedControlValue;\n}\n\nexport interface SegmentedControlProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'> {\n  options: SegmentedControlOptionInterface[];\n  size?: 'm' | 'l';\n  name?: string;\n  onChange?: (value: SegmentedControlValue) => void;\n  value?: SegmentedControlValue;\n  defaultValue?: SegmentedControlValue;\n}\n\nconst warn = warnOnce('SegmentedControl');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SegmentedControl\n */\nexport const SegmentedControl = ({\n  size = 'l',\n  name,\n  options,\n  defaultValue = options[0]?.value,\n  children,\n  onChange: onChangeProp,\n  value: valueProp,\n  ...restProps\n}: SegmentedControlProps): React.ReactNode => {\n  const id = React.useId();\n\n  const [value, onChange] = useCustomEnsuredControl({\n    onChange: onChangeProp,\n    value: valueProp,\n    defaultValue,\n  });\n\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const actualIndex = options.findIndex((option) => option.value === value);\n\n  useIsomorphicLayoutEffect(() => {\n    if (actualIndex === -1 && process.env.NODE_ENV === 'development') {\n      warn('defaultValue: такого значения нет среди опций!', 'error');\n    }\n  }, [actualIndex]);\n\n  const translateX = `translateX(${100 * actualIndex}%)`;\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['SegmentedControl'],\n        sizeY !== 'compact' && sizeYClassNames[sizeY],\n        size === 'l' && styles['SegmentedControl--size-l'],\n      )}\n    >\n      <div role=\"radiogroup\" className={styles['SegmentedControl__in']}>\n        {actualIndex > -1 && (\n          <div\n            aria-hidden\n            className={styles['SegmentedControl__slider']}\n            style={{\n              width: `${100 / options.length}%`,\n              transform: translateX,\n            }}\n          />\n        )}\n        {options.map(({ label, ...optionProps }) => (\n          <SegmentedControlOption\n            key={`${optionProps.value}`}\n            {...optionProps}\n            name={name ?? id}\n            checked={value === optionProps.value}\n            onChange={() => onChange(optionProps.value)}\n          >\n            {label}\n          </SegmentedControlOption>\n        ))}\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useCustomEnsuredControl","useIsomorphicLayoutEffect","warnOnce","RootComponent","SegmentedControlOption","styles","sizeYClassNames","none","regular","warn","SegmentedControl","size","name","options","defaultValue","value","children","onChange","onChangeProp","valueProp","restProps","id","useId","sizeY","actualIndex","findIndex","option","process","env","NODE_ENV","translateX","baseClassName","div","role","className","aria-hidden","style","width","length","transform","map","label","optionProps","checked"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,uBAAuB,QAAQ,gCAAgC;AACxE,SAASC,yBAAyB,QAAQ,sCAAsC;AAChF,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,sBAAsB,QAAQ,kDAAkD;AACzF,OAAOC,YAAY,gCAAgC;AAEnD,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,+BAA+B;IAC5CG,SAASH,MAAM,CAAC,kCAAkC;AACpD;AAyBA,MAAMI,OAAOP,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMQ,mBAAmB,CAAC,EAC/BC,OAAO,GAAG,EACVC,IAAI,EACJC,OAAO,EACPC,eAAeD,OAAO,CAAC,EAAE,EAAEE,KAAK,EAChCC,QAAQ,EACRC,UAAUC,YAAY,EACtBH,OAAOI,SAAS,EAChB,GAAGC,WACmB;IACtB,MAAMC,KAAKxB,MAAMyB,KAAK;IAEtB,MAAM,CAACP,OAAOE,SAAS,GAAGjB,wBAAwB;QAChDiB,UAAUC;QACVH,OAAOI;QACPL;IACF;IAEA,MAAM,EAAES,QAAQ,MAAM,EAAE,GAAGxB;IAE3B,MAAMyB,cAAcX,QAAQY,SAAS,CAAC,CAACC,SAAWA,OAAOX,KAAK,KAAKA;IAEnEd,0BAA0B;QACxB,IAAIuB,gBAAgB,CAAC,KAAKG,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;YAChEpB,KAAK,kDAAkD;QACzD;IACF,GAAG;QAACe;KAAY;IAEhB,MAAMM,aAAa,CAAC,WAAW,EAAE,MAAMN,YAAY,EAAE,CAAC;IAEtD,qBACE,KAACrB;QACE,GAAGiB,SAAS;QACbW,eAAejC,WACbO,MAAM,CAAC,mBAAmB,EAC1BkB,UAAU,aAAajB,eAAe,CAACiB,MAAM,EAC7CZ,SAAS,OAAON,MAAM,CAAC,2BAA2B;kBAGpD,cAAA,MAAC2B;YAAIC,MAAK;YAAaC,WAAW7B,MAAM,CAAC,uBAAuB;;gBAC7DmB,cAAc,CAAC,mBACd,KAACQ;oBACCG,aAAW;oBACXD,WAAW7B,MAAM,CAAC,2BAA2B;oBAC7C+B,OAAO;wBACLC,OAAO,CAAC,EAAE,MAAMxB,QAAQyB,MAAM,CAAC,CAAC,CAAC;wBACjCC,WAAWT;oBACb;;gBAGHjB,QAAQ2B,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAE,GAAGC,aAAa,iBACrC,KAACtC;wBAEE,GAAGsC,WAAW;wBACf9B,MAAMA,QAAQS;wBACdsB,SAAS5B,UAAU2B,YAAY3B,KAAK;wBACpCE,UAAU,IAAMA,SAASyB,YAAY3B,KAAK;kCAEzC0B;uBANI,CAAC,EAAEC,YAAY3B,KAAK,CAAC,CAAC;;;;AAYvC,EAAE"}

package/dist/cssm/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.d.ts

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

package/dist/cssm/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlOption.d.ts","sourceRoot":"","sources":["../../../../../src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAMpD,MAAM,WAAW,2BACf,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EACjD,UAAU,CAAC,gBAAgB,CAAC,EAC5B,MAAM,CAAC,gBAAgB,CAAC;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAED;;GAEG;AACH,eAAO,MAAM,sBAAsB,6EAQhC,2BAA2B,KAAG,KAAK,CAAC,SAkBtC,CAAC"}
+{"version":3,"file":"SegmentedControlOption.d.ts","sourceRoot":"","sources":["../../../../../src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAMzD,MAAM,WAAW,2BACf,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EACjD,UAAU,CAAC,gBAAgB,CAAC,EAC5B,MAAM,CAAC,gBAAgB,CAAC;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAED;;GAEG;AACH,eAAO,MAAM,sBAAsB,6EAQhC,2BAA2B,KAAG,KAAK,CAAC,SAkBtC,CAAC"}

package/dist/cssm/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { hasReactNode } from '@vkontakte/vkjs';\nimport { HasRef, HasRootRef } from '../../../types';\nimport { Clickable } from '../../Clickable/Clickable';\nimport { Headline } from '../../Typography/Headline/Headline';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport styles from './SegmentedControlOption.module.css';\n\nexport interface SegmentedControlOptionProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasRef<HTMLInputElement> {\n  before?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SegmentedControl\n */\nexport const SegmentedControlOption = ({\n  getRef,\n  className,\n  style,\n  children,\n  getRootRef,\n  before,\n  ...restProps\n}: SegmentedControlOptionProps): React.ReactNode => (\n  <Clickable\n    Component=\"label\"\n    baseClassName={styles['SegmentedControlOption']}\n    hoverClassName={styles['SegmentedControlOption--hover']}\n    activeClassName={styles['SegmentedControlOption--hover']}\n    className={className}\n    getRootRef={getRootRef}\n    style={style}\n  >\n    <VisuallyHidden {...restProps} Component=\"input\" getRootRef={getRef} type=\"radio\" />\n    {hasReactNode(before) && (\n      <div className={styles['SegmentedControlOption__before']}>{before}</div>\n    )}\n    <Headline level=\"2\" weight=\"2\">\n      {children}\n    </Headline>\n  </Clickable>\n);\n"],"names":["React","hasReactNode","Clickable","Headline","VisuallyHidden","styles","SegmentedControlOption","getRef","className","style","children","getRootRef","before","restProps","Component","baseClassName","hoverClassName","activeClassName","type","div","level","weight"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,kBAAkB;AAE/C,SAASC,SAAS,QAAQ,4BAA4B;AACtD,SAASC,QAAQ,QAAQ,qCAAqC;AAC9D,SAASC,cAAc,QAAQ,sCAAsC;AACrE,OAAOC,YAAY,sCAAsC;AASzD;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CAAC,EACrCC,MAAM,EACNC,SAAS,EACTC,KAAK,EACLC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACN,GAAGC,WACyB,iBAC5B,MAACX;QACCY,WAAU;QACVC,eAAeV,MAAM,CAAC,yBAAyB;QAC/CW,gBAAgBX,MAAM,CAAC,gCAAgC;QACvDY,iBAAiBZ,MAAM,CAAC,gCAAgC;QACxDG,WAAWA;QACXG,YAAYA;QACZF,OAAOA;;0BAEP,KAACL;gBAAgB,GAAGS,SAAS;gBAAEC,WAAU;gBAAQH,YAAYJ;gBAAQW,MAAK;;YACzEjB,aAAaW,yBACZ,KAACO;gBAAIX,WAAWH,MAAM,CAAC,iCAAiC;0BAAGO;;0BAE7D,KAACT;gBAASiB,OAAM;gBAAIC,QAAO;0BACxBX;;;OAGL"}
+{"version":3,"sources":["../../../../../src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { hasReactNode } from '@vkontakte/vkjs';\nimport type { HasRef, HasRootRef } from '../../../types';\nimport { Clickable } from '../../Clickable/Clickable';\nimport { Headline } from '../../Typography/Headline/Headline';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport styles from './SegmentedControlOption.module.css';\n\nexport interface SegmentedControlOptionProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasRef<HTMLInputElement> {\n  before?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SegmentedControl\n */\nexport const SegmentedControlOption = ({\n  getRef,\n  className,\n  style,\n  children,\n  getRootRef,\n  before,\n  ...restProps\n}: SegmentedControlOptionProps): React.ReactNode => (\n  <Clickable\n    Component=\"label\"\n    baseClassName={styles['SegmentedControlOption']}\n    hoverClassName={styles['SegmentedControlOption--hover']}\n    activeClassName={styles['SegmentedControlOption--hover']}\n    className={className}\n    getRootRef={getRootRef}\n    style={style}\n  >\n    <VisuallyHidden {...restProps} Component=\"input\" getRootRef={getRef} type=\"radio\" />\n    {hasReactNode(before) && (\n      <div className={styles['SegmentedControlOption__before']}>{before}</div>\n    )}\n    <Headline level=\"2\" weight=\"2\">\n      {children}\n    </Headline>\n  </Clickable>\n);\n"],"names":["React","hasReactNode","Clickable","Headline","VisuallyHidden","styles","SegmentedControlOption","getRef","className","style","children","getRootRef","before","restProps","Component","baseClassName","hoverClassName","activeClassName","type","div","level","weight"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,kBAAkB;AAE/C,SAASC,SAAS,QAAQ,4BAA4B;AACtD,SAASC,QAAQ,QAAQ,qCAAqC;AAC9D,SAASC,cAAc,QAAQ,sCAAsC;AACrE,OAAOC,YAAY,sCAAsC;AASzD;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CAAC,EACrCC,MAAM,EACNC,SAAS,EACTC,KAAK,EACLC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACN,GAAGC,WACyB,iBAC5B,MAACX;QACCY,WAAU;QACVC,eAAeV,MAAM,CAAC,yBAAyB;QAC/CW,gBAAgBX,MAAM,CAAC,gCAAgC;QACvDY,iBAAiBZ,MAAM,CAAC,gCAAgC;QACxDG,WAAWA;QACXG,YAAYA;QACZF,OAAOA;;0BAEP,KAACL;gBAAgB,GAAGS,SAAS;gBAAEC,WAAU;gBAAQH,YAAYJ;gBAAQW,MAAK;;YACzEjB,aAAaW,yBACZ,KAACO;gBAAIX,WAAWH,MAAM,CAAC,iCAAiC;0BAAGO;;0BAE7D,KAACT;gBAASiB,OAAM;gBAAIC,QAAO;0BACxBX;;;OAGL"}

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

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAEL,KAAK,2BAA2B,EAChC,KAAK,WAAW,EACjB,MAAM,8BAA8B,CAAC;AAEtC,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAExD;;GAEG;AACH,eAAO,MAAM,MAAM,GAAI,OAAO,SAAS,2BAA2B,qCAI/D,WAAW,CAAC,OAAO,CAAC,KAAG,KAAK,CAAC,SAyD/B,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAEL,KAAK,2BAA2B,EAChC,KAAK,WAAW,EACjB,MAAM,8BAA8B,CAAC;AAEtC,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAExD;;GAEG;AACH,eAAO,MAAM,MAAM,GAAI,OAAO,SAAS,2BAA2B,qCAI/D,WAAW,CAAC,OAAO,CAAC,KAAG,KAAK,CAAC,SA6D/B,CAAC"}

package/dist/cssm/components/Select/Select.js

@@ -7,7 +7,7 @@ import { NativeSelect } from '../NativeSelect/NativeSelect';
 /**
  * @see https://vkcom.github.io/VKUI/#/Select
  */ export const Select = ({ children, className, ...props })=>{
-    const { options = [], searchable, emptyText, onInputChange, filterFn, popupDirection, renderOption, renderDropdown, fetching, onClose, onOpen, icon, ClearButton, allowClearButton, clearButtonTestId, dropdownOffsetDistance, dropdownAutoWidth, forceDropdownPortal, noMaxHeight, autoHideScrollbar, autoHideScrollbarDelay, labelTextTestId, nativeSelectTestId, after, mode, getSelectInputRef, overscrollBehavior, beforeAlign, afterAlign, ...restProps } = props;
+    const { options = [], searchable, emptyText, onInputChange, filterFn, popupDirection, renderOption, renderDropdown, fetching, onClose, onOpen, icon, ClearButton, allowClearButton, clearButtonTestId, dropdownOffsetDistance, dropdownAutoWidth, forceDropdownPortal, noMaxHeight, autoHideScrollbar, autoHideScrollbarDelay, labelTextTestId, nativeSelectTestId, after, mode, pattern, minLength, maxLength, readOnly, getSelectInputRef, overscrollBehavior, beforeAlign, afterAlign, ...restProps } = props;
     const { deviceType } = useAdaptivityConditionalRender();
     const nativeProps = restProps;
     return /*#__PURE__*/ _jsxs(React.Fragment, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { HasOnlyExpectedProps } from '../../types';\nimport {\n  CustomSelect,\n  type CustomSelectOptionInterface,\n  type SelectProps,\n} from '../CustomSelect/CustomSelect';\nimport { NativeSelect, type NativeSelectProps } from '../NativeSelect/NativeSelect';\nexport type SelectType = 'default' | 'plain' | 'accent';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Select\n */\nexport const Select = <OptionT extends CustomSelectOptionInterface>({\n  children,\n  className,\n  ...props\n}: SelectProps<OptionT>): React.ReactNode => {\n  const {\n    options = [],\n    searchable,\n    emptyText,\n    onInputChange,\n    filterFn,\n    popupDirection,\n    renderOption,\n    renderDropdown,\n    fetching,\n    onClose,\n    onOpen,\n    icon,\n    ClearButton,\n    allowClearButton,\n    clearButtonTestId,\n    dropdownOffsetDistance,\n    dropdownAutoWidth,\n    forceDropdownPortal,\n    noMaxHeight,\n    autoHideScrollbar,\n    autoHideScrollbarDelay,\n    labelTextTestId,\n    nativeSelectTestId,\n    after,\n    mode,\n    getSelectInputRef,\n    overscrollBehavior,\n    beforeAlign,\n    afterAlign,\n    ...restProps\n  } = props;\n\n  const { deviceType } = useAdaptivityConditionalRender();\n\n  const nativeProps: HasOnlyExpectedProps<typeof restProps, NativeSelectProps> = restProps;\n\n  return (\n    <React.Fragment>\n      {deviceType.desktop && (\n        <CustomSelect className={classNames(className, deviceType.desktop.className)} {...props} />\n      )}\n      {deviceType.mobile && (\n        <NativeSelect\n          className={classNames(className, deviceType.mobile.className)}\n          {...nativeProps}\n        >\n          {options.map(({ label, value }) => (\n            <option value={value} key={`${value}`}>\n              {label}\n            </option>\n          ))}\n        </NativeSelect>\n      )}\n    </React.Fragment>\n  );\n};\n"],"names":["React","classNames","useAdaptivityConditionalRender","CustomSelect","NativeSelect","Select","children","className","props","options","searchable","emptyText","onInputChange","filterFn","popupDirection","renderOption","renderDropdown","fetching","onClose","onOpen","icon","ClearButton","allowClearButton","clearButtonTestId","dropdownOffsetDistance","dropdownAutoWidth","forceDropdownPortal","noMaxHeight","autoHideScrollbar","autoHideScrollbarDelay","labelTextTestId","nativeSelectTestId","after","mode","getSelectInputRef","overscrollBehavior","beforeAlign","afterAlign","restProps","deviceType","nativeProps","Fragment","desktop","mobile","map","label","value","option"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,8BAA8B,QAAQ,6CAA6C;AAE5F,SACEC,YAAY,QAGP,+BAA+B;AACtC,SAASC,YAAY,QAAgC,+BAA+B;AAGpF;;CAEC,GACD,OAAO,MAAMC,SAAS,CAA8C,EAClEC,QAAQ,EACRC,SAAS,EACT,GAAGC,OACkB;IACrB,MAAM,EACJC,UAAU,EAAE,EACZC,UAAU,EACVC,SAAS,EACTC,aAAa,EACbC,QAAQ,EACRC,cAAc,EACdC,YAAY,EACZC,cAAc,EACdC,QAAQ,EACRC,OAAO,EACPC,MAAM,EACNC,IAAI,EACJC,WAAW,EACXC,gBAAgB,EAChBC,iBAAiB,EACjBC,sBAAsB,EACtBC,iBAAiB,EACjBC,mBAAmB,EACnBC,WAAW,EACXC,iBAAiB,EACjBC,sBAAsB,EACtBC,eAAe,EACfC,kBAAkB,EAClBC,KAAK,EACLC,IAAI,EACJC,iBAAiB,EACjBC,kBAAkB,EAClBC,WAAW,EACXC,UAAU,EACV,GAAGC,WACJ,GAAG9B;IAEJ,MAAM,EAAE+B,UAAU,EAAE,GAAGrC;IAEvB,MAAMsC,cAAyEF;IAE/E,qBACE,MAACtC,MAAMyC,QAAQ;;YACZF,WAAWG,OAAO,kBACjB,KAACvC;gBAAaI,WAAWN,WAAWM,WAAWgC,WAAWG,OAAO,CAACnC,SAAS;gBAAI,GAAGC,KAAK;;YAExF+B,WAAWI,MAAM,kBAChB,KAACvC;gBACCG,WAAWN,WAAWM,WAAWgC,WAAWI,MAAM,CAACpC,SAAS;gBAC3D,GAAGiC,WAAW;0BAEd/B,QAAQmC,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAEC,KAAK,EAAE,iBAC5B,KAACC;wBAAOD,OAAOA;kCACZD;uBADwB,CAAC,EAAEC,MAAM,CAAC;;;;AAQjD,EAAE"}
+{"version":3,"sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport type { HasOnlyExpectedProps } from '../../types';\nimport {\n  CustomSelect,\n  type CustomSelectOptionInterface,\n  type SelectProps,\n} from '../CustomSelect/CustomSelect';\nimport { NativeSelect, type NativeSelectProps } from '../NativeSelect/NativeSelect';\nexport type SelectType = 'default' | 'plain' | 'accent';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Select\n */\nexport const Select = <OptionT extends CustomSelectOptionInterface>({\n  children,\n  className,\n  ...props\n}: SelectProps<OptionT>): React.ReactNode => {\n  const {\n    options = [],\n    searchable,\n    emptyText,\n    onInputChange,\n    filterFn,\n    popupDirection,\n    renderOption,\n    renderDropdown,\n    fetching,\n    onClose,\n    onOpen,\n    icon,\n    ClearButton,\n    allowClearButton,\n    clearButtonTestId,\n    dropdownOffsetDistance,\n    dropdownAutoWidth,\n    forceDropdownPortal,\n    noMaxHeight,\n    autoHideScrollbar,\n    autoHideScrollbarDelay,\n    labelTextTestId,\n    nativeSelectTestId,\n    after,\n    mode,\n    pattern,\n    minLength,\n    maxLength,\n    readOnly,\n    getSelectInputRef,\n    overscrollBehavior,\n    beforeAlign,\n    afterAlign,\n    ...restProps\n  } = props;\n\n  const { deviceType } = useAdaptivityConditionalRender();\n\n  const nativeProps: HasOnlyExpectedProps<typeof restProps, NativeSelectProps> = restProps;\n\n  return (\n    <React.Fragment>\n      {deviceType.desktop && (\n        <CustomSelect className={classNames(className, deviceType.desktop.className)} {...props} />\n      )}\n      {deviceType.mobile && (\n        <NativeSelect\n          className={classNames(className, deviceType.mobile.className)}\n          {...nativeProps}\n        >\n          {options.map(({ label, value }) => (\n            <option value={value} key={`${value}`}>\n              {label}\n            </option>\n          ))}\n        </NativeSelect>\n      )}\n    </React.Fragment>\n  );\n};\n"],"names":["React","classNames","useAdaptivityConditionalRender","CustomSelect","NativeSelect","Select","children","className","props","options","searchable","emptyText","onInputChange","filterFn","popupDirection","renderOption","renderDropdown","fetching","onClose","onOpen","icon","ClearButton","allowClearButton","clearButtonTestId","dropdownOffsetDistance","dropdownAutoWidth","forceDropdownPortal","noMaxHeight","autoHideScrollbar","autoHideScrollbarDelay","labelTextTestId","nativeSelectTestId","after","mode","pattern","minLength","maxLength","readOnly","getSelectInputRef","overscrollBehavior","beforeAlign","afterAlign","restProps","deviceType","nativeProps","Fragment","desktop","mobile","map","label","value","option"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,8BAA8B,QAAQ,6CAA6C;AAE5F,SACEC,YAAY,QAGP,+BAA+B;AACtC,SAASC,YAAY,QAAgC,+BAA+B;AAGpF;;CAEC,GACD,OAAO,MAAMC,SAAS,CAA8C,EAClEC,QAAQ,EACRC,SAAS,EACT,GAAGC,OACkB;IACrB,MAAM,EACJC,UAAU,EAAE,EACZC,UAAU,EACVC,SAAS,EACTC,aAAa,EACbC,QAAQ,EACRC,cAAc,EACdC,YAAY,EACZC,cAAc,EACdC,QAAQ,EACRC,OAAO,EACPC,MAAM,EACNC,IAAI,EACJC,WAAW,EACXC,gBAAgB,EAChBC,iBAAiB,EACjBC,sBAAsB,EACtBC,iBAAiB,EACjBC,mBAAmB,EACnBC,WAAW,EACXC,iBAAiB,EACjBC,sBAAsB,EACtBC,eAAe,EACfC,kBAAkB,EAClBC,KAAK,EACLC,IAAI,EACJC,OAAO,EACPC,SAAS,EACTC,SAAS,EACTC,QAAQ,EACRC,iBAAiB,EACjBC,kBAAkB,EAClBC,WAAW,EACXC,UAAU,EACV,GAAGC,WACJ,GAAGlC;IAEJ,MAAM,EAAEmC,UAAU,EAAE,GAAGzC;IAEvB,MAAM0C,cAAyEF;IAE/E,qBACE,MAAC1C,MAAM6C,QAAQ;;YACZF,WAAWG,OAAO,kBACjB,KAAC3C;gBAAaI,WAAWN,WAAWM,WAAWoC,WAAWG,OAAO,CAACvC,SAAS;gBAAI,GAAGC,KAAK;;YAExFmC,WAAWI,MAAM,kBAChB,KAAC3C;gBACCG,WAAWN,WAAWM,WAAWoC,WAAWI,MAAM,CAACxC,SAAS;gBAC3D,GAAGqC,WAAW;0BAEdnC,QAAQuC,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAEC,KAAK,EAAE,iBAC5B,KAACC;wBAAOD,OAAOA;kCACZD;uBADwB,CAAC,EAAEC,MAAM,CAAC;;;;AAQjD,EAAE"}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { HasAlign, HasRootRef } from '../../types';
-import { FormFieldProps } from '../FormField/FormField';
+import type { HasAlign, HasRootRef } from '../../types';
+import { type FormFieldProps } from '../FormField/FormField';
 import type { SelectType } from '../Select/Select';
 export interface SelectMimicryProps extends React.AllHTMLAttributes<HTMLElement>, HasRootRef<HTMLElement>, HasAlign, Pick<FormFieldProps, 'before' | 'after' | 'status'> {
     multiline?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"SelectMimicry.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectMimicry/SelectMimicry.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEnD,OAAO,EAAa,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AASnD,MAAM,WAAW,kBACf,SAAQ,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,EAC1C,UAAU,CAAC,WAAW,CAAC,EACvB,QAAQ,EACR,IAAI,CAAC,cAAc,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;IACrD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,gKAgBvB,kBAAkB,KAAG,KAAK,CAAC,SAqC7B,CAAC"}
+{"version":3,"file":"SelectMimicry.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectMimicry/SelectMimicry.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAExD,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AASnD,MAAM,WAAW,kBACf,SAAQ,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,EAC1C,UAAU,CAAC,WAAW,CAAC,EACvB,QAAQ,EACR,IAAI,CAAC,cAAc,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;IACrD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,gKAgBvB,kBAAkB,KAAG,KAAK,CAAC,SAqC7B,CAAC"}

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

@@ -11,7 +11,7 @@ import { SelectTypography } from '../SelectTypography/SelectTypography';
 import styles from '../Select/Select.module.css';
 const sizeYClassNames = {
     none: styles['Select--sizeY-none'],
-    ['compact']: styles['Select--sizeY-compact']
+    compact: styles['Select--sizeY-compact']
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/SelectMimicry

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): React.ReactNode => {\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,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"}
+{"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 type { HasAlign, HasRootRef } from '../../types';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField, type 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): React.ReactNode => {\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","compact","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,QAA6B,yBAAyB;AAExE,SAASC,gBAAgB,QAAQ,uCAAuC;AACxE,OAAOC,YAAY,8BAA8B;AAEjD,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,qBAAqB;IAClCG,SAASH,MAAM,CAAC,wBAAwB;AAC1C;AAYA;;CAEC,GACD,OAAO,MAAMI,gBAAgB,CAAC,EAC5BC,WAAW,CAAC,EACZC,WAAW,EACXC,QAAQ,EACRC,KAAK,EACLC,UAAU,EACVC,SAAS,EACTC,QAAQ,EACRC,OAAO,EACPC,MAAM,EACNC,sBAAQ,KAACjB,iBAAe,EACxBkB,aAAa,SAAS,EACtBC,MAAM,EACNC,SAAS,EACTC,SAAS,EACT,GAAGC,WACgB;IACnB,MAAMC,UAAUzB,aAAac;IAE7B,MAAM,EAAEY,QAAQ,MAAM,EAAE,GAAG5B;IAC3B,MAAM6B,QAAQf,YAAYD;IAE1BZ,aAAa0B,SAASF;IAEtB,qBACE,KAACpB;QACE,GAAGqB,SAAS;QACbd,UAAUM,WAAWY,YAAYlB;QACjCY,WAAWzB,WACTQ,MAAM,CAAC,SAAS,EAChBqB,UAAU,aAAapB,eAAe,CAACoB,MAAM,EAC7C,CAACd,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,YAAYW;QACZR,SAASD,WAAWY,YAAYX;QAChCD,UAAUA;QACVE,QAAQA;QACRC,OAAOA;QACPU,MAAM5B,+BAA+BmB;QACrCC,QAAQA;kBAER,cAAA,KAACS;YAAIR,WAAWjB,MAAM,CAAC,oBAAoB;sBACzC,cAAA,KAACD;gBAAiBgB,YAAYA;gBAAYE,WAAWjB,MAAM,CAAC,gBAAgB;0BACzEsB;;;;AAKX,EAAE"}

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

@@ -1,5 +1,5 @@
 import type { SelectType } from '../Select/Select';
-import { TextProps } from '../Typography/Text/Text';
+import { type TextProps } from '../Typography/Text/Text';
 export interface SelectTypographyProps extends TextProps {
     selectType?: SelectType;
 }

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,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAQ,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAE1D,MAAM,WAAW,qBAAsB,SAAQ,SAAS;IACtD,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,2CAI1B,qBAAqB,KAAG,KAAK,CAAC,SAMhC,CAAC"}
+{"version":3,"file":"SelectTypography.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectTypography/SelectTypography.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAE/D,MAAM,WAAW,qBAAsB,SAAQ,SAAS;IACtD,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,2CAI1B,qBAAqB,KAAG,KAAK,CAAC,SAMhC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SelectTypography/SelectTypography.tsx"],"sourcesContent":["import type { SelectType } from '../Select/Select';\nimport { Text, TextProps } from '../Typography/Text/Text';\n\nexport interface SelectTypographyProps extends TextProps {\n  selectType?: SelectType;\n}\n\n/**\n * @private\n */\nexport const SelectTypography = ({\n  selectType = 'default',\n  children,\n  ...restProps\n}: SelectTypographyProps): React.ReactNode => {\n  return (\n    <Text weight={selectType === 'accent' ? '2' : '3'} {...restProps}>\n      {children}\n    </Text>\n  );\n};\n"],"names":["Text","SelectTypography","selectType","children","restProps","weight"],"mappings":";AACA,SAASA,IAAI,QAAmB,0BAA0B;AAM1D;;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"}
+{"version":3,"sources":["../../../../src/components/SelectTypography/SelectTypography.tsx"],"sourcesContent":["import type { SelectType } from '../Select/Select';\nimport { Text, type TextProps } from '../Typography/Text/Text';\n\nexport interface SelectTypographyProps extends TextProps {\n  selectType?: SelectType;\n}\n\n/**\n * @private\n */\nexport const SelectTypography = ({\n  selectType = 'default',\n  children,\n  ...restProps\n}: SelectTypographyProps): React.ReactNode => {\n  return (\n    <Text weight={selectType === 'accent' ? '2' : '3'} {...restProps}>\n      {children}\n    </Text>\n  );\n};\n"],"names":["Text","SelectTypography","selectType","children","restProps","weight"],"mappings":";AACA,SAASA,IAAI,QAAwB,0BAA0B;AAM/D;;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/SelectionControl/SelectionControl.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { HasRootRef } from '../../types';
+import type { HasRootRef } from '../../types';
 import { type TappableProps } from '../Tappable/Tappable';
 import { SelectionControlLabel } from './SelectionControlLabel/SelectionControlLabel';
 export interface SelectionControlProps extends React.ComponentProps<'label'>, HasRootRef<HTMLLabelElement>, Pick<TappableProps, 'hoverMode' | 'activeMode' | 'hasHover' | 'hasActive' | 'focusVisibleMode' | 'disabled'> {

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

@@ -1 +1 @@
-{"version":3,"file":"SelectionControl.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectionControl/SelectionControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEzC,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACpE,OAAO,EAAE,qBAAqB,EAAE,MAAM,+CAA+C,CAAC;AAQtF,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EACnC,UAAU,CAAC,gBAAgB,CAAC,EAC5B,IAAI,CACF,aAAa,EACb,WAAW,GAAG,YAAY,GAAG,UAAU,GAAG,WAAW,GAAG,kBAAkB,GAAG,UAAU,CACxF;CAAG;AAER;;GAEG;AACH,eAAO,MAAM,gBAAgB;gBAAe,qBAAqB,GAAG,KAAK,CAAC,SAAS;;CAelF,CAAC"}
+{"version":3,"file":"SelectionControl.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectionControl/SelectionControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACpE,OAAO,EAAE,qBAAqB,EAAE,MAAM,+CAA+C,CAAC;AAQtF,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EACnC,UAAU,CAAC,gBAAgB,CAAC,EAC5B,IAAI,CACF,aAAa,EACb,WAAW,GAAG,YAAY,GAAG,UAAU,GAAG,WAAW,GAAG,kBAAkB,GAAG,UAAU,CACxF;CAAG;AAER;;GAEG;AACH,eAAO,MAAM,gBAAgB;gBAAe,qBAAqB,GAAG,KAAK,CAAC,SAAS;;CAelF,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SelectionControl/SelectionControl.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HasRootRef } from '../../types';\nimport { DEFAULT_ACTIVE_EFFECT_DELAY } from '../Clickable/useState';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { SelectionControlLabel } from './SelectionControlLabel/SelectionControlLabel';\nimport styles from './SelectionControl.module.css';\n\nconst sizeYClassNames = {\n  none: styles['SelectionControl--sizeY-none'],\n  compact: styles['SelectionControl--sizeY-compact'],\n};\n\nexport interface SelectionControlProps\n  extends React.ComponentProps<'label'>,\n    HasRootRef<HTMLLabelElement>,\n    Pick<\n      TappableProps,\n      'hoverMode' | 'activeMode' | 'hasHover' | 'hasActive' | 'focusVisibleMode' | 'disabled'\n    > {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SelectionControl\n */\nexport const SelectionControl = (restProps: SelectionControlProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const platform = usePlatform();\n\n  return (\n    <Tappable\n      Component=\"label\"\n      baseClassName={classNames(\n        styles['SelectionControl'],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n      )}\n      activeEffectDelay={platform === 'ios' ? 100 : DEFAULT_ACTIVE_EFFECT_DELAY}\n      {...restProps}\n    />\n  );\n};\n\nSelectionControl.Label = SelectionControlLabel;\n"],"names":["React","classNames","useAdaptivity","usePlatform","DEFAULT_ACTIVE_EFFECT_DELAY","Tappable","SelectionControlLabel","styles","sizeYClassNames","none","compact","SelectionControl","restProps","sizeY","platform","Component","baseClassName","activeEffectDelay","Label"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AAEtD,SAASC,2BAA2B,QAAQ,wBAAwB;AACpE,SAASC,QAAQ,QAA4B,uBAAuB;AACpE,SAASC,qBAAqB,QAAQ,gDAAgD;AACtF,OAAOC,YAAY,gCAAgC;AAEnD,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,+BAA+B;IAC5CG,SAASH,MAAM,CAAC,kCAAkC;AACpD;AAUA;;CAEC,GACD,OAAO,MAAMI,mBAAmB,CAACC;IAC/B,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGX;IAC3B,MAAMY,WAAWX;IAEjB,qBACE,KAACE;QACCU,WAAU;QACVC,eAAef,WACbM,MAAM,CAAC,mBAAmB,EAC1BM,UAAU,aAAaL,eAAe,CAACK,MAAM;QAE/CI,mBAAmBH,aAAa,QAAQ,MAAMV;QAC7C,GAAGQ,SAAS;;AAGnB,EAAE;AAEFD,iBAAiBO,KAAK,GAAGZ"}
+{"version":3,"sources":["../../../../src/components/SelectionControl/SelectionControl.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { HasRootRef } from '../../types';\nimport { DEFAULT_ACTIVE_EFFECT_DELAY } from '../Clickable/useState';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { SelectionControlLabel } from './SelectionControlLabel/SelectionControlLabel';\nimport styles from './SelectionControl.module.css';\n\nconst sizeYClassNames = {\n  none: styles['SelectionControl--sizeY-none'],\n  compact: styles['SelectionControl--sizeY-compact'],\n};\n\nexport interface SelectionControlProps\n  extends React.ComponentProps<'label'>,\n    HasRootRef<HTMLLabelElement>,\n    Pick<\n      TappableProps,\n      'hoverMode' | 'activeMode' | 'hasHover' | 'hasActive' | 'focusVisibleMode' | 'disabled'\n    > {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SelectionControl\n */\nexport const SelectionControl = (restProps: SelectionControlProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const platform = usePlatform();\n\n  return (\n    <Tappable\n      Component=\"label\"\n      baseClassName={classNames(\n        styles['SelectionControl'],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n      )}\n      activeEffectDelay={platform === 'ios' ? 100 : DEFAULT_ACTIVE_EFFECT_DELAY}\n      {...restProps}\n    />\n  );\n};\n\nSelectionControl.Label = SelectionControlLabel;\n"],"names":["React","classNames","useAdaptivity","usePlatform","DEFAULT_ACTIVE_EFFECT_DELAY","Tappable","SelectionControlLabel","styles","sizeYClassNames","none","compact","SelectionControl","restProps","sizeY","platform","Component","baseClassName","activeEffectDelay","Label"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AAEtD,SAASC,2BAA2B,QAAQ,wBAAwB;AACpE,SAASC,QAAQ,QAA4B,uBAAuB;AACpE,SAASC,qBAAqB,QAAQ,gDAAgD;AACtF,OAAOC,YAAY,gCAAgC;AAEnD,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,+BAA+B;IAC5CG,SAASH,MAAM,CAAC,kCAAkC;AACpD;AAUA;;CAEC,GACD,OAAO,MAAMI,mBAAmB,CAACC;IAC/B,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGX;IAC3B,MAAMY,WAAWX;IAEjB,qBACE,KAACE;QACCU,WAAU;QACVC,eAAef,WACbM,MAAM,CAAC,mBAAmB,EAC1BM,UAAU,aAAaL,eAAe,CAACK,MAAM;QAE/CI,mBAAmBH,aAAa,QAAQ,MAAMV;QAC7C,GAAGQ,SAAS;;AAGnB,EAAE;AAEFD,iBAAiBO,KAAK,GAAGZ"}

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

@@ -1,4 +1,4 @@
-import { HTMLAttributesWithRootRef } from '../../types';
+import type { HTMLAttributesWithRootRef } from '../../types';
 export interface SeparatorProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     /**
      * Стиль отображения компонента

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":"AACA,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAIxD,MAAM,WAAW,cAAe,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC/E;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,eAAe,CAAC;IACjD;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAQD;;GAEG;AACH,eAAO,MAAM,SAAS,iCAInB,cAAc,KAAG,KAAK,CAAC,SAOzB,CAAC"}
+{"version":3,"file":"Separator.d.ts","sourceRoot":"","sources":["../../../../src/components/Separator/Separator.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAI7D,MAAM,WAAW,cAAe,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC/E;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,eAAe,CAAC;IACjD;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAQD;;GAEG;AACH,eAAO,MAAM,SAAS,iCAInB,cAAc,KAAG,KAAK,CAAC,SAOzB,CAAC"}

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

@@ -1 +1 @@
-{"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  mode?: 'primary' | 'secondary' | 'primary-alpha';\n  /**\n   * С этим свойством компонент не будет иметь отступы слева и справа\n   */\n  wide?: boolean;\n}\n\nconst modeClassNames = {\n  'primary': styles['Separator--mode-primary'],\n  'secondary': styles['Separator--mode-secondary'],\n  'primary-alpha': styles['Separator--mode-primaryAlpha'],\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Separator\n */\nexport const Separator = ({\n  wide,\n  mode = 'primary',\n  ...restProps\n}: SeparatorProps): React.ReactNode => (\n  <RootComponent\n    {...restProps}\n    baseClassName={classNames(!wide && styles['Separator--padded'], modeClassNames[mode])}\n  >\n    <hr className={styles['Separator__in']} />\n  </RootComponent>\n);\n"],"names":["classNames","RootComponent","styles","modeClassNames","Separator","wide","mode","restProps","baseClassName","hr","className"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,yBAAyB;AAa5C,MAAMC,iBAAiB;IACrB,WAAWD,MAAM,CAAC,0BAA0B;IAC5C,aAAaA,MAAM,CAAC,4BAA4B;IAChD,iBAAiBA,MAAM,CAAC,+BAA+B;AACzD;AAEA;;CAEC,GACD,OAAO,MAAME,YAAY,CAAC,EACxBC,IAAI,EACJC,OAAO,SAAS,EAChB,GAAGC,WACY,iBACf,KAACN;QACE,GAAGM,SAAS;QACbC,eAAeR,WAAW,CAACK,QAAQH,MAAM,CAAC,oBAAoB,EAAEC,cAAc,CAACG,KAAK;kBAEpF,cAAA,KAACG;YAAGC,WAAWR,MAAM,CAAC,gBAAgB;;OAExC"}
+{"version":3,"sources":["../../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport type { 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  mode?: 'primary' | 'secondary' | 'primary-alpha';\n  /**\n   * С этим свойством компонент не будет иметь отступы слева и справа\n   */\n  wide?: boolean;\n}\n\nconst modeClassNames = {\n  'primary': styles['Separator--mode-primary'],\n  'secondary': styles['Separator--mode-secondary'],\n  'primary-alpha': styles['Separator--mode-primaryAlpha'],\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Separator\n */\nexport const Separator = ({\n  wide,\n  mode = 'primary',\n  ...restProps\n}: SeparatorProps): React.ReactNode => (\n  <RootComponent\n    {...restProps}\n    baseClassName={classNames(!wide && styles['Separator--padded'], modeClassNames[mode])}\n  >\n    <hr className={styles['Separator__in']} />\n  </RootComponent>\n);\n"],"names":["classNames","RootComponent","styles","modeClassNames","Separator","wide","mode","restProps","baseClassName","hr","className"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,yBAAyB;AAa5C,MAAMC,iBAAiB;IACrB,WAAWD,MAAM,CAAC,0BAA0B;IAC5C,aAAaA,MAAM,CAAC,4BAA4B;IAChD,iBAAiBA,MAAM,CAAC,+BAA+B;AACzD;AAEA;;CAEC,GACD,OAAO,MAAME,YAAY,CAAC,EACxBC,IAAI,EACJC,OAAO,SAAS,EAChB,GAAGC,WACY,iBACf,KAACN;QACE,GAAGM,SAAS;QACbC,eAAeR,WAAW,CAACK,QAAQH,MAAM,CAAC,oBAAoB,EAAEC,cAAc,CAACG,KAAK;kBAEpF,cAAA,KAACG;YAAGC,WAAWR,MAAM,CAAC,gBAAgB;;OAExC"}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { HasComponent } from '../../types';
-import { TappableProps } from '../Tappable/Tappable';
+import type { HasComponent } from '../../types';
+import { type TappableProps } from '../Tappable/Tappable';
 export interface SimpleCellOwnProps extends HasComponent {
     /**
      * Иконка 28 или `<Avatar size={28|32|40|48|72} />`

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,KAAG,KAAK,CAAC,SAsF1B,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,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAYpE,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,KAAG,KAAK,CAAC,SAsF1B,CAAC"}

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

@@ -11,7 +11,7 @@ import { Chevron } from './Chevron/Chevron';
 import styles from './SimpleCell.module.css';
 const sizeYClassNames = {
     none: styles['SimpleCell--sizeY-none'],
-    ['compact']: styles['SimpleCell--sizeY-compact']
+    compact: styles['SimpleCell--sizeY-compact']
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/SimpleCell

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): React.ReactNode => {\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        restProps.disabled && styles['SimpleCell--disabled'],\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","disabled","div","Component","span","weight","normalize","size"],"mappings":"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"}
+{"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 type { HasComponent } from '../../types';\nimport { Tappable, type 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): React.ReactNode => {\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        restProps.disabled && styles['SimpleCell--disabled'],\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","compact","SimpleCell","badgeBeforeTitle","badgeAfterTitle","badgeBeforeSubtitle","badgeAfterSubtitle","before","indicator","children","after","expandable","multiline","subhead","subtitle","extraSubtitle","className","chevronSize","restProps","platform","hasChevron","hasAfter","sizeY","disabled","div","Component","span","weight","normalize","size"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 import { type GapsProp } from '../../lib/layouts';
-import { HTMLAttributesWithRootRef } from '../../types';
+import type { HTMLAttributesWithRootRef } from '../../types';
 export interface SimpleGridProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     /**
      * Количество колонок

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

@@ -1 +1 @@
-{"version":3,"file":"SimpleGrid.d.ts","sourceRoot":"","sources":["../../../../src/components/SimpleGrid/SimpleGrid.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,KAAK,QAAQ,EAEd,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAuB,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAkB7E,MAAM,WAAW,eAAgB,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAChF;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;OAMG;IACH,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,aAAa,GAAG,YAAY,CAAC;IACxD;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC;CAC7D;AAED,eAAO,MAAM,UAAU,6EAQpB,eAAe,4CA4BjB,CAAC"}
+{"version":3,"file":"SimpleGrid.d.ts","sourceRoot":"","sources":["../../../../src/components/SimpleGrid/SimpleGrid.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,KAAK,QAAQ,EAEd,MAAM,mBAAmB,CAAC;AAC3B,OAAO,KAAK,EAAuB,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAkBlF,MAAM,WAAW,eAAgB,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAChF;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;OAMG;IACH,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,aAAa,GAAG,YAAY,CAAC;IACxD;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC;CAC7D;AAED,eAAO,MAAM,UAAU,6EAQpB,eAAe,4CA4BjB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SimpleGrid/SimpleGrid.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport {\n  calculateGap,\n  columnGapClassNames,\n  type GapsProp,\n  rowGapClassNames,\n} from '../../lib/layouts';\nimport { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './SimpleGrid.module.css';\n\nconst marginClassNames = {\n  'auto': styles['SimpleGrid--margin-auto'],\n  'auto-inline': styles['SimpleGrid--margin-auto-inline'],\n  'auto-block': styles['SimpleGrid--margin-auto-block'],\n};\n\nconst alignClassNames = {\n  start: styles['SimpleGrid--align-start'],\n  end: styles['SimpleGrid--align-end'],\n  center: styles['SimpleGrid--align-center'],\n  stretch: styles['SimpleGrid--align-stretch'],\n  baseline: styles['SimpleGrid--align-baseline'],\n};\n\nexport interface SimpleGridProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Количество колонок\n   */\n  columns?: number;\n  /**\n   * Отступы между элементами.\n   * Значение из списка предопределённых пресетов или число, которое будет приведено к пикселям.\n   * Через массив можно задать отступ между столбцами и строками [column, row], если они отличаются.\n   *\n   * TODO [>=7]: порядок следования будет [row, column]\n   */\n  gap?: GapsProp;\n  /**\n   * Управляет отступами вокруг контейнера\n   * Значение `none` позволяет отключить отступы\n   * Значение `auto` позволяет задать платформенные отступы\n   * Значение `auto-inline` позволяет задать платформенные inline-отступы\n   * Значение `auto-block` позволяет задать платформенные block-отступы\n   */\n  margin?: 'none' | 'auto' | 'auto-inline' | 'auto-block';\n  /**\n   * Вместо задания количества колонок, можно указать минимальную ширину элементов\n   */\n  minColWidth?: number;\n  /**\n   * Выравнивание элементов по вспомогательной оси, эквивалентно `align-items`\n   */\n  align?: 'start' | 'end' | 'center' | 'stretch' | 'baseline';\n}\n\nexport const SimpleGrid = ({\n  columns = 1,\n  gap,\n  style: styleProp,\n  margin = 'none',\n  minColWidth,\n  align = 'stretch',\n  ...props\n}: SimpleGridProps) => {\n  const style: CSSCustomProperties = {};\n  const [columnGap, rowGap] = calculateGap(gap);\n  if (typeof rowGap === 'number') {\n    style['--vkui_internal--row_gap'] = `${rowGap}px`;\n  }\n  if (typeof columnGap === 'number') {\n    style['--vkui_internal--column_gap'] = `${columnGap}px`;\n  }\n  style['--vkui_internal--grid_columns'] = `${columns}`;\n  if (minColWidth) {\n    style['--vkui_internal--min_col_width'] = `${minColWidth}px`;\n  }\n\n  return (\n    <RootComponent\n      {...props}\n      baseClassName={classNames(\n        styles.SimpleGrid,\n        margin !== 'none' && marginClassNames[margin],\n        alignClassNames[align],\n        minColWidth && styles['SimpleGrid--with-min-width'],\n        typeof columnGap === 'string' && columnGapClassNames[columnGap],\n        typeof rowGap === 'string' && rowGapClassNames[rowGap],\n      )}\n      style={{ ...style, ...styleProp }}\n    />\n  );\n};\n"],"names":["classNames","calculateGap","columnGapClassNames","rowGapClassNames","RootComponent","styles","marginClassNames","alignClassNames","start","end","center","stretch","baseline","SimpleGrid","columns","gap","style","styleProp","margin","minColWidth","align","props","columnGap","rowGap","baseClassName"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SACEC,YAAY,EACZC,mBAAmB,EAEnBC,gBAAgB,QACX,oBAAoB;AAE3B,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,0BAA0B;AAE7C,MAAMC,mBAAmB;IACvB,QAAQD,MAAM,CAAC,0BAA0B;IACzC,eAAeA,MAAM,CAAC,iCAAiC;IACvD,cAAcA,MAAM,CAAC,gCAAgC;AACvD;AAEA,MAAME,kBAAkB;IACtBC,OAAOH,MAAM,CAAC,0BAA0B;IACxCI,KAAKJ,MAAM,CAAC,wBAAwB;IACpCK,QAAQL,MAAM,CAAC,2BAA2B;IAC1CM,SAASN,MAAM,CAAC,4BAA4B;IAC5CO,UAAUP,MAAM,CAAC,6BAA6B;AAChD;AAiCA,OAAO,MAAMQ,aAAa,CAAC,EACzBC,UAAU,CAAC,EACXC,GAAG,EACHC,OAAOC,SAAS,EAChBC,SAAS,MAAM,EACfC,WAAW,EACXC,QAAQ,SAAS,EACjB,GAAGC,OACa;IAChB,MAAML,QAA6B,CAAC;IACpC,MAAM,CAACM,WAAWC,OAAO,GAAGtB,aAAac;IACzC,IAAI,OAAOQ,WAAW,UAAU;QAC9BP,KAAK,CAAC,2BAA2B,GAAG,CAAC,EAAEO,OAAO,EAAE,CAAC;IACnD;IACA,IAAI,OAAOD,cAAc,UAAU;QACjCN,KAAK,CAAC,8BAA8B,GAAG,CAAC,EAAEM,UAAU,EAAE,CAAC;IACzD;IACAN,KAAK,CAAC,gCAAgC,GAAG,CAAC,EAAEF,QAAQ,CAAC;IACrD,IAAIK,aAAa;QACfH,KAAK,CAAC,iCAAiC,GAAG,CAAC,EAAEG,YAAY,EAAE,CAAC;IAC9D;IAEA,qBACE,KAACf;QACE,GAAGiB,KAAK;QACTG,eAAexB,WACbK,OAAOQ,UAAU,EACjBK,WAAW,UAAUZ,gBAAgB,CAACY,OAAO,EAC7CX,eAAe,CAACa,MAAM,EACtBD,eAAed,MAAM,CAAC,6BAA6B,EACnD,OAAOiB,cAAc,YAAYpB,mBAAmB,CAACoB,UAAU,EAC/D,OAAOC,WAAW,YAAYpB,gBAAgB,CAACoB,OAAO;QAExDP,OAAO;YAAE,GAAGA,KAAK;YAAE,GAAGC,SAAS;QAAC;;AAGtC,EAAE"}
+{"version":3,"sources":["../../../../src/components/SimpleGrid/SimpleGrid.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport {\n  calculateGap,\n  columnGapClassNames,\n  type GapsProp,\n  rowGapClassNames,\n} from '../../lib/layouts';\nimport type { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './SimpleGrid.module.css';\n\nconst marginClassNames = {\n  'auto': styles['SimpleGrid--margin-auto'],\n  'auto-inline': styles['SimpleGrid--margin-auto-inline'],\n  'auto-block': styles['SimpleGrid--margin-auto-block'],\n};\n\nconst alignClassNames = {\n  start: styles['SimpleGrid--align-start'],\n  end: styles['SimpleGrid--align-end'],\n  center: styles['SimpleGrid--align-center'],\n  stretch: styles['SimpleGrid--align-stretch'],\n  baseline: styles['SimpleGrid--align-baseline'],\n};\n\nexport interface SimpleGridProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Количество колонок\n   */\n  columns?: number;\n  /**\n   * Отступы между элементами.\n   * Значение из списка предопределённых пресетов или число, которое будет приведено к пикселям.\n   * Через массив можно задать отступ между столбцами и строками [column, row], если они отличаются.\n   *\n   * TODO [>=7]: порядок следования будет [row, column]\n   */\n  gap?: GapsProp;\n  /**\n   * Управляет отступами вокруг контейнера\n   * Значение `none` позволяет отключить отступы\n   * Значение `auto` позволяет задать платформенные отступы\n   * Значение `auto-inline` позволяет задать платформенные inline-отступы\n   * Значение `auto-block` позволяет задать платформенные block-отступы\n   */\n  margin?: 'none' | 'auto' | 'auto-inline' | 'auto-block';\n  /**\n   * Вместо задания количества колонок, можно указать минимальную ширину элементов\n   */\n  minColWidth?: number;\n  /**\n   * Выравнивание элементов по вспомогательной оси, эквивалентно `align-items`\n   */\n  align?: 'start' | 'end' | 'center' | 'stretch' | 'baseline';\n}\n\nexport const SimpleGrid = ({\n  columns = 1,\n  gap,\n  style: styleProp,\n  margin = 'none',\n  minColWidth,\n  align = 'stretch',\n  ...props\n}: SimpleGridProps) => {\n  const style: CSSCustomProperties = {};\n  const [columnGap, rowGap] = calculateGap(gap);\n  if (typeof rowGap === 'number') {\n    style['--vkui_internal--row_gap'] = `${rowGap}px`;\n  }\n  if (typeof columnGap === 'number') {\n    style['--vkui_internal--column_gap'] = `${columnGap}px`;\n  }\n  style['--vkui_internal--grid_columns'] = `${columns}`;\n  if (minColWidth) {\n    style['--vkui_internal--min_col_width'] = `${minColWidth}px`;\n  }\n\n  return (\n    <RootComponent\n      {...props}\n      baseClassName={classNames(\n        styles.SimpleGrid,\n        margin !== 'none' && marginClassNames[margin],\n        alignClassNames[align],\n        minColWidth && styles['SimpleGrid--with-min-width'],\n        typeof columnGap === 'string' && columnGapClassNames[columnGap],\n        typeof rowGap === 'string' && rowGapClassNames[rowGap],\n      )}\n      style={{ ...style, ...styleProp }}\n    />\n  );\n};\n"],"names":["classNames","calculateGap","columnGapClassNames","rowGapClassNames","RootComponent","styles","marginClassNames","alignClassNames","start","end","center","stretch","baseline","SimpleGrid","columns","gap","style","styleProp","margin","minColWidth","align","props","columnGap","rowGap","baseClassName"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SACEC,YAAY,EACZC,mBAAmB,EAEnBC,gBAAgB,QACX,oBAAoB;AAE3B,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,0BAA0B;AAE7C,MAAMC,mBAAmB;IACvB,QAAQD,MAAM,CAAC,0BAA0B;IACzC,eAAeA,MAAM,CAAC,iCAAiC;IACvD,cAAcA,MAAM,CAAC,gCAAgC;AACvD;AAEA,MAAME,kBAAkB;IACtBC,OAAOH,MAAM,CAAC,0BAA0B;IACxCI,KAAKJ,MAAM,CAAC,wBAAwB;IACpCK,QAAQL,MAAM,CAAC,2BAA2B;IAC1CM,SAASN,MAAM,CAAC,4BAA4B;IAC5CO,UAAUP,MAAM,CAAC,6BAA6B;AAChD;AAiCA,OAAO,MAAMQ,aAAa,CAAC,EACzBC,UAAU,CAAC,EACXC,GAAG,EACHC,OAAOC,SAAS,EAChBC,SAAS,MAAM,EACfC,WAAW,EACXC,QAAQ,SAAS,EACjB,GAAGC,OACa;IAChB,MAAML,QAA6B,CAAC;IACpC,MAAM,CAACM,WAAWC,OAAO,GAAGtB,aAAac;IACzC,IAAI,OAAOQ,WAAW,UAAU;QAC9BP,KAAK,CAAC,2BAA2B,GAAG,CAAC,EAAEO,OAAO,EAAE,CAAC;IACnD;IACA,IAAI,OAAOD,cAAc,UAAU;QACjCN,KAAK,CAAC,8BAA8B,GAAG,CAAC,EAAEM,UAAU,EAAE,CAAC;IACzD;IACAN,KAAK,CAAC,gCAAgC,GAAG,CAAC,EAAEF,QAAQ,CAAC;IACrD,IAAIK,aAAa;QACfH,KAAK,CAAC,iCAAiC,GAAG,CAAC,EAAEG,YAAY,EAAE,CAAC;IAC9D;IAEA,qBACE,KAACf;QACE,GAAGiB,KAAK;QACTG,eAAexB,WACbK,OAAOQ,UAAU,EACjBK,WAAW,UAAUZ,gBAAgB,CAACY,OAAO,EAC7CX,eAAe,CAACa,MAAM,EACtBD,eAAed,MAAM,CAAC,6BAA6B,EACnD,OAAOiB,cAAc,YAAYpB,mBAAmB,CAACoB,UAAU,EAC/D,OAAOC,WAAW,YAAYpB,gBAAgB,CAACoB,OAAO;QAExDP,OAAO;YAAE,GAAGA,KAAK;YAAE,GAAGC,SAAS;QAAC;;AAGtC,EAAE"}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { HTMLAttributesWithRootRef } from '../../types';
+import type { HTMLAttributesWithRootRef } from '../../types';
 export interface SkeletonProps extends HTMLAttributesWithRootRef<HTMLDivElement | HTMLSpanElement>, Pick<React.CSSProperties, 'width' | 'height' | 'inlineSize' | 'blockSize' | 'maxWidth' | 'maxInlineSize' | 'borderRadius' | 'margin'> {
     /**
      * Начальный цвет анимации
@@ -29,5 +29,5 @@ export interface SkeletonProps extends HTMLAttributesWithRootRef<HTMLDivElement
  *
  * @since 6.1.0
  */
-export declare const Skeleton: ({ width, height, inlineSize, blockSize, maxWidth, maxInlineSize, borderRadius, style, children, colorFrom, colorTo, noAnimation, duration, margin, ...restProps }: SkeletonProps) => React.ReactNode;
+export declare const Skeleton: ({ width, height, inlineSize, blockSize, maxWidth, maxInlineSize, borderRadius, style, children, colorFrom, colorTo, noAnimation, duration, margin, getRootRef, ...restProps }: SkeletonProps) => React.ReactNode;
 //# sourceMappingURL=Skeleton.d.ts.map

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

@@ -1 +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,KAAG,KAAK,CAAC,SAqCxB,CAAC"}
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAuB,yBAAyB,EAAE,MAAM,aAAa,CAAC;AA+ElF,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,kLAiBlB,aAAa,KAAG,KAAK,CAAC,SA4CxB,CAAC"}

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

@@ -1,8 +1,83 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
+import { millisecondsInSecond } from 'date-fns/constants';
+import { useExternRef } from '../../hooks/useExternRef';
+import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
+import { usePrevious } from '../../hooks/usePrevious';
+import { useDOM } from '../../lib/dom';
 import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './Skeleton.module.css';
+const CUSTOM_PROPERTY_GRADIENT_LEFT = '--vkui_internal--skeleton_gradient_left';
+/**
+ * Синхронизирует анимацию скелетонов с помощью временных отрезков
+ *
+ * ## visibilitychange
+ *
+ * В синхронизацию не заложен механизм перехода на оптимизации браузеров при
+ * переходе на другую вкладку, поскольку нет уверенности в реальности таких
+ * кейсов со скелетонами. Если такой кейс принесут, необходимо обработать
+ * событие `visibilitychange` используя функцию `syncAnimation`
+ *
+ * https://developer.chrome.com/blog/page-lifecycle-api/
+ *
+ * @param duration длительность анимации в секундах
+ */ function useSkeletonSyncAnimation(disableAnimation, duration = 1.5) {
+    const [isAnimationStarted, setIsAnimationStarted] = React.useState(false);
+    const timer = React.useRef(undefined);
+    const syncAnimation = React.useCallback(()=>{
+        clearTimeout(timer.current);
+        setIsAnimationStarted(false);
+        const durationInMilliseconds = duration * millisecondsInSecond;
+        const delay = durationInMilliseconds - performance.now() % durationInMilliseconds;
+        timer.current = setTimeout(()=>setIsAnimationStarted(true), delay);
+        return ()=>clearTimeout(timer.current);
+    }, [
+        duration
+    ]);
+    React.useEffect(()=>{
+        if (disableAnimation) {
+            setIsAnimationStarted(false);
+            return;
+        }
+        if (isAnimationStarted) {
+            return;
+        }
+        return syncAnimation();
+    }, [
+        disableAnimation,
+        isAnimationStarted,
+        syncAnimation
+    ]);
+    return isAnimationStarted;
+}
+/**
+ * Вычисляет позицию скелетона
+ */ function useSkeletonPosition(rootRef) {
+    const { document, window } = useDOM();
+    const [skeletonGradientLeft, setSkeletonGradientLeft] = React.useState('0');
+    const prevSkeletonGradientLeft = usePrevious(skeletonGradientLeft);
+    const updatePosition = React.useCallback(()=>{
+        const el = rootRef.current;
+        if (!el || !document) {
+            return;
+        }
+        const value = -(el.getBoundingClientRect().left - document.body.getBoundingClientRect().left);
+        const gradientValue = value === 0 ? '0' : `${value}px`;
+        if (prevSkeletonGradientLeft !== gradientValue) {
+            setSkeletonGradientLeft(gradientValue);
+        }
+    }, [
+        document,
+        prevSkeletonGradientLeft,
+        rootRef
+    ]);
+    React.useEffect(updatePosition, [
+        updatePosition
+    ]);
+    useGlobalEventListener(window, 'resize', updatePosition);
+    return skeletonGradientLeft;
+}
 /**
  * > Старайтесь минимизировать количество заглушек на экране. Не каждый элемент
  * > на экране должен заменяться заглушкой.
@@ -13,7 +88,10 @@ import styles from './Skeleton.module.css';
  * > вписывается в слоты компонентов, которые обычно ожидают текст.
  *
  * @since 6.1.0
- */ export const Skeleton = ({ width, height, inlineSize, blockSize, maxWidth, maxInlineSize, borderRadius, style, children, colorFrom, colorTo, noAnimation, duration, margin, ...restProps })=>{
+ */ export const Skeleton = ({ width, height, inlineSize, blockSize, maxWidth, maxInlineSize, borderRadius, style, children, colorFrom, colorTo, noAnimation = false, duration, margin, getRootRef, ...restProps })=>{
+    const rootRef = useExternRef(getRootRef);
+    const disableAnimation = !useSkeletonSyncAnimation(noAnimation, duration);
+    const skeletonGradientLeft = useSkeletonPosition(rootRef);
     const skeletonStyle = {
         width,
         height,
@@ -22,7 +100,8 @@ import styles from './Skeleton.module.css';
         maxWidth,
         maxInlineSize,
         borderRadius,
-        margin
+        margin,
+        [CUSTOM_PROPERTY_GRADIENT_LEFT]: skeletonGradientLeft
     };
     if (colorFrom) {
         skeletonStyle['--vkui_internal--skeleton_color_from'] = colorFrom;
@@ -34,8 +113,9 @@ import styles from './Skeleton.module.css';
         skeletonStyle['--vkui_internal--skeleton_animation_duration'] = `${duration}s`;
     }
     return /*#__PURE__*/ _jsx(RootComponent, {
+        getRootRef: rootRef,
         Component: "span",
-        baseClassName: classNames(styles['Skeleton'], noAnimation && styles['Skeleton--disableAnimation']),
+        baseClassName: classNames(styles['Skeleton'], disableAnimation && styles['Skeleton--disableAnimation']),
         style: {
             ...skeletonStyle,
             ...style

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

@@ -1 +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): React.ReactNode => {\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"],"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"}
+{"version":3,"sources":["../../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { millisecondsInSecond } from 'date-fns/constants';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { useDOM } from '../../lib/dom';\nimport type { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Skeleton.module.css';\n\nconst CUSTOM_PROPERTY_GRADIENT_LEFT = '--vkui_internal--skeleton_gradient_left';\n\n/**\n * Синхронизирует анимацию скелетонов с помощью временных отрезков\n *\n * ## visibilitychange\n *\n * В синхронизацию не заложен механизм перехода на оптимизации браузеров при\n * переходе на другую вкладку, поскольку нет уверенности в реальности таких\n * кейсов со скелетонами. Если такой кейс принесут, необходимо обработать\n * событие `visibilitychange` используя функцию `syncAnimation`\n *\n * https://developer.chrome.com/blog/page-lifecycle-api/\n *\n * @param duration длительность анимации в секундах\n */\nfunction useSkeletonSyncAnimation(disableAnimation: boolean, duration = 1.5) {\n  const [isAnimationStarted, setIsAnimationStarted] = React.useState<boolean>(false);\n  const timer = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n  const syncAnimation = React.useCallback(() => {\n    clearTimeout(timer.current);\n    setIsAnimationStarted(false);\n\n    const durationInMilliseconds = duration * millisecondsInSecond;\n    const delay = durationInMilliseconds - (performance.now() % durationInMilliseconds);\n\n    timer.current = setTimeout(() => setIsAnimationStarted(true), delay);\n\n    return () => clearTimeout(timer.current);\n  }, [duration]);\n\n  React.useEffect(() => {\n    if (disableAnimation) {\n      setIsAnimationStarted(false);\n      return;\n    }\n\n    if (isAnimationStarted) {\n      return;\n    }\n\n    return syncAnimation();\n  }, [disableAnimation, isAnimationStarted, syncAnimation]);\n\n  return isAnimationStarted;\n}\n\n/**\n * Вычисляет позицию скелетона\n */\nfunction useSkeletonPosition(rootRef: React.MutableRefObject<HTMLElement | null>) {\n  const { document, window } = useDOM();\n  const [skeletonGradientLeft, setSkeletonGradientLeft] = React.useState('0');\n  const prevSkeletonGradientLeft = usePrevious(skeletonGradientLeft);\n\n  const updatePosition = React.useCallback(() => {\n    const el = rootRef.current;\n    if (!el || !document) {\n      return;\n    }\n\n    const value = -(el.getBoundingClientRect().left - document.body.getBoundingClientRect().left);\n    const gradientValue = value === 0 ? '0' : `${value}px`;\n    if (prevSkeletonGradientLeft !== gradientValue) {\n      setSkeletonGradientLeft(gradientValue);\n    }\n  }, [document, prevSkeletonGradientLeft, rootRef]);\n\n  React.useEffect(updatePosition, [updatePosition]);\n  useGlobalEventListener(window, 'resize', updatePosition);\n\n  return skeletonGradientLeft;\n}\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 = false,\n  duration,\n  margin,\n  getRootRef,\n  ...restProps\n}: SkeletonProps): React.ReactNode => {\n  const rootRef = useExternRef(getRootRef);\n\n  const disableAnimation = !useSkeletonSyncAnimation(noAnimation, duration);\n  const skeletonGradientLeft = useSkeletonPosition(rootRef);\n\n  const skeletonStyle: React.CSSProperties & CSSCustomProperties = {\n    width,\n    height,\n    inlineSize,\n    blockSize,\n    maxWidth,\n    maxInlineSize,\n    borderRadius,\n    margin,\n    [CUSTOM_PROPERTY_GRADIENT_LEFT]: skeletonGradientLeft,\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      getRootRef={rootRef}\n      Component=\"span\"\n      baseClassName={classNames(\n        styles['Skeleton'],\n        disableAnimation && styles['Skeleton--disableAnimation'],\n      )}\n      style={{ ...skeletonStyle, ...style }}\n      {...restProps}\n    >\n      {children || <>&zwnj;</>}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","millisecondsInSecond","useExternRef","useGlobalEventListener","usePrevious","useDOM","RootComponent","styles","CUSTOM_PROPERTY_GRADIENT_LEFT","useSkeletonSyncAnimation","disableAnimation","duration","isAnimationStarted","setIsAnimationStarted","useState","timer","useRef","undefined","syncAnimation","useCallback","clearTimeout","current","durationInMilliseconds","delay","performance","now","setTimeout","useEffect","useSkeletonPosition","rootRef","document","window","skeletonGradientLeft","setSkeletonGradientLeft","prevSkeletonGradientLeft","updatePosition","el","value","getBoundingClientRect","left","body","gradientValue","Skeleton","width","height","inlineSize","blockSize","maxWidth","maxInlineSize","borderRadius","style","children","colorFrom","colorTo","noAnimation","margin","getRootRef","restProps","skeletonStyle","Number","isFinite","Component","baseClassName"],"mappings":"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"}