@widergy/energy-ui 3.158.1 → 3.160.0

package/dist/esm/components/UTCalendar/styles.module.scss

@@ -0,0 +1,122 @@
+@use '../../scss/variables/mediaQueries.module.scss' as *;
+
+
+$default-shadow-gray-bottom-1: 0px 3px 6px rgba(24, 44, 73, 0.1);
+
+.container {
+  display: flex;
+  grid-gap: 32px;
+  height: 100%;
+  max-width: 1200px;
+
+  width: 100%;
+
+  @media #{$tablet-mobile} {
+    flex-direction: column;
+  }
+}
+
+%containers {
+  background-color: var(--light01);
+  border-radius: 8px;
+  box-shadow: var(--shadowGrayBottom1, $default-shadow-gray-bottom-1);
+  display: flex;
+  padding:24px;
+}
+
+.calendarContainer {
+  @extend %containers;
+  padding: 16px;
+  flex-grow: 1;
+  
+
+  :global(.MuiPickersStaticWrapper-staticWrapperRoot) {
+    flex-grow: 1;
+  }
+
+  :global(.MuiPickersBasePicker-pickerView) {
+    justify-content: unset;
+    max-width: inherit;
+        height: 336px;
+  } 
+
+  :global(.MuiPickersSlideTransition-transitionContainer) {
+    text-transform: capitalize;
+
+  }
+
+  :global(.MuiPickersCalendar-week) {
+    background: var(--light03);
+    justify-content: flex-start;
+
+    > div {
+      border: 1px solid var(--light04);
+      min-width: 40px;
+      width: 100%;
+    }
+  }
+
+    :global(.MuiPickersCalendarHeader-daysHeader) {
+
+    > span {
+      color: var(--gray03);
+      width: 100%;
+    }
+  }
+
+ :global(.MuiPickersCalendarHeader-dayLabel) {
+    text-transform: uppercase;
+  }
+} 
+
+.timeRankContainer {
+  @extend %containers;
+  flex-grow: 1;
+
+  @media #{$tablet-mobile} {
+    width: unset;
+  }
+}
+
+.emptyTimeRankContainer {
+  align-items: center;
+  background-color: var(--light03);
+  border: 2px solid var(--light04);
+  box-shadow: none;
+  display: flex;
+  flex-direction: column;
+  grid-gap: 16px;
+  justify-content: center;
+}
+
+.calendarIconWrapper {
+  background-color: var(--light04);
+  border-radius: 100px;
+  display: flex;
+  padding: 14px;
+}
+
+.legendLabel {
+  text-align: end;
+}
+
+.bottomReference {
+  align-items: center;
+  display: flex;
+  grid-gap: 12px;
+  justify-content: flex-end;
+  padding: 16px;
+}
+
+.legendReference {
+  background: var(--semanticError01);
+  border-radius: 2px;
+  height: 16px;
+  width: 16px;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 16px;
+}

package/dist/esm/components/UTCaptcha/index.js

@@ -0,0 +1,28 @@
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React, { PureComponent } from 'react';
+import ReCAPTCHA from 'react-google-recaptcha';
+import { string, func } from 'prop-types';
+class UTCaptcha extends PureComponent {
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "onChange", value => this.props.onChange(value));
+  }
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: this.props.className
+    }, /*#__PURE__*/React.createElement(ReCAPTCHA, {
+      sitekey: this.props.siteKey,
+      onChange: this.onChange,
+      size: this.props.size
+    }));
+  }
+}
+UTCaptcha.propTypes = {
+  siteKey: string.isRequired,
+  onChange: func.isRequired,
+  size: string.isRequired,
+  className: string
+};
+export default UTCaptcha;

package/dist/esm/components/UTCarousel/README.md

