@agility/plenum-ui 2.0.0-rc3 → 2.0.0-rc30

package/dist/types/stories/atoms/buttons/Button/Button.d.ts

@@ -1,7 +1,7 @@
-import { HTMLAttributeAnchorTarget } from "react";
+import React, { HTMLAttributeAnchorTarget } from "react";
 import { UnifiedIconName, IDynamicIconProps } from "../../icons";
 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;
     /** How lg should the button be? - Defaults to 'base'. */
@@ -26,10 +26,6 @@ export interface IButtonProps extends React.ComponentPropsWithoutRef<"button"> {
     isLoading?: boolean;
     className?: string;
     iconObj?: React.ReactNode;
-    ref?: React.LegacyRef<HTMLButtonElement>;
 }
-/**
- * Primary UI component for user interaction
- */
-declare const Button: ({ actionType, size, label, icon, iconObj, CustomSVGIcon, fullWidth, iconPosition, asLink, isLoading, className, ref, ...props }: IButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const Button: React.ForwardRefExoticComponent<IButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export default Button;

package/dist/types/stories/atoms/buttons/Capsule/Capsule.d.ts

@@ -3,7 +3,7 @@ import { BTNActionType } from "../Button/Button";
 /**
  * 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'. */

package/dist/types/stories/atoms/icons/DynamicIcon.d.ts

@@ -6,12 +6,12 @@ import { TablerIconName } from "./tablerIconNames";
 import { ClassNameWithAutocomplete } from "@/utils/types";
 export type IconName = keyof typeof SolidIcons | keyof typeof OutlineIcons;
 export type FAIconName = keyof typeof FA;
-export type UnifiedIconName = IconName | TablerIconName | FAIconName;
+export type UnifiedIconName = TablerIconName | IconName | FAIconName;
 export declare function isHeroIcon(name: UnifiedIconName): name is keyof typeof SolidIcons | keyof typeof OutlineIcons;
 export declare function isTablerIcon(name: UnifiedIconName): name is TablerIconName;
 export declare function isFAIcon(name: UnifiedIconName): name is keyof typeof FA;
 export declare function isUnifiedIconName(name: UnifiedIconName): name is UnifiedIconName;
-export interface IDynamicIconProps extends React.ComponentProps<"i"> {
+export interface IDynamicIconProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
     icon: UnifiedIconName;
     className?: ClassNameWithAutocomplete;
     outline?: boolean;

package/dist/types/stories/atoms/icons/TablerIcon.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { TablerIconName } from "./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;
 }

package/dist/types/stories/index.d.ts

@@ -1,5 +1,5 @@
 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 "./atoms";
-import { ICheckboxProps, IComboboxProps, IInputFieldProps, IInputLabelProps, INestedInputButtonProps, IRadioProps, ISelectProps, ITextAreaFieldProps, IToggleSwitchProps, AcceptedInputTypes, Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, TextAreaField, ToggleSwitch } from "./molecules";
-import { IAnimatedLabelInputProps, IButtonDropdownProps, IDropdownClassnames, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps, AnimatedLabelInput, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons } from "./organisms";
-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 "./molecules";
+import { IAnimatedLabelInputProps, AnimatedLabelTextArea, IAnimatedLabelTextAreaProps, IButtonDropdownProps, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps, AnimatedLabelInput, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons, TextInputSelect, ITextInputSelectProps } from "./organisms";
+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 };

package/dist/types/stories/molecules/index.d.ts

@@ -1,3 +1,3 @@
-import { ICheckboxProps, IComboboxProps, IInputFieldProps, IInputLabelProps, INestedInputButtonProps, IRadioProps, ISelectProps, ITextAreaFieldProps, IToggleSwitchProps, AcceptedInputTypes, Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, TextAreaField, ToggleSwitch } from "./inputs";
-export type { ICheckboxProps, IComboboxProps, IInputFieldProps, IInputLabelProps, INestedInputButtonProps, IRadioProps, ISelectProps, ITextAreaFieldProps, IToggleSwitchProps, AcceptedInputTypes };
-export { Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, TextAreaField, ToggleSwitch };
+import { ICheckboxProps, IComboboxProps, IInputFieldProps, IInputLabelProps, INestedInputButtonProps, IRadioProps, ISelectProps, ISimpleSelectOptions, ITextareaProps, IToggleSwitchProps, AcceptedInputTypes, Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, Textarea, ToggleSwitch, ITextInputProps, TextInput } from "./inputs";
+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 };

package/dist/types/stories/molecules/inputs/InputCounter/InputCounter.d.ts

