@mirohq/design-system-input 0.2.8 → 0.2.10

package/dist/main.js

@@ -4,189 +4,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var designSystemUtils = require('@mirohq/design-system-utils');
-var designSystemBaseIcon = require('@mirohq/design-system-base-icon');
-var designSystemUseLayoutEffect = require('@mirohq/design-system-use-layout-effect');
-var designSystemStitches = require('@mirohq/design-system-stitches');
-var designSystemPrimitive = require('@mirohq/design-system-primitive');
-var designSystemTooltip = require('@mirohq/design-system-tooltip');
-var designSystemBaseButton = require('@mirohq/design-system-base-button');
-var designSystemStyles = require('@mirohq/design-system-styles');
+var designSystemBaseInput = require('@mirohq/design-system-base-input');
 var designSystemIcons = require('@mirohq/design-system-icons');
+var designSystemUtils = require('@mirohq/design-system-utils');
 var designSystemBaseForm = require('@mirohq/design-system-base-form');
-var designSystemUsePress = require('@mirohq/design-system-use-press');
-var interactions = require('@react-aria/interactions');
-var utils = require('@react-aria/utils');
-var designSystemBaseInput = require('@mirohq/design-system-base-input');
-var designSystemUseAriaDisabled = require('@mirohq/design-system-use-aria-disabled');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const StyledIconSlot = designSystemStitches.styled(designSystemPrimitive.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 = React.createContext({});
-const InputProvider = ({
-  children,
-  disabled,
-  "aria-disabled": ariaDisabled,
-  readOnly,
-  required,
-  valid,
-  ...restProps
-}) => {
-  const actionButtonRef = React.useRef(null);
-  const inputRef = React.useRef(null);
-  const [focused, setFocused] = React.useState(false);
-  const [hovered, setHovered] = React.useState(false);
-  const [hasIconSlot, setHasIconSlot] = React.useState(false);
-  const editable = !designSystemUtils.booleanify(disabled) && !designSystemUtils.booleanify(ariaDisabled) && !designSystemUtils.booleanify(readOnly);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    InputContext.Provider,
-    {
-      value: {
-        ...restProps,
-        setFocused,
-        setHovered,
-        setHasIconSlot,
-        hasIconSlot,
-        hovered,
-        focused,
-        disabled,
-        "aria-disabled": ariaDisabled,
-        readOnly,
-        editable,
-        inputRef,
-        actionButtonRef,
-        required,
-        valid
-      },
-      children
-    }
-  );
-};
-const useInputContext = () => React.useContext(InputContext);
-
-const IconSlot = React__default["default"].forwardRef(({ children, ...restProps }, forwardRef) => {
-  const {
-    "aria-disabled": ariaDisabled,
-    disabled,
-    setHasIconSlot
-  } = useInputContext();
-  const formattedChildren = designSystemUtils.addPropsToChildren(children, designSystemBaseIcon.isIconComponent, {
-    size: "small",
-    weight: "thin",
-    "aria-hidden": true
-  });
-  designSystemUseLayoutEffect.useLayoutEffect(() => {
-    setHasIconSlot(true);
-    return () => setHasIconSlot(false);
-  }, [setHasIconSlot]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    StyledIconSlot,
-    {
-      ...restProps,
-      disabled: designSystemUtils.booleanify(disabled != null ? disabled : ariaDisabled),
-      ref: forwardRef,
-      children: formattedChildren
-    }
-  );
-});
-IconSlot.displayName = "IconSlot";
-
-const StyledActionButton = designSystemStitches.styled(designSystemBaseButton.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"
-  },
-  ...designSystemStyles.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__default["default"].forwardRef(({ "aria-label": ariaLabel, label, children, ...restProps }, forwardRef) => {
-  const {
-    valid,
-    hovered,
-    editable,
-    "aria-disabled": ariaDisabled,
-    disabled,
-    readOnly,
-    actionButtonRef
-  } = useInputContext();
-  const showInputSlot = valid === void 0 || designSystemUtils.booleanify(hovered);
-  let formattedChildren = children;
-  formattedChildren = designSystemUtils.addPropsToChildren(children, designSystemBaseIcon.isIconComponent, {
-    "aria-hidden": true
-  });
-  const hasPressEvent = Object.keys(restProps).some(
-    (key) => key.startsWith("onPress")
-  );
-  const customDisabled = restProps.disabled;
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: showInputSlot && /* @__PURE__ */ jsxRuntime.jsxs(designSystemTooltip.Tooltip, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(designSystemTooltip.Tooltip.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-      StyledActionButton,
-      {
-        type: "button",
-        ...restProps,
-        "aria-label": ariaLabel != null ? ariaLabel : label,
-        disabled: hasPressEvent ? customDisabled : customDisabled != null ? customDisabled : !editable,
-        disableAppearance: hasPressEvent ? !designSystemUtils.booleanify(readOnly) && customDisabled : designSystemUtils.booleanify(disabled != null ? disabled : ariaDisabled),
-        readOnlyAppearance: readOnly,
-        ref: designSystemUtils.mergeRefs([forwardRef, actionButtonRef]),
-        children: formattedChildren
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(designSystemTooltip.Tooltip.Content, { children: label })
-  ] }) });
-});
-
 const createSyntheticChangeEvent = (inputRef) => {
   const event = {
     target: inputRef.current,
@@ -218,11 +44,11 @@ const ClearAction = ({
     readOnly,
     inputRef,
     onChange
-  } = useInputContext();
+  } = designSystemBaseInput.useInputContext();
   if (!clearable)
     return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
   return /* @__PURE__ */ jsxRuntime.jsx(
-    ActionButton,
+    designSystemBaseInput.BaseInput.ActionButton,
     {
       label: clearLabel,
       disabled: designSystemUtils.booleanify((_a = disabled != null ? disabled : ariaDisabled) != null ? _a : readOnly),
@@ -241,367 +67,6 @@ const ClearAction = ({
   );
 };
 
-const StyledIconExclamationPointCircle = designSystemStitches.styled(
-  designSystemIcons.IconExclamationPointCircle,
-  {
-    color: "$icon-danger"
-  }
-);
-const StyledIconCheckMark = designSystemStitches.styled(designSystemIcons.IconCheckMark, {
-  color: "$icon-success"
-});
-const StyledValidityBox = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
-  order: 3,
-  display: "flex",
-  alignItems: "center",
-  padding: "6px"
-});
-const StyledBaseInput = designSystemStitches.styled("div", {
-  position: "relative",
-  alignItems: "center",
-  display: "inline-flex",
-  height: "max-content",
-  boxSizing: "border-box",
-  width: "100%",
-  ...designSystemBaseInput.styles.variants.idle,
-  variants: {
-    hovered: {
-      true: {},
-      false: {}
-    },
-    focused: {
-      true: designSystemBaseInput.styles.variants.focused,
-      false: {}
-    },
-    valid: {
-      true: {},
-      false: {}
-    },
-    readOnly: {
-      true: designSystemBaseInput.styles.variants.readOnly,
-      false: {}
-    },
-    disabled: {
-      true: designSystemBaseInput.styles.variants.disabled,
-      false: {}
-    },
-    ariaDisabled: {
-      true: designSystemBaseInput.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: designSystemBaseInput.styles.variants.invalid.idle
-    },
-    {
-      valid: true,
-      readOnly: false,
-      disabled: false,
-      ariaDisabled: false,
-      css: designSystemBaseInput.styles.variants.valid.idle
-    },
-    /** Focus States */
-    {
-      focused: true,
-      readOnly: false,
-      css: {
-        borderColor: designSystemBaseInput.styles.variants.focused.borderColor
-      }
-    },
-    {
-      focused: true,
-      readOnly: false,
-      valid: false,
-      disabled: false,
-      ariaDisabled: false,
-      css: designSystemBaseInput.styles.variants.invalid.focused
-    },
-    {
-      focused: true,
-      readOnly: false,
-      valid: true,
-      disabled: false,
-      ariaDisabled: false,
-      css: designSystemBaseInput.styles.variants.valid.focused
-    },
-    /** Hover states */
-    {
-      hovered: true,
-      disabled: false,
-      ariaDisabled: false,
-      readOnly: false,
-      css: designSystemBaseInput.styles.variants.hovered
-    },
-    {
-      hovered: true,
-      focused: false,
-      valid: false,
-      readOnly: false,
-      disabled: false,
-      ariaDisabled: false,
-      css: designSystemBaseInput.styles.variants.invalid.hovered
-    },
-    {
-      hovered: true,
-      focused: false,
-      valid: true,
-      readOnly: false,
-      disabled: false,
-      ariaDisabled: false,
-      css: designSystemBaseInput.styles.variants.valid.hovered
-    }
-  ],
-  defaultVariants: {
-    size: "large"
-  }
-});
-
-const disabledAndReadonlySelectors = ':read-only, :disabled, [aria-disabled="true"], [data-disabled]';
-const StyledInput = designSystemStitches.styled(designSystemPrimitive.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")]: designSystemBaseInput.styles.base.placeholder,
-  "&:read-only": {
-    color: designSystemBaseInput.styles.variants.readOnly.color
-  },
-  "&:disabled, &[aria-disabled=true], &[data-disabled]": designSystemBaseInput.styles.base.disabled
-});
-
-const Input$1 = React__default["default"].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
-    } = designSystemBaseForm.useFormFieldContext();
-    const { onBlur, onFocus, ...elementProps } = designSystemUseAriaDisabled.useAriaDisabled({
-      ...restProps,
-      ariaDisabled
-    });
-    React.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__default["default"].useCallback(
-      (e) => {
-        setFocused(true);
-        onFocus == null ? void 0 : onFocus(e);
-      },
-      [setFocused, onFocus]
-    );
-    const onBlurHandler = React__default["default"].useCallback(
-      (e) => {
-        setFocused(false);
-        onBlur == null ? void 0 : onBlur(e);
-      },
-      [setFocused, onBlur]
-    );
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      StyledInput,
-      {
-        ...elementProps,
-        id: id != null ? id : formElementId,
-        readOnly,
-        "aria-describedby": designSystemUtils.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: designSystemUtils.mergeRefs([inputRef, formElementRef, forwardRef])
-      }
-    );
-  }
-);
-
-const Root = React__default["default"].forwardRef(({ children, size, placeholder, role, ...restProps }, forwardRef) => {
-  var _a, _b, _c;
-  const ref = React.useRef(null);
-  const {
-    valid: inputValid,
-    "aria-disabled": ariaDisabled,
-    disabled,
-    readOnly,
-    focused,
-    setHovered,
-    inputRef,
-    actionButtonRef,
-    setFocused,
-    hasIconSlot
-  } = useInputContext();
-  const { hoverProps, isHovered: hovered } = interactions.useHover({
-    onHoverChange: setHovered
-  });
-  const { pressProps } = designSystemUsePress.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 && !designSystemUtils.booleanify(disabled) && !designSystemUtils.booleanify(focused);
-      if (shouldFocusInput) {
-        (_b2 = inputRef.current) == null ? void 0 : _b2.focus();
-        setFocused(true);
-      }
-    },
-    preventFocusOnPress: "auto"
-  });
-  const ariaDisabledOrDisabled = designSystemUtils.booleanify(ariaDisabled) || designSystemUtils.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
-  } = designSystemBaseForm.useFormFieldContext();
-  const floatingLabel = placeholder !== void 0 || inputValue !== void 0 && inputValue !== "" || focused;
-  const useFloatingLabel = shouldUseFloatingLabel && role !== "combobox";
-  const valid = formFieldValid != null ? formFieldValid : inputValid;
-  const showValidityIcon = !designSystemUtils.booleanify(readOnly) && !ariaDisabledOrDisabled && !hovered && !focused && valid !== void 0;
-  const ValidIcon = valid === true ? StyledIconCheckMark : StyledIconExclamationPointCircle;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    StyledBaseInput,
-    {
-      ...utils.mergeProps(restProps, hoverProps, pressProps),
-      "data-invalid": designSystemUtils.booleanishAttrValue(valid === false),
-      "data-valid": designSystemUtils.booleanishAttrValue(valid === true),
-      "data-form-element": role !== "combobox" ? "input" : void 0,
-      ref: designSystemUtils.mergeRefs([ref, forwardRef]),
-      size,
-      hovered,
-      focused,
-      valid,
-      disabled: designSystemUtils.booleanify(disabled),
-      ariaDisabled: designSystemUtils.booleanify(ariaDisabled),
-      readOnly: designSystemUtils.booleanify(readOnly),
-      children: [
-        useFloatingLabel && /* @__PURE__ */ jsxRuntime.jsx(
-          designSystemBaseForm.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__ */ jsxRuntime.jsx(StyledValidityBox, { children: /* @__PURE__ */ jsxRuntime.jsx(ValidIcon, { size: "small", weight: "thin" }) })
-      ]
-    }
-  );
-});
-const BaseInput = React__default["default"].forwardRef(
-  ({
-    "aria-disabled": ariaDisabled,
-    disabled,
-    valid,
-    readOnly,
-    required,
-    onChange,
-    ...restProps
-  }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(
-    InputProvider,
-    {
-      valid,
-      disabled,
-      "aria-disabled": ariaDisabled,
-      readOnly,
-      required,
-      onChange,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Root, { ...restProps, ref: forwardRef })
-    }
-  )
-);
-BaseInput.Input = Input$1;
-
 const baseInputAllowedEvents = [
   "onMouseEnter",
   "onMouseLeave",
@@ -624,8 +89,9 @@ const baseInputAllowedEvents = [
   "onTouchMove",
   "onTouchMoveCapture"
 ];
-const useBaseInputProps = (allProps) => {
+const useBaseInputProps = (allProps, forwardRef) => {
   const {
+    // base-input props
     valid,
     "aria-disabled": ariaDisabled,
     readOnly,
@@ -634,16 +100,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
+  } = designSystemBaseForm.useFormFieldContext();
+  React.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,
@@ -651,17 +147,26 @@ const useBaseInputProps = (allProps) => {
     size,
     className,
     css,
+    onChange,
+    "data-testid": dataTestId
+  };
+  const inputProps = {
+    id: id != null ? id : formElementId,
+    "aria-describedby": designSystemUtils.stringAttrValue(
+      ariaDescribedBy,
+      formFieldContextDescribedBy
+    ),
+    "aria-invalid": ariaInvalid != null ? ariaInvalid : formFieldAriaInvalid,
     placeholder,
     value,
     defaultValue,
-    role,
-    onChange
+    ref: designSystemUtils.mergeRefs([formElementRef, forwardRef])
   };
-  const inputProps = {
+  const floatingLabelProps = {
     placeholder,
     value,
     defaultValue,
-    role
+    size
   };
   Object.entries(restProps).forEach(([key, value2]) => {
     if (baseInputAllowedEvents.includes(key)) {
@@ -670,9 +175,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 } = designSystemBaseInput.useInputContext();
+  const inputValue = (_c = (_b = (_a = inputRef.current) == null ? void 0 : _a.value) != null ? _b : value) != null ? _c : defaultValue;
+  const { label, shouldUseFloatingLabel } = designSystemBaseForm.useFormFieldContext();
+  const floatingLabel = placeholder !== void 0 || inputValue !== void 0 && inputValue !== "" || focused;
+  if (!shouldUseFloatingLabel) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    designSystemBaseForm.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 = designSystemBaseInput.BaseInput.ActionButton;
+
+const IconSlot = designSystemBaseInput.BaseInput.IconSlot;
+
 const Input = React__default["default"].forwardRef(
   ({ children, ...restProps }, forwardRef) => {
     const {
@@ -681,9 +220,10 @@ const Input = React__default["default"].forwardRef(
       clearLabel,
       ...elementProps
     } = restProps;
-    const { baseInputProps, inputProps } = useBaseInputProps(elementProps);
-    return /* @__PURE__ */ jsxRuntime.jsxs(BaseInput, { ...baseInputProps, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(BaseInput.Input, { ...inputProps, ref: forwardRef }),
+    const { baseInputProps, inputProps, floatingLabelProps } = useBaseInputProps(elementProps, forwardRef);
+    return /* @__PURE__ */ jsxRuntime.jsxs(designSystemBaseInput.BaseInput, { ...baseInputProps, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(InputFloatingLabel, { ...floatingLabelProps }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystemBaseInput.BaseInput.Input, { ...inputProps }),
       children,
       /* @__PURE__ */ jsxRuntime.jsx(
         ClearAction,
@@ -714,10 +254,11 @@ const InputPassword = React__default["default"].forwardRef(
     const inputRef = React.useRef(null);
     const [revealState, setRevealState] = React.useState(defaultReveal != null ? defaultReveal : false);
     const revealInternal = reveal != null ? reveal : revealState;
-    const { baseInputProps, inputProps } = useBaseInputProps(restProps);
-    return /* @__PURE__ */ jsxRuntime.jsxs(BaseInput, { ...baseInputProps, children: [
+    const { baseInputProps, inputProps, floatingLabelProps } = useBaseInputProps(restProps, forwardRef);
+    return /* @__PURE__ */ jsxRuntime.jsxs(designSystemBaseInput.BaseInput, { ...baseInputProps, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(InputFloatingLabel, { ...floatingLabelProps }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        BaseInput.Input,
+        designSystemBaseInput.BaseInput.Input,
         {
           ...inputProps,
           type: revealInternal ? "text" : "password",
@@ -725,9 +266,9 @@ const InputPassword = React__default["default"].forwardRef(
         }
       ),
       children,
-      /* @__PURE__ */ jsxRuntime.jsx(IconSlot, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconLockClosed, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystemBaseInput.BaseInput.IconSlot, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconLockClosed, {}) }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        ActionButton,
+        designSystemBaseInput.BaseInput.ActionButton,
         {
           label: revealInternal ? hideLabel : revealLabel,
           disabled: false,
@@ -757,9 +298,13 @@ const InputEmail = React__default["default"].forwardRef(({ children, ...restProp
     clearLabel,
     ...elementProps
   } = restProps;
-  const { baseInputProps, inputProps } = useBaseInputProps(elementProps);
-  return /* @__PURE__ */ jsxRuntime.jsxs(BaseInput, { ...baseInputProps, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(BaseInput.Input, { type: "email", ...inputProps, ref: forwardRef }),
+  const { baseInputProps, inputProps, floatingLabelProps } = useBaseInputProps(
+    elementProps,
+    forwardRef
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystemBaseInput.BaseInput, { ...baseInputProps, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(InputFloatingLabel, { ...floatingLabelProps }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystemBaseInput.BaseInput.Input, { type: "email", ...inputProps }),
     children,
     /* @__PURE__ */ jsxRuntime.jsx(
       ClearAction,
@@ -770,7 +315,7 @@ const InputEmail = React__default["default"].forwardRef(({ children, ...restProp
         value: inputProps.value
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(IconSlot, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconEnvelope, {}) })
+    /* @__PURE__ */ jsxRuntime.jsx(designSystemBaseInput.BaseInput.IconSlot, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconEnvelope, {}) })
   ] });
 });
 InputEmail.ActionButton = ActionButton;
@@ -782,9 +327,13 @@ const InputSearch = React__default["default"].forwardRef(({ children, ...restPro
     clearLabel,
     ...elementProps
   } = restProps;
-  const { baseInputProps, inputProps } = useBaseInputProps(elementProps);
-  return /* @__PURE__ */ jsxRuntime.jsxs(BaseInput, { ...baseInputProps, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(BaseInput.Input, { ...inputProps, ref: forwardRef }),
+  const { baseInputProps, inputProps, floatingLabelProps } = useBaseInputProps(
+    elementProps,
+    forwardRef
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystemBaseInput.BaseInput, { ...baseInputProps, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(InputFloatingLabel, { ...floatingLabelProps }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystemBaseInput.BaseInput.Input, { ...inputProps, ref: forwardRef }),
     children,
     /* @__PURE__ */ jsxRuntime.jsx(
       ClearAction,
@@ -795,7 +344,7 @@ const InputSearch = React__default["default"].forwardRef(({ children, ...restPro
         value: inputProps.value
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(IconSlot, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconMagnifyingGlass, {}) })
+    /* @__PURE__ */ jsxRuntime.jsx(designSystemBaseInput.BaseInput.IconSlot, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconMagnifyingGlass, {}) })
   ] });
 });
 InputSearch.ActionButton = ActionButton;