@hitachivantara/uikit-react-core 4.4.3 → 5.0.0-next.10

package/dist/esm/components/Tag/Tag.styles.js

@@ -0,0 +1,160 @@
+import _styled from "@emotion/styled/base";
+import { CloseXS } from "@hitachivantara/uikit-react-icons";
+import { theme } from "@hitachivantara/uikit-styles";
+import Chip from "@mui/material/Chip";
+import fade from "../../utils/hexToRgbA.js";
+import { transientOptions } from "../../utils/transientOptions.js";
+import tagClasses from "./tagClasses.js";
+import { outlineStyles } from "../../utils/focusUtils.js";
+import { HvButton } from "../Button/Button.js";
+function _EMOTION_STRINGIFIED_CSS_ERROR__() {
+  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
+}
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+const StyledChip = /* @__PURE__ */ _styled(Chip, process.env.NODE_ENV === "production" ? _extends({}, {
+  target: "e14hga4y2"
+}, transientOptions) : _extends({}, {
+  target: "e14hga4y2",
+  label: "StyledChip"
+}, transientOptions))(({
+  $type,
+  $disabled,
+  $categoricalFocus,
+  $categoricalDisabled,
+  $base1Color
+}) => ({
+  "&.MuiChip-root": {
+    height: 16,
+    borderRadius: 0,
+    maxWidth: 180,
+    fontFamily: theme.fontFamily.body,
+    [`& .${tagClasses.focusVisible}`]: {
+      backgroundColor: fade(theme.colors.base1, 0.3)
+    },
+    ...$type === "categorical" && {
+      borderRadius: 8,
+      [`&.${tagClasses.clickable}`]: {
+        cursor: "pointer"
+      },
+      "&:hover": {
+        borderRadius: 8
+      },
+      [`& .${tagClasses.label}`]: {
+        color: theme.colors.acce1
+      },
+      "&:focus:not(:focus-visible)": {
+        outline: "0 !important",
+        boxShadow: "none !important"
+      }
+    },
+    ...$disabled && {
+      backgroundColor: theme.colors.atmo3,
+      cursor: "not-allowed",
+      [`& .${tagClasses.label}`]: {
+        color: theme.colors.atmo5
+      }
+    },
+    ...$categoricalFocus && {
+      "&:focus": {
+        ...outlineStyles
+      }
+    },
+    ...$categoricalDisabled && {
+      backgroundColor: theme.colors.atmo3,
+      cursor: "not-allowed",
+      [`& .${tagClasses.label}`]: {
+        color: theme.colors.atmo5
+      },
+      "&:hover": {
+        backgroundColor: theme.colors.atmo3
+      },
+      "&:focus": {
+        outline: "none"
+      }
+    }
+  },
+  "& .MuiChip-label": {
+    paddingLeft: theme.space.xs,
+    paddingRight: theme.space.xs,
+    ...theme.typography.body,
+    color: theme.colors.base2,
+    "& p": {
+      color: theme.colors.base2
+    }
+  },
+  "& .MuiChip-deleteIcon": {
+    marginRight: 0,
+    width: 16,
+    height: 16,
+    minWidth: 16,
+    minHeight: 16,
+    padding: 0,
+    "&:hover": {
+      backgroundColor: `${$base1Color}30`
+    },
+    "&:focus": {
+      ...outlineStyles,
+      borderRadius: 0
+    },
+    "&:focus:not(:focus-visible)": {
+      outline: "0 !important",
+      boxShadow: "none !important"
+    },
+    ...$disabled && {
+      "&:hover": {
+        backgroundColor: theme.colors.atmo3
+      },
+      "&:focus": {
+        backgroundColor: theme.colors.atmo3,
+        outline: "none",
+        boxShadow: "none",
+        outlineOffset: 0
+      }
+    }
+  }
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVGFnL1RhZy5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVcwQiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL1RhZy9UYWcuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgQ2xvc2VYUyB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtcmVhY3QtaWNvbnNcIjtcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcbmltcG9ydCBDaGlwIGZyb20gXCJAbXVpL21hdGVyaWFsL0NoaXBcIjtcbmltcG9ydCB7IEh2QnV0dG9uIH0gZnJvbSBcImNvbXBvbmVudHNcIjtcbmltcG9ydCB7IENTU1Byb3BlcnRpZXMgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IG91dGxpbmVTdHlsZXMgfSBmcm9tIFwidXRpbHNcIjtcbmltcG9ydCBmYWRlIGZyb20gXCJ1dGlscy9oZXhUb1JnYkFcIjtcbmltcG9ydCB7IHRyYW5zaWVudE9wdGlvbnMgfSBmcm9tIFwidXRpbHMvdHJhbnNpZW50T3B0aW9uc1wiO1xuaW1wb3J0IHRhZ0NsYXNzZXMgZnJvbSBcIi4vdGFnQ2xhc3Nlc1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQ2hpcCA9IHN0eWxlZChcbiAgQ2hpcCxcbiAgdHJhbnNpZW50T3B0aW9uc1xuKShcbiAgKHtcbiAgICAkdHlwZSxcbiAgICAkZGlzYWJsZWQsXG4gICAgJGNhdGVnb3JpY2FsRm9jdXMsXG4gICAgJGNhdGVnb3JpY2FsRGlzYWJsZWQsXG4gICAgJGJhc2UxQ29sb3IsXG4gIH06IHtcbiAgICAkdHlwZTogc3RyaW5nO1xuICAgICRkaXNhYmxlZDogYm9vbGVhbjtcbiAgICAkY2F0ZWdvcmljYWxGb2N1czogYm9vbGVhbjtcbiAgICAkY2F0ZWdvcmljYWxEaXNhYmxlZDogYm9vbGVhbjtcbiAgICAkYmFzZTFDb2xvcjogc3RyaW5nO1xuICB9KSA9PiAoe1xuICAgIFwiJi5NdWlDaGlwLXJvb3RcIjoge1xuICAgICAgaGVpZ2h0OiAxNixcbiAgICAgIGJvcmRlclJhZGl1czogMCxcbiAgICAgIG1heFdpZHRoOiAxODAsXG4gICAgICBmb250RmFtaWx5OiB0aGVtZS5mb250RmFtaWx5LmJvZHksXG4gICAgICBbYCYgLiR7dGFnQ2xhc3Nlcy5mb2N1c1Zpc2libGV9YF06IHtcbiAgICAgICAgYmFja2dyb3VuZENvbG9yOiBmYWRlKHRoZW1lLmNvbG9ycy5iYXNlMSwgMC4zKSxcbiAgICAgIH0sXG4gICAgICAuLi4oJHR5cGUgPT09IFwiY2F0ZWdvcmljYWxcIiAmJiB7XG4gICAgICAgIGJvcmRlclJhZGl1czogOCxcbiAgICAgICAgW2AmLiR7dGFnQ2xhc3Nlcy5jbGlja2FibGV9YF06IHtcbiAgICAgICAgICBjdXJzb3I6IFwicG9pbnRlclwiLFxuICAgICAgICB9LFxuICAgICAgICBcIiY6aG92ZXJcIjoge1xuICAgICAgICAgIGJvcmRlclJhZGl1czogOCxcbiAgICAgICAgfSxcbiAgICAgICAgW2AmIC4ke3RhZ0NsYXNzZXMubGFiZWx9YF06IHtcbiAgICAgICAgICBjb2xvcjogdGhlbWUuY29sb3JzLmFjY2UxLFxuICAgICAgICB9LFxuICAgICAgICBcIiY6Zm9jdXM6bm90KDpmb2N1cy12aXNpYmxlKVwiOiB7XG4gICAgICAgICAgb3V0bGluZTogXCIwICFpbXBvcnRhbnRcIixcbiAgICAgICAgICBib3hTaGFkb3c6IFwibm9uZSAhaW1wb3J0YW50XCIsXG4gICAgICAgIH0sXG4gICAgICB9KSxcbiAgICAgIC4uLigkZGlzYWJsZWQgJiYge1xuICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5hdG1vMyxcbiAgICAgICAgY3Vyc29yOiBcIm5vdC1hbGxvd2VkXCIsXG4gICAgICAgIFtgJiAuJHt0YWdDbGFzc2VzLmxhYmVsfWBdOiB7XG4gICAgICAgICAgY29sb3I6IHRoZW1lLmNvbG9ycy5hdG1vNSxcbiAgICAgICAgfSxcbiAgICAgIH0pLFxuICAgICAgLi4uKCRjYXRlZ29yaWNhbEZvY3VzICYmIHtcbiAgICAgICAgXCImOmZvY3VzXCI6IHtcbiAgICAgICAgICAuLi5vdXRsaW5lU3R5bGVzLFxuICAgICAgICB9LFxuICAgICAgfSksXG4gICAgICAuLi4oJGNhdGVnb3JpY2FsRGlzYWJsZWQgJiYge1xuICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5hdG1vMyxcbiAgICAgICAgY3Vyc29yOiBcIm5vdC1hbGxvd2VkXCIsXG4gICAgICAgIFtgJiAuJHt0YWdDbGFzc2VzLmxhYmVsfWBdOiB7XG4gICAgICAgICAgY29sb3I6IHRoZW1lLmNvbG9ycy5hdG1vNSxcbiAgICAgICAgfSxcbiAgICAgICAgXCImOmhvdmVyXCI6IHtcbiAgICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5hdG1vMyxcbiAgICAgICAgfSxcbiAgICAgICAgXCImOmZvY3VzXCI6IHtcbiAgICAgICAgICBvdXRsaW5lOiBcIm5vbmVcIixcbiAgICAgICAgfSxcbiAgICAgIH0pLFxuICAgIH0sXG5cbiAgICBcIiYgLk11aUNoaXAtbGFiZWxcIjoge1xuICAgICAgcGFkZGluZ0xlZnQ6IHRoZW1lLnNwYWNlLnhzLFxuICAgICAgcGFkZGluZ1JpZ2h0OiB0aGVtZS5zcGFjZS54cyxcbiAgICAgIC4uLih0aGVtZS50eXBvZ3JhcGh5LmJvZHkgYXMgQ1NTUHJvcGVydGllcyksXG4gICAgICBjb2xvcjogdGhlbWUuY29sb3JzLmJhc2UyLFxuICAgICAgXCImIHBcIjoge1xuICAgICAgICBjb2xvcjogdGhlbWUuY29sb3JzLmJhc2UyLFxuICAgICAgfSxcbiAgICB9LFxuXG4gICAgXCImIC5NdWlDaGlwLWRlbGV0ZUljb25cIjoge1xuICAgICAgbWFyZ2luUmlnaHQ6IDAsXG4gICAgICB3aWR0aDogMTYsXG4gICAgICBoZWlnaHQ6IDE2LFxuICAgICAgbWluV2lkdGg6IDE2LFxuICAgICAgbWluSGVpZ2h0OiAxNixcbiAgICAgIHBhZGRpbmc6IDAsXG4gICAgICBcIiY6aG92ZXJcIjoge1xuICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IGAkeyRiYXNlMUNvbG9yfTMwYCxcbiAgICAgIH0sXG4gICAgICBcIiY6Zm9jdXNcIjoge1xuICAgICAgICAuLi5vdXRsaW5lU3R5bGVzLFxuICAgICAgICBib3JkZXJSYWRpdXM6IDAsXG4gICAgICB9LFxuICAgICAgXCImOmZvY3VzOm5vdCg6Zm9jdXMtdmlzaWJsZSlcIjoge1xuICAgICAgICBvdXRsaW5lOiBcIjAgIWltcG9ydGFudFwiLFxuICAgICAgICBib3hTaGFkb3c6IFwibm9uZSAhaW1wb3J0YW50XCIsXG4gICAgICB9LFxuICAgICAgLi4uKCRkaXNhYmxlZCAmJiB7XG4gICAgICAgIFwiJjpob3ZlclwiOiB7XG4gICAgICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuYXRtbzMsXG4gICAgICAgIH0sXG4gICAgICAgIFwiJjpmb2N1c1wiOiB7XG4gICAgICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuYXRtbzMsXG4gICAgICAgICAgb3V0bGluZTogXCJub25lXCIsXG4gICAgICAgICAgYm94U2hhZG93OiBcIm5vbmVcIixcbiAgICAgICAgICBvdXRsaW5lT2Zmc2V0OiAwLFxuICAgICAgICB9LFxuICAgICAgfSksXG4gICAgfSxcbiAgfSlcbik7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRCdXR0b24gPSBzdHlsZWQoSHZCdXR0b24pKHtcbiAgXCImIC5NdWlCdXR0b24tc3RhcnRJY29uXCI6IHtcbiAgICB3aWR0aDogMTYsXG4gICAgaGVpZ2h0OiAxNixcbiAgICBtaW5XaWR0aDogMTYsXG4gICAgbWluSGVpZ2h0OiAxNixcbiAgICBwYWRkaW5nOiAwLFxuICAgIG1hcmdpbjogMCxcbiAgfSxcbiAgXCImIC5NdWlCdXR0b24tdGV4dFByaW1hcnlcIjoge1xuICAgIGJhY2tncm91bmQ6IFwidHJhbnNwYXJlbnRcIixcbiAgfSxcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQ2xvc2VYUyA9IHN0eWxlZChcbiAgQ2xvc2VYUyxcbiAgdHJhbnNpZW50T3B0aW9uc1xuKSgoeyAkY29sb3IgfTogeyAkY29sb3I6IHN0cmluZyB9KSA9PiAoe1xuICBcIiYgc3ZnIC5jb2xvcjBcIjoge1xuICAgIGZpbGw6IHRoZW1lLmNvbG9yc1skY29sb3JdLFxuICB9LFxufSkpO1xuIl19 */");
+const StyledButton = /* @__PURE__ */ _styled(HvButton, process.env.NODE_ENV === "production" ? {
+  target: "e14hga4y1"
+} : {
+  target: "e14hga4y1",
+  label: "StyledButton"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1ak3043",
+  styles: "& .MuiButton-startIcon{width:16px;height:16px;min-width:16px;min-height:16px;padding:0;margin:0;}& .MuiButton-textPrimary{background:transparent;}"
+} : {
+  name: "1ak3043",
+  styles: "& .MuiButton-startIcon{width:16px;height:16px;min-width:16px;min-height:16px;padding:0;margin:0;}& .MuiButton-textPrimary{background:transparent;}",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVGFnL1RhZy5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTBINEIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9UYWcvVGFnLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IENsb3NlWFMgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXJlYWN0LWljb25zXCI7XG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5pbXBvcnQgQ2hpcCBmcm9tIFwiQG11aS9tYXRlcmlhbC9DaGlwXCI7XG5pbXBvcnQgeyBIdkJ1dHRvbiB9IGZyb20gXCJjb21wb25lbnRzXCI7XG5pbXBvcnQgeyBDU1NQcm9wZXJ0aWVzIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgeyBvdXRsaW5lU3R5bGVzIH0gZnJvbSBcInV0aWxzXCI7XG5pbXBvcnQgZmFkZSBmcm9tIFwidXRpbHMvaGV4VG9SZ2JBXCI7XG5pbXBvcnQgeyB0cmFuc2llbnRPcHRpb25zIH0gZnJvbSBcInV0aWxzL3RyYW5zaWVudE9wdGlvbnNcIjtcbmltcG9ydCB0YWdDbGFzc2VzIGZyb20gXCIuL3RhZ0NsYXNzZXNcIjtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENoaXAgPSBzdHlsZWQoXG4gIENoaXAsXG4gIHRyYW5zaWVudE9wdGlvbnNcbikoXG4gICh7XG4gICAgJHR5cGUsXG4gICAgJGRpc2FibGVkLFxuICAgICRjYXRlZ29yaWNhbEZvY3VzLFxuICAgICRjYXRlZ29yaWNhbERpc2FibGVkLFxuICAgICRiYXNlMUNvbG9yLFxuICB9OiB7XG4gICAgJHR5cGU6IHN0cmluZztcbiAgICAkZGlzYWJsZWQ6IGJvb2xlYW47XG4gICAgJGNhdGVnb3JpY2FsRm9jdXM6IGJvb2xlYW47XG4gICAgJGNhdGVnb3JpY2FsRGlzYWJsZWQ6IGJvb2xlYW47XG4gICAgJGJhc2UxQ29sb3I6IHN0cmluZztcbiAgfSkgPT4gKHtcbiAgICBcIiYuTXVpQ2hpcC1yb290XCI6IHtcbiAgICAgIGhlaWdodDogMTYsXG4gICAgICBib3JkZXJSYWRpdXM6IDAsXG4gICAgICBtYXhXaWR0aDogMTgwLFxuICAgICAgZm9udEZhbWlseTogdGhlbWUuZm9udEZhbWlseS5ib2R5LFxuICAgICAgW2AmIC4ke3RhZ0NsYXNzZXMuZm9jdXNWaXNpYmxlfWBdOiB7XG4gICAgICAgIGJhY2tncm91bmRDb2xvcjogZmFkZSh0aGVtZS5jb2xvcnMuYmFzZTEsIDAuMyksXG4gICAgICB9LFxuICAgICAgLi4uKCR0eXBlID09PSBcImNhdGVnb3JpY2FsXCIgJiYge1xuICAgICAgICBib3JkZXJSYWRpdXM6IDgsXG4gICAgICAgIFtgJi4ke3RhZ0NsYXNzZXMuY2xpY2thYmxlfWBdOiB7XG4gICAgICAgICAgY3Vyc29yOiBcInBvaW50ZXJcIixcbiAgICAgICAgfSxcbiAgICAgICAgXCImOmhvdmVyXCI6IHtcbiAgICAgICAgICBib3JkZXJSYWRpdXM6IDgsXG4gICAgICAgIH0sXG4gICAgICAgIFtgJiAuJHt0YWdDbGFzc2VzLmxhYmVsfWBdOiB7XG4gICAgICAgICAgY29sb3I6IHRoZW1lLmNvbG9ycy5hY2NlMSxcbiAgICAgICAgfSxcbiAgICAgICAgXCImOmZvY3VzOm5vdCg6Zm9jdXMtdmlzaWJsZSlcIjoge1xuICAgICAgICAgIG91dGxpbmU6IFwiMCAhaW1wb3J0YW50XCIsXG4gICAgICAgICAgYm94U2hhZG93OiBcIm5vbmUgIWltcG9ydGFudFwiLFxuICAgICAgICB9LFxuICAgICAgfSksXG4gICAgICAuLi4oJGRpc2FibGVkICYmIHtcbiAgICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuYXRtbzMsXG4gICAgICAgIGN1cnNvcjogXCJub3QtYWxsb3dlZFwiLFxuICAgICAgICBbYCYgLiR7dGFnQ2xhc3Nlcy5sYWJlbH1gXToge1xuICAgICAgICAgIGNvbG9yOiB0aGVtZS5jb2xvcnMuYXRtbzUsXG4gICAgICAgIH0sXG4gICAgICB9KSxcbiAgICAgIC4uLigkY2F0ZWdvcmljYWxGb2N1cyAmJiB7XG4gICAgICAgIFwiJjpmb2N1c1wiOiB7XG4gICAgICAgICAgLi4ub3V0bGluZVN0eWxlcyxcbiAgICAgICAgfSxcbiAgICAgIH0pLFxuICAgICAgLi4uKCRjYXRlZ29yaWNhbERpc2FibGVkICYmIHtcbiAgICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuYXRtbzMsXG4gICAgICAgIGN1cnNvcjogXCJub3QtYWxsb3dlZFwiLFxuICAgICAgICBbYCYgLiR7dGFnQ2xhc3Nlcy5sYWJlbH1gXToge1xuICAgICAgICAgIGNvbG9yOiB0aGVtZS5jb2xvcnMuYXRtbzUsXG4gICAgICAgIH0sXG4gICAgICAgIFwiJjpob3ZlclwiOiB7XG4gICAgICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuYXRtbzMsXG4gICAgICAgIH0sXG4gICAgICAgIFwiJjpmb2N1c1wiOiB7XG4gICAgICAgICAgb3V0bGluZTogXCJub25lXCIsXG4gICAgICAgIH0sXG4gICAgICB9KSxcbiAgICB9LFxuXG4gICAgXCImIC5NdWlDaGlwLWxhYmVsXCI6IHtcbiAgICAgIHBhZGRpbmdMZWZ0OiB0aGVtZS5zcGFjZS54cyxcbiAgICAgIHBhZGRpbmdSaWdodDogdGhlbWUuc3BhY2UueHMsXG4gICAgICAuLi4odGhlbWUudHlwb2dyYXBoeS5ib2R5IGFzIENTU1Byb3BlcnRpZXMpLFxuICAgICAgY29sb3I6IHRoZW1lLmNvbG9ycy5iYXNlMixcbiAgICAgIFwiJiBwXCI6IHtcbiAgICAgICAgY29sb3I6IHRoZW1lLmNvbG9ycy5iYXNlMixcbiAgICAgIH0sXG4gICAgfSxcblxuICAgIFwiJiAuTXVpQ2hpcC1kZWxldGVJY29uXCI6IHtcbiAgICAgIG1hcmdpblJpZ2h0OiAwLFxuICAgICAgd2lkdGg6IDE2LFxuICAgICAgaGVpZ2h0OiAxNixcbiAgICAgIG1pbldpZHRoOiAxNixcbiAgICAgIG1pbkhlaWdodDogMTYsXG4gICAgICBwYWRkaW5nOiAwLFxuICAgICAgXCImOmhvdmVyXCI6IHtcbiAgICAgICAgYmFja2dyb3VuZENvbG9yOiBgJHskYmFzZTFDb2xvcn0zMGAsXG4gICAgICB9LFxuICAgICAgXCImOmZvY3VzXCI6IHtcbiAgICAgICAgLi4ub3V0bGluZVN0eWxlcyxcbiAgICAgICAgYm9yZGVyUmFkaXVzOiAwLFxuICAgICAgfSxcbiAgICAgIFwiJjpmb2N1czpub3QoOmZvY3VzLXZpc2libGUpXCI6IHtcbiAgICAgICAgb3V0bGluZTogXCIwICFpbXBvcnRhbnRcIixcbiAgICAgICAgYm94U2hhZG93OiBcIm5vbmUgIWltcG9ydGFudFwiLFxuICAgICAgfSxcbiAgICAgIC4uLigkZGlzYWJsZWQgJiYge1xuICAgICAgICBcIiY6aG92ZXJcIjoge1xuICAgICAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLmF0bW8zLFxuICAgICAgICB9LFxuICAgICAgICBcIiY6Zm9jdXNcIjoge1xuICAgICAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLmF0bW8zLFxuICAgICAgICAgIG91dGxpbmU6IFwibm9uZVwiLFxuICAgICAgICAgIGJveFNoYWRvdzogXCJub25lXCIsXG4gICAgICAgICAgb3V0bGluZU9mZnNldDogMCxcbiAgICAgICAgfSxcbiAgICAgIH0pLFxuICAgIH0sXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQnV0dG9uID0gc3R5bGVkKEh2QnV0dG9uKSh7XG4gIFwiJiAuTXVpQnV0dG9uLXN0YXJ0SWNvblwiOiB7XG4gICAgd2lkdGg6IDE2LFxuICAgIGhlaWdodDogMTYsXG4gICAgbWluV2lkdGg6IDE2LFxuICAgIG1pbkhlaWdodDogMTYsXG4gICAgcGFkZGluZzogMCxcbiAgICBtYXJnaW46IDAsXG4gIH0sXG4gIFwiJiAuTXVpQnV0dG9uLXRleHRQcmltYXJ5XCI6IHtcbiAgICBiYWNrZ3JvdW5kOiBcInRyYW5zcGFyZW50XCIsXG4gIH0sXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENsb3NlWFMgPSBzdHlsZWQoXG4gIENsb3NlWFMsXG4gIHRyYW5zaWVudE9wdGlvbnNcbikoKHsgJGNvbG9yIH06IHsgJGNvbG9yOiBzdHJpbmcgfSkgPT4gKHtcbiAgXCImIHN2ZyAuY29sb3IwXCI6IHtcbiAgICBmaWxsOiB0aGVtZS5jb2xvcnNbJGNvbG9yXSxcbiAgfSxcbn0pKTtcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const StyledCloseXS = /* @__PURE__ */ _styled(CloseXS, process.env.NODE_ENV === "production" ? _extends({}, {
+  target: "e14hga4y0"
+}, transientOptions) : _extends({}, {
+  target: "e14hga4y0",
+  label: "StyledCloseXS"
+}, transientOptions))(({
+  $color
+}) => ({
+  "& svg .color0": {
+    fill: theme.colors[$color]
+  }
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVGFnL1RhZy5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXdJNkIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9UYWcvVGFnLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IENsb3NlWFMgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXJlYWN0LWljb25zXCI7XG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5pbXBvcnQgQ2hpcCBmcm9tIFwiQG11aS9tYXRlcmlhbC9DaGlwXCI7XG5pbXBvcnQgeyBIdkJ1dHRvbiB9IGZyb20gXCJjb21wb25lbnRzXCI7XG5pbXBvcnQgeyBDU1NQcm9wZXJ0aWVzIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgeyBvdXRsaW5lU3R5bGVzIH0gZnJvbSBcInV0aWxzXCI7XG5pbXBvcnQgZmFkZSBmcm9tIFwidXRpbHMvaGV4VG9SZ2JBXCI7XG5pbXBvcnQgeyB0cmFuc2llbnRPcHRpb25zIH0gZnJvbSBcInV0aWxzL3RyYW5zaWVudE9wdGlvbnNcIjtcbmltcG9ydCB0YWdDbGFzc2VzIGZyb20gXCIuL3RhZ0NsYXNzZXNcIjtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENoaXAgPSBzdHlsZWQoXG4gIENoaXAsXG4gIHRyYW5zaWVudE9wdGlvbnNcbikoXG4gICh7XG4gICAgJHR5cGUsXG4gICAgJGRpc2FibGVkLFxuICAgICRjYXRlZ29yaWNhbEZvY3VzLFxuICAgICRjYXRlZ29yaWNhbERpc2FibGVkLFxuICAgICRiYXNlMUNvbG9yLFxuICB9OiB7XG4gICAgJHR5cGU6IHN0cmluZztcbiAgICAkZGlzYWJsZWQ6IGJvb2xlYW47XG4gICAgJGNhdGVnb3JpY2FsRm9jdXM6IGJvb2xlYW47XG4gICAgJGNhdGVnb3JpY2FsRGlzYWJsZWQ6IGJvb2xlYW47XG4gICAgJGJhc2UxQ29sb3I6IHN0cmluZztcbiAgfSkgPT4gKHtcbiAgICBcIiYuTXVpQ2hpcC1yb290XCI6IHtcbiAgICAgIGhlaWdodDogMTYsXG4gICAgICBib3JkZXJSYWRpdXM6IDAsXG4gICAgICBtYXhXaWR0aDogMTgwLFxuICAgICAgZm9udEZhbWlseTogdGhlbWUuZm9udEZhbWlseS5ib2R5LFxuICAgICAgW2AmIC4ke3RhZ0NsYXNzZXMuZm9jdXNWaXNpYmxlfWBdOiB7XG4gICAgICAgIGJhY2tncm91bmRDb2xvcjogZmFkZSh0aGVtZS5jb2xvcnMuYmFzZTEsIDAuMyksXG4gICAgICB9LFxuICAgICAgLi4uKCR0eXBlID09PSBcImNhdGVnb3JpY2FsXCIgJiYge1xuICAgICAgICBib3JkZXJSYWRpdXM6IDgsXG4gICAgICAgIFtgJi4ke3RhZ0NsYXNzZXMuY2xpY2thYmxlfWBdOiB7XG4gICAgICAgICAgY3Vyc29yOiBcInBvaW50ZXJcIixcbiAgICAgICAgfSxcbiAgICAgICAgXCImOmhvdmVyXCI6IHtcbiAgICAgICAgICBib3JkZXJSYWRpdXM6IDgsXG4gICAgICAgIH0sXG4gICAgICAgIFtgJiAuJHt0YWdDbGFzc2VzLmxhYmVsfWBdOiB7XG4gICAgICAgICAgY29sb3I6IHRoZW1lLmNvbG9ycy5hY2NlMSxcbiAgICAgICAgfSxcbiAgICAgICAgXCImOmZvY3VzOm5vdCg6Zm9jdXMtdmlzaWJsZSlcIjoge1xuICAgICAgICAgIG91dGxpbmU6IFwiMCAhaW1wb3J0YW50XCIsXG4gICAgICAgICAgYm94U2hhZG93OiBcIm5vbmUgIWltcG9ydGFudFwiLFxuICAgICAgICB9LFxuICAgICAgfSksXG4gICAgICAuLi4oJGRpc2FibGVkICYmIHtcbiAgICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuYXRtbzMsXG4gICAgICAgIGN1cnNvcjogXCJub3QtYWxsb3dlZFwiLFxuICAgICAgICBbYCYgLiR7dGFnQ2xhc3Nlcy5sYWJlbH1gXToge1xuICAgICAgICAgIGNvbG9yOiB0aGVtZS5jb2xvcnMuYXRtbzUsXG4gICAgICAgIH0sXG4gICAgICB9KSxcbiAgICAgIC4uLigkY2F0ZWdvcmljYWxGb2N1cyAmJiB7XG4gICAgICAgIFwiJjpmb2N1c1wiOiB7XG4gICAgICAgICAgLi4ub3V0bGluZVN0eWxlcyxcbiAgICAgICAgfSxcbiAgICAgIH0pLFxuICAgICAgLi4uKCRjYXRlZ29yaWNhbERpc2FibGVkICYmIHtcbiAgICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuYXRtbzMsXG4gICAgICAgIGN1cnNvcjogXCJub3QtYWxsb3dlZFwiLFxuICAgICAgICBbYCYgLiR7dGFnQ2xhc3Nlcy5sYWJlbH1gXToge1xuICAgICAgICAgIGNvbG9yOiB0aGVtZS5jb2xvcnMuYXRtbzUsXG4gICAgICAgIH0sXG4gICAgICAgIFwiJjpob3ZlclwiOiB7XG4gICAgICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuYXRtbzMsXG4gICAgICAgIH0sXG4gICAgICAgIFwiJjpmb2N1c1wiOiB7XG4gICAgICAgICAgb3V0bGluZTogXCJub25lXCIsXG4gICAgICAgIH0sXG4gICAgICB9KSxcbiAgICB9LFxuXG4gICAgXCImIC5NdWlDaGlwLWxhYmVsXCI6IHtcbiAgICAgIHBhZGRpbmdMZWZ0OiB0aGVtZS5zcGFjZS54cyxcbiAgICAgIHBhZGRpbmdSaWdodDogdGhlbWUuc3BhY2UueHMsXG4gICAgICAuLi4odGhlbWUudHlwb2dyYXBoeS5ib2R5IGFzIENTU1Byb3BlcnRpZXMpLFxuICAgICAgY29sb3I6IHRoZW1lLmNvbG9ycy5iYXNlMixcbiAgICAgIFwiJiBwXCI6IHtcbiAgICAgICAgY29sb3I6IHRoZW1lLmNvbG9ycy5iYXNlMixcbiAgICAgIH0sXG4gICAgfSxcblxuICAgIFwiJiAuTXVpQ2hpcC1kZWxldGVJY29uXCI6IHtcbiAgICAgIG1hcmdpblJpZ2h0OiAwLFxuICAgICAgd2lkdGg6IDE2LFxuICAgICAgaGVpZ2h0OiAxNixcbiAgICAgIG1pbldpZHRoOiAxNixcbiAgICAgIG1pbkhlaWdodDogMTYsXG4gICAgICBwYWRkaW5nOiAwLFxuICAgICAgXCImOmhvdmVyXCI6IHtcbiAgICAgICAgYmFja2dyb3VuZENvbG9yOiBgJHskYmFzZTFDb2xvcn0zMGAsXG4gICAgICB9LFxuICAgICAgXCImOmZvY3VzXCI6IHtcbiAgICAgICAgLi4ub3V0bGluZVN0eWxlcyxcbiAgICAgICAgYm9yZGVyUmFkaXVzOiAwLFxuICAgICAgfSxcbiAgICAgIFwiJjpmb2N1czpub3QoOmZvY3VzLXZpc2libGUpXCI6IHtcbiAgICAgICAgb3V0bGluZTogXCIwICFpbXBvcnRhbnRcIixcbiAgICAgICAgYm94U2hhZG93OiBcIm5vbmUgIWltcG9ydGFudFwiLFxuICAgICAgfSxcbiAgICAgIC4uLigkZGlzYWJsZWQgJiYge1xuICAgICAgICBcIiY6aG92ZXJcIjoge1xuICAgICAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLmF0bW8zLFxuICAgICAgICB9LFxuICAgICAgICBcIiY6Zm9jdXNcIjoge1xuICAgICAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLmF0bW8zLFxuICAgICAgICAgIG91dGxpbmU6IFwibm9uZVwiLFxuICAgICAgICAgIGJveFNoYWRvdzogXCJub25lXCIsXG4gICAgICAgICAgb3V0bGluZU9mZnNldDogMCxcbiAgICAgICAgfSxcbiAgICAgIH0pLFxuICAgIH0sXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQnV0dG9uID0gc3R5bGVkKEh2QnV0dG9uKSh7XG4gIFwiJiAuTXVpQnV0dG9uLXN0YXJ0SWNvblwiOiB7XG4gICAgd2lkdGg6IDE2LFxuICAgIGhlaWdodDogMTYsXG4gICAgbWluV2lkdGg6IDE2LFxuICAgIG1pbkhlaWdodDogMTYsXG4gICAgcGFkZGluZzogMCxcbiAgICBtYXJnaW46IDAsXG4gIH0sXG4gIFwiJiAuTXVpQnV0dG9uLXRleHRQcmltYXJ5XCI6IHtcbiAgICBiYWNrZ3JvdW5kOiBcInRyYW5zcGFyZW50XCIsXG4gIH0sXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENsb3NlWFMgPSBzdHlsZWQoXG4gIENsb3NlWFMsXG4gIHRyYW5zaWVudE9wdGlvbnNcbikoKHsgJGNvbG9yIH06IHsgJGNvbG9yOiBzdHJpbmcgfSkgPT4gKHtcbiAgXCImIHN2ZyAuY29sb3IwXCI6IHtcbiAgICBmaWxsOiB0aGVtZS5jb2xvcnNbJGNvbG9yXSxcbiAgfSxcbn0pKTtcbiJdfQ== */");
+export {
+  StyledButton,
+  StyledChip,
+  StyledCloseXS
+};
+//# sourceMappingURL=Tag.styles.js.map

package/dist/esm/components/Tag/Tag.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.styles.js","sources":["../../../../src/components/Tag/Tag.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { CloseXS } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport Chip from \"@mui/material/Chip\";\nimport { HvButton } from \"components\";\nimport { CSSProperties } from \"react\";\nimport { outlineStyles } from \"utils\";\nimport fade from \"utils/hexToRgbA\";\nimport { transientOptions } from \"utils/transientOptions\";\nimport tagClasses from \"./tagClasses\";\n\nexport const StyledChip = styled(\n  Chip,\n  transientOptions\n)(\n  ({\n    $type,\n    $disabled,\n    $categoricalFocus,\n    $categoricalDisabled,\n    $base1Color,\n  }: {\n    $type: string;\n    $disabled: boolean;\n    $categoricalFocus: boolean;\n    $categoricalDisabled: boolean;\n    $base1Color: string;\n  }) => ({\n    \"&.MuiChip-root\": {\n      height: 16,\n      borderRadius: 0,\n      maxWidth: 180,\n      fontFamily: theme.fontFamily.body,\n      [`& .${tagClasses.focusVisible}`]: {\n        backgroundColor: fade(theme.colors.base1, 0.3),\n      },\n      ...($type === \"categorical\" && {\n        borderRadius: 8,\n        [`&.${tagClasses.clickable}`]: {\n          cursor: \"pointer\",\n        },\n        \"&:hover\": {\n          borderRadius: 8,\n        },\n        [`& .${tagClasses.label}`]: {\n          color: theme.colors.acce1,\n        },\n        \"&:focus:not(:focus-visible)\": {\n          outline: \"0 !important\",\n          boxShadow: \"none !important\",\n        },\n      }),\n      ...($disabled && {\n        backgroundColor: theme.colors.atmo3,\n        cursor: \"not-allowed\",\n        [`& .${tagClasses.label}`]: {\n          color: theme.colors.atmo5,\n        },\n      }),\n      ...($categoricalFocus && {\n        \"&:focus\": {\n          ...outlineStyles,\n        },\n      }),\n      ...($categoricalDisabled && {\n        backgroundColor: theme.colors.atmo3,\n        cursor: \"not-allowed\",\n        [`& .${tagClasses.label}`]: {\n          color: theme.colors.atmo5,\n        },\n        \"&:hover\": {\n          backgroundColor: theme.colors.atmo3,\n        },\n        \"&:focus\": {\n          outline: \"none\",\n        },\n      }),\n    },\n\n    \"& .MuiChip-label\": {\n      paddingLeft: theme.space.xs,\n      paddingRight: theme.space.xs,\n      ...(theme.typography.body as CSSProperties),\n      color: theme.colors.base2,\n      \"& p\": {\n        color: theme.colors.base2,\n      },\n    },\n\n    \"& .MuiChip-deleteIcon\": {\n      marginRight: 0,\n      width: 16,\n      height: 16,\n      minWidth: 16,\n      minHeight: 16,\n      padding: 0,\n      \"&:hover\": {\n        backgroundColor: `${$base1Color}30`,\n      },\n      \"&:focus\": {\n        ...outlineStyles,\n        borderRadius: 0,\n      },\n      \"&:focus:not(:focus-visible)\": {\n        outline: \"0 !important\",\n        boxShadow: \"none !important\",\n      },\n      ...($disabled && {\n        \"&:hover\": {\n          backgroundColor: theme.colors.atmo3,\n        },\n        \"&:focus\": {\n          backgroundColor: theme.colors.atmo3,\n          outline: \"none\",\n          boxShadow: \"none\",\n          outlineOffset: 0,\n        },\n      }),\n    },\n  })\n);\n\nexport const StyledButton = styled(HvButton)({\n  \"& .MuiButton-startIcon\": {\n    width: 16,\n    height: 16,\n    minWidth: 16,\n    minHeight: 16,\n    padding: 0,\n    margin: 0,\n  },\n  \"& .MuiButton-textPrimary\": {\n    background: \"transparent\",\n  },\n});\n\nexport const StyledCloseXS = styled(\n  CloseXS,\n  transientOptions\n)(({ $color }: { $color: string }) => ({\n  \"& svg .color0\": {\n    fill: theme.colors[$color],\n  },\n}));\n"],"names":["StyledChip","Chip","process","env","NODE_ENV","_extends","target","transientOptions","label","$type","$disabled","$categoricalFocus","$categoricalDisabled","$base1Color","height","borderRadius","maxWidth","fontFamily","theme","body","tagClasses","focusVisible","backgroundColor","fade","colors","base1","clickable","cursor","color","acce1","outline","boxShadow","atmo3","atmo5","outlineStyles","paddingLeft","space","xs","paddingRight","typography","base2","marginRight","width","minWidth","minHeight","padding","outlineOffset","StyledButton","HvButton","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","StyledCloseXS","CloseXS","$color","fill"],"mappings":"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"}

package/dist/esm/components/Tag/tagClasses.js

@@ -0,0 +1,8 @@
+import { getClasses } from "../../utils/classes.js";
+const classKeys = ["root", "tagButton", "focusVisible", "button", "label", "chipRoot", "categorical", "disabled", "clickable", "categoricalFocus", "categoricalDisabled", "deleteIcon", "disabledDeleteIcon"];
+const tagClasses = getClasses(classKeys, "HvTag");
+const tagClasses$1 = tagClasses;
+export {
+  tagClasses$1 as default
+};
+//# sourceMappingURL=tagClasses.js.map

package/dist/esm/components/Tag/tagClasses.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tagClasses.js","sources":["../../../../src/components/Tag/tagClasses.ts"],"sourcesContent":["import { getClasses } from \"utils\";\n\nexport type HvTagClasses = {\n  root?: string;\n  tagButton?: string;\n  focusVisible?: string;\n  button?: string;\n  label?: string;\n  chipRoot?: string;\n  categorical?: string;\n  disabled?: string;\n  clickable?: string;\n  categoricalFocus?: string;\n  categoricalDisabled?: string;\n  deleteIcon?: string;\n  disabledDeleteIcon?: string;\n};\n\nconst classKeys: string[] = [\n  \"root\",\n  \"tagButton\",\n  \"focusVisible\",\n  \"button\",\n  \"label\",\n  \"chipRoot\",\n  \"categorical\",\n  \"disabled\",\n  \"clickable\",\n  \"categoricalFocus\",\n  \"categoricalDisabled\",\n  \"deleteIcon\",\n  \"disabledDeleteIcon\",\n];\n\nconst tagClasses = getClasses<HvTagClasses>(classKeys, \"HvTag\");\n\nexport default tagClasses;\n"],"names":["classKeys","tagClasses","getClasses"],"mappings":";AAkBA,MAAMA,YAAsB,CAC1B,QACA,aACA,gBACA,UACA,SACA,YACA,eACA,YACA,aACA,oBACA,uBACA,cACA,oBAAoB;AAGtB,MAAMC,aAAaC,WAAyBF,WAAW,OAAO;AAE9D,MAAA,eAAeC;"}

package/dist/esm/components/Tag/utils.js

@@ -0,0 +1,21 @@
+const getOnDeleteCallback = (tagIsDisabled, providedOnDelete) => {
+  const nullCallback = () => {
+  };
+  let deleteCallback;
+  if (tagIsDisabled && providedOnDelete) {
+    deleteCallback = nullCallback;
+  } else if (tagIsDisabled && !providedOnDelete) {
+    deleteCallback = void 0;
+  } else {
+    deleteCallback = providedOnDelete;
+  }
+  return deleteCallback;
+};
+const hasDeleteAction = (onDeleteAction) => !!onDeleteAction;
+const hasClickAction = (onClickAction) => !!onClickAction;
+export {
+  getOnDeleteCallback,
+  hasClickAction,
+  hasDeleteAction
+};
+//# sourceMappingURL=utils.js.map

package/dist/esm/components/Tag/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../src/components/Tag/utils.ts"],"sourcesContent":["export const getOnDeleteCallback = (tagIsDisabled, providedOnDelete) => {\n  const nullCallback = () => {};\n\n  let deleteCallback;\n\n  if (tagIsDisabled && providedOnDelete) {\n    deleteCallback = nullCallback;\n  } else if (tagIsDisabled && !providedOnDelete) {\n    deleteCallback = undefined;\n  } else {\n    deleteCallback = providedOnDelete;\n  }\n\n  return deleteCallback;\n};\n\nexport const hasDeleteAction = (onDeleteAction) => !!onDeleteAction;\n\nexport const hasClickAction = (onClickAction) => !!onClickAction;\n"],"names":["getOnDeleteCallback","tagIsDisabled","providedOnDelete","nullCallback","deleteCallback","undefined","hasDeleteAction","onDeleteAction","hasClickAction","onClickAction"],"mappings":"AAAaA,MAAAA,sBAAsBA,CAACC,eAAeC,qBAAqB;AACtE,QAAMC,eAAeA,MAAM;AAAA,EAAA;AAEvBC,MAAAA;AAEJ,MAAIH,iBAAiBC,kBAAkB;AACpBC,qBAAAA;AAAAA,EAAAA,WACRF,iBAAiB,CAACC,kBAAkB;AAC5BG,qBAAAA;AAAAA,EAAAA,OACZ;AACYH,qBAAAA;AAAAA,EACnB;AAEOE,SAAAA;AACT;AAEaE,MAAAA,kBAAmBC,CAAmB,mBAAA,CAAC,CAACA;AAExCC,MAAAA,iBAAkBC,CAAkB,kBAAA,CAAC,CAACA;"}

package/dist/esm/components/TagsInput/TagsInput.js

@@ -0,0 +1,294 @@
+import { jsxs, jsx, Fragment } from "@emotion/react/jsx-runtime";
+import { useState, useRef, useMemo, useCallback, useEffect } from "react";
+import clsx from "clsx";
+import isNil from "lodash/isNil";
+import { StyledFormElement, StyledLabelContainer, StyledLabel, StyledDescription, StyledCharCounter, StyledTagsList, StyledListItem, StyledTag, StyledInputListItem, StyledInput, StyledSuggestions, StyledError } from "./TagsInput.styles.js";
+import validationState from "../Forms/FormElement/validationStates.js";
+import { DEFAULT_ERROR_MESSAGES } from "../BaseInput/validations.js";
+import tagsInputClasses from "./tagsInputClasses.js";
+import useUniqueId from "../../hooks/useUniqueId.js";
+import useIsMounted from "../../hooks/useIsMounted.js";
+import { useControlled } from "../../hooks/useControlled.js";
+import { setId } from "../../utils/setId.js";
+import { isKeypress } from "../../utils/keyboardUtils/keyCheck.js";
+import { keyboardCodes } from "../../utils/keyboardUtils/keyboardCodes.js";
+const HvTagsInput = ({
+  classes,
+  className,
+  id,
+  name,
+  value: valueProp,
+  defaultValue = [],
+  readOnly = false,
+  disabled = false,
+  required = false,
+  label: textAreaLabel,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  description,
+  "aria-describedby": ariaDescribedBy,
+  onChange,
+  onAdd,
+  onDelete,
+  onBlur,
+  onFocus,
+  placeholder,
+  hideCounter = false,
+  middleCountLabel = "/",
+  maxTagsQuantity,
+  autoFocus = false,
+  resizable = true,
+  inputProps = {},
+  countCharProps = {},
+  multiline = false,
+  status,
+  statusMessage,
+  validationMessages,
+  commitTagOn = ["Enter"],
+  commitOnBlur = false,
+  suggestionListCallback,
+  ...others
+}) => {
+  var _a;
+  const elementId = useUniqueId(id, "hvTagsInput");
+  const hasLabel = textAreaLabel != null;
+  const hasDescription = description != null;
+  const [value, setValue] = useControlled(valueProp, defaultValue);
+  const [validationState$1, setValidationState] = useControlled(status, validationState.standBy);
+  const [validationMessage, setValidationMessage] = useControlled(statusMessage, "");
+  const [tagInput, setTagInput] = useState("");
+  const [tagCursorPos, setTagCursorPos] = useState(value.length);
+  const [stateValid, setStateValid] = useState(true);
+  const inputRef = useRef();
+  const containerRef = useRef();
+  const skipReset = useRef(false);
+  const blurTimeout = useRef();
+  const materialInputRef = useRef(null);
+  const isTagSelected = tagCursorPos >= 0 && tagCursorPos < value.length;
+  const hasCounter = maxTagsQuantity != null && !hideCounter;
+  const [suggestionValues, setSuggestionValues] = useState(null);
+  const isStateInvalid = useMemo(() => {
+    return hasCounter && value.length > maxTagsQuantity;
+  }, [hasCounter, maxTagsQuantity, value.length]);
+  const canShowSuggestions = suggestionListCallback != null;
+  const hasSuggestions = !!suggestionValues;
+  const errorMessages = useMemo(() => ({
+    ...DEFAULT_ERROR_MESSAGES,
+    ...validationMessages
+  }), [validationMessages == null ? void 0 : validationMessages.error, validationMessages == null ? void 0 : validationMessages.requiredError, validationMessages == null ? void 0 : validationMessages.minCharError, validationMessages == null ? void 0 : validationMessages.maxCharError]);
+  const performValidation = useCallback((currValue) => {
+    if (maxTagsQuantity !== null && maxTagsQuantity !== void 0 && currValue.length > maxTagsQuantity) {
+      setValidationState(validationState.invalid);
+      setValidationMessage(errorMessages.maxCharError);
+      setStateValid(false);
+    } else {
+      setValidationState(validationState.valid);
+      setValidationMessage("");
+      setStateValid(true);
+    }
+  }, [errorMessages.maxCharError, maxTagsQuantity, setValidationMessage, setValidationState]);
+  const deleteTag = useCallback((tagPos, event, end) => {
+    var _a2;
+    const newTagsArr = [...value.slice(0, tagPos), ...value.slice(tagPos + 1)];
+    setValue(newTagsArr);
+    setTagCursorPos(end ? newTagsArr.length : tagCursorPos > 0 ? tagCursorPos - 1 : 0);
+    (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+    performValidation(newTagsArr);
+    onDelete == null ? void 0 : onDelete(event, value[tagPos], tagPos);
+    onChange == null ? void 0 : onChange(event, newTagsArr);
+    skipReset.current = true;
+  }, [onChange, onDelete, performValidation, setValue, tagCursorPos, value]);
+  const addTag = useCallback((event, tag) => {
+    event.preventDefault();
+    if (tag !== "") {
+      const newTag = {
+        label: tag,
+        type: "semantic"
+      };
+      const newTagsArr = [...value, newTag];
+      setValue(newTagsArr);
+      performValidation(newTagsArr);
+      onAdd == null ? void 0 : onAdd(event, newTag, newTagsArr.length - 1);
+      onChange == null ? void 0 : onChange(event, newTagsArr);
+    }
+  }, [onAdd, onChange, performValidation, setValue, value]);
+  const canShowError = status !== void 0 && status === "invalid" && statusMessage !== void 0 || !stateValid;
+  useEffect(() => {
+    var _a2;
+    if (!multiline) {
+      const element = (_a2 = containerRef == null ? void 0 : containerRef.current) == null ? void 0 : _a2.children[tagCursorPos];
+      setTimeout(() => {
+        const container = containerRef.current;
+        if (isNil(container))
+          return;
+        container.scrollLeft = element ? element.offsetLeft - container.getBoundingClientRect().width / 2 + element.getBoundingClientRect().width / 2 : 0;
+      }, 50);
+      element == null ? void 0 : element.focus();
+    }
+  }, [multiline, tagCursorPos]);
+  useEffect(() => {
+    if (!skipReset.current) {
+      setTagInput("");
+      setTagCursorPos(value.length);
+    }
+    skipReset.current = false;
+  }, [value]);
+  const isMounted = useIsMounted();
+  const focusInput = () => {
+    materialInputRef.current.focus();
+  };
+  const getSuggestions = useCallback((li) => {
+    var _a2;
+    const listEl = document.getElementById(setId(elementId, "suggestions-list") || "");
+    return li != null ? (_a2 = listEl == null ? void 0 : listEl.getElementsByTagName("li")) == null ? void 0 : _a2[li] : listEl;
+  }, [elementId]);
+  const suggestionClearHandler = useCallback(() => {
+    if (isMounted.current) {
+      setSuggestionValues(null);
+    }
+  }, [isMounted]);
+  const suggestionHandler = useCallback((val) => {
+    var _a2;
+    const suggestionsArray = suggestionListCallback == null ? void 0 : suggestionListCallback(val);
+    if ((_a2 = suggestionsArray == null ? void 0 : suggestionsArray[0]) == null ? void 0 : _a2.label) {
+      setSuggestionValues(suggestionsArray);
+    } else {
+      suggestionClearHandler();
+    }
+  }, [suggestionClearHandler, suggestionListCallback]);
+  const suggestionSelectedHandler = (event, item) => {
+    addTag(event, item.value || item.label);
+    setTagInput(item.value || item.label);
+    focusInput();
+    suggestionClearHandler();
+  };
+  const onSuggestionKeyDown = (event) => {
+    if (isKeypress(event, keyboardCodes.Esc)) {
+      suggestionClearHandler();
+      focusInput();
+    } else if (isKeypress(event, keyboardCodes.Tab)) {
+      suggestionClearHandler();
+    }
+  };
+  const onChangeHandler = useCallback((_, input) => {
+    setTagInput(input);
+    if (canShowSuggestions) {
+      suggestionHandler(input);
+    }
+  }, [canShowSuggestions, suggestionHandler]);
+  const onInputKeyDownHandler = useCallback((event) => {
+    if (!canShowSuggestions && commitTagOn.includes(event.code)) {
+      addTag(event, tagInput);
+    }
+  }, [addTag, canShowSuggestions, commitTagOn, tagInput]);
+  const onKeyDownHandler = useCallback((event) => {
+    var _a2;
+    if (tagInput === "") {
+      switch (event.code) {
+        case "ArrowLeft":
+          setTagCursorPos(tagCursorPos > 0 ? tagCursorPos - 1 : 0);
+          break;
+        case "ArrowRight":
+          setTagCursorPos(tagCursorPos < value.length ? tagCursorPos + 1 : value.length);
+          break;
+        case "Backspace":
+          if (isTagSelected) {
+            deleteTag(tagCursorPos, event, false);
+          } else {
+            setTagCursorPos(value.length - 1);
+          }
+          break;
+        case "Delete":
+          if (isTagSelected) {
+            deleteTag(tagCursorPos, event, false);
+          }
+          break;
+      }
+    } else {
+      switch (event.code) {
+        case "ArrowDown":
+          (_a2 = getSuggestions(0)) == null ? void 0 : _a2.focus();
+          break;
+      }
+    }
+  }, [deleteTag, getSuggestions, isTagSelected, tagCursorPos, tagInput, value.length]);
+  const onDeleteTagHandler = useCallback((event, i) => {
+    deleteTag(i, event, true);
+    setValidationState(validationState.standBy);
+  }, [deleteTag, setValidationState]);
+  const onContainerClickHandler = useCallback(() => {
+    var _a2;
+    (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+    clearTimeout(blurTimeout.current);
+    setTagCursorPos(value.length);
+  }, [value.length]);
+  const onBlurHandler = (evt) => {
+    blurTimeout.current = setTimeout(() => {
+      if (commitOnBlur) {
+        addTag(evt, tagInput);
+      }
+      onBlur == null ? void 0 : onBlur(evt, tagInput);
+    }, 250);
+  };
+  const onFocusHandler = (evt) => {
+    clearTimeout(blurTimeout.current);
+    onFocus == null ? void 0 : onFocus(evt, tagInput);
+  };
+  return /* @__PURE__ */ jsxs(StyledFormElement, { id, name, disabled, readOnly, status: validationState$1, required, onBlur: onBlurHandler, onFocus: onFocusHandler, className: clsx(tagsInputClasses.root, classes == null ? void 0 : classes.root, className, disabled && clsx(tagsInputClasses.disabled, classes == null ? void 0 : classes.disabled)), children: [
+    (hasLabel || hasDescription) && /* @__PURE__ */ jsxs(StyledLabelContainer, { className: clsx(tagsInputClasses.labelContainer, classes == null ? void 0 : classes.labelContainer), children: [
+      hasLabel && /* @__PURE__ */ jsx(StyledLabel, { className: clsx(tagsInputClasses.label, classes == null ? void 0 : classes.label), id: setId(id, "label"), htmlFor: setId(elementId, "input"), label: textAreaLabel }),
+      hasDescription && /* @__PURE__ */ jsx(StyledDescription, { className: clsx(tagsInputClasses.description, classes == null ? void 0 : classes.description), id: setId(elementId, "description"), children: description })
+    ] }),
+    hasCounter && /* @__PURE__ */ jsx(StyledCharCounter, { id: setId(elementId, "charCounter"), className: clsx(tagsInputClasses.characterCounter, classes == null ? void 0 : classes.characterCounter), separator: middleCountLabel, currentCharQuantity: value.length, maxCharQuantity: maxTagsQuantity, ...countCharProps }),
+    /* @__PURE__ */ jsxs(StyledTagsList, { className: clsx(tagsInputClasses.tagsList, classes == null ? void 0 : classes.tagsList, canShowError && clsx(tagsInputClasses.error, classes == null ? void 0 : classes.error), resizable && multiline && clsx(tagsInputClasses.resizable, classes == null ? void 0 : classes.resizable), isStateInvalid && clsx(tagsInputClasses.invalid, classes == null ? void 0 : classes.invalid), !multiline && clsx(tagsInputClasses.singleLine, classes == null ? void 0 : classes.singleLine)), $disabled: disabled, $singleLine: !multiline, $error: canShowError, $resizable: resizable && multiline, $invalid: isStateInvalid, $readOnly: readOnly, onKeyDown: onKeyDownHandler, onClick: onContainerClickHandler, ref: containerRef, children: [
+      value && value.map((t, i) => {
+        const tag = typeof t === "string" ? {
+          label: t,
+          type: "semantic"
+        } : t;
+        const {
+          label,
+          type,
+          ...otherProps
+        } = tag;
+        return /* @__PURE__ */ jsx(StyledListItem, { tabIndex: -1, className: clsx(!multiline && clsx(tagsInputClasses.singleLine, classes == null ? void 0 : classes.singleLine)), classes: {
+          gutters: clsx(tagsInputClasses.listItemGutters, classes == null ? void 0 : classes.listItemGutters),
+          root: clsx(tagsInputClasses.listItemRoot, classes == null ? void 0 : classes.listItemRoot)
+        }, id: `tag-${i}`, $singleLine: !multiline, children: /* @__PURE__ */ jsx(StyledTag, { label, className: clsx(i === tagCursorPos && clsx(tagsInputClasses.tagSelected, classes == null ? void 0 : classes.tagSelected)), classes: {
+          chipRoot: clsx(tagsInputClasses.chipRoot, classes == null ? void 0 : classes.chipRoot)
+        }, type, ...!(readOnly || disabled || type === "categorical") && {
+          onDelete: (event) => onDeleteTagHandler(event, i)
+        }, deleteButtonProps: {
+          tabIndex: -1
+        }, $selected: i === tagCursorPos, ...otherProps }) }, `${tag.label}-${i}`);
+      }),
+      !(disabled || readOnly) && /* @__PURE__ */ jsx(StyledInputListItem, { className: clsx(!multiline && clsx(tagsInputClasses.singleLine, classes == null ? void 0 : classes.singleLine, value.length === 0 && clsx(tagsInputClasses.tagInputRootEmpty, classes == null ? void 0 : classes.tagInputRootEmpty))), classes: {
+        root: clsx(tagsInputClasses.tagInputContainerRoot, classes == null ? void 0 : classes.tagInputContainerRoot),
+        gutters: clsx(tagsInputClasses.listItemGutters, classes == null ? void 0 : classes.listItemGutters)
+      }, id: `tag-${value.length}`, $singleLine: !multiline, $isTagSelected: !!isTagSelected, children: /* @__PURE__ */ jsx(StyledInput, { value: tagInput, disableClear: true, onChange: onChangeHandler, onKeyDown: onInputKeyDownHandler, placeholder: value.length === 0 ? placeholder : "", autoFocus, className: clsx(!multiline && clsx(tagsInputClasses.singleLine, classes == null ? void 0 : classes.singleLine)), classes: {
+        root: clsx(tagsInputClasses.tagInputRoot, classes == null ? void 0 : classes.tagInputRoot),
+        input: clsx(tagsInputClasses.input, classes == null ? void 0 : classes.input),
+        inputBorderContainer: clsx(tagsInputClasses.tagInputBorderContainer, classes == null ? void 0 : classes.tagInputBorderContainer),
+        inputRootFocused: clsx(tagsInputClasses.tagInputRootFocused, classes == null ? void 0 : classes.tagInputRootFocused)
+      }, disabled, readOnly: readOnly || isTagSelected, inputProps: {
+        ref: materialInputRef,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-describedby": ariaDescribedBy != null ? ariaDescribedBy : description && setId(elementId, "description") || void 0,
+        ...inputProps
+      }, inputRef, $singleLine: !multiline, ...others }) })
+    ] }),
+    canShowSuggestions && /* @__PURE__ */ jsxs(Fragment, { children: [
+      hasSuggestions && /* @__PURE__ */ jsx("div", { role: "presentation", className: clsx(tagsInputClasses.inputExtension, classes == null ? void 0 : classes.inputExtension) }),
+      /* @__PURE__ */ jsx(StyledSuggestions, { id: setId(elementId, "suggestions"), classes: {
+        root: clsx(tagsInputClasses.suggestionsContainer, classes == null ? void 0 : classes.suggestionsContainer),
+        list: clsx(tagsInputClasses.suggestionList, classes == null ? void 0 : classes.suggestionList)
+      }, expanded: hasSuggestions, anchorEl: (_a = containerRef == null ? void 0 : containerRef.current) == null ? void 0 : _a.parentElement, onClose: suggestionClearHandler, onKeyDown: onSuggestionKeyDown, onSuggestionSelected: suggestionSelectedHandler, suggestionValues })
+    ] }),
+    canShowError && /* @__PURE__ */ jsx(StyledError, { id: setId(elementId, "error"), disableBorder: true, className: clsx(tagsInputClasses.error, classes == null ? void 0 : classes.error), children: validationMessage })
+  ] });
+};
+export {
+  HvTagsInput
+};
+//# sourceMappingURL=TagsInput.js.map

package/dist/esm/components/TagsInput/TagsInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagsInput.js","sources":["../../../../src/components/TagsInput/TagsInput.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport clsx from \"clsx\";\nimport isNil from \"lodash/isNil\";\nimport { HvValidationMessages } from \"types/forms\";\nimport { HvBaseProps } from \"../../types\";\nimport {\n  StyledCharCounter,\n  StyledDescription,\n  StyledError,\n  StyledFormElement,\n  StyledLabel,\n  StyledLabelContainer,\n  StyledListItem,\n  StyledTag,\n  StyledTagsList,\n  StyledInputListItem,\n  StyledInput,\n  StyledSuggestions,\n} from \"./TagsInput.styles\";\nimport validationStates from \"../Forms/FormElement/validationStates\";\nimport { DEFAULT_ERROR_MESSAGES } from \"../BaseInput/validations\";\nimport { useControlled, useIsMounted, useUniqueId } from \"hooks\";\nimport { isKeypress, keyboardCodes, setId } from \"utils\";\nimport { HvTagProps } from \"components\";\nimport tagsInputClasses, { HvTagsInputClasses } from \"./tagsInputClasses\";\nimport { HvCharCounterProps, HvFormStatus } from \"../Forms\";\nimport { InputBaseComponentProps as MuiInputBaseComponentProps } from \"@mui/material\";\n\nexport type HvTagsInputProps = HvBaseProps<\n  HTMLElement,\n  { onChange; onBlur; onFocus; onKeyDown; color }\n> & {\n  /** The form element name. */\n  name?: string;\n  /** The value of the form element. */\n  value?: string[] | HvTagProps[];\n  /** When uncontrolled, defines the initial input value. */\n  defaultValue?: string[] | HvTagProps[];\n  /**\n   * The label of the form element.\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be inputted via inputProps.\n   */\n  label?: React.ReactNode;\n  /** Provide additional descriptive text for the form element. */\n  description?: React.ReactNode;\n  /** Indicates that the form element is disabled. */\n  disabled?: boolean;\n  /** Indicates that the form element is not editable. */\n  readOnly?: boolean;\n  /** Indicates that the form element is required. */\n  required?: boolean;\n  /** The function that will be executed onChange. */\n  onChange?: (\n    event:\n      | React.ChangeEvent<HTMLInputElement>\n      | React.KeyboardEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLButtonElement>\n      | React.MouseEvent<HTMLElement, MouseEvent>\n      | React.KeyboardEventHandler<HTMLElement>,\n    value: HvTagProps[]\n  ) => void;\n  /** The function that will be executed when the element is focused. */\n  onFocus?: (event: React.FocusEvent<HTMLInputElement>, value: string) => void;\n  /** The function that will be executed when the element is blurred. */\n  onBlur?: (event: React.FocusEvent<HTMLInputElement>, value: string) => void;\n  /** The function that will be executed when a tag is deleted. */\n  onDelete?: (\n    event:\n      | React.ChangeEvent<HTMLInputElement>\n      | React.KeyboardEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLButtonElement>\n      | React.MouseEvent<HTMLElement, MouseEvent>\n      | React.KeyboardEventHandler<HTMLElement>,\n    value: HvTagProps,\n    index: number\n  ) => void;\n  /** The function that will be executed when a tag is added. */\n  onAdd?: (\n    event:\n      | React.ChangeEvent<HTMLInputElement>\n      | React.KeyboardEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLButtonElement>\n      | React.MouseEvent<HTMLElement, MouseEvent>\n      | React.KeyboardEventHandler<HTMLElement>,\n    value: HvTagProps,\n    index: number\n  ) => void;\n  /** The placeholder value of the input. */\n  placeholder?: string;\n  /** If `true` the character counter isn't shown even if maxTagsQuantity is set. */\n  hideCounter?: boolean;\n  /** Text between the current char counter and max value. */\n  middleCountLabel?: string;\n  /** The maximum allowed length of the characters, if this value is null no check will be performed. */\n  maxTagsQuantity?: number;\n  /** Attributes applied to the input element. */\n  inputProps?: MuiInputBaseComponentProps;\n  /** If `true` it should autofocus. */\n  autoFocus?: boolean;\n  /** If `true` the component is resizable. */\n  resizable?: boolean;\n  /** Props passed to the HvCharCount component. */\n  countCharProps?: Partial<HvCharCounterProps>;\n  /** If `true` the component is in multiline mode. */\n  multiline?: boolean;\n  /** The status of the form element. */\n  status?: HvFormStatus;\n  /** The error message to show when `status` is \"invalid\". */\n  statusMessage?: React.ReactNode;\n  /** An Object containing the various texts associated with the input. */\n  validationMessages?: HvValidationMessages;\n  /** An array of strings that represent the character used to input a tag. This character is the string representation of the event.code from the input event. */\n  commitTagOn?: string[];\n  /** If `true` the tag will be committed when the blur event occurs. */\n  commitOnBlur?: boolean;\n  /** The function that will be executed to received an array of objects that has a label and id to create list of suggestion */\n  suggestionListCallback?: Function;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTagsInputClasses;\n};\n\n/**\n * A tags input is a single or multiline control that allows the input of tags.\n */\nexport const HvTagsInput = ({\n  classes,\n  className,\n  id,\n  name,\n  value: valueProp,\n  defaultValue = [],\n  readOnly = false,\n  disabled = false,\n  required = false,\n  label: textAreaLabel,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  description,\n  \"aria-describedby\": ariaDescribedBy,\n  onChange,\n  onAdd,\n  onDelete,\n  onBlur,\n  onFocus,\n  placeholder,\n  hideCounter = false,\n  middleCountLabel = \"/\",\n  maxTagsQuantity,\n  autoFocus = false,\n  resizable = true,\n  inputProps = {},\n  countCharProps = {},\n  multiline = false,\n  status,\n  statusMessage,\n  validationMessages,\n  commitTagOn = [\"Enter\"],\n  commitOnBlur = false,\n  suggestionListCallback,\n  ...others\n}: HvTagsInputProps) => {\n  const elementId = useUniqueId(id, \"hvTagsInput\");\n\n  const hasLabel = textAreaLabel != null;\n  const hasDescription = description != null;\n\n  const [value, setValue] = useControlled(valueProp, defaultValue);\n\n  const [validationState, setValidationState] = useControlled(\n    status,\n    validationStates.standBy\n  );\n  const [validationMessage, setValidationMessage] = useControlled(\n    statusMessage,\n    \"\"\n  );\n\n  const [tagInput, setTagInput] = useState(\"\");\n  const [tagCursorPos, setTagCursorPos] = useState(value.length);\n  const [stateValid, setStateValid] = useState(true);\n\n  const inputRef = useRef<any>();\n  const containerRef = useRef<any>();\n  const skipReset = useRef(false);\n  const blurTimeout = useRef<any>();\n  const materialInputRef = useRef<any>(null);\n\n  const isTagSelected = tagCursorPos >= 0 && tagCursorPos < value.length;\n  const hasCounter = maxTagsQuantity != null && !hideCounter;\n\n  // suggestions related state\n  const [suggestionValues, setSuggestionValues] = useState(null);\n\n  const isStateInvalid = useMemo(() => {\n    return hasCounter && value.length > maxTagsQuantity;\n  }, [hasCounter, maxTagsQuantity, value.length]);\n\n  const canShowSuggestions = suggestionListCallback != null;\n  const hasSuggestions = !!suggestionValues;\n\n  const errorMessages = useMemo(\n    () => ({ ...DEFAULT_ERROR_MESSAGES, ...validationMessages }),\n    [\n      validationMessages?.error,\n      validationMessages?.requiredError,\n      validationMessages?.minCharError,\n      validationMessages?.maxCharError,\n    ]\n  );\n\n  const performValidation = useCallback(\n    (currValue) => {\n      if (\n        maxTagsQuantity !== null &&\n        maxTagsQuantity !== undefined &&\n        currValue.length > maxTagsQuantity\n      ) {\n        setValidationState(validationStates.invalid);\n        setValidationMessage(errorMessages.maxCharError);\n        setStateValid(false);\n      } else {\n        setValidationState(validationStates.valid);\n        setValidationMessage(\"\");\n        setStateValid(true);\n      }\n    },\n    [\n      errorMessages.maxCharError,\n      maxTagsQuantity,\n      setValidationMessage,\n      setValidationState,\n    ]\n  );\n\n  /**\n   * Deletes a Tag from the array of tags and sets the new position for the tag cursor.\n   * Also executes the user provided onDelete and onChange events.\n   *\n   * @param {number}  tagPos - the position at which to remove the tag\n   * @param {Event}   event  - the event associated with the delete\n   * @param {boolean} end    - whether or not to set the cursor at the end of the array\n   */\n  const deleteTag = useCallback(\n    (tagPos, event, end) => {\n      const newTagsArr = [\n        ...value.slice(0, tagPos),\n        ...value.slice(tagPos + 1),\n      ];\n      setValue(newTagsArr);\n      setTagCursorPos(\n        end ? newTagsArr.length : tagCursorPos > 0 ? tagCursorPos - 1 : 0\n      );\n      inputRef.current?.focus();\n      performValidation(newTagsArr);\n      onDelete?.(event, value[tagPos], tagPos);\n      onChange?.(event, newTagsArr);\n      skipReset.current = true;\n    },\n    [onChange, onDelete, performValidation, setValue, tagCursorPos, value]\n  );\n\n  /**\n   * Adds a Tag to the array of tags.\n   * Also executes the user provided onAdd and onDelete events.\n   *\n   * @param {Event}   event  - whatever event triggered adding a tag\n   * @param {string}  tag    - the string for the tag\n   */\n  const addTag = useCallback(\n    (event, tag) => {\n      event.preventDefault();\n      if (tag !== \"\") {\n        const newTag: HvTagProps = { label: tag, type: \"semantic\" };\n        const newTagsArr = [...value, newTag];\n        setValue(newTagsArr);\n        performValidation(newTagsArr);\n        onAdd?.(event, newTag, newTagsArr.length - 1);\n        onChange?.(event, newTagsArr);\n      }\n    },\n    [onAdd, onChange, performValidation, setValue, value]\n  );\n\n  const canShowError =\n    (status !== undefined &&\n      status === \"invalid\" &&\n      statusMessage !== undefined) ||\n    !stateValid;\n\n  useEffect(() => {\n    if (!multiline) {\n      const element = containerRef?.current?.children[tagCursorPos];\n      // this setTimeout is a workaround for Firefox not properly dealing\n      // with setting the scrollLeft value.\n      setTimeout(() => {\n        const container = containerRef.current;\n        if (isNil(container)) return;\n        container.scrollLeft = element\n          ? element.offsetLeft -\n            container.getBoundingClientRect().width / 2 +\n            element.getBoundingClientRect().width / 2\n          : 0;\n      }, 50);\n\n      element?.focus();\n    }\n  }, [multiline, tagCursorPos]);\n\n  useEffect(() => {\n    if (!skipReset.current) {\n      setTagInput(\"\");\n      setTagCursorPos(value.length);\n    }\n    skipReset.current = false;\n  }, [value]);\n\n  const isMounted = useIsMounted();\n\n  /**\n   * Looks for the node that represent the input inside the material tree and focus it.\n   */\n  const focusInput = () => {\n    materialInputRef.current.focus();\n  };\n\n  const getSuggestions = useCallback(\n    (li) => {\n      // TODO Replace with ref\n      const listEl = document.getElementById(\n        setId(elementId, \"suggestions-list\") || \"\"\n      );\n      return li != null ? listEl?.getElementsByTagName(\"li\")?.[li] : listEl;\n    },\n    [elementId]\n  );\n\n  /**\n   * Clears the suggestion array.\n   */\n  const suggestionClearHandler = useCallback(() => {\n    if (isMounted.current) {\n      setSuggestionValues(null);\n    }\n  }, [isMounted]);\n\n  /**\n   * Fills of the suggestion array.\n   */\n  const suggestionHandler = useCallback(\n    (val) => {\n      const suggestionsArray = suggestionListCallback?.(val);\n      if (suggestionsArray?.[0]?.label) {\n        setSuggestionValues(suggestionsArray);\n      } else {\n        suggestionClearHandler();\n      }\n    },\n    [suggestionClearHandler, suggestionListCallback]\n  );\n\n  /**\n   * Executes the user callback adds the selection to the state and clears the suggestions.\n   */\n  const suggestionSelectedHandler = (event, item) => {\n    addTag(event, item.value || item.label);\n\n    // set the input value (only when value is uncontrolled)\n    setTagInput(item.value || item.label);\n\n    focusInput();\n    suggestionClearHandler();\n  };\n\n  /**\n   * Handler for the `onKeyDown` event on the suggestions component\n   */\n  const onSuggestionKeyDown = (event) => {\n    if (isKeypress(event, keyboardCodes.Esc)) {\n      suggestionClearHandler();\n      focusInput();\n    } else if (isKeypress(event, keyboardCodes.Tab)) {\n      suggestionClearHandler();\n    }\n  };\n\n  /**\n   * Handler for the `onChange` event on the tag input\n   */\n  const onChangeHandler = useCallback(\n    (_, input) => {\n      setTagInput(input);\n\n      if (canShowSuggestions) {\n        // an edge case might be a controlled input whose onChange callback\n        // doesn't change the value (or sets another): the suggestionListCallback\n        // callback will still receive the original rejected value.\n        // a refactor is needed so the suggestionListCallback might be called only\n        // when the input is uncontrolled, providing a way to externally control\n        // the suggestion values.\n        suggestionHandler(input);\n      }\n    },\n    [canShowSuggestions, suggestionHandler]\n  );\n\n  /**\n   * Handler for the `onKeyDown` event on the form element\n   */\n  const onInputKeyDownHandler = useCallback(\n    (event) => {\n      if (!canShowSuggestions && commitTagOn.includes(event.code)) {\n        addTag(event, tagInput);\n      }\n    },\n    [addTag, canShowSuggestions, commitTagOn, tagInput]\n  );\n\n  /**\n   * Handler for the `onKeyDown` event on the list container.\n   */\n  const onKeyDownHandler = useCallback(\n    (event) => {\n      if (tagInput === \"\") {\n        switch (event.code) {\n          case \"ArrowLeft\":\n            setTagCursorPos(tagCursorPos > 0 ? tagCursorPos - 1 : 0);\n            break;\n          case \"ArrowRight\":\n            setTagCursorPos(\n              tagCursorPos < value.length ? tagCursorPos + 1 : value.length\n            );\n            break;\n          case \"Backspace\":\n            if (isTagSelected) {\n              deleteTag(tagCursorPos, event, false);\n            } else {\n              setTagCursorPos(value.length - 1);\n            }\n            break;\n          case \"Delete\":\n            if (isTagSelected) {\n              deleteTag(tagCursorPos, event, false);\n            }\n            break;\n          default:\n            break;\n        }\n      } else {\n        switch (event.code) {\n          case \"ArrowDown\":\n            getSuggestions(0)?.focus();\n            break;\n          default:\n            break;\n        }\n      }\n    },\n    [\n      deleteTag,\n      getSuggestions,\n      isTagSelected,\n      tagCursorPos,\n      tagInput,\n      value.length,\n    ]\n  );\n\n  /**\n   * Handler for the `onDelete` event on the tag component\n   */\n  const onDeleteTagHandler = useCallback(\n    (event, i) => {\n      deleteTag(i, event, true);\n      setValidationState(validationStates.standBy);\n    },\n    [deleteTag, setValidationState]\n  );\n\n  /**\n   * Handler for the `onClick` event on the list container\n   */\n  const onContainerClickHandler = useCallback(() => {\n    inputRef.current?.focus();\n    clearTimeout(blurTimeout.current);\n    setTagCursorPos(value.length);\n  }, [value.length]);\n\n  const onBlurHandler = (evt) => {\n    blurTimeout.current = setTimeout(() => {\n      if (commitOnBlur) {\n        addTag(evt, tagInput);\n      }\n      onBlur?.(evt, tagInput);\n    }, 250);\n  };\n\n  const onFocusHandler = (evt) => {\n    clearTimeout(blurTimeout.current);\n    onFocus?.(evt, tagInput);\n  };\n\n  return (\n    <StyledFormElement\n      id={id}\n      name={name}\n      disabled={disabled}\n      readOnly={readOnly}\n      status={validationState}\n      required={required}\n      onBlur={onBlurHandler}\n      onFocus={onFocusHandler}\n      className={clsx(\n        tagsInputClasses.root,\n        classes?.root,\n        className,\n        disabled && clsx(tagsInputClasses.disabled, classes?.disabled)\n      )}\n    >\n      {(hasLabel || hasDescription) && (\n        <StyledLabelContainer\n          className={clsx(\n            tagsInputClasses.labelContainer,\n            classes?.labelContainer\n          )}\n        >\n          {hasLabel && (\n            <StyledLabel\n              className={clsx(tagsInputClasses.label, classes?.label)}\n              id={setId(id, \"label\")}\n              htmlFor={setId(elementId, \"input\")}\n              label={textAreaLabel}\n            />\n          )}\n\n          {hasDescription && (\n            <StyledDescription\n              className={clsx(\n                tagsInputClasses.description,\n                classes?.description\n              )}\n              id={setId(elementId, \"description\")}\n            >\n              {description}\n            </StyledDescription>\n          )}\n        </StyledLabelContainer>\n      )}\n\n      {hasCounter && (\n        <StyledCharCounter\n          id={setId(elementId, \"charCounter\")}\n          className={clsx(\n            tagsInputClasses.characterCounter,\n            classes?.characterCounter\n          )}\n          separator={middleCountLabel}\n          currentCharQuantity={value.length}\n          maxCharQuantity={maxTagsQuantity}\n          {...countCharProps}\n        />\n      )}\n\n      <StyledTagsList\n        className={clsx(\n          tagsInputClasses.tagsList,\n          classes?.tagsList,\n          canShowError && clsx(tagsInputClasses.error, classes?.error),\n          resizable &&\n            multiline &&\n            clsx(tagsInputClasses.resizable, classes?.resizable),\n          isStateInvalid && clsx(tagsInputClasses.invalid, classes?.invalid),\n          !multiline && clsx(tagsInputClasses.singleLine, classes?.singleLine)\n        )}\n        $disabled={disabled}\n        $singleLine={!multiline}\n        $error={canShowError}\n        $resizable={resizable && multiline}\n        $invalid={isStateInvalid}\n        $readOnly={readOnly}\n        onKeyDown={onKeyDownHandler}\n        onClick={onContainerClickHandler}\n        ref={containerRef}\n      >\n        {value &&\n          value.map((t, i) => {\n            const tag =\n              typeof t === \"string\"\n                ? {\n                    label: t,\n                    type: \"semantic\",\n                  }\n                : t;\n            const { label, type, ...otherProps } = tag;\n            return (\n              <StyledListItem\n                key={`${tag.label}-${i}`}\n                tabIndex={-1}\n                className={clsx(\n                  !multiline &&\n                    clsx(tagsInputClasses.singleLine, classes?.singleLine)\n                )}\n                classes={{\n                  gutters: clsx(\n                    tagsInputClasses.listItemGutters,\n                    classes?.listItemGutters\n                  ),\n                  root: clsx(\n                    tagsInputClasses.listItemRoot,\n                    classes?.listItemRoot\n                  ),\n                }}\n                id={`tag-${i}`}\n                $singleLine={!multiline}\n              >\n                <StyledTag\n                  label={label}\n                  className={clsx(\n                    i === tagCursorPos &&\n                      clsx(tagsInputClasses.tagSelected, classes?.tagSelected)\n                  )}\n                  classes={{\n                    chipRoot: clsx(\n                      tagsInputClasses.chipRoot,\n                      classes?.chipRoot\n                    ),\n                  }}\n                  type={type}\n                  {...(!(readOnly || disabled || type === \"categorical\") && {\n                    onDelete: (event) => onDeleteTagHandler(event, i),\n                  })}\n                  deleteButtonProps={{\n                    tabIndex: -1,\n                  }}\n                  $selected={i === tagCursorPos}\n                  {...otherProps}\n                />\n              </StyledListItem>\n            );\n          })}\n        {!(disabled || readOnly) && (\n          <StyledInputListItem\n            className={clsx(\n              !multiline &&\n                clsx(\n                  tagsInputClasses.singleLine,\n                  classes?.singleLine,\n                  value.length === 0 &&\n                    clsx(\n                      tagsInputClasses.tagInputRootEmpty,\n                      classes?.tagInputRootEmpty\n                    )\n                )\n            )}\n            classes={{\n              root: clsx(\n                tagsInputClasses.tagInputContainerRoot,\n                classes?.tagInputContainerRoot\n              ),\n              gutters: clsx(\n                tagsInputClasses.listItemGutters,\n                classes?.listItemGutters\n              ),\n            }}\n            id={`tag-${value.length}`}\n            $singleLine={!multiline}\n            $isTagSelected={!!isTagSelected}\n          >\n            <StyledInput\n              value={tagInput}\n              disableClear\n              onChange={onChangeHandler}\n              onKeyDown={onInputKeyDownHandler}\n              placeholder={value.length === 0 ? placeholder : \"\"}\n              autoFocus={autoFocus}\n              className={clsx(\n                !multiline &&\n                  clsx(tagsInputClasses.singleLine, classes?.singleLine)\n              )}\n              classes={{\n                root: clsx(\n                  tagsInputClasses.tagInputRoot,\n                  classes?.tagInputRoot\n                ),\n                input: clsx(tagsInputClasses.input, classes?.input),\n                inputBorderContainer: clsx(\n                  tagsInputClasses.tagInputBorderContainer,\n                  classes?.tagInputBorderContainer\n                ),\n                inputRootFocused: clsx(\n                  tagsInputClasses.tagInputRootFocused,\n                  classes?.tagInputRootFocused\n                ),\n              }}\n              disabled={disabled}\n              readOnly={readOnly || isTagSelected}\n              inputProps={{\n                ref: materialInputRef,\n                \"aria-label\": ariaLabel,\n                \"aria-labelledby\": ariaLabelledBy,\n                \"aria-describedby\":\n                  ariaDescribedBy != null\n                    ? ariaDescribedBy\n                    : (description && setId(elementId, \"description\")) ||\n                      undefined,\n\n                ...inputProps,\n              }}\n              inputRef={inputRef}\n              $singleLine={!multiline}\n              {...others}\n            />\n          </StyledInputListItem>\n        )}\n      </StyledTagsList>\n      {canShowSuggestions && (\n        <>\n          {hasSuggestions && (\n            <div\n              role=\"presentation\"\n              className={clsx(\n                tagsInputClasses.inputExtension,\n                classes?.inputExtension\n              )}\n            />\n          )}\n          <StyledSuggestions\n            id={setId(elementId, \"suggestions\")}\n            classes={{\n              root: clsx(\n                tagsInputClasses.suggestionsContainer,\n                classes?.suggestionsContainer\n              ),\n              list: clsx(\n                tagsInputClasses.suggestionList,\n                classes?.suggestionList\n              ),\n            }}\n            expanded={hasSuggestions}\n            anchorEl={containerRef?.current?.parentElement}\n            onClose={suggestionClearHandler}\n            onKeyDown={onSuggestionKeyDown}\n            onSuggestionSelected={suggestionSelectedHandler}\n            suggestionValues={suggestionValues}\n          />\n        </>\n      )}\n      {canShowError && (\n        <StyledError\n          id={setId(elementId, \"error\")}\n          disableBorder\n          className={clsx(tagsInputClasses.error, classes?.error)}\n        >\n          {validationMessage}\n        </StyledError>\n      )}\n    </StyledFormElement>\n  );\n};\n"],"names":["HvTagsInput","classes","className","id","name","value","valueProp","defaultValue","readOnly","disabled","required","label","textAreaLabel","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","onChange","onAdd","onDelete","onBlur","onFocus","placeholder","hideCounter","middleCountLabel","maxTagsQuantity","autoFocus","resizable","inputProps","countCharProps","multiline","status","statusMessage","validationMessages","commitTagOn","commitOnBlur","suggestionListCallback","others","elementId","useUniqueId","hasLabel","hasDescription","setValue","useControlled","validationState","setValidationState","validationStates","standBy","validationMessage","setValidationMessage","tagInput","setTagInput","useState","tagCursorPos","setTagCursorPos","length","stateValid","setStateValid","inputRef","useRef","containerRef","skipReset","blurTimeout","materialInputRef","isTagSelected","hasCounter","suggestionValues","setSuggestionValues","isStateInvalid","useMemo","canShowSuggestions","hasSuggestions","errorMessages","DEFAULT_ERROR_MESSAGES","error","requiredError","minCharError","maxCharError","performValidation","useCallback","currValue","undefined","invalid","valid","deleteTag","tagPos","event","end","newTagsArr","slice","current","focus","addTag","tag","preventDefault","newTag","type","canShowError","useEffect","element","children","setTimeout","container","isNil","scrollLeft","offsetLeft","getBoundingClientRect","width","isMounted","useIsMounted","focusInput","getSuggestions","li","listEl","document","getElementById","setId","getElementsByTagName","suggestionClearHandler","suggestionHandler","val","suggestionsArray","suggestionSelectedHandler","item","onSuggestionKeyDown","isKeypress","keyboardCodes","Esc","Tab","onChangeHandler","_","input","onInputKeyDownHandler","includes","code","onKeyDownHandler","_a","onDeleteTagHandler","i","onContainerClickHandler","clearTimeout","onBlurHandler","evt","onFocusHandler","clsx","tagsInputClasses","root","labelContainer","characterCounter","tagsList","singleLine","map","t","otherProps","gutters","listItemGutters","listItemRoot","tagSelected","chipRoot","tabIndex","tagInputRootEmpty","tagInputContainerRoot","tagInputRoot","inputBorderContainer","tagInputBorderContainer","inputRootFocused","tagInputRootFocused","ref","inputExtension","suggestionsContainer","list","suggestionList","parentElement"],"mappings":"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"}