feat: Fluent UI Outlook Lite + connections mockup

node_modules/embla-carousel-fade/README.md

@@ -0,0 +1,233 @@
+<br />
+<div align="center">
+  <p align="center">
+    <a href="https://www.embla-carousel.com/"><img width="100" height="100" src="https://www.embla-carousel.com/embla-logo.svg" alt="Embla Carousel">
+    </a>
+  </p>
+
+  <p align="center">
+    <a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/npm/l/embla-carousel?color=%238ab4f8"></a>
+    <a href="https://www.npmjs.com/package/embla-carousel-fade"><img src="https://img.shields.io/npm/v/embla-carousel-fade.svg?color=%23c1a8e2"></a>
+    <a href="https://github.com/davidjerleke/embla-carousel/actions?query=workflow%3A%22Continuous+Integration%22"><img src="https://img.shields.io/github/actions/workflow/status/davidjerleke/embla-carousel/cd.yml?color=%238ab4f8"></a>
+    <a href="https://prettier.io"><img src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?color=%23c1a8e2"></a>
+    <a href="https://bundlephobia.com/result?p=embla-carousel-fade@latest"><img src="https://img.shields.io/bundlephobia/minzip/embla-carousel-fade?color=%238ab4f8&label=gzip%20size">
+    </a>
+  </p>
+
+  <strong>
+    <h2 align="center">Embla Carousel Fade</h2>
+  </strong>
+
+  <p align="center">
+    <strong>Embla Carousel</strong> is a bare bones carousel library with great fluid motion and awesome swipe precision. It's library agnostic, dependency free and 100% open source.
+  </p>
+
+  <br>
+
+  <p align="center">
+    <strong>
+      <code>&nbsp;<a href="https://www.embla-carousel.com/examples/predefined/">Examples</a>&nbsp;</code>
+    </strong>
+  </p>
+
+  <p align="center">
+    <strong>
+      <code>&nbsp;<a href="https://www.embla-carousel.com/examples/generator/">Generator</a>&nbsp;</code>
+    </strong>
+  </p>
+
+  <p align="center">
+    <strong>
+      <code>&nbsp;<a href="https://www.embla-carousel.com/get-started/#choose-installation-type">Installation</a>&nbsp;</code>
+    </strong>
+  </p>
+</div>
+
+<br>
+
+<div align="center">
+  <strong>
+    <h2 align="center">Ready for</h2>
+  </strong>
+  
+  <p align="center">
+    <a href="https://www.embla-carousel.com/get-started/module/">
+      <img src="https://www.embla-carousel.com/javascript-logo.svg" width="40" height="40" />
+    </a>
+    <a href="https://www.embla-carousel.com/get-started/module/">
+      <img src="https://www.embla-carousel.com/typescript-logo.svg" width="40" height="40" />
+    </a>
+    <a href="https://www.embla-carousel.com/get-started/react/">
+      <img src="https://www.embla-carousel.com/react-logo.svg" width="40" height="40" />
+    </a>
+    <a href="https://www.embla-carousel.com/get-started/vue/">
+      <img src="https://www.embla-carousel.com/vue-logo.svg" width="40" height="40" />
+    </a>
+    <a href="https://www.embla-carousel.com/get-started/svelte/">
+      <img src="https://www.embla-carousel.com/svelte-logo.svg" width="40" height="40" />
+    </a>
+    <a href="https://www.embla-carousel.com/get-started/solid/">
+      <img src="https://www.embla-carousel.com/solid-logo.svg" width="40" height="40" />
+    </a>
+    <a href="https://github.com/donaldxdonald/embla-carousel-angular">
+      <img src="https://www.embla-carousel.com/angular-logo.svg" width="40" height="40" />
+    </a>
+  </p>
+</div>
+
+<br>
+
+<div align="center">
+  <strong>
+    <h2 align="center">Contributors</h2>
+  </strong>
+  <p align="center">
+    Thank you to all contributors for making <a href="https://www.embla-carousel.com/">Embla Carousel</a> awesome! <a href="https://github.com/davidjerleke/embla-carousel/blob/master/CONTRIBUTING.md">Contributions</a> are welcome.
+  </p>
+  <p align="center">
+    <a href="https://github.com/davidjerleke">
+      <img src="https://avatars2.githubusercontent.com/u/11529148?s=120&v=4" title="davidjerleke" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/Ronit-gurjar">
+      <img src="https://avatars2.githubusercontent.com/u/92150685?s=120&v=4" title="Ronit-gurjar" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/zaaakher">
+      <img src="https://avatars2.githubusercontent.com/u/46135573?s=120&v=4" title="zaaakher" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/xiel">
+      <img src="https://avatars2.githubusercontent.com/u/615522?s=120&v=4" title="xiel" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/javiergonzalezGenially">
+      <img src="https://avatars2.githubusercontent.com/u/78730098?s=120&v=4" title="javiergonzalezGenially" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/meirroth">
+      <img src="https://avatars2.githubusercontent.com/u/12494197?s=120&v=4" title="meirroth" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/hamidrezahanafi">
+      <img src="https://avatars2.githubusercontent.com/u/91487491?s=120&v=4" title="hamidrezahanafi" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/negezor">
+      <img src="https://avatars2.githubusercontent.com/u/9392723?s=120&v=4" title="negezor" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/th-km">
+      <img src="https://avatars2.githubusercontent.com/u/35410212?s=120&v=4" title="th-km" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/openscript">
+      <img src="https://avatars2.githubusercontent.com/u/1105080?s=120&v=4" title="openscript" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/nwidynski">
+      <img src="https://avatars2.githubusercontent.com/u/25958801?s=120&v=4" title="nwidynski" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/wopian">
+      <img src="https://avatars2.githubusercontent.com/u/3440094?s=120&v=4" title="wopian" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/horseeyephil">
+      <img src="https://avatars2.githubusercontent.com/u/32337092?s=120&v=4" title="horseeyephil" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/pipisasa">
+      <img src="https://avatars2.githubusercontent.com/u/54534600?s=120&v=4" title="pipisasa" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/ranno-lauri">
+      <img src="https://avatars2.githubusercontent.com/u/87007115?s=120&v=4" title="ranno-lauri" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/ruijdacd">
+      <img src="https://avatars2.githubusercontent.com/u/9107610?s=120&v=4" title="ruijdacd" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/rojadesign">
+      <img src="https://avatars2.githubusercontent.com/u/35687281?s=120&v=4" title="rojadesign" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/sadeghbarati">
+      <img src="https://avatars2.githubusercontent.com/u/17789047?s=120&v=4" title="sadeghbarati" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/S-Shingler">
+      <img src="https://avatars2.githubusercontent.com/u/48463809?s=120&v=4" title="S-Shingler" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/Yonom">
+      <img src="https://avatars2.githubusercontent.com/u/1394504?s=120&v=4" title="Yonom" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/smultar">
+      <img src="https://avatars2.githubusercontent.com/u/6223536?s=120&v=4" title="smultar" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/dev-suraj-kumar">
+      <img src="https://avatars2.githubusercontent.com/u/184739775?s=120&v=4" title="dev-suraj-kumar" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/Matoseb">
+      <img src="https://avatars2.githubusercontent.com/u/24431250?s=120&v=4" title="Matoseb" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/tlo-johnson">
+      <img src="https://avatars2.githubusercontent.com/u/8763144?s=120&v=4" title="tlo-johnson" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/yasuhiro-yamamoto">
+      <img src="https://avatars2.githubusercontent.com/u/25109330?s=120&v=4" title="yasuhiro-yamamoto" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/anzbert">
+      <img src="https://avatars2.githubusercontent.com/u/38823700?s=120&v=4" title="anzbert" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/sarussss">
+      <img src="https://avatars2.githubusercontent.com/u/15656996?s=120&v=4" title="sarussss" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/silllli">
+      <img src="https://avatars2.githubusercontent.com/u/9334305?s=120&v=4" title="silllli" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/nikrowell">
+      <img src="https://avatars2.githubusercontent.com/u/260039?s=120&v=4" title="nikrowell" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/mujahidfa">
+      <img src="https://avatars2.githubusercontent.com/u/17759705?s=120&v=4" title="mujahidfa" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/Mitch-At-Work">
+      <img src="https://avatars2.githubusercontent.com/u/99835933?s=120&v=4" title="Mitch-At-Work" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/romellem">
+      <img src="https://avatars2.githubusercontent.com/u/8504000?s=120&v=4" title="romellem" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/junlarsen">
+      <img src="https://avatars2.githubusercontent.com/u/42585241?s=120&v=4" title="junlarsen" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/LucasMariniFalbo">
+      <img src="https://avatars2.githubusercontent.com/u/9245477?s=120&v=4" title="LucasMariniFalbo" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/LiamMartens">
+      <img src="https://avatars2.githubusercontent.com/u/5265324?s=120&v=4" title="LiamMartens" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/S1r-Lanzelot">
+      <img src="https://avatars2.githubusercontent.com/u/4487160?s=120&v=4" title="S1r-Lanzelot" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/ishaqibrahimbot">
+      <img src="https://avatars2.githubusercontent.com/u/74908398?s=120&v=4" title="ishaqibrahimbot" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/fcasibu">
+      <img src="https://avatars2.githubusercontent.com/u/75290989?s=120&v=4" title="fcasibu" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/cundd">
+      <img src="https://avatars2.githubusercontent.com/u/743122?s=120&v=4" title="cundd" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/sedlukha">
+      <img src="https://avatars2.githubusercontent.com/u/14075940?s=120&v=4" title="sedlukha" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/allen-garvey">
+      <img src="https://avatars2.githubusercontent.com/u/9314727?s=120&v=4" title="allen-garvey" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/lesha1201">
+      <img src="https://avatars2.githubusercontent.com/u/10157660?s=120&v=4" title="lesha1201" width="50" height="50" style="max-width: 100%" />
+    </a><a href="https://github.com/SaizFerri">
+      <img src="https://avatars2.githubusercontent.com/u/19834971?s=120&v=4" title="SaizFerri" width="50" height="50" style="max-width: 100%" />
+    </a>
+  </p>
+</div>
+
+<br>
+
+<div align="center">
+  <strong>
+    <h2 align="center">Special Thanks</h2>
+  </strong>
+  <p align="center">
+    <sup>
+      <a href="https://github.com/gunnarx2">gunnarx2</a> - React wrapper <a href="https://www.embla-carousel.com/get-started/react/">useEmblaCarousel</a>.
+    </sup>
+    <br>
+    <sup>
+      <a href="https://github.com/LiamMartens">LiamMartens</a> - Solid wrapper <a href="https://www.embla-carousel.com/get-started/solid/">createEmblaCarousel</a>.
+    </sup>
+    <br>
+    <sup>
+      <a href="https://github.com/donaldxdonald">donaldxdonald</a>, <a href="https://github.com/zip-fa">zip-fa</a>, <a href="https://github.com/JeanMeche">JeanMeche</a> - Angular wrapper <a href="https://github.com/donaldxdonald/embla-carousel-angular?tab=readme-ov-file#installation">EmblaCarouselDirective</a>.
+    </sup>
+    <br>
+    <sup>
+      <a href="https://github.com/xiel">xiel</a> - Plugin <a href="https://github.com/xiel/embla-carousel-wheel-gestures">Embla Carousel Wheel Gestures</a>.
+    </sup>
+    <br>
+    <sup>
+      <a href="https://github.com/zaaakher">zaaakher</a> - Contributing <a href="https://github.com/davidjerleke/embla-carousel/blob/master/CONTRIBUTING.md">guidelines</a>.
+    </sup>
+    <br>
+    <sup>
+      <a href="https://github.com/sarussss">sarussss</a> - Answering questions.
+    </sup>
+  </p>
+</div>
+
+<br>
+
+<h2 align="center">Open Source</h2>
+
+<p align="center">
+  Embla is <a href="https://github.com/davidjerleke/embla-carousel/blob/master/LICENSE">MIT licensed</a> 💖.<br><br>
+  <sup>Embla Carousel - Copyright © 2019-present.</sup><br />
+  <sup>Package created by David Jerleke.</sup>
+</p>
+
+<p align="center">
+  <strong>· · ·</strong>
+</p>
+
+<p align="center">
+  Thanks <a href="https://www.browserstack.com">BrowserStack</a>.
+</p>
+
+<p align="center">
+  <a href="https://www.browserstack.com">
+    <img src="https://www.embla-carousel.com/browserstack-logo.svg" width="45" height="45" />
+    </a>
+</p>

