@easypost/easy-ui 1.0.0-alpha.7 → 1.0.0-alpha.70

package/__chunks__/InputField-2I7cBW-k.js

@@ -0,0 +1,239 @@
+"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 InputCaption = require("./InputCaption-BL_NLjoT.js");
+const Text = require("./Text-C6DuTMMj.js");
+const Icon = require("./Icon-BlcrcY3U.js");
+const UnstyledButton = require("./UnstyledButton-yd6ZL2Yi.js");
+const InputIcon = require("./InputIcon-Djdhmk7P.js");
+const useTextField = require("./useTextField-DM-ZTn9j.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);
+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 } = useTextField.$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(InputCaption.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(InputCaption.InputCaption, __spreadValues({
+    variant: showHelperText ? "helper" : "error"
+  }, captionProps), captionText));
+}
+exports.InputField = InputField;

package/__chunks__/InputField-BEQE01Ks.mjs

@@ -0,0 +1,224 @@
+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, { useState } from "react";
+import { classNames, variationName } from "../utilities/css.mjs";
+import { L as Label, I as InputCaption } from "./InputCaption-CWtoKFv-.mjs";
+import { T as Text } from "./Text-BY4p1xZ-.mjs";
+import { I as Icon } from "./Icon-CQ73-QIg.mjs";
+import { U as UnstyledButton } from "./UnstyledButton-D_DzFe67.mjs";
+import { s as styles, m as mapIconSize, g as getElementType, a as logWarningsForInvalidPropConfiguration, l as logWarningForMissingAriaLabel, I as InputIcon } from "./InputIcon-CktsE7z9.mjs";
+import { $ as $2d73ec29415bd339$export$712718f7aec83d5 } from "./useTextField-CspDdKaL.mjs";
+import { $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "./useHover-BOYR4wqI.mjs";
+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
+};

package/__chunks__/InputIcon-CktsE7z9.mjs

@@ -0,0 +1,112 @@
+import React__default from "react";
+import { I as Icon } from "./Icon-CQ73-QIg.mjs";
+import { classNames, variationName } from "../utilities/css.mjs";
+const root = "_root_mlyic_5";
+const inputIconContainer = "_inputIconContainer_mlyic_26";
+const label = "_label_mlyic_32";
+const input = "_input_mlyic_26";
+const errorInput = "_errorInput_mlyic_68";
+const inputSizeSm = "_inputSizeSm_mlyic_76";
+const inputSizeLg = "_inputSizeLg_mlyic_88";
+const passwordInput = "_passwordInput_mlyic_94";
+const passwordBtn = "_passwordBtn_mlyic_104";
+const hovered = "_hovered_mlyic_130";
+const textArea = "_textArea_mlyic_139";
+const passwordBtnError = "_passwordBtnError_mlyic_144";
+const passwordBtnSm = "_passwordBtnSm_mlyic_150";
+const passwordBtnLg = "_passwordBtnLg_mlyic_155";
+const icon = "_icon_mlyic_160";
+const iconDisabled = "_iconDisabled_mlyic_171";
+const iconStart = "_iconStart_mlyic_175";
+const iconEnd = "_iconEnd_mlyic_179";
+const iconStartInput = "_iconStartInput_mlyic_183";
+const iconEndInput = "_iconEndInput_mlyic_187";
+const inputIconPlacementSm = "_inputIconPlacementSm_mlyic_191";
+const inputIconPlacementLg = "_inputIconPlacementLg_mlyic_195";
+const caption = "_caption_mlyic_199";
+const textStartInput = "_textStartInput_mlyic_203";
+const textEndInput = "_textEndInput_mlyic_207";
+const text = "_text_mlyic_139";
+const inputTextPlacementSm = "_inputTextPlacementSm_mlyic_224";
+const inputTextPlacementLg = "_inputTextPlacementLg_mlyic_230";
+const textStart = "_textStart_mlyic_203";
+const textEnd = "_textEnd_mlyic_207";
+const styles = {
+  root,
+  inputIconContainer,
+  label,
+  input,
+  errorInput,
+  inputSizeSm,
+  inputSizeLg,
+  passwordInput,
+  passwordBtn,
+  hovered,
+  textArea,
+  passwordBtnError,
+  passwordBtnSm,
+  passwordBtnLg,
+  icon,
+  iconDisabled,
+  iconStart,
+  iconEnd,
+  iconStartInput,
+  iconEndInput,
+  inputIconPlacementSm,
+  inputIconPlacementLg,
+  caption,
+  textStartInput,
+  textEndInput,
+  text,
+  inputTextPlacementSm,
+  inputTextPlacementLg,
+  textStart,
+  textEnd
+};
+function mapIconSize(size) {
+  if (size === "sm") {
+    return "xs";
+  } else if (size === "lg") {
+    return "md";
+  }
+  return size;
+}
+function logWarningsForInvalidPropConfiguration(bothIconPropsDefined, smallSizeTextarea, definedIconsWithTextarea, iconAndTextPropsDefined) {
+  if (bothIconPropsDefined) {
+    console.warn("Cannot simultaneously define `iconAtEnd` and `iconAtStart`");
+  }
+  if (smallSizeTextarea) {
+    console.warn("`textarea` cannot be defined with size `sm`");
+  }
+  if (definedIconsWithTextarea) {
+    console.warn("Cannot define `textarea` with `iconAtEnd` or `iconAtStart`");
+  }
+  if (iconAndTextPropsDefined) {
+    console.warn("Cannot simultaneously define `iconAtEnd` and `textAtEnd` or `iconAtStart` and `textAtStart`");
+  }
+}
+function logWarningForMissingAriaLabel(label2, ariaLabel) {
+  if (!label2 && !ariaLabel) {
+    console.warn("An aria-label must be provided if omitting `label`");
+  }
+}
+function getElementType(isMultiline) {
+  return isMultiline ? "textarea" : "input";
+}
+function InputIcon(props) {
+  const { alignment = "start", size = "md", isDisabled = false, icon: icon2 } = props;
+  return React__default.createElement("div", {
+    className: classNames(styles.icon, alignment === "start" ? styles.iconStart : styles.iconEnd, isDisabled && styles.iconDisabled, styles[variationName("inputIconPlacement", size)])
+  }, React__default.createElement(Icon, {
+    symbol: icon2,
+    size: mapIconSize(size)
+  }));
+}
+export {
+  InputIcon as I,
+  logWarningsForInvalidPropConfiguration as a,
+  getElementType as g,
+  logWarningForMissingAriaLabel as l,
+  mapIconSize as m,
+  styles as s
+};