@agility/plenum-ui 2.0.0-rc5 → 2.0.0-rc7

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,12 +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 = ({
@@ -5564,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,
@@ -5582,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(
@@ -5595,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;
 
@@ -5605,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,
@@ -5617,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(
@@ -5628,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;
 
@@ -5637,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 {
@@ -5684,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,
@@ -5716,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,
@@ -5725,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,
@@ -5734,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,
@@ -5748,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,
@@ -5770,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,
@@ -5806,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: () => {
@@ -5816,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,
@@ -5827,7 +5871,7 @@ var Dropdown = (_a) => {
                       "opacity-60 group"
                     )
                   })
-                ) : /* @__PURE__ */ React19.createElement(
+                ) : /* @__PURE__ */ React20.createElement(
                   DynamicIcon,
                   __spreadValues({}, __spreadProps(__spreadValues({}, icon), {
                     className: cn20(
@@ -5838,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,
@@ -5849,7 +5893,7 @@ var Dropdown = (_a) => {
                       "opacity-60 group"
                     )
                   })
-                ) : /* @__PURE__ */ React19.createElement(
+                ) : /* @__PURE__ */ React20.createElement(
                   DynamicIcon,
                   __spreadValues({}, __spreadProps(__spreadValues({}, icon), {
                     className: cn20(
@@ -5884,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(
@@ -5892,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(
@@ -5902,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",
@@ -5926,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;
 
@@ -5934,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,
@@ -5944,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;
 
@@ -5952,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, {
@@ -6004,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,
@@ -6021,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),
@@ -6029,7 +6073,7 @@ var FormInputWithAddons = (_a) => {
       }))
     )),
     leadLabel && leadLabel
-  ), /* @__PURE__ */ React22.createElement(
+  ), /* @__PURE__ */ React23.createElement(
     InputField_default2,
     __spreadValues({}, __spreadProps(__spreadValues({}, rest), {
       handleChange,
@@ -6049,7 +6093,7 @@ var FormInputWithAddons = (_a) => {
         paddingLeft: `${leadLabelWidth + addonOffset}px`
       }
     }))
-  ), (trailLabel || trailIcon) && /* @__PURE__ */ React22.createElement(
+  ), (trailLabel || trailIcon) && /* @__PURE__ */ React23.createElement(
     "label",
     {
       ref: trailLabelRef,
@@ -6059,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),
@@ -6094,7 +6138,8 @@ export {
   NProgress_default as RadialProgress,
   radio_default as Radio,
   select_default as Select,
-  textArea_default as TextAreaField,
+  TextInput_default2 as TextInput,
+  textArea_default as Textarea,
   toggleSwitch_default as ToggleSwitch,
   isFAIcon,
   isHeroIcon,