node_modules/embla-carousel-fade/cjs/components/Fade.d.ts

@@ -0,0 +1,14 @@
+import { OptionsType } from './Options';
+import { CreatePluginType } from 'embla-carousel';
+declare module 'embla-carousel' {
+    interface EmblaPluginsType {
+        fade: FadeType;
+    }
+}
+export type FadeType = CreatePluginType<{}, OptionsType>;
+export type FadeOptionsType = FadeType['options'];
+declare function Fade(userOptions?: FadeOptionsType): FadeType;
+declare namespace Fade {
+    let globalOptions: FadeOptionsType | undefined;
+}
+export default Fade;

node_modules/embla-carousel-fade/cjs/components/Options.d.ts

@@ -0,0 +1,2 @@
+import { CreateOptionsType } from 'embla-carousel';
+export type OptionsType = CreateOptionsType<{}>;

node_modules/embla-carousel-fade/cjs/components/utils.d.ts

@@ -0,0 +1,2 @@
+export declare function clampNumber(number: number, min: number, max: number): number;
+export declare function isNumber(value: number | null): value is number;

node_modules/embla-carousel-fade/cjs/embla-carousel-fade.cjs.js

@@ -0,0 +1,226 @@
+'use strict';
+
+function clampNumber(number, min, max) {
+  return Math.min(Math.max(number, min), max);
+}
+function isNumber(value) {
+  return typeof value === 'number' && !isNaN(value);
+}
+
+function Fade(userOptions = {}) {
+  const fullOpacity = 1;
+  const noOpacity = 0;
+  const fadeFriction = 0.68;
+  let emblaApi;
+  let opacities = [];
+  let fadeToNextDistance;
+  let distanceFromPointerDown = 0;
+  let fadeVelocity = 0;
+  let progress = 0;
+  let shouldFadePair = false;
+  let defaultSettledBehaviour;
+  let defaultProgressBehaviour;
+  function init(emblaApiInstance) {
+    emblaApi = emblaApiInstance;
+    const selectedSnap = emblaApi.selectedScrollSnap();
+    const {
+      scrollBody,
+      containerRect,
+      axis
+    } = emblaApi.internalEngine();
+    const containerSize = axis.measureSize(containerRect);
+    fadeToNextDistance = clampNumber(containerSize * 0.75, 200, 500);
+    shouldFadePair = false;
+    opacities = emblaApi.scrollSnapList().map((_, index) => index === selectedSnap ? fullOpacity : noOpacity);
+    defaultSettledBehaviour = scrollBody.settled;
+    defaultProgressBehaviour = emblaApi.scrollProgress;
+    scrollBody.settled = settled;
+    emblaApi.scrollProgress = scrollProgress;
+    emblaApi.on('select', select).on('slideFocus', fadeToSelectedSnapInstantly).on('pointerDown', pointerDown).on('pointerUp', pointerUp);
+    disableScroll();
+    fadeToSelectedSnapInstantly();
+  }
+  function destroy() {
+    const {
+      scrollBody
+    } = emblaApi.internalEngine();
+    scrollBody.settled = defaultSettledBehaviour;
+    emblaApi.scrollProgress = defaultProgressBehaviour;
+    emblaApi.off('select', select).off('slideFocus', fadeToSelectedSnapInstantly).off('pointerDown', pointerDown).off('pointerUp', pointerUp);
+    emblaApi.slideNodes().forEach(slideNode => {
+      const slideStyle = slideNode.style;
+      slideStyle.opacity = '';
+      slideStyle.transform = '';
+      slideStyle.pointerEvents = '';
+      if (!slideNode.getAttribute('style')) slideNode.removeAttribute('style');
+    });
+  }
+  function fadeToSelectedSnapInstantly() {
+    const selectedSnap = emblaApi.selectedScrollSnap();
+    setOpacities(selectedSnap, fullOpacity);
+  }
+  function pointerUp() {
+    shouldFadePair = false;
+  }
+  function pointerDown() {
+    shouldFadePair = false;
+    distanceFromPointerDown = 0;
+    fadeVelocity = 0;
+  }
+  function select() {
+    const duration = emblaApi.internalEngine().scrollBody.duration();
+    fadeVelocity = duration ? 0 : fullOpacity;
+    shouldFadePair = true;
+    if (!duration) fadeToSelectedSnapInstantly();
+  }
+  function getSlideTransform(position) {
+    const {
+      axis
+    } = emblaApi.internalEngine();
+    const translateAxis = axis.scroll.toUpperCase();
+    return `translate${translateAxis}(${axis.direction(position)}px)`;
+  }
+  function disableScroll() {
+    const {
+      translate,
+      slideLooper
+    } = emblaApi.internalEngine();
+    translate.clear();
+    translate.toggleActive(false);
+    slideLooper.loopPoints.forEach(({
+      translate
+    }) => {
+      translate.clear();
+      translate.toggleActive(false);
+    });
+  }
+  function lockExcessiveScroll(fadeIndex) {
+    const {
+      scrollSnaps,
+      location,
+      target
+    } = emblaApi.internalEngine();
+    if (!isNumber(fadeIndex) || opacities[fadeIndex] < 0.5) return;
+    location.set(scrollSnaps[fadeIndex]);
+    target.set(location);
+  }
+  function setOpacities(fadeIndex, velocity) {
+    const scrollSnaps = emblaApi.scrollSnapList();
+    scrollSnaps.forEach((_, indexA) => {
+      const absVelocity = Math.abs(velocity);
+      const currentOpacity = opacities[indexA];
+      const isFadeIndex = indexA === fadeIndex;
+      const nextOpacity = isFadeIndex ? currentOpacity + absVelocity : currentOpacity - absVelocity;
+      const clampedOpacity = clampNumber(nextOpacity, noOpacity, fullOpacity);
+      opacities[indexA] = clampedOpacity;
+      const fadePair = isFadeIndex && shouldFadePair;
+      const indexB = emblaApi.previousScrollSnap();
+      if (fadePair) opacities[indexB] = 1 - clampedOpacity;
+      if (isFadeIndex) setProgress(fadeIndex, clampedOpacity);
+      setOpacity(indexA);
+    });
+  }
+  function setOpacity(index) {
+    const slidesInSnap = emblaApi.internalEngine().slideRegistry[index];
+    const {
+      scrollSnaps,
+      containerRect
+    } = emblaApi.internalEngine();
+    const opacity = opacities[index];
+    slidesInSnap.forEach(slideIndex => {
+      const slideStyle = emblaApi.slideNodes()[slideIndex].style;
+      const roundedOpacity = parseFloat(opacity.toFixed(2));
+      const hasOpacity = roundedOpacity > noOpacity;
+      const position = hasOpacity ? scrollSnaps[index] : containerRect.width + 2;
+      const transform = getSlideTransform(position);
+      if (hasOpacity) slideStyle.transform = transform;
+      slideStyle.opacity = roundedOpacity.toString();
+      slideStyle.pointerEvents = opacity > 0.5 ? 'auto' : 'none';
+      if (!hasOpacity) slideStyle.transform = transform;
+    });
+  }
+  function setProgress(fadeIndex, opacity) {
+    const {
+      index,
+      dragHandler,
+      scrollSnaps
+    } = emblaApi.internalEngine();
+    const pointerDown = dragHandler.pointerDown();
+    const snapFraction = 1 / (scrollSnaps.length - 1);
+    let indexA = fadeIndex;
+    let indexB = pointerDown ? emblaApi.selectedScrollSnap() : emblaApi.previousScrollSnap();
+    if (pointerDown && indexA === indexB) {
+      const reverseSign = Math.sign(distanceFromPointerDown) * -1;
+      indexA = indexB;
+      indexB = index.clone().set(indexB).add(reverseSign).get();
+    }
+    const currentPosition = indexB * snapFraction;
+    const diffPosition = (indexA - indexB) * snapFraction;
+    progress = currentPosition + diffPosition * opacity;
+  }
+  function getFadeIndex() {
+    const {
+      dragHandler,
+      index,
+      scrollBody
+    } = emblaApi.internalEngine();
+    const selectedSnap = emblaApi.selectedScrollSnap();
+    if (!dragHandler.pointerDown()) return selectedSnap;
+    const directionSign = Math.sign(scrollBody.velocity());
+    const distanceSign = Math.sign(distanceFromPointerDown);
+    const nextSnap = index.clone().set(selectedSnap).add(directionSign * -1).get();
+    if (!directionSign || !distanceSign) return null;
+    return distanceSign === directionSign ? nextSnap : selectedSnap;
+  }
+  function fade(emblaApi) {
+    const {
+      dragHandler,
+      scrollBody
+    } = emblaApi.internalEngine();
+    const pointerDown = dragHandler.pointerDown();
+    const velocity = scrollBody.velocity();
+    const duration = scrollBody.duration();
+    const fadeIndex = getFadeIndex();
+    const noFadeIndex = !isNumber(fadeIndex);
+    if (pointerDown) {
+      if (!velocity) return;
+      distanceFromPointerDown += velocity;
+      fadeVelocity = Math.abs(velocity / fadeToNextDistance);
+      lockExcessiveScroll(fadeIndex);
+    }
+    if (!pointerDown) {
+      if (!duration || noFadeIndex) return;
+      fadeVelocity += (fullOpacity - opacities[fadeIndex]) / duration;
+      fadeVelocity *= fadeFriction;
+    }
+    if (noFadeIndex) return;
+    setOpacities(fadeIndex, fadeVelocity);
+  }
+  function settled() {
+    const {
+      target,
+      location
+    } = emblaApi.internalEngine();
+    const diffToTarget = target.get() - location.get();
+    const notReachedTarget = Math.abs(diffToTarget) >= 1;
+    const fadeIndex = getFadeIndex();
+    const noFadeIndex = !isNumber(fadeIndex);
+    fade(emblaApi);
+    if (noFadeIndex || notReachedTarget) return false;
+    return opacities[fadeIndex] > 0.999;
+  }
+  function scrollProgress() {
+    return progress;
+  }
+  const self = {
+    name: 'fade',
+    options: userOptions,
+    init,
+    destroy
+  };
+  return self;
+}
+Fade.globalOptions = undefined;
+
+module.exports = Fade;
+//# sourceMappingURL=embla-carousel-fade.cjs.js.map

