@sankhyatronics/sankhya-cms 0.2.0 → 0.3.0

package/dist/chunk-LO6TZBGD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/carousel/Carousel.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { buttonResetStyles, controlBaseStyles } from '../shared/styles';\nimport { reducedMotionStyles } from '../shared/section-styles';\nimport type { CarouselChangeEventDetail } from './CarouselEvents';\n\nconst REDUCED_MOTION_QUERY = '(prefers-reduced-motion: reduce)';\n\n/**\n * Cycles through its slotted children, one visible at a time, with optional autoplay, arrows and\n * dot indicators. The incoming slide slides in from the travel direction (CSS keyframes in place\n * of the source's framer-motion spring), or fades in with `transition=\"fade\"`. Autoplay pauses\n * while hovered (unless `pause-on-hover` is turned off, e.g. for a full-screen hero the pointer\n * nearly always rests on) or focused, and stops when the element is disconnected; a paused slide\n * keeps the time it had left. Under `prefers-reduced-motion: reduce` autoplay starts paused; the\n * tabs' play button still starts it.\n *\n * `indicator-style=\"tabs\"` replaces the dots with a row of labelled tabs along the bottom, each\n * with a progress bar that fills while its slide is showing, plus a pause button — the tabbed hero\n * carousel layout (put `st-hero`s in it). Tab labels come from `tab-labels`, else each slide's\n * `data-tab-label` attribute, else its `title`.\n *\n * @fires carousel-change - Detail `{ index }`, when the visible slide changes.\n * @cssprop --st-carousel-tab-color - Tab text and progress colour (default: light, for slides with a dark image).\n * @cssprop --st-carousel-tabs-space - Room kept free under each slide's content for the tabs (default `6rem`).\n * @csspart tabs - The tab row.\n * @csspart tab - One tab button.\n * @csspart progress - A tab's progress bar.\n */\n@customElement('st-carousel')\nexport class Carousel extends LitElement {\n  static styles = css`\n    ${controlBaseStyles}\n\n    :host {\n      display: block;\n      position: relative;\n      width: 100%;\n      overflow: hidden;\n    }\n\n    ::slotted(*) {\n      display: none !important;\n      box-sizing: border-box;\n      width: 100%;\n      min-width: 100%;\n      max-width: 100%;\n    }\n\n    /* The slides sit in a clipping viewport and each is exactly the carousel's width, so the next\n       slide never shows at the edge; the slide animations move inside the viewport. */\n    .viewport {\n      position: relative;\n      width: 100%;\n      overflow: hidden;\n    }\n\n    ::slotted([data-st-active]) {\n      display: block !important;\n    }\n\n    /* data-st-still (set on the first slide until the first change) keeps the entrance off on first\n       paint, so the copy is there at once; later changes animate. */\n    ::slotted([data-st-active]:not([data-st-still])) {\n      animation: st-carousel-in-next 0.4s ease both;\n    }\n\n    :host([data-direction='prev']) ::slotted([data-st-active]:not([data-st-still])) {\n      animation-name: st-carousel-in-prev;\n    }\n\n    :host([transition='fade']) ::slotted([data-st-active]:not([data-st-still])),\n    :host([transition='fade'][data-direction]) ::slotted([data-st-active]:not([data-st-still])) {\n      animation: st-carousel-fade 0.7s ease both;\n    }\n\n    .sr-only {\n      position: absolute;\n      width: 1px;\n      height: 1px;\n      margin: -1px;\n      padding: 0;\n      overflow: hidden;\n      clip: rect(0 0 0 0);\n      white-space: nowrap;\n      border: 0;\n    }\n\n    @keyframes st-carousel-in-next {\n      from {\n        transform: translateX(10%);\n        opacity: 0;\n      }\n      to {\n        transform: none;\n        opacity: 1;\n      }\n    }\n\n    @keyframes st-carousel-in-prev {\n      from {\n        transform: translateX(-10%);\n        opacity: 0;\n      }\n      to {\n        transform: none;\n        opacity: 1;\n      }\n    }\n\n    @keyframes st-carousel-fade {\n      from {\n        opacity: 0;\n      }\n      to {\n        opacity: 1;\n      }\n    }\n\n    .nav {\n      ${buttonResetStyles}\n      position: absolute;\n      top: 50%;\n      transform: translateY(-50%);\n      z-index: 10;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--st-size-38);\n      height: var(--st-size-38);\n      border-radius: var(--st-radius-circle);\n      border: 1px solid var(--st-color-border);\n      background: var(--st-color-surface);\n      color: var(--st-color-text-strong);\n      font-size: var(--st-text-xl);\n      opacity: 0.8;\n      transition:\n        opacity 0.3s ease,\n        transform 0.3s ease;\n    }\n\n    .nav:hover {\n      opacity: 1;\n      transform: translateY(-50%) scale(1.1);\n    }\n\n    .prev {\n      left: var(--st-space-12);\n    }\n\n    .next {\n      right: var(--st-space-12);\n    }\n\n    .indicators {\n      position: absolute;\n      bottom: var(--st-space-24);\n      left: 50%;\n      transform: translateX(-50%);\n      z-index: 10;\n      display: flex;\n      gap: var(--st-space-12);\n    }\n\n    .dot {\n      ${buttonResetStyles}\n      width: var(--st-space-12);\n      height: var(--st-space-12);\n      padding: 0;\n      border-radius: var(--st-radius-circle);\n      background: var(--st-color-border-strong);\n      transition:\n        background 0.3s ease,\n        transform 0.3s ease;\n    }\n\n    .dot:hover {\n      background: var(--st-color-text-muted);\n    }\n\n    .dot.active {\n      background: var(--st-color-text-strong);\n      transform: scale(1.2);\n    }\n\n    /* ---- indicator-style=\"tabs\" ---- */\n\n    :host([indicator-style='tabs']) ::slotted(*) {\n      padding-bottom: var(--st-carousel-tabs-space, 6rem);\n    }\n\n    .tabs {\n      position: absolute;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      z-index: 10;\n      color: var(--st-carousel-tab-color, var(--st-color-on-solid));\n    }\n\n    .tabs-inner {\n      display: flex;\n      align-items: flex-start;\n      gap: var(--st-space-24);\n      max-width: var(--st-cms-container-max);\n      margin: 0 auto;\n      box-sizing: border-box;\n      padding: 0 var(--st-space-24) var(--st-space-24);\n    }\n\n    .tablist {\n      flex: 1;\n      display: grid;\n      grid-auto-flow: column;\n      grid-auto-columns: minmax(0, 1fr);\n      gap: var(--st-space-24);\n    }\n\n    .tab {\n      ${buttonResetStyles}\n      position: relative;\n      display: flex;\n      flex-direction: column;\n      gap: var(--st-space-12);\n      padding: var(--st-space-12) 0;\n      color: inherit;\n      text-align: left;\n      font-size: var(--st-text-base);\n      font-weight: var(--st-font-weight-semibold);\n      line-height: 1.3;\n      opacity: 0.7;\n      transition: opacity 0.2s ease;\n    }\n\n    .tab:hover,\n    .tab.active {\n      opacity: 1;\n    }\n\n    .tab:focus-visible,\n    .play:focus-visible {\n      outline: 2px solid currentColor;\n      outline-offset: 4px;\n    }\n\n    /* Touch targets: the tab and the pause button keep their look; a pseudo-element extends the tap\n       area to at least 44x44 CSS px. */\n    .tab::after,\n    .play::after {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      width: max(100%, 44px);\n      height: max(100%, 44px);\n      transform: translate(-50%, -50%);\n    }\n\n    .progress {\n      position: relative;\n      display: block;\n      height: 3px;\n      border-radius: 2px;\n      overflow: hidden;\n      background: color-mix(in oklch, currentColor 30%, transparent);\n    }\n\n    .fill {\n      position: absolute;\n      inset: 0;\n      background: currentColor;\n      transform: scaleX(0);\n      transform-origin: left center;\n    }\n\n    .tab.active .fill {\n      transform: scaleX(1);\n    }\n\n    .tab.active.running .fill {\n      animation: st-carousel-progress var(--st-carousel-interval, 5000ms) linear both;\n    }\n\n    :host([data-paused]) .tab.active.running .fill {\n      animation-play-state: paused;\n    }\n\n    @keyframes st-carousel-progress {\n      from {\n        transform: scaleX(0);\n      }\n      to {\n        transform: scaleX(1);\n      }\n    }\n\n    .play {\n      ${buttonResetStyles}\n      position: relative;\n      flex: none;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--st-size-32);\n      height: var(--st-size-32);\n      margin-top: var(--st-space-4);\n      border-radius: var(--st-radius-circle);\n      color: inherit;\n      box-shadow: inset 0 0 0 1.5px color-mix(in oklch, currentColor 60%, transparent);\n    }\n\n    .play:hover {\n      background: color-mix(in oklch, currentColor 15%, transparent);\n    }\n\n    .tab-current {\n      display: none;\n    }\n\n    @media (max-width: 768px) {\n      .tablist {\n        gap: var(--st-space-8);\n      }\n\n      .tab-label {\n        display: none;\n      }\n\n      .tab-current {\n        display: block;\n        margin: 0 0 var(--st-space-4);\n        font-size: var(--st-text-base);\n        font-weight: var(--st-font-weight-semibold);\n      }\n\n      .tabs-inner {\n        flex-wrap: wrap;\n        align-items: center;\n      }\n    }\n\n    @media (min-width: 1024px) {\n      .tabs-inner {\n        padding: 0 var(--st-space-32) var(--st-space-32);\n      }\n    }\n\n    ${reducedMotionStyles}\n    @media (prefers-reduced-motion: reduce) {\n      ::slotted([data-st-active]) {\n        animation: none !important;\n      }\n      .tab.active.running .fill {\n        animation: none;\n      }\n    }\n  `;\n\n  @property({ type: Boolean, attribute: 'auto-play' })\n  autoPlay = true;\n\n  /** Autoplay delay in milliseconds. */\n  @property({ type: Number })\n  interval = 5000;\n\n  /** Pause autoplay while the pointer is over the carousel. Turn off for a hero that fills the\n   * screen; the tabs' pause button and keyboard focus still pause it. */\n  @property({ type: Boolean, attribute: 'pause-on-hover' })\n  pauseOnHover = true;\n\n  @property({ type: Boolean, attribute: 'show-arrows' })\n  showArrows = true;\n\n  @property({ type: Boolean, attribute: 'show-indicators' })\n  showIndicators = true;\n\n  /** `dots` (default) or `tabs`: labelled tabs with progress bars along the bottom. */\n  @property({ type: String, reflect: true, attribute: 'indicator-style' })\n  indicatorStyle: 'dots' | 'tabs' = 'dots';\n\n  /** `slide` (default) or `fade`. */\n  @property({ type: String, reflect: true })\n  transition: 'slide' | 'fade' = 'slide';\n\n  /** Tab labels, one per slide, for `indicator-style=\"tabs\"`. Missing entries fall back to the slide's `data-tab-label`, then its `title`. */\n  @property({ attribute: false })\n  tabLabels: string[] = [];\n\n  @state() private index = 0;\n  @state() private count = 0;\n  @state() private slideLabels: string[] = [];\n  /** Paused with the pause button; stays paused until the button is pressed again. */\n  @state() private userPaused = false;\n  /** Pointer is over the carousel (only counts with `pause-on-hover`). */\n  @state() private hovered = false;\n  /** Focus is inside the carousel, other than the play button. */\n  @state() private focused = false;\n  /** False until the slides first change: the first slide is on screen at first paint and does not animate. */\n  @state() private turned = false;\n  private timer?: ReturnType<typeof setTimeout>;\n  /** Time left on the current slide, so a pause resumes where it stopped. */\n  private remaining = 0;\n  private startedAt = 0;\n  private reducedMotion?: MediaQueryList;\n\n  private onReducedMotionChange = (event: MediaQueryListEvent) => {\n    if (event.matches) this.hold(() => (this.userPaused = true));\n  };\n\n  connectedCallback() {\n    super.connectedCallback();\n    if (!this.hasAttribute('role')) this.setAttribute('role', 'region');\n    this.setAttribute('aria-roledescription', 'carousel');\n    // Visitors who ask for reduced motion get a still carousel: autoplay starts paused (the play\n    // button still starts it), and turning the OS setting on later pauses it too.\n    this.reducedMotion = typeof window !== 'undefined' && window.matchMedia ? window.matchMedia(REDUCED_MOTION_QUERY) : undefined;\n    if (this.reducedMotion?.matches) this.hold(() => (this.userPaused = true));\n    this.reducedMotion?.addEventListener('change', this.onReducedMotionChange);\n    this.addEventListener('mouseenter', this.onPointerEnter);\n    this.addEventListener('mouseleave', this.onPointerLeave);\n    this.addEventListener('focusin', this.onFocusIn);\n    this.addEventListener('focusout', this.onFocusOut);\n  }\n\n  disconnectedCallback() {\n    this.stopTimer();\n    this.reducedMotion?.removeEventListener('change', this.onReducedMotionChange);\n    this.reducedMotion = undefined;\n    this.removeEventListener('mouseenter', this.onPointerEnter);\n    this.removeEventListener('mouseleave', this.onPointerLeave);\n    this.removeEventListener('focusin', this.onFocusIn);\n    this.removeEventListener('focusout', this.onFocusOut);\n    super.disconnectedCallback();\n  }\n\n  protected willUpdate(changed: Map<string, unknown>) {\n    if (changed.has('interval')) this.style.setProperty('--st-carousel-interval', `${this.interval}ms`);\n  }\n\n  protected updated(changed: Map<string, unknown>) {\n    if (changed.has('index') || changed.has('count') || changed.has('indicatorStyle') || changed.has('tabLabels') || changed.has('turned')) this.syncSlides();\n    if (changed.has('autoPlay') || changed.has('interval') || changed.has('count')) this.restartTimer();\n  }\n\n  private get halted(): boolean {\n    return this.hovered || this.focused || this.userPaused;\n  }\n\n  /** Applies a pause-state change, freezing or resuming the timer (and the tab progress bar). */\n  private hold(update: () => void) {\n    const was = this.halted;\n    update();\n    const now = this.halted;\n    if (was === now) return;\n    this.toggleAttribute('data-paused', now);\n    if (now) {\n      if (this.timer !== undefined) this.remaining -= performance.now() - this.startedAt;\n      this.stopTimer();\n    } else {\n      this.startTimer();\n    }\n  }\n\n  private onPointerEnter = () => {\n    if (this.pauseOnHover) this.hold(() => (this.hovered = true));\n  };\n\n  private onPointerLeave = () => this.hold(() => (this.hovered = false));\n\n  /** Focus inside the carousel pauses it (WCAG 2.2.2), but focusing the play button does not, so pressing play starts it. */\n  private onFocusIn = (event: FocusEvent) => {\n    const target = event.composedPath()[0];\n    const onPlay = target instanceof Element && target.classList.contains('play');\n    this.hold(() => (this.focused = !onPlay));\n  };\n\n  private onFocusOut = () => this.hold(() => (this.focused = false));\n\n  private togglePlay = () =>\n    this.hold(() => {\n      this.userPaused = !this.userPaused;\n      // A press while the pointer rests on the carousel starts it; hover pausing applies again on re-entry.\n      this.hovered = false;\n    });\n\n  private get slides(): Element[] {\n    return this.shadowRoot?.querySelector('slot')?.assignedElements({ flatten: true }) ?? [];\n  }\n\n  private labelFor(i: number): string {\n    return this.tabLabels[i] || this.slideLabels[i] || `Slide ${i + 1}`;\n  }\n\n  private syncSlides() {\n    const slides = this.slides;\n    slides.forEach((el, i) => {\n      const active = i === this.index;\n      el.toggleAttribute('data-st-active', active);\n      el.toggleAttribute('data-st-still', active && !this.turned);\n      el.setAttribute('role', 'group');\n      el.setAttribute('aria-roledescription', 'slide');\n      el.setAttribute('aria-label', `${i + 1} of ${slides.length}`);\n    });\n  }\n\n  private onSlotChange() {\n    const slides = this.slides;\n    this.count = slides.length;\n    this.slideLabels = slides.map(el => (el as HTMLElement).dataset.tabLabel || (el as HTMLElement).title || '');\n    if (this.index >= this.count) this.index = 0;\n    this.preloadImage(slides[0]);\n    this.syncSlides();\n  }\n\n  /**\n   * The first slide's image is the one visitors see first, so it is preloaded at high priority. The\n   * other slides are display:none (their CSS backgrounds are not fetched) until they are shown.\n   */\n  private preloadImage(slide?: Element) {\n    const src = (slide as (Element & { imageSrc?: string }) | undefined)?.imageSrc || slide?.getAttribute('image-src');\n    if (!src) return;\n    const preloaded = Array.from(document.head.querySelectorAll('link[rel=\"preload\"]')).some(link => link.getAttribute('href') === src);\n    if (preloaded) return;\n    const link = document.createElement('link');\n    link.rel = 'preload';\n    link.as = 'image';\n    link.href = src;\n    link.setAttribute('fetchpriority', 'high');\n    document.head.append(link);\n  }\n\n  private stopTimer() {\n    if (this.timer !== undefined) clearTimeout(this.timer);\n    this.timer = undefined;\n  }\n\n  private startTimer() {\n    this.stopTimer();\n    if (!this.autoPlay || this.count < 2 || this.halted) return;\n    this.startedAt = performance.now();\n    this.timer = setTimeout(() => this.go(this.index + 1, 'next'), Math.max(0, this.remaining));\n  }\n\n  private restartTimer() {\n    this.remaining = this.interval;\n    this.startTimer();\n  }\n\n  private go(target: number, direction: 'next' | 'prev') {\n    if (this.count === 0) return;\n    this.turned = true;\n    this.setAttribute('data-direction', direction);\n    this.index = (target + this.count) % this.count;\n    this.dispatchEvent(\n      new CustomEvent<CarouselChangeEventDetail>('carousel-change', {\n        detail: { index: this.index },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n    this.restartTimer();\n  }\n\n  private onTabKeydown(event: KeyboardEvent) {\n    const step = { ArrowRight: 1, ArrowLeft: -1 }[event.key];\n    let target: number | undefined;\n    if (step !== undefined) target = this.index + step;\n    else if (event.key === 'Home') target = 0;\n    else if (event.key === 'End') target = this.count - 1;\n    if (target === undefined) return;\n    event.preventDefault();\n    this.go(target, step === -1 || target < this.index ? 'prev' : 'next');\n    void this.updateComplete.then(() => this.renderRoot.querySelector<HTMLElement>('.tab.active')?.focus());\n  }\n\n  private renderTabs() {\n    const running = this.autoPlay && this.count > 1;\n    return html`<div class=\"tabs\" part=\"tabs\">\n      <div class=\"tabs-inner\">\n        <p class=\"tab-current\" aria-hidden=\"true\">${this.labelFor(this.index)}</p>\n        <div class=\"tablist\" role=\"tablist\" aria-label=\"Slides\" @keydown=${this.onTabKeydown}>\n          ${Array.from({ length: this.count }, (_, i) => {\n            const active = i === this.index;\n            return html`\n              <button\n                part=\"tab\"\n                type=\"button\"\n                role=\"tab\"\n                aria-label=${this.labelFor(i)}\n                class=\"tab ${active ? 'active' : ''} ${running ? 'running' : ''}\"\n                aria-selected=${active ? 'true' : 'false'}\n                tabindex=${active ? 0 : -1}\n                @click=${() => active || this.go(i, i > this.index ? 'next' : 'prev')}\n              >\n                <span class=\"progress\" part=\"progress\"><span class=\"fill\"></span></span>\n                <span class=\"tab-label\">${this.labelFor(i)}</span>\n              </button>\n            `;\n          })}\n        </div>\n        ${running\n          ? html`<button\n              part=\"play-button\"\n              type=\"button\"\n              class=\"play\"\n              aria-label=${this.userPaused ? 'Play slides' : 'Pause slides'}\n              @click=${this.togglePlay}\n            >\n              ${this.userPaused\n                ? html`<svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" aria-hidden=\"true\"><path d=\"M3 1.5v9l7.5-4.5z\" fill=\"currentColor\" /></svg>`\n                : html`<svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" aria-hidden=\"true\"><path d=\"M2.5 1.5h2.5v9H2.5zM7 1.5h2.5v9H7z\" fill=\"currentColor\" /></svg>`}\n            </button>`\n          : nothing}\n      </div>\n    </div>`;\n  }\n\n  private renderDots() {\n    return html`<div class=\"indicators\" part=\"indicators\">\n      ${Array.from(\n        { length: this.count },\n        (_, i) => html`\n          <button\n            part=\"dot\"\n            class=\"dot ${i === this.index ? 'active' : ''}\"\n            aria-label=\"Go to slide ${i + 1}\"\n            aria-current=${i === this.index ? 'true' : 'false'}\n            @click=${() => this.go(i, i > this.index ? 'next' : 'prev')}\n          ></button>\n        `,\n      )}\n    </div>`;\n  }\n\n  render() {\n    const multiple = this.count > 1;\n    return html`\n      <div class=\"viewport\" part=\"viewport\">\n        <slot @slotchange=${this.onSlotChange}></slot>\n      </div>\n      ${multiple\n        ? html`<div class=\"sr-only\" aria-live=${this.halted ? 'polite' : 'off'} aria-atomic=\"true\">${this.index + 1} of ${this.count}</div>`\n        : nothing}\n      ${this.showArrows && multiple\n        ? html`\n            <button part=\"nav-button prev\" class=\"nav prev\" aria-label=\"Previous Slide\" @click=${() => this.go(this.index - 1, 'prev')}>&#10094;</button>\n            <button part=\"nav-button next\" class=\"nav next\" aria-label=\"Next Slide\" @click=${() => this.go(this.index + 1, 'next')}>&#10095;</button>\n          `\n        : nothing}\n      ${this.showIndicators && multiple ? (this.indicatorStyle === 'tabs' ? this.renderTabs() : this.renderDots()) : nothing}\n    `;\n  }\n}\n"],"mappings":"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AAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAwFf,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QA6CjB,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAsDjB,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QA8EjB,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAkDnB,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYvB;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,WAAW,YAAY,CAAC;AAAA,GAxUxC,SAyUX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA5Uf,SA6UX;AAKA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,WAAW,iBAAiB,CAAC;AAAA,GAjV7C,SAkVX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,WAAW,cAAc,CAAC;AAAA,GApV1C,SAqVX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,WAAW,kBAAkB,CAAC;AAAA,GAvV9C,SAwVX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM,WAAW,kBAAkB,CAAC;AAAA,GA3V5D,SA4VX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GA/V9B,SAgWX;AAIA;AAAA,EADC,SAAS,EAAE,WAAW,MAAM,CAAC;AAAA,GAnWnB,SAoWX;AAEiB;AAAA,EAAhB,MAAM;AAAA,GAtWI,SAsWM;AACA;AAAA,EAAhB,MAAM;AAAA,GAvWI,SAuWM;AACA;AAAA,EAAhB,MAAM;AAAA,GAxWI,SAwWM;AAEA;AAAA,EAAhB,MAAM;AAAA,GA1WI,SA0WM;AAEA;AAAA,EAAhB,MAAM;AAAA,GA5WI,SA4WM;AAEA;AAAA,EAAhB,MAAM;AAAA,GA9WI,SA8WM;AAEA;AAAA,EAAhB,MAAM;AAAA,GAhXI,SAgXM;AAhXN,WAAN;AAAA,EADN,cAAc,aAAa;AAAA,GACf;","names":["link"]}