{"version":3,"file":"ButtonIcon.mjs","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,cAAc,EACd,iBAAiB,EAClB,uCAAuC;AACxC,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EAAE,IAAI,EAAE,0BAAgB;AAE/B,OAAO,EACL,oCAAoC,EACpC,4BAA4B,EAC7B,mCAA+B;AAGhC,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAClC,CACE,EACE,SAAS,EACT,QAAQ,EACR,SAAS,EACT,SAAS,EACT,UAAU,GAAG,KAAK,EAClB,OAAO,GAAG,iBAAiB,CAAC,OAAO,EACnC,IAAI,GAAG,cAAc,CAAC,EAAE,EACxB,KAAK,EACL,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,aAAa,GAAG,CAAC,UAAU,CAAC;IAElC,MAAM,eAAe,GAAG,OAAO;IAC7B,cAAc;IACd,mEAAmE;IACnE,cAAc;IACd,oCAAoC,CAAC,IAAI,CAAC;IAC1C,iBAAiB;IACjB,OAAO,KAAK,iBAAiB,CAAC,OAAO,IAAI;QACvC,gBAAgB;QAChB,aAAa,IAAI,kCAAkC;QACnD,mBAAmB;KACpB,EACD,OAAO,KAAK,iBAAiB,CAAC,QAAQ;QACpC,yCAAyC,EAC3C,OAAO,KAAK,iBAAiB,CAAC,MAAM,IAAI;QACtC,4BAA4B;QAC5B,aAAa,IAAI,8CAA8C;KAChE;IACD,iBAAiB;IACjB,UAAU,IAAI,+BAA+B,EAC7C,SAAS,CACV,CAAC;IAEF,OAAO,CACL,gCACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,QAAQ,EAAE,UAAU,gBACR,SAAS,EACrB,KAAK,EAAE,KAAK,KACR,KAAK;QAET,oBAAC,IAAI,IACH,IAAI,EAAE,QAAQ,EACd,IAAI,EAAE,4BAA4B,CAAC,IAAI,CAAC,EACxC,SAAS,EAAE,OAAO,CAAC,cAAc,EAAE,SAAS,EAAE,SAAS,CAAC,KACpD,SAAS,GACb,CACK,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import {\n  ButtonIconSize,\n  ButtonIconVariant,\n} from '@metamask/design-system-shared';\nimport React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { Icon } from '../Icon';\n\nimport {\n  TWCLASSMAP_BUTTONICON_SIZE_DIMENSION,\n  MAP_BUTTONICON_SIZE_ICONSIZE,\n} from './ButtonIcon.constants';\nimport type { ButtonIconProps } from './ButtonIcon.types';\n\nexport const ButtonIcon = forwardRef<HTMLButtonElement, ButtonIconProps>(\n  (\n    {\n      className,\n      iconName,\n      iconProps,\n      ariaLabel,\n      isDisabled = false,\n      variant = ButtonIconVariant.Default,\n      size = ButtonIconSize.Md,\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    const isInteractive = !isDisabled;\n\n    const mergedClassName = twMerge(\n      // Base styles\n      'inline-flex shrink-0 items-center justify-center rounded-full p-0',\n      // Size styles\n      TWCLASSMAP_BUTTONICON_SIZE_DIMENSION[size],\n      // Variant styles\n      variant === ButtonIconVariant.Default && [\n        'bg-transparent',\n        isInteractive && 'hover:bg-hover active:bg-pressed',\n        'text-icon-default',\n      ],\n      variant === ButtonIconVariant.Floating &&\n        'bg-icon-default text-background-default',\n      variant === ButtonIconVariant.Filled && [\n        'bg-muted text-icon-default',\n        isInteractive && 'hover:bg-muted-hover active:bg-muted-pressed',\n      ],\n      // Disabled state\n      isDisabled && 'cursor-not-allowed opacity-50',\n      className,\n    );\n\n    return (\n      <button\n        ref={ref}\n        className={mergedClassName}\n        disabled={isDisabled}\n        aria-label={ariaLabel}\n        style={style}\n        {...props}\n      >\n        <Icon\n          name={iconName}\n          size={MAP_BUTTONICON_SIZE_ICONSIZE[size]}\n          className={twMerge('text-inherit', iconProps?.className)}\n          {...iconProps}\n        />\n      </button>\n    );\n  },\n);\n\nButtonIcon.displayName = 'ButtonIcon';\n"]}