node_modules/embla-carousel-fade/cjs/index.d.ts

@@ -0,0 +1,2 @@
+export { FadeType, FadeOptionsType } from './components/Fade';
+export { default } from './components/Fade';

node_modules/embla-carousel-fade/cjs/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "embla-carousel-fade",
+  "version": "8.6.0",
+  "author": "David Jerleke",
+  "description": "A fade plugin for Embla Carousel",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/davidjerleke/embla-carousel"
+  },
+  "bugs": {
+    "url": "https://github.com/davidjerleke/embla-carousel/issues"
+  },
+  "homepage": "https://www.embla-carousel.com",
+  "license": "MIT",
+  "keywords": [
+    "slider",
+    "carousel",
+    "slideshow",
+    "gallery",
+    "lightweight",
+    "touch",
+    "javascript",
+    "typescript",
+    "react",
+    "vue",
+    "svelte",
+    "solid"
+  ],
+  "types": "index.d.ts",
+  "sideEffects": false,
+  "files": [
+    "embla-carousel-fade*",
+    "components/**/*",
+    "index.d.ts"
+  ],
+  "devDependencies": {
+    "@types/jest": "^29.5.6",
+    "@typescript-eslint/eslint-plugin": "^6.9.0",
+    "@typescript-eslint/parser": "^6.9.0",
+    "eslint": "^8.52.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
+    "prettier": "2.8.8",
+    "rollup": "^4.22.4",
+    "ts-jest": "^29.1.1",
+    "typescript": "^5.2.2"
+  },
+  "peerDependencies": {
+    "embla-carousel": "8.6.0"
+  },
+  "main": "embla-carousel-fade.cjs.js",
+  "type": "commonjs"
+}

