jattac.libs.web.zest-textbox 0.1.8 → 0.2.1

package/dist/index.d.ts

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 
 type ZestTextboxSize = "sm" | "md" | "lg";
+type ZestConfigValue<T> = T | (() => T) | (() => Promise<T>);
 interface HelperTextConfig {
     /**
      * A function to process the raw input value into a new string.
@@ -23,12 +24,12 @@ interface HelperTextConfig {
      */
     className?: string;
 }
-type SharedProps = {
+interface ZestProps {
     /**
      * An object to configure the dynamic helper text displayed below the input.
      * @see HelperTextConfig
      */
-    helperTextConfig?: HelperTextConfig;
+    helperTextConfig?: ZestConfigValue<HelperTextConfig>;
     /**
      * A callback that provides the raw string value of the input on every change.
      * This is a convenience prop to avoid using `event.target.value`.
@@ -39,39 +40,54 @@ type SharedProps = {
      * Sets the size of the textbox, affecting padding and font size.
      * @default 'md'
      */
-    zSize?: ZestTextboxSize;
+    zSize?: ZestConfigValue<ZestTextboxSize>;
     /**
      * If `true`, the component will stretch to the full width of its container.
      * @default false
      */
-    stretch?: boolean;
-    /**
-     * A custom CSS class to apply to the main textbox element.
-     */
-    className?: string;
-    /**
-     * The maximum number of characters allowed in the input.
-     * Enables the character counter.
-     */
-    maxLength?: number;
+    stretch?: ZestConfigValue<boolean>;
     /**
      * If `true`, a progress bar indicating character count vs. `maxLength` will be displayed.
      * Requires `maxLength` to be set.
      * @default false
      */
-    showProgressBar?: boolean;
+    showProgressBar?: ZestConfigValue<boolean>;
     /**
      * If `true`, the character counter will change color as it approaches the `maxLength`.
      * Requires `maxLength` to be set.
      * @default false
      */
-    animatedCounter?: boolean;
+    animatedCounter?: ZestConfigValue<boolean>;
     /**
      * Controls the component's color scheme.
      * `'system'` automatically detects the OS/browser preference.
      * @default 'system'
      */
-    theme?: "light" | "dark" | "system";
+    theme?: ZestConfigValue<"light" | "dark" | "system">;
+    /**
+     * If `true`, the component will render as a `<textarea>`.
+     * If `false` or undefined, it renders as an `<input>`.
+     * @default false
+     */
+    isMultiline?: ZestConfigValue<boolean>;
+}
+
+type SharedProps = {
+    /**
+     * An object containing all custom configurations and behaviors specific to the ZestTextbox component.
+     * This encapsulates all non-native HTML input/textarea props for better discoverability and DX.
+     * @see ZestProps
+     */
+    zest?: ZestProps;
+    /**
+     * A custom CSS class to apply to the main textbox element.
+     */
+    className?: string;
+    /**
+     * The maximum number of characters allowed in the input.
+     * Enables the character counter.
+     */
+    maxLength?: number;
     /**
      * The type of the input element. All standard HTML input types are supported.
      * Special handling is applied for `password` and `number`.
@@ -80,21 +96,48 @@ type SharedProps = {
     type?: "text" | "email" | "password" | "number" | "tel" | "url" | "search" | "color" | "date" | "datetime-local" | "month" | "time" | "week";
 };
 type InputOnlyProps = SharedProps & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "onChange"> & {
-    /**
-     * If `false` or undefined, the component will render as an `<input>`.
-     * @default false
-     */
-    isMultiline?: false;
     onChange?: React.ChangeEventHandler<HTMLInputElement>;
 };
 type TextareaOnlyProps = SharedProps & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange"> & {
-    /**
-     * If `true`, the component will render as a `<textarea>`.
-     */
-    isMultiline: true;
     onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
 };
 type ZestTextboxProps = InputOnlyProps | TextareaOnlyProps;
 declare const ZestTextbox: React.FC<ZestTextboxProps>;
 
