@agility/plenum-ui 2.0.0-rc11 → 2.0.0-rc13

package/dist/index.js

@@ -5141,8 +5141,8 @@ var InputField = (_a) => {
     handleChange,
     required,
     clientSideCheck = true,
-    placeholder,
     className,
+    placeholder,
     ref
   } = _b, rest = __objRest(_b, [
     "type",
@@ -5156,26 +5156,26 @@ var InputField = (_a) => {
     "handleChange",
     "required",
     "clientSideCheck",
-    "placeholder",
     "className",
+    "placeholder",
     "ref"
   ]);
   return /* @__PURE__ */ React11.createElement(
     "input",
     __spreadValues({}, __spreadValues({
+      ref,
       type,
       id: id2,
-      ref,
       name,
       value,
       onChange: (e) => {
-        console.log(e);
-        handleChange(e.target.value);
+        if (handleChange)
+          handleChange(e.target.value);
       },
       autoFocus: isFocused,
       readOnly: isReadonly,
       disabled: isDisabled,
-      placeholder: placeholder || " ",
+      placeholder: placeholder || void 0,
       required,
       "aria-invalid": isError,
       "aria-disabled": isDisabled,
@@ -5435,7 +5435,33 @@ var Textarea = (_a) => {
   }, [externalValue]);
   if (!id2)
     id2 = `ta-${uniqueID}`;
-  return /* @__PURE__ */ React16.createElement("div", null, label && /* @__PURE__ */ React16.createElement(
+  if (!label) {
+    return /* @__PURE__ */ React16.createElement(
+      "textarea",
+      __spreadValues({
+        ref,
+        maxLength,
+        onChange: handleOnchange,
+        rows,
+        name,
+        id: id2,
+        cols,
+        className: cn16(
+          "peer 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
+        ),
+        disabled: isDisabled,
+        defaultValue,
+        value,
+        placeholder
+      }, rest)
+    );
+  }
+  return /* @__PURE__ */ React16.createElement("div", null, /* @__PURE__ */ React16.createElement(
     InputLabel_default2,
     {
       isPlaceholder: true,
@@ -5606,7 +5632,8 @@ var ToggleSwitch = ({
   name,
   id: id2,
   variant = "base",
-  withIcon
+  withIcon,
+  disabled
 }) => {
   const [checked, setChecked] = useState6(isChecked);
   useEffect5(() => setChecked(isChecked), [isChecked]);
@@ -5621,12 +5648,13 @@ var ToggleSwitch = ({
         setChecked(v);
       },
       className: cn18(
-        { "w-9 h-4": variant === "short", " h-6 w-11": variant === "base" },
-        checked ? "bg-purple-600" : "bg-gray-200",
+        { "w-9 h-4 transition-all": variant === "short", " h-6 w-11": variant === "base" },
+        checked && disabled ? "bg-purple-200" : 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"
-      )
+      ),
+      disabled
     },
-    /* @__PURE__ */ React18.createElement("span", { className: "sr-only" }, screenReaderLabel),
+    screenReaderLabel && /* @__PURE__ */ React18.createElement("span", { className: "sr-only" }, screenReaderLabel),
     /* @__PURE__ */ React18.createElement(
       "span",
       {
@@ -5651,28 +5679,35 @@ var toggleSwitch_default = ToggleSwitch_default;
 // stories/organisms/AnimatedLabelInput/AnimatedLabelInput.tsx
 import React19 from "react";
 import { default as cn19 } from "classnames";
-var AnimatedLabelInput = ({
-  id: id2,
-  label,
-  input,
-  message,
-  textarea,
-  required,
-  isError,
-  containerStyles
-}) => {
-  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(
+var AnimatedLabelInput = (props) => {
+  const _a = props, { id: id2, containerStyles, message, required, isError, label, value, handleChange } = _a, input = __objRest(_a, ["id", "containerStyles", "message", "required", "isError", "label", "value", "handleChange"]);
+  const [hasValue, setHasValue] = React19.useState(!!value);
+  return /* @__PURE__ */ React19.createElement("div", { className: cn19("group relative", containerStyles ? containerStyles : "") }, /* @__PURE__ */ React19.createElement(
+    InputField_default2,
+    __spreadValues({
+      id: id2,
+      isError,
+      value,
+      handleChange: (v) => {
+        setHasValue(!!v);
+        if (handleChange)
+          handleChange(v);
+      }
+    }, input)
+  ), /* @__PURE__ */ React19.createElement(
     "label",
     {
       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",
+        "absolute z-10 ml-[3px] inline-block bg-white text-sm transition-all text-gray-500 left-1 px-1",
+        hasValue ? "!-top-[8px] !ml-[.172rem] !text-xs text-gray-600" : "top-[9px]",
+        "peer-placeholder-shown:!-top-[8px] peer-placeholder-shown:!ml-[.172rem] peer-placeholder-shown:!text-xs peer-placeholder-shown:text-gray-600",
+        "group-focus-within:!-top-[8px] group-focus-within:!ml-[.172rem] group-focus-within:!text-xs group-focus-within:text-gray-600",
         isError && "!text-red-600"
       ),
       htmlFor: id2
     },
     label.display,
-    required && /* @__PURE__ */ React19.createElement("span", { className: "text-red-600" }, "*")
+    required && /* @__PURE__ */ React19.createElement("span", { className: "text-red-600 ml-1" }, "*")
   ), /* @__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;
@@ -5680,14 +5715,55 @@ var AnimatedLabelInput_default = AnimatedLabelInput;
 // stories/organisms/AnimatedLabelInput/index.tsx
 var AnimatedLabelInput_default2 = AnimatedLabelInput_default;
 
+// stories/organisms/AnimatedLabelTextArea/AnimatedLabelTextArea.tsx
+import React20 from "react";
+import { default as cn20 } from "classnames";
+var AnimatedLabelTextArea = (props) => {
+  const _a = props, { id: id2, containerStyles, message, required, isError, label, value, handleChange } = _a, input = __objRest(_a, ["id", "containerStyles", "message", "required", "isError", "label", "value", "handleChange"]);
+  const [hasValue, setHasValue] = React20.useState(!!value);
+  return /* @__PURE__ */ React20.createElement("div", { className: cn20("group relative", containerStyles ? containerStyles : "") }, /* @__PURE__ */ React20.createElement(
+    textArea_default,
+    __spreadProps(__spreadValues({
+      id: id2,
+      isError,
+      value,
+      onChange: (v) => {
+        setHasValue(!!v);
+        if (handleChange)
+          handleChange(v);
+      }
+    }, input), {
+      label: void 0
+    })
+  ), /* @__PURE__ */ React20.createElement(
+    "label",
+    {
+      className: cn20(
+        "absolute z-10 ml-[3px] inline-block bg-white text-sm transition-all text-gray-500 left-1 px-1",
+        hasValue ? "!-top-[8px] !ml-[.172rem] !text-xs text-gray-600" : "top-[9px]",
+        "peer-placeholder-shown:!-top-[8px] peer-placeholder-shown:!ml-[.172rem] peer-placeholder-shown:!text-xs peer-placeholder-shown:text-gray-600",
+        "group-focus-within:!-top-[8px] group-focus-within:!ml-[.172rem] group-focus-within:!text-xs group-focus-within:text-gray-600",
+        isError && "!text-red-600"
+      ),
+      htmlFor: id2
+    },
+    label,
+    required && /* @__PURE__ */ React20.createElement("span", { className: "text-red-600 ml-1" }, "*")
+  ), /* @__PURE__ */ React20.createElement("div", { className: "flex flex-row space-x-3" }, /* @__PURE__ */ React20.createElement("div", { className: "grow transition-all" }, message && /* @__PURE__ */ React20.createElement("span", { className: cn20("mt-1 block text-sm", isError ? "text-red-500" : "text-gray-500") }, message))));
+};
+var AnimatedLabelTextArea_default = AnimatedLabelTextArea;
+
+// stories/organisms/AnimatedLabelTextArea/index.tsx
+var AnimatedLabelTextArea_default2 = AnimatedLabelTextArea_default;
+
 // stories/organisms/ButtonDropdown/ButtonDropdown.tsx
-import React21 from "react";
-import { default as cn21 } from "classnames";
+import React22 from "react";
+import { default as cn22 } from "classnames";
 
 // stories/organisms/DropdownComponent/DropdownComponent.tsx
-import React20, { Fragment, useState as useState7 } from "react";
+import React21, { Fragment, useState as useState7 } from "react";
 import { Transition } from "@headlessui/react";
-import { default as cn20 } from "classnames";
+import { default as cn21 } from "classnames";
 import {
   useFloating,
   autoUpdate,
@@ -5760,7 +5836,7 @@ var Dropdown = (_a) => {
     }
   });
   const { groupClassname, buttonClassname, itemsClassname, itemClassname, activeItemClassname } = classNames3;
-  return /* @__PURE__ */ React20.createElement(
+  return /* @__PURE__ */ React21.createElement(
     "div",
     __spreadValues({}, __spreadValues({
       className: groupClassname,
@@ -5769,7 +5845,7 @@ var Dropdown = (_a) => {
       "aria-expanded": isOpen,
       "aria-haspopup": "listbox"
     }, props)),
-    /* @__PURE__ */ React20.createElement(
+    /* @__PURE__ */ React21.createElement(
       "button",
       __spreadValues({}, __spreadValues({
         ref: refs.setReference,
@@ -5778,9 +5854,9 @@ var Dropdown = (_a) => {
           setIsOpen(!isOpen);
         }
       }, getReferenceProps())),
-      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 " }))
+      CustomDropdownTrigger ? /* @__PURE__ */ React21.createElement("span", { className: "" }, CustomDropdownTrigger) : /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement("span", { className: "pl-1" }, label), /* @__PURE__ */ React21.createElement(DynamicIcon, { icon: "ChevronDownIcon", className: "ml-1 h-5 w-6 " }))
     ),
-    isMounted && items.length > 0 && isOpen && /* @__PURE__ */ React20.createElement(FloatingPortal, null, /* @__PURE__ */ React20.createElement(FloatingFocusManager, { context, modal: true }, /* @__PURE__ */ React20.createElement(
+    isMounted && items.length > 0 && isOpen && /* @__PURE__ */ React21.createElement(FloatingPortal, null, /* @__PURE__ */ React21.createElement(FloatingFocusManager, { context, modal: true }, /* @__PURE__ */ React21.createElement(
       Transition,
       {
         as: Fragment,
@@ -5792,7 +5868,7 @@ var Dropdown = (_a) => {
         leaveFrom: "transform opacity-100 scale-100",
         leaveTo: "transform opacity-0 scale-95"
       },
-      /* @__PURE__ */ React20.createElement(
+      /* @__PURE__ */ React21.createElement(
         "ul",
         __spreadValues(__spreadProps(__spreadValues({}, __spreadProps(__spreadValues({}, getFloatingProps()), {
           className: itemsClassname,
@@ -5814,7 +5890,7 @@ var Dropdown = (_a) => {
           "aria-labelledby": label
         }), getFloatingProps()),
         items.map((itemStack, idx) => {
-          return /* @__PURE__ */ React20.createElement(React20.Fragment, { key: `${idx}-list-${id2}` }, itemStack.map(
+          return /* @__PURE__ */ React21.createElement(React21.Fragment, { key: `${idx}-list-${id2}` }, itemStack.map(
             (_a3) => {
               var _b3 = _a3, {
                 onClick,
@@ -5832,7 +5908,7 @@ var Dropdown = (_a) => {
                 "iconPosition"
               ]);
               const active = activeItem && activeItem === key;
-              const itemClass = cn20(
+              const itemClass = cn21(
                 itemClassname,
                 "group flex cursor-pointer items-center px-4 py-2 text-sm transition-all",
                 {
@@ -5850,7 +5926,7 @@ var Dropdown = (_a) => {
                 },
                 itemClassname
               );
-              return /* @__PURE__ */ React20.createElement("li", { key }, /* @__PURE__ */ React20.createElement(
+              return /* @__PURE__ */ React21.createElement("li", { key }, /* @__PURE__ */ React21.createElement(
                 "button",
                 __spreadValues({}, __spreadValues({
                   onClick: () => {
@@ -5858,23 +5934,23 @@ var Dropdown = (_a) => {
                     onClick && onClick();
                   },
                   key,
-                  className: cn20(itemClass, "w-full")
+                  className: cn21(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(
+                /* @__PURE__ */ React21.createElement("div", { className: "flex items-center gap-x-4" }, icon && (iconPosition === "leading" || iconPosition === void 0) && (typeof icon === "string" ? /* @__PURE__ */ React21.createElement(
                   DynamicIcon,
                   __spreadValues({}, {
                     icon,
-                    className: cn20(
+                    className: cn21(
                       {
                         "text-red-500": isEmphasized
                       },
                       "opacity-60 group"
                     )
                   })
-                ) : /* @__PURE__ */ React20.createElement(
+                ) : /* @__PURE__ */ React21.createElement(
                   DynamicIcon,
                   __spreadValues({}, __spreadProps(__spreadValues({}, icon), {
-                    className: cn20(
+                    className: cn21(
                       icon.className,
                       {
                         "text-red-500": isEmphasized
@@ -5882,21 +5958,21 @@ var Dropdown = (_a) => {
                       "opacity-60 group"
                     )
                   }))
-                )), /* @__PURE__ */ React20.createElement("div", { className: "whitespace-nowrap" }, label2), icon && iconPosition === "trailing" && (typeof icon === "string" ? /* @__PURE__ */ React20.createElement(
+                )), /* @__PURE__ */ React21.createElement("div", { className: "whitespace-nowrap" }, label2), icon && iconPosition === "trailing" && (typeof icon === "string" ? /* @__PURE__ */ React21.createElement(
                   DynamicIcon,
                   __spreadValues({}, {
                     icon,
-                    className: cn20(
+                    className: cn21(
                       {
                         "text-red-500": isEmphasized
                       },
                       "opacity-60 group"
                     )
                   })
-                ) : /* @__PURE__ */ React20.createElement(
+                ) : /* @__PURE__ */ React21.createElement(
                   DynamicIcon,
                   __spreadValues({}, __spreadProps(__spreadValues({}, icon), {
-                    className: cn20(
+                    className: cn21(
                       icon.className,
                       {
                         "text-red-500": isEmphasized
@@ -5921,39 +5997,39 @@ var DropdownComponent_default2 = DropdownComponent_default;
 // stories/organisms/ButtonDropdown/ButtonDropdown.tsx
 var ButtonDropdown = ({ button, dropDown, placement, offsetOptions }) => {
   const dropDownClasses = __spreadProps(__spreadValues({}, defaultClassNames), {
-    groupClassname: cn21(
+    groupClassname: cn22(
       "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__ */ 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(
+  return /* @__PURE__ */ React22.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__ */ React22.createElement(
     Button_default2,
     __spreadValues({}, __spreadProps(__spreadValues({}, button), {
-      className: cn21(
+      className: cn22(
         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__ */ React21.createElement(
+  ), /* @__PURE__ */ React22.createElement(
     "div",
     {
-      className: cn21(
+      className: cn22(
         "w-[1px] rt",
         button.actionType === "primary" ? "bg-purple-700" : "",
         button.actionType === "secondary" ? "bg-purple-200" : "",
         button.actionType === "alternative" ? "bg-gray-300" : ""
       )
     }
-  ), /* @__PURE__ */ React21.createElement(
+  ), /* @__PURE__ */ React22.createElement(
     DropdownComponent_default2,
     __spreadValues({}, __spreadProps(__spreadValues({}, dropDown), {
-      CustomDropdownTrigger: /* @__PURE__ */ React21.createElement(
+      CustomDropdownTrigger: /* @__PURE__ */ React22.createElement(
         DynamicIcon,
         __spreadValues({}, {
           icon: "ChevronDownIcon",
-          className: cn21("h-5 w-5", {
+          className: cn22("h-5 w-5", {
             "text-white": button.actionType === "primary",
             "text-purple-700": button.actionType === "secondary",
             "text-gray-700": button.actionType === "alternative"
@@ -5970,7 +6046,7 @@ var ButtonDropdown = ({ button, dropDown, placement, offsetOptions }) => {
       },
       placement
     }))
-  ), /* @__PURE__ */ React21.createElement("div", { className: "hidden !bg-purple-100 !text-purple-600 transition-all hover:bg-purple-200 focus:bg-purple-300" }));
+  ), /* @__PURE__ */ React22.createElement("div", { className: "hidden !bg-purple-100 !text-purple-600 transition-all hover:bg-purple-200 focus:bg-purple-300" }));
 };
 var ButtonDropdown_default = ButtonDropdown;
 
@@ -5978,8 +6054,8 @@ var ButtonDropdown_default = ButtonDropdown;
 var ButtonDropdown_default2 = ButtonDropdown_default;
 
 // stories/organisms/EmptySectionPlaceholder/EmptySectionPlaceholder.tsx
-import React22 from "react";
-import { default as cn22 } from "classnames";
+import React23 from "react";
+import { default as cn23 } from "classnames";
 var EmptySectionPlaceholder = ({
   icon,
   mutedText,
@@ -5988,7 +6064,7 @@ var EmptySectionPlaceholder = ({
   actions,
   isWide
 }) => {
-  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));
+  return /* @__PURE__ */ React23.createElement("div", { className: "flex h-full w-full flex-col items-center justify-center border-2 border-dashed border-gray-300 p-5" }, /* @__PURE__ */ React23.createElement(IconWithShadow_default, __spreadValues({}, icon)), mutedText && /* @__PURE__ */ React23.createElement("p", { className: "my-2 block text-xs text-gray-500" }, mutedText), CallToActionComponent ? CallToActionComponent : /* @__PURE__ */ React23.createElement("p", { className: "mb-2 block text-sm font-medium text-gray-600" }, primaryMessage), actions.length > 0 ? /* @__PURE__ */ React23.createElement("div", { className: cn23("mt-2 flex gap-2", isWide ? "" : "flex-col items-center") }, actions.map((action, index) => /* @__PURE__ */ React23.createElement(Button_default2, __spreadProps(__spreadValues({}, __spreadValues({}, action)), { key: action.label.replaceAll(" ", "-") })))) : /* @__PURE__ */ React23.createElement(React23.Fragment, null));
 };
 var EmptySectionPlaceholder_default = EmptySectionPlaceholder;
 
@@ -5996,8 +6072,8 @@ var EmptySectionPlaceholder_default = EmptySectionPlaceholder;
 var EmptySectionPlaceholder_default2 = EmptySectionPlaceholder_default;
 
 // stories/organisms/FormInputWithAddons/FormInputWithAddons.tsx
-import React23, { useLayoutEffect as useLayoutEffect2, useRef as useRef2, useState as useState8 } from "react";
-import { default as cn23 } from "classnames";
+import React24, { useLayoutEffect as useLayoutEffect2, useRef as useRef2, useState as useState8 } from "react";
+import { default as cn24 } from "classnames";
 var FormInputWithAddons = (_a) => {
   var _b = _a, {
     handleChange,
@@ -6055,25 +6131,25 @@ var FormInputWithAddons = (_a) => {
     setLeadLabelWidth(((_a2 = leadLabelRef.current) == null ? void 0 : _a2.clientWidth) || 0);
     setTrailLabelWidth(((_b2 = trailLabelRef.current) == null ? void 0 : _b2.clientWidth) || 0);
   }, []);
-  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(
+  return /* @__PURE__ */ React24.createElement("div", { className: cn24("group flex flex-col", containerClassName) }, !leadLabel && !trailLabel && topLabel && /* @__PURE__ */ React24.createElement("label", { htmlFor: id2, className: cn24("flex items-center text-sm font-medium text-gray-600", labelClass) }, topLabel), description && /* @__PURE__ */ React24.createElement("div", { className: "mb-2 text-sm text-gray-500" }, description), /* @__PURE__ */ React24.createElement("div", { className: "relative flex-grow" }, (leadLabel || leadIcon) && /* @__PURE__ */ React24.createElement(
     "label",
     {
       ref: leadLabelRef,
       htmlFor: id2,
-      className: cn23(
+      className: cn24(
         "absolute top-0 bottom-0 left-3 flex items-center justify-center text-sm text-gray-500",
         labelClass
       )
     },
-    leadIcon && /* @__PURE__ */ React23.createElement("span", null, /* @__PURE__ */ React23.createElement(
+    leadIcon && /* @__PURE__ */ React24.createElement("span", null, /* @__PURE__ */ React24.createElement(
       DynamicIcon,
       __spreadValues({}, __spreadProps(__spreadValues({}, leadIcon), {
-        className: cn23("h-5 w-5 text-gray-400", leadIconClassNames, customIconClass),
+        className: cn24("h-5 w-5 text-gray-400", leadIconClassNames, customIconClass),
         outline: iconOutlined
       }))
     )),
     leadLabel && leadLabel
-  ), /* @__PURE__ */ React23.createElement(
+  ), /* @__PURE__ */ React24.createElement(
     InputField_default2,
     __spreadValues({}, __spreadProps(__spreadValues({}, rest), {
       handleChange,
@@ -6093,20 +6169,20 @@ var FormInputWithAddons = (_a) => {
         paddingLeft: `${leadLabelWidth + addonOffset}px`
       }
     }))
-  ), (trailLabel || trailIcon) && /* @__PURE__ */ React23.createElement(
+  ), (trailLabel || trailIcon) && /* @__PURE__ */ React24.createElement(
     "label",
     {
       ref: trailLabelRef,
       htmlFor: id2,
-      className: cn23(
+      className: cn24(
         "right absolute top-0 bottom-0 right-3 flex items-center justify-center text-sm !text-gray-500 ",
         labelClass
       )
     },
-    trailIcon && /* @__PURE__ */ React23.createElement("span", null, /* @__PURE__ */ React23.createElement(
+    trailIcon && /* @__PURE__ */ React24.createElement("span", null, /* @__PURE__ */ React24.createElement(
       DynamicIcon,
       __spreadValues({}, __spreadProps(__spreadValues({}, trailIcon), {
-        className: cn23("h-5 w-5 text-gray-400", customIconClass),
+        className: cn24("h-5 w-5 text-gray-400", customIconClass),
         outline: iconOutlined
       }))
     )),
@@ -6119,12 +6195,12 @@ var FormInputWithAddons_default = FormInputWithAddons;
 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";
+import React26, { useEffect as useEffect6, useId as useId4, useRef as useRef3, useState as useState10 } from "react";
+import { default as cn26 } from "classnames";
 
 // stories/organisms/TextInputSelect/InputSelect.tsx
-import React24, { useState as useState9 } from "react";
-import { default as cn24 } from "classnames";
+import React25, { useState as useState9 } from "react";
+import { default as cn25 } from "classnames";
 var InputSelect = ({
   inputOptions,
   onSelectOption,
@@ -6140,10 +6216,10 @@ var InputSelect = ({
   };
   if (!(inputOptions == null ? void 0 : inputOptions.length))
     return null;
-  return /* @__PURE__ */ React24.createElement(
+  return /* @__PURE__ */ React25.createElement(
     "select",
     {
-      className: cn24(
+      className: cn25(
         "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" : "",
@@ -6154,7 +6230,7 @@ var InputSelect = ({
       value: selectedOption,
       disabled: isDisabled
     },
-    inputOptions.map((option) => /* @__PURE__ */ React24.createElement("option", { key: option.value, value: option.value }, option.label))
+    inputOptions.map((option) => /* @__PURE__ */ React25.createElement("option", { key: option.value, value: option.value }, option.label))
   );
 };
 
@@ -6212,20 +6288,20 @@ var TextInputSelect = ({
   const handleInputBlur = () => {
     setIsFocus(false);
   };
-  const labelStyles = cn25("block inline-block font-medium transition-all text-sm text-gray-700 mb-1", {
+  const labelStyles = cn26("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(
+  const discriptionStyles = cn26("text-sm mt-1 block", { "text-gray-500": !isError }, { "text-red-500": isError });
+  return /* @__PURE__ */ React26.createElement("div", null, label && /* @__PURE__ */ React26.createElement("label", { htmlFor: id2, className: labelStyles }, label, isRequired && /* @__PURE__ */ React26.createElement("span", { className: "text-red-500" }, " *")), /* @__PURE__ */ React26.createElement("div", { className: "flex" }, (inputOptions == null ? void 0 : inputOptions.length) && selectLocation === "left" && /* @__PURE__ */ React26.createElement(
     InputSelect,
     {
       inputOptions,
       align: "left",
       onSelectOption,
-      className: cn25(isError ? "border-red-500" : ""),
+      className: cn26(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(
+  ), /* @__PURE__ */ React26.createElement("div", { className: "relative flex-grow focus-within:z-20" }, prefix && /* @__PURE__ */ React26.createElement("div", { className: "pointer-events-none pr-10 absolute inset-y-0 left-0 flex items-center pl-3" }, /* @__PURE__ */ React26.createElement("span", { className: "text-gray-500 sm:text-sm" }, prefix)), /* @__PURE__ */ React26.createElement(
     InputField_default2,
     {
       onFocus: handleInputFocus,
@@ -6235,7 +6311,7 @@ var TextInputSelect = ({
       type,
       name,
       id: id2,
-      className: cn25(
+      className: cn26(
         "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`,
@@ -6248,16 +6324,16 @@ var TextInputSelect = ({
       maxLength,
       placeholder
     }
-  )), (inputOptions == null ? void 0 : inputOptions.length) && selectLocation === "right" && /* @__PURE__ */ React25.createElement(
+  )), (inputOptions == null ? void 0 : inputOptions.length) && selectLocation === "right" && /* @__PURE__ */ React26.createElement(
     InputSelect,
     {
       inputOptions,
       align: "right",
       onSelectOption,
       isDisabled,
-      className: cn25(isError ? "border-red-500" : "")
+      className: cn26(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 }))));
+  )), /* @__PURE__ */ React26.createElement("div", { className: "flex flex-row space-x-3" }, /* @__PURE__ */ React26.createElement("div", { className: "grow" }, message && /* @__PURE__ */ React26.createElement("span", { className: discriptionStyles }, message)), isShowCounter && /* @__PURE__ */ React26.createElement("div", { className: "shrink-0" }, /* @__PURE__ */ React26.createElement(InputCounter_default, { current: Number(value == null ? void 0 : value.length), limit: maxLength }))));
 };
 var TextInputSelect_default = TextInputSelect;
 
@@ -6265,6 +6341,7 @@ var TextInputSelect_default = TextInputSelect;
 var TextInputSelect_default2 = TextInputSelect_default;
 export {
   AnimatedLabelInput_default2 as AnimatedLabelInput,
+  AnimatedLabelTextArea_default2 as AnimatedLabelTextArea,
   Avatar_default2 as Avatar,
   badges_default as Badge,
   Button_default2 as Button,