@hitachivantara/uikit-react-core 5.24.2 → 5.24.4

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

@@ -1,168 +1,122 @@
-import _styled from "@emotion/styled/base";
-import { forwardRef } from "react";
-import { CloseXS } from "@hitachivantara/uikit-react-icons";
 import { theme } from "@hitachivantara/uikit-styles";
-import Chip from "@mui/material/Chip";
 import { outlineStyles } from "../../utils/focusUtils.js";
+import { createClasses } from "../../utils/classes.js";
 import { hexToRgbA } from "../../utils/hexToRgbA.js";
-import { transientOptions } from "../../utils/transientOptions.js";
-import tagClasses from "./tagClasses.js";
-import { jsx } from "@emotion/react/jsx-runtime";
-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];
+const {
+  staticClasses,
+  useClasses
+} = createClasses("HvTag", {
+  root: {},
+  chipRoot: {
+    "&.MuiChip-root": {
+      height: 16,
+      borderRadius: 0,
+      maxWidth: 180,
+      fontFamily: theme.fontFamily.body,
+      "& $focusVisible": {
+        backgroundColor: hexToRgbA(theme.colors.base_light, 0.3)
+      },
+      "&$categorical": {
+        borderRadius: 8,
+        "&$clickable": {
+          cursor: "pointer"
+        },
+        "&:hover": {
+          borderRadius: 8
+        },
+        "& $label": {
+          color: theme.colors.secondary
+        },
+        "&:focus:not(:focus-visible)": {
+          outline: "0 !important",
+          boxShadow: "none !important"
         }
       }
-    }
-    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,
-  $baseLightColor
-}) => ({
-  "&.MuiChip-root": {
-    height: 16,
-    borderRadius: 0,
-    maxWidth: 180,
-    fontFamily: theme.fontFamily.body,
-    [`& .${tagClasses.focusVisible}`]: {
-      backgroundColor: hexToRgbA(theme.colors.base_light, 0.3)
     },
-    ...$type === "categorical" && {
-      backgroundColor: "red",
-      borderRadius: 8,
-      [`&.${tagClasses.clickable}`]: {
-        cursor: "pointer"
-      },
+    "& .MuiChip-label": {
+      paddingLeft: theme.space.xs,
+      paddingRight: theme.space.xs,
+      ...theme.typography.caption1,
+      color: theme.colors.base_dark,
+      "& p": {
+        color: theme.colors.base_dark
+      }
+    },
+    "& .MuiChip-deleteIcon": {
+      marginRight: 0,
+      width: 16,
+      height: 16,
+      minWidth: 16,
+      minHeight: 16,
+      padding: 0,
       "&:hover": {
-        borderRadius: 8
+        backgroundColor: hexToRgbA(theme.colors.base_light, 0.3)
       },
-      [`& .${tagClasses.label}`]: {
-        color: theme.colors.secondary
+      "&:focus": {
+        ...outlineStyles,
+        borderRadius: 0
       },
       "&:focus:not(:focus-visible)": {
         outline: "0 !important",
         boxShadow: "none !important"
       }
-    },
-    ...$disabled && {
-      backgroundColor: theme.colors.atmo3,
-      cursor: "not-allowed",
-      [`& .${tagClasses.label}`]: {
-        color: theme.colors.secondary_60
-      }
-    },
-    ...$categoricalFocus && {
-      "&:focus": {
-        ...outlineStyles
-      }
-    },
-    ...$categoricalDisabled && {
-      backgroundColor: theme.colors.atmo3,
-      cursor: "not-allowed",
-      [`& .${tagClasses.label}`]: {
-        color: theme.colors.secondary_60
-      },
-      "&:hover": {
-        backgroundColor: theme.colors.atmo3
-      },
-      "&:focus": {
-        outline: "none"
-      }
     }
   },
-  "& .MuiChip-label": {
-    paddingLeft: theme.space.xs,
-    paddingRight: theme.space.xs,
-    ...theme.typography.caption1,
-    color: theme.colors.base_dark,
-    "& p": {
-      color: theme.colors.base_dark
-    }
+  focusVisible: {},
+  button: {
+    background: "transparent"
   },
-  "& .MuiChip-deleteIcon": {
-    marginRight: 0,
+  label: {},
+  tagButton: {
     width: 16,
     height: 16,
     minWidth: 16,
     minHeight: 16,
     padding: 0,
+    margin: 0
+  },
+  deleteIcon: {},
+  disabledDeleteIcon: {
     "&:hover": {
-      backgroundColor: `${$baseLightColor}30`
+      backgroundColor: theme.colors.atmo3
     },
     "&:focus": {
-      ...outlineStyles,
-      borderRadius: 0
+      backgroundColor: theme.colors.atmo3,
+      outline: "none",
+      boxShadow: "none",
+      outlineOffset: 0
+    }
+  },
+  categorical: {},
+  clickable: {},
+  categoricalFocus: {
+    "&:focus": {
+      ...outlineStyles
+    }
+  },
+  disabled: {
+    backgroundColor: theme.colors.atmo3,
+    cursor: "not-allowed",
+    "& $label": {
+      color: theme.colors.secondary_60
+    }
+  },
+  categoricalDisabled: {
+    backgroundColor: theme.colors.atmo3,
+    cursor: "not-allowed",
+    "& $label": {
+      color: theme.colors.secondary_60
     },
-    "&:focus:not(:focus-visible)": {
-      outline: "0 !important",
-      boxShadow: "none !important"
+    "&:hover": {
+      backgroundColor: theme.colors.atmo3
     },
-    ...$disabled && {
-      "&:hover": {
-        backgroundColor: theme.colors.atmo3
-      },
-      "&:focus": {
-        backgroundColor: theme.colors.atmo3,
-        outline: "none",
-        boxShadow: "none",
-        outlineOffset: 0
-      }
+    "&:focus": {
+      outline: "none"
     }
   }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVGFnL1RhZy5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlCMEIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9UYWcvVGFnLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuaW1wb3J0IHsgQ1NTUHJvcGVydGllcywgZm9yd2FyZFJlZiB9IGZyb20gXCJyZWFjdFwiO1xuXG5pbXBvcnQgeyBDbG9zZVhTIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1yZWFjdC1pY29uc1wiO1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuXG5pbXBvcnQgQ2hpcCBmcm9tIFwiQG11aS9tYXRlcmlhbC9DaGlwXCI7XG5cbmltcG9ydCB7IEh2QnV0dG9uLCBIdkJ1dHRvblByb3BzIH0gZnJvbSBcIkBjb3JlL2NvbXBvbmVudHMvQnV0dG9uXCI7XG5pbXBvcnQgeyBvdXRsaW5lU3R5bGVzIH0gZnJvbSBcIkBjb3JlL3V0aWxzL2ZvY3VzVXRpbHNcIjtcbmltcG9ydCB7IGhleFRvUmdiQSB9IGZyb20gXCJAY29yZS91dGlscy9oZXhUb1JnYkFcIjtcbmltcG9ydCB7IHRyYW5zaWVudE9wdGlvbnMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvdHJhbnNpZW50T3B0aW9uc1wiO1xuaW1wb3J0IHsgUG9seW1vcnBoaWNSZWYgfSBmcm9tIFwiQGNvcmUvdHlwZXMvZ2VuZXJpY1wiO1xuXG5pbXBvcnQgdGFnQ2xhc3NlcyBmcm9tIFwiLi90YWdDbGFzc2VzXCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRDaGlwID0gc3R5bGVkKFxuICBDaGlwLFxuICB0cmFuc2llbnRPcHRpb25zXG4pKFxuICAoe1xuICAgICR0eXBlLFxuICAgICRkaXNhYmxlZCxcbiAgICAkY2F0ZWdvcmljYWxGb2N1cyxcbiAgICAkY2F0ZWdvcmljYWxEaXNhYmxlZCxcbiAgICAkYmFzZUxpZ2h0Q29sb3IsXG4gIH06IHtcbiAgICAkdHlwZTogc3RyaW5nO1xuICAgICRkaXNhYmxlZDogYm9vbGVhbjtcbiAgICAkY2F0ZWdvcmljYWxGb2N1czogYm9vbGVhbjtcbiAgICAkY2F0ZWdvcmljYWxEaXNhYmxlZDogYm9vbGVhbjtcbiAgICAkYmFzZUxpZ2h0Q29sb3I6IHN0cmluZztcbiAgfSkgPT4gKHtcbiAgICBcIiYuTXVpQ2hpcC1yb290XCI6IHtcbiAgICAgIGhlaWdodDogMTYsXG4gICAgICBib3JkZXJSYWRpdXM6IDAsXG4gICAgICBtYXhXaWR0aDogMTgwLFxuICAgICAgZm9udEZhbWlseTogdGhlbWUuZm9udEZhbWlseS5ib2R5LFxuXG4gICAgICBbYCYgLiR7dGFnQ2xhc3Nlcy5mb2N1c1Zpc2libGV9YF06IHtcbiAgICAgICAgYmFja2dyb3VuZENvbG9yOiBoZXhUb1JnYkEodGhlbWUuY29sb3JzLmJhc2VfbGlnaHQsIDAuMyksXG4gICAgICB9LFxuICAgICAgLi4uKCR0eXBlID09PSBcImNhdGVnb3JpY2FsXCIgJiYge1xuICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IFwicmVkXCIsXG4gICAgICAgIGJvcmRlclJhZGl1czogOCxcbiAgICAgICAgW2AmLiR7dGFnQ2xhc3Nlcy5jbGlja2FibGV9YF06IHtcbiAgICAgICAgICBjdXJzb3I6IFwicG9pbnRlclwiLFxuICAgICAgICB9LFxuICAgICAgICBcIiY6aG92ZXJcIjoge1xuICAgICAgICAgIGJvcmRlclJhZGl1czogOCxcbiAgICAgICAgfSxcbiAgICAgICAgW2AmIC4ke3RhZ0NsYXNzZXMubGFiZWx9YF06IHtcbiAgICAgICAgICBjb2xvcjogdGhlbWUuY29sb3JzLnNlY29uZGFyeSxcbiAgICAgICAgfSxcbiAgICAgICAgXCImOmZvY3VzOm5vdCg6Zm9jdXMtdmlzaWJsZSlcIjoge1xuICAgICAgICAgIG91dGxpbmU6IFwiMCAhaW1wb3J0YW50XCIsXG4gICAgICAgICAgYm94U2hhZG93OiBcIm5vbmUgIWltcG9ydGFudFwiLFxuICAgICAgICB9LFxuICAgICAgfSksXG4gICAgICAuLi4oJGRpc2FibGVkICYmIHtcbiAgICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuYXRtbzMsXG4gICAgICAgIGN1cnNvcjogXCJub3QtYWxsb3dlZFwiLFxuICAgICAgICBbYCYgLiR7dGFnQ2xhc3Nlcy5sYWJlbH1gXToge1xuICAgICAgICAgIGNvbG9yOiB0aGVtZS5jb2xvcnMuc2Vjb25kYXJ5XzYwLFxuICAgICAgICB9LFxuICAgICAgfSksXG4gICAgICAuLi4oJGNhdGVnb3JpY2FsRm9jdXMgJiYge1xuICAgICAgICBcIiY6Zm9jdXNcIjoge1xuICAgICAgICAgIC4uLm91dGxpbmVTdHlsZXMsXG4gICAgICAgIH0sXG4gICAgICB9KSxcbiAgICAgIC4uLigkY2F0ZWdvcmljYWxEaXNhYmxlZCAmJiB7XG4gICAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLmF0bW8zLFxuICAgICAgICBjdXJzb3I6IFwibm90LWFsbG93ZWRcIixcbiAgICAgICAgW2AmIC4ke3RhZ0NsYXNzZXMubGFiZWx9YF06IHtcbiAgICAgICAgICBjb2xvcjogdGhlbWUuY29sb3JzLnNlY29uZGFyeV82MCxcbiAgICAgICAgfSxcbiAgICAgICAgXCImOmhvdmVyXCI6IHtcbiAgICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5hdG1vMyxcbiAgICAgICAgfSxcbiAgICAgICAgXCImOmZvY3VzXCI6IHtcbiAgICAgICAgICBvdXRsaW5lOiBcIm5vbmVcIixcbiAgICAgICAgfSxcbiAgICAgIH0pLFxuICAgIH0sXG5cbiAgICBcIiYgLk11aUNoaXAtbGFiZWxcIjoge1xuICAgICAgcGFkZGluZ0xlZnQ6IHRoZW1lLnNwYWNlLnhzLFxuICAgICAgcGFkZGluZ1JpZ2h0OiB0aGVtZS5zcGFjZS54cyxcbiAgICAgIC4uLih0aGVtZS50eXBvZ3JhcGh5LmNhcHRpb24xIGFzIENTU1Byb3BlcnRpZXMpLFxuICAgICAgY29sb3I6IHRoZW1lLmNvbG9ycy5iYXNlX2RhcmssXG4gICAgICBcIiYgcFwiOiB7XG4gICAgICAgIGNvbG9yOiB0aGVtZS5jb2xvcnMuYmFzZV9kYXJrLFxuICAgICAgfSxcbiAgICB9LFxuXG4gICAgXCImIC5NdWlDaGlwLWRlbGV0ZUljb25cIjoge1xuICAgICAgbWFyZ2luUmlnaHQ6IDAsXG4gICAgICB3aWR0aDogMTYsXG4gICAgICBoZWlnaHQ6IDE2LFxuICAgICAgbWluV2lkdGg6IDE2LFxuICAgICAgbWluSGVpZ2h0OiAxNixcbiAgICAgIHBhZGRpbmc6IDAsXG4gICAgICBcIiY6aG92ZXJcIjoge1xuICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IGAkeyRiYXNlTGlnaHRDb2xvcn0zMGAsXG4gICAgICB9LFxuICAgICAgXCImOmZvY3VzXCI6IHtcbiAgICAgICAgLi4ub3V0bGluZVN0eWxlcyxcbiAgICAgICAgYm9yZGVyUmFkaXVzOiAwLFxuICAgICAgfSxcbiAgICAgIFwiJjpmb2N1czpub3QoOmZvY3VzLXZpc2libGUpXCI6IHtcbiAgICAgICAgb3V0bGluZTogXCIwICFpbXBvcnRhbnRcIixcbiAgICAgICAgYm94U2hhZG93OiBcIm5vbmUgIWltcG9ydGFudFwiLFxuICAgICAgfSxcbiAgICAgIC4uLigkZGlzYWJsZWQgJiYge1xuICAgICAgICBcIiY6aG92ZXJcIjoge1xuICAgICAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLmF0bW8zLFxuICAgICAgICB9LFxuICAgICAgICBcIiY6Zm9jdXNcIjoge1xuICAgICAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLmF0bW8zLFxuICAgICAgICAgIG91dGxpbmU6IFwibm9uZVwiLFxuICAgICAgICAgIGJveFNoYWRvdzogXCJub25lXCIsXG4gICAgICAgICAgb3V0bGluZU9mZnNldDogMCxcbiAgICAgICAgfSxcbiAgICAgIH0pLFxuICAgIH0sXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQnV0dG9uID0gc3R5bGVkKFxuICBmb3J3YXJkUmVmKChwcm9wczogSHZCdXR0b25Qcm9wcywgcmVmPzogUG9seW1vcnBoaWNSZWY8XCJidXR0b25cIj4pID0+IHtcbiAgICByZXR1cm4gPEh2QnV0dG9uIHsuLi5wcm9wc30gcmVmPXtyZWZ9IC8+O1xuICB9KVxuKSh7XG4gIFwiJiAuTXVpQnV0dG9uLXN0YXJ0SWNvblwiOiB7XG4gICAgd2lkdGg6IDE2LFxuICAgIGhlaWdodDogMTYsXG4gICAgbWluV2lkdGg6IDE2LFxuICAgIG1pbkhlaWdodDogMTYsXG4gICAgcGFkZGluZzogMCxcbiAgICBtYXJnaW46IDAsXG4gIH0sXG4gIFwiJiAuTXVpQnV0dG9uLXRleHRQcmltYXJ5XCI6IHtcbiAgICBiYWNrZ3JvdW5kOiBcInRyYW5zcGFyZW50XCIsXG4gIH0sXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENsb3NlWFMgPSBzdHlsZWQoXG4gIENsb3NlWFMsXG4gIHRyYW5zaWVudE9wdGlvbnNcbikoKHsgJGNvbG9yIH06IHsgJGNvbG9yOiBzdHJpbmcgfSkgPT4gKHtcbiAgXCImIHN2ZyAuY29sb3IwXCI6IHtcbiAgICBmaWxsOiB0aGVtZS5jb2xvcnNbJGNvbG9yXSxcbiAgfSxcbn0pKTtcbiJdfQ== */");
-const StyledButton = /* @__PURE__ */ _styled(forwardRef((props, ref) => {
-  return /* @__PURE__ */ jsx(HvButton, {
-    ...props,
-    ref
-  });
-}), 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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVGFnL1RhZy5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtJNEIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9UYWcvVGFnLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuaW1wb3J0IHsgQ1NTUHJvcGVydGllcywgZm9yd2FyZFJlZiB9IGZyb20gXCJyZWFjdFwiO1xuXG5pbXBvcnQgeyBDbG9zZVhTIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1yZWFjdC1pY29uc1wiO1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuXG5pbXBvcnQgQ2hpcCBmcm9tIFwiQG11aS9tYXRlcmlhbC9DaGlwXCI7XG5cbmltcG9ydCB7IEh2QnV0dG9uLCBIdkJ1dHRvblByb3BzIH0gZnJvbSBcIkBjb3JlL2NvbXBvbmVudHMvQnV0dG9uXCI7XG5pbXBvcnQgeyBvdXRsaW5lU3R5bGVzIH0gZnJvbSBcIkBjb3JlL3V0aWxzL2ZvY3VzVXRpbHNcIjtcbmltcG9ydCB7IGhleFRvUmdiQSB9IGZyb20gXCJAY29yZS91dGlscy9oZXhUb1JnYkFcIjtcbmltcG9ydCB7IHRyYW5zaWVudE9wdGlvbnMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvdHJhbnNpZW50T3B0aW9uc1wiO1xuaW1wb3J0IHsgUG9seW1vcnBoaWNSZWYgfSBmcm9tIFwiQGNvcmUvdHlwZXMvZ2VuZXJpY1wiO1xuXG5pbXBvcnQgdGFnQ2xhc3NlcyBmcm9tIFwiLi90YWdDbGFzc2VzXCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRDaGlwID0gc3R5bGVkKFxuICBDaGlwLFxuICB0cmFuc2llbnRPcHRpb25zXG4pKFxuICAoe1xuICAgICR0eXBlLFxuICAgICRkaXNhYmxlZCxcbiAgICAkY2F0ZWdvcmljYWxGb2N1cyxcbiAgICAkY2F0ZWdvcmljYWxEaXNhYmxlZCxcbiAgICAkYmFzZUxpZ2h0Q29sb3IsXG4gIH06IHtcbiAgICAkdHlwZTogc3RyaW5nO1xuICAgICRkaXNhYmxlZDogYm9vbGVhbjtcbiAgICAkY2F0ZWdvcmljYWxGb2N1czogYm9vbGVhbjtcbiAgICAkY2F0ZWdvcmljYWxEaXNhYmxlZDogYm9vbGVhbjtcbiAgICAkYmFzZUxpZ2h0Q29sb3I6IHN0cmluZztcbiAgfSkgPT4gKHtcbiAgICBcIiYuTXVpQ2hpcC1yb290XCI6IHtcbiAgICAgIGhlaWdodDogMTYsXG4gICAgICBib3JkZXJSYWRpdXM6IDAsXG4gICAgICBtYXhXaWR0aDogMTgwLFxuICAgICAgZm9udEZhbWlseTogdGhlbWUuZm9udEZhbWlseS5ib2R5LFxuXG4gICAgICBbYCYgLiR7dGFnQ2xhc3Nlcy5mb2N1c1Zpc2libGV9YF06IHtcbiAgICAgICAgYmFja2dyb3VuZENvbG9yOiBoZXhUb1JnYkEodGhlbWUuY29sb3JzLmJhc2VfbGlnaHQsIDAuMyksXG4gICAgICB9LFxuICAgICAgLi4uKCR0eXBlID09PSBcImNhdGVnb3JpY2FsXCIgJiYge1xuICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IFwicmVkXCIsXG4gICAgICAgIGJvcmRlclJhZGl1czogOCxcbiAgICAgICAgW2AmLiR7dGFnQ2xhc3Nlcy5jbGlja2FibGV9YF06IHtcbiAgICAgICAgICBjdXJzb3I6IFwicG9pbnRlclwiLFxuICAgICAgICB9LFxuICAgICAgICBcIiY6aG92ZXJcIjoge1xuICAgICAgICAgIGJvcmRlclJhZGl1czogOCxcbiAgICAgICAgfSxcbiAgICAgICAgW2AmIC4ke3RhZ0NsYXNzZXMubGFiZWx9YF06IHtcbiAgICAgICAgICBjb2xvcjogdGhlbWUuY29sb3JzLnNlY29uZGFyeSxcbiAgICAgICAgfSxcbiAgICAgICAgXCImOmZvY3VzOm5vdCg6Zm9jdXMtdmlzaWJsZSlcIjoge1xuICAgICAgICAgIG91dGxpbmU6IFwiMCAhaW1wb3J0YW50XCIsXG4gICAgICAgICAgYm94U2hhZG93OiBcIm5vbmUgIWltcG9ydGFudFwiLFxuICAgICAgICB9LFxuICAgICAgfSksXG4gICAgICAuLi4oJGRpc2FibGVkICYmIHtcbiAgICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuYXRtbzMsXG4gICAgICAgIGN1cnNvcjogXCJub3QtYWxsb3dlZFwiLFxuICAgICAgICBbYCYgLiR7dGFnQ2xhc3Nlcy5sYWJlbH1gXToge1xuICAgICAgICAgIGNvbG9yOiB0aGVtZS5jb2xvcnMuc2Vjb25kYXJ5XzYwLFxuICAgICAgICB9LFxuICAgICAgfSksXG4gICAgICAuLi4oJGNhdGVnb3JpY2FsRm9jdXMgJiYge1xuICAgICAgICBcIiY6Zm9jdXNcIjoge1xuICAgICAgICAgIC4uLm91dGxpbmVTdHlsZXMsXG4gICAgICAgIH0sXG4gICAgICB9KSxcbiAgICAgIC4uLigkY2F0ZWdvcmljYWxEaXNhYmxlZCAmJiB7XG4gICAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLmF0bW8zLFxuICAgICAgICBjdXJzb3I6IFwibm90LWFsbG93ZWRcIixcbiAgICAgICAgW2AmIC4ke3RhZ0NsYXNzZXMubGFiZWx9YF06IHtcbiAgICAgICAgICBjb2xvcjogdGhlbWUuY29sb3JzLnNlY29uZGFyeV82MCxcbiAgICAgICAgfSxcbiAgICAgICAgXCImOmhvdmVyXCI6IHtcbiAgICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5hdG1vMyxcbiAgICAgICAgfSxcbiAgICAgICAgXCImOmZvY3VzXCI6IHtcbiAgICAgICAgICBvdXRsaW5lOiBcIm5vbmVcIixcbiAgICAgICAgfSxcbiAgICAgIH0pLFxuICAgIH0sXG5cbiAgICBcIiYgLk11aUNoaXAtbGFiZWxcIjoge1xuICAgICAgcGFkZGluZ0xlZnQ6IHRoZW1lLnNwYWNlLnhzLFxuICAgICAgcGFkZGluZ1JpZ2h0OiB0aGVtZS5zcGFjZS54cyxcbiAgICAgIC4uLih0aGVtZS50eXBvZ3JhcGh5LmNhcHRpb24xIGFzIENTU1Byb3BlcnRpZXMpLFxuICAgICAgY29sb3I6IHRoZW1lLmNvbG9ycy5iYXNlX2RhcmssXG4gICAgICBcIiYgcFwiOiB7XG4gICAgICAgIGNvbG9yOiB0aGVtZS5jb2xvcnMuYmFzZV9kYXJrLFxuICAgICAgfSxcbiAgICB9LFxuXG4gICAgXCImIC5NdWlDaGlwLWRlbGV0ZUljb25cIjoge1xuICAgICAgbWFyZ2luUmlnaHQ6IDAsXG4gICAgICB3aWR0aDogMTYsXG4gICAgICBoZWlnaHQ6IDE2LFxuICAgICAgbWluV2lkdGg6IDE2LFxuICAgICAgbWluSGVpZ2h0OiAxNixcbiAgICAgIHBhZGRpbmc6IDAsXG4gICAgICBcIiY6aG92ZXJcIjoge1xuICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IGAkeyRiYXNlTGlnaHRDb2xvcn0zMGAsXG4gICAgICB9LFxuICAgICAgXCImOmZvY3VzXCI6IHtcbiAgICAgICAgLi4ub3V0bGluZVN0eWxlcyxcbiAgICAgICAgYm9yZGVyUmFkaXVzOiAwLFxuICAgICAgfSxcbiAgICAgIFwiJjpmb2N1czpub3QoOmZvY3VzLXZpc2libGUpXCI6IHtcbiAgICAgICAgb3V0bGluZTogXCIwICFpbXBvcnRhbnRcIixcbiAgICAgICAgYm94U2hhZG93OiBcIm5vbmUgIWltcG9ydGFudFwiLFxuICAgICAgfSxcbiAgICAgIC4uLigkZGlzYWJsZWQgJiYge1xuICAgICAgICBcIiY6aG92ZXJcIjoge1xuICAgICAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLmF0bW8zLFxuICAgICAgICB9LFxuICAgICAgICBcIiY6Zm9jdXNcIjoge1xuICAgICAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLmF0bW8zLFxuICAgICAgICAgIG91dGxpbmU6IFwibm9uZVwiLFxuICAgICAgICAgIGJveFNoYWRvdzogXCJub25lXCIsXG4gICAgICAgICAgb3V0bGluZU9mZnNldDogMCxcbiAgICAgICAgfSxcbiAgICAgIH0pLFxuICAgIH0sXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQnV0dG9uID0gc3R5bGVkKFxuICBmb3J3YXJkUmVmKChwcm9wczogSHZCdXR0b25Qcm9wcywgcmVmPzogUG9seW1vcnBoaWNSZWY8XCJidXR0b25cIj4pID0+IHtcbiAgICByZXR1cm4gPEh2QnV0dG9uIHsuLi5wcm9wc30gcmVmPXtyZWZ9IC8+O1xuICB9KVxuKSh7XG4gIFwiJiAuTXVpQnV0dG9uLXN0YXJ0SWNvblwiOiB7XG4gICAgd2lkdGg6IDE2LFxuICAgIGhlaWdodDogMTYsXG4gICAgbWluV2lkdGg6IDE2LFxuICAgIG1pbkhlaWdodDogMTYsXG4gICAgcGFkZGluZzogMCxcbiAgICBtYXJnaW46IDAsXG4gIH0sXG4gIFwiJiAuTXVpQnV0dG9uLXRleHRQcmltYXJ5XCI6IHtcbiAgICBiYWNrZ3JvdW5kOiBcInRyYW5zcGFyZW50XCIsXG4gIH0sXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENsb3NlWFMgPSBzdHlsZWQoXG4gIENsb3NlWFMsXG4gIHRyYW5zaWVudE9wdGlvbnNcbikoKHsgJGNvbG9yIH06IHsgJGNvbG9yOiBzdHJpbmcgfSkgPT4gKHtcbiAgXCImIHN2ZyAuY29sb3IwXCI6IHtcbiAgICBmaWxsOiB0aGVtZS5jb2xvcnNbJGNvbG9yXSxcbiAgfSxcbn0pKTtcbiJdfQ== */",
-  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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVGFnL1RhZy5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW9KNkIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9UYWcvVGFnLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuaW1wb3J0IHsgQ1NTUHJvcGVydGllcywgZm9yd2FyZFJlZiB9IGZyb20gXCJyZWFjdFwiO1xuXG5pbXBvcnQgeyBDbG9zZVhTIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1yZWFjdC1pY29uc1wiO1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuXG5pbXBvcnQgQ2hpcCBmcm9tIFwiQG11aS9tYXRlcmlhbC9DaGlwXCI7XG5cbmltcG9ydCB7IEh2QnV0dG9uLCBIdkJ1dHRvblByb3BzIH0gZnJvbSBcIkBjb3JlL2NvbXBvbmVudHMvQnV0dG9uXCI7XG5pbXBvcnQgeyBvdXRsaW5lU3R5bGVzIH0gZnJvbSBcIkBjb3JlL3V0aWxzL2ZvY3VzVXRpbHNcIjtcbmltcG9ydCB7IGhleFRvUmdiQSB9IGZyb20gXCJAY29yZS91dGlscy9oZXhUb1JnYkFcIjtcbmltcG9ydCB7IHRyYW5zaWVudE9wdGlvbnMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvdHJhbnNpZW50T3B0aW9uc1wiO1xuaW1wb3J0IHsgUG9seW1vcnBoaWNSZWYgfSBmcm9tIFwiQGNvcmUvdHlwZXMvZ2VuZXJpY1wiO1xuXG5pbXBvcnQgdGFnQ2xhc3NlcyBmcm9tIFwiLi90YWdDbGFzc2VzXCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRDaGlwID0gc3R5bGVkKFxuICBDaGlwLFxuICB0cmFuc2llbnRPcHRpb25zXG4pKFxuICAoe1xuICAgICR0eXBlLFxuICAgICRkaXNhYmxlZCxcbiAgICAkY2F0ZWdvcmljYWxGb2N1cyxcbiAgICAkY2F0ZWdvcmljYWxEaXNhYmxlZCxcbiAgICAkYmFzZUxpZ2h0Q29sb3IsXG4gIH06IHtcbiAgICAkdHlwZTogc3RyaW5nO1xuICAgICRkaXNhYmxlZDogYm9vbGVhbjtcbiAgICAkY2F0ZWdvcmljYWxGb2N1czogYm9vbGVhbjtcbiAgICAkY2F0ZWdvcmljYWxEaXNhYmxlZDogYm9vbGVhbjtcbiAgICAkYmFzZUxpZ2h0Q29sb3I6IHN0cmluZztcbiAgfSkgPT4gKHtcbiAgICBcIiYuTXVpQ2hpcC1yb290XCI6IHtcbiAgICAgIGhlaWdodDogMTYsXG4gICAgICBib3JkZXJSYWRpdXM6IDAsXG4gICAgICBtYXhXaWR0aDogMTgwLFxuICAgICAgZm9udEZhbWlseTogdGhlbWUuZm9udEZhbWlseS5ib2R5LFxuXG4gICAgICBbYCYgLiR7dGFnQ2xhc3Nlcy5mb2N1c1Zpc2libGV9YF06IHtcbiAgICAgICAgYmFja2dyb3VuZENvbG9yOiBoZXhUb1JnYkEodGhlbWUuY29sb3JzLmJhc2VfbGlnaHQsIDAuMyksXG4gICAgICB9LFxuICAgICAgLi4uKCR0eXBlID09PSBcImNhdGVnb3JpY2FsXCIgJiYge1xuICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IFwicmVkXCIsXG4gICAgICAgIGJvcmRlclJhZGl1czogOCxcbiAgICAgICAgW2AmLiR7dGFnQ2xhc3Nlcy5jbGlja2FibGV9YF06IHtcbiAgICAgICAgICBjdXJzb3I6IFwicG9pbnRlclwiLFxuICAgICAgICB9LFxuICAgICAgICBcIiY6aG92ZXJcIjoge1xuICAgICAgICAgIGJvcmRlclJhZGl1czogOCxcbiAgICAgICAgfSxcbiAgICAgICAgW2AmIC4ke3RhZ0NsYXNzZXMubGFiZWx9YF06IHtcbiAgICAgICAgICBjb2xvcjogdGhlbWUuY29sb3JzLnNlY29uZGFyeSxcbiAgICAgICAgfSxcbiAgICAgICAgXCImOmZvY3VzOm5vdCg6Zm9jdXMtdmlzaWJsZSlcIjoge1xuICAgICAgICAgIG91dGxpbmU6IFwiMCAhaW1wb3J0YW50XCIsXG4gICAgICAgICAgYm94U2hhZG93OiBcIm5vbmUgIWltcG9ydGFudFwiLFxuICAgICAgICB9LFxuICAgICAgfSksXG4gICAgICAuLi4oJGRpc2FibGVkICYmIHtcbiAgICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuYXRtbzMsXG4gICAgICAgIGN1cnNvcjogXCJub3QtYWxsb3dlZFwiLFxuICAgICAgICBbYCYgLiR7dGFnQ2xhc3Nlcy5sYWJlbH1gXToge1xuICAgICAgICAgIGNvbG9yOiB0aGVtZS5jb2xvcnMuc2Vjb25kYXJ5XzYwLFxuICAgICAgICB9LFxuICAgICAgfSksXG4gICAgICAuLi4oJGNhdGVnb3JpY2FsRm9jdXMgJiYge1xuICAgICAgICBcIiY6Zm9jdXNcIjoge1xuICAgICAgICAgIC4uLm91dGxpbmVTdHlsZXMsXG4gICAgICAgIH0sXG4gICAgICB9KSxcbiAgICAgIC4uLigkY2F0ZWdvcmljYWxEaXNhYmxlZCAmJiB7XG4gICAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLmF0bW8zLFxuICAgICAgICBjdXJzb3I6IFwibm90LWFsbG93ZWRcIixcbiAgICAgICAgW2AmIC4ke3RhZ0NsYXNzZXMubGFiZWx9YF06IHtcbiAgICAgICAgICBjb2xvcjogdGhlbWUuY29sb3JzLnNlY29uZGFyeV82MCxcbiAgICAgICAgfSxcbiAgICAgICAgXCImOmhvdmVyXCI6IHtcbiAgICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5hdG1vMyxcbiAgICAgICAgfSxcbiAgICAgICAgXCImOmZvY3VzXCI6IHtcbiAgICAgICAgICBvdXRsaW5lOiBcIm5vbmVcIixcbiAgICAgICAgfSxcbiAgICAgIH0pLFxuICAgIH0sXG5cbiAgICBcIiYgLk11aUNoaXAtbGFiZWxcIjoge1xuICAgICAgcGFkZGluZ0xlZnQ6IHRoZW1lLnNwYWNlLnhzLFxuICAgICAgcGFkZGluZ1JpZ2h0OiB0aGVtZS5zcGFjZS54cyxcbiAgICAgIC4uLih0aGVtZS50eXBvZ3JhcGh5LmNhcHRpb24xIGFzIENTU1Byb3BlcnRpZXMpLFxuICAgICAgY29sb3I6IHRoZW1lLmNvbG9ycy5iYXNlX2RhcmssXG4gICAgICBcIiYgcFwiOiB7XG4gICAgICAgIGNvbG9yOiB0aGVtZS5jb2xvcnMuYmFzZV9kYXJrLFxuICAgICAgfSxcbiAgICB9LFxuXG4gICAgXCImIC5NdWlDaGlwLWRlbGV0ZUljb25cIjoge1xuICAgICAgbWFyZ2luUmlnaHQ6IDAsXG4gICAgICB3aWR0aDogMTYsXG4gICAgICBoZWlnaHQ6IDE2LFxuICAgICAgbWluV2lkdGg6IDE2LFxuICAgICAgbWluSGVpZ2h0OiAxNixcbiAgICAgIHBhZGRpbmc6IDAsXG4gICAgICBcIiY6aG92ZXJcIjoge1xuICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IGAkeyRiYXNlTGlnaHRDb2xvcn0zMGAsXG4gICAgICB9LFxuICAgICAgXCImOmZvY3VzXCI6IHtcbiAgICAgICAgLi4ub3V0bGluZVN0eWxlcyxcbiAgICAgICAgYm9yZGVyUmFkaXVzOiAwLFxuICAgICAgfSxcbiAgICAgIFwiJjpmb2N1czpub3QoOmZvY3VzLXZpc2libGUpXCI6IHtcbiAgICAgICAgb3V0bGluZTogXCIwICFpbXBvcnRhbnRcIixcbiAgICAgICAgYm94U2hhZG93OiBcIm5vbmUgIWltcG9ydGFudFwiLFxuICAgICAgfSxcbiAgICAgIC4uLigkZGlzYWJsZWQgJiYge1xuICAgICAgICBcIiY6aG92ZXJcIjoge1xuICAgICAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLmF0bW8zLFxuICAgICAgICB9LFxuICAgICAgICBcIiY6Zm9jdXNcIjoge1xuICAgICAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLmF0bW8zLFxuICAgICAgICAgIG91dGxpbmU6IFwibm9uZVwiLFxuICAgICAgICAgIGJveFNoYWRvdzogXCJub25lXCIsXG4gICAgICAgICAgb3V0bGluZU9mZnNldDogMCxcbiAgICAgICAgfSxcbiAgICAgIH0pLFxuICAgIH0sXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQnV0dG9uID0gc3R5bGVkKFxuICBmb3J3YXJkUmVmKChwcm9wczogSHZCdXR0b25Qcm9wcywgcmVmPzogUG9seW1vcnBoaWNSZWY8XCJidXR0b25cIj4pID0+IHtcbiAgICByZXR1cm4gPEh2QnV0dG9uIHsuLi5wcm9wc30gcmVmPXtyZWZ9IC8+O1xuICB9KVxuKSh7XG4gIFwiJiAuTXVpQnV0dG9uLXN0YXJ0SWNvblwiOiB7XG4gICAgd2lkdGg6IDE2LFxuICAgIGhlaWdodDogMTYsXG4gICAgbWluV2lkdGg6IDE2LFxuICAgIG1pbkhlaWdodDogMTYsXG4gICAgcGFkZGluZzogMCxcbiAgICBtYXJnaW46IDAsXG4gIH0sXG4gIFwiJiAuTXVpQnV0dG9uLXRleHRQcmltYXJ5XCI6IHtcbiAgICBiYWNrZ3JvdW5kOiBcInRyYW5zcGFyZW50XCIsXG4gIH0sXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENsb3NlWFMgPSBzdHlsZWQoXG4gIENsb3NlWFMsXG4gIHRyYW5zaWVudE9wdGlvbnNcbikoKHsgJGNvbG9yIH06IHsgJGNvbG9yOiBzdHJpbmcgfSkgPT4gKHtcbiAgXCImIHN2ZyAuY29sb3IwXCI6IHtcbiAgICBmaWxsOiB0aGVtZS5jb2xvcnNbJGNvbG9yXSxcbiAgfSxcbn0pKTtcbiJdfQ== */");
 export {
-  StyledButton,
-  StyledChip,
-  StyledCloseXS
+  staticClasses,
+  useClasses
 };
 //# sourceMappingURL=Tag.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.styles.js","sources":["../../../../src/components/Tag/Tag.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nimport { CSSProperties, forwardRef } from \"react\";\n\nimport { CloseXS } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport Chip from \"@mui/material/Chip\";\n\nimport { HvButton, HvButtonProps } from \"@core/components/Button\";\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\nimport { transientOptions } from \"@core/utils/transientOptions\";\nimport { PolymorphicRef } from \"@core/types/generic\";\n\nimport tagClasses from \"./tagClasses\";\n\nexport const StyledChip = styled(\n  Chip,\n  transientOptions\n)(\n  ({\n    $type,\n    $disabled,\n    $categoricalFocus,\n    $categoricalDisabled,\n    $baseLightColor,\n  }: {\n    $type: string;\n    $disabled: boolean;\n    $categoricalFocus: boolean;\n    $categoricalDisabled: boolean;\n    $baseLightColor: string;\n  }) => ({\n    \"&.MuiChip-root\": {\n      height: 16,\n      borderRadius: 0,\n      maxWidth: 180,\n      fontFamily: theme.fontFamily.body,\n\n      [`& .${tagClasses.focusVisible}`]: {\n        backgroundColor: hexToRgbA(theme.colors.base_light, 0.3),\n      },\n      ...($type === \"categorical\" && {\n        backgroundColor: \"red\",\n        borderRadius: 8,\n        [`&.${tagClasses.clickable}`]: {\n          cursor: \"pointer\",\n        },\n        \"&:hover\": {\n          borderRadius: 8,\n        },\n        [`& .${tagClasses.label}`]: {\n          color: theme.colors.secondary,\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.secondary_60,\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.secondary_60,\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.caption1 as CSSProperties),\n      color: theme.colors.base_dark,\n      \"& p\": {\n        color: theme.colors.base_dark,\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: `${$baseLightColor}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(\n  forwardRef((props: HvButtonProps, ref?: PolymorphicRef<\"button\">) => {\n    return <HvButton {...props} ref={ref} />;\n  })\n)({\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","$baseLightColor","height","borderRadius","maxWidth","fontFamily","theme","body","tagClasses","focusVisible","backgroundColor","hexToRgbA","colors","base_light","clickable","cursor","color","secondary","outline","boxShadow","atmo3","secondary_60","outlineStyles","paddingLeft","space","xs","paddingRight","typography","caption1","base_dark","marginRight","width","minWidth","minHeight","padding","outlineOffset","StyledButton","_styled","forwardRef","props","ref","HvButton","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","StyledCloseXS","CloseXS","$color","fill"],"mappings":"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"}
+{"version":3,"file":"Tag.styles.js","sources":["../../../../src/components/Tag/Tag.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\nimport { CSSProperties } from \"react\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTag\", {\n  root: {},\n\n  chipRoot: {\n    \"&.MuiChip-root\": {\n      height: 16,\n      borderRadius: 0,\n      maxWidth: 180,\n      fontFamily: theme.fontFamily.body,\n\n      \"& $focusVisible\": {\n        backgroundColor: hexToRgbA(theme.colors.base_light, 0.3),\n      },\n\n      \"&$categorical\": {\n        borderRadius: 8,\n        \"&$clickable\": {\n          cursor: \"pointer\",\n        },\n        \"&:hover\": {\n          borderRadius: 8,\n        },\n        \"& $label\": {\n          color: theme.colors.secondary,\n        },\n        \"&:focus:not(:focus-visible)\": {\n          outline: \"0 !important\",\n          boxShadow: \"none !important\",\n        },\n      },\n    },\n\n    \"& .MuiChip-label\": {\n      paddingLeft: theme.space.xs,\n      paddingRight: theme.space.xs,\n      ...(theme.typography.caption1 as CSSProperties),\n      color: theme.colors.base_dark,\n      \"& p\": {\n        color: theme.colors.base_dark,\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: hexToRgbA(theme.colors.base_light, 0.3),\n      },\n      \"&:focus\": {\n        ...outlineStyles,\n        borderRadius: 0,\n      },\n      \"&:focus:not(:focus-visible)\": {\n        outline: \"0 !important\",\n        boxShadow: \"none !important\",\n      },\n    },\n  },\n\n  focusVisible: {},\n\n  button: {\n    background: \"transparent\",\n  },\n\n  label: {},\n\n  tagButton: {\n    width: 16,\n    height: 16,\n    minWidth: 16,\n    minHeight: 16,\n    padding: 0,\n    margin: 0,\n  },\n\n  deleteIcon: {},\n\n  disabledDeleteIcon: {\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  categorical: {},\n  clickable: {},\n\n  categoricalFocus: {\n    \"&:focus\": {\n      ...outlineStyles,\n    },\n  },\n\n  disabled: {\n    backgroundColor: theme.colors.atmo3,\n    cursor: \"not-allowed\",\n    \"& $label\": {\n      color: theme.colors.secondary_60,\n    },\n  },\n\n  categoricalDisabled: {\n    backgroundColor: theme.colors.atmo3,\n    cursor: \"not-allowed\",\n    \"& $label\": {\n      color: theme.colors.secondary_60,\n    },\n    \"&:hover\": {\n      backgroundColor: theme.colors.atmo3,\n    },\n    \"&:focus\": {\n      outline: \"none\",\n    },\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","chipRoot","height","borderRadius","maxWidth","fontFamily","theme","body","backgroundColor","hexToRgbA","colors","base_light","cursor","color","secondary","outline","boxShadow","paddingLeft","space","xs","paddingRight","typography","caption1","base_dark","marginRight","width","minWidth","minHeight","padding","outlineStyles","focusVisible","button","background","label","tagButton","margin","deleteIcon","disabledDeleteIcon","atmo3","outlineOffset","categorical","clickable","categoricalFocus","disabled","secondary_60","categoricalDisabled"],"mappings":";;;;AAMa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,SAAS;AAAA,EAClEC,MAAM,CAAC;AAAA,EAEPC,UAAU;AAAA,IACR,kBAAkB;AAAA,MAChBC,QAAQ;AAAA,MACRC,cAAc;AAAA,MACdC,UAAU;AAAA,MACVC,YAAYC,MAAMD,WAAWE;AAAAA,MAE7B,mBAAmB;AAAA,QACjBC,iBAAiBC,UAAUH,MAAMI,OAAOC,YAAY,GAAG;AAAA,MACzD;AAAA,MAEA,iBAAiB;AAAA,QACfR,cAAc;AAAA,QACd,eAAe;AAAA,UACbS,QAAQ;AAAA,QACV;AAAA,QACA,WAAW;AAAA,UACTT,cAAc;AAAA,QAChB;AAAA,QACA,YAAY;AAAA,UACVU,OAAOP,MAAMI,OAAOI;AAAAA,QACtB;AAAA,QACA,+BAA+B;AAAA,UAC7BC,SAAS;AAAA,UACTC,WAAW;AAAA,QACb;AAAA,MACF;AAAA,IACF;AAAA,IAEA,oBAAoB;AAAA,MAClBC,aAAaX,MAAMY,MAAMC;AAAAA,MACzBC,cAAcd,MAAMY,MAAMC;AAAAA,MAC1B,GAAIb,MAAMe,WAAWC;AAAAA,MACrBT,OAAOP,MAAMI,OAAOa;AAAAA,MACpB,OAAO;AAAA,QACLV,OAAOP,MAAMI,OAAOa;AAAAA,MACtB;AAAA,IACF;AAAA,IAEA,yBAAyB;AAAA,MACvBC,aAAa;AAAA,MACbC,OAAO;AAAA,MACPvB,QAAQ;AAAA,MACRwB,UAAU;AAAA,MACVC,WAAW;AAAA,MACXC,SAAS;AAAA,MACT,WAAW;AAAA,QACTpB,iBAAiBC,UAAUH,MAAMI,OAAOC,YAAY,GAAG;AAAA,MACzD;AAAA,MACA,WAAW;AAAA,QACT,GAAGkB;AAAAA,QACH1B,cAAc;AAAA,MAChB;AAAA,MACA,+BAA+B;AAAA,QAC7BY,SAAS;AAAA,QACTC,WAAW;AAAA,MACb;AAAA,IACF;AAAA,EACF;AAAA,EAEAc,cAAc,CAAC;AAAA,EAEfC,QAAQ;AAAA,IACNC,YAAY;AAAA,EACd;AAAA,EAEAC,OAAO,CAAC;AAAA,EAERC,WAAW;AAAA,IACTT,OAAO;AAAA,IACPvB,QAAQ;AAAA,IACRwB,UAAU;AAAA,IACVC,WAAW;AAAA,IACXC,SAAS;AAAA,IACTO,QAAQ;AAAA,EACV;AAAA,EAEAC,YAAY,CAAC;AAAA,EAEbC,oBAAoB;AAAA,IAClB,WAAW;AAAA,MACT7B,iBAAiBF,MAAMI,OAAO4B;AAAAA,IAChC;AAAA,IACA,WAAW;AAAA,MACT9B,iBAAiBF,MAAMI,OAAO4B;AAAAA,MAC9BvB,SAAS;AAAA,MACTC,WAAW;AAAA,MACXuB,eAAe;AAAA,IACjB;AAAA,EACF;AAAA,EAEAC,aAAa,CAAC;AAAA,EACdC,WAAW,CAAC;AAAA,EAEZC,kBAAkB;AAAA,IAChB,WAAW;AAAA,MACT,GAAGb;AAAAA,IACL;AAAA,EACF;AAAA,EAEAc,UAAU;AAAA,IACRnC,iBAAiBF,MAAMI,OAAO4B;AAAAA,IAC9B1B,QAAQ;AAAA,IACR,YAAY;AAAA,MACVC,OAAOP,MAAMI,OAAOkC;AAAAA,IACtB;AAAA,EACF;AAAA,EAEAC,qBAAqB;AAAA,IACnBrC,iBAAiBF,MAAMI,OAAO4B;AAAAA,IAC9B1B,QAAQ;AAAA,IACR,YAAY;AAAA,MACVC,OAAOP,MAAMI,OAAOkC;AAAAA,IACtB;AAAA,IACA,WAAW;AAAA,MACTpC,iBAAiBF,MAAMI,OAAO4B;AAAAA,IAChC;AAAA,IACA,WAAW;AAAA,MACTvB,SAAS;AAAA,IACX;AAAA,EACF;AACF,CAAC;"}

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

@@ -1,6 +1,6 @@
 import { useState, useRef, useMemo, useCallback, useEffect } from "react";
-import { clsx } from "clsx";
 import isNil from "lodash/isNil";
+import { theme } from "@hitachivantara/uikit-styles";
 import { useControlled } from "../../hooks/useControlled.js";
 import { useUniqueId } from "../../hooks/useUniqueId.js";
 import { useIsMounted } from "../../hooks/useIsMounted.js";
@@ -9,13 +9,24 @@ import { isKey } from "../../utils/keyboardUtils.js";
 import { setId } from "../../utils/setId.js";
 import validationState from "../Forms/FormElement/validationStates.js";
 import { DEFAULT_ERROR_MESSAGES } from "../BaseInput/validations.js";
-import { StyledFormElement, StyledLabelContainer, StyledLabel, StyledDescription, StyledCharCounter, StyledTagsList, StyledListItem, StyledTag, StyledInputListItem, StyledInput, StyledSuggestions, StyledError } from "./TagsInput.styles.js";
-import tagsInputClasses from "./tagsInputClasses.js";
+import { useClasses } from "./TagsInput.styles.js";
+import { staticClasses } from "./TagsInput.styles.js";
 import { jsxs, jsx, Fragment } from "@emotion/react/jsx-runtime";
+import { HvTag } from "../Tag/Tag.js";
+import { HvInput } from "../Input/Input.js";
+import { HvFormElement } from "../Forms/FormElement/FormElement.js";
+import { HvLabel } from "../Forms/Label/Label.js";
+import { HvInfoMessage } from "../Forms/InfoMessage/InfoMessage.js";
+import { HvCharCounter } from "../Forms/CharCounter/CharCounter.js";
+import { HvListContainer } from "../ListContainer/ListContainer.js";
+import { HvListItem } from "../ListContainer/ListItem/ListItem.js";
+import { staticClasses as staticClasses2 } from "../BaseInput/BaseInput.styles.js";
+import { HvSuggestions } from "../Forms/Suggestions/Suggestions.js";
+import { HvWarningText } from "../Forms/WarningText/WarningText.js";
 const HvTagsInput = (props) => {
   var _a;
   const {
-    classes,
+    classes: classesProp,
     className,
     id,
     name,
@@ -51,6 +62,11 @@ const HvTagsInput = (props) => {
     suggestionListCallback,
     ...others
   } = useDefaultProps("HvTagsInput", props);
+  const {
+    classes,
+    cx,
+    css
+  } = useClasses(classesProp);
   const elementId = useUniqueId(id, "hvTagsInput");
   const hasLabel = textAreaLabel != null;
   const hasDescription = description != null;
@@ -235,7 +251,7 @@ const HvTagsInput = (props) => {
     clearTimeout(blurTimeout.current);
     onFocus == null ? void 0 : onFocus(evt, tagInput);
   };
-  return /* @__PURE__ */ jsxs(StyledFormElement, {
+  return /* @__PURE__ */ jsxs(HvFormElement, {
     id,
     name,
     disabled,
@@ -244,34 +260,36 @@ const HvTagsInput = (props) => {
     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),
+    className: cx(classes.root, {
+      [classes.disabled]: disabled,
+      [classes.readOnly]: readOnly
+    }, className),
+    children: [(hasLabel || hasDescription) && /* @__PURE__ */ jsxs("div", {
+      className: classes.labelContainer,
+      children: [hasLabel && /* @__PURE__ */ jsx(HvLabel, {
+        className: 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),
+      }), hasDescription && /* @__PURE__ */ jsx(HvInfoMessage, {
+        className: classes.description,
         id: setId(elementId, "description"),
         children: description
       })]
-    }), hasCounter && /* @__PURE__ */ jsx(StyledCharCounter, {
+    }), hasCounter && /* @__PURE__ */ jsx(HvCharCounter, {
       id: setId(elementId, "charCounter"),
-      className: clsx(tagsInputClasses.characterCounter, classes == null ? void 0 : classes.characterCounter),
+      className: 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,
+    }), /* @__PURE__ */ jsxs(HvListContainer, {
+      className: cx(classes.tagsList, {
+        [classes.error]: canShowError,
+        [classes.resizable]: resizable && multiline,
+        [classes.invalid]: isStateInvalid,
+        [classes.singleLine]: !multiline
+      }),
       onKeyDown: onKeyDownHandler,
       onClick: onContainerClickHandler,
       ref: containerRef,
@@ -285,20 +303,23 @@ const HvTagsInput = (props) => {
           type,
           ...otherProps
         } = tag;
-        return /* @__PURE__ */ jsx(StyledListItem, {
+        return /* @__PURE__ */ jsx(HvListItem, {
           tabIndex: -1,
-          className: clsx(!multiline && clsx(tagsInputClasses.singleLine, classes == null ? void 0 : classes.singleLine)),
+          className: cx({
+            [classes.singleLine]: !multiline
+          }),
           classes: {
-            gutters: clsx(tagsInputClasses.listItemGutters, classes == null ? void 0 : classes.listItemGutters),
-            root: clsx(tagsInputClasses.listItemRoot, classes == null ? void 0 : classes.listItemRoot)
+            gutters: classes.listItemGutters,
+            root: classes.listItemRoot
           },
           id: `tag-${i}`,
-          $singleLine: !multiline,
-          children: /* @__PURE__ */ jsx(StyledTag, {
+          children: /* @__PURE__ */ jsx(HvTag, {
             label,
-            className: clsx(i === tagCursorPos && clsx(tagsInputClasses.tagSelected, classes == null ? void 0 : classes.tagSelected)),
+            className: cx({
+              [classes.tagSelected]: i === tagCursorPos
+            }),
             classes: {
-              chipRoot: clsx(tagsInputClasses.chipRoot, classes == null ? void 0 : classes.chipRoot)
+              chipRoot: classes.chipRoot
             },
             type,
             ...!(readOnly || disabled || type === "categorical") && {
@@ -307,32 +328,38 @@ const HvTagsInput = (props) => {
             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))),
+      }), !(disabled || readOnly) && /* @__PURE__ */ jsx(HvListItem, {
+        className: cx({
+          [classes.singleLine]: !multiline,
+          [classes.tagInputRootEmpty]: value.length === 0
+        }, !!isTagSelected && css({
+          [`& .${staticClasses2.inputRoot}`]: {
+            backgroundColor: theme.colors.atmo1
+          }
+        })),
         classes: {
-          root: clsx(tagsInputClasses.tagInputContainerRoot, classes == null ? void 0 : classes.tagInputContainerRoot),
-          gutters: clsx(tagsInputClasses.listItemGutters, classes == null ? void 0 : classes.listItemGutters)
+          root: classes.tagInputContainerRoot,
+          gutters: classes.listItemGutters
         },
         id: `tag-${value.length}`,
-        $singleLine: !multiline,
-        $isTagSelected: !!isTagSelected,
-        children: /* @__PURE__ */ jsx(StyledInput, {
+        children: /* @__PURE__ */ jsx(HvInput, {
           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)),
+          className: cx({
+            [classes.singleLine]: !multiline
+          }),
           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)
+            root: classes.tagInputRoot,
+            input: classes.input,
+            inputBorderContainer: classes.tagInputBorderContainer,
+            inputRootFocused: classes.tagInputRootFocused
           },
           disabled,
           readOnly: readOnly || isTagSelected,
@@ -344,19 +371,18 @@ const HvTagsInput = (props) => {
             ...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, {
+        className: classes.inputExtension
+      }), /* @__PURE__ */ jsx(HvSuggestions, {
         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)
+          root: classes.suggestionsContainer,
+          list: classes.suggestionList
         },
         expanded: hasSuggestions,
         anchorEl: (_a = containerRef == null ? void 0 : containerRef.current) == null ? void 0 : _a.parentElement,
@@ -365,15 +391,16 @@ const HvTagsInput = (props) => {
         onSuggestionSelected: suggestionSelectedHandler,
         suggestionValues
       })]
-    }), canShowError && /* @__PURE__ */ jsx(StyledError, {
+    }), canShowError && /* @__PURE__ */ jsx(HvWarningText, {
       id: setId(elementId, "error"),
       disableBorder: true,
-      className: clsx(tagsInputClasses.error, classes == null ? void 0 : classes.error),
+      className: classes.error,
       children: validationMessage
     })]
   });
 };
 export {
-  HvTagsInput
+  HvTagsInput,
+  staticClasses as tagsInputClasses
 };
 //# sourceMappingURL=TagsInput.js.map