@vkontakte/vkui 5.3.2 → 5.4.1

package/dist/cssm/components/Search/Search.js

@@ -2,40 +2,21 @@ import * as React from 'react';
 import { Icon16Clear, Icon16SearchOutline, Icon24Cancel } from '@vkontakte/icons';
 import { classNames, noop } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { useBooleanState } from '../../hooks/useBooleanState';
 import { useEnsuredControl } from '../../hooks/useEnsuredControl';
 import { useExternRef } from '../../hooks/useExternRef';
 import { usePlatform } from '../../hooks/usePlatform';
 import { SizeType } from '../../lib/adaptivity';
 import { Platform } from '../../lib/platform';
-import { Touch } from '../Touch/Touch';
+import { Button } from '../Button/Button';
+import { IconButton } from '../IconButton/IconButton';
 import { Headline } from '../Typography/Headline/Headline';
-import { Title } from '../Typography/Title/Title';
 import styles from './Search.module.css';
-const sizeYClassNames = {
-    none: styles['Search--sizeY-none'],
-    [SizeType.REGULAR]: styles['Search--sizeY-regular']
-};
-const SearchPlaceholderTypography = ({ children , ...restProps })=>{
-    const platform = usePlatform();
-    switch(platform){
-        case Platform.IOS:
-            return /*#__PURE__*/ React.createElement(Title, {
-                ...restProps,
-                level: "3",
-                weight: "3"
-            }, children);
-        default:
-            return /*#__PURE__*/ React.createElement(Headline, {
-                ...restProps,
-                weight: "3"
-            }, children);
-    }
-};
 /**
  * @see https://vkcom.github.io/VKUI/#/Search
- */ export const Search = ({ before =/*#__PURE__*/ React.createElement(Icon16SearchOutline, null) , className , defaultValue ='' , placeholder ='Поиск' , after ='Отмена' , getRef , icon , onIconClick =noop , style , autoComplete ='off' , onChange: onChangeProp , value: valueProp , ...inputProps })=>{
+ */ export const Search = ({ before =/*#__PURE__*/ React.createElement(Icon16SearchOutline, null) , className , defaultValue ='' , placeholder ='Поиск' , after ='Отмена' , getRef , icon , onIconClick =noop , style , autoComplete ='off' , onChange: onChangeProp , value: valueProp , iconAriaLabel , clearAriaLabel ='Очистить' , ...inputProps })=>{
     const inputRef = useExternRef(getRef);
-    const [isFocused, setFocused] = React.useState(false);
+    const { value: isFocused , setTrue: setFocusedTrue , setFalse: setFocusedFalse  } = useBooleanState(false);
     const [value, onChange] = useEnsuredControl({
         defaultValue,
         onChange: onChangeProp,
@@ -44,11 +25,11 @@ const SearchPlaceholderTypography = ({ children , ...restProps })=>{
     const { sizeY ='none'  } = useAdaptivity();
     const platform = usePlatform();
     const onFocus = (e)=>{
-        setFocused(true);
+        setFocusedTrue();
         inputProps.onFocus && inputProps.onFocus(e);
     };
     const onBlur = (e)=>{
-        setFocused(false);
+        setFocusedFalse();
         inputProps.onBlur && inputProps.onBlur(e);
     };
     const onCancel = React.useCallback(()=>{
@@ -74,49 +55,52 @@ const SearchPlaceholderTypography = ({ children , ...restProps })=>{
         onCancel
     ]);
     return /*#__PURE__*/ React.createElement("div", {
-        className: classNames(styles['Search'], sizeY !== SizeType.COMPACT && sizeYClassNames[sizeY], isFocused && styles['Search--focused'], value && styles['Search--has-value'], after && styles['Search--has-after'], icon && styles['Search--has-icon'], className),
+        className: classNames('vkuiInternalSearch', styles['Search'], sizeY === 'none' && styles['Search--sizeY-none'], sizeY === SizeType.COMPACT && styles['Search--sizeY-compact'], isFocused && styles['Search--focused'], value && styles['Search--has-value'], after && styles['Search--has-after'], icon && styles['Search--has-icon'], className),
         style: style
     }, /*#__PURE__*/ React.createElement("div", {
-        className: styles['Search__in']
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: styles['Search__width']
-    }), /*#__PURE__*/ React.createElement("label", {
+        className: styles['Search__field']
+    }, /*#__PURE__*/ React.createElement("label", {
         className: styles['Search__control']
-    }, /*#__PURE__*/ React.createElement("input", {
+    }, before, /*#__PURE__*/ React.createElement(Headline, {
+        Component: "input",
         type: "search",
+        level: "1",
+        weight: "3",
         ...inputProps,
+        placeholder: placeholder,
         autoComplete: autoComplete,
-        ref: inputRef,
+        getRootRef: inputRef,
         className: styles['Search__input'],
         onFocus: onFocus,
         onBlur: onBlur,
         onChange: onChange,
         value: value
-    }), platform === Platform.IOS && after && /*#__PURE__*/ React.createElement("div", {
-        className: styles['Search__after-width']
-    }, after), /*#__PURE__*/ React.createElement("div", {
-        className: styles['Search__placeholder']
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: styles['Search__placeholder-in']
-    }, before, /*#__PURE__*/ React.createElement(SearchPlaceholderTypography, {
-        className: styles['Search__placeholder-text']
-    }, placeholder)), isFocused && platform === Platform.IOS && after && /*#__PURE__*/ React.createElement("div", {
-        className: styles['Search__after-width']
-    }, after))), /*#__PURE__*/ React.createElement("div", {
-        className: styles['Search__after']
-    }, /*#__PURE__*/ React.createElement("div", {
+    })), /*#__PURE__*/ React.createElement("div", {
         className: styles['Search__icons']
-    }, icon && /*#__PURE__*/ React.createElement(Touch, {
+    }, icon && /*#__PURE__*/ React.createElement(IconButton, {
+        hoverMode: "opacity",
         onStart: onIconClickStart,
-        className: styles['Search__icon']
-    }, icon), !!value && /*#__PURE__*/ React.createElement(Touch, {
+        className: styles['Search__icon'],
+        onFocus: setFocusedTrue,
+        onBlur: setFocusedFalse,
+        "aria-label": iconAriaLabel
+    }, icon), !!value && /*#__PURE__*/ React.createElement(IconButton, {
+        hoverMode: "opacity",
         onStart: onIconCancelClickStart,
         onClick: onCancel,
-        className: styles['Search__icon']
-    }, platform === Platform.IOS ? /*#__PURE__*/ React.createElement(Icon16Clear, null) : /*#__PURE__*/ React.createElement(Icon24Cancel, null))), platform === Platform.IOS && after && /*#__PURE__*/ React.createElement("div", {
-        className: styles['Search__after-in'],
-        onClick: onCancel
-    }, after))));
+        className: styles['Search__icon'],
+        "aria-label": clearAriaLabel
+    }, platform === Platform.IOS ? /*#__PURE__*/ React.createElement(Icon16Clear, null) : /*#__PURE__*/ React.createElement(Icon24Cancel, null)))), platform === Platform.IOS && after && /*#__PURE__*/ React.createElement(Button, {
+        mode: "tertiary",
+        size: "m",
+        className: styles['Search__after'],
+        focusVisibleMode: "inside",
+        onClick: onCancel,
+        onFocus: setFocusedTrue,
+        onBlur: setFocusedFalse
+    }, /*#__PURE__*/ React.createElement("span", {
+        className: styles['Search__afterText']
+    }, after)));
 };
 
 //# sourceMappingURL=Search.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Search/Search.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Clear, Icon16SearchOutline, Icon24Cancel } from '@vkontakte/icons';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { VKUITouchEvent } from '../../lib/touch';\nimport { HasRef } from '../../types';\nimport { Touch, TouchEvent } from '../Touch/Touch';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Search.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Search--sizeY-none'],\n  [SizeType.REGULAR]: styles['Search--sizeY-regular'],\n};\n\nconst SearchPlaceholderTypography = ({\n  children,\n  ...restProps\n}: React.HTMLAttributes<HTMLElement>) => {\n  const platform = usePlatform();\n\n  switch (platform) {\n    case Platform.IOS:\n      return (\n        <Title {...restProps} level=\"3\" weight=\"3\">\n          {children}\n        </Title>\n      );\n    default:\n      return (\n        <Headline {...restProps} weight=\"3\">\n          {children}\n        </Headline>\n      );\n  }\n};\n\nexport interface SearchProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement> {\n  /**\n   * iOS only. Текст кнопки \"отмена\", которая чистит текстовое поле и убирает фокус.\n   */\n  after?: React.ReactNode;\n  before?: React.ReactNode;\n  icon?: React.ReactNode;\n  onIconClick?: (e: VKUITouchEvent) => void;\n  defaultValue?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Search\n */\nexport const Search = ({\n  before = <Icon16SearchOutline />,\n  className,\n  defaultValue = '',\n  placeholder = 'Поиск',\n  after = 'Отмена',\n  getRef,\n  icon,\n  onIconClick = noop,\n  style,\n  autoComplete = 'off',\n  onChange: onChangeProp,\n  value: valueProp,\n  ...inputProps\n}: SearchProps) => {\n  const inputRef = useExternRef(getRef);\n  const [isFocused, setFocused] = React.useState(false);\n  const [value, onChange] = useEnsuredControl({\n    defaultValue,\n    onChange: onChangeProp,\n    value: valueProp,\n  });\n  const { sizeY = 'none' } = useAdaptivity();\n  const platform = usePlatform();\n\n  const onFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocused(true);\n    inputProps.onFocus && inputProps.onFocus(e);\n  };\n\n  const onBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocused(false);\n    inputProps.onBlur && inputProps.onBlur(e);\n  };\n\n  const onCancel = React.useCallback(() => {\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n      HTMLInputElement.prototype,\n      'value',\n    )?.set;\n    nativeInputValueSetter?.call(inputRef.current, '');\n\n    const ev2 = new Event('input', { bubbles: true });\n    inputRef.current?.dispatchEvent(ev2);\n  }, [inputRef]);\n\n  const onIconClickStart = React.useCallback(\n    (e: TouchEvent) => onIconClick(e.originalEvent),\n    [onIconClick],\n  );\n\n  const onIconCancelClickStart = React.useCallback(\n    (e: TouchEvent) => {\n      e.originalEvent.preventDefault();\n      inputRef.current?.focus();\n      onCancel();\n    },\n    [inputRef, onCancel],\n  );\n\n  return (\n    <div\n      className={classNames(\n        styles['Search'],\n        sizeY !== SizeType.COMPACT && sizeYClassNames[sizeY],\n        isFocused && styles['Search--focused'],\n        value && styles['Search--has-value'],\n        after && styles['Search--has-after'],\n        icon && styles['Search--has-icon'],\n        className,\n      )}\n      style={style}\n    >\n      <div className={styles['Search__in']}>\n        <div className={styles['Search__width']} />\n        <label className={styles['Search__control']}>\n          <input\n            type=\"search\"\n            {...inputProps}\n            autoComplete={autoComplete}\n            ref={inputRef}\n            className={styles['Search__input']}\n            onFocus={onFocus}\n            onBlur={onBlur}\n            onChange={onChange}\n            value={value}\n          />\n          {platform === Platform.IOS && after && (\n            <div className={styles['Search__after-width']}>{after}</div>\n          )}\n          <div className={styles['Search__placeholder']}>\n            <div className={styles['Search__placeholder-in']}>\n              {before}\n              <SearchPlaceholderTypography className={styles['Search__placeholder-text']}>\n                {placeholder}\n              </SearchPlaceholderTypography>\n            </div>\n            {isFocused && platform === Platform.IOS && after && (\n              <div className={styles['Search__after-width']}>{after}</div>\n            )}\n          </div>\n        </label>\n        <div className={styles['Search__after']}>\n          <div className={styles['Search__icons']}>\n            {icon && (\n              <Touch onStart={onIconClickStart} className={styles['Search__icon']}>\n                {icon}\n              </Touch>\n            )}\n            {!!value && (\n              <Touch\n                onStart={onIconCancelClickStart}\n                onClick={onCancel}\n                className={styles['Search__icon']}\n              >\n                {platform === Platform.IOS ? <Icon16Clear /> : <Icon24Cancel />}\n              </Touch>\n            )}\n          </div>\n          {platform === Platform.IOS && after && (\n            <div className={styles['Search__after-in']} onClick={onCancel}>\n              {after}\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["React","Icon16Clear","Icon16SearchOutline","Icon24Cancel","classNames","noop","useAdaptivity","useEnsuredControl","useExternRef","usePlatform","SizeType","Platform","Touch","Headline","Title","styles","sizeYClassNames","none","REGULAR","SearchPlaceholderTypography","children","restProps","platform","IOS","level","weight","Search","before","className","defaultValue","placeholder","after","getRef","icon","onIconClick","style","autoComplete","onChange","onChangeProp","value","valueProp","inputProps","inputRef","isFocused","setFocused","useState","sizeY","onFocus","e","onBlur","onCancel","useCallback","nativeInputValueSetter","Object","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","originalEvent","onIconCancelClickStart","preventDefault","focus","div","COMPACT","label","input","type","ref","onStart","onClick"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Search/Search.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Clear, Icon16SearchOutline, Icon24Cancel } from '@vkontakte/icons';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useBooleanState } from '../../hooks/useBooleanState';\nimport { useEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { VKUITouchEvent } from '../../lib/touch';\nimport { HasRef } from '../../types';\nimport { Button } from '../Button/Button';\nimport { IconButton } from '../IconButton/IconButton';\nimport { TouchEvent } from '../Touch/Touch';\nimport { Headline } from '../Typography/Headline/Headline';\nimport styles from './Search.module.css';\n\nexport interface SearchProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement> {\n  /**\n   * iOS only. Текст кнопки \"отмена\", которая чистит текстовое поле и убирает фокус.\n   */\n  after?: React.ReactNode;\n  before?: React.ReactNode;\n  icon?: React.ReactNode;\n  onIconClick?: (e: VKUITouchEvent) => void;\n  defaultValue?: string;\n  iconAriaLabel?: string;\n  clearAriaLabel?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Search\n */\nexport const Search = ({\n  before = <Icon16SearchOutline />,\n  className,\n  defaultValue = '',\n  placeholder = 'Поиск',\n  after = 'Отмена',\n  getRef,\n  icon,\n  onIconClick = noop,\n  style,\n  autoComplete = 'off',\n  onChange: onChangeProp,\n  value: valueProp,\n  iconAriaLabel,\n  clearAriaLabel = 'Очистить',\n  ...inputProps\n}: SearchProps) => {\n  const inputRef = useExternRef(getRef);\n  const {\n    value: isFocused,\n    setTrue: setFocusedTrue,\n    setFalse: setFocusedFalse,\n  } = useBooleanState(false);\n\n  const [value, onChange] = useEnsuredControl({\n    defaultValue,\n    onChange: onChangeProp,\n    value: valueProp,\n  });\n  const { sizeY = 'none' } = useAdaptivity();\n  const platform = usePlatform();\n\n  const onFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocusedTrue();\n    inputProps.onFocus && inputProps.onFocus(e);\n  };\n\n  const onBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocusedFalse();\n    inputProps.onBlur && inputProps.onBlur(e);\n  };\n\n  const onCancel = React.useCallback(() => {\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n      HTMLInputElement.prototype,\n      'value',\n    )?.set;\n    nativeInputValueSetter?.call(inputRef.current, '');\n\n    const ev2 = new Event('input', { bubbles: true });\n    inputRef.current?.dispatchEvent(ev2);\n  }, [inputRef]);\n\n  const onIconClickStart = React.useCallback(\n    (e: TouchEvent) => onIconClick(e.originalEvent),\n    [onIconClick],\n  );\n\n  const onIconCancelClickStart = React.useCallback(\n    (e: TouchEvent) => {\n      e.originalEvent.preventDefault();\n      inputRef.current?.focus();\n      onCancel();\n    },\n    [inputRef, onCancel],\n  );\n\n  return (\n    <div\n      className={classNames(\n        'vkuiInternalSearch',\n        styles['Search'],\n        sizeY === 'none' && styles['Search--sizeY-none'],\n        sizeY === SizeType.COMPACT && styles['Search--sizeY-compact'],\n        isFocused && styles['Search--focused'],\n        value && styles['Search--has-value'],\n        after && styles['Search--has-after'],\n        icon && styles['Search--has-icon'],\n        className,\n      )}\n      style={style}\n    >\n      <div className={styles['Search__field']}>\n        <label className={styles['Search__control']}>\n          {before}\n          <Headline\n            Component=\"input\"\n            type=\"search\"\n            level=\"1\"\n            weight=\"3\"\n            {...inputProps}\n            placeholder={placeholder}\n            autoComplete={autoComplete}\n            getRootRef={inputRef}\n            className={styles['Search__input']}\n            onFocus={onFocus}\n            onBlur={onBlur}\n            onChange={onChange}\n            value={value}\n          />\n        </label>\n        <div className={styles['Search__icons']}>\n          {icon && (\n            <IconButton\n              hoverMode=\"opacity\"\n              onStart={onIconClickStart}\n              className={styles['Search__icon']}\n              onFocus={setFocusedTrue}\n              onBlur={setFocusedFalse}\n              aria-label={iconAriaLabel}\n            >\n              {icon}\n            </IconButton>\n          )}\n          {!!value && (\n            <IconButton\n              hoverMode=\"opacity\"\n              onStart={onIconCancelClickStart}\n              onClick={onCancel}\n              className={styles['Search__icon']}\n              aria-label={clearAriaLabel}\n            >\n              {platform === Platform.IOS ? <Icon16Clear /> : <Icon24Cancel />}\n            </IconButton>\n          )}\n        </div>\n      </div>\n      {platform === Platform.IOS && after && (\n        <Button\n          mode=\"tertiary\"\n          size=\"m\"\n          className={styles['Search__after']}\n          focusVisibleMode=\"inside\"\n          onClick={onCancel}\n          onFocus={setFocusedTrue}\n          onBlur={setFocusedFalse}\n        >\n          <span className={styles['Search__afterText']}>{after}</span>\n        </Button>\n      )}\n    </div>\n  );\n};\n"],"names":["React","Icon16Clear","Icon16SearchOutline","Icon24Cancel","classNames","noop","useAdaptivity","useBooleanState","useEnsuredControl","useExternRef","usePlatform","SizeType","Platform","Button","IconButton","Headline","styles","Search","before","className","defaultValue","placeholder","after","getRef","icon","onIconClick","style","autoComplete","onChange","onChangeProp","value","valueProp","iconAriaLabel","clearAriaLabel","inputProps","inputRef","isFocused","setTrue","setFocusedTrue","setFalse","setFocusedFalse","sizeY","platform","onFocus","e","onBlur","onCancel","useCallback","nativeInputValueSetter","Object","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","originalEvent","onIconCancelClickStart","preventDefault","focus","div","COMPACT","label","Component","type","level","weight","getRootRef","hoverMode","onStart","aria-label","onClick","IOS","mode","size","focusVisibleMode","span"],"mappings":"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"}

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

