musae 1.3.1-beta.2 → 1.3.1-beta.21

package/dist/components/input/hooks.cjs

@@ -37,21 +37,5 @@ var useInputEvents = function useInputEvents(_ref) {
     click: click
   };
 };
-/**
- * @description
- * inputor events
- */
-var useInputorEvents = function useInputorEvents(_ref2) {
-  var inputRef = _ref2.inputRef;
-  // click
-  var click = React.useCallback(function () {
-    var _inputRef$current;
-    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
-  }, [inputRef]);
-  return {
-    click: click
-  };
-};
 
 exports.useInputEvents = useInputEvents;
-exports.useInputorEvents = useInputorEvents;

package/dist/components/input/hooks.d.ts

@@ -1,6 +1,5 @@
-import { type ChangeEventHandler, type Dispatch, type FocusEventHandler, type MouseEventHandler, type SetStateAction, type RefObject } from "react";
+import { type ChangeEventHandler, type Dispatch, type FocusEventHandler, type MouseEventHandler, type SetStateAction } from "react";
 import type { InputProps } from "../../types/input";
-import type { Nullable } from "@aiszlab/relax/types";
 /**
  * @description
  * use events for input
@@ -13,12 +12,3 @@ export declare const useInputEvents: ({ setValue, onBlur, onChange, onClick, onF
     change: ChangeEventHandler<HTMLInputElement>;
     click: MouseEventHandler<HTMLInputElement>;
 };
-/**
- * @description
- * inputor events
- */
-export declare const useInputorEvents: ({ inputRef, }: {
-    inputRef: RefObject<Nullable<HTMLInputElement>>;
-}) => {
-    click: () => void;
-};

package/dist/components/input/hooks.mjs

@@ -35,20 +35,5 @@ var useInputEvents = function useInputEvents(_ref) {
     click: click
   };
 };
-/**
- * @description
- * inputor events
- */
-var useInputorEvents = function useInputorEvents(_ref2) {
-  var inputRef = _ref2.inputRef;
-  // click
-  var click = useCallback(function () {
-    var _inputRef$current;
-    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
-  }, [inputRef]);
-  return {
-    click: click
-  };
-};
 
-export { useInputEvents, useInputorEvents };
+export { useInputEvents };

package/dist/components/input/index.d.ts

@@ -1,2 +1,3 @@
-import Input, { styles } from "./input";
+import Input from "./input";
+import styles from "./styles.stylex";
 export { Input, styles };

package/dist/components/input/input.cjs

@@ -6,6 +6,7 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var styles_stylex = require('./styles.stylex.cjs');
 var React = require('react');
 var hooks = require('./hooks.cjs');
 var relax = require('@aiszlab/relax');
@@ -17,63 +18,20 @@ var context = require('./context.cjs');
 var theme = require('../theme/theme.cjs');
 var useThemeColorVars = require('../../hooks/use-theme-color-vars.cjs');
 
