@hitachivantara/uikit-react-lab 3.55.0 → 4.0.1-next.2

package/dist/modern/ColorPicker/PresetColors/PresetColors.js

@@ -1,8 +1,14 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+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 React from "react";
 import PropTypes from "prop-types";
 import { Swatch } from "react-color/lib/components/common";
 import useStyles from "./styles";
+import { jsx as _jsx } from "react/jsx-runtime";
 export const SketchPresetColors = ({
   colors,
   onClick = () => {}
@@ -16,24 +22,25 @@ export const SketchPresetColors = ({
     }, e);
   };
 
-  return /*#__PURE__*/React.createElement("div", {
-    className: classes.colors
-  }, colors.map(colorObjOrString => {
-    const c = typeof colorObjOrString === "string" ? {
-      color: colorObjOrString
-    } : colorObjOrString;
-    const key = `${c.color}${c.title || ""}`;
-    return /*#__PURE__*/React.createElement("div", {
-      key: key,
-      className: classes.swatchWrap
-    }, /*#__PURE__*/React.createElement(Swatch, _extends({}, c, {
-      className: classes.swatch,
-      onClick: handleClick,
-      focusStyle: {
-        boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${c.color}`
-      }
-    })));
-  }));
+  return /*#__PURE__*/_jsx("div", {
+    className: classes.colors,
+    children: colors.map(colorObjOrString => {
+      const c = typeof colorObjOrString === "string" ? {
+        color: colorObjOrString
+      } : colorObjOrString;
+      const key = `${c.color}${c.title || ""}`;
+      return /*#__PURE__*/_jsx("div", {
+        className: classes.swatchWrap,
+        children: /*#__PURE__*/_jsx(Swatch, _objectSpread(_objectSpread({}, c), {}, {
+          className: classes.swatch,
+          onClick: handleClick,
+          focusStyle: {
+            boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${c.color}`
+          }
+        }))
+      }, key);
+    })
+  });
 };
 process.env.NODE_ENV !== "production" ? SketchPresetColors.propTypes = {
   colors: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.shape({

package/dist/modern/ColorPicker/PresetColors/PresetColors.js.map

@@ -1 +1 @@
-{"version":3,"file":"PresetColors.js","names":["React","PropTypes","Swatch","useStyles","SketchPresetColors","colors","onClick","classes","handleClick","hex","e","source","map","colorObjOrString","c","color","key","title","swatchWrap","swatch","boxShadow","propTypes","arrayOf","oneOfType","string","shape","isRequired","func"],"sources":["../../../../src/ColorPicker/PresetColors/PresetColors.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport { Swatch } from \"react-color/lib/components/common\";\n\nimport useStyles from \"./styles\";\n\nexport const SketchPresetColors = ({ colors, onClick = () => {} }) => {\n  const classes = useStyles();\n\n  const handleClick = (hex, e) => {\n    onClick(\n      {\n        hex,\n        source: \"hex\",\n      },\n      e\n    );\n  };\n\n  return (\n    <div className={classes.colors}>\n      {colors.map((colorObjOrString) => {\n        const c =\n          typeof colorObjOrString === \"string\" ? { color: colorObjOrString } : colorObjOrString;\n        const key = `${c.color}${c.title || \"\"}`;\n        return (\n          <div key={key} className={classes.swatchWrap}>\n            <Swatch\n              {...c}\n              className={classes.swatch}\n              onClick={handleClick}\n              focusStyle={{\n                boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${c.color}`,\n              }}\n            />\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n\nSketchPresetColors.propTypes = {\n  colors: PropTypes.arrayOf(\n    PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.shape({\n        color: PropTypes.string,\n        title: PropTypes.string,\n      }),\n    ])\n  ).isRequired,\n  onClick: PropTypes.func.isRequired,\n};\n\nexport default SketchPresetColors;\n"],"mappings":";AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,SAASC,MAAT,QAAuB,mCAAvB;AAEA,OAAOC,SAAP,MAAsB,UAAtB;AAEA,OAAO,MAAMC,kBAAkB,GAAG,CAAC;EAAEC,MAAF;EAAUC,OAAO,GAAG,MAAM,CAAE;AAA5B,CAAD,KAAoC;EACpE,MAAMC,OAAO,GAAGJ,SAAS,EAAzB;;EAEA,MAAMK,WAAW,GAAG,CAACC,GAAD,EAAMC,CAAN,KAAY;IAC9BJ,OAAO,CACL;MACEG,GADF;MAEEE,MAAM,EAAE;IAFV,CADK,EAKLD,CALK,CAAP;EAOD,CARD;;EAUA,oBACE;IAAK,SAAS,EAAEH,OAAO,CAACF;EAAxB,GACGA,MAAM,CAACO,GAAP,CAAYC,gBAAD,IAAsB;IAChC,MAAMC,CAAC,GACL,OAAOD,gBAAP,KAA4B,QAA5B,GAAuC;MAAEE,KAAK,EAAEF;IAAT,CAAvC,GAAqEA,gBADvE;IAEA,MAAMG,GAAG,GAAI,GAAEF,CAAC,CAACC,KAAM,GAAED,CAAC,CAACG,KAAF,IAAW,EAAG,EAAvC;IACA,oBACE;MAAK,GAAG,EAAED,GAAV;MAAe,SAAS,EAAET,OAAO,CAACW;IAAlC,gBACE,oBAAC,MAAD,eACMJ,CADN;MAEE,SAAS,EAAEP,OAAO,CAACY,MAFrB;MAGE,OAAO,EAAEX,WAHX;MAIE,UAAU,EAAE;QACVY,SAAS,EAAG,4CAA2CN,CAAC,CAACC,KAAM;MADrD;IAJd,GADF,CADF;EAYD,CAhBA,CADH,CADF;AAqBD,CAlCM;AAoCP,wCAAAX,kBAAkB,CAACiB,SAAnB,GAA+B;EAC7BhB,MAAM,EAAEJ,SAAS,CAACqB,OAAV,CACNrB,SAAS,CAACsB,SAAV,CAAoB,CAClBtB,SAAS,CAACuB,MADQ,EAElBvB,SAAS,CAACwB,KAAV,CAAgB;IACdV,KAAK,EAAEd,SAAS,CAACuB,MADH;IAEdP,KAAK,EAAEhB,SAAS,CAACuB;EAFH,CAAhB,CAFkB,CAApB,CADM,EAQNE,UAT2B;EAU7BpB,OAAO,EAAEL,SAAS,CAAC0B,IAAV,CAAeD;AAVK,CAA/B;AAaA,eAAetB,kBAAf"}
+{"version":3,"file":"PresetColors.js","names":["React","PropTypes","Swatch","useStyles","SketchPresetColors","colors","onClick","classes","handleClick","hex","e","source","map","colorObjOrString","c","color","key","title","swatchWrap","swatch","boxShadow","propTypes","arrayOf","oneOfType","string","shape","isRequired","func"],"sources":["../../../../src/ColorPicker/PresetColors/PresetColors.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport { Swatch } from \"react-color/lib/components/common\";\n\nimport useStyles from \"./styles\";\n\nexport const SketchPresetColors = ({ colors, onClick = () => {} }) => {\n  const classes = useStyles();\n\n  const handleClick = (hex, e) => {\n    onClick(\n      {\n        hex,\n        source: \"hex\",\n      },\n      e\n    );\n  };\n\n  return (\n    <div className={classes.colors}>\n      {colors.map((colorObjOrString) => {\n        const c =\n          typeof colorObjOrString === \"string\" ? { color: colorObjOrString } : colorObjOrString;\n        const key = `${c.color}${c.title || \"\"}`;\n        return (\n          <div key={key} className={classes.swatchWrap}>\n            <Swatch\n              {...c}\n              className={classes.swatch}\n              onClick={handleClick}\n              focusStyle={{\n                boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${c.color}`,\n              }}\n            />\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n\nSketchPresetColors.propTypes = {\n  colors: PropTypes.arrayOf(\n    PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.shape({\n        color: PropTypes.string,\n        title: PropTypes.string,\n      }),\n    ])\n  ).isRequired,\n  onClick: PropTypes.func.isRequired,\n};\n\nexport default SketchPresetColors;\n"],"mappings":";;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,SAASC,MAAT,QAAuB,mCAAvB;AAEA,OAAOC,SAAP,MAAsB,UAAtB;;AAEA,OAAO,MAAMC,kBAAkB,GAAG,CAAC;EAAEC,MAAF;EAAUC,OAAO,GAAG,MAAM,CAAE;AAA5B,CAAD,KAAoC;EACpE,MAAMC,OAAO,GAAGJ,SAAS,EAAzB;;EAEA,MAAMK,WAAW,GAAG,CAACC,GAAD,EAAMC,CAAN,KAAY;IAC9BJ,OAAO,CACL;MACEG,GADF;MAEEE,MAAM,EAAE;IAFV,CADK,EAKLD,CALK,CAAP;EAOD,CARD;;EAUA,oBACE;IAAK,SAAS,EAAEH,OAAO,CAACF,MAAxB;IAAA,UACGA,MAAM,CAACO,GAAP,CAAYC,gBAAD,IAAsB;MAChC,MAAMC,CAAC,GACL,OAAOD,gBAAP,KAA4B,QAA5B,GAAuC;QAAEE,KAAK,EAAEF;MAAT,CAAvC,GAAqEA,gBADvE;MAEA,MAAMG,GAAG,GAAI,GAAEF,CAAC,CAACC,KAAM,GAAED,CAAC,CAACG,KAAF,IAAW,EAAG,EAAvC;MACA,oBACE;QAAe,SAAS,EAAEV,OAAO,CAACW,UAAlC;QAAA,uBACE,KAAC,MAAD,kCACMJ,CADN;UAEE,SAAS,EAAEP,OAAO,CAACY,MAFrB;UAGE,OAAO,EAAEX,WAHX;UAIE,UAAU,EAAE;YACVY,SAAS,EAAG,4CAA2CN,CAAC,CAACC,KAAM;UADrD;QAJd;MADF,GAAUC,GAAV,CADF;IAYD,CAhBA;EADH,EADF;AAqBD,CAlCM;AAoCP,wCAAAZ,kBAAkB,CAACiB,SAAnB,GAA+B;EAC7BhB,MAAM,EAAEJ,SAAS,CAACqB,OAAV,CACNrB,SAAS,CAACsB,SAAV,CAAoB,CAClBtB,SAAS,CAACuB,MADQ,EAElBvB,SAAS,CAACwB,KAAV,CAAgB;IACdV,KAAK,EAAEd,SAAS,CAACuB,MADH;IAEdP,KAAK,EAAEhB,SAAS,CAACuB;EAFH,CAAhB,CAFkB,CAApB,CADM,EAQNE,UAT2B;EAU7BpB,OAAO,EAAEL,SAAS,CAAC0B,IAAV,CAAeD;AAVK,CAA/B;AAaA,eAAetB,kBAAf"}

package/dist/modern/ColorPicker/PresetColors/styles.js

@@ -1,4 +1,4 @@
-import { makeStyles } from "@material-ui/core";
+import { makeStyles } from "@mui/styles";
 const styles = makeStyles(() => ({
   colors: {
     display: "flex",

package/dist/modern/ColorPicker/PresetColors/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["makeStyles","styles","colors","display","flexWrap","position","width","margin","padding","swatchWrap","height","swatch","borderRadius","boxShadow"],"sources":["../../../../src/ColorPicker/PresetColors/styles.js"],"sourcesContent":["import { makeStyles } from \"@material-ui/core\";\n\nconst styles = makeStyles(() => ({\n  colors: {\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    position: \"relative\",\n    width: \"calc(100% + 5px)\",\n    margin: \"-5px -3px\",\n    padding: 0,\n  },\n  swatchWrap: {\n    width: \"16px\",\n    height: \"16px\",\n    margin: 5,\n  },\n  swatch: {\n    borderRadius: \"3px\",\n    boxShadow: \"inset 0 0 0 1px rgba(0,0,0,.15)\",\n  },\n}));\n\nexport default styles;\n"],"mappings":"AAAA,SAASA,UAAT,QAA2B,mBAA3B;AAEA,MAAMC,MAAM,GAAGD,UAAU,CAAC,OAAO;EAC/BE,MAAM,EAAE;IACNC,OAAO,EAAE,MADH;IAENC,QAAQ,EAAE,MAFJ;IAGNC,QAAQ,EAAE,UAHJ;IAINC,KAAK,EAAE,kBAJD;IAKNC,MAAM,EAAE,WALF;IAMNC,OAAO,EAAE;EANH,CADuB;EAS/BC,UAAU,EAAE;IACVH,KAAK,EAAE,MADG;IAEVI,MAAM,EAAE,MAFE;IAGVH,MAAM,EAAE;EAHE,CATmB;EAc/BI,MAAM,EAAE;IACNC,YAAY,EAAE,KADR;IAENC,SAAS,EAAE;EAFL;AAduB,CAAP,CAAD,CAAzB;AAoBA,eAAeZ,MAAf"}
+{"version":3,"file":"styles.js","names":["makeStyles","styles","colors","display","flexWrap","position","width","margin","padding","swatchWrap","height","swatch","borderRadius","boxShadow"],"sources":["../../../../src/ColorPicker/PresetColors/styles.js"],"sourcesContent":["import { makeStyles } from \"@mui/styles\";\n\nconst styles = makeStyles(() => ({\n  colors: {\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    position: \"relative\",\n    width: \"calc(100% + 5px)\",\n    margin: \"-5px -3px\",\n    padding: 0,\n  },\n  swatchWrap: {\n    width: \"16px\",\n    height: \"16px\",\n    margin: 5,\n  },\n  swatch: {\n    borderRadius: \"3px\",\n    boxShadow: \"inset 0 0 0 1px rgba(0,0,0,.15)\",\n  },\n}));\n\nexport default styles;\n"],"mappings":"AAAA,SAASA,UAAT,QAA2B,aAA3B;AAEA,MAAMC,MAAM,GAAGD,UAAU,CAAC,OAAO;EAC/BE,MAAM,EAAE;IACNC,OAAO,EAAE,MADH;IAENC,QAAQ,EAAE,MAFJ;IAGNC,QAAQ,EAAE,UAHJ;IAINC,KAAK,EAAE,kBAJD;IAKNC,MAAM,EAAE,WALF;IAMNC,OAAO,EAAE;EANH,CADuB;EAS/BC,UAAU,EAAE;IACVH,KAAK,EAAE,MADG;IAEVI,MAAM,EAAE,MAFE;IAGVH,MAAM,EAAE;EAHE,CATmB;EAc/BI,MAAM,EAAE;IACNC,YAAY,EAAE,KADR;IAENC,SAAS,EAAE;EAFL;AAduB,CAAP,CAAD,CAAzB;AAoBA,eAAeZ,MAAf"}

package/dist/modern/Drawer/Drawer.d.ts

@@ -1,4 +1,4 @@
-import { DrawerProps, StandardProps } from "@material-ui/core";
+import { DrawerProps, StandardProps } from "@mui/material";
 
 
 export type HvDrawerClassKey = "root" | "background" | "paper" | "closeButton";

package/dist/modern/Drawer/Drawer.js

@@ -1,13 +1,19 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 
 var _Close;
 
 const _excluded = ["className", "classes", "id", "children", "open", "onClose", "anchor", "buttonTitle"];
+
+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 React from "react";
 import clsx from "clsx";
 import PropTypes from "prop-types";
-import { Drawer, withStyles } from "@material-ui/core";
+import { Drawer } from "@mui/material";
+import { withStyles } from "@mui/styles";
 import { Close } from "@hitachivantara/uikit-react-icons";
 import { HvButton, withTooltip, setId } from "@hitachivantara/uikit-react-core";
 import styles from "./styles";
@@ -17,6 +23,9 @@ import styles from "./styles";
  * content can be customized.
  */
 
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
 const HvDrawer = _ref => {
   let {
     className,
@@ -30,12 +39,12 @@ const HvDrawer = _ref => {
   } = _ref,
       others = _objectWithoutProperties(_ref, _excluded);
 
-  const closeButtonDisplay = () => _Close || (_Close = /*#__PURE__*/React.createElement(Close, {
+  const closeButtonDisplay = () => _Close || (_Close = /*#__PURE__*/_jsx(Close, {
     role: "presentation"
   }));
 
   const CloseButtonTooltipWrapper = buttonTitle ? withTooltip(closeButtonDisplay, buttonTitle, "top") : closeButtonDisplay;
-  return /*#__PURE__*/React.createElement(Drawer, _extends({
+  return /*#__PURE__*/_jsxs(Drawer, _objectSpread(_objectSpread({
     className: clsx(classes.root, className),
     id: id,
     anchor: anchor,
@@ -51,13 +60,16 @@ const HvDrawer = _ref => {
       }
     },
     onClose: (event, reason) => onClose(event, reason)
-  }, others), /*#__PURE__*/React.createElement(HvButton, {
-    id: setId(id, "close"),
-    className: classes.closeButton,
-    category: "ghost",
-    onClick: onClose,
-    "aria-label": buttonTitle
-  }, /*#__PURE__*/React.createElement(CloseButtonTooltipWrapper, null)), children);
+  }, others), {}, {
+    children: [/*#__PURE__*/_jsx(HvButton, {
+      id: setId(id, "close"),
+      className: classes.closeButton,
+      category: "ghost",
+      onClick: onClose,
+      "aria-label": buttonTitle,
+      children: /*#__PURE__*/_jsx(CloseButtonTooltipWrapper, {})
+    }), children]
+  }));
 };
 
 process.env.NODE_ENV !== "production" ? HvDrawer.propTypes = {

package/dist/modern/Drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","names":["React","clsx","PropTypes","Drawer","withStyles","Close","HvButton","withTooltip","setId","styles","HvDrawer","className","classes","id","children","open","onClose","anchor","buttonTitle","others","closeButtonDisplay","CloseButtonTooltipWrapper","root","paper","background","event","reason","closeButton","propTypes","string","shape","isRequired","node","bool","func","oneOf","name"],"sources":["../../../src/Drawer/Drawer.js"],"sourcesContent":["import React from \"react\";\nimport clsx from \"clsx\";\nimport PropTypes from \"prop-types\";\nimport { Drawer, withStyles } from \"@material-ui/core\";\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\nimport { HvButton, withTooltip, setId } from \"@hitachivantara/uikit-react-core\";\nimport styles from \"./styles\";\n\n/**\n * The Drawer component provides a foundation to create a sliding pane.\n * It only provides the pane with a close button, the rest of the\n * content can be customized.\n */\nconst HvDrawer = ({\n  className,\n  classes,\n  id,\n  children,\n  open,\n  onClose,\n  anchor = \"right\",\n  buttonTitle = \"Close\",\n  ...others\n}) => {\n  const closeButtonDisplay = () => <Close role=\"presentation\" />;\n\n  const CloseButtonTooltipWrapper = buttonTitle\n    ? withTooltip(closeButtonDisplay, buttonTitle, \"top\")\n    : closeButtonDisplay;\n\n  return (\n    <Drawer\n      className={clsx(classes.root, className)}\n      id={id}\n      anchor={anchor}\n      open={open}\n      PaperProps={{\n        classes: {\n          root: classes.paper,\n        },\n      }}\n      BackdropProps={{\n        classes: {\n          root: classes.background,\n        },\n      }}\n      onClose={(event, reason) => onClose(event, reason)}\n      {...others}\n    >\n      <HvButton\n        id={setId(id, \"close\")}\n        className={classes.closeButton}\n        category=\"ghost\"\n        onClick={onClose}\n        aria-label={buttonTitle}\n      >\n        <CloseButtonTooltipWrapper />\n      </HvButton>\n      {children}\n    </Drawer>\n  );\n};\n\nHvDrawer.propTypes = {\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * Id to be applied to the root node.\n   */\n  id: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Style applied to the root of the component.\n     */\n    root: PropTypes.string,\n    /**\n     * Style applied to the background (outside) of the component.\n     */\n    background: PropTypes.string,\n    /**\n     * Style applied to the component (root).\n     */\n    paper: PropTypes.string,\n    /**\n     * Style applied to the close button.\n     */\n    closeButton: PropTypes.string,\n  }).isRequired,\n  /**\n   * Components of the Drawer.\n   */\n  children: PropTypes.node.isRequired,\n  /**\n   * Current state of the Drawer.\n   */\n  open: PropTypes.bool.isRequired,\n  /**\n   * Function executed on close.\n   * Extended from Modal from material-ui\n   *\n   * @param {object} event The event source of the callback.\n   * @param {string} reason Can be: `\"escapeKeyDown\"`, `\"backdropClick\"`.\n   */\n  onClose: PropTypes.func.isRequired,\n  /**\n   * The side the drawer opens from.\n   */\n  anchor: PropTypes.oneOf([\"left\", \"top\", \"right\", \"bottom\"]),\n  /**\n   * Title for the button close.\n   */\n  buttonTitle: PropTypes.string,\n};\n\nexport default withStyles(styles, { name: \"HvDrawer\" })(HvDrawer);\n"],"mappings":";;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,IAAP,MAAiB,MAAjB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,SAASC,MAAT,EAAiBC,UAAjB,QAAmC,mBAAnC;AACA,SAASC,KAAT,QAAsB,mCAAtB;AACA,SAASC,QAAT,EAAmBC,WAAnB,EAAgCC,KAAhC,QAA6C,kCAA7C;AACA,OAAOC,MAAP,MAAmB,UAAnB;AAEA;AACA;AACA;AACA;AACA;;AACA,MAAMC,QAAQ,GAAG,QAUX;EAAA,IAVY;IAChBC,SADgB;IAEhBC,OAFgB;IAGhBC,EAHgB;IAIhBC,QAJgB;IAKhBC,IALgB;IAMhBC,OANgB;IAOhBC,MAAM,GAAG,OAPO;IAQhBC,WAAW,GAAG;EARE,CAUZ;EAAA,IADDC,MACC;;EACJ,MAAMC,kBAAkB,GAAG,uCAAM,oBAAC,KAAD;IAAO,IAAI,EAAC;EAAZ,EAAN,CAA3B;;EAEA,MAAMC,yBAAyB,GAAGH,WAAW,GACzCX,WAAW,CAACa,kBAAD,EAAqBF,WAArB,EAAkC,KAAlC,CAD8B,GAEzCE,kBAFJ;EAIA,oBACE,oBAAC,MAAD;IACE,SAAS,EAAEnB,IAAI,CAACW,OAAO,CAACU,IAAT,EAAeX,SAAf,CADjB;IAEE,EAAE,EAAEE,EAFN;IAGE,MAAM,EAAEI,MAHV;IAIE,IAAI,EAAEF,IAJR;IAKE,UAAU,EAAE;MACVH,OAAO,EAAE;QACPU,IAAI,EAAEV,OAAO,CAACW;MADP;IADC,CALd;IAUE,aAAa,EAAE;MACbX,OAAO,EAAE;QACPU,IAAI,EAAEV,OAAO,CAACY;MADP;IADI,CAVjB;IAeE,OAAO,EAAE,CAACC,KAAD,EAAQC,MAAR,KAAmBV,OAAO,CAACS,KAAD,EAAQC,MAAR;EAfrC,GAgBMP,MAhBN,gBAkBE,oBAAC,QAAD;IACE,EAAE,EAAEX,KAAK,CAACK,EAAD,EAAK,OAAL,CADX;IAEE,SAAS,EAAED,OAAO,CAACe,WAFrB;IAGE,QAAQ,EAAC,OAHX;IAIE,OAAO,EAAEX,OAJX;IAKE,cAAYE;EALd,gBAOE,oBAAC,yBAAD,OAPF,CAlBF,EA2BGJ,QA3BH,CADF;AA+BD,CAhDD;;AAkDA,wCAAAJ,QAAQ,CAACkB,SAAT,GAAqB;EACnB;AACF;AACA;EACEjB,SAAS,EAAET,SAAS,CAAC2B,MAJF;;EAKnB;AACF;AACA;EACEhB,EAAE,EAAEX,SAAS,CAAC2B,MARK;;EASnB;AACF;AACA;EACEjB,OAAO,EAAEV,SAAS,CAAC4B,KAAV,CAAgB;IACvB;AACJ;AACA;IACIR,IAAI,EAAEpB,SAAS,CAAC2B,MAJO;;IAKvB;AACJ;AACA;IACIL,UAAU,EAAEtB,SAAS,CAAC2B,MARC;;IASvB;AACJ;AACA;IACIN,KAAK,EAAErB,SAAS,CAAC2B,MAZM;;IAavB;AACJ;AACA;IACIF,WAAW,EAAEzB,SAAS,CAAC2B;EAhBA,CAAhB,EAiBNE,UA7BgB;;EA8BnB;AACF;AACA;EACEjB,QAAQ,EAAEZ,SAAS,CAAC8B,IAAV,CAAeD,UAjCN;;EAkCnB;AACF;AACA;EACEhB,IAAI,EAAEb,SAAS,CAAC+B,IAAV,CAAeF,UArCF;;EAsCnB;AACF;AACA;AACA;AACA;AACA;AACA;EACEf,OAAO,EAAEd,SAAS,CAACgC,IAAV,CAAeH,UA7CL;;EA8CnB;AACF;AACA;EACEd,MAAM,EAAEf,SAAS,CAACiC,KAAV,CAAgB,CAAC,MAAD,EAAS,KAAT,EAAgB,OAAhB,EAAyB,QAAzB,CAAhB,CAjDW;;EAkDnB;AACF;AACA;EACEjB,WAAW,EAAEhB,SAAS,CAAC2B;AArDJ,CAArB;AAwDA,eAAezB,UAAU,CAACK,MAAD,EAAS;EAAE2B,IAAI,EAAE;AAAR,CAAT,CAAV,CAAyC1B,QAAzC,CAAf"}
+{"version":3,"file":"Drawer.js","names":["React","clsx","PropTypes","Drawer","withStyles","Close","HvButton","withTooltip","setId","styles","HvDrawer","className","classes","id","children","open","onClose","anchor","buttonTitle","others","closeButtonDisplay","CloseButtonTooltipWrapper","root","paper","background","event","reason","closeButton","propTypes","string","shape","isRequired","node","bool","func","oneOf","name"],"sources":["../../../src/Drawer/Drawer.js"],"sourcesContent":["import React from \"react\";\nimport clsx from \"clsx\";\nimport PropTypes from \"prop-types\";\nimport { Drawer } from \"@mui/material\";\nimport { withStyles } from \"@mui/styles\";\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\nimport { HvButton, withTooltip, setId } from \"@hitachivantara/uikit-react-core\";\nimport styles from \"./styles\";\n\n/**\n * The Drawer component provides a foundation to create a sliding pane.\n * It only provides the pane with a close button, the rest of the\n * content can be customized.\n */\nconst HvDrawer = ({\n  className,\n  classes,\n  id,\n  children,\n  open,\n  onClose,\n  anchor = \"right\",\n  buttonTitle = \"Close\",\n  ...others\n}) => {\n  const closeButtonDisplay = () => <Close role=\"presentation\" />;\n\n  const CloseButtonTooltipWrapper = buttonTitle\n    ? withTooltip(closeButtonDisplay, buttonTitle, \"top\")\n    : closeButtonDisplay;\n\n  return (\n    <Drawer\n      className={clsx(classes.root, className)}\n      id={id}\n      anchor={anchor}\n      open={open}\n      PaperProps={{\n        classes: {\n          root: classes.paper,\n        },\n      }}\n      BackdropProps={{\n        classes: {\n          root: classes.background,\n        },\n      }}\n      onClose={(event, reason) => onClose(event, reason)}\n      {...others}\n    >\n      <HvButton\n        id={setId(id, \"close\")}\n        className={classes.closeButton}\n        category=\"ghost\"\n        onClick={onClose}\n        aria-label={buttonTitle}\n      >\n        <CloseButtonTooltipWrapper />\n      </HvButton>\n      {children}\n    </Drawer>\n  );\n};\n\nHvDrawer.propTypes = {\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * Id to be applied to the root node.\n   */\n  id: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Style applied to the root of the component.\n     */\n    root: PropTypes.string,\n    /**\n     * Style applied to the background (outside) of the component.\n     */\n    background: PropTypes.string,\n    /**\n     * Style applied to the component (root).\n     */\n    paper: PropTypes.string,\n    /**\n     * Style applied to the close button.\n     */\n    closeButton: PropTypes.string,\n  }).isRequired,\n  /**\n   * Components of the Drawer.\n   */\n  children: PropTypes.node.isRequired,\n  /**\n   * Current state of the Drawer.\n   */\n  open: PropTypes.bool.isRequired,\n  /**\n   * Function executed on close.\n   * Extended from Modal from material-ui\n   *\n   * @param {object} event The event source of the callback.\n   * @param {string} reason Can be: `\"escapeKeyDown\"`, `\"backdropClick\"`.\n   */\n  onClose: PropTypes.func.isRequired,\n  /**\n   * The side the drawer opens from.\n   */\n  anchor: PropTypes.oneOf([\"left\", \"top\", \"right\", \"bottom\"]),\n  /**\n   * Title for the button close.\n   */\n  buttonTitle: PropTypes.string,\n};\n\nexport default withStyles(styles, { name: \"HvDrawer\" })(HvDrawer);\n"],"mappings":"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"}

package/dist/modern/Drawer/styles.js

@@ -1,5 +1,4 @@
-import { hexToRgb } from "@material-ui/core";
-import { alpha } from "@material-ui/core/styles";
+import { hexToRgb, alpha } from "@mui/material";
 
 const styles = theme => ({
   background: {

package/dist/modern/Drawer/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["hexToRgb","alpha","styles","theme","background","hv","palette","atmosphere","atmo4","paper","atmo1","padding","overflow","boxShadow","shadows","closeButton","minWidth","position","top","hvSpacing","right"],"sources":["../../../src/Drawer/styles.js"],"sourcesContent":["import { hexToRgb } from \"@material-ui/core\";\nimport { alpha } from \"@material-ui/core/styles\";\n\nconst styles = (theme) => ({\n  background: {\n    background: alpha(hexToRgb(theme.hv.palette.atmosphere.atmo4), 0.8),\n  },\n  paper: {\n    background: `${theme.hv.palette.atmosphere.atmo1}`,\n    padding: \"0px\",\n    overflow: \"auto\",\n    boxShadow: theme.hv.shadows[1],\n  },\n  closeButton: {\n    padding: 0,\n    minWidth: \"inherit\",\n    position: \"absolute\",\n    top: theme.hvSpacing(\"sm\"),\n    right: theme.hvSpacing(\"sm\"),\n  },\n});\n\nexport default styles;\n"],"mappings":"AAAA,SAASA,QAAT,QAAyB,mBAAzB;AACA,SAASC,KAAT,QAAsB,0BAAtB;;AAEA,MAAMC,MAAM,GAAIC,KAAD,KAAY;EACzBC,UAAU,EAAE;IACVA,UAAU,EAAEH,KAAK,CAACD,QAAQ,CAACG,KAAK,CAACE,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BC,KAA7B,CAAT,EAA8C,GAA9C;EADP,CADa;EAIzBC,KAAK,EAAE;IACLL,UAAU,EAAG,GAAED,KAAK,CAACE,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BG,KAAM,EAD5C;IAELC,OAAO,EAAE,KAFJ;IAGLC,QAAQ,EAAE,MAHL;IAILC,SAAS,EAAEV,KAAK,CAACE,EAAN,CAASS,OAAT,CAAiB,CAAjB;EAJN,CAJkB;EAUzBC,WAAW,EAAE;IACXJ,OAAO,EAAE,CADE;IAEXK,QAAQ,EAAE,SAFC;IAGXC,QAAQ,EAAE,UAHC;IAIXC,GAAG,EAAEf,KAAK,CAACgB,SAAN,CAAgB,IAAhB,CAJM;IAKXC,KAAK,EAAEjB,KAAK,CAACgB,SAAN,CAAgB,IAAhB;EALI;AAVY,CAAZ,CAAf;;AAmBA,eAAejB,MAAf"}
+{"version":3,"file":"styles.js","names":["hexToRgb","alpha","styles","theme","background","hv","palette","atmosphere","atmo4","paper","atmo1","padding","overflow","boxShadow","shadows","closeButton","minWidth","position","top","hvSpacing","right"],"sources":["../../../src/Drawer/styles.js"],"sourcesContent":["import { hexToRgb, alpha } from \"@mui/material\";\n\nconst styles = (theme) => ({\n  background: {\n    background: alpha(hexToRgb(theme.hv.palette.atmosphere.atmo4), 0.8),\n  },\n  paper: {\n    background: `${theme.hv.palette.atmosphere.atmo1}`,\n    padding: \"0px\",\n    overflow: \"auto\",\n    boxShadow: theme.hv.shadows[1],\n  },\n  closeButton: {\n    padding: 0,\n    minWidth: \"inherit\",\n    position: \"absolute\",\n    top: theme.hvSpacing(\"sm\"),\n    right: theme.hvSpacing(\"sm\"),\n  },\n});\n\nexport default styles;\n"],"mappings":"AAAA,SAASA,QAAT,EAAmBC,KAAnB,QAAgC,eAAhC;;AAEA,MAAMC,MAAM,GAAIC,KAAD,KAAY;EACzBC,UAAU,EAAE;IACVA,UAAU,EAAEH,KAAK,CAACD,QAAQ,CAACG,KAAK,CAACE,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BC,KAA7B,CAAT,EAA8C,GAA9C;EADP,CADa;EAIzBC,KAAK,EAAE;IACLL,UAAU,EAAG,GAAED,KAAK,CAACE,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BG,KAAM,EAD5C;IAELC,OAAO,EAAE,KAFJ;IAGLC,QAAQ,EAAE,MAHL;IAILC,SAAS,EAAEV,KAAK,CAACE,EAAN,CAASS,OAAT,CAAiB,CAAjB;EAJN,CAJkB;EAUzBC,WAAW,EAAE;IACXJ,OAAO,EAAE,CADE;IAEXK,QAAQ,EAAE,SAFC;IAGXC,QAAQ,EAAE,UAHC;IAIXC,GAAG,EAAEf,KAAK,CAACgB,SAAN,CAAgB,IAAhB,CAJM;IAKXC,KAAK,EAAEjB,KAAK,CAACgB,SAAN,CAAgB,IAAhB;EALI;AAVY,CAAZ,CAAf;;AAmBA,eAAejB,MAAf"}

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { StandardProps } from "@material-ui/core";
+import { StandardProps } from "@mui/material";
 
 export type HvImageCarouselClassKey = "root";
 

package/dist/modern/ImageCarousel/ImageCarousel.js

@@ -1,21 +1,31 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
+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, makeStyles, withStyles, Fade } from "@material-ui/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,
@@ -164,132 +174,165 @@ const HvImageCarousel = props => {
     return classes.miniCircle;
   };
 
-  return /*#__PURE__*/React.createElement(HvContainer, _extends({
+  return /*#__PURE__*/_jsxs(HvContainer, _objectSpread(_objectSpread({
     id: setId(elementId, "container"),
     className: clsx(className, classes.root, xs ? "xs" : "nxs", fullscreen && classes.fullscreenStyle)
-  }, others), !xs && /*#__PURE__*/React.createElement("div", {
-    className: classes.title
-  }, /*#__PURE__*/React.createElement("div", null, title), fullscreenProp && /*#__PURE__*/React.createElement("div", null, fullscreen ? /*#__PURE__*/React.createElement(HvButton, {
-    className: classes.closeButton,
-    icon: true,
-    "aria-label": "Close",
-    onClick: () => setFullscreen(!fullscreen)
-  }, _Close || (_Close = /*#__PURE__*/React.createElement(Close, null))) : /*#__PURE__*/React.createElement(HvButton, {
-    icon: true,
-    "aria-label": "Fullscreen",
-    onClick: () => setFullscreen(true)
-  }, _Fullscreen || (_Fullscreen = /*#__PURE__*/React.createElement(Fullscreen, null))))), /*#__PURE__*/React.createElement(HvContainer, {
-    className: clsx(classes.imageContainer, fullscreen ? "fullscreen" : "notFullscreen", !xs && "nxs"),
-    onFocus: () => setImageHover(true),
-    onMouseOver: () => setImageHover(true),
-    onBlur: () => setImageHover(false),
-    onMouseOut: () => setImageHover(false)
-  }, /*#__PURE__*/React.createElement(HvPanel, {
-    className: clsx(classes.stack, xs ? "xs" : "nxs"),
-    id: setId(elementId, "bigPanel")
-  }, options.map((element, index) => /*#__PURE__*/React.createElement("div", {
-    className: style.imageBox,
-    id: element.value,
-    key: `div ${element.value}`
-  }, /*#__PURE__*/React.createElement(Fade, {
-    in: selImage === index || xs,
-    timeout: {
-      appear: 500,
-      enter: 1200,
-      exit: 200
-    }
-  }, /*#__PURE__*/React.createElement("img", {
-    className: clsx(classes.selectedImage, xs ? "xs" : "nxs", fullscreen ? "fullscreen" : "notFullscreen", variant),
-    src: element.src,
-    alt: element.value,
-    key: `image ${element.value}`
-  }))))), (xs || lowCardinality) && /*#__PURE__*/React.createElement("div", {
-    className: clsx(classes.lowButtons, !xs && "nxs")
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Fade, {
-    in: imageHover || visibleArrows
-  }, /*#__PURE__*/React.createElement(HvButton, {
-    ref: refBackwards,
-    className: classes.button,
-    icon: true,
-    "aria-label": "Backwards",
-    onClick: event => previousImage(event)
-  }, _Backwards || (_Backwards = /*#__PURE__*/React.createElement(Backwards, null))))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Fade, {
-    in: imageHover || visibleArrows
-  }, /*#__PURE__*/React.createElement(HvButton, {
-    ref: refForwards,
-    className: classes.button,
-    icon: true,
-    "aria-label": "Forwards",
-    onClick: event => nextImage(event)
-  }, _Forwards || (_Forwards = /*#__PURE__*/React.createElement(Forwards, null)))))), xs && /*#__PURE__*/React.createElement("div", {
-    className: classes.xsCircles
-  }, documents.map((element, index) => /*#__PURE__*/React.createElement("span", {
-    className: circleType(index),
-    title: typeCircle,
-    key: `Circle ${element.value}`
-  })).slice(sliceStart, sliceStart + 5)), counter && /*#__PURE__*/React.createElement("div", {
-    className: clsx(classes.divCounter, !xs && "nxs")
-  }, /*#__PURE__*/React.createElement("span", {
-    className: classes.counter
-  }, /*#__PURE__*/React.createElement(HvTypography, {
-    variant: "normalText",
-    style: {
-      color: "white"
-    }
-  }, `${selImage + 1}/${documents.length}`)))), !xs && /*#__PURE__*/React.createElement(React.Fragment, null, lowCardinality ? /*#__PURE__*/React.createElement("div", {
-    className: classes.circles
-  }, documents.map((element, index) => /*#__PURE__*/React.createElement("span", {
-    className: circleType(index),
-    title: `${typeCircle} ${index}`,
-    key: `Circle ${element.value}`
-  }))) : /*#__PURE__*/React.createElement(HvGrid, {
-    className: clsx(classes.normalButtons),
-    container: true,
-    justifyContent: "space-between",
-    alignItems: "center"
-  }, /*#__PURE__*/React.createElement(HvGrid, {
-    item: true
-  }, /*#__PURE__*/React.createElement(HvButton, {
-    className: infiniteCarousel || selImage !== 0 ? "" : classes.hidden,
-    ref: refBackwards,
-    icon: true,
-    "aria-label": "Backwards",
-    onClick: event => previousImage(event)
-  }, _Backwards2 || (_Backwards2 = /*#__PURE__*/React.createElement(Backwards, null)))), /*#__PURE__*/React.createElement(HvGrid, {
-    item: true
-  }, /*#__PURE__*/React.createElement(HvTypography, {
-    variant: "highlightText",
-    component: "a"
-  }, selImage + 1), /*#__PURE__*/React.createElement(HvTypography, {
-    variant: "normalText",
-    component: "a"
-  }, ` /  ${documents.length}`)), /*#__PURE__*/React.createElement(HvGrid, {
-    item: true
-  }, /*#__PURE__*/React.createElement(HvButton, {
-    className: infiniteCarousel || selImage !== documents.length - 1 ? "" : classes.hidden,
-    ref: refForwards,
-    icon: true,
-    "aria-label": "Forwards",
-    onClick: event => nextImage(event)
-  }, _Forwards2 || (_Forwards2 = /*#__PURE__*/React.createElement(Forwards, null))))), thumbnails && /*#__PURE__*/React.createElement(HvPanel, {
-    className: classes.panel,
-    id: setId(elementId, "panel")
-  }, /*#__PURE__*/React.createElement(HvStack, {
-    key: "Thumbnails",
-    direction: "row",
-    spacing: "xs",
-    withNavigation: true
-  }, documents.map((element, i) => /*#__PURE__*/React.createElement(Button, {
-    id: element.value,
-    key: `Button ${element.value}`,
-    className: classes.thumbnailButton,
-    onClick: () => setImage(i)
-  }, /*#__PURE__*/React.createElement("img", {
-    className: styleThumbnail(i),
-    src: element.src,
-    alt: element.value,
-    key: `Thumbnail ${element.value}`
-  })))))));
+  }, 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 = {