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

package/InputField/index.js

@@ -1,13 +1,285 @@
 "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));
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const InputField = require("../__chunks__/InputField-4fbaae06.js");
-require("react");
-require("../utilities/css.js");
-require("../__chunks__/Text-1ae70c19.js");
-require("../__chunks__/Icon-3d00481a.js");
-require("../__chunks__/UnstyledButton-96172ec0.js");
-require("../__chunks__/import-63bf0645.js");
+const React = require("react");
+const utilities_css = require("../utilities/css.js");
+const InputIcon = require("../__chunks__/InputIcon-d3963cf8.js");
+const Text_index = require("../Text/index.js");
+const Icon_index = require("../Icon/index.js");
+const UnstyledButton_index = require("../__chunks__/index-3985350a.js");
+const _import$2 = require("../__chunks__/import-a1e0f814.js");
+const _import$1 = require("../__chunks__/import-24a482e1.js");
+const _import = require("../__chunks__/import-2b302763.js");
 require("../__chunks__/omit-fca26542.js");
-require("../__chunks__/import-0d1b4d93.js");
-require("../__chunks__/import-01299af6.js");
-exports.InputField = InputField.InputField;
+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, validationState, type = "text", onChange = () => {
+  } } = props;
+  let { focusableProps } = _import.$e6afbd83fe6ebbd2$export$4c014de7c8940b4c(props, ref);
+  let { labelProps, fieldProps, descriptionProps, errorMessageProps } = _import$1.$2baaea4c71418dea$export$294aa081a6c6f55d(props);
+  let domProps = _import$2.$65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
+    labelable: true
+  });
+  const inputOnlyProps = {
+    type,
+    pattern: props.pattern
+  };
+  return {
+    labelProps,
+    inputProps: _import$2.$3ef42575df84b30b$export$9d1611c77c2fe928(domProps, inputElementType === "input" && inputOnlyProps, __spreadValues(__spreadValues({
+      disabled: isDisabled,
+      readOnly: isReadOnly,
+      "aria-required": isRequired || void 0,
+      "aria-invalid": validationState === "invalid" || void 0,
+      "aria-errormessage": props["aria-errormessage"],
+      "aria-activedescendant": props["aria-activedescendant"],
+      "aria-autocomplete": props["aria-autocomplete"],
+      "aria-haspopup": props["aria-haspopup"],
+      value: props.value,
+      defaultValue: props.value ? void 0 : props.defaultValue,
+      onChange: (e) => onChange(e.target.value),
+      autoComplete: props.autoComplete,
+      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
+  };
+}
+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.208-344.232q64.638 0 110.099-45.669 45.461-45.67 45.461-110.307 0-64.638-45.669-110.099-45.67-45.461-110.307-45.461-64.638 0-110.099 45.669-45.461 45.67-45.461 110.307 0 64.638 45.669 110.099 45.67 45.461 110.307 45.461Zm-.511-44.922q-46.312 0-78.428-32.418-32.115-32.419-32.115-78.731t32.418-78.428q32.419-32.115 78.731-32.115t78.428 32.418q32.115 32.419 32.115 78.731t-32.418 78.428q-32.419 32.115-78.731 32.115Zm.358 169.153q-137.593 0-249.823-77.038Q118.001-374.078 61.54-500q56.461-125.922 168.637-202.961 112.175-77.038 249.768-77.038 137.593 0 249.823 77.038Q841.999-625.922 898.46-500q-56.461 125.922-168.637 202.961-112.175 77.038-249.768 77.038ZM480-500Zm-.169 234.615q119.246 0 218.823-63.769Q798.23-392.923 850.461-500 798.23-607.077 698.822-670.846q-99.408-63.769-218.653-63.769-119.246 0-218.823 63.769Q161.77-607.077 108.924-500q52.846 107.077 152.254 170.846 99.408 63.769 218.653 63.769Z"
+  }));
+};
+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.153-434.386-34.768-34.768q21.384-67.539-28.539-111.461-49.923-43.923-107.692-24.77l-34.768-34.768q13.538-7.923 30.307-11.769T480-655.768q65.23 0 110.499 45.269Q635.768-565.23 635.768-500q0 18.538-4.154 35.999-4.153 17.462-11.461 29.615Zm127.846 126.692-31.153-29.999q45.923-34.077 80.692-75.884 34.769-41.808 52.923-86.423-50-108.307-148.461-171.461-98.462-63.154-214.693-63.154-38.538 0-78.114 7.038-39.577 7.039-65.346 16.885l-34.846-35.461q33.462-14.461 81.423-24.153 47.961-9.693 93.422-9.693 134.538 0 248.038 76.115Q845.383-627.769 898.46-500q-24.461 57.461-62.192 105.653-37.731 48.192-88.269 86.653Zm59.923 216.769-161.845-160q-30.769 13.616-74.384 22.27-43.616 8.654-91.693 8.654-137.538 0-250.768-76.115Q116.001-372.231 61.54-500q21.539-52.385 59.154-101.115 37.616-48.731 87.077-89.115L85.233-812.384l31.999-32.615L837.691-124.54l-29.769 33.615ZM238.77-658.231q-37.384 26.231-74.961 71-37.578 44.769-54.885 87.231 50.615 108.307 150.807 171.461 100.192 63.154 225.961 63.154 37.231 0 73.655-5.731 36.423-5.731 52.423-14.115l-70.924-70.924q-10.615 5.385-28.346 8.654t-32.5 3.269q-64.615 0-110.192-44.961Q324.232-434.154 324.232-500q0-15 3.269-31.923t8.654-28.923l-97.385-97.385ZM531.462-517Zm-105.999 53.384Z"
+  }));
+};
+function PasswordButton(props) {
+  const { hasError = false, inputSize = "md", isDisabled = false, isPasswordVisible = false, toggleVisibility, isInputHovered = false } = props;
+  return React.createElement(UnstyledButton_index.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_index.Text, {
+    visuallyHidden: true
+  }, "password visibility"), React.createElement(Icon_index.Icon, {
+    symbol: isPasswordVisible ? Visibility : VisibilityOff,
+    size: InputIcon.mapIconSize(inputSize)
+  }));
+}
+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", isLabelVisuallyHidden = false, isDisabled = false, isRequired = false, validationState = "valid", isLabelEmphasized = false, autoFocus = false, label, errorText, helperText, placeholder, value, defaultValue, iconAtStart, iconAtEnd, 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 } = _import.$6179b936705e76d3$export$ae780daf29e6d456(props);
+  const Component = InputIcon.getElementType(isMultiline);
+  const bothIconPropsDefined = !!iconAtEnd && !!iconAtStart;
+  const smallSizeTextarea = size === "sm" && Component === "textarea";
+  const definedIconsWithTextarea = (!!iconAtEnd || !!iconAtStart) && Component === "textarea";
+  InputIcon.logWarningsForInvalidPropConfiguration(bothIconPropsDefined, smallSizeTextarea, definedIconsWithTextarea);
+  const isPassword = type === "password";
+  const hasError = validationState === "invalid";
+  const showErrorText = hasError && errorText;
+  const showHelperText = !showErrorText && helperText;
+  const canUseIcon = !bothIconPropsDefined && !isPassword && !definedIconsWithTextarea;
+  const hasStartIcon = canUseIcon && iconAtStart;
+  const hasEndIcon = canUseIcon && iconAtEnd;
+  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, 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)
+  }, React.createElement(InputIcon.Label, __spreadValues({
+    isLabelVisuallyHidden,
+    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
+  }), 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
+  })), 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/InputField/index.mjs

