@vkontakte/vkui 5.2.4 → 5.3.1

package/dist/components/Search/Search.js

@@ -1,150 +1,144 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["children"],
-  _excluded2 = ["before", "className", "defaultValue", "placeholder", "after", "getRef", "icon", "onIconClick", "style", "autoComplete", "onChange", "value"];
-import * as React from 'react';
-import { Icon16Clear, Icon16SearchOutline, Icon24Cancel } from '@vkontakte/icons';
-import { classNames, noop } from '@vkontakte/vkjs';
-import { useAdaptivity } from '../../hooks/useAdaptivity';
-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 { Headline } from '../Typography/Headline/Headline';
-import { Title } from '../Typography/Title/Title';
-var sizeYClassNames = _defineProperty({
-  none: "vkuiSearch--sizeY-none"
+import _define_property from "@swc/helpers/src/_define_property.mjs";
+import _object_spread from "@swc/helpers/src/_object_spread.mjs";
+import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
+import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
+import _sliced_to_array from "@swc/helpers/src/_sliced_to_array.mjs";
+import * as React from "react";
+import { Icon16Clear, Icon16SearchOutline, Icon24Cancel } from "@vkontakte/icons";
+import { classNames, noop } from "@vkontakte/vkjs";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
+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 { Headline } from "../Typography/Headline/Headline";
+import { Title } from "../Typography/Title/Title";
+var sizeYClassNames = _define_property({
+    none: "vkuiSearch--sizeY-none"
 }, SizeType.REGULAR, "vkuiSearch--sizeY-regular");
-var SearchPlaceholderTypography = function SearchPlaceholderTypography(_ref) {
-  var children = _ref.children,
-    restProps = _objectWithoutProperties(_ref, _excluded);
-  var platform = usePlatform();
-  switch (platform) {
-    case Platform.IOS:
-      return /*#__PURE__*/React.createElement(Title, _extends({}, restProps, {
-        level: "3",
-        weight: "3"
-      }), children);
-    default:
-      return /*#__PURE__*/React.createElement(Headline, _extends({}, restProps, {
-        weight: "3"
-      }), children);
-  }
+var SearchPlaceholderTypography = function(_param) {
+    var children = _param.children, restProps = _object_without_properties(_param, [
+        "children"
+    ]);
+    var platform = usePlatform();
+    switch(platform){
+        case Platform.IOS:
+            return /*#__PURE__*/ React.createElement(Title, _object_spread_props(_object_spread({}, restProps), {
+                level: "3",
+                weight: "3"
+            }), children);
+        default:
+            return /*#__PURE__*/ React.createElement(Headline, _object_spread_props(_object_spread({}, restProps), {
+                weight: "3"
+            }), children);
+    }
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/Search
- */
-export var Search = function Search(_ref2) {
-  var _ref2$before = _ref2.before,
-    before = _ref2$before === void 0 ? /*#__PURE__*/React.createElement(Icon16SearchOutline, null) : _ref2$before,
-    className = _ref2.className,
-    _ref2$defaultValue = _ref2.defaultValue,
-    defaultValue = _ref2$defaultValue === void 0 ? '' : _ref2$defaultValue,
-    _ref2$placeholder = _ref2.placeholder,
-    placeholder = _ref2$placeholder === void 0 ? 'Поиск' : _ref2$placeholder,
-    _ref2$after = _ref2.after,
-    after = _ref2$after === void 0 ? 'Отмена' : _ref2$after,
-    getRef = _ref2.getRef,
-    icon = _ref2.icon,
-    _ref2$onIconClick = _ref2.onIconClick,
-    onIconClick = _ref2$onIconClick === void 0 ? noop : _ref2$onIconClick,
-    style = _ref2.style,
-    _ref2$autoComplete = _ref2.autoComplete,
-    autoComplete = _ref2$autoComplete === void 0 ? 'off' : _ref2$autoComplete,
-    onChangeProp = _ref2.onChange,
-    valueProp = _ref2.value,
-    inputProps = _objectWithoutProperties(_ref2, _excluded2);
-  var inputRef = useExternRef(getRef);
-  var _React$useState = React.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    isFocused = _React$useState2[0],
-    setFocused = _React$useState2[1];
-  var _useEnsuredControl = useEnsuredControl({
-      defaultValue: defaultValue,
-      onChange: onChangeProp,
-      value: valueProp
-    }),
-    _useEnsuredControl2 = _slicedToArray(_useEnsuredControl, 2),
-    value = _useEnsuredControl2[0],
-    onChange = _useEnsuredControl2[1];
-  var _useAdaptivity = useAdaptivity(),
-    _useAdaptivity$sizeY = _useAdaptivity.sizeY,
-    sizeY = _useAdaptivity$sizeY === void 0 ? 'none' : _useAdaptivity$sizeY;
-  var platform = usePlatform();
-  var onFocus = function onFocus(e) {
-    setFocused(true);
-    inputProps.onFocus && inputProps.onFocus(e);
-  };
-  var onBlur = function onBlur(e) {
-    setFocused(false);
-    inputProps.onBlur && inputProps.onBlur(e);
-  };
-  var onCancel = React.useCallback(function () {
-    var _Object$getOwnPropert, _inputRef$current;
-    // eslint-disable-next-line @typescript-eslint/unbound-method
-    var nativeInputValueSetter = (_Object$getOwnPropert = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')) === null || _Object$getOwnPropert === void 0 ? void 0 : _Object$getOwnPropert.set;
-    nativeInputValueSetter === null || nativeInputValueSetter === void 0 ? void 0 : nativeInputValueSetter.call(inputRef.current, '');
-    var ev2 = new Event('input', {
-      bubbles: true
-    });
-    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.dispatchEvent(ev2);
-  }, [inputRef]);
-  var onIconClickStart = React.useCallback(function (e) {
-    return onIconClick(e.originalEvent);
-  }, [onIconClick]);
-  var onIconCancelClickStart = React.useCallback(function (e) {
-    var _inputRef$current2;
-    e.originalEvent.preventDefault();
-    (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
-    onCancel();
-  }, [inputRef, onCancel]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames("vkuiSearch", platform === Platform.IOS && "vkuiSearch--ios", sizeY !== SizeType.COMPACT && sizeYClassNames[sizeY], isFocused && "vkuiSearch--focused", value && "vkuiSearch--has-value", after && "vkuiSearch--has-after", icon && "vkuiSearch--has-icon", className),
-    style: style
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "vkuiSearch__in"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "vkuiSearch__width"
-  }), /*#__PURE__*/React.createElement("label", {
-    className: "vkuiSearch__control"
-  }, /*#__PURE__*/React.createElement("input", _extends({
-    type: "search"
-  }, inputProps, {
-    autoComplete: autoComplete,
-    ref: inputRef,
-    className: "vkuiSearch__input",
-    onFocus: onFocus,
-    onBlur: onBlur,
-    onChange: onChange,
-    value: value
-  })), platform === Platform.IOS && after && /*#__PURE__*/React.createElement("div", {
-    className: "vkuiSearch__after-width"
-  }, after), /*#__PURE__*/React.createElement("div", {
-    className: "vkuiSearch__placeholder"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "vkuiSearch__placeholder-in"
-  }, before, /*#__PURE__*/React.createElement(SearchPlaceholderTypography, {
-    className: "vkuiSearch__placeholder-text"
-  }, placeholder)), isFocused && platform === Platform.IOS && after && /*#__PURE__*/React.createElement("div", {
-    className: "vkuiSearch__after-width"
-  }, after))), /*#__PURE__*/React.createElement("div", {
-    className: "vkuiSearch__after"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "vkuiSearch__icons"
-  }, icon && /*#__PURE__*/React.createElement(Touch, {
-    onStart: onIconClickStart,
-    className: "vkuiSearch__icon"
-  }, icon), !!value && /*#__PURE__*/React.createElement(Touch, {
-    onStart: onIconCancelClickStart,
-    onClick: onCancel,
-    className: "vkuiSearch__icon"
-  }, platform === Platform.IOS ? /*#__PURE__*/React.createElement(Icon16Clear, null) : /*#__PURE__*/React.createElement(Icon24Cancel, null))), platform === Platform.IOS && after && /*#__PURE__*/React.createElement("div", {
-    className: "vkuiSearch__after-in",
-    onClick: onCancel
-  }, after))));
+ */ export var Search = function(_param) {
+    var _param_before = _param.before, before = _param_before === void 0 ? /*#__PURE__*/ React.createElement(Icon16SearchOutline, null) : _param_before, className = _param.className, _param_defaultValue = _param.defaultValue, defaultValue = _param_defaultValue === void 0 ? "" : _param_defaultValue, _param_placeholder = _param.placeholder, placeholder = _param_placeholder === void 0 ? "Поиск" : _param_placeholder, _param_after = _param.after, after = _param_after === void 0 ? "Отмена" : _param_after, getRef = _param.getRef, icon = _param.icon, _param_onIconClick = _param.onIconClick, onIconClick = _param_onIconClick === void 0 ? noop : _param_onIconClick, style = _param.style, _param_autoComplete = _param.autoComplete, autoComplete = _param_autoComplete === void 0 ? "off" : _param_autoComplete, onChangeProp = _param.onChange, valueProp = _param.value, inputProps = _object_without_properties(_param, [
+        "before",
+        "className",
+        "defaultValue",
+        "placeholder",
+        "after",
+        "getRef",
+        "icon",
+        "onIconClick",
+        "style",
+        "autoComplete",
+        "onChange",
+        "value"
+    ]);
+    var inputRef = useExternRef(getRef);
+    var _React_useState = _sliced_to_array(React.useState(false), 2), isFocused = _React_useState[0], setFocused = _React_useState[1];
+    var _useEnsuredControl = _sliced_to_array(useEnsuredControl({
+        defaultValue: defaultValue,
+        onChange: onChangeProp,
+        value: valueProp
+    }), 2), value = _useEnsuredControl[0], onChange = _useEnsuredControl[1];
+    var _useAdaptivity = useAdaptivity(), _useAdaptivity_sizeY = _useAdaptivity.sizeY, sizeY = _useAdaptivity_sizeY === void 0 ? "none" : _useAdaptivity_sizeY;
+    var platform = usePlatform();
+    var onFocus = function(e) {
+        setFocused(true);
+        inputProps.onFocus && inputProps.onFocus(e);
+    };
+    var onBlur = function(e) {
+        setFocused(false);
+        inputProps.onBlur && inputProps.onBlur(e);
+    };
+    var onCancel = React.useCallback(function() {
+        var _Object_getOwnPropertyDescriptor, _inputRef_current;
+        // eslint-disable-next-line @typescript-eslint/unbound-method
+        var nativeInputValueSetter = (_Object_getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")) === null || _Object_getOwnPropertyDescriptor === void 0 ? void 0 : _Object_getOwnPropertyDescriptor.set;
+        nativeInputValueSetter === null || nativeInputValueSetter === void 0 ? void 0 : nativeInputValueSetter.call(inputRef.current, "");
+        var ev2 = new Event("input", {
+            bubbles: true
+        });
+        (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.dispatchEvent(ev2);
+    }, [
+        inputRef
+    ]);
+    var onIconClickStart = React.useCallback(function(e) {
+        return onIconClick(e.originalEvent);
+    }, [
+        onIconClick
+    ]);
+    var onIconCancelClickStart = React.useCallback(function(e) {
+        var _inputRef_current;
+        e.originalEvent.preventDefault();
+        (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
+        onCancel();
+    }, [
+        inputRef,
+        onCancel
+    ]);
+    return /*#__PURE__*/ React.createElement("div", {
+        className: classNames("vkuiSearch", sizeY !== SizeType.COMPACT && sizeYClassNames[sizeY], isFocused && "vkuiSearch--focused", value && "vkuiSearch--has-value", after && "vkuiSearch--has-after", icon && "vkuiSearch--has-icon", className),
+        style: style
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: "vkuiSearch__in"
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: "vkuiSearch__width"
+    }), /*#__PURE__*/ React.createElement("label", {
+        className: "vkuiSearch__control"
+    }, /*#__PURE__*/ React.createElement("input", _object_spread_props(_object_spread({
+        type: "search"
+    }, inputProps), {
+        autoComplete: autoComplete,
+        ref: inputRef,
+        className: "vkuiSearch__input",
+        onFocus: onFocus,
+        onBlur: onBlur,
+        onChange: onChange,
+        value: value
+    })), platform === Platform.IOS && after && /*#__PURE__*/ React.createElement("div", {
+        className: "vkuiSearch__after-width"
+    }, after), /*#__PURE__*/ React.createElement("div", {
+        className: "vkuiSearch__placeholder"
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: "vkuiSearch__placeholder-in"
+    }, before, /*#__PURE__*/ React.createElement(SearchPlaceholderTypography, {
+        className: "vkuiSearch__placeholder-text"
+    }, placeholder)), isFocused && platform === Platform.IOS && after && /*#__PURE__*/ React.createElement("div", {
+        className: "vkuiSearch__after-width"
+    }, after))), /*#__PURE__*/ React.createElement("div", {
+        className: "vkuiSearch__after"
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: "vkuiSearch__icons"
+    }, icon && /*#__PURE__*/ React.createElement(Touch, {
+        onStart: onIconClickStart,
+        className: "vkuiSearch__icon"
+    }, icon), !!value && /*#__PURE__*/ React.createElement(Touch, {
+        onStart: onIconCancelClickStart,
+        onClick: onCancel,
+        className: "vkuiSearch__icon"
+    }, platform === Platform.IOS ? /*#__PURE__*/ React.createElement(Icon16Clear, null) : /*#__PURE__*/ React.createElement(Icon24Cancel, null))), platform === Platform.IOS && after && /*#__PURE__*/ React.createElement("div", {
+        className: "vkuiSearch__after-in",
+        onClick: onCancel
+    }, after))));
 };
+
 //# sourceMappingURL=Search.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Search.js","names":["React","Icon16Clear","Icon16SearchOutline","Icon24Cancel","classNames","noop","useAdaptivity","useEnsuredControl","useExternRef","usePlatform","SizeType","Platform","Touch","Headline","Title","sizeYClassNames","none","REGULAR","SearchPlaceholderTypography","children","restProps","platform","IOS","Search","before","className","defaultValue","placeholder","after","getRef","icon","onIconClick","style","autoComplete","onChangeProp","onChange","valueProp","value","inputProps","inputRef","useState","isFocused","setFocused","sizeY","onFocus","e","onBlur","onCancel","useCallback","nativeInputValueSetter","Object","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","originalEvent","onIconCancelClickStart","preventDefault","focus","COMPACT"],"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        platform === Platform.IOS && styles['Search--ios'],\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"],"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 { 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","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","useState","isFocused","setFocused","sizeY","onFocus","e","onBlur","onCancel","useCallback","Object","nativeInputValueSetter","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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"}

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

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

package/dist/components/SegmentedControl/SegmentedControl.js

@@ -1,93 +1,84 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["size", "name", "options", "getRootRef", "defaultValue", "children", "className", "onChange", "value"],
-  _excluded2 = ["label", "className"];
-import * as React from 'react';
-import { classNames } from '@vkontakte/vkjs';
-import { useAdaptivity } from '../../hooks/useAdaptivity';
-import { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';
-import { useId } from '../../hooks/useId';
-import { SizeType } from '../../lib/adaptivity';
-import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
-import { warnOnce } from '../../lib/warnOnce';
-import { SegmentedControlOption } from './SegmentedControlOption/SegmentedControlOption';
-var sizeYClassNames = _defineProperty({
-  none: "vkuiSegmentedControl--sizeY-none"
+import _define_property from "@swc/helpers/src/_define_property.mjs";
+import _object_spread from "@swc/helpers/src/_object_spread.mjs";
+import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
+import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
+import _sliced_to_array from "@swc/helpers/src/_sliced_to_array.mjs";
+var _options_;
+import * as React from "react";
+import { classNames } from "@vkontakte/vkjs";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { useCustomEnsuredControl } from "../../hooks/useEnsuredControl";
+import { useId } from "../../hooks/useId";
+import { SizeType } from "../../lib/adaptivity";
+import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
+import { warnOnce } from "../../lib/warnOnce";
+import { SegmentedControlOption } from "./SegmentedControlOption/SegmentedControlOption";
+var sizeYClassNames = _define_property({
+    none: "vkuiSegmentedControl--sizeY-none"
 }, SizeType.REGULAR, "vkuiSegmentedControl--sizeY-regular");
-var warn = warnOnce('SegmentedControl');
-
+var warn = warnOnce("SegmentedControl");
 /**
  * @see https://vkcom.github.io/VKUI/#/SegmentedControl
- */
-export var SegmentedControl = function SegmentedControl(_ref) {
-  var _options$;
-  var _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'l' : _ref$size,
-    name = _ref.name,
-    options = _ref.options,
-    getRootRef = _ref.getRootRef,
-    _ref$defaultValue = _ref.defaultValue,
-    defaultValue = _ref$defaultValue === void 0 ? (_options$ = options[0]) === null || _options$ === void 0 ? void 0 : _options$.value : _ref$defaultValue,
-    children = _ref.children,
-    className = _ref.className,
-    onChangeProp = _ref.onChange,
-    valueProp = _ref.value,
-    restProps = _objectWithoutProperties(_ref, _excluded);
-  var id = useId();
-  var _useCustomEnsuredCont = useCustomEnsuredControl({
-      onChange: onChangeProp,
-      value: valueProp,
-      defaultValue: defaultValue
-    }),
-    _useCustomEnsuredCont2 = _slicedToArray(_useCustomEnsuredCont, 2),
-    value = _useCustomEnsuredCont2[0],
-    _onChange = _useCustomEnsuredCont2[1];
-  var _useAdaptivity = useAdaptivity(),
-    _useAdaptivity$sizeY = _useAdaptivity.sizeY,
-    sizeY = _useAdaptivity$sizeY === void 0 ? 'none' : _useAdaptivity$sizeY;
-  var actualIndex = options.findIndex(function (option) {
-    return option.value === value;
-  });
-  useIsomorphicLayoutEffect(function () {
-    if (actualIndex === -1 && process.env.NODE_ENV === 'development') {
-      warn('defaultValue: такого значения нет среди опций!', 'error');
-    }
-  }, [actualIndex]);
-  var translateX = "translateX(".concat(100 * actualIndex, "%)");
-  return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
-    className: classNames("vkuiSegmentedControl", sizeY !== SizeType.COMPACT && sizeYClassNames[sizeY], styles["SegmentedControl--size-".concat(size)], className),
-    ref: getRootRef
-  }), /*#__PURE__*/React.createElement("div", {
-    role: "radiogroup",
-    className: "vkuiSegmentedControl__in"
-  }, actualIndex > -1 && /*#__PURE__*/React.createElement("div", {
-    "aria-hidden": true,
-    className: "vkuiSegmentedControl__slider",
-    style: {
-      width: "".concat(100 / options.length, "%"),
-      transform: translateX,
-      WebkitTransform: translateX
-    }
-  }), options.map(function (_ref2) {
-    var label = _ref2.label,
-      optionClassName = _ref2.className,
-      optionProps = _objectWithoutProperties(_ref2, _excluded2);
-    return /*#__PURE__*/React.createElement(SegmentedControlOption, _extends({
-      key: "".concat(optionProps.value)
-    }, optionProps, {
-      className: classNames("vkuiSegmentedControl__option", optionClassName),
-      name: name !== null && name !== void 0 ? name : id,
-      checked: value === optionProps.value,
-      onChange: function onChange() {
-        return _onChange(optionProps.value);
-      }
-    }), label);
-  })));
-};
-var styles = {
-  "SegmentedControl--size-l": "vkuiSegmentedControl--size-l",
-  "SegmentedControl--size-m": "vkuiSegmentedControl--size-m"
+ */ export var SegmentedControl = function(_param) {
+    var _param_size = _param.size, size = _param_size === void 0 ? "l" : _param_size, name = _param.name, options = _param.options, getRootRef = _param.getRootRef, _param_defaultValue = _param.defaultValue, defaultValue = _param_defaultValue === void 0 ? (_options_ = options[0]) === null || _options_ === void 0 ? void 0 : _options_.value : _param_defaultValue, children = _param.children, className = _param.className, onChangeProp = _param.onChange, valueProp = _param.value, restProps = _object_without_properties(_param, [
+        "size",
+        "name",
+        "options",
+        "getRootRef",
+        "defaultValue",
+        "children",
+        "className",
+        "onChange",
+        "value"
+    ]);
+    var id = useId();
+    var _useCustomEnsuredControl = _sliced_to_array(useCustomEnsuredControl({
+        onChange: onChangeProp,
+        value: valueProp,
+        defaultValue: defaultValue
+    }), 2), value = _useCustomEnsuredControl[0], onChange = _useCustomEnsuredControl[1];
+    var _useAdaptivity = useAdaptivity(), _useAdaptivity_sizeY = _useAdaptivity.sizeY, sizeY = _useAdaptivity_sizeY === void 0 ? "none" : _useAdaptivity_sizeY;
+    var actualIndex = options.findIndex(function(option) {
+        return option.value === value;
+    });
+    useIsomorphicLayoutEffect(function() {
+        if (actualIndex === -1 && process.env.NODE_ENV === "development") {
+            warn("defaultValue: такого значения нет среди опций!", "error");
+        }
+    }, [
+        actualIndex
+    ]);
+    var translateX = "translateX(".concat(100 * actualIndex, "%)");
+    return /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({}, restProps), {
+        className: classNames("vkuiSegmentedControl", sizeY !== SizeType.COMPACT && sizeYClassNames[sizeY], size === "l" && "vkuiSegmentedControl--size-l", className),
+        ref: getRootRef
+    }), /*#__PURE__*/ React.createElement("div", {
+        role: "radiogroup",
+        className: "vkuiSegmentedControl__in"
+    }, actualIndex > -1 && /*#__PURE__*/ React.createElement("div", {
+        "aria-hidden": true,
+        className: "vkuiSegmentedControl__slider",
+        style: {
+            width: "".concat(100 / options.length, "%"),
+            transform: translateX,
+            WebkitTransform: translateX
+        }
+    }), options.map(function(_param) /*#__PURE__*/ {
+        var label = _param.label, optionClassName = _param.className, optionProps = _object_without_properties(_param, [
+            "label",
+            "className"
+        ]);
+        return React.createElement(SegmentedControlOption, _object_spread_props(_object_spread({
+            key: "".concat(optionProps.value)
+        }, optionProps), {
+            className: classNames("vkuiSegmentedControl__option", optionClassName),
+            name: name !== null && name !== void 0 ? name : id,
+            checked: value === optionProps.value,
+            onChange: function() {
+                return onChange(optionProps.value);
+            }
+        }), label);
+    })));
 };
