@agility/plenum-ui 2.0.0-rc1 → 2.0.0-rc10

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 { UnifiedIconName, IDynamicIconProps } from "../../icons";
 export type BTNActionType = "primary" | "secondary" | "alternative" | "danger";
 export interface IButtonProps extends React.ComponentPropsWithoutRef<"button"> {
     /** 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,11 @@ export interface IButtonProps extends React.ComponentPropsWithoutRef<"button"> {
     /** Is the associated content loading? */
     isLoading?: boolean;
     className?: string;
+    iconObj?: React.ReactNode;
+    ref?: React.LegacyRef<HTMLButtonElement>;
 }
 /**
  * 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: ({ actionType, size, label, icon, iconObj, CustomSVGIcon, fullWidth, iconPosition, asLink, isLoading, className, ref, ...props }: IButtonProps) => import("react/jsx-runtime").JSX.Element;
 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/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, IButtonDropdownProps, IDropdownClassnames, 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, IButtonDropdownProps, IDropdownClassnames, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps, UnifiedIconName, IconName, FAIconName, BTNActionType, ITextInputProps, ISimpleSelectOptions };
+export { Avatar, Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, Textarea, ToggleSwitch, AnimatedLabelInput, 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,5 +1,5 @@
 import React from "react";
-export type AcceptedInputTypes = "date" | "datetime-local" | "email" | "month" | "number" | "password" | "search" | "submit" | "tel" | "text" | "url";
+export type AcceptedInputTypes = "date" | "datetime-local" | "email" | "month" | "number" | "password" | "search" | "submit" | "tel" | "text" | "url" | "currency";
 export interface IInputFieldProps extends React.ComponentPropsWithoutRef<"input"> {
     /** Callback on change */
     handleChange: (value: string) => void;
@@ -23,6 +23,8 @@ export interface IInputFieldProps extends React.ComponentPropsWithoutRef<"input"
     required?: boolean;
     /** use input psuedo classes for :valid and :invalid styles. on by default */
     clientSideCheck?: boolean;