@@ -1,13 +1,269 @@
-import { I } from "../__chunks__/InputField-a272f602.mjs";
-import "react";
-import "../utilities/css.mjs";
-import "../__chunks__/Text-4ae50d5c.mjs";
-import "../__chunks__/Icon-a75b5201.mjs";
-import "../__chunks__/UnstyledButton-883f0c6c.mjs";
-import "../__chunks__/import-b7971a11.mjs";
+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 { s as styles, m as mapIconSize, g as getElementType, l as logWarningsForInvalidPropConfiguration, L as Label, I as InputIcon, a as InputCaption } from "../__chunks__/InputIcon-2317befd.mjs";
+import { Text } from "../Text/index.mjs";
+import { Icon } from "../Icon/index.mjs";
+import { U as UnstyledButton } from "../__chunks__/index-29d7bca9.mjs";
+import { d as $65484d02dcb7eb3e$export$457c3d6518dd4c6f, a as $3ef42575df84b30b$export$9d1611c77c2fe928 } from "../__chunks__/import-19bc38ac.mjs";
+import { $ as $2baaea4c71418dea$export$294aa081a6c6f55d } from "../__chunks__/import-29af6941.mjs";
+import { a as $e6afbd83fe6ebbd2$export$4c014de7c8940b4c, f as $6179b936705e76d3$export$ae780daf29e6d456 } from "../__chunks__/import-3d962a94.mjs";
 import "../__chunks__/omit-f17deb8f.mjs";
