@mirohq/design-system-input 0.2.9 → 0.2.11

package/dist/module.js

@@ -1,183 +1,9 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import React, { createContext, useRef, useState, useContext, useEffect } from 'react';
-import { booleanify, addPropsToChildren, mergeRefs, stringAttrValue, booleanishAttrValue } from '@mirohq/design-system-utils';
-import { isIconComponent } from '@mirohq/design-system-base-icon';
-import { useLayoutEffect } from '@mirohq/design-system-use-layout-effect';
-import { styled } from '@mirohq/design-system-stitches';
-import { Primitive } from '@mirohq/design-system-primitive';
-import { Tooltip } from '@mirohq/design-system-tooltip';
-import { BaseButton } from '@mirohq/design-system-base-button';
-import { focus } from '@mirohq/design-system-styles';
-import { IconCross, IconExclamationPointCircle, IconCheckMark, IconLockClosed, IconEyeOpen, IconEyeClosed, IconEnvelope, IconMagnifyingGlass } from '@mirohq/design-system-icons';
+import React, { useEffect, useRef, useState } from 'react';
+import { useInputContext, BaseInput } from '@mirohq/design-system-base-input';
+import { IconCross, IconLockClosed, IconEyeOpen, IconEyeClosed, IconEnvelope, IconMagnifyingGlass } from '@mirohq/design-system-icons';
+import { booleanify, stringAttrValue, mergeRefs } from '@mirohq/design-system-utils';
 import { useFormFieldContext, FloatingLabel } from '@mirohq/design-system-base-form';
