diff --git a/packages/ctrls-progress/demo/src/DemoProgress.tsx b/packages/ctrls-progress/demo/src/DemoProgress.tsx
index ebd86bd..5037237 100644
--- a/packages/ctrls-progress/demo/src/DemoProgress.tsx
+++ b/packages/ctrls-progress/demo/src/DemoProgress.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { ButtonProgress } from '@ui-controls/progress/ButtonProgress'
 import { IconButtonProgress } from '@ui-controls/progress/IconButtonProgress'
-import { ps, useProgress } from 'react-progress-state'
+import { ps, useProgress } from 'react-progress-state/useProgressNext'
 import Box from '@mui/material/Box'
 import IcLogin from '@mui/icons-material/Login'
 import Button from '@mui/material/Button'
@@ -31,7 +31,7 @@ export const DemoProgress: React.FC<{}> = () => {
                         onClick={() => {
                             const pid = startLoading1()
                             window.setTimeout(() => {
-                                const isPid = setLoading1(ps.done, undefined, pid)
+                                const isPid = setLoading1(ps.success, undefined, pid)
                                 if(!isPid) return
                                 console.log('done', pid)
                             }, 600)
@@ -47,7 +47,7 @@ export const DemoProgress: React.FC<{}> = () => {
                         onClick={() => {
                             const pid = startLoading1()
                             window.setTimeout(() => {
-                                const isPid = setLoading1(ps.done, undefined, pid)
+                                const isPid = setLoading1(ps.success, undefined, pid)
                                 if(!isPid) return
                                 console.log('done', pid)
                             }, 600)
@@ -81,7 +81,7 @@ export const DemoProgress: React.FC<{}> = () => {
                         onClick={() => {
                             const pid = startLoading3()
                             window.setTimeout(() => {
-                                const isPid = setLoading3(ps.done, undefined, pid)
+                                const isPid = setLoading3(ps.success, undefined, pid)
                                 if(!isPid) return
                                 console.log('done', pid)
                             }, 600)
@@ -120,7 +120,7 @@ export const DemoProgress: React.FC<{}> = () => {
                         onClick={() => {
                             const pid = startLoading1()
                             window.setTimeout(() => {
-                                const isPid = setLoading1(ps.done, undefined, pid)
+                                const isPid = setLoading1(ps.success, undefined, pid)
                                 if(!isPid) return
                                 console.log('done', pid)
                             }, 600)
@@ -137,7 +137,7 @@ export const DemoProgress: React.FC<{}> = () => {
                         onClick={() => {
                             const pid = startLoading1()
                             window.setTimeout(() => {
-                                const isPid = setLoading1(ps.done, undefined, pid)
+                                const isPid = setLoading1(ps.success, undefined, pid)
                                 if(!isPid) return
                                 console.log('done', pid)
                             }, 600)
@@ -173,7 +173,7 @@ export const DemoProgress: React.FC<{}> = () => {
                         onClick={() => {
                             const pid = startLoading3()
                             window.setTimeout(() => {
-                                const isPid = setLoading3(ps.done, undefined, pid)
+                                const isPid = setLoading3(ps.success, undefined, pid)
                                 if(!isPid) return
                                 console.log('done', pid)
                             }, 600)
diff --git a/packages/ctrls-progress/demo/src/DemoProgressConfirm.tsx b/packages/ctrls-progress/demo/src/DemoProgressConfirm.tsx
index 9560037..852bfc2 100644
--- a/packages/ctrls-progress/demo/src/DemoProgressConfirm.tsx
+++ b/packages/ctrls-progress/demo/src/DemoProgressConfirm.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { ButtonProgress } from '@ui-controls/progress/ButtonProgress'
 import { IconButtonProgress } from '@ui-controls/progress/IconButtonProgress'
-import { ps, useProgress } from 'react-progress-state'
+import { ps, useProgress } from 'react-progress-state/useProgressNext'
 import Box from '@mui/material/Box'
 import IcDeleteConfirm from '@mui/icons-material/Delete'
 import IcDelete from '@mui/icons-material/DeleteOutline'
@@ -21,7 +21,7 @@ export const DemoProgressConfirm: React.FC<{}> = () => {
                     onClick={() => {
                         const pid = startLoading1()
                         window.setTimeout(() => {
-                            const isPid = setLoading1(ps.done, undefined, pid)
+                            const isPid = setLoading1(ps.success, undefined, pid)
                             if(!isPid) return
                             console.log('done', pid)
                         }, 600)
@@ -57,7 +57,7 @@ export const DemoProgressConfirm: React.FC<{}> = () => {
                     onClick={() => {
                         const pid = startLoading1()
                         window.setTimeout(() => {
-                            const isPid = setLoading1(ps.done, undefined, pid)
+                            const isPid = setLoading1(ps.success, undefined, pid)
                             if(!isPid) return
                             console.log('done', pid)
                         }, 600)
@@ -94,7 +94,7 @@ export const DemoProgressConfirm: React.FC<{}> = () => {
                     onClick={() => {
                         const pid = startLoading1()
                         window.setTimeout(() => {
-                            const isPid = setLoading1(ps.done, undefined, pid)
+                            const isPid = setLoading1(ps.success, undefined, pid)
                             if(!isPid) return
                             console.log('done', pid)
                         }, 600)
@@ -130,7 +130,7 @@ export const DemoProgressConfirm: React.FC<{}> = () => {
                     onClick={() => {
                         const pid = startLoading1()
                         window.setTimeout(() => {
-                            const isPid = setLoading1(ps.done, undefined, pid)
+                            const isPid = setLoading1(ps.success, undefined, pid)
                             if(!isPid) return
                             console.log('done', pid)
                         }, 600)
@@ -165,7 +165,7 @@ export const DemoProgressConfirm: React.FC<{}> = () => {
                     onClick={() => {
                         const pid = startLoading1()
                         window.setTimeout(() => {
-                            const isPid = setLoading1(ps.done, undefined, pid)
+                            const isPid = setLoading1(ps.success, undefined, pid)
                             if(!isPid) return
                             console.log('done', pid)
                         }, 600)
@@ -200,7 +200,7 @@ export const DemoProgressConfirm: React.FC<{}> = () => {
                     onClick={() => {
                         const pid = startLoading3()
                         window.setTimeout(() => {
-                            const isPid = setLoading3(ps.done, undefined, pid)
+                            const isPid = setLoading3(ps.success, undefined, pid)
                             if(!isPid) return
                             console.log('done', pid)
                         }, 600)
@@ -238,7 +238,7 @@ export const DemoProgressConfirm: React.FC<{}> = () => {
                     onClick={() => {
                         const pid = startLoading3()
                         window.setTimeout(() => {
-                            const isPid = setLoading3(ps.done, undefined, pid)
+                            const isPid = setLoading3(ps.success, undefined, pid)
                             if(!isPid) return
                             console.log('done', pid)
                         }, 600)
diff --git a/packages/ctrls-progress/package.json b/packages/ctrls-progress/package.json
index d435e1c..64e537a 100644
--- a/packages/ctrls-progress/package.json
+++ b/packages/ctrls-progress/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@ui-controls/progress",
-    "version": "0.0.5",
+    "version": "0.1.0-alpha.0",
     "description": "Material-UI Button + IconButton with progress (loading/error/success)",
     "homepage": "https://bemit.codes",
     "author": "Michael Becker <michael@bemit.codes>",
@@ -45,7 +45,7 @@
     },
     "peerDependencies": {
         "@mui/material": "^5.1",
-        "react-progress-state": "~0.2.3 || ~0.3.1",
+        "react-progress-state": "~0.3.2",
         "react": "^18.0.0",
         "react-dom": "^18.0.0"
     },
diff --git a/packages/ctrls-progress/src/ButtonConfirm/ButtonConfirm.tsx b/packages/ctrls-progress/src/ButtonConfirm/ButtonConfirm.tsx
index 82db382..01652ca 100644
--- a/packages/ctrls-progress/src/ButtonConfirm/ButtonConfirm.tsx
+++ b/packages/ctrls-progress/src/ButtonConfirm/ButtonConfirm.tsx
@@ -1,12 +1,12 @@
-import React from 'react'
+import { MouseEvent, ReactNode, useEffect } from 'react'
 import Button, { ButtonProps } from '@mui/material/Button'
 import { useTheme } from '@mui/material/styles'
 import { useWithConfirm } from '@ui-controls/progress/useWithConfirm'
 import { buttonColors, ColorMap } from '@ui-controls/progress/buttonColors'
 
 export interface WithConfirmProps {
-    confirmIcon: React.ReactNode
-    confirmText: React.ReactNode | string
+    confirmIcon: ReactNode
+    confirmText: ReactNode | string
     // todo: add optional dialog view instead of button label switch
     // confirmDialog?: boolean
     confirmDuration?: number
@@ -24,11 +24,11 @@ export type ButtonConfirmProps =
     {
         classNameWrapper?: string
         resetVal?: any
-        onClick: () => void
+        onClick: (e: MouseEvent<HTMLButtonElement>) => void
         colorMap?: ColorMap
     }
 
-export const ButtonConfirm: React.ComponentType<ButtonConfirmProps> = (
+export const ButtonConfirm = (
     {
         className, classNameWrapper,
         style,
@@ -40,13 +40,13 @@ export const ButtonConfirm: React.ComponentType<ButtonConfirmProps> = (
         resetVal, disabled,
         colorMap,
         ...props
-    },
+    }: ButtonConfirmProps,
 ) => {
-    const {confirmShow, handleClick, setConfirmShow} = useWithConfirm(resetVal ? [resetVal] : undefined, confirmDuration)
+    const {confirmShow, handleClick, setConfirmShow} = useWithConfirm<HTMLButtonElement>(resetVal, confirmDuration)
     const theme = useTheme()
     const btnSx = buttonColors(theme, colorMap)
 
-    React.useEffect(() => {
+    useEffect(() => {
         if(!disabled) return
         setConfirmShow(false)
     }, [disabled, setConfirmShow])
@@ -64,7 +64,7 @@ export const ButtonConfirm: React.ComponentType<ButtonConfirmProps> = (
             }
             onClick={(e) => {
                 e.stopPropagation()
-                handleClick(confirmShow, onClick)
+                handleClick(confirmShow, onClick, e)
             }}
             endIcon={confirmShow && confirmIcon ? confirmIcon : endIcon}
         >
diff --git a/packages/ctrls-progress/src/ButtonProgress/ButtonProgress.tsx b/packages/ctrls-progress/src/ButtonProgress/ButtonProgress.tsx
index 1f0150f..dc3597f 100644
--- a/packages/ctrls-progress/src/ButtonProgress/ButtonProgress.tsx
+++ b/packages/ctrls-progress/src/ButtonProgress/ButtonProgress.tsx
@@ -1,9 +1,9 @@
-import React from 'react'
+import { CSSProperties, MouseEvent } from 'react'
 import { useTheme, SxProps } from '@mui/material/styles'
 import CircularProgress from '@mui/material/CircularProgress'
 import { green } from '@mui/material/colors'
 import Button, { ButtonProps } from '@mui/material/Button'
-import { ProgressStateValues, ps } from 'react-progress-state'
+import { ProgressStateValues, ps } from 'react-progress-state/useProgressNext'
 import Box from '@mui/material/Box'
 import { buttonColors, ColorMap } from '@ui-controls/progress/buttonColors'
 import { WithConfirmProps } from '@ui-controls/progress/ButtonConfirm'
@@ -13,8 +13,8 @@ export type ButtonProgressProps = Omit<ButtonProps, 'onClick'> & Partial<WithCon
     progress: ProgressStateValues
     resetVal?: any
     classNameWrapper?: string
-    onClick: () => void
-    boxStyle?: React.CSSProperties
+    onClick: (e: MouseEvent<HTMLButtonElement>) => void
+    boxStyle?: CSSProperties
     boxSx?: SxProps
     // when `true` will display any `progress` color from mount on,
     // `false` forces `ps.none`, only when then changed it shows the actual button-state
@@ -22,7 +22,7 @@ export type ButtonProgressProps = Omit<ButtonProps, 'onClick'> & Partial<WithCon
     colorMap?: ColorMap
 }
 
-export const ButtonProgress: React.ComponentType<ButtonProgressProps> = (
+export const ButtonProgress = (
     {
         progress, resetVal,
         className, classNameWrapper,
@@ -36,12 +36,12 @@ export const ButtonProgress: React.ComponentType<ButtonProgressProps> = (
         showInitial,
         colorMap,
         ...props
-    },
+    }: ButtonProgressProps,
 ) => {
     const {
         progressState, currentProgress,
         handleClick, confirmShow,
-    } = useButtonProgress(progress, resetVal, disabled, showInitial, confirmDuration, resetDelay)
+    } = useButtonProgress<HTMLButtonElement>(progress, resetVal, disabled, showInitial, confirmDuration, resetDelay)
     const theme = useTheme()
     const btnSx = buttonColors(theme, colorMap)
     const hasConfirm = Boolean(confirmIcon || confirmText)
@@ -58,7 +58,7 @@ export const ButtonProgress: React.ComponentType<ButtonProgressProps> = (
         <Button
             {...props}
             // `disabled` must check against the original `progress`, to be able to not rely on any coloring logic
-            disabled={disabled || progress === ps.start}
+            disabled={disabled || progress === ps.loading}
             className={className}
             sx={{
                 ...sx || {},
@@ -74,9 +74,9 @@ export const ButtonProgress: React.ComponentType<ButtonProgressProps> = (
                 e.stopPropagation()
                 e.preventDefault()
                 if(hasConfirm) {
-                    handleClick(confirmShow, onClick)
+                    handleClick(confirmShow, onClick, e)
                 } else {
-                    onClick()
+                    onClick(e)
                 }
             }}
             endIcon={
@@ -87,7 +87,7 @@ export const ButtonProgress: React.ComponentType<ButtonProgressProps> = (
             {hasConfirm && confirmShow && confirmText ? confirmText : children}
         </Button>
 
-        {currentProgress === ps.start &&
+        {currentProgress === ps.loading &&
             <CircularProgress
                 size={24}
                 style={{
diff --git a/packages/ctrls-progress/src/IconButtonConfirm/IconButtonConfirm.tsx b/packages/ctrls-progress/src/IconButtonConfirm/IconButtonConfirm.tsx
index a05e4f9..a6c1d90 100644
--- a/packages/ctrls-progress/src/IconButtonConfirm/IconButtonConfirm.tsx
+++ b/packages/ctrls-progress/src/IconButtonConfirm/IconButtonConfirm.tsx
@@ -1,23 +1,24 @@
-import React from 'react'
+import { MouseEvent, ReactNode, useEffect } from 'react'
 import { useTheme } from '@mui/material/styles'
 import IconButton, { IconButtonProps } from '@mui/material/IconButton'
 import { useWithConfirm } from '@ui-controls/progress/useWithConfirm'
-import Tooltip from '@mui/material/Tooltip'
+import Tooltip, { TooltipProps } from '@mui/material/Tooltip'
 import { buttonColors, ColorMap } from '@ui-controls/progress/buttonColors'
 
 export type IconButtonConfirmProps = {
-    confirmIcon?: React.ReactNode
+    confirmIcon?: ReactNode
     confirmDuration?: number
-    tooltipConfirm: string | NonNullable<React.ReactNode>
-    tooltip: string | NonNullable<React.ReactNode>
-    onClick: () => void
+    tooltipConfirm: string | NonNullable<ReactNode>
+    tooltip: string | NonNullable<ReactNode>
+    onClick: (e: MouseEvent<HTMLButtonElement>) => void
     resetVal?: any
     // when `true` enabled pointer-events on the tooltip
     tooltipInteractive?: boolean
     colorMap?: ColorMap
+    TooltipProps?: Omit<TooltipProps, 'title'>
 } & Omit<IconButtonProps, 'onClick'>
 
-export const IconButtonConfirm: React.ComponentType<IconButtonConfirmProps> = (
+export const IconButtonConfirm = (
     {
         onClick,
         tooltip, tooltipConfirm,
@@ -27,23 +28,25 @@ export const IconButtonConfirm: React.ComponentType<IconButtonConfirmProps> = (
         resetVal, disabled,
         tooltipInteractive = false,
         colorMap,
+        TooltipProps,
         ...props
-    },
+    }: IconButtonConfirmProps,
 ) => {
-    const {confirmShow, handleClick, setConfirmShow} = useWithConfirm(resetVal ? [resetVal] : undefined, confirmDuration)
+    const {confirmShow, handleClick, setConfirmShow} = useWithConfirm<HTMLButtonElement>(resetVal, confirmDuration)
     const theme = useTheme()
     const btnSx = buttonColors(theme, colorMap)
 
-    React.useEffect(() => {
+    useEffect(() => {
         if(!disabled) return
         setConfirmShow(false)
     }, [disabled, setConfirmShow])
 
-    const title: string | NonNullable<React.ReactNode> = (confirmShow ? tooltipConfirm : tooltip) as string | NonNullable<React.ReactNode>
-    // todo: use describeChild
+    const title: string | NonNullable<ReactNode> = (confirmShow ? tooltipConfirm : tooltip) as string | NonNullable<ReactNode>
+
     return <Tooltip
         title={typeof title === 'undefined' ? '' : title}
         disableInteractive={!tooltipInteractive}
+        {...TooltipProps || {}}
     >
         <IconButton
             {...props}
@@ -56,7 +59,7 @@ export const IconButtonConfirm: React.ComponentType<IconButtonConfirmProps> = (
             }
             onClick={(e) => {
                 e.stopPropagation()
-                handleClick(confirmShow, onClick)
+                handleClick(confirmShow, onClick, e)
             }}
         >
             {confirmShow && confirmIcon ? confirmIcon : children}
diff --git a/packages/ctrls-progress/src/IconButtonProgress/IconButtonProgress.tsx b/packages/ctrls-progress/src/IconButtonProgress/IconButtonProgress.tsx
index b1bd702..febc9a9 100644
--- a/packages/ctrls-progress/src/IconButtonProgress/IconButtonProgress.tsx
+++ b/packages/ctrls-progress/src/IconButtonProgress/IconButtonProgress.tsx
@@ -1,7 +1,7 @@
-import React from 'react'
-import Tooltip from '@mui/material/Tooltip'
+import { CSSProperties, MouseEvent, ReactNode } from 'react'
+import Tooltip, { TooltipProps } from '@mui/material/Tooltip'
 import IconButton, { IconButtonProps } from '@mui/material/IconButton'
-import { ProgressStateValues, ps } from 'react-progress-state'
+import { ProgressStateValues, ps } from 'react-progress-state/useProgressNext'
 import CircularProgress from '@mui/material/CircularProgress'
 import { useTheme, SxProps } from '@mui/material/styles'
 import Box from '@mui/material/Box'
@@ -9,24 +9,24 @@ import { buttonColors, ColorMap } from '@ui-controls/progress/buttonColors'
 import { useButtonProgress } from '@ui-controls/progress/useButtonProgress'
 
 export type IconButtonProgressConfirmProps = {
-    confirmIcon?: React.ReactNode
+    confirmIcon?: ReactNode
     // when `tooltipConfirm` it activates the two-clicks-to-confirm logic
-    tooltipConfirm?: string | NonNullable<React.ReactNode>
+    tooltipConfirm?: string | NonNullable<ReactNode>
     confirmDuration?: number
 } | {
-    confirmIcon: React.ReactNode
-    tooltipConfirm: string | NonNullable<React.ReactNode>
+    confirmIcon: ReactNode
+    tooltipConfirm: string | NonNullable<ReactNode>
     confirmDuration?: number
 }
 
 export type IconButtonProgressProps = IconButtonProgressConfirmProps & Omit<IconButtonProps, 'onClick' | 'onFocusVisible'> & {
     progress: ProgressStateValues
     resetVal?: any
-    tooltip: string | NonNullable<React.ReactNode>
-    tooltipDisabled?: string | NonNullable<React.ReactNode>
-    onClick: () => void
+    tooltip: string | NonNullable<ReactNode>
+    tooltipDisabled?: string | NonNullable<ReactNode>
+    onClick: (e: MouseEvent<HTMLButtonElement>) => void
     boxSx?: SxProps
-    boxStyle?: React.CSSProperties
+    boxStyle?: CSSProperties
     // when `true` will display any `progress` color from mount on,
     // `false` forces `ps.none`, only when then changed it shows the actual button-state
     showInitial?: boolean
@@ -34,9 +34,10 @@ export type IconButtonProgressProps = IconButtonProgressConfirmProps & Omit<Icon
     // when `true` enabled pointer-events on the tooltip
     tooltipInteractive?: boolean
     colorMap?: ColorMap
+    TooltipProps?: Omit<TooltipProps, 'title'>
 }
 
-export const IconButtonProgress: React.ComponentType<IconButtonProgressProps> = (
+export const IconButtonProgress = (
     {
         onClick, disabled,
         size = 'medium',
@@ -50,30 +51,32 @@ export const IconButtonProgress: React.ComponentType<IconButtonProgressProps> =
         showInitial,
         tooltipInteractive = false,
         colorMap,
+        TooltipProps,
         ...props
-    },
+    }: IconButtonProgressProps,
 ) => {
     const {
         progressState, currentProgress,
         handleClick, confirmShow,
-    } = useButtonProgress(progress, resetVal, disabled, showInitial, confirmDuration, resetDelay)
+    } = useButtonProgress<HTMLButtonElement>(progress, resetVal, disabled, showInitial, confirmDuration, resetDelay)
     const theme = useTheme()
     const btnSx = buttonColors(theme, colorMap)
 
     const hasConfirm = Boolean(tooltipConfirm)
     const title = disabled && tooltipDisabled ? tooltipDisabled :
         confirmShow && hasConfirm ? tooltipConfirm : tooltip
-    // todo: use describeChild
+
     return <Tooltip
         title={typeof title === 'undefined' ? '' : title}
         disableInteractive={!tooltipInteractive}
+        {...TooltipProps || {}}
     >
         <Box style={{display: 'inline-flex', ...boxStyle}} component={'span'} sx={boxSx}>
             <IconButton
                 color={'inherit'}
                 {...props}
                 size={size}
-                disabled={disabled || progress === ps.start}
+                disabled={disabled || progress === ps.loading}
                 sx={{
                     marginLeft: 0,
                     position: 'relative',
@@ -92,16 +95,16 @@ export const IconButtonProgress: React.ComponentType<IconButtonProgressProps> =
                 onClick={(e) => {
                     e.stopPropagation()
                     if(hasConfirm) {
-                        handleClick(confirmShow, onClick)
+                        handleClick(confirmShow, onClick, e)
                     } else {
-                        onClick()
+                        onClick(e)
                     }
                 }}
             >
                 <span style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
-                    {currentProgress === ps.start ?
+                    {currentProgress === ps.loading ?
                         <CircularProgress size={size === 'small' ? 18 : 24} sx={{position: 'absolute'}}/> : null}
-                    {<span style={{opacity: currentProgress === ps.start ? 0.5 : 1, display: 'flex'}}>
+                    {<span style={{opacity: currentProgress === ps.loading ? 0.5 : 1, display: 'flex'}}>
                         {hasConfirm && confirmShow && confirmIcon ? confirmIcon : children}
                     </span>}
                 </span>
diff --git a/packages/ctrls-progress/src/ListItemButtonConfirm/ListItemButtonConfirm.tsx b/packages/ctrls-progress/src/ListItemButtonConfirm/ListItemButtonConfirm.tsx
index b0c11c9..d3f3436 100644
--- a/packages/ctrls-progress/src/ListItemButtonConfirm/ListItemButtonConfirm.tsx
+++ b/packages/ctrls-progress/src/ListItemButtonConfirm/ListItemButtonConfirm.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import { MouseEvent, ReactNode, useEffect } from 'react'
 import { useTheme } from '@mui/material/styles'
 import { useWithConfirm } from '@ui-controls/progress/useWithConfirm'
 import { buttonColors, ColorMap } from '@ui-controls/progress/buttonColors'
@@ -14,12 +14,12 @@ export type ListItemButtonConfirmProps =
     Pick<ListItemTextProps, 'primary' | 'primaryTypographyProps' | 'secondary' | 'secondaryTypographyProps'> &
     {
         resetVal?: any
-        onClick: () => void
+        onClick: (e: MouseEvent<HTMLDivElement>) => void
         colorMap?: ColorMap
-        icon: React.ReactNode
+        icon: ReactNode
     }
 
-export const ListItemButtonConfirm: React.ComponentType<ListItemButtonConfirmProps> = (
+export const ListItemButtonConfirm = (
     {
         className,
         onClick, children,
@@ -32,13 +32,13 @@ export const ListItemButtonConfirm: React.ComponentType<ListItemButtonConfirmPro
         primary, primaryTypographyProps,
         secondary, secondaryTypographyProps,
         ...props
-    },
+    }: ListItemButtonConfirmProps,
 ) => {
-    const {confirmShow, handleClick, setConfirmShow} = useWithConfirm(resetVal ? [resetVal] : undefined, confirmDuration)
+    const {confirmShow, handleClick, setConfirmShow} = useWithConfirm<HTMLDivElement>(resetVal, confirmDuration)
     const theme = useTheme()
     const btnSx = buttonColors(theme, colorMap)
 
-    React.useEffect(() => {
+    useEffect(() => {
         if(!disabled) return
         setConfirmShow(false)
     }, [disabled, setConfirmShow])
@@ -55,7 +55,7 @@ export const ListItemButtonConfirm: React.ComponentType<ListItemButtonConfirmPro
         }
         onClick={(e) => {
             e.stopPropagation()
-            handleClick(confirmShow, onClick)
+            handleClick(confirmShow, onClick, e)
         }}
     >
         <ListItemIcon>
diff --git a/packages/ctrls-progress/src/buttonColors/buttonColors.ts b/packages/ctrls-progress/src/buttonColors/buttonColors.ts
index 5feb7f7..106df13 100644
--- a/packages/ctrls-progress/src/buttonColors/buttonColors.ts
+++ b/packages/ctrls-progress/src/buttonColors/buttonColors.ts
@@ -12,31 +12,43 @@ export const colorMapDefault: ColorMap = (theme: Theme) => ({
     confirm: theme.palette.mode === 'dark' ? theme.palette.warning.dark : theme.palette.warning.light,
 })
 
+const colorCache: Map<string, string> = new Map()
+
+const cachedColor = (
+    color: string,
+    getContrastText: (color: string) => string,
+): string => {
+    if(!colorCache.has(color)) {
+        colorCache.set(color, getContrastText(color))
+    }
+    return colorCache.get(color)!
+}
+
 export const buttonColors = (theme: Theme, colorMap: ColorMap = colorMapDefault) => {
     const colors = colorMap(theme)
     return {
         buttonSuccess: {
             backgroundColor: colors.success,
-            color: theme.palette.getContrastText(colors.success),
+            color: cachedColor(colors.success, theme.palette.getContrastText),
             '&:hover': {
                 backgroundColor: colors.success,
-                color: theme.palette.getContrastText(colors.success),
+                color: cachedColor(colors.success, theme.palette.getContrastText),
             },
         },
         buttonError: {
             backgroundColor: colors.error,
-            color: theme.palette.getContrastText(colors.error),
+            color: cachedColor(colors.error, theme.palette.getContrastText),
             '&:hover': {
                 backgroundColor: colors.error,
-                color: theme.palette.getContrastText(colors.error),
+                color: cachedColor(colors.error, theme.palette.getContrastText),
             },
         },
         buttonConfirm: {
             backgroundColor: colors.confirm,
-            color: theme.palette.getContrastText(colors.confirm),
+            color: cachedColor(colors.confirm, theme.palette.getContrastText),
             '&:hover': {
                 backgroundColor: colors.confirm,
-                color: theme.palette.getContrastText(colors.confirm),
+                color: cachedColor(colors.confirm, theme.palette.getContrastText),
             },
         },
     }
diff --git a/packages/ctrls-progress/src/useButtonProgress/useButtonProgress.ts b/packages/ctrls-progress/src/useButtonProgress/useButtonProgress.ts
index e5ee3e9..533b0bc 100644
--- a/packages/ctrls-progress/src/useButtonProgress/useButtonProgress.ts
+++ b/packages/ctrls-progress/src/useButtonProgress/useButtonProgress.ts
@@ -1,9 +1,9 @@
-import React from 'react'
-import { ProgressStateValues, ps } from 'react-progress-state'
+import { useEffect, useMemo, useRef } from 'react'
+import { ProgressStateValues, ps } from 'react-progress-state/useProgressNext'
 import { useWithConfirm } from '@ui-controls/progress/useWithConfirm'
 import { useWithProgress } from '@ui-controls/progress/useWithProgress'
 
-export const useButtonProgress = (
+export const useButtonProgress = <TElement extends HTMLElement>(
     progress: ProgressStateValues,
     resetVal?: any,
     disabled?: boolean,
@@ -12,27 +12,24 @@ export const useButtonProgress = (
     confirmDuration?: number,
     resetDelay?: number,
 ) => {
-    const isMounted = React.useRef<boolean>(false)
-    const currentProgress = React.useMemo(() => {
+    const isMounted = useRef<boolean>(false)
+    const currentProgress = useMemo(() => {
         if(showInitial || isMounted.current) return progress
         // todo: when disabled, allow ending current but do not apply when starting from new
         return ps.none
     }, [progress, showInitial])
-    const {progressState} = useWithProgress(currentProgress, resetVal ? [resetVal] : [], resetDelay)
-    const {confirmShow, handleClick, setConfirmShow} = useWithConfirm(resetVal ? [resetVal] : [], confirmDuration)
+    const {progressState} = useWithProgress(currentProgress, resetVal, resetDelay)
+    const {confirmShow, handleClick, setConfirmShow} = useWithConfirm<TElement>(resetVal, confirmDuration)
 
-    React.useEffect(() => {
+    useEffect(() => {
+        if(!isMounted.current) {
+            isMounted.current = true
+            return
+        }
         if(!disabled) return
         setConfirmShow(false)
     }, [disabled, setConfirmShow])
 
-    React.useEffect(() => {
-        isMounted.current = true
-        return () => {
-            isMounted.current = false
-        }
-    }, [])
-
     return {
         progressState: progressState,
         confirmShow: confirmShow,
diff --git a/packages/ctrls-progress/src/useWithConfirm/useWithConfirm.ts b/packages/ctrls-progress/src/useWithConfirm/useWithConfirm.ts
index 5087e09..6e7ef95 100644
--- a/packages/ctrls-progress/src/useWithConfirm/useWithConfirm.ts
+++ b/packages/ctrls-progress/src/useWithConfirm/useWithConfirm.ts
@@ -1,20 +1,25 @@
-import React from 'react'
+import { MouseEvent, useCallback, useEffect, useRef, useState } from 'react'
 
-export const useWithConfirm = (resetVal?: any[], confirmDuration: number = 2500) => {
-    const [confirmShow, setConfirmShow] = React.useState(false)
-    const timerConfirm = React.useRef<number | undefined>()
-    React.useEffect(() => {
-        return () => window.clearTimeout(timerConfirm.current)
-    }, [timerConfirm])
-    React.useEffect(() => {
+export const useWithConfirm = <TElement extends HTMLElement>(
+    resetVal?: any,
+    confirmDuration: number = 2500,
+) => {
+    const [confirmShow, setConfirmShow] = useState(false)
+    const timerConfirm = useRef<number | undefined>()
+
+    useEffect(() => {
         setConfirmShow(false)
-        // eslint-disable-next-line
-    }, [...resetVal || []])
+        return () => window.clearTimeout(timerConfirm.current)
+    }, [resetVal])
 
-    const handleClick = React.useCallback((confirmShow: boolean, onClick: () => void) => {
+    const handleClick = useCallback((
+        confirmShow: boolean,
+        onClick: (e: MouseEvent<TElement>) => void,
+        e: MouseEvent<TElement>,
+    ) => {
         if(confirmShow) {
             setConfirmShow(false)
-            onClick()
+            onClick(e)
         } else {
             setConfirmShow(true)
             window.clearTimeout(timerConfirm.current)
diff --git a/packages/ctrls-progress/src/useWithProgress/useWithProgress.ts b/packages/ctrls-progress/src/useWithProgress/useWithProgress.ts
index 324df0b..f909f3b 100644
--- a/packages/ctrls-progress/src/useWithProgress/useWithProgress.ts
+++ b/packages/ctrls-progress/src/useWithProgress/useWithProgress.ts
@@ -1,17 +1,19 @@
-import React from 'react'
-import { ProgressStateValues, ps } from 'react-progress-state'
+import { useEffect, useRef, useState } from 'react'
+import { ProgressStateValues, ps } from 'react-progress-state/useProgressNext'
 
-export const useWithProgress = (progress: ProgressStateValues, resetVal?: any[], resetDelay: number = 1800) => {
-    const timer = React.useRef<number>()
-    const [progressState, setProgressState] = React.useState<0 | 1 | -1>(0)
-    React.useEffect(() => {
+export const useWithProgress = (progress: ProgressStateValues, resetVal?: any, resetDelay: number = 1800) => {
+    const timer = useRef<number>()
+    const [progressState, setProgressState] = useState<0 | 1 | -1>(0)
+    useEffect(() => {
         setProgressState(0)
-        // eslint-disable-next-line
-    }, resetVal || [])
+        return () => {
+            window.clearTimeout(timer.current)
+        }
+    }, [resetVal])
 
-    const isSuccess = progress === ps.done
+    const isSuccess = progress === ps.success
     const isError = progress === ps.error
-    React.useEffect(() => {
+    useEffect(() => {
         if(isSuccess) {
             setProgressState(1)
         } else if(isError) {
@@ -30,6 +32,5 @@ export const useWithProgress = (progress: ProgressStateValues, resetVal?: any[],
     return {
         timer,
         progressState,
-        setProgressState,
     }
 }