node_modules/embla-carousel-fade/components/Fade.d.ts

@@ -0,0 +1,14 @@
+import { OptionsType } from './Options';
+import { CreatePluginType } from 'embla-carousel';
+declare module 'embla-carousel' {
+    interface EmblaPluginsType {
+        fade: FadeType;
+    }
+}
+export type FadeType = CreatePluginType<{}, OptionsType>;
+export type FadeOptionsType = FadeType['options'];
+declare function Fade(userOptions?: FadeOptionsType): FadeType;
+declare namespace Fade {
+    let globalOptions: FadeOptionsType | undefined;
+}
+export default Fade;

node_modules/embla-carousel-fade/components/Options.d.ts

@@ -0,0 +1,2 @@
+import { CreateOptionsType } from 'embla-carousel';
+export type OptionsType = CreateOptionsType<{}>;

node_modules/embla-carousel-fade/components/utils.d.ts

@@ -0,0 +1,2 @@
+export declare function clampNumber(number: number, min: number, max: number): number;
+export declare function isNumber(value: number | null): value is number;

node_modules/embla-carousel-fade/embla-carousel-fade.umd.js

@@ -0,0 +1 @@
+!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(n="undefined"!=typeof globalThis?globalThis:n||self).EmblaCarouselFade=t()}(this,(function(){"use strict";function n(n,t,e){return Math.min(Math.max(n,t),e)}function t(n){return"number"==typeof n&&!isNaN(n)}function e(e={}){const o=1,i=0,r=.68;let s,l,c,a,f=[],d=0,u=0,p=0,g=!1;function y(){b(s.selectedScrollSnap(),o)}function E(){g=!1}function S(){g=!1,d=0,u=0}function h(){const n=s.internalEngine().scrollBody.duration();u=n?0:o,g=!0,n||y()}function m(n){const{scrollSnaps:e,location:o,target:i}=s.internalEngine();!t(n)||f[n]<.5||(o.set(e[n]),i.set(o))}function b(t,e){s.scrollSnapList().forEach(((r,l)=>{const c=Math.abs(e),a=f[l],u=l===t,y=n(u?a+c:a-c,i,o);f[l]=y;const E=u&&g,S=s.previousScrollSnap();E&&(f[S]=1-y),u&&function(n,t){const{index:e,dragHandler:o,scrollSnaps:i}=s.internalEngine(),r=o.pointerDown(),l=1/(i.length-1);let c=n,a=r?s.selectedScrollSnap():s.previousScrollSnap();if(r&&c===a){const n=-1*Math.sign(d);c=a,a=e.clone().set(a).add(n).get()}const f=a*l,u=(c-a)*l;p=f+u*t}(t,y),function(n){const t=s.internalEngine().slideRegistry[n],{scrollSnaps:e,containerRect:o}=s.internalEngine(),r=f[n];t.forEach((t=>{const l=s.slideNodes()[t].style,c=parseFloat(r.toFixed(2)),a=c>i,f=function(n){const{axis:t}=s.internalEngine();return`translate${t.scroll.toUpperCase()}(${t.direction(n)}px)`}(a?e[n]:o.width+2);a&&(l.transform=f),l.opacity=c.toString(),l.pointerEvents=r>.5?"auto":"none",a||(l.transform=f)}))}(l)}))}function v(){const{dragHandler:n,index:t,scrollBody:e}=s.internalEngine(),o=s.selectedScrollSnap();if(!n.pointerDown())return o;const i=Math.sign(e.velocity()),r=Math.sign(d),l=t.clone().set(o).add(-1*i).get();return i&&r?r===i?l:o:null}function x(){const{target:n,location:e}=s.internalEngine(),i=n.get()-e.get(),c=Math.abs(i)>=1,a=v(),p=!t(a);return function(n){const{dragHandler:e,scrollBody:i}=n.internalEngine(),s=e.pointerDown(),c=i.velocity(),a=i.duration(),p=v(),g=!t(p);if(s){if(!c)return;d+=c,u=Math.abs(c/l),m(p)}if(!s){if(!a||g)return;u+=(o-f[p])/a,u*=r}g||b(p,u)}(s),!p&&!c&&f[a]>.999}function M(){return p}return{name:"fade",options:e,init:function(t){s=t;const e=s.selectedScrollSnap(),{scrollBody:r,containerRect:d,axis:u}=s.internalEngine(),p=u.measureSize(d);l=n(.75*p,200,500),g=!1,f=s.scrollSnapList().map(((n,t)=>t===e?o:i)),c=r.settled,a=s.scrollProgress,r.settled=x,s.scrollProgress=M,s.on("select",h).on("slideFocus",y).on("pointerDown",S).on("pointerUp",E),function(){const{translate:n,slideLooper:t}=s.internalEngine();n.clear(),n.toggleActive(!1),t.loopPoints.forEach((({translate:n})=>{n.clear(),n.toggleActive(!1)}))}(),y()},destroy:function(){const{scrollBody:n}=s.internalEngine();n.settled=c,s.scrollProgress=a,s.off("select",h).off("slideFocus",y).off("pointerDown",S).off("pointerUp",E),s.slideNodes().forEach((n=>{const t=n.style;t.opacity="",t.transform="",t.pointerEvents="",n.getAttribute("style")||n.removeAttribute("style")}))}}}return e.globalOptions=void 0,e}));

