@vkontakte/vkui 7.5.4 → 7.6.1

package/dist/components/Cell/Cell.js

@@ -15,7 +15,7 @@ import { DEFAULT_DRAGGABLE_LABEL } from "./constants.js";
 /**
  * @see https://vkui.io/components/cell
  */ export const Cell = (_param)=>{
-    var { mode, onRemove, removePlaceholder = 'Удалить', onDragFinish, before, after, disabled, draggable, Component: ComponentProps, onChange, name, value, checked, defaultChecked, getRootRef, draggerLabel = DEFAULT_DRAGGABLE_LABEL, className, style, toggleButtonTestId, removeButtonTestId } = _param, restProps = _object_without_properties(_param, [
+    var { mode, onRemove, removePlaceholder = 'Удалить', onDragFinish, before, after, disabled, draggable, Component: ComponentProps, onChange, name, value, checked, defaultChecked, getRootRef, draggerLabel = DEFAULT_DRAGGABLE_LABEL, className, style, toggleButtonTestId, removeButtonTestId, href: hrefProp } = _param, restProps = _object_without_properties(_param, [
         "mode",
         "onRemove",
         "removePlaceholder",
@@ -35,12 +35,14 @@ import { DEFAULT_DRAGGABLE_LABEL } from "./constants.js";
         "className",
         "style",
         "toggleButtonTestId",
-        "removeButtonTestId"
+        "removeButtonTestId",
+        "href"
     ]);
     const [dragging, setDragging] = React.useState(false);
     const selectable = mode === 'selectable';
     const removable = mode === 'removable';
     const Component = selectable ? 'label' : ComponentProps;
+    const href = selectable ? undefined : hrefProp;
     const platform = usePlatform();
     const rootElRef = useExternRef(getRootRef);
     const dragger = draggable ? /*#__PURE__*/ _jsx(CellDragger, {
@@ -69,7 +71,8 @@ import { DEFAULT_DRAGGABLE_LABEL } from "./constants.js";
     const simpleCellProps = _object_spread_props(_object_spread(_object_spread_props(_object_spread({
         hasActive: hasActive,
         hasHover: hasActive && !removable,
-        disabled
+        disabled,
+        href
     }, restProps), {
         className: "vkuiCell__content"
     }), Component && {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Cell/Cell.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { SwappedItemRange } from '../../hooks/useDraggableWithDomApi';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { HasRootRef } from '../../types';\nimport { Removable, type RemovableProps } from '../Removable/Removable';\nimport { SimpleCell, type SimpleCellProps } from '../SimpleCell/SimpleCell';\nimport { CellCheckbox, type CellCheckboxProps } from './CellCheckbox/CellCheckbox';\nimport { CellDragger } from './CellDragger/CellDragger';\nimport { DEFAULT_DRAGGABLE_LABEL } from './constants';\nimport styles from './Cell.module.css';\n\nexport interface CellProps\n  extends Omit<SimpleCellProps, 'getRootRef'>,\n    RemovableProps,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Режим отображения ячейки:\n   *\n   * - \"removable\": добавляется кнопка для удаления\n   * - \"selectable\": добавляется чекбокс для выбора.\n   */\n  mode?: 'removable' | 'selectable';\n  /**\n   * В режиме перетаскивания ячейка перестает реагировать на нажатие, то есть при нажатии переданный `onClick` вызываться не будет.\n   */\n  draggable?: boolean;\n  /**\n   * Имя для `input` в режиме `selectable`.\n   */\n  name?: string;\n  /**\n   * В режиме `selectable` реагирует на входящие значения пропса `cheсked`, как зависящий напрямую от входящего значения.\n   */\n  checked?: boolean;\n  /**\n   * В режиме `selectable` реагирует на входящие значения пропса `defaultChecked` как неконтролируемый компонент.\n   */\n  defaultChecked?: boolean;\n  /**\n   * Обработчик, срабатывающий при завершении перетаскивания.\n   * **Важно:** режим перетаскивания не меняет порядок ячеек в DOM. В обработчике есть объект с полями `from` и `to`.\n   * Эти числа нужны для того, чтобы разработчик понимал, с какого индекса на какой произошел переход. В песочнице\n   * есть рабочий пример с обработкой этих чисел и перерисовкой списка.\n   */\n  onDragFinish?: (swappedItemRange: SwappedItemRange) => void;\n  /**\n   * Текст для кнопки перетаскивания ячейки.\n   */\n  draggerLabel?: string;\n}\n\n/**\n * @see https://vkui.io/components/cell\n */\nexport const Cell: React.FC<CellProps> & {\n  Checkbox: typeof CellCheckbox;\n} = ({\n  mode,\n  onRemove,\n  removePlaceholder = 'Удалить',\n  onDragFinish,\n  before,\n  after,\n  disabled,\n  draggable,\n  Component: ComponentProps,\n  onChange,\n  name,\n  value,\n  checked,\n  defaultChecked,\n  getRootRef,\n  draggerLabel = DEFAULT_DRAGGABLE_LABEL,\n  className,\n  style,\n  toggleButtonTestId,\n  removeButtonTestId,\n  ...restProps\n}: CellProps) => {\n  const [dragging, setDragging] = React.useState(false);\n  const selectable = mode === 'selectable';\n  const removable = mode === 'removable';\n  const Component = selectable ? 'label' : ComponentProps;\n\n  const platform = usePlatform();\n\n  const rootElRef = useExternRef(getRootRef);\n\n  const dragger = draggable ? (\n    <CellDragger\n      elRef={rootElRef}\n      className={classNames(styles.dragger, !before && !selectable && styles.controlNoBefore)}\n      onDragStateChange={setDragging}\n      onDragFinish={onDragFinish}\n    >\n      {draggerLabel}\n    </CellDragger>\n  ) : null;\n\n  let checkbox;\n  if (selectable) {\n    const checkboxProps: CellCheckboxProps = {\n      name,\n      value,\n      defaultChecked,\n      checked,\n      disabled,\n      onChange,\n    };\n    checkbox = (\n      <CellCheckbox\n        className={classNames(styles.checkbox, !before && styles.controlNoBefore)}\n        {...checkboxProps}\n      />\n    );\n  }\n\n  const hasActive = !disabled && !dragging;\n\n  const cellClasses = classNames(\n    styles.host,\n    dragging && styles.dragging,\n    platform === 'ios' && styles.ios,\n    removable && styles.removable,\n  );\n\n  const simpleCellProps: SimpleCellProps = {\n    hasActive: hasActive,\n    hasHover: hasActive && !removable,\n    disabled,\n    ...restProps,\n    className: styles.content,\n    // чтобы свойство, если не определено, не присутствовало в\n    // restProps явно как {'Component': undefined} и ниже не переопределяло\n    // возможное значение commonProps.Component = 'a' при слиянии двух объектов, как\n    // {...commonProps, ...restProps}\n    ...(Component && { Component }),\n    before: (\n      <React.Fragment>\n        {draggable && platform !== 'ios' && dragger}\n        {selectable && checkbox}\n        {before}\n      </React.Fragment>\n    ),\n    after: (\n      <React.Fragment>\n        {draggable && platform === 'ios' && dragger}\n        {after}\n      </React.Fragment>\n    ),\n  };\n\n  if (removable) {\n    return (\n      <Removable\n        className={classNames(cellClasses, className)}\n        style={style}\n        getRootRef={rootElRef}\n        removePlaceholder={removePlaceholder}\n        onRemove={(e) => onRemove?.(e, rootElRef.current)}\n        toggleButtonTestId={toggleButtonTestId}\n        removeButtonTestId={removeButtonTestId}\n        disabled={disabled}\n      >\n        {platform === 'ios' ? (\n          ({ isRemoving }) => {\n            return (\n              <SimpleCell {...simpleCellProps} {...(isRemoving ? { onClick: undefined } : {})} />\n            );\n          }\n        ) : (\n          <SimpleCell {...simpleCellProps} />\n        )}\n      </Removable>\n    );\n  }\n\n  return (\n    <div className={classNames(cellClasses, className)} style={style} ref={rootElRef}>\n      <SimpleCell {...simpleCellProps} />\n    </div>\n  );\n};\n\nCell.Checkbox = CellCheckbox;\n"],"names":["React","classNames","useExternRef","usePlatform","Removable","SimpleCell","CellCheckbox","CellDragger","DEFAULT_DRAGGABLE_LABEL","Cell","mode","onRemove","removePlaceholder","onDragFinish","before","after","disabled","draggable","Component","ComponentProps","onChange","name","value","checked","defaultChecked","getRootRef","draggerLabel","className","style","toggleButtonTestId","removeButtonTestId","restProps","dragging","setDragging","useState","selectable","removable","platform","rootElRef","dragger","elRef","onDragStateChange","checkbox","checkboxProps","hasActive","cellClasses","simpleCellProps","hasHover","Fragment","e","current","isRemoving","onClick","undefined","div","ref","Checkbox"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,WAAW,QAAQ,6BAA0B;AAEtD,SAASC,SAAS,QAA6B,4BAAyB;AACxE,SAASC,UAAU,QAA8B,8BAA2B;AAC5E,SAASC,YAAY,QAAgC,iCAA8B;AACnF,SAASC,WAAW,QAAQ,+BAA4B;AACxD,SAASC,uBAAuB,QAAQ,iBAAc;AA2CtD;;CAEC,GACD,OAAO,MAAMC,OAET;QAAC,EACHC,IAAI,EACJC,QAAQ,EACRC,oBAAoB,SAAS,EAC7BC,YAAY,EACZC,MAAM,EACNC,KAAK,EACLC,QAAQ,EACRC,SAAS,EACTC,WAAWC,cAAc,EACzBC,QAAQ,EACRC,IAAI,EACJC,KAAK,EACLC,OAAO,EACPC,cAAc,EACdC,UAAU,EACVC,eAAelB,uBAAuB,EACtCmB,SAAS,EACTC,KAAK,EACLC,kBAAkB,EAClBC,kBAAkB,EAER,WADPC;QApBHrB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,CAACE,UAAUC,YAAY,GAAGjC,MAAMkC,QAAQ,CAAC;IAC/C,MAAMC,aAAazB,SAAS;IAC5B,MAAM0B,YAAY1B,SAAS;IAC3B,MAAMQ,YAAYiB,aAAa,UAAUhB;IAEzC,MAAMkB,WAAWlC;IAEjB,MAAMmC,YAAYpC,aAAauB;IAE/B,MAAMc,UAAUtB,0BACd,KAACV;QACCiC,OAAOF;QACPX,WAAW1B,gCAA2B,CAACa,UAAU,CAACqB;QAClDM,mBAAmBR;QACnBpB,cAAcA;kBAEba;SAED;IAEJ,IAAIgB;IACJ,IAAIP,YAAY;QACd,MAAMQ,gBAAmC;YACvCtB;YACAC;YACAE;YACAD;YACAP;YACAI;QACF;QACAsB,yBACE,KAACpC;YACCqB,WAAW1B,iCAA4B,CAACa;WACpC6B;IAGV;IAEA,MAAMC,YAAY,CAAC5B,YAAY,CAACgB;IAEhC,MAAMa,cAAc5C,6BAElB+B,kCACAK,aAAa,0BACbD;IAGF,MAAMU,kBAAmC;QACvCF,WAAWA;QACXG,UAAUH,aAAa,CAACR;QACxBpB;OACGe;QACHJ,SAAS;QAKLT,aAAa;QAAEA;IAAU;QAC7BJ,sBACE,MAACd,MAAMgD,QAAQ;;gBACZ/B,aAAaoB,aAAa,SAASE;gBACnCJ,cAAcO;gBACd5B;;;QAGLC,qBACE,MAACf,MAAMgD,QAAQ;;gBACZ/B,aAAaoB,aAAa,SAASE;gBACnCxB;;;;IAKP,IAAIqB,WAAW;QACb,qBACE,KAAChC;YACCuB,WAAW1B,WAAW4C,aAAalB;YACnCC,OAAOA;YACPH,YAAYa;YACZ1B,mBAAmBA;YACnBD,UAAU,CAACsC,IAAMtC,qBAAAA,+BAAAA,SAAWsC,GAAGX,UAAUY,OAAO;YAChDrB,oBAAoBA;YACpBC,oBAAoBA;YACpBd,UAAUA;sBAETqB,aAAa,QACZ,CAAC,EAAEc,UAAU,EAAE;gBACb,qBACE,KAAC9C,+BAAeyC,iBAAsBK,aAAa;oBAAEC,SAASC;gBAAU,IAAI,CAAC;YAEjF,kBAEA,KAAChD,+BAAeyC;;IAIxB;IAEA,qBACE,KAACQ;QAAI3B,WAAW1B,WAAW4C,aAAalB;QAAYC,OAAOA;QAAO2B,KAAKjB;kBACrE,cAAA,KAACjC,+BAAeyC;;AAGtB,EAAE;AAEFrC,KAAK+C,QAAQ,GAAGlD"}
+{"version":3,"sources":["../../../src/components/Cell/Cell.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { SwappedItemRange } from '../../hooks/useDraggableWithDomApi';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { HasRootRef } from '../../types';\nimport { Removable, type RemovableProps } from '../Removable/Removable';\nimport { SimpleCell, type SimpleCellProps } from '../SimpleCell/SimpleCell';\nimport { CellCheckbox, type CellCheckboxProps } from './CellCheckbox/CellCheckbox';\nimport { CellDragger } from './CellDragger/CellDragger';\nimport { DEFAULT_DRAGGABLE_LABEL } from './constants';\nimport styles from './Cell.module.css';\n\nexport interface CellProps\n  extends Omit<SimpleCellProps, 'getRootRef'>,\n    RemovableProps,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Режим отображения ячейки:\n   *\n   * - \"removable\": добавляется кнопка для удаления\n   * - \"selectable\": добавляется чекбокс для выбора.\n   */\n  mode?: 'removable' | 'selectable';\n  /**\n   * В режиме перетаскивания ячейка перестает реагировать на нажатие, то есть при нажатии переданный `onClick` вызываться не будет.\n   */\n  draggable?: boolean;\n  /**\n   * Имя для `input` в режиме `selectable`.\n   */\n  name?: string;\n  /**\n   * В режиме `selectable` реагирует на входящие значения пропса `cheсked`, как зависящий напрямую от входящего значения.\n   */\n  checked?: boolean;\n  /**\n   * В режиме `selectable` реагирует на входящие значения пропса `defaultChecked` как неконтролируемый компонент.\n   */\n  defaultChecked?: boolean;\n  /**\n   * Обработчик, срабатывающий при завершении перетаскивания.\n   * **Важно:** режим перетаскивания не меняет порядок ячеек в DOM. В обработчике есть объект с полями `from` и `to`.\n   * Эти числа нужны для того, чтобы разработчик понимал, с какого индекса на какой произошел переход. В песочнице\n   * есть рабочий пример с обработкой этих чисел и перерисовкой списка.\n   */\n  onDragFinish?: (swappedItemRange: SwappedItemRange) => void;\n  /**\n   * Текст для кнопки перетаскивания ячейки.\n   */\n  draggerLabel?: string;\n}\n\n/**\n * @see https://vkui.io/components/cell\n */\nexport const Cell: React.FC<CellProps> & {\n  Checkbox: typeof CellCheckbox;\n} = ({\n  mode,\n  onRemove,\n  removePlaceholder = 'Удалить',\n  onDragFinish,\n  before,\n  after,\n  disabled,\n  draggable,\n  Component: ComponentProps,\n  onChange,\n  name,\n  value,\n  checked,\n  defaultChecked,\n  getRootRef,\n  draggerLabel = DEFAULT_DRAGGABLE_LABEL,\n  className,\n  style,\n  toggleButtonTestId,\n  removeButtonTestId,\n  href: hrefProp,\n  ...restProps\n}: CellProps) => {\n  const [dragging, setDragging] = React.useState(false);\n  const selectable = mode === 'selectable';\n  const removable = mode === 'removable';\n  const Component = selectable ? 'label' : ComponentProps;\n  const href = selectable ? undefined : hrefProp;\n\n  const platform = usePlatform();\n\n  const rootElRef = useExternRef(getRootRef);\n\n  const dragger = draggable ? (\n    <CellDragger\n      elRef={rootElRef}\n      className={classNames(styles.dragger, !before && !selectable && styles.controlNoBefore)}\n      onDragStateChange={setDragging}\n      onDragFinish={onDragFinish}\n    >\n      {draggerLabel}\n    </CellDragger>\n  ) : null;\n\n  let checkbox;\n  if (selectable) {\n    const checkboxProps: CellCheckboxProps = {\n      name,\n      value,\n      defaultChecked,\n      checked,\n      disabled,\n      onChange,\n    };\n    checkbox = (\n      <CellCheckbox\n        className={classNames(styles.checkbox, !before && styles.controlNoBefore)}\n        {...checkboxProps}\n      />\n    );\n  }\n\n  const hasActive = !disabled && !dragging;\n\n  const cellClasses = classNames(\n    styles.host,\n    dragging && styles.dragging,\n    platform === 'ios' && styles.ios,\n    removable && styles.removable,\n  );\n\n  const simpleCellProps: SimpleCellProps = {\n    hasActive: hasActive,\n    hasHover: hasActive && !removable,\n    disabled,\n    href,\n    ...restProps,\n    className: styles.content,\n    // чтобы свойство, если не определено, не присутствовало в\n    // restProps явно как {'Component': undefined} и ниже не переопределяло\n    // возможное значение commonProps.Component = 'a' при слиянии двух объектов, как\n    // {...commonProps, ...restProps}\n    ...(Component && { Component }),\n    before: (\n      <React.Fragment>\n        {draggable && platform !== 'ios' && dragger}\n        {selectable && checkbox}\n        {before}\n      </React.Fragment>\n    ),\n    after: (\n      <React.Fragment>\n        {draggable && platform === 'ios' && dragger}\n        {after}\n      </React.Fragment>\n    ),\n  };\n\n  if (removable) {\n    return (\n      <Removable\n        className={classNames(cellClasses, className)}\n        style={style}\n        getRootRef={rootElRef}\n        removePlaceholder={removePlaceholder}\n        onRemove={(e) => onRemove?.(e, rootElRef.current)}\n        toggleButtonTestId={toggleButtonTestId}\n        removeButtonTestId={removeButtonTestId}\n        disabled={disabled}\n      >\n        {platform === 'ios' ? (\n          ({ isRemoving }) => {\n            return (\n              <SimpleCell {...simpleCellProps} {...(isRemoving ? { onClick: undefined } : {})} />\n            );\n          }\n        ) : (\n          <SimpleCell {...simpleCellProps} />\n        )}\n      </Removable>\n    );\n  }\n\n  return (\n    <div className={classNames(cellClasses, className)} style={style} ref={rootElRef}>\n      <SimpleCell {...simpleCellProps} />\n    </div>\n  );\n};\n\nCell.Checkbox = CellCheckbox;\n"],"names":["React","classNames","useExternRef","usePlatform","Removable","SimpleCell","CellCheckbox","CellDragger","DEFAULT_DRAGGABLE_LABEL","Cell","mode","onRemove","removePlaceholder","onDragFinish","before","after","disabled","draggable","Component","ComponentProps","onChange","name","value","checked","defaultChecked","getRootRef","draggerLabel","className","style","toggleButtonTestId","removeButtonTestId","href","hrefProp","restProps","dragging","setDragging","useState","selectable","removable","undefined","platform","rootElRef","dragger","elRef","onDragStateChange","checkbox","checkboxProps","hasActive","cellClasses","simpleCellProps","hasHover","Fragment","e","current","isRemoving","onClick","div","ref","Checkbox"],"mappings":"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"}

package/dist/components/CellButtonGroup/CellButtonGroup.d.ts

@@ -62,6 +62,8 @@ export declare const CellButtonGroup: {
         inert?: boolean | undefined | undefined;
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
         is?: string | undefined | undefined;
+        exportparts?: string | undefined | undefined;
+        part?: string | undefined | undefined;
         "aria-activedescendant"?: string | undefined | undefined;
         "aria-atomic"?: (boolean | "false" | "true") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
@@ -137,7 +139,7 @@ export declare const CellButtonGroup: {
         onBlurCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
         onChange?: React.FormEventHandler<HTMLDivElement> | undefined;
         onChangeCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-        onBeforeInput?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onBeforeInput?: React.InputEventHandler<HTMLDivElement> | undefined;
         onBeforeInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
         onInput?: React.FormEventHandler<HTMLDivElement> | undefined;
         onInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
@@ -187,8 +189,6 @@ export declare const CellButtonGroup: {
         onProgressCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
         onRateChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
         onRateChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
-        onResize?: React.ReactEventHandler<HTMLDivElement> | undefined;
-        onResizeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
         onSeeked?: React.ReactEventHandler<HTMLDivElement> | undefined;
         onSeekedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
         onSeeking?: React.ReactEventHandler<HTMLDivElement> | undefined;
@@ -269,6 +269,8 @@ export declare const CellButtonGroup: {
         onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
         onScroll?: React.UIEventHandler<HTMLDivElement> | undefined;
         onScrollCapture?: React.UIEventHandler<HTMLDivElement> | undefined;
+        onScrollEnd?: React.UIEventHandler<HTMLDivElement> | undefined;
+        onScrollEndCapture?: React.UIEventHandler<HTMLDivElement> | undefined;
         onWheel?: React.WheelEventHandler<HTMLDivElement> | undefined;
         onWheelCapture?: React.WheelEventHandler<HTMLDivElement> | undefined;
         onAnimationStart?: React.AnimationEventHandler<HTMLDivElement> | undefined;

package/dist/components/CellButtonGroup/CellButtonGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CellButtonGroup.d.ts","sourceRoot":"","sources":["../../../src/components/CellButtonGroup/CellButtonGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAI7D,MAAM,MAAM,oBAAoB,GAAG,yBAAyB,CAAC,cAAc,CAAC,CAAC;AAE7E;;;;GAIG;AACH,eAAO,MAAM,eAAe;YAAW,oBAAoB,GAAG,KAAK,CAAC,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAE5E,CAAC"}
+{"version":3,"file":"CellButtonGroup.d.ts","sourceRoot":"","sources":["../../../src/components/CellButtonGroup/CellButtonGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAI7D,MAAM,MAAM,oBAAoB,GAAG,yBAAyB,CAAC,cAAc,CAAC,CAAC;AAE7E;;;;GAIG;AACH,eAAO,MAAM,eAAe;YAAW,oBAAoB,GAAG,KAAK,CAAC,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAE5E,CAAC"}

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

@@ -11,6 +11,10 @@ export interface CheckboxProps extends Omit<CheckboxInputProps, 'getRootRef'>, H
      * Контент, идущий за основным текстом.
      */
     titleAfter?: React.ReactNode;
+    /**
+     * Отключает отступы у чекбокса. При использовании этого свойства, значение по умолчанию для свойств `hoverMode` и `activeMode` становится `"opacity"`.
+     */
+    noPadding?: boolean;
 }
 /**
  * @see https://vkui.io/components/checkbox

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG9C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AAGvF,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,kBAAkB,EAAE,YAAY,CAAC,EAC5C,UAAU,CAAC,gBAAgB,CAAC,EAC5B,IAAI,CACF,iBAAiB,EACjB,WAAW,GAAG,YAAY,GAAG,UAAU,GAAG,WAAW,GAAG,kBAAkB,CAC3E;IACH;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAoCD;;GAEG;AACH,eAAO,MAAM,QAAQ;YAAW,aAAa,GAAG,KAAK,CAAC,SAAS;;CAO9D,CAAC"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG9C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AAGvF,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,kBAAkB,EAAE,YAAY,CAAC,EAC5C,UAAU,CAAC,gBAAgB,CAAC,EAC5B,IAAI,CACF,iBAAiB,EACjB,WAAW,GAAG,YAAY,GAAG,UAAU,GAAG,WAAW,GAAG,kBAAkB,CAC3E;IACH;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAsCD;;GAEG;AACH,eAAO,MAAM,QAAQ;YAAW,aAAa,GAAG,KAAK,CAAC,SAAS;;CAO9D,CAAC"}

package/dist/components/Checkbox/Checkbox.js

@@ -8,7 +8,7 @@ import { SelectionControlLabel } from "../SelectionControl/SelectionControlLabel
 import { CheckboxInput } from "./CheckboxInput/CheckboxInput.js";
 import { CheckboxSimple } from "./CheckboxSimple/CheckboxSimple.js";
 const CheckboxComponent = (_param)=>{
-    var { children, className, style, getRootRef, description, hoverMode, activeMode, hasHover, hasActive, focusVisibleMode, titleAfter } = _param, restProps = _object_without_properties(_param, [
+    var { children, className, style, getRootRef, description, hoverMode, activeMode, hasHover, hasActive, focusVisibleMode, titleAfter, noPadding } = _param, restProps = _object_without_properties(_param, [
         "children",
         "className",
         "style",
@@ -19,7 +19,8 @@ const CheckboxComponent = (_param)=>{
         "hasHover",
         "hasActive",
         "focusVisibleMode",
-        "titleAfter"
+        "titleAfter",
+        "noPadding"
     ]);
     return /*#__PURE__*/ _jsxs(SelectionControl, {
         className: className,
@@ -31,6 +32,7 @@ const CheckboxComponent = (_param)=>{
         hasHover: hasHover,
         hasActive: hasActive,
         focusVisibleMode: focusVisibleMode,
+        noPadding: noPadding,
         children: [
             /*#__PURE__*/ _jsx(CheckboxInput, _object_spread({}, restProps)),
             /*#__PURE__*/ _jsx(SelectionControlLabel, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { hasReactNode } from '@vkontakte/vkjs';\nimport type { HasRootRef } from '../../types';\nimport { SelectionControl } from '../SelectionControl/SelectionControl';\nimport { SelectionControlLabel } from '../SelectionControl/SelectionControlLabel/SelectionControlLabel';\nimport type { TappableOmitProps } from '../Tappable/Tappable';\nimport { CheckboxInput, type CheckboxInputProps } from './CheckboxInput/CheckboxInput';\nimport { CheckboxSimple } from './CheckboxSimple/CheckboxSimple';\n\nexport interface CheckboxProps\n  extends Omit<CheckboxInputProps, 'getRootRef'>,\n    HasRootRef<HTMLLabelElement>,\n    Pick<\n      TappableOmitProps,\n      'hoverMode' | 'activeMode' | 'hasHover' | 'hasActive' | 'focusVisibleMode'\n    > {\n  /**\n   * Подпись под основным текстом.\n   */\n  description?: React.ReactNode;\n  /**\n   * Контент, идущий за основным текстом.\n   */\n  titleAfter?: React.ReactNode;\n}\n\nconst CheckboxComponent = ({\n  children,\n  className,\n  style,\n  getRootRef,\n  description,\n  hoverMode,\n  activeMode,\n  hasHover,\n  hasActive,\n  focusVisibleMode,\n  titleAfter,\n  ...restProps\n}: CheckboxProps): React.ReactNode => {\n  return (\n    <SelectionControl\n      className={className}\n      style={style}\n      disabled={restProps.disabled}\n      getRootRef={getRootRef}\n      hoverMode={hoverMode}\n      activeMode={activeMode}\n      hasHover={hasHover}\n      hasActive={hasActive}\n      focusVisibleMode={focusVisibleMode}\n    >\n      <CheckboxInput {...restProps} />\n      <SelectionControlLabel titleAfter={titleAfter} description={description}>\n        {children}\n      </SelectionControlLabel>\n    </SelectionControl>\n  );\n};\n\n/**\n * @see https://vkui.io/components/checkbox\n */\nexport const Checkbox = (props: CheckboxProps): React.ReactNode => {\n  const simple = !(hasReactNode(props.children) || hasReactNode(props.description));\n  if (simple) {\n    return <CheckboxSimple {...props} />;\n  }\n\n  return <CheckboxComponent {...props} />;\n};\n\nCheckbox.Input = CheckboxInput;\n"],"names":["React","hasReactNode","SelectionControl","SelectionControlLabel","CheckboxInput","CheckboxSimple","CheckboxComponent","children","className","style","getRootRef","description","hoverMode","activeMode","hasHover","hasActive","focusVisibleMode","titleAfter","restProps","disabled","Checkbox","props","simple","Input"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,kBAAkB;AAE/C,SAASC,gBAAgB,QAAQ,0CAAuC;AACxE,SAASC,qBAAqB,QAAQ,qEAAkE;AAExG,SAASC,aAAa,QAAiC,mCAAgC;AACvF,SAASC,cAAc,QAAQ,qCAAkC;AAmBjE,MAAMC,oBAAoB;QAAC,EACzBC,QAAQ,EACRC,SAAS,EACTC,KAAK,EACLC,UAAU,EACVC,WAAW,EACXC,SAAS,EACTC,UAAU,EACVC,QAAQ,EACRC,SAAS,EACTC,gBAAgB,EAChBC,UAAU,EAEI,WADXC;QAXHX;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,qBACE,MAACf;QACCM,WAAWA;QACXC,OAAOA;QACPU,UAAUD,UAAUC,QAAQ;QAC5BT,YAAYA;QACZE,WAAWA;QACXC,YAAYA;QACZC,UAAUA;QACVC,WAAWA;QACXC,kBAAkBA;;0BAElB,KAACZ,kCAAkBc;0BACnB,KAACf;gBAAsBc,YAAYA;gBAAYN,aAAaA;0BACzDJ;;;;AAIT;AAEA;;CAEC,GACD,OAAO,MAAMa,WAAW,CAACC;IACvB,MAAMC,SAAS,CAAErB,CAAAA,aAAaoB,MAAMd,QAAQ,KAAKN,aAAaoB,MAAMV,WAAW,CAAA;IAC/E,IAAIW,QAAQ;QACV,qBAAO,KAACjB,mCAAmBgB;IAC7B;IAEA,qBAAO,KAACf,sCAAsBe;AAChC,EAAE;AAEFD,SAASG,KAAK,GAAGnB"}
+{"version":3,"sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { hasReactNode } from '@vkontakte/vkjs';\nimport type { HasRootRef } from '../../types';\nimport { SelectionControl } from '../SelectionControl/SelectionControl';\nimport { SelectionControlLabel } from '../SelectionControl/SelectionControlLabel/SelectionControlLabel';\nimport type { TappableOmitProps } from '../Tappable/Tappable';\nimport { CheckboxInput, type CheckboxInputProps } from './CheckboxInput/CheckboxInput';\nimport { CheckboxSimple } from './CheckboxSimple/CheckboxSimple';\n\nexport interface CheckboxProps\n  extends Omit<CheckboxInputProps, 'getRootRef'>,\n    HasRootRef<HTMLLabelElement>,\n    Pick<\n      TappableOmitProps,\n      'hoverMode' | 'activeMode' | 'hasHover' | 'hasActive' | 'focusVisibleMode'\n    > {\n  /**\n   * Подпись под основным текстом.\n   */\n  description?: React.ReactNode;\n  /**\n   * Контент, идущий за основным текстом.\n   */\n  titleAfter?: React.ReactNode;\n  /**\n   * Отключает отступы у чекбокса. При использовании этого свойства, значение по умолчанию для свойств `hoverMode` и `activeMode` становится `\"opacity\"`.\n   */\n  noPadding?: boolean;\n}\n\nconst CheckboxComponent = ({\n  children,\n  className,\n  style,\n  getRootRef,\n  description,\n  hoverMode,\n  activeMode,\n  hasHover,\n  hasActive,\n  focusVisibleMode,\n  titleAfter,\n  noPadding,\n  ...restProps\n}: CheckboxProps): React.ReactNode => {\n  return (\n    <SelectionControl\n      className={className}\n      style={style}\n      disabled={restProps.disabled}\n      getRootRef={getRootRef}\n      hoverMode={hoverMode}\n      activeMode={activeMode}\n      hasHover={hasHover}\n      hasActive={hasActive}\n      focusVisibleMode={focusVisibleMode}\n      noPadding={noPadding}\n    >\n      <CheckboxInput {...restProps} />\n      <SelectionControlLabel titleAfter={titleAfter} description={description}>\n        {children}\n      </SelectionControlLabel>\n    </SelectionControl>\n  );\n};\n\n/**\n * @see https://vkui.io/components/checkbox\n */\nexport const Checkbox = (props: CheckboxProps): React.ReactNode => {\n  const simple = !(hasReactNode(props.children) || hasReactNode(props.description));\n  if (simple) {\n    return <CheckboxSimple {...props} />;\n  }\n\n  return <CheckboxComponent {...props} />;\n};\n\nCheckbox.Input = CheckboxInput;\n"],"names":["React","hasReactNode","SelectionControl","SelectionControlLabel","CheckboxInput","CheckboxSimple","CheckboxComponent","children","className","style","getRootRef","description","hoverMode","activeMode","hasHover","hasActive","focusVisibleMode","titleAfter","noPadding","restProps","disabled","Checkbox","props","simple","Input"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,kBAAkB;AAE/C,SAASC,gBAAgB,QAAQ,0CAAuC;AACxE,SAASC,qBAAqB,QAAQ,qEAAkE;AAExG,SAASC,aAAa,QAAiC,mCAAgC;AACvF,SAASC,cAAc,QAAQ,qCAAkC;AAuBjE,MAAMC,oBAAoB;QAAC,EACzBC,QAAQ,EACRC,SAAS,EACTC,KAAK,EACLC,UAAU,EACVC,WAAW,EACXC,SAAS,EACTC,UAAU,EACVC,QAAQ,EACRC,SAAS,EACTC,gBAAgB,EAChBC,UAAU,EACVC,SAAS,EAEK,WADXC;QAZHZ;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,qBACE,MAAChB;QACCM,WAAWA;QACXC,OAAOA;QACPW,UAAUD,UAAUC,QAAQ;QAC5BV,YAAYA;QACZE,WAAWA;QACXC,YAAYA;QACZC,UAAUA;QACVC,WAAWA;QACXC,kBAAkBA;QAClBE,WAAWA;;0BAEX,KAACd,kCAAkBe;0BACnB,KAAChB;gBAAsBc,YAAYA;gBAAYN,aAAaA;0BACzDJ;;;;AAIT;AAEA;;CAEC,GACD,OAAO,MAAMc,WAAW,CAACC;IACvB,MAAMC,SAAS,CAAEtB,CAAAA,aAAaqB,MAAMf,QAAQ,KAAKN,aAAaqB,MAAMX,WAAW,CAAA;IAC/E,IAAIY,QAAQ;QACV,qBAAO,KAAClB,mCAAmBiB;IAC7B;IAEA,qBAAO,KAAChB,sCAAsBgB;AAChC,EAAE;AAEFD,SAASG,KAAK,GAAGpB"}

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

@@ -1,3 +1,3 @@
 import type { CheckboxProps } from '../Checkbox';
-export declare function CheckboxSimple({ children, className, style, getRootRef, description, hoverMode, activeMode, hasHover, hasActive, focusVisibleMode, titleAfter, ...restProps }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+export declare function CheckboxSimple({ children, className, style, getRootRef, description, hoverMode: hoverModeProp, activeMode: activeModeProp, hasHover, hasActive, focusVisibleMode, titleAfter, noPadding, ...restProps }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=CheckboxSimple.d.ts.map

package/dist/components/Checkbox/CheckboxSimple/CheckboxSimple.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxSimple.d.ts","sourceRoot":"","sources":["../../../../src/components/Checkbox/CheckboxSimple/CheckboxSimple.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AASjD,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,SAAS,EACT,KAAK,EACL,UAAU,EACV,WAAW,EACX,SAAS,EACT,UAAU,EACV,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,UAAU,EACV,GAAG,SAAS,EACb,EAAE,aAAa,2CAmBf"}
+{"version":3,"file":"CheckboxSimple.d.ts","sourceRoot":"","sources":["../../../../src/components/Checkbox/CheckboxSimple/CheckboxSimple.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AASjD,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,SAAS,EACT,KAAK,EACL,UAAU,EACV,WAAW,EACX,SAAS,EAAE,aAAa,EACxB,UAAU,EAAE,cAAc,EAC1B,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,UAAU,EACV,SAAS,EACT,GAAG,SAAS,EACb,EAAE,aAAa,2CA2Bf"}

package/dist/components/Checkbox/CheckboxSimple/CheckboxSimple.js

@@ -11,7 +11,7 @@ const sizeYClassNames = {
     compact: "vkuiCheckboxSimple__sizeYCompact"
 };
 export function CheckboxSimple(_param) {
-    var { children, className, style, getRootRef, description, hoverMode, activeMode, hasHover, hasActive, focusVisibleMode, titleAfter } = _param, restProps = _object_without_properties(_param, [
+    var { children, className, style, getRootRef, description, hoverMode: hoverModeProp, activeMode: activeModeProp, hasHover, hasActive, focusVisibleMode, titleAfter, noPadding } = _param, restProps = _object_without_properties(_param, [
         "children",
         "className",
         "style",
@@ -22,11 +22,14 @@ export function CheckboxSimple(_param) {
         "hasHover",
         "hasActive",
         "focusVisibleMode",
-        "titleAfter"
+        "titleAfter",
+        "noPadding"
     ]);
     const { sizeY = 'none' } = useAdaptivity();
+    const hoverMode = hoverModeProp || (noPadding ? 'opacity' : 'background');
+    const activeMode = activeModeProp || (noPadding ? 'opacity' : 'background');
     return /*#__PURE__*/ _jsx(Tappable, {
-        className: classNames(className, "vkuiCheckboxSimple__host", sizeY !== 'regular' && sizeYClassNames[sizeY]),
+        className: classNames(className, "vkuiCheckboxSimple__host", !noPadding && "vkuiCheckboxSimple__withPadding", sizeY !== 'regular' && sizeYClassNames[sizeY]),
         style: style,
         disabled: restProps.disabled,
         getRootRef: getRootRef,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Checkbox/CheckboxSimple/CheckboxSimple.tsx"],"sourcesContent":["'use client';\n\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../../hooks/useAdaptivity';\nimport { Tappable } from '../../Tappable/Tappable';\nimport type { CheckboxProps } from '../Checkbox';\nimport { CheckboxInput } from '../CheckboxInput/CheckboxInput';\nimport styles from './CheckboxSimple.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nexport function CheckboxSimple({\n  children,\n  className,\n  style,\n  getRootRef,\n  description,\n  hoverMode,\n  activeMode,\n  hasHover,\n  hasActive,\n  focusVisibleMode,\n  titleAfter,\n  ...restProps\n}: CheckboxProps) {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      className={classNames(className, styles.host, sizeY !== 'regular' && sizeYClassNames[sizeY])}\n      style={style}\n      disabled={restProps.disabled}\n      getRootRef={getRootRef}\n      hoverMode={hoverMode}\n      activeMode={activeMode}\n      hasHover={hasHover}\n      hasActive={hasActive}\n      focusVisibleMode={focusVisibleMode}\n      Component=\"label\"\n    >\n      <CheckboxInput {...restProps} />\n    </Tappable>\n  );\n}\n"],"names":["classNames","useAdaptivity","Tappable","CheckboxInput","sizeYClassNames","none","compact","CheckboxSimple","children","className","style","getRootRef","description","hoverMode","activeMode","hasHover","hasActive","focusVisibleMode","titleAfter","restProps","sizeY","disabled","Component"],"mappings":"AAAA;;;;AAEA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,kCAA+B;AAC7D,SAASC,QAAQ,QAAQ,6BAA0B;AAEnD,SAASC,aAAa,QAAQ,oCAAiC;AAG/D,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAEA,OAAO,SAASC,eAAe;QAAA,EAC7BC,QAAQ,EACRC,SAAS,EACTC,KAAK,EACLC,UAAU,EACVC,WAAW,EACXC,SAAS,EACTC,UAAU,EACVC,QAAQ,EACRC,SAAS,EACTC,gBAAgB,EAChBC,UAAU,EAEI,GAbe,QAY1BC,uCAZ0B;QAC7BX;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAGnB;IAE3B,qBACE,KAACC;QACCO,WAAWT,WAAWS,uCAAwBW,UAAU,aAAahB,eAAe,CAACgB,MAAM;QAC3FV,OAAOA;QACPW,UAAUF,UAAUE,QAAQ;QAC5BV,YAAYA;QACZE,WAAWA;QACXC,YAAYA;QACZC,UAAUA;QACVC,WAAWA;QACXC,kBAAkBA;QAClBK,WAAU;kBAEV,cAAA,KAACnB,kCAAkBgB;;AAGzB"}
+{"version":3,"sources":["../../../../src/components/Checkbox/CheckboxSimple/CheckboxSimple.tsx"],"sourcesContent":["'use client';\n\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../../hooks/useAdaptivity';\nimport { Tappable } from '../../Tappable/Tappable';\nimport type { CheckboxProps } from '../Checkbox';\nimport { CheckboxInput } from '../CheckboxInput/CheckboxInput';\nimport styles from './CheckboxSimple.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nexport function CheckboxSimple({\n  children,\n  className,\n  style,\n  getRootRef,\n  description,\n  hoverMode: hoverModeProp,\n  activeMode: activeModeProp,\n  hasHover,\n  hasActive,\n  focusVisibleMode,\n  titleAfter,\n  noPadding,\n  ...restProps\n}: CheckboxProps) {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const hoverMode = hoverModeProp || (noPadding ? 'opacity' : 'background');\n  const activeMode = activeModeProp || (noPadding ? 'opacity' : 'background');\n\n  return (\n    <Tappable\n      className={classNames(\n        className,\n        styles.host,\n        !noPadding && styles.withPadding,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n      )}\n      style={style}\n      disabled={restProps.disabled}\n      getRootRef={getRootRef}\n      hoverMode={hoverMode}\n      activeMode={activeMode}\n      hasHover={hasHover}\n      hasActive={hasActive}\n      focusVisibleMode={focusVisibleMode}\n      Component=\"label\"\n    >\n      <CheckboxInput {...restProps} />\n    </Tappable>\n  );\n}\n"],"names":["classNames","useAdaptivity","Tappable","CheckboxInput","sizeYClassNames","none","compact","CheckboxSimple","children","className","style","getRootRef","description","hoverMode","hoverModeProp","activeMode","activeModeProp","hasHover","hasActive","focusVisibleMode","titleAfter","noPadding","restProps","sizeY","disabled","Component"],"mappings":"AAAA;;;;AAEA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,kCAA+B;AAC7D,SAASC,QAAQ,QAAQ,6BAA0B;AAEnD,SAASC,aAAa,QAAQ,oCAAiC;AAG/D,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAEA,OAAO,SAASC,eAAe;QAAA,EAC7BC,QAAQ,EACRC,SAAS,EACTC,KAAK,EACLC,UAAU,EACVC,WAAW,EACXC,WAAWC,aAAa,EACxBC,YAAYC,cAAc,EAC1BC,QAAQ,EACRC,SAAS,EACTC,gBAAgB,EAChBC,UAAU,EACVC,SAAS,EAEK,GAde,QAa1BC,uCAb0B;QAC7Bd;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAE;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAGtB;IAE3B,MAAMY,YAAYC,iBAAkBO,CAAAA,YAAY,YAAY,YAAW;IACvE,MAAMN,aAAaC,kBAAmBK,CAAAA,YAAY,YAAY,YAAW;IAEzE,qBACE,KAACnB;QACCO,WAAWT,WACTS,uCAEA,CAACY,gDACDE,UAAU,aAAanB,eAAe,CAACmB,MAAM;QAE/Cb,OAAOA;QACPc,UAAUF,UAAUE,QAAQ;QAC5Bb,YAAYA;QACZE,WAAWA;QACXE,YAAYA;QACZE,UAAUA;QACVC,WAAWA;QACXC,kBAAkBA;QAClBM,WAAU;kBAEV,cAAA,KAACtB,kCAAkBmB;;AAGzB"}

package/dist/components/ChipsInputBase/Chip/Chip.d.ts

@@ -1,7 +1,46 @@
 import * as React from 'react';
-import type { ChipProps } from '../types';
+import { type HasComponent, type HasDataAttribute, type HTMLAttributesWithRootRef } from '../../../types';
+import { type ChipOptionValue } from '../types';
+export interface ChipProps extends HasComponent, HasDataAttribute, HTMLAttributesWithRootRef<HTMLElement> {
+    /**
+     * Режим отображения компонента.
+     */
+    mode?: 'primary' | 'secondary';
+    /**
+     * Значение чипа.
+     */
+    value?: ChipOptionValue;
+    /**
+     * Можно ли удалить чип.
+     */
+    removable?: boolean;
+    /**
+     * Блокировка взаимодействия с чипом.
+     */
+    disabled?: boolean;
+    /**
+     * Режим только для чтения.
+     */
+    readOnly?: boolean;
+    /**
+     * Текст для кнопки удаления.
+     */
+    removeLabel?: string;
+    /**
+     * Контент перед основным содержимым.
+     */
+    before?: React.ReactNode;
+    /**
+     * Контент после основного содержимого.
+     */
+    after?: React.ReactNode;
+    /**
+     * Обработчик удаления чипа.
+     */
+    onRemove?: (event: React.MouseEvent, value: ChipOptionValue) => void;
+}
 /**
  * @see https://vkui.io/components/chip
  */
-export declare const Chip: ({ Component, value, removable, onRemove, removeLabel, before, after, disabled, readOnly, children, className, onFocus: onFocusProp, onBlur: onBlurProp, ...restProps }: ChipProps) => React.ReactNode;
+export declare const Chip: ({ mode, Component, value, removable, onRemove, removeLabel, before, after, disabled, readOnly, children, className, onFocus: onFocusProp, onBlur: onBlurProp, ...restProps }: ChipProps) => React.ReactNode;
 //# sourceMappingURL=Chip.d.ts.map

package/dist/components/ChipsInputBase/Chip/Chip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../../src/components/ChipsInputBase/Chip/Chip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAQ1C;;GAEG;AACH,eAAO,MAAM,IAAI,GAAI,wKAelB,SAAS,KAAG,KAAK,CAAC,SAgEpB,CAAC"}
+{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../../src/components/ChipsInputBase/Chip/Chip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EACL,KAAK,YAAY,EACjB,KAAK,gBAAgB,EACrB,KAAK,yBAAyB,EAC/B,MAAM,gBAAgB,CAAC;AAIxB,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,UAAU,CAAC;AAahD,MAAM,WAAW,SACf,SAAQ,YAAY,EAClB,gBAAgB,EAChB,yBAAyB,CAAC,WAAW,CAAC;IACxC;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAC/B;;OAEG;IACH,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,EAAE,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;CACtE;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,GAAI,8KAgBlB,SAAS,KAAG,KAAK,CAAC,SAiEpB,CAAC"}

package/dist/components/ChipsInputBase/Chip/Chip.js

@@ -16,10 +16,15 @@ const sizeYClassNames = {
     none: "vkuiChip__sizeYNone",
     compact: "vkuiChip__sizeYCompact"
 };
+const modeClassNames = {
+    primary: "vkuiChip__modePrimary",
+    secondary: "vkuiChip__modeSecondary"
+};
 /**
  * @see https://vkui.io/components/chip
  */ export const Chip = (_param)=>{
-    var { Component = 'span', value = '', removable = true, onRemove, removeLabel = 'Удалить', before, after, disabled, readOnly, children, className, onFocus: onFocusProp, onBlur: onBlurProp } = _param, restProps = _object_without_properties(_param, [
+    var { mode = 'primary', Component = 'span', value = '', removable = true, onRemove, removeLabel = 'Удалить', before, after, disabled, readOnly, children, className, onFocus: onFocusProp, onBlur: onBlurProp } = _param, restProps = _object_without_properties(_param, [
+        "mode",
         "Component",
         "value",
         "removable",
@@ -59,7 +64,7 @@ const sizeYClassNames = {
     ]);
     return /*#__PURE__*/ _jsxs(RootComponent, _object_spread_props(_object_spread({}, restProps), {
         Component: Component,
-        className: classNames("vkuiChip__host", sizeY !== 'regular' && sizeYClassNames[sizeY], focusVisibleClassName, className),
+        className: classNames("vkuiChip__host", sizeY !== 'regular' && sizeYClassNames[sizeY], modeClassNames[mode], focusVisibleClassName, className),
         "aria-readonly": readOnly,
         "aria-disabled": disabled,
         onFocus: disabled ? undefined : handleFocus,

package/dist/components/ChipsInputBase/Chip/Chip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ChipsInputBase/Chip/Chip.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon16Cancel } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../../hooks/useAdaptivity';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../../hooks/useFocusVisibleClassName';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport { Footnote } from '../../Typography/Footnote/Footnote';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport type { ChipProps } from '../types';\nimport styles from './Chip.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n} as const;\n\n/**\n * @see https://vkui.io/components/chip\n */\nexport const Chip = ({\n  Component = 'span',\n  value = '',\n  removable = true,\n  onRemove,\n  removeLabel = 'Удалить',\n  before,\n  after,\n  disabled,\n  readOnly,\n  children,\n  className,\n  onFocus: onFocusProp,\n  onBlur: onBlurProp,\n  ...restProps\n}: ChipProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const { focusVisible, onFocus, onBlur } = useFocusVisible();\n  const focusVisibleClassName = useFocusVisibleClassName({ focusVisible });\n\n  const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n    if (onFocusProp) {\n      onFocusProp(event);\n    }\n    onFocus(event);\n  };\n\n  const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    if (onBlurProp) {\n      onBlurProp(event);\n    }\n    onBlur(event);\n  };\n\n  const onRemoveWrapper = React.useCallback(\n    (event: React.MouseEvent) => {\n      onRemove?.(event, value);\n    },\n    [onRemove, value],\n  );\n\n  return (\n    <RootComponent\n      {...restProps}\n      Component={Component}\n      className={classNames(\n        styles.host,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        focusVisibleClassName,\n        className,\n      )}\n      aria-readonly={readOnly}\n      aria-disabled={disabled}\n      onFocus={disabled ? undefined : handleFocus}\n      onBlur={disabled ? undefined : handleBlur}\n    >\n      <div className={styles.in}>\n        {hasReactNode(before) && <div className={styles.before}>{before}</div>}\n        <Footnote className={styles.content}>{children}</Footnote>\n        {hasReactNode(after) && <div className={styles.after}>{after}</div>}\n      </div>\n      {!readOnly && removable && (\n        <div className={styles.removable}>\n          <button\n            type=\"button\"\n            tabIndex={-1} // [reason]: чтобы можно было выставлять состояние фокуса только программно через `*.focus()`\n            disabled={disabled}\n            className={styles.remove}\n            onClick={disabled ? undefined : onRemoveWrapper}\n          >\n            <VisuallyHidden>\n              &nbsp; {removeLabel} {children}\n            </VisuallyHidden>\n            <Icon16Cancel />\n          </button>\n        </div>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["React","Icon16Cancel","classNames","hasReactNode","useAdaptivity","useFocusVisible","useFocusVisibleClassName","RootComponent","Footnote","VisuallyHidden","sizeYClassNames","none","compact","Chip","Component","value","removable","onRemove","removeLabel","before","after","disabled","readOnly","children","className","onFocus","onFocusProp","onBlur","onBlurProp","restProps","sizeY","focusVisible","focusVisibleClassName","handleFocus","event","handleBlur","onRemoveWrapper","useCallback","aria-readonly","aria-disabled","undefined","div","button","type","tabIndex","onClick"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,mBAAmB;AAChD,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,kCAA+B;AAC7D,SAASC,eAAe,QAAQ,oCAAiC;AACjE,SAASC,wBAAwB,QAAQ,6CAA0C;AACnF,SAASC,aAAa,QAAQ,uCAAoC;AAClE,SAASC,QAAQ,QAAQ,wCAAqC;AAC9D,SAASC,cAAc,QAAQ,yCAAsC;AAIrE,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAEA;;CAEC,GACD,OAAO,MAAMC,OAAO;QAAC,EACnBC,YAAY,MAAM,EAClBC,QAAQ,EAAE,EACVC,YAAY,IAAI,EAChBC,QAAQ,EACRC,cAAc,SAAS,EACvBC,MAAM,EACNC,KAAK,EACLC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,SAASC,WAAW,EACpBC,QAAQC,UAAU,EAER,WADPC;QAbHf;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;;IAGA,MAAM,EAAEG,QAAQ,MAAM,EAAE,GAAG1B;IAC3B,MAAM,EAAE2B,YAAY,EAAEN,OAAO,EAAEE,MAAM,EAAE,GAAGtB;IAC1C,MAAM2B,wBAAwB1B,yBAAyB;QAAEyB;IAAa;IAEtE,MAAME,cAAc,CAACC;QACnB,IAAIR,aAAa;YACfA,YAAYQ;QACd;QACAT,QAAQS;IACV;IAEA,MAAMC,aAAa,CAACD;QAClB,IAAIN,YAAY;YACdA,WAAWM;QACb;QACAP,OAAOO;IACT;IAEA,MAAME,kBAAkBpC,MAAMqC,WAAW,CACvC,CAACH;QACCjB,qBAAAA,+BAAAA,SAAWiB,OAAOnB;IACpB,GACA;QAACE;QAAUF;KAAM;IAGnB,qBACE,MAACR,uDACKsB;QACJf,WAAWA;QACXU,WAAWtB,6BAET4B,UAAU,aAAapB,eAAe,CAACoB,MAAM,EAC7CE,uBACAR;QAEFc,iBAAehB;QACfiB,iBAAelB;QACfI,SAASJ,WAAWmB,YAAYP;QAChCN,QAAQN,WAAWmB,YAAYL;;0BAE/B,MAACM;gBAAIjB,SAAS;;oBACXrB,aAAagB,yBAAW,KAACsB;wBAAIjB,SAAS;kCAAkBL;;kCACzD,KAACX;wBAASgB,SAAS;kCAAmBD;;oBACrCpB,aAAaiB,wBAAU,KAACqB;wBAAIjB,SAAS;kCAAiBJ;;;;YAExD,CAACE,YAAYN,2BACZ,KAACyB;gBAAIjB,SAAS;0BACZ,cAAA,MAACkB;oBACCC,MAAK;oBACLC,UAAU,CAAC;oBACXvB,UAAUA;oBACVG,SAAS;oBACTqB,SAASxB,WAAWmB,YAAYJ;;sCAEhC,MAAC3B;;gCAAe;gCACNS;gCAAY;gCAAEK;;;sCAExB,KAACtB;;;;;;AAMb,EAAE"}
+{"version":3,"sources":["../../../../src/components/ChipsInputBase/Chip/Chip.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon16Cancel } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../../hooks/useAdaptivity';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../../hooks/useFocusVisibleClassName';\nimport {\n  type HasComponent,\n  type HasDataAttribute,\n  type HTMLAttributesWithRootRef,\n} from '../../../types';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport { Footnote } from '../../Typography/Footnote/Footnote';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport { type ChipOptionValue } from '../types';\nimport styles from './Chip.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n} as const;\n\nconst modeClassNames = {\n  primary: styles.modePrimary,\n  secondary: styles.modeSecondary,\n} as const;\n\nexport interface ChipProps\n  extends HasComponent,\n    HasDataAttribute,\n    HTMLAttributesWithRootRef<HTMLElement> {\n  /**\n   * Режим отображения компонента.\n   */\n  mode?: 'primary' | 'secondary';\n  /**\n   * Значение чипа.\n   */\n  value?: ChipOptionValue;\n  /**\n   * Можно ли удалить чип.\n   */\n  removable?: boolean;\n  /**\n   * Блокировка взаимодействия с чипом.\n   */\n  disabled?: boolean;\n  /**\n   * Режим только для чтения.\n   */\n  readOnly?: boolean;\n  /**\n   * Текст для кнопки удаления.\n   */\n  removeLabel?: string;\n  /**\n   * Контент перед основным содержимым.\n   */\n  before?: React.ReactNode;\n  /**\n   * Контент после основного содержимого.\n   */\n  after?: React.ReactNode;\n  /**\n   * Обработчик удаления чипа.\n   */\n  onRemove?: (event: React.MouseEvent, value: ChipOptionValue) => void;\n}\n\n/**\n * @see https://vkui.io/components/chip\n */\nexport const Chip = ({\n  mode = 'primary',\n  Component = 'span',\n  value = '',\n  removable = true,\n  onRemove,\n  removeLabel = 'Удалить',\n  before,\n  after,\n  disabled,\n  readOnly,\n  children,\n  className,\n  onFocus: onFocusProp,\n  onBlur: onBlurProp,\n  ...restProps\n}: ChipProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const { focusVisible, onFocus, onBlur } = useFocusVisible();\n  const focusVisibleClassName = useFocusVisibleClassName({ focusVisible });\n\n  const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n    if (onFocusProp) {\n      onFocusProp(event);\n    }\n    onFocus(event);\n  };\n\n  const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    if (onBlurProp) {\n      onBlurProp(event);\n    }\n    onBlur(event);\n  };\n\n  const onRemoveWrapper = React.useCallback(\n    (event: React.MouseEvent) => {\n      onRemove?.(event, value);\n    },\n    [onRemove, value],\n  );\n\n  return (\n    <RootComponent\n      {...restProps}\n      Component={Component}\n      className={classNames(\n        styles.host,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        modeClassNames[mode],\n        focusVisibleClassName,\n        className,\n      )}\n      aria-readonly={readOnly}\n      aria-disabled={disabled}\n      onFocus={disabled ? undefined : handleFocus}\n      onBlur={disabled ? undefined : handleBlur}\n    >\n      <div className={styles.in}>\n        {hasReactNode(before) && <div className={styles.before}>{before}</div>}\n        <Footnote className={styles.content}>{children}</Footnote>\n        {hasReactNode(after) && <div className={styles.after}>{after}</div>}\n      </div>\n      {!readOnly && removable && (\n        <div className={styles.removable}>\n          <button\n            type=\"button\"\n            tabIndex={-1} // [reason]: чтобы можно было выставлять состояние фокуса только программно через `*.focus()`\n            disabled={disabled}\n            className={styles.remove}\n            onClick={disabled ? undefined : onRemoveWrapper}\n          >\n            <VisuallyHidden>\n              &nbsp; {removeLabel} {children}\n            </VisuallyHidden>\n            <Icon16Cancel />\n          </button>\n        </div>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["React","Icon16Cancel","classNames","hasReactNode","useAdaptivity","useFocusVisible","useFocusVisibleClassName","RootComponent","Footnote","VisuallyHidden","sizeYClassNames","none","compact","modeClassNames","primary","secondary","Chip","mode","Component","value","removable","onRemove","removeLabel","before","after","disabled","readOnly","children","className","onFocus","onFocusProp","onBlur","onBlurProp","restProps","sizeY","focusVisible","focusVisibleClassName","handleFocus","event","handleBlur","onRemoveWrapper","useCallback","aria-readonly","aria-disabled","undefined","div","button","type","tabIndex","onClick"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,mBAAmB;AAChD,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,kCAA+B;AAC7D,SAASC,eAAe,QAAQ,oCAAiC;AACjE,SAASC,wBAAwB,QAAQ,6CAA0C;AAMnF,SAASC,aAAa,QAAQ,uCAAoC;AAClE,SAASC,QAAQ,QAAQ,wCAAqC;AAC9D,SAASC,cAAc,QAAQ,yCAAsC;AAIrE,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAEA,MAAMC,iBAAiB;IACrBC,OAAO;IACPC,SAAS;AACX;AA4CA;;CAEC,GACD,OAAO,MAAMC,OAAO;QAAC,EACnBC,OAAO,SAAS,EAChBC,YAAY,MAAM,EAClBC,QAAQ,EAAE,EACVC,YAAY,IAAI,EAChBC,QAAQ,EACRC,cAAc,SAAS,EACvBC,MAAM,EACNC,KAAK,EACLC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,SAASC,WAAW,EACpBC,QAAQC,UAAU,EAER,WADPC;QAdHhB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;;IAGA,MAAM,EAAEG,QAAQ,MAAM,EAAE,GAAG9B;IAC3B,MAAM,EAAE+B,YAAY,EAAEN,OAAO,EAAEE,MAAM,EAAE,GAAG1B;IAC1C,MAAM+B,wBAAwB9B,yBAAyB;QAAE6B;IAAa;IAEtE,MAAME,cAAc,CAACC;QACnB,IAAIR,aAAa;YACfA,YAAYQ;QACd;QACAT,QAAQS;IACV;IAEA,MAAMC,aAAa,CAACD;QAClB,IAAIN,YAAY;YACdA,WAAWM;QACb;QACAP,OAAOO;IACT;IAEA,MAAME,kBAAkBxC,MAAMyC,WAAW,CACvC,CAACH;QACCjB,qBAAAA,+BAAAA,SAAWiB,OAAOnB;IACpB,GACA;QAACE;QAAUF;KAAM;IAGnB,qBACE,MAACZ,uDACK0B;QACJf,WAAWA;QACXU,WAAW1B,6BAETgC,UAAU,aAAaxB,eAAe,CAACwB,MAAM,EAC7CrB,cAAc,CAACI,KAAK,EACpBmB,uBACAR;QAEFc,iBAAehB;QACfiB,iBAAelB;QACfI,SAASJ,WAAWmB,YAAYP;QAChCN,QAAQN,WAAWmB,YAAYL;;0BAE/B,MAACM;gBAAIjB,SAAS;;oBACXzB,aAAaoB,yBAAW,KAACsB;wBAAIjB,SAAS;kCAAkBL;;kCACzD,KAACf;wBAASoB,SAAS;kCAAmBD;;oBACrCxB,aAAaqB,wBAAU,KAACqB;wBAAIjB,SAAS;kCAAiBJ;;;;YAExD,CAACE,YAAYN,2BACZ,KAACyB;gBAAIjB,SAAS;0BACZ,cAAA,MAACkB;oBACCC,MAAK;oBACLC,UAAU,CAAC;oBACXvB,UAAUA;oBACVG,SAAS;oBACTqB,SAASxB,WAAWmB,YAAYJ;;sCAEhC,MAAC/B;;gCAAe;gCACNa;gCAAY;gCAAEK;;;sCAExB,KAAC1B;;;;;;AAMb,EAAE"}

package/dist/components/ChipsInputBase/types.d.ts

@@ -1,7 +1,8 @@
 import type * as React from 'react';
-import type { HasAlign, HasComponent, HasDataAttribute, HasRef, HTMLAttributesWithRootRef } from '../../types';
+import type { HasAlign, HasRef } from '../../types';
 import { type FormFieldProps } from '../FormField/FormField';
 import { type FormFieldClearButtonProps } from '../FormFieldClearButton/FormFieldClearButton';
+import { type ChipProps } from './Chip/Chip';
 export type NavigateTo = 'prev' | 'next' | 'last' | 'first';
 export type ChipOptionValue = string | number;
 export type ChipOptionLabel = React.ReactElement | string | number;
@@ -20,40 +21,6 @@ export type ChipOption = {
     disabled?: boolean;
     [index: string]: any;
 };
-export interface ChipProps extends HasComponent, HasDataAttribute, HTMLAttributesWithRootRef<HTMLElement> {
-    /**
-     * Значение чипа.
-     */
-    value?: ChipOptionValue;
-    /**
-     * Можно ли удалить чип.
-     */
-    removable?: boolean;
-    /**
-     * Блокировка взаимодействия с чипом.
-     */
-    disabled?: boolean;
-    /**
-     * Режим только для чтения.
-     */
-    readOnly?: boolean;
-    /**
-     * Текст для кнопки удаления.
-     */
-    removeLabel?: string;
-    /**
-     * Контент перед основным содержимым.
-     */
-    before?: React.ReactNode;
-    /**
-     * Контент после основного содержимого.
-     */
-    after?: React.ReactNode;
-    /**
-     * Обработчик удаления чипа.
-     */
-    onRemove?: (event: React.MouseEvent, value: ChipOptionValue) => void;
-}
 export interface RenderChipProps extends ChipProps {
     /**
      * Отображаемый текст чипа.

package/dist/components/ChipsInputBase/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ChipsInputBase/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EACV,QAAQ,EACR,YAAY,EACZ,gBAAgB,EAChB,MAAM,EACN,yBAAyB,EAC1B,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,KAAK,yBAAyB,EAAE,MAAM,8CAA8C,CAAC;AAE9F,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AAE5D,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,MAAM,CAAC;AAE9C,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,YAAY,GAAG,MAAM,GAAG,MAAM,CAAC;AAEnE,MAAM,MAAM,UAAU,GAAG;IACvB;;OAEG;IACH,KAAK,EAAE,eAAe,CAAC;IACvB;;OAEG;IACH,KAAK,EAAE,eAAe,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,KAAK,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,SACf,SAAQ,YAAY,EAClB,gBAAgB,EAChB,yBAAyB,CAAC,WAAW,CAAC;IACxC;;OAEG;IACH,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,EAAE,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;CACtE;AAED,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD;;OAEG;IACH,KAAK,EAAE,eAAe,CAAC;CACxB;AAED,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,UAAU,GAAG,UAAU,IAAI,CAC1D,KAAK,EAAE,eAAe,EACtB,MAAM,EAAE,CAAC,KACN,KAAK,CAAC,SAAS,CAAC;AAErB,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,UAAU,GAAG,UAAU,IAAI,CAAC,MAAM,EAAE,CAAC,KAAK,eAAe,CAAC;AAE/F,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,UAAU,GAAG,UAAU,IAAI,CAAC,MAAM,EAAE,CAAC,KAAK,eAAe,CAAC;AAE/F,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,UAAU,GAAG,UAAU,IAAI,CAChE,KAAK,EAAE,eAAe,EACtB,KAAK,EAAE,eAAe,KACnB,CAAC,CAAC;AAEP,MAAM,MAAM,QAAQ,CAAC,CAAC,SAAS,UAAU,GAAG,UAAU,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;AAE/E,MAAM,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;AAEjF;;GAEG;AACH,MAAM,WAAW,sBAAsB,CAAC,CAAC,SAAS,UAAU,GAAG,UAAU;IACvE;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC;IACZ;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,EAAE,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;IACvB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B;;;;;;;;;;;;;;;OAeG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,CAAC;CACxC;AAED;;GAEG;AACH,KAAK,gCAAgC,CAAC,CAAC,SAAS,UAAU,GAAG,UAAU,IAAI,IAAI,CAC7E,sBAAsB,CAAC,CAAC,CAAC,EACzB,UAAU,GAAG,cAAc,GAAG,mBAAmB,CAClD,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,mBAAmB,CAAC,CAAC,SAAS,UAAU,GAAG,UAAU,CACpE,SAAQ,gCAAgC,CAAC,CAAC,CAAC,EACzC,IAAI,CACF,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,MAAM,sBAAsB,CAAC,CAAC,CAAC,GAAG,gBAAgB,CACnD,EACD,MAAM,CAAC,gBAAgB,CAAC,EACxB,QAAQ;IACV;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACvC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;IAC3B;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,yBAAyB,CAAC,CAAC;IAC7D;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;GAEG;AACH,MAAM,WAAW,0BAA0B,CAAC,CAAC,SAAS,UAAU,GAAG,UAAU,CAC3E,SAAQ,mBAAmB,CAAC,CAAC,CAAC,EAC5B,IAAI,CAAC,cAAc,EAAE,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,WAAW,CAAC;IAC5E;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;OAEG;IACH,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC;;OAEG;IACH,kBAAkB,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,eAAe,KAAK,IAAI,CAAC;CAC1D"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ChipsInputBase/types.ts"],"names":[],"mappings":"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"}

package/dist/components/ChipsInputBase/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ChipsInputBase/types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type {\n  HasAlign,\n  HasComponent,\n  HasDataAttribute,\n  HasRef,\n  HTMLAttributesWithRootRef,\n} from '../../types';\nimport { type FormFieldProps } from '../FormField/FormField';\nimport { type FormFieldClearButtonProps } from '../FormFieldClearButton/FormFieldClearButton';\n\nexport type NavigateTo = 'prev' | 'next' | 'last' | 'first';\n\nexport type ChipOptionValue = string | number;\n\nexport type ChipOptionLabel = React.ReactElement | string | number;\n\nexport type ChipOption = {\n  /**\n   * Значение опции.\n   */\n  value: ChipOptionValue;\n  /**\n   * Отображаемый текст опции.\n   */\n  label: ChipOptionLabel;\n  /**\n   * Блокировка взаимодействия с оцией.\n   */\n  disabled?: boolean;\n  [index: string]: any;\n};\n\nexport interface ChipProps\n  extends HasComponent,\n    HasDataAttribute,\n    HTMLAttributesWithRootRef<HTMLElement> {\n  /**\n   * Значение чипа.\n   */\n  value?: ChipOptionValue;\n  /**\n   * Можно ли удалить чип.\n   */\n  removable?: boolean;\n  /**\n   * Блокировка взаимодействия с чипом.\n   */\n  disabled?: boolean;\n  /**\n   * Режим только для чтения.\n   */\n  readOnly?: boolean;\n  /**\n   * Текст для кнопки удаления.\n   */\n  removeLabel?: string;\n  /**\n   * Контент перед основным содержимым.\n   */\n  before?: React.ReactNode;\n  /**\n   * Контент после основного содержимого.\n   */\n  after?: React.ReactNode;\n  /**\n   * Обработчик удаления чипа.\n   */\n  onRemove?: (event: React.MouseEvent, value: ChipOptionValue) => void;\n}\n\nexport interface RenderChipProps extends ChipProps {\n  /**\n   * Отображаемый текст чипа.\n   */\n  label: ChipOptionLabel;\n}\n\nexport type RenderChip<O extends ChipOption = ChipOption> = (\n  props: RenderChipProps,\n  option: O,\n) => React.ReactNode;\n\nexport type GetOptionValue<O extends ChipOption = ChipOption> = (option: O) => ChipOptionValue;\n\nexport type GetOptionLabel<O extends ChipOption = ChipOption> = (option: O) => ChipOptionLabel;\n\nexport type GetNewOptionData<O extends ChipOption = ChipOption> = (\n  value: ChipOptionValue,\n  label: ChipOptionLabel,\n) => O;\n\nexport type OnChange<O extends ChipOption = ChipOption> = (value: O[]) => void;\n\nexport type OnInputChange = (event: React.ChangeEvent<HTMLInputElement>) => void;\n\n/**\n * @public\n */\nexport interface UseChipsInputBaseProps<O extends ChipOption = ChipOption> {\n  /**\n   * Блокировка взаимодействия с компонентом.\n   */\n  disabled?: boolean;\n  /**\n   * Выбранные опции.\n   */\n  value?: O[];\n  /**\n   * Выбранные опции по умолчанию.\n   */\n  defaultValue?: O[];\n  /**\n   * Обработчик изменения выбранных опций.\n   */\n  onChange?: OnChange<O>;\n  /**\n   * Значение поля ввода.\n   */\n  inputValue?: string;\n  /**\n   * Значение поля ввода по умолчанию.\n   */\n  defaultInputValue?: string;\n  /**\n   * Обработчик изменения значения в поле ввода.\n   */\n  onInputChange?: OnInputChange;\n  /**\n   * Символ или строка, которая будет использоваться как разделитель для автоматического создания опций из текста, введенного в поле ввода.\n   * Принимает:\n   * - `string` - простая строка\n   * - `RegExp` - регулярное выражение\n   * - `string[]` - массив строк, по которым нужно разелять ввод.\n   *\n   * Работает в двух сценариях:\n   * 1. При вводе разделителя - текст до разделителя автоматически преобразуется в новую опцию.\n   *    Например, при `delimiter=\",\"` ввод \"опция1,\" создаст опцию \"опция1\".\n   *\n   * 2. При вставке из буфера обмена - если вставляемый текст содержит разделители,\n   *    он будет автоматически разбит на несколько опций.\n   *    Например, при `delimiter=\",\"` вставка \"опция1,опция2,опция3\" создаст\n   *    три отдельные опции: \"опция1\", \"опция2\" и \"опция3\".\n   */\n  delimiter?: string | RegExp | string[];\n}\n\n/**\n * @private\n */\ntype UseChipsInputBaseOnlyNeededProps<O extends ChipOption = ChipOption> = Omit<\n  UseChipsInputBaseProps<O>,\n  'onChange' | 'defaultValue' | 'defaultInputValue'\n>;\n\n/**\n * @public\n */\nexport interface ChipsInputBaseProps<O extends ChipOption = ChipOption>\n  extends UseChipsInputBaseOnlyNeededProps<O>,\n    Omit<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      keyof UseChipsInputBaseProps<O> | 'defaultChecked'\n    >,\n    HasRef<HTMLInputElement>,\n    HasAlign {\n  /**\n   * Ссылка на корневой элемент.\n   */\n  getRootRef?: React.Ref<HTMLDivElement>;\n  /**\n   * Добавляет значение в список на событие `onBlur`.\n   */\n  addOnBlur?: boolean;\n  /**\n   * Render prop функция для возврата своего компонента.\n   *\n   * @default Используется [Chip](#/Chip)\n   */\n  renderChip?: RenderChip<O>;\n  /**\n   * Показывать ли кнопку для очистки значения.\n   */\n  clearButtonShown?: boolean;\n  /**\n   * (e2e) testId кнопки очистки.\n   */\n  clearButtonTestId?: string;\n  /**\n   * Кастомная кнопка для очистки значения.\n   * Должна принимать обязательное свойство `onClick`.\n   */\n  ClearButton?: React.ComponentType<FormFieldClearButtonProps>;\n  /**\n   * `aria-label` для списка выбранных опций.\n   */\n  chipsListLabel?: string;\n}\n\n/**\n * @private\n */\nexport interface ChipsInputBasePrivateProps<O extends ChipOption = ChipOption>\n  extends ChipsInputBaseProps<O>,\n    Pick<FormFieldProps, 'mode' | 'status' | 'before' | 'after' | 'maxHeight'> {\n  /**\n   * Обработчик очистки всех выбранных опций.\n   */\n  onClear: () => void;\n  /**\n   * Обработчик добавления новой опции чипа.\n   */\n  onAddChipOption: (value: string) => void;\n  /**\n   * Обработчик удаления опции чипа.\n   */\n  onRemoveChipOption: (value: O | ChipOptionValue) => void;\n}\n"],"names":[],"mappings":"AAuMA;;CAEC,GACD,WAeC"}
+{"version":3,"sources":["../../../src/components/ChipsInputBase/types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { HasAlign, HasRef } from '../../types';\nimport { type FormFieldProps } from '../FormField/FormField';\nimport { type FormFieldClearButtonProps } from '../FormFieldClearButton/FormFieldClearButton';\nimport { type ChipProps } from './Chip/Chip';\n\nexport type NavigateTo = 'prev' | 'next' | 'last' | 'first';\n\nexport type ChipOptionValue = string | number;\n\nexport type ChipOptionLabel = React.ReactElement | string | number;\n\nexport type ChipOption = {\n  /**\n   * Значение опции.\n   */\n  value: ChipOptionValue;\n  /**\n   * Отображаемый текст опции.\n   */\n  label: ChipOptionLabel;\n  /**\n   * Блокировка взаимодействия с оцией.\n   */\n  disabled?: boolean;\n  [index: string]: any;\n};\n\nexport interface RenderChipProps extends ChipProps {\n  /**\n   * Отображаемый текст чипа.\n   */\n  label: ChipOptionLabel;\n}\n\nexport type RenderChip<O extends ChipOption = ChipOption> = (\n  props: RenderChipProps,\n  option: O,\n) => React.ReactNode;\n\nexport type GetOptionValue<O extends ChipOption = ChipOption> = (option: O) => ChipOptionValue;\n\nexport type GetOptionLabel<O extends ChipOption = ChipOption> = (option: O) => ChipOptionLabel;\n\nexport type GetNewOptionData<O extends ChipOption = ChipOption> = (\n  value: ChipOptionValue,\n  label: ChipOptionLabel,\n) => O;\n\nexport type OnChange<O extends ChipOption = ChipOption> = (value: O[]) => void;\n\nexport type OnInputChange = (event: React.ChangeEvent<HTMLInputElement>) => void;\n\n/**\n * @public\n */\nexport interface UseChipsInputBaseProps<O extends ChipOption = ChipOption> {\n  /**\n   * Блокировка взаимодействия с компонентом.\n   */\n  disabled?: boolean;\n  /**\n   * Выбранные опции.\n   */\n  value?: O[];\n  /**\n   * Выбранные опции по умолчанию.\n   */\n  defaultValue?: O[];\n  /**\n   * Обработчик изменения выбранных опций.\n   */\n  onChange?: OnChange<O>;\n  /**\n   * Значение поля ввода.\n   */\n  inputValue?: string;\n  /**\n   * Значение поля ввода по умолчанию.\n   */\n  defaultInputValue?: string;\n  /**\n   * Обработчик изменения значения в поле ввода.\n   */\n  onInputChange?: OnInputChange;\n  /**\n   * Символ или строка, которая будет использоваться как разделитель для автоматического создания опций из текста, введенного в поле ввода.\n   * Принимает:\n   * - `string` - простая строка\n   * - `RegExp` - регулярное выражение\n   * - `string[]` - массив строк, по которым нужно разелять ввод.\n   *\n   * Работает в двух сценариях:\n   * 1. При вводе разделителя - текст до разделителя автоматически преобразуется в новую опцию.\n   *    Например, при `delimiter=\",\"` ввод \"опция1,\" создаст опцию \"опция1\".\n   *\n   * 2. При вставке из буфера обмена - если вставляемый текст содержит разделители,\n   *    он будет автоматически разбит на несколько опций.\n   *    Например, при `delimiter=\",\"` вставка \"опция1,опция2,опция3\" создаст\n   *    три отдельные опции: \"опция1\", \"опция2\" и \"опция3\".\n   */\n  delimiter?: string | RegExp | string[];\n}\n\n/**\n * @private\n */\ntype UseChipsInputBaseOnlyNeededProps<O extends ChipOption = ChipOption> = Omit<\n  UseChipsInputBaseProps<O>,\n  'onChange' | 'defaultValue' | 'defaultInputValue'\n>;\n\n/**\n * @public\n */\nexport interface ChipsInputBaseProps<O extends ChipOption = ChipOption>\n  extends UseChipsInputBaseOnlyNeededProps<O>,\n    Omit<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      keyof UseChipsInputBaseProps<O> | 'defaultChecked'\n    >,\n    HasRef<HTMLInputElement>,\n    HasAlign {\n  /**\n   * Ссылка на корневой элемент.\n   */\n  getRootRef?: React.Ref<HTMLDivElement>;\n  /**\n   * Добавляет значение в список на событие `onBlur`.\n   */\n  addOnBlur?: boolean;\n  /**\n   * Render prop функция для возврата своего компонента.\n   *\n   * @default Используется [Chip](#/Chip)\n   */\n  renderChip?: RenderChip<O>;\n  /**\n   * Показывать ли кнопку для очистки значения.\n   */\n  clearButtonShown?: boolean;\n  /**\n   * (e2e) testId кнопки очистки.\n   */\n  clearButtonTestId?: string;\n  /**\n   * Кастомная кнопка для очистки значения.\n   * Должна принимать обязательное свойство `onClick`.\n   */\n  ClearButton?: React.ComponentType<FormFieldClearButtonProps>;\n  /**\n   * `aria-label` для списка выбранных опций.\n   */\n  chipsListLabel?: string;\n}\n\n/**\n * @private\n */\nexport interface ChipsInputBasePrivateProps<O extends ChipOption = ChipOption>\n  extends ChipsInputBaseProps<O>,\n    Pick<FormFieldProps, 'mode' | 'status' | 'before' | 'after' | 'maxHeight'> {\n  /**\n   * Обработчик очистки всех выбранных опций.\n   */\n  onClear: () => void;\n  /**\n   * Обработчик добавления новой опции чипа.\n   */\n  onAddChipOption: (value: string) => void;\n  /**\n   * Обработчик удаления опции чипа.\n   */\n  onRemoveChipOption: (value: O | ChipOptionValue) => void;\n}\n"],"names":[],"mappings":"AA4JA;;CAEC,GACD,WAeC"}

package/dist/components/ContentBadge/ContentBadge.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { HTMLAttributesWithRootRef } from '../../types';
-import type { TypographyProps } from '../Typography/Typography';
+import { type TypographyProps } from '../Typography/Typography';
 import { ContentBadgeIconSlot } from './ContentBadgeIconSlot';
 import type { ContentBadgeModeType, ContentBadgeSizeType } from './types';
 export interface ContentBadgeProps extends HTMLAttributesWithRootRef<HTMLDivElement>, Pick<TypographyProps, 'weight'> {

package/dist/components/ContentBadge/ContentBadge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContentBadge.d.ts","sourceRoot":"","sources":["../../../src/components/ContentBadge/ContentBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAG7D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAEhE,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,KAAK,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAqC1E,MAAM,WAAW,iBACf,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAC/C,IAAI,CAAC,eAAe,EAAE,QAAQ,CAAC;IACjC;;OAEG;IACH,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B;;OAEG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,cAAc,GAAG,YAAY,GAAG,SAAS,CAAC;IAC9E;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,oBAAoB,CAAC;CAC7B;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,GAAG;IACvD,QAAQ,EAAE,OAAO,oBAAoB,CAAC;IACtC;;OAEG;IACH,QAAQ,EAAE,OAAO,oBAAoB,CAAC;CAkCvC,CAAC"}
+{"version":3,"file":"ContentBadge.d.ts","sourceRoot":"","sources":["../../../src/components/ContentBadge/ContentBadge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAI7D,OAAO,EAAE,KAAK,eAAe,EAAoB,MAAM,0BAA0B,CAAC;AAElF,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,KAAK,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAqC1E,MAAM,WAAW,iBACf,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAC/C,IAAI,CAAC,eAAe,EAAE,QAAQ,CAAC;IACjC;;OAEG;IACH,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B;;OAEG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,cAAc,GAAG,YAAY,GAAG,SAAS,CAAC;IAC9E;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,oBAAoB,CAAC;CAC7B;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,GAAG;IACvD,QAAQ,EAAE,OAAO,oBAAoB,CAAC;IACtC;;OAEG;IACH,QAAQ,EAAE,OAAO,oBAAoB,CAAC;CAoCvC,CAAC"}

package/dist/components/ContentBadge/ContentBadge.js

@@ -1,12 +1,16 @@
+'use client';
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
+import { useAdaptivity } from "../../hooks/useAdaptivity.js";
 import { defineComponentDisplayNames } from "../../lib/react/defineComponentDisplayNames.js";
-import { Caption } from "../Typography/Caption/Caption.js";
-import { Footnote } from "../Typography/Footnote/Footnote.js";
+import { Tappable } from "../Tappable/Tappable.js";
+import { captionClassNames } from "../Typography/Caption/Caption.js";
+import { footnoteClassNames } from "../Typography/Footnote/Footnote.js";
+import { weightClassNames } from "../Typography/Typography.js";
 import { ContentBadgeContext } from "./ContentBadgeContext.js";
 import { ContentBadgeIconSlot } from "./ContentBadgeIconSlot.js";
 const appearanceClassNames = {
@@ -50,20 +54,22 @@ const sizeClassNames = {
  * @since 6.1.0
  * @see https://vkui.io/components/content-badge
  */ export const ContentBadge = (_param)=>{
-    var { appearance = 'accent', mode = 'primary', capsule, size = 'm', weight = '2', className, children } = _param, restProps = _object_without_properties(_param, [
+    var { appearance = 'accent', mode = 'primary', capsule, size = 'm', weight = '2', children } = _param, restProps = _object_without_properties(_param, [
         "appearance",
         "mode",
         "capsule",
         "size",
         "weight",
-        "className",
         "children"
     ]);
-    const TypographyComponent = size === 'l' ? Footnote : Caption;
-    return /*#__PURE__*/ _jsx(TypographyComponent, _object_spread_props(_object_spread({}, restProps), {
-        weight: weight,
-        normalize: true,
-        className: classNames(className, "vkuiContentBadge__host", size !== 's' && capsule && "vkuiContentBadge__capsule", mode === 'outline' && "vkuiContentBadge__modeOutline", appearanceClassNames[appearance][mode], sizeClassNames[size]),
+    const { sizeY = 'none' } = useAdaptivity();
+    const typographyClassNames = size === 'l' ? footnoteClassNames(sizeY) : captionClassNames(sizeY);
+    return /*#__PURE__*/ _jsx(Tappable, _object_spread_props(_object_spread({
+        baseClassName: classNames("vkuiContentBadge__host", size !== 's' && capsule && "vkuiContentBadge__capsule", mode === 'outline' && "vkuiContentBadge__modeOutline", appearanceClassNames[appearance][mode], sizeClassNames[size], typographyClassNames, weightClassNames(weight)),
+        DefaultComponent: "span",
+        hoverMode: "opacity",
+        activeMode: "opacity"
+    }, restProps), {
         children: /*#__PURE__*/ _jsx(ContentBadgeContext.Provider, {
             value: {
                 isSingleChild: React.Children.count(children) === 1,

package/dist/components/ContentBadge/ContentBadge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ContentBadge/ContentBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport type { TypographyProps } from '../Typography/Typography';\nimport { ContentBadgeContext } from './ContentBadgeContext';\nimport { ContentBadgeIconSlot } from './ContentBadgeIconSlot';\nimport type { ContentBadgeModeType, ContentBadgeSizeType } from './types';\nimport styles from './ContentBadge.module.css';\n\nconst appearanceClassNames = {\n  'accent': {\n    primary: styles.primaryAccent,\n    secondary: styles.secondaryAccent,\n    outline: styles.outlineAccent,\n  },\n  'neutral': {\n    primary: styles.primaryNeutral,\n    secondary: styles.secondaryNeutral,\n    outline: styles.outlineNeutral,\n  },\n  'accent-green': {\n    primary: styles.primaryAccentGreen,\n    secondary: styles.secondaryAccentGreen,\n    outline: styles.outlineAccentGreen,\n  },\n  'accent-red': {\n    primary: styles.primaryAccentRed,\n    secondary: styles.secondaryAccentRed,\n    outline: styles.outlineAccentRed,\n  },\n  'overlay': {\n    primary: styles.primaryOverlay,\n    secondary: styles.secondaryOverlay,\n    outline: styles.outlineOverlay,\n  },\n};\n\nconst sizeClassNames = {\n  s: styles.sizeS,\n  m: styles.sizeM,\n  l: styles.sizeL,\n};\n\nexport interface ContentBadgeProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    Pick<TypographyProps, 'weight'> {\n  /**\n   * Вид отображения.\n   */\n  mode?: ContentBadgeModeType;\n  /**\n   * Цвет оформления.\n   */\n  appearance?: 'accent' | 'neutral' | 'accent-green' | 'accent-red' | 'overlay';\n  /**\n   * Включает приближение значения закругления к форме круга.\n   *\n   * > Note: игнорируется при size=\"s\".\n   */\n  capsule?: boolean;\n  /**\n   * Определяет отступы и размер текста.\n   *\n   * Соответствие размеров иконок в слоте `<ContentBadge.SlotIcon />`:\n   *\n   * - size=\"s\" – ⚠️ не поддерживает иконки;\n   * - size=\"m\" – при **одиночной** иконке `16x16`, в остальных случаях `12x12`;\n   * - size=\"l\" – при **одиночной** иконке `20x20`, в остальных случаях `16x16`.\n   */\n  size?: ContentBadgeSizeType;\n}\n\n/**\n * Компонент, который позволяет добавить текстовые или иконочные бейджи. Как правило, используются\n * поверх других элементов или рядом с ними.\n *\n * Используйте `ContentBadge.SlotIcon` для размещения иконок внутри `ContentBadge`.\n *\n * @since 6.1.0\n * @see https://vkui.io/components/content-badge\n */\nexport const ContentBadge: React.FC<ContentBadgeProps> & {\n  IconSlot: typeof ContentBadgeIconSlot;\n  /**\n   * @deprecated Since 7.3.4. Используйте `IconSlot`.\n   */\n  SlotIcon: typeof ContentBadgeIconSlot;\n} = ({\n  appearance = 'accent',\n  mode = 'primary',\n  capsule,\n  size = 'm',\n  weight = '2',\n  className,\n  children,\n  ...restProps\n}: ContentBadgeProps) => {\n  const TypographyComponent = size === 'l' ? Footnote : Caption;\n\n  return (\n    <TypographyComponent\n      {...restProps}\n      weight={weight}\n      normalize\n      className={classNames(\n        className,\n        styles.host,\n        size !== 's' && capsule && styles.capsule,\n        mode === 'outline' && styles.modeOutline,\n        appearanceClassNames[appearance][mode],\n        sizeClassNames[size],\n      )}\n    >\n      <ContentBadgeContext.Provider\n        value={{ isSingleChild: React.Children.count(children) === 1, size }}\n      >\n        {children}\n      </ContentBadgeContext.Provider>\n    </TypographyComponent>\n  );\n};\n\nContentBadge.IconSlot = ContentBadgeIconSlot;\nContentBadge.SlotIcon = ContentBadgeIconSlot;\n\nif (process.env.NODE_ENV !== 'production') {\n  defineComponentDisplayNames(ContentBadge.IconSlot, 'ContentBadge.IconSlot');\n  defineComponentDisplayNames(ContentBadge.SlotIcon, 'ContentBadge.SlotIcon');\n}\n"],"names":["React","classNames","defineComponentDisplayNames","Caption","Footnote","ContentBadgeContext","ContentBadgeIconSlot","appearanceClassNames","primary","secondary","outline","sizeClassNames","s","m","l","ContentBadge","appearance","mode","capsule","size","weight","className","children","restProps","TypographyComponent","normalize","Provider","value","isSingleChild","Children","count","IconSlot","SlotIcon","process","env","NODE_ENV"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,2BAA2B,QAAQ,iDAA8C;AAE1F,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,QAAQ,QAAQ,qCAAkC;AAE3D,SAASC,mBAAmB,QAAQ,2BAAwB;AAC5D,SAASC,oBAAoB,QAAQ,4BAAyB;AAI9D,MAAMC,uBAAuB;IAC3B,UAAU;QACRC,OAAO;QACPC,SAAS;QACTC,OAAO;IACT;IACA,WAAW;QACTF,OAAO;QACPC,SAAS;QACTC,OAAO;IACT;IACA,gBAAgB;QACdF,OAAO;QACPC,SAAS;QACTC,OAAO;IACT;IACA,cAAc;QACZF,OAAO;QACPC,SAAS;QACTC,OAAO;IACT;IACA,WAAW;QACTF,OAAO;QACPC,SAAS;QACTC,OAAO;IACT;AACF;AAEA,MAAMC,iBAAiB;IACrBC,CAAC;IACDC,CAAC;IACDC,CAAC;AACH;AA+BA;;;;;;;;CAQC,GACD,OAAO,MAAMC,eAMT;QAAC,EACHC,aAAa,QAAQ,EACrBC,OAAO,SAAS,EAChBC,OAAO,EACPC,OAAO,GAAG,EACVC,SAAS,GAAG,EACZC,SAAS,EACTC,QAAQ,EAEU,WADfC;QAPHP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,sBAAsBL,SAAS,MAAMf,WAAWD;IAEtD,qBACE,KAACqB,6DACKD;QACJH,QAAQA;QACRK,SAAS;QACTJ,WAAWpB,WACToB,qCAEAF,SAAS,OAAOD,wCAChBD,SAAS,8CACTV,oBAAoB,CAACS,WAAW,CAACC,KAAK,EACtCN,cAAc,CAACQ,KAAK;kBAGtB,cAAA,KAACd,oBAAoBqB,QAAQ;YAC3BC,OAAO;gBAAEC,eAAe5B,MAAM6B,QAAQ,CAACC,KAAK,CAACR,cAAc;gBAAGH;YAAK;sBAElEG;;;AAIT,EAAE;AAEFP,aAAagB,QAAQ,GAAGzB;AACxBS,aAAaiB,QAAQ,GAAG1B;AAExB,IAAI2B,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;IACzCjC,4BAA4Ba,aAAagB,QAAQ,EAAE;IACnD7B,4BAA4Ba,aAAaiB,QAAQ,EAAE;AACrD"}
+{"version":3,"sources":["../../../src/components/ContentBadge/ContentBadge.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { Tappable } from '../Tappable/Tappable';\nimport { captionClassNames } from '../Typography/Caption/Caption';\nimport { footnoteClassNames } from '../Typography/Footnote/Footnote';\nimport { type TypographyProps, weightClassNames } from '../Typography/Typography';\nimport { ContentBadgeContext } from './ContentBadgeContext';\nimport { ContentBadgeIconSlot } from './ContentBadgeIconSlot';\nimport type { ContentBadgeModeType, ContentBadgeSizeType } from './types';\nimport styles from './ContentBadge.module.css';\n\nconst appearanceClassNames = {\n  'accent': {\n    primary: styles.primaryAccent,\n    secondary: styles.secondaryAccent,\n    outline: styles.outlineAccent,\n  },\n  'neutral': {\n    primary: styles.primaryNeutral,\n    secondary: styles.secondaryNeutral,\n    outline: styles.outlineNeutral,\n  },\n  'accent-green': {\n    primary: styles.primaryAccentGreen,\n    secondary: styles.secondaryAccentGreen,\n    outline: styles.outlineAccentGreen,\n  },\n  'accent-red': {\n    primary: styles.primaryAccentRed,\n    secondary: styles.secondaryAccentRed,\n    outline: styles.outlineAccentRed,\n  },\n  'overlay': {\n    primary: styles.primaryOverlay,\n    secondary: styles.secondaryOverlay,\n    outline: styles.outlineOverlay,\n  },\n};\n\nconst sizeClassNames = {\n  s: styles.sizeS,\n  m: styles.sizeM,\n  l: styles.sizeL,\n};\n\nexport interface ContentBadgeProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    Pick<TypographyProps, 'weight'> {\n  /**\n   * Вид отображения.\n   */\n  mode?: ContentBadgeModeType;\n  /**\n   * Цвет оформления.\n   */\n  appearance?: 'accent' | 'neutral' | 'accent-green' | 'accent-red' | 'overlay';\n  /**\n   * Включает приближение значения закругления к форме круга.\n   *\n   * > Note: игнорируется при size=\"s\".\n   */\n  capsule?: boolean;\n  /**\n   * Определяет отступы и размер текста.\n   *\n   * Соответствие размеров иконок в слоте `<ContentBadge.SlotIcon />`:\n   *\n   * - size=\"s\" – ⚠️ не поддерживает иконки;\n   * - size=\"m\" – при **одиночной** иконке `16x16`, в остальных случаях `12x12`;\n   * - size=\"l\" – при **одиночной** иконке `20x20`, в остальных случаях `16x16`.\n   */\n  size?: ContentBadgeSizeType;\n}\n\n/**\n * Компонент, который позволяет добавить текстовые или иконочные бейджи. Как правило, используются\n * поверх других элементов или рядом с ними.\n *\n * Используйте `ContentBadge.SlotIcon` для размещения иконок внутри `ContentBadge`.\n *\n * @since 6.1.0\n * @see https://vkui.io/components/content-badge\n */\nexport const ContentBadge: React.FC<ContentBadgeProps> & {\n  IconSlot: typeof ContentBadgeIconSlot;\n  /**\n   * @deprecated Since 7.3.4. Используйте `IconSlot`.\n   */\n  SlotIcon: typeof ContentBadgeIconSlot;\n} = ({\n  appearance = 'accent',\n  mode = 'primary',\n  capsule,\n  size = 'm',\n  weight = '2',\n  children,\n  ...restProps\n}: ContentBadgeProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const typographyClassNames = size === 'l' ? footnoteClassNames(sizeY) : captionClassNames(sizeY);\n\n  return (\n    <Tappable\n      baseClassName={classNames(\n        styles.host,\n        size !== 's' && capsule && styles.capsule,\n        mode === 'outline' && styles.modeOutline,\n        appearanceClassNames[appearance][mode],\n        sizeClassNames[size],\n        typographyClassNames,\n        weightClassNames(weight),\n      )}\n      DefaultComponent=\"span\"\n      hoverMode=\"opacity\"\n      activeMode=\"opacity\"\n      {...restProps}\n    >\n      <ContentBadgeContext.Provider\n        value={{ isSingleChild: React.Children.count(children) === 1, size }}\n      >\n        {children}\n      </ContentBadgeContext.Provider>\n    </Tappable>\n  );\n};\n\nContentBadge.IconSlot = ContentBadgeIconSlot;\nContentBadge.SlotIcon = ContentBadgeIconSlot;\n\nif (process.env.NODE_ENV !== 'production') {\n  defineComponentDisplayNames(ContentBadge.IconSlot, 'ContentBadge.IconSlot');\n  defineComponentDisplayNames(ContentBadge.SlotIcon, 'ContentBadge.SlotIcon');\n}\n"],"names":["React","classNames","useAdaptivity","defineComponentDisplayNames","Tappable","captionClassNames","footnoteClassNames","weightClassNames","ContentBadgeContext","ContentBadgeIconSlot","appearanceClassNames","primary","secondary","outline","sizeClassNames","s","m","l","ContentBadge","appearance","mode","capsule","size","weight","children","restProps","sizeY","typographyClassNames","baseClassName","DefaultComponent","hoverMode","activeMode","Provider","value","isSingleChild","Children","count","IconSlot","SlotIcon","process","env","NODE_ENV"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,2BAA2B,QAAQ,iDAA8C;AAE1F,SAASC,QAAQ,QAAQ,0BAAuB;AAChD,SAASC,iBAAiB,QAAQ,mCAAgC;AAClE,SAASC,kBAAkB,QAAQ,qCAAkC;AACrE,SAA+BC,gBAAgB,QAAQ,8BAA2B;AAClF,SAASC,mBAAmB,QAAQ,2BAAwB;AAC5D,SAASC,oBAAoB,QAAQ,4BAAyB;AAI9D,MAAMC,uBAAuB;IAC3B,UAAU;QACRC,OAAO;QACPC,SAAS;QACTC,OAAO;IACT;IACA,WAAW;QACTF,OAAO;QACPC,SAAS;QACTC,OAAO;IACT;IACA,gBAAgB;QACdF,OAAO;QACPC,SAAS;QACTC,OAAO;IACT;IACA,cAAc;QACZF,OAAO;QACPC,SAAS;QACTC,OAAO;IACT;IACA,WAAW;QACTF,OAAO;QACPC,SAAS;QACTC,OAAO;IACT;AACF;AAEA,MAAMC,iBAAiB;IACrBC,CAAC;IACDC,CAAC;IACDC,CAAC;AACH;AA+BA;;;;;;;;CAQC,GACD,OAAO,MAAMC,eAMT;QAAC,EACHC,aAAa,QAAQ,EACrBC,OAAO,SAAS,EAChBC,OAAO,EACPC,OAAO,GAAG,EACVC,SAAS,GAAG,EACZC,QAAQ,EAEU,WADfC;QANHN;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAGxB;IAC3B,MAAMyB,uBAAuBL,SAAS,MAAMhB,mBAAmBoB,SAASrB,kBAAkBqB;IAE1F,qBACE,KAACtB;QACCwB,eAAe3B,qCAEbqB,SAAS,OAAOD,wCAChBD,SAAS,8CACTV,oBAAoB,CAACS,WAAW,CAACC,KAAK,EACtCN,cAAc,CAACQ,KAAK,EACpBK,sBACApB,iBAAiBgB;QAEnBM,kBAAiB;QACjBC,WAAU;QACVC,YAAW;OACPN;kBAEJ,cAAA,KAACjB,oBAAoBwB,QAAQ;YAC3BC,OAAO;gBAAEC,eAAelC,MAAMmC,QAAQ,CAACC,KAAK,CAACZ,cAAc;gBAAGF;YAAK;sBAElEE;;;AAIT,EAAE;AAEFN,aAAamB,QAAQ,GAAG5B;AACxBS,aAAaoB,QAAQ,GAAG7B;AAExB,IAAI8B,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;IACzCtC,4BAA4Be,aAAamB,QAAQ,EAAE;IACnDlC,4BAA4Be,aAAaoB,QAAQ,EAAE;AACrD"}