{"version":3,"file":"BJliKDia.js","sources":["../../../../../brands/timberland/components/modal/about-us/AboutUs.vue","../../../../../brands/timberland/pages/about-us.vue"],"sourcesContent":["<template>\n  <div class=\"absolute-0 z-overlay\" :style=\"{ height: `calc(100vh - ${pxToRem(header.height.navigation)})` }\">\n    <vf-button :aria-label=\"$t.close\" class=\"absolute right-0 top-0 z-1 mr-4 mt-4 p-3\" @click=\"$emit('close')\">\n      <vf-icon name=\"close\" size=\"md\" />\n    </vf-button>\n\n    <base-carousel class=\"h-full f-col center\" class-container=\"full\" class-wrapper=\"full\">\n      <slot />\n\n      <template #prev=\"{ active, action }\">\n        <vf-button\n          :aria-label=\"$t.previous\"\n          class=\"absolute right-0 z-1 mb-4 mr-4 rounded-full p-3 <md:hidden\"\n          :disabled=\"!active\"\n          style=\"bottom:50%\"\n          @click=\"action\"\n        >\n          <vf-icon dir=\"left\" name=\"arrow\" size=\"md\" />\n        </vf-button>\n      </template>\n\n      <template #next=\"{ active, action }\">\n        <vf-button\n          :aria-label=\"$t.next\"\n          class=\"absolute right-0 top-1/2 z-1 mr-4 rounded-full p-3 <md:hidden\"\n          :disabled=\"!active\"\n          @click=\"action\"\n        >\n          <vf-icon name=\"arrow\" size=\"md\" />\n        </vf-button>\n      </template>\n\n      <template #pagination=\"{ active, pages }\">\n        <vf-progress-bar class=\"absolute bottom-0 mx-a my-6 w-1/2 md:my-8\" :max=\"pages\" :value=\"active + 1\" />\n      </template>\n    </base-carousel>\n\n    <p v-if=\"title\" class=\"absolute title-4 <md:hidden\" :class=\"classTitle\" style=\"top:2rem;left:1.875rem\">\n      {{ title }}\n    </p>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { CSSClass } from '#types/common'\n\ndefineProps<{\n  title?: string\n  classTitle?: CSSClass\n}>()\n\ndefineEmits<{\n  (e: 'close'): void\n}>()\n\nconst header = useHeaderStore()\n</script>\n","<template>\n  <div @keydown.esc=\"closeAboutModal\">\n    <section class=\"relative flex center overflow-hidden\">\n      <base-picture\n        v-if=\"hero.smPic\"\n        v-bind=\"hero.smPic\"\n        :alt=\"hero.alt\"\n        class=\"md:hidden\"\n        :props-img=\"{\n          style: 'max-width: none; height: 141vw; animation: pan-x 10s ease-in-out infinite alternate',\n        }\"\n        style=\"width: 238vw; height: 141vw\"\n      />\n      <base-picture\n        v-if=\"hero.mdPic\"\n        v-bind=\"hero.mdPic\"\n        :alt=\"hero.alt\"\n        class=\"<md:hidden\"\n        :props-img=\"{\n          style: 'max-width: none; height: 43vw; animation: zoomPulse 10s ease-in-out infinite alternate',\n        }\"\n        style=\"width: 100vw; height: 40vw\"\n      />\n      <div class=\"vf-vfyyfr\">\n        <h1 class=\"w-full md:mb-10 display-2 lg:display-3\">\n          {{ hero.title }}\n        </h1>\n        <p class=\"md:text-md\" style=\"margin-bottom: 3.75rem\">\n          {{ hero.desc }}\n        </p>\n      </div>\n      <span\n        v-for=\"i in [43, 0]\"\n        :key=\"i\"\n        class=\"absolute bottom-0 mb-5 h-10 w-10 flex center rounded-full bg-white\"\n        :class=\"i === 0 ? '<md:hidden' : 'md:hidden'\"\n      >\n        <base-button @click=\"handleDownwardNav('our-roots', i)\">\n          <vf-icon\n            class=\"c-black\"\n            name=\"arrow\"\n            size=\"md\"\n            style=\"animation: arrow-animation 2.5s linear infinite\"\n          />\n        </base-button>\n      </span>\n    </section>\n\n    <section class=\"sticky z-2 b-grey-80 bg-white <md:b-y\" style=\"top: 3.6875rem\">\n      <nav\n        :aria-label=\"stickyNav.label\"\n        class=\"overflow-x-auto overflow-y-hidden ws-nowrap px-2 py-3 scrollbar-none md:hidden\"\n      >\n        <a\n          v-for=\"({ id, text }, i) in stickyNav.sections\"\n          :key=\"i\"\n          class=\"font-tertiary mx-1 px-3 py-1 text-sm uppercase\"\n          :class=\"{ 'bg-brand-2 c-white rounded-full duration-1000': i === activeLink }\"\n          :to=\"`#${id}`\"\n          @click.prevent=\"handleTabNav(id, i)\"\n        >\n          {{ text }}\n        </a>\n      </nav>\n    </section>\n\n    <section id=\"our-roots\" class=\"relative bg-white\" :class=\"{ 'z-50': atOurRoots }\" data-scroll-el=\"our-roots\">\n      <div class=\"sticky right-0 z-1 h-full\" style=\"top: 3.75rem\">\n        <vf-button\n          v-if=\"atOurRoots\"\n          :aria-label=\"readLess\"\n          class=\"absolute right-0 z-1 mr-4 mt-10 p-4\"\n          @click=\"handleOurRoots\"\n        >\n          <vf-icon name=\"close\" size=\"md\" />\n        </vf-button>\n      </div>\n      <div class=\"relative wrap md:flex\">\n        <div class=\"md:w-1/2 md:flex md:center\">\n          <div class=\"center md:max-w-2/3 <md:f-col <md:overflow-x-hidden\">\n            <base-picture\n              v-bind=\"ourRoots.picture\"\n              class=\"md:hidden\"\n              :class=\"atOurRoots ? 'rotate-width-enter' : 'rotate-width-leave'\"\n              style=\"order: 1\"\n            />\n            <h2\n              class=\"z-1 <md:m-4 md:mb-24 md:mt-10 display-2 lg:display-3\"\n              :class=\"atOurRoots ? 'self-start' : '<md:c-white <md:absolute <md:top-0 <md:mt-4'\"\n            >\n              {{ ourRoots.title }}\n            </h2>\n            <h3 class=\"mb-8 <md:hidden title-2\">\n              {{ ourRoots.subtitle }}\n            </h3>\n            <p class=\"mb-12 text-md <md:hidden\">\n              {{ ourRoots.description }}\n            </p>\n            <vf-button\n              v-show=\"!atOurRoots\"\n              class=\"bottom-0 z-1 mb-4 <md:absolute md:mb-10\"\n              :class=\"{ '<md:hidden': atOurRoots }\"\n              :size=\"{ sm: 'xs', md: 'sm' }\"\n              :variant=\"{ sm: 'primary-inverse', md: 'primary' }\"\n              @click=\"handleOurRoots\"\n            >\n              {{ discoverMore }}\n              <vf-icon class=\"ml-4 md:c-white\" :name=\"atOurRoots ? 'minus' : 'plus'\" />\n            </vf-button>\n          </div>\n        </div>\n        <base-picture\n          v-bind=\"ourRoots.picture\"\n          class=\"w-1/2 <md:hidden\"\n          :class=\"atOurRoots ? 'rotate-scale-enter' : 'rotate-scale-leave'\"\n        />\n        <div v-if=\"atOurRoots\" class=\"w-full <md:hidden\" style=\"margin-top: -5rem\">\n          <span class=\"mx-a h-10 w-10 flex center rounded-full bg-black\">\n            <base-button @click=\"handleDownwardNav('our-roots-video', 0)\">\n              <vf-icon\n                class=\"c-white\"\n                name=\"arrow\"\n                size=\"md\"\n                style=\"animation: arrow-animation 2.5s linear infinite\"\n              />\n            </base-button>\n          </span>\n        </div>\n      </div>\n\n      <base-collapse v-model=\"atOurRoots\" :class=\"{ 'h-0': !atOurRoots }\" class-content=\"f-col center transition-none\">\n        <h3 class=\"mb-8 w-full container md:hidden title-2\">\n          {{ ourRoots.subtitle }}\n        </h3>\n        <p class=\"mb-12 text-md container md:hidden\">\n          {{ ourRoots.description }}\n        </p>\n        <div class=\"relative flex center\" data-scroll-el=\"our-roots-video\">\n          <base-picture v-bind=\"ourRoots.outdoors.picture\" class=\"<md:hidden\" />\n          <div class=\"f-col center md:absolute\">\n            <base-video v-bind=\"ourRoots.outdoors.video\" class=\"<md:mb-12\" />\n            <base-button\n              class=\"absolute f-col center c-white\"\n              @click=\"ModalYoutube.open(\n                {\n                  videoUrl: ourRoots.outdoors.youtube,\n                  title: ourRoots.subtitle,\n                },\n              )\"\n            >\n              <span class=\"mb-4 b-2 b-white rounded-full p-2\">\n                <vf-icon name=\"play\" size=\"2xl\" />\n              </span>\n              <span class=\"title-3\">{{ playVideo }}</span>\n            </base-button>\n          </div>\n        </div>\n\n        <template v-for=\"({ title, description, picture, video, youtube }, i) in ourRoots.sections\" :key=\"i\">\n          <div v-if=\"i === 1\" class=\"w-full overflow-y-hidden <md:mb-8 md:-mb-20\" style=\"max-height:36rem\">\n            <h3 class=\"my-4 text-center md:hidden display-3\">\n              {{ title }}\n            </h3>\n            <base-picture v-bind=\"ourRoots.factory\" class=\"w-full md:-mt-20\" />\n          </div>\n          <div class=\"full center <md:mb-8 md:flex\" :class=\"{ '<md:f-col': i === 1 }\">\n            <div class=\"f-col center md:w-1/2\" :style=\"{ order: i % 2 ? '' : 1 }\">\n              <h3 v-if=\"i !== 1\" v-html=\"title\" class=\"my-4 container md:hidden display-3\" />\n              <base-picture v-if=\"picture\" v-bind=\"picture\" class=\"<md:mb-8\" />\n              <base-video v-if=\"video\" v-bind=\"video\" :class=\"{ '<md:mb-8': i === 1 }\" />\n              <base-button\n                v-if=\"i === 1\"\n                class=\"absolute f-col center c-white\"\n                @click=\"ModalYoutube.open(\n                  {\n                    videoUrl: youtube,\n                    title,\n                  },\n                )\"\n              >\n                <span class=\"mb-4 b-2 b-white rounded-full p-2\">\n                  <vf-icon name=\"play\" size=\"2xl\" />\n                </span>\n                <span class=\"title-3\">{{ playVideo }}</span>\n              </base-button>\n            </div>\n            <div class=\"md:w-1/2\" :class=\"{ '<md:order-first': i === 1 }\">\n              <h3 v-html=\"title\" class=\"my-4 max-w-2/3 pb-10 container <md:hidden display-3\" />\n              <p v-html=\"description\" class=\"text-md container md:max-w-2/3\" :class=\"{ '<md:mb-8': i === 1 }\" />\n            </div>\n          </div>\n        </template>\n\n        <vf-button\n          class=\"mb-4 md:mb-10\"\n          :size=\"{ sm: 'xs', md: 'sm' }\"\n          @click=\"handleOurRoots\"\n        >\n          {{ readLess }}\n          <vf-icon class=\"ml-4 c-white\" :name=\"atOurRoots ? 'minus' : 'plus'\" />\n        </vf-button>\n      </base-collapse>\n    </section>\n\n    <section id=\"culture-of-innovation\" class=\"relative\" data-scroll-el=\"culture-of-innovation\">\n      <div class=\"bg-brand-5 md:flex\">\n        <base-video v-bind=\"cultureOfInnovation.video\" class=\"w-1/2 <md:hidden\" />\n        <div class=\"md:w-1/2 md:flex md:center <md:p-6\">\n          <div class=\"md:max-w-2/3\">\n            <h2 class=\"md:mb-10 display-2 lg:display-3\">\n              {{ cultureOfInnovation.title }}\n            </h2>\n\n            <base-video v-bind=\"cultureOfInnovation.video\" class=\"md:hidden\" />\n\n            <p class=\"md:pb-10 md:text-md\">\n              {{ cultureOfInnovation.description }}\n            </p>\n\n            <base-button\n              class=\"font-tertiary mx-a w-full flex center items-center justify-end pb-12 pt-8 uppercase md:hidden\"\n              @click=\"openAboutModal('culture-of-innovation-mobile', 'culture-of-innovation')\"\n            >\n              {{ cultureOfInnovation.arrowDescription }}\n              <span class=\"ml-4 h-10 w-10 flex center rounded-full bg-black\" style=\"transform:rotate(270deg)\">\n                <vf-icon class=\"c-white\" name=\"arrow\" size=\"md\" style=\"animation: arrow-animation 2.5s linear infinite\" />\n              </span>\n            </base-button>\n\n            <base-button\n              class=\"font-tertiary flex items-center uppercase <md:hidden\"\n              @click=\"openAboutModal('culture-of-innovation-desktop', 'culture-of-innovation')\"\n            >\n              {{ cultureOfInnovation.arrowDescription }}\n              <span class=\"ml-4 h-10 w-10 flex center rounded-full bg-black\" style=\"transform:rotate(270deg)\">\n                <vf-icon class=\"c-white\" name=\"arrow\" size=\"md\" style=\"animation: arrow-animation 2.5s linear infinite\" />\n              </span>\n            </base-button>\n          </div>\n        </div>\n      </div>\n\n      <modal-about-us v-if=\"target === 'culture-of-innovation-mobile'\" class=\"bg-white\" @close=\"closeAboutModal\">\n        <template v-for=\"slide in cultureOfInnovation.slides\" :key=\"slide.id\">\n          <div\n            v-for=\"({ title, description, picture, video, features, text, cta }, i) in slide.content\"\n            :key=\"i\"\n            class=\"relative full f-col\"\n            :class=\"[{ between: slide.id === 2 }, slide.background]\"\n          >\n            <div class=\"f-col items-center\" style=\"height: 90%\">\n              <div class=\"min-h-0\" :class=\"{ 'mt-5': slide.id === 1 }\">\n                <base-picture\n                  v-if=\"picture\"\n                  v-bind=\"picture\"\n                  class=\"inline\"\n                  :props-img=\"{ class: 'max-h-full contain' }\"\n                />\n\n                <base-video v-else-if=\"video\" v-bind=\"video.sm\" class=\"max-h-full\" />\n              </div>\n\n              <base-video\n                v-if=\"slide.id === 2\"\n                v-bind=\"slide.content[0].video.sm\"\n                class=\"absolute full cover\"\n                style=\"filter: brightness(50%)\"\n              />\n\n              <div v-if=\"features\" class=\"absolute full f-col center px-5 c-white\">\n                <div\n                  v-for=\"(feature, j) in features\"\n                  :key=\"j\"\n                  class=\"grid cols-2 items-center gap-3 b-b b-white py-3 text-sm\"\n                >\n                  <div :class=\"j === 0 || j === 2 ? 'w-3/4' : 'w-1/3'\">\n                    <base-picture v-bind=\"feature.picture\" />\n                  </div>\n                  <p>\n                    {{ feature.description }}\n                  </p>\n                </div>\n              </div>\n\n              <div\n                v-else\n                class=\"px-6\"\n                :class=\"{\n                  'absolute full f-col between py-12': slide.id === 2,\n                  'pt-8': slide.id === 4,\n                  'pt-6': slide.id !== 2 && slide.id !== 4,\n                }\"\n              >\n                <template v-if=\"slide.id === 2\">\n                  <h2 class=\"title-4 c-white\">\n                    {{ title }}\n                  </h2>\n                  <div class=\"pr-10\">\n                    <p\n                      v-for=\"(item, j) in description\"\n                      :key=\"j\"\n                      v-html=\"item.text\"\n                      class=\"mb-4 text-sm title-4 c-white\"\n                    />\n                  </div>\n                </template>\n\n                <template v-else>\n                  <h2 v-html=\"title\" class=\"pb-4 title-4\" />\n                  <p v-html=\"description\" />\n                </template>\n\n                <template v-if=\"text\">\n                  <div v-for=\"({ subtitle, desc }, j) in text\" :key=\"j\" class=\"pb-7\">\n                    <h3 v-html=\"subtitle\" class=\"pb-4 title-4\" />\n                    <p v-html=\"desc\" />\n                  </div>\n\n                  <vf-button class=\"w-full text-center\" size=\"xs\" :to=\"cta.url\">\n                    {{ cta.text }}\n                  </vf-button>\n                </template>\n              </div>\n            </div>\n          </div>\n        </template>\n      </modal-about-us>\n\n      <modal-about-us\n        v-if=\"target === 'culture-of-innovation-desktop'\"\n        class=\"bg-white\"\n        :title=\"cultureOfInnovation.titleShorthand\"\n        @close=\"closeAboutModal\"\n      >\n        <div\n          v-for=\"({ id, background, content }) in cultureOfInnovation.slides\"\n          :key=\"id\"\n          class=\"relative full flex center overflow-hidden\"\n          :class=\"background\"\n        >\n          <base-video\n            v-if=\"id === 2\"\n            v-bind=\"content[0].video.md\"\n            class=\"absolute full cover\"\n            style=\"filter: brightness(50%)\"\n          />\n\n          <template v-if=\"id === 3\">\n            <div\n              v-for=\"({ title, description, picture }, j) in content\"\n              :key=\"j\"\n              class=\"flex\"\n              style=\"height: 80%\"\n            >\n              <div class=\"min-h-0 w-1/2\">\n                <base-picture\n                  v-if=\"picture\"\n                  v-bind=\"picture\"\n                  class=\"inline\"\n                  :props-img=\"{ class: 'max-h-full contain' }\"\n                />\n              </div>\n              <div class=\"w-1/2 flex center px-20\">\n                <div class=\"w-3/4\">\n                  <h2 v-html=\"title\" class=\"pb-6 title-2\" />\n                  <p v-html=\"description\" class=\"text-md\" />\n                </div>\n              </div>\n            </div>\n          </template>\n\n          <template v-else>\n            <div\n              v-for=\"{ title, description, picture, video, features, text, cta } in content\"\n              :key=\"title\"\n              class=\"relative f-col center\"\n              style=\"height: 80%\"\n            >\n              <div class=\"min-h-0\">\n                <base-picture\n                  v-if=\"picture\"\n                  v-bind=\"picture\"\n                  class=\"inline\"\n                  :props-img=\"{ class: 'max-h-full contain' }\"\n                />\n                <base-video v-if=\"video && id !== 2\" v-bind=\"video.md\" class=\"max-h-full\" />\n              </div>\n              <div v-if=\"features\" class=\"px-20 c-white\">\n                <div\n                  v-for=\"(feature, j) in features \"\n                  :key=\"j\"\n                  class=\"grid cols-2 items-center gap-3 b-b py-5\"\n                >\n                  <base-picture v-bind=\"feature.picture\" :class=\"j === 0 || j === 2 ? 'w-3/4' : 'w-1/3'\" />\n                  <p class=\"text-md\">\n                    {{ feature.description }}\n                  </p>\n                </div>\n              </div>\n\n              <div v-else class=\"px-20\">\n                <template v-if=\"id === 2\">\n                  <p\n                    v-for=\"(item, j) in description\"\n                    :key=\"j\"\n                    v-html=\"item.text\"\n                    class=\"mb-10 c-white title-2\"\n                  />\n                </template>\n\n                <template v-else>\n                  <h2 v-if=\"id !== 4\" v-html=\"title\" class=\"pb-6 title-2\" />\n                  <p v-html=\"description\" class=\"text-md\" />\n                </template>\n\n                <template v-if=\"text\">\n                  <div v-for=\"{ subtitle, desc } in text\" :key=\"subtitle\" class=\"pb-16\">\n                    <h3 v-html=\"subtitle\" class=\"pb-2 title-2\" />\n                    <p v-html=\"desc\" class=\"pb-6 text-md\" />\n                  </div>\n\n                  <vf-button class=\"w-full text-center\" size=\"xs\" :to=\"cta.url\">\n                    {{ cta.text }}\n                  </vf-button>\n                </template>\n              </div>\n            </div>\n          </template>\n        </div>\n      </modal-about-us>\n    </section>\n\n    <section\n      ref=\"iconsRef\"\n      id=\"icons\"\n      class=\"relative flex center bg-black py-8\"\n      :class=\"{ 'overflow-hidden': !target }\"\n      data-scroll-el=\"icons\"\n    >\n      <transition enter-active-class=\"slide-fade-in\" leave-active-class=\"op-0\">\n        <p\n          v-if=\"isIconsVisible\"\n          aria-hidden=\"true\"\n          class=\"absolute top-0 text-center fw-bold font-secondary uppercase container <md:hidden\"\n          style=\"font-size: 10rem\"\n        >\n          {{ icons.backgroundText }}<sup>&reg;</sup><br>\n          {{ icons.backgroundText }}<sup>&reg;</sup><br>\n          {{ icons.backgroundText }}<sup>&reg;</sup>\n        </p>\n      </transition>\n      <div class=\"z-1 grid container md:mb-20 md:mt-10 <md:gap-y-8\">\n        <h2 class=\"text-center c-white md:mt-6 display-3\">\n          {{ icons.title }}\n        </h2>\n        <div class=\"grid gap-8 md:cols-3 md:mt-12 md:gap-6\">\n          <div\n            v-for=\"({ number, description, id, video }, i) in icons.boots\"\n            :key=\"i\"\n            :id\n            class=\"relative rounded-lg rounded-lg bg-white pb-3 pt-10 <md:hidden\"\n            :class=\"isIconsVisible ? { 'slide-fade-in': i === 1, 'slide-fade-in-delay': i !== 1 } : '' \"\n            data-test-id=\"article-card-md\"\n          >\n            <base-video v-bind=\"video\" class=\"aspect-square\" loop />\n            <p v-html=\"description\" class=\"absolute w-3/5 title-2\" style=\"top: 1.5rem; left: 1.5rem\" />\n            <div class=\"absolute flex items-center gap-3\" style=\"bottom: 1.5rem; right: 1.5rem\">\n              <span class=\"mono text-sm\">{{ discoverMore }}</span>\n              <span class=\"h-10 w-10 flex center rounded-full bg-black c-white\" style=\"transform:rotate(270deg)\">\n                <vf-icon dir=\"right\" name=\"arrow\" size=\"md\" style=\"animation: arrow-animation 2.5s linear infinite\" />\n              </span>\n            </div>\n            <base-button :aria-label=\"discoverMore\" class=\"absolute-0\" @click=\"openAboutModal(`icons-${number}`, 'icons')\" />\n          </div>\n          <div\n            v-for=\"({ number, description, video }, i) in icons.boots\"\n            :key=\"i\"\n            class=\"relative rounded-lg rounded-lg bg-white pb-3 pt-10 md:hidden\"\n            data-test-id=\"article-card-sm\"\n          >\n            <base-video v-bind=\"video\" class=\"aspect-square\" loop />\n            <p v-html=\"description\" class=\"absolute w-3/5 title-1\" style=\"top: 1.5rem; left: 1.5rem\" />\n            <div class=\"absolute flex items-center gap-3\" style=\"bottom: 1.5rem; right: 1.5rem\">\n              <span class=\"mono text-sm\">{{ discoverMore }}</span>\n              <span class=\"h-11 w-11 flex center rounded-full bg-black c-white\" style=\"transform:rotate(270deg)\">\n                <vf-icon dir=\"right\" name=\"arrow\" size=\"md\" style=\"animation: arrow-animation 2.5s linear infinite\" />\n              </span>\n            </div>\n            <base-button :aria-label=\"discoverMore\" class=\"absolute-0\" @click=\"openAboutModal(`icons-${number}`, 'icons')\" />\n          </div>\n        </div>\n      </div>\n\n      <modal-about-us v-if=\"target === 'icons-01'\" class=\"bg-white\" :title=\"icons.title\" @close=\"closeAboutModal\">\n        <div\n          v-for=\"(\n            { title, description, shopLabel, materials, picture, yearLabel, label, hotspot, hotspots }, j\n          ) in icons.boots[0].slides\"\n          :key=\"j\"\n          class=\"relative full center md:flex\"\n          :class=\"{ 'bg-brand-5 gap-y-8': j >= 2 }\"\n        >\n          <div class=\"w-full flex <md:flex-col\" :class=\"{ 'justify-center': j >= 2 }\" style=\"height: 90%\">\n            <h2\n              v-if=\"title\"\n              v-html=\"title\"\n              class=\"m-4 md:hidden title-1\"\n              :class=\"j === 0 ? 'mb-0 md:pb-80' : 'hidden'\"\n              style=\"padding-right: 10rem\"\n            />\n\n            <div class=\"min-h-0 flex justify-center\">\n              <div class=\"relative\">\n                <base-picture\n                  v-if=\"j !== 1\"\n                  v-bind=\"picture\"\n                  class=\"inline md:w-1/2\"\n                  :props-img=\"{ class: 'max-h-full contain' }\"\n                />\n\n                <template v-if=\"j === 0 && hotspot\">\n                  <base-button :aria-label=\"shopLabel\" class=\"absolute <md:hidden\" style=\"top: 40%; right: 25%\" @click=\"openShop(hotspot, 'lg')\">\n                    <span\n                      class=\"h-12 w-12 flex center rounded-full bg-brand-2 outline\"\n                      style=\"outline-width: .5rem; outline-color: rgba(217,217,217,0.2)\"\n                    >\n                      <vf-icon class=\"c-black\" name=\"bag\" size=\"md\" />\n                    </span>\n                  </base-button>\n\n                  <base-button\n                    :aria-label=\"shopLabel\"\n                    class=\"absolute right-0 md:hidden\"\n                    style=\"top: 40%\"\n                    @click=\"openShop(hotspot)\"\n                  >\n                    <span\n                      class=\"h-12 w-12 flex center rounded-full bg-brand-2 outline\"\n                      style=\"outline-width: .5rem; outline-color: rgba(217,217,217,0.2)\"\n                    >\n                      <vf-icon class=\"c-black\" name=\"bag\" size=\"md\" />\n                    </span>\n                  </base-button>\n                </template>\n              </div>\n            </div>\n\n            <div class=\"mt-2 flex center md:w-1/2 <md:px-4\">\n              <div class=\"grid gap-y-8 md:max-w-2/3 md:gap-y-10\">\n                <h2\n                  v-if=\"title\"\n                  v-html=\"title\"\n                  class=\"mt-4 md:display-1 title-1\"\n                  :class=\"j === 1 ? 'pr-40 md:pb-80' : '<md:hidden'\"\n                />\n\n                <transition name=\"fade\">\n                  <div\n                    v-show=\"plusDisabled && j === 1\"\n                    class=\"absolute z-2 grid cols-2 w-1/2 gap-10 duration <md:hidden\"\n                    style=\"bottom: 20%\"\n                  >\n                    <div v-for=\"(feature, k) in targetIcon\" :key=\"k\" class=\"grid cols-3 gap-4\">\n                      <div>\n                        <base-picture v-bind=\"feature.picture\" />\n                      </div>\n                      <div class=\"col-span-2\">\n                        <h4 v-html=\"feature.label\" class=\"subtitle-5 my-4\" />\n                        <p v-html=\"feature.description\" class=\"text-sm\" />\n                      </div>\n                    </div>\n                  </div>\n                </transition>\n\n                <h3 v-if=\"yearLabel\" v-html=\"yearLabel\" class=\"mt-4 c-black normal-case md:pt-10 display-2\" />\n                <h4 v-if=\"label\" v-html=\"label\" class=\"title-3 md:text-lg\" />\n                <div v-html=\"description\" class=\"md:text-md\" />\n                <div v-if=\"materials\" class=\"grid cols-3 gap-6\">\n                  <div v-for=\"(material, k) in materials\" :key=\"k\">\n                    <h4 v-html=\"material.title\" class=\"subtitle-5 mb-1\" />\n                    <p v-html=\"material.description\" class=\"text-sm\" />\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <template v-if=\"j === 1 && hotspots\">\n              <div class=\"f-col center md:w-1/2\">\n                <base-picture v-bind=\"picture\" :style=\"`${rotateEvent};`\" />\n\n                <transition name=\"fade\">\n                  <span v-if=\"!plusDisabled\" class=\"z-2 <md:absolute\" style=\"bottom: 15%\">\n                    <base-picture v-bind=\"pointingFinger\" class=\"mb-5\" style=\"margin-left: 3.8rem\" />\n                    <h4 class=\"subtitle-5\">\n                      {{ discoverAll }}\n                    </h4>\n                  </span>\n                </transition>\n\n                <transition name=\"fade\">\n                  <div v-if=\"plusDisabled\" class=\"duration-500\">\n                    <base-button\n                      aria-label=\"close\"\n                      class=\"vf-62eyrv\"\n                      style=\"top: 70%\"\n                      @click=\"handleCloseIcon\"\n                    >\n                      <vf-icon class=\"c-white\" name=\"close\" size=\"md\" />\n                    </base-button>\n                    <div class=\"grid cols-2 m-6 gap-6 duration md:hidden\">\n                      <div v-for=\"(feature, k) in targetIcon\" :key=\"k\" class=\"text-center\">\n                        <base-picture v-bind=\"feature.picture\" />\n                        <h4 v-html=\"feature.label\" class=\"subtitle-5 my-2\" />\n                        <span class=\"text-sm\">{{ feature.brief }}</span>\n                      </div>\n                    </div>\n                  </div>\n                </transition>\n\n                <template v-for=\"({ sm, md, content }, m) in hotspots\" :key=\"m\">\n                  <transition name=\"fade\">\n                    <div v-if=\"!plusDisabled\" class=\"duration-500\">\n                      <div class=\"absolute md:hidden\" :style=\"`top: ${sm.top}%; right: ${sm.right}%;`\">\n                        <base-button\n                          aria-label=\"plus\"\n                          class=\"h-11 w-11 flex center rounded-full bg-brand-2\"\n                          @click=\"handlePlusIcon(sm.rotationDeg, content)\"\n                        >\n                          <vf-icon class=\"c-black\" name=\"plus\" size=\"md\" />\n                        </base-button>\n                      </div>\n                      <div class=\"absolute <md:hidden\" :style=\"`top: ${md.top}%; right: ${md.right}%;`\">\n                        <base-button\n                          aria-label=\"plus\"\n                          class=\"h-11 w-11 flex center rounded-full bg-brand-2\"\n                          @click=\"handlePlusIcon(md.rotationDeg, content)\"\n                        >\n                          <vf-icon class=\"c-black\" name=\"plus\" size=\"md\" />\n                        </base-button>\n                      </div>\n                    </div>\n                  </transition>\n                </template>\n              </div>\n            </template>\n          </div>\n        </div>\n      </modal-about-us>\n\n      <modal-about-us v-if=\"target === 'icons-02'\" class=\"bg-white\" :title=\"icons.title\" @close=\"closeAboutModal\">\n        <div\n          v-for=\"({ title, description, shopLabel, hotspot, materials, picture }, j) in icons.boots[1].slides\"\n          :key=\"j\"\n          class=\"full md:flex md:center\"\n          :class=\"{ 'bg-brand-5': j > 0 }\"\n        >\n          <div\n            class=\"w-full flex p-4 <md:flex-col md:self-center md:p-10\"\n            :class=\"{ 'full between md:flex-row-reverse': j > 0 }\"\n            style=\"height: 90%\"\n          >\n            <h2\n              v-if=\"title\"\n              v-html=\"title\"\n              class=\"mt-4 self-start md:hidden title-1\"\n              style=\"padding-right: 10rem\"\n            />\n\n            <div class=\"min-h-0 flex justify-center\" :class=\"{ '<md:mt-6 md:w-3/4 md:items-center': j > 0 }\">\n              <div v-if=\"j === 0\" class=\"relative\">\n                <base-picture\n                  v-bind=\"picture\"\n                  class=\"inline\"\n                  :props-img=\"{ class: 'max-h-full contain' }\"\n                />\n\n                <template v-if=\"hotspot\">\n                  <base-button\n                    :aria-label=\"shopLabel\"\n                    class=\"absolute <md:hidden\"\n                    style=\"top: 40%; right: 25%\"\n                    @click=\"openShop(hotspot, 'lg')\"\n                  >\n                    <span\n                      class=\"h-12 w-12 flex center rounded-full bg-brand-2 outline\"\n                      style=\"outline-width: .5rem; outline-color: rgba(217,217,217,0.2)\"\n                    >\n                      <vf-icon class=\"c-black\" name=\"bag\" size=\"md\" />\n                    </span>\n                  </base-button>\n\n                  <base-button\n                    :aria-label=\"shopLabel\"\n                    class=\"absolute right-0 md:hidden\"\n                    style=\"top: 40%\"\n                    @click=\"openShop(hotspot)\"\n                  >\n                    <span\n                      class=\"h-12 w-12 flex center rounded-full bg-brand-2 outline\"\n                      style=\"outline-width: .5rem; outline-color: rgba(217,217,217,0.2)\"\n                    >\n                      <vf-icon class=\"c-black\" name=\"bag\" size=\"md\" />\n                    </span>\n                  </base-button>\n                </template>\n              </div>\n\n              <base-picture\n                v-if=\"j > 0\"\n                v-bind=\"picture\"\n                class=\"inline\"\n                :props-img=\"{ class: 'max-h-full' }\"\n                style=\"box-shadow: rgba(0, 0, 0, 0.4) 0 0 1.25rem 0; max-width: 80rem\"\n                :style=\"j === 1 ? 'aspectRatio: 11 / 13; max-height: 90%;' : 'aspectRatio: 89 / 57;'\"\n              />\n            </div>\n\n            <div class=\"<md:px-4\" :class=\"j > 0 ? 'md:mt-10 md:w-1/4 md:h-full flex align-start justify-center' : 'mt-2 f-col center md:w-1/2'\">\n              <div :class=\"{ 'grid gap-y-8 md:max-w-2/3 md:gap-y-10': j === 0 }\">\n                <h2 class=\"self-start <md:hidden title-1\" :class=\"{ 'mt-4': j === 0 }\">\n                  {{ title }}\n                </h2>\n                <p v-if=\"description\" class=\"mb-6 md:text-md\">\n                  {{ description }}\n                </p>\n\n                <template v-if=\"materials\">\n                  <div class=\"flex gap-16\">\n                    <div v-for=\"(material, k) in materials\" :key=\"k\" class=\"w-1/2\" style=\"max-width: 8rem\">\n                      <p class=\"subtitle-5 mb-1\">\n                        {{ material.title }}\n                      </p>\n                      <p class=\"text-sm\">\n                        {{ material.description }}\n                      </p>\n                    </div>\n                  </div>\n                </template>\n              </div>\n            </div>\n          </div>\n        </div>\n      </modal-about-us>\n\n      <modal-about-us v-if=\"target === 'icons-03'\" class=\"bg-white\" :title=\"icons.title\" @close=\"closeAboutModal\">\n        <div\n          v-for=\"({ title, description, shopLabel, hotspot, materials, picture }, j) in icons.boots[2].slides\"\n          :key=\"j\"\n          class=\"full center md:flex\"\n          :class=\"{ 'bg-brand-5': j > 0 }\"\n        >\n          <div\n            class=\"w-full flex p-4 <md:flex-col md:self-center md:p-10\"\n            :class=\"{ 'full between md:flex-row-reverse': j > 0 }\"\n            style=\"height: 90%\"\n          >\n            <h2 v-if=\"title\" v-html=\"title\" class=\"mt-4 self-start md:hidden title-1\" style=\"padding-right: 10rem\" />\n\n            <div class=\"min-h-0 flex justify-center\" :class=\"{ '<md:mt-6 md:w-3/4 md:items-center': j > 0 }\">\n              <div v-if=\"j === 0\" class=\"relative\">\n                <base-picture\n                  v-bind=\"picture\"\n                  class=\"inline\"\n                  :props-img=\"{ class: 'max-h-full contain' }\"\n                />\n                <template v-if=\"hotspot\">\n                  <base-button\n                    :aria-label=\"shopLabel\"\n                    class=\"absolute <md:hidden\"\n                    style=\"top: 40%; right: 25%\"\n                    @click=\"openShop(hotspot, 'lg')\"\n                  >\n                    <span\n                      class=\"h-12 w-12 flex center rounded-full bg-brand-2 outline\"\n                      style=\"outline-width: .5rem; outline-color: rgba(217,217,217,0.2)\"\n                    >\n                      <vf-icon class=\"c-black\" name=\"bag\" size=\"md\" />\n                    </span>\n                  </base-button>\n\n                  <base-button\n                    :aria-label=\"shopLabel\"\n                    class=\"absolute right-0 md:hidden\"\n                    style=\"top: 40%\"\n                    @click=\"openShop(hotspot)\"\n                  >\n                    <span\n                      class=\"h-12 w-12 flex center rounded-full bg-brand-2 outline\"\n                      style=\"outline-width: .5rem; outline-color: rgba(217,217,217,0.2)\"\n                    >\n                      <vf-icon class=\"c-black\" name=\"bag\" size=\"md\" />\n                    </span>\n                  </base-button>\n                </template>\n              </div>\n\n              <base-picture\n                v-if=\"j > 0\"\n                v-bind=\"picture\"\n                class=\"inline\"\n                :props-img=\"{ class: 'max-h-full' }\"\n                style=\"box-shadow: rgba(0, 0, 0, 0.4) 0 0 1.25rem 0; aspect-ratio: '89/57'; max-width: 80rem\"\n              />\n            </div>\n\n            <div class=\"<md:px-4\" :class=\"j > 0 ? 'md:mt-10 md:w-1/4 md:h-full flex align-start justify-center' : 'mt-2 f-col center md:w-1/2'\">\n              <div :class=\"{ 'grid gap-y-8 md:max-w-2/3 md:gap-y-10': j === 0 }\">\n                <h2 class=\"self-start <md:hidden title-1\" :class=\"{ 'mt-4': j === 0 }\">\n                  {{ title }}\n                </h2>\n                <p v-if=\"description\" class=\"mb-6 md:text-md\">\n                  {{ description }}\n                </p>\n\n                <template v-if=\"materials\">\n                  <div class=\"flex\" style=\"gap: 4rem\">\n                    <div v-for=\"(material, k) in materials\" :key=\"k\" class=\"w-1/2\" style=\"max-width: 8rem\">\n                      <p class=\"subtitle-5 mb-1\">\n                        {{ material.title }}\n                      </p>\n                      <p class=\"text-sm\">\n                        {{ material.description }}\n                      </p>\n                    </div>\n                  </div>\n                </template>\n              </div>\n            </div>\n          </div>\n        </div>\n      </modal-about-us>\n    </section>\n\n    <section id=\"our-vision\" class=\"relative\" data-scroll-el=\"our-vision\">\n      <div\n        class=\"f-col center bg-black transition-padding duration-500 md:items-end\"\n        :class=\"{ 'md:p-8': ourVisionIsVisible }\"\n      >\n        <base-video\n          v-bind=\"ourVision.video\"\n          class=\"duration-500 md:w-full\"\n          :class=\"{ 'md:rounded-xl': ourVisionIsVisible }\"\n          loop\n        />\n        <div class=\"absolute c-white md:w-1/2\">\n          <h2 ref=\"ourVisionHeading\" class=\"<md:mb-8 md:mb-8 md:max-w-2/3 display-2 lg:display-3\">\n            {{ ourVision.title }}\n          </h2>\n          <p class=\"mb-8 max-w-2/3 text-md <md:hidden\">\n            {{ ourVision.description }}\n          </p>\n          <base-button class=\"subtitle-5 flex center <md:mx-a\" @click=\"openAboutModal('our-vision')\">\n            {{ seeMore }}\n            <span class=\"ml-4 h-10 w-10 flex center rounded-full bg-white\" style=\"transform: rotate(270deg)\">\n              <vf-icon class=\"c-black\" name=\"arrow\" size=\"md\" style=\"animation: arrow-animation 2.5s linear infinite\" />\n            </span>\n          </base-button>\n        </div>\n      </div>\n\n      <transition name=\"fade\">\n        <modal-about-us\n          v-if=\"target === 'our-vision'\"\n          class=\"bg-brand-5\"\n          :title=\"ourVision.title\"\n          @close=\"closeAboutModal\"\n        >\n          <div\n            v-for=\"({ title, description, picture, video, youtube }, i) in ourVision.slides\"\n            :key=\"i\"\n            class=\"full f-col\"\n          >\n            <div class=\"flex <md:flex-col\" style=\"height: 90%\">\n              <div class=\"min-h-0\">\n                <base-picture\n                  v-if=\"picture\"\n                  v-bind=\"picture\"\n                  class=\"mt-6 inline md:w-1/2\"\n                  :class=\"{ '<md:px-4': i > 0 }\"\n                  :props-img=\"{ class: 'max-h-full contain' }\"\n                />\n              </div>\n\n              <div v-if=\"video\" class=\"relative mb-4 min-h-0 f-col center md:w-1/2 md:overflow-hidden\">\n                <base-video v-bind=\"video\" class=\"max-h-full md:h-screen md:w-fit\" loop />\n                <base-button\n                  class=\"absolute f-col center c-white\"\n                  @click=\"ModalYoutube.open(\n                    {\n                      videoUrl: youtube,\n                      title,\n                    },\n                  )\"\n                >\n                  <span class=\"mb-4 b-2 b-white rounded-full p-2\">\n                    <vf-icon name=\"play\" size=\"2xl\" />\n                  </span>\n                  <span class=\"title-3\">{{ playVideo }}</span>\n                </base-button>\n              </div>\n\n              <div class=\"flex center md:w-1/2 <md:px-4\">\n                <div class=\"md:max-w-2/3\">\n                  <h3 class=\"my-4 title-4 md:my-4 md:pb-10 md:display-1\" :class=\"{ '<md:hidden': !i }\">\n                    {{ title }}\n                  </h3>\n                  <p v-html=\"description\" class=\"md:text-md\" />\n                </div>\n              </div>\n            </div>\n          </div>\n        </modal-about-us>\n      </transition>\n    </section>\n\n    <section class=\"relative my-10 flex center\">\n      <vf-button\n        v-for=\"({ name, url }, i) in links\"\n        :key=\"i\"\n        :size=\"{ sm: 'xs', md: 'sm' }\"\n        :to=\"url\"\n      >\n        {{ name }}\n      </vf-button>\n    </section>\n\n    <modal-youtube hide-close-button size=\"lg\" style-content=\"background-color: #303030\" />\n    <panel-hotspot-shop class-content=\"rounded-xl rounded-b-none\" position=\"bottom\" />\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { SizesSubUnion } from '#types/sizes'\n\nconst ModalYoutube = createModal('youtube')\nconst PanelHotspotShop = createPanel('hotspot-shop')\n\nconst header = useHeaderStore()\nconst { lock, unlock } = useBodyScroll()\nconst host = useHost()\nconst atOurRoots = ref(false)\nconst target = ref()\nconst rotateEvent = ref()\nconst plusDisabled = ref(false)\nconst targetIcon = ref()\nconst ourVisionHeading = ref<HTMLHeadingElement>()\nconst ourVisionIsVisible = useElementVisibility(ourVisionHeading)\n\nconst iconsRef = ref<HTMLElement>()\nconst isIconsVisible = useElementVisibility(iconsRef)\n\nconst { data, error } = await useApi().internal.getStaticPage('about-us')\nif (!data.value) throw createError({ ...error.value!, fatal: true })\n\nconst {\n  hero,\n  stickyNav,\n  readLess,\n  ourRoots,\n  discoverMore,\n  playVideo,\n  cultureOfInnovation,\n  icons,\n  ourVision,\n  seeMore,\n  links,\n  pointingFinger,\n  discoverAll\n} = data.value\n\nconst handleDownwardNav = (id: string, offsetHeight: number) => {\n  scrollToElement(id, { offset: (offsetHeight + header.height.navigation) })\n}\n\nconst activeLink = ref(0)\nconst handleTabNav = (id: string, offsetHeight: number) => {\n  activeLink.value = offsetHeight\n  scrollToElement(id, { offset: (43 + header.height.navigation) })\n}\n\nconst handleOurRoots = () => {\n  scrollToElement('our-roots', { offset: header.height.navigation })\n  atOurRoots.value = !atOurRoots.value\n}\n\nconst openAboutModal = (modalName, scrollTarget = '') => {\n  scrollToElement(scrollTarget || modalName, { offset: header.height.navigation, behavior: 'instant' })\n  target.value = modalName\n  lock()\n}\n\nconst closeAboutModal = () => {\n  target.value = ''\n  unlock()\n}\n\nconst canonicalUrl = `https://${host}${useLocalisedRoute('/about-us')}`\nuseHead({\n  htmlAttrs: { class: 'motion-safe:scroll-smooth' },\n  link: () => [\n    { rel: 'canonical', href: canonicalUrl }\n  ]\n})\n\nconst handlePlusIcon = (deg, content) => {\n  plusDisabled.value = true\n  rotateEvent.value = `animation: rotate-deg-${deg}-in .5s ease-out forwards;`\n  targetIcon.value = content\n}\n\nconst handleCloseIcon = () => {\n  plusDisabled.value = false\n  rotateEvent.value = rotateEvent.value.replace('-in', '-out')\n}\n\nconst openShop = ({ title, ctas }, size: SizesSubUnion<'sm' | 'lg'> = 'lg') => {\n  return PanelHotspotShop.open({\n    title,\n    ctas\n  }, {\n    size\n  })\n}\n</script>\n"],"names":["header","useHeaderStore","ModalYoutube","createModal","PanelHotspotShop","createPanel","lock","unlock","useBodyScroll","host","useHost","atOurRoots","ref","target","rotateEvent","plusDisabled","targetIcon","ourVisionHeading","ourVisionIsVisible","useElementVisibility","iconsRef","isIconsVisible","data","error","__temp","__restore","_withAsyncContext","useApi","createError","hero","stickyNav","readLess","ourRoots","discoverMore","playVideo","cultureOfInnovation","icons","ourVision","seeMore","links","pointingFinger","discoverAll","handleDownwardNav","id","offsetHeight","scrollToElement","activeLink","handleTabNav","handleOurRoots","openAboutModal","modalName","scrollTarget","closeAboutModal","canonicalUrl","useLocalisedRoute","useHead","handlePlusIcon","deg","content","handleCloseIcon","openShop","title","ctas","size"],"mappings":"+jBAuDA,MAAMA,EAASC,i4NC+2BT,MAAAC,EAAeC,GAAY,SAAS,EACpCC,EAAmBC,GAAY,cAAc,EAE7CL,EAASC,KACT,CAAE,KAAAK,GAAM,OAAAC,EAAO,EAAIC,GAAc,EACjCC,EAAOC,KACPC,EAAaC,EAAI,EAAK,EACtBC,EAASD,IACTE,GAAcF,IACdG,EAAeH,EAAI,EAAK,EACxBI,GAAaJ,IACbK,GAAmBL,IACnBM,GAAqBC,GAAqBF,EAAgB,EAE1DG,GAAWR,IACXS,GAAiBF,GAAqBC,EAAQ,EAE9C,CAAE,KAAAE,GAAM,MAAAC,KAAU,CAAAC,EAAAC,CAAA,EAAAC,GAAA,IAAMC,KAAS,SAAS,cAAc,UAAU,CAAA,mBACpE,GAAA,CAACL,GAAK,MAAa,MAAAM,GAAY,CAAE,GAAGL,GAAM,MAAQ,MAAO,EAAA,CAAM,EAE7D,KAAA,CACJ,KAAAM,EACA,UAAAC,GACA,SAAAC,GACA,SAAAC,EACA,aAAAC,EACA,UAAAC,GACA,oBAAAC,EACA,MAAAC,EACA,UAAAC,EACA,QAAAC,GACA,MAAAC,GACA,eAAAC,GACA,YAAAC,EAAA,EACEnB,GAAK,MAEHoB,GAAoB,CAACC,EAAYC,IAAyB,CAC9DC,GAAgBF,EAAI,CAAE,OAASC,EAAe5C,EAAO,OAAO,WAAa,CAAA,EAGrE8C,GAAalC,EAAI,CAAC,EAClBmC,GAAe,CAACJ,EAAYC,IAAyB,CACzDE,GAAW,MAAQF,EACnBC,GAAgBF,EAAI,CAAE,OAAS,GAAK3C,EAAO,OAAO,WAAa,CAAA,EAG3DgD,GAAiB,IAAM,CAC3BH,GAAgB,YAAa,CAAE,OAAQ7C,EAAO,OAAO,WAAY,EACtDW,EAAA,MAAQ,CAACA,EAAW,KAAA,EAG3BsC,EAAiB,CAACC,EAAWC,EAAe,KAAO,CACvCN,GAAAM,GAAgBD,EAAW,CAAE,OAAQlD,EAAO,OAAO,WAAY,SAAU,SAAA,CAAW,EACpGa,EAAO,MAAQqC,EACV5C,IAAA,EAGD8C,EAAkB,IAAM,CAC5BvC,EAAO,MAAQ,GACRN,IAAA,EAGH8C,GAAe,WAAW5C,CAAI,GAAG6C,GAAkB,WAAW,CAAC,GAC7DC,GAAA,CACN,UAAW,CAAE,MAAO,2BAA4B,EAChD,KAAM,IAAM,CACV,CAAE,IAAK,YAAa,KAAMF,EAAa,CACzC,CAAA,CACD,EAEK,MAAAG,GAAiB,CAACC,EAAKC,IAAY,CACvC3C,EAAa,MAAQ,GACTD,GAAA,MAAQ,yBAAyB2C,CAAG,6BAChDzC,GAAW,MAAQ0C,CAAA,EAGfC,GAAkB,IAAM,CAC5B5C,EAAa,MAAQ,GACrBD,GAAY,MAAQA,GAAY,MAAM,QAAQ,MAAO,MAAM,CAAA,EAGvD8C,EAAW,CAAC,CAAE,MAAAC,EAAO,KAAAC,CAAK,EAAGC,EAAmC,OAC7D3D,EAAiB,KAAK,CAC3B,MAAAyD,EACA,KAAAC,CAAA,EACC,CACD,KAAAC,CAAA,CACD"}