@hitachivantara/uikit-react-core 3.74.0 → 4.0.1-next.2

package/dist/Table/utils/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "hvNodeFallback", {
+  enumerable: true,
+  get: function get() {
+    return _fallbacks.hvNodeFallback;
+  }
+});
+Object.defineProperty(exports, "hvNumberFallback", {
+  enumerable: true,
+  get: function get() {
+    return _fallbacks.hvNumberFallback;
+  }
+});
+Object.defineProperty(exports, "hvStringFallback", {
+  enumerable: true,
+  get: function get() {
+    return _fallbacks.hvStringFallback;
+  }
+});
+
+var _fallbacks = require("./fallbacks");
+//# sourceMappingURL=index.js.map

package/dist/Table/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/Table/utils/index.js"],"sourcesContent":["export { hvStringFallback, hvNumberFallback, hvNodeFallback } from \"./fallbacks\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA"}

package/dist/Tabs/Tabs.d.ts

@@ -1,4 +1,4 @@
-import { StandardProps, TabsProps } from "@material-ui/core";
+import { StandardProps, TabsProps } from "@mui/material";
 
 export type HvTabsClassKey = "root" | "flexContainer" | "indicator" | "scroller";
 

package/dist/Tabs/Tabs.js

@@ -1,5 +1,19 @@
 "use strict";
 
+require("core-js/modules/es.object.keys.js");
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.array.filter.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+require("core-js/modules/web.dom-collections.for-each.js");
+
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
@@ -7,7 +21,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
@@ -15,14 +29,22 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _core = require("@material-ui/core");
+var _material = require("@mui/material");
+
+var _styles = require("@mui/styles");
+
+var _styles2 = _interopRequireDefault(require("./styles"));
 
-var _styles = _interopRequireDefault(require("./styles"));
+var _jsxRuntime = require("react/jsx-runtime");
 
 var _div;
 
 var _excluded = ["classes"];
 
+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) { (0, _defineProperty2.default)(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; }
+
 /**
  * A Tab is a graphical control element that allows multiple documents or panels to be contained within a single window.
  * Tabs can be used as a navigational widget for switching between sets of documents.
@@ -30,7 +52,7 @@ var _excluded = ["classes"];
 var HvTabs = function HvTabs(props) {
   var classes = props.classes,
       others = (0, _objectWithoutProperties2.default)(props, _excluded);
-  return /*#__PURE__*/_react.default.createElement(_core.Tabs, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tabs, _objectSpread({
     classes: {
       root: classes.root,
       flexContainer: classes.flexContainer,
@@ -38,7 +60,7 @@ var HvTabs = function HvTabs(props) {
       scroller: classes.scroller
     },
     TabIndicatorProps: {
-      children: _div || (_div = /*#__PURE__*/_react.default.createElement("div", null))
+      children: _div || (_div = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {}))
     }
   }, others));
 };
@@ -99,7 +121,7 @@ process.env.NODE_ENV !== "production" ? HvTabs.propTypes = {
   value: _propTypes.default.any
 } : void 0;
 
