@arc-ui/components 12.0.0-beta7 → 12.1.0

package/lib/Carousel/Carousel.mjs

@@ -0,0 +1,2248 @@
+'use client';
+import { a as __assign, b as __spreadArray } from '../_shared/esm/tslib.es6-w7hdJ3oZ.mjs';
+import React__default, { useRef, useState, useCallback, useEffect, useId } from 'react';
+import { c as classNames } from '../_shared/esm/index-5C0-U8cc.mjs';
+import { u as useMediaQuery } from '../_shared/esm/use-media-query-l6Sou0dd.mjs';
+import { T as ThemeIcon } from '../_shared/esm/ThemeIcon-B0n6cKRb.mjs';
+import { e as ArcSizeBreakpointsXs, A as ArcSizeBreakpointsS, a as ArcSizeBreakpointsM, b as ArcSizeBreakpointsL, c as ArcSizeBreakpointsXl } from '../_shared/esm/index.es-Co1d96HB.mjs';
+import '../_shared/esm/suffix-modifier-B_pO0UkF.mjs';
+import '../_shared/esm/index-Spae4j7j.mjs';
+import '../_shared/esm/filter-attrs-v_SweZXP.mjs';
+import '../_shared/esm/Surface-C69KVzkY.mjs';
+
+const defaultOptions$2 = {
+  active: true,
+  breakpoints: {},
+  snapped: 'is-snapped',
+  inView: 'is-in-view',
+  draggable: 'is-draggable',
+  dragging: 'is-dragging',
+  loop: 'is-loop'
+};
+
+function normalizeClassNames(classNames) {
+  const normalized = Array.isArray(classNames) ? classNames : [classNames];
+  return normalized.filter(Boolean);
+}
+function removeClass(node, classNames) {
+  if (!node || !classNames.length) return;
+  node.classList.remove(...classNames);
+}
+function addClass(node, classNames) {
+  if (!node || !classNames.length) return;
+  node.classList.add(...classNames);
+}
+
+function ClassNames(userOptions = {}) {
+  let options;
+  let emblaApi;
+  let root;
+  let slides;
+  let snappedIndexes = [];
+  let inViewIndexes = [];
+  const selectedEvents = ['select'];
+  const draggingEvents = ['pointerDown', 'pointerUp'];
+  const inViewEvents = ['slidesInView'];
+  const classNames = {
+    snapped: [],
+    inView: [],
+    draggable: [],
+    dragging: [],
+    loop: []
+  };
+  function init(emblaApiInstance, optionsHandler) {
+    emblaApi = emblaApiInstance;
+    const {
+      mergeOptions,
+      optionsAtMedia
+    } = optionsHandler;
+    const optionsBase = mergeOptions(defaultOptions$2, ClassNames.globalOptions);
+    const allOptions = mergeOptions(optionsBase, userOptions);
+    options = optionsAtMedia(allOptions);
+    root = emblaApi.rootNode();
+    slides = emblaApi.slideNodes();
+    const {
+      watchDrag,
+      loop
+    } = emblaApi.internalEngine().options;
+    const isDraggable = !!watchDrag;
+    if (options.loop && loop) {
+      classNames.loop = normalizeClassNames(options.loop);
+      addClass(root, classNames.loop);
+    }
+    if (options.draggable && isDraggable) {
+      classNames.draggable = normalizeClassNames(options.draggable);
+      addClass(root, classNames.draggable);
+    }
+    if (options.dragging) {
+      classNames.dragging = normalizeClassNames(options.dragging);
+      draggingEvents.forEach(evt => emblaApi.on(evt, toggleDraggingClass));
+    }
+    if (options.snapped) {
+      classNames.snapped = normalizeClassNames(options.snapped);
+      selectedEvents.forEach(evt => emblaApi.on(evt, toggleSnappedClasses));
+      toggleSnappedClasses();
+    }
+    if (options.inView) {
+      classNames.inView = normalizeClassNames(options.inView);
+      inViewEvents.forEach(evt => emblaApi.on(evt, toggleInViewClasses));
+      toggleInViewClasses();
+    }
+  }
+  function destroy() {
+    draggingEvents.forEach(evt => emblaApi.off(evt, toggleDraggingClass));
+    selectedEvents.forEach(evt => emblaApi.off(evt, toggleSnappedClasses));
+    inViewEvents.forEach(evt => emblaApi.off(evt, toggleInViewClasses));
+    removeClass(root, classNames.loop);
+    removeClass(root, classNames.draggable);
+    removeClass(root, classNames.dragging);
+    toggleSlideClasses([], snappedIndexes, classNames.snapped);
+    toggleSlideClasses([], inViewIndexes, classNames.inView);
+    Object.keys(classNames).forEach(classNameKey => {
+      const key = classNameKey;
+      classNames[key] = [];
+    });
+  }
+  function toggleDraggingClass(_, evt) {
+    const toggleClass = evt === 'pointerDown' ? addClass : removeClass;
+    toggleClass(root, classNames.dragging);
+  }
+  function toggleSlideClasses(addClassIndexes = [], removeClassIndexes = [], classNames) {
+    const removeClassSlides = removeClassIndexes.map(index => slides[index]);
+    const addClassSlides = addClassIndexes.map(index => slides[index]);
+    removeClassSlides.forEach(slide => removeClass(slide, classNames));
+    addClassSlides.forEach(slide => addClass(slide, classNames));
+    return addClassIndexes;
+  }
+  function toggleSnappedClasses() {
+    const {
+      slideRegistry
+    } = emblaApi.internalEngine();
+    const newSnappedIndexes = slideRegistry[emblaApi.selectedScrollSnap()];
+    snappedIndexes = toggleSlideClasses(newSnappedIndexes, snappedIndexes, classNames.snapped);
+  }
+  function toggleInViewClasses() {
+    const newInViewIndexes = emblaApi.slidesInView();
+    inViewIndexes = toggleSlideClasses(newInViewIndexes, inViewIndexes, classNames.inView);
+  }
+  const self = {
+    name: 'classNames',
+    options: userOptions,
+    init,
+    destroy
+  };
+  return self;
+}
+ClassNames.globalOptions = undefined;
+
+function isObject$1(subject) {
+  return Object.prototype.toString.call(subject) === '[object Object]';
+}
+function isRecord(subject) {
+  return isObject$1(subject) || Array.isArray(subject);
+}
+function canUseDOM() {
+  return !!(typeof window !== 'undefined' && window.document && window.document.createElement);
+}
+function areOptionsEqual(optionsA, optionsB) {
+  const optionsAKeys = Object.keys(optionsA);
+  const optionsBKeys = Object.keys(optionsB);
+  if (optionsAKeys.length !== optionsBKeys.length) return false;
+  const breakpointsA = JSON.stringify(Object.keys(optionsA.breakpoints || {}));
+  const breakpointsB = JSON.stringify(Object.keys(optionsB.breakpoints || {}));
+  if (breakpointsA !== breakpointsB) return false;
+  return optionsAKeys.every(key => {
+    const valueA = optionsA[key];
+    const valueB = optionsB[key];
+    if (typeof valueA === 'function') return `${valueA}` === `${valueB}`;
+    if (!isRecord(valueA) || !isRecord(valueB)) return valueA === valueB;
+    return areOptionsEqual(valueA, valueB);
+  });
+}
+function sortAndMapPluginToOptions(plugins) {
+  return plugins.concat().sort((a, b) => a.name > b.name ? 1 : -1).map(plugin => plugin.options);
+}
+function arePluginsEqual(pluginsA, pluginsB) {
+  if (pluginsA.length !== pluginsB.length) return false;
+  const optionsA = sortAndMapPluginToOptions(pluginsA);
+  const optionsB = sortAndMapPluginToOptions(pluginsB);
+  return optionsA.every((optionA, index) => {
+    const optionB = optionsB[index];
+    return areOptionsEqual(optionA, optionB);
+  });
+}
+
+function isNumber(subject) {
+  return typeof subject === 'number';
+}
+function isString(subject) {
+  return typeof subject === 'string';
+}
+function isBoolean(subject) {
+  return typeof subject === 'boolean';
+}
+function isObject(subject) {
+  return Object.prototype.toString.call(subject) === '[object Object]';
+}
+function mathAbs(n) {
+  return Math.abs(n);
+}
+function mathSign(n) {
+  return Math.sign(n);
+}
+function deltaAbs(valueB, valueA) {
+  return mathAbs(valueB - valueA);
+}
+function factorAbs(valueB, valueA) {
+  if (valueB === 0 || valueA === 0) return 0;
+  if (mathAbs(valueB) <= mathAbs(valueA)) return 0;
+  const diff = deltaAbs(mathAbs(valueB), mathAbs(valueA));
+  return mathAbs(diff / valueB);
+}
+function arrayKeys(array) {
+  return objectKeys(array).map(Number);
+}
+function arrayLast(array) {
+  return array[arrayLastIndex(array)];
+}
+function arrayLastIndex(array) {
+  return Math.max(0, array.length - 1);
+}
+function arrayIsLastIndex(array, index) {
+  return index === arrayLastIndex(array);
+}
+function arrayFromNumber(n, startAt = 0) {
+  return Array.from(Array(n), (_, i) => startAt + i);
+}
+function objectKeys(object) {
+  return Object.keys(object);
+}
+function objectsMergeDeep(objectA, objectB) {
+  return [objectA, objectB].reduce((mergedObjects, currentObject) => {
+    objectKeys(currentObject).forEach(key => {
+      const valueA = mergedObjects[key];
+      const valueB = currentObject[key];
+      const areObjects = isObject(valueA) && isObject(valueB);
+      mergedObjects[key] = areObjects ? objectsMergeDeep(valueA, valueB) : valueB;
+    });
+    return mergedObjects;
+  }, {});
+}
+function isMouseEvent(evt, ownerWindow) {
+  return typeof ownerWindow.MouseEvent !== 'undefined' && evt instanceof ownerWindow.MouseEvent;
+}
+
+function Alignment(align, viewSize) {
+  const predefined = {
+    start,
+    center,
+    end
+  };
+  function start() {
+    return 0;
+  }
+  function center(n) {
+    return end(n) / 2;
+  }
+  function end(n) {
+    return viewSize - n;
+  }
+  function measure(n, index) {
+    if (isString(align)) return predefined[align](n);
+    return align(viewSize, n, index);
+  }
+  const self = {
+    measure
+  };
+  return self;
+}
+
+function EventStore() {
+  let listeners = [];
+  function add(node, type, handler, options = {
+    passive: true
+  }) {
+    let removeListener;
+    if ('addEventListener' in node) {
+      node.addEventListener(type, handler, options);
+      removeListener = () => node.removeEventListener(type, handler, options);
+    } else {
+      const legacyMediaQueryList = node;
+      legacyMediaQueryList.addListener(handler);
+      removeListener = () => legacyMediaQueryList.removeListener(handler);
+    }
+    listeners.push(removeListener);
+    return self;
+  }
+  function clear() {
+    listeners = listeners.filter(remove => remove());
+  }
+  const self = {
+    add,
+    clear
+  };
+  return self;
+}
+
+function Animations(ownerDocument, ownerWindow, update, render) {
+  const documentVisibleHandler = EventStore();
+  const timeStep = 1000 / 60;
+  let lastTimeStamp = null;
+  let lag = 0;
+  let animationFrame = 0;
+  function init() {
+    documentVisibleHandler.add(ownerDocument, 'visibilitychange', () => {
+      if (ownerDocument.hidden) reset();
+    });
+  }
+  function destroy() {
+    stop();
+    documentVisibleHandler.clear();
+  }
+  function animate(timeStamp) {
+    if (!animationFrame) return;
+    if (!lastTimeStamp) lastTimeStamp = timeStamp;
+    const elapsed = timeStamp - lastTimeStamp;
+    lastTimeStamp = timeStamp;
+    lag += elapsed;
+    while (lag >= timeStep) {
+      update(timeStep);
+      lag -= timeStep;
+    }
+    const lagOffset = lag / timeStep;
+    render(lagOffset);
+    if (animationFrame) ownerWindow.requestAnimationFrame(animate);
+  }
+  function start() {
+    if (animationFrame) return;
+    animationFrame = ownerWindow.requestAnimationFrame(animate);
+  }
+  function stop() {
+    ownerWindow.cancelAnimationFrame(animationFrame);
+    lastTimeStamp = null;
+    lag = 0;
+    animationFrame = 0;
+  }
+  function reset() {
+    lastTimeStamp = null;
+    lag = 0;
+  }
+  const self = {
+    init,
+    destroy,
+    start,
+    stop,
+    update: () => update(timeStep),
+    render
+  };
+  return self;
+}
+
+function Axis(axis, contentDirection) {
+  const isRightToLeft = contentDirection === 'rtl';
+  const isVertical = axis === 'y';
+  const scroll = isVertical ? 'y' : 'x';
+  const cross = isVertical ? 'x' : 'y';
+  const sign = !isVertical && isRightToLeft ? -1 : 1;
+  const startEdge = getStartEdge();
+  const endEdge = getEndEdge();
+  function measureSize(nodeRect) {
+    const {
+      height,
+      width
+    } = nodeRect;
+    return isVertical ? height : width;
+  }
+  function getStartEdge() {
+    if (isVertical) return 'top';
+    return isRightToLeft ? 'right' : 'left';
+  }
+  function getEndEdge() {
+    if (isVertical) return 'bottom';
+    return isRightToLeft ? 'left' : 'right';
+  }
+  function direction(n) {
+    return n * sign;
+  }
+  const self = {
+    scroll,
+    cross,
+    startEdge,
+    endEdge,
+    measureSize,
+    direction
+  };
+  return self;
+}
+
+function Limit(min = 0, max = 0) {
+  const length = mathAbs(min - max);
+  function reachedMin(n) {
+    return n < min;
+  }
+  function reachedMax(n) {
+    return n > max;
+  }
+  function reachedAny(n) {
+    return reachedMin(n) || reachedMax(n);
+  }
+  function constrain(n) {
+    if (!reachedAny(n)) return n;
+    return reachedMin(n) ? min : max;
+  }
+  function removeOffset(n) {
+    if (!length) return n;
+    return n - length * Math.ceil((n - max) / length);
+  }
+  const self = {
+    length,
+    max,
+    min,
+    constrain,
+    reachedAny,
+    reachedMax,
+    reachedMin,
+    removeOffset
+  };
+  return self;
+}
+
+function Counter(max, start, loop) {
+  const {
+    constrain
+  } = Limit(0, max);
+  const loopEnd = max + 1;
+  let counter = withinLimit(start);
+  function withinLimit(n) {
+    return !loop ? constrain(n) : mathAbs((loopEnd + n) % loopEnd);
+  }
+  function get() {
+    return counter;
+  }
+  function set(n) {
+    counter = withinLimit(n);
+    return self;
+  }
+  function add(n) {
+    return clone().set(get() + n);
+  }
+  function clone() {
+    return Counter(max, get(), loop);
+  }
+  const self = {
+    get,
+    set,
+    add,
+    clone
+  };
+  return self;
+}
+
+function DragHandler(axis, rootNode, ownerDocument, ownerWindow, target, dragTracker, location, animation, scrollTo, scrollBody, scrollTarget, index, eventHandler, percentOfView, dragFree, dragThreshold, skipSnaps, baseFriction, watchDrag) {
+  const {
+    cross: crossAxis,
+    direction
+  } = axis;
+  const focusNodes = ['INPUT', 'SELECT', 'TEXTAREA'];
+  const nonPassiveEvent = {
+    passive: false
+  };
+  const initEvents = EventStore();
+  const dragEvents = EventStore();
+  const goToNextThreshold = Limit(50, 225).constrain(percentOfView.measure(20));
+  const snapForceBoost = {
+    mouse: 300,
+    touch: 400
+  };
+  const freeForceBoost = {
+    mouse: 500,
+    touch: 600
+  };
+  const baseSpeed = dragFree ? 43 : 25;
+  let isMoving = false;
+  let startScroll = 0;
+  let startCross = 0;
+  let pointerIsDown = false;
+  let preventScroll = false;
+  let preventClick = false;
+  let isMouse = false;
+  function init(emblaApi) {
+    if (!watchDrag) return;
+    function downIfAllowed(evt) {
+      if (isBoolean(watchDrag) || watchDrag(emblaApi, evt)) down(evt);
+    }
+    const node = rootNode;
+    initEvents.add(node, 'dragstart', evt => evt.preventDefault(), nonPassiveEvent).add(node, 'touchmove', () => undefined, nonPassiveEvent).add(node, 'touchend', () => undefined).add(node, 'touchstart', downIfAllowed).add(node, 'mousedown', downIfAllowed).add(node, 'touchcancel', up).add(node, 'contextmenu', up).add(node, 'click', click, true);
+  }
+  function destroy() {
+    initEvents.clear();
+    dragEvents.clear();
+  }
+  function addDragEvents() {
+    const node = isMouse ? ownerDocument : rootNode;
+    dragEvents.add(node, 'touchmove', move, nonPassiveEvent).add(node, 'touchend', up).add(node, 'mousemove', move, nonPassiveEvent).add(node, 'mouseup', up);
+  }
+  function isFocusNode(node) {
+    const nodeName = node.nodeName || '';
+    return focusNodes.includes(nodeName);
+  }
+  function forceBoost() {
+    const boost = dragFree ? freeForceBoost : snapForceBoost;
+    const type = isMouse ? 'mouse' : 'touch';
+    return boost[type];
+  }
+  function allowedForce(force, targetChanged) {
+    const next = index.add(mathSign(force) * -1);
+    const baseForce = scrollTarget.byDistance(force, !dragFree).distance;
+    if (dragFree || mathAbs(force) < goToNextThreshold) return baseForce;
+    if (skipSnaps && targetChanged) return baseForce * 0.5;
+    return scrollTarget.byIndex(next.get(), 0).distance;
+  }
+  function down(evt) {
+    const isMouseEvt = isMouseEvent(evt, ownerWindow);
+    isMouse = isMouseEvt;
+    preventClick = dragFree && isMouseEvt && !evt.buttons && isMoving;
+    isMoving = deltaAbs(target.get(), location.get()) >= 2;
+    if (isMouseEvt && evt.button !== 0) return;
+    if (isFocusNode(evt.target)) return;
+    pointerIsDown = true;
+    dragTracker.pointerDown(evt);
+    scrollBody.useFriction(0).useDuration(0);
+    target.set(location);
+    addDragEvents();
+    startScroll = dragTracker.readPoint(evt);
+    startCross = dragTracker.readPoint(evt, crossAxis);
+    eventHandler.emit('pointerDown');
+  }
+  function move(evt) {
+    const isTouchEvt = !isMouseEvent(evt, ownerWindow);
+    if (isTouchEvt && evt.touches.length >= 2) return up(evt);
+    const lastScroll = dragTracker.readPoint(evt);
+    const lastCross = dragTracker.readPoint(evt, crossAxis);
+    const diffScroll = deltaAbs(lastScroll, startScroll);
+    const diffCross = deltaAbs(lastCross, startCross);
+    if (!preventScroll && !isMouse) {
+      if (!evt.cancelable) return up(evt);
+      preventScroll = diffScroll > diffCross;
+      if (!preventScroll) return up(evt);
+    }
+    const diff = dragTracker.pointerMove(evt);
+    if (diffScroll > dragThreshold) preventClick = true;
+    scrollBody.useFriction(0.3).useDuration(0.75);
+    animation.start();
+    target.add(direction(diff));
+    evt.preventDefault();
+  }
+  function up(evt) {
+    const currentLocation = scrollTarget.byDistance(0, false);
+    const targetChanged = currentLocation.index !== index.get();
+    const rawForce = dragTracker.pointerUp(evt) * forceBoost();
+    const force = allowedForce(direction(rawForce), targetChanged);
+    const forceFactor = factorAbs(rawForce, force);
+    const speed = baseSpeed - 10 * forceFactor;
+    const friction = baseFriction + forceFactor / 50;
+    preventScroll = false;
+    pointerIsDown = false;
+    dragEvents.clear();
+    scrollBody.useDuration(speed).useFriction(friction);
+    scrollTo.distance(force, !dragFree);
+    isMouse = false;
+    eventHandler.emit('pointerUp');
+  }
+  function click(evt) {
+    if (preventClick) {
+      evt.stopPropagation();
+      evt.preventDefault();
+      preventClick = false;
+    }
+  }
+  function pointerDown() {
+    return pointerIsDown;
+  }
+  const self = {
+    init,
+    destroy,
+    pointerDown
+  };
+  return self;
+}
+
+function DragTracker(axis, ownerWindow) {
+  const logInterval = 170;
+  let startEvent;
+  let lastEvent;
+  function readTime(evt) {
+    return evt.timeStamp;
+  }
+  function readPoint(evt, evtAxis) {
+    const property = evtAxis || axis.scroll;
+    const coord = `client${property === 'x' ? 'X' : 'Y'}`;
+    return (isMouseEvent(evt, ownerWindow) ? evt : evt.touches[0])[coord];
+  }
+  function pointerDown(evt) {
+    startEvent = evt;
+    lastEvent = evt;
+    return readPoint(evt);
+  }
+  function pointerMove(evt) {
+    const diff = readPoint(evt) - readPoint(lastEvent);
+    const expired = readTime(evt) - readTime(startEvent) > logInterval;
+    lastEvent = evt;
+    if (expired) startEvent = evt;
+    return diff;
+  }
+  function pointerUp(evt) {
+    if (!startEvent || !lastEvent) return 0;
+    const diffDrag = readPoint(lastEvent) - readPoint(startEvent);
+    const diffTime = readTime(evt) - readTime(startEvent);
+    const expired = readTime(evt) - readTime(lastEvent) > logInterval;
+    const force = diffDrag / diffTime;
+    const isFlick = diffTime && !expired && mathAbs(force) > 0.1;
+    return isFlick ? force : 0;
+  }
+  const self = {
+    pointerDown,
+    pointerMove,
+    pointerUp,
+    readPoint
+  };
+  return self;
+}
+
+function NodeRects() {
+  function measure(node) {
+    const {
+      offsetTop,
+      offsetLeft,
+      offsetWidth,
+      offsetHeight
+    } = node;
+    const offset = {
+      top: offsetTop,
+      right: offsetLeft + offsetWidth,
+      bottom: offsetTop + offsetHeight,
+      left: offsetLeft,
+      width: offsetWidth,
+      height: offsetHeight
+    };
+    return offset;
+  }
+  const self = {
+    measure
+  };
+  return self;
+}
+
+function PercentOfView(viewSize) {
+  function measure(n) {
+    return viewSize * (n / 100);
+  }
+  const self = {
+    measure
+  };
+  return self;
+}
+
+function ResizeHandler(container, eventHandler, ownerWindow, slides, axis, watchResize, nodeRects) {
+  const observeNodes = [container].concat(slides);
+  let resizeObserver;
+  let containerSize;
+  let slideSizes = [];
+  let destroyed = false;
+  function readSize(node) {
+    return axis.measureSize(nodeRects.measure(node));
+  }
+  function init(emblaApi) {
+    if (!watchResize) return;
+    containerSize = readSize(container);
+    slideSizes = slides.map(readSize);
+    function defaultCallback(entries) {
+      for (const entry of entries) {
+        if (destroyed) return;
+        const isContainer = entry.target === container;
+        const slideIndex = slides.indexOf(entry.target);
+        const lastSize = isContainer ? containerSize : slideSizes[slideIndex];
+        const newSize = readSize(isContainer ? container : slides[slideIndex]);
+        const diffSize = mathAbs(newSize - lastSize);
+        if (diffSize >= 0.5) {
+          emblaApi.reInit();
+          eventHandler.emit('resize');
+          break;
+        }
+      }
+    }
+    resizeObserver = new ResizeObserver(entries => {
+      if (isBoolean(watchResize) || watchResize(emblaApi, entries)) {
+        defaultCallback(entries);
+      }
+    });
+    ownerWindow.requestAnimationFrame(() => {
+      observeNodes.forEach(node => resizeObserver.observe(node));
+    });
+  }
+  function destroy() {
+    destroyed = true;
+    if (resizeObserver) resizeObserver.disconnect();
+  }
+  const self = {
+    init,
+    destroy
+  };
+  return self;
+}
+
+function ScrollBody(location, offsetLocation, previousLocation, target, baseDuration, baseFriction) {
+  let bodyVelocity = 0;
+  let scrollDirection = 0;
+  let scrollDuration = baseDuration;
+  let scrollFriction = baseFriction;
+  let rawLocation = location.get();
+  let rawLocationPrevious = 0;
+  function seek(timeStep) {
+    const fixedDeltaTimeSeconds = timeStep / 1000;
+    const duration = scrollDuration * fixedDeltaTimeSeconds;
+    const diff = target.get() - location.get();
+    const isInstant = !scrollDuration;
+    let directionDiff = 0;
+    if (isInstant) {
+      bodyVelocity = 0;
+      previousLocation.set(target);
+      location.set(target);
+      directionDiff = diff;
+    } else {
+      previousLocation.set(location);
+      bodyVelocity += diff / duration;
+      bodyVelocity *= scrollFriction;
+      rawLocation += bodyVelocity;
+      location.add(bodyVelocity * fixedDeltaTimeSeconds);
+      directionDiff = rawLocation - rawLocationPrevious;
+    }
+    scrollDirection = mathSign(directionDiff);
+    rawLocationPrevious = rawLocation;
+    return self;
+  }
+  function settled() {
+    const diff = target.get() - offsetLocation.get();
+    return mathAbs(diff) < 0.001;
+  }
+  function duration() {
+    return scrollDuration;
+  }
+  function direction() {
+    return scrollDirection;
+  }
+  function velocity() {
+    return bodyVelocity;
+  }
+  function useBaseDuration() {
+    return useDuration(baseDuration);
+  }
+  function useBaseFriction() {
+    return useFriction(baseFriction);
+  }
+  function useDuration(n) {
+    scrollDuration = n;
+    return self;
+  }
+  function useFriction(n) {
+    scrollFriction = n;
+    return self;
+  }
+  const self = {
+    direction,
+    duration,
+    velocity,
+    seek,
+    settled,
+    useBaseFriction,
+    useBaseDuration,
+    useFriction,
+    useDuration
+  };
+  return self;
+}
+
+function ScrollBounds(limit, location, target, scrollBody, percentOfView) {
+  const pullBackThreshold = percentOfView.measure(10);
+  const edgeOffsetTolerance = percentOfView.measure(50);
+  const frictionLimit = Limit(0.1, 0.99);
+  let disabled = false;
+  function shouldConstrain() {
+    if (disabled) return false;
+    if (!limit.reachedAny(target.get())) return false;
+    if (!limit.reachedAny(location.get())) return false;
+    return true;
+  }
+  function constrain(pointerDown) {
+    if (!shouldConstrain()) return;
+    const edge = limit.reachedMin(location.get()) ? 'min' : 'max';
+    const diffToEdge = mathAbs(limit[edge] - location.get());
+    const diffToTarget = target.get() - location.get();
+    const friction = frictionLimit.constrain(diffToEdge / edgeOffsetTolerance);
+    target.subtract(diffToTarget * friction);
+    if (!pointerDown && mathAbs(diffToTarget) < pullBackThreshold) {
+      target.set(limit.constrain(target.get()));
+      scrollBody.useDuration(25).useBaseFriction();
+    }
+  }
+  function toggleActive(active) {
+    disabled = !active;
+  }
+  const self = {
+    shouldConstrain,
+    constrain,
+    toggleActive
+  };
+  return self;
+}
+
+function ScrollContain(viewSize, contentSize, snapsAligned, containScroll, pixelTolerance) {
+  const scrollBounds = Limit(-contentSize + viewSize, 0);
+  const snapsBounded = measureBounded();
+  const scrollContainLimit = findScrollContainLimit();
+  const snapsContained = measureContained();
+  function usePixelTolerance(bound, snap) {
+    return deltaAbs(bound, snap) < 1;
+  }
+  function findScrollContainLimit() {
+    const startSnap = snapsBounded[0];
+    const endSnap = arrayLast(snapsBounded);
+    const min = snapsBounded.lastIndexOf(startSnap);
+    const max = snapsBounded.indexOf(endSnap) + 1;
+    return Limit(min, max);
+  }
+  function measureBounded() {
+    return snapsAligned.map((snapAligned, index) => {
+      const {
+        min,
+        max
+      } = scrollBounds;
+      const snap = scrollBounds.constrain(snapAligned);
+      const isFirst = !index;
+      const isLast = arrayIsLastIndex(snapsAligned, index);
+      if (isFirst) return max;
+      if (isLast) return min;
+      if (usePixelTolerance(min, snap)) return min;
+      if (usePixelTolerance(max, snap)) return max;
+      return snap;
+    }).map(scrollBound => parseFloat(scrollBound.toFixed(3)));
+  }
+  function measureContained() {
+    if (contentSize <= viewSize + pixelTolerance) return [scrollBounds.max];
+    if (containScroll === 'keepSnaps') return snapsBounded;
+    const {
+      min,
+      max
+    } = scrollContainLimit;
+    return snapsBounded.slice(min, max);
+  }
+  const self = {
+    snapsContained,
+    scrollContainLimit
+  };
+  return self;
+}
+
+function ScrollLimit(contentSize, scrollSnaps, loop) {
+  const max = scrollSnaps[0];
+  const min = loop ? max - contentSize : arrayLast(scrollSnaps);
+  const limit = Limit(min, max);
+  const self = {
+    limit
+  };
+  return self;
+}
+
+function ScrollLooper(contentSize, limit, location, vectors) {
+  const jointSafety = 0.1;
+  const min = limit.min + jointSafety;
+  const max = limit.max + jointSafety;
+  const {
+    reachedMin,
+    reachedMax
+  } = Limit(min, max);
+  function shouldLoop(direction) {
+    if (direction === 1) return reachedMax(location.get());
+    if (direction === -1) return reachedMin(location.get());
+    return false;
+  }
+  function loop(direction) {
+    if (!shouldLoop(direction)) return;
+    const loopDistance = contentSize * (direction * -1);
+    vectors.forEach(v => v.add(loopDistance));
+  }
+  const self = {
+    loop
+  };
+  return self;
+}
+
+function ScrollProgress(limit) {
+  const {
+    max,
+    length
+  } = limit;
+  function get(n) {
+    const currentLocation = n - max;
+    return length ? currentLocation / -length : 0;
+  }
+  const self = {
+    get
+  };
+  return self;
+}
+
+function ScrollSnaps(axis, alignment, containerRect, slideRects, slidesToScroll) {
+  const {
+    startEdge,
+    endEdge
+  } = axis;
+  const {
+    groupSlides
+  } = slidesToScroll;
+  const alignments = measureSizes().map(alignment.measure);
+  const snaps = measureUnaligned();
+  const snapsAligned = measureAligned();
+  function measureSizes() {
+    return groupSlides(slideRects).map(rects => arrayLast(rects)[endEdge] - rects[0][startEdge]).map(mathAbs);
+  }
+  function measureUnaligned() {
+    return slideRects.map(rect => containerRect[startEdge] - rect[startEdge]).map(snap => -mathAbs(snap));
+  }
+  function measureAligned() {
+    return groupSlides(snaps).map(g => g[0]).map((snap, index) => snap + alignments[index]);
+  }
+  const self = {
+    snaps,
+    snapsAligned
+  };
+  return self;
+}
+
+function SlideRegistry(containSnaps, containScroll, scrollSnaps, scrollContainLimit, slidesToScroll, slideIndexes) {
+  const {
+    groupSlides
+  } = slidesToScroll;
+  const {
+    min,
+    max
+  } = scrollContainLimit;
+  const slideRegistry = createSlideRegistry();
+  function createSlideRegistry() {
+    const groupedSlideIndexes = groupSlides(slideIndexes);
+    const doNotContain = !containSnaps || containScroll === 'keepSnaps';
+    if (scrollSnaps.length === 1) return [slideIndexes];
+    if (doNotContain) return groupedSlideIndexes;
+    return groupedSlideIndexes.slice(min, max).map((group, index, groups) => {
+      const isFirst = !index;
+      const isLast = arrayIsLastIndex(groups, index);
+      if (isFirst) {
+        const range = arrayLast(groups[0]) + 1;
+        return arrayFromNumber(range);
+      }
+      if (isLast) {
+        const range = arrayLastIndex(slideIndexes) - arrayLast(groups)[0] + 1;
+        return arrayFromNumber(range, arrayLast(groups)[0]);
+      }
+      return group;
+    });
+  }
+  const self = {
+    slideRegistry
+  };
+  return self;
+}
+
+function ScrollTarget(loop, scrollSnaps, contentSize, limit, targetVector) {
+  const {
+    reachedAny,
+    removeOffset,
+    constrain
+  } = limit;
+  function minDistance(distances) {
+    return distances.concat().sort((a, b) => mathAbs(a) - mathAbs(b))[0];
+  }
+  function findTargetSnap(target) {
+    const distance = loop ? removeOffset(target) : constrain(target);
+    const ascDiffsToSnaps = scrollSnaps.map((snap, index) => ({
+      diff: shortcut(snap - distance, 0),
+      index
+    })).sort((d1, d2) => mathAbs(d1.diff) - mathAbs(d2.diff));
+    const {
+      index
+    } = ascDiffsToSnaps[0];
+    return {
+      index,
+      distance
+    };
+  }
+  function shortcut(target, direction) {
+    const targets = [target, target + contentSize, target - contentSize];
+    if (!loop) return target;
+    if (!direction) return minDistance(targets);
+    const matchingTargets = targets.filter(t => mathSign(t) === direction);
+    if (matchingTargets.length) return minDistance(matchingTargets);
+    return arrayLast(targets) - contentSize;
+  }
+  function byIndex(index, direction) {
+    const diffToSnap = scrollSnaps[index] - targetVector.get();
+    const distance = shortcut(diffToSnap, direction);
+    return {
+      index,
+      distance
+    };
+  }
+  function byDistance(distance, snap) {
+    const target = targetVector.get() + distance;
+    const {
+      index,
+      distance: targetSnapDistance
+    } = findTargetSnap(target);
+    const reachedBound = !loop && reachedAny(target);
+    if (!snap || reachedBound) return {
+      index,
+      distance
+    };
+    const diffToSnap = scrollSnaps[index] - targetSnapDistance;
+    const snapDistance = distance + shortcut(diffToSnap, 0);
+    return {
+      index,
+      distance: snapDistance
+    };
+  }
+  const self = {
+    byDistance,
+    byIndex,
+    shortcut
+  };
+  return self;
+}
+
+function ScrollTo(animation, indexCurrent, indexPrevious, scrollBody, scrollTarget, targetVector, eventHandler) {
+  function scrollTo(target) {
+    const distanceDiff = target.distance;
+    const indexDiff = target.index !== indexCurrent.get();
+    targetVector.add(distanceDiff);
+    if (distanceDiff) {
+      if (scrollBody.duration()) {
+        animation.start();
+      } else {
+        animation.update();
+        animation.render(1);
+        animation.update();
+      }
+    }
+    if (indexDiff) {
+      indexPrevious.set(indexCurrent.get());
+      indexCurrent.set(target.index);
+      eventHandler.emit('select');
+    }
+  }
+  function distance(n, snap) {
+    const target = scrollTarget.byDistance(n, snap);
+    scrollTo(target);
+  }
+  function index(n, direction) {
+    const targetIndex = indexCurrent.clone().set(n);
+    const target = scrollTarget.byIndex(targetIndex.get(), direction);
+    scrollTo(target);
+  }
+  const self = {
+    distance,
+    index
+  };
+  return self;
+}
+
+function SlideFocus(root, slides, slideRegistry, scrollTo, scrollBody, eventStore, eventHandler, watchFocus) {
+  const focusListenerOptions = {
+    passive: true,
+    capture: true
+  };
+  let lastTabPressTime = 0;
+  function init(emblaApi) {
+    if (!watchFocus) return;
+    function defaultCallback(index) {
+      const nowTime = new Date().getTime();
+      const diffTime = nowTime - lastTabPressTime;
+      if (diffTime > 10) return;
+      eventHandler.emit('slideFocusStart');
+      root.scrollLeft = 0;
+      const group = slideRegistry.findIndex(group => group.includes(index));
+      if (!isNumber(group)) return;
+      scrollBody.useDuration(0);
+      scrollTo.index(group, 0);
+      eventHandler.emit('slideFocus');
+    }
+    eventStore.add(document, 'keydown', registerTabPress, false);
+    slides.forEach((slide, slideIndex) => {
+      eventStore.add(slide, 'focus', evt => {
+        if (isBoolean(watchFocus) || watchFocus(emblaApi, evt)) {
+          defaultCallback(slideIndex);
+        }
+      }, focusListenerOptions);
+    });
+  }
+  function registerTabPress(event) {
+    if (event.code === 'Tab') lastTabPressTime = new Date().getTime();
+  }
+  const self = {
+    init
+  };
+  return self;
+}
+
+function Vector1D(initialValue) {
+  let value = initialValue;
+  function get() {
+    return value;
+  }
+  function set(n) {
+    value = normalizeInput(n);
+  }
+  function add(n) {
+    value += normalizeInput(n);
+  }
+  function subtract(n) {
+    value -= normalizeInput(n);
+  }
+  function normalizeInput(n) {
+    return isNumber(n) ? n : n.get();
+  }
+  const self = {
+    get,
+    set,
+    add,
+    subtract
+  };
+  return self;
+}
+
+function Translate(axis, container) {
+  const translate = axis.scroll === 'x' ? x : y;
+  const containerStyle = container.style;
+  let disabled = false;
+  function x(n) {
+    return `translate3d(${n}px,0px,0px)`;
+  }
+  function y(n) {
+    return `translate3d(0px,${n}px,0px)`;
+  }
+  function to(target) {
+    if (disabled) return;
+    containerStyle.transform = translate(axis.direction(target));
+  }
+  function toggleActive(active) {
+    disabled = !active;
+  }
+  function clear() {
+    if (disabled) return;
+    containerStyle.transform = '';
+    if (!container.getAttribute('style')) container.removeAttribute('style');
+  }
+  const self = {
+    clear,
+    to,
+    toggleActive
+  };
+  return self;
+}
+
+function SlideLooper(axis, viewSize, contentSize, slideSizes, slideSizesWithGaps, snaps, scrollSnaps, location, slides) {
+  const roundingSafety = 0.5;
+  const ascItems = arrayKeys(slideSizesWithGaps);
+  const descItems = arrayKeys(slideSizesWithGaps).reverse();
+  const loopPoints = startPoints().concat(endPoints());
+  function removeSlideSizes(indexes, from) {
+    return indexes.reduce((a, i) => {
+      return a - slideSizesWithGaps[i];
+    }, from);
+  }
+  function slidesInGap(indexes, gap) {
+    return indexes.reduce((a, i) => {
+      const remainingGap = removeSlideSizes(a, gap);
+      return remainingGap > 0 ? a.concat([i]) : a;
+    }, []);
+  }
+  function findSlideBounds(offset) {
+    return snaps.map((snap, index) => ({
+      start: snap - slideSizes[index] + roundingSafety + offset,
+      end: snap + viewSize - roundingSafety + offset
+    }));
+  }
+  function findLoopPoints(indexes, offset, isEndEdge) {
+    const slideBounds = findSlideBounds(offset);
+    return indexes.map(index => {
+      const initial = isEndEdge ? 0 : -contentSize;
+      const altered = isEndEdge ? contentSize : 0;
+      const boundEdge = isEndEdge ? 'end' : 'start';
+      const loopPoint = slideBounds[index][boundEdge];
+      return {
+        index,
+        loopPoint,
+        slideLocation: Vector1D(-1),
+        translate: Translate(axis, slides[index]),
+        target: () => location.get() > loopPoint ? initial : altered
+      };
+    });
+  }
+  function startPoints() {
+    const gap = scrollSnaps[0];
+    const indexes = slidesInGap(descItems, gap);
+    return findLoopPoints(indexes, contentSize, false);
+  }
+  function endPoints() {
+    const gap = viewSize - scrollSnaps[0] - 1;
+    const indexes = slidesInGap(ascItems, gap);
+    return findLoopPoints(indexes, -contentSize, true);
+  }
+  function canLoop() {
+    return loopPoints.every(({
+      index
+    }) => {
+      const otherIndexes = ascItems.filter(i => i !== index);
+      return removeSlideSizes(otherIndexes, viewSize) <= 0.1;
+    });
+  }
+  function loop() {
+    loopPoints.forEach(loopPoint => {
+      const {
+        target,
+        translate,
+        slideLocation
+      } = loopPoint;
+      const shiftLocation = target();
+      if (shiftLocation === slideLocation.get()) return;
+      translate.to(shiftLocation);
+      slideLocation.set(shiftLocation);
+    });
+  }
+  function clear() {
+    loopPoints.forEach(loopPoint => loopPoint.translate.clear());
+  }
+  const self = {
+    canLoop,
+    clear,
+    loop,
+    loopPoints
+  };
+  return self;
+}
+
+function SlidesHandler(container, eventHandler, watchSlides) {
+  let mutationObserver;
+  let destroyed = false;
+  function init(emblaApi) {
+    if (!watchSlides) return;
+    function defaultCallback(mutations) {
+      for (const mutation of mutations) {
+        if (mutation.type === 'childList') {
+          emblaApi.reInit();
+          eventHandler.emit('slidesChanged');
+          break;
+        }
+      }
+    }
+    mutationObserver = new MutationObserver(mutations => {
+      if (destroyed) return;
+      if (isBoolean(watchSlides) || watchSlides(emblaApi, mutations)) {
+        defaultCallback(mutations);
+      }
+    });
+    mutationObserver.observe(container, {
+      childList: true
+    });
+  }
+  function destroy() {
+    if (mutationObserver) mutationObserver.disconnect();
+    destroyed = true;
+  }
+  const self = {
+    init,
+    destroy
+  };
+  return self;
+}
+
+function SlidesInView(container, slides, eventHandler, threshold) {
+  const intersectionEntryMap = {};
+  let inViewCache = null;
+  let notInViewCache = null;
+  let intersectionObserver;
+  let destroyed = false;
+  function init() {
+    intersectionObserver = new IntersectionObserver(entries => {
+      if (destroyed) return;
+      entries.forEach(entry => {
+        const index = slides.indexOf(entry.target);
+        intersectionEntryMap[index] = entry;
+      });
+      inViewCache = null;
+      notInViewCache = null;
+      eventHandler.emit('slidesInView');
+    }, {
+      root: container.parentElement,
+      threshold
+    });
+    slides.forEach(slide => intersectionObserver.observe(slide));
+  }
+  function destroy() {
+    if (intersectionObserver) intersectionObserver.disconnect();
+    destroyed = true;
+  }
+  function createInViewList(inView) {
+    return objectKeys(intersectionEntryMap).reduce((list, slideIndex) => {
+      const index = parseInt(slideIndex);
+      const {
+        isIntersecting
+      } = intersectionEntryMap[index];
+      const inViewMatch = inView && isIntersecting;
+      const notInViewMatch = !inView && !isIntersecting;
+      if (inViewMatch || notInViewMatch) list.push(index);
+      return list;
+    }, []);
+  }
+  function get(inView = true) {
+    if (inView && inViewCache) return inViewCache;
+    if (!inView && notInViewCache) return notInViewCache;
+    const slideIndexes = createInViewList(inView);
+    if (inView) inViewCache = slideIndexes;
+    if (!inView) notInViewCache = slideIndexes;
+    return slideIndexes;
+  }
+  const self = {
+    init,
+    destroy,
+    get
+  };
+  return self;
+}
+
+function SlideSizes(axis, containerRect, slideRects, slides, readEdgeGap, ownerWindow) {
+  const {
+    measureSize,
+    startEdge,
+    endEdge
+  } = axis;
+  const withEdgeGap = slideRects[0] && readEdgeGap;
+  const startGap = measureStartGap();
+  const endGap = measureEndGap();
+  const slideSizes = slideRects.map(measureSize);
+  const slideSizesWithGaps = measureWithGaps();
+  function measureStartGap() {
+    if (!withEdgeGap) return 0;
+    const slideRect = slideRects[0];
+    return mathAbs(containerRect[startEdge] - slideRect[startEdge]);
+  }
+  function measureEndGap() {
+    if (!withEdgeGap) return 0;
+    const style = ownerWindow.getComputedStyle(arrayLast(slides));
+    return parseFloat(style.getPropertyValue(`margin-${endEdge}`));
+  }
+  function measureWithGaps() {
+    return slideRects.map((rect, index, rects) => {
+      const isFirst = !index;
+      const isLast = arrayIsLastIndex(rects, index);
+      if (isFirst) return slideSizes[index] + startGap;
+      if (isLast) return slideSizes[index] + endGap;
+      return rects[index + 1][startEdge] - rect[startEdge];
+    }).map(mathAbs);
+  }
+  const self = {
+    slideSizes,
+    slideSizesWithGaps,
+    startGap,
+    endGap
+  };
+  return self;
+}
+
+function SlidesToScroll(axis, viewSize, slidesToScroll, loop, containerRect, slideRects, startGap, endGap, pixelTolerance) {
+  const {
+    startEdge,
+    endEdge,
+    direction
+  } = axis;
+  const groupByNumber = isNumber(slidesToScroll);
+  function byNumber(array, groupSize) {
+    return arrayKeys(array).filter(i => i % groupSize === 0).map(i => array.slice(i, i + groupSize));
+  }
+  function bySize(array) {
+    if (!array.length) return [];
+    return arrayKeys(array).reduce((groups, rectB, index) => {
+      const rectA = arrayLast(groups) || 0;
+      const isFirst = rectA === 0;
+      const isLast = rectB === arrayLastIndex(array);
+      const edgeA = containerRect[startEdge] - slideRects[rectA][startEdge];
+      const edgeB = containerRect[startEdge] - slideRects[rectB][endEdge];
+      const gapA = !loop && isFirst ? direction(startGap) : 0;
+      const gapB = !loop && isLast ? direction(endGap) : 0;
+      const chunkSize = mathAbs(edgeB - gapB - (edgeA + gapA));
+      if (index && chunkSize > viewSize + pixelTolerance) groups.push(rectB);
+      if (isLast) groups.push(array.length);
+      return groups;
+    }, []).map((currentSize, index, groups) => {
+      const previousSize = Math.max(groups[index - 1] || 0);
+      return array.slice(previousSize, currentSize);
+    });
+  }
+  function groupSlides(array) {
+    return groupByNumber ? byNumber(array, slidesToScroll) : bySize(array);
+  }
+  const self = {
+    groupSlides
+  };
+  return self;
+}
+
+function Engine(root, container, slides, ownerDocument, ownerWindow, options, eventHandler) {
+  // Options
+  const {
+    align,
+    axis: scrollAxis,
+    direction,
+    startIndex,
+    loop,
+    duration,
+    dragFree,
+    dragThreshold,
+    inViewThreshold,
+    slidesToScroll: groupSlides,
+    skipSnaps,
+    containScroll,
+    watchResize,
+    watchSlides,
+    watchDrag,
+    watchFocus
+  } = options;
+  // Measurements
+  const pixelTolerance = 2;
+  const nodeRects = NodeRects();
+  const containerRect = nodeRects.measure(container);
+  const slideRects = slides.map(nodeRects.measure);
+  const axis = Axis(scrollAxis, direction);
+  const viewSize = axis.measureSize(containerRect);
+  const percentOfView = PercentOfView(viewSize);
+  const alignment = Alignment(align, viewSize);
+  const containSnaps = !loop && !!containScroll;
+  const readEdgeGap = loop || !!containScroll;
+  const {
+    slideSizes,
+    slideSizesWithGaps,
+    startGap,
+    endGap
+  } = SlideSizes(axis, containerRect, slideRects, slides, readEdgeGap, ownerWindow);
+  const slidesToScroll = SlidesToScroll(axis, viewSize, groupSlides, loop, containerRect, slideRects, startGap, endGap, pixelTolerance);
+  const {
+    snaps,
+    snapsAligned
+  } = ScrollSnaps(axis, alignment, containerRect, slideRects, slidesToScroll);
+  const contentSize = -arrayLast(snaps) + arrayLast(slideSizesWithGaps);
+  const {
+    snapsContained,
+    scrollContainLimit
+  } = ScrollContain(viewSize, contentSize, snapsAligned, containScroll, pixelTolerance);
+  const scrollSnaps = containSnaps ? snapsContained : snapsAligned;
+  const {
+    limit
+  } = ScrollLimit(contentSize, scrollSnaps, loop);
+  // Indexes
+  const index = Counter(arrayLastIndex(scrollSnaps), startIndex, loop);
+  const indexPrevious = index.clone();
+  const slideIndexes = arrayKeys(slides);
+  // Animation
+  const update = ({
+    dragHandler,
+    scrollBody,
+    scrollBounds,
+    options: {
+      loop
+    }
+  }, timeStep) => {
+    if (!loop) scrollBounds.constrain(dragHandler.pointerDown());
+    scrollBody.seek(timeStep);
+  };
+  const render = ({
+    scrollBody,
+    translate,
+    location,
+    offsetLocation,
+    scrollLooper,
+    slideLooper,
+    dragHandler,
+    animation,
+    eventHandler,
+    scrollBounds,
+    options: {
+      loop
+    }
+  }, lagOffset) => {
+    const shouldSettle = scrollBody.settled();
+    const withinBounds = !scrollBounds.shouldConstrain();
+    const hasSettled = loop ? shouldSettle : shouldSettle && withinBounds;
+    if (hasSettled && !dragHandler.pointerDown()) {
+      animation.stop();
+      eventHandler.emit('settle');
+    }
+    if (!hasSettled) eventHandler.emit('scroll');
+    const interpolatedLocation = location.get() * lagOffset + previousLocation.get() * (1 - lagOffset);
+    offsetLocation.set(interpolatedLocation);
+    if (loop) {
+      scrollLooper.loop(scrollBody.direction());
+      slideLooper.loop();
+    }
+    translate.to(offsetLocation.get());
+  };
+  const animation = Animations(ownerDocument, ownerWindow, timeStep => update(engine, timeStep), lagOffset => render(engine, lagOffset));
+  // Shared
+  const friction = 0.68;
+  const startLocation = scrollSnaps[index.get()];
+  const location = Vector1D(startLocation);
+  const previousLocation = Vector1D(startLocation);
+  const offsetLocation = Vector1D(startLocation);
+  const target = Vector1D(startLocation);
+  const scrollBody = ScrollBody(location, offsetLocation, previousLocation, target, duration, friction);
+  const scrollTarget = ScrollTarget(loop, scrollSnaps, contentSize, limit, target);
+  const scrollTo = ScrollTo(animation, index, indexPrevious, scrollBody, scrollTarget, target, eventHandler);
+  const scrollProgress = ScrollProgress(limit);
+  const eventStore = EventStore();
+  const slidesInView = SlidesInView(container, slides, eventHandler, inViewThreshold);
+  const {
+    slideRegistry
+  } = SlideRegistry(containSnaps, containScroll, scrollSnaps, scrollContainLimit, slidesToScroll, slideIndexes);
+  const slideFocus = SlideFocus(root, slides, slideRegistry, scrollTo, scrollBody, eventStore, eventHandler, watchFocus);
+  // Engine
+  const engine = {
+    ownerDocument,
+    ownerWindow,
+    eventHandler,
+    containerRect,
+    slideRects,
+    animation,
+    axis,
+    dragHandler: DragHandler(axis, root, ownerDocument, ownerWindow, target, DragTracker(axis, ownerWindow), location, animation, scrollTo, scrollBody, scrollTarget, index, eventHandler, percentOfView, dragFree, dragThreshold, skipSnaps, friction, watchDrag),
+    eventStore,
+    percentOfView,
+    index,
+    indexPrevious,
+    limit,
+    location,
+    offsetLocation,
+    previousLocation,
+    options,
+    resizeHandler: ResizeHandler(container, eventHandler, ownerWindow, slides, axis, watchResize, nodeRects),
+    scrollBody,
+    scrollBounds: ScrollBounds(limit, offsetLocation, target, scrollBody, percentOfView),
+    scrollLooper: ScrollLooper(contentSize, limit, offsetLocation, [location, offsetLocation, previousLocation, target]),
+    scrollProgress,
+    scrollSnapList: scrollSnaps.map(scrollProgress.get),
+    scrollSnaps,
+    scrollTarget,
+    scrollTo,
+    slideLooper: SlideLooper(axis, viewSize, contentSize, slideSizes, slideSizesWithGaps, snaps, scrollSnaps, offsetLocation, slides),
+    slideFocus,
+    slidesHandler: SlidesHandler(container, eventHandler, watchSlides),
+    slidesInView,
+    slideIndexes,
+    slideRegistry,
+    slidesToScroll,
+    target,
+    translate: Translate(axis, container)
+  };
+  return engine;
+}
+
+function EventHandler() {
+  let listeners = {};
+  let api;
+  function init(emblaApi) {
+    api = emblaApi;
+  }
+  function getListeners(evt) {
+    return listeners[evt] || [];
+  }
+  function emit(evt) {
+    getListeners(evt).forEach(e => e(api, evt));
+    return self;
+  }
+  function on(evt, cb) {
+    listeners[evt] = getListeners(evt).concat([cb]);
+    return self;
+  }
+  function off(evt, cb) {
+    listeners[evt] = getListeners(evt).filter(e => e !== cb);
+    return self;
+  }
+  function clear() {
+    listeners = {};
+  }
+  const self = {
+    init,
+    emit,
+    off,
+    on,
+    clear
+  };
+  return self;
+}
+
+const defaultOptions$1 = {
+  align: 'center',
+  axis: 'x',
+  container: null,
+  slides: null,
+  containScroll: 'trimSnaps',
+  direction: 'ltr',
+  slidesToScroll: 1,
+  inViewThreshold: 0,
+  breakpoints: {},
+  dragFree: false,
+  dragThreshold: 10,
+  loop: false,
+  skipSnaps: false,
+  duration: 25,
+  startIndex: 0,
+  active: true,
+  watchDrag: true,
+  watchResize: true,
+  watchSlides: true,
+  watchFocus: true
+};
+
+function OptionsHandler(ownerWindow) {
+  function mergeOptions(optionsA, optionsB) {
+    return objectsMergeDeep(optionsA, optionsB || {});
+  }
+  function optionsAtMedia(options) {
+    const optionsAtMedia = options.breakpoints || {};
+    const matchedMediaOptions = objectKeys(optionsAtMedia).filter(media => ownerWindow.matchMedia(media).matches).map(media => optionsAtMedia[media]).reduce((a, mediaOption) => mergeOptions(a, mediaOption), {});
+    return mergeOptions(options, matchedMediaOptions);
+  }
+  function optionsMediaQueries(optionsList) {
+    return optionsList.map(options => objectKeys(options.breakpoints || {})).reduce((acc, mediaQueries) => acc.concat(mediaQueries), []).map(ownerWindow.matchMedia);
+  }
+  const self = {
+    mergeOptions,
+    optionsAtMedia,
+    optionsMediaQueries
+  };
+  return self;
+}
+
+function PluginsHandler(optionsHandler) {
+  let activePlugins = [];
+  function init(emblaApi, plugins) {
+    activePlugins = plugins.filter(({
+      options
+    }) => optionsHandler.optionsAtMedia(options).active !== false);
+    activePlugins.forEach(plugin => plugin.init(emblaApi, optionsHandler));
+    return plugins.reduce((map, plugin) => Object.assign(map, {
+      [plugin.name]: plugin
+    }), {});
+  }
+  function destroy() {
+    activePlugins = activePlugins.filter(plugin => plugin.destroy());
+  }
+  const self = {
+    init,
+    destroy
+  };
+  return self;
+}
+
+function EmblaCarousel(root, userOptions, userPlugins) {
+  const ownerDocument = root.ownerDocument;
+  const ownerWindow = ownerDocument.defaultView;
+  const optionsHandler = OptionsHandler(ownerWindow);
+  const pluginsHandler = PluginsHandler(optionsHandler);
+  const mediaHandlers = EventStore();
+  const eventHandler = EventHandler();
+  const {
+    mergeOptions,
+    optionsAtMedia,
+    optionsMediaQueries
+  } = optionsHandler;
+  const {
+    on,
+    off,
+    emit
+  } = eventHandler;
+  const reInit = reActivate;
+  let destroyed = false;
+  let engine;
+  let optionsBase = mergeOptions(defaultOptions$1, EmblaCarousel.globalOptions);
+  let options = mergeOptions(optionsBase);
+  let pluginList = [];
+  let pluginApis;
+  let container;
+  let slides;
+  function storeElements() {
+    const {
+      container: userContainer,
+      slides: userSlides
+    } = options;
+    const customContainer = isString(userContainer) ? root.querySelector(userContainer) : userContainer;
+    container = customContainer || root.children[0];
+    const customSlides = isString(userSlides) ? container.querySelectorAll(userSlides) : userSlides;
+    slides = [].slice.call(customSlides || container.children);
+  }
+  function createEngine(options) {
+    const engine = Engine(root, container, slides, ownerDocument, ownerWindow, options, eventHandler);
+    if (options.loop && !engine.slideLooper.canLoop()) {
+      const optionsWithoutLoop = Object.assign({}, options, {
+        loop: false
+      });
+      return createEngine(optionsWithoutLoop);
+    }
+    return engine;
+  }
+  function activate(withOptions, withPlugins) {
+    if (destroyed) return;
+    optionsBase = mergeOptions(optionsBase, withOptions);
+    options = optionsAtMedia(optionsBase);
+    pluginList = withPlugins || pluginList;
+    storeElements();
+    engine = createEngine(options);
+    optionsMediaQueries([optionsBase, ...pluginList.map(({
+      options
+    }) => options)]).forEach(query => mediaHandlers.add(query, 'change', reActivate));
+    if (!options.active) return;
+    engine.translate.to(engine.location.get());
+    engine.animation.init();
+    engine.slidesInView.init();
+    engine.slideFocus.init(self);
+    engine.eventHandler.init(self);
+    engine.resizeHandler.init(self);
+    engine.slidesHandler.init(self);
+    if (engine.options.loop) engine.slideLooper.loop();
+    if (container.offsetParent && slides.length) engine.dragHandler.init(self);
+    pluginApis = pluginsHandler.init(self, pluginList);
+  }
+  function reActivate(withOptions, withPlugins) {
+    const startIndex = selectedScrollSnap();
+    deActivate();
+    activate(mergeOptions({
+      startIndex
+    }, withOptions), withPlugins);
+    eventHandler.emit('reInit');
+  }
+  function deActivate() {
+    engine.dragHandler.destroy();
+    engine.eventStore.clear();
+    engine.translate.clear();
+    engine.slideLooper.clear();
+    engine.resizeHandler.destroy();
+    engine.slidesHandler.destroy();
+    engine.slidesInView.destroy();
+    engine.animation.destroy();
+    pluginsHandler.destroy();
+    mediaHandlers.clear();
+  }
+  function destroy() {
+    if (destroyed) return;
+    destroyed = true;
+    mediaHandlers.clear();
+    deActivate();
+    eventHandler.emit('destroy');
+    eventHandler.clear();
+  }
+  function scrollTo(index, jump, direction) {
+    if (!options.active || destroyed) return;
+    engine.scrollBody.useBaseFriction().useDuration(jump === true ? 0 : options.duration);
+    engine.scrollTo.index(index, direction || 0);
+  }
+  function scrollNext(jump) {
+    const next = engine.index.add(1).get();
+    scrollTo(next, jump, -1);
+  }
+  function scrollPrev(jump) {
+    const prev = engine.index.add(-1).get();
+    scrollTo(prev, jump, 1);
+  }
+  function canScrollNext() {
+    const next = engine.index.add(1).get();
+    return next !== selectedScrollSnap();
+  }
+  function canScrollPrev() {
+    const prev = engine.index.add(-1).get();
+    return prev !== selectedScrollSnap();
+  }
+  function scrollSnapList() {
+    return engine.scrollSnapList;
+  }
+  function scrollProgress() {
+    return engine.scrollProgress.get(engine.location.get());
+  }
+  function selectedScrollSnap() {
+    return engine.index.get();
+  }
+  function previousScrollSnap() {
+    return engine.indexPrevious.get();
+  }
+  function slidesInView() {
+    return engine.slidesInView.get();
+  }
+  function slidesNotInView() {
+    return engine.slidesInView.get(false);
+  }
+  function plugins() {
+    return pluginApis;
+  }
+  function internalEngine() {
+    return engine;
+  }
+  function rootNode() {
+    return root;
+  }
+  function containerNode() {
+    return container;
+  }
+  function slideNodes() {
+    return slides;
+  }
+  const self = {
+    canScrollNext,
+    canScrollPrev,
+    containerNode,
+    internalEngine,
+    destroy,
+    off,
+    on,
+    emit,
+    plugins,
+    previousScrollSnap,
+    reInit,
+    rootNode,
+    scrollNext,
+    scrollPrev,
+    scrollProgress,
+    scrollSnapList,
+    scrollTo,
+    selectedScrollSnap,
+    slideNodes,
+    slidesInView,
+    slidesNotInView
+  };
+  activate(userOptions, userPlugins);
+  setTimeout(() => eventHandler.emit('init'), 0);
+  return self;
+}
+EmblaCarousel.globalOptions = undefined;
+
+function useEmblaCarousel(options = {}, plugins = []) {
+  const storedOptions = useRef(options);
+  const storedPlugins = useRef(plugins);
+  const [emblaApi, setEmblaApi] = useState();
+  const [viewport, setViewport] = useState();
+  const reInit = useCallback(() => {
+    if (emblaApi) emblaApi.reInit(storedOptions.current, storedPlugins.current);
+  }, [emblaApi]);
+  useEffect(() => {
+    if (areOptionsEqual(storedOptions.current, options)) return;
+    storedOptions.current = options;
+    reInit();
+  }, [options, reInit]);
+  useEffect(() => {
+    if (arePluginsEqual(storedPlugins.current, plugins)) return;
+    storedPlugins.current = plugins;
+    reInit();
+  }, [plugins, reInit]);
+  useEffect(() => {
+    if (canUseDOM() && viewport) {
+      EmblaCarousel.globalOptions = useEmblaCarousel.globalOptions;
+      const newEmblaApi = EmblaCarousel(viewport, storedOptions.current, storedPlugins.current);
+      setEmblaApi(newEmblaApi);
+      return () => newEmblaApi.destroy();
+    } else {
+      setEmblaApi(undefined);
+    }
+  }, [viewport, setEmblaApi]);
+  return [setViewport, emblaApi];
+}
+useEmblaCarousel.globalOptions = undefined;
+
+const defaultOptions = {
+  active: true,
+  breakpoints: {},
+  delay: 4000,
+  jump: false,
+  playOnInit: true,
+  stopOnFocusIn: true,
+  stopOnInteraction: true,
+  stopOnMouseEnter: false,
+  stopOnLastSnap: false,
+  rootNode: null
+};
+
+function normalizeDelay(emblaApi, delay) {
+  const scrollSnaps = emblaApi.scrollSnapList();
+  if (typeof delay === 'number') {
+    return scrollSnaps.map(() => delay);
+  }
+  return delay(scrollSnaps, emblaApi);
+}
+function getAutoplayRootNode(emblaApi, rootNode) {
+  const emblaRootNode = emblaApi.rootNode();
+  return rootNode && rootNode(emblaRootNode) || emblaRootNode;
+}
+
+function Autoplay(userOptions = {}) {
+  let options;
+  let emblaApi;
+  let destroyed;
+  let delay;
+  let timerStartTime = null;
+  let timerId = 0;
+  let autoplayActive = false;
+  let mouseIsOver = false;
+  let playOnDocumentVisible = false;
+  let jump = false;
+  function init(emblaApiInstance, optionsHandler) {
+    emblaApi = emblaApiInstance;
+    const {
+      mergeOptions,
+      optionsAtMedia
+    } = optionsHandler;
+    const optionsBase = mergeOptions(defaultOptions, Autoplay.globalOptions);
+    const allOptions = mergeOptions(optionsBase, userOptions);
+    options = optionsAtMedia(allOptions);
+    if (emblaApi.scrollSnapList().length <= 1) return;
+    jump = options.jump;
+    destroyed = false;
+    delay = normalizeDelay(emblaApi, options.delay);
+    const {
+      eventStore,
+      ownerDocument
+    } = emblaApi.internalEngine();
+    const isDraggable = !!emblaApi.internalEngine().options.watchDrag;
+    const root = getAutoplayRootNode(emblaApi, options.rootNode);
+    eventStore.add(ownerDocument, 'visibilitychange', visibilityChange);
+    if (isDraggable) {
+      emblaApi.on('pointerDown', pointerDown);
+    }
+    if (isDraggable && !options.stopOnInteraction) {
+      emblaApi.on('pointerUp', pointerUp);
+    }
+    if (options.stopOnMouseEnter) {
+      eventStore.add(root, 'mouseenter', mouseEnter);
+    }
+    if (options.stopOnMouseEnter && !options.stopOnInteraction) {
+      eventStore.add(root, 'mouseleave', mouseLeave);
+    }
+    if (options.stopOnFocusIn) {
+      emblaApi.on('slideFocusStart', stopAutoplay);
+    }
+    if (options.stopOnFocusIn && !options.stopOnInteraction) {
+      eventStore.add(emblaApi.containerNode(), 'focusout', startAutoplay);
+    }
+    if (options.playOnInit) startAutoplay();
+  }
+  function destroy() {
+    emblaApi.off('pointerDown', pointerDown).off('pointerUp', pointerUp).off('slideFocusStart', stopAutoplay);
+    stopAutoplay();
+    destroyed = true;
+    autoplayActive = false;
+  }
+  function setTimer() {
+    const {
+      ownerWindow
+    } = emblaApi.internalEngine();
+    ownerWindow.clearTimeout(timerId);
+    timerId = ownerWindow.setTimeout(next, delay[emblaApi.selectedScrollSnap()]);
+    timerStartTime = new Date().getTime();
+    emblaApi.emit('autoplay:timerset');
+  }
+  function clearTimer() {
+    const {
+      ownerWindow
+    } = emblaApi.internalEngine();
+    ownerWindow.clearTimeout(timerId);
+    timerId = 0;
+    timerStartTime = null;
+    emblaApi.emit('autoplay:timerstopped');
+  }
+  function startAutoplay() {
+    if (destroyed) return;
+    if (documentIsHidden()) {
+      playOnDocumentVisible = true;
+      return;
+    }
+    if (!autoplayActive) emblaApi.emit('autoplay:play');
+    setTimer();
+    autoplayActive = true;
+  }
+  function stopAutoplay() {
+    if (destroyed) return;
+    if (autoplayActive) emblaApi.emit('autoplay:stop');
+    clearTimer();
+    autoplayActive = false;
+  }
+  function visibilityChange() {
+    if (documentIsHidden()) {
+      playOnDocumentVisible = autoplayActive;
+      return stopAutoplay();
+    }
+    if (playOnDocumentVisible) startAutoplay();
+  }
+  function documentIsHidden() {
+    const {
+      ownerDocument
+    } = emblaApi.internalEngine();
+    return ownerDocument.visibilityState === 'hidden';
+  }
+  function pointerDown() {
+    if (!mouseIsOver) stopAutoplay();
+  }
+  function pointerUp() {
+    if (!mouseIsOver) startAutoplay();
+  }
+  function mouseEnter() {
+    mouseIsOver = true;
+    stopAutoplay();
+  }
+  function mouseLeave() {
+    mouseIsOver = false;
+    startAutoplay();
+  }
+  function play(jumpOverride) {
+    if (typeof jumpOverride !== 'undefined') jump = jumpOverride;
+    startAutoplay();
+  }
+  function stop() {
+    if (autoplayActive) stopAutoplay();
+  }
+  function reset() {
+    if (autoplayActive) startAutoplay();
+  }
+  function isPlaying() {
+    return autoplayActive;
+  }
+  function next() {
+    const {
+      index
+    } = emblaApi.internalEngine();
+    const nextIndex = index.clone().add(1).get();
+    const lastIndex = emblaApi.scrollSnapList().length - 1;
+    const kill = options.stopOnLastSnap && nextIndex === lastIndex;
+    if (emblaApi.canScrollNext()) {
+      emblaApi.scrollNext(jump);
+    } else {
+      emblaApi.scrollTo(0, jump);
+    }
+    emblaApi.emit('autoplay:select');
+    if (kill) return stopAutoplay();
+    startAutoplay();
+  }
+  function timeUntilNext() {
+    if (!timerStartTime) return null;
+    const currentDelay = delay[emblaApi.selectedScrollSnap()];
+    const timePastSinceStart = new Date().getTime() - timerStartTime;
+    return currentDelay - timePastSinceStart;
+  }
+  const self = {
+    name: 'autoplay',
+    options: userOptions,
+    init,
+    destroy,
+    play,
+    stop,
+    reset,
+    isPlaying,
+    timeUntilNext
+  };
+  return self;
+}
+Autoplay.globalOptions = undefined;
+
+var XS_BREAKPOINT = "(min-width: ".concat(ArcSizeBreakpointsXs, ")");
+var S_BREAKPOINT = "(min-width: ".concat(ArcSizeBreakpointsS, ")");
+var M_BREAKPOINT = "(min-width: ".concat(ArcSizeBreakpointsM, ")");
+var L_BREAKPOINT = "(min-width: ".concat(ArcSizeBreakpointsL, ")");
+var XL_BREAKPOINT = "(min-width: ".concat(ArcSizeBreakpointsXl, ")");
+
+var getOptions = function (itemsToScroll, loop, responsive) {
+    var breakpoints = [
+        [XS_BREAKPOINT, "xs"],
+        [S_BREAKPOINT, "s"],
+        [M_BREAKPOINT, "m"],
+        [L_BREAKPOINT, "l"],
+        [XL_BREAKPOINT, "xl"],
+    ];
+    var breakpointOptions = breakpoints.reduce(function (acc, _a) {
+        var _b;
+        var _c;
+        var query = _a[0], breakpoint = _a[1];
+        return __assign(__assign({}, acc), __assign({}, ((responsive === null || responsive === void 0 ? void 0 : responsive[breakpoint])
+            ? (_b = {},
+                _b[query] = {
+                    slidesToScroll: (_c = responsive === null || responsive === void 0 ? void 0 : responsive[breakpoint]) === null || _c === void 0 ? void 0 : _c.itemsToScroll,
+                },
+                _b) : {})));
+    }, {});
+    return {
+        loop: loop,
+        skipSnaps: true,
+        align: "start",
+        slidesToScroll: itemsToScroll,
+        breakpoints: breakpointOptions,
+    };
+};
+
+var getSlideWidth = function (_a) {
+    var screenSizes = _a.screenSizes, itemsPerSlide = _a.itemsPerSlide, isPartialVisible = _a.isPartialVisible, responsive = _a.responsive, children = _a.children;
+    var responsiveConfig = responsive &&
+        Object.keys(screenSizes).find(function (size) {
+            return responsive && screenSizes[size] && responsive[size];
+        });
+    var slideConfig = responsiveConfig
+        ? responsive[responsiveConfig]
+        : { itemsPerSlide: itemsPerSlide, isPartialVisible: isPartialVisible };
+    var totalItems = React__default.Children.count(children);
+    var itemsPerView = slideConfig.itemsPerSlide > totalItems
+        ? 1
+        : Math.max(1, slideConfig.itemsPerSlide);
+    var widthAdjustment = slideConfig.isPartialVisible ? 10 : 0;
+    return (100 - widthAdjustment) / itemsPerView;
+};
+
+var CarouselDotButton = function (_a) {
+    var visibleSlideIndex = _a.visibleSlideIndex, scrollSnapIndex = _a.scrollSnapIndex, focusIndex = _a.focusIndex, onKeyDown = _a.onKeyDown, onClick = _a.onClick;
+    var ref = useRef(null);
+    var isSelected = visibleSlideIndex === scrollSnapIndex;
+    useEffect(function () {
+        var _a;
+        if (focusIndex === scrollSnapIndex) {
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [focusIndex, scrollSnapIndex]);
+    return (React__default.createElement("button", { ref: ref, tabIndex: scrollSnapIndex === 0 ? 0 : -1, className: classNames("arc-Carousel-dot", {
+            "arc-Carousel-dot--selected": isSelected,
+        }), onKeyDown: onKeyDown(scrollSnapIndex), onClick: function () { return onClick(scrollSnapIndex); }, "aria-selected": isSelected, role: "tab", "aria-label": "Show slide ".concat(scrollSnapIndex + 1) }));
+};
+
+var KeyNames;
+(function (KeyNames) {
+    KeyNames["ArrowLeft"] = "ArrowLeft";
+    KeyNames["ArrowRight"] = "ArrowRight";
+    KeyNames["Escape"] = "Escape";
+})(KeyNames || (KeyNames = {}));
+
+var Carousel = function (_a) {
+    var children = _a.children, responsive = _a.responsive, _b = _a.itemsToScroll, itemsToScroll = _b === void 0 ? 1 : _b, _c = _a.itemsPerSlide, itemsPerSlide = _c === void 0 ? 1 : _c, _d = _a.withGutter, withGutter = _d === void 0 ? true : _d, _e = _a.loop, loop = _e === void 0 ? false : _e, _f = _a.isPartialVisible, isPartialVisible = _f === void 0 ? false : _f, autoplay = _a.autoplay, isPlaying = _a.isPlaying, fade = _a.fade;
+    var id = useId();
+    var autoPlayOptions = autoplay
+        ? __assign({ playOnInit: true, delay: 3000, stopOnInteraction: true, stopOnMouseEnter: false, stopOnFocusIn: true, stopOnLastSnap: false }, autoplay) : undefined;
+    var _g = useEmblaCarousel(__assign(__assign({}, getOptions(itemsToScroll, loop, responsive)), (fade ? { inViewThreshold: 0.74 } : {})), __spreadArray(__spreadArray([], (autoPlayOptions ? [Autoplay(autoPlayOptions)] : []), true), (fade
+        ? [
+            ClassNames({
+                inView: "arc-Carousel-slide--isInView",
+            }),
+        ]
+        : []), true)), emblaRef = _g[0], emblaApi = _g[1];
+    useEffect(function () {
+        var _a;
+        if (!emblaApi || !autoplay)
+            return;
+        var autoplayPlugin = (_a = emblaApi === null || emblaApi === void 0 ? void 0 : emblaApi.plugins()) === null || _a === void 0 ? void 0 : _a.autoplay;
+        if (isPlaying) {
+            autoplayPlugin.play();
+        }
+        if (isPlaying == false) {
+            autoplayPlugin.stop();
+        }
+    }, [emblaApi, isPlaying, autoplay]);
+    var _h = useState(), dotButtonFocusIndex = _h[0], setCarouselDotButtonFocusIndex = _h[1];
+    var prevButtonRef = useRef(null);
+    var _j = useState(0), visibleSlideIndex = _j[0], setVisibleSlideIndex = _j[1];
+    var _k = useState(true), prevButtonEnabled = _k[0], setPrevButtonEnabled = _k[1];
+    var _l = useState(true), nextButtonEnabled = _l[0], setNextButtonEnabled = _l[1];
+    var isMinWidthArcBreakpointXs = useMediaQuery(XS_BREAKPOINT);
+    var isMinWidthArcBreakpointS = useMediaQuery(S_BREAKPOINT);
+    var isMinWidthArcBreakpointM = useMediaQuery(M_BREAKPOINT);
+    var isMinWidthArcBreakpointL = useMediaQuery(L_BREAKPOINT);
+    var isMinWidthArcBreakpointXl = useMediaQuery(XL_BREAKPOINT);
+    var slideWidth = getSlideWidth({
+        screenSizes: {
+            xl: isMinWidthArcBreakpointXl,
+            l: isMinWidthArcBreakpointL,
+            m: isMinWidthArcBreakpointM,
+            s: isMinWidthArcBreakpointS,
+            xs: isMinWidthArcBreakpointXs,
+        },
+        itemsPerSlide: itemsPerSlide,
+        isPartialVisible: isPartialVisible,
+        responsive: responsive,
+        children: children,
+    });
+    var scrollSnaps = Array.from({
+        length: (emblaApi === null || emblaApi === void 0 ? void 0 : emblaApi.scrollSnapList().length) || 0,
+    }).map(function (_, i) { return i; });
+    var scrollPrev = useCallback(function () { return emblaApi === null || emblaApi === void 0 ? void 0 : emblaApi.scrollPrev(); }, [emblaApi]);
+    var scrollNext = useCallback(function () { return emblaApi === null || emblaApi === void 0 ? void 0 : emblaApi.scrollNext(); }, [emblaApi]);
+    var onSelect = useCallback(function (emblaApi) {
+        setVisibleSlideIndex(emblaApi.selectedScrollSnap());
+        setPrevButtonEnabled(emblaApi.canScrollPrev());
+        setNextButtonEnabled(emblaApi.canScrollNext());
+    }, []);
+    var onCarouselDotButtonClick = useCallback(function (index) {
+        if (!emblaApi)
+            return;
+        emblaApi.scrollTo(index);
+    }, [emblaApi]);
+    var onSlideKeyDown = function (e) {
+        var _a;
+        if (e.key === KeyNames.Escape) {
+            prevButtonEnabled
+                ? (_a = prevButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus()
+                : setCarouselDotButtonFocusIndex(0);
+        }
+    };
+    var onCarouselDotButtonKeyDown = function (index) { return function (e) {
+        if (e.key === KeyNames.ArrowLeft) {
+            setCarouselDotButtonFocusIndex(index === 0 ? scrollSnaps.length - 1 : index - 1);
+        }
+        if (e.key === KeyNames.ArrowRight) {
+            setCarouselDotButtonFocusIndex(index + 1 === scrollSnaps.length ? 0 : index + 1);
+        }
+    }; };
+    useEffect(function () {
+        if (!emblaApi)
+            return;
+        onSelect(emblaApi);
+        emblaApi.on("reInit", onSelect).on("select", onSelect);
+    }, [emblaApi, onSelect]);
+    useEffect(function () {
+        if (!emblaApi)
+            return;
+        emblaApi.scrollTo(0);
+    }, [
+        emblaApi,
+        isMinWidthArcBreakpointXs,
+        isMinWidthArcBreakpointS,
+        isMinWidthArcBreakpointM,
+        isMinWidthArcBreakpointL,
+        isMinWidthArcBreakpointXl,
+    ]);
+    return (React__default.createElement("div", { className: "arc-Carousel" },
+        React__default.createElement("div", { className: "arc-Carousel-container" },
+            React__default.createElement("div", { ref: emblaRef, className: classNames("arc-Carousel-viewport", {
+                    "arc-Carousel-viewport--gutter": withGutter,
+                }) },
+                React__default.createElement("div", { className: "arc-Carousel-slider", role: "region", "aria-roledescription": "carousel" }, React__default.Children.map(children, function (child, i) { return (React__default.createElement("div", { onKeyDown: onSlideKeyDown, style: { flex: "0 0 ".concat(slideWidth, "%"), width: "".concat(slideWidth, "%") }, className: classNames("arc-Carousel-slide", {
+                        "arc-Carousel-slide--fade": fade,
+                    }), key: "".concat(id, "-option-").concat(i), role: "group", "aria-roledescription": "slide" }, child)); })))),
+        React__default.createElement("div", { className: "arc-Carousel-nav" },
+            React__default.createElement("button", { "data-testid": "previous-button", ref: prevButtonRef, className: classNames("arc-Carousel-navButton", {
+                    "arc-Carousel-navButton--hidden": !prevButtonEnabled,
+                }), onClick: scrollPrev, "aria-label": "Show slide ".concat(visibleSlideIndex) },
+                React__default.createElement(ThemeIcon, { size: 32, icon: "carouselLeft" })),
+            React__default.createElement("div", { className: "arc-Carousel-dotContainer", role: "tablist" }, scrollSnaps.map(function (scrollSnapIndex) { return (React__default.createElement(CarouselDotButton, { key: "".concat(id, "-dot-").concat(scrollSnapIndex), focusIndex: dotButtonFocusIndex, scrollSnapIndex: scrollSnapIndex, visibleSlideIndex: visibleSlideIndex, onKeyDown: onCarouselDotButtonKeyDown, onClick: function (index) { return onCarouselDotButtonClick(index); } })); })),
+            React__default.createElement("button", { "data-testid": "next-button", className: classNames("arc-Carousel-navButton", {
+                    "arc-Carousel-navButton--hidden": !nextButtonEnabled,
+                }), onClick: scrollNext, "aria-label": "Show slide ".concat(loop && visibleSlideIndex === scrollSnaps.length - 1
+                    ? 1
+                    : visibleSlideIndex + 2) },
+                React__default.createElement(ThemeIcon, { size: 32, icon: "carouselRight" })))));
+};
+
+export { Carousel };