-export { ZestTextbox as default };
+interface PasswordToggleButtonProps {
+    isPassword: boolean;
+    isPasswordVisible: boolean;
+    onToggle: () => void;
+}
+declare const PasswordToggleButton: React.FC<PasswordToggleButtonProps>;
+
+interface CharacterCounterProps {
+    showCounter: boolean;
+    currentLength: number;
+    maxLength: number | undefined;
+    counterColorClass: string;
+}
+declare const CharacterCounter: React.FC<CharacterCounterProps>;
+
+interface ProgressBarProps {
+    showProgressBar: boolean;
+    showCounter: boolean;
+    charPercentage: number;
+    counterColorClass: string;
+}
+declare const ProgressBar: React.FC<ProgressBarProps>;
+
+interface HelperTextDisplayProps {
+    helperTextNode: ReactNode;
+    className?: string;
+}
+declare const HelperTextDisplay: React.FC<HelperTextDisplayProps>;
+
+interface ZestTextboxConfigProviderProps {
+    children: ReactNode;
+    value?: ZestProps;
+}
+declare const ZestTextboxConfigProvider: React.FC<ZestTextboxConfigProviderProps>;
+
+export { CharacterCounter, HelperTextDisplay, PasswordToggleButton, ProgressBar, ZestTextbox, ZestTextboxConfigProvider };
+export type { HelperTextConfig, ZestProps, ZestTextboxSize };

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo, createContext, useContext } from 'react';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -41,6 +41,44 @@ function __rest(s, e) {
     return t;
 }
 
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+function __generator(thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+}
+
 typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
     var e = new Error(message);
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
@@ -73,35 +111,33 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "/* === Base Textbox Styles (input & textarea) === */\n.ZestTextbox-module_textbox__0M5Wq {\n  font-family: \"Segoe UI\", Roboto, sans-serif;\n  font-weight: 500;\n  line-height: 1.25;\n  border: 1px solid #ccc;\n  border-radius: 0.5rem; /* 8px */\n  color: #111827;\n  background-color: #ffffff;\n  transition: border-color 0.2s ease, box-shadow 0.2s ease;\n  display: inline-block;\n  width: auto;\n  box-sizing: border-box;\n  resize: none;\n  font-size: 1rem; /* 16px */\n  padding-bottom: 2rem; /* 32px */\n}\n\n.ZestTextbox-module_textbox__0M5Wq:focus {\n  outline: none;\n  border-color: #8B5CF6;\n  box-shadow: 0 0 0 0.125rem rgba(139, 92, 246, 0.25); /* 2px */\n  animation: ZestTextbox-module_pulse-light__CKfhA 0.5s 1;\n}\n\n/* === Sizes === */\n.ZestTextbox-module_sm__yyxXO {\n  padding: 0.5rem 0.75rem; /* 8px 12px */\n  font-size: 0.875rem; /* 14px */\n}\n\n.ZestTextbox-module_md__fvL10 {\n  padding: 0.625rem 0.875rem; /* 10px 14px */\n  font-size: 1rem; /* 16px */\n}\n\n.ZestTextbox-module_lg__fU93- {\n  padding: 0.75rem 1rem; /* 12px 16px */\n  font-size: 1.125rem; /* 18px */\n}\n\n/* === Full Width === */\n.ZestTextbox-module_fullWidth__xn4fT {\n  width: 100%;\n}\n\n/* === Disabled State === */\n.ZestTextbox-module_textbox__0M5Wq:disabled {\n  background-color: #f3f4f6;\n  color: #9ca3af;\n  cursor: not-allowed;\n  pointer-events: none;\n  border-color: #d1d5db;\n}\n\n/* === Multiline (textarea) specific enhancements === */\ntextarea.ZestTextbox-module_textbox__0M5Wq {\n  min-height: 6.25rem; /* 100px */\n  line-height: 1.5;\n  resize: vertical;\n}\n\n.ZestTextbox-module_wrapper__0ok2A {\n  position: relative;\n  display: inline-block;\n}\n\n.ZestTextbox-module_counter__waqIT {\n  position: absolute;\n  right: 0.625rem; /* 10px */\n  bottom: 0.375rem; /* 6px */\n  font-size: 0.75rem;\n  color: #6b7280;\n  pointer-events: none;\n  user-select: none;\n}\n\n/* === Dark Mode Support === */\n.dark .ZestTextbox-module_textbox__0M5Wq {\n  background-color: #1f2937;\n  border-color: #374151;\n  color: #f3f4f6;\n}\n\n.dark .ZestTextbox-module_textbox__0M5Wq:focus {\n  border-color: #A78BFA;\n  box-shadow: 0 0 0 0.125rem rgba(167, 139, 250, 0.35); /* 2px */\n  animation: ZestTextbox-module_pulse-dark__L9PYJ 0.5s 1;\n}\n\n.dark .ZestTextbox-module_textbox__0M5Wq:disabled {\n  background-color: #374151;\n  color: #9ca3af;\n  border-color: #4b5563;\n}\n\n.dark .ZestTextbox-module_counter__waqIT {\n  color: #9ca3af;\n}\n\n/* === Password Toggle === */\n.ZestTextbox-module_passwordToggle__I2s4O {\n  position: absolute;\n  right: 0.625rem; /* 10px */\n  top: 50%;\n  transform: translateY(-50%);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #6b7280;\n}\n\n.ZestTextbox-module_eyeIcon__rKiBL {\n  width: 1.25em;\n  height: 1.25em;\n  transition: transform 0.2s ease-in-out;\n}\n\n.ZestTextbox-module_rotate__Ajx19 {\n  transform: rotate(180deg);\n}\n\n.ZestTextbox-module_tooltip__etRdj {\n  position: absolute;\n  right: 100%;\n  top: 50%;\n  transform: translateY(-50%);\n  background-color: #333;\n  color: #fff;\n  padding: 0.25rem 0.5rem; /* 4px 8px */\n  border-radius: 0.25rem; /* 4px */\n  font-size: 0.75rem;\n  white-space: nowrap;\n  margin-right: 0.5rem; /* 8px */\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity 0.2s ease, visibility 0.2s ease;\n}\n\n.ZestTextbox-module_passwordToggle__I2s4O:hover .ZestTextbox-module_tooltip__etRdj {\n  opacity: 1;\n  visibility: visible;\n}\n\n.dark .ZestTextbox-module_passwordToggle__I2s4O {\n  color: #9ca3af;\n}\n\n.dark .ZestTextbox-module_tooltip__etRdj {\n  background-color: #4b5563;\n  color: #f3f4f6;\n}\n\n/* === Progress Bar === */\n.ZestTextbox-module_progressBarContainer__0qFKf {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 0.1875rem; /* 3px */\n  background-color: #e5e7eb;\n  border-bottom-left-radius: 0.5rem; /* 8px */\n  border-bottom-right-radius: 0.5rem; /* 8px */\n  overflow: hidden;\n}\n\n.ZestTextbox-module_progressBar__vwttj {\n  height: 100%;\n  background-color: #8B5CF6;\n  transition: width 0.2s ease, background-color 0.3s ease;\n}\n\n/* === Animated Counter Colors === */\n.ZestTextbox-module_counterYellow__uYGfs {\n  color: #A78BFA;\n}\n\n.ZestTextbox-module_counterOrange__b9baX {\n  color: #8B5CF6;\n}\n\n.dark .ZestTextbox-module_progressBarContainer__0qFKf {\n  background-color: #374151;\n}\n\n.dark .ZestTextbox-module_progressBar__vwttj {\n  background-color: #A78BFA;\n}\n\n.dark .ZestTextbox-module_counterYellow__uYGfs {\n  color: #C4B5FD;\n}\n\n.dark .ZestTextbox-module_counterOrange__b9baX {\n  color: #A78BFA;\n}\n\n@keyframes ZestTextbox-module_pulse-light__CKfhA {\n  0% {\n    box-shadow: 0 0 0 0.125rem rgba(139, 92, 246, 0.25); /* 2px */\n  }\n  50% {\n    box-shadow: 0 0 0 0.25rem rgba(139, 92, 246, 0.35); /* 4px */\n  }\n  100% {\n    box-shadow: 0 0 0 0.125rem rgba(139, 92, 246, 0.25); /* 2px */\n  }\n}\n\n@keyframes ZestTextbox-module_pulse-dark__L9PYJ {\n  0% {\n    box-shadow: 0 0 0 0.125rem rgba(167, 139, 250, 0.35); /* 2px */\n  }\n  50% {\n    box-shadow: 0 0 0 0.25rem rgba(167, 139, 250, 0.45); /* 4px */\n  }\n  100% {\n    box-shadow: 0 0 0 0.125rem rgba(167, 139, 250, 0.35); /* 2px */\n  }\n}\n\n/* === Media Queries for Responsive Design === */\n@media (min-width: 48rem) { /* 768px */\n  /* Tablet */\n  .ZestTextbox-module_sm__yyxXO {\n    font-size: 0.875rem; /* 14px */\n  }\n  .ZestTextbox-module_md__fvL10 {\n    font-size: 1rem; /* 16px */\n  }\n  .ZestTextbox-module_lg__fU93- {\n    font-size: 1.125rem; /* 18px */\n  }\n}\n\n@media (min-width: 64rem) { /* 1024px */\n  /* Desktop */\n  .ZestTextbox-module_sm__yyxXO {\n    padding: 0.375rem 0.625rem; /* 6px 10px */\n    font-size: 0.875rem; /* 14px */\n  }\n  .ZestTextbox-module_md__fvL10 {\n    padding: 0.625rem 0.875rem; /* 10px 14px */\n    font-size: 1rem; /* 16px */\n  }\n  .ZestTextbox-module_lg__fU93- {\n    padding: 0.75rem 1rem; /* 12px 16px */\n    font-size: 1.125rem; /* 18px */\n  }\n}\n\n/* === Helper Text === */\n.ZestTextbox-module_helperText__4twSg {\n  font-size: 0.875rem; /* 14px */\n  color: #6b7280;\n  margin-top: 0.25rem; /* 4px */\n  animation: ZestTextbox-module_fade-slide-in__re-Ln 0.3s ease-out forwards;\n}\n\n.dark .ZestTextbox-module_helperText__4twSg {\n  color: #9ca3af;\n}\n\n@keyframes ZestTextbox-module_fade-slide-in__re-Ln {\n  from {\n    opacity: 0;\n    transform: translateY(5px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n";
+var css_248z = "/* === Base Textbox Styles (input & textarea) === */\n.ZestTextbox-module_textbox__0M5Wq {\n  font-family: \"Segoe UI\", Roboto, sans-serif;\n  font-weight: 500;\n  line-height: 1.25;\n  border: 1px solid #ccc;\n  border-radius: 0.5rem; /* 8px */\n  color: #111827;\n  background-color: #ffffff;\n  transition: border-color 0.2s ease, box-shadow 0.2s ease;\n  display: inline-block;\n  width: auto;\n  box-sizing: border-box;\n  resize: none;\n  font-size: 1rem; /* 16px */\n  padding-bottom: 0.5rem; /* Reduced padding to make space for progress bar */\n}\n\n.ZestTextbox-module_textbox__0M5Wq:focus {\n  outline: none;\n  border-color: #8B5CF6;\n  box-shadow: 0 0 0 0.125rem rgba(139, 92, 246, 0.25); /* 2px */\n  animation: ZestTextbox-module_pulse-light__CKfhA 0.5s 1;\n}\n\n/* === Sizes === */\n.ZestTextbox-module_sm__yyxXO {\n  padding: 0.5rem 0.75rem; /* 8px 12px */\n  font-size: 0.875rem; /* 14px */\n}\n\n.ZestTextbox-module_md__fvL10 {\n  padding: 0.625rem 0.875rem; /* 10px 14px */\n  font-size: 1rem; /* 16px */\n}\n\n.ZestTextbox-module_lg__fU93- {\n  padding: 0.75rem 1rem; /* 12px 16px */\n  font-size: 1.125rem; /* 18px */\n}\n\n/* === Full Width === */\n.ZestTextbox-module_fullWidth__xn4fT {\n  width: 100%;\n}\n\n/* === Disabled State === */\n.ZestTextbox-module_textbox__0M5Wq:disabled {\n  background-color: #f3f4f6;\n  color: #9ca3af;\n  cursor: not-allowed;\n  pointer-events: none;\n  border-color: #d1d5db;\n}\n\n/* === Multiline (textarea) specific enhancements === */\ntextarea.ZestTextbox-module_textbox__0M5Wq {\n  min-height: 6.25rem; /* 100px */\n  line-height: 1.5;\n  resize: vertical;\n}\n\n.ZestTextbox-module_wrapper__0ok2A {\n  position: relative;\n  display: inline-block;\n}\n\n.ZestTextbox-module_counter__waqIT {\n  position: absolute;\n  right: 0.625rem; /* 10px */\n  bottom: 0.375rem; /* 6px */\n  font-size: 0.75rem;\n  color: #6b7280;\n  pointer-events: none;\n  user-select: none;\n}\n\n/* === Dark Mode Support === */\n.dark .ZestTextbox-module_textbox__0M5Wq {\n  background-color: #1f2937;\n  border-color: #374151;\n  color: #f3f4f6;\n}\n\n.dark .ZestTextbox-module_textbox__0M5Wq:focus {\n  border-color: #A78BFA;\n  box-shadow: 0 0 0 0.125rem rgba(167, 139, 250, 0.35); /* 2px */\n  animation: ZestTextbox-module_pulse-dark__L9PYJ 0.5s 1;\n}\n\n.dark .ZestTextbox-module_textbox__0M5Wq:disabled {\n  background-color: #374151;\n  color: #9ca3af;\n  border-color: #4b5563;\n}\n\n.dark .ZestTextbox-module_counter__waqIT {\n  color: #9ca3af;\n}\n\n/* === Password Toggle === */\n.ZestTextbox-module_passwordToggle__I2s4O {\n  position: absolute;\n  right: 0.625rem; /* 10px */\n  top: 50%;\n  transform: translateY(-50%);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #6b7280;\n}\n\n.ZestTextbox-module_eyeIcon__rKiBL {\n  width: 1.25em;\n  height: 1.25em;\n  transition: transform 0.2s ease-in-out;\n}\n\n.ZestTextbox-module_rotate__Ajx19 {\n  transform: rotate(180deg);\n}\n\n.ZestTextbox-module_tooltip__etRdj {\n  position: absolute;\n  right: 100%;\n  top: 50%;\n  transform: translateY(-50%);\n  background-color: #333;\n  color: #fff;\n  padding: 0.25rem 0.5rem; /* 4px 8px */\n  border-radius: 0.25rem; /* 4px */\n  font-size: 0.75rem;\n  white-space: nowrap;\n  margin-right: 0.5rem; /* 8px */\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity 0.2s ease, visibility 0.2s ease;\n}\n\n.ZestTextbox-module_passwordToggle__I2s4O:hover .ZestTextbox-module_tooltip__etRdj {\n  opacity: 1;\n  visibility: visible;\n}\n\n.dark .ZestTextbox-module_passwordToggle__I2s4O {\n  color: #9ca3af;\n}\n\n.dark .ZestTextbox-module_tooltip__etRdj {\n  background-color: #4b5563;\n  color: #f3f4f6;\n}\n\n/* === Progress Bar === */\n.ZestTextbox-module_progressBarContainer__0qFKf {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 0.1875rem; /* 3px */\n  background-color: #e5e7eb;\n  border-bottom-left-radius: 0.5rem; /* 8px */\n  border-bottom-right-radius: 0.5rem; /* 8px */\n  overflow: hidden;\n}\n\n.ZestTextbox-module_progressBar__vwttj {\n  height: 100%;\n  background-color: #8B5CF6;\n  transition: width 0.2s ease, background-color 0.3s ease;\n}\n\n/* === Animated Counter Colors === */\n.ZestTextbox-module_counterYellow__uYGfs {\n  color: #A78BFA;\n}\n\n.ZestTextbox-module_counterOrange__b9baX {\n  color: #8B5CF6;\n}\n\n.dark .ZestTextbox-module_progressBarContainer__0qFKf {\n  background-color: #374151;\n}\n\n.dark .ZestTextbox-module_progressBar__vwttj {\n  background-color: #A78BFA;\n}\n\n.dark .ZestTextbox-module_counterYellow__uYGfs {\n  color: #C4B5FD;\n}\n\n.dark .ZestTextbox-module_counterOrange__b9baX {\n  color: #A78BFA;\n}\n\n@keyframes ZestTextbox-module_pulse-light__CKfhA {\n  0% {\n    box-shadow: 0 0 0 0.125rem rgba(139, 92, 246, 0.25); /* 2px */\n  }\n  50% {\n    box-shadow: 0 0 0 0.25rem rgba(139, 92, 246, 0.35); /* 4px */\n  }\n  100% {\n    box-shadow: 0 0 0 0.125rem rgba(139, 92, 246, 0.25); /* 2px */\n  }\n}\n\n@keyframes ZestTextbox-module_pulse-dark__L9PYJ {\n  0% {\n    box-shadow: 0 0 0 0.125rem rgba(167, 139, 250, 0.35); /* 2px */\n  }\n  50% {\n    box-shadow: 0 0 0 0.25rem rgba(167, 139, 250, 0.45); /* 4px */\n  }\n  100% {\n    box-shadow: 0 0 0 0.125rem rgba(167, 139, 250, 0.35); /* 2px */\n  }\n}\n\n/* === Media Queries for Responsive Design === */\n@media (min-width: 48rem) { /* 768px */\n  /* Tablet */\n  .ZestTextbox-module_sm__yyxXO {\n    font-size: 0.875rem; /* 14px */\n  }\n  .ZestTextbox-module_md__fvL10 {\n    font-size: 1rem; /* 16px */\n  }\n  .ZestTextbox-module_lg__fU93- {\n    font-size: 1.125rem; /* 18px */\n  }\n}\n\n@media (min-width: 64rem) { /* 1024px */\n  /* Desktop */\n  .ZestTextbox-module_sm__yyxXO {\n    padding: 0.375rem 0.625rem; /* 6px 10px */\n    font-size: 0.875rem; /* 14px */\n  }\n  .ZestTextbox-module_md__fvL10 {\n    padding: 0.625rem 0.875rem; /* 10px 14px */\n    font-size: 1rem; /* 16px */\n  }\n  .ZestTextbox-module_lg__fU93- {\n    padding: 0.75rem 1rem; /* 12px 16px */\n    font-size: 1.125rem; /* 18px */\n  }\n}\n\n/* === Helper Text === */\n.ZestTextbox-module_helperText__4twSg {\n  font-size: 0.875rem; /* 14px */\n  color: #6b7280;\n  margin-top: 0.25rem; /* 4px */\n  animation: ZestTextbox-module_fade-slide-in__re-Ln 0.3s ease-out forwards;\n}\n\n.dark .ZestTextbox-module_helperText__4twSg {\n  color: #9ca3af;\n}\n\n@keyframes ZestTextbox-module_fade-slide-in__re-Ln {\n  from {\n    opacity: 0;\n    transform: translateY(5px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n";
 var styles = {"textbox":"ZestTextbox-module_textbox__0M5Wq","pulse-light":"ZestTextbox-module_pulse-light__CKfhA","sm":"ZestTextbox-module_sm__yyxXO","md":"ZestTextbox-module_md__fvL10","lg":"ZestTextbox-module_lg__fU93-","fullWidth":"ZestTextbox-module_fullWidth__xn4fT","wrapper":"ZestTextbox-module_wrapper__0ok2A","counter":"ZestTextbox-module_counter__waqIT","pulse-dark":"ZestTextbox-module_pulse-dark__L9PYJ","passwordToggle":"ZestTextbox-module_passwordToggle__I2s4O","eyeIcon":"ZestTextbox-module_eyeIcon__rKiBL","rotate":"ZestTextbox-module_rotate__Ajx19","tooltip":"ZestTextbox-module_tooltip__etRdj","progressBarContainer":"ZestTextbox-module_progressBarContainer__0qFKf","progressBar":"ZestTextbox-module_progressBar__vwttj","counterYellow":"ZestTextbox-module_counterYellow__uYGfs","counterOrange":"ZestTextbox-module_counterOrange__b9baX","helperText":"ZestTextbox-module_helperText__4twSg","fade-slide-in":"ZestTextbox-module_fade-slide-in__re-Ln"};
 styleInject(css_248z);
 
