@vkontakte/vkui 6.1.1 → 6.1.2

package/dist/components/FocusTrap/FocusTrap.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/FocusTrap/FocusTrap.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { FOCUSABLE_ELEMENTS_LIST, Keys, pressedKey } from '../../lib/accessibility';\nimport {\n  contains,\n  getActiveElementByAnotherElement,\n  getWindow,\n  isHTMLElement,\n} from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { AppRootContext } from '../AppRoot/AppRootContext';\n\nconst FOCUSABLE_ELEMENTS: string = FOCUSABLE_ELEMENTS_LIST.join();\nexport interface FocusTrapProps<T extends HTMLElement = HTMLElement>\n  extends React.AllHTMLAttributes<T>,\n    HasRootRef<T>,\n    HasComponent {\n  autoFocus?: boolean;\n  restoreFocus?: boolean | (() => boolean);\n  timeout?: number;\n  onClose?: () => void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FocusTrap\n */\nexport const FocusTrap = <T extends HTMLElement = HTMLElement>({\n  Component = 'div',\n  onClose,\n  autoFocus = true,\n  restoreFocus = true,\n  timeout = 0,\n  getRootRef,\n  children,\n  ...restProps\n}: FocusTrapProps<T>) => {\n  const ref = useExternRef<T>(getRootRef);\n\n  const { keyboardInput } = React.useContext(AppRootContext);\n  const focusableNodesRef = React.useRef<HTMLElement[]>([]);\n\n  useIsomorphicLayoutEffect(\n    function collectFocusableNodesRef() {\n      if (!ref.current) {\n        return;\n      }\n\n      const nodes: HTMLElement[] = [];\n      // eslint-disable-next-line no-restricted-properties\n      ref.current.querySelectorAll<HTMLElement>(FOCUSABLE_ELEMENTS).forEach((focusableEl) => {\n        const { display, visibility } = getComputedStyle(focusableEl);\n        if (display !== 'none' && visibility !== 'hidden') {\n          nodes.push(focusableEl);\n        }\n      });\n\n      if (nodes.length === 0) {\n        // Чтобы фокус был хотя бы на родителе\n        nodes.push(ref.current);\n      }\n\n      focusableNodesRef.current = nodes;\n    },\n    [children],\n  );\n\n  useIsomorphicLayoutEffect(\n    function tryToAutoFocusToFirstNode() {\n      if (!ref.current || !autoFocus || !keyboardInput) {\n        return;\n      }\n      const autoFocusToFirstNode = () => {\n        if (!ref.current || !focusableNodesRef.current.length) {\n          return;\n        }\n        const activeElement = getActiveElementByAnotherElement(ref.current);\n        if (!contains(ref.current, activeElement)) {\n          focusableNodesRef.current[0].focus();\n        }\n      };\n      const timeoutId = setTimeout(autoFocusToFirstNode, timeout);\n      return () => {\n        clearTimeout(timeoutId);\n      };\n    },\n    [autoFocus, timeout, keyboardInput],\n  );\n\n  useIsomorphicLayoutEffect(\n    function tryToRestoreFocusOnUnmount() {\n      if (!ref.current || !restoreFocus) {\n        return;\n      }\n\n      const restoreFocusTo = getActiveElementByAnotherElement(ref.current);\n\n      return () => {\n        const shouldRestoreFocus =\n          typeof restoreFocus === 'function' ? restoreFocus() : restoreFocus;\n\n        if (!shouldRestoreFocus || !isHTMLElement(restoreFocusTo)) {\n          return;\n        }\n\n        setTimeout(() => {\n          if (restoreFocusTo) {\n            restoreFocusTo.focus();\n          }\n        }, timeout);\n      };\n    },\n    [restoreFocus, timeout],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    if (!ref.current) {\n      return;\n    }\n\n    const onDocumentKeydown = (event: KeyboardEvent) => {\n      const pressedKeyResult = pressedKey(event);\n\n      switch (pressedKeyResult) {\n        case Keys.TAB: {\n          if (!focusableNodesRef.current.length) {\n            return false;\n          }\n\n          const lastIdx = focusableNodesRef.current.length - 1;\n          const targetIdx = focusableNodesRef.current.findIndex((node) => node === event.target);\n\n          const shouldFocusFirstNode =\n            targetIdx === -1 || (targetIdx === lastIdx && !event.shiftKey);\n\n          if (shouldFocusFirstNode || (targetIdx === 0 && event.shiftKey)) {\n            event.preventDefault();\n\n            const node = focusableNodesRef.current[shouldFocusFirstNode ? 0 : lastIdx];\n\n            if (node !== getActiveElementByAnotherElement(node)) {\n              node.focus();\n            }\n\n            return false;\n          }\n\n          break;\n        }\n        case Keys.ESCAPE: {\n          if (onClose) {\n            event.preventDefault();\n            onClose();\n          }\n        }\n      }\n\n      return true;\n    };\n\n    const doc = getWindow(ref.current).document;\n    doc.addEventListener('keydown', onDocumentKeydown, {\n      capture: true,\n    });\n    return () => {\n      doc.removeEventListener('keydown', onDocumentKeydown, true);\n    };\n  }, [onClose, ref]);\n\n  return (\n    <Component tabIndex={-1} ref={ref} {...restProps}>\n      {children}\n    </Component>\n  );\n};\n"],"names":["React","useExternRef","FOCUSABLE_ELEMENTS_LIST","Keys","pressedKey","contains","getActiveElementByAnotherElement","getWindow","isHTMLElement","useIsomorphicLayoutEffect","AppRootContext","FOCUSABLE_ELEMENTS","join","FocusTrap","Component","onClose","autoFocus","restoreFocus","timeout","getRootRef","children","restProps","ref","keyboardInput","useContext","focusableNodesRef","useRef","collectFocusableNodesRef","current","nodes","querySelectorAll","forEach","focusableEl","display","visibility","getComputedStyle","push","length","tryToAutoFocusToFirstNode","autoFocusToFirstNode","activeElement","focus","timeoutId","setTimeout","clearTimeout","tryToRestoreFocusOnUnmount","restoreFocusTo","shouldRestoreFocus","onDocumentKeydown","event","pressedKeyResult","TAB","lastIdx","targetIdx","findIndex","node","target","shouldFocusFirstNode","shiftKey","preventDefault","ESCAPE","doc","document","addEventListener","capture","removeEventListener","tabIndex"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../../src/components/FocusTrap/FocusTrap.tsx"],"sourcesContent":["import { AllHTMLAttributes, useContext, useRef } from 'react';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { FOCUSABLE_ELEMENTS_LIST, Keys, pressedKey } from '../../lib/accessibility';\nimport {\n  contains,\n  getActiveElementByAnotherElement,\n  getWindow,\n  isHTMLElement,\n  useDOM,\n} from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { AppRootContext } from '../AppRoot/AppRootContext';\n\nconst FOCUSABLE_ELEMENTS: string = FOCUSABLE_ELEMENTS_LIST.join();\nexport interface FocusTrapProps<T extends HTMLElement = HTMLElement>\n  extends AllHTMLAttributes<T>,\n    HasRootRef<T>,\n    HasComponent {\n  autoFocus?: boolean;\n  restoreFocus?: boolean | (() => boolean);\n  timeout?: number;\n  onClose?: () => void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FocusTrap\n */\nexport const FocusTrap = <T extends HTMLElement = HTMLElement>({\n  Component = 'div',\n  onClose,\n  autoFocus = true,\n  restoreFocus = true,\n  timeout = 0,\n  getRootRef,\n  children,\n  ...restProps\n}: FocusTrapProps<T>) => {\n  const ref = useExternRef<T>(getRootRef);\n  const { document } = useDOM();\n\n  const { keyboardInput } = useContext(AppRootContext);\n  const focusableNodesRef = useRef<HTMLElement[]>([]);\n\n  const focusNodeByIndex = (nodeIndex: number) => {\n    const element = focusableNodesRef.current[nodeIndex];\n\n    if (element) {\n      element.focus();\n    }\n  };\n\n  const recalculateFocusableNodesRef = (parentNode: HTMLElement) => {\n    // eslint-disable-next-line no-restricted-properties\n    const newFocusableElements = parentNode.querySelectorAll<HTMLElement>(FOCUSABLE_ELEMENTS);\n\n    const nodes: HTMLElement[] = [];\n    newFocusableElements.forEach((focusableEl) => {\n      const { display, visibility } = getComputedStyle(focusableEl);\n      if (display !== 'none' && visibility !== 'hidden') {\n        nodes.push(focusableEl);\n      }\n    });\n\n    if (nodes.length === 0) {\n      // Чтобы фокус был хотя бы на родителе\n      nodes.push(parentNode);\n    }\n    focusableNodesRef.current = nodes;\n  };\n\n  const onMutateParentHandler = (parentNode: HTMLElement) => {\n    recalculateFocusableNodesRef(parentNode);\n\n    if (document) {\n      const activeElement = document.activeElement as HTMLElement;\n      const currentElementIndex = Math.max(\n        document.activeElement ? focusableNodesRef.current.indexOf(activeElement) : -1,\n        0,\n      );\n      focusNodeByIndex(currentElementIndex);\n    }\n  };\n\n  useIsomorphicLayoutEffect(\n    function collectFocusableNodesRef() {\n      if (!ref.current) {\n        return;\n      }\n      const parentNode = ref.current;\n      const observer = new MutationObserver(() => onMutateParentHandler(parentNode));\n      observer.observe(ref.current, {\n        subtree: true,\n        childList: true,\n      });\n      recalculateFocusableNodesRef(parentNode);\n      return () => observer.disconnect();\n    },\n    [ref],\n  );\n\n  useIsomorphicLayoutEffect(\n    function tryToAutoFocusToFirstNode() {\n      if (!ref.current || !autoFocus || !keyboardInput) {\n        return;\n      }\n      const autoFocusToFirstNode = () => {\n        if (!ref.current || !focusableNodesRef.current.length) {\n          return;\n        }\n        const activeElement = getActiveElementByAnotherElement(ref.current);\n        if (!contains(ref.current, activeElement)) {\n          focusableNodesRef.current[0].focus();\n        }\n      };\n      const timeoutId = setTimeout(autoFocusToFirstNode, timeout);\n      return () => {\n        clearTimeout(timeoutId);\n      };\n    },\n    [autoFocus, timeout, keyboardInput],\n  );\n\n  useIsomorphicLayoutEffect(\n    function tryToRestoreFocusOnUnmount() {\n      if (!ref.current || !restoreFocus) {\n        return;\n      }\n\n      const restoreFocusTo = getActiveElementByAnotherElement(ref.current);\n\n      return () => {\n        const shouldRestoreFocus =\n          typeof restoreFocus === 'function' ? restoreFocus() : restoreFocus;\n\n        if (!shouldRestoreFocus || !isHTMLElement(restoreFocusTo)) {\n          return;\n        }\n\n        setTimeout(() => {\n          if (restoreFocusTo) {\n            restoreFocusTo.focus();\n          }\n        }, timeout);\n      };\n    },\n    [restoreFocus, timeout],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    if (!ref.current) {\n      return;\n    }\n\n    const onDocumentKeydown = (event: KeyboardEvent) => {\n      const pressedKeyResult = pressedKey(event);\n\n      switch (pressedKeyResult) {\n        case Keys.TAB: {\n          if (!focusableNodesRef.current.length) {\n            return false;\n          }\n\n          const lastIdx = focusableNodesRef.current.length - 1;\n          const targetIdx = focusableNodesRef.current.findIndex((node) => node === event.target);\n\n          const shouldFocusFirstNode =\n            targetIdx === -1 || (targetIdx === lastIdx && !event.shiftKey);\n\n          if (shouldFocusFirstNode || (targetIdx === 0 && event.shiftKey)) {\n            event.preventDefault();\n\n            const node = focusableNodesRef.current[shouldFocusFirstNode ? 0 : lastIdx];\n\n            if (node !== getActiveElementByAnotherElement(node)) {\n              node.focus();\n            }\n\n            return false;\n          }\n\n          break;\n        }\n        case Keys.ESCAPE: {\n          if (onClose) {\n            event.preventDefault();\n            onClose();\n          }\n        }\n      }\n\n      return true;\n    };\n\n    const doc = getWindow(ref.current).document;\n    doc.addEventListener('keydown', onDocumentKeydown, {\n      capture: true,\n    });\n    return () => {\n      doc.removeEventListener('keydown', onDocumentKeydown, true);\n    };\n  }, [onClose, ref]);\n\n  return (\n    <Component tabIndex={-1} ref={ref} {...restProps}>\n      {children}\n    </Component>\n  );\n};\n"],"names":["useContext","useRef","useExternRef","FOCUSABLE_ELEMENTS_LIST","Keys","pressedKey","contains","getActiveElementByAnotherElement","getWindow","isHTMLElement","useDOM","useIsomorphicLayoutEffect","AppRootContext","FOCUSABLE_ELEMENTS","join","FocusTrap","Component","onClose","autoFocus","restoreFocus","timeout","getRootRef","children","restProps","ref","document","keyboardInput","focusableNodesRef","focusNodeByIndex","nodeIndex","element","current","focus","recalculateFocusableNodesRef","parentNode","newFocusableElements","querySelectorAll","nodes","forEach","focusableEl","display","visibility","getComputedStyle","push","length","onMutateParentHandler","activeElement","currentElementIndex","Math","max","indexOf","collectFocusableNodesRef","observer","MutationObserver","observe","subtree","childList","disconnect","tryToAutoFocusToFirstNode","autoFocusToFirstNode","timeoutId","setTimeout","clearTimeout","tryToRestoreFocusOnUnmount","restoreFocusTo","shouldRestoreFocus","onDocumentKeydown","event","pressedKeyResult","TAB","lastIdx","targetIdx","findIndex","node","target","shouldFocusFirstNode","shiftKey","preventDefault","ESCAPE","doc","addEventListener","capture","removeEventListener","tabIndex"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

@@ -3,5 +3,5 @@ export type SelectType = 'default' | 'plain' | 'accent';
 /**
  * @see https://vkcom.github.io/VKUI/#/Select
  */
-export declare const Select: <OptionT extends CustomSelectOptionInterface>({ children, ...props }: SelectProps<OptionT>) => import("react/jsx-runtime").JSX.Element;
+export declare const Select: <OptionT extends CustomSelectOptionInterface>({ children, className, ...props }: SelectProps<OptionT>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Select.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,2BAA2B,EAChC,KAAK,WAAW,EACjB,MAAM,8BAA8B,CAAC;AAEtC,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAExD;;GAEG;AACH,eAAO,MAAM,MAAM,wEAGhB,YAAY,OAAO,CAAC,4CAgDtB,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,KAAK,2BAA2B,EAChC,KAAK,WAAW,EACjB,MAAM,8BAA8B,CAAC;AAEtC,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAExD;;GAEG;AACH,eAAO,MAAM,MAAM,mFAIhB,YAAY,OAAO,CAAC,4CAqDtB,CAAC"}

package/dist/components/Select/Select.js

@@ -3,14 +3,16 @@ 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, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';
+import { classNames } from '@vkontakte/vkjs';
+import { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';
 import { CustomSelect } from '../CustomSelect/CustomSelect';
 import { NativeSelect } from '../NativeSelect/NativeSelect';
 /**
  * @see https://vkcom.github.io/VKUI/#/Select
  */ export const Select = (_param)=>{
-    var { children } = _param, props = _object_without_properties(_param, [
-        "children"
+    var { children, className } = _param, props = _object_without_properties(_param, [
+        "children",
+        "className"
     ]);
     const { options = [], searchable, emptyText, onInputChange, filterFn, popupDirection, renderOption, renderDropdown, fetching, onClose, onOpen, icon, ClearButton, allowClearButton, clearButtonTestId, dropdownOffsetDistance, dropdownAutoWidth, forceDropdownPortal, noMaxHeight, autoHideScrollbar, autoHideScrollbarDelay, labelTextTestId, nativeSelectTestId, after, mode } = props, restProps = _object_without_properties(props, [
         "options",
@@ -39,12 +41,16 @@ import { NativeSelect } from '../NativeSelect/NativeSelect';
         "after",
         "mode"
     ]);
-    const hasPointer = useAdaptivityHasPointer();
+    const { deviceType } = useAdaptivityConditionalRender();
     const nativeProps = restProps;
     return /*#__PURE__*/ _jsxs(React.Fragment, {
         children: [
-            (hasPointer === undefined || hasPointer) && /*#__PURE__*/ _jsx(CustomSelect, _object_spread({}, props)),
-            (hasPointer === undefined || !hasPointer) && /*#__PURE__*/ _jsx(NativeSelect, _object_spread_props(_object_spread({}, nativeProps), {
+            deviceType.desktop && /*#__PURE__*/ _jsx(CustomSelect, _object_spread({
+                className: classNames(className, deviceType.desktop.className)
+            }, props)),
+            deviceType.mobile && /*#__PURE__*/ _jsx(NativeSelect, _object_spread_props(_object_spread({
+                className: classNames(className, deviceType.mobile.className)
+            }, nativeProps), {
                 children: options.map(({ label, value })=>/*#__PURE__*/ _jsx("option", {
                         value: value,
                         children: label

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { HasOnlyExpectedProps } from '../../types';\nimport {\n  CustomSelect,\n  type CustomSelectOptionInterface,\n  type SelectProps,\n} from '../CustomSelect/CustomSelect';\nimport { NativeSelect, type NativeSelectProps } from '../NativeSelect/NativeSelect';\nexport type SelectType = 'default' | 'plain' | 'accent';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Select\n */\nexport const Select = <OptionT extends CustomSelectOptionInterface>({\n  children,\n  ...props\n}: SelectProps<OptionT>) => {\n  const {\n    options = [],\n    searchable,\n    emptyText,\n    onInputChange,\n    filterFn,\n    popupDirection,\n    renderOption,\n    renderDropdown,\n    fetching,\n    onClose,\n    onOpen,\n    icon,\n    ClearButton,\n    allowClearButton,\n    clearButtonTestId,\n    dropdownOffsetDistance,\n    dropdownAutoWidth,\n    forceDropdownPortal,\n    noMaxHeight,\n    autoHideScrollbar,\n    autoHideScrollbarDelay,\n    labelTextTestId,\n    nativeSelectTestId,\n    after,\n    mode,\n    ...restProps\n  } = props;\n\n  const hasPointer = useAdaptivityHasPointer();\n\n  const nativeProps: HasOnlyExpectedProps<typeof restProps, NativeSelectProps> = restProps;\n\n  return (\n    <React.Fragment>\n      {(hasPointer === undefined || hasPointer) && <CustomSelect {...props} />}\n      {(hasPointer === undefined || !hasPointer) && (\n        <NativeSelect {...nativeProps}>\n          {options.map(({ label, value }) => (\n            <option value={value} key={`${value}`}>\n              {label}\n            </option>\n          ))}\n        </NativeSelect>\n      )}\n    </React.Fragment>\n  );\n};\n"],"names":["React","useAdaptivityHasPointer","CustomSelect","NativeSelect","Select","children","props","options","searchable","emptyText","onInputChange","filterFn","popupDirection","renderOption","renderDropdown","fetching","onClose","onOpen","icon","ClearButton","allowClearButton","clearButtonTestId","dropdownOffsetDistance","dropdownAutoWidth","forceDropdownPortal","noMaxHeight","autoHideScrollbar","autoHideScrollbarDelay","labelTextTestId","nativeSelectTestId","after","mode","restProps","hasPointer","nativeProps","Fragment","undefined","map","label","value","option"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,sCAAsC;AAE9E,SACEC,YAAY,QAGP,+BAA+B;AACtC,SAASC,YAAY,QAAgC,+BAA+B;AAGpF;;CAEC,GACD,OAAO,MAAMC,SAAS;QAA8C,EAClEC,QAAQ,EAEa,WADlBC;QADHD;;IAGA,MAAM,EACJE,UAAU,EAAE,EACZC,UAAU,EACVC,SAAS,EACTC,aAAa,EACbC,QAAQ,EACRC,cAAc,EACdC,YAAY,EACZC,cAAc,EACdC,QAAQ,EACRC,OAAO,EACPC,MAAM,EACNC,IAAI,EACJC,WAAW,EACXC,gBAAgB,EAChBC,iBAAiB,EACjBC,sBAAsB,EACtBC,iBAAiB,EACjBC,mBAAmB,EACnBC,WAAW,EACXC,iBAAiB,EACjBC,sBAAsB,EACtBC,eAAe,EACfC,kBAAkB,EAClBC,KAAK,EACLC,IAAI,EAEL,GAAGzB,OADC0B,uCACD1B;QA1BFC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAIF,MAAME,aAAahC;IAEnB,MAAMiC,cAAyEF;IAE/E,qBACE,MAAChC,MAAMmC,QAAQ;;YACXF,CAAAA,eAAeG,aAAaH,UAAS,mBAAM,KAAC/B,iCAAiBI;YAC7D2B,CAAAA,eAAeG,aAAa,CAACH,UAAS,mBACtC,KAAC9B,sDAAiB+B;0BACf3B,QAAQ8B,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAEC,KAAK,EAAE,iBAC5B,KAACC;wBAAOD,OAAOA;kCACZD;uBADwB,CAAC,EAAEC,MAAM,CAAC;;;;AAQjD,EAAE"}
+{"version":3,"sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { HasOnlyExpectedProps } from '../../types';\nimport {\n  CustomSelect,\n  type CustomSelectOptionInterface,\n  type SelectProps,\n} from '../CustomSelect/CustomSelect';\nimport { NativeSelect, type NativeSelectProps } from '../NativeSelect/NativeSelect';\nexport type SelectType = 'default' | 'plain' | 'accent';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Select\n */\nexport const Select = <OptionT extends CustomSelectOptionInterface>({\n  children,\n  className,\n  ...props\n}: SelectProps<OptionT>) => {\n  const {\n    options = [],\n    searchable,\n    emptyText,\n    onInputChange,\n    filterFn,\n    popupDirection,\n    renderOption,\n    renderDropdown,\n    fetching,\n    onClose,\n    onOpen,\n    icon,\n    ClearButton,\n    allowClearButton,\n    clearButtonTestId,\n    dropdownOffsetDistance,\n    dropdownAutoWidth,\n    forceDropdownPortal,\n    noMaxHeight,\n    autoHideScrollbar,\n    autoHideScrollbarDelay,\n    labelTextTestId,\n    nativeSelectTestId,\n    after,\n    mode,\n    ...restProps\n  } = props;\n\n  const { deviceType } = useAdaptivityConditionalRender();\n\n  const nativeProps: HasOnlyExpectedProps<typeof restProps, NativeSelectProps> = restProps;\n\n  return (\n    <React.Fragment>\n      {deviceType.desktop && (\n        <CustomSelect className={classNames(className, deviceType.desktop.className)} {...props} />\n      )}\n      {deviceType.mobile && (\n        <NativeSelect\n          className={classNames(className, deviceType.mobile.className)}\n          {...nativeProps}\n        >\n          {options.map(({ label, value }) => (\n            <option value={value} key={`${value}`}>\n              {label}\n            </option>\n          ))}\n        </NativeSelect>\n      )}\n    </React.Fragment>\n  );\n};\n"],"names":["React","classNames","useAdaptivityConditionalRender","CustomSelect","NativeSelect","Select","children","className","props","options","searchable","emptyText","onInputChange","filterFn","popupDirection","renderOption","renderDropdown","fetching","onClose","onOpen","icon","ClearButton","allowClearButton","clearButtonTestId","dropdownOffsetDistance","dropdownAutoWidth","forceDropdownPortal","noMaxHeight","autoHideScrollbar","autoHideScrollbarDelay","labelTextTestId","nativeSelectTestId","after","mode","restProps","deviceType","nativeProps","Fragment","desktop","mobile","map","label","value","option"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,8BAA8B,QAAQ,6CAA6C;AAE5F,SACEC,YAAY,QAGP,+BAA+B;AACtC,SAASC,YAAY,QAAgC,+BAA+B;AAGpF;;CAEC,GACD,OAAO,MAAMC,SAAS;QAA8C,EAClEC,QAAQ,EACRC,SAAS,EAEY,WADlBC;QAFHF;QACAC;;IAGA,MAAM,EACJE,UAAU,EAAE,EACZC,UAAU,EACVC,SAAS,EACTC,aAAa,EACbC,QAAQ,EACRC,cAAc,EACdC,YAAY,EACZC,cAAc,EACdC,QAAQ,EACRC,OAAO,EACPC,MAAM,EACNC,IAAI,EACJC,WAAW,EACXC,gBAAgB,EAChBC,iBAAiB,EACjBC,sBAAsB,EACtBC,iBAAiB,EACjBC,mBAAmB,EACnBC,WAAW,EACXC,iBAAiB,EACjBC,sBAAsB,EACtBC,eAAe,EACfC,kBAAkB,EAClBC,KAAK,EACLC,IAAI,EAEL,GAAGzB,OADC0B,uCACD1B;QA1BFC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAIF,MAAM,EAAEE,UAAU,EAAE,GAAGjC;IAEvB,MAAMkC,cAAyEF;IAE/E,qBACE,MAAClC,MAAMqC,QAAQ;;YACZF,WAAWG,OAAO,kBACjB,KAACnC;gBAAaI,WAAWN,WAAWM,WAAW4B,WAAWG,OAAO,CAAC/B,SAAS;eAAOC;YAEnF2B,WAAWI,MAAM,kBAChB,KAACnC;gBACCG,WAAWN,WAAWM,WAAW4B,WAAWI,MAAM,CAAChC,SAAS;eACxD6B;0BAEH3B,QAAQ+B,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAEC,KAAK,EAAE,iBAC5B,KAACC;wBAAOD,OAAOA;kCACZD;uBADwB,CAAC,EAAEC,MAAM,CAAC;;;;AAQjD,EAAE"}

package/dist/components/Spacing/Spacing.d.ts

@@ -1,15 +1,26 @@
 import { HTMLAttributesWithRootRef } from '../../types';
-export declare const ALLOWED_SIZES: readonly ["3xs", "2xs", "xs", "s", "m", "l", "xl", "2xl", "3xl", "4xl"];
-type Size = (typeof ALLOWED_SIZES)[number];
+export declare const CUSTOM_CSS_TOKEN_FOR_USER_GAP = "--vkui_internal--Spacing_gap";
+export declare const sizesClassNames: {
+    '3xs': string;
+    '2xs': string;
+    xs: string;
+    s: string;
+    m: string;
+    l: string;
+    xl: string;
+    '2xl': string;
+    '3xl': string;
+    '4xl': string;
+};
+export type SpacingSize = keyof typeof sizesClassNames;
 export interface SpacingProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     /**
      * Высота спэйсинга
      */
-    size?: number | Size;
+    size?: number | SpacingSize;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Spacing
  */
-export declare const Spacing: ({ size, style: styleProp, ...restProps }: SpacingProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const Spacing: ({ size, style, className, ...restProps }: SpacingProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Spacing.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Spacing.d.ts","sourceRoot":"","sources":["../../../src/components/Spacing/Spacing.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAIxD,eAAO,MAAM,aAAa,yEAWhB,CAAC;AACX,KAAK,IAAI,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAE3C,MAAM,WAAW,YAAa,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC7E;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AACD;;GAEG;AACH,eAAO,MAAM,OAAO,6CAAoD,YAAY,4CAOnF,CAAC"}
+{"version":3,"file":"Spacing.d.ts","sourceRoot":"","sources":["../../../src/components/Spacing/Spacing.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAIxD,eAAO,MAAM,6BAA6B,iCAAiC,CAAC;AAE5E,eAAO,MAAM,eAAe;;;;;;;;;;;CAW3B,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,eAAe,CAAC;AAEvD,MAAM,WAAW,YAAa,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC7E;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;CAC7B;AACD;;GAEG;AACH,eAAO,MAAM,OAAO,6CAAoD,YAAY,4CAqBnF,CAAC"}

package/dist/components/Spacing/Spacing.js

@@ -2,42 +2,47 @@ 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 { RootComponent } from '../RootComponent/RootComponent';
-export const ALLOWED_SIZES = [
-    '3xs',
-    '2xs',
-    'xs',
-    's',
-    'm',
-    'l',
-    'xl',
-    '2xl',
-    '3xl',
-    '4xl'
-];
+export const CUSTOM_CSS_TOKEN_FOR_USER_GAP = '--vkui_internal--Spacing_gap';
+export const sizesClassNames = {
+    '3xs': "vkuiSpacing--3xs",
+    '2xs': "vkuiSpacing--2xs",
+    'xs': "vkuiSpacing--xs",
+    's': "vkuiSpacing--s",
+    'm': "vkuiSpacing--m",
+    'l': "vkuiSpacing--l",
+    'xl': "vkuiSpacing--xl",
+    '2xl': "vkuiSpacing--2xl",
+    '3xl': "vkuiSpacing--3xl",
+    '4xl': "vkuiSpacing--4xl"
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/Spacing
  */ export const Spacing = (_param)=>{
-    var { size = 'm', style: styleProp } = _param, restProps = _object_without_properties(_param, [
+    var { size = 'm', style, className } = _param, restProps = _object_without_properties(_param, [
         "size",
-        "style"
+        "style",
+        "className"
     ]);
-    const style = _object_spread({}, getSizeStyle(size), styleProp);
+    if (typeof size === 'string') {
+        className = className ? classNames(sizesClassNames[size], className) : sizesClassNames[size];
+    } else {
+        if (style) {
+            // @ts-expect-error: TS7053 В React.CSSProperties не учитывается Custom Properties
+            style[CUSTOM_CSS_TOKEN_FOR_USER_GAP] = size;
+        } else {
+            // @ts-expect-error: TS2353 В React.CSSProperties не учитывается Custom Properties
+            style = {
+                [CUSTOM_CSS_TOKEN_FOR_USER_GAP]: size
+            };
+        }
+    }
     return /*#__PURE__*/ _jsx(RootComponent, _object_spread_props(_object_spread({}, restProps), {
-        baseClassName: "vkuiSpacing",
-        style: style
+        style: style,
+        className: className,
+        baseClassName: "vkuiSpacing"
     }));
 };
-function getSizeStyle(size) {
-    const sizeValue = getSizeValue(size);
-    return {
-        height: sizeValue,
-        padding: `calc(${sizeValue} / 2px) 0`
-    };
-}
-function getSizeValue(size) {
-    return typeof size === 'string' ? `var(--vkui--spacing_size_${size})` : size;
-}
 
 //# sourceMappingURL=Spacing.js.map

package/dist/components/Spacing/Spacing.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Spacing/Spacing.tsx"],"sourcesContent":["import * as React from 'react';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Spacing.module.css';\n\nexport const ALLOWED_SIZES = [\n  '3xs',\n  '2xs',\n  'xs',\n  's',\n  'm',\n  'l',\n  'xl',\n  '2xl',\n  '3xl',\n  '4xl',\n] as const;\ntype Size = (typeof ALLOWED_SIZES)[number];\n\nexport interface SpacingProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Высота спэйсинга\n   */\n  size?: number | Size;\n}\n/**\n * @see https://vkcom.github.io/VKUI/#/Spacing\n */\nexport const Spacing = ({ size = 'm', style: styleProp, ...restProps }: SpacingProps) => {\n  const style: React.CSSProperties = {\n    ...getSizeStyle(size),\n    ...styleProp,\n  };\n\n  return <RootComponent {...restProps} baseClassName={styles['Spacing']} style={style} />;\n};\n\nfunction getSizeStyle(size: number | Size): React.CSSProperties {\n  const sizeValue = getSizeValue(size);\n\n  return {\n    height: sizeValue,\n    padding: `calc(${sizeValue} / 2px) 0`,\n  };\n}\n\nfunction getSizeValue(size: number | Size): `var(--vkui--spacing_size_${Size})` | number {\n  return typeof size === 'string' ? `var(--vkui--spacing_size_${size})` : size;\n}\n"],"names":["React","RootComponent","ALLOWED_SIZES","Spacing","size","style","styleProp","restProps","getSizeStyle","baseClassName","sizeValue","getSizeValue","height","padding"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,aAAa,QAAQ,iCAAiC;AAG/D,OAAO,MAAMC,gBAAgB;IAC3B;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;CACD,CAAU;AASX;;CAEC,GACD,OAAO,MAAMC,UAAU;QAAC,EAAEC,OAAO,GAAG,EAAEC,OAAOC,SAAS,EAA8B,WAAzBC;QAAjCH;QAAYC;;IACpC,MAAMA,QAA6B,mBAC9BG,aAAaJ,OACbE;IAGL,qBAAO,KAACL,uDAAkBM;QAAWE,aAAa;QAAqBJ,OAAOA;;AAChF,EAAE;AAEF,SAASG,aAAaJ,IAAmB;IACvC,MAAMM,YAAYC,aAAaP;IAE/B,OAAO;QACLQ,QAAQF;QACRG,SAAS,CAAC,KAAK,EAAEH,UAAU,SAAS,CAAC;IACvC;AACF;AAEA,SAASC,aAAaP,IAAmB;IACvC,OAAO,OAAOA,SAAS,WAAW,CAAC,yBAAyB,EAAEA,KAAK,CAAC,CAAC,GAAGA;AAC1E"}
+{"version":3,"sources":["../../../src/components/Spacing/Spacing.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Spacing.module.css';\n\nexport const CUSTOM_CSS_TOKEN_FOR_USER_GAP = '--vkui_internal--Spacing_gap';\n\nexport const sizesClassNames = {\n  '3xs': styles['Spacing--3xs'],\n  '2xs': styles['Spacing--2xs'],\n  'xs': styles['Spacing--xs'],\n  's': styles['Spacing--s'],\n  'm': styles['Spacing--m'],\n  'l': styles['Spacing--l'],\n  'xl': styles['Spacing--xl'],\n  '2xl': styles['Spacing--2xl'],\n  '3xl': styles['Spacing--3xl'],\n  '4xl': styles['Spacing--4xl'],\n};\n\nexport type SpacingSize = keyof typeof sizesClassNames;\n\nexport interface SpacingProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Высота спэйсинга\n   */\n  size?: number | SpacingSize;\n}\n/**\n * @see https://vkcom.github.io/VKUI/#/Spacing\n */\nexport const Spacing = ({ size = 'm', style, className, ...restProps }: SpacingProps) => {\n  if (typeof size === 'string') {\n    className = className ? classNames(sizesClassNames[size], className) : sizesClassNames[size];\n  } else {\n    if (style) {\n      // @ts-expect-error: TS7053 В React.CSSProperties не учитывается Custom Properties\n      style[CUSTOM_CSS_TOKEN_FOR_USER_GAP] = size;\n    } else {\n      // @ts-expect-error: TS2353 В React.CSSProperties не учитывается Custom Properties\n      style = { [CUSTOM_CSS_TOKEN_FOR_USER_GAP]: size };\n    }\n  }\n\n  return (\n    <RootComponent\n      {...restProps}\n      style={style}\n      className={className}\n      baseClassName={styles['Spacing']}\n    />\n  );\n};\n"],"names":["classNames","RootComponent","CUSTOM_CSS_TOKEN_FOR_USER_GAP","sizesClassNames","Spacing","size","style","className","restProps","baseClassName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,iCAAiC;AAG/D,OAAO,MAAMC,gCAAgC,+BAA+B;AAE5E,OAAO,MAAMC,kBAAkB;IAC7B,KAAK;IACL,KAAK;IACL,IAAI;IACJ,GAAG;IACH,GAAG;IACH,GAAG;IACH,IAAI;IACJ,KAAK;IACL,KAAK;IACL,KAAK;AACP,EAAE;AAUF;;CAEC,GACD,OAAO,MAAMC,UAAU;QAAC,EAAEC,OAAO,GAAG,EAAEC,KAAK,EAAEC,SAAS,EAA8B,WAAzBC;QAAjCH;QAAYC;QAAOC;;IAC3C,IAAI,OAAOF,SAAS,UAAU;QAC5BE,YAAYA,YAAYP,WAAWG,eAAe,CAACE,KAAK,EAAEE,aAAaJ,eAAe,CAACE,KAAK;IAC9F,OAAO;QACL,IAAIC,OAAO;YACT,kFAAkF;YAClFA,KAAK,CAACJ,8BAA8B,GAAGG;QACzC,OAAO;YACL,kFAAkF;YAClFC,QAAQ;gBAAE,CAACJ,8BAA8B,EAAEG;YAAK;QAClD;IACF;IAEA,qBACE,KAACJ,uDACKO;QACJF,OAAOA;QACPC,WAAWA;QACXE,aAAa;;AAGnB,EAAE"}

package/dist/components/ToolButton/ToolButton.d.ts

@@ -4,6 +4,11 @@ export interface ToolButtonProps extends TappableProps, AdaptiveIconRendererProp
     mode?: 'primary' | 'secondary' | 'tertiary' | 'outline';
     appearance?: 'accent' | 'neutral';
     direction?: 'row' | 'column';
+    /**
+     * Задаёт `50%` закругления для контейнера.
+     *
+     * > Note: игнорируется при передаче `children`.
+     */
     rounded?: boolean;
 }
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"ToolButton.d.ts","sourceRoot":"","sources":["../../../src/components/ToolButton/ToolButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,yBAAyB,EAC1B,MAAM,8CAA8C,CAAC;AACtD,OAAO,EAAY,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAyB/D,MAAM,WAAW,eAAgB,SAAQ,aAAa,EAAE,yBAAyB;IAC/E,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAAC;IACxD,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAClC,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,mHAWpB,eAAe,4CA0BjB,CAAC"}
+{"version":3,"file":"ToolButton.d.ts","sourceRoot":"","sources":["../../../src/components/ToolButton/ToolButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,yBAAyB,EAC1B,MAAM,8CAA8C,CAAC;AACtD,OAAO,EAAY,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAyB/D,MAAM,WAAW,eAAgB,SAAQ,aAAa,EAAE,yBAAyB;IAC/E,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAAC;IACxD,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAClC,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,mHAWpB,eAAe,4CA0BjB,CAAC"}

package/dist/components/ToolButton/ToolButton.js

@@ -22,7 +22,7 @@ const stylesDirection = {
 };
 const sizeYClassNames = {
     none: "vkuiToolButton--sizeY-none",
-    ['regular']: "vkuiToolButton--sizeY-regular"
+    regular: "vkuiToolButton--sizeY-regular"
 };
 /**
  * Кнопки, которые используются для вызова инструмента, вставки аттачей или
@@ -58,6 +58,7 @@ const sizeYClassNames = {
                 IconRegular: IconRegular
             }),
             hasChildren && /*#__PURE__*/ _jsx("span", {
+                className: "vkuiToolButton__text",
                 children: children
             })
         ]

package/dist/components/ToolButton/ToolButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ToolButton/ToolButton.tsx"],"sourcesContent":["import { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport {\n  AdaptiveIconRenderer,\n  AdaptiveIconRendererProps,\n} from '../AdaptiveIconRenderer/AdaptiveIconRenderer';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport styles from './ToolButton.module.css';\n\nconst stylesMode = {\n  primary: styles['ToolButton--mode-primary'],\n  secondary: styles['ToolButton--mode-secondary'],\n  tertiary: styles['ToolButton--mode-tertiary'],\n  outline: styles['ToolButton--mode-outline'],\n};\n\nconst stylesAppearance = {\n  accent: styles['ToolButton--appearance-accent'],\n  neutral: styles['ToolButton--appearance-neutral'],\n};\n\nconst stylesDirection = {\n  row: styles['ToolButton--direction-row'],\n  column: styles['ToolButton--direction-column'],\n};\n\nconst sizeYClassNames = {\n  none: styles['ToolButton--sizeY-none'],\n  ['regular']: styles['ToolButton--sizeY-regular'],\n};\n\nexport interface ToolButtonProps extends TappableProps, AdaptiveIconRendererProps {\n  mode?: 'primary' | 'secondary' | 'tertiary' | 'outline';\n  appearance?: 'accent' | 'neutral';\n  direction?: 'row' | 'column';\n  rounded?: boolean;\n}\n\n/**\n * Кнопки, которые используются для вызова инструмента, вставки аттачей или\n * для форматирования. Их можно использовать как кнопки для разового действия\n * или для включения/выключения режима.\n *\n * @see https://vkcom.github.io/VKUI/#/ToolButton\n */\nexport const ToolButton = ({\n  mode = 'primary',\n  appearance = 'accent',\n  direction = 'row',\n  onClick = noop,\n  className,\n  children,\n  IconCompact,\n  IconRegular,\n  rounded,\n  ...restProps\n}: ToolButtonProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const hasChildren = hasReactNode(children);\n\n  return (\n    <Tappable\n      hoverMode={styles['ToolButton--hover']}\n      activeMode={styles['ToolButton--active']}\n      Component={restProps.href ? 'a' : 'button'}\n      focusVisibleMode=\"outside\"\n      onClick={onClick}\n      className={classNames(\n        className,\n        styles['ToolButton'],\n        rounded && !hasChildren && styles['ToolButton--rounded'],\n        stylesMode[mode],\n        stylesAppearance[appearance],\n        stylesDirection[direction],\n        sizeY !== 'compact' && sizeYClassNames[sizeY],\n      )}\n      {...restProps}\n    >\n      <AdaptiveIconRenderer IconCompact={IconCompact} IconRegular={IconRegular} />\n      {hasChildren && <span>{children}</span>}\n    </Tappable>\n  );\n};\n"],"names":["classNames","hasReactNode","noop","useAdaptivity","AdaptiveIconRenderer","Tappable","stylesMode","primary","secondary","tertiary","outline","stylesAppearance","accent","neutral","stylesDirection","row","column","sizeYClassNames","none","ToolButton","mode","appearance","direction","onClick","className","children","IconCompact","IconRegular","rounded","restProps","sizeY","hasChildren","hoverMode","activeMode","Component","href","focusVisibleMode","span"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;AAAA,SAASA,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,kBAAkB;AACjE,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SACEC,oBAAoB,QAEf,+CAA+C;AACtD,SAASC,QAAQ,QAAuB,uBAAuB;AAG/D,MAAMC,aAAa;IACjBC,OAAO;IACPC,SAAS;IACTC,QAAQ;IACRC,OAAO;AACT;AAEA,MAAMC,mBAAmB;IACvBC,MAAM;IACNC,OAAO;AACT;AAEA,MAAMC,kBAAkB;IACtBC,GAAG;IACHC,MAAM;AACR;AAEA,MAAMC,kBAAkB;IACtBC,IAAI;IACJ,CAAC,UAAU;AACb;AASA;;;;;;CAMC,GACD,OAAO,MAAMC,aAAa;QAAC,EACzBC,OAAO,SAAS,EAChBC,aAAa,QAAQ,EACrBC,YAAY,KAAK,EACjBC,UAAUrB,IAAI,EACdsB,SAAS,EACTC,QAAQ,EACRC,WAAW,EACXC,WAAW,EACXC,OAAO,EAES,WADbC;QATHT;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAG3B;IAC3B,MAAM4B,cAAc9B,aAAawB;IAEjC,qBACE,MAACpB;QACC2B,SAAS;QACTC,UAAU;QACVC,WAAWL,UAAUM,IAAI,GAAG,MAAM;QAClCC,kBAAiB;QACjBb,SAASA;QACTC,WAAWxB,WACTwB,6BAEAI,WAAW,CAACG,0CACZzB,UAAU,CAACc,KAAK,EAChBT,gBAAgB,CAACU,WAAW,EAC5BP,eAAe,CAACQ,UAAU,EAC1BQ,UAAU,aAAab,eAAe,CAACa,MAAM;OAE3CD;;0BAEJ,KAACzB;gBAAqBsB,aAAaA;gBAAaC,aAAaA;;YAC5DI,6BAAe,KAACM;0BAAMZ;;;;AAG7B,EAAE"}
+{"version":3,"sources":["../../../src/components/ToolButton/ToolButton.tsx"],"sourcesContent":["import { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport {\n  AdaptiveIconRenderer,\n  AdaptiveIconRendererProps,\n} from '../AdaptiveIconRenderer/AdaptiveIconRenderer';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport styles from './ToolButton.module.css';\n\nconst stylesMode = {\n  primary: styles['ToolButton--mode-primary'],\n  secondary: styles['ToolButton--mode-secondary'],\n  tertiary: styles['ToolButton--mode-tertiary'],\n  outline: styles['ToolButton--mode-outline'],\n};\n\nconst stylesAppearance = {\n  accent: styles['ToolButton--appearance-accent'],\n  neutral: styles['ToolButton--appearance-neutral'],\n};\n\nconst stylesDirection = {\n  row: styles['ToolButton--direction-row'],\n  column: styles['ToolButton--direction-column'],\n};\n\nconst sizeYClassNames = {\n  none: styles['ToolButton--sizeY-none'],\n  regular: styles['ToolButton--sizeY-regular'],\n};\n\nexport interface ToolButtonProps extends TappableProps, AdaptiveIconRendererProps {\n  mode?: 'primary' | 'secondary' | 'tertiary' | 'outline';\n  appearance?: 'accent' | 'neutral';\n  direction?: 'row' | 'column';\n  /**\n   * Задаёт `50%` закругления для контейнера.\n   *\n   * > Note: игнорируется при передаче `children`.\n   */\n  rounded?: boolean;\n}\n\n/**\n * Кнопки, которые используются для вызова инструмента, вставки аттачей или\n * для форматирования. Их можно использовать как кнопки для разового действия\n * или для включения/выключения режима.\n *\n * @see https://vkcom.github.io/VKUI/#/ToolButton\n */\nexport const ToolButton = ({\n  mode = 'primary',\n  appearance = 'accent',\n  direction = 'row',\n  onClick = noop,\n  className,\n  children,\n  IconCompact,\n  IconRegular,\n  rounded,\n  ...restProps\n}: ToolButtonProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const hasChildren = hasReactNode(children);\n\n  return (\n    <Tappable\n      hoverMode={styles['ToolButton--hover']}\n      activeMode={styles['ToolButton--active']}\n      Component={restProps.href ? 'a' : 'button'}\n      focusVisibleMode=\"outside\"\n      onClick={onClick}\n      className={classNames(\n        className,\n        styles['ToolButton'],\n        rounded && !hasChildren && styles['ToolButton--rounded'],\n        stylesMode[mode],\n        stylesAppearance[appearance],\n        stylesDirection[direction],\n        sizeY !== 'compact' && sizeYClassNames[sizeY],\n      )}\n      {...restProps}\n    >\n      <AdaptiveIconRenderer IconCompact={IconCompact} IconRegular={IconRegular} />\n      {hasChildren && <span className={styles['ToolButton__text']}>{children}</span>}\n    </Tappable>\n  );\n};\n"],"names":["classNames","hasReactNode","noop","useAdaptivity","AdaptiveIconRenderer","Tappable","stylesMode","primary","secondary","tertiary","outline","stylesAppearance","accent","neutral","stylesDirection","row","column","sizeYClassNames","none","regular","ToolButton","mode","appearance","direction","onClick","className","children","IconCompact","IconRegular","rounded","restProps","sizeY","hasChildren","hoverMode","activeMode","Component","href","focusVisibleMode","span"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;AAAA,SAASA,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,kBAAkB;AACjE,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SACEC,oBAAoB,QAEf,+CAA+C;AACtD,SAASC,QAAQ,QAAuB,uBAAuB;AAG/D,MAAMC,aAAa;IACjBC,OAAO;IACPC,SAAS;IACTC,QAAQ;IACRC,OAAO;AACT;AAEA,MAAMC,mBAAmB;IACvBC,MAAM;IACNC,OAAO;AACT;AAEA,MAAMC,kBAAkB;IACtBC,GAAG;IACHC,MAAM;AACR;AAEA,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAcA;;;;;;CAMC,GACD,OAAO,MAAMC,aAAa;QAAC,EACzBC,OAAO,SAAS,EAChBC,aAAa,QAAQ,EACrBC,YAAY,KAAK,EACjBC,UAAUtB,IAAI,EACduB,SAAS,EACTC,QAAQ,EACRC,WAAW,EACXC,WAAW,EACXC,OAAO,EAES,WADbC;QATHT;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAG5B;IAC3B,MAAM6B,cAAc/B,aAAayB;IAEjC,qBACE,MAACrB;QACC4B,SAAS;QACTC,UAAU;QACVC,WAAWL,UAAUM,IAAI,GAAG,MAAM;QAClCC,kBAAiB;QACjBb,SAASA;QACTC,WAAWzB,WACTyB,6BAEAI,WAAW,CAACG,0CACZ1B,UAAU,CAACe,KAAK,EAChBV,gBAAgB,CAACW,WAAW,EAC5BR,eAAe,CAACS,UAAU,EAC1BQ,UAAU,aAAad,eAAe,CAACc,MAAM;OAE3CD;;0BAEJ,KAAC1B;gBAAqBuB,aAAaA;gBAAaC,aAAaA;;YAC5DI,6BAAe,KAACM;gBAAKb,SAAS;0BAA+BC;;;;AAGpE,EAAE"}

package/dist/components.css

@@ -1,5 +1,5 @@
 :root{--vkui_internal--tabbar_height:48px;--vkui_internal--grid_avatar_image_offset:2px;--vkui_internal--slider_thumb_size:28px;--vkui_internal--side_cell_gap:calc(var(--vkui--size_base_padding_horizontal--regular) - var(--vkui--spacing_size_s));--vkui_internal--panel_header_height:var(--vkui--size_panel_header_height--regular);--vkui_internal--outline_width:2px;--vkui_internal--outline:var(--vkui_internal--outline_width,2px) solid var(--vkui--color_stroke_accent);--vkui_internal--outline-reset:var(--vkui_internal--outline_width) solid transparent;--vkui_internal--popover_safe_zone_padding:8px;--vkui_internal--white:#fff;--vkui_internal--safe_area_inset_top:0px;--vkui_internal--safe_area_inset_right:0px;--vkui_internal--safe_area_inset_bottom:0px;--vkui_internal--safe_area_inset_left:0px;--vkui_internal--duration:0.7s;--vkui_internal--z_index_cell_dragging:100;--vkui_internal--z_index_tabs:2;--vkui_internal--z_index_fixed_layout:3;--vkui_internal--z_index_panel_header_context:4;--vkui_internal--z_index_panel_header_fade:5;--vkui_internal--z_index_pull_to_refresh:9;--vkui_internal--z_index_panel_header:10;--vkui_internal--z_index_split_layout_panel_header:11;--vkui_internal--z_index_tappable_state:0;--vkui_internal--z_index_tappable_element:1;--vkui_internal--z_index_banner_background:0;--vkui_internal--z_index_banner_content:1;--vkui_internal--z_index_banner_hover:2;--vkui_internal--z_index_form_field_element:1;--vkui_internal--z_index_form_field_border:2;--vkui_internal--z_index_form_field_status:3;--vkui_internal--z_index_form_field_border_hover:4;--vkui_internal--z_index_form_field_focus:5;--vkui_internal--z_index_form_field_side:6;--vkui_internal--z_index_image_base_img:-1;--vkui_internal--z_index_image_base_overlay:0;--vkui_internal--z_index_image_base_border:1;--vkui_internal--z_index_image_base_badge:2;--vkui_internal--z_index_horizontal_scroll_arrow:1}@supports (padding-top:constant(safe-area-inset-top)){:root{--vkui_internal--safe_area_inset_top:constant(safe-area-inset-top);--vkui_internal--safe_area_inset_right:constant(safe-area-inset-right);--vkui_internal--safe_area_inset_bottom:constant(safe-area-inset-bottom);--vkui_internal--safe_area_inset_left:constant(safe-area-inset-left)}}@supports (padding-top:env(safe-area-inset-top)){:root{--vkui_internal--safe_area_inset_top:env(safe-area-inset-top);--vkui_internal--safe_area_inset_right:env(safe-area-inset-right);--vkui_internal--safe_area_inset_bottom:env(safe-area-inset-bottom);--vkui_internal--safe_area_inset_left:env(safe-area-inset-left)}}
-@media (min-width:768px){.vkui-sizeX--compact-mq{display:none!important}}@media (max-width:767.9px){.vkui-sizeX--regular-mq{display:none!important}}@media (max-width:767.9px) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkui-sizeY--compact-mq{display:none!important}}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkui-sizeY--regular-mq{display:none!important}}@media (min-width:1024px){.vkui-viewWidth--tabletMinus-mq{display:none!important}}@media (max-width:1023.9px){.vkui-viewWidth--tabletPlus-mq{display:none!important}}.vkui-deviceType--desktop-forced,.vkui-deviceType--mobile-forced{display:none!important}@media (min-width:768px) and (min-height:720px),(min-width:768px) and (pointer:fine){.vkui-deviceType--mobile-mq{display:none!important}}@media (max-width:767.9px),(pointer:coarse) and (max-height:719.9px),(pointer:none) and (max-height:719.9px){.vkui-deviceType--desktop-mq{display:none!important}}
+@media (min-width:768px){.vkui-sizeX--compact-mq{display:none!important}}@media (max-width:767.9px){.vkui-sizeX--regular-mq{display:none!important}}@media (max-width:767.9px) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkui-sizeY--compact-mq{display:none!important}}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkui-sizeY--regular-mq{display:none!important}}@media (min-width:1024px){.vkui-viewWidth--tabletMinus-mq{display:none!important}}@media (max-width:1023.9px){.vkui-viewWidth--tabletPlus-mq{display:none!important}}@media (min-width:768px) and (min-height:720px),(min-width:768px) and (pointer:fine){.vkui-deviceType--mobile-mq{display:none!important}}@media (max-width:767.9px),(pointer:coarse) and (max-height:719.9px),(pointer:none) and (max-height:719.9px){.vkui-deviceType--desktop-mq{display:none!important}}
 :root{--vkui--size_border--regular:var(--vkui--size_border1x--regular)}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){:root{--vkui--size_border--regular:var(--vkui--size_border2x--regular)}}@media (-webkit-min-device-pixel-ratio:3),(min-resolution:3dppx){:root{--vkui--size_border--regular:var(--vkui--size_border3x--regular)}}
 .vkui-focus-visible{--vkui_internal--outline_width:2px}.vkui-focus-visible :focus,.vkui-focus-visible :focus-visible,.vkui-focus-visible:focus,.vkui-focus-visible:focus-visible{outline:none}.vkui-focus-visible.vkui-focus-visible--mode-outside{--vkui_internal--outline_offset:var(--vkui_internal--outline_width)}.vkui-focus-visible.vkui-focus-visible--mode-inside{--vkui_internal--outline_offset:calc(-1 * var(--vkui_internal--outline_width))}.vkui-focus-visible.vkui-focus-visible--focused.vkui-focus-visible--mode-inside,.vkui-focus-visible.vkui-focus-visible--focused.vkui-focus-visible--mode-outside{outline:var(--vkui_internal--outline);outline-offset:var(--vkui_internal--outline_offset)}@media (prefers-reduced-motion:no-preference){.vkui-focus-visible.vkui-focus-visible--focused.vkui-focus-visible--mode-inside,.vkui-focus-visible.vkui-focus-visible--focused.vkui-focus-visible--mode-outside{animation:vkuianimation-outline-offset .1s ease-in-out .01s forwards;outline-offset:0}.vkui-focus-visible.vkui-focus-visible--focused.vkui-focus-visible--mode-inside{outline-offset:calc(-2 * var(--vkui_internal--outline_width))}}@keyframes vkuianimation-outline-offset{to{outline-offset:var(--vkui_internal--outline_offset)}}
 @media (prefers-reduced-motion:no-preference){.vkui-anim-fade-in{animation:vkuianim-fade-in .1s ease-in forwards}.vkui-anim-fade-out{animation:vkuianim-fade-out .1s ease-out forwards}}@keyframes vkuianim-fade-in{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes vkuianim-fade-out{0%{opacity:1}to{opacity:0}}
@@ -25,13 +25,13 @@
 .vkuiSpinner{align-items:center;color:var(--vkui--color_icon_medium);display:flex;height:100%;justify-content:center;width:100%}.vkuiInternalPanelHeader .vkuiSpinner{color:currentColor}
 .vkuiButton{border:0;border-radius:var(--vkui--size_border_radius--regular);box-sizing:border-box;display:inline-block;margin:0;max-width:100%;min-height:var(--vkui--size_button_small_height--compact);min-width:var(--vkui--size_button_minimum_width--regular);padding:0;position:relative}@media (prefers-reduced-motion:no-preference){.vkuiButton{transition:background-color .15s ease-out,color .15s ease-out}}.vkuiButton--rounded{border-radius:var(--vkui--size_border_radius_rounded--regular)}.vkuiButton--loading{cursor:progress}.vkuiButton--singleIcon{min-width:auto;width:var(--vkui--size_button_small_height--compact)}.vkuiButton--sizeY-regular.vkuiButton--singleIcon{width:var(--vkui--size_button_small_height--regular)}@media (max-width:767.9px) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiButton--sizeY-none.vkuiButton--singleIcon{width:var(--vkui--size_button_small_height--regular)}}.vkuiButton--stretched{display:block;flex-basis:0;flex-grow:1;width:100%}.vkuiButton__in{align-items:center;box-sizing:border-box;display:flex;justify-content:center;min-height:inherit;text-align:center;width:100%}.vkuiButton--align-left .vkuiButton__in{justify-content:flex-start;text-align:left}.vkuiButton--align-right .vkuiButton__in{justify-content:flex-end;text-align:right}.vkuiButton[disabled]{opacity:var(--vkui--opacity_disable)}.vkuiButton--mode-outline[disabled]:not(.vkuiButton--appearance-overlay),.vkuiButton--mode-primary[disabled]:not(.vkuiButton--appearance-overlay):not(.vkuiButton--appearance-negative):not(.vkuiButton--appearance-positive),.vkuiButton--mode-secondary[disabled]:not(.vkuiButton--appearance-overlay),.vkuiButton--mode-tertiary[disabled]:not(.vkuiButton--appearance-overlay){opacity:.64}.vkuiButton__content{font-weight:var(--vkui--font_weight_accent2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiButton--size-s .vkuiButton__content:first-child{padding-left:var(--vkui--size_button_base_small_padding_horizontal--regular)}.vkuiButton--size-s .vkuiButton__after,.vkuiButton--size-s .vkuiButton__content:last-child{padding-right:var(--vkui--size_button_base_small_padding_horizontal--regular)}.vkuiButton--size-m .vkuiButton__content:first-child{padding-left:var(--vkui--size_button_base_medium_padding_horizontal--regular)}.vkuiButton--size-m .vkuiButton__after,.vkuiButton--size-m .vkuiButton__content:last-child{padding-right:var(--vkui--size_button_base_medium_padding_horizontal--regular)}.vkuiButton--size-l .vkuiButton__content:first-child{padding-left:var(--vkui--size_button_base_large_padding_horizontal--regular)}.vkuiButton--size-l .vkuiButton__after,.vkuiButton--size-l .vkuiButton__content:last-child{padding-right:var(--vkui--size_button_base_large_padding_horizontal--regular)}.vkuiButton--size-s .vkuiButton__before{padding-left:var(--vkui--size_button_base_small_padding_horizontal_icon--regular)}.vkuiButton--size-m .vkuiButton__before{padding-left:var(--vkui--size_button_base_medium_padding_horizontal_icon--regular)}.vkuiButton--size-l .vkuiButton__before{padding-left:var(--vkui--size_button_base_large_padding_horizontal_icon--regular)}.vkuiButton--mode-tertiary.vkuiButton--size-s .vkuiButton__content:first-child{padding-left:var(--vkui--size_button_tertiary_small_padding_horizontal--regular)}.vkuiButton--mode-tertiary.vkuiButton--size-s .vkuiButton__after,.vkuiButton--mode-tertiary.vkuiButton--size-s .vkuiButton__content:last-child{padding-right:var(--vkui--size_button_tertiary_small_padding_horizontal--regular)}.vkuiButton--mode-tertiary.vkuiButton--size-m .vkuiButton__content:first-child{padding-left:var(--vkui--size_button_tertiary_medium_padding_horizontal--regular)}.vkuiButton--mode-tertiary.vkuiButton--size-m .vkuiButton__after,.vkuiButton--mode-tertiary.vkuiButton--size-m .vkuiButton__content:last-child{padding-right:var(--vkui--size_button_tertiary_medium_padding_horizontal--regular)}.vkuiButton--mode-tertiary.vkuiButton--size-l .vkuiButton__content:first-child{padding-left:var(--vkui--size_button_tertiary_large_padding_horizontal--regular)}.vkuiButton--mode-tertiary.vkuiButton--size-l .vkuiButton__after,.vkuiButton--mode-tertiary.vkuiButton--size-l .vkuiButton__content:last-child{padding-right:var(--vkui--size_button_tertiary_large_padding_horizontal--regular)}.vkuiButton--mode-tertiary.vkuiButton--size-s .vkuiButton__before{padding-left:var(--vkui--size_button_tertiary_small_padding_horizontal_icon--regular)}.vkuiButton--mode-tertiary.vkuiButton--size-m .vkuiButton__before{padding-left:var(--vkui--size_button_tertiary_medium_padding_horizontal_icon--regular)}.vkuiButton--mode-tertiary.vkuiButton--size-l .vkuiButton__before{padding-left:var(--vkui--size_button_tertiary_large_padding_horizontal_icon--regular)}.vkuiButton--mode-tertiary.vkuiButton--singleIcon .vkuiButton__after,.vkuiButton--mode-tertiary.vkuiButton--singleIcon .vkuiButton__before,.vkuiButton--singleIcon .vkuiButton__after,.vkuiButton--singleIcon .vkuiButton__before{margin-left:auto;margin-right:auto;padding-left:0;padding-right:0}.vkuiButton--mode-link{background:none;min-width:auto}.vkuiButton--mode-link .vkuiButton__after,.vkuiButton--mode-link .vkuiButton__before,.vkuiButton--mode-link .vkuiButton__content:first-child,.vkuiButton--mode-link .vkuiButton__content:last-child,.vkuiButton--stretched .vkuiButton__after:only-child,.vkuiButton--stretched .vkuiButton__before:only-child{padding-left:0;padding-right:0}.vkuiButton__spinner{bottom:0;color:currentColor;left:0;position:absolute;right:0;top:0}.vkuiButton__spinner+.vkuiButton__in{visibility:hidden}.vkuiButton--mode-primary.vkuiButton--appearance-accent{background-color:var(--vkui--color_background_accent_themed)}.vkuiButton--mode-primary.vkuiButton--appearance-accent.vkuiButton--hover{background-color:var(--vkui--color_background_accent_themed--hover)}.vkuiButton--mode-primary.vkuiButton--appearance-accent.vkuiButton--active{background-color:var(--vkui--color_background_accent_themed--active)}.vkuiButton--mode-primary.vkuiButton--appearance-positive{background-color:var(--vkui--color_background_positive)}.vkuiButton--mode-primary.vkuiButton--appearance-positive.vkuiButton--hover{background-color:var(--vkui--color_background_positive--hover)}.vkuiButton--mode-primary.vkuiButton--appearance-positive.vkuiButton--active{background-color:var(--vkui--color_background_positive--active)}.vkuiButton--mode-primary.vkuiButton--appearance-negative{background-color:var(--vkui--color_background_negative)}.vkuiButton--mode-primary.vkuiButton--appearance-negative.vkuiButton--hover{background-color:var(--vkui--color_background_negative--hover)}.vkuiButton--mode-primary.vkuiButton--appearance-negative.vkuiButton--active{background-color:var(--vkui--color_background_negative--active)}.vkuiButton--mode-primary.vkuiButton--appearance-neutral{background-color:var(--vkui--color_background_secondary)}.vkuiButton--mode-primary.vkuiButton--appearance-neutral.vkuiButton--hover{background-color:var(--vkui--color_background_secondary--hover)}.vkuiButton--mode-primary.vkuiButton--appearance-neutral.vkuiButton--active{background-color:var(--vkui--color_background_secondary--active)}.vkuiButton--mode-primary.vkuiButton--appearance-accent-invariable{background-color:var(--vkui--color_background_accent)}.vkuiButton--mode-primary.vkuiButton--appearance-accent-invariable.vkuiButton--hover{background-color:var(--vkui--color_background_accent--hover)}.vkuiButton--mode-primary.vkuiButton--appearance-accent-invariable.vkuiButton--active{background-color:var(--vkui--color_background_accent--active)}.vkuiButton--mode-secondary{background-color:var(--vkui--color_background_secondary_alpha)}.vkuiButton--mode-secondary.vkuiButton--hover{background-color:var(--vkui--color_background_secondary_alpha--hover)}.vkuiButton--mode-secondary.vkuiButton--active{background-color:var(--vkui--color_background_secondary_alpha--active)}.vkuiButton--mode-outline,.vkuiButton--mode-tertiary{background-color:var(--vkui--color_transparent)}.vkuiButton--mode-outline.vkuiButton--hover,.vkuiButton--mode-tertiary.vkuiButton--hover{background-color:var(--vkui--color_transparent--hover)}.vkuiButton--mode-outline.vkuiButton--active,.vkuiButton--mode-tertiary.vkuiButton--active{background-color:var(--vkui--color_transparent--active)}.vkuiButton.vkuiButton--appearance-accent{color:var(--vkui--color_text_accent_themed)}.vkuiButton.vkuiButton--appearance-positive{color:var(--vkui--color_text_positive)}.vkuiButton.vkuiButton--appearance-negative{color:var(--vkui--color_text_negative)}.vkuiButton.vkuiButton--appearance-neutral{color:var(--vkui--color_text_primary)}.vkuiButton.vkuiButton--appearance-accent-invariable{color:var(--vkui--color_text_accent)}.vkuiButton--mode-primary.vkuiButton--appearance-accent{color:var(--vkui--color_text_contrast_themed)}.vkuiButton--mode-primary.vkuiButton--appearance-accent-invariable,.vkuiButton--mode-primary.vkuiButton--appearance-negative,.vkuiButton--mode-primary.vkuiButton--appearance-positive{color:var(--vkui--color_text_contrast)}.vkuiButton--mode-link.vkuiButton--hover{opacity:.8}.vkuiButton--mode-link.vkuiButton--active{opacity:.7}.vkuiButton--mode-outline.vkuiButton--appearance-accent,.vkuiButton--mode-outline.vkuiButton--appearance-accent.vkuiButton--active,.vkuiButton--mode-outline.vkuiButton--appearance-accent.vkuiButton--hover{box-shadow:inset 0 0 0 1px var(--vkui--color_stroke_accent_themed)}.vkuiButton--mode-outline.vkuiButton--appearance-positive{box-shadow:inset 0 0 0 1px var(--vkui--color_stroke_positive)}.vkuiButton--mode-outline.vkuiButton--appearance-positive.vkuiButton--hover{box-shadow:inset 0 0 0 1px var(--vkui--color_stroke_positive--hover)}.vkuiButton--mode-outline.vkuiButton--appearance-positive.vkuiButton--active{box-shadow:inset 0 0 0 1px var(--vkui--color_stroke_positive--active)}.vkuiButton--mode-outline.vkuiButton--appearance-negative{box-shadow:inset 0 0 0 1px var(--vkui--color_stroke_negative)}.vkuiButton--mode-outline.vkuiButton--appearance-negative.vkuiButton--hover{box-shadow:inset 0 0 0 1px var(--vkui--color_stroke_negative--hover)}.vkuiButton--mode-outline.vkuiButton--appearance-negative.vkuiButton--active{box-shadow:inset 0 0 0 1px var(--vkui--color_stroke_negative--active)}.vkuiButton--mode-outline.vkuiButton--appearance-neutral{box-shadow:inset 0 0 0 1px var(--vkui--color_field_border_alpha)}.vkuiButton--mode-outline.vkuiButton--appearance-neutral.vkuiButton--hover{background-color:var(--vkui--color_background_secondary--hover);box-shadow:unset}.vkuiButton--mode-outline.vkuiButton--appearance-neutral.vkuiButton--active{background-color:var(--vkui--color_background_secondary--active);box-shadow:unset}.vkuiButton--mode-outline.vkuiButton--appearance-accent-invariable{box-shadow:inset 0 0 0 1px var(--vkui--color_stroke_accent)}.vkuiButton--mode-primary.vkuiButton--appearance-overlay{background-color:var(--vkui--color_background_contrast)}.vkuiButton--mode-primary.vkuiButton--appearance-overlay.vkuiButton--hover{background-color:var(--vkui--color_background_contrast--hover)}.vkuiButton--mode-primary.vkuiButton--appearance-overlay.vkuiButton--active{background-color:var(--vkui--color_background_contrast--active)}.vkuiButton--mode-secondary.vkuiButton--appearance-overlay{background-color:var(--vkui--color_background_contrast_secondary_alpha)}.vkuiButton--mode-outline.vkuiButton--appearance-overlay.vkuiButton--hover,.vkuiButton--mode-secondary.vkuiButton--appearance-overlay.vkuiButton--hover,.vkuiButton--mode-tertiary.vkuiButton--appearance-overlay.vkuiButton--hover{background-color:var(--vkui--color_background_contrast_secondary_alpha--hover)}.vkuiButton--mode-outline.vkuiButton--appearance-overlay.vkuiButton--active,.vkuiButton--mode-secondary.vkuiButton--appearance-overlay.vkuiButton--active,.vkuiButton--mode-tertiary.vkuiButton--appearance-overlay.vkuiButton--active{background-color:var(--vkui--color_background_contrast_secondary_alpha--active)}.vkuiButton--mode-primary.vkuiButton--appearance-overlay{color:var(--vkui--color_text_primary_invariably)}.vkuiButton--mode-primary.vkuiButton--appearance-overlay.vkuiButton--hover{color:var(--vkui--color_text_primary_invariably--hover)}.vkuiButton--mode-primary.vkuiButton--appearance-overlay.vkuiButton--active{color:var(--vkui--color_text_primary_invariably--active)}.vkuiButton--mode-link.vkuiButton--appearance-overlay,.vkuiButton--mode-outline.vkuiButton--appearance-overlay,.vkuiButton--mode-secondary.vkuiButton--appearance-overlay,.vkuiButton--mode-tertiary.vkuiButton--appearance-overlay{color:var(--vkui--color_text_contrast)}.vkuiButton--mode-outline.vkuiButton--appearance-overlay{box-shadow:inset 0 0 0 1px var(--vkui--color_stroke_contrast)}.vkuiButton--mode-outline.vkuiButton--appearance-overlay.vkuiButton--hover{box-shadow:inset 0 0 0 1px var(--vkui--color_stroke_contrast--hover)}.vkuiButton--mode-outline.vkuiButton--appearance-overlay.vkuiButton--active{box-shadow:inset 0 0 0 1px var(--vkui--color_stroke_contrast--active)}.vkuiButton__after:not(:first-child),.vkuiButton__before:not(:last-child)+.vkuiButton__content{margin-left:6px}.vkuiButton--size-l .vkuiButton__after:not(:first-child),.vkuiButton--size-l .vkuiButton__before:not(:last-child)+.vkuiButton__content{margin-left:8px}.vkuiButton--size-s .vkuiButton__content{font-family:var(--vkui--font_subhead--font_family--regular);font-size:var(--vkui--font_subhead--font_size--compact);line-height:var(--vkui--font_subhead--line_height--compact)}.vkuiButton--sizeY-regular.vkuiButton--size-s .vkuiButton__content{font-family:var(--vkui--font_subhead--font_family--regular);font-size:var(--vkui--font_subhead--font_size--regular);line-height:var(--vkui--font_subhead--line_height--regular)}@media (max-width:767.9px) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiButton--sizeY-none.vkuiButton--size-s .vkuiButton__content{font-family:var(--vkui--font_subhead--font_family--regular);font-size:var(--vkui--font_subhead--font_size--regular);line-height:var(--vkui--font_subhead--line_height--regular)}}.vkuiButton--size-m .vkuiButton__content{font-family:var(--vkui--font_headline2--font_family--regular);font-size:var(--vkui--font_headline2--font_size--compact);line-height:var(--vkui--font_headline2--line_height--compact)}.vkuiButton--sizeY-regular.vkuiButton--size-m .vkuiButton__content{font-family:var(--vkui--font_headline2--font_family--regular);font-size:var(--vkui--font_headline2--font_size--regular);line-height:var(--vkui--font_headline2--line_height--regular)}@media (max-width:767.9px) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiButton--sizeY-none.vkuiButton--size-m .vkuiButton__content{font-family:var(--vkui--font_headline2--font_family--regular);font-size:var(--vkui--font_headline2--font_size--regular);line-height:var(--vkui--font_headline2--line_height--regular)}}.vkuiButton--size-l .vkuiButton__content{font-family:var(--vkui--font_headline1--font_family--regular);font-size:var(--vkui--font_headline1--font_size--compact);line-height:var(--vkui--font_headline1--line_height--compact)}.vkuiButton--sizeY-regular.vkuiButton--size-l .vkuiButton__content{font-family:var(--vkui--font_headline1--font_family--regular);font-size:var(--vkui--font_headline1--font_size--regular);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){.vkuiButton--sizeY-none.vkuiButton--size-l .vkuiButton__content{font-family:var(--vkui--font_headline1--font_family--regular);font-size:var(--vkui--font_headline1--font_size--regular);line-height:var(--vkui--font_headline1--line_height--regular)}}.vkuiButton--sizeY-regular.vkuiButton--size-l.vkuiButton--ios .vkuiButton__content{font-family:var(--vkui--font_title3--font_family--regular);font-size:var(--vkui--font_title3--font_size--regular);line-height:var(--vkui--font_title3--line_height--regular)}@media (max-width:767.9px) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiButton--sizeY-none.vkuiButton--size-l.vkuiButton--ios .vkuiButton__content{font-family:var(--vkui--font_title3--font_family--regular);font-size:var(--vkui--font_title3--font_size--regular);line-height:var(--vkui--font_title3--line_height--regular)}}.vkuiButton--size-m{min-height:var(--vkui--size_button_medium_height--compact)}.vkuiButton--sizeY-regular.vkuiButton--size-m{min-height:var(--vkui--size_button_medium_height--regular)}@media (max-width:767.9px) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiButton--sizeY-none.vkuiButton--size-m{min-height:var(--vkui--size_button_medium_height--regular)}}.vkuiButton--size-m.vkuiButton--singleIcon{width:var(--vkui--size_button_medium_height--compact)}.vkuiButton--sizeY-regular.vkuiButton--size-m.vkuiButton--singleIcon{width:var(--vkui--size_button_medium_height--regular)}@media (max-width:767.9px) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiButton--sizeY-none.vkuiButton--size-m.vkuiButton--singleIcon{width:var(--vkui--size_button_medium_height--regular)}}.vkuiButton--size-l{min-height:var(--vkui--size_button_large_height--compact)}.vkuiButton--sizeY-regular.vkuiButton--size-l{min-height:var(--vkui--size_button_large_height--regular)}@media (max-width:767.9px) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiButton--sizeY-none.vkuiButton--size-l{min-height:var(--vkui--size_button_large_height--regular)}}.vkuiButton--size-l.vkuiButton--singleIcon{width:var(--vkui--size_button_large_height--compact)}.vkuiButton--sizeY-regular.vkuiButton--size-l.vkuiButton--singleIcon{width:var(--vkui--size_button_large_height--regular)}@media (max-width:767.9px) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiButton--sizeY-none.vkuiButton--size-l.vkuiButton--singleIcon{width:var(--vkui--size_button_large_height--regular)}}.vkuiButton--sizeY-regular{min-height:var(--vkui--size_button_small_height--regular)}@media (max-width:767.9px) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiButton--sizeY-none{min-height:var(--vkui--size_button_small_height--regular)}}.vkuiButton--mode-primary.vkuiButton--appearance-accent{--vkui_internal--counter_inherit_background:var(--vkui--color_background_content);--vkui_internal--counter_inherit_color:var(--vkui--color_text_accent_themed)}.vkuiButton--mode-outline.vkuiButton--appearance-accent,.vkuiButton--mode-secondary.vkuiButton--appearance-accent,.vkuiButton--mode-tertiary.vkuiButton--appearance-accent{--vkui_internal--counter_inherit_background:var(--vkui--color_background_accent_themed);--vkui_internal--counter_inherit_color:var(--vkui--color_text_contrast_themed)}.vkuiButton--mode-primary.vkuiButton--appearance-positive{--vkui_internal--counter_inherit_background:var(--vkui--color_background_contrast);--vkui_internal--counter_inherit_color:var(--vkui--color_text_positive)}.vkuiButton--mode-outline.vkuiButton--appearance-positive,.vkuiButton--mode-secondary.vkuiButton--appearance-positive,.vkuiButton--mode-tertiary.vkuiButton--appearance-positive{--vkui_internal--counter_inherit_background:var(--vkui--color_background_positive);--vkui_internal--counter_inherit_color:var(--vkui--color_text_contrast)}.vkuiButton--mode-primary.vkuiButton--appearance-negative{--vkui_internal--counter_inherit_background:var(--vkui--color_background_contrast);--vkui_internal--counter_inherit_color:var(--vkui--color_text_negative)}.vkuiButton--mode-outline.vkuiButton--appearance-negative,.vkuiButton--mode-secondary.vkuiButton--appearance-negative,.vkuiButton--mode-tertiary.vkuiButton--appearance-negative{--vkui_internal--counter_inherit_background:var(--vkui--color_background_negative);--vkui_internal--counter_inherit_color:var(--vkui--color_text_contrast)}.vkuiButton--mode-primary.vkuiButton--appearance-neutral{--vkui_internal--counter_inherit_background:var(--vkui--color_background_contrast);--vkui_internal--counter_inherit_color:var(--vkui--color_text_primary_invariably)}.vkuiButton--mode-outline.vkuiButton--appearance-neutral,.vkuiButton--mode-secondary.vkuiButton--appearance-neutral,.vkuiButton--mode-tertiary.vkuiButton--appearance-neutral{--vkui_internal--counter_inherit_background:var(--vkui--color_background_accent);--vkui_internal--counter_inherit_color:var(--vkui--color_text_contrast)}.vkuiButton--mode-primary.vkuiButton--appearance-overlay{--vkui_internal--counter_inherit_background:var(--vkui--color_icon_primary_invariably);--vkui_internal--counter_inherit_color:var(--vkui--color_text_contrast)}.vkuiButton--mode-outline.vkuiButton--appearance-overlay,.vkuiButton--mode-secondary.vkuiButton--appearance-overlay,.vkuiButton--mode-tertiary.vkuiButton--appearance-overlay{--vkui_internal--counter_inherit_background:var(--vkui--color_background_contrast);--vkui_internal--counter_inherit_color:var(--vkui--color_text_primary_invariably)}
 .vkuiIconButton{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;border-radius:9999px;box-shadow:none;color:currentColor;display:block;height:48px;margin:0;padding:0;position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.vkuiIconButton--sizeY-compact{height:44px}.vkuiIconButton[disabled]{opacity:var(--vkui--opacity_disable_accessibility)}.vkuiIconButton--ios{border-radius:var(--vkui--size_border_radius--regular)}.vkuiIconButton .vkuiIcon--16{padding:16px}.vkuiIconButton .vkuiIcon--16.vkuiIcon--w-8{padding:16px 14px}.vkuiIconButton--sizeY-compact .vkuiIcon--16,.vkuiIconButton--sizeY-compact .vkuiIcon--16.vkuiIcon--w-8{padding:14px}.vkuiIconButton .vkuiIcon--24{padding:12px}.vkuiIconButton .vkuiIcon--28,.vkuiIconButton--sizeY-compact .vkuiIcon--24{padding:10px}.vkuiIconButton--sizeY-compact .vkuiIcon--28{padding:8px}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiIconButton--sizeY-none{height:44px}.vkuiIconButton--sizeY-none .vkuiIcon--16,.vkuiIconButton--sizeY-none .vkuiIcon--16.vkuiIcon--w-8{padding:14px}.vkuiIconButton--sizeY-none .vkuiIcon--24{padding:10px}.vkuiIconButton--sizeY-none .vkuiIcon--28{padding:8px}}.vkuiInternalFormField__after .vkuiIconButton,.vkuiInternalFormItem--removable .vkuiInternalRemovable__content>.vkuiIconButton,.vkuiInternalFormLayoutGroup--removable .vkuiInternalRemovable__content>.vkuiIconButton{align-content:center;align-items:center;border-radius:var(--vkui--size_border_radius--regular);display:flex;height:var(--vkui--size_field_height--regular);justify-content:center;width:var(--vkui--size_field_height--regular)}.vkuiInternalFormField__after .vkuiIconButton .vkuiIcon.vkuiIcon.vkuiIcon{padding:0}.vkuiInternalFormField__after .vkuiIconButton--sizeY-compact{height:var(--vkui--size_field_height--compact);width:var(--vkui--size_field_height--compact)}.vkuiInternalFormItem--removable .vkuiInternalRemovable__content>.vkuiIconButton--sizeY-compact,.vkuiInternalFormLayoutGroup--removable .vkuiInternalRemovable__content>.vkuiIconButton--sizeY-compact{height:var(--vkui--size_field_height--compact)}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiInternalFormField__after .vkuiIconButton--sizeY-none{height:var(--vkui--size_field_height--compact);width:var(--vkui--size_field_height--compact)}.vkuiInternalFormItem--removable .vkuiInternalRemovable__content>.vkuiIconButton--sizeY-none,.vkuiInternalFormLayoutGroup--removable .vkuiInternalRemovable__content>.vkuiIconButton--sizeY-none{height:var(--vkui--size_field_height--compact)}}.vkuiInternalSimpleCell__after .vkuiIconButton:last-child{margin-right:-12px}.vkuiInternalSimpleCell__after .vkuiIconButton--ios:last-child{margin-right:-9px}.vkuiInternalAlert__dismiss.vkuiIconButton{height:36px;padding:8px}
-.vkuiToolButton{align-items:center;border:0;border-radius:var(--vkui--size_border_radius_paper--regular);box-sizing:border-box;display:flex;flex-basis:0;flex-grow:1;font-family:var(--vkui--font_caption1--font_family--regular);font-size:var(--vkui--font_caption1--font_size--regular);justify-content:center;line-height:var(--vkui--font_caption1--line_height--regular);margin:0;padding:10px;position:relative;text-decoration:none;width:100%}.vkuiToolButton--rounded{border-radius:var(--vkui--size_border_radius_rounded--regular)}.vkuiToolButton--sizeY-regular{font-family:var(--vkui--font_subhead--font_family--regular);font-size:var(--vkui--font_subhead--font_size--regular);line-height:var(--vkui--font_subhead--line_height--regular)}@media (max-width:767.9px) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiToolButton--sizeY-none{font-family:var(--vkui--font_subhead--font_family--regular);font-size:var(--vkui--font_subhead--font_size--regular);line-height:var(--vkui--font_subhead--line_height--regular)}}.vkuiToolButton[disabled]{opacity:var(--vkui--opacity_disable)}.vkuiToolButton--direction-row{flex-direction:row}.vkuiToolButton--direction-column{flex-direction:column}.vkuiToolButton--direction-row>*{margin-right:4px}.vkuiToolButton--direction-row>:last-child{margin-right:0}.vkuiToolButton--direction-column>*{margin-bottom:4px}.vkuiToolButton--direction-column>:last-child{margin-bottom:0}.vkuiToolButton--mode-primary.vkuiToolButton--appearance-accent{background-color:var(--vkui--color_background_accent_themed)}.vkuiToolButton--mode-primary.vkuiToolButton--appearance-accent.vkuiToolButton--hover{background-color:var(--vkui--color_background_accent_themed--hover)}.vkuiToolButton--mode-primary.vkuiToolButton--appearance-accent.vkuiToolButton--active{background-color:var(--vkui--color_background_accent_themed--active)}.vkuiToolButton--mode-primary.vkuiToolButton--appearance-neutral{background-color:var(--vkui--color_background_secondary)}.vkuiToolButton--mode-primary.vkuiToolButton--appearance-neutral.vkuiToolButton--hover{background-color:var(--vkui--color_background_secondary--hover)}.vkuiToolButton--mode-primary.vkuiToolButton--appearance-neutral.vkuiToolButton--active{background-color:var(--vkui--color_background_secondary--active)}.vkuiToolButton--mode-secondary{background-color:var(--vkui--color_background_secondary_alpha)}.vkuiToolButton--mode-secondary.vkuiToolButton--hover{background-color:var(--vkui--color_background_secondary_alpha--hover)}.vkuiToolButton--mode-secondary.vkuiToolButton--active{background-color:var(--vkui--color_background_secondary_alpha--active)}.vkuiToolButton--mode-outline,.vkuiToolButton--mode-tertiary{background-color:var(--vkui--color_transparent)}.vkuiToolButton--mode-outline.vkuiToolButton--hover,.vkuiToolButton--mode-tertiary.vkuiToolButton--hover{background-color:var(--vkui--color_transparent--hover)}.vkuiToolButton--mode-outline.vkuiToolButton--active,.vkuiToolButton--mode-tertiary.vkuiToolButton--active{background-color:var(--vkui--color_transparent--active)}.vkuiToolButton.vkuiToolButton--appearance-accent{color:var(--vkui--color_text_accent_themed)}.vkuiToolButton.vkuiToolButton--appearance-neutral{color:var(--vkui--color_text_primary)}.vkuiToolButton--mode-primary.vkuiToolButton--appearance-accent{color:var(--vkui--color_text_contrast_themed)}.vkuiToolButton--mode-outline.vkuiToolButton--appearance-accent,.vkuiToolButton--mode-outline.vkuiToolButton--appearance-accent.vkuiToolButton--active,.vkuiToolButton--mode-outline.vkuiToolButton--appearance-accent.vkuiToolButton--hover{box-shadow:inset 0 0 0 1px var(--vkui--color_stroke_accent_themed)}.vkuiToolButton--mode-outline.vkuiToolButton--appearance-neutral{box-shadow:inset 0 0 0 1px var(--vkui--color_field_border_alpha)}.vkuiToolButton--mode-outline.vkuiToolButton--appearance-neutral.vkuiToolButton--hover{background-color:var(--vkui--color_background_secondary--hover);box-shadow:unset}.vkuiToolButton--mode-outline.vkuiToolButton--appearance-neutral.vkuiToolButton--active{background-color:var(--vkui--color_background_secondary--active);box-shadow:unset}
+.vkuiToolButton{align-items:center;border:0;border-radius:var(--vkui--size_border_radius_paper--regular);box-sizing:border-box;display:flex;flex-basis:0;flex-grow:1;font-family:var(--vkui--font_caption1--font_family--regular);font-size:var(--vkui--font_caption1--font_size--regular);justify-content:center;line-height:var(--vkui--font_caption1--line_height--regular);margin:0;padding:10px;position:relative;text-decoration:none;width:100%}.vkuiToolButton--rounded{border-radius:var(--vkui--size_border_radius_rounded--regular)}.vkuiToolButton--sizeY-regular{font-family:var(--vkui--font_subhead--font_family--regular);font-size:var(--vkui--font_subhead--font_size--regular);line-height:var(--vkui--font_subhead--line_height--regular)}@media (max-width:767.9px) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiToolButton--sizeY-none{font-family:var(--vkui--font_subhead--font_family--regular);font-size:var(--vkui--font_subhead--font_size--regular);line-height:var(--vkui--font_subhead--line_height--regular)}}.vkuiToolButton[disabled]{opacity:var(--vkui--opacity_disable)}.vkuiToolButton--direction-row{flex-direction:row}.vkuiToolButton--direction-column{flex-direction:column}.vkuiToolButton--direction-row .vkuiToolButton__text{margin-left:4px}.vkuiToolButton--direction-column .vkuiToolButton__text{margin-top:4px}.vkuiToolButton--mode-primary.vkuiToolButton--appearance-accent{background-color:var(--vkui--color_background_accent_themed)}.vkuiToolButton--mode-primary.vkuiToolButton--appearance-accent.vkuiToolButton--hover{background-color:var(--vkui--color_background_accent_themed--hover)}.vkuiToolButton--mode-primary.vkuiToolButton--appearance-accent.vkuiToolButton--active{background-color:var(--vkui--color_background_accent_themed--active)}.vkuiToolButton--mode-primary.vkuiToolButton--appearance-neutral{background-color:var(--vkui--color_background_secondary)}.vkuiToolButton--mode-primary.vkuiToolButton--appearance-neutral.vkuiToolButton--hover{background-color:var(--vkui--color_background_secondary--hover)}.vkuiToolButton--mode-primary.vkuiToolButton--appearance-neutral.vkuiToolButton--active{background-color:var(--vkui--color_background_secondary--active)}.vkuiToolButton--mode-secondary{background-color:var(--vkui--color_background_secondary_alpha)}.vkuiToolButton--mode-secondary.vkuiToolButton--hover{background-color:var(--vkui--color_background_secondary_alpha--hover)}.vkuiToolButton--mode-secondary.vkuiToolButton--active{background-color:var(--vkui--color_background_secondary_alpha--active)}.vkuiToolButton--mode-outline,.vkuiToolButton--mode-tertiary{background-color:var(--vkui--color_transparent)}.vkuiToolButton--mode-outline.vkuiToolButton--hover,.vkuiToolButton--mode-tertiary.vkuiToolButton--hover{background-color:var(--vkui--color_transparent--hover)}.vkuiToolButton--mode-outline.vkuiToolButton--active,.vkuiToolButton--mode-tertiary.vkuiToolButton--active{background-color:var(--vkui--color_transparent--active)}.vkuiToolButton.vkuiToolButton--appearance-accent{color:var(--vkui--color_text_accent_themed)}.vkuiToolButton.vkuiToolButton--appearance-neutral{color:var(--vkui--color_text_primary)}.vkuiToolButton--mode-primary.vkuiToolButton--appearance-accent{color:var(--vkui--color_text_contrast_themed)}.vkuiToolButton--mode-outline.vkuiToolButton--appearance-accent,.vkuiToolButton--mode-outline.vkuiToolButton--appearance-accent.vkuiToolButton--active,.vkuiToolButton--mode-outline.vkuiToolButton--appearance-accent.vkuiToolButton--hover{box-shadow:inset 0 0 0 1px var(--vkui--color_stroke_accent_themed)}.vkuiToolButton--mode-outline.vkuiToolButton--appearance-neutral{box-shadow:inset 0 0 0 1px var(--vkui--color_field_border_alpha)}.vkuiToolButton--mode-outline.vkuiToolButton--appearance-neutral.vkuiToolButton--hover{background-color:var(--vkui--color_background_secondary--hover);box-shadow:unset}.vkuiToolButton--mode-outline.vkuiToolButton--appearance-neutral.vkuiToolButton--active{background-color:var(--vkui--color_background_secondary--active);box-shadow:unset}
 .vkuiRoot{height:100%;position:relative;width:100%}.vkuiRoot--transition{pointer-events:none}.vkuiRoot__view{height:100%;position:relative;width:100%}.vkuiRoot--transition .vkuiRoot__view{left:0;overflow:hidden;position:fixed;top:0}.vkuiRoot__scrollCompensation{height:100%;width:100%}.vkuiRoot__view--show-forward{animation:vkuiroot-android-animation-show-forward .3s var(--vkui--animation_easing_platform)}.vkuiRoot__view--hide-back{animation:vkuiroot-android-animation-hide-back .3s var(--vkui--animation_easing_platform) forwards}.vkuiRoot--ios .vkuiRoot__view--hide-forward:after,.vkuiRoot--ios .vkuiRoot__view--show-back:after{background-color:#000;content:"";display:block;height:100%;left:0;position:absolute;top:0;width:100%}.vkuiRoot--ios .vkuiRoot__view--show-back:after{animation:vkuiroot-ios-animation-show-back .6s var(--vkui--animation_easing_platform) forwards}.vkuiRoot--ios .vkuiRoot__view--hide-forward:after{animation:vkuiroot-ios-animation-hide-forward .6s var(--vkui--animation_easing_platform)}.vkuiRoot--ios .vkuiRoot__view--show-forward{animation:vkuiroot-ios-animation-show-forward .6s var(--vkui--animation_easing_platform)}.vkuiRoot--ios .vkuiRoot__view--hide-back{animation:vkuiroot-ios-animation-hide-back .6s var(--vkui--animation_easing_platform) forwards}@keyframes vkuiroot-ios-animation-show-back{0%{opacity:.3}to{opacity:0}}@keyframes vkuiroot-ios-animation-hide-forward{0%{opacity:0}to{opacity:.3}}@keyframes vkuiroot-ios-animation-hide-back{0%{transform:translateZ(0)}to{transform:translate3d(0,100%,0)}}@keyframes vkuiroot-ios-animation-show-forward{0%{transform:translate3d(0,100%,0)}to{transform:translateZ(0)}}@keyframes vkuiroot-android-animation-hide-back{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.05)}}@keyframes vkuiroot-android-animation-show-forward{0%{opacity:0;transform:scale(1.05)}to{opacity:1;transform:scale(1)}}
 .vkuiView{height:100%;position:relative;width:100%;word-wrap:break-word}.vkuiView--animated,.vkuiView--swiping-back{overflow:hidden}.vkuiView--animated .vkuiView__header,.vkuiView--animated .vkuiView__panel,.vkuiView--swiping-back .vkuiView__header,.vkuiView--swiping-back .vkuiView__panel{pointer-events:none}.vkuiView__panel,.vkuiView__panels{height:100%;width:100%}.vkuiView__panel{box-sizing:border-box;isolation:isolate;position:relative}.vkuiView__panel-in{height:100%}.vkuiView--animated .vkuiView__panel,.vkuiView--swiping-back .vkuiView__panel{left:0;overflow:hidden;position:fixed;top:0}.vkuiView__panel-overlay{background-color:#000;display:none;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:var(--vkui_internal--z_index_panel_header_fade)}.vkuiView--ios .vkuiView__panel--swipe-back-prev.vkuiView__panel--swipe-back-success{transform:translate3d(100%,0,0);transition:transform .3s var(--vkui--animation_easing_platform)}.vkuiView--ios .vkuiView__panel--swipe-back-next.vkuiView__panel--swipe-back-success,.vkuiView--ios .vkuiView__panel--swipe-back-prev.vkuiView__panel--swipe-back-failed{transform:translateZ(0);transition:transform .3s var(--vkui--animation_easing_platform)}.vkuiView--ios .vkuiView__panel--swipe-back-next.vkuiView__panel--swipe-back-failed{transform:translate3d(-50%,0,0);transition:transform .3s var(--vkui--animation_easing_platform)}.vkuiView--ios .vkuiView__panel--swipe-back-next .vkuiView__panel-overlay{background-color:rgba(0,0,0,.1)}.vkuiView--ios .vkuiView__panel--swipe-back-next.vkuiView__panel--swipe-back-failed .vkuiView__panel-overlay,.vkuiView--ios .vkuiView__panel--swipe-back-next.vkuiView__panel--swipe-back-success .vkuiView__panel-overlay{transition:opacity .3s var(--vkui--animation_easing_platform)}.vkuiView__panel--next~.vkuiView__panel--prev{animation:vkuianimation-view-prev-back .3s var(--vkui--animation_easing_platform) forwards}.vkuiView__panel--prev~.vkuiView__panel--next{animation:vkuianimation-view-next-forward .3s var(--vkui--animation_easing_platform)}.vkuiView--no-motion .vkuiView__panel{animation:none}@keyframes vkuianimation-view-prev-back{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(80px)}}@keyframes vkuianimation-view-next-forward{0%{opacity:0;transform:translateY(80px)}to{opacity:1;transform:translateY(0)}}.vkuiView--ios .vkuiView__panel--prev{animation:vkuianimation-ios-prev-forward .6s var(--vkui--animation_easing_platform)}.vkuiView--ios .vkuiView__panel--next{animation:vkuianimation-ios-next-back .6s var(--vkui--animation_easing_platform)}.vkuiView--ios .vkuiView__panel--prev~.vkuiView__panel--next{animation:vkuianimation-ios-next-forward .6s var(--vkui--animation_easing_platform)}.vkuiView--ios .vkuiView__panel--next~.vkuiView__panel--prev{animation:vkuianimation-ios-prev-back .6s var(--vkui--animation_easing_platform) forwards}.vkuiView--ios .vkuiView__panel--next .vkuiView__panel-overlay,.vkuiView--ios .vkuiView__panel--prev .vkuiView__panel-overlay{display:block}.vkuiView--ios .vkuiView__panel--prev .vkuiView__panel-overlay{animation:vkuianimation-ios-fade-in .6s var(--vkui--animation_easing_platform)}.vkuiView--ios .vkuiView__panel--next .vkuiView__panel-overlay{animation:vkuianimation-ios-fade-out .6s var(--vkui--animation_easing_platform) forwards}.vkuiView--ios .vkuiView__panel--next~.vkuiView__panel--prev .vkuiView__panel-overlay,.vkuiView--ios .vkuiView__panel--prev~.vkuiView__panel--next .vkuiView__panel-overlay{display:none}.vkuiView--ios.vkuiView--no-motion .vkuiView__panel,.vkuiView--ios.vkuiView--no-motion .vkuiView__panel .vkuiInternalPanel__in{animation:none}.vkuiView--ios .vkuiView__panel--active .vkuiView__panel-overlay{display:none}@keyframes vkuianimation-ios-next-forward{0%{transform:translate3d(100%,0,0)}to{transform:translateZ(0)}}@keyframes vkuianimation-ios-next-back{0%{transform:translate3d(-50%,0,0)}to{transform:translateZ(0)}}@keyframes vkuianimation-ios-prev-forward{0%{transform:translateZ(0)}to{transform:translate3d(-50%,0,0)}}@keyframes vkuianimation-ios-prev-back{0%{transform:translateZ(0)}to{transform:translate3d(100%,0,0)}}@keyframes vkuianimation-ios-fade-in{0%{opacity:0}to{opacity:.3}}@keyframes vkuianimation-ios-fade-out{0%{opacity:.3}to{opacity:0}}
 .vkuiPanel{height:100%;position:relative;width:100%}.vkuiPanel__in{box-sizing:border-box;display:flex;flex-direction:column;min-height:100%;position:relative;width:100%}.vkuiPanel__centered{align-items:center;box-sizing:border-box;display:flex;flex:1 0;flex-direction:column;justify-content:center}.vkuiPanel__centered .vkuiInternalPanelHeader--static+*{margin-top:var(--vkui_internal--panel_header_height)}.vkuiPanel--sizeX-compact .vkuiPanel__centered .vkuiInternalPanelHeader--sep+*{margin-top:calc(var(--vkui_internal--panel_header_height) + 5px)}@media (max-width:767.9px){.vkuiPanel--sizeX-none .vkuiPanel__centered .vkuiInternalPanelHeader--sep+*{margin-top:calc(var(--vkui_internal--panel_header_height) + 5px)}}.vkuiPanel--sizeX-regular .vkuiPanel__centered .vkuiInternalPanelHeader--sep+*{margin-top:calc(var(--vkui_internal--panel_header_height) + 16px)}@media (min-width:768px){.vkuiPanel--sizeX-none .vkuiPanel__centered .vkuiInternalPanelHeader--sep+*{margin-top:calc(var(--vkui_internal--panel_header_height) + 16px)}}.vkuiInternalView--ios .vkuiPanel__in{padding-bottom:var(--vkui_internal--safe_area_inset_bottom);padding-left:var(--vkui_internal--safe_area_inset_left);padding-right:var(--vkui_internal--safe_area_inset_right);padding-top:0}.vkuiInternalEpic--hasTabbar .vkuiPanel__in{padding-bottom:calc(var(--vkui_internal--safe_area_inset_bottom) + var(--vkui_internal--tabbar_height))}.vkuiPanel__in-before{height:1px;margin-bottom:-1px}.vkuiPanel__in-after{height:1px;margin-top:-1px}.vkuiPanel--mode-none .vkuiPanel__in,.vkuiPanel--mode-plain .vkuiPanel__in{background:var(--vkui--color_background_content)}.vkuiPanel--mode-card .vkuiPanel__in{background:var(--vkui--color_background)}@media (min-width:768px){.vkuiPanel--mode-none .vkuiPanel__in{background:var(--vkui--color_background)}}
 .vkuiPanelHeaderButton{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;box-shadow:none;color:currentColor;display:block;margin:0;padding:0;position:relative}.vkuiPanelHeaderButton[disabled]{opacity:.6}.vkuiPanelHeaderButton--primitive{height:48px;line-height:48px;padding:0 10px}.vkuiPanelHeaderButton--ios{align-items:center;display:flex;font-size:17px;position:relative}.vkuiPanelHeaderButton--ios.vkuiPanelHeaderButton--primitive{height:44px;line-height:44px}.vkuiPanelHeaderButton--ios .vkuiIcon--24{padding:10px}.vkuiPanelHeaderButton--ios .vkuiIcon--28{padding:8px}.vkuiPanelHeaderBack--ios .vkuiIcon--w-20{padding-left:4px}.vkuiPanelHeaderButton--android.vkuiPanelHeaderButton--notPrimitive{border-radius:50%}.vkuiPanelHeaderButton--android .vkuiIcon--24,.vkuiPanelHeaderButton--android .vkuiIcon--28{padding:10px}.vkuiPanelHeaderButton--vkcom{color:var(--vkui--color_text_secondary)}.vkuiPanelHeaderBack--vkcom .vkuiIcon{color:var(--vkui--color_icon_secondary)}.vkuiPanelHeaderButton--vkcom>:not(.vkuiInternalCounter){opacity:.7;transition:opacity .3s}.vkuiPanelHeaderButton--vkcom.vkuiPanelHeaderButton--active>:not(.vkuiInternalCounter),.vkuiPanelHeaderButton--vkcom.vkuiPanelHeaderButton--hover>:not(.vkuiInternalCounter){opacity:1}.vkuiPanelHeaderButton--vkcom{align-items:center;display:flex;padding:10px}.vkuiPanelHeaderButton--vkcom.vkuiPanelHeaderButton--notPrimitive{border-radius:50%}.vkuiPanelHeaderBack--vkcom.vkuiPanelHeaderBack--has-label{padding-right:11px}@media (min-width:768px){.vkuiPanelHeaderBack--ios.vkuiPanelHeaderBack--has-label:not(.vkuiPanelHeaderBack--sizeX-compact){padding-right:8px}}.vkuiPanelHeaderBack--sizeX-compact.vkuiPanelHeaderBack--ios .vkuiPanelHeaderButton__label{display:none}@media (max-width:767.9px){.vkuiPanelHeaderBack--sizeX-none.vkuiPanelHeaderBack--ios .vkuiPanelHeaderButton__label{display:none}}
 .vkuiSeparator{color:var(--vkui--color_separator_primary)}.vkuiSeparator__in{background:currentColor;border:0;color:inherit;height:var(--vkui--size_border--regular);margin:0;transform-origin:center top}.vkuiSeparator--padded .vkuiSeparator__in{margin-left:var(--vkui--size_base_padding_horizontal--regular);margin-right:var(--vkui--size_base_padding_horizontal--regular)}.vkuiInternalModalPage--sizeX-regular .vkuiSeparator--padded{padding-left:8px;padding-right:8px}@media (min-width:768px){.vkuiInternalModalPage--sizeX-none .vkuiSeparator--padded{padding-left:8px;padding-right:8px}}
-.vkuiSpacing{box-sizing:border-box;position:relative}
+.vkuiSpacing{--vkui_internal--Spacing_gap:0;box-sizing:border-box;height:var(--vkui_internal--Spacing_gap);padding-bottom:calc(1px * var(--vkui_internal--Spacing_gap) / 2);padding-top:calc(1px * var(--vkui_internal--Spacing_gap) / 2);position:relative}.vkuiSpacing--3xs{--vkui_internal--Spacing_gap:var(--vkui--spacing_size_3xs)}.vkuiSpacing--2xs{--vkui_internal--Spacing_gap:var(--vkui--spacing_size_2xs)}.vkuiSpacing--xs{--vkui_internal--Spacing_gap:var(--vkui--spacing_size_xs)}.vkuiSpacing--s{--vkui_internal--Spacing_gap:var(--vkui--spacing_size_s)}.vkuiSpacing--m{--vkui_internal--Spacing_gap:var(--vkui--spacing_size_m)}.vkuiSpacing--l{--vkui_internal--Spacing_gap:var(--vkui--spacing_size_l)}.vkuiSpacing--xl{--vkui_internal--Spacing_gap:var(--vkui--spacing_size_xl)}.vkuiSpacing--2xl{--vkui_internal--Spacing_gap:var(--vkui--spacing_size_2xl)}.vkuiSpacing--3xl{--vkui_internal--Spacing_gap:var(--vkui--spacing_size_3xl)}.vkuiSpacing--4xl{--vkui_internal--Spacing_gap:var(--vkui--spacing_size_4xl)}
 .vkuiPanelHeader{position:relative}.vkuiPanelHeader--static.vkuiPanelHeader--fixed:before{content:"";display:block}.vkuiPanelHeader:not(.vkuiPanelHeader--static):not(.vkuiPanelHeader--fixed){height:0;z-index:var(--vkui_internal--z_index_panel_header)}.vkuiPanelHeader__fixed{z-index:var(--vkui_internal--z_index_panel_header)}.vkuiPanelHeader__in{align-items:center;background:var(--vkui--color_background_content);display:flex;justify-content:space-between;position:relative;white-space:nowrap}.vkuiPanelHeader--trnsp .vkuiPanelHeader__in{background:transparent}.vkuiPanelHeader--sizeX-regular.vkuiPanelHeader--shadow .vkuiPanelHeader__in{box-shadow:0 0 4px rgba(0,0,0,.08)}@media (min-width:768px){.vkuiPanelHeader--sizeX-none.vkuiPanelHeader--shadow .vkuiPanelHeader__in{box-shadow:0 0 4px rgba(0,0,0,.08)}}.vkuiPanelHeader__before{box-sizing:border-box;color:var(--vkui--color_icon_accent_themed);display:flex;flex-shrink:0}.vkuiPanelHeader__content{overflow:hidden}.vkuiPanelHeader__content>*{display:block;overflow:hidden;text-overflow:ellipsis}.vkuiPanelHeader__content-in{color:var(--vkui--color_text_primary);font-family:var(--vkui--font_family_accent);font-weight:500}.vkuiPanelHeader:before,.vkuiPanelHeader__in{height:var(--vkui_internal--panel_header_height);padding-top:var(--vkui_internal--safe_area_inset_top)}.vkuiPanelHeader__after{align-items:center;box-sizing:border-box;color:var(--vkui--color_icon_accent_themed);display:flex;justify-content:flex-end}.vkuiPanelHeader__after>:not(:last-child){margin-right:4px}.vkuiPanelHeader--ios .vkuiPanelHeader__before{flex-basis:0;flex-grow:1;flex-shrink:0;opacity:1;padding:4px 0 4px 4px;transition:opacity .3s var(--vkui--animation_easing_platform)}.vkuiPanelHeader--ios .vkuiPanelHeader__before .vkuiPanelHeaderButton+.vkuiPanelHeaderButton--primitive{margin-left:-6px;padding-left:0}.vkuiPanelHeader--ios .vkuiPanelHeader__content{opacity:1;text-align:center;transition:opacity .3s var(--vkui--animation_easing_platform)}.vkuiPanelHeader--ios .vkuiPanelHeader__content-in{font-size:21px}.vkuiPanelHeader--ios .vkuiPanelHeader__content>*{padding:0 4px}.vkuiPanelHeader--ios.vkuiPanelHeader--no-before .vkuiPanelHeader__content{padding-left:8px}.vkuiPanelHeader--ios.vkuiPanelHeader--no-after .vkuiPanelHeader__content>*{padding-right:0}.vkuiPanelHeader--ios.vkuiPanelHeader--no-after .vkuiPanelHeader__content{padding-right:8px}.vkuiPanelHeader--ios .vkuiPanelHeader__after{flex-basis:0;flex-grow:1;flex-shrink:0;opacity:1;padding:4px 4px 4px 0;transition:opacity .3s var(--vkui--animation_easing_platform)}.vkuiView--ios .vkuiView__panel--prev .vkuiPanelHeader__after,.vkuiView--ios .vkuiView__panel--prev .vkuiPanelHeader__before,.vkuiView--ios .vkuiView__panel--prev .vkuiPanelHeader__content{opacity:0}.vkuiPanelHeader--android .vkuiPanelHeader__before:not(:empty){margin-right:-8px;padding:4px 0 4px 4px}.vkuiPanelHeader--android .vkuiPanelHeader__content{align-items:center;flex-grow:1;max-width:100%}.vkuiPanelHeader--android .vkuiPanelHeader__content-in{font-size:23px}.vkuiPanelHeader--android .vkuiPanelHeader__content>*{padding:0 12px}.vkuiPanelHeader--sizeY-compact:not(.vkuiPanelHeader--vkcom) .vkuiPanelHeader__content-in{font-size:20px}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiPanelHeader--sizeY-none:not(.vkuiPanelHeader--vkcom) .vkuiPanelHeader__content-in{font-size:20px}}.vkuiInternalSplitCol--viewWidth-tabletPlus.vkuiInternalSplitCol--spaced-auto .vkuiPanelHeader--android.vkuiPanelHeader--no-before:not(.vkuiInternalModalPageHeader__in) .vkuiPanelHeader__content{padding-left:0}@media (min-width:768px){.vkuiInternalSplitCol--viewWidth-none.vkuiInternalSplitCol--spaced-auto .vkuiPanelHeader--android.vkuiPanelHeader--no-before:not(.vkuiInternalModalPageHeader__in) .vkuiPanelHeader__content{padding-left:0}}.vkuiPanelHeader--android.vkuiPanelHeader--no-after .vkuiPanelHeader__content>*,.vkuiPanelHeader--vkcom.vkuiPanelHeader--no-after .vkuiPanelHeader__content>*{padding-right:0}.vkuiPanelHeader--android.vkuiPanelHeader--no-after .vkuiPanelHeader__content{padding-right:16px}.vkuiPanelHeader--android.vkuiPanelHeader--no-before .vkuiPanelHeader__content{padding-left:16px}.vkuiInternalSplitCol--viewWidth-tabletPlus.vkuiInternalSplitCol--spaced-auto .vkuiPanelHeader--android.vkuiPanelHeader--no-after:not(.vkuiInternalModalPageHeader__in) .vkuiPanelHeader__content{padding-right:0}@media (min-width:768px){.vkuiInternalSplitCol--viewWidth-none.vkuiInternalSplitCol--spaced-auto .vkuiPanelHeader--android.vkuiPanelHeader--no-after:not(.vkuiInternalModalPageHeader__in) .vkuiPanelHeader__content{padding-right:0}}.vkuiPanelHeader--android .vkuiPanelHeader__after:not(:empty),.vkuiPanelHeader--vkcom .vkuiPanelHeader__after:not(:empty){padding:4px 4px 4px 0}.vkuiPanelHeader--vkcom{position:relative;z-index:var(--vkui_internal--z_index_panel_header)}.vkuiPanelHeader--vkcom.vkuiPanelHeader--sizeX-regular:not(.vkuiInternalModalPageHeader__in):not(.vkuiPanelHeader--sep) .vkuiPanelHeader__in:after{background-color:var(--vkui--color_background_content);bottom:0;content:"";height:var(--vkui--size_border--regular);left:var(--vkui--size_border--regular);position:absolute;right:var(--vkui--size_border--regular)}@media (min-width:768px){.vkuiPanelHeader--vkcom.vkuiPanelHeader--sizeX-none:not(.vkuiInternalModalPageHeader__in):not(.vkuiPanelHeader--sep) .vkuiPanelHeader__in:after{background-color:var(--vkui--color_background_content);bottom:0;content:"";height:var(--vkui--size_border--regular);left:var(--vkui--size_border--regular);position:absolute;right:var(--vkui--size_border--regular)}}.vkuiPanelHeader--vkcom.vkuiPanelHeader--sizeX-regular:not(.vkuiInternalModalPageHeader__in) .vkuiPanelHeader__in{border-bottom:0;border-top-left-radius:var(--vkui--size_border_radius_paper--regular);border-top-right-radius:var(--vkui--size_border_radius_paper--regular);box-shadow:0 0 0 var(--vkui--size_border--regular) var(--vkui--color_field_border_alpha) inset}@media (min-width:768px){.vkuiPanelHeader--vkcom.vkuiPanelHeader--sizeX-none:not(.vkuiInternalModalPageHeader__in) .vkuiPanelHeader__in{border-bottom:0;border-top-left-radius:var(--vkui--size_border_radius_paper--regular);border-top-right-radius:var(--vkui--size_border_radius_paper--regular);box-shadow:0 0 0 var(--vkui--size_border--regular) var(--vkui--color_field_border_alpha) inset}}.vkuiPanelHeader--vkcom .vkuiPanelHeader__content{text-align:center}.vkuiPanelHeader--vkcom .vkuiPanelHeader__before:not(:empty){padding:0 0 0 4px}.vkuiPanelHeader--vkcom .vkuiPanelHeader__after,.vkuiPanelHeader--vkcom .vkuiPanelHeader__before{flex-basis:0;flex-grow:1;flex-shrink:0}.vkuiPanelHeader__separator{margin-top:calc(-1 * var(--vkui--size_border--regular))}.vkuiPanelHeader--no-before .vkuiPanelHeader__content>*{padding-left:0}.vkuiInternalPanel--centered .vkuiPanelHeader{left:0;position:absolute;top:0;width:100%}
 .vkuiPanelHeaderContent{align-items:center;box-sizing:border-box;display:flex;font-family:var(--vkui--font_family_base);height:100%;justify-content:flex-start;line-height:normal;max-width:100%}.vkuiPanelHeaderContent__before{flex-shrink:0;margin-right:12px}.vkuiPanelHeaderContent__in{align-items:flex-start;display:flex;flex-direction:column;flex-grow:1;height:100%;justify-content:center;min-width:0}.vkuiPanelHeaderContent__children-in,.vkuiPanelHeaderContent__childrenText,.vkuiPanelHeaderContent__status{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiPanelHeaderContent__status{color:var(--vkui--color_text_secondary);margin-top:1px;max-width:100%;order:1}.vkuiPanelHeaderContent__children{align-items:center;display:flex;max-width:100%}.vkuiPanelHeaderContent__children-in{flex-grow:0;min-width:0}.vkuiPanelHeaderContent__aside{align-items:center;color:var(--vkui--color_icon_accent);display:flex;justify-content:flex-start;margin-left:2px}.vkuiPanelHeaderContent__width{width:1000px}.vkuiPanelHeaderContent__in--centered{align-items:center}.vkuiPanelHeaderContent--ios .vkuiPanelHeaderContent__children-in{font-family:var(--vkui--font_family_accent);font-size:21px;font-weight:500;line-height:var(--vkui_internal--panel_header_height)}.vkuiPanelHeaderContent--android .vkuiPanelHeaderContent__children-in{font-family:var(--vkui--font_family_accent);font-size:23px;font-weight:500;line-height:var(--vkui_internal--panel_header_height)}.vkuiInternalPanelHeader--no-before .vkuiPanelHeaderContent--vkcom{padding-left:16px}.vkuiPanelHeaderContent--sizeY-compact:not(.vkuiPanelHeaderContent--vkcom) .vkuiPanelHeaderContent__children-in{font-size:20px}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiPanelHeaderContent--sizeY-none:not(.vkuiPanelHeaderContent--vkcom) .vkuiPanelHeaderContent__children-in{font-size:20px}}
 .vkuiPanelHeaderContext{z-index:var(--vkui_internal--z_index_panel_header_context)}.vkuiPanelHeaderContext--closing,.vkuiPanelHeaderContext--opened{height:100%;width:100%}.vkuiPanelHeaderContext--sizeX-regular.vkuiPanelHeaderContext--closing,.vkuiPanelHeaderContext--sizeX-regular.vkuiPanelHeaderContext--opened{height:auto}@media (min-width:768px){.vkuiPanelHeaderContext--sizeX-none.vkuiPanelHeaderContext--closing,.vkuiPanelHeaderContext--sizeX-none.vkuiPanelHeaderContext--opened{height:auto}}.vkuiPanelHeaderContext__in{box-sizing:border-box;left:0;padding:8px;pointer-events:none;position:absolute;width:100%}.vkuiPanelHeaderContext__fade{background:rgba(0,0,0,.4);display:none;height:100%;left:0;position:absolute;top:0;width:100%}.vkuiPanelHeaderContext--sizeX-compact .vkuiPanelHeaderContext__fade{display:block}@media (max-width:767.9px){.vkuiPanelHeaderContext--sizeX-none .vkuiPanelHeaderContext__fade{display:block}}.vkuiPanelHeaderContext--opened .vkuiPanelHeaderContext__fade{animation:vkuianimation-panelheadercontext-fade-in .2s ease}.vkuiPanelHeaderContext--closing .vkuiPanelHeaderContext__fade{animation:vkuianimation-panelheadercontext-fade-out .2s ease}.vkuiPanelHeaderContext--opened .vkuiPanelHeaderContext__in{animation:vkuianimation-panelheadercontext-translate-in .2s ease;pointer-events:auto}.vkuiPanelHeaderContext--closing .vkuiPanelHeaderContext__in{animation:vkuianimation-panelheadercontext-translate-out .2s ease}.vkuiPanelHeaderContext__content{background:var(--vkui--color_background_content);overflow:hidden}.vkuiPanelHeaderContext--ios .vkuiPanelHeaderContext__in{padding:0}.vkuiPanelHeaderContext--sizeX-regular.vkuiPanelHeaderContext--ios .vkuiPanelHeaderContext__content,.vkuiPanelHeaderContext:not(.vkuiPanelHeaderContext--ios) .vkuiPanelHeaderContext__content{border-radius:12px;padding:8px 0}@media (min-width:768px){.vkuiPanelHeaderContext--sizeX-none.vkuiPanelHeaderContext--ios .vkuiPanelHeaderContext__content{border-radius:12px;padding:8px 0}}.vkuiPanelHeaderContext--sizeX-regular .vkuiPanelHeaderContext__in{padding:12px 8px}.vkuiPanelHeaderContext--sizeX-regular .vkuiPanelHeaderContext__content{border-radius:12px;box-shadow:0 0 4px rgba(0,0,0,.08),0 8px 8px rgba(0,0,0,.16)}@media (min-width:768px){.vkuiPanelHeaderContext--sizeX-none .vkuiPanelHeaderContext__in{padding:12px 8px}.vkuiPanelHeaderContext--sizeX-none .vkuiPanelHeaderContext__content{border-radius:12px;box-shadow:0 0 4px rgba(0,0,0,.08),0 8px 8px rgba(0,0,0,.16)}}@keyframes vkuianimation-panelheadercontext-translate-in{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes vkuianimation-panelheadercontext-translate-out{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes vkuianimation-panelheadercontext-fade-in{0%{opacity:0}to{opacity:1}}@keyframes vkuianimation-panelheadercontext-fade-out{0%{opacity:1}to{opacity:0}}
@@ -123,7 +123,7 @@
 .vkuiInput{font-size:16px;line-height:20px;position:relative}.vkuiInput--align-center .vkuiInput__el{text-align:center}.vkuiInput--align-right .vkuiInput__el{text-align:right}.vkuiInput__el{border-radius:inherit;box-sizing:border-box;color:var(--vkui--color_text_primary);height:var(--vkui--size_field_height--regular);padding:0 12px;position:relative;width:100%;z-index:var(--vkui_internal--z_index_form_field_element)}.vkuiInput--sizeY-compact .vkuiInput__el{height:var(--vkui--size_field_height--compact)}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiInput--sizeY-none .vkuiInput__el{height:var(--vkui--size_field_height--compact)}}.vkuiInput--hasBefore .vkuiInput__el{padding-left:0}.vkuiInput--hasAfter .vkuiInput__el{padding-right:0}.vkuiInput__el:disabled{opacity:var(--vkui--opacity_disable_accessibility)}.vkuiInput__el::-ms-input-placeholder{color:var(--vkui--color_text_secondary);opacity:1}.vkuiInput__el::placeholder{color:var(--vkui--color_text_secondary);opacity:1}.vkuiInput__el:disabled::-ms-input-placeholder{color:var(--vkui--color_text_secondary)}.vkuiInput__el:disabled::placeholder{color:var(--vkui--color_text_secondary)}
 .vkuiChip{align-items:center;background:var(--vkui--color_background_content);border:var(--vkui--size_border--regular) solid var(--vkui--color_image_border_alpha);border-radius:6px;box-sizing:border-box;display:inline-flex;height:32px}.vkuiChip__in,.vkuiChip__removable{align-items:center;border-radius:inherit;display:flex;height:100%;position:relative}.vkuiChip__in{overflow:hidden;padding-left:8px}.vkuiChip__in:last-of-type{padding-right:8px}.vkuiChip__content{color:var(--vkui--color_text_primary);display:inline-block;font-family:var(--vkui--font_paragraph--font_family--regular);font-size:var(--vkui--font_paragraph--font_size--regular);font-weight:var(--vkui--font_paragraph--font_weight--regular);line-height:var(--vkui--font_paragraph--line_height--regular);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiChip--sizeY-compact .vkuiChip__content{font-family:var(--vkui--font_footnote--font_family--regular);font-size:var(--vkui--font_footnote--font_size--regular);font-weight:var(--vkui--font_footnote--font_weight--regular);line-height:var(--vkui--font_footnote--line_height--regular)}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiChip--sizeY-none .vkuiChip__content{font-family:var(--vkui--font_footnote--font_family--regular);font-size:var(--vkui--font_footnote--font_size--regular);font-weight:var(--vkui--font_footnote--font_weight--regular);line-height:var(--vkui--font_footnote--line_height--regular)}}.vkuiChip__removable{flex-grow:0;flex-shrink:0}.vkuiChip__remove{background:transparent;border:0;border-radius:inherit;box-sizing:border-box;color:var(--vkui--color_icon_secondary);cursor:pointer;flex:0 0 100%;padding:5px;transform:translateX(-1px)}.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}}
 .vkuiChipsInputBase{--vkui_internal--chips_input_base_container_gap:4px;display:flex;flex-grow:1;flex-shrink:1;flex-wrap:wrap;list-style:none;margin:0;max-width:100%;overflow:hidden;padding:var(--vkui_internal--chips_input_base_container_gap);position:relative;z-index:var(--vkui_internal--z_index_form_field_element)}.vkuiChipsInputBase__chip{margin:2px;max-width:calc(100% - var(--vkui_internal--chips_input_base_container_gap))}.vkuiChipsInputBase__el{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;box-shadow:none;color:var(--vkui--color_text_primary);flex:1;margin:2px 2px 4px 10px;padding:0;position:relative;width:100%}.vkuiChipsInputBase__el:not(:-moz-read-only):focus{min-width:64px}.vkuiChipsInputBase__el:not(:read-only):focus{min-width:64px}.vkuiChipsInputBase__el::-ms-clear{display:none}.vkuiChipsInputBase__el:disabled{opacity:var(--vkui--opacity_disable_accessibility)}.vkuiChipsInputBase__el::-ms-input-placeholder{color:var(--vkui--color_text_secondary);opacity:1}.vkuiChipsInputBase__el::placeholder{color:var(--vkui--color_text_secondary);opacity:1}.vkuiChipsInputBase__el:disabled::-ms-input-placeholder{color:var(--vkui--color_text_secondary)}.vkuiChipsInputBase__el:disabled::placeholder{color:var(--vkui--color_text_secondary)}.vkuiChipsInputBase__el[readonly]{cursor:default}.vkuiChipsInputBase--hasPlaceholder .vkuiChipsInputBase__el{margin-left:calc(12px - var(--vkui_internal--chips_input_base_container_gap));margin-right:0;text-overflow:ellipsis;white-space:nowrap}.vkuiChipsInputBase--sizeY-compact{--vkui_internal--chips_input_base_container_gap:2px}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiChipsInputBase--sizeY-none{--vkui_internal--chips_input_base_container_gap:2px}}
-.vkuiCustomScrollView{height:100%;overflow:hidden;position:relative;width:100%}.vkuiCustomScrollView__box{height:100%;max-height:inherit;overflow-x:hidden;overflow-y:scroll;padding-right:100px;position:relative;width:100%}.vkuiCustomScrollView__barY:active+.vkuiCustomScrollView__box{pointer-events:none}.vkuiCustomScrollView__barY{height:100%;position:absolute;right:0;top:0;width:10px}.vkuiCustomScrollView__trackerY{box-sizing:border-box;left:0;padding:4px 4px 4px 0;position:absolute;top:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:10px}.vkuiCustomScrollView__trackerY--hidden{opacity:0;transition:opacity .2s}.vkuiCustomScrollView__trackerY:before{background-color:var(--vkui--color_icon_medium);border-radius:12px;content:"";display:block;height:100%;opacity:.48;transition:transform .2s,opacity .2s;width:100%}.vkuiCustomScrollView__trackerY:active:before,.vkuiCustomScrollView__trackerY:hover:before{opacity:.8;transform:scaleX(1.3333)}.vkuiInternalCustomSelectDropdown .vkuiCustomScrollView__box{padding-right:8px}.vkuiInternalCustomSelectDropdown--wide .vkuiCustomScrollView__box{padding-right:0}.vkuiCustomScrollView--hasPointer-true .vkuiCustomScrollView__box{scrollbar-width:none}.vkuiCustomScrollView--hasPointer-true .vkuiCustomScrollView__box::-webkit-scrollbar{display:none}@media (pointer:fine){.vkuiCustomScrollView--hasPointer-none .vkuiCustomScrollView__box{scrollbar-width:none}.vkuiCustomScrollView--hasPointer-none .vkuiCustomScrollView__box::-webkit-scrollbar{display:none}}.vkuiCustomScrollView--hasPointer-false .vkuiCustomScrollView__barY{display:none}@media (pointer:coarse),(pointer:none){.vkuiCustomScrollView--hasPointer-none .vkuiCustomScrollView__barY{display:none}}
+.vkuiCustomScrollView{height:100%;overflow:hidden;position:relative;width:100%}.vkuiCustomScrollView__box{height:100%;max-height:inherit;overflow-x:hidden;overflow-y:scroll;padding-right:100px;position:relative;width:100%}.vkuiCustomScrollView__box-content{position:relative}.vkuiCustomScrollView__barY:active+.vkuiCustomScrollView__box{pointer-events:none}.vkuiCustomScrollView__barY{height:100%;position:absolute;right:0;top:0;width:10px}.vkuiCustomScrollView__trackerY{box-sizing:border-box;left:0;padding:4px 4px 4px 0;position:absolute;top:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:10px}.vkuiCustomScrollView__trackerY--hidden{opacity:0;transition:opacity .2s}.vkuiCustomScrollView__trackerY:before{background-color:var(--vkui--color_icon_medium);border-radius:12px;content:"";display:block;height:100%;opacity:.48;transition:transform .2s,opacity .2s;width:100%}.vkuiCustomScrollView__trackerY:active:before,.vkuiCustomScrollView__trackerY:hover:before{opacity:.8;transform:scaleX(1.3333)}.vkuiInternalCustomSelectDropdown .vkuiCustomScrollView__box{padding-right:8px}.vkuiInternalCustomSelectDropdown--wide .vkuiCustomScrollView__box{padding-right:0}.vkuiCustomScrollView--hasPointer-true .vkuiCustomScrollView__box{scrollbar-width:none}.vkuiCustomScrollView--hasPointer-true .vkuiCustomScrollView__box::-webkit-scrollbar{display:none}@media (pointer:fine){.vkuiCustomScrollView--hasPointer-none .vkuiCustomScrollView__box{scrollbar-width:none}.vkuiCustomScrollView--hasPointer-none .vkuiCustomScrollView__box::-webkit-scrollbar{display:none}}.vkuiCustomScrollView--hasPointer-false .vkuiCustomScrollView__barY{display:none}@media (pointer:coarse),(pointer:none){.vkuiCustomScrollView--hasPointer-none .vkuiCustomScrollView__barY{display:none}}
 .vkuiCustomSelectDropdown{background-color:var(--vkui--color_background_modal);border:var(--vkui--size_border--regular) solid var(--vkui--color_field_border_alpha);border-radius:8px;box-shadow:var(--vkui--elevation1);box-sizing:border-box;overflow:hidden}.vkuiCustomSelectDropdown--wide{width:100%}.vkuiCustomSelectDropdown--bottom{border-top:0;border-top-left-radius:0;border-top-right-radius:0}.vkuiCustomSelectDropdown--top{border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;bottom:100%;box-shadow:var(--vkui--elevation1_invert_y)}.vkuiCustomSelectDropdown__fetching{padding:12px 0}.vkuiCustomSelectDropdown__in--withMaxHeight{max-height:160px}.vkuiInternalCalendarHeader__pickers .vkuiCustomSelectDropdown__in--withMaxHeight{max-height:184px}
 .vkuiCustomSelectOption{align-items:center;box-sizing:border-box;color:var(--vkui--color_text_primary);cursor:pointer;display:flex;padding:8px 12px;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.vkuiCustomSelectOption--hierarchy{--vkui_internal--custom_select_option_hierarchy_level:0;padding-left:calc(var(--vkui_internal--custom_select_option_hierarchy_level) * var(--vkui--size_option_hierarchy--regular))}.vkuiCustomSelectOption--sizeY-regular{min-height:44px}@media (max-width:767.9px) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiCustomSelectOption--sizeY-none{min-height:44px}}.vkuiCustomSelectOption--disabled{cursor:default;opacity:var(--vkui--opacity_disable_accessibility)}.vkuiCustomSelectOption--hover{background-color:var(--vkui--color_transparent--hover)}.vkuiCustomSelectOption__before{flex-shrink:0;margin-right:7px}.vkuiCustomSelectOption__main{flex-grow:1;max-width:100%;min-width:0}.vkuiCustomSelectOption__children{min-width:0}.vkuiCustomSelectOption__after{align-items:center;display:flex;flex-shrink:0;margin-left:8px}.vkuiCustomSelectOption__description{color:var(--vkui--color_text_secondary)}.vkuiCustomSelectOption__selectedIcon{color:var(--vkui--color_icon_accent)}.vkuiCustomSelectOption__selectedIcon:not(:first-child){margin-left:8px}
 .vkuiChipsSelect{position:relative}.vkuiChipsSelect__empty{color:var(--vkui--color_text_secondary);padding:12px 0;text-align:center}.vkuiChipsSelect--pop-down{border-bottom-left-radius:0;border-bottom-right-radius:0}.vkuiChipsSelect--pop-up{border-top-left-radius:0;border-top-right-radius:0}