-var _excluded = ["className", "style", "type", "invalid", "disabled", "maxLength", "value", "onBlur", "onChange", "onClick", "onFocus", "leading", "trailing"];
-var styles = {
-  inputor: {
-    k1xSpc: "musaex-3nfvp2",
-    kGNEyG: "musaex-6s0dn4",
-    kkrTdU: "musaex-1ed109x",
-    kaIpWk: "musaex-db68te",
-    kXLuUW: "musaex-3ajldb",
-    kI3sdo: "musaex-4fx59i",
-    kAzted: "musaex-epu74c",
-    k7Eaqz: "musaex-1rdiejn",
-    kzqmXN: "musaex-92755x",
-    kGVxlE: "musaex-7u4mnu",
-    kB7OPa: "musaex-9f619",
-    kogj98: "musaex-q3gua8",
-    k8WAf4: "musaex-11owsmz",
-    kg3NbH: "musaex-81lxrv",
-    k1ekBW: "musaex-kdsq27",
-    kIyJzY: "musaex-1ptezny",
-    k6sLGO: "musaex-1o9dqaq",
-    knuKkz: "musaex-8pombj",
-    $$css: true
-  },
-  invalid: {
-    kGVxlE: "musaex-4ms1xy",
-    knuKkz: null,
-    $$css: true
-  },
-  input: {
-    kLWn49: "musaex-15bjb6t",
-    kGuDYH: "musaex-1qlqyl8",
-    kmVPX3: "musaex-1n775ky",
-    kMzoRj: "musaex-k59kd",
-    kWkggS: "musaex-jbqb8w",
-    kI3sdo: "musaex-4fx59i",
-    k7Eaqz: "musaex-1rdiejn",
-    kZKoxP: "musaex-kyvkcq",
-    kUk6DE: "musaex-98rzlu",
-    $$css: true
-  },
-  disabled: {
-    kWkggS: "musaex-1fbjual",
-    kMwMTN: "musaex-1ldep6k",
-    kGVxlE: "musaex-yb4mll",
-    $$css: true
-  }
-};
+var _excluded = ["className", "style", "type", "variant", "shaped", "invalid", "disabled", "maxLength", "value", "onBlur", "onChange", "onClick", "onFocus", "leading", "trailing", "label", "inputClassName"],
+  _excluded2 = ["click"];
 /**
  * @author murukal
- *
- * @description
- * input component
+ * @zh 输入组件
+ * @en Input component
  */
 var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className$1 = _ref.className,
     style = _ref.style,
-    type = _ref.type,
+    type = _ref.type;
+    _ref.variant;
+    var _ref$shaped = _ref.shaped,
+    shaped = _ref$shaped === void 0 ? false : _ref$shaped,
     _ref$invalid = _ref.invalid,
     invalid = _ref$invalid === void 0 ? false : _ref$invalid,
     disabled = _ref.disabled,
@@ -85,10 +43,18 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onFocus = _ref.onFocus,
     leading = _ref.leading,
     trailing = _ref.trailing,
+    label = _ref.label,
+    inputClassName = _ref.inputClassName,
     inputProps = _objectWithoutProperties(_ref, _excluded);
+  var inputorRef = React.useRef(null);
   var inputRef = React.useRef(null);
   var classNames = useClassNames.useClassNames(context.CLASS_NAMES);
