@hitachivantara/uikit-react-lab 4.0.1-next.0 → 4.0.1-next.3

package/dist/legacy/StepNavigation/index.js

@@ -0,0 +1,2 @@
+export { default } from "./StepNavigation";
+//# sourceMappingURL=index.js.map

package/dist/legacy/StepNavigation/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["default"],"sources":["../../../src/StepNavigation/index.js"],"sourcesContent":["export { default } from \"./StepNavigation\";\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,kBAAxB"}

package/dist/legacy/StepNavigation/styles.js

@@ -0,0 +1,33 @@
+var styles = function styles() {
+  return {
+    root: {
+      display: "flex",
+      flexDirection: "column"
+    },
+    titles: {
+      display: "flex"
+    },
+    ol: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexWrap: "wrap",
+      padding: 0,
+      listStyle: "none"
+    },
+    li: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    separator: {
+      userSelect: "none",
+      "& > div": {
+        display: "flex"
+      }
+    }
+  };
+};
+
+export default styles;
+//# sourceMappingURL=styles.js.map

package/dist/legacy/StepNavigation/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","names":["styles","root","display","flexDirection","titles","ol","alignItems","justifyContent","flexWrap","padding","listStyle","li","separator","userSelect"],"sources":["../../../src/StepNavigation/styles.js"],"sourcesContent":["const styles = () => ({\n  root: {\n    display: \"flex\",\n    flexDirection: \"column\",\n  },\n  titles: {\n    display: \"flex\",\n  },\n  ol: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    flexWrap: \"wrap\",\n    padding: 0,\n    listStyle: \"none\",\n  },\n  li: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n  },\n  separator: {\n    userSelect: \"none\",\n    \"& > div\": {\n      display: \"flex\",\n    },\n  },\n});\n\nexport default styles;\n"],"mappings":"AAAA,IAAMA,MAAM,GAAG,SAATA,MAAS;EAAA,OAAO;IACpBC,IAAI,EAAE;MACJC,OAAO,EAAE,MADL;MAEJC,aAAa,EAAE;IAFX,CADc;IAKpBC,MAAM,EAAE;MACNF,OAAO,EAAE;IADH,CALY;IAQpBG,EAAE,EAAE;MACFH,OAAO,EAAE,MADP;MAEFI,UAAU,EAAE,QAFV;MAGFC,cAAc,EAAE,QAHd;MAIFC,QAAQ,EAAE,MAJR;MAKFC,OAAO,EAAE,CALP;MAMFC,SAAS,EAAE;IANT,CARgB;IAgBpBC,EAAE,EAAE;MACFT,OAAO,EAAE,MADP;MAEFI,UAAU,EAAE,QAFV;MAGFC,cAAc,EAAE;IAHd,CAhBgB;IAqBpBK,SAAS,EAAE;MACTC,UAAU,EAAE,MADH;MAET,WAAW;QACTX,OAAO,EAAE;MADA;IAFF;EArBS,CAAP;AAAA,CAAf;;AA6BA,eAAeF,MAAf"}

package/dist/legacy/StepNavigation/utils.js

@@ -0,0 +1,6 @@
+var TITLE_MARGIN = 20;
+var TITLE_WIDTH = 215;
+var STEP_MARGIN = 20;
+var SEPARATOR_WIDTH = 100;
+export { STEP_MARGIN, TITLE_MARGIN, TITLE_WIDTH, SEPARATOR_WIDTH };
+//# sourceMappingURL=utils.js.map

package/dist/legacy/StepNavigation/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":["TITLE_MARGIN","TITLE_WIDTH","STEP_MARGIN","SEPARATOR_WIDTH"],"sources":["../../../src/StepNavigation/utils.js"],"sourcesContent":["const TITLE_MARGIN = 20;\nconst TITLE_WIDTH = 215;\nconst STEP_MARGIN = 20;\nconst SEPARATOR_WIDTH = 100;\n\nexport { STEP_MARGIN, TITLE_MARGIN, TITLE_WIDTH, SEPARATOR_WIDTH };\n"],"mappings":"AAAA,IAAMA,YAAY,GAAG,EAArB;AACA,IAAMC,WAAW,GAAG,GAApB;AACA,IAAMC,WAAW,GAAG,EAApB;AACA,IAAMC,eAAe,GAAG,GAAxB;AAEA,SAASD,WAAT,EAAsBF,YAAtB,EAAoCC,WAApC,EAAiDE,eAAjD"}

package/dist/legacy/index.d.ts

@@ -15,3 +15,9 @@ export * from "./NotificationPanel";
 
 export { default as HvTimeAgo } from "./TimeAgo";
 export * from "./TimeAgo";
+
+export { default as HvImageCarousel } from "./ImageCarousel";
+export * from "./ImageCarousel";
+
+export { default as HvStepNavigation } from "./StepNavigation";
+export * from "./StepNavigation";

package/dist/legacy/index.js

@@ -5,4 +5,6 @@ export { default as HvNavigationAnchors } from "./NavigationAnchors";
 export { default as HvNotificationPanel } from "./NotificationPanel";
 export { default as HvTimeAgo } from "./TimeAgo";
 export * from "./TimeAgo";
+export { default as HvImageCarousel } from "./ImageCarousel";
+export { default as HvStepNavigation } from "./StepNavigation";
 //# sourceMappingURL=index.js.map

package/dist/legacy/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default","HvColorPicker","HvDrawer","HvInlineEditor","HvNavigationAnchors","HvNotificationPanel","HvTimeAgo"],"sources":["../../src/index.js"],"sourcesContent":["export { default as HvColorPicker } from \"./ColorPicker\";\n\nexport { default as HvDrawer } from \"./Drawer\";\n\nexport { default as HvInlineEditor } from \"./InlineEditor\";\n\nexport { default as HvNavigationAnchors } from \"./NavigationAnchors\";\n\nexport { default as HvNotificationPanel } from \"./NotificationPanel\";\n\nexport { default as HvTimeAgo } from \"./TimeAgo\";\nexport * from \"./TimeAgo\";\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,aAApB,QAAyC,eAAzC;AAEA,SAASD,OAAO,IAAIE,QAApB,QAAoC,UAApC;AAEA,SAASF,OAAO,IAAIG,cAApB,QAA0C,gBAA1C;AAEA,SAASH,OAAO,IAAII,mBAApB,QAA+C,qBAA/C;AAEA,SAASJ,OAAO,IAAIK,mBAApB,QAA+C,qBAA/C;AAEA,SAASL,OAAO,IAAIM,SAApB,QAAqC,WAArC;AACA,cAAc,WAAd"}
+{"version":3,"file":"index.js","names":["default","HvColorPicker","HvDrawer","HvInlineEditor","HvNavigationAnchors","HvNotificationPanel","HvTimeAgo","HvImageCarousel","HvStepNavigation"],"sources":["../../src/index.js"],"sourcesContent":["export { default as HvColorPicker } from \"./ColorPicker\";\n\nexport { default as HvDrawer } from \"./Drawer\";\n\nexport { default as HvInlineEditor } from \"./InlineEditor\";\n\nexport { default as HvNavigationAnchors } from \"./NavigationAnchors\";\n\nexport { default as HvNotificationPanel } from \"./NotificationPanel\";\n\nexport { default as HvTimeAgo } from \"./TimeAgo\";\nexport * from \"./TimeAgo\";\n\nexport { default as HvImageCarousel } from \"./ImageCarousel\";\n\nexport { default as HvStepNavigation } from \"./StepNavigation\";\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,aAApB,QAAyC,eAAzC;AAEA,SAASD,OAAO,IAAIE,QAApB,QAAoC,UAApC;AAEA,SAASF,OAAO,IAAIG,cAApB,QAA0C,gBAA1C;AAEA,SAASH,OAAO,IAAII,mBAApB,QAA+C,qBAA/C;AAEA,SAASJ,OAAO,IAAIK,mBAApB,QAA+C,qBAA/C;AAEA,SAASL,OAAO,IAAIM,SAApB,QAAqC,WAArC;AACA,cAAc,WAAd;AAEA,SAASN,OAAO,IAAIO,eAApB,QAA2C,iBAA3C;AAEA,SAASP,OAAO,IAAIQ,gBAApB,QAA4C,kBAA5C"}

package/dist/modern/ImageCarousel/ImageCarousel.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { StandardProps } from "@mui/material";
+
+export type HvImageCarouselClassKey = "root";
+
+export type HvImageCarouselProps = StandardProps<
+  React.HTMLAttributes<HTMLDivElement>,
+  HvImageCarouselClassKey
+>;
+
+export default function HvImageCarousel(props: HvImageCarouselProps): JSX.Element | null;

package/dist/modern/ImageCarousel/ImageCarousel.js

@@ -0,0 +1,542 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+
+var _Close, _Fullscreen, _Backwards, _Forwards, _Backwards2, _Forwards2;
+
+const _excluded = ["className", "classes", "documents", "title", "id", "fullscreen", "thumbnails", "lowCardinality", "infiniteCarousel", "xs", "onChange", "counter", "currentStep", "setCurrentStep", "visibleArrows", "variant"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import "core-js/modules/web.dom-collections.iterator.js";
+import React, { useState, useRef, useEffect, useCallback } from "react";
+import PropTypes from "prop-types";
+import clsx from "clsx";
+import { setId, useUniqueId, HvButton, HvContainer, HvTypography, HvGrid, HvStack, HvPanel, useScrollTo } from "@hitachivantara/uikit-react-core";
+import { Button, Fade } from "@mui/material";
+import { withStyles, makeStyles } from "@mui/styles";
+import { Backwards, Forwards, Close, Fullscreen } from "@hitachivantara/uikit-react-icons";
+import styles from "./styles";
+/**
+ * ImageCarousel description/documentation paragraph
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+
+const HvImageCarousel = props => {
+  const {
+    className,
+    classes,
+    documents,
+    title,
+    id,
+    fullscreen: fullscreenProp = false,
+    thumbnails = false,
+    lowCardinality = false,
+    infiniteCarousel = false,
+    xs = false,
+    onChange,
+    counter = false,
+    currentStep = 0,
+    setCurrentStep,
+    visibleArrows = false,
+    variant = "contain"
+  } = props,
+        others = _objectWithoutProperties(props, _excluded);
+
+  const elementId = useUniqueId(id, "hvcarousel");
+  const [fullscreen, setFullscreen] = useState(false);
+  const options = documents.map(element => ({
+    src: element.src,
+    value: setId(elementId, element.value)
+  }));
+  const [sliceStart, setSliceStart] = useState(0);
+  const [selImage, setImage] = useState(currentStep);
+  const [offset, setOffset] = useState(0);
+  const [imageHover, setImageHover] = useState(false);
+  let direction = "next";
+  const useStyles = makeStyles(theme => ({
+    button: {
+      backgroundColor: theme.hv.palette.atmosphere.atmo3
+    },
+    imageBox: {
+      minWidth: "100%",
+      display: "flex",
+      justifyContent: "center"
+    },
+    allImages: {
+      width: "max-content",
+      display: "flex"
+    }
+  }));
+  const style = useStyles();
+  const [selectedIndex, setScrollTo] = useScrollTo(0, setId(elementId, "panel"), false, 100, documents, onChange, "row");
+  const [selectedBigIndex, setBigScrollTo] = useScrollTo(0, setId(elementId, "bigPanel"), false, 0, options, onChange, "row");
+  const refBackwards = useRef(null);
+  const refForwards = useRef(null);
+  let typeCircle = "circle";
+  const handleSelection = useCallback((event, value, index) => {
+    const wrappedOnChange = () => {
+      onChange === null || onChange === void 0 ? void 0 : onChange(event, index);
+    };
+
+    setScrollTo(event, value, index, wrappedOnChange);
+  }, [onChange, setScrollTo]);
+
+  const handleFocus = focus => {
+    if (focus === refBackwards.current || focus === refForwards.current) focus.focus();
+  };
+
+  const handleBigSelection = useCallback((event, value, index) => {
+    const wrappedOnChange = () => {
+      onChange === null || onChange === void 0 ? void 0 : onChange(event, index);
+    };
+
+    setBigScrollTo(event, value, index, wrappedOnChange);
+  }, [onChange, setBigScrollTo]);
+  const handleVisibility = useCallback((event, value, index) => {
+    const image = document.getElementById(value);
+    const panel = document.getElementById(setId(elementId, "panel"));
+    const container = document.getElementById(setId(elementId, "container"));
+    const containerWidth = container.offsetWidth;
+    const offsetPanel = panel.offsetLeft;
+    const offsetImage = image.offsetLeft;
+    const imageWidth = image.offsetWidth;
+    const scroll = panel.scrollLeft;
+    const focus = document.activeElement;
+
+    if (offsetPanel + offsetImage + offset + imageWidth - scroll > containerWidth || offsetImage - scroll < 0) {
+      handleSelection(event, value, index);
+      handleFocus(focus);
+    }
+  }, [elementId, handleSelection, offset]);
+  useEffect(() => {
+    setCurrentStep === null || setCurrentStep === void 0 ? void 0 : setCurrentStep(selImage);
+  }, [selImage, setCurrentStep]);
+  useEffect(() => {
+    if (fullscreen) setOffset(150);else setOffset(0);
+
+    if (thumbnails) {
+      handleVisibility(undefined, documents[selImage].value, selImage, selectedIndex);
+    }
+
+    handleBigSelection(undefined, options[selImage].value, selImage, selectedBigIndex);
+  }, [documents, fullscreen, handleBigSelection, handleVisibility, options, selImage, selectedBigIndex, selectedIndex, thumbnails]);
+
+  const changeSlice = () => {
+    if (direction === "next") {
+      if (infiniteCarousel && selImage === documents.length - 1) setSliceStart(0);else if (selImage > sliceStart + 2 && selImage !== documents.length - 2) setSliceStart(sliceStart + 1);
+    }
+
+    if (direction === "prev") {
+      if (infiniteCarousel && selImage === 0) setSliceStart(documents.length > 5 ? documents.length - 5 : 0);else if (selImage < sliceStart + 2 && selImage !== 1) setSliceStart(sliceStart - 1);
+    }
+  };
+
+  const nextImage = () => {
+    let next;
+    if (selImage !== documents.length - 1) next = selImage + 1;else if (infiniteCarousel) next = 0;
+    setImage(next);
+
+    if (xs) {
+      direction = "next";
+      changeSlice();
+    }
+  };
+
+  const previousImage = () => {
+    let previous;
+    if (selImage !== 0) previous = selImage - 1;else if (infiniteCarousel) previous = documents.length - 1;
+    setImage(previous);
+
+    if (xs) {
+      direction = "prev";
+      changeSlice();
+    }
+  };
+
+  const styleThumbnail = index => {
+    if (index !== selImage) return classes.img;
+    return classes.thumbnailSelected;
+  };
+
+  const circleType = index => {
+    if (index === selImage) {
+      typeCircle = "BigCircle";
+      if (xs) return classes.xsSelectedCircle;
+      return classes.selectedCircle;
+    }
+
+    typeCircle = "Circle";
+    return classes.miniCircle;
+  };
+
+  return /*#__PURE__*/_jsxs(HvContainer, _objectSpread(_objectSpread({
+    id: setId(elementId, "container"),
+    className: clsx(className, classes.root, xs ? "xs" : "nxs", fullscreen && classes.fullscreenStyle)
+  }, others), {}, {
+    children: [!xs && /*#__PURE__*/_jsxs("div", {
+      className: classes.title,
+      children: [/*#__PURE__*/_jsx("div", {
+        children: title
+      }), fullscreenProp && /*#__PURE__*/_jsx("div", {
+        children: fullscreen ? /*#__PURE__*/_jsx(HvButton, {
+          className: classes.closeButton,
+          icon: true,
+          "aria-label": "Close",
+          onClick: () => setFullscreen(!fullscreen),
+          children: _Close || (_Close = /*#__PURE__*/_jsx(Close, {}))
+        }) : /*#__PURE__*/_jsx(HvButton, {
+          icon: true,
+          "aria-label": "Fullscreen",
+          onClick: () => setFullscreen(true),
+          children: _Fullscreen || (_Fullscreen = /*#__PURE__*/_jsx(Fullscreen, {}))
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(HvContainer, {
+      className: clsx(classes.imageContainer, fullscreen ? "fullscreen" : "notFullscreen", !xs && "nxs"),
+      onFocus: () => setImageHover(true),
+      onMouseOver: () => setImageHover(true),
+      onBlur: () => setImageHover(false),
+      onMouseOut: () => setImageHover(false),
+      children: [/*#__PURE__*/_jsx(HvPanel, {
+        className: clsx(classes.stack, xs ? "xs" : "nxs"),
+        id: setId(elementId, "bigPanel"),
+        children: options.map((element, index) => /*#__PURE__*/_jsx("div", {
+          className: style.imageBox,
+          id: element.value,
+          children: /*#__PURE__*/_jsx(Fade, {
+            in: selImage === index || xs,
+            timeout: {
+              appear: 500,
+              enter: 1200,
+              exit: 200
+            },
+            children: /*#__PURE__*/_jsx("img", {
+              className: clsx(classes.selectedImage, xs ? "xs" : "nxs", fullscreen ? "fullscreen" : "notFullscreen", variant),
+              src: element.src,
+              alt: element.value
+            }, `image ${element.value}`)
+          })
+        }, `div ${element.value}`))
+      }), (xs || lowCardinality) && /*#__PURE__*/_jsxs("div", {
+        className: clsx(classes.lowButtons, !xs && "nxs"),
+        children: [/*#__PURE__*/_jsx("div", {
+          children: /*#__PURE__*/_jsx(Fade, {
+            in: imageHover || visibleArrows,
+            children: /*#__PURE__*/_jsx(HvButton, {
+              ref: refBackwards,
+              className: classes.button,
+              icon: true,
+              "aria-label": "Backwards",
+              onClick: event => previousImage(event),
+              children: _Backwards || (_Backwards = /*#__PURE__*/_jsx(Backwards, {}))
+            })
+          })
+        }), /*#__PURE__*/_jsx("div", {
+          children: /*#__PURE__*/_jsx(Fade, {
+            in: imageHover || visibleArrows,
+            children: /*#__PURE__*/_jsx(HvButton, {
+              ref: refForwards,
+              className: classes.button,
+              icon: true,
+              "aria-label": "Forwards",
+              onClick: event => nextImage(event),
+              children: _Forwards || (_Forwards = /*#__PURE__*/_jsx(Forwards, {}))
+            })
+          })
+        })]
+      }), xs && /*#__PURE__*/_jsx("div", {
+        className: classes.xsCircles,
+        children: documents.map((element, index) => /*#__PURE__*/_jsx("span", {
+          className: circleType(index),
+          title: typeCircle
+        }, `Circle ${element.value}`)).slice(sliceStart, sliceStart + 5)
+      }), counter && /*#__PURE__*/_jsx("div", {
+        className: clsx(classes.divCounter, !xs && "nxs"),
+        children: /*#__PURE__*/_jsx("span", {
+          className: classes.counter,
+          children: /*#__PURE__*/_jsx(HvTypography, {
+            variant: "normalText",
+            style: {
+              color: "white"
+            },
+            children: `${selImage + 1}/${documents.length}`
+          })
+        })
+      })]
+    }), !xs && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [lowCardinality ? /*#__PURE__*/_jsx("div", {
+        className: classes.circles,
+        children: documents.map((element, index) => /*#__PURE__*/_jsx("span", {
+          className: circleType(index),
+          title: `${typeCircle} ${index}`
+        }, `Circle ${element.value}`))
+      }) : /*#__PURE__*/_jsxs(HvGrid, {
+        className: clsx(classes.normalButtons),
+        container: true,
+        justifyContent: "space-between",
+        alignItems: "center",
+        children: [/*#__PURE__*/_jsx(HvGrid, {
+          item: true,
+          children: /*#__PURE__*/_jsx(HvButton, {
+            className: infiniteCarousel || selImage !== 0 ? "" : classes.hidden,
+            ref: refBackwards,
+            icon: true,
+            "aria-label": "Backwards",
+            onClick: event => previousImage(event),
+            children: _Backwards2 || (_Backwards2 = /*#__PURE__*/_jsx(Backwards, {}))
+          })
+        }), /*#__PURE__*/_jsxs(HvGrid, {
+          item: true,
+          children: [/*#__PURE__*/_jsx(HvTypography, {
+            variant: "highlightText",
+            component: "a",
+            children: selImage + 1
+          }), /*#__PURE__*/_jsx(HvTypography, {
+            variant: "normalText",
+            component: "a",
+            children: ` /  ${documents.length}`
+          })]
+        }), /*#__PURE__*/_jsx(HvGrid, {
+          item: true,
+          children: /*#__PURE__*/_jsx(HvButton, {
+            className: infiniteCarousel || selImage !== documents.length - 1 ? "" : classes.hidden,
+            ref: refForwards,
+            icon: true,
+            "aria-label": "Forwards",
+            onClick: event => nextImage(event),
+            children: _Forwards2 || (_Forwards2 = /*#__PURE__*/_jsx(Forwards, {}))
+          })
+        })]
+      }), thumbnails && /*#__PURE__*/_jsx(HvPanel, {
+        className: classes.panel,
+        id: setId(elementId, "panel"),
+        children: /*#__PURE__*/_jsx(HvStack, {
+          direction: "row",
+          spacing: "xs",
+          withNavigation: true,
+          children: documents.map((element, i) => /*#__PURE__*/_jsx(Button, {
+            id: element.value,
+            className: classes.thumbnailButton,
+            onClick: () => setImage(i),
+            children: /*#__PURE__*/_jsx("img", {
+              className: styleThumbnail(i),
+              src: element.src,
+              alt: element.value
+            }, `Thumbnail ${element.value}`)
+          }, `Button ${element.value}`))
+        }, "Thumbnails")
+      })]
+    })]
+  }));
+};
+
+process.env.NODE_ENV !== "production" ? HvImageCarousel.propTypes = {
+  /**
+   * Class names to be applied.
+   */
+  className: PropTypes.string,
+
+  /**
+   * A Jss Object used to override or extend the styles applied.
+   */
+  classes: PropTypes.shape({
+    /**
+     * Styles applied to the component root class.
+     */
+    root: PropTypes.string,
+
+    /**
+     * Styles applied to the component SelectedImage.
+     */
+    selectedImage: PropTypes.string,
+
+    /**
+     * Styles applied to xs mode
+     */
+    xsMode: PropTypes.string,
+
+    /**
+     * Styles applied to image in xsMode
+     */
+    xsImage: PropTypes.string,
+
+    /**
+     * Styles applied to panel with low cardinality circles
+     */
+    circles: PropTypes.string,
+
+    /**
+     * Styles applied to xs mode circles
+     */
+    xsCircles: PropTypes.string,
+
+    /**
+     * Styles applied to unavailable button
+     */
+    hidden: PropTypes.string,
+
+    /**
+     * Styles applied to the carousel title
+     */
+    title: PropTypes.string,
+
+    /**
+     * Styles applied to the counter
+     */
+    counter: PropTypes.string,
+
+    /**
+     * Styles applied to the div with the counter
+     */
+    divCounter: PropTypes.string,
+
+    /**
+     * Styles applied to the thumbnails
+     */
+    img: PropTypes.string,
+
+    /**
+     * Styles applied to the selected thumbnail
+     */
+    thumbnailSelected: PropTypes.string,
+
+    /**
+     * Styles applied to the thumbnail button
+     */
+    thumbnailButton: PropTypes.string,
+
+    /**
+     * Styles applied to the low cardinality circles
+     */
+    miniCircle: PropTypes.string,
+
+    /**
+     * Styles applied to the circle of the selected image
+     */
+    selectedCircle: PropTypes.string,
+
+    /**
+     * Styles applied to the circle of the selected image in xsmode
+     */
+    xsSelectedCircle: PropTypes.string,
+
+    /**
+     * Styles applied to the panel with low cardinality buttons
+     */
+    lowButtons: PropTypes.string,
+
+    /**
+     * Styles applied to the container of the selected image
+     */
+    imageContainer: PropTypes.string,
+
+    /**
+     * Styles applied to the panel with the thumbnails
+     */
+    stack: PropTypes.string,
+
+    /**
+     * Styles applied to the panel that contains the buttons and counter in default mode
+     */
+    normalButtons: PropTypes.string,
+
+    /**
+     * Styles applied to fullscreen mode.
+     */
+    fullscreenStyle: PropTypes.string,
+
+    /**
+     * Styles applied to close button in fullscreen mode.
+     */
+    closeButton: PropTypes.string,
+
+    /**
+     * Styles applied to change image buttons.
+     */
+    button: PropTypes.string,
+
+    /**
+     * Styles applied to thumbnails panel.
+     */
+    panel: PropTypes.string
+  }).isRequired,
+
+  /**
+   * Documents to be displayed.
+   */
+  documents: PropTypes.array.isRequired,
+
+  /**
+   * Title of the image carousel
+   */
+  title: PropTypes.node,
+
+  /**
+   * A function called each time the selected image changes.
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Id to be applied to the root node.
+   */
+  id: PropTypes.string,
+
+  /**
+   * A flag that activates the thumbnails.
+   */
+  thumbnails: PropTypes.bool,
+
+  /**
+   * A flag that switches to low cardinality mode
+   */
+  lowCardinality: PropTypes.bool,
+
+  /**
+   * A flag that activates the infinite carousel behavior
+   */
+  infiniteCarousel: PropTypes.bool,
+
+  /**
+   * A flag that activates a counter on the top right corner of the selected image
+   */
+  counter: PropTypes.bool,
+
+  /**
+   * Set Image Carousel to fullscreen mode
+   */
+  fullscreen: PropTypes.bool,
+
+  /**
+   * Set selected image to a particular image in documents
+   */
+  currentStep: PropTypes.number,
+
+  /**
+   * Function that changes the selected image
+   */
+  setCurrentStep: PropTypes.func,
+
+  /**
+   * Image Carousel set to xs mode
+   */
+  xs: PropTypes.bool,
+
+  /**
+   * Arrows always displayed in low cardinality or xs mode
+   */
+  visibleArrows: PropTypes.bool,
+
+  /**
+   * Selected image fit variant
+   */
+  variant: PropTypes.string
+} : void 0;
+export default withStyles(styles, {
+  name: "HvImageCarousel"
+})(HvImageCarousel);
+//# sourceMappingURL=ImageCarousel.js.map