@agility/plenum-ui 2.0.0-rc47 → 2.0.0-rc49

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

@@ -1,86 +1,86 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import Button from "../Button"
-import { defaultIcon } from "../defaultArgs"
-
-// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
-const meta: Meta<typeof Button> = {
-	title: "Design System/atoms/Buttons/Button/Alternative",
-	component: Button,
-	tags: ["autodocs"],
-	argTypes: {}
-}
-
-export default meta
-type Story = StoryObj<typeof Button>
-// #region Alternative Button Stories
-export const Alternative: Story = {
-	args: {
-		actionType: "alternative",
-		label: "Button",
-		onClick: () => {
-			window.alert("Button clicked!")
-		}
-	}
-}
-export const AlternativeDisabled: Story = {
-	args: {
-		actionType: "alternative",
-		label: "Button",
-		disabled: true,
-		onClick: () => {
-			window.alert("Button clicked!")
-		}
-	}
-}
-export const AlternativeTrailingIcon: Story = {
-	args: {
-		...Alternative.args,
-		icon: defaultIcon,
-		iconPosition: "trailing"
-	}
-}
-export const AlternativeLeadingIcon: Story = {
-	args: {
-		...AlternativeTrailingIcon.args,
-		iconPosition: "leading"
-	}
-}
-export const AlternativeExtraSmall: Story = {
-	args: {
-		...Alternative.args,
-		size: "sm"
-	}
-}
-export const AlternativeSimpleIconName: Story = {
-	args: {
-		...Alternative.args,
-		icon: defaultIcon.icon,
-		iconPosition: "leading"
-	}
-}
-export const AlternativeSmall: Story = {
-	args: {
-		...Alternative.args,
-		size: "sm"
-	}
-}
-export const AlternativeMedium: Story = {
-	args: {
-		...Alternative.args,
-		size: "md"
-	}
-}
-
-export const AlternativeLarge: Story = {
-	args: {
-		...Alternative.args,
-		size: "lg"
-	}
-}
-export const AlternativeExtraLarge: Story = {
-	args: {
-		...Alternative.args,
-		size: "xl"
-	}
-}
-// #endregion
+import type { Meta, StoryObj } from "@storybook/react"
+import Button from "../Button"
+import { defaultIcon } from "../defaultArgs"
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+const meta: Meta<typeof Button> = {
+	title: "Design System/atoms/Buttons/Button/Alternative",
+	component: Button,
+	tags: ["autodocs"],
+	argTypes: {}
+}
+
+export default meta
+type Story = StoryObj<typeof Button>
+// #region Alternative Button Stories
+export const Alternative: Story = {
+	args: {
+		actionType: "alternative",
+		label: "Button",
+		onClick: () => {
+			window.alert("Button clicked!")
+		}
+	}
+}
+export const AlternativeDisabled: Story = {
+	args: {
+		actionType: "alternative",
+		label: "Button",
+		disabled: true,
+		onClick: () => {
+			window.alert("Button clicked!")
+		}
+	}
+}
+export const AlternativeTrailingIcon: Story = {
+	args: {
+		...Alternative.args,
+		icon: defaultIcon,
+		iconPosition: "trailing"
+	}
+}
+export const AlternativeLeadingIcon: Story = {
+	args: {
+		...AlternativeTrailingIcon.args,
+		iconPosition: "leading"
+	}
+}
+export const AlternativeExtraSmall: Story = {
+	args: {
+		...Alternative.args,
+		size: "sm"
+	}
+}
+export const AlternativeSimpleIconName: Story = {
+	args: {
+		...Alternative.args,
+		icon: defaultIcon.icon,
+		iconPosition: "leading"
+	}
+}
+export const AlternativeSmall: Story = {
+	args: {
+		...Alternative.args,
+		size: "sm"
+	}
+}
+export const AlternativeMedium: Story = {
+	args: {
+		...Alternative.args,
+		size: "md"
+	}
+}
+
+export const AlternativeLarge: Story = {
+	args: {
+		...Alternative.args,
+		size: "lg"
+	}
+}
+export const AlternativeExtraLarge: Story = {
+	args: {
+		...Alternative.args,
+		size: "xl"
+	}
+}
+// #endregion

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

