import * as React from 'react' ; import { createComponent , createElement , createHook , useTheme } from 'bumbag/utils' ; import { Box , BoxProps } from '../Box' ; import { ButtonContext , ButtonProps } from '../Button' ; import { IconProps } from '../Icon' ; import * as styles from './Button.styles' ; export type LocalButtonIconProps = { color ? : ButtonProps [ 'color' ] ; palette ? : ButtonProps [ 'palette' ] ; size ? : ButtonProps [ 'size' ] ; variant ? : ButtonProps [ 'variant' ] ; } ; export type ButtonIconProps = BoxProps & IconProps & LocalButtonIconProps ; const useProps = createHook < ButtonIconProps > ( ( props ) => { const { theme } = useTheme ( ) ; const buttonProps = React . useContext ( ButtonContext ) ; const boxProps = Box . useProps ( props ) ; return { ... buttonProps , color : props . color || styles . getButtonIconColor ( { ... buttonProps , theme } ) , size : '200' , ... boxProps , } ; } , { themeKey : 'native.ButtonIcon' } ) ; export const ButtonIcon = createComponent < ButtonIconProps > ( ( props ) => { const htmlProps = useProps ( props ) ; return createElement ( { children : props . children , component : styles . StyledButtonIcon , htmlProps , } ) ; } , { attach : { useProps , displayName : 'native.ButtonIcon' , } , themeKey : 'native.ButtonIcon' , } ) ;