@@ -0,0 +1,10 @@
+import { FC } from "react";
+export interface IInputCounterProps {
+    /** Counter limit */
+    limit: number | undefined;
+    /** Counter current number */
+    current: number;
+}
+/** Primary UI component for user interaction */
+declare const InputCounter: FC<IInputCounterProps>;
+export default InputCounter;

package/dist/types/stories/molecules/inputs/InputCounter/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './InputCounter';
+export * from './InputCounter';

package/dist/types/stories/molecules/inputs/InputField/InputField.d.ts

@@ -1,12 +1,12 @@
 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 */
@@ -23,6 +23,10 @@ export interface IInputFieldProps extends React.ComponentPropsWithoutRef<"input"
     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>;
 }
 declare const InputField: React.FC<IInputFieldProps>;
 export default InputField;

package/dist/types/stories/molecules/inputs/TextInput/TextInput.d.ts

@@ -0,0 +1,39 @@
+import React from "react";
+import { AcceptedInputTypes } from "../InputField";
+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;
+}
+declare const _TextInput: React.ForwardRefExoticComponent<ITextInputProps & React.RefAttributes<HTMLInputElement>>;
+export default _TextInput;

package/dist/types/stories/molecules/inputs/TextInput/index.d.ts

@@ -0,0 +1,4 @@
+import TextInput from "./TextInput";
+import { ITextInputProps } from "./TextInput";
+export type { ITextInputProps };
+export default TextInput;

package/dist/types/stories/molecules/inputs/index.d.ts

@@ -4,8 +4,9 @@ import InputField, { AcceptedInputTypes, IInputFieldProps } from "./InputField";
 import InputLabel, { IInputLabelProps } from "./InputLabel";
 import NestedInputButton, { INestedInputButtonProps } from "./NestedInputButton";
 import Radio, { IRadioProps } from "./radio";
-import Select, { ISelectProps } from "./select";
-import TextAreaField, { ITextAreaFieldProps } from "./textArea";
+import Select, { ISelectProps, ISimpleSelectOptions } from "./select";
+import Textarea, { ITextareaProps } from "./textArea";
+import TextInput, { ITextInputProps } from "./TextInput";
 import ToggleSwitch, { IToggleSwitchProps } from "./toggleSwitch";
-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 };

package/dist/types/stories/molecules/inputs/select/Select.d.ts

@@ -1,8 +1,8 @@
 import React from "react";
-export type ISimpleSelectOptions = {
+export interface ISimpleSelectOptions {
     label: string;
     value: string;
-};
+}
 export interface ISelectProps {
     /** Label */
     label?: string;

package/dist/types/stories/molecules/inputs/textArea/TextArea.d.ts

@@ -1,26 +1,39 @@
-/// <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>;
 }
-declare const TextAreaField: React.FC<ITextAreaFieldProps>;
-export default TextAreaField;
+declare const Textarea: React.FC<ITextareaProps>;
+export default Textarea;

package/dist/types/stories/molecules/inputs/textArea/TextArea.stories.d.ts

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import TextArea from "./TextArea";
-declare const meta: Meta<typeof TextArea>;
-type Story = StoryObj<typeof TextArea>;
-export declare const DefaultTextArea: Story;
+import Textarea from "./TextArea";
+declare const meta: Meta<typeof Textarea>;
+type Story = StoryObj<typeof Textarea>;
+export declare const DefaultTextarea: Story;
 export default meta;

package/dist/types/stories/molecules/inputs/textArea/index.d.ts

@@ -1,3 +1,3 @@
-import TextAreaField, { ITextAreaFieldProps } from "./TextArea";
-export type { ITextAreaFieldProps };
-export default TextAreaField;
+import TextArea, { ITextareaProps } from "./TextArea";
+export type { ITextareaProps };
+export default TextArea;

package/dist/types/stories/molecules/inputs/toggleSwitch/ToggleSwitch.d.ts

@@ -1,18 +1,20 @@
 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;
 }
 declare const ToggleSwitch: React.FC<IToggleSwitchProps>;
 export default ToggleSwitch;

package/dist/types/stories/organisms/AnimatedLabelInput/AnimatedLabelInput.d.ts

@@ -1,18 +1,16 @@
 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;
 }
 declare const AnimatedLabelInput: React.FC<IAnimatedLabelInputProps>;
 export default AnimatedLabelInput;

package/dist/types/stories/organisms/AnimatedLabelInput/index.d.ts

@@ -1,3 +1,3 @@
 import AnimatedLabelInput, { IAnimatedLabelInputProps } from "./AnimatedLabelInput";
-export default AnimatedLabelInput;
 export type { IAnimatedLabelInputProps };
