@agility/plenum-ui 2.0.0-rc1 → 2.0.0-rc10

package/dist/index.js

@@ -4643,23 +4643,27 @@ var Button = (_a) => {
     size = "sm",
     label,
     icon,
+    iconObj,
     CustomSVGIcon,
     fullWidth = false,
     iconPosition = "trailing",
     asLink,
     isLoading = false,
-    className
+    className,
+    ref
   } = _b, props = __objRest(_b, [
     "actionType",
     "size",
     "label",
     "icon",
+    "iconObj",
     "CustomSVGIcon",
     "fullWidth",
     "iconPosition",
     "asLink",
     "isLoading",
-    "className"
+    "className",
+    "ref"
   ]);
   const iconStyles = cn5(
     { "text-white h-5 w-5": actionType === "primary" || actionType === "danger" },
@@ -4698,13 +4702,16 @@ var Button = (_a) => {
           " bg-red-600 text-white hover:bg-red-700 <focus-visible:!></focus-visible:!>ring-red-500 focus:!ring-red-500 active:!ring-red-500 focus-within:!ring-red-500 ": actionType === "danger"
         },
         className ? className : ""
-      )
+      ),
+      ref
     }, props),
     CustomSVGIcon && (isLoading ? /* @__PURE__ */ React.createElement("div", { className: cn5("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize) }) : /* @__PURE__ */ React.createElement("i", null, CustomSVGIcon)),
-    icon && iconPosition === "leading" && (isLoading ? /* @__PURE__ */ React.createElement("div", { className: cn5("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize) }) : /* @__PURE__ */ React.createElement(DynamicIcon, __spreadValues({}, __spreadProps(__spreadValues({}, icon), { className: iconStyles })))),
+    iconObj && iconPosition === "leading" && (!isLoading ? /* @__PURE__ */ React.createElement(React.Fragment, null, iconObj) : /* @__PURE__ */ React.createElement("div", { className: cn5("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize) })),
+    icon && iconPosition === "leading" && (isLoading ? /* @__PURE__ */ React.createElement("div", { className: cn5("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize) }) : typeof icon === "string" ? /* @__PURE__ */ React.createElement(DynamicIcon, __spreadValues({}, { icon, className: iconStyles })) : /* @__PURE__ */ React.createElement(DynamicIcon, __spreadValues({}, __spreadProps(__spreadValues({}, icon), { className: iconStyles })))),
     !icon && !CustomSVGIcon && isLoading && /* @__PURE__ */ React.createElement("div", { className: cn5("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize) }),
     label,
-    icon && iconPosition === "trailing" && (isLoading ? /* @__PURE__ */ React.createElement("div", { className: cn5("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize) }) : /* @__PURE__ */ React.createElement(DynamicIcon, __spreadValues({}, __spreadProps(__spreadValues({}, icon), { className: iconStyles }))))
+    icon && iconPosition === "trailing" && (isLoading ? /* @__PURE__ */ React.createElement("div", { className: cn5("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize) }) : typeof icon === "string" ? /* @__PURE__ */ React.createElement(DynamicIcon, __spreadValues({}, { icon, className: iconStyles })) : /* @__PURE__ */ React.createElement(DynamicIcon, __spreadValues({}, __spreadProps(__spreadValues({}, icon), { className: iconStyles })))),
+    iconObj && iconPosition === "trailing" && (!isLoading ? /* @__PURE__ */ React.createElement(React.Fragment, null, iconObj) : /* @__PURE__ */ React.createElement("div", { className: cn5("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize) }))
   );
 };
 var Button_default = Button;
@@ -5135,7 +5142,8 @@ var InputField = (_a) => {
     required,
     clientSideCheck = true,
     placeholder,
-    className
+    className,
+    ref
   } = _b, rest = __objRest(_b, [
     "type",
     "id",
@@ -5149,16 +5157,19 @@ var InputField = (_a) => {
     "required",
     "clientSideCheck",
     "placeholder",
-    "className"
+    "className",
+    "ref"
   ]);
   return /* @__PURE__ */ React11.createElement(
     "input",
     __spreadValues({}, __spreadValues({
       type,
       id: id2,
+      ref,
       name,
       value,
       onChange: (e) => {
+        console.log(e);
         handleChange(e.target.value);
       },
       autoFocus: isFocused,
@@ -5360,65 +5371,232 @@ var Select_default = Select;
 var select_default = Select_default;
 
 // stories/molecules/inputs/textArea/TextArea.tsx
+import React16, { useEffect as useEffect3, useId as useId2, useState as useState4 } from "react";
 import { default as cn16 } from "classnames";
-var TextAreaField = (_a) => {
+
+// stories/molecules/inputs/InputCounter/InputCounter.tsx
+import React15 from "react";
+var InputCounter = ({ current = 0, limit }) => {
+  return /* @__PURE__ */ React15.createElement("div", { className: "mt-1 text-center text-sm text-gray-500 flex gap-1" }, /* @__PURE__ */ React15.createElement("div", { className: "currentCount" }, current), (limit || 0) > 0 && /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement("div", null, "/"), /* @__PURE__ */ React15.createElement("div", { className: "limitCount" }, limit)));
+};
+var InputCounter_default = InputCounter;
+
+// stories/molecules/inputs/textArea/TextArea.tsx
+var Textarea = (_a) => {
   var _b = _a, {
     id: id2,
     name,
-    value,
-    isFocused,
+    label,
     isError,
-    isReadonly,
+    isRequired,
     isDisabled,
-    handleChange,
-    required,
+    defaultValue,
+    message,
+    isShowCounter,
+    maxLength,
+    rows = 12,
+    cols = 48,
+    onChange,
+    value: externalValue,
     placeholder,
-    className
+    className,
+    ref
   } = _b, rest = __objRest(_b, [
     "id",
     "name",
-    "value",
-    "isFocused",
+    "label",
     "isError",
-    "isReadonly",
+    "isRequired",
     "isDisabled",
-    "handleChange",
-    "required",
+    "defaultValue",
+    "message",
+    "isShowCounter",
+    "maxLength",
+    "rows",
+    "cols",
+    "onChange",
+    "value",
     "placeholder",
-    "className"
+    "className",
+    "ref"
   ]);
-  return /* @__PURE__ */ React.createElement(
-    "textarea",
-    __spreadValues({}, __spreadValues({
+  const uniqueID = useId2();
+  const [value, setValue] = useState4(externalValue || defaultValue || "");
+  const handleOnchange = (e) => {
+    const targetValue = e.currentTarget.value;
+    typeof onChange === "function" && onChange(targetValue);
+    setValue(targetValue);
+  };
+  const discriptionStyles = cn16("text-sm mt-1 block", { "text-gray-500": !isError }, { "text-red-500": isError });
+  useEffect3(() => {
+    if (externalValue !== void 0 && externalValue !== null) {
+      setValue(externalValue);
+    }
+  }, [externalValue]);
+  if (!id2)
+    id2 = `ta-${uniqueID}`;
+  return /* @__PURE__ */ React16.createElement("div", null, label && /* @__PURE__ */ React16.createElement(
+    InputLabel_default2,
+    {
+      isPlaceholder: true,
+      isActive: true,
+      label,
+      isRequired,
       id: id2,
+      isError,
+      isDisabled
+    }
+  ), /* @__PURE__ */ React16.createElement("div", null, /* @__PURE__ */ React16.createElement(
+    "textarea",
+    __spreadValues({
+      ref,
+      maxLength,
+      onChange: handleOnchange,
+      rows,
       name,
-      value,
-      onChange: (e) => {
-        handleChange(e.target.value);
-      },
-      autoFocus: isFocused,
-      readOnly: isReadonly,
-      disabled: isDisabled,
-      required,
-      placeholder: placeholder || " ",
-      "aria-invalid": isError,
-      "aria-disabled": isDisabled,
+      id: id2,
+      cols,
       className: cn16(
-        "peer w-full resize-y auto-resize rounded border border-gray-300 py-2 px-3 pt-2  text-sm font-normal leading-5 outline-offset-0 ring-offset-0 focus:border-purple-600 focus:ring-purple-600",
-        isError ? "border-red-600 text-red-600" : "",
+        "block w-full rounded focus:border-purple-500 focus:ring-purple-500 sm:text-sm",
+        { "border-gray-300 ": !isError },
+        {
+          "border-red-500 outline-red-500 focus:ring-red-500": isError
+        },
         className
-      )
-    }, rest))
-  );
+      ),
+      disabled: isDisabled,
+      defaultValue,
+      value,
+      placeholder
+    }, rest)
+  )), /* @__PURE__ */ React16.createElement("div", { className: "flex flex-row space-x-3" }, /* @__PURE__ */ React16.createElement("div", { className: "grow" }, message && /* @__PURE__ */ React16.createElement("span", { className: discriptionStyles }, message)), isShowCounter && /* @__PURE__ */ React16.createElement("div", { className: "shrink-0" }, /* @__PURE__ */ React16.createElement(InputCounter_default, { current: Number(value == null ? void 0 : value.length), limit: maxLength }))));
 };
-var TextArea_default = TextAreaField;
+var TextArea_default = Textarea;
 
 // stories/molecules/inputs/textArea/index.ts
 var textArea_default = TextArea_default;
 
-// stories/molecules/inputs/toggleSwitch/ToggleSwitch.tsx
-import React15, { useEffect as useEffect3, useState as useState4 } from "react";
+// stories/molecules/inputs/TextInput/TextInput.tsx
+import React17, { forwardRef as forwardRef2, useEffect as useEffect4, useId as useId3, useRef, useState as useState5 } from "react";
 import { default as cn17 } from "classnames";
+var TextInput = (_a, ref) => {
+  var _b = _a, {
+    label,
+    isFocused,
+    isError,
+    id: id2,
+    name,
+    isRequired,
+    type,
+    defaultValue,
+    isDisabled,
+    isReadonly,
+    message,
+    isShowCounter,
+    maxLength,
+    onChange,
+    placeholder,
+    value: externalValue,
+    className
+  } = _b, props = __objRest(_b, [
+    "label",
+    "isFocused",
+    "isError",
+    "id",
+    "name",
+    "isRequired",
+    "type",
+    "defaultValue",
+    "isDisabled",
+    "isReadonly",
+    "message",
+    "isShowCounter",
+    "maxLength",
+    "onChange",
+    "placeholder",
+    "value",
+    "className"
+  ]);
+  const uniqueID = useId3();
+  const [isFocus, setIsFocus] = useState5(Boolean(isFocused));
+  const [value, setValue] = useState5(externalValue || defaultValue || "");
+  const inputRef = useRef(null);
+  useEffect4(() => {
+    if (externalValue !== void 0 && externalValue !== null) {
+      setValue(externalValue);
+    }
+  }, [externalValue]);
+  useEffect4(() => {
+    const input = inputRef.current;
+    if (!input || isFocus === void 0 || isDisabled)
+      return;
+    if (isFocus) {
+      input.focus();
+    } else {
+      input.blur();
+    }
+  }, [isFocus]);
+  useEffect4(() => {
+    const input = inputRef.current;
+    if (!input || defaultValue === void 0 || defaultValue === "")
+      return;
+  }, [defaultValue]);
+  const handleInputFocus = () => setIsFocus(true);
+  const handleInputBlur = () => setIsFocus(false);
+  if (!id2)
+    id2 = `input-${uniqueID}`;
+  if (!name)
+    name = id2;
+  return /* @__PURE__ */ React17.createElement("div", { className: "relative" }, /* @__PURE__ */ React17.createElement(
+    InputLabel_default2,
+    {
+      isPlaceholder: true,
+      label,
+      isRequired,
+      id: id2,
+      isError,
+      isActive: true,
+      isDisabled
+    }
+  ), /* @__PURE__ */ React17.createElement(
+    InputField_default2,
+    __spreadValues({
+      onFocus: handleInputFocus,
+      onBlur: handleInputBlur,
+      handleChange: (v) => setValue(v),
+      ref,
+      type,
+      name,
+      id: id2,
+      className: cn17(
+        "w-full rounded border py-2 px-3 text-sm font-normal leading-5",
+        { "border-gray-300": !isFocus && !isError },
+        {
+          "!border-purple-500 shadow-none outline-purple-500 focus:!ring-purple-500": isFocus && !isError
+        },
+        {
+          "!border-red-500 shadow-none focus:ring-red-500": isError
+        },
+        className
+      ),
+      isDisabled,
+      isReadonly,
+      value,
+      defaultValue,
+      maxLength,
+      placeholder
+    }, props)
+  ), /* @__PURE__ */ React17.createElement("div", { className: "flex flex-row space-x-3" }, /* @__PURE__ */ React17.createElement("div", { className: "grow" }, message && /* @__PURE__ */ React17.createElement("span", { className: cn17("mt-1 block text-sm", isError ? "text-red-500" : "text-gray-500") }, message)), isShowCounter && /* @__PURE__ */ React17.createElement("div", { className: "shrink-0" }, /* @__PURE__ */ React17.createElement(InputCounter_default, { current: Number(value == null ? void 0 : value.length), limit: maxLength }))));
+};
+var _TextInput = forwardRef2(TextInput);
+var TextInput_default = _TextInput;
+
+// stories/molecules/inputs/TextInput/index.tsx
+var TextInput_default2 = TextInput_default;
+
+// stories/molecules/inputs/toggleSwitch/ToggleSwitch.tsx
+import React18, { useEffect as useEffect5, useState as useState6 } from "react";
+import { default as cn18 } from "classnames";
 import { Switch } from "@headlessui/react";
 var ToggleSwitch = ({
   isChecked,
@@ -5430,9 +5608,9 @@ var ToggleSwitch = ({
   variant = "base",
   withIcon
 }) => {
-  const [checked, setChecked] = useState4(isChecked);
-  useEffect3(() => setChecked(isChecked), [isChecked]);
-  return /* @__PURE__ */ React15.createElement(Switch.Group, { as: "div", className: "flex items-center gap-2" }, label && label.xPosition === "left" && /* @__PURE__ */ React15.createElement(Switch.Label, { className: label.className }, label.text), /* @__PURE__ */ React15.createElement(
+  const [checked, setChecked] = useState6(isChecked);
+  useEffect5(() => setChecked(isChecked), [isChecked]);
+  return /* @__PURE__ */ React18.createElement(Switch.Group, { as: "div", className: "flex items-center gap-2" }, label && label.xPosition === "left" && /* @__PURE__ */ React18.createElement(Switch.Label, { className: label.className }, label.text), /* @__PURE__ */ React18.createElement(
     Switch,
     {
       name,
@@ -5442,17 +5620,17 @@ var ToggleSwitch = ({
         onChange(v);
         setChecked(v);
       },
-      className: cn17(
+      className: cn18(
         { "w-9 h-4": variant === "short", " h-6 w-11": variant === "base" },
         checked ? "bg-purple-600" : "bg-gray-200",
         "relative inline-flex items-center rounded-full focus-visible:ring-2 focus-visible:ring-purple-600 focus-visible:ring-offset-2  focus-within:ring-2 focus-within:ring-purple-600 focus-within:ring-offset-2  focus:ring-2 focus:ring-purple-600 focus:ring-offset-2  active:ring-2 active:ring-purple-600 active:ring-offset-2"
       )
     },
-    /* @__PURE__ */ React15.createElement("span", { className: "sr-only" }, screenReaderLabel),
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React18.createElement("span", { className: "sr-only" }, screenReaderLabel),
+    /* @__PURE__ */ React18.createElement(
       "span",
       {
-        className: cn17(
+        className: cn18(
           checked ? "translate-x-[22px]" : "translate-x-[2px]",
           {
             "border border-gray-200 translate-x-0": variant === "short",
@@ -5461,9 +5639,9 @@ var ToggleSwitch = ({
           " h-5 w-5 transform rounded-full bg-white transition shadow-sm drop-shadow flex items-center justify-center"
         )
       },
-      withIcon && /* @__PURE__ */ React15.createElement(DynamicIcon, __spreadProps(__spreadValues({}, withIcon), { className: "text-gray-400 m-[2px]" }))
+      withIcon && /* @__PURE__ */ React18.createElement(DynamicIcon, __spreadProps(__spreadValues({}, withIcon), { className: "text-gray-400 m-[2px]" }))
     )
-  ), label && label.xPosition === "right" && /* @__PURE__ */ React15.createElement(Switch.Label, { className: label.className }, label.text));
+  ), label && label.xPosition === "right" && /* @__PURE__ */ React18.createElement(Switch.Label, { className: label.className }, label.text));
 };
 var ToggleSwitch_default = ToggleSwitch;
 
@@ -5471,8 +5649,8 @@ var ToggleSwitch_default = ToggleSwitch;
 var toggleSwitch_default = ToggleSwitch_default;
 
 // stories/organisms/AnimatedLabelInput/AnimatedLabelInput.tsx
-import React16 from "react";
-import { default as cn18 } from "classnames";
+import React19 from "react";
+import { default as cn19 } from "classnames";
 var AnimatedLabelInput = ({
   id: id2,
   label,
@@ -5483,10 +5661,10 @@ var AnimatedLabelInput = ({
   isError,
   containerStyles
 }) => {
-  return /* @__PURE__ */ React16.createElement("div", { className: cn18("group relative", containerStyles ? containerStyles : "") }, input && /* @__PURE__ */ React16.createElement(InputField_default2, __spreadValues({ isError }, input)), textarea && /* @__PURE__ */ React16.createElement(TextArea_default, __spreadValues({ isError }, textarea)), /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React19.createElement("div", { className: cn19("group relative", containerStyles ? containerStyles : "") }, input && /* @__PURE__ */ React19.createElement(InputField_default2, __spreadValues({ isError }, input)), textarea && /* @__PURE__ */ React19.createElement(TextArea_default, __spreadValues({ isError }, textarea)), /* @__PURE__ */ React19.createElement(
     "label",
     {
-      className: cn18(
+      className: cn19(
         "absolute left-1 z-10 ml-[.172rem] inline-block bg-white px-1 text-xs  transition-all peer-placeholder-shown:top-2 peer-placeholder-shown:text-sm peer-placeholder-shown:text-gray-600",
         "-top-[9px] group-focus-within:!-top-[12px] group-focus-within:!left-1  group-focus-within:!ml-[.172rem]  group-focus-within:!text-xs",
         isError && "!text-red-600"
@@ -5494,8 +5672,8 @@ var AnimatedLabelInput = ({
       htmlFor: id2
     },
     label.display,
-    required && /* @__PURE__ */ React16.createElement("span", { className: "text-red-600" }, "*")
-  ), /* @__PURE__ */ React16.createElement("div", { className: "flex flex-row space-x-3" }, /* @__PURE__ */ React16.createElement("div", { className: "grow transition-all" }, message && /* @__PURE__ */ React16.createElement("span", { className: cn18("mt-1 block text-sm", isError ? "text-red-500" : "text-gray-500") }, message))));
+    required && /* @__PURE__ */ React19.createElement("span", { className: "text-red-600" }, "*")
+  ), /* @__PURE__ */ React19.createElement("div", { className: "flex flex-row space-x-3" }, /* @__PURE__ */ React19.createElement("div", { className: "grow transition-all" }, message && /* @__PURE__ */ React19.createElement("span", { className: cn19("mt-1 block text-sm", isError ? "text-red-500" : "text-gray-500") }, message))));
 };
 var AnimatedLabelInput_default = AnimatedLabelInput;
 
@@ -5503,13 +5681,13 @@ var AnimatedLabelInput_default = AnimatedLabelInput;
 var AnimatedLabelInput_default2 = AnimatedLabelInput_default;
 
 // stories/organisms/ButtonDropdown/ButtonDropdown.tsx
-import React18 from "react";
-import { default as cn20 } from "classnames";
+import React21 from "react";
+import { default as cn21 } from "classnames";
 
 // stories/organisms/DropdownComponent/DropdownComponent.tsx
-import React17, { Fragment, useState as useState5 } from "react";
+import React20, { Fragment, useState as useState7 } from "react";
 import { Transition } from "@headlessui/react";
-import { default as cn19 } from "classnames";
+import { default as cn20 } from "classnames";
 import {
   useFloating,
   autoUpdate,
@@ -5550,8 +5728,8 @@ var Dropdown = (_a) => {
     "offsetOptions"
   ]);
   var _a2, _b2;
-  const [isOpen, setIsOpen] = useState5(false);
-  const [activeItem, setActiveItem] = useState5(null);
+  const [isOpen, setIsOpen] = useState7(false);
+  const [activeItem, setActiveItem] = useState7(null);
   const { refs, floatingStyles, context } = useFloating({
     open: isOpen,
     onOpenChange: setIsOpen,
@@ -5582,7 +5760,7 @@ var Dropdown = (_a) => {
     }
   });
   const { groupClassname, buttonClassname, itemsClassname, itemClassname, activeItemClassname } = classNames3;
-  return /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React20.createElement(
     "div",
     __spreadValues({}, __spreadValues({
       className: groupClassname,
@@ -5591,7 +5769,7 @@ var Dropdown = (_a) => {
       "aria-expanded": isOpen,
       "aria-haspopup": "listbox"
     }, props)),
-    /* @__PURE__ */ React17.createElement(
+    /* @__PURE__ */ React20.createElement(
       "button",
       __spreadValues({}, __spreadValues({
         ref: refs.setReference,
@@ -5600,9 +5778,9 @@ var Dropdown = (_a) => {
           setIsOpen(!isOpen);
         }
       }, getReferenceProps())),
-      CustomDropdownTrigger ? /* @__PURE__ */ React17.createElement("span", { className: "" }, CustomDropdownTrigger) : /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement("span", { className: "pl-1" }, label), /* @__PURE__ */ React17.createElement(DynamicIcon, { icon: "ChevronDownIcon", className: "ml-1 h-5 w-6 " }))
+      CustomDropdownTrigger ? /* @__PURE__ */ React20.createElement("span", { className: "" }, CustomDropdownTrigger) : /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement("span", { className: "pl-1" }, label), /* @__PURE__ */ React20.createElement(DynamicIcon, { icon: "ChevronDownIcon", className: "ml-1 h-5 w-6 " }))
     ),
-    isMounted && items.length > 0 && isOpen && /* @__PURE__ */ React17.createElement(FloatingPortal, null, /* @__PURE__ */ React17.createElement(FloatingFocusManager, { context, modal: true }, /* @__PURE__ */ React17.createElement(
+    isMounted && items.length > 0 && isOpen && /* @__PURE__ */ React20.createElement(FloatingPortal, null, /* @__PURE__ */ React20.createElement(FloatingFocusManager, { context, modal: true }, /* @__PURE__ */ React20.createElement(
       Transition,
       {
         as: Fragment,
@@ -5614,7 +5792,7 @@ var Dropdown = (_a) => {
         leaveFrom: "transform opacity-100 scale-100",
         leaveTo: "transform opacity-0 scale-95"
       },
-      /* @__PURE__ */ React17.createElement(
+      /* @__PURE__ */ React20.createElement(
         "ul",
         __spreadValues(__spreadProps(__spreadValues({}, __spreadProps(__spreadValues({}, getFloatingProps()), {
           className: itemsClassname,
@@ -5636,66 +5814,100 @@ var Dropdown = (_a) => {
           "aria-labelledby": label
         }), getFloatingProps()),
         items.map((itemStack, idx) => {
-          return /* @__PURE__ */ React17.createElement(React17.Fragment, { key: `${idx}-list-${id2}` }, itemStack.map((_a3) => {
-            var _b3 = _a3, { onClick, label: label2, key, isEmphasized, icon } = _b3, rest = __objRest(_b3, ["onClick", "label", "key", "isEmphasized", "icon"]);
-            const active = activeItem && activeItem === key;
-            const itemClass = cn19(
-              itemClassname,
-              "group flex cursor-pointer items-center px-4 py-2 text-sm transition-all",
-              {
-                "text-red-500": isEmphasized
-              },
-              {
-                "text-gray-900": !isEmphasized
-              },
-              {
-                "bg-gray-100 text-gray-900": active
-              },
-              active ? activeItemClassname : "",
-              {
-                "bg-gray-100 text-red-500 hover:text-red-500": active && isEmphasized
-              },
-              itemClassname
-            );
-            return /* @__PURE__ */ React17.createElement("li", { key }, /* @__PURE__ */ React17.createElement(
-              "button",
-              __spreadValues({}, __spreadValues({
-                onClick: () => {
-                  setActiveItem(key);
-                  onClick && onClick();
-                },
+          return /* @__PURE__ */ React20.createElement(React20.Fragment, { key: `${idx}-list-${id2}` }, itemStack.map(
+            (_a3) => {
+              var _b3 = _a3, {
+                onClick,
+                label: label2,
                 key,
-                className: cn19(itemClass, "w-full")
-              }, rest)),
-              /* @__PURE__ */ React17.createElement("div", { className: "flex items-center gap-x-4" }, icon && (icon.pos === "leading" || (icon == null ? void 0 : icon.pos) === void 0) && /* @__PURE__ */ React17.createElement(
-                DynamicIcon,
-                __spreadValues({}, {
-                  icon: icon.name,
-                  className: cn19(
-                    icon.className,
-                    {
-                      "text-red-500": isEmphasized
-                    },
-                    "opacity-60 group-hover:opacity-100"
-                  ),
-                  outline: icon.outline
-                })
-              ), /* @__PURE__ */ React17.createElement("div", { className: "whitespace-nowrap" }, label2), icon && icon.pos === "trailing" && /* @__PURE__ */ React17.createElement(
-                DynamicIcon,
-                __spreadValues({}, {
-                  icon: icon.name,
-                  className: cn19(
-                    icon.className,
-                    {
-                      "text-red-500": isEmphasized
-                    },
-                    "opacity-60 group-"
-                  ),
-                  outline: icon.outline
-                })
-              ))
-            ));
-          }));
+                isEmphasized,
+                icon,
+                iconPosition
+              } = _b3, rest = __objRest(_b3, [
+                "onClick",
+                "label",
+                "key",
+                "isEmphasized",
+                "icon",
+                "iconPosition"
+              ]);
+              const active = activeItem && activeItem === key;
+              const itemClass = cn20(
+                itemClassname,
+                "group flex cursor-pointer items-center px-4 py-2 text-sm transition-all",
+                {
+                  "text-red-500": isEmphasized
+                },
+                {
+                  "text-gray-900": !isEmphasized
+                },
+                {
+                  "bg-gray-100 text-gray-900": active
+                },
+                active ? activeItemClassname : "",
+                {
+                  "bg-gray-100 text-red-500 hover:text-red-500": active && isEmphasized
+                },
+                itemClassname
+              );
+              return /* @__PURE__ */ React20.createElement("li", { key }, /* @__PURE__ */ React20.createElement(
+                "button",
+                __spreadValues({}, __spreadValues({
+                  onClick: () => {
+                    setActiveItem(key);
+                    onClick && onClick();
+                  },
+                  key,
+                  className: cn20(itemClass, "w-full")
+                }, rest)),
+                /* @__PURE__ */ React20.createElement("div", { className: "flex items-center gap-x-4" }, icon && (iconPosition === "leading" || iconPosition === void 0) && (typeof icon === "string" ? /* @__PURE__ */ React20.createElement(
+                  DynamicIcon,
+                  __spreadValues({}, {
+                    icon,
+                    className: cn20(
+                      {
+                        "text-red-500": isEmphasized
+                      },
+                      "opacity-60 group"
+                    )
+                  })
+                ) : /* @__PURE__ */ React20.createElement(
+                  DynamicIcon,
+                  __spreadValues({}, __spreadProps(__spreadValues({}, icon), {
+                    className: cn20(
+                      icon.className,
+                      {
+                        "text-red-500": isEmphasized
+                      },
+                      "opacity-60 group"
+                    )
+                  }))
+                )), /* @__PURE__ */ React20.createElement("div", { className: "whitespace-nowrap" }, label2), icon && iconPosition === "trailing" && (typeof icon === "string" ? /* @__PURE__ */ React20.createElement(
+                  DynamicIcon,
+                  __spreadValues({}, {
+                    icon,
+                    className: cn20(
+                      {
+                        "text-red-500": isEmphasized
+                      },
+                      "opacity-60 group"
+                    )
+                  })
+                ) : /* @__PURE__ */ React20.createElement(
+                  DynamicIcon,
+                  __spreadValues({}, __spreadProps(__spreadValues({}, icon), {
+                    className: cn20(
+                      icon.className,
+                      {
+                        "text-red-500": isEmphasized
+                      },
+                      "opacity-60 group"
+                    )
+                  }))
+                )))
+              ));
+            }
+          ));
         })
       )
     )))
@@ -5709,39 +5921,39 @@ var DropdownComponent_default2 = DropdownComponent_default;
 // stories/organisms/ButtonDropdown/ButtonDropdown.tsx
 var ButtonDropdown = ({ button, dropDown, placement, offsetOptions }) => {
   const dropDownClasses = __spreadProps(__spreadValues({}, defaultClassNames), {
-    groupClassname: cn20(
+    groupClassname: cn21(
       "flex items-center justify-center rounded-l-none border !border-l-0 rounded-r  px-2 transition-all hover:!border-l-0",
       button.actionType === "primary" ? "border-purple-600 bg-purple-600  !text-white  hover:border-purple-700 hover:bg-purple-700 active:!border-purple-800 active:!bg-purple-800 fill-white" : "",
       button.actionType === "secondary" ? "border-purple-50 bg-purple-50 !text-purple-700  hover:border-purple-100 hover:bg-purple-100 active:!border-purple-300 active:!bg-purple-300 fill-purple-700" : "",
       button.actionType === "alternative" ? "border-gray-300 bg-white !text-gray-700 fill-gray-700  hover:border-gray-300 hover:bg-gray-50 active:bg-gray-100" : ""
     )
   });
-  return /* @__PURE__ */ React18.createElement("div", { className: "flex items-stretch focus-within:ring-purple-600 focus-within:ring-2 focus-within:ring-offset-white focus-within:ring-offset-2 rounded-[3px]" }, /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React21.createElement("div", { className: "flex items-stretch focus-within:ring-purple-600 focus-within:ring-2 focus-within:ring-offset-white focus-within:ring-offset-2 rounded-[3px]" }, /* @__PURE__ */ React21.createElement(
     Button_default2,
     __spreadValues({}, __spreadProps(__spreadValues({}, button), {
-      className: cn20(
+      className: cn21(
         button.className,
         "!rounded-r-none !border-r-0 hover:!border-r-0 !focus:ring-transparent !focus-visible:ring-transparent !focus-within:ring-transparent !focus:ring-0 !focus-within:ring-0 !focus-visible:ring-0 !focus:ring-offset-0 !focus-visible:ring-offset-0 !focus-within:ring-offset-0 !ring-0 outline-none focus:outline-none focus-visible:outline-none focus-within:outline-none !ring-offset-0"
       )
     }))
-  ), /* @__PURE__ */ React18.createElement(
+  ), /* @__PURE__ */ React21.createElement(
     "div",
     {
-      className: cn20(
+      className: cn21(
         "w-[1px] rt",
         button.actionType === "primary" ? "bg-purple-700" : "",
         button.actionType === "secondary" ? "bg-purple-200" : "",
         button.actionType === "alternative" ? "bg-gray-300" : ""
       )
     }
-  ), /* @__PURE__ */ React18.createElement(
+  ), /* @__PURE__ */ React21.createElement(
     DropdownComponent_default2,
     __spreadValues({}, __spreadProps(__spreadValues({}, dropDown), {
-      CustomDropdownTrigger: /* @__PURE__ */ React18.createElement(
+      CustomDropdownTrigger: /* @__PURE__ */ React21.createElement(
         DynamicIcon,
         __spreadValues({}, {
           icon: "ChevronDownIcon",
-          className: cn20("h-5 w-5", {
+          className: cn21("h-5 w-5", {
             "text-white": button.actionType === "primary",
             "text-purple-700": button.actionType === "secondary",
             "text-gray-700": button.actionType === "alternative"
@@ -5758,7 +5970,7 @@ var ButtonDropdown = ({ button, dropDown, placement, offsetOptions }) => {
       },
       placement
     }))
-  ), /* @__PURE__ */ React18.createElement("div", { className: "hidden !bg-purple-100 !text-purple-600 transition-all hover:bg-purple-200 focus:bg-purple-300" }));
+  ), /* @__PURE__ */ React21.createElement("div", { className: "hidden !bg-purple-100 !text-purple-600 transition-all hover:bg-purple-200 focus:bg-purple-300" }));
 };
 var ButtonDropdown_default = ButtonDropdown;
 
@@ -5766,8 +5978,8 @@ var ButtonDropdown_default = ButtonDropdown;
 var ButtonDropdown_default2 = ButtonDropdown_default;
 
 // stories/organisms/EmptySectionPlaceholder/EmptySectionPlaceholder.tsx
-import React19 from "react";
-import { default as cn21 } from "classnames";
+import React22 from "react";
+import { default as cn22 } from "classnames";
 var EmptySectionPlaceholder = ({
   icon,
   mutedText,
@@ -5776,7 +5988,7 @@ var EmptySectionPlaceholder = ({
   actions,
   isWide
 }) => {
-  return /* @__PURE__ */ React19.createElement("div", { className: "flex h-full w-full flex-col items-center justify-center border-2 border-dashed border-gray-300 p-5" }, /* @__PURE__ */ React19.createElement(IconWithShadow_default, __spreadValues({}, icon)), mutedText && /* @__PURE__ */ React19.createElement("p", { className: "my-2 block text-xs text-gray-500" }, mutedText), CallToActionComponent ? CallToActionComponent : /* @__PURE__ */ React19.createElement("p", { className: "mb-2 block text-sm font-medium text-gray-600" }, primaryMessage), actions.length > 0 ? /* @__PURE__ */ React19.createElement("div", { className: cn21("mt-2 flex gap-2", isWide ? "" : "flex-col items-center") }, actions.map((action, index) => /* @__PURE__ */ React19.createElement(Button_default2, __spreadProps(__spreadValues({}, __spreadValues({}, action)), { key: action.label.replaceAll(" ", "-") })))) : /* @__PURE__ */ React19.createElement(React19.Fragment, null));
+  return /* @__PURE__ */ React22.createElement("div", { className: "flex h-full w-full flex-col items-center justify-center border-2 border-dashed border-gray-300 p-5" }, /* @__PURE__ */ React22.createElement(IconWithShadow_default, __spreadValues({}, icon)), mutedText && /* @__PURE__ */ React22.createElement("p", { className: "my-2 block text-xs text-gray-500" }, mutedText), CallToActionComponent ? CallToActionComponent : /* @__PURE__ */ React22.createElement("p", { className: "mb-2 block text-sm font-medium text-gray-600" }, primaryMessage), actions.length > 0 ? /* @__PURE__ */ React22.createElement("div", { className: cn22("mt-2 flex gap-2", isWide ? "" : "flex-col items-center") }, actions.map((action, index) => /* @__PURE__ */ React22.createElement(Button_default2, __spreadProps(__spreadValues({}, __spreadValues({}, action)), { key: action.label.replaceAll(" ", "-") })))) : /* @__PURE__ */ React22.createElement(React22.Fragment, null));
 };
 var EmptySectionPlaceholder_default = EmptySectionPlaceholder;
 
@@ -5784,8 +5996,8 @@ var EmptySectionPlaceholder_default = EmptySectionPlaceholder;
 var EmptySectionPlaceholder_default2 = EmptySectionPlaceholder_default;
 
 // stories/organisms/FormInputWithAddons/FormInputWithAddons.tsx
-import React20, { useLayoutEffect as useLayoutEffect2, useRef, useState as useState6 } from "react";
-import { default as cn22 } from "classnames";
+import React23, { useLayoutEffect as useLayoutEffect2, useRef as useRef2, useState as useState8 } from "react";
+import { default as cn23 } from "classnames";
 var FormInputWithAddons = (_a) => {
   var _b = _a, {
     handleChange,
@@ -5834,34 +6046,34 @@ var FormInputWithAddons = (_a) => {
     "customIconClass",
     "type"
   ]);
-  const leadLabelRef = useRef(null);
-  const trailLabelRef = useRef(null);
-  const [leadLabelWidth, setLeadLabelWidth] = useState6(0);
-  const [trailLabelWidth, setTrailLabelWidth] = useState6(0);
+  const leadLabelRef = useRef2(null);
+  const trailLabelRef = useRef2(null);
+  const [leadLabelWidth, setLeadLabelWidth] = useState8(0);
+  const [trailLabelWidth, setTrailLabelWidth] = useState8(0);
   useLayoutEffect2(() => {
     var _a2, _b2;
     setLeadLabelWidth(((_a2 = leadLabelRef.current) == null ? void 0 : _a2.clientWidth) || 0);
     setTrailLabelWidth(((_b2 = trailLabelRef.current) == null ? void 0 : _b2.clientWidth) || 0);
   }, []);
-  return /* @__PURE__ */ React20.createElement("div", { className: cn22("group flex flex-col", containerClassName) }, !leadLabel && !trailLabel && topLabel && /* @__PURE__ */ React20.createElement("label", { htmlFor: id2, className: cn22("flex items-center text-sm font-medium text-gray-600", labelClass) }, topLabel), description && /* @__PURE__ */ React20.createElement("div", { className: "mb-2 text-sm text-gray-500" }, description), /* @__PURE__ */ React20.createElement("div", { className: "relative flex-grow" }, (leadLabel || leadIcon) && /* @__PURE__ */ React20.createElement(
+  return /* @__PURE__ */ React23.createElement("div", { className: cn23("group flex flex-col", containerClassName) }, !leadLabel && !trailLabel && topLabel && /* @__PURE__ */ React23.createElement("label", { htmlFor: id2, className: cn23("flex items-center text-sm font-medium text-gray-600", labelClass) }, topLabel), description && /* @__PURE__ */ React23.createElement("div", { className: "mb-2 text-sm text-gray-500" }, description), /* @__PURE__ */ React23.createElement("div", { className: "relative flex-grow" }, (leadLabel || leadIcon) && /* @__PURE__ */ React23.createElement(
     "label",
     {
       ref: leadLabelRef,
       htmlFor: id2,
-      className: cn22(
+      className: cn23(
         "absolute top-0 bottom-0 left-3 flex items-center justify-center text-sm text-gray-500",
         labelClass
       )
     },
-    leadIcon && /* @__PURE__ */ React20.createElement("span", null, /* @__PURE__ */ React20.createElement(
+    leadIcon && /* @__PURE__ */ React23.createElement("span", null, /* @__PURE__ */ React23.createElement(
       DynamicIcon,
       __spreadValues({}, __spreadProps(__spreadValues({}, leadIcon), {
-        className: cn22("h-5 w-5 text-gray-400", leadIconClassNames, customIconClass),
+        className: cn23("h-5 w-5 text-gray-400", leadIconClassNames, customIconClass),
         outline: iconOutlined
       }))
     )),
     leadLabel && leadLabel
-  ), /* @__PURE__ */ React20.createElement(
+  ), /* @__PURE__ */ React23.createElement(
     InputField_default2,
     __spreadValues({}, __spreadProps(__spreadValues({}, rest), {
       handleChange,
@@ -5881,20 +6093,20 @@ var FormInputWithAddons = (_a) => {
         paddingLeft: `${leadLabelWidth + addonOffset}px`
       }
     }))
-  ), (trailLabel || trailIcon) && /* @__PURE__ */ React20.createElement(
+  ), (trailLabel || trailIcon) && /* @__PURE__ */ React23.createElement(
     "label",
     {
       ref: trailLabelRef,
       htmlFor: id2,
-      className: cn22(
+      className: cn23(
         "right absolute top-0 bottom-0 right-3 flex items-center justify-center text-sm !text-gray-500 ",
         labelClass
       )
     },
-    trailIcon && /* @__PURE__ */ React20.createElement("span", null, /* @__PURE__ */ React20.createElement(
+    trailIcon && /* @__PURE__ */ React23.createElement("span", null, /* @__PURE__ */ React23.createElement(
       DynamicIcon,
       __spreadValues({}, __spreadProps(__spreadValues({}, trailIcon), {
-        className: cn22("h-5 w-5 text-gray-400", customIconClass),
+        className: cn23("h-5 w-5 text-gray-400", customIconClass),
         outline: iconOutlined
       }))
     )),
@@ -5905,6 +6117,152 @@ var FormInputWithAddons_default = FormInputWithAddons;
 
 // stories/organisms/FormInputWithAddons/index.tsx
 var FormInputWithAddons_default2 = FormInputWithAddons_default;
+
+// stories/organisms/TextInputSelect/TextInputSelect.tsx
+import React25, { useEffect as useEffect6, useId as useId4, useRef as useRef3, useState as useState10 } from "react";
+import { default as cn25 } from "classnames";
+
+// stories/organisms/TextInputSelect/InputSelect.tsx
+import React24, { useState as useState9 } from "react";
+import { default as cn24 } from "classnames";
+var InputSelect = ({
+  inputOptions,
+  onSelectOption,
+  align = "right",
+  className,
+  isDisabled
+}) => {
+  const [selectedOption, setSelectedOption] = useState9(inputOptions[0].value);
+  const handleChange = (e) => {
+    const targetValue = e.target.value;
+    onSelectOption && onSelectOption(targetValue);
+    setSelectedOption(targetValue);
+  };
+  if (!(inputOptions == null ? void 0 : inputOptions.length))
+    return null;
+  return /* @__PURE__ */ React24.createElement(
+    "select",
+    {
+      className: cn24(
+        "relative z-10 inline-flex items-center space-x-2 border border-gray-300 bg-white px-4 py-2 pr-7 text-sm font-medium",
+        "focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500",
+        align === "right" ? "-ml-px rounded-r border-l-white text-gray-700" : align === "left" ? "-mr-px rounded-l border-r-white text-gray-500 focus-within:z-10" : "",
+        !onSelectOption ? "cursor-default" : "",
+        className
+      ),
+      onChange: handleChange,
+      value: selectedOption,
+      disabled: isDisabled
+    },
+    inputOptions.map((option) => /* @__PURE__ */ React24.createElement("option", { key: option.value, value: option.value }, option.label))
+  );
+};
+
+// stories/organisms/TextInputSelect/TextInputSelect.tsx
+var TextInputSelect = ({
+  label,
+  isFocused,
+  isError,
+  id: id2,
+  name,
+  isRequired,
+  type,
+  defaultValue,
+  isDisabled,
+  message,
+  isShowCounter,
+  maxLength,
+  placeholder,
+  inputOptions,
+  selectLocation = "right",
+  prefix,
+  onChange,
+  onSelectOption,
+  value: externalValue
+}) => {
+  const [isFocus, setIsFocus] = useState10(Boolean(isFocused));
+  const [value, setValue] = useState10(defaultValue || "");
+  const inputRef = useRef3(null);
+  const uniqueID = useId4();
+  if (!id2)
+    id2 = `select-${uniqueID}`;
+  if (!name)
+    name = id2;
+  useEffect6(() => {
+    setValue(externalValue);
+  }, [externalValue]);
+  useEffect6(() => {
+    const input = inputRef.current;
+    if (!input || isFocus === void 0 || isFocused === void 0 || isDisabled)
+      return;
+    if (isFocus || isFocused) {
+      input.focus();
+    } else {
+      input.blur();
+    }
+  }, [isFocus, isFocused]);
+  useEffect6(() => {
+    const input = inputRef.current;
+    if (!input || defaultValue === void 0 || defaultValue === "")
+      return;
+  }, [defaultValue]);
+  const handleInputFocus = () => {
+    setIsFocus(true);
+  };
+  const handleInputBlur = () => {
+    setIsFocus(false);
+  };
+  const labelStyles = cn25("block inline-block font-medium transition-all text-sm text-gray-700 mb-1", {
+    "text-red-500 bg-white": isError
+  });
+  const discriptionStyles = cn25("text-sm mt-1 block", { "text-gray-500": !isError }, { "text-red-500": isError });
+  return /* @__PURE__ */ React25.createElement("div", null, label && /* @__PURE__ */ React25.createElement("label", { htmlFor: id2, className: labelStyles }, label, isRequired && /* @__PURE__ */ React25.createElement("span", { className: "text-red-500" }, " *")), /* @__PURE__ */ React25.createElement("div", { className: "flex" }, (inputOptions == null ? void 0 : inputOptions.length) && selectLocation === "left" && /* @__PURE__ */ React25.createElement(
+    InputSelect,
+    {
+      inputOptions,
+      align: "left",
+      onSelectOption,
+      className: cn25(isError ? "border-red-500" : ""),
+      isDisabled
+    }
+  ), /* @__PURE__ */ React25.createElement("div", { className: "relative flex-grow focus-within:z-20" }, prefix && /* @__PURE__ */ React25.createElement("div", { className: "pointer-events-none pr-10 absolute inset-y-0 left-0 flex items-center pl-3" }, /* @__PURE__ */ React25.createElement("span", { className: "text-gray-500 sm:text-sm" }, prefix)), /* @__PURE__ */ React25.createElement(
+    InputField_default2,
+    {
+      onFocus: handleInputFocus,
+      onBlur: handleInputBlur,
+      handleChange: (v) => onChange && onChange(v),
+      ref: inputRef,
+      type,
+      name,
+      id: id2,
+      className: cn25(
+        "w-full border border-gray-300 py-2 px-3 text-sm font-normal leading-5",
+        "focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500 sm:text-sm",
+        selectLocation === "right" ? `rounded-l` : `rounded-r`,
+        isError ? "border-red-500" : "",
+        prefix ? `pl-7` : ""
+      ),
+      isDisabled,
+      defaultValue,
+      value,
+      maxLength,
+      placeholder
+    }
+  )), (inputOptions == null ? void 0 : inputOptions.length) && selectLocation === "right" && /* @__PURE__ */ React25.createElement(
+    InputSelect,
+    {
+      inputOptions,
+      align: "right",
+      onSelectOption,
+      isDisabled,
+      className: cn25(isError ? "border-red-500" : "")
+    }
+  )), /* @__PURE__ */ React25.createElement("div", { className: "flex flex-row space-x-3" }, /* @__PURE__ */ React25.createElement("div", { className: "grow" }, message && /* @__PURE__ */ React25.createElement("span", { className: discriptionStyles }, message)), isShowCounter && /* @__PURE__ */ React25.createElement("div", { className: "shrink-0" }, /* @__PURE__ */ React25.createElement(InputCounter_default, { current: Number(value == null ? void 0 : value.length), limit: maxLength }))));
+};
+var TextInputSelect_default = TextInputSelect;
+
+// stories/organisms/TextInputSelect/index.tsx
+var TextInputSelect_default2 = TextInputSelect_default;
 export {
   AnimatedLabelInput_default2 as AnimatedLabelInput,
   Avatar_default2 as Avatar,
@@ -5926,7 +6284,9 @@ export {
   NProgress_default as RadialProgress,
   radio_default as Radio,
   select_default as Select,
-  textArea_default as TextAreaField,
+  TextInput_default2 as TextInput,
+  TextInputSelect_default2 as TextInputSelect,
+  textArea_default as Textarea,
   toggleSwitch_default as ToggleSwitch,
   isFAIcon,
   isHeroIcon,