-var IconEyeOpen = function (props) { return (jsxs("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16" }, props, { children: [jsx("path", { d: "M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8M1.173 8a13 13 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172 8z" }), jsx("path", { d: "M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0" })] }))); };
-
-var IconEyeSlashed = function (props) { return (jsxs("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16" }, props, { children: [jsx("path", { d: "M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z" }), jsx("path", { d: "M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.288.822.822.073.073.026.026a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829l.822.822zm-2.943-1.288.822.822.073.073.026.026a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829l.822.822z" }), jsx("path", { d: "M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.88 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 6.854-12-12 .708-.708 12 12-.708.708z" })] }))); };
+var filterNumericInput = function (value) {
+    // Allow digits, a single leading hyphen, and a single decimal point
+    var parts = value.split('.');
+    var integerPart = parts[0].replace(/[^0-9-]/g, '');
+    var decimalPart = parts.length > 1 ? '.' + parts[1].replace(/[^0-9]/g, '') : '';
+    // Ensure only one leading hyphen
+    if (integerPart.startsWith('-')) {
+        integerPart = '-' + integerPart.substring(1).replace(/-/g, '');
+    }
+    else {
+        integerPart = integerPart.replace(/-/g, '');
+    }
+    var newValue = integerPart + decimalPart;
+    // Prevent multiple decimal points
+    if (newValue.indexOf('.') !== -1 && newValue.indexOf('.') !== newValue.lastIndexOf('.')) {
+        newValue = newValue.substring(0, newValue.lastIndexOf('.'));
+    }
+    return newValue;
+};
 