-import { usePress } from '@mirohq/design-system-use-press';
-import { useHover } from '@react-aria/interactions';
-import { mergeProps } from '@react-aria/utils';
-import { styles } from '@mirohq/design-system-base-input';
-import { useAriaDisabled } from '@mirohq/design-system-use-aria-disabled';
-
-const StyledIconSlot = styled(Primitive.div, {
-  order: 1,
-  alignContent: "center",
-  display: "flex",
-  justifyContent: "center",
-  color: "$icon-neutrals-subtle",
-  "& svg, & img": {
-    pointerEvents: "none"
-  },
-  variants: {
-    disabled: {
-      true: {
-        "& svg": {
-          color: "$icon-neutrals-disabled"
-        }
-      }
-    }
-  }
-});
-
-const InputContext = createContext({});
-const InputProvider = ({
-  children,
-  disabled,
-  "aria-disabled": ariaDisabled,
-  readOnly,
-  required,
-  valid,
-  ...restProps
-}) => {
-  const actionButtonRef = useRef(null);
-  const inputRef = useRef(null);
-  const [focused, setFocused] = useState(false);
-  const [hovered, setHovered] = useState(false);
-  const [hasIconSlot, setHasIconSlot] = useState(false);
-  const editable = !booleanify(disabled) && !booleanify(ariaDisabled) && !booleanify(readOnly);
-  return /* @__PURE__ */ jsx(
-    InputContext.Provider,
-    {
-      value: {
-        ...restProps,
-        setFocused,
-        setHovered,
-        setHasIconSlot,
-        hasIconSlot,
-        hovered,
-        focused,
-        disabled,
-        "aria-disabled": ariaDisabled,
-        readOnly,
-        editable,
-        inputRef,
-        actionButtonRef,
-        required,
-        valid
-      },
-      children
-    }
-  );
-};
-const useInputContext = () => useContext(InputContext);
-
-const IconSlot = React.forwardRef(({ children, ...restProps }, forwardRef) => {
-  const {
-    "aria-disabled": ariaDisabled,
-    disabled,
-    setHasIconSlot
-  } = useInputContext();
-  const formattedChildren = addPropsToChildren(children, isIconComponent, {
-    size: "small",
-    weight: "thin",
-    "aria-hidden": true
-  });
-  useLayoutEffect(() => {
-    setHasIconSlot(true);
-    return () => setHasIconSlot(false);
-  }, [setHasIconSlot]);
-  return /* @__PURE__ */ jsx(
-    StyledIconSlot,
-    {
-      ...restProps,
-      disabled: booleanify(disabled != null ? disabled : ariaDisabled),
-      ref: forwardRef,
-      children: formattedChildren
-    }
-  );
-});
-IconSlot.displayName = "IconSlot";
-
-const StyledActionButton = styled(BaseButton, {
-  backgroundColor: "transparent",
-  color: "$icon-neutrals-subtle",
-  display: "flex",
-  justifyContent: "center",
-  order: 3,
-  padding: "6px",
-  square: "$7",
-  "& svg:not([data-icon-component]), & img:not([data-icon-component])": {
-    square: "$icon-200",
-    "--svg-stroke-width": "$stroke-width$thin"
-  },
-  ...focus.css({
-    boxShadow: "$focus-small"
-  }),
-  "&:hover": {
-    backgroundColor: "$background-neutrals-subtle-hover"
-  },
-  "&:active, &[data-pressed]": {
-    backgroundColor: "$background-neutrals-subtle-active"
-  },
-  variants: {
-    readOnlyAppearance: {
-      true: {
-        "& svg[data-icon-component], & img[data-icon-component]": {
-          color: "$icon-neutrals-subtle"
-        }
-      }
-    },
-    disableAppearance: {
-      true: {
-        color: "$icon-neutrals-disabled"
-      }
-    }
-  }
-});
-
-const ActionButton = React.forwardRef(({ "aria-label": ariaLabel, label, children, ...restProps }, forwardRef) => {
-  const {
-    valid,
-    hovered,
-    editable,
-    "aria-disabled": ariaDisabled,
-    disabled,
-    readOnly,
-    actionButtonRef
-  } = useInputContext();
-  const showInputSlot = valid === void 0 || booleanify(hovered);
-  let formattedChildren = children;
-  formattedChildren = addPropsToChildren(children, isIconComponent, {
-    "aria-hidden": true
-  });
-  const hasPressEvent = Object.keys(restProps).some(
-    (key) => key.startsWith("onPress")
-  );
-  const customDisabled = restProps.disabled;
-  return /* @__PURE__ */ jsx(Fragment, { children: showInputSlot && /* @__PURE__ */ jsxs(Tooltip, { children: [
-    /* @__PURE__ */ jsx(Tooltip.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
-      StyledActionButton,
-      {
-        type: "button",
-        ...restProps,
-        "aria-label": ariaLabel != null ? ariaLabel : label,
-        disabled: hasPressEvent ? customDisabled : customDisabled != null ? customDisabled : !editable,
-        disableAppearance: hasPressEvent ? !booleanify(readOnly) && customDisabled : booleanify(disabled != null ? disabled : ariaDisabled),
-        readOnlyAppearance: readOnly,
-        ref: mergeRefs([forwardRef, actionButtonRef]),
-        children: formattedChildren
-      }
-    ) }),
-    /* @__PURE__ */ jsx(Tooltip.Content, { children: label })
-  ] }) });
-});
 
 const createSyntheticChangeEvent = (inputRef) => {
   const event = {
@@ -214,7 +40,7 @@ const ClearAction = ({
   if (!clearable)
     return /* @__PURE__ */ jsx(Fragment, {});
   return /* @__PURE__ */ jsx(
-    ActionButton,
+    BaseInput.ActionButton,
     {
       label: clearLabel,
       disabled: booleanify((_a = disabled != null ? disabled : ariaDisabled) != null ? _a : readOnly),
@@ -233,367 +59,6 @@ const ClearAction = ({
   );
 };
 
-const StyledIconExclamationPointCircle = styled(
-  IconExclamationPointCircle,
-  {
-    color: "$icon-danger"
-  }
-);
-const StyledIconCheckMark = styled(IconCheckMark, {
-  color: "$icon-success"
-});
-const StyledValidityBox = styled(Primitive.div, {
-  order: 3,
-  display: "flex",
-  alignItems: "center",
-  padding: "6px"
-});
-const StyledBaseInput = styled("div", {
-  position: "relative",
-  alignItems: "center",
-  display: "inline-flex",
-  height: "max-content",
-  boxSizing: "border-box",
-  width: "100%",
-  ...styles.variants.idle,
-  variants: {
-    hovered: {
-      true: {},
-      false: {}
-    },
-    focused: {
-      true: styles.variants.focused,
-      false: {}
-    },
-    valid: {
-      true: {},
-      false: {}
-    },
-    readOnly: {
-      true: styles.variants.readOnly,
-      false: {}
-    },
-    disabled: {
-      true: styles.variants.disabled,
-      false: {}
-    },
-    ariaDisabled: {
-      true: styles.variants.disabled,
-      false: {}
-    },
-    size: {
-      large: {
-        height: "$10",
-        padding: "0 $100 ",
-        ["& ".concat(StyledIconSlot)]: {
-          paddingRight: "$50"
-        },
-        ["& ".concat(StyledActionButton, ", & ").concat(StyledValidityBox)]: {
-          marginLeft: "$50"
-        },
-        ["& ".concat(StyledValidityBox)]: {
-          paddingRight: "6px"
-        }
-      },
-      "x-large": {
-        height: "$12",
-        padding: "0 $150",
-        ["& ".concat(StyledIconSlot)]: {
-          paddingRight: "$100"
-        },
-        ["& ".concat(StyledActionButton, ", & ").concat(StyledValidityBox)]: {
-          marginLeft: "$100"
-        },
-        ["& ".concat(StyledValidityBox)]: {
-          paddingRight: "6px"
-        }
-      }
-    }
-  },
-  compoundVariants: [
-    /** Idle states */
-    {
-      valid: false,
-      readOnly: false,
-      disabled: false,
-      ariaDisabled: false,
-      css: styles.variants.invalid.idle
-    },
-    {
-      valid: true,
-      readOnly: false,
-      disabled: false,
-      ariaDisabled: false,
-      css: styles.variants.valid.idle
-    },
-    /** Focus States */
-    {
-      focused: true,
-      readOnly: false,
-      css: {
-        borderColor: styles.variants.focused.borderColor
-      }
-    },
-    {
-      focused: true,
-      readOnly: false,
-      valid: false,
-      disabled: false,
-      ariaDisabled: false,
-      css: styles.variants.invalid.focused
-    },
-    {
-      focused: true,
-      readOnly: false,
-      valid: true,
-      disabled: false,
-      ariaDisabled: false,
-      css: styles.variants.valid.focused
-    },
-    /** Hover states */
-    {
-      hovered: true,
-      disabled: false,
-      ariaDisabled: false,
-      readOnly: false,
-      css: styles.variants.hovered
-    },
-    {
-      hovered: true,
-      focused: false,
-      valid: false,
-      readOnly: false,
-      disabled: false,
-      ariaDisabled: false,
-      css: styles.variants.invalid.hovered
-    },
-    {
-      hovered: true,
-      focused: false,
-      valid: true,
-      readOnly: false,
-      disabled: false,
-      ariaDisabled: false,
-      css: styles.variants.valid.hovered
-    }
-  ],
-  defaultVariants: {
-    size: "large"
-  }
-});
-
-const disabledAndReadonlySelectors = ':read-only, :disabled, [aria-disabled="true"], [data-disabled]';
-const StyledInput = styled(Primitive.input, {
-  all: "unset",
-  background: "transparent",
-  color: "$text-neutrals",
-  width: "100%",
-  borderRadius: "$50",
-  order: 2,
-  padding: "0 $50",
-  height: "100%",
-  "&::placeholder": {
-    fontStyle: "italic"
-  },
-  ["&:not(".concat(disabledAndReadonlySelectors, ")::placeholder")]: styles.base.placeholder,
-  "&:read-only": {
-    color: styles.variants.readOnly.color
-  },
-  "&:disabled, &[aria-disabled=true], &[data-disabled]": styles.base.disabled
-});
-
-const Input$1 = React.forwardRef(
-  ({
-    id,
-    "aria-describedby": ariaDescribedBy,
-    "aria-invalid": ariaInvalid,
-    ...restProps
-  }, forwardRef) => {
-    const {
-      "aria-disabled": ariaDisabled,
-      disabled,
-      setFocused,
-      inputRef,
-      required,
-      readOnly,
-      onChange
-    } = useInputContext();
-    const {
-      formElementId,
-      ariaDescribedBy: formFieldContextDescribedBy,
-      ariaInvalid: formFieldAriaInvalid,
-      formElementRef,
-      setRequired,
-      setReadOnly,
-      setDisabled,
-      setAriaDisabled
-    } = useFormFieldContext();
-    const { onBlur, onFocus, ...elementProps } = useAriaDisabled({
-      ...restProps,
-      ariaDisabled
-    });
-    useEffect(() => {
-      setRequired == null ? void 0 : setRequired(required);
-      setReadOnly == null ? void 0 : setReadOnly(readOnly);
-      setDisabled == null ? void 0 : setDisabled(disabled);
-      setAriaDisabled == null ? void 0 : setAriaDisabled(ariaDisabled);
-    }, [
-      disabled,
-      ariaDisabled,
-      readOnly,
-      required,
-      ariaInvalid,
-      setRequired,
-      setReadOnly,
-      setDisabled,
-      setAriaDisabled
-    ]);
-    const onFocusHandler = React.useCallback(
-      (e) => {
-        setFocused(true);
-        onFocus == null ? void 0 : onFocus(e);
-      },
-      [setFocused, onFocus]
-    );
-    const onBlurHandler = React.useCallback(
-      (e) => {
-        setFocused(false);
-        onBlur == null ? void 0 : onBlur(e);
-      },
-      [setFocused, onBlur]
-    );
-    return /* @__PURE__ */ jsx(
-      StyledInput,
-      {
-        ...elementProps,
-        id: id != null ? id : formElementId,
-        readOnly,
-        "aria-describedby": stringAttrValue(
-          ariaDescribedBy,
-          formFieldContextDescribedBy
-        ),
-        "aria-invalid": ariaInvalid != null ? ariaInvalid : formFieldAriaInvalid,
-        disabled: disabled === true || void 0,
-        required: required === true || void 0,
-        onFocus: onFocusHandler,
-        onBlur: onBlurHandler,
-        onChange,
-        ref: mergeRefs([inputRef, formElementRef, forwardRef])
-      }
-    );
-  }
-);
-
-const Root = React.forwardRef(({ children, size, placeholder, role, ...restProps }, forwardRef) => {
-  var _a, _b, _c;
-  const ref = useRef(null);
-  const {
-    valid: inputValid,
-    "aria-disabled": ariaDisabled,
-    disabled,
-    readOnly,
-    focused,
-    setHovered,
-    inputRef,
-    actionButtonRef,
-    setFocused,
-    hasIconSlot
-  } = useInputContext();
-  const { hoverProps, isHovered: hovered } = useHover({
-    onHoverChange: setHovered
-  });
-  const { pressProps } = usePress({
-    onPressStart: (e) => {
-      const { target } = e.originalEvent;
-      const shouldPrevent = document.activeElement === inputRef.current && target !== inputRef.current;
-      if (shouldPrevent) {
-        e.originalEvent.preventDefault();
-      }
-    },
-    onPressEnd: (e) => {
-      var _a2, _b2;
-      const { target } = e.originalEvent;
-      const isActionButton = target === actionButtonRef.current || ((_a2 = actionButtonRef.current) == null ? void 0 : _a2.contains(target)) === true;
-      const shouldFocusInput = !isActionButton && !booleanify(disabled) && !booleanify(focused);
-      if (shouldFocusInput) {
-        (_b2 = inputRef.current) == null ? void 0 : _b2.focus();
-        setFocused(true);
-      }
-    },
-    preventFocusOnPress: "auto"
-  });
-  const ariaDisabledOrDisabled = booleanify(ariaDisabled) || booleanify(disabled);
-  const inputValue = (_c = (_b = (_a = inputRef.current) == null ? void 0 : _a.value) != null ? _b : restProps.value) != null ? _c : restProps.defaultValue;
-  const {
-    label,
-    shouldUseFloatingLabel,
-    valid: formFieldValid
-  } = useFormFieldContext();
-  const floatingLabel = placeholder !== void 0 || inputValue !== void 0 && inputValue !== "" || focused;
-  const useFloatingLabel = shouldUseFloatingLabel && role !== "combobox";
-  const valid = formFieldValid != null ? formFieldValid : inputValid;
-  const showValidityIcon = !booleanify(readOnly) && !ariaDisabledOrDisabled && !hovered && !focused && valid !== void 0;
-  const ValidIcon = valid === true ? StyledIconCheckMark : StyledIconExclamationPointCircle;
-  return /* @__PURE__ */ jsxs(
-    StyledBaseInput,
-    {
-      ...mergeProps(restProps, hoverProps, pressProps),
-      "data-invalid": booleanishAttrValue(valid === false),
-      "data-valid": booleanishAttrValue(valid === true),
-      "data-form-element": role !== "combobox" ? "input" : void 0,
-      ref: mergeRefs([ref, forwardRef]),
-      size,
-      hovered,
-      focused,
-      valid,
-      disabled: booleanify(disabled),
-      ariaDisabled: booleanify(ariaDisabled),
-      readOnly: booleanify(readOnly),
-      children: [
-        useFloatingLabel && /* @__PURE__ */ jsx(
-          FloatingLabel,
-          {
-            floating: floatingLabel,
-            css: !floatingLabel && hasIconSlot ? (
-              // icon size + input padding
-              {
-                transform: "translate(calc($sizes$icon-200 + $space$50 - 1px), -1px)"
-              }
-            ) : floatingLabel ? { transform: "translateY(calc(-50% - 1px))" } : void 0,
-            size,
-            children: label
-          }
-        ),
-        children,
-        showValidityIcon && /* @__PURE__ */ jsx(StyledValidityBox, { children: /* @__PURE__ */ jsx(ValidIcon, { size: "small", weight: "thin" }) })
-      ]
-    }
-  );
-});
-const BaseInput = React.forwardRef(
-  ({
-    "aria-disabled": ariaDisabled,
-    disabled,
-    valid,
-    readOnly,
-    required,
-    onChange,
-    ...restProps
-  }, forwardRef) => /* @__PURE__ */ jsx(
-    InputProvider,
-    {
-      valid,
-      disabled,
-      "aria-disabled": ariaDisabled,
-      readOnly,
-      required,
-      onChange,
-      children: /* @__PURE__ */ jsx(Root, { ...restProps, ref: forwardRef })
-    }
-  )
-);
-BaseInput.Input = Input$1;
-
 const baseInputAllowedEvents = [
   "onMouseEnter",
   "onMouseLeave",
@@ -616,8 +81,9 @@ const baseInputAllowedEvents = [
   "onTouchMove",
   "onTouchMoveCapture"
 ];
-const useBaseInputProps = (allProps) => {
+const useBaseInputProps = (allProps, forwardRef) => {
   const {
+    // base-input props
     valid,
     "aria-disabled": ariaDisabled,
     readOnly,
@@ -626,16 +92,46 @@ const useBaseInputProps = (allProps) => {
     size,
     className,
     css,
-    // shared props
+    onChange,
+    "data-testid": dataTestId,
+    // input props
+    id,
+    "aria-describedby": ariaDescribedBy,
+    "aria-invalid": ariaInvalid,
+    // input & floatingLabel shared props
     placeholder,
     value,
     defaultValue,
-    role,
-    onChange,
     ...restProps
   } = allProps;
+  const {
+    formElementId,
+    formElementRef,
+    ariaDescribedBy: formFieldContextDescribedBy,
+    ariaInvalid: formFieldAriaInvalid,
+    valid: formFieldValid,
+    setRequired,
+    setReadOnly,
+    setDisabled,
+    setAriaDisabled
+  } = useFormFieldContext();
+  useEffect(() => {
+    setRequired == null ? void 0 : setRequired(required);
+    setReadOnly == null ? void 0 : setReadOnly(readOnly);
+    setDisabled == null ? void 0 : setDisabled(disabled);
+    setAriaDisabled == null ? void 0 : setAriaDisabled(ariaDisabled);
+  }, [
+    disabled,
+    ariaDisabled,
+    readOnly,
+    required,
+    setRequired,
+    setReadOnly,
+    setDisabled,
+    setAriaDisabled
+  ]);
   const baseInputProps = {
-    valid,
+    valid: formFieldValid != null ? formFieldValid : valid,
     "aria-disabled": ariaDisabled,
     readOnly,
     required,
@@ -643,17 +139,26 @@ const useBaseInputProps = (allProps) => {
     size,
     className,
     css,
+    onChange,
+    "data-testid": dataTestId
+  };
+  const inputProps = {
+    id: id != null ? id : formElementId,
+    "aria-describedby": stringAttrValue(
+      ariaDescribedBy,
+      formFieldContextDescribedBy
+    ),
+    "aria-invalid": ariaInvalid != null ? ariaInvalid : formFieldAriaInvalid,
     placeholder,
     value,
     defaultValue,
-    role,
-    onChange
+    ref: mergeRefs([formElementRef, forwardRef])
   };
-  const inputProps = {
+  const floatingLabelProps = {
     placeholder,
     value,
     defaultValue,
-    role
+    size
   };
   Object.entries(restProps).forEach(([key, value2]) => {
     if (baseInputAllowedEvents.includes(key)) {
@@ -662,9 +167,43 @@ const useBaseInputProps = (allProps) => {
       inputProps[key] = value2;
     }
   });
-  return { baseInputProps, inputProps };
+  return { baseInputProps, inputProps, floatingLabelProps };
+};
+
+const InputFloatingLabel = ({
+  placeholder,
+  value,
+  defaultValue,
+  size
+}) => {
+  var _a, _b, _c;
+  const { focused, inputRef, hasIconSlot } = useInputContext();
+  const inputValue = (_c = (_b = (_a = inputRef.current) == null ? void 0 : _a.value) != null ? _b : value) != null ? _c : defaultValue;
+  const { label, shouldUseFloatingLabel } = useFormFieldContext();
+  const floatingLabel = placeholder !== void 0 || inputValue !== void 0 && inputValue !== "" || focused;
+  if (!shouldUseFloatingLabel) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    FloatingLabel,
+    {
+      floating: floatingLabel,
+      css: !floatingLabel && hasIconSlot ? (
+        // icon size + input padding
+        {
+          transform: "translate(calc($sizes$icon-200 + $space$50 - 1px), -1px)"
+        }
+      ) : floatingLabel ? { transform: "translateY(calc(-50% - 1px))" } : void 0,
+      size,
+      children: label
+    }
+  );
 };
 
+const ActionButton = BaseInput.ActionButton;
+
+const IconSlot = BaseInput.IconSlot;
+
 const Input = React.forwardRef(
   ({ children, ...restProps }, forwardRef) => {
     const {
@@ -673,9 +212,10 @@ const Input = React.forwardRef(
       clearLabel,
       ...elementProps
     } = restProps;
-    const { baseInputProps, inputProps } = useBaseInputProps(elementProps);
+    const { baseInputProps, inputProps, floatingLabelProps } = useBaseInputProps(elementProps, forwardRef);
     return /* @__PURE__ */ jsxs(BaseInput, { ...baseInputProps, children: [
-      /* @__PURE__ */ jsx(BaseInput.Input, { ...inputProps, ref: forwardRef }),
+      /* @__PURE__ */ jsx(InputFloatingLabel, { ...floatingLabelProps }),
+      /* @__PURE__ */ jsx(BaseInput.Input, { ...inputProps }),
       children,
       /* @__PURE__ */ jsx(
         ClearAction,
@@ -706,8 +246,9 @@ const InputPassword = React.forwardRef(
     const inputRef = useRef(null);
     const [revealState, setRevealState] = useState(defaultReveal != null ? defaultReveal : false);
     const revealInternal = reveal != null ? reveal : revealState;
-    const { baseInputProps, inputProps } = useBaseInputProps(restProps);
+    const { baseInputProps, inputProps, floatingLabelProps } = useBaseInputProps(restProps, forwardRef);
     return /* @__PURE__ */ jsxs(BaseInput, { ...baseInputProps, children: [
+      /* @__PURE__ */ jsx(InputFloatingLabel, { ...floatingLabelProps }),
       /* @__PURE__ */ jsx(
         BaseInput.Input,
         {
@@ -717,9 +258,9 @@ const InputPassword = React.forwardRef(
         }
       ),
       children,
-      /* @__PURE__ */ jsx(IconSlot, { children: /* @__PURE__ */ jsx(IconLockClosed, {}) }),
+      /* @__PURE__ */ jsx(BaseInput.IconSlot, { children: /* @__PURE__ */ jsx(IconLockClosed, {}) }),
       /* @__PURE__ */ jsx(
-        ActionButton,
+        BaseInput.ActionButton,
         {
           label: revealInternal ? hideLabel : revealLabel,
           disabled: false,
@@ -749,9 +290,13 @@ const InputEmail = React.forwardRef(({ children, ...restProps }, forwardRef) =>
     clearLabel,
     ...elementProps
   } = restProps;
-  const { baseInputProps, inputProps } = useBaseInputProps(elementProps);
+  const { baseInputProps, inputProps, floatingLabelProps } = useBaseInputProps(
+    elementProps,
+    forwardRef
+  );
   return /* @__PURE__ */ jsxs(BaseInput, { ...baseInputProps, children: [
-    /* @__PURE__ */ jsx(BaseInput.Input, { type: "email", ...inputProps, ref: forwardRef }),
+    /* @__PURE__ */ jsx(InputFloatingLabel, { ...floatingLabelProps }),
+    /* @__PURE__ */ jsx(BaseInput.Input, { type: "email", ...inputProps }),
     children,
     /* @__PURE__ */ jsx(
       ClearAction,
@@ -762,7 +307,7 @@ const InputEmail = React.forwardRef(({ children, ...restProps }, forwardRef) =>
         value: inputProps.value
       }
     ),
-    /* @__PURE__ */ jsx(IconSlot, { children: /* @__PURE__ */ jsx(IconEnvelope, {}) })
+    /* @__PURE__ */ jsx(BaseInput.IconSlot, { children: /* @__PURE__ */ jsx(IconEnvelope, {}) })
   ] });
 });
 InputEmail.ActionButton = ActionButton;
@@ -774,8 +319,12 @@ const InputSearch = React.forwardRef(({ children, ...restProps }, forwardRef) =>
     clearLabel,
     ...elementProps
   } = restProps;
-  const { baseInputProps, inputProps } = useBaseInputProps(elementProps);
+  const { baseInputProps, inputProps, floatingLabelProps } = useBaseInputProps(
+    elementProps,
+    forwardRef
+  );
   return /* @__PURE__ */ jsxs(BaseInput, { ...baseInputProps, children: [
+    /* @__PURE__ */ jsx(InputFloatingLabel, { ...floatingLabelProps }),
     /* @__PURE__ */ jsx(BaseInput.Input, { ...inputProps, ref: forwardRef }),
     children,
     /* @__PURE__ */ jsx(
@@ -787,7 +336,7 @@ const InputSearch = React.forwardRef(({ children, ...restProps }, forwardRef) =>
         value: inputProps.value
       }
     ),
-    /* @__PURE__ */ jsx(IconSlot, { children: /* @__PURE__ */ jsx(IconMagnifyingGlass, {}) })
+    /* @__PURE__ */ jsx(BaseInput.IconSlot, { children: /* @__PURE__ */ jsx(IconMagnifyingGlass, {}) })
   ] });
 });
 InputSearch.ActionButton = ActionButton;