-import "../__chunks__/import-ab878fb6.mjs";
-import "../__chunks__/import-baa3cd0c.mjs";
+function $2d73ec29415bd339$export$712718f7aec83d5(props, ref) {
+  let { inputElementType = "input", isDisabled = false, isRequired = false, isReadOnly = false, validationState, type = "text", onChange = () => {
+  } } = props;
+  let { focusableProps } = $e6afbd83fe6ebbd2$export$4c014de7c8940b4c(props, ref);
+  let { labelProps, fieldProps, descriptionProps, errorMessageProps } = $2baaea4c71418dea$export$294aa081a6c6f55d(props);
+  let domProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
+    labelable: true
+  });
+  const inputOnlyProps = {
+    type,
+    pattern: props.pattern
+  };
+  return {
+    labelProps,
+    inputProps: $3ef42575df84b30b$export$9d1611c77c2fe928(domProps, inputElementType === "input" && inputOnlyProps, __spreadValues(__spreadValues({
+      disabled: isDisabled,
+      readOnly: isReadOnly,
+      "aria-required": isRequired || void 0,
+      "aria-invalid": validationState === "invalid" || void 0,
+      "aria-errormessage": props["aria-errormessage"],
+      "aria-activedescendant": props["aria-activedescendant"],
+      "aria-autocomplete": props["aria-autocomplete"],
+      "aria-haspopup": props["aria-haspopup"],
+      value: props.value,
+      defaultValue: props.value ? void 0 : props.defaultValue,
+      onChange: (e) => onChange(e.target.value),
+      autoComplete: props.autoComplete,
+      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
+  };
+}
+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.208-344.232q64.638 0 110.099-45.669 45.461-45.67 45.461-110.307 0-64.638-45.669-110.099-45.67-45.461-110.307-45.461-64.638 0-110.099 45.669-45.461 45.67-45.461 110.307 0 64.638 45.669 110.099 45.67 45.461 110.307 45.461Zm-.511-44.922q-46.312 0-78.428-32.418-32.115-32.419-32.115-78.731t32.418-78.428q32.419-32.115 78.731-32.115t78.428 32.418q32.115 32.419 32.115 78.731t-32.418 78.428q-32.419 32.115-78.731 32.115Zm.358 169.153q-137.593 0-249.823-77.038Q118.001-374.078 61.54-500q56.461-125.922 168.637-202.961 112.175-77.038 249.768-77.038 137.593 0 249.823 77.038Q841.999-625.922 898.46-500q-56.461 125.922-168.637 202.961-112.175 77.038-249.768 77.038ZM480-500Zm-.169 234.615q119.246 0 218.823-63.769Q798.23-392.923 850.461-500 798.23-607.077 698.822-670.846q-99.408-63.769-218.653-63.769-119.246 0-218.823 63.769Q161.77-607.077 108.924-500q52.846 107.077 152.254 170.846 99.408 63.769 218.653 63.769Z"
+  }));
+};
+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.153-434.386-34.768-34.768q21.384-67.539-28.539-111.461-49.923-43.923-107.692-24.77l-34.768-34.768q13.538-7.923 30.307-11.769T480-655.768q65.23 0 110.499 45.269Q635.768-565.23 635.768-500q0 18.538-4.154 35.999-4.153 17.462-11.461 29.615Zm127.846 126.692-31.153-29.999q45.923-34.077 80.692-75.884 34.769-41.808 52.923-86.423-50-108.307-148.461-171.461-98.462-63.154-214.693-63.154-38.538 0-78.114 7.038-39.577 7.039-65.346 16.885l-34.846-35.461q33.462-14.461 81.423-24.153 47.961-9.693 93.422-9.693 134.538 0 248.038 76.115Q845.383-627.769 898.46-500q-24.461 57.461-62.192 105.653-37.731 48.192-88.269 86.653Zm59.923 216.769-161.845-160q-30.769 13.616-74.384 22.27-43.616 8.654-91.693 8.654-137.538 0-250.768-76.115Q116.001-372.231 61.54-500q21.539-52.385 59.154-101.115 37.616-48.731 87.077-89.115L85.233-812.384l31.999-32.615L837.691-124.54l-29.769 33.615ZM238.77-658.231q-37.384 26.231-74.961 71-37.578 44.769-54.885 87.231 50.615 108.307 150.807 171.461 100.192 63.154 225.961 63.154 37.231 0 73.655-5.731 36.423-5.731 52.423-14.115l-70.924-70.924q-10.615 5.385-28.346 8.654t-32.5 3.269q-64.615 0-110.192-44.961Q324.232-434.154 324.232-500q0-15 3.269-31.923t8.654-28.923l-97.385-97.385ZM531.462-517Zm-105.999 53.384Z"
+  }));
+};
+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 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", isLabelVisuallyHidden = false, isDisabled = false, isRequired = false, validationState = "valid", isLabelEmphasized = false, autoFocus = false, label, errorText, helperText, placeholder, value, defaultValue, iconAtStart, iconAtEnd, 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 smallSizeTextarea = size === "sm" && Component === "textarea";
+  const definedIconsWithTextarea = (!!iconAtEnd || !!iconAtStart) && Component === "textarea";
+  logWarningsForInvalidPropConfiguration(bothIconPropsDefined, smallSizeTextarea, definedIconsWithTextarea);
+  const isPassword = type === "password";
+  const hasError = validationState === "invalid";
+  const showErrorText = hasError && errorText;
+  const showHelperText = !showErrorText && helperText;
+  const canUseIcon = !bothIconPropsDefined && !isPassword && !definedIconsWithTextarea;
+  const hasStartIcon = canUseIcon && iconAtStart;
+  const hasEndIcon = canUseIcon && iconAtEnd;
+  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, styles[variationName("inputSize", adjustedSize)]);
+  const inputType = Component === "textarea" ? void 0 : isTypeAdjustedForPasswordVisibility ? "text" : type;
+  return React__default.createElement("div", {
+    className: classNames(styles.root)
+  }, React__default.createElement(Label, __spreadValues({
+    isLabelVisuallyHidden,
+    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
+  }), 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
+  })), 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 {
-  I as InputField
+  InputField
 };