-var ZestTextbox = function (props) {
-    var _a = props.zSize, zSize = _a === void 0 ? "md" : _a, _b = props.stretch, fullWidth = _b === void 0 ? false : _b, _c = props.className, className = _c === void 0 ? "" : _c, maxLength = props.maxLength, onChange = props.onChange, onTextChanged = props.onTextChanged, type = props.type, _d = props.showProgressBar, showProgressBar = _d === void 0 ? false : _d, _e = props.animatedCounter, animatedCounter = _e === void 0 ? false : _e, _f = props.theme, theme = _f === void 0 ? "system" : _f, helperTextConfig = props.helperTextConfig, rest = __rest(props, ["zSize", "stretch", "className", "maxLength", "onChange", "onTextChanged", "type", "showProgressBar", "animatedCounter", "theme", "helperTextConfig"]);
-    var _g = useState(""), value = _g[0], setValue = _g[1];
-    var _h = useState(false), isDark = _h[0], setIsDark = _h[1];
-    var _j = useState(false), isPasswordVisible = _j[0], setIsPasswordVisible = _j[1];
-    var _k = useState(null), helperTextNode = _k[0], setHelperTextNode = _k[1];
-    // Effect for Helper Text
-    useEffect(function () {
-        if (!helperTextConfig) {
-            setHelperTextNode(null);
-            return;
-        }
-        var formatted = helperTextConfig.formatter
-            ? helperTextConfig.formatter(value)
-            : value;
-        var finalNode = helperTextConfig.templater
-            ? helperTextConfig.templater(formatted)
-            : formatted;
-        setHelperTextNode(finalNode);
-    }, [value, helperTextConfig]);
-    // Effect for Theme Control
+var useThemeDetector = function (theme) {
+    if (theme === void 0) { theme = "system"; }
+    var _a = useState(false), isDark = _a[0], setIsDark = _a[1];
     useEffect(function () {
         if (theme === "dark") {
             setIsDark(true);
@@ -118,6 +154,209 @@ var ZestTextbox = function (props) {
         mediaQuery.addEventListener("change", handleChange);
         return function () { return mediaQuery.removeEventListener("change", handleChange); };
     }, [theme]);
+    return isDark;
+};
+
+var usePasswordVisibility = function (isPasswordType) {
+    var _a = useState(false), isPasswordVisible = _a[0], setIsPasswordVisible = _a[1];
+    var togglePasswordVisibility = function () {
+        if (isPasswordType) {
+            setIsPasswordVisible(function (prev) { return !prev; });
+        }
+    };
+    return { isPasswordVisible: isPasswordVisible, togglePasswordVisibility: togglePasswordVisibility };
+};
+
+var useCharacterCounter = function (value, maxLength, animatedCounter) {
+    var currentLength = value.length;
+    var showCounter = typeof maxLength === "number";
+    var charPercentage = showCounter ? (currentLength / maxLength) * 100 : 0;
+    var counterColorClass = useMemo(function () {
+        if (!animatedCounter || !showCounter)
+            return "";
+        if (charPercentage > 90) {
+            return styles.counterOrange;
+        }
+        else if (charPercentage > 70) {
+            return styles.counterYellow;
+        }
+        return "";
+    }, [animatedCounter, showCounter, charPercentage]);
+    return { currentLength: currentLength, charPercentage: charPercentage, counterColorClass: counterColorClass, showCounter: showCounter };
+};
+
+var useHelperText = function (value, helperTextConfig) {
+    var _a = useState(null), helperTextNode = _a[0], setHelperTextNode = _a[1];
+    useEffect(function () {
+        if (!helperTextConfig) {
+            setHelperTextNode(null);
+            return;
+        }
+        var formatted = helperTextConfig.formatter
+            ? helperTextConfig.formatter(value)
+            : value;
+        var finalNode = helperTextConfig.templater
+            ? helperTextConfig.templater(formatted)
+            : formatted;
+        setHelperTextNode(finalNode);
+    }, [value, helperTextConfig]);
+    return helperTextNode;
+};
+
+var IconEyeOpen = function (props) { return (jsxs("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16" }, props, { children: [jsx("path", { d: "M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8M1.173 8a13 13 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172 8z" }), jsx("path", { d: "M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0" })] }))); };
+
+var IconEyeSlashed = function (props) { return (jsxs("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16" }, props, { children: [jsx("path", { d: "M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z" }), jsx("path", { d: "M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.288.822.822.073.073.026.026a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829l.822.822zm-2.943-1.288.822.822.073.073.026.026a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829l.822.822z" }), jsx("path", { d: "M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.88 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 6.854-12-12 .708-.708 12 12-.708.708z" })] }))); };
+
+var PasswordToggleButton = function (_a) {
+    var isPassword = _a.isPassword, isPasswordVisible = _a.isPasswordVisible, onToggle = _a.onToggle;
+    if (!isPassword)
+        return null;
+    return (jsxs("div", { className: styles.passwordToggle, onClick: onToggle, children: [jsx("div", { className: styles.tooltip, children: isPasswordVisible ? "Hide password" : "Show password" }), isPasswordVisible ? (jsx(IconEyeOpen, { className: styles.eyeIcon })) : (jsx(IconEyeSlashed, { className: styles.eyeIcon }))] }));
+};
+
+var CharacterCounter = function (_a) {
+    var showCounter = _a.showCounter, currentLength = _a.currentLength, maxLength = _a.maxLength, counterColorClass = _a.counterColorClass;
+    if (!showCounter)
+        return null;
+    return (jsxs("div", { className: "".concat(styles.counter, " ").concat(counterColorClass), children: [currentLength, " / ", maxLength] }));
+};
+
+var ProgressBar = function (_a) {
+    var showProgressBar = _a.showProgressBar, showCounter = _a.showCounter, charPercentage = _a.charPercentage, counterColorClass = _a.counterColorClass;
+    if (!showProgressBar || !showCounter)
+        return null;
+    return (jsx("div", { className: styles.progressBarContainer, children: jsx("div", { className: "".concat(styles.progressBar, " ").concat(counterColorClass), style: { width: "".concat(charPercentage, "%") } }) }));
+};
+
+var HelperTextDisplay = function (_a) {
+    var helperTextNode = _a.helperTextNode, className = _a.className;
+    if (!helperTextNode)
+        return null;
+    return (jsx("div", { className: "".concat(styles.helperText, " ").concat(className || ""), children: helperTextNode }, String(helperTextNode)));
+};
+
+// Create the context with a default empty object
+var ZestTextboxConfigContext = createContext(undefined);
+var ZestTextboxConfigProvider = function (_a) {
+    var children = _a.children, _b = _a.value, value = _b === void 0 ? {} : _b;
+    return (jsx(ZestTextboxConfigContext.Provider, { value: { defaultZestProps: value }, children: children }));
+};
+// Custom hook to use the ZestTextboxConfigContext
+var useZestTextboxConfig$1 = function () {
+    var context = useContext(ZestTextboxConfigContext);
+    if (context === undefined) {
+        // This error will be caught by the useZestTextboxConfig hook in ZestTextbox.tsx
+        // if the component is used outside of a provider.
+        return { defaultZestProps: {} };
+    }
+    return context;
+};
+
+// Helper function to resolve a ZestConfigValue
+function resolveZestConfigValue(configValue, defaultValue) {
+    return __awaiter(this, void 0, void 0, function () {
+        var result, _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    if (configValue === undefined) {
+                        return [2 /*return*/, defaultValue];
+                    }
+                    if (!(typeof configValue === "function")) return [3 /*break*/, 4];
+                    result = configValue();
+                    if (!(result instanceof Promise)) return [3 /*break*/, 2];
+                    return [4 /*yield*/, result];
+                case 1:
+                    _a = _b.sent();
+                    return [3 /*break*/, 3];
+                case 2:
+                    _a = result;
+                    _b.label = 3;
+                case 3: return [2 /*return*/, _a];
+                case 4: return [2 /*return*/, configValue];
+            }
+        });
+    });
+}
+var defaultResolvedZestProps = {
+    zSize: "md",
+    stretch: false,
+    showProgressBar: false,
+    animatedCounter: false,
+    theme: "system",
+    isMultiline: false,
+    onTextChanged: undefined,
+    helperTextConfig: undefined,
+};
+var useZestTextboxConfig = function (componentZestProps) {
+    var contextDefaultZestProps = useZestTextboxConfig$1().defaultZestProps;
+    var _a = useState(defaultResolvedZestProps), resolvedZestProps = _a[0], setResolvedZestProps = _a[1];
+    // Memoize the merged props to avoid unnecessary re-renders
+    var mergedZestProps = useMemo(function () {
+        // Component props take precedence over context default props, which take precedence over hardcoded defaults
+        return __assign(__assign(__assign({}, defaultResolvedZestProps), contextDefaultZestProps), componentZestProps);
+    }, [contextDefaultZestProps, componentZestProps]);
+    useEffect(function () {
+        var resolveProps = function () { return __awaiter(void 0, void 0, void 0, function () {
+            var newResolvedProps, _a, _b, _c, _d, _e, _f, _g;
+            return __generator(this, function (_h) {
+                switch (_h.label) {
+                    case 0:
+                        newResolvedProps = __assign({}, defaultResolvedZestProps);
+                        // Resolve each property that can be a ZestConfigValue
+                        _a = newResolvedProps;
+                        return [4 /*yield*/, resolveZestConfigValue(mergedZestProps.zSize, defaultResolvedZestProps.zSize)];
+                    case 1:
+                        // Resolve each property that can be a ZestConfigValue
+                        _a.zSize = _h.sent();
+                        _b = newResolvedProps;
+                        return [4 /*yield*/, resolveZestConfigValue(mergedZestProps.stretch, defaultResolvedZestProps.stretch)];
+                    case 2:
+                        _b.stretch = _h.sent();
+                        _c = newResolvedProps;
+                        return [4 /*yield*/, resolveZestConfigValue(mergedZestProps.showProgressBar, defaultResolvedZestProps.showProgressBar)];
+                    case 3:
+                        _c.showProgressBar = _h.sent();
+                        _d = newResolvedProps;
+                        return [4 /*yield*/, resolveZestConfigValue(mergedZestProps.animatedCounter, defaultResolvedZestProps.animatedCounter)];
+                    case 4:
+                        _d.animatedCounter = _h.sent();
+                        _e = newResolvedProps;
+                        return [4 /*yield*/, resolveZestConfigValue(mergedZestProps.theme, defaultResolvedZestProps.theme)];
+                    case 5:
+                        _e.theme = _h.sent();
+                        _f = newResolvedProps;
+                        return [4 /*yield*/, resolveZestConfigValue(mergedZestProps.isMultiline, defaultResolvedZestProps.isMultiline)];
+                    case 6:
+                        _f.isMultiline = _h.sent();
+                        // onTextChanged is no longer a ZestConfigValue, so it's directly assigned
+                        newResolvedProps.onTextChanged = mergedZestProps.onTextChanged;
+                        _g = newResolvedProps;
+                        return [4 /*yield*/, resolveZestConfigValue(mergedZestProps.helperTextConfig, defaultResolvedZestProps.helperTextConfig)];
+                    case 7:
+                        _g.helperTextConfig = _h.sent();
+                        setResolvedZestProps(newResolvedProps);
+                        return [2 /*return*/];
+                }
+            });
+        }); };
+        resolveProps();
+    }, [mergedZestProps]); // Re-run effect if merged props change
+    return resolvedZestProps;
+};
+
+// ... other imports
+var ZestTextbox = function (props) {
+    var _a = props.className, className = _a === void 0 ? "" : _a, maxLength = props.maxLength, onChange = props.onChange, type = props.type, zest = props.zest, // Destructure the new zest prop
+    rest = __rest(props, ["className", "maxLength", "onChange", "type", "zest"]);
+    var resolvedZestProps = useZestTextboxConfig(zest);
+    var zSize = resolvedZestProps.zSize, fullWidth = resolvedZestProps.stretch, showProgressBar = resolvedZestProps.showProgressBar, animatedCounter = resolvedZestProps.animatedCounter, theme = resolvedZestProps.theme, helperTextConfig = resolvedZestProps.helperTextConfig, onTextChanged = resolvedZestProps.onTextChanged, isMultiline = resolvedZestProps.isMultiline;
+    var _b = useState(""), value = _b[0], setValue = _b[1];
+    var isDark = useThemeDetector(theme);
+    var isPassword = type === "password";
+    var _c = usePasswordVisibility(isPassword), isPasswordVisible = _c.isPasswordVisible, togglePasswordVisibility = _c.togglePasswordVisibility;
+    var _d = useCharacterCounter(value, maxLength, animatedCounter), currentLength = _d.currentLength, charPercentage = _d.charPercentage, counterColorClass = _d.counterColorClass, showCounter = _d.showCounter;
+    var helperTextNode = useHelperText(value, helperTextConfig);
     var classList = [
         styles.textbox,
         styles[zSize],
@@ -129,23 +368,9 @@ var ZestTextbox = function (props) {
         .join(" ");
     var handleInputChange = function (e) {
         var newValue = e.target.value;
+        var isNumeric = type === "number" || type === "tel";
         if (isNumeric) {
-            // Allow digits, a single leading hyphen, and a single decimal point
-            var parts = newValue.split('.');
-            var integerPart = parts[0].replace(/[^0-9-]/g, '');
-            var decimalPart = parts.length > 1 ? '.' + parts[1].replace(/[^0-9]/g, '') : '';
-            // Ensure only one leading hyphen
-            if (integerPart.startsWith('-')) {
-                integerPart = '-' + integerPart.substring(1).replace(/-/g, '');
-            }
-            else {
-                integerPart = integerPart.replace(/-/g, '');
-            }
-            newValue = integerPart + decimalPart;
-            // Prevent multiple decimal points
-            if (newValue.indexOf('.') !== newValue.lastIndexOf('.')) {
-                newValue = newValue.substring(0, newValue.lastIndexOf('.'));
-            }
+            newValue = filterNumericInput(newValue);
         }
         if (maxLength !== undefined && newValue.length > maxLength)
             return;
@@ -155,21 +380,12 @@ var ZestTextbox = function (props) {
         if (onTextChanged)
             onTextChanged(newValue);
     };
-    var isPassword = type === "password";
     var isNumeric = type === "number" || type === "tel";
     var inputType = isPassword && isPasswordVisible ? "text" : isNumeric ? "tel" : type;
     var commonProps = __assign({ className: classList, maxLength: maxLength, onChange: handleInputChange, value: value, type: inputType }, rest);
-    var showCounter = typeof maxLength === "number";
-    var charPercentage = showCounter ? (value.length / maxLength) * 100 : 0;
-    var counterColorClass = animatedCounter
-        ? charPercentage > 90
-            ? styles.counterOrange
-            : charPercentage > 70
-                ? styles.counterYellow
-                : ""
-        : "";
-    return (jsxs("div", { className: styles.wrapper, children: ["isMultiline" in props && props.isMultiline ? (jsx("textarea", __assign({}, commonProps))) : (jsx("input", __assign({}, commonProps))), helperTextNode && (jsx("div", { className: "".concat(styles.helperText, " ").concat((helperTextConfig === null || helperTextConfig === void 0 ? void 0 : helperTextConfig.className) || ''), children: helperTextNode }, value)), showCounter && (jsxs("div", { className: "".concat(styles.counter, " ").concat(counterColorClass), children: [value.length, " / ", maxLength] })), isPassword && (jsxs("div", { className: styles.passwordToggle, onClick: function () { return setIsPasswordVisible(!isPasswordVisible); }, children: [jsx("div", { className: styles.tooltip, children: isPasswordVisible ? "Hide password" : "Show password" }), isPasswordVisible ? (jsx(IconEyeOpen, { className: styles.eyeIcon })) : (jsx(IconEyeSlashed, { className: styles.eyeIcon }))] })), showProgressBar && showCounter && (jsx("div", { className: styles.progressBarContainer, children: jsx("div", { className: "".concat(styles.progressBar, " ").concat(counterColorClass), style: { width: "".concat(charPercentage, "%") } }) }))] }));
+    return (jsxs("div", { className: styles.wrapper, children: [isMultiline ? ( // Use isMultiline from zest
+            jsx("textarea", __assign({}, commonProps))) : (jsx("input", __assign({}, commonProps))), jsx(HelperTextDisplay, { helperTextNode: helperTextNode, className: (helperTextConfig === null || helperTextConfig === void 0 ? void 0 : helperTextConfig.className) || '' }), jsx(CharacterCounter, { showCounter: showCounter, currentLength: currentLength, maxLength: maxLength, counterColorClass: counterColorClass }), jsx(PasswordToggleButton, { isPassword: isPassword, isPasswordVisible: isPasswordVisible, onToggle: togglePasswordVisibility }), jsx(ProgressBar, { showProgressBar: showProgressBar, showCounter: showCounter, charPercentage: charPercentage, counterColorClass: counterColorClass })] }));
 };
 
-export { ZestTextbox as default };
+export { CharacterCounter, HelperTextDisplay, PasswordToggleButton, ProgressBar, ZestTextbox, ZestTextboxConfigProvider };
 //# sourceMappingURL=index.esm.js.map