{"version":3,"file":"BadgeWrapper.mjs","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/BadgeWrapper.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,oBAAoB,EACpB,+BAA+B,EAChC,uCAAuC;AAExC,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAI/C,MAAM,0BAA0B,GAAG,IAAI,CAAC;AACxC,MAAM,6BAA6B,GAAG,KAAK,CAAC;AAE5C,MAAM,iBAAiB,GAAG,CAAC,UAAkB,EAAE,MAAc,EAAE,EAAE,CAC/D,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,UAAU,MAAM,MAAM,KAAK,CAAC;AAElE,MAAM,CAAC,MAAM,YAAY,GAAG,UAAU,CACpC,CACE,EACE,QAAQ,EACR,sBAAsB,EACtB,KAAK,EACL,mBAAmB,EACnB,QAAQ,GAAG,oBAAoB,CAAC,WAAW,EAC3C,mBAAmB,GAAG,+BAA+B,CAAC,QAAQ,EAC9D,eAAe,GAAG,CAAC,EACnB,eAAe,GAAG,CAAC,EACnB,cAAc,EACd,SAAS,GAAG,EAAE,EACd,KAAK,EACL,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,KAAK,GACT,QAAQ,KAAK,oBAAoB,CAAC,QAAQ;QAC1C,QAAQ,KAAK,oBAAoB,CAAC,OAAO,CAAC;IAC5C,MAAM,MAAM,GACV,QAAQ,KAAK,oBAAoB,CAAC,OAAO;QACzC,QAAQ,KAAK,oBAAoB,CAAC,UAAU,CAAC;IAC/C,MAAM,SAAS,GACb,mBAAmB,KAAK,+BAA+B,CAAC,QAAQ;QAC9D,CAAC,CAAC,0BAA0B;QAC5B,CAAC,CAAC,6BAA6B,CAAC;IACpC,MAAM,cAAc,GAAwB,cAAc;QACxD,CAAC,CAAE,cAAgC;QACnC,CAAC,CAAC;YACE,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC;YACvD,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC;YACxD,SAAS,EAAE,aAAa,iBAAiB,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,EAAE,eAAe,CAAC,KAAK,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,EAAE,eAAe,CAAC,GAAG;SACtJ,CAAC;IAEN,MAAM,kBAAkB,GAAG,OAAO,CAChC,iCAAiC,EACjC,SAAS,CACV,CAAC;IAEF,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,kBAAkB,EAAE,KAAK,EAAE,KAAK,KAAM,KAAK;QACnE,6BAAK,SAAS,EAAC,aAAa,KAAK,sBAAsB,IACpD,QAAQ,CACL;QAEN,gCACM,mBAAmB,EACvB,SAAS,EAAE,OAAO,CAChB,kDAAkD,EAClD,mBAAmB,EAAE,SAAS,CAC/B,EACD,KAAK,EAAE;gBACL,GAAG,cAAc;gBACjB,GAAI,mBAAmB,EAAE,KAAuB;aACjD,IAEA,KAAK,CACF,CACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC","sourcesContent":["import {\n  BadgeWrapperPosition,\n  BadgeWrapperPositionAnchorShape,\n} from '@metamask/design-system-shared';\nimport type { CSSProperties } from 'react';\nimport React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\n\nimport type { BadgeWrapperProps } from './BadgeWrapper.types';\n\nconst CIRCULAR_ANCHOR_EDGE_INSET = '7%';\nconst RECTANGULAR_ANCHOR_EDGE_INSET = '11%';\n\nconst getTransformValue = (percentage: string, offset: number) =>\n  offset === 0 ? percentage : `calc(${percentage} + ${offset}px)`;\n\nexport const BadgeWrapper = forwardRef<HTMLDivElement, BadgeWrapperProps>(\n  (\n    {\n      children,\n      childrenContainerProps,\n      badge,\n      badgeContainerProps,\n      position = BadgeWrapperPosition.BottomRight,\n      positionAnchorShape = BadgeWrapperPositionAnchorShape.Circular,\n      positionXOffset = 0,\n      positionYOffset = 0,\n      customPosition,\n      className = '',\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    const isTop =\n      position === BadgeWrapperPosition.TopRight ||\n      position === BadgeWrapperPosition.TopLeft;\n    const isLeft =\n      position === BadgeWrapperPosition.TopLeft ||\n      position === BadgeWrapperPosition.BottomLeft;\n    const edgeInset =\n      positionAnchorShape === BadgeWrapperPositionAnchorShape.Circular\n        ? CIRCULAR_ANCHOR_EDGE_INSET\n        : RECTANGULAR_ANCHOR_EDGE_INSET;\n    const finalPositions: React.CSSProperties = customPosition\n      ? (customPosition as CSSProperties)\n      : {\n          ...(isTop ? { top: edgeInset } : { bottom: edgeInset }),\n          ...(isLeft ? { left: edgeInset } : { right: edgeInset }),\n          transform: `translate(${getTransformValue(isLeft ? '-50%' : '50%', positionXOffset)}, ${getTransformValue(isTop ? '-50%' : '50%', positionYOffset)})`,\n        };\n\n    const containerClassName = twMerge(\n      'relative inline-flex self-start',\n      className,\n    );\n\n    return (\n      <div ref={ref} className={containerClassName} style={style} {...props}>\n        <div className=\"inline-flex\" {...childrenContainerProps}>\n          {children}\n        </div>\n\n        <div\n          {...badgeContainerProps}\n          className={twMerge(\n            'absolute inline-flex items-center justify-center',\n            badgeContainerProps?.className,\n          )}\n          style={{\n            ...finalPositions,\n            ...(badgeContainerProps?.style as CSSProperties),\n          }}\n        >\n          {badge}\n        </div>\n      </div>\n    );\n  },\n);\n\nBadgeWrapper.displayName = 'BadgeWrapper';\n"]}