-  var _themeColorVars = useThemeColorVars.useThemeColorVars(["primary", "outline", "error", ["on-surface", tokens_stylex.OPACITY.thickest], ["on-surface", tokens_stylex.OPACITY.thin]]);
+  var hasPlaceholder = !!inputProps.placeholder;
+  var hasLabel = !!label;
+  var _useIdentity = relax.useIdentity(),
+    _useIdentity2 = _slicedToArray(_useIdentity, 1),
+    id = _useIdentity2[0];
+  var _themeColorVars = useThemeColorVars.useThemeColorVars(["primary", "outline", "error", "surface-container-high", "on-surface-variant", ["on-surface", tokens_stylex.OPACITY.thickest], ["on-surface", tokens_stylex.OPACITY.medium], ["on-surface", tokens_stylex.OPACITY.thin]]);
   // controlled value
   var _useControlledState = relax.useControlledState(valueInProps, {
       defaultState: ""
@@ -97,6 +63,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _value = _useControlledState2[0],
     _setValue = _useControlledState2[1];
   React.useImperativeHandle(ref, function () {
+    var _inputorRef$current;
     return {
       focus: function focus() {
         var _inputRef$current;
@@ -110,23 +77,26 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         var _inputRef$current3;
         (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 || _inputRef$current3.select();
       },
+      getBoundingClientRect: function getBoundingClientRect() {
+        return inputorRef.current.getBoundingClientRect();
+      },
+      contextElement: (_inputorRef$current = inputorRef.current) !== null && _inputorRef$current !== void 0 ? _inputorRef$current : undefined,
       getValue: function getValue() {
-        return _value;
+        var _inputRef$current$val, _inputRef$current4;
+        return (_inputRef$current$val = (_inputRef$current4 = inputRef.current) === null || _inputRef$current4 === void 0 ? void 0 : _inputRef$current4.value) !== null && _inputRef$current$val !== void 0 ? _inputRef$current$val : "";
       }
     };
-  });
+  }, []);
   // input events
-  var inputEvents = hooks.useInputEvents({
-    setValue: _setValue,
-    onBlur: onBlur,
-    onChange: onChange,
-    onClick: onClick,
-    onFocus: onFocus
-  });
-  // inputor events
-  var inputorEvents = hooks.useInputorEvents({
-    inputRef: inputRef
-  });
+  var _useInputEvents = hooks.useInputEvents({
+      setValue: _setValue,
+      onBlur: onBlur,
+      onChange: onChange,
+      onClick: onClick,
+      onFocus: onFocus
+    }),
+    click = _useInputEvents.click,
+    inputEvents = _objectWithoutProperties(_useInputEvents, _excluded2);
   // is focused
   var _useFocus = relax.useFocus({
       onBlur: inputEvents.blur,
@@ -136,30 +106,63 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     isFocused = _useFocus2[0],
     focusProps = _useFocus2[1];
   var styled = {
-    inputor: stylex.props(theme.$body.medium, styles.inputor, invalid && styles.invalid, disabled && styles.disabled),
-    input: {
-      className: "musaex-15bjb6t musaex-1qlqyl8 musaex-1n775ky musaex-k59kd musaex-jbqb8w musaex-4fx59i musaex-1rdiejn musaex-kyvkcq musaex-98rzlu"
-    }
+    root: stylex.props(theme.$body.medium, styles_stylex.default.root.base, disabled && styles_stylex.default.root.disabled, !disabled && styles_stylex.textFieldMarker),
+    input: stylex.props(styles_stylex.default.input.base, !!leading && styles_stylex.default.input.hasLeading, !!trailing && styles_stylex.default.input.hasTrailing, disabled && styles_stylex.default.input.disabled),
+    leading: stylex.props(styles_stylex.default.leading.base),
+    trailing: stylex.props(styles_stylex.default.trailing.base),
+    outline: stylex.props(styles_stylex.default.outline.base),
+    outlineLeading: stylex.props(styles_stylex.default.outlineLeading.base, disabled && styles_stylex.default.outlineLeading.disabled, invalid && styles_stylex.default.outlineLeading.invalid, shaped && styles_stylex.default.outlineLeading.shaped),
+    outlineNotch: stylex.props(styles_stylex.default.outlineNotch.base, theme.$body.small, hasLabel && styles_stylex.default.outlineNotch.withLabel, hasLabel && (hasPlaceholder || !!_value) && styles_stylex.default.outlineNotch.withLabelAndPlaceholder, disabled && styles_stylex.default.outlineNotch.disabled, invalid && styles_stylex.default.outlineNotch.invalid),
+    outlineTrailing: stylex.props(styles_stylex.default.outlineTrailing.base, disabled && styles_stylex.default.outlineTrailing.disabled, invalid && styles_stylex.default.outlineTrailing.invalid, shaped && styles_stylex.default.outlineTrailing.shaped),
+    floatingLabel: stylex.props(styles_stylex.default.floatingLabel.base, (hasPlaceholder || !!_value) && styles_stylex.default.floatingLabel.placeholder, disabled && styles_stylex.default.floatingLabel.disabled, invalid && styles_stylex.default.floatingLabel.invalid)
   };
-  return /*#__PURE__*/React.createElement("span", _objectSpread({
-    className: className.stringify(classNames.inputor, _defineProperty(_defineProperty({}, classNames.focused, isFocused), classNames.invalid, !!invalid), className$1, styled.inputor.className),
-    style: _objectSpread(_objectSpread(_objectSpread({}, styled.inputor.style), style), _themeColorVars),
-    onClick: inputorEvents.click
+  return /*#__PURE__*/React.createElement("div", _objectSpread(_objectSpread({
+    ref: inputorRef,
+    className: className.stringify(classNames.inputor, _defineProperty(_defineProperty({}, classNames.focused, isFocused), classNames.invalid, !!invalid), className$1, styled.root.className),
+    style: _objectSpread(_objectSpread(_objectSpread({}, styled.root.style), style), _themeColorVars)
   }, !disabled && {
     tabIndex: -1
-  }), leading, /*#__PURE__*/React.createElement("input", _objectSpread(_objectSpread({
+  }), {}, {
+    onFocus: function onFocus(event) {
+      if (event.target === event.currentTarget) {
+        var _inputRef$current5;
+        (_inputRef$current5 = inputRef.current) === null || _inputRef$current5 === void 0 || _inputRef$current5.focus();
+      }
+    },
+    onClick: click
+  }), !!leading && (/*#__PURE__*/React.createElement("div", {
+    className: className.stringify(classNames.leading, styled.leading.className),
+    style: styled.leading.style
+  }, leading)), /*#__PURE__*/React.createElement("input", _objectSpread(_objectSpread({
+    id: id,
     value: _value,
-    className: className.stringify(classNames.input, styled.input.className),
+    className: className.stringify(classNames.input, inputClassName, styled.input.className),
     style: styled.input.style,
     type: type,
     ref: inputRef,
     "aria-invalid": invalid,
     disabled: disabled,
     onChange: inputEvents.change,
-    onClick: inputEvents.click,
     maxLength: maxLength
-  }, inputProps), focusProps)), trailing);
+  }, inputProps), focusProps)), /*#__PURE__*/React.createElement("div", {
+    className: className.stringify(classNames.outline, styled.outline.className),
+    style: styled.outline.style
+  }, /*#__PURE__*/React.createElement("div", {
+    className: className.stringify(classNames.outlineLeading, styled.outlineLeading.className),
+    style: styled.outlineLeading.style
+  }), /*#__PURE__*/React.createElement("div", {
+    className: className.stringify(classNames.outlineNotch, styled.outlineNotch.className),
+    style: styled.outlineNotch.style
+  }, hasLabel && (/*#__PURE__*/React.createElement("label", {
+    htmlFor: id,
+    className: className.stringify(styled.floatingLabel.className)
+  }, label))), /*#__PURE__*/React.createElement("div", {
+    className: className.stringify(classNames.outlineTrailing, styled.outlineTrailing.className),
+    style: styled.outlineTrailing.style
+  })), !!trailing && (/*#__PURE__*/React.createElement("div", {
+    className: className.stringify(classNames.trailing, styled.trailing.className),
+    style: styled.trailing.style
+  }, trailing)));
 });
 
 exports.default = Input;
-exports.styles = styles;

package/dist/components/input/input.d.ts

@@ -1,56 +1,9 @@
 import React from "react";
 import type { InputProps, InputRef } from "../../types/input";
-export declare const styles: Readonly<{
-    readonly inputor: Readonly<{
-        readonly display: import("@stylexjs/stylex").StyleXClassNameFor<"display", "inline-flex">;
-        readonly alignItems: import("@stylexjs/stylex").StyleXClassNameFor<"alignItems", "center">;
-        readonly cursor: import("@stylexjs/stylex").StyleXClassNameFor<"cursor", "text">;
-        readonly borderRadius: import("@stylexjs/stylex").StyleXClassNameFor<"borderRadius", string>;
-        readonly verticalAlign: import("@stylexjs/stylex").StyleXClassNameFor<"verticalAlign", "bottom">;
-        readonly outline: import("@stylexjs/stylex").StyleXClassNameFor<"outline", string>;
-        readonly minHeight: import("@stylexjs/stylex").StyleXClassNameFor<"minHeight", string>;
-        readonly minWidth: import("@stylexjs/stylex").StyleXClassNameFor<"minWidth", string>;
-        readonly width: import("@stylexjs/stylex").StyleXClassNameFor<"width", string>;
-        readonly boxShadow: import("@stylexjs/stylex").StyleXClassNameFor<"boxShadow", `0px 0px 0px ${import("@stylexjs/stylex").StyleXVar<string>} var(--color-outline) inset`>;
-        readonly boxSizing: import("@stylexjs/stylex").StyleXClassNameFor<"boxSizing", "border-box">;
-        readonly margin: import("@stylexjs/stylex").StyleXClassNameFor<"margin", string>;
-        readonly paddingBlock: import("@stylexjs/stylex").StyleXClassNameFor<"paddingBlock", string>;
-        readonly paddingInline: import("@stylexjs/stylex").StyleXClassNameFor<"paddingInline", string>;
-        readonly transitionProperty: import("@stylexjs/stylex").StyleXClassNameFor<"transitionProperty", "box-shadow">;
-        readonly transitionDuration: import("@stylexjs/stylex").StyleXClassNameFor<"transitionDuration", string>;
-        readonly willChange: import("@stylexjs/stylex").StyleXClassNameFor<"willChange", "box-shadow, transform">;
-        readonly ":focus-within": import("@stylexjs/stylex").StyleXClassNameFor<":focus-within", {
-            readonly boxShadow: `0px 0px 0px ${import("@stylexjs/stylex").StyleXVar<string>} var(--color-primary) inset`;
-        }>;
-    }>;
-    readonly invalid: Readonly<{
-        readonly boxShadow: import("@stylexjs/stylex").StyleXClassNameFor<"boxShadow", `0px 0px 0px ${import("@stylexjs/stylex").StyleXVar<string>} var(--color-error) inset`>;
-        readonly ":focus-within": import("@stylexjs/stylex").StyleXClassNameFor<":focus-within", {
-            readonly boxShadow: null;
-        }>;
-    }>;
-    readonly input: Readonly<{
-        readonly lineHeight: import("@stylexjs/stylex").StyleXClassNameFor<"lineHeight", "inherit">;
-        readonly fontSize: import("@stylexjs/stylex").StyleXClassNameFor<"fontSize", "inherit">;
-        readonly padding: import("@stylexjs/stylex").StyleXClassNameFor<"padding", string>;
-        readonly borderWidth: import("@stylexjs/stylex").StyleXClassNameFor<"borderWidth", string>;
-        readonly backgroundColor: import("@stylexjs/stylex").StyleXClassNameFor<"backgroundColor", "transparent">;
-        readonly outline: import("@stylexjs/stylex").StyleXClassNameFor<"outline", string>;
-        readonly minWidth: import("@stylexjs/stylex").StyleXClassNameFor<"minWidth", string>;
-        readonly height: import("@stylexjs/stylex").StyleXClassNameFor<"height", string>;
-        readonly flex: import("@stylexjs/stylex").StyleXClassNameFor<"flex", 1>;
-    }>;
-    readonly disabled: Readonly<{
-        readonly backgroundColor: import("@stylexjs/stylex").StyleXClassNameFor<"backgroundColor", "var(--color-on-surface-opacity-08)">;
-        readonly color: import("@stylexjs/stylex").StyleXClassNameFor<"color", "var(--color-on-surface-opacity-38)">;
-        readonly boxShadow: import("@stylexjs/stylex").StyleXClassNameFor<"boxShadow", `0px 0px 0px ${import("@stylexjs/stylex").StyleXVar<string>} var(--color-on-surface-opacity-38) inset`>;
-    }>;
-}>;
 /**
  * @author murukal
- *
- * @description
- * input component
+ * @zh 输入组件
+ * @en Input component
  */
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>>;
 export default Input;

package/dist/components/input/input.mjs

@@ -2,9 +2,10 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import styles, { textFieldMarker } from './styles.stylex.mjs';
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
-import { useInputEvents, useInputorEvents } from './hooks.mjs';
-import { useControlledState, useFocus } from '@aiszlab/relax';
+import { useInputEvents } from './hooks.mjs';
+import { useIdentity, useControlledState, useFocus } from '@aiszlab/relax';
 import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { OPACITY } from '../theme/tokens.stylex.mjs';
 import { useClassNames } from '../../hooks/use-class-names.mjs';
@@ -13,63 +14,20 @@ import { CLASS_NAMES } from './context.mjs';
 import { $body } from '../theme/theme.mjs';
 import { useThemeColorVars } from '../../hooks/use-theme-color-vars.mjs';
 
-var _excluded = ["className", "style", "type", "invalid", "disabled", "maxLength", "value", "onBlur", "onChange", "onClick", "onFocus", "leading", "trailing"];
-var styles = {
-  inputor: {
-    k1xSpc: "musaex-3nfvp2",
-    kGNEyG: "musaex-6s0dn4",
-    kkrTdU: "musaex-1ed109x",
-    kaIpWk: "musaex-db68te",
-    kXLuUW: "musaex-3ajldb",
-    kI3sdo: "musaex-4fx59i",
-    kAzted: "musaex-epu74c",
-    k7Eaqz: "musaex-1rdiejn",
-    kzqmXN: "musaex-92755x",
-    kGVxlE: "musaex-7u4mnu",
-    kB7OPa: "musaex-9f619",
-    kogj98: "musaex-q3gua8",
-    k8WAf4: "musaex-11owsmz",
-    kg3NbH: "musaex-81lxrv",
-    k1ekBW: "musaex-kdsq27",
-    kIyJzY: "musaex-1ptezny",
-    k6sLGO: "musaex-1o9dqaq",
-    knuKkz: "musaex-8pombj",
-    $$css: true
-  },
-  invalid: {
-    kGVxlE: "musaex-4ms1xy",
-    knuKkz: null,
-    $$css: true
-  },
-  input: {
-    kLWn49: "musaex-15bjb6t",
-    kGuDYH: "musaex-1qlqyl8",
-    kmVPX3: "musaex-1n775ky",
-    kMzoRj: "musaex-k59kd",
-    kWkggS: "musaex-jbqb8w",
-    kI3sdo: "musaex-4fx59i",
-    k7Eaqz: "musaex-1rdiejn",
-    kZKoxP: "musaex-kyvkcq",
-    kUk6DE: "musaex-98rzlu",
-    $$css: true
-  },
-  disabled: {
-    kWkggS: "musaex-1fbjual",
-    kMwMTN: "musaex-1ldep6k",
-    kGVxlE: "musaex-yb4mll",
-    $$css: true
-  }
-};
+var _excluded = ["className", "style", "type", "variant", "shaped", "invalid", "disabled", "maxLength", "value", "onBlur", "onChange", "onClick", "onFocus", "leading", "trailing", "label", "inputClassName"],
+  _excluded2 = ["click"];
 /**
  * @author murukal
- *
- * @description
- * input component
+ * @zh 输入组件
+ * @en Input component
  */
 var Input = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
     style = _ref.style,
-    type = _ref.type,
+    type = _ref.type;
+    _ref.variant;
+    var _ref$shaped = _ref.shaped,
+    shaped = _ref$shaped === void 0 ? false : _ref$shaped,
     _ref$invalid = _ref.invalid,
     invalid = _ref$invalid === void 0 ? false : _ref$invalid,
     disabled = _ref.disabled,
@@ -81,10 +39,18 @@ var Input = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onFocus = _ref.onFocus,
     leading = _ref.leading,
     trailing = _ref.trailing,
+    label = _ref.label,
+    inputClassName = _ref.inputClassName,
     inputProps = _objectWithoutProperties(_ref, _excluded);
+  var inputorRef = useRef(null);
   var inputRef = useRef(null);
   var classNames = useClassNames(CLASS_NAMES);
-  var _themeColorVars = useThemeColorVars(["primary", "outline", "error", ["on-surface", OPACITY.thickest], ["on-surface", OPACITY.thin]]);
+  var hasPlaceholder = !!inputProps.placeholder;
+  var hasLabel = !!label;
+  var _useIdentity = useIdentity(),
+    _useIdentity2 = _slicedToArray(_useIdentity, 1),
+    id = _useIdentity2[0];
+  var _themeColorVars = useThemeColorVars(["primary", "outline", "error", "surface-container-high", "on-surface-variant", ["on-surface", OPACITY.thickest], ["on-surface", OPACITY.medium], ["on-surface", OPACITY.thin]]);
   // controlled value
   var _useControlledState = useControlledState(valueInProps, {
       defaultState: ""
@@ -93,6 +59,7 @@ var Input = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _value = _useControlledState2[0],
     _setValue = _useControlledState2[1];
   useImperativeHandle(ref, function () {
+    var _inputorRef$current;
     return {
       focus: function focus() {
         var _inputRef$current;
@@ -106,23 +73,26 @@ var Input = /*#__PURE__*/forwardRef(function (_ref, ref) {
         var _inputRef$current3;
         (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 || _inputRef$current3.select();
       },
+      getBoundingClientRect: function getBoundingClientRect() {
+        return inputorRef.current.getBoundingClientRect();
+      },
+      contextElement: (_inputorRef$current = inputorRef.current) !== null && _inputorRef$current !== void 0 ? _inputorRef$current : undefined,
       getValue: function getValue() {
-        return _value;
+        var _inputRef$current$val, _inputRef$current4;
+        return (_inputRef$current$val = (_inputRef$current4 = inputRef.current) === null || _inputRef$current4 === void 0 ? void 0 : _inputRef$current4.value) !== null && _inputRef$current$val !== void 0 ? _inputRef$current$val : "";
       }
     };
-  });
+  }, []);
   // input events
-  var inputEvents = useInputEvents({
-    setValue: _setValue,
-    onBlur: onBlur,
-    onChange: onChange,
-    onClick: onClick,
-    onFocus: onFocus
-  });
-  // inputor events
-  var inputorEvents = useInputorEvents({
-    inputRef: inputRef
-  });
+  var _useInputEvents = useInputEvents({
+      setValue: _setValue,
+      onBlur: onBlur,
+      onChange: onChange,
+      onClick: onClick,
+      onFocus: onFocus
+    }),
+    click = _useInputEvents.click,
+    inputEvents = _objectWithoutProperties(_useInputEvents, _excluded2);
   // is focused
   var _useFocus = useFocus({
       onBlur: inputEvents.blur,
@@ -132,29 +102,63 @@ var Input = /*#__PURE__*/forwardRef(function (_ref, ref) {
     isFocused = _useFocus2[0],
     focusProps = _useFocus2[1];
   var styled = {
-    inputor: props($body.medium, styles.inputor, invalid && styles.invalid, disabled && styles.disabled),
-    input: {
-      className: "musaex-15bjb6t musaex-1qlqyl8 musaex-1n775ky musaex-k59kd musaex-jbqb8w musaex-4fx59i musaex-1rdiejn musaex-kyvkcq musaex-98rzlu"
-    }
+    root: props($body.medium, styles.root.base, disabled && styles.root.disabled, !disabled && textFieldMarker),
+    input: props(styles.input.base, !!leading && styles.input.hasLeading, !!trailing && styles.input.hasTrailing, disabled && styles.input.disabled),
+    leading: props(styles.leading.base),
+    trailing: props(styles.trailing.base),
+    outline: props(styles.outline.base),
+    outlineLeading: props(styles.outlineLeading.base, disabled && styles.outlineLeading.disabled, invalid && styles.outlineLeading.invalid, shaped && styles.outlineLeading.shaped),
+    outlineNotch: props(styles.outlineNotch.base, $body.small, hasLabel && styles.outlineNotch.withLabel, hasLabel && (hasPlaceholder || !!_value) && styles.outlineNotch.withLabelAndPlaceholder, disabled && styles.outlineNotch.disabled, invalid && styles.outlineNotch.invalid),
+    outlineTrailing: props(styles.outlineTrailing.base, disabled && styles.outlineTrailing.disabled, invalid && styles.outlineTrailing.invalid, shaped && styles.outlineTrailing.shaped),
+    floatingLabel: props(styles.floatingLabel.base, (hasPlaceholder || !!_value) && styles.floatingLabel.placeholder, disabled && styles.floatingLabel.disabled, invalid && styles.floatingLabel.invalid)
   };
-  return /*#__PURE__*/React.createElement("span", _objectSpread({
-    className: stringify(classNames.inputor, _defineProperty(_defineProperty({}, classNames.focused, isFocused), classNames.invalid, !!invalid), className, styled.inputor.className),
-    style: _objectSpread(_objectSpread(_objectSpread({}, styled.inputor.style), style), _themeColorVars),
-    onClick: inputorEvents.click
+  return /*#__PURE__*/React.createElement("div", _objectSpread(_objectSpread({
+    ref: inputorRef,
+    className: stringify(classNames.inputor, _defineProperty(_defineProperty({}, classNames.focused, isFocused), classNames.invalid, !!invalid), className, styled.root.className),
+    style: _objectSpread(_objectSpread(_objectSpread({}, styled.root.style), style), _themeColorVars)
   }, !disabled && {
     tabIndex: -1
-  }), leading, /*#__PURE__*/React.createElement("input", _objectSpread(_objectSpread({
+  }), {}, {
+    onFocus: function onFocus(event) {
+      if (event.target === event.currentTarget) {
+        var _inputRef$current5;
+        (_inputRef$current5 = inputRef.current) === null || _inputRef$current5 === void 0 || _inputRef$current5.focus();
+      }
+    },
+    onClick: click
+  }), !!leading && (/*#__PURE__*/React.createElement("div", {
+    className: stringify(classNames.leading, styled.leading.className),
+    style: styled.leading.style
+  }, leading)), /*#__PURE__*/React.createElement("input", _objectSpread(_objectSpread({
+    id: id,
     value: _value,
-    className: stringify(classNames.input, styled.input.className),
+    className: stringify(classNames.input, inputClassName, styled.input.className),
     style: styled.input.style,
     type: type,
     ref: inputRef,
     "aria-invalid": invalid,
     disabled: disabled,
     onChange: inputEvents.change,
-    onClick: inputEvents.click,
     maxLength: maxLength
-  }, inputProps), focusProps)), trailing);
+  }, inputProps), focusProps)), /*#__PURE__*/React.createElement("div", {
+    className: stringify(classNames.outline, styled.outline.className),
+    style: styled.outline.style
+  }, /*#__PURE__*/React.createElement("div", {
+    className: stringify(classNames.outlineLeading, styled.outlineLeading.className),
+    style: styled.outlineLeading.style
+  }), /*#__PURE__*/React.createElement("div", {
+    className: stringify(classNames.outlineNotch, styled.outlineNotch.className),
+    style: styled.outlineNotch.style
+  }, hasLabel && (/*#__PURE__*/React.createElement("label", {
+    htmlFor: id,
+    className: stringify(styled.floatingLabel.className)
+  }, label))), /*#__PURE__*/React.createElement("div", {
+    className: stringify(classNames.outlineTrailing, styled.outlineTrailing.className),
+    style: styled.outlineTrailing.style
+  })), !!trailing && (/*#__PURE__*/React.createElement("div", {
+    className: stringify(classNames.trailing, styled.trailing.className),
+    style: styled.trailing.style
+  }, trailing)));
 });
 
-export { Input as default, styles };
+export { Input as default };