@@ -0,0 +1,65 @@
+# UTCarousel
+
+Carousel de imágenes con soporte para autoplay, swipe táctil, flechas de navegación y puntos indicadores. Cada slide puede renderizar una imagen de fondo o contenido React custom.
+
+## Props
+
+| Prop | Tipo | Default | Descripción |
+|---|---|---|---|
+| `imgArray` | `array` | — | Array de slides. Ver estructura abajo. |
+| `autoPlay` | `bool` | `false` | Activa el avance automático entre slides. |
+| `autoPlayDelay` | `number` | `2000` | Milisegundos entre slides en autoplay. |
+| `height` | `string` | valor SCSS | Altura del carousel (ej. `'200px'`, `'var(--carousel-banner-height)'`). |
+| `legend` | `shape` | — | Configuración de puntos indicadores. `{ position: 'inside' \| 'outside' }`. Si no se pasa, no se muestran puntos. |
+| `arrow` | `shape` | — | Configuración de flechas. `{ position: 'inside' \| 'outside', arrowCustomLeft, arrowCustomRight, callbackLeft, callbackRight }`. |
+| `activeEvents` | `bool` | — | Habilita/deshabilita eventos de puntero. |
+| `borderSize` | `number` | — | Tamaño del borde entre slides. |
+| `className` | `string` | — | Clase CSS adicional para el contenedor. |
+| `classes` | `object` | — | Override de clases CSS internas (ej. `{ image: 'miClase' }`). |
+
+### Estructura de `imgArray`
+
+```js
+[
+  {
+    id: 1,           // recomendado para keys estables
+    imgSrc: '...',   // URL de imagen de fondo (cuando no se usa renderContent)
+    onClick: fn,     // handler de click (cuando no se usa renderContent)
+    renderContent: <MiComponente />  // contenido React custom (reemplaza imgSrc)
+  }
+]
+```
+
+Cuando se provee `renderContent`, el slide renderiza ese nodo directamente en lugar de la imagen de fondo. El componente pasado es responsable de manejar su propio click y dimensiones.
+
+## Uso básico — imágenes
+
+```jsx
+<UTCarousel
+  imgArray={[
+    { imgSrc: '/banner1.jpg', onClick: () => navigate('/promo1') },
+    { imgSrc: '/banner2.jpg', onClick: () => navigate('/promo2') }
+  ]}
+  autoPlay
+  autoPlayDelay={5000}
+  height="200px"
+/>
+```
+
+## Uso con contenido custom
+
+```jsx
+<UTCarousel
+  imgArray={[
+    { id: 1, renderContent: <BannerItem item={item1} onClick={fn1} /> },
+    { id: 2, renderContent: <BannerItem item={item2} onClick={fn2} /> }
+  ]}
+  autoPlay
+  autoPlayDelay={7000}
+  height="var(--carousel-banner-height)"
+/>
+```
+
+## Sin puntos indicadores
+
+No pasar la prop `legend` para ocultar los dots.

package/dist/esm/components/UTCarousel/components/Button/index.js

@@ -0,0 +1,36 @@
+import React, { memo } from 'react';
+import { bool, func, string, node, objectOf } from 'prop-types';
+import IconButton from '@material-ui/core/IconButton';
+import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
+import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
+const Button = _ref => {
+  let {
+    left,
+    className,
+    onPress,
+    callback,
+    ArrowCustom,
+    classes
+  } = _ref;
+  const handleOnPress = () => {
+    onPress();
+    // eslint-disable-next-line no-unused-expressions
+    callback && callback();
+  };
+  return ArrowCustom ? /*#__PURE__*/React.createElement(ArrowCustom, {
+    className: "".concat(classes.arrowStyle, " ").concat(className),
+    onClick: handleOnPress
+  }) : /*#__PURE__*/React.createElement(IconButton, {
+    className: "".concat(classes.arrowStyle, " ").concat(className),
+    onClick: handleOnPress
+  }, left ? /*#__PURE__*/React.createElement(KeyboardArrowLeft, null) : /*#__PURE__*/React.createElement(KeyboardArrowRight, null));
+};
+Button.propTypes = {
+  left: bool,
+  onPress: func,
+  callback: func,
+  className: string,
+  ArrowCustom: node,
+  classes: objectOf(string)
+};
+export default /*#__PURE__*/memo(Button);

