@easypost/easy-ui 1.0.0-alpha.6 → 1.0.0-alpha.60

package/__chunks__/InputField-BGBRvVMR.js

@@ -0,0 +1,321 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const React = require("react");
+const utilities_css = require("../utilities/css.js");
+const InputIcon = require("./InputIcon-CUOJRoq8.js");
+const Text = require("./Text-CEI17LPu.js");
+const Icon = require("./Icon-oPEVg2C8.js");
+const UnstyledButton = require("./UnstyledButton-Dn8KZHdh.js");
+const isVirtualEvent = require("./isVirtualEvent-DwoP1rNI.js");
+const mergeProps = require("./mergeProps-DniMwM6P.js");
+const filterDOMProps = require("./filterDOMProps-D3iOHP0H.js");
+const useFormReset = require("./useFormReset-Bgj93eR3.js");
+const useControlledState = require("./useControlledState-mnKBd6Uc.js");
+const useField = require("./useField-BJW_bXVD.js");
+const useFocusable = require("./useFocusable-BfXLORiH.js");
+const useFormValidation = require("./useFormValidation-C2DoIczP.js");
+const useHover = require("./useHover-BIKwjrCT.js");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+function $2d73ec29415bd339$export$712718f7aec83d5(props, ref) {
+  let { inputElementType = "input", isDisabled = false, isRequired = false, isReadOnly = false, type = "text", validationBehavior = "aria" } = props;
+  let [value, setValue] = useControlledState.$458b0a5536c1a7cf$export$40bfa8c7b0832715(props.value, props.defaultValue || "", props.onChange);
+  let { focusableProps } = useFocusable.$e6afbd83fe6ebbd2$export$4c014de7c8940b4c(props, ref);
+  let validationState = useFormValidation.$e5be200c675c3b3a$export$fc1a364ae1f3ff10(__spreadProps(__spreadValues({}, props), {
+    value
+  }));
+  let { isInvalid, validationErrors, validationDetails } = validationState.displayValidation;
+  let { labelProps, fieldProps, descriptionProps, errorMessageProps } = useField.$2baaea4c71418dea$export$294aa081a6c6f55d(__spreadProps(__spreadValues({}, props), {
+    isInvalid,
+    errorMessage: props.errorMessage || validationErrors
+  }));
+  let domProps = filterDOMProps.$65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
+    labelable: true
+  });
+  const inputOnlyProps = {
+    type,
+    pattern: props.pattern
+  };
+  useFormReset.$99facab73266f662$export$5add1d006293d136(ref, value, setValue);
+  useFormValidation.$e93e671b31057976$export$b8473d3665f3a75a(props, validationState, ref);
+  React.useEffect(() => {
+    if (ref.current instanceof isVirtualEvent.$431fbd86ca7dc216$export$f21a1ffae260145a(ref.current).HTMLTextAreaElement) {
+      let input = ref.current;
+      Object.defineProperty(input, "defaultValue", {
+        get: () => input.value,
+        set: () => {
+        },
+        configurable: true
+      });
+    }
+  }, [
+    ref
+  ]);
+  return {
+    labelProps,
+    inputProps: mergeProps.$3ef42575df84b30b$export$9d1611c77c2fe928(domProps, inputElementType === "input" ? inputOnlyProps : void 0, __spreadValues(__spreadValues({
+      disabled: isDisabled,
+      readOnly: isReadOnly,
+      required: isRequired && validationBehavior === "native",
+      "aria-required": isRequired && validationBehavior === "aria" || void 0,
+      "aria-invalid": isInvalid || void 0,
+      "aria-errormessage": props["aria-errormessage"],
+      "aria-activedescendant": props["aria-activedescendant"],
+      "aria-autocomplete": props["aria-autocomplete"],
+      "aria-haspopup": props["aria-haspopup"],
+      value,
+      onChange: (e) => setValue(e.target.value),
+      autoComplete: props.autoComplete,
+      autoCapitalize: props.autoCapitalize,
+      maxLength: props.maxLength,
+      minLength: props.minLength,
+      name: props.name,
+      placeholder: props.placeholder,
+      inputMode: props.inputMode,
+      // Clipboard events
+      onCopy: props.onCopy,
+      onCut: props.onCut,
+      onPaste: props.onPaste,
+      // Composition events
+      onCompositionEnd: props.onCompositionEnd,
+      onCompositionStart: props.onCompositionStart,
+      onCompositionUpdate: props.onCompositionUpdate,
+      // Selection events
+      onSelect: props.onSelect,
+      // Input events
+      onBeforeInput: props.onBeforeInput,
+      onInput: props.onInput
+    }, focusableProps), fieldProps)),
+    descriptionProps,
+    errorMessageProps,
+    isInvalid,
+    validationErrors,
+    validationDetails
+  };
+}
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
+var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
+var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, {
+  enumerable: true,
+  configurable: true,
+  writable: true,
+  value
+}) : obj[key] = value;
+var __spreadValues$1 = (a, b) => {
+  for (var prop in b || (b = {})) if (__hasOwnProp$1.call(b, prop)) __defNormalProp$1(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1) for (var prop of __getOwnPropSymbols$1(b)) {
+    if (__propIsEnum$1.call(b, prop)) __defNormalProp$1(a, prop, b[prop]);
+  }
+  return a;
+};
+var __objRest$1 = (source, exclude) => {
+  var target = {};
+  for (var prop in source) if (__hasOwnProp$1.call(source, prop) && exclude.indexOf(prop) < 0) target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$1) for (var prop of __getOwnPropSymbols$1(source)) {
+    if (exclude.indexOf(prop) < 0 && __propIsEnum$1.call(source, prop)) target[prop] = source[prop];
+  }
+  return target;
+};
+const Visibility = (_a) => {
+  var _b = _a, { title, titleId } = _b, props = __objRest$1(_b, ["title", "titleId"]);
+  return React__namespace.createElement("svg", __spreadValues$1({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 -960 960 960",
+    "aria-labelledby": titleId
+  }, props), title ? React__namespace.createElement("title", {
+    id: titleId
+  }, title) : null, React__namespace.createElement("path", {
+    d: "M480.21-344.23q64.64 0 110.1-45.67 45.46-45.67 45.46-110.31t-45.67-110.1q-45.67-45.46-110.31-45.46t-110.1 45.67q-45.46 45.67-45.46 110.31t45.67 110.1q45.67 45.46 110.31 45.46Zm-.51-44.92q-46.32 0-78.43-32.42-32.12-32.42-32.12-78.73 0-46.32 32.42-78.43 32.42-32.12 78.73-32.12 46.32 0 78.43 32.42 32.12 32.42 32.12 78.73 0 46.32-32.42 78.43-32.42 32.12-78.73 32.12Zm.35 169.15q-137.59 0-249.82-77.04Q118-374.08 61.54-500 118-625.92 230.18-702.96 342.35-780 479.95-780q137.59 0 249.82 77.04Q842-625.92 898.46-500 842-374.08 729.82-297.04 617.65-220 480.05-220ZM480-500Zm-.17 234.61q119.25 0 218.82-63.76Q798.23-392.92 850.46-500q-52.23-107.08-151.64-170.85-99.41-63.76-218.65-63.76-119.25 0-218.82 63.76Q161.77-607.08 108.92-500q52.85 107.08 152.26 170.85 99.41 63.76 218.65 63.76Z"
+  }));
+};
+var __defProp2 = Object.defineProperty;
+var __getOwnPropSymbols2 = Object.getOwnPropertySymbols;
+var __hasOwnProp2 = Object.prototype.hasOwnProperty;
+var __propIsEnum2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, {
+  enumerable: true,
+  configurable: true,
+  writable: true,
+  value
+}) : obj[key] = value;
+var __spreadValues2 = (a, b) => {
+  for (var prop in b || (b = {})) if (__hasOwnProp2.call(b, prop)) __defNormalProp2(a, prop, b[prop]);
+  if (__getOwnPropSymbols2) for (var prop of __getOwnPropSymbols2(b)) {
+    if (__propIsEnum2.call(b, prop)) __defNormalProp2(a, prop, b[prop]);
+  }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source) if (__hasOwnProp2.call(source, prop) && exclude.indexOf(prop) < 0) target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols2) for (var prop of __getOwnPropSymbols2(source)) {
+    if (exclude.indexOf(prop) < 0 && __propIsEnum2.call(source, prop)) target[prop] = source[prop];
+  }
+  return target;
+};
+const VisibilityOff = (_a) => {
+  var _b = _a, { title, titleId } = _b, props = __objRest(_b, ["title", "titleId"]);
+  return React__namespace.createElement("svg", __spreadValues2({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 -960 960 960",
+    "aria-labelledby": titleId
+  }, props), title ? React__namespace.createElement("title", {
+    id: titleId
+  }, title) : null, React__namespace.createElement("path", {
+    d: "m620.15-434.39-34.77-34.76q21.39-67.54-28.53-111.47-49.93-43.92-107.7-24.76l-34.76-34.77q13.53-7.93 30.3-11.77 16.77-3.85 35.31-3.85 65.23 0 110.5 45.27 45.27 45.27 45.27 110.5 0 18.54-4.16 36-4.15 17.46-11.46 29.61ZM748-307.69l-31.15-30q45.92-34.08 80.69-75.89 34.77-41.8 52.92-86.42-50-108.31-148.46-171.46-98.46-63.15-214.69-63.15-38.54 0-78.12 7.03-39.57 7.04-65.34 16.89L309-746.15q33.46-14.46 81.42-24.16 47.97-9.69 93.43-9.69 134.53 0 248.03 76.12Q845.38-627.77 898.46-500 874-442.54 836.27-394.35q-37.73 48.19-88.27 86.66Zm59.92 216.76L646.08-250.92q-30.77 13.61-74.39 22.26Q528.08-220 480-220q-137.54 0-250.77-76.12Q116-372.23 61.54-500q21.54-52.38 59.15-101.12 37.62-48.73 87.08-89.11L85.23-812.38l32-32.62 720.46 720.46-29.77 33.61Zm-569.15-567.3q-37.38 26.23-74.96 71-37.58 44.77-54.89 87.23 50.62 108.31 150.81 171.46 100.19 63.15 225.96 63.15 37.23 0 73.66-5.73 36.42-5.73 52.42-14.11l-70.92-70.93q-10.62 5.39-28.35 8.66-17.73 3.27-32.5 3.27-64.61 0-110.19-44.96T324.23-500q0-15 3.27-31.92 3.27-16.93 8.66-28.93l-97.39-97.38ZM531.46-517Zm-106 53.38Z"
+  }));
+};
+function PasswordButton(props) {
+  const { hasError = false, inputSize = "md", isDisabled = false, isPasswordVisible = false, toggleVisibility, isInputHovered = false } = props;
+  return React.createElement(UnstyledButton.UnstyledButton, {
+    className: utilities_css.classNames(InputIcon.styles.passwordBtn, isInputHovered && InputIcon.styles.hovered, hasError && InputIcon.styles.passwordBtnError, InputIcon.styles[utilities_css.variationName("passwordBtn", inputSize)]),
+    onPress: toggleVisibility,
+    isDisabled
+  }, React.createElement(Text.Text, {
+    visuallyHidden: true
+  }, "password visibility"), React.createElement(Icon.Icon, {
+    symbol: isPasswordVisible ? Visibility : VisibilityOff,
+    size: InputIcon.mapIconSize(inputSize)
+  }));
+}
+function InputText(props) {
+  const { alignment = "start", size = "md", text } = props;
+  return React.createElement("div", {
+    className: utilities_css.classNames(InputIcon.styles.text, alignment === "start" ? InputIcon.styles.textStart : InputIcon.styles.textEnd, InputIcon.styles[utilities_css.variationName("inputTextPlacement", size)])
+  }, React.createElement(Text.Text, {
+    variant: size === "sm" ? "body2" : "body1",
+    color: alignment === "start" ? "neutral.600" : "neutral.400"
+  }, text));
+}
+function useInputField(props, ref) {
+  const { isMultiline = false } = props;
+  const { labelProps, inputProps, descriptionProps: helperTextProps, errorMessageProps: errorTextProps } = $2d73ec29415bd339$export$712718f7aec83d5(__spreadProps(__spreadValues({}, props), {
+    inputElementType: InputIcon.getElementType(isMultiline)
+  }), ref);
+  let elementProps = {};
+  if (isMultiline) {
+    elementProps = inputProps;
+  } else {
+    elementProps = inputProps;
+  }
+  return {
+    labelProps,
+    elementProps,
+    helperTextProps,
+    errorTextProps
+  };
+}
+function InputField(props) {
+  const { isMultiline = false, type = "text", size = "md", isDisabled = false, isRequired = false, validationState = "valid", isLabelEmphasized = false, autoFocus = false, "aria-label": ariaLabel, label, errorText, helperText, placeholder, value, defaultValue, iconAtStart, iconAtEnd, textAtStart, textAtEnd, rows } = props;
+  const [isPasswordVisible, setIsPasswordVisible] = React.useState(false);
+  const ref = React.useRef(null);
+  const { labelProps, elementProps, helperTextProps, errorTextProps } = useInputField(props, ref);
+  const { isHovered: isInputHovered, hoverProps } = useHover.$6179b936705e76d3$export$ae780daf29e6d456(props);
+  const Component = InputIcon.getElementType(isMultiline);
+  const bothIconPropsDefined = !!iconAtEnd && !!iconAtStart;
+  const iconAndTextPropsDefined = !!iconAtEnd && !!textAtEnd || !!iconAtStart && !!textAtStart;
+  const smallSizeTextarea = size === "sm" && Component === "textarea";
+  const definedIconsWithTextarea = (!!iconAtEnd || !!iconAtStart) && Component === "textarea";
+  const definedPrefixSuffixWithTextarea = (!!textAtStart || !!textAtEnd) && Component === "textarea";
+  InputIcon.logWarningsForInvalidPropConfiguration(bothIconPropsDefined, smallSizeTextarea, definedIconsWithTextarea, iconAndTextPropsDefined);
+  InputIcon.logWarningForMissingAriaLabel(label, ariaLabel);
+  const isPassword = type === "password";
+  const hasError = validationState === "invalid";
+  const showErrorText = hasError && errorText;
+  const showHelperText = !showErrorText && helperText;
+  const canUseIcon = !bothIconPropsDefined && !isPassword && !definedIconsWithTextarea;
+  const canUseTextAtStartAndAtEnd = !definedPrefixSuffixWithTextarea;
+  const hasStartIcon = canUseIcon && iconAtStart;
+  const hasEndIcon = canUseIcon && iconAtEnd;
+  const hasTextAtStart = canUseTextAtStartAndAtEnd && textAtStart;
+  const hasTextAtEnd = canUseTextAtStartAndAtEnd && textAtEnd;
+  const isTypeAdjustedForPasswordVisibility = isPassword && isPasswordVisible;
+  const captionProps = showHelperText ? helperTextProps : errorTextProps;
+  const captionText = showHelperText ? helperText : errorText;
+  const adjustedSize = smallSizeTextarea ? "md" : size;
+  const className = utilities_css.classNames(InputIcon.styles.input, isInputHovered && InputIcon.styles.hovered, Component === "textarea" && InputIcon.styles.textArea, isPassword && InputIcon.styles.passwordInput, hasError && InputIcon.styles.errorInput, hasStartIcon && InputIcon.styles.iconStartInput, hasEndIcon && InputIcon.styles.iconEndInput, hasTextAtStart && InputIcon.styles.textStartInput, hasTextAtEnd && InputIcon.styles.textEndInput, InputIcon.styles[utilities_css.variationName("inputSize", adjustedSize)]);
+  const inputType = Component === "textarea" ? void 0 : isTypeAdjustedForPasswordVisibility ? "text" : type;
+  return React.createElement("div", {
+    className: utilities_css.classNames(InputIcon.styles.root)
+  }, label && React.createElement(InputIcon.Label, __spreadValues({
+    fieldSize: adjustedSize,
+    hasError,
+    isLabelEmphasized
+  }, labelProps), label), React.createElement("div", {
+    className: InputIcon.styles.inputIconContainer
+  }, hasStartIcon && React.createElement(InputIcon.InputIcon, {
+    alignment: "start",
+    size: adjustedSize,
+    isDisabled,
+    icon: iconAtStart
+  }), hasTextAtStart && React.createElement(InputText, {
+    alignment: "start",
+    size: adjustedSize,
+    text: textAtStart
+  }), React.createElement(Component, __spreadProps(__spreadValues(__spreadValues({}, elementProps), hoverProps), {
+    className,
+    ref,
+    type: inputType,
+    value,
+    required: isRequired,
+    disabled: isDisabled,
+    placeholder,
+    autoFocus,
+    defaultValue,
+    rows: Component === "textarea" ? rows : void 0
+  })), hasTextAtEnd && React.createElement(InputText, {
+    alignment: "end",
+    size: adjustedSize,
+    text: textAtEnd
+  }), isPassword ? React.createElement(PasswordButton, {
+    isInputHovered,
+    hasError,
+    inputSize: adjustedSize,
+    isDisabled,
+    isPasswordVisible,
+    toggleVisibility: () => setIsPasswordVisible((prevVisibility) => !prevVisibility)
+  }) : hasEndIcon && React.createElement(InputIcon.InputIcon, {
+    alignment: "end",
+    size: adjustedSize,
+    isDisabled,
+    icon: iconAtEnd
+  })), (showErrorText || showHelperText) && React.createElement(InputIcon.InputCaption, __spreadValues({
+    variant: showHelperText ? "helper" : "error"
+  }, captionProps), captionText));
+}
+exports.InputField = InputField;

