@agility/plenum-ui 2.0.0-rc6 → 2.0.0-rc8

package/dist/index.js

@@ -5371,74 +5371,114 @@ 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/TextInput/TextInput.tsx
-import React16, { forwardRef, useEffect as useEffect3, useId as useId2, useRef, useState as useState4 } from "react";
+import React17, { forwardRef as forwardRef2, useEffect as useEffect4, useId as useId3, useRef, useState as useState5 } from "react";
 import { default as cn17 } from "classnames";
-
-// 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/TextInput/TextInput.tsx
 var TextInput = (_a, ref) => {
   var _b = _a, {
     label,
@@ -5477,16 +5517,16 @@ var TextInput = (_a, ref) => {
     "value",
     "className"
   ]);
-  const uniqueID = useId2();
-  const [isFocus, setIsFocus] = useState4(Boolean(isFocused));
-  const [value, setValue] = useState4(externalValue || defaultValue || "");
+  const uniqueID = useId3();
+  const [isFocus, setIsFocus] = useState5(Boolean(isFocused));
+  const [value, setValue] = useState5(externalValue || defaultValue || "");
   const inputRef = useRef(null);
-  useEffect3(() => {
+  useEffect4(() => {
     if (externalValue !== void 0 && externalValue !== null) {
       setValue(externalValue);
     }
   }, [externalValue]);
-  useEffect3(() => {
+  useEffect4(() => {
     const input = inputRef.current;
     if (!input || isFocus === void 0 || isDisabled)
       return;
@@ -5496,7 +5536,7 @@ var TextInput = (_a, ref) => {
       input.blur();
     }
   }, [isFocus]);
-  useEffect3(() => {
+  useEffect4(() => {
     const input = inputRef.current;
     if (!input || defaultValue === void 0 || defaultValue === "")
       return;
@@ -5507,7 +5547,7 @@ var TextInput = (_a, ref) => {
     id2 = `input-${uniqueID}`;
   if (!name)
     name = id2;
-  return /* @__PURE__ */ React16.createElement("div", { className: "relative" }, /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React17.createElement("div", { className: "relative" }, /* @__PURE__ */ React17.createElement(
     InputLabel_default2,
     {
       isPlaceholder: true,
@@ -5518,7 +5558,7 @@ var TextInput = (_a, ref) => {
       isActive: true,
       isDisabled
     }
-  ), /* @__PURE__ */ React16.createElement(
+  ), /* @__PURE__ */ React17.createElement(
     InputField_default2,
     __spreadValues({
       onFocus: handleInputFocus,
@@ -5546,16 +5586,16 @@ var TextInput = (_a, ref) => {
       maxLength,
       placeholder
     }, props)
-  ), /* @__PURE__ */ React16.createElement("div", { className: "flex flex-row space-x-3" }, /* @__PURE__ */ React16.createElement("div", { className: "grow" }, message && /* @__PURE__ */ React16.createElement("span", { className: cn17("mt-1 block text-sm", isError ? "text-red-500" : "text-gray-500") }, message)), isShowCounter && /* @__PURE__ */ React16.createElement("div", { className: "shrink-0" }, /* @__PURE__ */ React16.createElement(InputCounter_default, { current: Number(value == null ? void 0 : value.length), limit: maxLength }))));
+  ), /* @__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 = forwardRef(TextInput);
+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 React17, { useEffect as useEffect4, useState as useState5 } from "react";
+import React18, { useEffect as useEffect5, useState as useState6 } from "react";
 import { default as cn18 } from "classnames";
 import { Switch } from "@headlessui/react";
 var ToggleSwitch = ({
@@ -5568,9 +5608,9 @@ var ToggleSwitch = ({
   variant = "base",
   withIcon
 }) => {
-  const [checked, setChecked] = useState5(isChecked);
-  useEffect4(() => setChecked(isChecked), [isChecked]);
-  return /* @__PURE__ */ React17.createElement(Switch.Group, { as: "div", className: "flex items-center gap-2" }, label && label.xPosition === "left" && /* @__PURE__ */ React17.createElement(Switch.Label, { className: label.className }, label.text), /* @__PURE__ */ React17.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,
@@ -5586,8 +5626,8 @@ var ToggleSwitch = ({
         "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__ */ React17.createElement("span", { className: "sr-only" }, screenReaderLabel),
-    /* @__PURE__ */ React17.createElement(
+    /* @__PURE__ */ React18.createElement("span", { className: "sr-only" }, screenReaderLabel),
+    /* @__PURE__ */ React18.createElement(
       "span",
       {
         className: cn18(
@@ -5599,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__ */ React17.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__ */ React17.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;
 
@@ -5609,7 +5649,7 @@ var ToggleSwitch_default = ToggleSwitch;
 var toggleSwitch_default = ToggleSwitch_default;
 
 // stories/organisms/AnimatedLabelInput/AnimatedLabelInput.tsx
-import React18 from "react";
+import React19 from "react";
 import { default as cn19 } from "classnames";
 var AnimatedLabelInput = ({
   id: id2,
@@ -5621,7 +5661,7 @@ var AnimatedLabelInput = ({
   isError,
   containerStyles
 }) => {
-  return /* @__PURE__ */ React18.createElement("div", { className: cn19("group relative", containerStyles ? containerStyles : "") }, input && /* @__PURE__ */ React18.createElement(InputField_default2, __spreadValues({ isError }, input)), textarea && /* @__PURE__ */ React18.createElement(TextArea_default, __spreadValues({ isError }, textarea)), /* @__PURE__ */ React18.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: cn19(
@@ -5632,8 +5672,8 @@ var AnimatedLabelInput = ({
       htmlFor: id2
     },
     label.display,
-    required && /* @__PURE__ */ React18.createElement("span", { className: "text-red-600" }, "*")
-  ), /* @__PURE__ */ React18.createElement("div", { className: "flex flex-row space-x-3" }, /* @__PURE__ */ React18.createElement("div", { className: "grow transition-all" }, message && /* @__PURE__ */ React18.createElement("span", { className: cn19("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;
 
@@ -5641,11 +5681,11 @@ var AnimatedLabelInput_default = AnimatedLabelInput;
 var AnimatedLabelInput_default2 = AnimatedLabelInput_default;
 
 // stories/organisms/ButtonDropdown/ButtonDropdown.tsx
-import React20 from "react";
+import React21 from "react";
 import { default as cn21 } from "classnames";
 
 // stories/organisms/DropdownComponent/DropdownComponent.tsx
-import React19, { Fragment, useState as useState6 } from "react";
+import React20, { Fragment, useState as useState7 } from "react";
 import { Transition } from "@headlessui/react";
 import { default as cn20 } from "classnames";
 import {
@@ -5688,8 +5728,8 @@ var Dropdown = (_a) => {
     "offsetOptions"
   ]);
   var _a2, _b2;
-  const [isOpen, setIsOpen] = useState6(false);
-  const [activeItem, setActiveItem] = useState6(null);
+  const [isOpen, setIsOpen] = useState7(false);
+  const [activeItem, setActiveItem] = useState7(null);
   const { refs, floatingStyles, context } = useFloating({
     open: isOpen,
     onOpenChange: setIsOpen,
@@ -5720,7 +5760,7 @@ var Dropdown = (_a) => {
     }
   });
   const { groupClassname, buttonClassname, itemsClassname, itemClassname, activeItemClassname } = classNames3;
-  return /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React20.createElement(
     "div",
     __spreadValues({}, __spreadValues({
       className: groupClassname,
@@ -5729,7 +5769,7 @@ var Dropdown = (_a) => {
       "aria-expanded": isOpen,
       "aria-haspopup": "listbox"
     }, props)),
-    /* @__PURE__ */ React19.createElement(
+    /* @__PURE__ */ React20.createElement(
       "button",
       __spreadValues({}, __spreadValues({
         ref: refs.setReference,
@@ -5738,9 +5778,9 @@ var Dropdown = (_a) => {
           setIsOpen(!isOpen);
         }
       }, getReferenceProps())),
-      CustomDropdownTrigger ? /* @__PURE__ */ React19.createElement("span", { className: "" }, CustomDropdownTrigger) : /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement("span", { className: "pl-1" }, label), /* @__PURE__ */ React19.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__ */ React19.createElement(FloatingPortal, null, /* @__PURE__ */ React19.createElement(FloatingFocusManager, { context, modal: true }, /* @__PURE__ */ React19.createElement(
+    isMounted && items.length > 0 && isOpen && /* @__PURE__ */ React20.createElement(FloatingPortal, null, /* @__PURE__ */ React20.createElement(FloatingFocusManager, { context, modal: true }, /* @__PURE__ */ React20.createElement(
       Transition,
       {
         as: Fragment,
@@ -5752,7 +5792,7 @@ var Dropdown = (_a) => {
         leaveFrom: "transform opacity-100 scale-100",
         leaveTo: "transform opacity-0 scale-95"
       },
-      /* @__PURE__ */ React19.createElement(
+      /* @__PURE__ */ React20.createElement(
         "ul",
         __spreadValues(__spreadProps(__spreadValues({}, __spreadProps(__spreadValues({}, getFloatingProps()), {
           className: itemsClassname,
@@ -5774,7 +5814,7 @@ var Dropdown = (_a) => {
           "aria-labelledby": label
         }), getFloatingProps()),
         items.map((itemStack, idx) => {
-          return /* @__PURE__ */ React19.createElement(React19.Fragment, { key: `${idx}-list-${id2}` }, itemStack.map(
+          return /* @__PURE__ */ React20.createElement(React20.Fragment, { key: `${idx}-list-${id2}` }, itemStack.map(
             (_a3) => {
               var _b3 = _a3, {
                 onClick,
@@ -5810,7 +5850,7 @@ var Dropdown = (_a) => {
                 },
                 itemClassname
               );
-              return /* @__PURE__ */ React19.createElement("li", { key }, /* @__PURE__ */ React19.createElement(
+              return /* @__PURE__ */ React20.createElement("li", { key }, /* @__PURE__ */ React20.createElement(
                 "button",
                 __spreadValues({}, __spreadValues({
                   onClick: () => {
@@ -5820,7 +5860,7 @@ var Dropdown = (_a) => {
                   key,
                   className: cn20(itemClass, "w-full")
                 }, rest)),
-                /* @__PURE__ */ React19.createElement("div", { className: "flex items-center gap-x-4" }, icon && (iconPosition === "leading" || iconPosition === void 0) && (typeof icon === "string" ? /* @__PURE__ */ React19.createElement(
+                /* @__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,
@@ -5831,7 +5871,7 @@ var Dropdown = (_a) => {
                       "opacity-60 group"
                     )
                   })
-                ) : /* @__PURE__ */ React19.createElement(
+                ) : /* @__PURE__ */ React20.createElement(
                   DynamicIcon,
                   __spreadValues({}, __spreadProps(__spreadValues({}, icon), {
                     className: cn20(
@@ -5842,7 +5882,7 @@ var Dropdown = (_a) => {
                       "opacity-60 group"
                     )
                   }))
-                )), /* @__PURE__ */ React19.createElement("div", { className: "whitespace-nowrap" }, label2), icon && iconPosition === "trailing" && (typeof icon === "string" ? /* @__PURE__ */ React19.createElement(
+                )), /* @__PURE__ */ React20.createElement("div", { className: "whitespace-nowrap" }, label2), icon && iconPosition === "trailing" && (typeof icon === "string" ? /* @__PURE__ */ React20.createElement(
                   DynamicIcon,
                   __spreadValues({}, {
                     icon,
@@ -5853,7 +5893,7 @@ var Dropdown = (_a) => {
                       "opacity-60 group"
                     )
                   })
-                ) : /* @__PURE__ */ React19.createElement(
+                ) : /* @__PURE__ */ React20.createElement(
                   DynamicIcon,
                   __spreadValues({}, __spreadProps(__spreadValues({}, icon), {
                     className: cn20(
@@ -5888,7 +5928,7 @@ var ButtonDropdown = ({ button, dropDown, placement, offsetOptions }) => {
       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__ */ React20.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__ */ React20.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: cn21(
@@ -5896,7 +5936,7 @@ var ButtonDropdown = ({ button, dropDown, placement, offsetOptions }) => {
         "!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__ */ React20.createElement(
+  ), /* @__PURE__ */ React21.createElement(
     "div",
     {
       className: cn21(
@@ -5906,10 +5946,10 @@ var ButtonDropdown = ({ button, dropDown, placement, offsetOptions }) => {
         button.actionType === "alternative" ? "bg-gray-300" : ""
       )
     }
-  ), /* @__PURE__ */ React20.createElement(
+  ), /* @__PURE__ */ React21.createElement(
     DropdownComponent_default2,
     __spreadValues({}, __spreadProps(__spreadValues({}, dropDown), {
-      CustomDropdownTrigger: /* @__PURE__ */ React20.createElement(
+      CustomDropdownTrigger: /* @__PURE__ */ React21.createElement(
         DynamicIcon,
         __spreadValues({}, {
           icon: "ChevronDownIcon",
@@ -5930,7 +5970,7 @@ var ButtonDropdown = ({ button, dropDown, placement, offsetOptions }) => {
       },
       placement
     }))
-  ), /* @__PURE__ */ React20.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;
 
@@ -5938,7 +5978,7 @@ var ButtonDropdown_default = ButtonDropdown;
 var ButtonDropdown_default2 = ButtonDropdown_default;
 
 // stories/organisms/EmptySectionPlaceholder/EmptySectionPlaceholder.tsx
-import React21 from "react";
+import React22 from "react";
 import { default as cn22 } from "classnames";
 var EmptySectionPlaceholder = ({
   icon,
@@ -5948,7 +5988,7 @@ var EmptySectionPlaceholder = ({
   actions,
   isWide
 }) => {
-  return /* @__PURE__ */ React21.createElement("div", { className: "flex h-full w-full flex-col items-center justify-center border-2 border-dashed border-gray-300 p-5" }, /* @__PURE__ */ React21.createElement(IconWithShadow_default, __spreadValues({}, icon)), mutedText && /* @__PURE__ */ React21.createElement("p", { className: "my-2 block text-xs text-gray-500" }, mutedText), CallToActionComponent ? CallToActionComponent : /* @__PURE__ */ React21.createElement("p", { className: "mb-2 block text-sm font-medium text-gray-600" }, primaryMessage), actions.length > 0 ? /* @__PURE__ */ React21.createElement("div", { className: cn22("mt-2 flex gap-2", isWide ? "" : "flex-col items-center") }, actions.map((action, index) => /* @__PURE__ */ React21.createElement(Button_default2, __spreadProps(__spreadValues({}, __spreadValues({}, action)), { key: action.label.replaceAll(" ", "-") })))) : /* @__PURE__ */ React21.createElement(React21.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;
 
@@ -5956,7 +5996,7 @@ var EmptySectionPlaceholder_default = EmptySectionPlaceholder;
 var EmptySectionPlaceholder_default2 = EmptySectionPlaceholder_default;
 
 // stories/organisms/FormInputWithAddons/FormInputWithAddons.tsx
-import React22, { useLayoutEffect as useLayoutEffect2, useRef as useRef2, useState as useState7 } from "react";
+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, {
@@ -6008,14 +6048,14 @@ var FormInputWithAddons = (_a) => {
   ]);
   const leadLabelRef = useRef2(null);
   const trailLabelRef = useRef2(null);
-  const [leadLabelWidth, setLeadLabelWidth] = useState7(0);
-  const [trailLabelWidth, setTrailLabelWidth] = useState7(0);
+  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__ */ React22.createElement("div", { className: cn23("group flex flex-col", containerClassName) }, !leadLabel && !trailLabel && topLabel && /* @__PURE__ */ React22.createElement("label", { htmlFor: id2, className: cn23("flex items-center text-sm font-medium text-gray-600", labelClass) }, topLabel), description && /* @__PURE__ */ React22.createElement("div", { className: "mb-2 text-sm text-gray-500" }, description), /* @__PURE__ */ React22.createElement("div", { className: "relative flex-grow" }, (leadLabel || leadIcon) && /* @__PURE__ */ React22.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,
@@ -6025,7 +6065,7 @@ var FormInputWithAddons = (_a) => {
         labelClass
       )
     },
-    leadIcon && /* @__PURE__ */ React22.createElement("span", null, /* @__PURE__ */ React22.createElement(
+    leadIcon && /* @__PURE__ */ React23.createElement("span", null, /* @__PURE__ */ React23.createElement(
       DynamicIcon,
       __spreadValues({}, __spreadProps(__spreadValues({}, leadIcon), {
         className: cn23("h-5 w-5 text-gray-400", leadIconClassNames, customIconClass),
@@ -6033,7 +6073,7 @@ var FormInputWithAddons = (_a) => {
       }))
     )),
     leadLabel && leadLabel
-  ), /* @__PURE__ */ React22.createElement(
+  ), /* @__PURE__ */ React23.createElement(
     InputField_default2,
     __spreadValues({}, __spreadProps(__spreadValues({}, rest), {
       handleChange,
@@ -6053,7 +6093,7 @@ var FormInputWithAddons = (_a) => {
         paddingLeft: `${leadLabelWidth + addonOffset}px`
       }
     }))
-  ), (trailLabel || trailIcon) && /* @__PURE__ */ React22.createElement(
+  ), (trailLabel || trailIcon) && /* @__PURE__ */ React23.createElement(
     "label",
     {
       ref: trailLabelRef,
@@ -6063,7 +6103,7 @@ var FormInputWithAddons = (_a) => {
         labelClass
       )
     },
-    trailIcon && /* @__PURE__ */ React22.createElement("span", null, /* @__PURE__ */ React22.createElement(
+    trailIcon && /* @__PURE__ */ React23.createElement("span", null, /* @__PURE__ */ React23.createElement(
       DynamicIcon,
       __spreadValues({}, __spreadProps(__spreadValues({}, trailIcon), {
         className: cn23("h-5 w-5 text-gray-400", customIconClass),
@@ -6077,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,
@@ -6098,8 +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,