import { Children , ReactElement , ReactNode , SVGProps } from "react" ; import { IconSize } from "./Icon" ; import { InternalProps , SlotProps , augmentElement , createSizeAdapter } from "../../shared" ; import { ResponsiveProp , StyledSystemProps , useResponsiveValue } from "../../styling" ; export interface EmbeddedIconProps extends StyledSystemProps , SlotProps , InternalProps , Omit < SVGProps < SVGSVGElement > , keyof StyledSystemProps > { /**
     * React children.
     */ children : ReactNode ; /**
     * Whether or not the icon should look disabled.
     */ disabled ? : boolean ; /**
     * An icon can vary in size.
     */ size ? : ResponsiveProp < IconSize > ; } export const embeddedIconSize = createSizeAdapter ( { "2xs" : "2xs" , "xs" : "2xs" , "sm" : "xs" , "md" : "sm" , "lg" : "md" , "xl" : "lg" , "inherit" : "inherit" } ) ; export function EmbeddedIcon ( { children , size , ... rest } ) { const sizeValue = useResponsiveValue ( size ) ; const icon = Children . only ( children ) as ReactElement ; return augmentElement ( icon , { size : embeddedIconSize ( sizeValue ) , ... rest } ) ; }