@@ -1,232 +1,232 @@
-import Loader from "stories/atoms/loaders/Loader"
-import { default as cn } from "classnames"
-import React, { HTMLAttributeAnchorTarget, forwardRef } from "react"
-import { DynamicIcon, UnifiedIconName, IDynamicIconProps } from "../../icons"
-
-// import Loader from "../loaders/loader/Loader"
-
-export type BTNActionType = "primary" | "secondary" | "alternative" | "danger"
-
-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'. */
-	size?: "xs" | "sm" | "md" | "lg" | "xl"
-	/** The Button's text content. */
-	label: string
-	/** The Icon to be displayed inside the button. */
-	icon?: IDynamicIconProps | UnifiedIconName
-	/** Does the button width grow to fill it's container? */
-	fullWidth?: boolean
-	/** Optionally render as anchor tag */
-	asLink?: {
-		href: string
-		target: HTMLAttributeAnchorTarget
-		title?: string
-	}
-	/** The placement of the icon relative to the text content. */
-	iconPosition?: "trailing" | "leading"
-	/** Use an custom svg element */
-	CustomSVGIcon?: JSX.Element
-	/** Is the associated content loading? */
-	isLoading?: boolean
-	className?: string
-	iconObj?: React.ReactNode
-}
-/**
- * Primary UI component for user interaction
- */
-const _Button = (
-	{
-		actionType = "primary",
-		size = "sm",
-		label,
-		icon,
-		iconObj,
-		CustomSVGIcon,
-		fullWidth = false,
-		iconPosition = "leading",
-		asLink,
-		isLoading = false,
-		className,
-		...props
-	}: IButtonProps,
-	ref: React.LegacyRef<HTMLButtonElement>
-) => {
-	const iconStyles = cn(
-		{ "text-white h-5 w-5": actionType === "primary" || actionType === "danger" },
-		{ "text-purple-700 h-5 w-5 ": actionType === "secondary" },
-		{ "text-gray-700  h-5 w-5": actionType === "alternative" }
-	)
-	const loaderColors = cn(
-		{ "border-r-white": actionType === "primary" },
-		{ "border-purple-200 border-r-purple-700": actionType === "secondary" },
-		{ "border-gray-200 border-r-gray-700": actionType === "alternative" },
-		{ "border-red-800 border-r-white": actionType === "danger" }
-	)
-	const loaderSize = cn({ "h-4 w-4": size === "sm" }, { "h-5 w-5": size === "md" }, { "h-6 w-6 ": size === "lg" })
-
-	return asLink ? (
-		//@ts-ignore
-		<a
-			{...{
-				href: asLink.href,
-				target: asLink.target,
-				title: asLink.title,
-				className: cn(
-					"inline-flex items-center justify-center gap-x-2  font-medium rounded-[3px] !ring-offset-white outline-none   focus-visible:ring-2 focus-visible:ring-purple-600 focus-visible:ring-offset-2  focus-within:ring-2 focus-within:ring-purple-600 focus-within:ring-offset-2  focus:ring-2 focus:ring-purple-600 focus:ring-offset-2  active:ring-2 active:ring-purple-600 active:ring-offset-2 transition-all",
-					{ "w-full": fullWidth },
-					{ "px-[11px] py-[7px] text-xs": size === "xs" },
-					{ "px-[13px] py-[9px] text-sm": size === "sm" },
-					{ "px-[17px] py-[9px] text-sm": size === "md" },
-					{ "px-[17px] py-[9px] text-base": size === "lg" },
-					{ "px-[25px] py-[13px] text-base": size === "xl" },
-					{
-						"bg-purple-600 text-white hover:border-purple-700 hover:bg-purple-700 disabled:bg-purple-400 disabled:focus-visible:ring-0":
-							actionType === "primary"
-					},
-					{
-						" bg-purple-50 text-purple-700 hover:bg-purple-200   focus-within:bg-purple-100  focus-visible:bg-purple-100 focus:bg-purple-100 active:bg-purple-100 disabled:bg-purple-50 disabled:text-purple-300 disabled:focus-visible:ring-0":
-							actionType === "secondary"
-					},
-					{
-						"border-gray-300 bg-white border  text-gray-700 hover:bg-gray-50 focus-visible:!border-gray-300 focus-within:!border-gray-300 focus:!border-gray-300 active:!border-gray-300 disabled:bg-gray-50 disabled:text-gray-300 disabled:focus-visible:ring-0":
-							actionType === "alternative"
-					},
-					{
-						" bg-red-600 text-white hover:bg-red-700 <focus-visible:!></focus-visible:!>ring-red-500 focus:!ring-red-500 active:!ring-red-500 focus-within:!ring-red-500 disabled:bg-red-400 disabled:text-gray-50 disabled:focus-visible:ring-0":
-							actionType === "danger"
-					},
-					className ? className : ""
-				),
-				onClick: props.onClick
-			}}
-		>
-			{" "}
-			{CustomSVGIcon &&
-				(isLoading ? (
-					<div className={cn("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize)} />
-				) : (
-					<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 }} />
-				))}
-			{!icon && !CustomSVGIcon && isLoading && (
-				<div className={cn("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize)} />
-			)}
-			{label}
-			{icon &&
-				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)} />
-				))}
-		</a>
-	) : (
-		<button
-			type="button"
-			className={cn(
-				"inline-flex items-center justify-center gap-x-2  font-medium rounded-[3px] !ring-offset-white outline-none   focus-visible:ring-2 focus-visible:ring-purple-600 focus-visible:ring-offset-2  focus-within:ring-2 focus-within:ring-purple-600 focus-within:ring-offset-2  focus:ring-2 focus:ring-purple-600 focus:ring-offset-2  active:ring-2 active:ring-purple-600 active:ring-offset-2 transition-all",
-				{ "w-full": fullWidth },
-				{ "px-[11px] py-[7px] text-xs": size === "xs" },
-				{ "px-[13px] py-[9px] text-sm": size === "sm" },
-				{ "px-[17px] py-[9px] text-sm": size === "md" },
-				{ "px-[17px] py-[9px] text-base": size === "lg" },
-				{ "px-[25px] py-[13px] text-base": size === "xl" },
-				{
-					"bg-purple-600 text-white hover:border-purple-700 hover:bg-purple-700 disabled:bg-purple-400 disabled:focus-visible:ring-0":
-						actionType === "primary"
-				},
-				{
-					" bg-purple-50 text-purple-700 hover:bg-purple-200   focus-within:bg-purple-100  focus-visible:bg-purple-100 focus:bg-purple-100 active:bg-purple-100 disabled:bg-purple-50 disabled:text-purple-300 disabled:focus-visible:ring-0":
-						actionType === "secondary"
-				},
-				{
-					"border-gray-300 bg-white border  text-gray-700 hover:bg-gray-50 focus-visible:!border-gray-300 focus-within:!border-gray-300 focus:!border-gray-300 active:!border-gray-300 disabled:bg-gray-50 disabled:text-gray-300 disabled:focus-visible:ring-0":
-						actionType === "alternative"
-				},
-				{
-					" bg-red-600 text-white hover:bg-red-700 <focus-visible:!></focus-visible:!>ring-red-500 focus:!ring-red-500 active:!ring-red-500 focus-within:!ring-red-500 disabled:bg-red-400 disabled:text-gray-50 disabled:focus-visible:ring-0":
-						actionType === "danger"
-				},
-				className ? className : ""
-			)}
-			ref={ref}
-			{...props}
-		>
-			{CustomSVGIcon &&
-				(isLoading ? (
-					<div className={cn("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize)} />
-				) : (
-					<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 }} />
-				))}
-
-			{!icon && !CustomSVGIcon && isLoading && (
-				<div className={cn("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize)} />
-			)}
-			{label}
-			{icon &&
-				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>
-	)
-}
-
-const Button = forwardRef<HTMLButtonElement, IButtonProps>(_Button)
-
-export default Button
+import Loader from "stories/atoms/loaders/Loader"
+import { default as cn } from "classnames"
+import React, { HTMLAttributeAnchorTarget, forwardRef } from "react"
+import { DynamicIcon, UnifiedIconName, IDynamicIconProps } from "../../icons"
+
+// import Loader from "../loaders/loader/Loader"
+
+export type BTNActionType = "primary" | "secondary" | "alternative" | "danger"
+
+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'. */
+	size?: "xs" | "sm" | "md" | "lg" | "xl"
+	/** The Button's text content. */
+	label: string
+	/** The Icon to be displayed inside the button. */
+	icon?: IDynamicIconProps | UnifiedIconName
+	/** Does the button width grow to fill it's container? */
+	fullWidth?: boolean
+	/** Optionally render as anchor tag */
+	asLink?: {
+		href: string
+		target: HTMLAttributeAnchorTarget
+		title?: string
+	}
+	/** The placement of the icon relative to the text content. */
+	iconPosition?: "trailing" | "leading"
+	/** Use an custom svg element */
+	CustomSVGIcon?: JSX.Element
+	/** Is the associated content loading? */
+	isLoading?: boolean
+	className?: string
+	iconObj?: React.ReactNode
+}
+/**
+ * Primary UI component for user interaction
+ */
+const _Button = (
+	{
+		actionType = "primary",
+		size = "sm",
+		label,
+		icon,
+		iconObj,
+		CustomSVGIcon,
+		fullWidth = false,
+		iconPosition = "leading",
+		asLink,
+		isLoading = false,
+		className,
+		...props
+	}: IButtonProps,
+	ref: React.LegacyRef<HTMLButtonElement>
+) => {
+	const iconStyles = cn(
+		{ "text-white h-5 w-5": actionType === "primary" || actionType === "danger" },
+		{ "text-purple-700 h-5 w-5 ": actionType === "secondary" },
+		{ "text-gray-700  h-5 w-5": actionType === "alternative" }
+	)
+	const loaderColors = cn(
+		{ "border-r-white": actionType === "primary" },
+		{ "border-purple-200 border-r-purple-700": actionType === "secondary" },
+		{ "border-gray-200 border-r-gray-700": actionType === "alternative" },
+		{ "border-red-800 border-r-white": actionType === "danger" }
+	)
+	const loaderSize = cn({ "h-4 w-4": size === "sm" }, { "h-5 w-5": size === "md" }, { "h-6 w-6 ": size === "lg" })
+
+	return asLink ? (
+		//@ts-ignore
+		<a
+			{...{
+				href: asLink.href,
+				target: asLink.target,
+				title: asLink.title,
+				className: cn(
+					"inline-flex items-center justify-center gap-x-2  font-medium rounded-[3px] !ring-offset-white outline-none   focus-visible:ring-2 focus-visible:ring-purple-600 focus-visible:ring-offset-2  focus-within:ring-2 focus-within:ring-purple-600 focus-within:ring-offset-2  focus:ring-2 focus:ring-purple-600 focus:ring-offset-2  active:ring-2 active:ring-purple-600 active:ring-offset-2 transition-all",
+					{ "w-full": fullWidth },
+					{ "px-[11px] py-[7px] text-xs": size === "xs" },
+					{ "px-[13px] py-[9px] text-sm": size === "sm" },
+					{ "px-[17px] py-[9px] text-sm": size === "md" },
+					{ "px-[17px] py-[9px] text-base": size === "lg" },
+					{ "px-[25px] py-[13px] text-base": size === "xl" },
+					{
+						"bg-purple-600 text-white hover:border-purple-700 hover:bg-purple-700 disabled:bg-purple-400 disabled:focus-visible:ring-0":
+							actionType === "primary"
+					},
+					{
+						" bg-purple-50 text-purple-700 hover:bg-purple-200   focus-within:bg-purple-100  focus-visible:bg-purple-100 focus:bg-purple-100 active:bg-purple-100 disabled:bg-purple-50 disabled:text-purple-300 disabled:focus-visible:ring-0":
+							actionType === "secondary"
+					},
+					{
+						"border-gray-300 bg-white border  text-gray-700 hover:bg-gray-50 focus-visible:!border-gray-300 focus-within:!border-gray-300 focus:!border-gray-300 active:!border-gray-300 disabled:bg-gray-50 disabled:text-gray-300 disabled:focus-visible:ring-0":
+							actionType === "alternative"
+					},
+					{
+						" bg-red-600 text-white hover:bg-red-700 <focus-visible:!></focus-visible:!>ring-red-500 focus:!ring-red-500 active:!ring-red-500 focus-within:!ring-red-500 disabled:bg-red-400 disabled:text-gray-50 disabled:focus-visible:ring-0":
+							actionType === "danger"
+					},
+					className ? className : ""
+				),
+				onClick: props.onClick
+			}}
+		>
+			{" "}
+			{CustomSVGIcon &&
+				(isLoading ? (
+					<div className={cn("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize)} />
+				) : (
+					<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 }} />
+				))}
+			{!icon && !CustomSVGIcon && isLoading && (
+				<div className={cn("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize)} />
+			)}
+			{label}
+			{icon &&
+				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)} />
+				))}
+		</a>
+	) : (
+		<button
+			type="button"
+			className={cn(
+				"inline-flex items-center justify-center gap-x-2  font-medium rounded-[3px] !ring-offset-white outline-none   focus-visible:ring-2 focus-visible:ring-purple-600 focus-visible:ring-offset-2  focus-within:ring-2 focus-within:ring-purple-600 focus-within:ring-offset-2  focus:ring-2 focus:ring-purple-600 focus:ring-offset-2  active:ring-2 active:ring-purple-600 active:ring-offset-2 transition-all",
+				{ "w-full": fullWidth },
+				{ "px-[11px] py-[7px] text-xs": size === "xs" },
+				{ "px-[13px] py-[9px] text-sm": size === "sm" },
+				{ "px-[17px] py-[9px] text-sm": size === "md" },
+				{ "px-[17px] py-[9px] text-base": size === "lg" },
+				{ "px-[25px] py-[13px] text-base": size === "xl" },
+				{
+					"bg-purple-600 text-white hover:border-purple-700 hover:bg-purple-700 disabled:bg-purple-400 disabled:focus-visible:ring-0":
+						actionType === "primary"
+				},
+				{
+					" bg-purple-50 text-purple-700 hover:bg-purple-200   focus-within:bg-purple-100  focus-visible:bg-purple-100 focus:bg-purple-100 active:bg-purple-100 disabled:bg-purple-50 disabled:text-purple-300 disabled:focus-visible:ring-0":
+						actionType === "secondary"
+				},
+				{
+					"border-gray-300 bg-white border  text-gray-700 hover:bg-gray-50 focus-visible:!border-gray-300 focus-within:!border-gray-300 focus:!border-gray-300 active:!border-gray-300 disabled:bg-gray-50 disabled:text-gray-300 disabled:focus-visible:ring-0":
+						actionType === "alternative"
+				},
+				{
+					" bg-red-600 text-white hover:bg-red-700 <focus-visible:!></focus-visible:!>ring-red-500 focus:!ring-red-500 active:!ring-red-500 focus-within:!ring-red-500 disabled:bg-red-400 disabled:text-gray-50 disabled:focus-visible:ring-0":
+						actionType === "danger"
+				},
+				className ? className : ""
+			)}
+			ref={ref}
+			{...props}
+		>
+			{CustomSVGIcon &&
+				(isLoading ? (
+					<div className={cn("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize)} />
+				) : (
+					<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 }} />
+				))}
+
+			{!icon && !CustomSVGIcon && isLoading && (
+				<div className={cn("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize)} />
+			)}
+			{label}
+			{icon &&
+				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>
+	)
+}
+
+const Button = forwardRef<HTMLButtonElement, IButtonProps>(_Button)
+
+export default Button