+
 //# sourceMappingURL=SegmentedControl.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.js","names":["React","classNames","useAdaptivity","useCustomEnsuredControl","useId","SizeType","useIsomorphicLayoutEffect","warnOnce","SegmentedControlOption","sizeYClassNames","none","REGULAR","warn","SegmentedControl","size","name","options","getRootRef","defaultValue","value","children","className","onChangeProp","onChange","valueProp","restProps","id","sizeY","actualIndex","findIndex","option","process","env","NODE_ENV","translateX","COMPACT","styles","width","length","transform","WebkitTransform","map","label","optionClassName","optionProps"],"sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useId } from '../../hooks/useId';\nimport { SizeType } from '../../lib/adaptivity';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasRootRef } from '../../types';\nimport { SegmentedControlOption } from './SegmentedControlOption/SegmentedControlOption';\nimport styles from './SegmentedControl.module.css';\n\nconst sizeYClassNames = {\n  none: styles['SegmentedControl--sizeY-none'],\n  [SizeType.REGULAR]: styles['SegmentedControl--sizeY-regular'],\n};\n\nexport type SegmentedControlValue = string | number | undefined;\n\nexport interface SegmentedControlOptionInterface\n  extends Omit<React.HTMLAttributes<HTMLElement>, 'label'> {\n  label: React.ReactChild;\n  value: SegmentedControlValue;\n}\n\nexport interface SegmentedControlProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>,\n    HasRootRef<HTMLDivElement> {\n  options: SegmentedControlOptionInterface[];\n  size?: 'm' | 'l';\n  name?: string;\n  onChange?: (value: SegmentedControlValue) => void;\n  value?: SegmentedControlValue;\n  defaultValue?: SegmentedControlValue;\n}\n\nconst warn = warnOnce('SegmentedControl');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SegmentedControl\n */\nexport const SegmentedControl = ({\n  size = 'l',\n  name,\n  options,\n  getRootRef,\n  defaultValue = options[0]?.value,\n  children,\n  className,\n  onChange: onChangeProp,\n  value: valueProp,\n  ...restProps\n}: SegmentedControlProps) => {\n  const id = useId();\n\n  const [value, onChange] = useCustomEnsuredControl({\n    onChange: onChangeProp,\n    value: valueProp,\n    defaultValue,\n  });\n\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const actualIndex = options.findIndex((option) => option.value === value);\n\n  useIsomorphicLayoutEffect(() => {\n    if (actualIndex === -1 && process.env.NODE_ENV === 'development') {\n      warn('defaultValue: такого значения нет среди опций!', 'error');\n    }\n  }, [actualIndex]);\n\n  const translateX = `translateX(${100 * actualIndex}%)`;\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['SegmentedControl'],\n        sizeY !== SizeType.COMPACT && sizeYClassNames[sizeY],\n        styles[`SegmentedControl--size-${size}`],\n        className,\n      )}\n      ref={getRootRef}\n    >\n      <div role=\"radiogroup\" className={styles['SegmentedControl__in']}>\n        {actualIndex > -1 && (\n          <div\n            aria-hidden\n            className={styles['SegmentedControl__slider']}\n            style={{\n              width: `${100 / options.length}%`,\n              transform: translateX,\n              WebkitTransform: translateX,\n            }}\n          />\n        )}\n        {options.map(({ label, className: optionClassName, ...optionProps }) => (\n          <SegmentedControlOption\n            key={`${optionProps.value}`}\n            {...optionProps}\n            className={classNames(styles['SegmentedControl__option'], optionClassName)}\n            name={name ?? id}\n            checked={value === optionProps.value}\n            onChange={() => onChange(optionProps.value)}\n          >\n            {label}\n          </SegmentedControlOption>\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useId } from '../../hooks/useId';\nimport { SizeType } from '../../lib/adaptivity';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasRootRef } from '../../types';\nimport { SegmentedControlOption } from './SegmentedControlOption/SegmentedControlOption';\nimport styles from './SegmentedControl.module.css';\n\nconst sizeYClassNames = {\n  none: styles['SegmentedControl--sizeY-none'],\n  [SizeType.REGULAR]: styles['SegmentedControl--sizeY-regular'],\n};\n\nexport type SegmentedControlValue = string | number | undefined;\n\nexport interface SegmentedControlOptionInterface\n  extends Omit<React.HTMLAttributes<HTMLElement>, 'label'> {\n  label: React.ReactChild;\n  value: SegmentedControlValue;\n}\n\nexport interface SegmentedControlProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>,\n    HasRootRef<HTMLDivElement> {\n  options: SegmentedControlOptionInterface[];\n  size?: 'm' | 'l';\n  name?: string;\n  onChange?: (value: SegmentedControlValue) => void;\n  value?: SegmentedControlValue;\n  defaultValue?: SegmentedControlValue;\n}\n\nconst warn = warnOnce('SegmentedControl');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SegmentedControl\n */\nexport const SegmentedControl = ({\n  size = 'l',\n  name,\n  options,\n  getRootRef,\n  defaultValue = options[0]?.value,\n  children,\n  className,\n  onChange: onChangeProp,\n  value: valueProp,\n  ...restProps\n}: SegmentedControlProps) => {\n  const id = useId();\n\n  const [value, onChange] = useCustomEnsuredControl({\n    onChange: onChangeProp,\n    value: valueProp,\n    defaultValue,\n  });\n\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const actualIndex = options.findIndex((option) => option.value === value);\n\n  useIsomorphicLayoutEffect(() => {\n    if (actualIndex === -1 && process.env.NODE_ENV === 'development') {\n      warn('defaultValue: такого значения нет среди опций!', 'error');\n    }\n  }, [actualIndex]);\n\n  const translateX = `translateX(${100 * actualIndex}%)`;\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['SegmentedControl'],\n        sizeY !== SizeType.COMPACT && sizeYClassNames[sizeY],\n        size === 'l' && styles['SegmentedControl--size-l'],\n        className,\n      )}\n      ref={getRootRef}\n    >\n      <div role=\"radiogroup\" className={styles['SegmentedControl__in']}>\n        {actualIndex > -1 && (\n          <div\n            aria-hidden\n            className={styles['SegmentedControl__slider']}\n            style={{\n              width: `${100 / options.length}%`,\n              transform: translateX,\n              WebkitTransform: translateX,\n            }}\n          />\n        )}\n        {options.map(({ label, className: optionClassName, ...optionProps }) => (\n          <SegmentedControlOption\n            key={`${optionProps.value}`}\n            {...optionProps}\n            className={classNames(styles['SegmentedControl__option'], optionClassName)}\n            name={name ?? id}\n            checked={value === optionProps.value}\n            onChange={() => onChange(optionProps.value)}\n          >\n            {label}\n          </SegmentedControlOption>\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"names":["options","React","classNames","useAdaptivity","useCustomEnsuredControl","useId","SizeType","useIsomorphicLayoutEffect","warnOnce","SegmentedControlOption","sizeYClassNames","none","REGULAR","warn","SegmentedControl","size","name","getRootRef","defaultValue","value","children","className","onChange","onChangeProp","valueProp","restProps","id","sizeY","actualIndex","findIndex","option","process","env","NODE_ENV","translateX","div","COMPACT","ref","role","aria-hidden","style","width","length","transform","WebkitTransform","map","label","optionClassName","optionProps","key","checked"],"mappings":";;;;;IA8CiBA;AA9CjB,YAAYC,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,uBAAuB,QAAQ,gCAAgC;AACxE,SAASC,KAAK,QAAQ,oBAAoB;AAC1C,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,yBAAyB,QAAQ,sCAAsC;AAChF,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,sBAAsB,QAAQ,kDAAkD;AAGzF,IAAMC;IACJC,IAAI;GACHL,SAASM,OAAO;AAsBnB,IAAMC,OAAOL,SAAS;AAEtB;;CAEC,GACD,OAAO,IAAMM,mBAAmB,iBAWH;6BAV3BC,MAAAA,gCAAO,mBACPC,cAAAA,MACAhB,iBAAAA,SACAiB,oBAAAA,yCACAC,cAAAA,gDAAelB,CAAAA,YAAAA,OAAO,CAAC,EAAE,cAAVA,uBAAAA,KAAAA,IAAAA,UAAYmB,KAAK,wBAChCC,kBAAAA,UACAC,mBAAAA,WACAC,AAAUC,sBAAVD,UACAH,AAAOK,mBAAPL,OACGM;QATHV;QACAC;QACAhB;QACAiB;QACAC;QACAE;QACAC;QACAC;QACAH;;IAGA,IAAMO,KAAKrB;IAEX,IAA0BD,4CAAAA,wBAAwB;QAChDkB,UAAUC;QACVJ,OAAOK;QACPN,cAAAA;IACF,QAJOC,QAAmBf,6BAAZkB,WAAYlB;IAM1B,IAA2BD,iBAAAA,wCAAAA,eAAnBwB,OAAAA,0CAAQ;IAEhB,IAAMC,cAAc5B,QAAQ6B,SAAS,CAAC,SAACC;eAAWA,OAAOX,KAAK,KAAKA;;IAEnEZ,0BAA0B,WAAM;QAC9B,IAAIqB,gBAAgB,CAAC,KAAKG,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;YAChEpB,KAAK,kDAAkD;QACzD,CAAC;IACH,GAAG;QAACe;KAAY;IAEhB,IAAMM,aAAa,AAAC,cAA+B,OAAlB,MAAMN,aAAY;IAEnD,qBACE,oBAACO,+CACKV;QACJJ,WAAWnB,mCAETyB,UAAUrB,SAAS8B,OAAO,IAAI1B,eAAe,CAACiB,MAAM,EACpDZ,SAAS,uCACTM;QAEFgB,KAAKpB;sBAEL,oBAACkB;QAAIG,MAAK;QAAajB,SAAS;OAC7BO,cAAc,CAAC,mBACd,oBAACO;QACCI,eAAAA,IAAW;QACXlB,SAAS;QACTmB,OAAO;YACLC,OAAO,AAAC,GAAuB,OAArB,MAAMzC,QAAQ0C,MAAM,EAAC;YAC/BC,WAAWT;YACXU,iBAAiBV;QACnB;QAGHlC,QAAQ6C,GAAG,CAAC,+BACX;YADcC,eAAAA,OAAOzB,AAAW0B,yBAAX1B,WAA+B2B;YAAtCF;YAAOzB;;eACrB,oBAACZ;YACCwC,KAAK,AAAC,GAAoB,OAAlBD,YAAY7B,KAAK;WACrB6B;YACJ3B,WAAWnB,2CAA+C6C;YAC1D/B,MAAMA,iBAAAA,kBAAAA,OAAQU,EAAE;YAChBwB,SAAS/B,UAAU6B,YAAY7B,KAAK;YACpCG,UAAU;uBAAMA,SAAS0B,YAAY7B,KAAK;;YAEzC2B;IACqB;AAKlC,EAAE"}