@hi-ui/tree-select 4.0.0-beta.24 → 4.0.0-beta.25

package/lib/esm/ui/input/lib/esm/Input.js

@@ -1,221 +0,0 @@
-/** @LICENSE
- * @hi-ui/tree-select
- * https://github.com/XiaoMi/hiui/tree/master/packages/ui/tree-select#readme
- *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-import { __rest } from 'tslib';
-import React, { forwardRef, useMemo, isValidElement, useRef, useCallback, useState } from 'react';
-import { getPrefixCls, cx } from '@hi-ui/classname';
-import { __DEV__ } from '@hi-ui/env';
-import { useMergeRefs } from '../../../../hooks/use-merge-refs/lib/esm/index.js';
-import { CloseCircleFilled } from '@hi-ui/icons';
-import { useInput } from './use-input.js';
-/** @LICENSE
- * @hi-ui/input
- * https://github.com/XiaoMi/hiui/tree/master/packages/ui/input#readme
- *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-var _prefix = getPrefixCls('input');
-/**
- * 输入框
- *
- * @TODO:
- * 1. size api 确认
- * 2. 修改类名结构
- * 3. 支持带数字展示
- * 4. InputGroup 模式支持
- * 5. 手动聚焦支持额外配置
- */
-
-
-var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
-  var _a$prefixCls = _a.prefixCls,
-      prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
-      _a$role = _a.role,
-      role = _a$role === void 0 ? 'input' : _a$role,
-      className = _a.className,
-      style = _a.style,
-      _a$size = _a.size,
-      size = _a$size === void 0 ? 'md' : _a$size,
-      _a$appearance = _a.appearance,
-      appearance = _a$appearance === void 0 ? 'line' : _a$appearance,
-      prepend = _a.prepend,
-      append = _a.append,
-      prefix = _a.prefix,
-      suffix = _a.suffix,
-      _a$clearableTrigger = _a.clearableTrigger,
-      clearableTrigger = _a$clearableTrigger === void 0 ? 'hover' : _a$clearableTrigger,
-      _a$clearable = _a.clearable,
-      clearable = _a$clearable === void 0 ? false : _a$clearable,
-      _a$invalid = _a.invalid,
-      invalid = _a$invalid === void 0 ? false : _a$invalid,
-      name = _a.name,
-      autoFocus = _a.autoFocus,
-      disabled = _a.disabled,
-      readOnly = _a.readOnly,
-      maxLength = _a.maxLength,
-      placeholder = _a.placeholder,
-      defaultValue = _a.defaultValue,
-      valueProp = _a.value,
-      onChange = _a.onChange,
-      onFocus = _a.onFocus,
-      onBlur = _a.onBlur,
-      trimValueOnBlur = _a.trimValueOnBlur,
-      onClear = _a.onClear,
-      type = _a.type,
-      containerRef = _a.containerRef,
-      rest = __rest(_a, ["prefixCls", "role", "className", "style", "size", "appearance", "prepend", "append", "prefix", "suffix", "clearableTrigger", "clearable", "invalid", "name", "autoFocus", "disabled", "readOnly", "maxLength", "placeholder", "defaultValue", "value", "onChange", "onFocus", "onBlur", "trimValueOnBlur", "onClear", "type", "containerRef"]); // @TODO: 临时方案，后面迁移至 InputGroup
-
-
-  var _useMemo = useMemo(function () {
-    var shouldUnset = [false, false]; // @ts-ignore
-    // @ts-ignore
-
-    if (
-    /*#__PURE__*/
-
-    /*#__PURE__*/
-    isValidElement(prepend) && ['Select', 'Button'].includes(prepend.type.HiName)) {
-      shouldUnset[0] = true;
-    } // @ts-ignore
-    // @ts-ignore
-
-
-    if (
-    /*#__PURE__*/
-
-    /*#__PURE__*/
-    isValidElement(append) && ['Select', 'Button'].includes(append.type.HiName)) {
-      shouldUnset[1] = true;
-    }
-
-    return shouldUnset;
-  }, [prepend, append]),
-      unsetPrepend = _useMemo[0],
-      unsetAppend = _useMemo[1];
-
-  var inputElementRef = useRef(null);
-  var proxyOnChange = useCallback(function (value, evt) {
-    if (!onChange) return;
-    onChangeMock(onChange, evt, inputElementRef.current, value);
-  }, [onChange]);
-  var clearElementRef = useRef(null);
-
-  var _useInput = useInput({
-    clearElementRef: clearElementRef,
-    name: name,
-    autoFocus: autoFocus,
-    disabled: disabled,
-    readOnly: readOnly,
-    maxLength: maxLength,
-    placeholder: placeholder,
-    defaultValue: defaultValue,
-    value: valueProp,
-    onChange: proxyOnChange,
-    onFocus: onFocus,
-    onBlur: onBlur,
-    trimValueOnBlur: trimValueOnBlur,
-    type: type
-  }),
-      tryChangeValue = _useInput.tryChangeValue,
-      focused = _useInput.focused,
-      value = _useInput.value,
-      getInputProps = _useInput.getInputProps;
-
-  var focus = useCallback(function () {
-    var _a;
-
-    (_a = inputElementRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-  }, []);
-
-  var _useState = useState(false),
-      hover = _useState[0],
-      setHover = _useState[1]; // 在开启 clearable 下展示 清除内容按钮，可点击进行内容清楚
-
-
-  var showClearableIcon = clearable && !!value && !disabled;
-  var mergedRef = useMergeRefs(ref, inputElementRef);
-  var cls = cx(prefixCls, className, prefixCls + "--size-" + size, prefixCls + "--appearance-" + appearance);
-  var outerCls = cx(prefixCls + "__outer", prepend && prefixCls + "__outer--prepend", prepend && unsetPrepend && prefixCls + "__outer--prepend-unset", append && prefixCls + "__outer--append", append && unsetAppend && prefixCls + "__outer--append-unset");
-  return /*#__PURE__*/React.createElement("div", {
-    role: role,
-    className: cls,
-    style: style,
-    ref: containerRef
-  }, /*#__PURE__*/React.createElement("div", {
-    className: outerCls
-  }, prepend ? /*#__PURE__*/React.createElement("div", {
-    className: prefixCls + "__prepend"
-  }, prepend) : null, /*#__PURE__*/React.createElement("div", {
-    className: cx(prefixCls + "__inner", prefix && prefixCls + "__inner--prefix", suffix && prefixCls + "__inner--suffix", focused && prefixCls + "__inner--focused", disabled && prefixCls + "__inner--disabled", readOnly && prefixCls + "__inner--readonly", invalid && prefixCls + "__inner--invalid"),
-    onMouseOver: function onMouseOver(e) {
-      setHover(true);
-    },
-    onMouseLeave: function onMouseLeave(e) {
-      setHover(false);
-    }
-  }, prefix ? /*#__PURE__*/React.createElement("span", {
-    className: prefixCls + "__prefix"
-  }, prefix) : null, /*#__PURE__*/React.createElement("input", Object.assign({
-    ref: mergedRef,
-    className: prefixCls + "__text"
-  }, getInputProps(), rest)), suffix || showClearableIcon ? /*#__PURE__*/React.createElement("span", {
-    className: prefixCls + "__suffix"
-  }, showClearableIcon ? /*#__PURE__*/React.createElement("span", {
-    ref: clearElementRef,
-    className: cx(prefixCls + "__clear", (clearableTrigger === 'always' || hover) && prefixCls + "__clear--active"),
-    role: "button",
-    tabIndex: -1,
-    onClick: function onClick(evt) {
-      tryChangeValue('', evt);
-      onClear === null || onClear === void 0 ? void 0 : onClear();
-      focus();
-    }
-  }, /*#__PURE__*/React.createElement(CloseCircleFilled, null)) : null, suffix) : null), append ? /*#__PURE__*/React.createElement("div", {
-    className: prefixCls + "__append"
-  }, append) : null));
-});
-
-if (__DEV__) {
-  Input.displayName = 'Input';
-}
-/**
- * 模拟伪装目标事件 target
- *
- * @param target
- * @param evt
- * @param onChange
- * @param targetValue
- * @returns
- */
-
-
-function onChangeMock(onChange, evt, target, targetValue) {
-  var event = evt; // 点击 clearIcon 或者 失焦 trim 时，都会代理 onChange 的事件对象 target 指向 input.target
-
-  if (evt.type !== 'change') {
-    if (!target) return;
-    var originalTargetValue = target.value;
-    event = Object.create(evt);
-    event.target = target;
-    event.currentTarget = target;
-    target.value = targetValue;
-    onChange(event, targetValue); // 重置为之前值
-
-    target.value = originalTargetValue;
-    return;
-  }
-
-  onChange(event, targetValue);
-}
-
-export { Input, onChangeMock };

