{"version":3,"file":"HeroStandard.BTEvGfsN.js","sources":["../../../../../../src/lib/components/organisms/Hero/HeroStandard.svelte"],"sourcesContent":["<script lang=\"ts\">\n  import classnames from 'classnames';\n\n  export let variant: 'light' | 'dark' = 'dark';\n  export let taller = false;\n  export let darkOverlay = false;\n  export let elementOffset = false;\n  export let longContent = false;\n\n  interface Data {\n    image: string;\n    srcset: string;\n    sizes?: string;\n    imageAlt: string;\n    subtitle: string;\n    title: string;\n    text?: string;\n  }\n\n  const classNames = classnames($$props.class, {\n    'hero-standard': true,\n    'v-light': variant === 'light',\n    'v-dark': variant === 'dark',\n    'with-dark-overlay': darkOverlay,\n    'element-offset': elementOffset,\n    'long-content': longContent,\n    taller: taller,\n  });\n\n  export let data: Data = {\n    image: '/placeholders/mobile/hero-checkout-final-step.webp',\n    srcset: '/placeholders/desktop/hero-checkout-final-step.webp 1x, /placeholders/high/hero-checkout-final-step.webp 2x',\n    sizes: '',\n    imageAlt: 'Alternate Image Text',\n    subtitle: 'Subtitle',\n    title: \"Here's the title of the hero\",\n    text: \"\"\n  };\n</script>\n\n<section class={classNames}>\n  <div class=\"hero-grid\">\n    <div class=\"hero-image-wrapper\">\n      <!-- Image Specs -->\n      <!-- Max width: 1440px -->\n      <!-- Ratio: 2:1 (Mobile) Free (Desktop) -->\n      {#if data.srcset && data.sizes }\n        <img\n          src={data.image}\n          srcset={data.srcset}\n          sizes={data.sizes}\n          alt={data.imageAlt}\n          class=\"hero-image\"\n        />\n      {:else}\n        <img\n          src={data.image}\n          alt={data.imageAlt}\n          class=\"hero-image\"\n        />\n      {/if}\n    </div>\n    <div class=\"hero-content\">\n      <p class=\"hero-standard-subtitle\">\n        {data.subtitle}\n      </p>\n      <h1 class=\"hero-standard-title\">\n        {data.title}\n      </h1>\n\n      {#if data.text} \n        <p class=\"hero-standard-text\">\n          {data.text}\n        </p>\n      {/if}\n\n      {#if $$slots['action']}\n        <div class=\"hero-action\">\n          <slot name=\"action\" />\n        </div>\n      {/if}\n    </div>\n  </div>\n</section>\n\n<style type=\"text/scss\" lang=\"scss\" scoped>\n  .hero-standard {\n    --hero-height: 400px;\n    @apply bg-transparent;\n    @apply relative;\n\n    &.v-dark {\n      .hero-standard-subtitle {\n        @apply md:text-white md:text-opacity-70;\n      }\n      .hero-standard-title {\n        @apply md:text-white;\n      }\n\n      .hero-standard-text {\n        @apply md:text-white;\n      }\n    }\n\n    &.taller {\n      --hero-height: 600px;\n    }\n  }\n\n  .hero-grid {\n    @apply grid grid-cols-default;\n    @apply gap-x-grid-default;\n    @apply w-full;\n    @apply md:page-margin md:page-max-width;\n    @apply z-3;\n\n    @screen md {\n      height: var(--hero-height);\n    }\n\n    .element-offset & {\n      padding-bottom: var(--hero-element-grid-offset);\n    }\n  }\n\n  .hero-standard-subtitle {\n    @apply uppercase tracking-wider font-semibold;\n    @apply text-sm md:text-base;\n    @apply text-gray-600;\n  }\n\n  .hero-standard-title {\n    @apply text-2xl md:text-6xl leading-snug md:leading-tighter;\n    @apply font-medium font-serif;\n    @apply text-gray-900;\n  }\n  \n\n  .hero-standard-subtitle + .hero-standard-title {\n    @apply mt-3;\n  }\n\n  .hero-standard-title + .hero-action {\n    @apply mt-5;\n  }\n\n  .hero-content {\n    @apply relative;\n    @apply col-span-full;\n    @apply page-margin py-6 md:p-0;\n    @apply md:row-start-1 md:col-start-1 md:col-span-7 lg:col-start-1 lg:col-span-5;\n    @apply md:self-center;\n\n    .long-content & {\n      @apply md:row-start-1 md:col-start-1 md:col-span-7 lg:col-start-1 lg:col-span-6;\n    }\n  }\n\n  .hero-image-wrapper {\n    @apply md:-page-margin;\n    @apply relative;\n    @apply col-span-full;\n    @apply md:row-start-1;\n\n    /** Fix aspect ratio plugin */\n    --tw-aspect-w: 2;\n    --tw-aspect-h: 1;\n    padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);\n\n    > * {\n      @apply absolute w-full h-full;\n      @apply inset-0;\n    }\n\n    @screen md {\n      /* Remove aspect ratio */\n      padding-bottom: 0;\n    }\n\n    /* Bottom gradient in the mobile version */\n    &:before {\n      content: '';\n      @apply md:hidden;\n      @apply bg-gradient-to-t from-black to-transparent opacity-10;\n      @apply absolute inset-x-0 bottom-0;\n      @apply h-[60px];\n      @apply z-1;\n    }\n\n    /*  Dark Overlay for the brighter images */\n    .v-dark.with-dark-overlay &::after {\n      content: '';\n      @apply hidden md:block;\n      @apply absolute inset-0;\n      @apply bg-gray-600 opacity-90;\n      @apply lg:bg-gradient-to-r lg:from-gray-600 lg:to-gray-300 lg:opacity-100;\n      @apply mix-blend-multiply;\n    }\n  }\n\n  .hero-image {\n    @apply object-cover object-center;\n    @screen md {\n      width: 100%;\n      height: var(--hero-height);\n    }\n  }\n</style>\n"],"names":["src_url_equal","img","img_src_value","ctx","attr","img_alt_value","insert_hydration","target","anchor","dirty","srcset_url_equal","img_srcset_value","img_sizes_value","t_value","p","set_data","t","div","t1_value","t3_value","create_if_block_2","if_block1","create_if_block_1","if_block2","create_if_block","section","append_hydration","div2","div0","div1","h1","current","t1","t3","variant","$$props","taller","darkOverlay","elementOffset","longContent","classNames","classnames","data"],"mappings":"qjBAwDeA,EAAAC,EAAA,IAAAC,EAAAC,KAAK,KAAK,GAAAC,EAAAH,EAAA,MAAAC,CAAA,EACVE,EAAAH,EAAA,MAAAI,EAAAF,KAAK,QAAQ,kDAFpBG,EAICC,EAAAN,EAAAO,CAAA,UAHMC,EAAA,GAAA,CAAAT,EAAAC,EAAA,IAAAC,EAAAC,KAAK,KAAK,gBACVM,EAAA,GAAAJ,KAAAA,EAAAF,KAAK,iLATLH,EAAAC,EAAA,IAAAC,EAAAC,KAAK,KAAK,GAAAC,EAAAH,EAAA,MAAAC,CAAA,EACPQ,GAAAT,EAAAU,EAAAR,KAAK,MAAM,GAAAC,EAAAH,EAAA,SAAAU,CAAA,EACZP,EAAAH,EAAA,QAAAW,EAAAT,KAAK,KAAK,EACZC,EAAAH,EAAA,MAAAI,EAAAF,KAAK,QAAQ,kDAJpBG,EAMCC,EAAAN,EAAAO,CAAA,UALMC,EAAA,GAAA,CAAAT,EAAAC,EAAA,IAAAC,EAAAC,KAAK,KAAK,gBACPM,EAAA,GAAAE,KAAAA,EAAAR,KAAK,yBACNM,EAAA,GAAAG,KAAAA,EAAAT,KAAK,uBACPM,EAAA,GAAAJ,KAAAA,EAAAF,KAAK,4DAqBTU,EAAAV,KAAK,KAAI,4KADZG,EAEGC,EAAAO,EAAAN,CAAA,iBADAC,EAAA,GAAAI,KAAAA,EAAAV,KAAK,KAAI,KAAAY,EAAAC,EAAAH,CAAA,mPAKZP,EAEKC,EAAAU,EAAAT,CAAA,+LAfJU,EAAAf,KAAK,SAAQ,SAGbgB,EAAAhB,KAAK,MAAK,2BArBR,OAAAA,EAAK,CAAA,EAAA,QAAUA,KAAK,MAAKiB,wBAwBzBC,EAAAlB,KAAK,MAAImB,EAAAnB,CAAA,EAMToB,EAAApB,KAAQ,QAAQqB,EAAArB,CAAA,ywBApCXA,EAAU,CAAA,CAAA,EAAA,gBAAA,UAA1BG,EA2CSC,EAAAkB,EAAAjB,CAAA,EA1CPkB,EAyCKD,EAAAE,CAAA,EAxCHD,EAmBKC,EAAAC,CAAA,qBACLF,EAmBKC,EAAAE,CAAA,EAlBHH,EAEGG,EAAAf,CAAA,gBACHY,EAEIG,EAAAC,CAAA,qIAJD,CAAAC,GAAAtB,EAAA,IAAAS,KAAAA,EAAAf,KAAK,SAAQ,KAAAY,EAAAiB,EAAAd,CAAA,GAGb,CAAAa,GAAAtB,EAAA,IAAAU,KAAAA,EAAAhB,KAAK,MAAK,KAAAY,EAAAkB,EAAAd,CAAA,EAGRhB,KAAK,2DAMLA,KAAQ,sPAzEN,QAAA+B,EAA4B,MAAA,EAAAC,GAC5B,OAAAC,EAAS,EAAA,EAAAD,GACT,YAAAE,EAAc,EAAA,EAAAF,GACd,cAAAG,EAAgB,EAAA,EAAAH,GAChB,YAAAI,EAAc,EAAA,EAAAJ,EAYnB,MAAAK,EAAaC,GAAWN,EAAQ,MAAA,CACpC,gBAAiB,GACjB,UAAWD,IAAY,QACvB,SAAUA,IAAY,OACtB,oBAAqBG,EACrB,iBAAkBC,EAClB,eAAgBC,EAChB,OAAAH,IAGS,GAAA,CAAA,KAAAM,EAAA,CACT,MAAO,qDACP,OAAQ,8GACR,MAAO,GACP,SAAU,uBACV,SAAU,WACV,MAAO,+BACP,KAAM"}