node_modules/embla-carousel-fade/esm/components/Fade.d.ts

@@ -0,0 +1,14 @@
+import { OptionsType } from './Options.js';
+import { CreatePluginType } from 'embla-carousel';
+declare module 'embla-carousel' {
+    interface EmblaPluginsType {
+        fade: FadeType;
+    }
+}
+export type FadeType = CreatePluginType<{}, OptionsType>;
+export type FadeOptionsType = FadeType['options'];
+declare function Fade(userOptions?: FadeOptionsType): FadeType;
+declare namespace Fade {
+    let globalOptions: FadeOptionsType | undefined;
+}
+export default Fade;

node_modules/embla-carousel-fade/esm/components/Options.d.ts

@@ -0,0 +1,2 @@
+import { CreateOptionsType } from 'embla-carousel';
+export type OptionsType = CreateOptionsType<{}>;

node_modules/embla-carousel-fade/esm/components/utils.d.ts

@@ -0,0 +1,2 @@
+export declare function clampNumber(number: number, min: number, max: number): number;
+export declare function isNumber(value: number | null): value is number;

node_modules/embla-carousel-fade/esm/embla-carousel-fade.esm.js

@@ -0,0 +1,224 @@
+function clampNumber(number, min, max) {
+  return Math.min(Math.max(number, min), max);
+}
+function isNumber(value) {
+  return typeof value === 'number' && !isNaN(value);
+}
+
+function Fade(userOptions = {}) {
+  const fullOpacity = 1;
+  const noOpacity = 0;
+  const fadeFriction = 0.68;
+  let emblaApi;
+  let opacities = [];
+  let fadeToNextDistance;
+  let distanceFromPointerDown = 0;
+  let fadeVelocity = 0;
+  let progress = 0;
+  let shouldFadePair = false;
+  let defaultSettledBehaviour;
+  let defaultProgressBehaviour;
+  function init(emblaApiInstance) {
+    emblaApi = emblaApiInstance;
+    const selectedSnap = emblaApi.selectedScrollSnap();
+    const {
+      scrollBody,
+      containerRect,
+      axis
+    } = emblaApi.internalEngine();
+    const containerSize = axis.measureSize(containerRect);
+    fadeToNextDistance = clampNumber(containerSize * 0.75, 200, 500);
+    shouldFadePair = false;
+    opacities = emblaApi.scrollSnapList().map((_, index) => index === selectedSnap ? fullOpacity : noOpacity);
+    defaultSettledBehaviour = scrollBody.settled;
+    defaultProgressBehaviour = emblaApi.scrollProgress;
+    scrollBody.settled = settled;
+    emblaApi.scrollProgress = scrollProgress;
+    emblaApi.on('select', select).on('slideFocus', fadeToSelectedSnapInstantly).on('pointerDown', pointerDown).on('pointerUp', pointerUp);
+    disableScroll();
+    fadeToSelectedSnapInstantly();
+  }
+  function destroy() {
+    const {
+      scrollBody
+    } = emblaApi.internalEngine();
+    scrollBody.settled = defaultSettledBehaviour;
+    emblaApi.scrollProgress = defaultProgressBehaviour;
+    emblaApi.off('select', select).off('slideFocus', fadeToSelectedSnapInstantly).off('pointerDown', pointerDown).off('pointerUp', pointerUp);
+    emblaApi.slideNodes().forEach(slideNode => {
+      const slideStyle = slideNode.style;
+      slideStyle.opacity = '';
+      slideStyle.transform = '';
+      slideStyle.pointerEvents = '';
+      if (!slideNode.getAttribute('style')) slideNode.removeAttribute('style');
+    });
+  }
+  function fadeToSelectedSnapInstantly() {
+    const selectedSnap = emblaApi.selectedScrollSnap();
+    setOpacities(selectedSnap, fullOpacity);
+  }
+  function pointerUp() {
+    shouldFadePair = false;
+  }
+  function pointerDown() {
+    shouldFadePair = false;
+    distanceFromPointerDown = 0;
+    fadeVelocity = 0;
+  }
+  function select() {
+    const duration = emblaApi.internalEngine().scrollBody.duration();
+    fadeVelocity = duration ? 0 : fullOpacity;
+    shouldFadePair = true;
+    if (!duration) fadeToSelectedSnapInstantly();
+  }
+  function getSlideTransform(position) {
+    const {
+      axis
+    } = emblaApi.internalEngine();
+    const translateAxis = axis.scroll.toUpperCase();
+    return `translate${translateAxis}(${axis.direction(position)}px)`;
+  }
+  function disableScroll() {
+    const {
+      translate,
+      slideLooper
+    } = emblaApi.internalEngine();
+    translate.clear();
+    translate.toggleActive(false);
+    slideLooper.loopPoints.forEach(({
+      translate
+    }) => {
+      translate.clear();
+      translate.toggleActive(false);
+    });
+  }
+  function lockExcessiveScroll(fadeIndex) {
+    const {
+      scrollSnaps,
+      location,
+      target
+    } = emblaApi.internalEngine();
+    if (!isNumber(fadeIndex) || opacities[fadeIndex] < 0.5) return;
+    location.set(scrollSnaps[fadeIndex]);
+    target.set(location);
+  }
+  function setOpacities(fadeIndex, velocity) {
+    const scrollSnaps = emblaApi.scrollSnapList();
+    scrollSnaps.forEach((_, indexA) => {
+      const absVelocity = Math.abs(velocity);
+      const currentOpacity = opacities[indexA];
+      const isFadeIndex = indexA === fadeIndex;
+      const nextOpacity = isFadeIndex ? currentOpacity + absVelocity : currentOpacity - absVelocity;
+      const clampedOpacity = clampNumber(nextOpacity, noOpacity, fullOpacity);
+      opacities[indexA] = clampedOpacity;
+      const fadePair = isFadeIndex && shouldFadePair;
+      const indexB = emblaApi.previousScrollSnap();
+      if (fadePair) opacities[indexB] = 1 - clampedOpacity;
+      if (isFadeIndex) setProgress(fadeIndex, clampedOpacity);
+      setOpacity(indexA);
+    });
+  }
+  function setOpacity(index) {
+    const slidesInSnap = emblaApi.internalEngine().slideRegistry[index];
+    const {
+      scrollSnaps,
+      containerRect
+    } = emblaApi.internalEngine();
+    const opacity = opacities[index];
+    slidesInSnap.forEach(slideIndex => {
+      const slideStyle = emblaApi.slideNodes()[slideIndex].style;
+      const roundedOpacity = parseFloat(opacity.toFixed(2));
+      const hasOpacity = roundedOpacity > noOpacity;
+      const position = hasOpacity ? scrollSnaps[index] : containerRect.width + 2;
+      const transform = getSlideTransform(position);
+      if (hasOpacity) slideStyle.transform = transform;
+      slideStyle.opacity = roundedOpacity.toString();
+      slideStyle.pointerEvents = opacity > 0.5 ? 'auto' : 'none';
+      if (!hasOpacity) slideStyle.transform = transform;
+    });
+  }
+  function setProgress(fadeIndex, opacity) {
+    const {
+      index,
+      dragHandler,
+      scrollSnaps
+    } = emblaApi.internalEngine();
+    const pointerDown = dragHandler.pointerDown();
+    const snapFraction = 1 / (scrollSnaps.length - 1);
+    let indexA = fadeIndex;
+    let indexB = pointerDown ? emblaApi.selectedScrollSnap() : emblaApi.previousScrollSnap();
+    if (pointerDown && indexA === indexB) {
+      const reverseSign = Math.sign(distanceFromPointerDown) * -1;
+      indexA = indexB;
+      indexB = index.clone().set(indexB).add(reverseSign).get();
+    }
+    const currentPosition = indexB * snapFraction;
+    const diffPosition = (indexA - indexB) * snapFraction;
+    progress = currentPosition + diffPosition * opacity;
+  }
+  function getFadeIndex() {
+    const {
+      dragHandler,
+      index,
+      scrollBody
+    } = emblaApi.internalEngine();
+    const selectedSnap = emblaApi.selectedScrollSnap();
+    if (!dragHandler.pointerDown()) return selectedSnap;
+    const directionSign = Math.sign(scrollBody.velocity());
+    const distanceSign = Math.sign(distanceFromPointerDown);
+    const nextSnap = index.clone().set(selectedSnap).add(directionSign * -1).get();
+    if (!directionSign || !distanceSign) return null;
+    return distanceSign === directionSign ? nextSnap : selectedSnap;
+  }
+  function fade(emblaApi) {
+    const {
+      dragHandler,
+      scrollBody
+    } = emblaApi.internalEngine();
+    const pointerDown = dragHandler.pointerDown();
+    const velocity = scrollBody.velocity();
+    const duration = scrollBody.duration();
+    const fadeIndex = getFadeIndex();
+    const noFadeIndex = !isNumber(fadeIndex);
+    if (pointerDown) {
+      if (!velocity) return;
+      distanceFromPointerDown += velocity;
+      fadeVelocity = Math.abs(velocity / fadeToNextDistance);
+      lockExcessiveScroll(fadeIndex);
+    }
+    if (!pointerDown) {
+      if (!duration || noFadeIndex) return;
+      fadeVelocity += (fullOpacity - opacities[fadeIndex]) / duration;
+      fadeVelocity *= fadeFriction;
+    }
+    if (noFadeIndex) return;
+    setOpacities(fadeIndex, fadeVelocity);
+  }
+  function settled() {
+    const {
+      target,
+      location
+    } = emblaApi.internalEngine();
+    const diffToTarget = target.get() - location.get();
+    const notReachedTarget = Math.abs(diffToTarget) >= 1;
+    const fadeIndex = getFadeIndex();
+    const noFadeIndex = !isNumber(fadeIndex);
+    fade(emblaApi);
+    if (noFadeIndex || notReachedTarget) return false;
+    return opacities[fadeIndex] > 0.999;
+  }
+  function scrollProgress() {
+    return progress;
+  }
+  const self = {
+    name: 'fade',
+    options: userOptions,
+    init,
+    destroy
+  };
+  return self;
+}
+Fade.globalOptions = undefined;
+
+export { Fade as default };
+//# sourceMappingURL=embla-carousel-fade.esm.js.map