-var _default = (0, _core.withStyles)(_styles.default, {
+var _default = (0, _styles.withStyles)(_styles2.default, {
   name: "HvTabs"
 })(HvTabs);
 

package/dist/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","names":["HvTabs","props","classes","others","root","flexContainer","indicator","scroller","children","propTypes","id","PropTypes","string","className","node","shape","isRequired","onChange","func","value","any","withStyles","styles","name"],"sources":["../../src/Tabs/Tabs.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { Tabs, withStyles } from \"@material-ui/core\";\nimport styles from \"./styles\";\n\n/**\n * A Tab is a graphical control element that allows multiple documents or panels to be contained within a single window.\n * Tabs can be used as a navigational widget for switching between sets of documents.\n */\nconst HvTabs = (props) => {\n  const { classes, ...others } = props;\n\n  return (\n    <Tabs\n      classes={{\n        root: classes.root,\n        flexContainer: classes.flexContainer,\n        indicator: classes.indicator,\n        scroller: classes.scroller,\n      }}\n      TabIndicatorProps={{ children: <div /> }}\n      {...others}\n    />\n  );\n};\n\nHvTabs.propTypes = {\n  /**\n   * Identifier.\n   */\n  id: PropTypes.string,\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * The content of the component.\n   */\n  children: PropTypes.node,\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the root element.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the flex container element.\n     */\n    flexContainer: PropTypes.string,\n    /**\n     * Styles applied to the `TabIndicator` component.\n     */\n    indicator: PropTypes.string,\n    /**\n     * Styles applied to the `TabIndicator` component.\n     */\n    scroller: PropTypes.string,\n  }).isRequired,\n  /**\n   * Callback fired when the value changes.\n   *\n   * @param {object} event The event source of the callback\n   * @param {number} value We default to the index of the child\n   */\n  onChange: PropTypes.func,\n  /**\n   * \tThe value of the currently selected Tab. If you don't want any selected Tab, you can set this property to `false`.\n   */\n  // eslint-disable-next-line react/forbid-prop-types\n  value: PropTypes.any,\n};\n\nexport default withStyles(styles, { name: \"HvTabs\" })(HvTabs);\n"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;AAEA;AACA;AACA;AACA;AACA,IAAMA,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD,EAAW;EACxB,IAAQC,OAAR,GAA+BD,KAA/B,CAAQC,OAAR;EAAA,IAAoBC,MAApB,0CAA+BF,KAA/B;EAEA,oBACE,6BAAC,UAAD;IACE,OAAO,EAAE;MACPG,IAAI,EAAEF,OAAO,CAACE,IADP;MAEPC,aAAa,EAAEH,OAAO,CAACG,aAFhB;MAGPC,SAAS,EAAEJ,OAAO,CAACI,SAHZ;MAIPC,QAAQ,EAAEL,OAAO,CAACK;IAJX,CADX;IAOE,iBAAiB,EAAE;MAAEC,QAAQ,+BAAE,yCAAF;IAAV;EAPrB,GAQML,MARN,EADF;AAYD,CAfD;;AAiBA,wCAAAH,MAAM,CAACS,SAAP,GAAmB;EACjB;AACF;AACA;EACEC,EAAE,EAAEC,kBAAA,CAAUC,MAJG;;EAKjB;AACF;AACA;EACEC,SAAS,EAAEF,kBAAA,CAAUC,MARJ;;EASjB;AACF;AACA;EACEJ,QAAQ,EAAEG,kBAAA,CAAUG,IAZH;;EAajB;AACF;AACA;EACEZ,OAAO,EAAES,kBAAA,CAAUI,KAAV,CAAgB;IACvB;AACJ;AACA;IACIX,IAAI,EAAEO,kBAAA,CAAUC,MAJO;;IAKvB;AACJ;AACA;IACIP,aAAa,EAAEM,kBAAA,CAAUC,MARF;;IASvB;AACJ;AACA;IACIN,SAAS,EAAEK,kBAAA,CAAUC,MAZE;;IAavB;AACJ;AACA;IACIL,QAAQ,EAAEI,kBAAA,CAAUC;EAhBG,CAAhB,EAiBNI,UAjCc;;EAkCjB;AACF;AACA;AACA;AACA;AACA;EACEC,QAAQ,EAAEN,kBAAA,CAAUO,IAxCH;;EAyCjB;AACF;AACA;EACE;EACAC,KAAK,EAAER,kBAAA,CAAUS;AA7CA,CAAnB;;eAgDe,IAAAC,gBAAA,EAAWC,eAAX,EAAmB;EAAEC,IAAI,EAAE;AAAR,CAAnB,EAAuCvB,MAAvC,C"}
+{"version":3,"file":"Tabs.js","names":["HvTabs","props","classes","others","root","flexContainer","indicator","scroller","children","propTypes","id","PropTypes","string","className","node","shape","isRequired","onChange","func","value","any","withStyles","styles","name"],"sources":["../../src/Tabs/Tabs.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { Tabs } from \"@mui/material\";\nimport { withStyles } from \"@mui/styles\";\nimport styles from \"./styles\";\n\n/**\n * A Tab is a graphical control element that allows multiple documents or panels to be contained within a single window.\n * Tabs can be used as a navigational widget for switching between sets of documents.\n */\nconst HvTabs = (props) => {\n  const { classes, ...others } = props;\n\n  return (\n    <Tabs\n      classes={{\n        root: classes.root,\n        flexContainer: classes.flexContainer,\n        indicator: classes.indicator,\n        scroller: classes.scroller,\n      }}\n      TabIndicatorProps={{ children: <div /> }}\n      {...others}\n    />\n  );\n};\n\nHvTabs.propTypes = {\n  /**\n   * Identifier.\n   */\n  id: PropTypes.string,\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * The content of the component.\n   */\n  children: PropTypes.node,\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the root element.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the flex container element.\n     */\n    flexContainer: PropTypes.string,\n    /**\n     * Styles applied to the `TabIndicator` component.\n     */\n    indicator: PropTypes.string,\n    /**\n     * Styles applied to the `TabIndicator` component.\n     */\n    scroller: PropTypes.string,\n  }).isRequired,\n  /**\n   * Callback fired when the value changes.\n   *\n   * @param {object} event The event source of the callback\n   * @param {number} value We default to the index of the child\n   */\n  onChange: PropTypes.func,\n  /**\n   * \tThe value of the currently selected Tab. If you don't want any selected Tab, you can set this property to `false`.\n   */\n  // eslint-disable-next-line react/forbid-prop-types\n  value: PropTypes.any,\n};\n\nexport default withStyles(styles, { name: \"HvTabs\" })(HvTabs);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA;AACA;AACA;AACA;AACA,IAAMA,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD,EAAW;EACxB,IAAQC,OAAR,GAA+BD,KAA/B,CAAQC,OAAR;EAAA,IAAoBC,MAApB,0CAA+BF,KAA/B;EAEA,oBACE,qBAAC,cAAD;IACE,OAAO,EAAE;MACPG,IAAI,EAAEF,OAAO,CAACE,IADP;MAEPC,aAAa,EAAEH,OAAO,CAACG,aAFhB;MAGPC,SAAS,EAAEJ,OAAO,CAACI,SAHZ;MAIPC,QAAQ,EAAEL,OAAO,CAACK;IAJX,CADX;IAOE,iBAAiB,EAAE;MAAEC,QAAQ,+BAAE,+BAAF;IAAV;EAPrB,GAQML,MARN,EADF;AAYD,CAfD;;AAiBA,wCAAAH,MAAM,CAACS,SAAP,GAAmB;EACjB;AACF;AACA;EACEC,EAAE,EAAEC,kBAAA,CAAUC,MAJG;;EAKjB;AACF;AACA;EACEC,SAAS,EAAEF,kBAAA,CAAUC,MARJ;;EASjB;AACF;AACA;EACEJ,QAAQ,EAAEG,kBAAA,CAAUG,IAZH;;EAajB;AACF;AACA;EACEZ,OAAO,EAAES,kBAAA,CAAUI,KAAV,CAAgB;IACvB;AACJ;AACA;IACIX,IAAI,EAAEO,kBAAA,CAAUC,MAJO;;IAKvB;AACJ;AACA;IACIP,aAAa,EAAEM,kBAAA,CAAUC,MARF;;IASvB;AACJ;AACA;IACIN,SAAS,EAAEK,kBAAA,CAAUC,MAZE;;IAavB;AACJ;AACA;IACIL,QAAQ,EAAEI,kBAAA,CAAUC;EAhBG,CAAhB,EAiBNI,UAjCc;;EAkCjB;AACF;AACA;AACA;AACA;AACA;EACEC,QAAQ,EAAEN,kBAAA,CAAUO,IAxCH;;EAyCjB;AACF;AACA;EACE;EACAC,KAAK,EAAER,kBAAA,CAAUS;AA7CA,CAAnB;;eAgDe,IAAAC,kBAAA,EAAWC,gBAAX,EAAmB;EAAEC,IAAI,EAAE;AAAR,CAAnB,EAAuCvB,MAAvC,C"}

package/dist/Tag/Tag.d.ts

@@ -1,4 +1,4 @@
-import { StandardProps } from "@material-ui/core";
+import { StandardProps } from "@mui/material";
 import { HvButtonProps } from "../Button";
 
 export type HvTagButtonClassKey = "";

package/dist/Tag/Tag.js

@@ -33,15 +33,15 @@ exports.default = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _core = require("@material-ui/core");
+var _material = require("@mui/material");
+
+var _styles = require("@mui/styles");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -53,10 +53,12 @@ var _hexToRgbA = _interopRequireDefault(require("../utils/hexToRgbA"));
 
 var _ = require("..");
 
-var _styles = _interopRequireDefault(require("./styles"));
+var _styles2 = _interopRequireDefault(require("./styles"));
 
 var _utils = require("./utils");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var _excluded = ["classes", "style", "className", "label", "disabled", "type", "color", "deleteIcon", "onDelete", "onClick", "role", "deleteButtonArialLabel", "deleteButtonProps"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -117,7 +119,7 @@ var HvTag = function HvTag(props) {
     var disabledSemanticColor = type === "semantic" ? "atmo5" : "base2";
     var _deleteButtonProps$ta = deleteButtonProps.tabIndex,
         tabIndex = _deleteButtonProps$ta === void 0 ? 0 : _deleteButtonProps$ta;
-    return /*#__PURE__*/_react.default.createElement(_.HvButton, (0, _extends2.default)({
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HvButton, _objectSpread(_objectSpread({
       classes: {
         startIcon: classes.tagButton,
         focusVisible: classes.focusVisible,
@@ -125,18 +127,20 @@ var HvTag = function HvTag(props) {
       },
       "aria-label": deleteButtonArialLabel,
       tabIndex: tabIndex
-    }, deleteButtonProps), /*#__PURE__*/_react.default.createElement(_uikitReactIcons.CloseXS, {
-      iconSize: "XS",
-      style: _objectSpread(_objectSpread({}, disabled ? {
-        cursor: "not-allowed"
-      } : undefined), {}, {
-        height: 16
-      }),
-      color: disabled ? disabledSemanticColor : "base2"
+    }, deleteButtonProps), {}, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikitReactIcons.CloseXS, {
+        iconSize: "XS",
+        style: _objectSpread(_objectSpread({}, disabled ? {
+          cursor: "not-allowed"
+        } : undefined), {}, {
+          height: 16
+        }),
+        color: disabled ? disabledSemanticColor : "base2"
+      })
     }));
   };
 
-  var theme = (0, _core.useTheme)();
+  var theme = (0, _styles.useTheme)();
 
   var inlineStyle = _objectSpread({}, style);
 
@@ -156,14 +160,15 @@ var HvTag = function HvTag(props) {
 
   var chipLabel = (0, _react.useMemo)(function () {
     if (typeof label === "string") {
-      return _HvTypography || (_HvTypography = /*#__PURE__*/_react.default.createElement(_.HvTypography, {
-        variant: "normalText"
-      }, label));
+      return _HvTypography || (_HvTypography = /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HvTypography, {
+        variant: "normalText",
+        children: label
+      }));
     }
 
     return label;
   }, [label]);
-  return /*#__PURE__*/_react.default.createElement(_core.Chip, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Chip, _objectSpread({
     label: chipLabel,
     className: (0, _clsx.default)(classes.root, className),
     onMouseEnter: function onMouseEnter() {
@@ -345,7 +350,7 @@ process.env.NODE_ENV !== "production" ? HvTag.propTypes = {
   deleteButtonProps: _propTypes.default.instanceOf(Object)
 } : void 0;
 
-var _default = (0, _core.withStyles)(_styles.default, {
+var _default = (0, _styles.withStyles)(_styles2.default, {
   name: "HvTag"
 })(HvTag);
 

package/dist/Tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","names":["getColor","theme","customColor","type","defaultSemanticColor","hv","palette","semantic","sema7","defaultCategoricalColor","viz","categorical","cviz1","backgroundColor","HvTag","props","classes","style","className","label","disabled","color","deleteIcon","onDelete","onClick","role","deleteButtonArialLabel","deleteButtonProps","others","getDeleteIcon","disabledSemanticColor","tabIndex","startIcon","tagButton","focusVisible","primary","primaryButton","cursor","undefined","height","useTheme","inlineStyle","categoricalBackgroundColor","fade","useState","hover","setHover","chipLabel","useMemo","clsx","root","boxShadow","chipRoot","clickable","categoricalDisabled","categoricalFocus","disabledDeleteIcon","hasDeleteAction","getOnDeleteCallback","hasClickAction","propTypes","PropTypes","shape","string","titleOverflow","semanticTextColor","categoricalTextColor","deletable","isRequired","instanceOf","Object","node","bool","oneOf","func","withStyles","styles","name"],"sources":["../../src/Tag/Tag.js"],"sourcesContent":["import React, { useMemo, useState } from \"react\";\n\nimport { Chip, withStyles, useTheme } from \"@material-ui/core\";\n\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport { CloseXS } from \"@hitachivantara/uikit-react-icons\";\nimport fade from \"../utils/hexToRgbA\";\n\nimport { HvButton, HvTypography } from \"..\";\n\nimport styles from \"./styles\";\n\nimport { getOnDeleteCallback, hasDeleteAction, hasClickAction } from \"./utils\";\n\nconst getColor = (theme, customColor, type) => {\n  const defaultSemanticColor = theme.hv.palette.semantic.sema7;\n  const defaultCategoricalColor = theme.hv.viz.palette.categorical.cviz1;\n\n  let backgroundColor;\n\n  if (type === \"semantic\") {\n    backgroundColor = theme.palette[customColor] || customColor || defaultSemanticColor;\n  }\n  if (type === \"categorical\") {\n    backgroundColor =\n      theme.hv.viz.palette.categorical[customColor] || customColor || defaultCategoricalColor;\n  }\n\n  return backgroundColor;\n};\n\n/**\n * A Tag is one word that describes a specific aspect of an asset. A single asset can have\n * multiple tags.\n * Use tags to highlight an item's status for quick recognition and navigation\n * Use color to indicate meanings that users can learn and recognize across products\n *\n * It leverages the Chip component from Material UI\n */\nconst HvTag = (props) => {\n  const {\n    classes,\n    style,\n    className,\n    label,\n    disabled,\n    type = \"semantic\",\n    color,\n    deleteIcon,\n    onDelete,\n    onClick,\n    role,\n    deleteButtonArialLabel = \"Delete tag\",\n    deleteButtonProps = {},\n    ...others\n  } = props;\n\n  const getDeleteIcon = () => {\n    const disabledSemanticColor = type === \"semantic\" ? \"atmo5\" : \"base2\";\n    const { tabIndex = 0 } = deleteButtonProps;\n\n    return (\n      <HvButton\n        classes={{\n          startIcon: classes.tagButton,\n          focusVisible: classes.focusVisible,\n          primary: classes.primaryButton,\n        }}\n        aria-label={deleteButtonArialLabel}\n        tabIndex={tabIndex}\n        {...deleteButtonProps}\n      >\n        <CloseXS\n          iconSize=\"XS\"\n          style={{\n            ...(disabled ? { cursor: \"not-allowed\" } : undefined),\n            height: 16,\n          }}\n          color={disabled ? disabledSemanticColor : \"base2\"}\n        />\n      </HvButton>\n    );\n  };\n\n  const theme = useTheme();\n\n  const inlineStyle = {\n    ...style,\n  };\n\n  let categoricalBackgroundColor;\n\n  if (type === \"semantic\") {\n    inlineStyle.backgroundColor = getColor(theme, color, type);\n  } else if (type === \"categorical\") {\n    categoricalBackgroundColor = getColor(theme, color, type);\n\n    inlineStyle.backgroundColor = fade(categoricalBackgroundColor, 0.3);\n  }\n\n  const [hover, setHover] = useState(false);\n\n  const chipLabel = useMemo(() => {\n    if (typeof label === \"string\") {\n      return <HvTypography variant=\"normalText\">{label}</HvTypography>;\n    }\n\n    return label;\n  }, [label]);\n\n  return (\n    <Chip\n      label={chipLabel}\n      className={clsx(classes.root, className)}\n      onMouseEnter={() => {\n        setHover(!!onClick);\n      }}\n      onMouseLeave={() => {\n        setHover(false);\n      }}\n      style={{\n        ...(disabled ? null : inlineStyle),\n        ...(hover && !disabled ? { boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}` } : null),\n      }}\n      classes={{\n        root: clsx(classes.chipRoot, {\n          [classes.disabled]: disabled,\n          [classes.clickable]: !!onClick,\n          [classes.categorical]: type === \"categorical\",\n          [classes.categoricalFocus]: type === \"categorical\" && !disabled,\n          [classes.categoricalDisabled]: type === \"categorical\" && disabled,\n        }),\n        label: classes.label,\n        deleteIcon: clsx(classes.deleteIcon, {\n          [classes.disabledDeleteIcon]: disabled,\n        }),\n      }}\n      deleteIcon={(hasDeleteAction(onDelete) && deleteIcon) || getDeleteIcon()}\n      onDelete={getOnDeleteCallback(disabled, onDelete)}\n      onClick={disabled ? undefined : onClick}\n      role={role || (hasClickAction(onClick) ? \"button\" : undefined)}\n      tabIndex={hasDeleteAction(onDelete) ? undefined : 0}\n      {...others}\n    />\n  );\n};\n\nHvTag.propTypes = {\n  /**\n   * A Jss Object used to override or extend the styles applied to the radio button.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the component.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the component.\n     */\n    chipRoot: PropTypes.string,\n    /**\n     * Styles applied to the component.\n     */\n    label: PropTypes.string,\n    /**\n     * Styles applied to the component.\n     */\n    tagButton: PropTypes.string,\n    /**\n     * Styles applied to the component.\n     */\n    deleteIcon: PropTypes.string,\n    /**\n     * Styles applied to the component.\n     */\n    disabledDeleteIcon: PropTypes.string,\n    /**\n     * Styles applied to the component.\n     */\n    titleOverflow: PropTypes.string,\n    /**\n     * Styles applied to the component.\n     */\n    categorical: PropTypes.string,\n    /**\n     * Styles applied to the component.\n     */\n    categoricalDisabled: PropTypes.string,\n    /**\n     * Styles applied to the component.\n     */\n    disabled: PropTypes.string,\n    /**\n     * Styles applied to the component.\n     */\n    semanticTextColor: PropTypes.string,\n    /**\n     * Styles applied to the component.\n     */\n    categoricalTextColor: PropTypes.string,\n    /**\n     * Styles applied to the component.\n     */\n    deletable: PropTypes.string,\n    /**\n     * Styles applied to the component if has onClick.\n     */\n    clickable: PropTypes.string,\n    /**\n     * Styles applied to the component.\n     */\n    focusVisible: PropTypes.string,\n    /**\n     * Styles applied to the component.\n     */\n    primaryButton: PropTypes.string,\n    /**\n     * Styles applied to the component.\n     */\n    categoricalFocus: PropTypes.string,\n  }).isRequired,\n\n  /**\n   * Inline styles to be applied to the root element.\n   */\n  style: PropTypes.instanceOf(Object),\n\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n\n  /**\n   * The label of the tag element.\n   *\n   */\n  label: PropTypes.node,\n\n  /**\n   * Indicates that the form element is disabled.\n   */\n  disabled: PropTypes.bool,\n\n  /**\n   * The type of the tag element.\n   *\n   * A tag can be of semantic or categoric type\n   */\n  type: PropTypes.oneOf([\"semantic\", \"categorical\"]),\n\n  /**\n   * Background color to be applied to the tag\n   */\n  color: PropTypes.string,\n  /**\n   * Icon used to customize the delete icon in the Chip element\n   */\n  deleteIcon: PropTypes.node,\n\n  /**\n   * The callback fired when the delete icon is pressed.\n   * This function has to be provided to the component,\n   * in order to render the delete icon\n   */\n  onDelete: PropTypes.func,\n  /**\n   * Callback triggered when any item is clicked.\n   */\n  onClick: PropTypes.func,\n\n  /**\n   * The role of the element with an attributed event.\n   */\n  role: PropTypes.string,\n  /**\n   * Aria properties to apply to delete button in tag\n   */\n  deleteButtonArialLabel: PropTypes.string,\n  /**\n   * Props to apply to delete button\n   */\n  deleteButtonProps: PropTypes.instanceOf(Object),\n};\n\nexport default withStyles(styles, { name: \"HvTag\" })(HvTag);\n"],"mappings":"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"}
+{"version":3,"file":"Tag.js","names":["getColor","theme","customColor","type","defaultSemanticColor","hv","palette","semantic","sema7","defaultCategoricalColor","viz","categorical","cviz1","backgroundColor","HvTag","props","classes","style","className","label","disabled","color","deleteIcon","onDelete","onClick","role","deleteButtonArialLabel","deleteButtonProps","others","getDeleteIcon","disabledSemanticColor","tabIndex","startIcon","tagButton","focusVisible","primary","primaryButton","cursor","undefined","height","useTheme","inlineStyle","categoricalBackgroundColor","fade","useState","hover","setHover","chipLabel","useMemo","clsx","root","boxShadow","chipRoot","clickable","categoricalDisabled","categoricalFocus","disabledDeleteIcon","hasDeleteAction","getOnDeleteCallback","hasClickAction","propTypes","PropTypes","shape","string","titleOverflow","semanticTextColor","categoricalTextColor","deletable","isRequired","instanceOf","Object","node","bool","oneOf","func","withStyles","styles","name"],"sources":["../../src/Tag/Tag.js"],"sourcesContent":["import React, { useMemo, useState } from \"react\";\nimport { Chip } from \"@mui/material\";\nimport { withStyles, useTheme } from \"@mui/styles\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport { CloseXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport fade from \"../utils/hexToRgbA\";\nimport { HvButton, HvTypography } from \"..\";\nimport styles from \"./styles\";\nimport { getOnDeleteCallback, hasDeleteAction, hasClickAction } from \"./utils\";\n\nconst getColor = (theme, customColor, type) => {\n  const defaultSemanticColor = theme.hv.palette.semantic.sema7;\n  const defaultCategoricalColor = theme.hv.viz.palette.categorical.cviz1;\n\n  let backgroundColor;\n\n  if (type === \"semantic\") {\n    backgroundColor = theme.palette[customColor] || customColor || defaultSemanticColor;\n  }\n  if (type === \"categorical\") {\n    backgroundColor =\n      theme.hv.viz.palette.categorical[customColor] || customColor || defaultCategoricalColor;\n  }\n\n  return backgroundColor;\n};\n\n/**\n * A Tag is one word that describes a specific aspect of an asset. A single asset can have\n * multiple tags.\n * Use tags to highlight an item's status for quick recognition and navigation\n * Use color to indicate meanings that users can learn and recognize across products\n *\n * It leverages the Chip component from Material UI\n */\nconst HvTag = (props) => {\n  const {\n    classes,\n    style,\n    className,\n    label,\n    disabled,\n    type = \"semantic\",\n    color,\n    deleteIcon,\n    onDelete,\n    onClick,\n    role,\n    deleteButtonArialLabel = \"Delete tag\",\n    deleteButtonProps = {},\n    ...others\n  } = props;\n\n  const getDeleteIcon = () => {\n    const disabledSemanticColor = type === \"semantic\" ? \"atmo5\" : \"base2\";\n    const { tabIndex = 0 } = deleteButtonProps;\n\n    return (\n      <HvButton\n        classes={{\n          startIcon: classes.tagButton,\n          focusVisible: classes.focusVisible,\n          primary: classes.primaryButton,\n        }}\n        aria-label={deleteButtonArialLabel}\n        tabIndex={tabIndex}\n        {...deleteButtonProps}\n      >\n        <CloseXS\n          iconSize=\"XS\"\n          style={{\n            ...(disabled ? { cursor: \"not-allowed\" } : undefined),\n            height: 16,\n          }}\n          color={disabled ? disabledSemanticColor : \"base2\"}\n        />\n      </HvButton>\n    );\n  };\n\n  const theme = useTheme();\n\n  const inlineStyle = {\n    ...style,\n  };\n\n  let categoricalBackgroundColor;\n\n  if (type === \"semantic\") {\n    inlineStyle.backgroundColor = getColor(theme, color, type);\n  } else if (type === \"categorical\") {\n    categoricalBackgroundColor = getColor(theme, color, type);\n\n    inlineStyle.backgroundColor = fade(categoricalBackgroundColor, 0.3);\n  }\n\n  const [hover, setHover] = useState(false);\n\n  const chipLabel = useMemo(() => {\n    if (typeof label === \"string\") {\n      return <HvTypography variant=\"normalText\">{label}</HvTypography>;\n    }\n\n    return label;\n  }, [label]);\n\n  return (\n    <Chip\n      label={chipLabel}\n      className={clsx(classes.root, className)}\n      onMouseEnter={() => {\n        setHover(!!onClick);\n      }}\n      onMouseLeave={() => {\n        setHover(false);\n      }}\n      style={{\n        ...(disabled ? null : inlineStyle),\n        ...(hover && !disabled ? { boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}` } : null),\n      }}\n      classes={{\n        root: clsx(classes.chipRoot, {\n          [classes.disabled]: disabled,\n          [classes.clickable]: !!onClick,\n          [classes.categorical]: type === \"categorical\",\n          [classes.categoricalFocus]: type === \"categorical\" && !disabled,\n          [classes.categoricalDisabled]: type === \"categorical\" && disabled,\n        }),\n        label: classes.label,\n        deleteIcon: clsx(classes.deleteIcon, {\n          [classes.disabledDeleteIcon]: disabled,\n        }),\n      }}\n      deleteIcon={(hasDeleteAction(onDelete) && deleteIcon) || getDeleteIcon()}\n      onDelete={getOnDeleteCallback(disabled, onDelete)}\n      onClick={disabled ? undefined : onClick}\n      role={role || (hasClickAction(onClick) ? \"button\" : undefined)}\n      tabIndex={hasDeleteAction(onDelete) ? undefined : 0}\n      {...others}\n    />\n  );\n};\n\nHvTag.propTypes = {\n  /**\n   * A Jss Object used to override or extend the styles applied to the radio button.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the component.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the component.\n     */\n    chipRoot: PropTypes.string,\n    /**\n     * Styles applied to the component.\n     */\n    label: PropTypes.string,\n    /**\n     * Styles applied to the component.\n     */\n    tagButton: PropTypes.string,\n    /**\n     * Styles applied to the component.\n     */\n    deleteIcon: PropTypes.string,\n    /**\n     * Styles applied to the component.\n     */\n    disabledDeleteIcon: PropTypes.string,\n    /**\n     * Styles applied to the component.\n     */\n    titleOverflow: PropTypes.string,\n    /**\n     * Styles applied to the component.\n     */\n    categorical: PropTypes.string,\n    /**\n     * Styles applied to the component.\n     */\n    categoricalDisabled: PropTypes.string,\n    /**\n     * Styles applied to the component.\n     */\n    disabled: PropTypes.string,\n    /**\n     * Styles applied to the component.\n     */\n    semanticTextColor: PropTypes.string,\n    /**\n     * Styles applied to the component.\n     */\n    categoricalTextColor: PropTypes.string,\n    /**\n     * Styles applied to the component.\n     */\n    deletable: PropTypes.string,\n    /**\n     * Styles applied to the component if has onClick.\n     */\n    clickable: PropTypes.string,\n    /**\n     * Styles applied to the component.\n     */\n    focusVisible: PropTypes.string,\n    /**\n     * Styles applied to the component.\n     */\n    primaryButton: PropTypes.string,\n    /**\n     * Styles applied to the component.\n     */\n    categoricalFocus: PropTypes.string,\n  }).isRequired,\n\n  /**\n   * Inline styles to be applied to the root element.\n   */\n  style: PropTypes.instanceOf(Object),\n\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n\n  /**\n   * The label of the tag element.\n   *\n   */\n  label: PropTypes.node,\n\n  /**\n   * Indicates that the form element is disabled.\n   */\n  disabled: PropTypes.bool,\n\n  /**\n   * The type of the tag element.\n   *\n   * A tag can be of semantic or categoric type\n   */\n  type: PropTypes.oneOf([\"semantic\", \"categorical\"]),\n\n  /**\n   * Background color to be applied to the tag\n   */\n  color: PropTypes.string,\n  /**\n   * Icon used to customize the delete icon in the Chip element\n   */\n  deleteIcon: PropTypes.node,\n\n  /**\n   * The callback fired when the delete icon is pressed.\n   * This function has to be provided to the component,\n   * in order to render the delete icon\n   */\n  onDelete: PropTypes.func,\n  /**\n   * Callback triggered when any item is clicked.\n   */\n  onClick: PropTypes.func,\n\n  /**\n   * The role of the element with an attributed event.\n   */\n  role: PropTypes.string,\n  /**\n   * Aria properties to apply to delete button in tag\n   */\n  deleteButtonArialLabel: PropTypes.string,\n  /**\n   * Props to apply to delete button\n   */\n  deleteButtonProps: PropTypes.instanceOf(Object),\n};\n\nexport default withStyles(styles, { name: \"HvTag\" })(HvTag);\n"],"mappings":"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"}

package/dist/TagsInput/TagsInput.d.ts

@@ -1,4 +1,4 @@
-import { StandardProps } from "@material-ui/core";
+import { StandardProps } from "@mui/material";
 import { HvTagProps } from "../Tag/Tag";
 import { HvCharCounterProps } from "../Forms/CharCounter";
 import { HvFormStatus } from "../Forms/FormElement";

package/dist/TagsInput/TagsInput.js

@@ -45,8 +45,6 @@ require("core-js/modules/es.string.includes.js");
 
 require("core-js/modules/es.array.map.js");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -63,7 +61,7 @@ var _clsx = _interopRequireDefault(require("clsx"));
 
 var _isNil = _interopRequireDefault(require("lodash/isNil"));
 
-var _core = require("@material-ui/core");
+var _styles = require("@mui/styles");
 
 var _utils = require("../utils");
 
@@ -73,7 +71,9 @@ var _validationStates = _interopRequireDefault(require("../Forms/FormElement/val
 
 var _validations = require("../BaseInput/validations");
 
-var _styles = _interopRequireDefault(require("./styles"));
+var _styles2 = _interopRequireDefault(require("./styles"));
+
+var _jsxRuntime = require("react/jsx-runtime");
 
 var _excluded = ["classes", "className", "id", "name", "value", "defaultValue", "readOnly", "disabled", "required", "label", "aria-label", "aria-labelledby", "description", "aria-describedby", "onChange", "onAdd", "onDelete", "onBlur", "onFocus", "placeholder", "hideCounter", "middleCountLabel", "maxTagsQuantity", "autoFocus", "resizable", "inputProps", "countCharProps", "multiline", "status", "statusMessage", "validationMessages", "commitTagOn", "commitOnBlur", "suggestionListCallback"],
     _excluded2 = ["label", "type"];
@@ -449,7 +449,7 @@ var HvTagsInput = function HvTagsInput(props) {
     onFocus === null || onFocus === void 0 ? void 0 : onFocus(evt, tagInput);
   };
 
-  return /*#__PURE__*/_react.default.createElement(_.HvFormElement, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.HvFormElement, {
     id: id,
     name: name,
     disabled: disabled,
@@ -458,112 +458,120 @@ var HvTagsInput = function HvTagsInput(props) {
     required: required,
     onBlur: onBlurHandler,
     onFocus: onFocusHandler,
-    className: (0, _clsx.default)(classes.root, className, disabled && classes.disabled)
-  }, (hasLabel || hasDescription) && /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.labelContainer
-  }, hasLabel && /*#__PURE__*/_react.default.createElement(_.HvLabel, {
-    className: classes.label,
-    id: (0, _utils.setId)(id, "label"),
-    htmlFor: (0, _utils.setId)(elementId, "input"),
-    label: textAreaLabel
-  }), hasDescription && /*#__PURE__*/_react.default.createElement(_.HvInfoMessage, {
-    className: classes.description,
-    id: (0, _utils.setId)(elementId, "description")
-  }, description)), hasCounter && /*#__PURE__*/_react.default.createElement(_.HvCharCounter, (0, _extends2.default)({
-    id: (0, _utils.setId)(elementId, "charCounter"),
-    className: classes.characterCounter,
-    separator: middleCountLabel,
-    currentCharQuantity: value.length,
-    maxCharQuantity: maxTagsQuantity
-  }, countCharProps)), /*#__PURE__*/_react.default.createElement(_.HvListContainer, {
-    className: (0, _clsx.default)(classes.tagsList, multiline ? resizable && classes.resizable : classes.singleLine, canShowError && classes.error, isStateInvalid && classes.invalid),
-    onKeyDown: onKeyDownHandler,
-    onClick: onContainerClickHandler,
-    ref: containerRef
-  }, value && value.map(function (t, i) {
-    var tag = typeof t === "string" ? {
-      label: t,
-      type: "semantic"
-    } : t;
-    var label = tag.label,
-        type = tag.type,
-        otherProps = (0, _objectWithoutProperties2.default)(tag, _excluded2);
-    return /*#__PURE__*/_react.default.createElement(_.HvListItem // eslint-disable-next-line react/no-array-index-key
-    , {
-      key: "".concat(tag.label, "-").concat(i),
-      tabIndex: -1,
-      className: (0, _clsx.default)(!multiline && classes.singleLine),
-      classes: {
-        gutters: classes.listItemGutters,
-        root: classes.listItemRoot
-      },
-      id: "tag-".concat(i)
-    }, /*#__PURE__*/_react.default.createElement(_.HvTag, (0, _extends2.default)({
-      label: label,
-      className: (0, _clsx.default)(i === tagCursorPos && classes.tagSelected),
-      classes: {
-        chipRoot: classes.chipRoot
-      },
-      type: type
-    }, !(readOnly || disabled || type === "categorical") && {
-      onDelete: function onDelete(event) {
-        return onDeleteTagHandler(event, i);
-      }
-    }, {
-      deleteButtonProps: {
-        tabIndex: -1
-      }
-    }, otherProps)));
-  }), !(disabled || readOnly) && /*#__PURE__*/_react.default.createElement(_.HvListItem, {
-    className: (0, _clsx.default)(!multiline && classes.singleLine, value.length === 0 && "empty"),
-    classes: {
-      root: classes.tagInputContainerRoot,
-      gutters: classes.listItemGutters
-    },
-    id: "tag-".concat(value.length)
-  }, /*#__PURE__*/_react.default.createElement(_.HvInput, (0, _extends2.default)({
-    value: tagInput,
-    disableClear: true,
-    onChange: onChangeHandler,
-    onKeyDown: onInputKeyDownHandler,
-    placeholder: value.length === 0 ? placeholder : "",
-    autoFocus: autoFocus,
-    className: (0, _clsx.default)(!multiline && classes.singleLine),
-    classes: {
-      root: classes.tagInputRoot,
-      input: classes.input,
-      inputBorderContainer: classes.tagInputBorderContainer,
-      inputRootFocused: classes.tagInputRootFocused
-    },
-    disabled: disabled,
-    readOnly: readOnly || isTagSelected,
-    inputProps: _objectSpread({
-      ref: materialInputRef,
-      "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabelledBy,
-      "aria-describedby": ariaDescribedBy != null ? ariaDescribedBy : description && (0, _utils.setId)(elementId, "description")
-    }, inputProps),
-    inputRef: inputRef
-  }, others)))), canShowSuggestions && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, hasSuggestions && /*#__PURE__*/_react.default.createElement("div", {
-    role: "presentation",
-    className: classes.inputExtension
-  }), /*#__PURE__*/_react.default.createElement(_.HvSuggestions, {
-    id: (0, _utils.setId)(elementId, "suggestions"),
-    classes: {
-      root: classes.suggestionsContainer,
-      list: classes.suggestionList
-    },
-    expanded: hasSuggestions,
-    anchorEl: containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.parentElement,
-    onClose: suggestionClearHandler,
-    onKeyDown: onSuggestionKeyDown,
-    onSuggestionSelected: suggestionSelectedHandler,
-    suggestionValues: suggestionValues
-  })), canShowError && /*#__PURE__*/_react.default.createElement(_.HvWarningText, {
-    id: (0, _utils.setId)(elementId, "error"),
-    disableBorder: true,
-    className: classes.error
-  }, validationMessage));
+    className: (0, _clsx.default)(classes.root, className, disabled && classes.disabled),
+    children: [(hasLabel || hasDescription) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: classes.labelContainer,
+      children: [hasLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HvLabel, {
+        className: classes.label,
+        id: (0, _utils.setId)(id, "label"),
+        htmlFor: (0, _utils.setId)(elementId, "input"),
+        label: textAreaLabel
+      }), hasDescription && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HvInfoMessage, {
+        className: classes.description,
+        id: (0, _utils.setId)(elementId, "description"),
+        children: description
+      })]
+    }), hasCounter && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HvCharCounter, _objectSpread({
+      id: (0, _utils.setId)(elementId, "charCounter"),
+      className: classes.characterCounter,
+      separator: middleCountLabel,
+      currentCharQuantity: value.length,
+      maxCharQuantity: maxTagsQuantity
+    }, countCharProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.HvListContainer, {
+      className: (0, _clsx.default)(classes.tagsList, multiline ? resizable && classes.resizable : classes.singleLine, canShowError && classes.error, isStateInvalid && classes.invalid),
+      onKeyDown: onKeyDownHandler,
+      onClick: onContainerClickHandler,
+      ref: containerRef,
+      children: [value && value.map(function (t, i) {
+        var tag = typeof t === "string" ? {
+          label: t,
+          type: "semantic"
+        } : t;
+        var label = tag.label,
+            type = tag.type,
+            otherProps = (0, _objectWithoutProperties2.default)(tag, _excluded2);
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HvListItem // eslint-disable-next-line react/no-array-index-key
+        , {
+          tabIndex: -1,
+          className: (0, _clsx.default)(!multiline && classes.singleLine),
+          classes: {
+            gutters: classes.listItemGutters,
+            root: classes.listItemRoot
+          },
+          id: "tag-".concat(i),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HvTag, _objectSpread(_objectSpread({
+            label: label,
+            className: (0, _clsx.default)(i === tagCursorPos && classes.tagSelected),
+            classes: {
+              chipRoot: classes.chipRoot
+            },
+            type: type
+          }, !(readOnly || disabled || type === "categorical") && {
+            onDelete: function onDelete(event) {
+              return onDeleteTagHandler(event, i);
+            }
+          }), {}, {
+            deleteButtonProps: {
+              tabIndex: -1
+            }
+          }, otherProps))
+        }, "".concat(tag.label, "-").concat(i));
+      }), !(disabled || readOnly) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HvListItem, {
+        className: (0, _clsx.default)(!multiline && classes.singleLine, value.length === 0 && "empty"),
+        classes: {
+          root: classes.tagInputContainerRoot,
+          gutters: classes.listItemGutters
+        },
+        id: "tag-".concat(value.length),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HvInput, _objectSpread({
+          value: tagInput,
+          disableClear: true,
+          onChange: onChangeHandler,
+          onKeyDown: onInputKeyDownHandler,
+          placeholder: value.length === 0 ? placeholder : "",
+          autoFocus: autoFocus,
+          className: (0, _clsx.default)(!multiline && classes.singleLine),
+          classes: {
+            root: classes.tagInputRoot,
+            input: classes.input,
+            inputBorderContainer: classes.tagInputBorderContainer,
+            inputRootFocused: classes.tagInputRootFocused
+          },
+          disabled: disabled,
+          readOnly: readOnly || isTagSelected,
+          inputProps: _objectSpread({
+            ref: materialInputRef,
+            "aria-label": ariaLabel,
+            "aria-labelledby": ariaLabelledBy,
+            "aria-describedby": ariaDescribedBy != null ? ariaDescribedBy : description && (0, _utils.setId)(elementId, "description")
+          }, inputProps),
+          inputRef: inputRef
+        }, others))
+      })]
+    }), canShowSuggestions && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [hasSuggestions && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        role: "presentation",
+        className: classes.inputExtension
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HvSuggestions, {
+        id: (0, _utils.setId)(elementId, "suggestions"),
+        classes: {
+          root: classes.suggestionsContainer,
+          list: classes.suggestionList
+        },
+        expanded: hasSuggestions,
+        anchorEl: containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.parentElement,
+        onClose: suggestionClearHandler,
+        onKeyDown: onSuggestionKeyDown,
+        onSuggestionSelected: suggestionSelectedHandler,
+        suggestionValues: suggestionValues
+      })]
+    }), canShowError && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HvWarningText, {
+      id: (0, _utils.setId)(elementId, "error"),
+      disableBorder: true,
+      className: classes.error,
+      children: validationMessage
+    })]
+  });
 };
 
 process.env.NODE_ENV !== "production" ? HvTagsInput.propTypes = {
@@ -878,7 +886,7 @@ process.env.NODE_ENV !== "production" ? HvTagsInput.propTypes = {
   suggestionListCallback: _propTypes.default.func
 } : void 0;
 
-var _default = (0, _core.withStyles)(_styles.default, {
+var _default = (0, _styles.withStyles)(_styles2.default, {
   name: "HvTagsInput"
 })(HvTagsInput);