package/__chunks__/InputField-BI73lSp6.mjs

@@ -0,0 +1,306 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import * as React from "react";
+import React__default, { useEffect, useState } from "react";
+import { classNames, variationName } from "../utilities/css.mjs";
+import { s as styles, m as mapIconSize, g as getElementType, b as logWarningsForInvalidPropConfiguration, l as logWarningForMissingAriaLabel, L as Label, I as InputIcon, a as InputCaption } from "./InputIcon-BGgFAA4L.mjs";
+import { T as Text } from "./Text-D8wg72pq.mjs";
+import { I as Icon } from "./Icon-QGDwoR1f.mjs";
+import { U as UnstyledButton } from "./UnstyledButton-B7BScs8i.mjs";
+import { a as $431fbd86ca7dc216$export$f21a1ffae260145a } from "./isVirtualEvent-BFRy7P_p.mjs";
+import { $ as $3ef42575df84b30b$export$9d1611c77c2fe928 } from "./mergeProps-T961Q1yJ.mjs";
+import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "./filterDOMProps-EDDcM64A.mjs";
+import { $ as $99facab73266f662$export$5add1d006293d136 } from "./useFormReset-CmXMJVpO.mjs";
+import { $ as $458b0a5536c1a7cf$export$40bfa8c7b0832715 } from "./useControlledState-CFWhSD5C.mjs";
+import { $ as $2baaea4c71418dea$export$294aa081a6c6f55d } from "./useField-DWmSslhe.mjs";
+import { $ as $e6afbd83fe6ebbd2$export$4c014de7c8940b4c } from "./useFocusable-DD5dAIXt.mjs";
+import { $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10, a as $e93e671b31057976$export$b8473d3665f3a75a } from "./useFormValidation-gwcVryr8.mjs";
+import { $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "./useHover-BOYR4wqI.mjs";
+function $2d73ec29415bd339$export$712718f7aec83d5(props, ref) {
+  let { inputElementType = "input", isDisabled = false, isRequired = false, isReadOnly = false, type = "text", validationBehavior = "aria" } = props;
+  let [value, setValue] = $458b0a5536c1a7cf$export$40bfa8c7b0832715(props.value, props.defaultValue || "", props.onChange);
+  let { focusableProps } = $e6afbd83fe6ebbd2$export$4c014de7c8940b4c(props, ref);
+  let validationState = $e5be200c675c3b3a$export$fc1a364ae1f3ff10(__spreadProps(__spreadValues({}, props), {
+    value
+  }));
+  let { isInvalid, validationErrors, validationDetails } = validationState.displayValidation;
+  let { labelProps, fieldProps, descriptionProps, errorMessageProps } = $2baaea4c71418dea$export$294aa081a6c6f55d(__spreadProps(__spreadValues({}, props), {
+    isInvalid,
+    errorMessage: props.errorMessage || validationErrors
+  }));
+  let domProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
+    labelable: true
+  });
+  const inputOnlyProps = {
+    type,
+    pattern: props.pattern
+  };
+  $99facab73266f662$export$5add1d006293d136(ref, value, setValue);
+  $e93e671b31057976$export$b8473d3665f3a75a(props, validationState, ref);
+  useEffect(() => {
+    if (ref.current instanceof $431fbd86ca7dc216$export$f21a1ffae260145a(ref.current).HTMLTextAreaElement) {
+      let input = ref.current;
+      Object.defineProperty(input, "defaultValue", {
+        get: () => input.value,
+        set: () => {
+        },
+        configurable: true
+      });
+    }
+  }, [
+    ref
+  ]);
+  return {
+    labelProps,
+    inputProps: $3ef42575df84b30b$export$9d1611c77c2fe928(domProps, inputElementType === "input" ? inputOnlyProps : void 0, __spreadValues(__spreadValues({
+      disabled: isDisabled,
+      readOnly: isReadOnly,
+      required: isRequired && validationBehavior === "native",
+      "aria-required": isRequired && validationBehavior === "aria" || void 0,
+      "aria-invalid": isInvalid || void 0,
+      "aria-errormessage": props["aria-errormessage"],
+      "aria-activedescendant": props["aria-activedescendant"],
+      "aria-autocomplete": props["aria-autocomplete"],
+      "aria-haspopup": props["aria-haspopup"],
+      value,
+      onChange: (e) => setValue(e.target.value),
+      autoComplete: props.autoComplete,
+      autoCapitalize: props.autoCapitalize,
+      maxLength: props.maxLength,
+      minLength: props.minLength,
+      name: props.name,
+      placeholder: props.placeholder,
+      inputMode: props.inputMode,
+      // Clipboard events
+      onCopy: props.onCopy,
+      onCut: props.onCut,
+      onPaste: props.onPaste,
+      // Composition events
+      onCompositionEnd: props.onCompositionEnd,
+      onCompositionStart: props.onCompositionStart,
+      onCompositionUpdate: props.onCompositionUpdate,
+      // Selection events
+      onSelect: props.onSelect,
+      // Input events
+      onBeforeInput: props.onBeforeInput,
+      onInput: props.onInput
+    }, focusableProps), fieldProps)),
+    descriptionProps,
+    errorMessageProps,
+    isInvalid,
+    validationErrors,
+    validationDetails
+  };
+}
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
+var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
+var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, {
+  enumerable: true,
+  configurable: true,
+  writable: true,
+  value
+}) : obj[key] = value;
+var __spreadValues$1 = (a, b) => {
+  for (var prop in b || (b = {})) if (__hasOwnProp$1.call(b, prop)) __defNormalProp$1(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1) for (var prop of __getOwnPropSymbols$1(b)) {
+    if (__propIsEnum$1.call(b, prop)) __defNormalProp$1(a, prop, b[prop]);
+  }
+  return a;
+};
+var __objRest$1 = (source, exclude) => {
+  var target = {};
+  for (var prop in source) if (__hasOwnProp$1.call(source, prop) && exclude.indexOf(prop) < 0) target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$1) for (var prop of __getOwnPropSymbols$1(source)) {
+    if (exclude.indexOf(prop) < 0 && __propIsEnum$1.call(source, prop)) target[prop] = source[prop];
+  }
+  return target;
+};
+const Visibility = (_a) => {
+  var _b = _a, { title, titleId } = _b, props = __objRest$1(_b, ["title", "titleId"]);
+  return React.createElement("svg", __spreadValues$1({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 -960 960 960",
+    "aria-labelledby": titleId
+  }, props), title ? React.createElement("title", {
+    id: titleId
+  }, title) : null, React.createElement("path", {
+    d: "M480.21-344.23q64.64 0 110.1-45.67 45.46-45.67 45.46-110.31t-45.67-110.1q-45.67-45.46-110.31-45.46t-110.1 45.67q-45.46 45.67-45.46 110.31t45.67 110.1q45.67 45.46 110.31 45.46Zm-.51-44.92q-46.32 0-78.43-32.42-32.12-32.42-32.12-78.73 0-46.32 32.42-78.43 32.42-32.12 78.73-32.12 46.32 0 78.43 32.42 32.12 32.42 32.12 78.73 0 46.32-32.42 78.43-32.42 32.12-78.73 32.12Zm.35 169.15q-137.59 0-249.82-77.04Q118-374.08 61.54-500 118-625.92 230.18-702.96 342.35-780 479.95-780q137.59 0 249.82 77.04Q842-625.92 898.46-500 842-374.08 729.82-297.04 617.65-220 480.05-220ZM480-500Zm-.17 234.61q119.25 0 218.82-63.76Q798.23-392.92 850.46-500q-52.23-107.08-151.64-170.85-99.41-63.76-218.65-63.76-119.25 0-218.82 63.76Q161.77-607.08 108.92-500q52.85 107.08 152.26 170.85 99.41 63.76 218.65 63.76Z"
+  }));
+};
+var __defProp2 = Object.defineProperty;
+var __getOwnPropSymbols2 = Object.getOwnPropertySymbols;
+var __hasOwnProp2 = Object.prototype.hasOwnProperty;
+var __propIsEnum2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, {
+  enumerable: true,
+  configurable: true,
+  writable: true,
+  value
+}) : obj[key] = value;
+var __spreadValues2 = (a, b) => {
+  for (var prop in b || (b = {})) if (__hasOwnProp2.call(b, prop)) __defNormalProp2(a, prop, b[prop]);
+  if (__getOwnPropSymbols2) for (var prop of __getOwnPropSymbols2(b)) {
+    if (__propIsEnum2.call(b, prop)) __defNormalProp2(a, prop, b[prop]);
+  }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source) if (__hasOwnProp2.call(source, prop) && exclude.indexOf(prop) < 0) target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols2) for (var prop of __getOwnPropSymbols2(source)) {
+    if (exclude.indexOf(prop) < 0 && __propIsEnum2.call(source, prop)) target[prop] = source[prop];
+  }
+  return target;
+};
+const VisibilityOff = (_a) => {
+  var _b = _a, { title, titleId } = _b, props = __objRest(_b, ["title", "titleId"]);
+  return React.createElement("svg", __spreadValues2({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 -960 960 960",
+    "aria-labelledby": titleId
+  }, props), title ? React.createElement("title", {
+    id: titleId
+  }, title) : null, React.createElement("path", {
+    d: "m620.15-434.39-34.77-34.76q21.39-67.54-28.53-111.47-49.93-43.92-107.7-24.76l-34.76-34.77q13.53-7.93 30.3-11.77 16.77-3.85 35.31-3.85 65.23 0 110.5 45.27 45.27 45.27 45.27 110.5 0 18.54-4.16 36-4.15 17.46-11.46 29.61ZM748-307.69l-31.15-30q45.92-34.08 80.69-75.89 34.77-41.8 52.92-86.42-50-108.31-148.46-171.46-98.46-63.15-214.69-63.15-38.54 0-78.12 7.03-39.57 7.04-65.34 16.89L309-746.15q33.46-14.46 81.42-24.16 47.97-9.69 93.43-9.69 134.53 0 248.03 76.12Q845.38-627.77 898.46-500 874-442.54 836.27-394.35q-37.73 48.19-88.27 86.66Zm59.92 216.76L646.08-250.92q-30.77 13.61-74.39 22.26Q528.08-220 480-220q-137.54 0-250.77-76.12Q116-372.23 61.54-500q21.54-52.38 59.15-101.12 37.62-48.73 87.08-89.11L85.23-812.38l32-32.62 720.46 720.46-29.77 33.61Zm-569.15-567.3q-37.38 26.23-74.96 71-37.58 44.77-54.89 87.23 50.62 108.31 150.81 171.46 100.19 63.15 225.96 63.15 37.23 0 73.66-5.73 36.42-5.73 52.42-14.11l-70.92-70.93q-10.62 5.39-28.35 8.66-17.73 3.27-32.5 3.27-64.61 0-110.19-44.96T324.23-500q0-15 3.27-31.92 3.27-16.93 8.66-28.93l-97.39-97.38ZM531.46-517Zm-106 53.38Z"
+  }));
+};
+function PasswordButton(props) {
+  const { hasError = false, inputSize = "md", isDisabled = false, isPasswordVisible = false, toggleVisibility, isInputHovered = false } = props;
+  return React__default.createElement(UnstyledButton, {
+    className: classNames(styles.passwordBtn, isInputHovered && styles.hovered, hasError && styles.passwordBtnError, styles[variationName("passwordBtn", inputSize)]),
+    onPress: toggleVisibility,
+    isDisabled
+  }, React__default.createElement(Text, {
+    visuallyHidden: true
+  }, "password visibility"), React__default.createElement(Icon, {
+    symbol: isPasswordVisible ? Visibility : VisibilityOff,
+    size: mapIconSize(inputSize)
+  }));
+}
+function InputText(props) {
+  const { alignment = "start", size = "md", text } = props;
+  return React__default.createElement("div", {
+    className: classNames(styles.text, alignment === "start" ? styles.textStart : styles.textEnd, styles[variationName("inputTextPlacement", size)])
+  }, React__default.createElement(Text, {
+    variant: size === "sm" ? "body2" : "body1",
+    color: alignment === "start" ? "neutral.600" : "neutral.400"
+  }, text));
+}
+function useInputField(props, ref) {
+  const { isMultiline = false } = props;
+  const { labelProps, inputProps, descriptionProps: helperTextProps, errorMessageProps: errorTextProps } = $2d73ec29415bd339$export$712718f7aec83d5(__spreadProps(__spreadValues({}, props), {
+    inputElementType: getElementType(isMultiline)
+  }), ref);
+  let elementProps = {};
+  if (isMultiline) {
+    elementProps = inputProps;
+  } else {
+    elementProps = inputProps;
+  }
+  return {
+    labelProps,
+    elementProps,
+    helperTextProps,
+    errorTextProps
+  };
+}
+function InputField(props) {
+  const { isMultiline = false, type = "text", size = "md", isDisabled = false, isRequired = false, validationState = "valid", isLabelEmphasized = false, autoFocus = false, "aria-label": ariaLabel, label, errorText, helperText, placeholder, value, defaultValue, iconAtStart, iconAtEnd, textAtStart, textAtEnd, rows } = props;
+  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+  const ref = React__default.useRef(null);
+  const { labelProps, elementProps, helperTextProps, errorTextProps } = useInputField(props, ref);
+  const { isHovered: isInputHovered, hoverProps } = $6179b936705e76d3$export$ae780daf29e6d456(props);
+  const Component = getElementType(isMultiline);
+  const bothIconPropsDefined = !!iconAtEnd && !!iconAtStart;
+  const iconAndTextPropsDefined = !!iconAtEnd && !!textAtEnd || !!iconAtStart && !!textAtStart;
+  const smallSizeTextarea = size === "sm" && Component === "textarea";
+  const definedIconsWithTextarea = (!!iconAtEnd || !!iconAtStart) && Component === "textarea";
+  const definedPrefixSuffixWithTextarea = (!!textAtStart || !!textAtEnd) && Component === "textarea";
+  logWarningsForInvalidPropConfiguration(bothIconPropsDefined, smallSizeTextarea, definedIconsWithTextarea, iconAndTextPropsDefined);
+  logWarningForMissingAriaLabel(label, ariaLabel);
+  const isPassword = type === "password";
+  const hasError = validationState === "invalid";
+  const showErrorText = hasError && errorText;
+  const showHelperText = !showErrorText && helperText;
+  const canUseIcon = !bothIconPropsDefined && !isPassword && !definedIconsWithTextarea;
+  const canUseTextAtStartAndAtEnd = !definedPrefixSuffixWithTextarea;
+  const hasStartIcon = canUseIcon && iconAtStart;
+  const hasEndIcon = canUseIcon && iconAtEnd;
+  const hasTextAtStart = canUseTextAtStartAndAtEnd && textAtStart;
+  const hasTextAtEnd = canUseTextAtStartAndAtEnd && textAtEnd;
+  const isTypeAdjustedForPasswordVisibility = isPassword && isPasswordVisible;
+  const captionProps = showHelperText ? helperTextProps : errorTextProps;
+  const captionText = showHelperText ? helperText : errorText;
+  const adjustedSize = smallSizeTextarea ? "md" : size;
+  const className = classNames(styles.input, isInputHovered && styles.hovered, Component === "textarea" && styles.textArea, isPassword && styles.passwordInput, hasError && styles.errorInput, hasStartIcon && styles.iconStartInput, hasEndIcon && styles.iconEndInput, hasTextAtStart && styles.textStartInput, hasTextAtEnd && styles.textEndInput, styles[variationName("inputSize", adjustedSize)]);
+  const inputType = Component === "textarea" ? void 0 : isTypeAdjustedForPasswordVisibility ? "text" : type;
+  return React__default.createElement("div", {
+    className: classNames(styles.root)
+  }, label && React__default.createElement(Label, __spreadValues({
+    fieldSize: adjustedSize,
+    hasError,
+    isLabelEmphasized
+  }, labelProps), label), React__default.createElement("div", {
+    className: styles.inputIconContainer
+  }, hasStartIcon && React__default.createElement(InputIcon, {
+    alignment: "start",
+    size: adjustedSize,
+    isDisabled,
+    icon: iconAtStart
+  }), hasTextAtStart && React__default.createElement(InputText, {
+    alignment: "start",
+    size: adjustedSize,
+    text: textAtStart
+  }), React__default.createElement(Component, __spreadProps(__spreadValues(__spreadValues({}, elementProps), hoverProps), {
+    className,
+    ref,
+    type: inputType,
+    value,
+    required: isRequired,
+    disabled: isDisabled,
+    placeholder,
+    autoFocus,
+    defaultValue,
+    rows: Component === "textarea" ? rows : void 0
+  })), hasTextAtEnd && React__default.createElement(InputText, {
+    alignment: "end",
+    size: adjustedSize,
+    text: textAtEnd
+  }), isPassword ? React__default.createElement(PasswordButton, {
+    isInputHovered,
+    hasError,
+    inputSize: adjustedSize,
+    isDisabled,
+    isPasswordVisible,
+    toggleVisibility: () => setIsPasswordVisible((prevVisibility) => !prevVisibility)
+  }) : hasEndIcon && React__default.createElement(InputIcon, {
+    alignment: "end",
+    size: adjustedSize,
+    isDisabled,
+    icon: iconAtEnd
+  })), (showErrorText || showHelperText) && React__default.createElement(InputCaption, __spreadValues({
+    variant: showHelperText ? "helper" : "error"
+  }, captionProps), captionText));
+}
+export {
+  InputField as I
+};