package/lib/esm/ui/input/lib/esm/MockInput.js

@@ -1,141 +0,0 @@
-/** @LICENSE
- * @hi-ui/tree-select
- * https://github.com/XiaoMi/hiui/tree/master/packages/ui/tree-select#readme
- *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-import { __rest } from 'tslib';
-import React, { forwardRef, useMemo, useCallback, useState } from 'react';
-import { getPrefixCls, cx } from '@hi-ui/classname';
-import { __DEV__ } from '@hi-ui/env';
-import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
-import { CloseCircleFilled } from '@hi-ui/icons';
-/** @LICENSE
- * @hi-ui/input
- * https://github.com/XiaoMi/hiui/tree/master/packages/ui/input#readme
- *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-var _role = 'mock-input';
-
-var _prefix = getPrefixCls(_role);
-
-var NOOP_VALUE = '';
-var NOOP_ARRAY = [];
-/**
- * 支持自定义渲染输入框内容，暂时仅供内部 Picker 类组件使用，不对外提供
- */
-
-var MockInput = /*#__PURE__*/forwardRef(function (_a, ref) {
-  var _a$prefixCls = _a.prefixCls,
-      prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
-      _a$role = _a.role,
-      role = _a$role === void 0 ? _role : _a$role,
-      className = _a.className,
-      _a$data = _a.data,
-      data = _a$data === void 0 ? NOOP_ARRAY : _a$data,
-      _a$defaultValue = _a.defaultValue,
-      defaultValue = _a$defaultValue === void 0 ? NOOP_VALUE : _a$defaultValue,
-      valueProp = _a.value,
-      onChange = _a.onChange,
-      placeholder = _a.placeholder,
-      _a$disabled = _a.disabled,
-      disabled = _a$disabled === void 0 ? false : _a$disabled,
-      _a$clearable = _a.clearable,
-      clearable = _a$clearable === void 0 ? false : _a$clearable,
-      _a$focused = _a.focused,
-      focused = _a$focused === void 0 ? false : _a$focused,
-      _a$invalid = _a.invalid,
-      invalid = _a$invalid === void 0 ? false : _a$invalid,
-      _a$readOnly = _a.readOnly,
-      readOnly = _a$readOnly === void 0 ? false : _a$readOnly,
-      _a$size = _a.size,
-      size = _a$size === void 0 ? 'md' : _a$size,
-      _a$appearance = _a.appearance,
-      appearance = _a$appearance === void 0 ? 'line' : _a$appearance,
-      _a$clearableTrigger = _a.clearableTrigger,
-      clearableTrigger = _a$clearableTrigger === void 0 ? 'hover' : _a$clearableTrigger,
-      displayRender = _a.displayRender,
-      suffix = _a.suffix,
-      _onMouseOver = _a.onMouseOver,
-      _onMouseLeave = _a.onMouseLeave,
-      rest = __rest(_a, ["prefixCls", "role", "className", "data", "defaultValue", "value", "onChange", "placeholder", "disabled", "clearable", "focused", "invalid", "readOnly", "size", "appearance", "clearableTrigger", "displayRender", "suffix", "onMouseOver", "onMouseLeave"]);
-
-  var _useUncontrolledState = useUncontrolledState(defaultValue, valueProp, onChange),
-      value = _useUncontrolledState[0],
-      tryChangeValue = _useUncontrolledState[1];
-
-  var displayItem = useMemo(function () {
-    if (value === '') return null;
-    var displayItem = data.find(function (item) {
-      return item.id === value;
-    });
-    return displayItem || null;
-  }, [value, data]);
-  var displayValue = useMemo(function () {
-    if (!displayItem) return '';
-
-    if (displayRender) {
-      return displayRender(displayItem);
-    }
-
-    return displayItem.title;
-  }, [displayItem, displayRender]);
-  var handleClear = useCallback(function (evt) {
-    if (disabled) return;
-    evt.stopPropagation();
-    tryChangeValue(NOOP_VALUE, displayItem);
-  }, [tryChangeValue, disabled, displayItem]);
-
-  var _useState = useState(false),
-      hover = _useState[0],
-      setHover = _useState[1];
-
-  var trySetHover = useCallback(function (hovered) {
-    if (disabled) return;
-    setHover(hovered);
-  }, [disabled]);
-  var hasValue = !!displayValue; // 在开启 clearable 下展示 清除内容按钮，可点击进行内容清除
-
-  var showClearableIcon = useMemo(function () {
-    return clearable && hasValue && !disabled && (clearableTrigger === 'always' || hover);
-  }, [clearable, hasValue, disabled, clearableTrigger, hover]);
-  var cls = cx(prefixCls, className, prefixCls + "--appearance-" + appearance, prefixCls + "--size-" + size, focused && "focused", disabled && 'disabled', readOnly && 'readonly', invalid && 'invalid');
-  return /*#__PURE__*/React.createElement("div", Object.assign({
-    ref: ref,
-    role: role,
-    className: cls,
-    onMouseOver: function onMouseOver(evt) {
-      trySetHover(true);
-      _onMouseOver === null || _onMouseOver === void 0 ? void 0 : _onMouseOver(evt);
-    },
-    onMouseLeave: function onMouseLeave(evt) {
-      trySetHover(false);
-      _onMouseLeave === null || _onMouseLeave === void 0 ? void 0 : _onMouseLeave(evt);
-    }
-  }, rest), hasValue ? /*#__PURE__*/React.createElement("span", {
-    className: prefixCls + "__value"
-  }, displayValue) : /*#__PURE__*/React.createElement("span", {
-    className: prefixCls + "__placeholder"
-  }, placeholder), suffix || showClearableIcon ? /*#__PURE__*/React.createElement("span", {
-    className: prefixCls + "__suffix"
-  }, showClearableIcon ? /*#__PURE__*/React.createElement("span", {
-    role: "button",
-    tabIndex: -1,
-    className: cx(prefixCls + "__clear", 'active'),
-    onClick: handleClear
-  }, /*#__PURE__*/React.createElement(CloseCircleFilled, null)) : suffix) : null);
-});
-
-if (__DEV__) {
-  MockInput.displayName = 'MockInput';
-}
-
-export { MockInput };