+export default AnimatedLabelInput;

package/dist/types/stories/organisms/AnimatedLabelTextArea/AnimatedLabelTextArea.d.ts

@@ -0,0 +1,12 @@
+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;
+}
+declare const AnimatedLabelTextArea: React.FC<IAnimatedLabelTextAreaProps>;
+export default AnimatedLabelTextArea;

package/dist/types/stories/organisms/AnimatedLabelTextArea/index.d.ts

@@ -0,0 +1,3 @@
+import AnimatedLabelTextArea, { IAnimatedLabelTextAreaProps } from "./AnimatedLabelTextArea";
+export type { IAnimatedLabelTextAreaProps };
+export default AnimatedLabelTextArea;

package/dist/types/stories/organisms/DropdownComponent/DropdownComponent.d.ts

@@ -1,28 +1,28 @@
 import React, { HTMLAttributes } from "react";
 import { Placement } from "@floating-ui/react";
 import { ClassNameWithAutocomplete } from "utils/types";
-import { IDynamicIconProps, UnifiedIconName } from "@/stories/atoms/icons";
-export interface IItemProp extends HTMLAttributes<HTMLButtonElement> {
-    icon?: IDynamicIconProps | UnifiedIconName;
+import { IDynamicIconProps } from "@/stories/atoms/icons";
+export interface IItemProp {
+    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;
+    iconObj?: JSX.Element;
 }
 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;
@@ -30,7 +30,15 @@ export interface IDropdownProps extends HTMLAttributes<HTMLDivElement> {
         alignmentAxis: number | null;
     }>;
 }
-export declare const defaultClassNames: IDropdownClassnames;
+export declare const defaultClassNames: {
+    groupClassname: string;
+    itemsClassname: string;
+    itemClassname: string;
+    activeItemClassname: string;
+    buttonClassname: string;
+    iconClassname: string;
+    iconSpacingClassname: string;
+};
 /** Comment */
 declare const Dropdown: React.FC<IDropdownProps>;
 export default Dropdown;

package/dist/types/stories/organisms/DropdownComponent/index.d.ts

@@ -1,4 +1,4 @@
-import Dropdown, { IItemProp, IDropdownClassnames, IDropdownProps, defaultClassNames } from "./DropdownComponent";
-export type { IItemProp, IDropdownClassnames, IDropdownProps };
+import Dropdown, { IItemProp, IDropdownProps, defaultClassNames } from "./DropdownComponent";
+export type { IItemProp, IDropdownProps };
 export { defaultClassNames };
 export default Dropdown;

package/dist/types/stories/organisms/EmptySectionPlaceholder/index.d.ts

@@ -1,3 +1,3 @@
 import EmptySectionPlaceholder, { IEmptySectionPlaceholderProps } from "./EmptySectionPlaceholder";
-export default EmptySectionPlaceholder;
 export type { IEmptySectionPlaceholderProps };
+export default EmptySectionPlaceholder;

package/dist/types/stories/organisms/TextInputSelect/InputSelect.d.ts

@@ -0,0 +1,16 @@
+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 declare const InputSelect: FC<InputSelectProps>;

package/dist/types/stories/organisms/TextInputSelect/TextInputSelect.d.ts

@@ -0,0 +1,48 @@
+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;
+}
+declare const TextInputSelect: FC<ITextInputSelectProps>;
+export default TextInputSelect;

package/dist/types/stories/organisms/TextInputSelect/index.d.ts

@@ -0,0 +1,3 @@
+import TextInputSelect, { ITextInputSelectProps } from "./TextInputSelect";
+export type { ITextInputSelectProps };
+export default TextInputSelect;

package/dist/types/stories/organisms/index.d.ts

@@ -1,7 +1,9 @@
 import AnimatedLabelInput, { IAnimatedLabelInputProps } from "./AnimatedLabelInput";
+import AnimatedLabelTextArea, { IAnimatedLabelTextAreaProps } from "./AnimatedLabelTextArea";
 import ButtonDropdown, { IButtonDropdownProps } from "./ButtonDropdown";
-import Dropdown, { IDropdownClassnames, IDropdownProps, IItemProp } from "./DropdownComponent";
+import Dropdown, { IDropdownProps, IItemProp } from "./DropdownComponent";
 import EmptySectionPlaceholder, { IEmptySectionPlaceholderProps } from "./EmptySectionPlaceholder";
 import FormInputWithAddons, { IFormInputWithAddonsProps } from "./FormInputWithAddons";
