one-design-next 0.0.4-alpha.57

package/dist/input/index.js

@@ -0,0 +1,437 @@
+var _excluded = ["autoComplete", "autoFocus", "className", "type", "intent", "size", "onFocus", "onBlur", "placeholder", "disabled", "light", "leftElement", "rightElement", "allowClear", "clearIconName", "clearIcon", "count", "style", "id", "name", "onChange", "onKeyDown", "required", "value"],
+  _excluded2 = ["autoComplete", "autoFocus", "className", "intent", "size", "onFocus", "onBlur", "placeholder", "disabled", "light", "allowClear", "clearIconName", "clearIcon", "count", "autoSize", "topElement", "bottomElement", "style", "id", "name", "onChange", "onKeyDown", "required", "value", "rows"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React, { useImperativeHandle, useRef, useState } from 'react';
+import Icon from "../icon";
+import "./style";
+export function triggerFocus(element, option) {
+  if (!element) return;
+  element.focus(option);
+
+  // Selection content
+  var _ref = option || {},
+    cursor = _ref.cursor;
+  if (cursor) {
+    var len = element.value.length;
+    switch (cursor) {
+      case 'start':
+        element.setSelectionRange(0, 0);
+        break;
+      case 'end':
+        element.setSelectionRange(len, len);
+        break;
+      default:
+        element.setSelectionRange(0, len);
+    }
+  }
+}
+var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+  var _ref2$autoComplete = _ref2.autoComplete,
+    autoComplete = _ref2$autoComplete === void 0 ? 'off' : _ref2$autoComplete,
+    _ref2$autoFocus = _ref2.autoFocus,
+    autoFocus = _ref2$autoFocus === void 0 ? false : _ref2$autoFocus,
+    className = _ref2.className,
+    type = _ref2.type,
+    _ref2$intent = _ref2.intent,
+    intent = _ref2$intent === void 0 ? 'normal' : _ref2$intent,
+    _ref2$size = _ref2.size,
+    size = _ref2$size === void 0 ? 'medium' : _ref2$size,
+    onFocusProp = _ref2.onFocus,
+    onBlurProp = _ref2.onBlur,
+    _ref2$placeholder = _ref2.placeholder,
+    placeholder = _ref2$placeholder === void 0 ? '请输入' : _ref2$placeholder,
+    disabled = _ref2.disabled,
+    light = _ref2.light,
+    leftElement = _ref2.leftElement,
+    rightElement = _ref2.rightElement,
+    allowClear = _ref2.allowClear,
+    _ref2$clearIconName = _ref2.clearIconName,
+    clearIconName = _ref2$clearIconName === void 0 ? 'cancel-circle-filled' : _ref2$clearIconName,
+    clearIcon = _ref2.clearIcon,
+    count = _ref2.count,
+    style = _ref2.style,
+    id = _ref2.id,
+    name = _ref2.name,
+    onChange = _ref2.onChange,
+    onKeyDown = _ref2.onKeyDown,
+    required = _ref2.required,
+    value = _ref2.value,
+    props = _objectWithoutProperties(_ref2, _excluded);
+  var wrapperRef = useRef(null);
+  var inputRef = useRef(null);
+  var _useInputCommon = useInputCommon({
+      onFocus: onFocusProp,
+      onBlur: onBlurProp,
+      onChange: onChange,
+      allowClear: allowClear,
+      clearIconName: clearIconName,
+      clearIcon: clearIcon,
+      value: value
+    }, inputRef),
+    inputFocused = _useInputCommon.inputFocused,
+    handleFocus = _useInputCommon.handleFocus,
+    handleBlur = _useInputCommon.handleBlur,
+    renderClearIcon = _useInputCommon.renderClearIcon;
+  var handleClick = function handleClick(e) {
+    var _wrapperRef$current;
+    if ((_wrapperRef$current = wrapperRef.current) !== null && _wrapperRef$current !== void 0 && _wrapperRef$current.contains(e.target) && inputRef.current) {
+      triggerFocus(inputRef.current);
+    }
+  };
+
+  // @ts-ignore
+  useImperativeHandle(ref, function () {
+    if (wrapperRef.current) {
+      Object.assign(wrapperRef.current, {
+        input: inputRef.current,
+        focus: function focus() {
+          var _inputRef$current;
+          (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+        },
+        blur: function blur() {
+          var _inputRef$current2;
+          (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.blur();
+        }
+      });
+    }
+    return wrapperRef.current;
+  });
+  var handleChange = function handleChange(e) {
+    onChange === null || onChange === void 0 || onChange(e, e.target.value);
+  };
+
+  // 计算字符数
+  var getCharCount = function getCharCount(text) {
+    if (count !== null && count !== void 0 && count.strategy) {
+      return count.strategy(text);
+    }
+    return text.length;
+  };
+  var currentCount = getCharCount((value === null || value === void 0 ? void 0 : value.toString()) || '');
+  var isOverLimit = (count === null || count === void 0 ? void 0 : count.max) && currentCount > count.max;
+
+  // 格式化计数显示文本
+  var getCountText = function getCountText() {
+    if (!(count !== null && count !== void 0 && count.max)) return '';
+    if (count.formatter) {
+      return count.formatter({
+        count: currentCount,
+        max: count.max
+      });
+    }
+    return "".concat(currentCount, "/").concat(count.max);
+  };
+  var wrapperProps = _objectSpread({
+    'data-odn-input': true,
+    'data-odn-input-size': size,
+    'data-odn-input-intent': isOverLimit ? 'danger' : intent,
+    'data-odn-input-focused': inputFocused,
+    'data-odn-input-disabled': disabled,
+    'data-odn-input-light': light,
+    'data-odn-input-over-limit': isOverLimit,
+    ref: wrapperRef,
+    className: className,
+    style: style,
+    onClick: handleClick
+  }, props);
+  var inputProps = {
+    'data-odn-input-el': true,
+    ref: inputRef,
+    autoComplete: autoComplete,
+    autoFocus: autoFocus,
+    type: type,
+    disabled: disabled,
+    placeholder: placeholder,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    id: id,
+    name: name,
+    onChange: handleChange,
+    onKeyDown: onKeyDown,
+    required: required,
+    value: value
+  };
+  return /*#__PURE__*/React.createElement("div", wrapperProps, leftElement && /*#__PURE__*/React.createElement("div", {
+    "data-odn-input-left-element": true
+  }, leftElement), /*#__PURE__*/React.createElement("input", inputProps), (rightElement || allowClear || (count === null || count === void 0 ? void 0 : count.max)) && /*#__PURE__*/React.createElement("div", {
+    "data-odn-input-right-element": true
+  }, (count === null || count === void 0 ? void 0 : count.max) && /*#__PURE__*/React.createElement("div", {
+    "data-odn-input-count": true
+  }, getCountText()), allowClear && renderClearIcon(), rightElement));
+});
+InputComponent.displayName = 'Input';
+
+// 公共的 Input 组件逻辑
+var useInputCommon = function useInputCommon(props, elementRef) {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    inputFocused = _useState2[0],
+    setInputFocused = _useState2[1];
+  var handleFocus = function handleFocus(e) {
+    var _props$onFocus;
+    setInputFocused(true);
+    (_props$onFocus = props.onFocus) === null || _props$onFocus === void 0 || _props$onFocus.call(props, e);
+  };
+  var handleBlur = function handleBlur(e) {
+    var _props$onBlur;
+    setInputFocused(false);
+    (_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 || _props$onBlur.call(props, e);
+  };
+  var handleClear = function handleClear(e) {
+    var _props$onChange;
+    e.stopPropagation();
+    e.preventDefault();
+    (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, {
+      target: {
+        value: ''
+      }
+    }, '');
+  };
+  var renderClearIcon = function renderClearIcon() {
+    var _props$value;
+    if (!props.allowClear || !((_props$value = props.value) !== null && _props$value !== void 0 && _props$value.toString().trim())) return null;
+    return props.clearIcon || /*#__PURE__*/React.createElement(Icon, {
+      "data-odn-input-clear-icon": true,
+      name: props.clearIconName || 'cancel-circle-filled',
+      onMouseDown: handleClear
+    });
+  };
+  return {
+    inputFocused: inputFocused,
+    handleFocus: handleFocus,
+    handleBlur: handleBlur,
+    renderClearIcon: renderClearIcon
+  };
+};
+var Textarea = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
+  var _ref3$autoComplete = _ref3.autoComplete,
+    autoComplete = _ref3$autoComplete === void 0 ? 'off' : _ref3$autoComplete,
+    _ref3$autoFocus = _ref3.autoFocus,
+    autoFocus = _ref3$autoFocus === void 0 ? false : _ref3$autoFocus,
+    className = _ref3.className,
+    _ref3$intent = _ref3.intent,
+    intent = _ref3$intent === void 0 ? 'normal' : _ref3$intent,
+    _ref3$size = _ref3.size,
+    size = _ref3$size === void 0 ? 'medium' : _ref3$size,
+    onFocusProp = _ref3.onFocus,
+    onBlurProp = _ref3.onBlur,
+    _ref3$placeholder = _ref3.placeholder,
+    placeholder = _ref3$placeholder === void 0 ? '请输入' : _ref3$placeholder,
+    disabled = _ref3.disabled,
+    light = _ref3.light,
+    allowClear = _ref3.allowClear,
+    _ref3$clearIconName = _ref3.clearIconName,
+    clearIconName = _ref3$clearIconName === void 0 ? 'cancel-circle-filled' : _ref3$clearIconName,
+    clearIcon = _ref3.clearIcon,
+    count = _ref3.count,
+    _ref3$autoSize = _ref3.autoSize,
+    autoSize = _ref3$autoSize === void 0 ? false : _ref3$autoSize,
+    topElement = _ref3.topElement,
+    bottomElement = _ref3.bottomElement,
+    style = _ref3.style,
+    id = _ref3.id,
+    name = _ref3.name,
+    onChange = _ref3.onChange,
+    onKeyDown = _ref3.onKeyDown,
+    required = _ref3.required,
+    value = _ref3.value,
+    _ref3$rows = _ref3.rows,
+    rows = _ref3$rows === void 0 ? 3 : _ref3$rows,
+    props = _objectWithoutProperties(_ref3, _excluded2);
+  var wrapperRef = useRef(null);
+  var textareaRef = useRef(null);
+  var _useInputCommon2 = useInputCommon({
+      onFocus: onFocusProp,
+      onBlur: onBlurProp,
+      onChange: onChange,
+      allowClear: allowClear,
+      clearIconName: clearIconName,
+      clearIcon: clearIcon,
+      value: value
+    }, textareaRef),
+    inputFocused = _useInputCommon2.inputFocused,
+    handleFocus = _useInputCommon2.handleFocus,
+    handleBlur = _useInputCommon2.handleBlur,
+    renderClearIcon = _useInputCommon2.renderClearIcon;
+  var handleClick = function handleClick(e) {
+    var _wrapperRef$current2;
+    var target = e.target;
+
+    // 如果点击的是 topElement 或 bottomElement，不触发 focus
+    if (target.closest('[data-odn-input-top-element]') || target.closest('[data-odn-input-bottom-element]')) {
+      return;
+    }
+    if ((_wrapperRef$current2 = wrapperRef.current) !== null && _wrapperRef$current2 !== void 0 && _wrapperRef$current2.contains(target) && textareaRef.current) {
+      triggerFocus(textareaRef.current);
+    }
+  };
+
+  // @ts-ignore
+  useImperativeHandle(ref, function () {
+    if (wrapperRef.current) {
+      Object.assign(wrapperRef.current, {
+        textarea: textareaRef.current,
+        focus: function focus() {
+          var _textareaRef$current;
+          (_textareaRef$current = textareaRef.current) === null || _textareaRef$current === void 0 || _textareaRef$current.focus();
+        },
+        blur: function blur() {
+          var _textareaRef$current2;
+          (_textareaRef$current2 = textareaRef.current) === null || _textareaRef$current2 === void 0 || _textareaRef$current2.blur();
+        }
+      });
+    }
+    return wrapperRef.current;
+  });
+  var handleChange = function handleChange(e) {
+    onChange === null || onChange === void 0 || onChange(e, e.target.value);
+  };
+
+  // AutoSize 逻辑
+  var adjustHeight = React.useCallback(function () {
+    if (!autoSize || !textareaRef.current) return;
+    var textarea = textareaRef.current;
+    var autoSizeConfig = _typeof(autoSize) === 'object' ? autoSize : {};
+    var minRows = autoSizeConfig.minRows || 1;
+    var maxRows = autoSizeConfig.maxRows || Infinity;
+
+    // 获取 textarea 的样式
+    var computedStyle = getComputedStyle(textarea);
+    var lineHeight = parseInt(computedStyle.lineHeight, 10) || 22;
+    var paddingTop = parseInt(computedStyle.paddingTop, 10) || 6;
+    var paddingBottom = parseInt(computedStyle.paddingBottom, 10) || 6;
+    var borderTop = parseInt(computedStyle.borderTopWidth, 10) || 0;
+    var borderBottom = parseInt(computedStyle.borderBottomWidth, 10) || 0;
+
+    // 创建隐藏的 textarea 来测量高度
+    var hiddenTextarea = document.createElement('textarea');
+    hiddenTextarea.style.position = 'absolute';
+    hiddenTextarea.style.visibility = 'hidden';
+    hiddenTextarea.style.height = '0';
+    hiddenTextarea.style.overflow = 'hidden';
+    hiddenTextarea.style.top = '0';
+    hiddenTextarea.style.left = '0';
+
+    // 复制所有相关样式
+    var stylesToCopy = ['fontFamily', 'fontSize', 'fontWeight', 'fontStyle', 'letterSpacing', 'lineHeight', 'textTransform', 'wordSpacing', 'textIndent', 'whiteSpace', 'wordWrap', 'overflowWrap', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth', 'boxSizing', 'width'];
+    stylesToCopy.forEach(function (style) {
+      hiddenTextarea.style[style] = computedStyle[style];
+    });
+
+    // 设置内容
+    hiddenTextarea.value = String(value || textarea.placeholder || '');
+
+    // 添加到 DOM 进行测量
+    document.body.appendChild(hiddenTextarea);
+
+    // 获取内容高度
+    var contentHeight = hiddenTextarea.scrollHeight;
+    document.body.removeChild(hiddenTextarea);
+
+    // 计算内容实际需要的行数
+    // 先计算单行高度（不包含 padding 和 border）
+    var singleLineHeight = lineHeight;
+    var contentOnlyHeight = contentHeight - paddingTop - paddingBottom - borderTop - borderBottom;
+    var contentRows = Math.max(1, Math.ceil(contentOnlyHeight / singleLineHeight));
+    var finalRows = Math.max(minRows, Math.min(maxRows, contentRows));
+
+    // 设置最终高度
+    var finalHeight = finalRows * lineHeight + paddingTop + paddingBottom + borderTop + borderBottom;
+    textarea.style.height = "".concat(finalHeight, "px");
+  }, [autoSize, value]);
+
+  // 监听值变化和 autoSize 变化
+  React.useEffect(function () {
+    adjustHeight();
+  }, [value, autoSize, adjustHeight]);
+
+  // 计算字符数
+  var getCharCount = function getCharCount(text) {
+    if (count !== null && count !== void 0 && count.strategy) {
+      return count.strategy(text);
+    }
+    return text.length;
+  };
+  var currentCount = getCharCount((value === null || value === void 0 ? void 0 : value.toString()) || '');
+  var isOverLimit = (count === null || count === void 0 ? void 0 : count.max) && currentCount > count.max;
+  var wrapperProps = {
+    'data-odn-input': true,
+    'data-odn-input-textarea': true,
+    'data-odn-input-textarea-auto-size': autoSize,
+    'data-odn-input-size': size,
+    'data-odn-input-intent': isOverLimit ? 'danger' : intent,
+    'data-odn-input-focused': inputFocused,
+    'data-odn-input-disabled': disabled,
+    'data-odn-input-light': light,
+    'data-odn-input-over-limit': isOverLimit,
+    ref: wrapperRef,
+    className: className,
+    style: style,
+    onClick: handleClick
+  };
+
+  // 格式化计数显示文本
+  var getCountText = function getCountText() {
+    if (!(count !== null && count !== void 0 && count.max)) return '';
+    if (count.formatter) {
+      return count.formatter({
+        count: currentCount,
+        max: count.max
+      });
+    }
+    return "".concat(currentCount, "/").concat(count.max);
+  };
+  var textareaProps = {
+    'data-odn-input-el': true,
+    ref: textareaRef,
+    autoComplete: autoComplete,
+    autoFocus: autoFocus,
+    disabled: disabled,
+    placeholder: placeholder,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    id: id,
+    name: name,
+    onChange: handleChange,
+    onKeyDown: onKeyDown,
+    required: required,
+    value: value,
+    rows: autoSize ? undefined : rows,
+    style: autoSize ? _objectSpread(_objectSpread({}, style), {}, {
+      height: 'auto'
+    }) : style
+  };
+  return /*#__PURE__*/React.createElement("div", wrapperProps, topElement && /*#__PURE__*/React.createElement("div", {
+    "data-odn-input-top-element": true
+  }, topElement), /*#__PURE__*/React.createElement("textarea", _extends({
+    "data-scrollbar-custom": true
+  }, textareaProps)), (allowClear || (count === null || count === void 0 ? void 0 : count.max)) && /*#__PURE__*/React.createElement("div", {
+    "data-odn-input-right-element": true
+  }, (count === null || count === void 0 ? void 0 : count.max) && /*#__PURE__*/React.createElement("div", {
+    "data-odn-input-count": true
+  }, getCountText()), allowClear && renderClearIcon()), bottomElement && /*#__PURE__*/React.createElement("div", {
+    "data-odn-input-bottom-element": true
+  }, bottomElement));
+});
+Textarea.displayName = 'Textarea';
+
+// 定义包含 Textarea 的 Input 类型
+
+// 创建包含 Textarea 的 Input 组件
+var Input = InputComponent;
+Input.Textarea = Textarea;
+export default Input;

package/dist/input/style/index.css

@@ -0,0 +1,256 @@
+html {
+  --odn-input-padding-block-medium: 6px;
+  --odn-input-padding-inline-medium: 12px;
+  --odn-input-font-size-medium: 14px;
+  --odn-input-line-height-medium: 1.5714285714285714;
+  --odn-input-border-radius-medium: 6px;
+  --odn-input-icon-size-medium: 16px;
+  --odn-input-icon-margin-inline-medium: 4px;
+  --odn-input-padding-block-small: 4px;
+  --odn-input-padding-inline-small: 12px;
+  --odn-input-font-size-small: 12px;
+  --odn-input-line-height-small: 1.6666666666666667;
+  --odn-input-border-radius-small: 6px;
+  --odn-input-icon-size-small: 14px;
+  --odn-input-icon-margin-inline-small: 4px;
+  --odn-input-padding-block-large: 8px;
+  --odn-input-padding-inline-large: 12px;
+  --odn-input-font-size-large: 16px;
+  --odn-input-line-height-large: 1.5;
+  --odn-input-border-radius-large: 6px;
+  --odn-input-icon-size-large: 18px;
+  --odn-input-icon-margin-inline-large: 4px;
+  --odn-input-bg-normal: #fff;
+  --odn-input-bg-normal-hover: var(--odn-color-black-1);
+  --odn-input-bg-normal-focus: #fff;
+  --odn-input-bg-danger: #fff;
+  --odn-input-bg-danger-hover: var(--odn-color-black-1);
+  --odn-input-bg-danger-focus: #fff;
+  --odn-input-bg-disabled: var(--odn-color-black-3);
+  --odn-input-color-normal: var(--odn-color-black-12);
+  --odn-input-color-normal-hover: var(--odn-color-black-12);
+  --odn-input-color-normal-focus: var(--odn-color-black-12);
+  --odn-input-color-danger: var(--odn-color-black-12);
+  --odn-input-color-danger-hover: var(--odn-color-black-12);
+  --odn-input-color-danger-focus: var(--odn-color-black-12);
+  --odn-input-color-disabled: var(--odn-color-black-8);
+  --odn-input-border-width: 1px;
+  --odn-input-border-style: solid;
+  --odn-input-border-normal: var(--odn-color-black-6);
+  --odn-input-border-normal-hover: var(--odn-color-black-7);
+  --odn-input-border-normal-focus: var(--odn-color-blue-6);
+  --odn-input-border-danger: var(--odn-color-red-6);
+  --odn-input-border-danger-hover: var(--odn-color-red-6);
+  --odn-input-border-danger-focus: var(--odn-color-red-6);
+  --odn-input-border-disabled: var(--odn-color-black-6);
+  --odn-input-shadow-normal: none;
+  --odn-input-shadow-normal-hover: none;
+  --odn-input-shadow-normal-focus: 0 0 0 2px var(--odn-color-blue-2);
+  --odn-input-shadow-danger: none;
+  --odn-input-shadow-danger-hover: none;
+  --odn-input-shadow-danger-focus: 0 0 0 2px var(--odn-color-red-2);
+  --odn-input-shadow-disabled: none;
+}
+
+[data-odn-input] {
+  list-style: none;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  transition: all 0.15s cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+[data-odn-input-el] {
+  position: relative;
+  width: 100%;
+  min-width: 0;
+  font-size: inherit;
+  border: none;
+  border-radius: 0;
+  outline: none;
+  background: transparent;
+  color: inherit;
+}
+[data-odn-input-el]::-webkit-search-decoration, [data-odn-input-el]::-webkit-search-cancel-button {
+  appearance: none;
+}
+
+[data-odn-input-size=small] {
+  font-size: var(--odn-input-font-size-small);
+  line-height: var(--odn-input-line-height-small);
+  border-radius: var(--odn-input-border-radius-small);
+}
+[data-odn-input-size=small] [data-odn-input-left-element] > svg:only-child {
+  margin-inline-end: var(--odn-input-icon-margin-inline-small);
+  width: var(--odn-input-icon-size-small);
+  height: var(--odn-input-icon-size-small);
+}
+[data-odn-input-size=small] [data-odn-input-right-element] > svg:only-child {
+  margin-inline-start: var(--odn-input-icon-margin-inline-small);
+  width: var(--odn-input-icon-size-small);
+  height: var(--odn-input-icon-size-small);
+}
+[data-odn-input-size=small]:not([data-odn-input-textarea=true]) {
+  padding: var(--odn-input-padding-block-small) var(--odn-input-padding-inline-small);
+}
+[data-odn-input-size=small][data-odn-input-textarea=true] [data-odn-input-el] {
+  padding: var(--odn-input-padding-block-small) var(--odn-input-padding-inline-small);
+}
+
+[data-odn-input-size=medium] {
+  font-size: var(--odn-input-font-size-medium);
+  line-height: var(--odn-input-line-height-medium);
+  border-radius: var(--odn-input-border-radius-medium);
+}
+[data-odn-input-size=medium] [data-odn-input-left-element] > svg:only-child {
+  margin-inline-end: var(--odn-input-icon-margin-inline-medium);
+  width: var(--odn-input-icon-size-medium);
+  height: var(--odn-input-icon-size-medium);
+}
+[data-odn-input-size=medium] [data-odn-input-right-element] > svg:only-child {
+  margin-inline-start: var(--odn-input-icon-margin-inline-medium);
+  width: var(--odn-input-icon-size-medium);
+  height: var(--odn-input-icon-size-medium);
+}
+[data-odn-input-size=medium]:not([data-odn-input-textarea=true]) {
+  padding: var(--odn-input-padding-block-medium) var(--odn-input-padding-inline-medium);
+}
+[data-odn-input-size=medium][data-odn-input-textarea=true] [data-odn-input-el] {
+  padding: var(--odn-input-padding-block-medium) var(--odn-input-padding-inline-medium);
+}
+
+[data-odn-input-size=large] {
+  font-size: var(--odn-input-font-size-large);
+  line-height: var(--odn-input-line-height-large);
+  border-radius: var(--odn-input-border-radius-large);
+}
+[data-odn-input-size=large] [data-odn-input-left-element] > svg:only-child {
+  margin-inline-end: var(--odn-input-icon-margin-inline-large);
+  width: var(--odn-input-icon-size-large);
+  height: var(--odn-input-icon-size-large);
+}
+[data-odn-input-size=large] [data-odn-input-right-element] > svg:only-child {
+  margin-inline-start: var(--odn-input-icon-margin-inline-large);
+  width: var(--odn-input-icon-size-large);
+  height: var(--odn-input-icon-size-large);
+}
+[data-odn-input-size=large]:not([data-odn-input-textarea=true]) {
+  padding: var(--odn-input-padding-block-large) var(--odn-input-padding-inline-large);
+}
+[data-odn-input-size=large][data-odn-input-textarea=true] [data-odn-input-el] {
+  padding: var(--odn-input-padding-block-large) var(--odn-input-padding-inline-large);
+}
+
+[data-odn-input-intent=normal]:not([data-odn-input-disabled=true]) {
+  color: var(--odn-input-color-normal);
+  background: var(--odn-input-bg-normal);
+  border: var(--odn-input-border-width) var(--odn-input-border-style) var(--odn-input-border-normal);
+  box-shadow: var(--odn-input-shadow-normal);
+}
+[data-odn-input-intent=normal]:not([data-odn-input-disabled=true]):hover {
+  color: var(--odn-input-color-normal-hover);
+  background: var(--odn-input-bg-normal-hover);
+  border: var(--odn-input-border-width) var(--odn-input-border-style) var(--odn-input-border-normal-hover);
+  box-shadow: var(--odn-input-shadow-normal-hover);
+}
+[data-odn-input-intent=normal]:not([data-odn-input-disabled=true])[data-odn-input-focused=true] {
+  color: var(--odn-input-color-normal-focus);
+  background: var(--odn-input-bg-normal-focus);
+  border: var(--odn-input-border-width) var(--odn-input-border-style) var(--odn-input-border-normal-focus);
+  box-shadow: var(--odn-input-shadow-normal-focus);
+}
+
+[data-odn-input-intent=danger]:not([data-odn-input-disabled=true]) {
+  color: var(--odn-input-color-danger);
+  background: var(--odn-input-bg-danger);
+  border: var(--odn-input-border-width) var(--odn-input-border-style) var(--odn-input-border-danger);
+  box-shadow: var(--odn-input-shadow-danger);
+}
+[data-odn-input-intent=danger]:not([data-odn-input-disabled=true]):hover {
+  color: var(--odn-input-color-danger-hover);
+  background: var(--odn-input-bg-danger-hover);
+  border: var(--odn-input-border-width) var(--odn-input-border-style) var(--odn-input-border-danger-hover);
+  box-shadow: var(--odn-input-shadow-danger-hover);
+}
+[data-odn-input-intent=danger]:not([data-odn-input-disabled=true])[data-odn-input-focused=true] {
+  color: var(--odn-input-color-danger-focus);
+  background: var(--odn-input-bg-danger-focus);
+  border: var(--odn-input-border-width) var(--odn-input-border-style) var(--odn-input-border-danger-focus);
+  box-shadow: var(--odn-input-shadow-danger-focus);
+}
+
+[data-odn-input-disabled=true] {
+  color: var(--odn-input-color-disabled);
+  background: var(--odn-input-bg-disabled);
+  border: var(--odn-input-border-width) var(--odn-input-border-style) var(--odn-input-border-disabled);
+  box-shadow: var(--odn-input-shadow-disabled);
+  cursor: not-allowed;
+}
+[data-odn-input-disabled=true] [data-odn-input] {
+  cursor: not-allowed;
+}
+[data-odn-input-disabled=true] [data-odn-input-clear-icon] {
+  pointer-events: none;
+}
+
+[data-odn-input-over-limit=true] [data-odn-input-count] {
+  color: var(--odn-color-red-6);
+}
+
+[data-odn-input-light=true]:not([data-odn-input-disabled=true]) {
+  background: transparent;
+  border: var(--odn-input-border-width) var(--odn-input-border-style) transparent;
+  box-shadow: none;
+}
+
+[data-odn-input-left-element],
+[data-odn-input-right-element] {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+[data-odn-input-left-element] [data-odn-icon],
+[data-odn-input-right-element] [data-odn-icon] {
+  fill: var(--odn-color-black-9);
+}
+
+[data-odn-input-right-element] [data-odn-input-clear-icon] {
+  fill: var(--odn-color-black-7);
+  cursor: pointer;
+}
+[data-odn-input-right-element] [data-odn-input-clear-icon]:hover {
+  fill: var(--odn-color-black-8);
+}
+
+[data-odn-input-count] {
+  margin-left: 4px;
+  color: var(--odn-color-black-9);
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+[data-odn-input-textarea] {
+  flex-direction: column;
+}
+[data-odn-input-textarea] [data-odn-input-el] {
+  resize: none;
+  transition: height 0.15s cubic-bezier(0.32, 0.72, 0, 1);
+}
+[data-odn-input-textarea]:not([data-odn-input-textarea-auto-size=true]) {
+  flex: 1;
+}
+[data-odn-input-textarea] [data-odn-input-right-element] {
+  display: flex;
+  padding-right: 12px;
+  width: 100%;
+  align-items: center;
+  justify-content: flex-end;
+  height: 28px;
+}
+[data-odn-input-textarea] [data-odn-input-top-element],
+[data-odn-input-textarea] [data-odn-input-bottom-element] {
+  width: 100%;
+}