@vkontakte/vkui 5.3.1 → 5.4.0

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

@@ -1 +1,63 @@
-.vkuiCell{position:relative}.vkuiInternalList--dragging .vkuiCell:not(.vkuiCell--dragging){pointer-events:none;transition:transform .3s ease}.vkuiCell--dragging{background-color:#f5f5f5;background-color:var(--vkui--color_background_secondary);box-shadow:0 0 2px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.08);box-shadow:var(--vkui--elevation3);z-index:1;z-index:var(--vkui_internal--z_index_cell_dragging)}.vkuiCell--selectable.vkuiCell--disabled{opacity:.64;opacity:var(--vkui--opacity_disable_accessibility)}.vkuiCell__checkbox,.vkuiCell__dragger{flex-shrink:0;margin-right:16px;position:relative}.vkuiCell__content{max-width:100%;min-width:0}.vkuiCell--removable .vkuiCell__content{flex-grow:1;padding-left:0;padding-right:0}.vkuiCell--ios .vkuiCell__dragger{margin-left:12px;margin-right:0}.vkuiCell--ios .vkuiCell__checkbox{margin-right:12px}.vkuiInternalFormItem>.vkuiCell{margin:0 calc(-1 * 16px);margin:0 calc(-1 * var(--vkui--size_base_padding_horizontal--regular))}
+.Cell {
+  position: relative;
+}
+
+/**
+ * CMP:
+ * List
+ */
+
+:global(.vkuiInternalList--dragging) .Cell:not(.Cell--dragging) {
+  transition: transform 0.3s ease;
+  pointer-events: none;
+}
+
+.Cell--dragging {
+  background-color: var(--vkui--color_background_secondary);
+  box-shadow: var(--vkui--elevation3);
+  z-index: var(--vkui_internal--z_index_cell_dragging);
+}
+
+.Cell--selectable.Cell--disabled {
+  opacity: var(--vkui--opacity_disable_accessibility);
+}
+
+.Cell__checkbox,
+.Cell__dragger {
+  position: relative;
+  flex-shrink: 0;
+  margin-right: 16px;
+}
+
+.Cell__content {
+  max-width: 100%;
+  min-width: 0;
+}
+
+.Cell--removable .Cell__content {
+  flex-grow: 1;
+  padding-right: 0;
+  padding-left: 0;
+}
+
+/**
+ * iOS
+ */
+
+.Cell--ios .Cell__dragger {
+  margin-right: 0;
+  margin-left: 12px;
+}
+
+.Cell--ios .Cell__checkbox {
+  margin-right: 12px;
+}
+
+/**
+ * CMP:
+ * FormItem
+ */
+
+:global(.vkuiInternalFormItem) > .Cell {
+  margin: 0 calc(-1 * var(--vkui--size_base_padding_horizontal--regular));
+}

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

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { HasRef } from '../../../types';
 import { CellProps } from '../Cell';
-export type CellCheckboxProps = Pick<CellProps, 'defaultChecked' | 'checked'> & React.InputHTMLAttributes<HTMLInputElement>;
-export declare const CellCheckbox: ({ className, style, ...restProps }: CellCheckboxProps) => JSX.Element;
+export interface CellCheckboxProps extends Pick<CellProps, 'defaultChecked' | 'checked'>, React.InputHTMLAttributes<HTMLInputElement>, HasRef<HTMLInputElement> {
+}
+export declare const CellCheckbox: ({ className, style, getRef, ...restProps }: CellCheckboxProps) => JSX.Element;

package/dist/cssm/components/Cell/CellCheckbox/CellCheckbox.js

@@ -3,19 +3,21 @@ import { Icon24CheckBoxOff, Icon24CheckBoxOn, Icon24CheckCircleOff, Icon24CheckC
 import { classNames } from '@vkontakte/vkjs';
 import { usePlatform } from '../../../hooks/usePlatform';
 import { Platform } from '../../../lib/platform';
-import { VisuallyHiddenInput } from '../../VisuallyHiddenInput/VisuallyHiddenInput';
+import { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';
 import styles from './CellCheckbox.module.css';
-export const CellCheckbox = ({ className , style , ...restProps })=>{
+export const CellCheckbox = ({ className , style , getRef , ...restProps })=>{
     const platform = usePlatform();
     const IconOff = platform === Platform.IOS || platform === Platform.VKCOM ? Icon24CheckCircleOff : Icon24CheckBoxOff;
     const IconOn = platform === Platform.IOS || platform === Platform.VKCOM ? Icon24CheckCircleOn : Icon24CheckBoxOn;
     return /*#__PURE__*/ React.createElement("span", {
         className: className,
         style: style
-    }, /*#__PURE__*/ React.createElement(VisuallyHiddenInput, {
-        className: styles['CellCheckbox__input'],
+    }, /*#__PURE__*/ React.createElement(VisuallyHidden, {
+        ...restProps,
+        Component: "input",
         type: "checkbox",
-        ...restProps
+        className: styles['CellCheckbox__input'],
+        getRootRef: getRef
     }), /*#__PURE__*/ React.createElement("span", {
         className: classNames(styles['CellCheckbox__icon'], styles['CellCheckbox__icon--off']),
         "aria-hidden": true

package/dist/cssm/components/Cell/CellCheckbox/CellCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Cell/CellCheckbox/CellCheckbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon24CheckBoxOff,\n  Icon24CheckBoxOn,\n  Icon24CheckCircleOff,\n  Icon24CheckCircleOn,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../../hooks/usePlatform';\nimport { Platform } from '../../../lib/platform';\nimport { VisuallyHiddenInput } from '../../VisuallyHiddenInput/VisuallyHiddenInput';\nimport { CellProps } from '../Cell';\nimport styles from './CellCheckbox.module.css';\n\nexport type CellCheckboxProps = Pick<CellProps, 'defaultChecked' | 'checked'> &\n  React.InputHTMLAttributes<HTMLInputElement>;\n\nexport const CellCheckbox = ({ className, style, ...restProps }: CellCheckboxProps) => {\n  const platform = usePlatform();\n\n  const IconOff =\n    platform === Platform.IOS || platform === Platform.VKCOM\n      ? Icon24CheckCircleOff\n      : Icon24CheckBoxOff;\n\n  const IconOn =\n    platform === Platform.IOS || platform === Platform.VKCOM\n      ? Icon24CheckCircleOn\n      : Icon24CheckBoxOn;\n\n  return (\n    <span className={className} style={style}>\n      <VisuallyHiddenInput\n        className={styles['CellCheckbox__input']}\n        type=\"checkbox\"\n        {...restProps}\n      />\n      <span\n        className={classNames(styles['CellCheckbox__icon'], styles['CellCheckbox__icon--off'])}\n        aria-hidden\n      >\n        <IconOff />\n      </span>\n      <span\n        className={classNames(styles['CellCheckbox__icon'], styles['CellCheckbox__icon--on'])}\n        aria-hidden\n      >\n        <IconOn />\n      </span>\n    </span>\n  );\n};\n"],"names":["React","Icon24CheckBoxOff","Icon24CheckBoxOn","Icon24CheckCircleOff","Icon24CheckCircleOn","classNames","usePlatform","Platform","VisuallyHiddenInput","styles","CellCheckbox","className","style","restProps","platform","IconOff","IOS","VKCOM","IconOn","span","type","aria-hidden"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,iBAAiB,EACjBC,gBAAgB,EAChBC,oBAAoB,EACpBC,mBAAmB,QACd,mBAAmB;AAC1B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,6BAA6B;AACzD,SAASC,QAAQ,QAAQ,wBAAwB;AACjD,SAASC,mBAAmB,QAAQ,gDAAgD;AAEpF,OAAOC,YAAY,4BAA4B;AAK/C,OAAO,MAAMC,eAAe,CAAC,EAAEC,UAAS,EAAEC,MAAK,EAAE,GAAGC,WAA8B,GAAK;IACrF,MAAMC,WAAWR;IAEjB,MAAMS,UACJD,aAAaP,SAASS,GAAG,IAAIF,aAAaP,SAASU,KAAK,GACpDd,uBACAF,iBAAiB;IAEvB,MAAMiB,SACJJ,aAAaP,SAASS,GAAG,IAAIF,aAAaP,SAASU,KAAK,GACpDb,sBACAF,gBAAgB;IAEtB,qBACE,oBAACiB;QAAKR,WAAWA;QAAWC,OAAOA;qBACjC,oBAACJ;QACCG,WAAWF,MAAM,CAAC,sBAAsB;QACxCW,MAAK;QACJ,GAAGP,SAAS;sBAEf,oBAACM;QACCR,WAAWN,WAAWI,MAAM,CAAC,qBAAqB,EAAEA,MAAM,CAAC,0BAA0B;QACrFY,eAAAA,IAAW;qBAEX,oBAACN,+BAEH,oBAACI;QACCR,WAAWN,WAAWI,MAAM,CAAC,qBAAqB,EAAEA,MAAM,CAAC,yBAAyB;QACpFY,eAAAA,IAAW;qBAEX,oBAACH;AAIT,EAAE"}
+{"version":3,"sources":["../../../../../src/components/Cell/CellCheckbox/CellCheckbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon24CheckBoxOff,\n  Icon24CheckBoxOn,\n  Icon24CheckCircleOff,\n  Icon24CheckCircleOn,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../../hooks/usePlatform';\nimport { Platform } from '../../../lib/platform';\nimport { HasRef } from '../../../types';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport { CellProps } from '../Cell';\nimport styles from './CellCheckbox.module.css';\n\nexport interface CellCheckboxProps\n  extends Pick<CellProps, 'defaultChecked' | 'checked'>,\n    React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement> {}\n\nexport const CellCheckbox = ({ className, style, getRef, ...restProps }: CellCheckboxProps) => {\n  const platform = usePlatform();\n\n  const IconOff =\n    platform === Platform.IOS || platform === Platform.VKCOM\n      ? Icon24CheckCircleOff\n      : Icon24CheckBoxOff;\n\n  const IconOn =\n    platform === Platform.IOS || platform === Platform.VKCOM\n      ? Icon24CheckCircleOn\n      : Icon24CheckBoxOn;\n\n  return (\n    <span className={className} style={style}>\n      <VisuallyHidden\n        {...restProps}\n        Component=\"input\"\n        type=\"checkbox\"\n        className={styles['CellCheckbox__input']}\n        getRootRef={getRef}\n      />\n      <span\n        className={classNames(styles['CellCheckbox__icon'], styles['CellCheckbox__icon--off'])}\n        aria-hidden\n      >\n        <IconOff />\n      </span>\n      <span\n        className={classNames(styles['CellCheckbox__icon'], styles['CellCheckbox__icon--on'])}\n        aria-hidden\n      >\n        <IconOn />\n      </span>\n    </span>\n  );\n};\n"],"names":["React","Icon24CheckBoxOff","Icon24CheckBoxOn","Icon24CheckCircleOff","Icon24CheckCircleOn","classNames","usePlatform","Platform","VisuallyHidden","styles","CellCheckbox","className","style","getRef","restProps","platform","IconOff","IOS","VKCOM","IconOn","span","Component","type","getRootRef","aria-hidden"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,iBAAiB,EACjBC,gBAAgB,EAChBC,oBAAoB,EACpBC,mBAAmB,QACd,mBAAmB;AAC1B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,6BAA6B;AACzD,SAASC,QAAQ,QAAQ,wBAAwB;AAEjD,SAASC,cAAc,QAAQ,sCAAsC;AAErE,OAAOC,YAAY,4BAA4B;AAO/C,OAAO,MAAMC,eAAe,CAAC,EAAEC,UAAS,EAAEC,MAAK,EAAEC,OAAM,EAAE,GAAGC,WAA8B,GAAK;IAC7F,MAAMC,WAAWT;IAEjB,MAAMU,UACJD,aAAaR,SAASU,GAAG,IAAIF,aAAaR,SAASW,KAAK,GACpDf,uBACAF,iBAAiB;IAEvB,MAAMkB,SACJJ,aAAaR,SAASU,GAAG,IAAIF,aAAaR,SAASW,KAAK,GACpDd,sBACAF,gBAAgB;IAEtB,qBACE,oBAACkB;QAAKT,WAAWA;QAAWC,OAAOA;qBACjC,oBAACJ;QACE,GAAGM,SAAS;QACbO,WAAU;QACVC,MAAK;QACLX,WAAWF,MAAM,CAAC,sBAAsB;QACxCc,YAAYV;sBAEd,oBAACO;QACCT,WAAWN,WAAWI,MAAM,CAAC,qBAAqB,EAAEA,MAAM,CAAC,0BAA0B;QACrFe,eAAAA,IAAW;qBAEX,oBAACR,+BAEH,oBAACI;QACCT,WAAWN,WAAWI,MAAM,CAAC,qBAAqB,EAAEA,MAAM,CAAC,yBAAyB;QACpFe,eAAAA,IAAW;qBAEX,oBAACL;AAIT,EAAE"}

package/dist/cssm/components/Cell/CellCheckbox/CellCheckbox.module.css

@@ -1 +1,13 @@
-.vkuiCellCheckbox__icon{color:#b8c1cc;color:var(--vkui--color_icon_tertiary);display:none}.vkuiCellCheckbox__icon--on{color:#2688eb;color:var(--vkui--color_icon_accent)}.vkuiCellCheckbox__input:checked~.vkuiCellCheckbox__icon--on,.vkuiCellCheckbox__input:not(:checked)~.vkuiCellCheckbox__icon--off{display:block}
+.CellCheckbox__icon {
+  display: none;
+  color: var(--vkui--color_icon_tertiary);
+}
+
+.CellCheckbox__icon--on {
+  color: var(--vkui--color_icon_accent);
+}
+
+.CellCheckbox__input:not(:checked) ~ .CellCheckbox__icon--off,
+.CellCheckbox__input:checked ~ .CellCheckbox__icon--on {
+  display: block;
+}

package/dist/cssm/components/Cell/CellDragger/CellDragger.module.css

@@ -1 +1,4 @@
-.vkuiCellDragger{color:#99a2ad;color:var(--vkui--color_icon_secondary);cursor:ns-resize}
+.CellDragger {
+  cursor: ns-resize;
+  color: var(--vkui--color_icon_secondary);
+}

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

@@ -1 +1,57 @@
-.vkuiCellButton{background:transparent;border:none;box-sizing:border-box;cursor:pointer;margin:0;padding-bottom:0;padding-top:0;text-align:left;text-decoration:none;width:100%}.vkuiFormItem .vkuiCellButton{box-sizing:initial;margin:0 calc(-1 * 16px);margin:0 calc(-1 * var(--vkui--size_base_padding_horizontal--regular));width:100%}.vkuiCellButton[disabled]{opacity:.4}.vkuiCellButton--centered{justify-content:center;text-align:center}.vkuiCellButton--centered .vkuiSimpleCell__main{flex-grow:0;max-width:none}.vkuiCellButton--centered>.vkuiIcon{padding-right:8px}.vkuiCellButton{color:#2688eb;color:var(--vkui--color_text_accent)}.vkuiCellButton>.vkuiIcon{color:#2688eb;color:var(--vkui--color_icon_accent)}.vkuiCellButton--mode-danger{color:#e64646;color:var(--vkui--color_text_negative)}.vkuiCellButton--mode-danger>.vkuiIcon{color:#e64646;color:var(--vkui--color_icon_negative)}
+.CellButton {
+  box-sizing: border-box;
+  text-decoration: none;
+  margin: 0;
+  border: none;
+  cursor: pointer;
+  width: 100%;
+  background: transparent;
+  text-align: left;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+/**
+ * CMP:
+ * FormItem
+ */
+
+:global(.vkuiInternalFormItem) .CellButton {
+  width: 100%;
+  box-sizing: content-box;
+  margin: 0 calc(-1 * var(--vkui--size_base_padding_horizontal--regular));
+}
+
+.CellButton[disabled] {
+  opacity: 0.4;
+}
+
+.CellButton--centered {
+  justify-content: center;
+  text-align: center;
+}
+
+.CellButton--centered :global(.vkuiInternalSimpleCell__main) {
+  flex-grow: initial;
+  max-width: initial;
+}
+
+.CellButton--centered > :global(.vkuiIcon) {
+  padding-right: 8px;
+}
+
+.CellButton {
+  color: var(--vkui--color_text_accent);
+}
+
+.CellButton > :global(.vkuiIcon) {
+  color: var(--vkui--color_icon_accent);
+}
+
+.CellButton--mode-danger {
+  color: var(--vkui--color_text_negative);
+}
+
+.CellButton--mode-danger > :global(.vkuiIcon) {
+  color: var(--vkui--color_icon_negative);
+}

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

@@ -5,8 +5,9 @@ export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElemen
     description?: React.ReactNode;
     indeterminate?: boolean;
     defaultIndeterminate?: boolean;
+    titleAfter?: React.ReactNode;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Checkbox
  */
-export declare const Checkbox: ({ children, className, style, getRootRef, getRef, description, indeterminate, defaultIndeterminate, hoverMode, activeMode, hasHover, hasActive, focusVisibleMode, onChange, ...restProps }: CheckboxProps) => JSX.Element;
+export declare const Checkbox: ({ children, className, style, getRootRef, getRef, description, indeterminate, defaultIndeterminate, hoverMode, activeMode, hasHover, hasActive, focusVisibleMode, onChange, titleAfter, ...restProps }: CheckboxProps) => JSX.Element;

package/dist/cssm/components/Checkbox/Checkbox.js

@@ -10,7 +10,7 @@ import { Platform } from '../../lib/platform';
 import { warnOnce } from '../../lib/warnOnce';
 import { ACTIVE_EFFECT_DELAY, Tappable } from '../Tappable/Tappable';
 import { Footnote } from '../Typography/Footnote/Footnote';
-import { VisuallyHiddenInput } from '../VisuallyHiddenInput/VisuallyHiddenInput';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 import styles from './Checkbox.module.css';
 const sizeYClassNames = {
     none: styles['Checkbox--sizeY-none'],
@@ -20,7 +20,7 @@ const sizeYClassNames = {
 const warn = warnOnce('Checkbox');
 /**
  * @see https://vkcom.github.io/VKUI/#/Checkbox
- */ export const Checkbox = ({ children , className , style , getRootRef , getRef , description , indeterminate , defaultIndeterminate , hoverMode , activeMode , hasHover , hasActive , focusVisibleMode , onChange , ...restProps })=>{
+ */ export const Checkbox = ({ children , className , style , getRootRef , getRef , description , indeterminate , defaultIndeterminate , hoverMode , activeMode , hasHover , hasActive , focusVisibleMode , onChange , titleAfter , ...restProps })=>{
     const inputRef = useExternRef(getRef);
     const platform = usePlatform();
     const { sizeY ='none'  } = useAdaptivity();
@@ -73,12 +73,13 @@ const warn = warnOnce('Checkbox');
         hasHover: hasHover,
         hasActive: hasActive,
         focusVisibleMode: focusVisibleMode
-    }, /*#__PURE__*/ React.createElement(VisuallyHiddenInput, {
+    }, /*#__PURE__*/ React.createElement(VisuallyHidden, {
         ...restProps,
-        onChange: handleChange,
+        Component: "input",
         type: "checkbox",
+        onChange: handleChange,
         className: styles['Checkbox__input'],
-        getRef: inputRef
+        getRootRef: inputRef
     }), /*#__PURE__*/ React.createElement("div", {
         className: classNames(styles['Checkbox__icon'], styles['Checkbox__icon--on'])
     }, platform === Platform.VKCOM ? /*#__PURE__*/ React.createElement(Icon20CheckBoxOn, null) : /*#__PURE__*/ React.createElement(React.Fragment, null, adaptiveSizeY.compact && /*#__PURE__*/ React.createElement(Icon20CheckBoxOn, {
@@ -107,8 +108,10 @@ const warn = warnOnce('Checkbox');
     }))), /*#__PURE__*/ React.createElement("div", {
         className: styles['Checkbox__content']
     }, /*#__PURE__*/ React.createElement("div", {
-        className: styles['Checkbox__children']
-    }, children), hasReactNode(description) && /*#__PURE__*/ React.createElement(Footnote, {
+        className: styles['Checkbox__title']
+    }, /*#__PURE__*/ React.createElement("span", null, children), /*#__PURE__*/ React.createElement("div", {
+        className: styles['Checkbox__titleAfter']
+    }, titleAfter)), hasReactNode(description) && /*#__PURE__*/ React.createElement(Footnote, {
         className: styles['Checkbox__description']
     }, description)));
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon20CheckBoxIndetermanate,\n  Icon20CheckBoxOff,\n  Icon20CheckBoxOn,\n  Icon24CheckBoxOff,\n  Icon24CheckBoxOn,\n} from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasRef, HasRootRef } from '../../types';\nimport { ACTIVE_EFFECT_DELAY, Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { VisuallyHiddenInput } from '../VisuallyHiddenInput/VisuallyHiddenInput';\nimport styles from './Checkbox.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Checkbox--sizeY-none'],\n  [SizeType.COMPACT]: styles['Checkbox--sizeY-compact'],\n  [SizeType.REGULAR]: styles['Checkbox--sizeY-regular'],\n};\n\nexport interface CheckboxProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasRef<HTMLInputElement>,\n    Pick<\n      TappableProps,\n      'hoverMode' | 'activeMode' | 'hasHover' | 'hasActive' | 'focusVisibleMode'\n    > {\n  description?: React.ReactNode;\n  indeterminate?: boolean;\n  defaultIndeterminate?: boolean;\n}\n\nconst warn = warnOnce('Checkbox');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Checkbox\n */\nexport const Checkbox = ({\n  children,\n  className,\n  style,\n  getRootRef,\n  getRef,\n  description,\n  indeterminate,\n  defaultIndeterminate,\n  hoverMode,\n  activeMode,\n  hasHover,\n  hasActive,\n  focusVisibleMode,\n  onChange,\n  ...restProps\n}: CheckboxProps) => {\n  const inputRef = useExternRef(getRef);\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n  const { sizeY: adaptiveSizeY } = useAdaptivityConditionalRender();\n\n  React.useEffect(() => {\n    const indeterminateValue = indeterminate === undefined ? defaultIndeterminate : indeterminate;\n\n    if (inputRef.current) {\n      inputRef.current.indeterminate = Boolean(indeterminateValue);\n    }\n  }, [defaultIndeterminate, indeterminate, inputRef]);\n\n  const handleChange: CheckboxProps['onChange'] = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      if (\n        defaultIndeterminate !== undefined &&\n        indeterminate === undefined &&\n        restProps.checked === undefined &&\n        inputRef.current\n      ) {\n        inputRef.current.indeterminate = false;\n      }\n      if (indeterminate !== undefined && inputRef.current) {\n        inputRef.current.indeterminate = indeterminate;\n      }\n      onChange && onChange(event);\n    },\n    [defaultIndeterminate, indeterminate, restProps.checked, onChange, inputRef],\n  );\n\n  if (process.env.NODE_ENV === 'development') {\n    if (defaultIndeterminate && restProps.defaultChecked) {\n      warn('defaultIndeterminate и defaultChecked не могут быть true одновременно', 'error');\n    }\n\n    if (indeterminate && restProps.checked) {\n      warn('indeterminate и checked не могут быть true одновременно', 'error');\n    }\n\n    if (restProps.defaultChecked && restProps.checked) {\n      warn('defaultChecked и checked не могут быть true одновременно', 'error');\n    }\n  }\n\n  return (\n    <Tappable\n      Component=\"label\"\n      className={classNames(\n        styles['Checkbox'],\n        platform === Platform.VKCOM && styles['Checkbox--vkcom'],\n        sizeYClassNames[sizeY],\n        !(hasReactNode(children) || hasReactNode(description)) && styles['Checkbox--simple'],\n        className,\n      )}\n      style={style}\n      disabled={restProps.disabled}\n      activeEffectDelay={platform === Platform.IOS ? 100 : ACTIVE_EFFECT_DELAY}\n      getRootRef={getRootRef}\n      hoverMode={hoverMode}\n      activeMode={activeMode}\n      hasHover={hasHover}\n      hasActive={hasActive}\n      focusVisibleMode={focusVisibleMode}\n    >\n      <VisuallyHiddenInput\n        {...restProps}\n        onChange={handleChange}\n        type=\"checkbox\"\n        className={styles['Checkbox__input']}\n        getRef={inputRef}\n      />\n      <div className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--on'])}>\n        {platform === Platform.VKCOM ? (\n          <Icon20CheckBoxOn />\n        ) : (\n          <React.Fragment>\n            {adaptiveSizeY.compact && (\n              <Icon20CheckBoxOn className={adaptiveSizeY.compact.className} />\n            )}\n            {adaptiveSizeY.regular && (\n              <Icon24CheckBoxOn className={adaptiveSizeY.regular.className} />\n            )}\n          </React.Fragment>\n        )}\n      </div>\n      <div className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--off'])}>\n        {platform === Platform.VKCOM ? (\n          <Icon20CheckBoxOff />\n        ) : (\n          <React.Fragment>\n            {adaptiveSizeY.compact && (\n              <Icon20CheckBoxOff className={adaptiveSizeY.compact.className} />\n            )}\n            {adaptiveSizeY.regular && (\n              <Icon24CheckBoxOff className={adaptiveSizeY.regular.className} />\n            )}\n          </React.Fragment>\n        )}\n      </div>\n      <div\n        className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--indeterminate'])}\n      >\n        {platform === Platform.VKCOM ? (\n          <Icon20CheckBoxIndetermanate width={20} height={20} />\n        ) : (\n          <React.Fragment>\n            {adaptiveSizeY.compact && (\n              <Icon20CheckBoxIndetermanate\n                className={adaptiveSizeY.compact.className}\n                width={20}\n                height={20}\n              />\n            )}\n            {adaptiveSizeY.regular && (\n              <Icon20CheckBoxIndetermanate\n                className={adaptiveSizeY.regular.className}\n                width={24}\n                height={24}\n              />\n            )}\n          </React.Fragment>\n        )}\n      </div>\n      <div className={styles['Checkbox__content']}>\n        <div className={styles['Checkbox__children']}>{children}</div>\n        {hasReactNode(description) && (\n          <Footnote className={styles['Checkbox__description']}>{description}</Footnote>\n        )}\n      </div>\n    </Tappable>\n  );\n};\n"],"names":["React","Icon20CheckBoxIndetermanate","Icon20CheckBoxOff","Icon20CheckBoxOn","Icon24CheckBoxOff","Icon24CheckBoxOn","classNames","hasReactNode","useAdaptivity","useAdaptivityConditionalRender","useExternRef","usePlatform","SizeType","Platform","warnOnce","ACTIVE_EFFECT_DELAY","Tappable","Footnote","VisuallyHiddenInput","styles","sizeYClassNames","none","COMPACT","REGULAR","warn","Checkbox","children","className","style","getRootRef","getRef","description","indeterminate","defaultIndeterminate","hoverMode","activeMode","hasHover","hasActive","focusVisibleMode","onChange","restProps","inputRef","platform","sizeY","adaptiveSizeY","useEffect","indeterminateValue","undefined","current","Boolean","handleChange","useCallback","event","checked","process","env","NODE_ENV","defaultChecked","Component","VKCOM","disabled","activeEffectDelay","IOS","type","div","Fragment","compact","regular","width","height"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon20CheckBoxIndetermanate,\n  Icon20CheckBoxOff,\n  Icon20CheckBoxOn,\n  Icon24CheckBoxOff,\n  Icon24CheckBoxOn,\n} from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasRef, HasRootRef } from '../../types';\nimport { ACTIVE_EFFECT_DELAY, Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Checkbox.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Checkbox--sizeY-none'],\n  [SizeType.COMPACT]: styles['Checkbox--sizeY-compact'],\n  [SizeType.REGULAR]: styles['Checkbox--sizeY-regular'],\n};\n\nexport interface CheckboxProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasRef<HTMLInputElement>,\n    Pick<\n      TappableProps,\n      'hoverMode' | 'activeMode' | 'hasHover' | 'hasActive' | 'focusVisibleMode'\n    > {\n  description?: React.ReactNode;\n  indeterminate?: boolean;\n  defaultIndeterminate?: boolean;\n  titleAfter?: React.ReactNode;\n}\n\nconst warn = warnOnce('Checkbox');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Checkbox\n */\nexport const Checkbox = ({\n  children,\n  className,\n  style,\n  getRootRef,\n  getRef,\n  description,\n  indeterminate,\n  defaultIndeterminate,\n  hoverMode,\n  activeMode,\n  hasHover,\n  hasActive,\n  focusVisibleMode,\n  onChange,\n  titleAfter,\n  ...restProps\n}: CheckboxProps) => {\n  const inputRef = useExternRef(getRef);\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n  const { sizeY: adaptiveSizeY } = useAdaptivityConditionalRender();\n\n  React.useEffect(() => {\n    const indeterminateValue = indeterminate === undefined ? defaultIndeterminate : indeterminate;\n\n    if (inputRef.current) {\n      inputRef.current.indeterminate = Boolean(indeterminateValue);\n    }\n  }, [defaultIndeterminate, indeterminate, inputRef]);\n\n  const handleChange: CheckboxProps['onChange'] = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      if (\n        defaultIndeterminate !== undefined &&\n        indeterminate === undefined &&\n        restProps.checked === undefined &&\n        inputRef.current\n      ) {\n        inputRef.current.indeterminate = false;\n      }\n      if (indeterminate !== undefined && inputRef.current) {\n        inputRef.current.indeterminate = indeterminate;\n      }\n      onChange && onChange(event);\n    },\n    [defaultIndeterminate, indeterminate, restProps.checked, onChange, inputRef],\n  );\n\n  if (process.env.NODE_ENV === 'development') {\n    if (defaultIndeterminate && restProps.defaultChecked) {\n      warn('defaultIndeterminate и defaultChecked не могут быть true одновременно', 'error');\n    }\n\n    if (indeterminate && restProps.checked) {\n      warn('indeterminate и checked не могут быть true одновременно', 'error');\n    }\n\n    if (restProps.defaultChecked && restProps.checked) {\n      warn('defaultChecked и checked не могут быть true одновременно', 'error');\n    }\n  }\n\n  return (\n    <Tappable\n      Component=\"label\"\n      className={classNames(\n        styles['Checkbox'],\n        platform === Platform.VKCOM && styles['Checkbox--vkcom'],\n        sizeYClassNames[sizeY],\n        !(hasReactNode(children) || hasReactNode(description)) && styles['Checkbox--simple'],\n        className,\n      )}\n      style={style}\n      disabled={restProps.disabled}\n      activeEffectDelay={platform === Platform.IOS ? 100 : ACTIVE_EFFECT_DELAY}\n      getRootRef={getRootRef}\n      hoverMode={hoverMode}\n      activeMode={activeMode}\n      hasHover={hasHover}\n      hasActive={hasActive}\n      focusVisibleMode={focusVisibleMode}\n    >\n      <VisuallyHidden\n        {...restProps}\n        Component=\"input\"\n        type=\"checkbox\"\n        onChange={handleChange}\n        className={styles['Checkbox__input']}\n        getRootRef={inputRef}\n      />\n      <div className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--on'])}>\n        {platform === Platform.VKCOM ? (\n          <Icon20CheckBoxOn />\n        ) : (\n          <React.Fragment>\n            {adaptiveSizeY.compact && (\n              <Icon20CheckBoxOn className={adaptiveSizeY.compact.className} />\n            )}\n            {adaptiveSizeY.regular && (\n              <Icon24CheckBoxOn className={adaptiveSizeY.regular.className} />\n            )}\n          </React.Fragment>\n        )}\n      </div>\n      <div className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--off'])}>\n        {platform === Platform.VKCOM ? (\n          <Icon20CheckBoxOff />\n        ) : (\n          <React.Fragment>\n            {adaptiveSizeY.compact && (\n              <Icon20CheckBoxOff className={adaptiveSizeY.compact.className} />\n            )}\n            {adaptiveSizeY.regular && (\n              <Icon24CheckBoxOff className={adaptiveSizeY.regular.className} />\n            )}\n          </React.Fragment>\n        )}\n      </div>\n      <div\n        className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--indeterminate'])}\n      >\n        {platform === Platform.VKCOM ? (\n          <Icon20CheckBoxIndetermanate width={20} height={20} />\n        ) : (\n          <React.Fragment>\n            {adaptiveSizeY.compact && (\n              <Icon20CheckBoxIndetermanate\n                className={adaptiveSizeY.compact.className}\n                width={20}\n                height={20}\n              />\n            )}\n            {adaptiveSizeY.regular && (\n              <Icon20CheckBoxIndetermanate\n                className={adaptiveSizeY.regular.className}\n                width={24}\n                height={24}\n              />\n            )}\n          </React.Fragment>\n        )}\n      </div>\n      <div className={styles['Checkbox__content']}>\n        <div className={styles['Checkbox__title']}>\n          <span>{children}</span>\n          <div className={styles['Checkbox__titleAfter']}>{titleAfter}</div>\n        </div>\n        {hasReactNode(description) && (\n          <Footnote className={styles['Checkbox__description']}>{description}</Footnote>\n        )}\n      </div>\n    </Tappable>\n  );\n};\n"],"names":["React","Icon20CheckBoxIndetermanate","Icon20CheckBoxOff","Icon20CheckBoxOn","Icon24CheckBoxOff","Icon24CheckBoxOn","classNames","hasReactNode","useAdaptivity","useAdaptivityConditionalRender","useExternRef","usePlatform","SizeType","Platform","warnOnce","ACTIVE_EFFECT_DELAY","Tappable","Footnote","VisuallyHidden","styles","sizeYClassNames","none","COMPACT","REGULAR","warn","Checkbox","children","className","style","getRootRef","getRef","description","indeterminate","defaultIndeterminate","hoverMode","activeMode","hasHover","hasActive","focusVisibleMode","onChange","titleAfter","restProps","inputRef","platform","sizeY","adaptiveSizeY","useEffect","indeterminateValue","undefined","current","Boolean","handleChange","useCallback","event","checked","process","env","NODE_ENV","defaultChecked","Component","VKCOM","disabled","activeEffectDelay","IOS","type","div","Fragment","compact","regular","width","height","span"],"mappings":"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"}

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

@@ -1 +1,172 @@
-.vkuiCheckbox{align-items:center;display:flex;font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);justify-content:flex-start;min-height:44px;min-height:var(--vkui--size_field_height--regular);min-width:44px;min-width:var(--vkui--size_field_height--regular);padding:0 16px;padding:0 var(--vkui--size_base_padding_horizontal--regular)}.vkuiFormItem .vkuiCheckbox{box-sizing:initial;margin:0 calc(-1 * 16px);margin:0 calc(-1 * var(--vkui--size_base_padding_horizontal--regular));width:100%}.vkuiCheckbox__icon{flex-shrink:0;margin-right:12px}.vkuiCheckbox__icon--indeterminate,.vkuiCheckbox__icon--on{color:#2688eb;color:var(--vkui--color_icon_accent);display:none}.vkuiCheckbox__icon--off{color:#b8c1cc;color:var(--vkui--color_icon_tertiary)}.vkuiCheckbox__content{color:#000;color:var(--vkui--color_text_primary);flex-grow:1;font-weight:400;font-weight:var(--vkui--font_weight_accent3);word-break:break-word}.vkuiCheckbox--sizeY-regular:not(.vkuiCheckbox--vkcom) .vkuiCheckbox__content{font-size:16px;font-size:var(--vkui--font_headline1--font_size--regular);line-height:20px;line-height:var(--vkui--font_headline1--line_height--regular)}@media (max-width:767.9px) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiCheckbox--sizeY-none:not(.vkuiCheckbox--vkcom) .vkuiCheckbox__content{font-size:16px;font-size:var(--vkui--font_headline1--font_size--regular);line-height:20px;line-height:var(--vkui--font_headline1--line_height--regular)}}.vkuiCheckbox--sizeY-compact .vkuiCheckbox__content,.vkuiCheckbox--vkcom .vkuiCheckbox__content{font-size:15px;font-size:var(--vkui--font_text--font_size--compact);line-height:20px;line-height:var(--vkui--font_text--line_height--compact)}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiCheckbox--sizeY-none .vkuiCheckbox__content{font-size:15px;font-size:var(--vkui--font_text--font_size--compact);line-height:20px;line-height:var(--vkui--font_text--line_height--compact)}}.vkuiCheckbox__description{color:#818c99;color:var(--vkui--color_text_secondary);display:block;margin-bottom:12px;margin-top:2px}.vkuiCheckbox__children{margin-top:12px}.vkuiCheckbox__children:last-child{margin-bottom:12px}.vkuiCheckbox__input:checked~.vkuiCheckbox__icon--on{display:flex}.vkuiCheckbox__input:checked~.vkuiCheckbox__icon--off,.vkuiCheckbox__input:indeterminate~.vkuiCheckbox__icon--indeterminate{display:none}.vkuiCheckbox__input:indeterminate~.vkuiCheckbox__icon--indeterminate{display:flex}.vkuiCheckbox__input:indeterminate~.vkuiCheckbox__icon--off,.vkuiCheckbox__input:indeterminate~.vkuiCheckbox__icon--on{display:none}.vkuiCheckbox__input[disabled]~*{opacity:.64;opacity:var(--vkui--opacity_disable_accessibility)}.vkuiCheckbox--sizeY-compact{min-height:36px;min-height:var(--vkui--size_field_height--compact);min-width:36px;min-width:var(--vkui--size_field_height--compact)}.vkuiCheckbox--sizeY-compact .vkuiCheckbox__children{margin-top:8px}.vkuiCheckbox--sizeY-compact .vkuiCheckbox__children:last-child,.vkuiCheckbox--sizeY-compact .vkuiCheckbox__description{margin-bottom:8px}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiCheckbox--sizeY-none{min-height:36px;min-height:var(--vkui--size_field_height--compact);min-width:36px;min-width:var(--vkui--size_field_height--compact)}.vkuiCheckbox--sizeY-none .vkuiCheckbox__children{margin-top:8px}.vkuiCheckbox--sizeY-none .vkuiCheckbox__children:last-child,.vkuiCheckbox--sizeY-none .vkuiCheckbox__description{margin-bottom:8px}}.vkuiCheckbox--simple{align-items:center;border-radius:50%;display:flex;justify-content:center;padding:0}.vkuiCheckbox--simple .vkuiCheckbox__content{display:none}.vkuiCheckbox--simple .vkuiCheckbox__icon{margin:0}
+.Checkbox {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0 var(--vkui--size_base_padding_horizontal--regular);
+  min-width: var(--vkui--size_field_height--regular);
+  min-height: var(--vkui--size_field_height--regular);
+  font-family: var(--vkui--font_family_base);
+}
+
+/**
+ * CMP:
+ * FormItem
+ */
+
+:global(.vkuiInternalFormItem) .Checkbox {
+  width: 100%;
+  box-sizing: content-box;
+  margin: 0 calc(-1 * var(--vkui--size_base_padding_horizontal--regular));
+}
+
+.Checkbox__icon {
+  flex-shrink: 0;
+  margin-right: 12px;
+}
+
+.Checkbox__icon--on {
+  color: var(--vkui--color_icon_accent);
+  display: none;
+}
+
+.Checkbox__icon--indeterminate {
+  color: var(--vkui--color_icon_accent);
+  display: none;
+}
+
+.Checkbox__icon--off {
+  color: var(--vkui--color_icon_tertiary);
+}
+
+.Checkbox__content {
+  flex-grow: 1;
+  color: var(--vkui--color_text_primary);
+  word-break: break-word;
+  font-weight: var(--vkui--font_weight_accent3);
+}
+
+.Checkbox--sizeY-regular:not(.Checkbox--vkcom) .Checkbox__content {
+  font-size: var(--vkui--font_headline1--font_size--regular);
+  line-height: var(--vkui--font_headline1--line_height--regular);
+}
+
+@media (pointer: coarse) and (min-height: 415px),(pointer: none) and (min-height: 415px),(max-width: 767.9px) and (min-height: 415px) {
+  .Checkbox--sizeY-none:not(.Checkbox--vkcom) .Checkbox__content {
+    font-size: var(--vkui--font_headline1--font_size--regular);
+    line-height: var(--vkui--font_headline1--line_height--regular);
+  }
+}
+
+.Checkbox--vkcom .Checkbox__content,
+.Checkbox--sizeY-compact .Checkbox__content {
+  font-size: var(--vkui--font_text--font_size--compact);
+  line-height: var(--vkui--font_text--line_height--compact);
+}
+
+@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
+  .Checkbox--sizeY-none .Checkbox__content {
+    font-size: var(--vkui--font_text--font_size--compact);
+    line-height: var(--vkui--font_text--line_height--compact);
+  }
+}
+
+.Checkbox__description {
+  color: var(--vkui--color_text_secondary);
+  display: block;
+  margin-bottom: 12px;
+  margin-top: 2px;
+}
+
+.Checkbox__title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 12px;
+}
+
+.Checkbox__title:last-child {
+  margin-bottom: 12px;
+}
+
+.Checkbox__titleAfter {
+  margin-left: 4px;
+  color: var(--vkui--color_icon_tertiary);
+}
+
+.Checkbox__input:checked ~ .Checkbox__icon--on {
+  display: flex;
+}
+
+.Checkbox__input:indeterminate ~ .Checkbox__icon--indeterminate,
+.Checkbox__input:checked ~ .Checkbox__icon--off {
+  display: none;
+}
+
+.Checkbox__input:indeterminate ~ .Checkbox__icon--indeterminate {
+  display: flex;
+}
+
+.Checkbox__input:indeterminate ~ .Checkbox__icon--on,
+.Checkbox__input:indeterminate ~ .Checkbox__icon--off {
+  display: none;
+}
+
+.Checkbox__input[disabled] ~ * {
+  opacity: var(--vkui--opacity_disable_accessibility);
+}
+
+/**
+ * sizeY COMPACT
+ */
+
+.Checkbox--sizeY-compact {
+  min-width: var(--vkui--size_field_height--compact);
+  min-height: var(--vkui--size_field_height--compact);
+}
+
+.Checkbox--sizeY-compact .Checkbox__title {
+  margin-top: 8px;
+}
+
+.Checkbox--sizeY-compact .Checkbox__title:last-child {
+  margin-bottom: 8px;
+}
+
+.Checkbox--sizeY-compact .Checkbox__description {
+  margin-bottom: 8px;
+}
+
+@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
+  .Checkbox--sizeY-none {
+    min-width: var(--vkui--size_field_height--compact);
+    min-height: var(--vkui--size_field_height--compact);
+  }
+
+  .Checkbox--sizeY-none .Checkbox__title {
+    margin-top: 8px;
+  }
+
+  .Checkbox--sizeY-none .Checkbox__title:last-child {
+    margin-bottom: 8px;
+  }
+
+  .Checkbox--sizeY-none .Checkbox__description {
+    margin-bottom: 8px;
+  }
+}
+
+.Checkbox--simple {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  border-radius: 50%;
+}
+
+.Checkbox--simple .Checkbox__content {
+  display: none;
+}
+
+.Checkbox--simple .Checkbox__icon {
+  margin: 0;
+}

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

@@ -1 +1,67 @@
-.vkuiChip{background:#fff;background:var(--vkui--color_background_content);border:1px solid rgba(0,0,0,.08);border:var(--vkui_internal--thin_border) solid var(--vkui--color_image_border_alpha);border-radius:6px;box-sizing:border-box;display:inline-block;height:32px}.vkuiChip__in{align-items:center;display:flex;height:100%;padding:0 8px;position:relative}.vkuiChip--removable .vkuiChip__in{padding-right:0}.vkuiChip__content{color:#000;color:var(--vkui--color_text_primary);display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiChip__remove{align-content:center;align-items:center;background:transparent;border:none;border-radius:2px;box-sizing:border-box;color:#99a2ad;color:var(--vkui--color_icon_secondary);cursor:pointer;display:flex;flex-grow:0;flex-shrink:0;height:28px;justify-content:center;margin:-1px;padding:6px;position:relative;transform:translateX(-1px);width:28px}.vkuiChip__before{margin-right:6px}.vkuiChip__after{margin-left:6px}.vkuiChip--sizeY-compact{height:28px}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiChip--sizeY-none{height:28px}}
+.Chip {
+  display: inline-block;
+  border: var(--vkui_internal--thin_border) solid var(--vkui--color_image_border_alpha);
+  background: var(--vkui--color_background_content);
+  border-radius: 6px;
+  height: 32px;
+  box-sizing: border-box;
+}
+
+.Chip__in {
+  position: relative;
+  display: flex;
+  height: 100%;
+  padding: 0 8px;
+  align-items: center;
+}
+
+.Chip--removable .Chip__in {
+  padding-right: 0;
+}
+
+.Chip__content {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: var(--vkui--color_text_primary);
+  display: inline-block;
+}
+
+.Chip__remove {
+  position: relative;
+  flex-grow: 0;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  align-content: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 6px;
+  margin: -1px;
+  transform: translateX(-1px);
+  color: var(--vkui--color_icon_secondary);
+  border: none;
+  border-radius: 2px;
+  background: transparent;
+  box-sizing: border-box;
+  cursor: pointer;
+}
+
+.Chip__before {
+  margin-right: 6px;
+}
+
+.Chip__after {
+  margin-left: 6px;
+}
+
+.Chip--sizeY-compact {
+  height: 28px;
+}
+
+@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
+  .Chip--sizeY-none {
+    height: 28px;
+  }
+}

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

@@ -1 +1,3 @@
-.vkuiChipsInput{max-width:100%}
+.ChipsInput {
+  max-width: 100%;
+}