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

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

@@ -7,6 +7,7 @@ export declare const Alternative: Story;
 export declare const AlternativeTrailingIcon: Story;
 export declare const AlternativeLeadingIcon: Story;
 export declare const AlternativeExtraSmall: Story;
+export declare const AlternativeSimpleIconName: Story;
 export declare const AlternativeSmall: Story;
 export declare const AlternativeMedium: Story;
 export declare const AlternativeLarge: Story;

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

@@ -1,15 +1,15 @@
-import { HTMLAttributeAnchorTarget } from "react";
-import { IDynamicIconProps } from "../../icons";
+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;
+    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 */
@@ -25,9 +25,7 @@ export interface IButtonProps extends React.ComponentPropsWithoutRef<"button"> {
     /** Is the associated content loading? */
     isLoading?: boolean;
     className?: string;
+    iconObj?: React.ReactNode;
 }
-/**
- * Primary UI component for user interaction
- */
-declare const Button: ({ actionType, size, label, icon, CustomSVGIcon, fullWidth, iconPosition, asLink, isLoading, className, ...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/Button/Danger/Danger.stories.d.ts

@@ -6,6 +6,7 @@ type Story = StoryObj<typeof Button>;
 export declare const Danger: Story;
 export declare const DangerTrailingIcon: Story;
 export declare const DangerLeadingIcon: Story;
+export declare const DangerSimpleIconName: Story;
 export declare const DangerExtraSmall: Story;
 export declare const DangerSmall: Story;
 export declare const DangerMedium: Story;

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

@@ -5,6 +5,7 @@ export default meta;
 type Story = StoryObj<typeof Button>;
 export declare const Primary: Story;
 export declare const PrimaryLeadingIcon: Story;
+export declare const PrimarySimpleIconName: Story;
 export declare const PrimaryTrailingIcon: Story;
 export declare const PrimaryExtraSmall: Story;
 export declare const PrimarySmall: Story;

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

@@ -6,6 +6,7 @@ type Story = StoryObj<typeof Button>;
 export declare const Secondary: Story;
 export declare const SecondaryTrailingIcon: Story;
 export declare const SecondaryLeadingIcon: Story;
+export declare const SecondarySimpleIconName: Story;
 export declare const SecondaryExtraSmall: Story;
 export declare const SecondarySmall: Story;
 export declare const SecondaryMedium: Story;

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

@@ -11,7 +11,7 @@ export declare function isHeroIcon(name: UnifiedIconName): name is keyof typeof
 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 {
     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

@@ -3,30 +3,25 @@ import { Placement } from "@floating-ui/react";
 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;
@@ -34,7 +29,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 };