@agility/plenum-ui 2.0.0-rc2 → 2.0.0-rc21

package/dist/index.d.ts

@@ -75,6 +75,7 @@ declare module '@agility/plenum-ui/stories/atoms/buttons/Button/Alternative/Alte
   export const AlternativeTrailingIcon: Story;
   export const AlternativeLeadingIcon: Story;
   export const AlternativeExtraSmall: Story;
+  export const AlternativeSimpleIconName: Story;
   export const AlternativeSmall: Story;
   export const AlternativeMedium: Story;
   export const AlternativeLarge: Story;
@@ -82,18 +83,18 @@ declare module '@agility/plenum-ui/stories/atoms/buttons/Button/Alternative/Alte
 
 }
 declare module '@agility/plenum-ui/stories/atoms/buttons/Button/Button' {
-  import { HTMLAttributeAnchorTarget } from "react";
-  import { IDynamicIconProps } from "@agility/plenum-ui/stories/atoms/icons/index";
+  import React, { HTMLAttributeAnchorTarget } from "react";
+  import { UnifiedIconName, IDynamicIconProps } from "@agility/plenum-ui/stories/atoms/icons/index";
   export type BTNActionType = "primary" | "secondary" | "alternative" | "danger";
-  export interface IButtonProps extends React.ComponentPropsWithoutRef<"button"> {
+  export interface IButtonProps extends Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> {
       /** Is the button a Primary CTA, alternative or danger button? */
-      actionType: BTNActionType;
+      actionType?: BTNActionType;
       /** How lg should the button be? - Defaults to 'base'. */
       size?: "xs" | "sm" | "md" | "lg" | "xl";
       /** The Button's text content. */
       label: string;
       /** The Icon to be displayed inside the button. */
-      icon?: IDynamicIconProps;
+      icon?: IDynamicIconProps | UnifiedIconName;
       /** Does the button width grow to fill it's container? */
       fullWidth?: boolean;
       /** Optionally render as anchor tag */
@@ -109,11 +110,9 @@ declare module '@agility/plenum-ui/stories/atoms/buttons/Button/Button' {
       /** Is the associated content loading? */
       isLoading?: boolean;
       className?: string;
+      iconObj?: React.ReactNode;
   }
-  /**
-   * Primary UI component for user interaction
-   */
-  const Button: ({ actionType, size, label, icon, CustomSVGIcon, fullWidth, iconPosition, asLink, isLoading, className, ...props }: IButtonProps) => import("react/jsx-runtime").JSX.Element;
+  const Button: React.ForwardRefExoticComponent<IButtonProps & React.RefAttributes<HTMLButtonElement>>;
   export default Button;
 
 }
@@ -126,6 +125,7 @@ declare module '@agility/plenum-ui/stories/atoms/buttons/Button/Danger/Danger.st
   export const Danger: Story;
   export const DangerTrailingIcon: Story;
   export const DangerLeadingIcon: Story;
+  export const DangerSimpleIconName: Story;
   export const DangerExtraSmall: Story;
   export const DangerSmall: Story;
   export const DangerMedium: Story;
@@ -141,6 +141,7 @@ declare module '@agility/plenum-ui/stories/atoms/buttons/Button/Primary/Primary.
   type Story = StoryObj<typeof Button>;
   export const Primary: Story;
   export const PrimaryLeadingIcon: Story;
+  export const PrimarySimpleIconName: Story;
   export const PrimaryTrailingIcon: Story;
   export const PrimaryExtraSmall: Story;
   export const PrimarySmall: Story;
@@ -158,6 +159,7 @@ declare module '@agility/plenum-ui/stories/atoms/buttons/Button/Secondary/Second
   export const Secondary: Story;
   export const SecondaryTrailingIcon: Story;
   export const SecondaryLeadingIcon: Story;
+  export const SecondarySimpleIconName: Story;
   export const SecondaryExtraSmall: Story;
   export const SecondarySmall: Story;
   export const SecondaryMedium: Story;
@@ -192,7 +194,7 @@ declare module '@agility/plenum-ui/stories/atoms/buttons/Capsule/Capsule' {
   /**
    * Capsule Style Button
    */
-  export interface ICapsuleProps extends React.ComponentPropsWithoutRef<"button"> {
+  export interface ICapsuleProps extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
       /** Is the button a Primary CTA, alternative or danger button? */
       actionType: BTNActionType;
       /** How lg should the button be? - Defaults to 'base'. */
@@ -270,7 +272,7 @@ declare module '@agility/plenum-ui/stories/atoms/icons/DynamicIcon' {
   export function isTablerIcon(name: UnifiedIconName): name is TablerIconName;
   export function isFAIcon(name: UnifiedIconName): name is keyof typeof FA;
   export function isUnifiedIconName(name: UnifiedIconName): name is UnifiedIconName;
-  export interface IDynamicIconProps extends React.ComponentProps<"i"> {
+  export interface IDynamicIconProps {
       icon: UnifiedIconName;
       className?: ClassNameWithAutocomplete;
       outline?: boolean;
@@ -318,7 +320,7 @@ declare module '@agility/plenum-ui/stories/atoms/icons/TablerIcon' {
   import React from "react";
   import { TablerIconName } from "@agility/plenum-ui/stories/atoms/icons/tablerIconNames";
   import { ClassNameWithAutocomplete } from "@/utils/types";
-  export interface ITablerIconProps extends React.ComponentProps<"i"> {
+  export interface ITablerIconProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
       icon: TablerIconName;
       className?: ClassNameWithAutocomplete;
   }
@@ -395,31 +397,46 @@ declare module '@agility/plenum-ui/stories/atoms/loaders/index' {
 }
 declare module '@agility/plenum-ui/stories/index' {
   import { IAvatarProps, IBadgeProps, IButtonProps, ICapsuleProps, IDynamicIconProps, IIconWithShadowProps, ILoaderProps, IRadialProgressProps, UnifiedIconName, IconName, FAIconName, BTNActionType, Avatar, Badge, Button, Capsule, DynamicIcon, IconWithShadow, Loader, RadialProgress, isFAIcon, isHeroIcon, isTablerIcon, isUnifiedIconName } from "@agility/plenum-ui/stories/atoms/index";
-  import { ICheckboxProps, IComboboxProps, IInputFieldProps, IInputLabelProps, INestedInputButtonProps, IRadioProps, ISelectProps, ITextAreaFieldProps, IToggleSwitchProps, AcceptedInputTypes, Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, TextAreaField, ToggleSwitch } from "@agility/plenum-ui/stories/molecules/index";
-  import { IAnimatedLabelInputProps, IButtonDropdownProps, IDropdownClassnames, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps, AnimatedLabelInput, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons } from "@agility/plenum-ui/stories/organisms/index";
-  export type { IAvatarProps, IBadgeProps, IButtonProps, ICapsuleProps, IDynamicIconProps, IIconWithShadowProps, ILoaderProps, IRadialProgressProps, ICheckboxProps, IComboboxProps, IInputFieldProps, IInputLabelProps, INestedInputButtonProps, IRadioProps, ISelectProps, ITextAreaFieldProps, IToggleSwitchProps, AcceptedInputTypes, IAnimatedLabelInputProps, IButtonDropdownProps, IDropdownClassnames, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps, UnifiedIconName, IconName, FAIconName, BTNActionType };
-  export { Avatar, Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, TextAreaField, ToggleSwitch, AnimatedLabelInput, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons, Badge, Button, Capsule, DynamicIcon, IconWithShadow, Loader, RadialProgress, isFAIcon, isHeroIcon, isTablerIcon, isUnifiedIconName };
+  import { ICheckboxProps, IComboboxProps, IInputFieldProps, IInputLabelProps, INestedInputButtonProps, IRadioProps, ISelectProps, ITextareaProps, IToggleSwitchProps, AcceptedInputTypes, Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, Textarea, ToggleSwitch, TextInput, ITextInputProps, ISimpleSelectOptions } from "@agility/plenum-ui/stories/molecules/index";
+  import { IAnimatedLabelInputProps, AnimatedLabelTextArea, IAnimatedLabelTextAreaProps, IButtonDropdownProps, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps, AnimatedLabelInput, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons, TextInputSelect, ITextInputSelectProps } from "@agility/plenum-ui/stories/organisms/index";
+  export type { IAvatarProps, IBadgeProps, IButtonProps, ICapsuleProps, ITextInputSelectProps, IDynamicIconProps, IIconWithShadowProps, ILoaderProps, IRadialProgressProps, ICheckboxProps, IComboboxProps, IInputFieldProps, IInputLabelProps, INestedInputButtonProps, IRadioProps, ISelectProps, ITextareaProps, IToggleSwitchProps, AcceptedInputTypes, IAnimatedLabelInputProps, IAnimatedLabelTextAreaProps, IButtonDropdownProps, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps, UnifiedIconName, IconName, FAIconName, BTNActionType, ITextInputProps, ISimpleSelectOptions };
+  export { Avatar, Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, Textarea, ToggleSwitch, AnimatedLabelInput, AnimatedLabelTextArea, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons, Badge, Button, Capsule, DynamicIcon, IconWithShadow, Loader, RadialProgress, isFAIcon, isHeroIcon, isTablerIcon, isUnifiedIconName, TextInput, TextInputSelect };
 
 }
-declare module '@agility/plenum-ui/stories/layouts/index' {
+declare module '@agility/plenum-ui/stories/molecules/index' {
+  import { ICheckboxProps, IComboboxProps, IInputFieldProps, IInputLabelProps, INestedInputButtonProps, IRadioProps, ISelectProps, ISimpleSelectOptions, ITextareaProps, IToggleSwitchProps, AcceptedInputTypes, Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, Textarea, ToggleSwitch, ITextInputProps, TextInput } from "@agility/plenum-ui/stories/molecules/inputs/index";
+  export type { ICheckboxProps, IComboboxProps, IInputFieldProps, IInputLabelProps, INestedInputButtonProps, IRadioProps, ISelectProps, ISimpleSelectOptions, ITextareaProps, IToggleSwitchProps, AcceptedInputTypes, ITextInputProps };
+  export { Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, Textarea, ToggleSwitch, TextInput };
 
 }
-declare module '@agility/plenum-ui/stories/molecules/index' {
-  import { ICheckboxProps, IComboboxProps, IInputFieldProps, IInputLabelProps, INestedInputButtonProps, IRadioProps, ISelectProps, ITextAreaFieldProps, IToggleSwitchProps, AcceptedInputTypes, Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, TextAreaField, ToggleSwitch } from "@agility/plenum-ui/stories/molecules/inputs/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";
-  export type AcceptedInputTypes = "date" | "datetime-local" | "email" | "month" | "number" | "password" | "search" | "submit" | "tel" | "text" | "url";
-  export interface IInputFieldProps extends React.ComponentPropsWithoutRef<"input"> {
+  export type AcceptedInputTypes = "date" | "datetime-local" | "email" | "month" | "number" | "password" | "search" | "submit" | "tel" | "text" | "url" | "currency";
+  export interface IInputFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> {
       /** Callback on change */
       handleChange: (value: string) => void;
       /** Input ID*/
-      id: string;
+      id?: string;
       /** Input Name */
-      name: string;
+      name?: string;
       /** Force the focus state on the input */
       isFocused?: boolean;
       /** Error condition */
@@ -436,6 +453,10 @@ declare module '@agility/plenum-ui/stories/molecules/inputs/InputField/InputFiel
       required?: boolean;
       /** use input psuedo classes for :valid and :invalid styles. on by default */
       clientSideCheck?: boolean;
+      /** Placeholder text */
+      placeholder?: string;
+      /**ref for input */
+      ref?: React.Ref<HTMLInputElement>;
   }
   const InputField: React.FC<IInputFieldProps>;
   export default InputField;
@@ -496,6 +517,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 */
+      handleChange(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";
@@ -602,11 +672,12 @@ declare module '@agility/plenum-ui/stories/molecules/inputs/index' {
   import InputLabel, { IInputLabelProps } from "@agility/plenum-ui/stories/molecules/inputs/InputLabel/index";
   import NestedInputButton, { INestedInputButtonProps } from "@agility/plenum-ui/stories/molecules/inputs/NestedInputButton/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 Select, { ISelectProps, ISimpleSelectOptions } from "@agility/plenum-ui/stories/molecules/inputs/select/index";
+  import Textarea, { ITextareaProps } 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, ISimpleSelectOptions, ITextareaProps, ITextInputProps, IToggleSwitchProps, AcceptedInputTypes };
+  export { Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, Textarea, ToggleSwitch, TextInput };
 
 }
 declare module '@agility/plenum-ui/stories/molecules/inputs/radio/Radio' {
@@ -656,10 +727,10 @@ declare module '@agility/plenum-ui/stories/molecules/inputs/radio/index' {
 }
 declare module '@agility/plenum-ui/stories/molecules/inputs/select/Select' {
   import React from "react";
-  export type ISimpleSelectOptions = {
+  export interface ISimpleSelectOptions {
       label: string;
       value: string;
-  };
+  }
   export interface ISelectProps {
       /** Label */
       label?: string;
@@ -700,65 +771,80 @@ declare module '@agility/plenum-ui/stories/molecules/inputs/select/index' {
 
 }
 declare module '@agility/plenum-ui/stories/molecules/inputs/textArea/TextArea' {
-  /// <reference types="react" />
-  export interface ITextAreaFieldProps extends React.ComponentPropsWithoutRef<"textarea"> {
-      /** Callback on change */
-      handleChange: (value: string) => void;
-      /** textarea ID*/
-      id: string;
-      /** textarea Name */
-      name: string;
-      /** Force the focus state on the textarea */
-      isFocused?: boolean;
-      /** Error condition */
+  import React from "react";
+  interface ILabelProps extends React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement> {
+      display: string;
+      htmlFor?: string;
+  }
+  export interface ITextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange"> {
+      /** Input ID */
+      id?: string;
+      /** Input Name */
+      name?: string;
+      /** Label for the input */
+      label?: ILabelProps;
+      /** Error state */
       isError?: boolean;
+      /** If field is required */
+      isRequired?: boolean;
       /** Disabled state */
       isDisabled?: boolean;
-      /** Readonly state */
-      isReadonly?: boolean;
-      /** textarea value */
-      value: string;
-      /** If field is required */
-      required?: boolean;
-      /**Allow Text Area Resize*/
-      textAreaResize?: boolean;
+      /** Set default value */
+      defaultValue?: string;
+      value?: 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;
+      /** Number of rows */
+      rows?: number;
+      /** Number of cols */
+      cols?: number;
+      placeholder?: string;
       className?: string;
+      ref?: React.LegacyRef<HTMLTextAreaElement>;
   }
-  const TextAreaField: React.FC<ITextAreaFieldProps>;
-  export default TextAreaField;
+  const Textarea: React.FC<ITextareaProps>;
+  export default Textarea;
 
 }
 declare module '@agility/plenum-ui/stories/molecules/inputs/textArea/TextArea.stories' {
   import type { Meta, StoryObj } from "@storybook/react";
-  import TextArea from "@agility/plenum-ui/stories/molecules/inputs/textArea/TextArea";
-  const meta: Meta<typeof TextArea>;
-  type Story = StoryObj<typeof TextArea>;
-  export const DefaultTextArea: Story;
+  import Textarea from "@agility/plenum-ui/stories/molecules/inputs/textArea/TextArea";
+  const meta: Meta<typeof Textarea>;
+  type Story = StoryObj<typeof Textarea>;
+  export const DefaultTextarea: Story;
   export default meta;
 
 }
 declare module '@agility/plenum-ui/stories/molecules/inputs/textArea/index' {
-  import TextAreaField, { ITextAreaFieldProps } from "@agility/plenum-ui/stories/molecules/inputs/textArea/TextArea";
-  export type { ITextAreaFieldProps };
-  export default TextAreaField;
+  import TextArea, { ITextareaProps } from "@agility/plenum-ui/stories/molecules/inputs/textArea/TextArea";
+  export type { ITextareaProps };
+  export default TextArea;
 
 }
 declare module '@agility/plenum-ui/stories/molecules/inputs/toggleSwitch/ToggleSwitch' {
   import React from "react";
   import { IDynamicIconProps } from "@/stories/atoms";
+  interface ToggleSwitchLabel {
+      text: string | JSX.Element;
+      className?: string;
+      xPosition?: "left" | "right";
+  }
   export interface IToggleSwitchProps {
       isChecked: boolean;
       onChange: (isChecked: boolean) => void;
-      label?: {
-          text: string | JSX.Element;
-          className?: string;
-          xPosition?: "left" | "right";
-      };
-      screenReaderLabel: string;
+      label?: ToggleSwitchLabel;
+      screenReaderLabel?: string;
       name: string;
       id: string;
-      variant: "base" | "short";
+      variant?: "base" | "short";
       withIcon?: IDynamicIconProps;
+      disabled?: boolean;
   }
   const ToggleSwitch: React.FC<IToggleSwitchProps>;
   export default ToggleSwitch;
@@ -773,19 +859,17 @@ declare module '@agility/plenum-ui/stories/molecules/inputs/toggleSwitch/index'
 declare module '@agility/plenum-ui/stories/organisms/AnimatedLabelInput/AnimatedLabelInput' {
   import React from "react";
   import { IInputFieldProps } from "@/stories/molecules/inputs/InputField";
-  import { ITextAreaFieldProps } from "@/stories/molecules/inputs/textArea/TextArea";
-  interface ILabelProps extends React.ComponentPropsWithoutRef<"label"> {
+  interface ILabelProps extends React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement> {
       display: string;
   }
-  export interface IAnimatedLabelInputProps {
+  export interface IAnimatedLabelInputProps extends Omit<IInputFieldProps, "handleChange"> {
       id: string;
       containerStyles?: string;
       message?: string;
-      input?: IInputFieldProps;
-      textarea?: ITextAreaFieldProps;
       required?: boolean;
       isError?: boolean;
       label: ILabelProps;
+      handleChange: (value: string) => void;
   }
   const AnimatedLabelInput: React.FC<IAnimatedLabelInputProps>;
   export default AnimatedLabelInput;
@@ -793,8 +877,29 @@ declare module '@agility/plenum-ui/stories/organisms/AnimatedLabelInput/Animated
 }
 declare module '@agility/plenum-ui/stories/organisms/AnimatedLabelInput/index' {
   import AnimatedLabelInput, { IAnimatedLabelInputProps } from "@agility/plenum-ui/stories/organisms/AnimatedLabelInput/AnimatedLabelInput";
-  export default AnimatedLabelInput;
   export type { IAnimatedLabelInputProps };
+  export default AnimatedLabelInput;
+
+}
+declare module '@agility/plenum-ui/stories/organisms/AnimatedLabelTextArea/AnimatedLabelTextArea' {
+  import React from "react";
+  import { ITextareaProps } from "@/stories/molecules/inputs/textArea";
+  export interface IAnimatedLabelTextAreaProps extends ITextareaProps {
+      id: string;
+      containerStyles?: string;
+      message?: string;
+      required?: boolean;
+      isError?: boolean;
+      handleChange: (value: string) => void;
+  }
+  const AnimatedLabelTextArea: React.FC<IAnimatedLabelTextAreaProps>;
+  export default AnimatedLabelTextArea;
+
+}
+declare module '@agility/plenum-ui/stories/organisms/AnimatedLabelTextArea/index' {
+  import AnimatedLabelTextArea, { IAnimatedLabelTextAreaProps } from "@agility/plenum-ui/stories/organisms/AnimatedLabelTextArea/AnimatedLabelTextArea";
+  export type { IAnimatedLabelTextAreaProps };
+  export default AnimatedLabelTextArea;
 
 }
 declare module '@agility/plenum-ui/stories/organisms/ButtonDropdown/ButtonDropdown' {
@@ -826,30 +931,25 @@ declare module '@agility/plenum-ui/stories/organisms/DropdownComponent/DropdownC
   import { ClassNameWithAutocomplete } from "utils/types";
   import { IDynamicIconProps } from "@/stories/atoms/icons";
   export interface IItemProp extends HTMLAttributes<HTMLButtonElement> {
-      icon?: {
-          name: IDynamicIconProps["icon"];
-          className?: ClassNameWithAutocomplete;
-          pos?: "trailing" | "leading";
-          outline?: boolean;
-      };
+      icon?: IDynamicIconProps;
+      iconPosition?: "trailing" | "leading";
       label: string;
       onClick?(): void;
       isEmphasized?: boolean;
       key: React.Key;
   }
-  export interface IDropdownClassnames {
-      groupClassname?: ClassNameWithAutocomplete;
-      itemsClassname?: ClassNameWithAutocomplete;
-      itemClassname?: ClassNameWithAutocomplete;
-      activeItemClassname?: ClassNameWithAutocomplete;
-      buttonClassname?: ClassNameWithAutocomplete;
-  }
   export interface IDropdownProps extends HTMLAttributes<HTMLDivElement> {
       items: IItemProp[][];
       label: string;
       CustomDropdownTrigger?: React.ReactNode;
       id: string;
-      classNames?: IDropdownClassnames;
+      groupClassname?: ClassNameWithAutocomplete;
+      itemsClassname?: ClassNameWithAutocomplete;
+      itemClassname?: ClassNameWithAutocomplete;
+      activeItemClassname?: ClassNameWithAutocomplete;
+      buttonClassname?: ClassNameWithAutocomplete;
+      iconClassname?: ClassNameWithAutocomplete;
+      iconSpacingClassname?: ClassNameWithAutocomplete;
       placement?: Placement;
       offsetOptions?: Partial<{
           mainAxis: number;
@@ -857,7 +957,15 @@ declare module '@agility/plenum-ui/stories/organisms/DropdownComponent/DropdownC
           alignmentAxis: number | null;
       }>;
   }
-  export const defaultClassNames: IDropdownClassnames;
+  export const defaultClassNames: {
+      groupClassname: string;
+      itemsClassname: string;
+      itemClassname: string;
+      activeItemClassname: string;
+      buttonClassname: string;
+      iconClassname: string;
+      iconSpacingClassname: string;
+  };
   /** Comment */
   const Dropdown: React.FC<IDropdownProps>;
   export default Dropdown;
@@ -870,8 +978,8 @@ declare module '@agility/plenum-ui/stories/organisms/DropdownComponent/dropdownI
 
 }
 declare module '@agility/plenum-ui/stories/organisms/DropdownComponent/index' {
-  import Dropdown, { IItemProp, IDropdownClassnames, IDropdownProps, defaultClassNames } from "@agility/plenum-ui/stories/organisms/DropdownComponent/DropdownComponent";
-  export type { IItemProp, IDropdownClassnames, IDropdownProps };
+  import Dropdown, { IItemProp, IDropdownProps, defaultClassNames } from "@agility/plenum-ui/stories/organisms/DropdownComponent/DropdownComponent";
+  export type { IItemProp, IDropdownProps };
   export { defaultClassNames };
   export default Dropdown;
 
@@ -900,8 +1008,8 @@ declare module '@agility/plenum-ui/stories/organisms/EmptySectionPlaceholder/Emp
 }
 declare module '@agility/plenum-ui/stories/organisms/EmptySectionPlaceholder/index' {
   import EmptySectionPlaceholder, { IEmptySectionPlaceholderProps } from "@agility/plenum-ui/stories/organisms/EmptySectionPlaceholder/EmptySectionPlaceholder";
-  export default EmptySectionPlaceholder;
   export type { IEmptySectionPlaceholderProps };
+  export default EmptySectionPlaceholder;
 
 }
 declare module '@agility/plenum-ui/stories/organisms/FormInputWithAddons/FormInputWithAddons' {
@@ -933,15 +1041,93 @@ declare module '@agility/plenum-ui/stories/organisms/FormInputWithAddons/index'
   export type { IFormInputWithAddonsProps };
   export default FormInputWithAddons;
 
+}
+declare module '@agility/plenum-ui/stories/organisms/TextInputSelect/InputSelect' {
+  import { FC } from "react";
+  export type SelectOptions = {
+      label: string;
+      value: string;
+  };
+  export interface InputSelectProps {
+      align: "left" | "right";
+      /** Show the CTA without Background color and a border seperator */
+      inputOptions: SelectOptions[];
+      /** Onclick callback */
+      onSelectOption?(value: string): void;
+      className?: string;
+      isDisabled?: boolean;
+  }
+  /** Comment */
+  export const InputSelect: FC<InputSelectProps>;
+
+}
+declare module '@agility/plenum-ui/stories/organisms/TextInputSelect/TextInputSelect' {
+  import { FC } from "react";
+  import { AcceptedInputTypes } from "@/stories/molecules";
+  export type SelectOptions = {
+      label: string;
+      value: string;
+  };
+  export interface ITextInputSelectProps {
+      /** Input type*/
+      type: AcceptedInputTypes;
+      /** Input ID */
+      id?: string;
+      /** Input Name */
+      name?: string;
+      /** Label for the input */
+      label?: string;
+      /** placeholder for the input */
+      placeholder?: string;
+      /** Force the focus state on the input */
+      isFocused?: boolean;
+      /** Error state */
+      isError?: boolean;
+      /** If field is required */
+      isRequired?: boolean;
+      /** Disabled state */
+      isDisabled?: boolean;
+      /** Set default value */
+      defaultValue?: string;
+      /** Set value */
+      value: string;
+      /** Message shown under the text field */
+      message?: string;
+      /** Input character counter */
+      isShowCounter?: boolean;
+      /** Max length of input character  */
+      maxLength?: number;
+      /** Select input location  */
+      selectLocation?: "left" | "right";
+      /** Prefix  */
+      prefix?: string;
+      /** List of options to show on the select field  */
+      inputOptions?: SelectOptions[];
+      /** Callback on base input */
+      onChange?(value: string): void;
+      /** Callback on input select field */
+      onSelectOption?(value: string): void;
+  }
+  const TextInputSelect: FC<ITextInputSelectProps>;
+  export default TextInputSelect;
+
+}
+declare module '@agility/plenum-ui/stories/organisms/TextInputSelect/index' {
+  import TextInputSelect, { ITextInputSelectProps } from "@agility/plenum-ui/stories/organisms/TextInputSelect/TextInputSelect";
+  export type { ITextInputSelectProps };
+  export default TextInputSelect;
+
 }
 declare module '@agility/plenum-ui/stories/organisms/index' {
   import AnimatedLabelInput, { IAnimatedLabelInputProps } from "@agility/plenum-ui/stories/organisms/AnimatedLabelInput/index";
+  import AnimatedLabelTextArea, { IAnimatedLabelTextAreaProps } from "@agility/plenum-ui/stories/organisms/AnimatedLabelTextArea/index";
   import ButtonDropdown, { IButtonDropdownProps } from "@agility/plenum-ui/stories/organisms/ButtonDropdown/index";
-  import Dropdown, { IDropdownClassnames, IDropdownProps, IItemProp } from "@agility/plenum-ui/stories/organisms/DropdownComponent/index";
+  import Dropdown, { IDropdownProps, IItemProp } from "@agility/plenum-ui/stories/organisms/DropdownComponent/index";
   import EmptySectionPlaceholder, { IEmptySectionPlaceholderProps } from "@agility/plenum-ui/stories/organisms/EmptySectionPlaceholder/index";
   import FormInputWithAddons, { IFormInputWithAddonsProps } from "@agility/plenum-ui/stories/organisms/FormInputWithAddons/index";
-  export type { IAnimatedLabelInputProps, IButtonDropdownProps, IDropdownClassnames, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps };
-  export { AnimatedLabelInput, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons };
+  import TextInputSelect, { ITextInputSelectProps } from "@agility/plenum-ui/stories/organisms/TextInputSelect/index";
+  export type { IAnimatedLabelInputProps, IAnimatedLabelTextAreaProps, IButtonDropdownProps, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps, ITextInputSelectProps };
+  export { AnimatedLabelInput, AnimatedLabelTextArea, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons, TextInputSelect };
 
 }
 declare module '@agility/plenum-ui/utils/types' {