@itcase/ui 1.0.1

package/dist/components/Swiper.js

@@ -0,0 +1,927 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var Swiper$2 = require('swiper');
+var fill = require('../constants/componentProps/fill.js');
+var shape = require('../constants/componentProps/shape.js');
+var index = require('./Title.js');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+require('../constants/componentProps/textAlign.js');
+require('../constants/componentProps/textColor.js');
+require('../constants/componentProps/textGradient.js');
+require('../constants/componentProps/textStyle.js');
+require('../constants/componentProps/textWeight.js');
+require('../constants/componentProps/titleSize.js');
+require('../constants/componentProps/type.js');
+require('../constants/componentProps/wrap.js');
+require('../useStyles-77c3b520.js');
+require('lodash/camelCase');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('lodash/castArray');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+var Swiper__default = /*#__PURE__*/_interopDefault(Swiper$2);
+
+function isObject(o) {
+  return typeof o === 'object' && o !== null && o.constructor && Object.prototype.toString.call(o).slice(8, -1) === 'Object';
+}
+function extend(target, src) {
+  const noExtend = ['__proto__', 'constructor', 'prototype'];
+  Object.keys(src).filter(key => noExtend.indexOf(key) < 0).forEach(key => {
+    if (typeof target[key] === 'undefined') target[key] = src[key];else if (isObject(src[key]) && isObject(target[key]) && Object.keys(src[key]).length > 0) {
+      if (src[key].__swiper__) target[key] = src[key];else extend(target[key], src[key]);
+    } else {
+      target[key] = src[key];
+    }
+  });
+}
+function needsNavigation(params = {}) {
+  return params.navigation && typeof params.navigation.nextEl === 'undefined' && typeof params.navigation.prevEl === 'undefined';
+}
+function needsPagination(params = {}) {
+  return params.pagination && typeof params.pagination.el === 'undefined';
+}
+function needsScrollbar(params = {}) {
+  return params.scrollbar && typeof params.scrollbar.el === 'undefined';
+}
+function uniqueClasses(classNames = '') {
+  const classes = classNames.split(' ').map(c => c.trim()).filter(c => !!c);
+  const unique = [];
+  classes.forEach(c => {
+    if (unique.indexOf(c) < 0) unique.push(c);
+  });
+  return unique.join(' ');
+}
+function wrapperClass(className = '') {
+  if (!className) return 'swiper-wrapper';
+  if (!className.includes('swiper-wrapper')) return `swiper-wrapper ${className}`;
+  return className;
+}
+
+/* underscore in name -> watch for changes */
+const paramsList = ['eventsPrefix', 'injectStyles', 'injectStylesUrls', 'modules', 'init', '_direction', 'oneWayMovement', 'touchEventsTarget', 'initialSlide', '_speed', 'cssMode', 'updateOnWindowResize', 'resizeObserver', 'nested', 'focusableElements', '_enabled', '_width', '_height', 'preventInteractionOnTransition', 'userAgent', 'url', '_edgeSwipeDetection', '_edgeSwipeThreshold', '_freeMode', '_autoHeight', 'setWrapperSize', 'virtualTranslate', '_effect', 'breakpoints', '_spaceBetween', '_slidesPerView', 'maxBackfaceHiddenSlides', '_grid', '_slidesPerGroup', '_slidesPerGroupSkip', '_slidesPerGroupAuto', '_centeredSlides', '_centeredSlidesBounds', '_slidesOffsetBefore', '_slidesOffsetAfter', 'normalizeSlideIndex', '_centerInsufficientSlides', '_watchOverflow', 'roundLengths', 'touchRatio', 'touchAngle', 'simulateTouch', '_shortSwipes', '_longSwipes', 'longSwipesRatio', 'longSwipesMs', '_followFinger', 'allowTouchMove', '_threshold', 'touchMoveStopPropagation', 'touchStartPreventDefault', 'touchStartForcePreventDefault', 'touchReleaseOnEdges', 'uniqueNavElements', '_resistance', '_resistanceRatio', '_watchSlidesProgress', '_grabCursor', 'preventClicks', 'preventClicksPropagation', '_slideToClickedSlide', '_loop', 'loopedSlides', 'loopPreventsSliding', '_rewind', '_allowSlidePrev', '_allowSlideNext', '_swipeHandler', '_noSwiping', 'noSwipingClass', 'noSwipingSelector', 'passiveListeners', 'containerModifierClass', 'slideClass', 'slideActiveClass', 'slideVisibleClass', 'slideNextClass', 'slidePrevClass', 'wrapperClass', 'lazyPreloaderClass', 'lazyPreloadPrevNext', 'runCallbacksOnInit', 'observer', 'observeParents', 'observeSlideChildren',
+// modules
+'a11y', '_autoplay', '_controller', 'coverflowEffect', 'cubeEffect', 'fadeEffect', 'flipEffect', 'creativeEffect', 'cardsEffect', 'hashNavigation', 'history', 'keyboard', 'mousewheel', '_navigation', '_pagination', 'parallax', '_scrollbar', '_thumbs', 'virtual', 'zoom', 'control'];
+
+function getParams(obj = {}, splitEvents = true) {
+  const params = {
+    on: {}
+  };
+  const events = {};
+  const passedParams = {};
+  extend(params, Swiper__default.default.defaults);
+  extend(params, Swiper__default.default.extendedDefaults);
+  params._emitClasses = true;
+  params.init = false;
+  const rest = {};
+  const allowedParams = paramsList.map(key => key.replace(/_/, ''));
+  const plainObj = Object.assign({}, obj);
+  Object.keys(plainObj).forEach(key => {
+    if (typeof obj[key] === 'undefined') return;
+    if (allowedParams.indexOf(key) >= 0) {
+      if (isObject(obj[key])) {
+        params[key] = {};
+        passedParams[key] = {};
+        extend(params[key], obj[key]);
+        extend(passedParams[key], obj[key]);
+      } else {
+        params[key] = obj[key];
+        passedParams[key] = obj[key];
+      }
+    } else if (key.search(/on[A-Z]/) === 0 && typeof obj[key] === 'function') {
+      if (splitEvents) {
+        events[`${key[2].toLowerCase()}${key.substr(3)}`] = obj[key];
+      } else {
+        params.on[`${key[2].toLowerCase()}${key.substr(3)}`] = obj[key];
+      }
+    } else {
+      rest[key] = obj[key];
+    }
+  });
+  ['navigation', 'pagination', 'scrollbar'].forEach(key => {
+    if (params[key] === true) params[key] = {};
+    if (params[key] === false) delete params[key];
+  });
+  return {
+    params,
+    passedParams,
+    rest,
+    events
+  };
+}
+
+function mountSwiper({
+  el,
+  nextEl,
+  prevEl,
+  paginationEl,
+  scrollbarEl,
+  swiper
+}, swiperParams) {
+  if (needsNavigation(swiperParams) && nextEl && prevEl) {
+    swiper.params.navigation.nextEl = nextEl;
+    swiper.originalParams.navigation.nextEl = nextEl;
+    swiper.params.navigation.prevEl = prevEl;
+    swiper.originalParams.navigation.prevEl = prevEl;
+  }
+  if (needsPagination(swiperParams) && paginationEl) {
+    swiper.params.pagination.el = paginationEl;
+    swiper.originalParams.pagination.el = paginationEl;
+  }
+  if (needsScrollbar(swiperParams) && scrollbarEl) {
+    swiper.params.scrollbar.el = scrollbarEl;
+    swiper.originalParams.scrollbar.el = scrollbarEl;
+  }
+  swiper.init(el);
+}
+
+function getChangedParams(swiperParams, oldParams, children, oldChildren, getKey) {
+  const keys = [];
+  if (!oldParams) return keys;
+  const addKey = key => {
+    if (keys.indexOf(key) < 0) keys.push(key);
+  };
+  if (children && oldChildren) {
+    const oldChildrenKeys = oldChildren.map(getKey);
+    const childrenKeys = children.map(getKey);
+    if (oldChildrenKeys.join('') !== childrenKeys.join('')) addKey('children');
+    if (oldChildren.length !== children.length) addKey('children');
+  }
+  const watchParams = paramsList.filter(key => key[0] === '_').map(key => key.replace(/_/, ''));
+  watchParams.forEach(key => {
+    if (key in swiperParams && key in oldParams) {
+      if (isObject(swiperParams[key]) && isObject(oldParams[key])) {
+        const newKeys = Object.keys(swiperParams[key]);
+        const oldKeys = Object.keys(oldParams[key]);
+        if (newKeys.length !== oldKeys.length) {
+          addKey(key);
+        } else {
+          newKeys.forEach(newKey => {
+            if (swiperParams[key][newKey] !== oldParams[key][newKey]) {
+              addKey(key);
+            }
+          });
+          oldKeys.forEach(oldKey => {
+            if (swiperParams[key][oldKey] !== oldParams[key][oldKey]) addKey(key);
+          });
+        }
+      } else if (swiperParams[key] !== oldParams[key]) {
+        addKey(key);
+      }
+    }
+  });
+  return keys;
+}
+
+function isChildSwiperSlide(child) {
+  return child.type && child.type.displayName && child.type.displayName.includes('SwiperSlide');
+}
+function processChildren(c) {
+  const slides = [];
+  React__default.default.Children.toArray(c).forEach(child => {
+    if (isChildSwiperSlide(child)) {
+      slides.push(child);
+    } else if (child.props && child.props.children) {
+      processChildren(child.props.children).forEach(slide => slides.push(slide));
+    }
+  });
+  return slides;
+}
+function getChildren(c) {
+  const slides = [];
+  const slots = {
+    'container-start': [],
+    'container-end': [],
+    'wrapper-start': [],
+    'wrapper-end': []
+  };
+  React__default.default.Children.toArray(c).forEach(child => {
+    if (isChildSwiperSlide(child)) {
+      slides.push(child);
+    } else if (child.props && child.props.slot && slots[child.props.slot]) {
+      slots[child.props.slot].push(child);
+    } else if (child.props && child.props.children) {
+      const foundSlides = processChildren(child.props.children);
+      if (foundSlides.length > 0) {
+        foundSlides.forEach(slide => slides.push(slide));
+      } else {
+        slots['container-end'].push(child);
+      }
+    } else {
+      slots['container-end'].push(child);
+    }
+  });
+  return {
+    slides,
+    slots
+  };
+}
+
+function updateSwiper({
+  swiper,
+  slides,
+  passedParams,
+  changedParams,
+  nextEl,
+  prevEl,
+  scrollbarEl,
+  paginationEl
+}) {
+  const updateParams = changedParams.filter(key => key !== 'children' && key !== 'direction' && key !== 'wrapperClass');
+  const {
+    params: currentParams,
+    pagination,
+    navigation,
+    scrollbar,
+    virtual,
+    thumbs
+  } = swiper;
+  let needThumbsInit;
+  let needControllerInit;
+  let needPaginationInit;
+  let needScrollbarInit;
+  let needNavigationInit;
+  let loopNeedDestroy;
+  let loopNeedEnable;
+  let loopNeedReloop;
+  if (changedParams.includes('thumbs') && passedParams.thumbs && passedParams.thumbs.swiper && currentParams.thumbs && !currentParams.thumbs.swiper) {
+    needThumbsInit = true;
+  }
+  if (changedParams.includes('controller') && passedParams.controller && passedParams.controller.control && currentParams.controller && !currentParams.controller.control) {
+    needControllerInit = true;
+  }
+  if (changedParams.includes('pagination') && passedParams.pagination && (passedParams.pagination.el || paginationEl) && (currentParams.pagination || currentParams.pagination === false) && pagination && !pagination.el) {
+    needPaginationInit = true;
+  }
+  if (changedParams.includes('scrollbar') && passedParams.scrollbar && (passedParams.scrollbar.el || scrollbarEl) && (currentParams.scrollbar || currentParams.scrollbar === false) && scrollbar && !scrollbar.el) {
+    needScrollbarInit = true;
+  }
+  if (changedParams.includes('navigation') && passedParams.navigation && (passedParams.navigation.prevEl || prevEl) && (passedParams.navigation.nextEl || nextEl) && (currentParams.navigation || currentParams.navigation === false) && navigation && !navigation.prevEl && !navigation.nextEl) {
+    needNavigationInit = true;
+  }
+  const destroyModule = mod => {
+    if (!swiper[mod]) return;
+    swiper[mod].destroy();
+    if (mod === 'navigation') {
+      if (swiper.isElement) {
+        swiper[mod].prevEl.remove();
+        swiper[mod].nextEl.remove();
+      }
+      currentParams[mod].prevEl = undefined;
+      currentParams[mod].nextEl = undefined;
+      swiper[mod].prevEl = undefined;
+      swiper[mod].nextEl = undefined;
+    } else {
+      if (swiper.isElement) {
+        swiper[mod].el.remove();
+      }
+      currentParams[mod].el = undefined;
+      swiper[mod].el = undefined;
+    }
+  };
+  if (changedParams.includes('loop') && swiper.isElement) {
+    if (currentParams.loop && !passedParams.loop) {
+      loopNeedDestroy = true;
+    } else if (!currentParams.loop && passedParams.loop) {
+      loopNeedEnable = true;
+    } else {
+      loopNeedReloop = true;
+    }
+  }
+  updateParams.forEach(key => {
+    if (isObject(currentParams[key]) && isObject(passedParams[key])) {
+      extend(currentParams[key], passedParams[key]);
+    } else {
+      const newValue = passedParams[key];
+      if ((newValue === true || newValue === false) && (key === 'navigation' || key === 'pagination' || key === 'scrollbar')) {
+        if (newValue === false) {
+          destroyModule(key);
+        }
+      } else {
+        currentParams[key] = passedParams[key];
+      }
+    }
+  });
+  if (updateParams.includes('controller') && !needControllerInit && swiper.controller && swiper.controller.control && currentParams.controller && currentParams.controller.control) {
+    swiper.controller.control = currentParams.controller.control;
+  }
+  if (changedParams.includes('children') && slides && virtual && currentParams.virtual.enabled) {
+    virtual.slides = slides;
+    virtual.update(true);
+  }
+  if (changedParams.includes('children') && slides && currentParams.loop) {
+    loopNeedReloop = true;
+  }
+  if (needThumbsInit) {
+    const initialized = thumbs.init();
+    if (initialized) thumbs.update(true);
+  }
+  if (needControllerInit) {
+    swiper.controller.control = currentParams.controller.control;
+  }
+  if (needPaginationInit) {
+    if (swiper.isElement && (!paginationEl || typeof paginationEl === 'string')) {
+      paginationEl = document.createElement('div');
+      paginationEl.classList.add('swiper-pagination');
+      swiper.el.shadowEl.appendChild(paginationEl);
+    }
+    if (paginationEl) currentParams.pagination.el = paginationEl;
+    pagination.init();
+    pagination.render();
+    pagination.update();
+  }
+  if (needScrollbarInit) {
+    if (swiper.isElement && (!scrollbarEl || typeof scrollbarEl === 'string')) {
+      scrollbarEl = document.createElement('div');
+      scrollbarEl.classList.add('swiper-scrollbar');
+      swiper.el.shadowEl.appendChild(scrollbarEl);
+    }
+    if (scrollbarEl) currentParams.scrollbar.el = scrollbarEl;
+    scrollbar.init();
+    scrollbar.updateSize();
+    scrollbar.setTranslate();
+  }
+  if (needNavigationInit) {
+    if (swiper.isElement) {
+      if (!nextEl || typeof nextEl === 'string') {
+        nextEl = document.createElement('div');
+        nextEl.classList.add('swiper-button-next');
+        swiper.el.shadowEl.appendChild(nextEl);
+      }
+      if (!prevEl || typeof prevEl === 'string') {
+        prevEl = document.createElement('div');
+        prevEl.classList.add('swiper-button-prev');
+        swiper.el.shadowEl.appendChild(prevEl);
+      }
+    }
+    if (nextEl) currentParams.navigation.nextEl = nextEl;
+    if (prevEl) currentParams.navigation.prevEl = prevEl;
+    navigation.init();
+    navigation.update();
+  }
+  if (changedParams.includes('allowSlideNext')) {
+    swiper.allowSlideNext = passedParams.allowSlideNext;
+  }
+  if (changedParams.includes('allowSlidePrev')) {
+    swiper.allowSlidePrev = passedParams.allowSlidePrev;
+  }
+  if (changedParams.includes('direction')) {
+    swiper.changeDirection(passedParams.direction, false);
+  }
+  if (loopNeedDestroy || loopNeedReloop) {
+    swiper.loopDestroy();
+  }
+  if (loopNeedEnable || loopNeedReloop) {
+    swiper.loopCreate();
+  }
+  swiper.update();
+}
+
+function renderVirtual(swiper, slides, virtualData) {
+  if (!virtualData) return null;
+  const getSlideIndex = index => {
+    let slideIndex = index;
+    if (index < 0) {
+      slideIndex = slides.length + index;
+    } else if (slideIndex >= slides.length) {
+      // eslint-disable-next-line
+      slideIndex = slideIndex - slides.length;
+    }
+    return slideIndex;
+  };
+  const style = swiper.isHorizontal() ? {
+    [swiper.rtlTranslate ? 'right' : 'left']: `${virtualData.offset}px`
+  } : {
+    top: `${virtualData.offset}px`
+  };
+  const {
+    from,
+    to
+  } = virtualData;
+  const loopFrom = swiper.params.loop ? -slides.length : 0;
+  const loopTo = swiper.params.loop ? slides.length * 2 : slides.length;
+  const slidesToRender = [];
+  for (let i = loopFrom; i < loopTo; i += 1) {
+    if (i >= from && i <= to) {
+      slidesToRender.push(slides[getSlideIndex(i)]);
+    }
+  }
+  return slidesToRender.map((child, index) => {
+    return /*#__PURE__*/React__default.default.cloneElement(child, {
+      swiper,
+      style,
+      key: `slide-${index}`
+    });
+  });
+}
+
+const updateOnVirtualData = swiper => {
+  if (!swiper || swiper.destroyed || !swiper.params.virtual || swiper.params.virtual && !swiper.params.virtual.enabled) return;
+  swiper.updateSlides();
+  swiper.updateProgress();
+  swiper.updateSlidesClasses();
+  if (swiper.parallax && swiper.params.parallax && swiper.params.parallax.enabled) {
+    swiper.parallax.setTranslate();
+  }
+};
+
+function useIsomorphicLayoutEffect(callback, deps) {
+  // eslint-disable-next-line
+  if (typeof window === 'undefined') return React.useEffect(callback, deps);
+  return React.useLayoutEffect(callback, deps);
+}
+
+const SwiperSlideContext = /*#__PURE__*/React.createContext(null);
+const SwiperContext = /*#__PURE__*/React.createContext(null);
+
+function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
+const Swiper$1 = /*#__PURE__*/React.forwardRef(function (_temp, externalElRef) {
+  let {
+    className,
+    tag: Tag = 'div',
+    wrapperTag: WrapperTag = 'div',
+    children,
+    onSwiper,
+    ...rest
+  } = _temp === void 0 ? {} : _temp;
+  let eventsAssigned = false;
+  const [containerClasses, setContainerClasses] = React.useState('swiper');
+  const [virtualData, setVirtualData] = React.useState(null);
+  const [breakpointChanged, setBreakpointChanged] = React.useState(false);
+  const initializedRef = React.useRef(false);
+  const swiperElRef = React.useRef(null);
+  const swiperRef = React.useRef(null);
+  const oldPassedParamsRef = React.useRef(null);
+  const oldSlides = React.useRef(null);
+  const nextElRef = React.useRef(null);
+  const prevElRef = React.useRef(null);
+  const paginationElRef = React.useRef(null);
+  const scrollbarElRef = React.useRef(null);
+  const {
+    params: swiperParams,
+    passedParams,
+    rest: restProps,
+    events
+  } = getParams(rest);
+  const {
+    slides,
+    slots
+  } = getChildren(children);
+  const onBeforeBreakpoint = () => {
+    setBreakpointChanged(!breakpointChanged);
+  };
+  Object.assign(swiperParams.on, {
+    _containerClasses(swiper, classes) {
+      setContainerClasses(classes);
+    }
+  });
+  const initSwiper = () => {
+    // init swiper
+    Object.assign(swiperParams.on, events);
+    eventsAssigned = true;
+    const passParams = {
+      ...swiperParams
+    };
+    delete passParams.wrapperClass;
+    swiperRef.current = new Swiper__default.default(passParams);
+    if (swiperRef.current.virtual && swiperRef.current.params.virtual.enabled) {
+      swiperRef.current.virtual.slides = slides;
+      const extendWith = {
+        cache: false,
+        slides,
+        renderExternal: setVirtualData,
+        renderExternalUpdate: false
+      };
+      extend(swiperRef.current.params.virtual, extendWith);
+      extend(swiperRef.current.originalParams.virtual, extendWith);
+    }
+  };
+  if (!swiperElRef.current) {
+    initSwiper();
+  }
+
+  // Listen for breakpoints change
+  if (swiperRef.current) {
+    swiperRef.current.on('_beforeBreakpoint', onBeforeBreakpoint);
+  }
+  const attachEvents = () => {
+    if (eventsAssigned || !events || !swiperRef.current) return;
+    Object.keys(events).forEach(eventName => {
+      swiperRef.current.on(eventName, events[eventName]);
+    });
+  };
+  const detachEvents = () => {
+    if (!events || !swiperRef.current) return;
+    Object.keys(events).forEach(eventName => {
+      swiperRef.current.off(eventName, events[eventName]);
+    });
+  };
+  React.useEffect(() => {
+    return () => {
+      if (swiperRef.current) swiperRef.current.off('_beforeBreakpoint', onBeforeBreakpoint);
+    };
+  });
+
+  // set initialized flag
+  React.useEffect(() => {
+    if (!initializedRef.current && swiperRef.current) {
+      swiperRef.current.emitSlidesClasses();
+      initializedRef.current = true;
+    }
+  });
+
+  // mount swiper
+  useIsomorphicLayoutEffect(() => {
+    if (externalElRef) {
+      externalElRef.current = swiperElRef.current;
+    }
+    if (!swiperElRef.current) return;
+    if (swiperRef.current.destroyed) {
+      initSwiper();
+    }
+    mountSwiper({
+      el: swiperElRef.current,
+      nextEl: nextElRef.current,
+      prevEl: prevElRef.current,
+      paginationEl: paginationElRef.current,
+      scrollbarEl: scrollbarElRef.current,
+      swiper: swiperRef.current
+    }, swiperParams);
+    if (onSwiper) onSwiper(swiperRef.current);
+    // eslint-disable-next-line
+    return () => {
+      if (swiperRef.current && !swiperRef.current.destroyed) {
+        swiperRef.current.destroy(true, false);
+      }
+    };
+  }, []);
+
+  // watch for params change
+  useIsomorphicLayoutEffect(() => {
+    attachEvents();
+    const changedParams = getChangedParams(passedParams, oldPassedParamsRef.current, slides, oldSlides.current, c => c.key);
+    oldPassedParamsRef.current = passedParams;
+    oldSlides.current = slides;
+    if (changedParams.length && swiperRef.current && !swiperRef.current.destroyed) {
+      updateSwiper({
+        swiper: swiperRef.current,
+        slides,
+        passedParams,
+        changedParams,
+        nextEl: nextElRef.current,
+        prevEl: prevElRef.current,
+        scrollbarEl: scrollbarElRef.current,
+        paginationEl: paginationElRef.current
+      });
+    }
+    return () => {
+      detachEvents();
+    };
+  });
+
+  // update on virtual update
+  useIsomorphicLayoutEffect(() => {
+    updateOnVirtualData(swiperRef.current);
+  }, [virtualData]);
+
+  // bypass swiper instance to slides
+  function renderSlides() {
+    if (swiperParams.virtual) {
+      return renderVirtual(swiperRef.current, slides, virtualData);
+    }
+    return slides.map((child, index) => {
+      return /*#__PURE__*/React__default.default.cloneElement(child, {
+        swiper: swiperRef.current,
+        swiperSlideIndex: index
+      });
+    });
+  }
+  return /*#__PURE__*/React__default.default.createElement(Tag, _extends$1({
+    ref: swiperElRef,
+    className: uniqueClasses(`${containerClasses}${className ? ` ${className}` : ''}`)
+  }, restProps), /*#__PURE__*/React__default.default.createElement(SwiperContext.Provider, {
+    value: swiperRef.current
+  }, slots['container-start'], /*#__PURE__*/React__default.default.createElement(WrapperTag, {
+    className: wrapperClass(swiperParams.wrapperClass)
+  }, slots['wrapper-start'], renderSlides(), slots['wrapper-end']), needsNavigation(swiperParams) && /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, /*#__PURE__*/React__default.default.createElement("div", {
+    ref: prevElRef,
+    className: "swiper-button-prev"
+  }), /*#__PURE__*/React__default.default.createElement("div", {
+    ref: nextElRef,
+    className: "swiper-button-next"
+  })), needsScrollbar(swiperParams) && /*#__PURE__*/React__default.default.createElement("div", {
+    ref: scrollbarElRef,
+    className: "swiper-scrollbar"
+  }), needsPagination(swiperParams) && /*#__PURE__*/React__default.default.createElement("div", {
+    ref: paginationElRef,
+    className: "swiper-pagination"
+  }), slots['container-end']));
+});
+Swiper$1.displayName = 'Swiper';
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const SwiperSlide = /*#__PURE__*/React.forwardRef(function (_temp, externalRef) {
+  let {
+    tag: Tag = 'div',
+    children,
+    className = '',
+    swiper,
+    zoom,
+    lazy,
+    virtualIndex,
+    swiperSlideIndex,
+    ...rest
+  } = _temp === void 0 ? {} : _temp;
+  const slideElRef = React.useRef(null);
+  const [slideClasses, setSlideClasses] = React.useState('swiper-slide');
+  const [lazyLoaded, setLazyLoaded] = React.useState(false);
+  function updateClasses(_s, el, classNames) {
+    if (el === slideElRef.current) {
+      setSlideClasses(classNames);
+    }
+  }
+  useIsomorphicLayoutEffect(() => {
+    if (typeof swiperSlideIndex !== 'undefined') {
+      slideElRef.current.swiperSlideIndex = swiperSlideIndex;
+    }
+    if (externalRef) {
+      externalRef.current = slideElRef.current;
+    }
+    if (!slideElRef.current || !swiper) {
+      return;
+    }
+    if (swiper.destroyed) {
+      if (slideClasses !== 'swiper-slide') {
+        setSlideClasses('swiper-slide');
+      }
+      return;
+    }
+    swiper.on('_slideClass', updateClasses);
+    // eslint-disable-next-line
+    return () => {
+      if (!swiper) return;
+      swiper.off('_slideClass', updateClasses);
+    };
+  });
+  useIsomorphicLayoutEffect(() => {
+    if (swiper && slideElRef.current && !swiper.destroyed) {
+      setSlideClasses(swiper.getSlideClasses(slideElRef.current));
+    }
+  }, [swiper]);
+  const slideData = {
+    isActive: slideClasses.indexOf('swiper-slide-active') >= 0,
+    isVisible: slideClasses.indexOf('swiper-slide-visible') >= 0,
+    isPrev: slideClasses.indexOf('swiper-slide-prev') >= 0,
+    isNext: slideClasses.indexOf('swiper-slide-next') >= 0
+  };
+  const renderChildren = () => {
+    return typeof children === 'function' ? children(slideData) : children;
+  };
+  const onLoad = () => {
+    setLazyLoaded(true);
+  };
+  return /*#__PURE__*/React__default.default.createElement(Tag, _extends({
+    ref: slideElRef,
+    className: uniqueClasses(`${slideClasses}${className ? ` ${className}` : ''}`),
+    "data-swiper-slide-index": virtualIndex,
+    onLoad: onLoad
+  }, rest), zoom && /*#__PURE__*/React__default.default.createElement(SwiperSlideContext.Provider, {
+    value: slideData
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    className: "swiper-zoom-container",
+    "data-swiper-zoom": typeof zoom === 'number' ? zoom : undefined
+  }, renderChildren(), lazy && !lazyLoaded && /*#__PURE__*/React__default.default.createElement("div", {
+    className: "swiper-lazy-preloader"
+  }))), !zoom && /*#__PURE__*/React__default.default.createElement(SwiperSlideContext.Provider, {
+    value: slideData
+  }, renderChildren(), lazy && !lazyLoaded && /*#__PURE__*/React__default.default.createElement("div", {
+    className: "swiper-lazy-preloader"
+  })));
+});
+SwiperSlide.displayName = 'SwiperSlide';
+
+function Swiper(props) {
+  var activeSlideIndex = props.activeSlideIndex,
+    allowTouchMove = props.allowTouchMove,
+    autoHeight = props.autoHeight,
+    breakpoints = props.breakpoints,
+    children = props.children,
+    className = props.className,
+    direction = props.direction;
+    props.disabledButtonClass;
+    var forwardedRef = props.forwardedRef,
+    freeMode = props.freeMode,
+    id = props.id,
+    isChangeOnClickSlide = props.isChangeOnClickSlide,
+    isInit = props.isInit,
+    isNavigation = props.isNavigation,
+    isPagination = props.isPagination,
+    isScrollbar = props.isScrollbar,
+    items = props.items,
+    loop = props.loop,
+    modules = props.modules,
+    mousewheel = props.mousewheel,
+    nextButton = props.nextButton,
+    normalizeSlideIndex = props.normalizeSlideIndex,
+    prevButton = props.prevButton,
+    set = props.set,
+    setNextBtnDisabled = props.setNextBtnDisabled,
+    setPrevBtnDisabled = props.setPrevBtnDisabled,
+    slidesPerView = props.slidesPerView,
+    spaceBetween = props.spaceBetween,
+    speed = props.speed,
+    swiperClass = props.swiperClass,
+    title = props.title,
+    titleSize = props.titleSize,
+    titleTextColor = props.titleTextColor,
+    titleWeight = props.titleWeight,
+    onSlideNextTransitionEnd = props.onSlideNextTransitionEnd,
+    onSlidePrevTransitionEnd = props.onSlidePrevTransitionEnd,
+    onSwiper = props.onSwiper,
+    onUpdate = props.onUpdate;
+  var swiperRef = React.useRef();
+  var _useSwiperRef = useSwiperRef(),
+    nextEl = _useSwiperRef[0],
+    nextRef = _useSwiperRef[1];
+  var _useSwiperRef2 = useSwiperRef(),
+    prevEl = _useSwiperRef2[0],
+    prevRef = _useSwiperRef2[1];
+  var isLoop = loop != null ? loop : true;
+  React.useImperativeHandle(forwardedRef, function () {
+    return swiperRef.current;
+  }, []);
+  var onInitSwiper = React.useCallback(function (swiper) {
+    // Set "disabled" state to navigation buttons on init
+    if (!isLoop && setPrevBtnDisabled && setNextBtnDisabled) {
+      setPrevBtnDisabled(swiper.isBeginning);
+      setNextBtnDisabled(swiper.isEnd);
+    }
+  }, [isLoop, setPrevBtnDisabled, setNextBtnDisabled]);
+  var onSlideChange = React.useCallback(function (swiper) {
+    // Some things with clickedIndex
+    if (isChangeOnClickSlide) {
+      swiper.activeIndex = swiper.clickedIndex || activeSlideIndex;
+    }
+  }, [isChangeOnClickSlide, activeSlideIndex]);
+  var onTransitionStart = React.useCallback(function (swiper) {
+    // Set "disabled" state to navigation buttons, when slider move
+    if (!isLoop && setPrevBtnDisabled && setNextBtnDisabled) {
+      setPrevBtnDisabled(swiper.isBeginning);
+      setNextBtnDisabled(swiper.isEnd);
+    }
+  }, [isLoop, setPrevBtnDisabled, setNextBtnDisabled]);
+  React.useEffect(function () {
+    var _swiperRef$current;
+    var swiperInstance = (_swiperRef$current = swiperRef.current) == null ? void 0 : _swiperRef$current.swiper;
+    swiperInstance == null ? void 0 : swiperInstance.updateActiveIndex(activeSlideIndex);
+    swiperInstance == null ? void 0 : swiperInstance.updateSlidesClasses();
+  }, [activeSlideIndex]);
+  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'swiper_shape_',
+    propsKey: 'shape'
+  });
+  var alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'align_',
+    propsKey: 'alignDirection'
+  });
+  var alignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'align_',
+    propsKey: 'align'
+  });
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default('swiper-block', slidesPerView === 'auto' && 'swiper-block_type_auto', fillClass, shapeClass, className, set && "swiper-block_set_" + set),
+    id: id
+  }, (title || prevButton && nextButton) && /*#__PURE__*/React__default.default.createElement("div", {
+    className: "swiper-block__wrapper"
+  }, title && /*#__PURE__*/React__default.default.createElement(index.Title, {
+    className: "swiper-block__title",
+    size: titleSize,
+    textColor: titleTextColor,
+    textWeight: titleWeight
+  }, title), prevButton && nextButton && /*#__PURE__*/React__default.default.createElement("div", {
+    className: "swiper-block__navigation"
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    className: "swiper-block__prev swiper-button",
+    ref: prevRef
+  }, prevButton), /*#__PURE__*/React__default.default.createElement("div", {
+    className: "swiper-block__next swiper-button",
+    ref: nextRef
+  }, nextButton))), /*#__PURE__*/React__default.default.createElement(Swiper$1, {
+    allowTouchMove: allowTouchMove,
+    autoHeight: autoHeight != null ? autoHeight : false,
+    breakpoints: breakpoints,
+    className: clsx__default.default('swiper-block__swiper', swiperClass),
+    direction: direction,
+    freeMode: freeMode,
+    init: isInit != null ? isInit : true,
+    loop: isLoop,
+    modules: modules,
+    mousewheel: mousewheel,
+    navigation: isNavigation ? {
+      prevEl: prevEl,
+      nextEl: nextEl
+    } : false,
+    normalizeSlideIndex: normalizeSlideIndex,
+    pagination: isPagination,
+    ref: swiperRef,
+    scrollbar: isScrollbar,
+    slidesPerView: slidesPerView,
+    spaceBetween: spaceBetween,
+    speed: speed != null ? speed : 500,
+    onInit: onInitSwiper,
+    onSlideChange: onSlideChange,
+    onSlideNextTransitionEnd: onSlideNextTransitionEnd,
+    onSlidePrevTransitionEnd: onSlidePrevTransitionEnd,
+    onSwiper: onSwiper,
+    onUpdate: onUpdate,
+    onTransitionStart: onTransitionStart
+  }, children || (items == null ? void 0 : items.map(function (item, i) {
+    return /*#__PURE__*/React__default.default.createElement(SwiperSlide, {
+      className: clsx__default.default(alignDirectionClass, alignClass),
+      key: "swiper-slide_" + i
+    }, item);
+  }))));
+}
+Swiper.propTypes = {
+  activeSlideIndex: PropTypes__default.default.number,
+  allowTouchMove: PropTypes__default.default.bool,
+  autoHeight: PropTypes__default.default.bool,
+  breakpoints: PropTypes__default.default.object,
+  children: PropTypes__default.default.any,
+  className: PropTypes__default.default.string,
+  direction: PropTypes__default.default.string,
+  disabledButtonClass: PropTypes__default.default.string,
+  fill: PropTypes__default.default.oneOf(fill.default),
+  fillDesktop: PropTypes__default.default.oneOf(fill.default),
+  fillMobile: PropTypes__default.default.oneOf(fill.default),
+  fillTablet: PropTypes__default.default.oneOf(fill.default),
+  forwardedRef: PropTypes__default.default.any,
+  freeMode: PropTypes__default.default.bool,
+  id: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number]),
+  isChangeOnClickSlide: PropTypes__default.default.bool,
+  isInit: PropTypes__default.default.bool,
+  isNavigation: PropTypes__default.default.bool,
+  isPagination: PropTypes__default.default.bool,
+  isScrollbar: PropTypes__default.default.bool,
+  items: PropTypes__default.default.array,
+  loop: PropTypes__default.default.bool,
+  modules: PropTypes__default.default.arrayOf(PropTypes__default.default.func),
+  mousewheel: PropTypes__default.default.bool,
+  nextButton: PropTypes__default.default.any,
+  normalizeSlideIndex: PropTypes__default.default.bool,
+  prevButton: PropTypes__default.default.any,
+  set: PropTypes__default.default.string,
+  setNextBtnDisabled: PropTypes__default.default.func,
+  setPrevBtnDisabled: PropTypes__default.default.func,
+  shape: PropTypes__default.default.oneOf(shape.default),
+  shapeDesktop: PropTypes__default.default.oneOf(shape.default),
+  shapeMobile: PropTypes__default.default.oneOf(shape.default),
+  shapeTablet: PropTypes__default.default.oneOf(shape.default),
+  slidesPerView: PropTypes__default.default.number,
+  spaceBetween: PropTypes__default.default.number,
+  speed: PropTypes__default.default.number,
+  swiperClass: PropTypes__default.default.string,
+  title: PropTypes__default.default.string,
+  titleSize: PropTypes__default.default.string,
+  titleTextColor: PropTypes__default.default.string,
+  titleWeight: PropTypes__default.default.string,
+  onSlideNextTransitionEnd: PropTypes__default.default.func,
+  onSlidePrevTransitionEnd: PropTypes__default.default.func,
+  onSwiper: PropTypes__default.default.func,
+  onUpdate: PropTypes__default.default.func
+};
+Swiper.defaultProps = {
+  activeSlideIndex: 0,
+  disabledButtonClass: 'swiper-button-disabled'
+};
+
+// https://github.com/nolimits4web/swiper/issues/3855#issuecomment-1050694342
+var useSwiperRef = function useSwiperRef() {
+  var _useState = React.useState(null),
+    wrapper = _useState[0],
+    setWrapper = _useState[1];
+  var ref = React.useRef(null);
+  React.useEffect(function () {
+    if (ref.current) {
+      setWrapper(ref.current);
+    }
+  }, []);
+  return [wrapper, ref];
+};
+
+exports.Swiper = Swiper;