node_modules/embla-carousel-fade/esm/index.d.ts

@@ -0,0 +1,2 @@
+export { FadeType, FadeOptionsType } from './components/Fade.js';
+export { default } from './components/Fade.js';

node_modules/embla-carousel-fade/esm/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "embla-carousel-fade",
+  "version": "8.6.0",
+  "author": "David Jerleke",
+  "description": "A fade plugin for Embla Carousel",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/davidjerleke/embla-carousel"
+  },
+  "bugs": {
+    "url": "https://github.com/davidjerleke/embla-carousel/issues"
+  },
+  "homepage": "https://www.embla-carousel.com",
+  "license": "MIT",
+  "keywords": [
+    "slider",
+    "carousel",
+    "slideshow",
+    "gallery",
+    "lightweight",
+    "touch",
+    "javascript",
+    "typescript",
+    "react",
+    "vue",
+    "svelte",
+    "solid"
+  ],
+  "types": "index.d.ts",
+  "sideEffects": false,
+  "files": [
+    "embla-carousel-fade*",
+    "components/**/*",
+    "index.d.ts"
+  ],
+  "devDependencies": {
+    "@types/jest": "^29.5.6",
+    "@typescript-eslint/eslint-plugin": "^6.9.0",
+    "@typescript-eslint/parser": "^6.9.0",
+    "eslint": "^8.52.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
+    "prettier": "2.8.8",
+    "rollup": "^4.22.4",
+    "ts-jest": "^29.1.1",
+    "typescript": "^5.2.2"
+  },
+  "peerDependencies": {
+    "embla-carousel": "8.6.0"
+  },
+  "module": "embla-carousel-fade.esm.js",
+  "type": "module"
+}

