@metamask/design-system-react/dist/components/Button/variants/ButtonTertiary/ButtonTertiary.cjs.map

Design system react ui components

{"version":3,"file":"ButtonTertiary.cjs","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,6DAAqD;AACrD,8DAAiD;AAIpC,QAAA,cAAc,GAAG,IAAA,kBAAU,EAItC,CACE,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACnE,GAAG,EACH,EAAE;IACF,MAAM,aAAa,GAAG,CAAC,CAAC,UAAU,IAAI,SAAS,CAAC,CAAC;IAEjD,MAAM,eAAe,GAAG,IAAA,kBAAO;IAC7B,0BAA0B;IAC1B,CAAC,QAAQ;QACP,CAAC,SAAS,IAAI;QACZ,qCAAqC;QACrC,mCAAmC;QACnC,SAAS,IAAI,YAAY;KAC1B;IACH,gBAAgB;IAChB,QAAQ;QACN,CAAC,SAAS,IAAI;QACZ,mCAAmC;QACnC,+CAA+C;QAC/C,SAAS,IAAI,mDAAmD;KACjE;IACH,iBAAiB;IACjB,SAAS;QACP,CAAC,QAAQ,IAAI;QACX,qCAAqC;QACrC,mCAAmC;QACnC,SAAS,IAAI,YAAY;KAC1B;IACH,wBAAwB;IACxB,SAAS;QACP,QAAQ,IAAI;QACV,+BAA+B;QAC/B,mCAAmC;QACnC,SAAS,IAAI,oBAAoB;KAClC;IACH,sDAAsD;IACtD,aAAa,IAAI;QACf,gBAAgB;QAChB,mBAAmB;QACnB,SAAS;YACP,QAAQ,IAAI,CAAC,wBAAwB,EAAE,2BAA2B,CAAC;QACrE,QAAQ;YACN,CAAC,SAAS,IAAI;YACZ,4BAA4B;YAC5B,+BAA+B;SAChC;KACJ,EACD,iDAAiD,EACjD,SAAS;QACP,CAAC,CAAC,uHAAuH;QACzH,CAAC,CAAC,oHAAoH;IACxH,iBAAiB;IACjB,SAAS,IAAI,oBAAoB;IACjC,oCAAoC;IACpC,UAAU,IAAI,CAAC,SAAS,IAAI,CAAC,YAAY,EAAE,oBAAoB,CAAC,EAChE,SAAS,CACV,CAAC;IAEF,OAAO,CACL,8BAAC,uBAAU,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,KAChB,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,sBAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../../../utils/tw-merge';\nimport { ButtonBase } from '../../../ButtonBase';\n\nimport type { ButtonTertiaryProps } from './ButtonTertiary.types';\n\nexport const ButtonTertiary = forwardRef<\n  HTMLButtonElement,\n  ButtonTertiaryProps\n>(\n  (\n    { className, isDanger, isInverse, isDisabled, isLoading, ...props },\n    ref,\n  ) => {\n    const isInteractive = !(isDisabled ?? isLoading);\n\n    const mergedClassName = twMerge(\n      // Default tertiary styles\n      !isDanger &&\n        !isInverse && [\n          'bg-transparent text-primary-default',\n          // Loading state uses pressed color\n          isLoading && 'bg-pressed',\n        ],\n      // Danger styles\n      isDanger &&\n        !isInverse && [\n          'bg-transparent text-error-default',\n          // Loading state uses error muted pressed color\n          isLoading && 'bg-error-muted-pressed text-error-default-pressed',\n        ],\n      // Inverse styles\n      isInverse &&\n        !isDanger && [\n          'bg-transparent text-primary-inverse',\n          // Loading state uses pressed color\n          isLoading && 'bg-pressed',\n        ],\n      // Inverse danger styles\n      isInverse &&\n        isDanger && [\n          'bg-default text-error-default',\n          // Loading state uses pressed color\n          isLoading && 'bg-default-pressed',\n        ],\n      // Hover/Active states - only applied when interactive\n      isInteractive && [\n        'hover:bg-hover',\n        'active:bg-pressed',\n        isInverse &&\n          isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],\n        isDanger &&\n          !isInverse && [\n            'hover:bg-error-muted-hover',\n            'active:bg-error-muted-pressed',\n          ],\n      ],\n      'focus-visible:outline-none focus-visible:ring-0',\n      isInverse\n        ? 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-background-default'\n        : 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default',\n      // Loading styles\n      isLoading && 'cursor-not-allowed',\n      // Disabled styles (but not loading)\n      isDisabled && !isLoading && ['opacity-50', 'cursor-not-allowed'],\n      className,\n    );\n\n    return (\n      <ButtonBase\n        ref={ref}\n        className={mergedClassName}\n        isDisabled={isDisabled}\n        isLoading={isLoading}\n        {...props}\n      />\n    );\n  },\n);\n\nButtonTertiary.displayName = 'ButtonTertiary';\n"]}