@@ -1 +1,156 @@
-.vkuiSearch{-webkit-tap-highlight-color:transparent;font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);font-weight:400;line-height:normal;overflow:hidden;padding:8px 16px;padding:8px var(--vkui--size_base_padding_horizontal--regular);transform:translateZ(0)}.vkuiSearch__in{position:relative}.vkuiSearch__width{color:transparent;white-space:nowrap;width:10000px}.vkuiSearch__control{align-items:center;border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);display:flex;height:100%;justify-content:flex-start;left:0;position:absolute;top:0;width:calc(100% - 1px)}.vkuiSearch__input{-webkit-appearance:none;background-color:initial;border:none;border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);box-sizing:border-box;flex-grow:1;font-family:inherit;font-size:17px;margin:0;max-width:100%;min-width:0;padding:0 22px 0 36px;position:relative}.vkuiSearch__input::-webkit-search-cancel-button,.vkuiSearch__input::-webkit-search-decoration,.vkuiSearch__input::-webkit-search-results-button,.vkuiSearch__input::-webkit-search-results-decoration{display:none}.vkuiSearch__input:focus{outline:none}.vkuiSearch--has-after .vkuiSearch__input{border-bottom-right-radius:0;border-top-right-radius:0}.vkuiSearch--has-icon .vkuiSearch__input,.vkuiSearch--has-icon .vkuiSearch__placeholder,.vkuiSearch--has-value .vkuiSearch__input,.vkuiSearch--has-value .vkuiSearch__placeholder{padding-right:40px}.vkuiSearch--has-icon.vkuiSearch--has-value .vkuiSearch__input,.vkuiSearch--has-icon.vkuiSearch--has-value .vkuiSearch__placeholder{padding-right:80px}.vkuiSearch__after-width{cursor:text;flex-shrink:0;font-size:17px;padding-left:12px;padding-right:4px;pointer-events:none}.vkuiSearch__placeholder{box-sizing:border-box;cursor:text;display:flex;font-size:0;left:0;padding-left:12px;padding-right:22px;pointer-events:none;position:absolute;text-align:left;width:100%}.vkuiSearch__placeholder-in{align-items:center;display:flex;flex-grow:1;max-width:100%;overflow:hidden}.vkuiSearch__placeholder-text{color:#818c99;color:var(--vkui--color_text_secondary);margin-left:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiSearch--has-value .vkuiSearch__placeholder-text{opacity:0}.vkuiSearch__icons{color:#99a2ad;color:var(--vkui--color_icon_secondary);position:absolute;right:100%;top:0}.vkuiSearch__icon,.vkuiSearch__icons{align-items:center;display:flex;justify-content:center}.vkuiSearch__icon{cursor:pointer;width:40px}.vkuiSearch__after{cursor:default;left:100%;position:absolute;top:0;transform:translate(0);transition:transform .3s cubic-bezier(.4,0,.2,1);transition:transform .3s var(--vkui--animation_easing_platform)}.vkuiSearch--focused .vkuiSearch__after,.vkuiSearch--has-value .vkuiSearch__after{transform:translate(-100%)}.vkuiSearch__after:before{content:"";display:block;height:100%;pointer-events:none;position:absolute;right:calc(100% - 1px);width:10px}.vkuiSearch__after-in{cursor:pointer;font-size:17px;padding-left:12px;padding-right:4px;position:relative}.vkuiSearch__after:after{border-radius:0 8px 8px 0;border-radius:0 var(--vkui--size_border_radius--regular) var(--vkui--size_border_radius--regular) 0;content:"";cursor:text;display:block;height:100%;pointer-events:none;position:absolute;right:100%;top:0;width:10px}.vkuiGroup--mode-plain .vkuiSearch{padding-top:4px}.vkuiSearch__after-width,.vkuiSearch__icon,.vkuiSearch__input,.vkuiSearch__placeholder,.vkuiSearch__placeholder-in,.vkuiSearch__width{height:32px;height:var(--vkui--size_search_height--compact)}.vkuiSearch__after,.vkuiSearch__after-width{line-height:32px;line-height:var(--vkui--size_search_height--compact)}.vkuiSearch--sizeY-regular .vkuiSearch__after-width,.vkuiSearch--sizeY-regular .vkuiSearch__icon,.vkuiSearch--sizeY-regular .vkuiSearch__input,.vkuiSearch--sizeY-regular .vkuiSearch__placeholder,.vkuiSearch--sizeY-regular .vkuiSearch__placeholder-in,.vkuiSearch--sizeY-regular .vkuiSearch__width{height:36px;height:var(--vkui--size_search_height--regular)}.vkuiSearch--sizeY-regular .vkuiSearch__after,.vkuiSearch--sizeY-regular .vkuiSearch__after-width{line-height:36px;line-height:var(--vkui--size_search_height--regular)}@media (max-width:767.9px) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiSearch--sizeY-none .vkuiSearch__after-width,.vkuiSearch--sizeY-none .vkuiSearch__icon,.vkuiSearch--sizeY-none .vkuiSearch__input,.vkuiSearch--sizeY-none .vkuiSearch__placeholder,.vkuiSearch--sizeY-none .vkuiSearch__placeholder-in,.vkuiSearch--sizeY-none .vkuiSearch__width{height:36px;height:var(--vkui--size_search_height--regular)}.vkuiSearch--sizeY-none .vkuiSearch__after,.vkuiSearch--sizeY-none .vkuiSearch__after-width{line-height:36px;line-height:var(--vkui--size_search_height--regular)}}.vkuiSearch{background:#fff;background:var(--vkui_internal--background,var(--vkui--color_background_content))}.vkuiSearch__control{background-color:#ebedf0;background-color:var(--vkui--color_search_field_background)}.vkuiSearch__in:hover .vkuiSearch__after-width,.vkuiSearch__in:hover .vkuiSearch__after:after,.vkuiSearch__in:hover .vkuiSearch__control{background-color:#e2e4e9;background-color:var(--vkui--color_search_field_background--hover)}.vkuiSearch__in:hover .vkuiSearch__after-width{color:#e2e4e9;color:var(--vkui--color_search_field_background--hover)}.vkuiSearch__in:active .vkuiSearch__after-width,.vkuiSearch__in:active .vkuiSearch__after:after,.vkuiSearch__in:active .vkuiSearch__control{background-color:#d8dbe2;background-color:var(--vkui--color_search_field_background--active)}.vkuiSearch__in:active .vkuiSearch__after-width{color:#d8dbe2;color:var(--vkui--color_search_field_background--active)}.vkuiSearch__input{color:#000;color:var(--vkui--color_text_primary)}.vkuiSearch__placeholder{color:#818c99;color:var(--vkui--color_icon_medium)}.vkuiSearch__after-width{background:#ebedf0;background:var(--vkui--color_search_field_background);color:#ebedf0;color:var(--vkui--color_search_field_background)}.vkuiSearch__after{background:#fff;background:var(--vkui_internal--background,var(--vkui--color_background_content));color:#2688eb;color:var(--vkui--color_icon_accent_themed)}.vkuiSearch__after:after{background-color:#ebedf0;background-color:var(--vkui--color_search_field_background)}.vkuiSearch__after:before{background-color:#fff;background-color:var(--vkui_internal--background,var(--vkui--color_background_content))}.vkuiPanelHeader .vkuiSearch{background:#fff;background:var(--vkui--color_header_background)}.vkuiPanelHeader .vkuiSearch__control{background-color:#ebedf0;background-color:var(--vkui--color_search_field_background)}.vkuiPanelHeader .vkuiSearch__input{color:#000;color:var(--vkui--color_text_primary)}.vkuiPanelHeader .vkuiSearch__placeholder{color:#99a2ad;color:var(--vkui--color_icon_secondary)}.vkuiPanelHeader .vkuiSearch__after-width{background:#ebedf0;background:var(--vkui--color_search_field_background);color:#ebedf0;color:var(--vkui--color_search_field_background)}.vkuiPanelHeader .vkuiSearch__after{background:#fff;background:var(--vkui--color_header_background);color:#2688eb;color:var(--vkui--color_icon_accent_themed)}.vkuiPanelHeader .vkuiSearch__after:after{background-color:#ebedf0;background-color:var(--vkui--color_search_field_background)}.vkuiPanelHeader .vkuiSearch__after:before{background-color:#fff;background-color:var(--vkui--color_header_background)}
+.Search {
+  display: flex;
+  overflow: hidden;
+  padding: 8px var(--vkui--size_base_padding_horizontal--regular);
+  -webkit-tap-highlight-color: transparent;
+
+  --vkui_internal--search_height: var(--vkui--size_search_height--regular);
+}
+
+/*
+  sizeY-compact
+ */
+
+.Search--sizeY-compact {
+  --vkui_internal--search_height: var(--vkui--size_search_height--compact);
+}
+
+@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
+  .Search--sizeY-none {
+    --vkui_internal--search_height: var(--vkui--size_search_height--compact);
+  }
+}
+
+.Search__field {
+  flex: 2;
+  position: relative;
+  display: flex;
+  height: var(--vkui_internal--search_height);
+  background-color: var(--vkui--color_search_field_background);
+  border-radius: var(--vkui--size_border_radius--regular);
+  /**
+   * Костыль для PanelHeader. Необходимо для растягивания на всю ширину.
+  */
+  width: 10000px;
+}
+
+.Search__field:hover {
+  background-color: var(--vkui--color_search_field_background--hover);
+}
+
+.Search__field:active {
+  background-color: var(--vkui--color_search_field_background--active);
+}
+
+.Search__control {
+  padding-left: 12px;
+  color: var(--vkui--color_icon_medium);
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  width: calc(100% - 1px);
+  height: 100%;
+  border-radius: inherit;
+}
+
+.Search__input {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  height: 100%;
+  -webkit-appearance: none; /* не используем textfield из-за бага в iOS 15.1 http://www.openradar.me/FB9744107 */
+  border: none;
+  margin: 0;
+  padding: 0;
+  padding-left: 36px;
+  box-sizing: border-box;
+  border-radius: inherit;
+  max-width: 100%;
+  flex-grow: 1;
+  min-width: 0;
+  background-color: transparent;
+  color: var(--vkui--color_text_primary);
+}
+
+.Search__input::-webkit-search-decoration,
+.Search__input::-webkit-search-cancel-button,
+.Search__input::-webkit-search-results-button,
+.Search__input::-webkit-search-results-decoration {
+  display: none;
+}
+
+.Search__input:focus {
+  outline: none;
+}
+
+.Search--has-after .Search__input {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.Search--has-value .Search__input,
+.Search--has-icon .Search__input {
+  margin-right: calc(var(--vkui_internal--search_height) + 4px);
+}
+
+.Search--has-icon.Search--has-value .Search__input {
+  margin-right: calc((var(--vkui_internal--search_height) + 4px) * 2);
+}
+
+.Search__icons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--vkui--color_icon_secondary);
+}
+
+.Search__icon {
+  width: calc(var(--vkui_internal--search_height) + 4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  border-radius: var(--vkui--size_border_radius--regular);
+}
+
+/* stylelint-disable-next-line @project-tools/stylelint-atomic */
+
+.Search__icon :global(.vkuiIcon) {
+  padding: 0;
+}
+
+.Search__after {
+  flex: 0;
+  transform: translate(50%);
+  transform-origin: left;
+  min-width: initial;
+  max-width: -webkit-min-content;
+  max-width: -moz-min-content;
+  max-width: min-content;
+  pointer-events: none;
+  transition: flex 0.3s var(--vkui--animation_easing_platform),
+    transform 0.3s var(--vkui--animation_easing_platform);
+  overflow: hidden;
+  margin-left: 4px;
+  margin-right: calc(4px - var(--vkui--size_base_padding_horizontal--regular));
+}
+
+.Search--focused .Search__after,
+.Search--has-value .Search__after {
+  flex: 1;
+  transform: translate(0);
+  pointer-events: initial;
+}
+
+.Search__afterText {
+  display: block;
+  white-space: nowrap;
+  text-overflow: clip;
+  overflow: hidden;
+}
+
+.Group--mode-plain .Search {
+  padding-top: 4px;
+}

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

@@ -1 +1,64 @@
-.vkuiSegmentedControl{background-color:#f5f5f5;background-color:var(--vkui--color_background_secondary);border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);box-sizing:border-box;font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);height:30px;padding:2px}.vkuiSegmentedControl--size-l{height:36px}.vkuiSegmentedControl__in{border-radius:inherit;display:flex;height:100%;position:relative;transition:all .1s ease-out;width:100%}.vkuiSegmentedControl__slider{background-color:#fff;background-color:var(--vkui--color_segmented_control);border-radius:inherit;bottom:0;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.08),0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04);box-shadow:inset 0 0 0 .5px var(--vkui--color_image_border_alpha),0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04);left:0;position:absolute;top:0;transform-origin:0 0;transition:transform .15s}.vkuiSegmentedControl__option{display:block;flex:1;margin:0;padding:0;position:relative}.vkuiSegmentedControl--sizeY-regular{height:36px}.vkuiSegmentedControl--sizeY-regular.vkuiSegmentedControl--size-l{height:44px}@media (max-width:767.9px) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiSegmentedControl--sizeY-none{height:36px}.vkuiSegmentedControl--sizeY-none.vkuiSegmentedControl--size-l{height:44px}}
+.SegmentedControl {
+  height: 30px;
+  padding: 2px;
+  border-radius: var(--vkui--size_border_radius--regular);
+  background-color: var(--vkui--color_background_secondary);
+  box-sizing: border-box;
+  font-family: var(--vkui--font_family_base);
+}
+
+.SegmentedControl--size-l {
+  height: 36px;
+}
+
+.SegmentedControl__in {
+  position: relative;
+  display: flex;
+  height: 100%;
+  width: 100%;
+  transition: all 100ms ease-out;
+  border-radius: inherit;
+}
+
+.SegmentedControl__slider {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  background-color: var(--vkui--color_segmented_control);
+  transition: transform 150ms;
+  transform-origin: 0 0;
+  border-radius: inherit;
+  box-shadow: inset 0 0 0 0.5px var(--vkui--color_image_border_alpha), 0 3px 8px rgba(0, 0, 0, 0.12),
+    0 3px 1px rgba(0, 0, 0, 0.04);
+}
+
+.SegmentedControl__option {
+  position: relative;
+  flex: 1;
+  display: block;
+  margin: 0;
+  padding: 0;
+}
+
+/**
+ * sizeY REGULAR
+ */
+
+.SegmentedControl--sizeY-regular {
+  height: 36px;
+}
+
+.SegmentedControl--sizeY-regular.SegmentedControl--size-l {
+  height: 44px;
+}
+
+@media (pointer: coarse) and (min-height: 415px),(pointer: none) and (min-height: 415px),(max-width: 767.9px) and (min-height: 415px) {
+  .SegmentedControl--sizeY-none {
+    height: 36px;
+  }
+
+  .SegmentedControl--sizeY-none.SegmentedControl--size-l {
+    height: 44px;
+  }
+}

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

@@ -1,6 +1,8 @@
-/// <reference types="react" />
-import { VisuallyHiddenInputProps } from '../../VisuallyHiddenInput/VisuallyHiddenInput';
+import * as React from 'react';
+import { HasRef } from '../../../types';
+export interface SegmentedControlOptionProps extends React.InputHTMLAttributes<HTMLInputElement>, HasRef<HTMLInputElement> {
+}
 /**
  * @see https://vkcom.github.io/VKUI/#/SegmentedControl
  */
-export declare const SegmentedControlOption: ({ className, style, children, ...restProps }: VisuallyHiddenInputProps) => JSX.Element;
+export declare const SegmentedControlOption: ({ getRef, className, style, children, ...restProps }: SegmentedControlOptionProps) => JSX.Element;

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

@@ -5,7 +5,7 @@ import { useFocusVisible } from '../../../hooks/useFocusVisible';
 import { SizeType } from '../../../lib/adaptivity';
 import { callMultiple } from '../../../lib/callMultiple';
 import { FocusVisible } from '../../FocusVisible/FocusVisible';
-import { VisuallyHiddenInput } from '../../VisuallyHiddenInput/VisuallyHiddenInput';
+import { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';
 import styles from './SegmentedControlOption.module.css';
 const sizeYClassNames = {
     none: styles['SegmentedControlOption__content--sizeY-none'],
@@ -13,20 +13,23 @@ const sizeYClassNames = {
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/SegmentedControl
- */ export const SegmentedControlOption = ({ className , style , children , ...restProps })=>{
-    const { onBlur , onFocus  } = useFocusVisible();
+ */ export const SegmentedControlOption = ({ getRef , className , style , children , ...restProps })=>{
+    const { focusVisible , onBlur , onFocus  } = useFocusVisible();
     const { sizeY ='none'  } = useAdaptivity();
     return /*#__PURE__*/ React.createElement("label", {
         className: classNames(styles['SegmentedControlOption'], restProps.checked && styles['SegmentedControlOption--checked'], className),
         style: style
-    }, /*#__PURE__*/ React.createElement(VisuallyHiddenInput, {
+    }, /*#__PURE__*/ React.createElement(VisuallyHidden, {
         ...restProps,
+        Component: "input",
+        getRootRef: getRef,
         type: "radio",
         onBlur: callMultiple(onBlur, restProps.onBlur),
         onFocus: callMultiple(onFocus, restProps.onFocus)
     }), /*#__PURE__*/ React.createElement("span", {
         className: classNames(styles['SegmentedControlOption__content'], sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY])
     }, children), /*#__PURE__*/ React.createElement(FocusVisible, {
+        visible: focusVisible,
         mode: "inside"
     }));
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../../hooks/useAdaptivity';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport { SizeType } from '../../../lib/adaptivity';\nimport { callMultiple } from '../../../lib/callMultiple';\nimport { FocusVisible } from '../../FocusVisible/FocusVisible';\nimport {\n  VisuallyHiddenInput,\n  VisuallyHiddenInputProps,\n} from '../../VisuallyHiddenInput/VisuallyHiddenInput';\nimport styles from './SegmentedControlOption.module.css';\n\nconst sizeYClassNames = {\n  none: styles['SegmentedControlOption__content--sizeY-none'],\n  [SizeType.COMPACT]: styles['SegmentedControlOption__content--sizeY-compact'],\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SegmentedControl\n */\nexport const SegmentedControlOption = ({\n  className,\n  style,\n  children,\n  ...restProps\n}: VisuallyHiddenInputProps) => {\n  const { onBlur, onFocus } = useFocusVisible();\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <label\n      className={classNames(\n        styles['SegmentedControlOption'],\n        restProps.checked && styles['SegmentedControlOption--checked'],\n        className,\n      )}\n      style={style}\n    >\n      <VisuallyHiddenInput\n        {...restProps}\n        type=\"radio\"\n        onBlur={callMultiple(onBlur, restProps.onBlur)}\n        onFocus={callMultiple(onFocus, restProps.onFocus)}\n      />\n      <span\n        className={classNames(\n          styles['SegmentedControlOption__content'],\n          sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        )}\n      >\n        {children}\n      </span>\n      <FocusVisible mode=\"inside\" />\n    </label>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useFocusVisible","SizeType","callMultiple","FocusVisible","VisuallyHiddenInput","styles","sizeYClassNames","none","COMPACT","SegmentedControlOption","className","style","children","restProps","onBlur","onFocus","sizeY","label","checked","type","span","REGULAR","mode"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA+B;AAC7D,SAASC,eAAe,QAAQ,iCAAiC;AACjE,SAASC,QAAQ,QAAQ,0BAA0B;AACnD,SAASC,YAAY,QAAQ,4BAA4B;AACzD,SAASC,YAAY,QAAQ,kCAAkC;AAC/D,SACEC,mBAAmB,QAEd,gDAAgD;AACvD,OAAOC,YAAY,sCAAsC;AAEzD,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,8CAA8C;IAC3D,CAACJ,SAASO,OAAO,CAAC,EAAEH,MAAM,CAAC,iDAAiD;AAC9E;AAEA;;CAEC,GACD,OAAO,MAAMI,yBAAyB,CAAC,EACrCC,UAAS,EACTC,MAAK,EACLC,SAAQ,EACR,GAAGC,WACsB,GAAK;IAC9B,MAAM,EAAEC,OAAM,EAAEC,QAAO,EAAE,GAAGf;IAC5B,MAAM,EAAEgB,OAAQ,OAAM,EAAE,GAAGjB;IAE3B,qBACE,oBAACkB;QACCP,WAAWZ,WACTO,MAAM,CAAC,yBAAyB,EAChCQ,UAAUK,OAAO,IAAIb,MAAM,CAAC,kCAAkC,EAC9DK;QAEFC,OAAOA;qBAEP,oBAACP;QACE,GAAGS,SAAS;QACbM,MAAK;QACLL,QAAQZ,aAAaY,QAAQD,UAAUC,MAAM;QAC7CC,SAASb,aAAaa,SAASF,UAAUE,OAAO;sBAElD,oBAACK;QACCV,WAAWZ,WACTO,MAAM,CAAC,kCAAkC,EACzCW,UAAUf,SAASoB,OAAO,IAAIf,eAAe,CAACU,MAAM;OAGrDJ,yBAEH,oBAACT;QAAamB,MAAK;;AAGzB,EAAE"}
+{"version":3,"sources":["../../../../../src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../../hooks/useAdaptivity';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport { SizeType } from '../../../lib/adaptivity';\nimport { callMultiple } from '../../../lib/callMultiple';\nimport { HasRef } from '../../../types';\nimport { FocusVisible } from '../../FocusVisible/FocusVisible';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport styles from './SegmentedControlOption.module.css';\n\nconst sizeYClassNames = {\n  none: styles['SegmentedControlOption__content--sizeY-none'],\n  [SizeType.COMPACT]: styles['SegmentedControlOption__content--sizeY-compact'],\n};\n\nexport interface SegmentedControlOptionProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SegmentedControl\n */\nexport const SegmentedControlOption = ({\n  getRef,\n  className,\n  style,\n  children,\n  ...restProps\n}: SegmentedControlOptionProps) => {\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <label\n      className={classNames(\n        styles['SegmentedControlOption'],\n        restProps.checked && styles['SegmentedControlOption--checked'],\n        className,\n      )}\n      style={style}\n    >\n      <VisuallyHidden\n        {...restProps}\n        Component=\"input\"\n        getRootRef={getRef}\n        type=\"radio\"\n        onBlur={callMultiple(onBlur, restProps.onBlur)}\n        onFocus={callMultiple(onFocus, restProps.onFocus)}\n      />\n      <span\n        className={classNames(\n          styles['SegmentedControlOption__content'],\n          sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        )}\n      >\n        {children}\n      </span>\n      <FocusVisible visible={focusVisible} mode=\"inside\" />\n    </label>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useFocusVisible","SizeType","callMultiple","FocusVisible","VisuallyHidden","styles","sizeYClassNames","none","COMPACT","SegmentedControlOption","getRef","className","style","children","restProps","focusVisible","onBlur","onFocus","sizeY","label","checked","Component","getRootRef","type","span","REGULAR","visible","mode"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA+B;AAC7D,SAASC,eAAe,QAAQ,iCAAiC;AACjE,SAASC,QAAQ,QAAQ,0BAA0B;AACnD,SAASC,YAAY,QAAQ,4BAA4B;AAEzD,SAASC,YAAY,QAAQ,kCAAkC;AAC/D,SAASC,cAAc,QAAQ,sCAAsC;AACrE,OAAOC,YAAY,sCAAsC;AAEzD,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,8CAA8C;IAC3D,CAACJ,SAASO,OAAO,CAAC,EAAEH,MAAM,CAAC,iDAAiD;AAC9E;AAMA;;CAEC,GACD,OAAO,MAAMI,yBAAyB,CAAC,EACrCC,OAAM,EACNC,UAAS,EACTC,MAAK,EACLC,SAAQ,EACR,GAAGC,WACyB,GAAK;IACjC,MAAM,EAAEC,aAAY,EAAEC,OAAM,EAAEC,QAAO,EAAE,GAAGjB;IAC1C,MAAM,EAAEkB,OAAQ,OAAM,EAAE,GAAGnB;IAE3B,qBACE,oBAACoB;QACCR,WAAWb,WACTO,MAAM,CAAC,yBAAyB,EAChCS,UAAUM,OAAO,IAAIf,MAAM,CAAC,kCAAkC,EAC9DM;QAEFC,OAAOA;qBAEP,oBAACR;QACE,GAAGU,SAAS;QACbO,WAAU;QACVC,YAAYZ;QACZa,MAAK;QACLP,QAAQd,aAAac,QAAQF,UAAUE,MAAM;QAC7CC,SAASf,aAAae,SAASH,UAAUG,OAAO;sBAElD,oBAACO;QACCb,WAAWb,WACTO,MAAM,CAAC,kCAAkC,EACzCa,UAAUjB,SAASwB,OAAO,IAAInB,eAAe,CAACY,MAAM;OAGrDL,yBAEH,oBAACV;QAAauB,SAASX;QAAcY,MAAK;;AAGhD,EAAE"}

package/dist/cssm/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.module.css

@@ -1 +1,52 @@
-.vkuiSegmentedControlOption{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:inherit;box-sizing:border-box;color:#000;color:var(--vkui--color_text_primary);cursor:pointer;height:100%;transition:color .1s ease-out;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vkuiSegmentedControlOption .vkuiIcon{color:#2c2d2e;color:var(--vkui--color_icon_primary)}.vkuiSegmentedControlOption:not(.vkuiSegmentedControlOption--checked):hover{opacity:.5}.vkuiSegmentedControlOption__content{align-content:center;align-items:center;border-radius:inherit;display:flex;font-size:16px;font-size:var(--vkui--font_text--font_size--regular);font-weight:500;font-weight:var(--vkui--font_weight_accent2);height:100%;justify-content:center;line-height:20px;line-height:var(--vkui--font_text--line_height--regular);width:100%}.vkuiSegmentedControlOption__content--sizeY-compact.vkuiSegmentedControlOption__content{font-size:13px;font-size:var(--vkui--font_footnote--font_size--regular);font-weight:400;font-weight:var(--vkui--font_weight_accent3);line-height:16px;line-height:var(--vkui--font_footnote--line_height--regular)}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiSegmentedControlOption__content--sizeY-none.vkuiSegmentedControlOption__content{font-size:13px;font-size:var(--vkui--font_footnote--font_size--regular);font-weight:400;font-weight:var(--vkui--font_weight_accent3);line-height:16px;line-height:var(--vkui--font_footnote--line_height--regular)}}
+.SegmentedControlOption {
+  height: 100%;
+  border: 0;
+  border-radius: inherit;
+  background: transparent;
+  color: var(--vkui--color_text_primary);
+  transition: color 100ms ease-out;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  box-sizing: border-box;
+  cursor: pointer;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
+
+.SegmentedControlOption :global(.vkuiIcon) {
+  color: var(--vkui--color_icon_primary);
+}
+
+.SegmentedControlOption:not(.SegmentedControlOption--checked):hover {
+  opacity: 0.5;
+}
+
+.SegmentedControlOption__content {
+  display: flex;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+  border-radius: inherit;
+  font-size: var(--vkui--font_text--font_size--regular);
+  line-height: var(--vkui--font_text--line_height--regular);
+  font-weight: var(--vkui--font_weight_accent2);
+}
+
+.SegmentedControlOption__content--sizeY-compact.SegmentedControlOption__content {
+  font-size: var(--vkui--font_footnote--font_size--regular);
+  line-height: var(--vkui--font_footnote--line_height--regular);
+  font-weight: var(--vkui--font_weight_accent3);
+}
+
+@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
+  .SegmentedControlOption__content--sizeY-none.SegmentedControlOption__content {
+    font-size: var(--vkui--font_footnote--font_size--regular);
+    line-height: var(--vkui--font_footnote--line_height--regular);
+    font-weight: var(--vkui--font_weight_accent3);
+  }
+}

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

@@ -1 +1,87 @@
-.vkuiSelect{box-sizing:border-box;cursor:pointer;font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);position:relative}.vkuiSelect__el{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;display:block;font-family:inherit;font-size:16px;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%;z-index:6;z-index:var(--vkui_internal--z_index_form_field_side)}.vkuiSelect__container{box-sizing:border-box;color:#000;color:var(--vkui--color_text_primary);flex-grow:1;flex-shrink:1;overflow:hidden;padding-left:12px;padding-right:12px;position:relative;z-index:1;z-index:var(--vkui_internal--z_index_form_field_element)}.vkuiSelect--hasBefore .vkuiSelect__container{padding-left:0}.vkuiSelect--hasAfter .vkuiSelect__container,.vkuiSelect--hasPlaceholder .vkuiSelect__container{padding-right:0}.vkuiSelect--multiline .vkuiSelect__container{padding-bottom:12px;padding-top:12px}.vkuiSelect--sizeY-compact.vkuiSelect--multiline .vkuiSelect__container{padding-bottom:8px;padding-top:8px}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiSelect--sizeY-none.vkuiSelect--multiline .vkuiSelect__container{padding-bottom:8px;padding-top:8px}}.vkuiSelect__title{display:block}.vkuiSelect:not(.vkuiSelect--multiline) .vkuiSelect__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiSelect--empty .vkuiSelect__title{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiSelect--align-right .vkuiSelect__title{text-align:right}.vkuiSelect--align-center .vkuiSelect__title{text-align:center}.vkuiInternalCalendarHeader__picker .vkuiSelect__container{padding-right:4px}
+.Select {
+  position: relative;
+  cursor: pointer;
+  box-sizing: border-box;
+  font-family: var(--vkui--font_family_base);
+}
+
+.Select__el {
+  display: block;
+  position: absolute;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  border: none;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  z-index: var(--vkui_internal--z_index_form_field_side);
+  font-size: 16px;
+  font-family: inherit;
+}
+
+.Select__container {
+  flex-grow: 1;
+  flex-shrink: 1;
+  padding-right: 0;
+  padding-left: 12px;
+  color: var(--vkui--color_text_primary);
+  box-sizing: border-box;
+  position: relative;
+  z-index: var(--vkui_internal--z_index_form_field_element);
+  overflow: hidden;
+}
+
+.Select--hasBefore .Select__container {
+  padding-left: 0;
+}
+
+.Select--multiline .Select__container {
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+
+.Select--sizeY-compact.Select--multiline .Select__container {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
+@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
+  .Select--sizeY-none.Select--multiline .Select__container {
+    padding-top: 8px;
+    padding-bottom: 8px;
+  }
+}
+
+.Select__title {
+  display: block;
+}
+
+.Select:not(.Select--multiline) .Select__title {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.Select--empty .Select__title {
+  color: var(--vkui--color_text_secondary);
+}
+
+.Select--align-right .Select__title {
+  text-align: right;
+}
+
+.Select--align-center .Select__title {
+  text-align: center;
+}
+
+/**
+ * CMP:
+ * CalendarHeader
+ */
+
+:global(.vkuiInternalCalendarHeader__picker) .Select__container {
+  padding-right: 4px;
+}