package/InputField/utilities.d.ts

@@ -1,5 +1,5 @@
 import { InputSize } from "./InputField";
-/** Small textfield needs xs icon */
+/** Small fields need xs icon */
 export declare function mapIconSize(size: InputSize): "md" | "xs";
 export declare function logWarningsForInvalidPropConfiguration(bothIconPropsDefined: boolean, smallSizeTextarea: boolean, definedIconsWithTextarea: boolean): void;
 export declare function getElementType(isMultiline: boolean): "input" | "textarea";

package/InputField/utilities.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utilities.d.ts","sourceRoot":"","sources":["../../src/InputField/utilities.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,oCAAoC;AACpC,wBAAgB,WAAW,CAAC,IAAI,EAAE,SAAS,eAO1C;AAED,wBAAgB,sCAAsC,CACpD,oBAAoB,EAAE,OAAO,EAC7B,iBAAiB,EAAE,OAAO,EAC1B,wBAAwB,EAAE,OAAO,QAalC;AAED,wBAAgB,cAAc,CAAC,WAAW,EAAE,OAAO,wBAElD"}
+{"version":3,"file":"utilities.d.ts","sourceRoot":"","sources":["../../src/InputField/utilities.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,gCAAgC;AAChC,wBAAgB,WAAW,CAAC,IAAI,EAAE,SAAS,eAO1C;AAED,wBAAgB,sCAAsC,CACpD,oBAAoB,EAAE,OAAO,EAC7B,iBAAiB,EAAE,OAAO,EAC1B,wBAAwB,EAAE,OAAO,QAalC;AAED,wBAAgB,cAAc,CAAC,WAAW,EAAE,OAAO,wBAElD"}

package/Menu/MenuOverlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuOverlay.d.ts","sourceRoot":"","sources":["../../src/Menu/MenuOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,KAAK,EAAE,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAGL,SAAS,EAIV,MAAM,YAAY,CAAC;AAEpB,OAAO,EACL,cAAc,EAIf,MAAM,kBAAkB,CAAC;AAgB1B,MAAM,MAAM,gBAAgB,GACxB,MAAM,GACN,aAAa,GACb,cAAc,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;AAEpC,MAAM,MAAM,gBAAgB,CAAC,CAAC,IAAI;IAChC,gCAAgC;IAChC,QAAQ,EAAE,kBAAkB,CAAC,CAAC,CAAC,CAAC;IAEhC,8GAA8G;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IAE7B,wDAAwD;IACxD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B,uDAAuD;IACvD,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;IAE9B,iFAAiF;IACjF,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC;CAC1B,CAAC;AAEF,wBAAgB,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,4BAMvE"}
+{"version":3,"file":"MenuOverlay.d.ts","sourceRoot":"","sources":["../../src/Menu/MenuOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,KAAK,EAAE,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAGL,SAAS,EAIV,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAkBlD,MAAM,MAAM,gBAAgB,GACxB,MAAM,GACN,aAAa,GACb,cAAc,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;AAEpC,MAAM,MAAM,gBAAgB,CAAC,CAAC,IAAI;IAChC,gCAAgC;IAChC,QAAQ,EAAE,kBAAkB,CAAC,CAAC,CAAC,CAAC;IAEhC,8GAA8G;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IAE7B,wDAAwD;IACxD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B,uDAAuD;IACvD,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;IAE9B,iFAAiF;IACjF,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC;CAC1B,CAAC;AAEF,wBAAgB,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,4BAMvE"}