package/dist/esm/components/UTCarousel/components/Legend/index.js

@@ -0,0 +1,31 @@
+import React, { memo } from 'react';
+import { func, number, node, string, objectOf } from 'prop-types';
+import UTTouchableWithoutFeedback from '../../../UTTouchableWithoutFeedback';
+const LegendContainer = _ref => {
+  let {
+    index,
+    currentSlide,
+    onClick,
+    LegendCustom,
+    classes
+  } = _ref;
+  const handleOnClick = () => onClick(index + 1);
+  const isActive = currentSlide === index;
+  return LegendCustom ? /*#__PURE__*/React.createElement(LegendCustom, {
+    isActive: isActive,
+    onClick: handleOnClick
+  }) : /*#__PURE__*/React.createElement(UTTouchableWithoutFeedback, {
+    className: classes.legendStyleTouchable,
+    onClick: handleOnClick
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classes.legendStyleContainer, " ").concat(isActive && classes.legendStyleIsActive)
+  }));
+};
+LegendContainer.propTypes = {
+  onClick: func,
+  index: number,
+  currentSlide: number,
+  LegendCustom: node,
+  classes: objectOf(string)
+};
+export default /*#__PURE__*/memo(LegendContainer);

package/dist/esm/components/UTCarousel/components/Slider/component/Slide/index.js

@@ -0,0 +1,56 @@
+import React, { memo } from 'react';
+import { string, number, bool, func, node, objectOf } from 'prop-types';
+import UTTouchableWithoutFeedback from '../../../../../UTTouchableWithoutFeedback';
+import styles from './styles.module.scss';
+const Slide = _ref => {
+  let {
+    animationTime,
+    border,
+    classes,
+    currentSlide,
+    imgSrc,
+    onClick,
+    position,
+    renderContent,
+    shouldAnimate,
+    widthContainer
+  } = _ref;
+  const slide = currentSlide === position ? border / 2 : currentSlide === position - 1 ? -border / 4 : currentSlide === position + 1 && border + border / 4;
+  const containerStyle = {
+    left: position * (slide ? widthContainer + slide : widthContainer),
+    width: "".concat(border ? widthContainer - border : widthContainer, "px"),
+    transition: "".concat(shouldAnimate ? "left ".concat(animationTime, "s linear 0s") : 'none')
+  };
+  if (renderContent) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: styles.imageContainer,
+      style: containerStyle,
+      draggable: "false"
+    }, renderContent);
+  }
+  return /*#__PURE__*/React.createElement(UTTouchableWithoutFeedback, {
+    className: "".concat(styles.imageContainer),
+    style: containerStyle,
+    draggable: "false",
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      backgroundImage: "url(".concat(imgSrc, ")")
+    },
+    className: "".concat(styles.image, " ").concat(classes === null || classes === void 0 ? void 0 : classes.image),
+    draggable: "false"
+  }));
+};
+Slide.propTypes = {
+  animationTime: number,
+  border: number,
+  classes: objectOf(string),
+  currentSlide: number,
+  imgSrc: string,
+  onClick: func,
+  position: number,
+  renderContent: node,
+  shouldAnimate: bool,
+  widthContainer: number
+};
+export default /*#__PURE__*/memo(Slide);

package/dist/esm/components/UTCarousel/components/Slider/component/Slide/styles.module.scss

@@ -0,0 +1,21 @@
+.imageContainer {
+  box-sizing: border-box;
+  cursor: pointer;
+  display: flex;
+  flex: 0 0 100%;
+  height: 100%;
+  justify-content: center;
+  position: absolute;
+  user-select: none;
+}
+
+.image {
+  background-size: cover;
+  height: 100%;
+  user-select: none;
+  width: 100%;
+}
+
+.noAnimation {
+  transition: none;
+}

package/dist/esm/components/UTCarousel/components/Slider/constants.js

@@ -0,0 +1,5 @@
+export const FAST_ANIMATION = 35;
+export const SLOW_ANIMATION = 400;
+export const MIN_TIME_MOVE = 150;
+export const OUTSIDE = 'outside';
+export const INSIDE = 'inside';

