{"version":3,"file":"Button.b3AVH8Th.js","sources":["../../../../../../src/lib/components/atoms/Button/Button.svelte"],"sourcesContent":["<script lang=\"ts\">\n  import classnames from \"classnames\";\n  import { omit } from \"$lib/utils/object\";\n\n  // Components\n  import { Icon } from '$lib/components/atoms/Icon';\n  // Assets\n  import spinner from \"$lib/assets/animated/spinner.svg\";\n\n  // Default Props\n  export let variant: \"fill\" | \"outline\" | \"icon\" = \"fill\";\n  export let color: \"pink\" | \"grey\" | \"white\" = \"pink\";\n\n  export let fullWidth = false;\n  export let disabled = false;\n  export let compact = false;\n  export let isLoading = false;\n  export let noMinWidth = false;\n  export let minWidthSmall = false;\n  export let icon: string | null = null;\n  export let href: string | null = null;\n\n  const classNames = classnames($$props.class, {\n    button: true,\n    \"v-fill\": variant === \"fill\",\n    \"v-outline\": variant === \"outline\",\n    \"v-icon\": variant === \"icon\",\n    \"v-compact\": compact,\n    \"v-no-min-width\": noMinWidth,\n    \"v-min-width-small\": minWidthSmall,\n    \"c-pink\": color === \"pink\",\n    \"c-grey\": color === \"grey\",\n    \"c-white\": color === \"white\",\n    \"s-disabled\": disabled,\n    \"full-width\": fullWidth,\n  });\n  const attributes = omit($$restProps, \"class\");\n</script>\n\n{#if href}\n  <a {href} class={classNames} {...attributes}>\n    {#if isLoading}\n      <img src={spinner} width=\"20\" height=\"20\" />\n    {:else}\n      {#if icon}\n        <span class=\"btn-icon\">\n          <Icon icon={icon} />\n        </span>\n      {/if}\n      {#if $$slots[\"default\"]}\n        <span class=\"btn-text\">\n          <slot />\n        </span>\n      {/if}\n    {/if}\n  </a>\n{:else}\n  <button class={classNames} {...attributes} {disabled} on:click>\n    {#if isLoading}\n      <img src={spinner} width=\"20\" height=\"20\" />\n    {:else}\n      {#if icon}\n        <span class=\"btn-icon\">\n          <Icon icon={icon} />\n        </span>\n      {/if}\n      {#if $$slots[\"default\"]}\n        <span class=\"btn-text\">\n          <slot />\n        </span>\n      {/if}\n    {/if}\n  </button>\n{/if}\n\n<style type=\"text/scss\" lang=\"scss\" scoped>\n  .button {\n    --button-min-width: 150px;\n\n    @apply appearance-none;\n    @apply inline-flex justify-center flex-shrink-0 items-center max-w-full;\n    @apply bg-transparent;\n    @apply uppercase font-semibold;\n    @apply text-sm md:text-base text-center no-underline tracking-wide;\n    @apply rounded border border-transparent border-solid;\n    @apply px-7;\n    @apply h-button;\n    @apply cursor-pointer select-none;\n    @apply transition-colors ease-in-out duration-300;\n\n    &:not(.v-icon):not(.v-no-min-width) {\n      min-width: var(--button-min-width);\n    }\n\n    &.v-min-width-small {\n      --button-min-width: 100px;\n    }\n\n    /* Disabled */\n    @apply disabled:cursor-default;\n\n    /* Full width */\n    &.full-width {\n      @apply w-full;\n    }\n  }\n\n  .btn-text {\n    @apply truncate;\n  }\n\n  /* Icon variant */\n  .btn-icon {\n    @apply inline-flex;\n  }\n  .btn-icon + .btn-text {\n    @apply ml-2;\n  }\n\n  /* Variants */\n  .v-fill {\n    &.c-pink {\n      @apply bg-brand border-brand text-gray-900;\n\n      /* Hover */\n      @apply transition-colors hover:bg-brand-dark hover:border-brand-dark;\n      /* Focus */\n      @apply focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-brand focus:ring-opacity-30;\n      /* Disabled */\n      @apply disabled:bg-opacity-30 disabled:bg-brand disabled:transition-none disabled:transform-none disabled:border-transparent disabled:text-opacity-30;\n    }\n    &.c-grey {\n      @apply bg-gray-900 border-gray-900 text-white;\n      /* Hover */\n      @apply hover:bg-black hover:border-black hover:text-white;\n      /* Focus */\n      @apply focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-black;\n      /* Disabled */\n      @apply disabled:bg-gray-100 disabled:border-gray-100 disabled:text-gray-700;\n    }\n\n    &.c-white {\n      @apply bg-white border-white text-gray-900;\n      /* Hover */\n      @apply transition-colors hover:bg-opacity-80 hover:border-opacity-80;\n      /* Focus */\n      @apply focus:outline-none focus:ring-4 focus:ring-white focus:ring-opacity-30;\n      /* Disabled */\n      @apply disabled:bg-opacity-30 disabled:transition-none disabled:transform-none disabled:border-transparent;\n    }\n  }\n\n  .v-outline {\n    @apply bg-transparent;\n\n    &.c-pink {\n      @apply border-brand text-gray-900;\n      /* Hover */\n      @apply hover:bg-brand hover:bg-opacity-20;\n      /* Focus */\n      @apply focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-petrol;\n      /* Disabled */\n      @apply disabled:bg-transparent disabled:border-brand disabled:border-opacity-30 disabled:text-gray-300;\n    }\n    &.c-grey {\n      @apply border-gray-700 text-gray-900;\n      /* Hover */\n      @apply hover:bg-gray-900 hover:bg-opacity-10;\n      /* Focus */\n      @apply focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-black;\n      /* Disabled */\n      @apply disabled:bg-transparent disabled:border-gray-300 disabled:text-gray-300;\n    }\n\n    &.c-white {\n      @apply bg-transparent border-white text-white;\n      /* Hover */\n      @apply hover:bg-white hover:bg-opacity-20;\n      /* Focus */\n      @apply focus:outline-none focus:ring-4 focus:ring-white focus:ring-opacity-30;\n      /* Disabled */\n      @apply disabled:bg-transparent disabled:border-opacity-50 disabled:text-white disabled:text-opacity-50;\n    }\n  }\n\n  .v-compact {\n    @apply text-sm;\n    @apply py-2.5;\n    @apply h-10;\n  }\n\n  .v-icon {\n    @apply bg-transparent;\n    @apply p-2 h-auto;\n    @apply transition-opacity;\n    @apply hover:opacity-60;\n    @apply disabled:opacity-40 disabled:cursor-not-allowed;\n\n    &.c-pink {\n      @apply text-brand;\n    }\n    &.c-grey {\n      @apply text-gray-900;\n    }\n    &.c-white {\n      @apply text-white;\n    }\n  }\n</style>\n"],"names":["ctx","insert_hydration","target","button","anchor","a","create_if_block_6","if_block1","create_if_block_5","spinner","attr","img","img_src_value","span","create_if_block_3","create_if_block_2","variant","$$props","color","fullWidth","disabled","compact","isLoading","noMinWidth","minWidthSmall","icon","href","classNames","classnames","attributes","omit","$$restProps"],"mappings":"8iBA0DSA,EAAS,CAAA,EAAA,wCADDA,EAAU,CAAA,CAAA,EAAMA,EAAU,CAAA,8NAAzCC,EAeQC,EAAAC,EAAAC,CAAA,0OAfOJ,EAAU,CAAA,CAAA,EAAMA,EAAU,CAAA,uMAhBlCA,EAAS,CAAA,EAAA,oDADCA,EAAU,CAAA,CAAA,EAAMA,EAAU,CAAA,4MAA3CC,EAeGC,EAAAG,EAAAD,CAAA,0MAfcJ,EAAU,CAAA,CAAA,EAAMA,EAAU,CAAA,uHAqBlCA,EAAI,CAAA,GAAAM,EAAAN,CAAA,EAKJO,EAAAP,KAAQ,SAASQ,EAAAR,CAAA,iJALjBA,EAAI,CAAA,wGAKJA,KAAQ,sUAPHS,CAAO,GAAAC,EAAAC,EAAA,MAAAC,CAAA,+CAAjBX,EAA2CC,EAAAS,EAAAP,CAAA,kFAI3BJ,EAAI,CAAA,CAAA,EAAA,oLADlBC,EAEMC,EAAAW,EAAAT,CAAA,mDADQJ,EAAI,CAAA,0UAIlBC,EAEMC,EAAAW,EAAAT,CAAA,mMAzBHJ,EAAI,CAAA,GAAAc,EAAAd,CAAA,EAKJO,EAAAP,KAAQ,SAASe,EAAAf,CAAA,iJALjBA,EAAI,CAAA,wGAKJA,KAAQ,sUAPHS,CAAO,GAAAC,EAAAC,EAAA,MAAAC,CAAA,+CAAjBX,EAA2CC,EAAAS,EAAAP,CAAA,kFAI3BJ,EAAI,CAAA,CAAA,EAAA,oLADlBC,EAEMC,EAAAW,EAAAT,CAAA,mDADQJ,EAAI,CAAA,0UAIlBC,EAEMC,EAAAW,EAAAT,CAAA,+OAbTJ,EAAI,CAAA,EAAA,4fA7BI,QAAAgB,EAAuC,MAAA,EAAAC,GACvC,MAAAC,EAAmC,MAAA,EAAAD,GAEnC,UAAAE,EAAY,EAAA,EAAAF,GACZ,SAAAG,EAAW,EAAA,EAAAH,GACX,QAAAI,EAAU,EAAA,EAAAJ,GACV,UAAAK,EAAY,EAAA,EAAAL,GACZ,WAAAM,EAAa,EAAA,EAAAN,GACb,cAAAO,EAAgB,EAAA,EAAAP,GAChB,KAAAQ,EAAsB,IAAA,EAAAR,GACtB,KAAAS,EAAsB,IAAA,EAAAT,EAE3B,MAAAU,GAAaC,GAAWX,EAAQ,MAAA,CACpC,OAAQ,GACR,SAAUD,IAAY,OACtB,YAAaA,IAAY,UACzB,SAAUA,IAAY,OACtB,YAAaK,EACb,iBAAkBE,EAClB,oBAAqBC,EACrB,SAAUN,IAAU,OACpB,SAAUA,IAAU,OACpB,UAAWA,IAAU,QACrB,aAAcE,EACd,aAAcD,IAEVU,GAAaC,GAAKC,EAAa,OAAO"}