{"version":3,"file":"bitts-BittsButton-Be3qtv5W.js","sources":["../../../packages/bitts/src/BittsButton/BittsButton.vue"],"sourcesContent":["<template>\n  <a-button\n    v-bind=\"$attrs\"\n    :class=\"btnClass\"\n    :loading=\"loading\"\n    :disabled=\"disabled\"\n  >\n    <!-- This icon slot is a fallback for images and\n        should not be used when the icon is a FontAwesomeIcon -->\n    <div v-if=\"$slots.icon\" class=\"flex items-center justify-center\">\n      <slot name=\"icon\" />\n    </div>\n    <div class=\"flex items-center whitespace-nowrap\">\n      <FontAwesomeIcon\n        v-if=\"leftIcon\"\n        class=\"c-bitts-btn-icon c-bitts-btn__left-icon\"\n        :icon=\"leftIcon\"\n        :style=\"{ height: `${edgeIconSize}px`, width: `${edgeIconSize}px` }\"\n        :class=\"[loading ? 'opacity-0' : '', leftIconClasses]\"\n      />\n      <template v-if=\"text\">\n        <span class=\"c-bitts-btn__text\" :class=\"{ 'opacity-0': loading }\">\n          {{ text }}\n        </span>\n      </template>\n      <FontAwesomeIcon\n        v-else-if=\"centerIcon\"\n        class=\"c-bitts-btn-icon c-bitts-btn__center-icon\"\n        :icon=\"centerIcon\"\n        :style=\"{ height: `${centerIconSize}px`, width: `${centerIconSize}px` }\"\n        :class=\"[loading ? 'opacity-0' : '', centerIconClasses]\"\n      />\n      <slot name=\"rightIcon\">\n        <FontAwesomeIcon\n          v-if=\"rightIcon\"\n          class=\"c-bitts-btn-icon c-bitts-btn__right-icon\"\n          :icon=\"rightIcon\"\n          :style=\"{ height: `${edgeIconSize}px`, width: `${edgeIconSize}px` }\"\n          :class=\"[loading ? 'opacity-0' : '', rightIconClasses]\"\n        />\n      </slot>\n      <!-- Like the \"icon\" slot, this should not be used whenever possible,\n      so that our buttons remain consistent -->\n      <div v-if=\"$slots['extra-content']\">\n        <slot name=\"extra-content\" />\n      </div>\n    </div>\n    <div\n      v-if=\"variant === 'outline' || variant === 'ghost'\"\n      class=\"extra-background\"\n      :class=\"`extra-background--${size}`\"\n    />\n  </a-button>\n</template>\n\n<script lang=\"ts\">\nimport { StrictExclude } from '@crossbeam/types';\n\nimport { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';\nimport { Button as AButton } from 'ant-design-vue';\nimport { computed } from 'vue';\n\nimport { BittsClasses, BittsIcon, BittsSize } from '../types';\n\nexport type BittsButtonSize = StrictExclude<BittsSize, 'x-large' | 'tiny'>;\nexport type BittsButtonType =\n  | 'upsell'\n  | 'primary'\n  | 'neutral'\n  | 'danger'\n  | 'white';\nexport type BittsButtonVariant = 'fill' | 'outline' | 'ghost';\n</script>\n<script setup lang=\"ts\">\nexport type Props = {\n  text?: string;\n  type?: BittsButtonType;\n  size?: BittsButtonSize;\n  disabled?: boolean;\n  variant?: BittsButtonVariant;\n  loading?: boolean;\n  centerIcon?: BittsIcon;\n  centerIconClasses?: BittsClasses;\n  leftIcon?: BittsIcon;\n  leftIconClasses?: BittsClasses;\n  rightIcon?: BittsIcon;\n  rightIconClasses?: BittsClasses;\n  active?: boolean;\n};\nconst props = withDefaults(defineProps<Props>(), {\n  text: '',\n  type: 'primary',\n  size: 'medium',\n  disabled: false,\n  variant: 'fill',\n  loading: false,\n  active: false,\n  centerIcon: null,\n  centerIconClasses: null,\n  leftIcon: null,\n  leftIconClasses: null,\n  rightIcon: null,\n  rightIconClasses: null,\n});\n\nconst SIZE_TO_CLASS_MAP = {\n  'x-small': 'c-bitts-btn-xs',\n  small: 'c-bitts-btn-small',\n  medium: 'c-bitts-btn-medium',\n  large: 'c-bitts-btn-large',\n};\n\nconst TYPE_TO_CLASS_MAP = {\n  upsell: 'c-bitts-btn-upsell',\n  primary: 'c-bitts-btn-primary',\n  neutral: 'c-bitts-btn-neutral',\n  danger: 'c-bitts-btn-danger',\n  white: 'c-bitts-btn-white',\n};\n\nconst edgeIconSize = computed(() => {\n  if (props.type === 'upsell' && props.variant !== 'outline') return 16;\n  return ['large', 'medium', 'x-small'].includes(props.size) ? 12 : 10;\n});\nconst centerIconSize = computed(() => {\n  return ['large', 'medium'].includes(props.size) ? 16 : 12;\n});\nconst btnClass = computed(() => {\n  /* Construct size + spacing from size + centerIcon props,\n      construct colors + font from type and variant props,\n      construct focus outline on type prop */\n\n  const iconFamily = props.centerIcon ? 'c-bitts-btn-icon' : '';\n\n  const baseSize = SIZE_TO_CLASS_MAP[props.size];\n  const sizeWithIcon = props.centerIcon\n    ? `${SIZE_TO_CLASS_MAP[props.size]}--icon`\n    : '';\n\n  const baseType = TYPE_TO_CLASS_MAP[props.type];\n  const type = `${baseType}--${props.variant}`;\n\n  const outlineType = `${props.type === 'white' ? 'white' : 'blue'}-outline-on-focus`;\n\n  const active = props.active ? 'active' : '';\n  const variant = `c-bitts-btn--${props.variant}`;\n\n  return [\n    'c-bitts-btn',\n    iconFamily,\n    baseSize,\n    sizeWithIcon,\n    type,\n    baseType,\n    outlineType,\n    active,\n    variant,\n  ];\n});\n</script>\n\n<style lang=\"pcss\" scoped>\n/* Base */\n.c-bitts-btn {\n  outline: none; /* We add our own outlines */\n  @apply relative text-base flex justify-center items-center leading-6 cursor-pointer;\n  font-family: inherit;\n}\n\n.c-bitts-btn:disabled {\n  @apply opacity-50 bg-blend-multiply cursor-not-allowed;\n}\n\n.c-bitts-btn__text {\n  @apply font-bold;\n}\n/* Sizes */\n.c-bitts-btn-large {\n  @apply py-12 px-24 rounded-12 h-auto;\n}\n\n.c-bitts-btn-medium {\n  @apply py-8 px-16 rounded-8 h-auto;\n}\n\n.c-bitts-btn-small,\n.c-bitts-btn-xs {\n  @apply text-sm leading-6 h-auto;\n}\n\n.c-bitts-btn-small {\n  @apply py-4 px-12 rounded-6;\n}\n\n.c-bitts-btn-xs {\n  @apply py-0 px-8;\n  border-radius: 4px;\n}\n\n.c-bitts-btn-large,\n.c-bitts-btn-medium {\n  font-size: 16px;\n  .c-bitts-btn__text {\n    @apply mb-[-2px];\n  }\n}\n\n/* Icon Only sizes */\n.c-bitts-btn-large--icon {\n  @apply w-48 h-48 rounded-12;\n}\n\n.c-bitts-btn-medium--icon {\n  @apply w-40 h-40 rounded-8;\n}\n\n.c-bitts-btn-small--icon {\n  @apply w-32 h-32 rounded-6;\n}\n\n.c-bitts-btn-xs--icon {\n  @apply w-24 h-24 rounded-4 p-0;\n}\n\n/* L/R Icon spacing */\n.c-bitts-btn-medium .c-bitts-btn__left-icon,\n.c-bitts-btn-large .c-bitts-btn__left-icon {\n  @apply pr-8 h-full;\n}\n\n.c-bitts-btn-medium .c-bitts-btn__right-icon,\n.c-bitts-btn-large .c-bitts-btn__right-icon {\n  @apply pl-6;\n}\n\n.c-bitts-btn-small .c-bitts-btn__left-icon,\n.c-bitts-btn-xs .c-bitts-btn__left-icon {\n  @apply pr-4 h-full;\n}\n\n.c-bitts-btn-small .c-bitts-btn__right-icon,\n.c-bitts-btn-xs .c-bitts-btn__right-icon {\n  @apply pl-4 h-full;\n}\n\n/* The .extra-background is used to provide an additional radial gradient background to outline and ghost buttons */\n.c-bitts-btn-icon,\n.c-bitts-btn__text {\n  z-index: 1;\n}\n.extra-background {\n  z-index: 0;\n  @apply absolute w-full h-full opacity-0;\n  &.extra-background--large {\n    @apply rounded-12;\n  }\n  &.extra-background--medium {\n    @apply rounded-8;\n  }\n  &.extra-background--small {\n    @apply rounded-6;\n  }\n  &.extra-background--x-small {\n    @apply rounded-4;\n  }\n}\n\n/* COLORS */\n.c-bitts-btn {\n  @apply border-none shadow-none;\n}\n\n.c-bitts-btn--ghost {\n  @apply bg-transparent; /* This is overridden per button on hover, etc */\n}\n\n.c-bitts-btn--outline,\n.c-bitts-btn--ghost,\n.c-bitts-btn--fill {\n  @apply transition-none;\n  &:not(.active) {\n    /* Primary button colors */\n    &.c-bitts-btn-primary {\n      .extra-background {\n        background: radial-gradient(\n          125% 125% at 50.13% 100%,\n          theme(colors.brand-blue) 2.08%,\n          theme(colors.brand-navy) 90.11%\n        );\n      }\n      &.c-bitts-btn--fill {\n        @apply text-white;\n        background: radial-gradient(\n          125% 125% at 50.13% 100%,\n          theme(colors.brand-blue) 2.08%,\n          theme(colors.brand-navy) 80.11%\n        );\n        &:hover:not([disabled]) {\n          @apply text-white bg-white bg-blend-overlay bg-opacity-[.16];\n        }\n        &:active:not([disabled]) {\n          @apply bg-black bg-blend-overlay bg-opacity-[.32];\n        }\n      }\n\n      &.c-bitts-btn--ghost,\n      &.c-bitts-btn--outline {\n        &:hover:not([disabled]) {\n          .extra-background {\n            @apply opacity-10;\n          }\n        }\n        &:active:not([disabled]) {\n          .extra-background {\n            @apply opacity-20;\n          }\n        }\n        &:focus-visible:not([disabled]):not(:active) {\n          .extra-background {\n            @apply opacity-10 border-2 border-transparent;\n            box-shadow: theme(colors.white) inset 0px 0px 0px 2px;\n          }\n        }\n        .c-bitts-btn-icon {\n          @apply text-primary-accent;\n          &:hover {\n            @apply text-primary-accent;\n          }\n        }\n        &:disabled {\n          @apply bg-transparent;\n        }\n        .c-bitts-btn__text {\n          background: radial-gradient(\n            125% 125% at 50.13% 100%,\n            theme(colors.brand-blue) 2.08%,\n            theme(colors.brand-navy) 80.11%\n          );\n          -webkit-text-fill-color: transparent;\n          -webkit-background-clip: text;\n        }\n      }\n    }\n\n    /* Neutral button colors */\n    &.c-bitts-btn-neutral {\n      @apply text-neutral-text-button;\n      .extra-background {\n        background: radial-gradient(\n          125% 125% at 50.13% 100%,\n          theme(colors.neutral.background-weak) 2.08%,\n          theme(colors.neutral.background-disabled) 90.11%\n        );\n      }\n      &.c-bitts-btn--fill {\n        background: radial-gradient(\n          125% 125% at 50.13% 100%,\n          theme(colors.neutral.background-weak) 2.08%,\n          theme(colors.neutral.background-disabled) 80.11%\n        );\n        &:hover:not([disabled]) {\n          @apply bg-white bg-blend-overlay bg-opacity-[.32];\n        }\n        &:active:not([disabled]) {\n          @apply bg-black bg-blend-overlay bg-opacity-[.08];\n        }\n      }\n\n      &.c-bitts-btn--outline {\n        .extra-background {\n          @apply border border-neutral-accent;\n        }\n      }\n\n      &.c-bitts-btn--ghost,\n      &.c-bitts-btn--outline {\n        &:focus-visible:not([disabled]):not(:active),\n        &:hover:not([disabled]):not(:active) {\n          .extra-background {\n            @apply opacity-30;\n          }\n        }\n\n        &:active:not([disabled]) {\n          .extra-background {\n            @apply opacity-60;\n          }\n        }\n\n        &:focus-visible:not([disabled]):not(:active) {\n          .extra-background {\n            @apply opacity-30;\n            box-shadow: theme(colors.white) inset 0px 0px 0px 2px;\n          }\n        }\n      }\n\n      .c-bitts-btn-icon {\n        @apply text-neutral-text-button;\n        &:hover {\n          @apply text-neutral-text-button;\n        }\n      }\n    }\n\n    /* Danger button colors */\n    &.c-bitts-btn-danger {\n      .extra-background {\n        background: radial-gradient(\n          125% 125% at 50.13% 100%,\n          theme(colors.danger.background-medium) 2.08%,\n          theme(colors.danger.text) 90.11%\n        );\n      }\n      &.c-bitts-btn--fill {\n        @apply text-white;\n        background: radial-gradient(\n          125% 125% at 50.13% 100%,\n          theme(colors.danger.background-medium) 2.08%,\n          theme(colors.danger.text) 80.11%\n        );\n        &:hover:not([disabled]) {\n          @apply text-white bg-white bg-blend-overlay bg-opacity-[.08];\n        }\n        &:active:not([disabled]) {\n          @apply bg-black bg-blend-overlay bg-opacity-[.16];\n        }\n      }\n\n      &.c-bitts-btn--ghost,\n      &.c-bitts-btn--outline {\n        &:disabled {\n          @apply bg-transparent;\n        }\n        .c-bitts-btn__text {\n          background: radial-gradient(\n            125% 125% at 50.13% 100%,\n            theme(colors.danger.background-medium) 2.08%,\n            theme(colors.danger.text) 80.11%\n          );\n          -webkit-text-fill-color: transparent;\n          -webkit-background-clip: text;\n        }\n        .extra-background {\n          @apply border border-neutral-accent;\n        }\n\n        &:hover:not([disabled]):not(:active) {\n          .extra-background {\n            @apply opacity-10;\n          }\n        }\n\n        &:active:not([disabled]) {\n          .extra-background {\n            @apply opacity-20;\n          }\n        }\n\n        &:focus-visible:not([disabled]):not(:active) {\n          .extra-background {\n            @apply opacity-10 border-2 border-transparent;\n            box-shadow: theme(colors.white) inset 0px 0px 0px 2px;\n          }\n        }\n        .c-bitts-btn-icon {\n          @apply text-danger-text-button;\n          &:hover {\n            @apply text-danger-text-button;\n          }\n        }\n      }\n    }\n\n    /* White button colors */\n    &.c-bitts-btn-white {\n      @apply text-white;\n      &.c-bitts-btn--fill {\n        background: radial-gradient(\n          125% 125% at 50.13% 100%,\n          theme(colors.white / 0.125) 2.08%,\n          theme(colors.white / 0.376) 80.11%\n        );\n        &:hover:not([disabled]) {\n          @apply text-white bg-white bg-blend-overlay bg-opacity-[.08];\n        }\n        &:focus-visible:not([disabled]):not(:active) {\n          @apply bg-white bg-blend-overlay bg-opacity-[.16];\n        }\n        &:active:not([disabled]) {\n          @apply bg-black bg-blend-overlay bg-opacity-[.16];\n        }\n      }\n\n      &.c-bitts-btn--ghost,\n      &.c-bitts-btn--outline {\n        background: none;\n        &:hover:not([disabled]) {\n          background: radial-gradient(\n            125% 125% at 50.13% 100%,\n            theme(colors.white / 0.125) 2.08%,\n            theme(colors.white / 0.376) 80.11%\n          );\n        }\n        &:focus-visible:not([disabled]):not(:active) {\n          @apply bg-white bg-blend-overlay bg-opacity-[.32];\n        }\n        &:active:not([disabled]) {\n          @apply bg-black bg-blend-overlay bg-opacity-[.16];\n        }\n      }\n\n      &.c-bitts-btn-white--outline:not(:focus-visible) {\n        box-shadow: white inset 0px 0px 0px 1px;\n      }\n    }\n  }\n}\n\n/* We cannot use a border in this case, because it would\n* cause layout shift and the outline/ghost buttons would\n* be a different size with the same content. Instead we\n* are using an interior box shadow and changing it's color\n* and properties on hover/pressed states.\n*/\n.c-bitts-btn-primary--outline:not(:focus-visible):not(.active),\n.c-bitts-btn-danger--outline:not(:focus-visible):not(.active),\n.c-bitts-btn-neutral--outline:not(:focus-visible):not(.active) {\n  @apply border-none text-neutral-text-button;\n  box-shadow: theme(colors.neutral.accent) inset 0px 0px 0px 1px;\n}\n\n/* The active prop causes the button to be styled/colored styled differently regardless of \"type,\"\ne.g. danger, neutral, and so forth are overridden here */\n.active {\n  &.c-bitts-btn--outline,\n  &.c-bitts-btn--fill {\n    @apply bg-secondary-background-weak text-secondary-text !important;\n  }\n\n  &.c-bitts-btn--outline {\n    @apply bg-secondary-background-weak text-secondary-text outline outline-1 outline-neutral-accent !important;\n  }\n\n  &.c-bitts-btn--ghost {\n    @apply text-secondary-text !important;\n  }\n  &.extra-background {\n    @apply hidden;\n  }\n}\n\n/* This is the only color that does not respect different\nvariants (it's always the same) */\n.c-bitts-btn-upsell--ghost,\n.c-bitts-btn-upsell:not(.c-bitts-btn-upsell--outline) {\n  @apply text-white border-none;\n  background: radial-gradient(\n    125% 125% at 50.13% 100%,\n    theme(colors.upsell.background-medium) 2.08%,\n    theme(colors.violet.700) 90.11%\n  );\n  &:not([disabled]):focus-visible,\n  &:not([disabled]):hover {\n    @apply bg-white bg-blend-overlay bg-opacity-[.10] text-white;\n  }\n  &:not([disabled]):active {\n    @apply bg-black bg-blend-overlay bg-opacity-[.30];\n  }\n}\n\n.c-bitts-btn-upsell--outline,\n.c-bitts-btn-upsell--outline:not([disabled]):hover {\n  @apply text-secondary-text bg-secondary-background-weak;\n}\n\n/* Focused states */\n.c-bitts-btn-xs:focus-visible,\n.c-bitts-btn-small:focus-visible,\n.c-bitts-btn-medium:focus-visible,\n.c-bitts-btn-large:focus-visible {\n  @apply outline-none;\n}\n\n.c-bitts-btn-large.blue-outline-on-focus:not([disabled]):focus-visible,\n.c-bitts-btn-medium.blue-outline-on-focus:not([disabled]):focus-visible {\n  box-shadow:\n    inset 0px 0px 0px 2px theme('colors.neutral.border-focus'),\n    inset 0px 0px 0px 4px white;\n}\n\n.c-bitts-btn-small.blue-outline-on-focus:not([disabled]):focus-visible,\n.c-bitts-btn-xs.blue-outline-on-focus:not([disabled]):focus-visible {\n  box-shadow:\n    inset 0px 0px 0px 2px theme('colors.neutral.border-focus'),\n    inset 0px 0px 0px 3px white;\n}\n\n.c-bitts-btn-large.white-outline-on-focus:not([disabled]):focus-visible,\n.c-bitts-btn-medium.white-outline-on-focus:not([disabled]):focus-visible {\n  box-shadow:\n    inset 0px 0px 0px 2px white,\n    inset 0px 0px 0px 4px white;\n}\n\n.c-bitts-btn-small.white-outline-on-focus:not([disabled]):focus-visible,\n.c-bitts-btn-xs.white-outline-on-focus:not([disabled]):focus-visible {\n  box-shadow:\n    inset 0px 0px 0px 2px white,\n    inset 0px 0px 0px 3px white;\n}\n</style>\n<style lang=\"pcss\">\n/* Loading */\n.c-bitts-btn.ant-btn .ant-btn-loading-icon {\n  transition: none !important;\n}\n\n.c-bitts-btn .anticon-loading {\n  position: absolute;\n  @apply text-white;\n}\n\n.c-bitts-btn-large {\n  .anticon-loading {\n    top: 16px;\n    left: calc(50% - 10px);\n  }\n}\n\n.c-bitts-btn-medium {\n  .anticon-loading {\n    top: 12px;\n    left: calc(50% - 10px);\n  }\n}\n\n.c-bitts-btn-small {\n  .anticon-loading {\n    top: 10px;\n    left: calc(50% - 6px);\n  }\n}\n\n.c-bitts-btn-xs {\n  .anticon-loading {\n    top: 6px;\n    left: calc(50% - 4px);\n  }\n}\n\n.c-bitts-btn-neutral .anticon-loading,\n.c-bitts-btn-neutral--outline .anticon-loading,\n.c-bitts-btn-neutral--ghost .anticon-loading {\n  @apply text-neutral-text-button;\n}\n\n.c-bitts-btn-danger--outline .anticon-loading,\n.c-bitts-btn-danger--ghost .anticon-loading {\n  @apply text-danger-text-button;\n}\n\n.c-bitts-btn-primary--outline .anticon-loading,\n.c-bitts-btn-primary--ghost .anticon-loading {\n  @apply text-primary-text-button;\n}\n\n@-webkit-keyframes loadingCircle {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n@keyframes loadingCircle {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.c-bitts-btn .anticon-spin::before {\n  display: inline-block;\n  -webkit-animation: loadingCircle 1s infinite linear;\n  animation: loadingCircle 1s infinite linear;\n}\n.c-bitts-btn .anticon-spin {\n  display: inline-block;\n  -webkit-animation: loadingCircle 1s infinite linear;\n  animation: loadingCircle 1s infinite linear;\n}\n\n.ant-btn {\n  font-family: 'Inter', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',\n    'Droid Sans', 'Helvetica Neue', sans-serif !important;\n}\n</style>\n"],"names":["props","__props","SIZE_TO_CLASS_MAP","TYPE_TO_CLASS_MAP","edgeIconSize","computed","centerIconSize","btnClass","iconFamily","baseSize","sizeWithIcon","baseType","type","outlineType","active","variant"],"mappings":"2sBAyFA,MAAMA,EAAQC,EAgBRC,EAAoB,CACxB,UAAW,iBACX,MAAO,oBACP,OAAQ,qBACR,MAAO,mBAAA,EAGHC,EAAoB,CACxB,OAAQ,qBACR,QAAS,sBACT,QAAS,sBACT,OAAQ,qBACR,MAAO,mBAAA,EAGHC,EAAeC,EAAS,IACxBL,EAAM,OAAS,UAAYA,EAAM,UAAY,UAAkB,GAC5D,CAAC,QAAS,SAAU,SAAS,EAAE,SAASA,EAAM,IAAI,EAAI,GAAK,EACnE,EACKM,EAAiBD,EAAS,IACvB,CAAC,QAAS,QAAQ,EAAE,SAASL,EAAM,IAAI,EAAI,GAAK,EACxD,EACKO,EAAWF,EAAS,IAAM,CAKxB,MAAAG,EAAaR,EAAM,WAAa,mBAAqB,GAErDS,EAAWP,EAAkBF,EAAM,IAAI,EACvCU,EAAeV,EAAM,WACvB,GAAGE,EAAkBF,EAAM,IAAI,CAAC,SAChC,GAEEW,EAAWR,EAAkBH,EAAM,IAAI,EACvCY,EAAO,GAAGD,CAAQ,KAAKX,EAAM,OAAO,GAEpCa,EAAc,GAAGb,EAAM,OAAS,QAAU,QAAU,MAAM,oBAE1Dc,EAASd,EAAM,OAAS,SAAW,GACnCe,EAAU,gBAAgBf,EAAM,OAAO,GAEtC,MAAA,CACL,cACAQ,EACAC,EACAC,EACAE,EACAD,EACAE,EACAC,EACAC,CAAA,CACF,CACD"}