-export type { IAnimatedLabelInputProps, IButtonDropdownProps, IDropdownClassnames, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps };
-export { AnimatedLabelInput, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons };
+import TextInputSelect, { ITextInputSelectProps } from "./TextInputSelect";
+export type { IAnimatedLabelInputProps, IAnimatedLabelTextAreaProps, IButtonDropdownProps, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps, ITextInputSelectProps };
+export { AnimatedLabelInput, AnimatedLabelTextArea, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons, TextInputSelect };

package/local.sh

@@ -0,0 +1,100 @@
+#! /usr/bin/bash
+
+# ANSI escape codes for formatting
+GREEN_BOLD='\033[1;32m'
+ORANGE_BOLD='\033[1;33m'
+RED_BOLD='\033[1;31m'
+BLUE_BOLD='\033[1;34m'
+RESET='\033[0m'
+DIR="$PWD"
+
+# The required yarn version to use this script
+REQUIRED_YARN_VERSION="1.22.19"
+
+# Get the installed Yarn version
+INSTALLED_YARN_VERSION=$(yarn --version 2>/dev/null)
+
+unlink_package() {
+  local package_name="${1:-@agility/plenum-ui}"
+  if [ -z "$1" ]; then
+    yarn unlink
+  else
+    cd "$DIR/node_modules/$package_name"
+    yarn unlink
+  fi
+  unlink_exit_code=$?
+  if [ $unlink_exit_code -ne 0 ]; then
+    echo -e "${ORANGE_BOLD}agility-cms-manager-app-react:warning${RESET} yarn unlink for '$package_name' encountered an error, but script will continue. \n"
+  fi
+
+  cd "$DIR"
+  echo -e "\n"
+}
+
+link_package() {
+  local package_name="${1:-@agility/plenum-ui}"
+  if [ -z "$1" ]; then
+    yarn link
+  else
+    cd "$DIR/node_modules/$package_name"
+    yarn link
+  fi
+  unlink_exit_code=$?
+  if [ $unlink_exit_code -ne 0 ]; then
+    echo -e "${RED_BOLD}agility-cms-manager-app-react:error${RESET} yarn link for '$package_name' failed. Script cannot continue, exiting script."
+    exit 1
+  else
+    echo -e "${GREEN_BOLD}@agility/plenum-ui:success${RESET} yarn link for '$package_name' successful\n"
+  fi
+
+  cd "$DIR"
+}
+
+check_yarn_version() {
+  # Check if Yarn is installed and compare the version
+  if [ -n "$INSTALLED_YARN_VERSION" ] && [ "$INSTALLED_YARN_VERSION" != "$REQUIRED_YARN_VERSION" ]; then
+    echo -e "${RED_BOLD}error${RESET} Yarn version $required_version is required, but found version $INSTALLED_YARN_VERSION."
+    exit 1
+  fi
+
+  echo -e "${BLUE_BOLD}info${RESET} Yarn version is $INSTALLED_YARN_VERSION. Proceeding with the script...\n"
+}
+
+### START SCRIPT
+
+check_yarn_version
+
+echo -e "Starting @agility/plenum-ui local watch script \n"
+echo -e "${BLUE_BOLD}@agility/plenum-ui:info${RESET} unlinking existing symlink"
+yarn unlink
+if [ $? -ne 0 ]; then
+  echo "yarn unlink for @agility/plenum-ui encountered an error, but script will continue. \n"
+fi
+
+if [ ! -d "node_modules" ] || [ ! -d "node_modules/react" ] || [ ! -d "node_modules/react-dom" ]; then
+   echo -e "${ORANGE_BOLD}@agility/plenum-ui:warning${RESET} Could not find node_modules."
+   echo -e "${BLUE_BOLD}@agility/plenum-ui:info${RESET} installing dependencies...\n"
+
+   yarn install
+
+   if [ $? -eq 0 ]; then
+      echo -e "${GREEN_BOLD}@agility/plenum-ui:success${RESET} Finished installing dependencies"
+   else
+      echo -e "${RED_BOLD}@agility/plenum-ui:error${RESET} Couldn't install dependencies. Exiting script."
+      exit 1
+  fi
+fi
+
+echo -e "${BLUE_BOLD}@agility/plenum-ui:info${RESET} unlinking existing symlinks"
+unlink_package react
+unlink_package react-dom
+unlink_package
+
+echo -e "${BLUE_BOLD}@agility/plenum-ui:info${RESET} setting up symlinks...\n"
+
+link_package react
+link_package react-dom
+link_package 
+
+echo -e "${GREEN_BOLD}@agility/plenum-ui:success${RESET} You can now run 'yarn start-cms:local' in agility-cms-manager-app-react\n"
+yarn start:watch