+    /**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 */
+    onChange(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,35 @@
-/// <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";
+export interface ITextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange"> {
+    /** Input ID */
+    id?: string;
+    /** Input Name */
+    name?: string;
+    /** Label for the input */
+    label?: string;
+    /** 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/organisms/AnimatedLabelInput/AnimatedLabelInput.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { IInputFieldProps } from "@/stories/molecules/inputs/InputField";
-import { ITextAreaFieldProps } from "@/stories/molecules/inputs/textArea/TextArea";
+import { ITextareaProps } from "@/stories/molecules/inputs/textArea/TextArea";
 interface ILabelProps extends React.ComponentPropsWithoutRef<"label"> {
     display: string;
 }
@@ -9,7 +9,7 @@ export interface IAnimatedLabelInputProps {
     containerStyles?: string;
     message?: string;
     input?: IInputFieldProps;
-    textarea?: ITextAreaFieldProps;
+    textarea?: ITextareaProps;
     required?: boolean;
     isError?: boolean;
     label: ILabelProps;

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

@@ -1,14 +1,10 @@
 import React, { HTMLAttributes } from "react";
 import { Placement } from "@floating-ui/react";
 import { ClassNameWithAutocomplete } from "utils/types";
-import { IDynamicIconProps } from "@/stories/atoms/icons";
+import { IDynamicIconProps, UnifiedIconName } from "@/stories/atoms/icons";
 export interface IItemProp extends HTMLAttributes<HTMLButtonElement> {
-    icon?: {
-        name: IDynamicIconProps["icon"];
-        className?: ClassNameWithAutocomplete;
-        pos?: "trailing" | "leading";
-        outline?: boolean;
-    };
+    icon?: IDynamicIconProps | UnifiedIconName;
+    iconPosition?: "trailing" | "leading";
     label: string;
     onClick?(): void;
     isEmphasized?: boolean;

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

@@ -3,5 +3,6 @@ import ButtonDropdown, { IButtonDropdownProps } from "./ButtonDropdown";
 import Dropdown, { IDropdownClassnames, 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, IButtonDropdownProps, IDropdownClassnames, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps, ITextInputSelectProps };
+export { AnimatedLabelInput, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons, TextInputSelect };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agility/plenum-ui",
-	"version": "2.0.0-rc1",
+	"version": "2.0.0-rc10",
 	"license": "MIT",
 	"main": "dist/index.js",
 	"module": "dist/index.js",
@@ -17,7 +17,7 @@
 		"storybook:tw": "tailwindcss -o ./lib/tailwind.css -w ",
 		"storybook": "npm-run-all -p \"storybook:*\" ",
 		"dev": "yarn storybook",
-		"build:tw": "tailwindcss -o ./lib/tailwind.css",
+		"build:tw": "tailwindcss -o ./dist/lib/tailwind.css",
 		"build:tsc": "yarn node build.js",
 		"prepare": "yarn build",
 		"build": "npm run clean && npm-run-all -s \"build:*\" ",
@@ -53,6 +53,7 @@
 		"eslint-config-next": "13.1.6",
 		"eslint-plugin-storybook": "^0.6.13",
 		"next": "13.1.6",
+		"npm-dts": "^1.3.12",
 		"npm-run-all": "^4.1.5",
 		"postcss": "^8.4.21",
 		"react": "18.2.0",
@@ -62,4 +63,4 @@
 		"tailwindcss": "^3.2.4",
 		"typescript": "^5.1.6"
 	}
-}
+}

package/stories/Introduction.mdx

@@ -143,7 +143,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/stories/atoms/buttons/Button/Alternative/Alternative.stories.ts

@@ -41,6 +41,13 @@ export const AlternativeExtraSmall: Story = {
 		size: "sm"
 	}
 }
+export const AlternativeSimpleIconName: Story = {
+	args: {
+		...Alternative.args,
+		icon: defaultIcon.icon,
+		iconPosition: "leading"
+	}
+}
 export const AlternativeSmall: Story = {
 	args: {
 		...Alternative.args,

package/stories/atoms/buttons/Button/Button.tsx

@@ -8,13 +8,13 @@ import { DynamicIcon, UnifiedIconName, IDynamicIconProps } from "../../icons"
 export type BTNActionType = "primary" | "secondary" | "alternative" | "danger"
 export interface IButtonProps extends React.ComponentPropsWithoutRef<"button"> {
 	/** 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 */
@@ -30,6 +30,8 @@ export interface IButtonProps extends React.ComponentPropsWithoutRef<"button"> {
 	/** Is the associated content loading? */
 	isLoading?: boolean
 	className?: string
+	iconObj?: React.ReactNode
+	ref?: React.LegacyRef<HTMLButtonElement>
 }
 /**
  * Primary UI component for user interaction
@@ -39,12 +41,14 @@ const Button = ({
 	size = "sm",
 	label,
 	icon,
+	iconObj,
 	CustomSVGIcon,
 	fullWidth = false,
 	iconPosition = "trailing",
 	asLink,
 	isLoading = false,
 	className,
+	ref,
 	...props
 }: IButtonProps) => {
 	const iconStyles = cn(
@@ -88,6 +92,7 @@ const Button = ({
 				},
 				className ? className : ""
 			)}
+			ref={ref}
 			{...props}
 		>
 			{CustomSVGIcon &&
@@ -96,11 +101,20 @@ const Button = ({
 				) : (
 					<i>{CustomSVGIcon}</i>
 				))}
+			{iconObj &&
+				iconPosition === "leading" &&
+				(!isLoading ? (
+					<>{iconObj}</>
+				) : (
+					<div className={cn("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize)} />
+				))}
 
 			{icon &&
 				iconPosition === "leading" &&
 				(isLoading ? (
 					<div className={cn("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize)} />
+				) : typeof icon === "string" ? (
+					<DynamicIcon {...{ icon: icon, className: iconStyles }} />
 				) : (
 					<DynamicIcon {...{ ...icon, className: iconStyles }} />
 				))}
@@ -113,9 +127,18 @@ const Button = ({
 				iconPosition === "trailing" &&
 				(isLoading ? (
 					<div className={cn("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize)} />
+				) : typeof icon === "string" ? (
+					<DynamicIcon {...{ icon: icon, className: iconStyles }} />
 				) : (
 					<DynamicIcon {...{ ...icon, className: iconStyles }} />
 				))}
+			{iconObj &&
+				iconPosition === "trailing" &&
+				(!isLoading ? (
+					<>{iconObj}</>
+				) : (
+					<div className={cn("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize)} />
+				))}
 		</button>
 	)
 }

package/stories/atoms/buttons/Button/Danger/Danger.stories.ts

@@ -38,6 +38,13 @@ export const DangerLeadingIcon: Story = {
 		iconPosition: "leading"
 	}
 }
+export const DangerSimpleIconName: Story = {
+	args: {
+		...Danger.args,
+		icon: "TrashIcon",
+		iconPosition: "leading"
+	}
+}
 export const DangerExtraSmall: Story = {
 	args: {
 		...Danger.args,

package/stories/atoms/buttons/Button/Primary/Primary.stories.ts

@@ -39,6 +39,13 @@ export const PrimaryLeadingIcon: Story = {
 		iconPosition: "leading"
 	}
 }
+export const PrimarySimpleIconName: Story = {
+	args: {
+		...Primary.args,
+		icon: "CheckIcon",
+		iconPosition: "leading"
+	}
+}
 export const PrimaryTrailingIcon: Story = {
 	args: {
 		...PrimaryLeadingIcon.args,

package/stories/atoms/buttons/Button/Secondary/Secondary.stories.ts

@@ -41,6 +41,13 @@ export const SecondaryLeadingIcon: Story = {
 		iconPosition: "leading"
 	}
 }
+export const SecondarySimpleIconName: Story = {
+	args: {
+		...Secondary.args,
+		icon: "BellIcon",
+		iconPosition: "leading"
+	}
+}
 export const SecondaryExtraSmall: Story = {
 	args: {
 		...Secondary.args,