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

package/README.md

@@ -27,7 +27,7 @@ In your app entry point (i.e. \`_app.tsx\`), import the \`globals.css\` file fro
 
 ```jsx
 import "<RELATIVE_PATH>/globals.css";
-import "@agility/plenum-ui/lib/tailwind.css";
+import "@agility/plenum-ui/dist/lib/tailwind.css";
 ```
 
 Make sure to add any additional styles before these two import statements to prevent overwriting the Plenum styling.

package/dist/index.d.ts

@@ -415,6 +415,24 @@ declare module '@agility/plenum-ui/stories/molecules/index' {
   export type { ICheckboxProps, IComboboxProps, IInputFieldProps, IInputLabelProps, INestedInputButtonProps, IRadioProps, ISelectProps, ITextAreaFieldProps, IToggleSwitchProps, AcceptedInputTypes };
   export { Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, TextAreaField, ToggleSwitch };
 
+}
+declare module '@agility/plenum-ui/stories/molecules/inputs/InputCounter/InputCounter' {
+  import { FC } from "react";
+  export interface IInputCounterProps {
+      /** Counter limit */
+      limit: number | undefined;
+      /** Counter current number */
+      current: number;
+  }
+  /** Primary UI component for user interaction */
+  const InputCounter: FC<IInputCounterProps>;
+  export default InputCounter;
+
+}
+declare module '@agility/plenum-ui/stories/molecules/inputs/InputCounter/index' {
+  export { default } from '@agility/plenum-ui/stories/molecules/inputs/InputCounter/InputCounter';
+  export * from '@agility/plenum-ui/stories/molecules/inputs/InputCounter/InputCounter';
+
 }
 declare module '@agility/plenum-ui/stories/molecules/inputs/InputField/InputField' {
   import React from "react";
@@ -504,6 +522,55 @@ declare module '@agility/plenum-ui/stories/molecules/inputs/NestedInputButton/in
   export type { INestedInputButtonProps };
   export default NestedInputButton;
 
+}
+declare module '@agility/plenum-ui/stories/molecules/inputs/TextInput/TextInput' {
+  import React from "react";
+  import { AcceptedInputTypes } from "@agility/plenum-ui/stories/molecules/inputs/InputField/index";
+  export interface ITextInputProps {
+      /** Input type*/
+      type: AcceptedInputTypes;
+      /** Input ID */
+      id?: string;
+      /** Input Name */
+      name?: string;
+      /** Label for the input */
+      label?: string;
+      /** Force the focus state on the input */
+      isFocused?: boolean;
+      /** Error state */
+      isError?: boolean;
+      /** If field is required */
+      isRequired?: boolean;
+      /** Disabled state */
+      isDisabled?: boolean;
+      /** Readonly state */
+      isReadonly?: boolean;
+      /** Set default value */
+      defaultValue?: string;
+      /** Message shown under the text field */
+      message?: string;
+      /** Input character counter */
+      isShowCounter?: boolean;
+      /** Max length of input character  */
+      maxLength?: number;
+      /** Callback on change */
+      onChange(value: string): void;
+      /** input value */
+      value: string;
+      /**Placeholder input text*/
+      placeholder?: string;
+      className?: string;
+  }
+  const _TextInput: React.ForwardRefExoticComponent<ITextInputProps & React.RefAttributes<HTMLInputElement>>;
+  export default _TextInput;
+
+}
+declare module '@agility/plenum-ui/stories/molecules/inputs/TextInput/index' {
+  import TextInput from "@agility/plenum-ui/stories/molecules/inputs/TextInput/TextInput";
+  import { ITextInputProps } from "@agility/plenum-ui/stories/molecules/inputs/TextInput/TextInput";
+  export type { ITextInputProps };
+  export default TextInput;
+
 }
 declare module '@agility/plenum-ui/stories/molecules/inputs/checkbox/Checkbox' {
   import { FC } from "react";
@@ -612,9 +679,10 @@ declare module '@agility/plenum-ui/stories/molecules/inputs/index' {
   import Radio, { IRadioProps } from "@agility/plenum-ui/stories/molecules/inputs/radio/index";
   import Select, { ISelectProps } from "@agility/plenum-ui/stories/molecules/inputs/select/index";
   import TextAreaField, { ITextAreaFieldProps } from "@agility/plenum-ui/stories/molecules/inputs/textArea/index";
+  import TextInput, { ITextInputProps } from "@agility/plenum-ui/stories/molecules/inputs/TextInput/index";
   import ToggleSwitch, { IToggleSwitchProps } from "@agility/plenum-ui/stories/molecules/inputs/toggleSwitch/index";
-  export type { ICheckboxProps, IComboboxProps, IInputFieldProps, IInputLabelProps, INestedInputButtonProps, IRadioProps, ISelectProps, ITextAreaFieldProps, IToggleSwitchProps, AcceptedInputTypes };
-  export { Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, TextAreaField, ToggleSwitch };
+  export type { ICheckboxProps, IComboboxProps, IInputFieldProps, IInputLabelProps, INestedInputButtonProps, IRadioProps, ISelectProps, ITextAreaFieldProps, ITextInputProps, IToggleSwitchProps, AcceptedInputTypes };
+  export { Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, TextAreaField, ToggleSwitch, TextInput };
 
 }
 declare module '@agility/plenum-ui/stories/molecules/inputs/radio/Radio' {

package/dist/index.js

@@ -5427,9 +5427,132 @@ var TextArea_default = TextAreaField;
 // stories/molecules/inputs/textArea/index.ts
 var textArea_default = TextArea_default;
 
-// stories/molecules/inputs/toggleSwitch/ToggleSwitch.tsx
-import React15, { useEffect as useEffect3, useState as useState4 } from "react";
+// stories/molecules/inputs/TextInput/TextInput.tsx
+import React16, { forwardRef, useEffect as useEffect3, useId as useId2, useRef, useState as useState4 } 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,
+    isFocused,
+    isError,
+    id: id2,
+    name,
+    isRequired,
+    type,
+    defaultValue,
+    isDisabled,
+    isReadonly,
+    message,
+    isShowCounter,
+    maxLength,
+    onChange,
+    placeholder,
+    value: externalValue,
+    className
+  } = _b, props = __objRest(_b, [
+    "label",
+    "isFocused",
+    "isError",
+    "id",
+    "name",
+    "isRequired",
+    "type",
+    "defaultValue",
+    "isDisabled",
+    "isReadonly",
+    "message",
+    "isShowCounter",
+    "maxLength",
+    "onChange",
+    "placeholder",
+    "value",
+    "className"
+  ]);
+  const uniqueID = useId2();
+  const [isFocus, setIsFocus] = useState4(Boolean(isFocused));
+  const [value, setValue] = useState4(externalValue || defaultValue || "");
+  const inputRef = useRef(null);
+  useEffect3(() => {
+    if (externalValue !== void 0 && externalValue !== null) {
+      setValue(externalValue);
+    }
+  }, [externalValue]);
+  useEffect3(() => {
+    const input = inputRef.current;
+    if (!input || isFocus === void 0 || isDisabled)
+      return;
+    if (isFocus) {
+      input.focus();
+    } else {
+      input.blur();
+    }
+  }, [isFocus]);
+  useEffect3(() => {
+    const input = inputRef.current;
+    if (!input || defaultValue === void 0 || defaultValue === "")
+      return;
+  }, [defaultValue]);
+  const handleInputFocus = () => setIsFocus(true);
+  const handleInputBlur = () => setIsFocus(false);
+  if (!id2)
+    id2 = `input-${uniqueID}`;
+  if (!name)
+    name = id2;
+  return /* @__PURE__ */ React16.createElement("div", { className: "relative" }, /* @__PURE__ */ React16.createElement(
+    InputLabel_default2,
+    {
+      isPlaceholder: true,
+      label,
+      isRequired,
+      id: id2,
+      isError,
+      isActive: true,
+      isDisabled
+    }
+  ), /* @__PURE__ */ React16.createElement(
+    InputField_default2,
+    __spreadValues({
+      onFocus: handleInputFocus,
+      onBlur: handleInputBlur,
+      handleChange: (v) => setValue(v),
+      ref,
+      type,
+      name,
+      id: id2,
+      className: cn17(
+        "w-full rounded border py-2 px-3 text-sm font-normal leading-5",
+        { "border-gray-300": !isFocus && !isError },
+        {
+          "!border-purple-500 shadow-none outline-purple-500 focus:!ring-purple-500": isFocus && !isError
+        },
+        {
+          "!border-red-500 shadow-none focus:ring-red-500": isError
+        },
+        className
+      ),
+      isDisabled,
+      isReadonly,
+      value,
+      defaultValue,
+      maxLength,
+      placeholder
+    }, props)
+  ), /* @__PURE__ */ 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 }))));
+};
+var _TextInput = forwardRef(TextInput);
+
+// stories/molecules/inputs/toggleSwitch/ToggleSwitch.tsx
+import React17, { useEffect as useEffect4, useState as useState5 } from "react";
+import { default as cn18 } from "classnames";
 import { Switch } from "@headlessui/react";
 var ToggleSwitch = ({
   isChecked,
@@ -5441,9 +5564,9 @@ var ToggleSwitch = ({
   variant = "base",
   withIcon
 }) => {
-  const [checked, setChecked] = useState4(isChecked);
-  useEffect3(() => setChecked(isChecked), [isChecked]);
-  return /* @__PURE__ */ React15.createElement(Switch.Group, { as: "div", className: "flex items-center gap-2" }, label && label.xPosition === "left" && /* @__PURE__ */ React15.createElement(Switch.Label, { className: label.className }, label.text), /* @__PURE__ */ React15.createElement(
+  const [checked, setChecked] = 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(
     Switch,
     {
       name,
@@ -5453,17 +5576,17 @@ var ToggleSwitch = ({
         onChange(v);
         setChecked(v);
       },
-      className: cn17(
+      className: cn18(
         { "w-9 h-4": variant === "short", " h-6 w-11": variant === "base" },
         checked ? "bg-purple-600" : "bg-gray-200",
         "relative inline-flex items-center rounded-full focus-visible:ring-2 focus-visible:ring-purple-600 focus-visible:ring-offset-2  focus-within:ring-2 focus-within:ring-purple-600 focus-within:ring-offset-2  focus:ring-2 focus:ring-purple-600 focus:ring-offset-2  active:ring-2 active:ring-purple-600 active:ring-offset-2"
       )
     },
-    /* @__PURE__ */ React15.createElement("span", { className: "sr-only" }, screenReaderLabel),
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React17.createElement("span", { className: "sr-only" }, screenReaderLabel),
+    /* @__PURE__ */ React17.createElement(
       "span",
       {
-        className: cn17(
+        className: cn18(
           checked ? "translate-x-[22px]" : "translate-x-[2px]",
           {
             "border border-gray-200 translate-x-0": variant === "short",
@@ -5472,9 +5595,9 @@ var ToggleSwitch = ({
           " h-5 w-5 transform rounded-full bg-white transition shadow-sm drop-shadow flex items-center justify-center"
         )
       },
-      withIcon && /* @__PURE__ */ React15.createElement(DynamicIcon, __spreadProps(__spreadValues({}, withIcon), { className: "text-gray-400 m-[2px]" }))
+      withIcon && /* @__PURE__ */ React17.createElement(DynamicIcon, __spreadProps(__spreadValues({}, withIcon), { className: "text-gray-400 m-[2px]" }))
     )
-  ), label && label.xPosition === "right" && /* @__PURE__ */ React15.createElement(Switch.Label, { className: label.className }, label.text));
+  ), label && label.xPosition === "right" && /* @__PURE__ */ React17.createElement(Switch.Label, { className: label.className }, label.text));
 };
 var ToggleSwitch_default = ToggleSwitch;
 
@@ -5482,8 +5605,8 @@ var ToggleSwitch_default = ToggleSwitch;
 var toggleSwitch_default = ToggleSwitch_default;
 
 // stories/organisms/AnimatedLabelInput/AnimatedLabelInput.tsx
-import React16 from "react";
-import { default as cn18 } from "classnames";
+import React18 from "react";
+import { default as cn19 } from "classnames";
 var AnimatedLabelInput = ({
   id: id2,
   label,
@@ -5494,10 +5617,10 @@ var AnimatedLabelInput = ({
   isError,
   containerStyles
 }) => {
-  return /* @__PURE__ */ React16.createElement("div", { className: cn18("group relative", containerStyles ? containerStyles : "") }, input && /* @__PURE__ */ React16.createElement(InputField_default2, __spreadValues({ isError }, input)), textarea && /* @__PURE__ */ React16.createElement(TextArea_default, __spreadValues({ isError }, textarea)), /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ 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(
     "label",
     {
-      className: cn18(
+      className: cn19(
         "absolute left-1 z-10 ml-[.172rem] inline-block bg-white px-1 text-xs  transition-all peer-placeholder-shown:top-2 peer-placeholder-shown:text-sm peer-placeholder-shown:text-gray-600",
         "-top-[9px] group-focus-within:!-top-[12px] group-focus-within:!left-1  group-focus-within:!ml-[.172rem]  group-focus-within:!text-xs",
         isError && "!text-red-600"
@@ -5505,8 +5628,8 @@ var AnimatedLabelInput = ({
       htmlFor: id2
     },
     label.display,
-    required && /* @__PURE__ */ React16.createElement("span", { className: "text-red-600" }, "*")
-  ), /* @__PURE__ */ React16.createElement("div", { className: "flex flex-row space-x-3" }, /* @__PURE__ */ React16.createElement("div", { className: "grow transition-all" }, message && /* @__PURE__ */ React16.createElement("span", { className: cn18("mt-1 block text-sm", isError ? "text-red-500" : "text-gray-500") }, message))));
+    required && /* @__PURE__ */ 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))));
 };
 var AnimatedLabelInput_default = AnimatedLabelInput;
 
@@ -5514,13 +5637,13 @@ var AnimatedLabelInput_default = AnimatedLabelInput;
 var AnimatedLabelInput_default2 = AnimatedLabelInput_default;
 
 // stories/organisms/ButtonDropdown/ButtonDropdown.tsx
-import React18 from "react";
-import { default as cn20 } from "classnames";
+import React20 from "react";
+import { default as cn21 } from "classnames";
 
 // stories/organisms/DropdownComponent/DropdownComponent.tsx
-import React17, { Fragment, useState as useState5 } from "react";
+import React19, { Fragment, useState as useState6 } from "react";
 import { Transition } from "@headlessui/react";
-import { default as cn19 } from "classnames";
+import { default as cn20 } from "classnames";
 import {
   useFloating,
   autoUpdate,
@@ -5561,8 +5684,8 @@ var Dropdown = (_a) => {
     "offsetOptions"
   ]);
   var _a2, _b2;
-  const [isOpen, setIsOpen] = useState5(false);
-  const [activeItem, setActiveItem] = useState5(null);
+  const [isOpen, setIsOpen] = useState6(false);
+  const [activeItem, setActiveItem] = useState6(null);
   const { refs, floatingStyles, context } = useFloating({
     open: isOpen,
     onOpenChange: setIsOpen,
@@ -5593,7 +5716,7 @@ var Dropdown = (_a) => {
     }
   });
   const { groupClassname, buttonClassname, itemsClassname, itemClassname, activeItemClassname } = classNames3;
-  return /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React19.createElement(
     "div",
     __spreadValues({}, __spreadValues({
       className: groupClassname,
@@ -5602,7 +5725,7 @@ var Dropdown = (_a) => {
       "aria-expanded": isOpen,
       "aria-haspopup": "listbox"
     }, props)),
-    /* @__PURE__ */ React17.createElement(
+    /* @__PURE__ */ React19.createElement(
       "button",
       __spreadValues({}, __spreadValues({
         ref: refs.setReference,
@@ -5611,9 +5734,9 @@ var Dropdown = (_a) => {
           setIsOpen(!isOpen);
         }
       }, getReferenceProps())),
-      CustomDropdownTrigger ? /* @__PURE__ */ React17.createElement("span", { className: "" }, CustomDropdownTrigger) : /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement("span", { className: "pl-1" }, label), /* @__PURE__ */ React17.createElement(DynamicIcon, { icon: "ChevronDownIcon", className: "ml-1 h-5 w-6 " }))
+      CustomDropdownTrigger ? /* @__PURE__ */ 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 " }))
     ),
-    isMounted && items.length > 0 && isOpen && /* @__PURE__ */ React17.createElement(FloatingPortal, null, /* @__PURE__ */ React17.createElement(FloatingFocusManager, { context, modal: true }, /* @__PURE__ */ React17.createElement(
+    isMounted && items.length > 0 && isOpen && /* @__PURE__ */ React19.createElement(FloatingPortal, null, /* @__PURE__ */ React19.createElement(FloatingFocusManager, { context, modal: true }, /* @__PURE__ */ React19.createElement(
       Transition,
       {
         as: Fragment,
@@ -5625,7 +5748,7 @@ var Dropdown = (_a) => {
         leaveFrom: "transform opacity-100 scale-100",
         leaveTo: "transform opacity-0 scale-95"
       },
-      /* @__PURE__ */ React17.createElement(
+      /* @__PURE__ */ React19.createElement(
         "ul",
         __spreadValues(__spreadProps(__spreadValues({}, __spreadProps(__spreadValues({}, getFloatingProps()), {
           className: itemsClassname,
@@ -5647,7 +5770,7 @@ var Dropdown = (_a) => {
           "aria-labelledby": label
         }), getFloatingProps()),
         items.map((itemStack, idx) => {
-          return /* @__PURE__ */ React17.createElement(React17.Fragment, { key: `${idx}-list-${id2}` }, itemStack.map(
+          return /* @__PURE__ */ React19.createElement(React19.Fragment, { key: `${idx}-list-${id2}` }, itemStack.map(
             (_a3) => {
               var _b3 = _a3, {
                 onClick,
@@ -5665,7 +5788,7 @@ var Dropdown = (_a) => {
                 "iconPosition"
               ]);
               const active = activeItem && activeItem === key;
-              const itemClass = cn19(
+              const itemClass = cn20(
                 itemClassname,
                 "group flex cursor-pointer items-center px-4 py-2 text-sm transition-all",
                 {
@@ -5683,7 +5806,7 @@ var Dropdown = (_a) => {
                 },
                 itemClassname
               );
-              return /* @__PURE__ */ React17.createElement("li", { key }, /* @__PURE__ */ React17.createElement(
+              return /* @__PURE__ */ React19.createElement("li", { key }, /* @__PURE__ */ React19.createElement(
                 "button",
                 __spreadValues({}, __spreadValues({
                   onClick: () => {
@@ -5691,23 +5814,23 @@ var Dropdown = (_a) => {
                     onClick && onClick();
                   },
                   key,
-                  className: cn19(itemClass, "w-full")
+                  className: cn20(itemClass, "w-full")
                 }, rest)),
-                /* @__PURE__ */ React17.createElement("div", { className: "flex items-center gap-x-4" }, icon && (iconPosition === "leading" || iconPosition === void 0) && (typeof icon === "string" ? /* @__PURE__ */ React17.createElement(
+                /* @__PURE__ */ React19.createElement("div", { className: "flex items-center gap-x-4" }, icon && (iconPosition === "leading" || iconPosition === void 0) && (typeof icon === "string" ? /* @__PURE__ */ React19.createElement(
                   DynamicIcon,
                   __spreadValues({}, {
                     icon,
-                    className: cn19(
+                    className: cn20(
                       {
                         "text-red-500": isEmphasized
                       },
                       "opacity-60 group"
                     )
                   })
-                ) : /* @__PURE__ */ React17.createElement(
+                ) : /* @__PURE__ */ React19.createElement(
                   DynamicIcon,
                   __spreadValues({}, __spreadProps(__spreadValues({}, icon), {
-                    className: cn19(
+                    className: cn20(
                       icon.className,
                       {
                         "text-red-500": isEmphasized
@@ -5715,21 +5838,21 @@ var Dropdown = (_a) => {
                       "opacity-60 group"
                     )
                   }))
-                )), /* @__PURE__ */ React17.createElement("div", { className: "whitespace-nowrap" }, label2), icon && iconPosition === "trailing" && (typeof icon === "string" ? /* @__PURE__ */ React17.createElement(
+                )), /* @__PURE__ */ React19.createElement("div", { className: "whitespace-nowrap" }, label2), icon && iconPosition === "trailing" && (typeof icon === "string" ? /* @__PURE__ */ React19.createElement(
                   DynamicIcon,
                   __spreadValues({}, {
                     icon,
-                    className: cn19(
+                    className: cn20(
                       {
                         "text-red-500": isEmphasized
                       },
                       "opacity-60 group"
                     )
                   })
-                ) : /* @__PURE__ */ React17.createElement(
+                ) : /* @__PURE__ */ React19.createElement(
                   DynamicIcon,
                   __spreadValues({}, __spreadProps(__spreadValues({}, icon), {
-                    className: cn19(
+                    className: cn20(
                       icon.className,
                       {
                         "text-red-500": isEmphasized
@@ -5754,39 +5877,39 @@ var DropdownComponent_default2 = DropdownComponent_default;
 // stories/organisms/ButtonDropdown/ButtonDropdown.tsx
 var ButtonDropdown = ({ button, dropDown, placement, offsetOptions }) => {
   const dropDownClasses = __spreadProps(__spreadValues({}, defaultClassNames), {
-    groupClassname: cn20(
+    groupClassname: cn21(
       "flex items-center justify-center rounded-l-none border !border-l-0 rounded-r  px-2 transition-all hover:!border-l-0",
       button.actionType === "primary" ? "border-purple-600 bg-purple-600  !text-white  hover:border-purple-700 hover:bg-purple-700 active:!border-purple-800 active:!bg-purple-800 fill-white" : "",
       button.actionType === "secondary" ? "border-purple-50 bg-purple-50 !text-purple-700  hover:border-purple-100 hover:bg-purple-100 active:!border-purple-300 active:!bg-purple-300 fill-purple-700" : "",
       button.actionType === "alternative" ? "border-gray-300 bg-white !text-gray-700 fill-gray-700  hover:border-gray-300 hover:bg-gray-50 active:bg-gray-100" : ""
     )
   });
-  return /* @__PURE__ */ React18.createElement("div", { className: "flex items-stretch focus-within:ring-purple-600 focus-within:ring-2 focus-within:ring-offset-white focus-within:ring-offset-2 rounded-[3px]" }, /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ 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(
     Button_default2,
     __spreadValues({}, __spreadProps(__spreadValues({}, button), {
-      className: cn20(
+      className: cn21(
         button.className,
         "!rounded-r-none !border-r-0 hover:!border-r-0 !focus:ring-transparent !focus-visible:ring-transparent !focus-within:ring-transparent !focus:ring-0 !focus-within:ring-0 !focus-visible:ring-0 !focus:ring-offset-0 !focus-visible:ring-offset-0 !focus-within:ring-offset-0 !ring-0 outline-none focus:outline-none focus-visible:outline-none focus-within:outline-none !ring-offset-0"
       )
     }))
-  ), /* @__PURE__ */ React18.createElement(
+  ), /* @__PURE__ */ React20.createElement(
     "div",
     {
-      className: cn20(
+      className: cn21(
         "w-[1px] rt",
         button.actionType === "primary" ? "bg-purple-700" : "",
         button.actionType === "secondary" ? "bg-purple-200" : "",
         button.actionType === "alternative" ? "bg-gray-300" : ""
       )
     }
-  ), /* @__PURE__ */ React18.createElement(
+  ), /* @__PURE__ */ React20.createElement(
     DropdownComponent_default2,
     __spreadValues({}, __spreadProps(__spreadValues({}, dropDown), {
-      CustomDropdownTrigger: /* @__PURE__ */ React18.createElement(
+      CustomDropdownTrigger: /* @__PURE__ */ React20.createElement(
         DynamicIcon,
         __spreadValues({}, {
           icon: "ChevronDownIcon",
-          className: cn20("h-5 w-5", {
+          className: cn21("h-5 w-5", {
             "text-white": button.actionType === "primary",
             "text-purple-700": button.actionType === "secondary",
             "text-gray-700": button.actionType === "alternative"
@@ -5803,7 +5926,7 @@ var ButtonDropdown = ({ button, dropDown, placement, offsetOptions }) => {
       },
       placement
     }))
-  ), /* @__PURE__ */ React18.createElement("div", { className: "hidden !bg-purple-100 !text-purple-600 transition-all hover:bg-purple-200 focus:bg-purple-300" }));
+  ), /* @__PURE__ */ React20.createElement("div", { className: "hidden !bg-purple-100 !text-purple-600 transition-all hover:bg-purple-200 focus:bg-purple-300" }));
 };
 var ButtonDropdown_default = ButtonDropdown;
 
@@ -5811,8 +5934,8 @@ var ButtonDropdown_default = ButtonDropdown;
 var ButtonDropdown_default2 = ButtonDropdown_default;
 
 // stories/organisms/EmptySectionPlaceholder/EmptySectionPlaceholder.tsx
-import React19 from "react";
-import { default as cn21 } from "classnames";
+import React21 from "react";
+import { default as cn22 } from "classnames";
 var EmptySectionPlaceholder = ({
   icon,
   mutedText,
@@ -5821,7 +5944,7 @@ var EmptySectionPlaceholder = ({
   actions,
   isWide
 }) => {
-  return /* @__PURE__ */ React19.createElement("div", { className: "flex h-full w-full flex-col items-center justify-center border-2 border-dashed border-gray-300 p-5" }, /* @__PURE__ */ React19.createElement(IconWithShadow_default, __spreadValues({}, icon)), mutedText && /* @__PURE__ */ React19.createElement("p", { className: "my-2 block text-xs text-gray-500" }, mutedText), CallToActionComponent ? CallToActionComponent : /* @__PURE__ */ React19.createElement("p", { className: "mb-2 block text-sm font-medium text-gray-600" }, primaryMessage), actions.length > 0 ? /* @__PURE__ */ React19.createElement("div", { className: cn21("mt-2 flex gap-2", isWide ? "" : "flex-col items-center") }, actions.map((action, index) => /* @__PURE__ */ React19.createElement(Button_default2, __spreadProps(__spreadValues({}, __spreadValues({}, action)), { key: action.label.replaceAll(" ", "-") })))) : /* @__PURE__ */ React19.createElement(React19.Fragment, null));
+  return /* @__PURE__ */ 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));
 };
 var EmptySectionPlaceholder_default = EmptySectionPlaceholder;
 
@@ -5829,8 +5952,8 @@ var EmptySectionPlaceholder_default = EmptySectionPlaceholder;
 var EmptySectionPlaceholder_default2 = EmptySectionPlaceholder_default;
 
 // stories/organisms/FormInputWithAddons/FormInputWithAddons.tsx
-import React20, { useLayoutEffect as useLayoutEffect2, useRef, useState as useState6 } from "react";
-import { default as cn22 } from "classnames";
+import React22, { useLayoutEffect as useLayoutEffect2, useRef as useRef2, useState as useState7 } from "react";
+import { default as cn23 } from "classnames";
 var FormInputWithAddons = (_a) => {
   var _b = _a, {
     handleChange,
@@ -5879,34 +6002,34 @@ var FormInputWithAddons = (_a) => {
     "customIconClass",
     "type"
   ]);
-  const leadLabelRef = useRef(null);
-  const trailLabelRef = useRef(null);
-  const [leadLabelWidth, setLeadLabelWidth] = useState6(0);
-  const [trailLabelWidth, setTrailLabelWidth] = useState6(0);
+  const leadLabelRef = useRef2(null);
+  const trailLabelRef = useRef2(null);
+  const [leadLabelWidth, setLeadLabelWidth] = useState7(0);
+  const [trailLabelWidth, setTrailLabelWidth] = useState7(0);
   useLayoutEffect2(() => {
     var _a2, _b2;
     setLeadLabelWidth(((_a2 = leadLabelRef.current) == null ? void 0 : _a2.clientWidth) || 0);
     setTrailLabelWidth(((_b2 = trailLabelRef.current) == null ? void 0 : _b2.clientWidth) || 0);
   }, []);
-  return /* @__PURE__ */ React20.createElement("div", { className: cn22("group flex flex-col", containerClassName) }, !leadLabel && !trailLabel && topLabel && /* @__PURE__ */ React20.createElement("label", { htmlFor: id2, className: cn22("flex items-center text-sm font-medium text-gray-600", labelClass) }, topLabel), description && /* @__PURE__ */ React20.createElement("div", { className: "mb-2 text-sm text-gray-500" }, description), /* @__PURE__ */ React20.createElement("div", { className: "relative flex-grow" }, (leadLabel || leadIcon) && /* @__PURE__ */ React20.createElement(
+  return /* @__PURE__ */ 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(
     "label",
     {
       ref: leadLabelRef,
       htmlFor: id2,
-      className: cn22(
+      className: cn23(
         "absolute top-0 bottom-0 left-3 flex items-center justify-center text-sm text-gray-500",
         labelClass
       )
     },
-    leadIcon && /* @__PURE__ */ React20.createElement("span", null, /* @__PURE__ */ React20.createElement(
+    leadIcon && /* @__PURE__ */ React22.createElement("span", null, /* @__PURE__ */ React22.createElement(
       DynamicIcon,
       __spreadValues({}, __spreadProps(__spreadValues({}, leadIcon), {
-        className: cn22("h-5 w-5 text-gray-400", leadIconClassNames, customIconClass),
+        className: cn23("h-5 w-5 text-gray-400", leadIconClassNames, customIconClass),
         outline: iconOutlined
       }))
     )),
     leadLabel && leadLabel
-  ), /* @__PURE__ */ React20.createElement(
+  ), /* @__PURE__ */ React22.createElement(
     InputField_default2,
     __spreadValues({}, __spreadProps(__spreadValues({}, rest), {
       handleChange,
@@ -5926,20 +6049,20 @@ var FormInputWithAddons = (_a) => {
         paddingLeft: `${leadLabelWidth + addonOffset}px`
       }
     }))
-  ), (trailLabel || trailIcon) && /* @__PURE__ */ React20.createElement(
+  ), (trailLabel || trailIcon) && /* @__PURE__ */ React22.createElement(
     "label",
     {
       ref: trailLabelRef,
       htmlFor: id2,
-      className: cn22(
+      className: cn23(
         "right absolute top-0 bottom-0 right-3 flex items-center justify-center text-sm !text-gray-500 ",
         labelClass
       )
     },
-    trailIcon && /* @__PURE__ */ React20.createElement("span", null, /* @__PURE__ */ React20.createElement(
+    trailIcon && /* @__PURE__ */ React22.createElement("span", null, /* @__PURE__ */ React22.createElement(
       DynamicIcon,
       __spreadValues({}, __spreadProps(__spreadValues({}, trailIcon), {
-        className: cn22("h-5 w-5 text-gray-400", customIconClass),
+        className: cn23("h-5 w-5 text-gray-400", customIconClass),
         outline: iconOutlined
       }))
     )),