node_modules/embla-carousel-fade/index.d.ts

@@ -0,0 +1,2 @@
+export { FadeType, FadeOptionsType } from './components/Fade';
+export { default } from './components/Fade';

node_modules/embla-carousel-fade/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "embla-carousel-fade",
+  "version": "8.6.0",
+  "author": "David Jerleke",
+  "description": "A fade plugin for Embla Carousel",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/davidjerleke/embla-carousel"
+  },
+  "bugs": {
+    "url": "https://github.com/davidjerleke/embla-carousel/issues"
+  },
+  "homepage": "https://www.embla-carousel.com",
+  "license": "MIT",
+  "keywords": [
+    "slider",
+    "carousel",
+    "slideshow",
+    "gallery",
+    "lightweight",
+    "touch",
+    "javascript",
+    "typescript",
+    "react",
+    "vue",
+    "svelte",
+    "solid"
+  ],
+  "main": "embla-carousel-fade.umd.js",
+  "unpkg": "embla-carousel-fade.umd.js",
+  "module": "./esm/embla-carousel-fade.esm.js",
+  "types": "index.d.ts",
+  "sideEffects": false,
+  "files": [
+    "embla-carousel-fade*",
+    "components/**/*",
+    "index.d.ts",
+    "esm/**/*",
+    "cjs/**/*"
+  ],
+  "scripts": {
+    "test": "echo \"Info: no tests specified\" && exit 0",
+    "build": "rollup --bundleConfigAsCjs -c",
+    "start": "rollup --bundleConfigAsCjs -c --watch --environment BUILD:development",
+    "eslint:report": "eslint \"src/**/*.{js,tsx,ts}\""
+  },
+  "devDependencies": {
+    "@types/jest": "^29.5.6",
+    "@typescript-eslint/eslint-plugin": "^6.9.0",
+    "@typescript-eslint/parser": "^6.9.0",
+    "eslint": "^8.52.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
+    "prettier": "2.8.8",
+    "rollup": "^4.22.4",
+    "ts-jest": "^29.1.1",
+    "typescript": "^5.2.2"
+  },
+  "peerDependencies": {
+    "embla-carousel": "8.6.0"
+  },
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "import": {
+        "types": "./esm/index.d.ts",
+        "default": "./esm/embla-carousel-fade.esm.js"
+      },
+      "require": {
+        "types": "./cjs/index.d.ts",
+        "default": "./cjs/embla-carousel-fade.cjs.js"
+      }
+    }
+  }
+}