package/dist/esm/components/UTCarousel/components/Slider/index.js

@@ -0,0 +1,294 @@
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React, { PureComponent } from 'react';
+import { number, bool, shape, objectOf, string, arrayOf, node, func, oneOfType } from 'prop-types';
+import Button from '../Button';
+import Legend from '../Legend';
+import { throttle } from '../../../../utils/helperFunctions';
+import styles from './styles.module.scss';
+import Slider from './layout';
+import { FAST_ANIMATION, SLOW_ANIMATION, MIN_TIME_MOVE, OUTSIDE } from './constants';
+class SliderContainer extends PureComponent {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "handleNextSlide", () => {
+      if (this.imagesLength === this.state.index) {
+        this.setState(prevState => ({
+          index: prevState.index + 1,
+          shouldAnimate: true,
+          timeAnimation: prevState.finishPosition === 0 ? SLOW_ANIMATION : prevState.timeAnimation,
+          disable: true
+        }), () => setTimeout(() => this.setState(prevState => ({
+          index: 1,
+          shouldAnimate: false,
+          timeAnimation: prevState.finishPosition === 0 ? SLOW_ANIMATION : prevState.timeAnimation,
+          disable: false
+        })), this.state.timeAnimation));
+      } else this.setState(prevState => ({
+        index: prevState.index + 1,
+        shouldAnimate: true,
+        timeAnimation: prevState.finishPosition === 0 ? SLOW_ANIMATION : prevState.timeAnimation,
+        disable: true
+      }), () => setTimeout(() => this.setState({
+        disable: false
+      }), this.state.timeAnimation));
+    });
+    _defineProperty(this, "handlePrevSlide", () => {
+      if (this.state.index === 1) {
+        this.setState(prevState => ({
+          index: 0,
+          shouldAnimate: true,
+          timeAnimation: prevState.finishPosition === 0 ? SLOW_ANIMATION : prevState.timeAnimation,
+          disable: true
+        }), () => setTimeout(() => this.setState(prevState => ({
+          index: prevState.slideArray.length - 2,
+          shouldAnimate: false,
+          timeAnimation: prevState.finishPosition === 0 ? SLOW_ANIMATION : prevState.timeAnimation,
+          disable: false
+        })), this.state.timeAnimation));
+      } else this.setState(prevState => ({
+        index: prevState.index - 1,
+        shouldAnimate: true,
+        timeAnimation: prevState.finishPosition === 0 ? SLOW_ANIMATION : prevState.timeAnimation,
+        disable: true
+      }), () => setTimeout(() => this.setState({
+        disable: false
+      }), this.state.timeAnimation));
+    });
+    _defineProperty(this, "handleMouseMove", event => this.setState(prevState => ({
+      finishPosition: prevState.initialPosition - event.clientX
+    })));
+    _defineProperty(this, "handleTouchMove", event => this.setState(prevState => ({
+      finishPosition: prevState.initialPosition - event.changedTouches[event.changedTouches.length - 1].clientX
+    })));
+    _defineProperty(this, "handleEventUp", () => {
+      this.containerRef.current.removeEventListener('mousemove', this.handleMouseMove);
+      this.containerRef.current.removeEventListener('touchmove', this.handleTouchMove);
+      const {
+        containerWidth
+      } = this.state;
+      const time = new Date().getTime();
+      const transitionTime = time - this.state.timeMove;
+      const fastAnimationRight = this.state.finishPosition > 60;
+      const fastAnimationLeft = this.state.finishPosition < -60;
+      const fastAnimation = transitionTime > 0 && transitionTime < MIN_TIME_MOVE && (fastAnimationRight || fastAnimationLeft);
+      if (fastAnimation) {
+        this.setState({
+          timeAnimation: FAST_ANIMATION
+        });
+        if (fastAnimationLeft) {
+          this.handlePrevSlide();
+        } else if (fastAnimationRight) this.handleNextSlide();
+      }
+      if (transitionTime !== 0 && -containerWidth / 3 >= this.state.finishPosition && !fastAnimation) {
+        this.setState({
+          timeAnimation: SLOW_ANIMATION
+        });
+        this.handlePrevSlide();
+      } else if (transitionTime !== 0 && containerWidth / 3 <= this.state.finishPosition && !fastAnimation) {
+        this.setState({
+          timeAnimation: SLOW_ANIMATION
+        });
+        this.handleNextSlide();
+      }
+      return this.setState({
+        initialPosition: 0,
+        finishPosition: 0,
+        shouldAnimate: true
+      });
+    });
+    _defineProperty(this, "handleLegend", item => {
+      this.setState({
+        timeAnimation: 400,
+        index: item
+      });
+    });
+    _defineProperty(this, "updateImgArray", () => {
+      const firstSlide = this.props.slides[0];
+      const lastSlide = this.props.slides[this.props.slides.length - 1];
+      const arr = [{
+        ...lastSlide,
+        id: "lastSlide-".concat(lastSlide.id || lastSlide.imgSrc)
+      }, ...this.props.slides, {
+        ...firstSlide,
+        id: "firstSlide-".concat(firstSlide.id || firstSlide.imgSrc)
+      }];
+      this.setState({
+        slideArray: arr
+      });
+    });
+    _defineProperty(this, "updateContainerWidth", () => this.setState({
+      containerWidth: this.containerRef.current && this.containerRef.current.clientWidth
+    }));
+    this.containerRef = /*#__PURE__*/React.createRef();
+    this.imagesLength = props.slides.length;
+    this.state = {
+      index: 1,
+      slideArray: [],
+      shouldAnimate: true,
+      timeMove: 0,
+      initialPosition: 0,
+      finishPosition: 0,
+      timeAnimation: FAST_ANIMATION
+    };
+  }
+  componentDidMount() {
+    const firstSlide = this.props.slides[0];
+    const lastSlide = this.props.slides[this.props.slides.length - 1];
+    const arr = [{
+      ...lastSlide,
+      id: "lastSlide-".concat(lastSlide.id || lastSlide.imgSrc)
+    }, ...this.props.slides, {
+      ...firstSlide,
+      id: "firstSlide-".concat(firstSlide.id || firstSlide.imgSrc)
+    }];
+    this.setState({
+      slideArray: arr
+    });
+    this.containerRef.current.addEventListener('touchstart', this.handleTouchDown.bind(this));
+    this.containerRef.current.addEventListener('mousedown', this.handleMouseDown.bind(this));
+    this.updateContainerWidth();
+    window.addEventListener('resize', this.updateContainerWidth);
+    if (this.props.autoPlay) setInterval(() => this.handleNextSlide(), this.props.autoPlayDelay);
+  }
+  componentDidUpdate(prevProps) {
+    if (this.props.slides !== prevProps.slides) {
+      this.updateImgArray();
+    }
+  }
+  componentWillUnmount() {
+    var _this$containerRef;
+    if ((_this$containerRef = this.containerRef) !== null && _this$containerRef !== void 0 && _this$containerRef.current) {
+      this.containerRef.current.removeEventListener('touchstart', this.handleTouchDown);
+      this.containerRef.current.removeEventListener('mousedown', this.handleMouseDown);
+      this.containerRef.current.removeEventListener('mousemove', this.handleMouseMove);
+      this.containerRef.current.removeEventListener('touchmove', this.handleTouchMove);
+    }
+    window.removeEventListener('mouseup', this.handleEventUp);
+    window.removeEventListener('resize', this.updateContainerWidth);
+    window.removeEventListener('touchend', this.handleEventUp);
+  }
+  handleMouseDown() {
+    return throttle(event => {
+      this.containerRef.current.addEventListener('mousemove', this.handleMouseMove);
+      window.addEventListener('mouseup', this.handleEventUp);
+      return this.setState({
+        initialPosition: event.clientX,
+        shouldAnimate: false,
+        timeMove: new Date().getTime()
+      });
+    }, this.state.timeAnimation);
+  }
+  handleTouchDown() {
+    throttle(event => {
+      this.containerRef.current.addEventListener('touchmove', this.handleTouchMove);
+      window.addEventListener('touchend', this.handleEventUp);
+      return this.setState({
+        initialPosition: event.changedTouches[event.changedTouches.length - 1].clientX,
+        shouldAnimate: false,
+        timeMove: new Date().getTime()
+      });
+    }, this.state.timeAnimation);
+  }
+  render() {
+    const {
+      shouldAnimate,
+      slideArray,
+      index,
+      timeAnimation,
+      containerWidth
+    } = this.state;
+    const {
+      withBorder,
+      arrow,
+      legend,
+      classes,
+      slides,
+      height,
+      activeEvents,
+      className
+    } = this.props;
+    const baseSlidePosition = (index - 1) * -containerWidth;
+    const transitionSlide = !this.props.enableMove ? baseSlidePosition - this.state.finishPosition : baseSlidePosition;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "".concat(styles.generalContainer, " ").concat(className),
+      style: {
+        pointerEvents: "".concat(this.state.disable || !activeEvents ? 'none' : 'all'),
+        height
+      },
+      draggable: "false"
+    }, arrow && arrow.position === OUTSIDE && /*#__PURE__*/React.createElement("div", {
+      className: styles.arrowContainer
+    }, /*#__PURE__*/React.createElement(Button, {
+      ArrowCustom: arrow.arrowCustomLeft,
+      callback: arrow.callbackLeft,
+      onPress: this.handlePrevSlide,
+      classes: classes,
+      left: true
+    })), /*#__PURE__*/React.createElement("div", {
+      ref: this.containerRef,
+      className: styles.sliderContainer,
+      draggable: "false"
+    }, /*#__PURE__*/React.createElement(Slider, {
+      transitionSlide: transitionSlide,
+      containerWidth: containerWidth,
+      slideArray: slideArray,
+      shouldAnimate: shouldAnimate,
+      slides: slides,
+      withBorder: withBorder,
+      index: index,
+      handleLegend: this.handleLegend,
+      handlePrevSlide: this.handlePrevSlide,
+      handleNextSlide: this.handleNextSlide,
+      timeAnimation: timeAnimation,
+      arrow: arrow,
+      legend: legend,
+      classes: classes
+    })), legend && legend.position === OUTSIDE && /*#__PURE__*/React.createElement("div", {
+      className: styles.legendContainerOut
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.legend
+    }, slides.map((slide, slideIndex) => /*#__PURE__*/React.createElement(Legend, {
+      LegendCustom: legend.legendCustom,
+      index: slideIndex,
+      currentSlide: index === slideArray.length - 1 ? 0 : index === 0 ? 1 : index - 1,
+      onClick: this.handleLegend,
+      classes: classes,
+      key: "legend-out-".concat(slide.id || slide.imgSrc)
+    })))), arrow && arrow.position === OUTSIDE && /*#__PURE__*/React.createElement("div", {
+      className: styles.arrowContainer
+    }, /*#__PURE__*/React.createElement(Button, {
+      ArrowCustom: arrow.arrowCustomRight,
+      callback: arrow.callbackRight,
+      onPress: this.handleNextSlide,
+      classes: classes
+    })));
+  }
+}
+SliderContainer.propTypes = {
+  activeEvents: bool,
+  arrow: shape({
+    arrowCustomLeft: node,
+    arrowCustomRight: node,
+    callbackLeft: func,
+    callbackRight: func,
+    position: string
+  }),
+  autoPlay: bool,
+  autoPlayDelay: number,
+  className: string,
+  classes: objectOf(string),
+  legend: shape({
+    legendCustom: node,
+    position: string
+  }),
+  enableMove: bool,
+  height: string,
+  slides: arrayOf(shape({
+    imgSrc: string,
+    id: oneOfType([number, string])
+  })),
+  withBorder: number
+};
+export default SliderContainer;