package/lib/esm/ui/input/lib/esm/styles/index.scss.js

@@ -1,26 +0,0 @@
-/** @LICENSE
- * @hi-ui/tree-select
- * https://github.com/XiaoMi/hiui/tree/master/packages/ui/tree-select#readme
- *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/** @LICENSE
- * @hi-ui/input
- * https://github.com/XiaoMi/hiui/tree/master/packages/ui/input#readme
- *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var css_248z = "@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n.hi-v4-mock-input {\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  border: none;\n  outline: none;\n  -webkit-box-shadow: none;\n          box-shadow: none;\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n  cursor: text;\n  background-color: transparent;\n  -webkit-tap-highlight-color: transparent;\n  position: relative;\n  overflow: hidden;\n  display: -webkit-inline-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  -webkit-box-pack: justify;\n      -ms-flex-pack: justify;\n          justify-content: space-between;\n  -webkit-box-flex: 1;\n      -ms-flex: 1 1;\n          flex: 1 1;\n  -webkit-transition-property: all;\n  transition-property: all;\n  -webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n          transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n  -webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));\n          transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));\n  width: 100%;\n  height: auto;\n  z-index: auto;\n  font-size: inherit;\n  line-height: inherit;\n  color: var(--hi-v4-color-gray-700, #1f2733);\n  border: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-static-transparent, transparent);\n  background-color: var(--hi-v4-color-static-white, #fff); }\n.hi-v4-mock-input:not(.disabled):hover {\n    z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1); }\n.hi-v4-mock-input:not(.disabled).focused {\n    z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1); }\n.hi-v4-mock-input.disabled {\n    cursor: not-allowed; }\n.hi-v4-mock-input__suffix, .hi-v4-mock-input__placeholder {\n    color: var(--hi-v4-color-gray-400, #c9ced6); }\n.hi-v4-mock-input__clear {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    width: 16px;\n    height: 16px;\n    font-size: var(--hi-v4-text-size-md, 0.875rem);\n    text-align: center;\n    color: var(--hi-v4-color-gray-500, #929aa6);\n    -ms-flex-negative: 0;\n        flex-shrink: 0;\n    cursor: pointer;\n    visibility: hidden;\n    opacity: 0;\n    -webkit-transition-property: all;\n    transition-property: all;\n    -webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n            transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n    -webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));\n            transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1)); }\n.hi-v4-mock-input__clear:hover {\n      color: var(--hi-v4-color-static-black, #000); }\n.hi-v4-mock-input__clear.active {\n      visibility: visible;\n      opacity: 1; }\n.hi-v4-mock-input__suffix {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -ms-flex-negative: 0;\n        flex-shrink: 0;\n    color: var(--hi-v4-color-gray-400, #c9ced6);\n    font-size: var(--hi-v4-text-size-lg, 1rem);\n    padding-left: var(--hi-v4-spacing-4, 8px);\n    text-align: center; }\n.hi-v4-mock-input__value {\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n    display: inline-block;\n    width: auto;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap; }\n.hi-v4-mock-input--size-sm.hi-v4-mock-input {\n    height: var(--hi-v4-height-6, 24px);\n    font-size: var(--hi-v4-text-size-sm, 0.75rem);\n    line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);\n    border-radius: var(--hi-v4-border-radius-md, 4px);\n    padding: 1px calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-mock-input--size-md.hi-v4-mock-input {\n    height: var(--hi-v4-height-8, 32px);\n    font-size: var(--hi-v4-text-size-md, 0.875rem);\n    line-height: var(--hi-v4-text-lineheight-md, 1.375rem);\n    border-radius: var(--hi-v4-border-radius-md, 4px);\n    padding: 4px calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-mock-input--size-lg.hi-v4-mock-input {\n    height: var(--hi-v4-height-10, 40px);\n    font-size: var(--hi-v4-text-size-lg, 1rem);\n    line-height: var(--hi-v4-text-lineheight-lg, 1.5rem);\n    border-radius: var(--hi-v4-border-radius-md, 4px);\n    padding: 7px calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-mock-input--appearance-line.hi-v4-mock-input {\n    border-color: var(--hi-v4-color-gray-300, #dfe2e8); }\n.hi-v4-mock-input--appearance-line.hi-v4-mock-input:not(.disabled):hover {\n      border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-mock-input--appearance-line.hi-v4-mock-input:not(.disabled).focused {\n      -webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));\n              box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));\n      border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-mock-input--appearance-line.hi-v4-mock-input:not(.disabled).invalid {\n      border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }\n.hi-v4-mock-input--appearance-line.hi-v4-mock-input:not(.disabled).invalid.hover {\n        border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }\n.hi-v4-mock-input--appearance-line.hi-v4-mock-input:not(.disabled).invalid.focused {\n        -webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));\n                box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9)); }\n.hi-v4-mock-input--appearance-unset.hi-v4-mock-input {\n    width: auto;\n    -webkit-box-pack: start;\n        -ms-flex-pack: start;\n            justify-content: flex-start;\n    border-color: transparent; }\n.hi-v4-mock-input--appearance-unset.hi-v4-mock-input:not(.disabled):hover {\n      background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-mock-input--appearance-unset.hi-v4-mock-input:not(.disabled).focused {\n      -webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));\n              box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));\n      background-color: var(--hi-v4-color-static-white, #fff);\n      border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-mock-input--appearance-unset.hi-v4-mock-input:not(.disabled).invalid {\n      border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }\n.hi-v4-mock-input--appearance-unset.hi-v4-mock-input:not(.disabled).invalid.hover {\n        border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }\n.hi-v4-mock-input--appearance-unset.hi-v4-mock-input:not(.disabled).invalid.focused {\n        -webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));\n                box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9)); }\n.hi-v4-mock-input--appearance-filled.hi-v4-mock-input {\n    background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-mock-input--appearance-filled.hi-v4-mock-input:not(.disabled):hover {\n      background-color: var(--hi-v4-color-static-white, #fff);\n      border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-mock-input--appearance-filled.hi-v4-mock-input:not(.disabled).focused {\n      -webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));\n              box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));\n      border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n      background-color: var(--hi-v4-color-static-white, #fff); }\n.hi-v4-mock-input--appearance-filled.hi-v4-mock-input:not(.disabled).invalid {\n      border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }\n.hi-v4-mock-input--appearance-filled.hi-v4-mock-input:not(.disabled).invalid.hover {\n        border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }\n.hi-v4-mock-input--appearance-filled.hi-v4-mock-input:not(.disabled).invalid.focused {\n        -webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));\n                box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9)); }\n.hi-v4-mock-input--appearance-line.disabled.hi-v4-mock-input, .hi-v4-mock-input--appearance-unset.disabled.hi-v4-mock-input, .hi-v4-mock-input--appearance-filled.disabled.hi-v4-mock-input {\n    color: var(--hi-v4-color-gray-400, #c9ced6); }\n.hi-v4-mock-input--appearance-line.disabled.hi-v4-mock-input, .hi-v4-mock-input--appearance-filled.disabled.hi-v4-mock-input {\n    background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n.hi-v4-input {\n  position: relative;\n  display: inline-block;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  width: 100%; }\n.hi-v4-input__outer {\n    margin: 0;\n    padding: 0;\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    position: relative;\n    height: 100%;\n    width: 100%; }\n.hi-v4-input__text {\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: none;\n    outline: none;\n    -webkit-box-shadow: none;\n            box-shadow: none;\n    -webkit-appearance: none;\n       -moz-appearance: none;\n            appearance: none;\n    cursor: text;\n    background-color: transparent;\n    -webkit-tap-highlight-color: transparent;\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1;\n            flex: 1 1;\n    display: inline-block;\n    box-sizing: border-box;\n    -webkit-transition-property: all;\n    transition-property: all;\n    -webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n            transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n    -webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));\n            transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));\n    width: 100%;\n    font-size: inherit;\n    line-height: inherit;\n    color: var(--hi-v4-color-gray-700, #1f2733); }\n.hi-v4-input__text::-webkit-input-placeholder {\n      color: var(--hi-v4-color-gray-400, #c9ced6); }\n.hi-v4-input__text::-moz-placeholder {\n      color: var(--hi-v4-color-gray-400, #c9ced6); }\n.hi-v4-input__text::-ms-input-placeholder {\n      color: var(--hi-v4-color-gray-400, #c9ced6); }\n.hi-v4-input__text:-ms-input-placeholder {\n      color: var(--hi-v4-color-gray-400, #c9ced6); }\n.hi-v4-input__text::placeholder {\n      color: var(--hi-v4-color-gray-400, #c9ced6); }\n.hi-v4-input__text:disabled {\n      cursor: not-allowed; }\n.hi-v4-input__inner {\n    position: relative;\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    height: auto;\n    width: 100%;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n    font-size: inherit;\n    border: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-static-transparent, transparent);\n    background-color: var(--hi-v4-color-static-white, #fff);\n    -webkit-transition-property: all;\n    transition-property: all;\n    -webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n            transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n    -webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));\n            transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));\n    outline: none;\n    z-index: auto; }\n.hi-v4-input__inner:not(.hi-v4-input__inner--disabled):hover {\n      z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1); }\n.hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--focused {\n      z-index: calc(var(--hi-v4-zindex-absolute, 1) + 1); }\n.hi-v4-input__clear {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    height: auto;\n    text-align: center;\n    font-size: var(--hi-v4-text-size-md, 0.875rem);\n    color: var(--hi-v4-color-gray-500, #929aa6);\n    -ms-flex-negative: 0;\n        flex-shrink: 0;\n    cursor: pointer;\n    -webkit-transition-property: all;\n    transition-property: all;\n    -webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n            transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n    -webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));\n            transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));\n    visibility: hidden;\n    opacity: 0; }\n.hi-v4-input__clear:hover {\n      color: var(--hi-v4-color-gray-700, #1f2733); }\n.hi-v4-input__clear.hi-v4-input__clear--active {\n      visibility: visible;\n      opacity: 1; }\n.hi-v4-input__inner--suffix .hi-v4-input__clear {\n      -webkit-margin-end: var(--hi-v4-spacing-2, 4px);\n              margin-inline-end: var(--hi-v4-spacing-2, 4px); }\n.hi-v4-input__prefix, .hi-v4-input__suffix {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -ms-flex-negative: 0;\n        flex-shrink: 0;\n    color: var(--hi-v4-color-gray-700, #1f2733);\n    font-size: inherit;\n    text-align: center; }\n.hi-v4-input__prefix {\n    padding-left: calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-input__suffix {\n    padding-right: calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-input__prepend, .hi-v4-input__append {\n    position: relative;\n    color: var(--hi-v4-color-gray-700, #1f2733);\n    background-color: var(--hi-v4-color-gray-50, #f5f7fa);\n    -ms-flex-negative: 0;\n        flex-shrink: 0;\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    font-size: inherit;\n    text-align: center;\n    padding: 0 calc(var(--hi-v4-spacing-6, 12px) - 1px);\n    border: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-static-transparent, transparent);\n    white-space: nowrap;\n    -webkit-transition-property: all;\n    transition-property: all;\n    -webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n            transition-duration: var(--hi-v4-motion-duration-normal, 200ms);\n    -webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));\n            transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));\n    z-index: var(--hi-v4-zindex-absolute, 1); }\n.hi-v4-input__prepend {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    margin-right: -1px; }\n.hi-v4-input__append {\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n    margin-left: -1px; }\n.hi-v4-input--size-sm {\n    height: var(--hi-v4-height-6, 24px);\n    font-size: var(--hi-v4-text-size-sm, 0.75rem);\n    line-height: var(--hi-v4-text-lineheight-sm, 1.25rem); }\n.hi-v4-input--size-sm .hi-v4-input__text {\n      padding: 1px calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-input--size-sm .hi-v4-input__inner,\n    .hi-v4-input--size-sm .hi-v4-input__prepend,\n    .hi-v4-input--size-sm .hi-v4-input__append {\n      border-radius: var(--hi-v4-border-radius-md, 4px); }\n.hi-v4-input--size-sm .hi-v4-input__prepend {\n      border-top-right-radius: 0;\n      border-bottom-right-radius: 0; }\n.hi-v4-input--size-sm .hi-v4-input__append {\n      border-top-left-radius: 0;\n      border-bottom-left-radius: 0; }\n.hi-v4-input--size-md {\n    height: var(--hi-v4-height-8, 32px);\n    font-size: var(--hi-v4-text-size-md, 0.875rem);\n    line-height: var(--hi-v4-text-lineheight-md, 1.375rem); }\n.hi-v4-input--size-md .hi-v4-input__text {\n      padding: 4px calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-input--size-md .hi-v4-input__inner,\n    .hi-v4-input--size-md .hi-v4-input__prepend,\n    .hi-v4-input--size-md .hi-v4-input__append {\n      border-radius: var(--hi-v4-border-radius-md, 4px); }\n.hi-v4-input--size-md .hi-v4-input__prepend {\n      border-top-right-radius: 0;\n      border-bottom-right-radius: 0; }\n.hi-v4-input--size-md .hi-v4-input__append {\n      border-top-left-radius: 0;\n      border-bottom-left-radius: 0; }\n.hi-v4-input--size-lg {\n    height: var(--hi-v4-height-10, 40px);\n    font-size: var(--hi-v4-text-size-lg, 1rem);\n    line-height: var(--hi-v4-text-lineheight-lg, 1.5rem); }\n.hi-v4-input--size-lg .hi-v4-input__text {\n      padding: 7px calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-input--size-lg .hi-v4-input__inner,\n    .hi-v4-input--size-lg .hi-v4-input__prepend,\n    .hi-v4-input--size-lg .hi-v4-input__append {\n      border-radius: var(--hi-v4-border-radius-md, 4px); }\n.hi-v4-input--size-lg .hi-v4-input__prepend {\n      border-top-right-radius: 0;\n      border-bottom-right-radius: 0; }\n.hi-v4-input--size-lg .hi-v4-input__append {\n      border-top-left-radius: 0;\n      border-bottom-left-radius: 0; }\n.hi-v4-input--appearance-line .hi-v4-input__inner {\n    border-color: var(--hi-v4-color-gray-300, #dfe2e8); }\n.hi-v4-input--appearance-line .hi-v4-input__inner:not(.hi-v4-input__inner--disabled):hover {\n      border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-input--appearance-line .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--focused {\n      -webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));\n              box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));\n      border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-input--appearance-line .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid {\n      border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }\n.hi-v4-input--appearance-line .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid:hover {\n        border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }\n.hi-v4-input--appearance-line .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid.hi-v4-input__inner--focused {\n        -webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));\n                box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9)); }\n.hi-v4-input--appearance-line .hi-v4-input__prepend,\n  .hi-v4-input--appearance-line .hi-v4-input__append {\n    border-color: var(--hi-v4-color-gray-300, #dfe2e8); }\n.hi-v4-input--appearance-unset .hi-v4-input__text {\n    padding-left: 0;\n    padding-right: 0; }\n.hi-v4-input--appearance-unset.hi-v4-input__outer--prepend .hi-v4-input__text,\n  .hi-v4-input--appearance-unset .hi-v4-input__inner--prefix .hi-v4-input__text {\n    padding-left: calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-input--appearance-unset.hi-v4-input__outer--append .hi-v4-input__text,\n  .hi-v4-input--appearance-unset .hi-v4-input__inner--suffix .hi-v4-input__text {\n    padding-right: calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-input--appearance-unset .hi-v4-input__inner {\n    border-radius: 0; }\n.hi-v4-input--appearance-filled .hi-v4-input__inner {\n    background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.hi-v4-input__inner--disabled):hover {\n      background-color: var(--hi-v4-color-static-white, #fff);\n      border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--focused {\n      -webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));\n              box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));\n      border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n      background-color: var(--hi-v4-color-static-white, #fff); }\n.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid {\n      border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }\n.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid:hover {\n        border-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }\n.hi-v4-input--appearance-filled .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid.hi-v4-input__inner--focused {\n        -webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9));\n                box-shadow: 0 0 0 2px var(--hi-v4-color-danger-100, var(--hi-v4-color-red-100, #ffd1c9)); }\n.hi-v4-input--appearance-underline .hi-v4-input__text {\n    padding-left: 0;\n    padding-right: 0; }\n.hi-v4-input--appearance-underline.hi-v4-input__outer--prepend .hi-v4-input__text,\n  .hi-v4-input--appearance-underline .hi-v4-input__inner--prefix .hi-v4-input__text {\n    padding-left: calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-input--appearance-underline.hi-v4-input__outer--append .hi-v4-input__text,\n  .hi-v4-input--appearance-underline .hi-v4-input__inner--suffix .hi-v4-input__text {\n    padding-right: calc(var(--hi-v4-spacing-6, 12px) - 1px); }\n.hi-v4-input--appearance-underline .hi-v4-input__inner {\n    border-radius: 0; }\n.hi-v4-input--appearance-underline .hi-v4-input__inner::after {\n      content: '';\n      -webkit-box-sizing: border-box;\n              box-sizing: border-box;\n      display: block;\n      position: absolute;\n      bottom: 0;\n      left: -1px;\n      right: -1px;\n      border-bottom: 1px solid var(--hi-v4-color-gray-300, #dfe2e8);\n      -webkit-transition: all 0.3s;\n      transition: all 0.3s; }\n.hi-v4-input--appearance-underline .hi-v4-input__inner:not(.hi-v4-input__inner--disabled):hover::after {\n      border-bottom-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-input--appearance-underline .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--focused::after {\n      border-bottom-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-input--appearance-underline .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid::after {\n      border-bottom-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }\n.hi-v4-input--appearance-underline .hi-v4-input__inner:not(.hi-v4-input__inner--disabled).hi-v4-input__inner--invalid.hover::after {\n      border-bottom-color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }\n.hi-v4-input--appearance-line .hi-v4-input__inner.hi-v4-input__inner--disabled, .hi-v4-input--appearance-filled .hi-v4-input__inner.hi-v4-input__inner--disabled {\n    color: var(--hi-v4-color-gray-400, #c9ced6);\n    background-color: var(--hi-v4-color-gray-200, #ebedf0); }\n.hi-v4-input--appearance-line .hi-v4-input__inner.hi-v4-input__inner--disabled .hi-v4-input__text, .hi-v4-input--appearance-filled .hi-v4-input__inner.hi-v4-input__inner--disabled .hi-v4-input__text {\n      color: var(--hi-v4-color-gray-400, #c9ced6); }\n.hi-v4-input--appearance-unset .hi-v4-input__inner.hi-v4-input__inner--disabled, .hi-v4-input--appearance-underline .hi-v4-input__inner.hi-v4-input__inner--disabled {\n    color: var(--hi-v4-color-gray-400, #c9ced6);\n    background-color: transparent; }\n.hi-v4-input--appearance-unset .hi-v4-input__inner.hi-v4-input__inner--disabled .hi-v4-input__text, .hi-v4-input--appearance-underline .hi-v4-input__inner.hi-v4-input__inner--disabled .hi-v4-input__text {\n      color: var(--hi-v4-color-gray-400, #c9ced6); }\n.hi-v4-input__outer--prepend .hi-v4-input__inner {\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0; }\n.hi-v4-input__outer--prepend-unset .hi-v4-input__prepend {\n    border: none;\n    padding: 0; }\n.hi-v4-input__outer--prepend-unset .hi-v4-input__prepend .hi-v4-mock-input {\n      border-top-right-radius: 0;\n      border-bottom-right-radius: 0; }\n.hi-v4-input__outer--prepend-unset .hi-v4-input__prepend .hi-v4-button {\n      border-top-right-radius: 0;\n      border-bottom-right-radius: 0; }\n.hi-v4-input__outer--append .hi-v4-input__inner {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0; }\n.hi-v4-input__outer--append-unset .hi-v4-input__append {\n    border: none;\n    padding: 0; }\n.hi-v4-input__outer--append-unset .hi-v4-input__append .hi-v4-mock-input {\n      border-top-left-radius: 0;\n      border-bottom-left-radius: 0; }\n.hi-v4-input__outer--append-unset .hi-v4-input__append .hi-v4-button {\n      border-top-left-radius: 0;\n      border-bottom-left-radius: 0; }\n";
-
-var __styleInject__ = require('style-inject/dist/style-inject.es.js')["default"];
-
-__styleInject__(css_248z);
-
-export { css_248z as default };

package/lib/esm/ui/input/lib/esm/use-input.js

@@ -1,127 +0,0 @@
-/** @LICENSE
- * @hi-ui/tree-select
- * https://github.com/XiaoMi/hiui/tree/master/packages/ui/tree-select#readme
- *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-import { useCallback, useState, useMemo } from 'react';
-import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
-import { useLatestCallback } from '../../../../hooks/use-latest/lib/esm/index.js';
-import { setAttrStatus } from '../../../../utils/dom-utils/lib/esm/index.js';
-import { pure, format, formatAmount } from './utils/index.js';
-/** @LICENSE
- * @hi-ui/input
- * https://github.com/XiaoMi/hiui/tree/master/packages/ui/input#readme
- *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-var useInput = function useInput(_ref) {
-  var name = _ref.name,
-      _ref$autoFocus = _ref.autoFocus,
-      autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$readOnly = _ref.readOnly,
-      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-      maxLength = _ref.maxLength,
-      placeholder = _ref.placeholder,
-      _ref$defaultValue = _ref.defaultValue,
-      defaultValue = _ref$defaultValue === void 0 ? '' : _ref$defaultValue,
-      valueProp = _ref.value,
-      onChange = _ref.onChange,
-      onFocus = _ref.onFocus,
-      onBlur = _ref.onBlur,
-      _ref$trimValueOnBlur = _ref.trimValueOnBlur,
-      trimValueOnBlur = _ref$trimValueOnBlur === void 0 ? false : _ref$trimValueOnBlur,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'text' : _ref$type,
-      clearElementRef = _ref.clearElementRef; // Object.is 避免 trimValueOnBlur 和 点击 clearIcon 触发 2 次相同的 onCHange
-
-  var _useUncontrolledState = useUncontrolledState(defaultValue, valueProp, onChange, Object.is),
-      value = _useUncontrolledState[0],
-      tryChangeValue = _useUncontrolledState[1];
-
-  var handleChange = useCallback(function (evt, trim) {
-    if (trim === void 0) {
-      trim = false;
-    }
-
-    evt.persist();
-    var nextValue = evt.target.value;
-    var valueTrue = pure(nextValue, type); // 防溢出，保证 onChange 拿到的是值是最新的 formatted value
-
-    var value = format(nextValue, type);
-
-    if (trim) {
-      valueTrue = valueTrue.trim();
-      value = value.trim();
-    }
-
-    var event = Object.create(evt);
-    event.target = Object.assign(Object.assign({}, evt.target), {
-      value: value
-    });
-    tryChangeValue(valueTrue, event);
-  }, [tryChangeValue, type]);
-
-  var _useState = useState(autoFocus),
-      focused = _useState[0],
-      setFocused = _useState[1];
-
-  var handleFocus = useLatestCallback(function (evt) {
-    setFocused(true);
-    onFocus === null || onFocus === void 0 ? void 0 : onFocus(evt);
-  });
-  var handleBlur = useLatestCallback(function (event) {
-    var relatedTarget = event.relatedTarget; // 拦截 clearIcon 点击清空，阻止其触发 input 失焦
-
-    if (clearElementRef && clearElementRef.current && clearElementRef.current === relatedTarget) {
-      return;
-    }
-
-    setFocused(false); // amount 自动添加小数
-
-    if (type === 'amount') {
-      event.target.value = formatAmount(value, true);
-      handleChange(event, trimValueOnBlur);
-    } else if (trimValueOnBlur) {
-      handleChange(event, true);
-    }
-
-    onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
-  });
-  var nativeInputProps = useMemo(function () {
-    return {
-      name: name,
-      disabled: disabled,
-      readOnly: readOnly,
-      autoFocus: autoFocus,
-      placeholder: placeholder,
-      maxLength: maxLength,
-      'data-focused': setAttrStatus(focused)
-    };
-  }, [disabled, readOnly, autoFocus, placeholder, maxLength, name, focused]);
-  var getInputProps = useCallback(function () {
-    return Object.assign(Object.assign({}, nativeInputProps), {
-      value: format(value, type),
-      onChange: handleChange,
-      onFocus: handleFocus,
-      onBlur: handleBlur
-    });
-  }, [value, type, handleChange, handleFocus, handleBlur, nativeInputProps]);
-  return {
-    focused: focused,
-    value: value,
-    tryChangeValue: tryChangeValue,
-    getInputProps: getInputProps
-  };
-};
-
-export { useInput };