@hitachivantara/uikit-react-core 5.39.1 → 5.39.2

package/dist/cjs/components/Tag/Tag.cjs

@@ -30,15 +30,18 @@ const HvTag = (props) => {
     deleteButtonProps = {},
     ...others
   } = useDefaultProps.useDefaultProps("HvTag", props);
-  const {
-    colors
-  } = useTheme.useTheme();
-  const {
-    classes,
-    cx,
-    css
-  } = Tag_styles.useClasses(classesProp);
-  const defaultDeleteIcon = /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.CloseXS, { role: "none", className: cx(classes.button, classes.tagButton), iconSize: "XS", color: "base_dark", ...deleteButtonProps });
+  const { colors } = useTheme.useTheme();
+  const { classes, cx, css } = Tag_styles.useClasses(classesProp);
+  const defaultDeleteIcon = /* @__PURE__ */ jsxRuntime.jsx(
+    uikitReactIcons.CloseXS,
+    {
+      role: "none",
+      className: cx(classes.button, classes.tagButton),
+      iconSize: "XS",
+      color: "base_dark",
+      ...deleteButtonProps
+    }
+  );
   const categoricalBackgroundColor = type === "categorical" ? getCategoricalColor(color, colors) : void 0;
   const backgroundColor = type === "semantic" && uikitStyles.getColor(color, "neutral_20") || type === "categorical" && `${categoricalBackgroundColor}30` || void 0;
   const isClickable = !!(onClick || onDelete) && !disabled;
@@ -47,26 +50,35 @@ const HvTag = (props) => {
       boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}`
     }
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(Chip__default.default, { label, disabled, className: cx({
-    [clickableClass]: isClickable
-  }, className), style: {
-    ...disabled ? null : {
-      backgroundColor
-    },
-    ...style
-  }, classes: {
-    root: cx(classes.root, classes.chipRoot, {
-      [classes.disabled]: disabled,
-      [classes.clickable]: isClickable,
-      [classes.categorical]: type === "categorical",
-      [classes.categoricalFocus]: type === "categorical" && !disabled,
-      [classes.categoricalDisabled]: type === "categorical" && disabled
-    }),
-    label: classes.label,
-    deleteIcon: cx(classes.deleteIcon, {
-      [classes.disabledDeleteIcon]: disabled
-    })
-  }, deleteIcon: deleteIcon || defaultDeleteIcon, onDelete: disabled ? void 0 : onDelete, onClick: disabled ? void 0 : onClick, ...others });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Chip__default.default,
+    {
+      label,
+      disabled,
+      className: cx({ [clickableClass]: isClickable }, className),
+      style: {
+        ...disabled ? null : { backgroundColor },
+        ...style
+      },
+      classes: {
+        root: cx(classes.root, classes.chipRoot, {
+          [classes.disabled]: disabled,
+          [classes.clickable]: isClickable,
+          [classes.categorical]: type === "categorical",
+          [classes.categoricalFocus]: type === "categorical" && !disabled,
+          [classes.categoricalDisabled]: type === "categorical" && disabled
+        }),
+        label: classes.label,
+        deleteIcon: cx(classes.deleteIcon, {
+          [classes.disabledDeleteIcon]: disabled
+        })
+      },
+      deleteIcon: deleteIcon || defaultDeleteIcon,
+      onDelete: disabled ? void 0 : onDelete,
+      onClick: disabled ? void 0 : onClick,
+      ...others
+    }
+  );
 };
 exports.tagClasses = Tag_styles.staticClasses;
 exports.HvTag = HvTag;

package/dist/cjs/components/Tag/Tag.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.cjs","sources":["../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import { HTMLAttributes } from \"react\";\nimport { HvColorAny, getColor } from \"@hitachivantara/uikit-styles\";\nimport Chip, { ChipProps as MuiChipProps } from \"@mui/material/Chip\";\n\nimport { CloseXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Tag.styles\";\n\nexport { staticClasses as tagClasses };\n\nexport type HvTagClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTagProps extends Omit<MuiChipProps, \"color\" | \"classes\"> {\n  /** The label of the tag element. */\n  label?: React.ReactNode;\n  /** Indicates that the form element is disabled. */\n  disabled?: boolean;\n  /** The type of the tag element. A tag can be of semantic or categoric type. */\n  type?: \"semantic\" | \"categorical\";\n  /** Background color to be applied to the tag */\n  color?: HvColorAny;\n  /** Icon used to customize the delete icon in the Chip element */\n  deleteIcon?: React.ReactElement;\n  /**\n   * The callback fired when the delete icon is pressed.\n   * This function has to be provided to the component, in order to render the delete icon\n   * */\n  onDelete?: (event: React.MouseEvent<HTMLElement>) => void;\n  /** Callback triggered when any item is clicked. */\n  onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n  /** Aria properties to apply to delete button in tag\n   * @deprecated no longer used\n   */\n  deleteButtonArialLabel?: string;\n  /** Props to apply to delete icon */\n  deleteButtonProps?: HTMLAttributes<HTMLDivElement>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTagClasses;\n  /** @ignore */\n  ref?: MuiChipProps[\"ref\"];\n  /** @ignore */\n  component?: MuiChipProps[\"component\"];\n}\n\nconst getCategoricalColor = (customColor, colors) => {\n  return (customColor && colors?.[customColor]) || customColor || colors?.cat1;\n};\n\n/**\n * A Tag is one word that describes a specific aspect of an asset. A single asset can have\n * multiple tags.\n * Use tags to highlight an item's status for quick recognition and navigation\n * Use color to indicate meanings that users can learn and recognize across products\n *\n * It leverages the Chip component from Material UI\n */\nexport const HvTag = (props: HvTagProps) => {\n  const {\n    classes: classesProp,\n    className,\n    style,\n    label,\n    disabled,\n    type = \"semantic\",\n    color,\n    deleteIcon,\n    onDelete,\n    onClick,\n    // TODO: remove from API\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    deleteButtonArialLabel = \"Delete tag\",\n    deleteButtonProps = {},\n    ...others\n  } = useDefaultProps(\"HvTag\", props);\n  const { colors } = useTheme();\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const defaultDeleteIcon = (\n    <CloseXS\n      role=\"none\"\n      className={cx(classes.button, classes.tagButton)}\n      iconSize=\"XS\"\n      color=\"base_dark\"\n      {...deleteButtonProps}\n    />\n  );\n\n  const categoricalBackgroundColor =\n    type === \"categorical\" ? getCategoricalColor(color, colors) : undefined;\n\n  const backgroundColor =\n    (type === \"semantic\" && getColor(color, \"neutral_20\")) ||\n    (type === \"categorical\" && `${categoricalBackgroundColor}30`) ||\n    undefined;\n\n  const isClickable = !!(onClick || onDelete) && !disabled;\n\n  const clickableClass = css({\n    \"&:hover\": {\n      boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}`,\n    },\n  });\n\n  return (\n    <Chip\n      label={label}\n      disabled={disabled}\n      className={cx({ [clickableClass]: isClickable }, className)}\n      style={{\n        ...(disabled ? null : { backgroundColor }),\n        ...style,\n      }}\n      classes={{\n        root: cx(classes.root, classes.chipRoot, {\n          [classes.disabled]: disabled,\n          [classes.clickable]: isClickable,\n          [classes.categorical]: type === \"categorical\",\n          [classes.categoricalFocus]: type === \"categorical\" && !disabled,\n          [classes.categoricalDisabled]: type === \"categorical\" && disabled,\n        }),\n        label: classes.label,\n        deleteIcon: cx(classes.deleteIcon, {\n          [classes.disabledDeleteIcon]: disabled,\n        }),\n      }}\n      deleteIcon={deleteIcon || defaultDeleteIcon}\n      onDelete={disabled ? undefined : onDelete}\n      onClick={disabled ? undefined : onClick}\n      {...others}\n    />\n  );\n};\n"],"names":["getCategoricalColor","customColor","colors","cat1","HvTag","props","classes","classesProp","className","style","label","disabled","type","color","deleteIcon","onDelete","onClick","deleteButtonArialLabel","deleteButtonProps","others","useDefaultProps","useTheme","cx","css","useClasses","defaultDeleteIcon","jsx","CloseXS","button","tagButton","categoricalBackgroundColor","undefined","backgroundColor","getColor","isClickable","clickableClass","boxShadow","Chip","root","chipRoot","clickable","categorical","categoricalFocus","categoricalDisabled","disabledDeleteIcon"],"mappings":";;;;;;;;;;;AAgDA,MAAMA,sBAAsBA,CAACC,aAAaC,WAAW;AACnD,SAAQD,eAAeC,SAASD,WAAW,KAAMA,eAAeC,QAAQC;AAC1E;AAUaC,MAAAA,QAAQA,CAACC,UAAsB;AACpC,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,OAAO;AAAA,IACPC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA;AAAAA;AAAAA,IAGAC,yBAAyB;AAAA,IACzBC,oBAAoB,CAAC;AAAA,IACrB,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,SAASf,KAAK;AAC5B,QAAA;AAAA,IAAEH;AAAAA,MAAWmB,SAAS,SAAA;AACtB,QAAA;AAAA,IAAEf;AAAAA,IAASgB;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,WAAAA,WAAWjB,WAAW;AAEnD,QAAMkB,oBACHC,2BAAA,IAAAC,yBAAA,EACC,MAAK,QACL,WAAWL,GAAGhB,QAAQsB,QAAQtB,QAAQuB,SAAS,GAC/C,UAAS,MACT,OAAM,aACFX,GAAAA,kBAEP,CAAA;AAED,QAAMY,6BACJlB,SAAS,gBAAgBZ,oBAAoBa,OAAOX,MAAM,IAAI6B;AAE1DC,QAAAA,kBACHpB,SAAS,cAAcqB,YAASpB,SAAAA,OAAO,YAAY,KACnDD,SAAS,iBAAkB,GAAEkB,0BAA2B,QACzDC;AAEF,QAAMG,cAAc,CAAC,EAAElB,WAAWD,aAAa,CAACJ;AAEhD,QAAMwB,iBAAiBZ,IAAI;AAAA,IACzB,WAAW;AAAA,MACTa,WAAY,aAAYN,0BAA2B;AAAA,IACrD;AAAA,EAAA,CACD;AAED,SACGJ,2BAAAA,IAAAW,cAAAA,SAAA,EACC,OACA,UACA,WAAWf,GAAG;AAAA,IAAE,CAACa,cAAc,GAAGD;AAAAA,EAAAA,GAAe1B,SAAS,GAC1D,OAAO;AAAA,IACL,GAAIG,WAAW,OAAO;AAAA,MAAEqB;AAAAA,IAAgB;AAAA,IACxC,GAAGvB;AAAAA,KAEL,SAAS;AAAA,IACP6B,MAAMhB,GAAGhB,QAAQgC,MAAMhC,QAAQiC,UAAU;AAAA,MACvC,CAACjC,QAAQK,QAAQ,GAAGA;AAAAA,MACpB,CAACL,QAAQkC,SAAS,GAAGN;AAAAA,MACrB,CAAC5B,QAAQmC,WAAW,GAAG7B,SAAS;AAAA,MAChC,CAACN,QAAQoC,gBAAgB,GAAG9B,SAAS,iBAAiB,CAACD;AAAAA,MACvD,CAACL,QAAQqC,mBAAmB,GAAG/B,SAAS,iBAAiBD;AAAAA,IAAAA,CAC1D;AAAA,IACDD,OAAOJ,QAAQI;AAAAA,IACfI,YAAYQ,GAAGhB,QAAQQ,YAAY;AAAA,MACjC,CAACR,QAAQsC,kBAAkB,GAAGjC;AAAAA,IAAAA,CAC/B;AAAA,EAAA,GAEH,YAAYG,cAAcW,mBAC1B,UAAUd,WAAWoB,SAAYhB,UACjC,SAASJ,WAAWoB,SAAYf,SAC5BG,GAAAA,OACJ,CAAA;AAEN;;;"}
+{"version":3,"file":"Tag.cjs","sources":["../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import { HTMLAttributes } from \"react\";\nimport { HvColorAny, getColor } from \"@hitachivantara/uikit-styles\";\nimport Chip, { ChipProps as MuiChipProps } from \"@mui/material/Chip\";\n\nimport { CloseXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Tag.styles\";\n\nexport { staticClasses as tagClasses };\n\nexport type HvTagClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTagProps extends Omit<MuiChipProps, \"color\" | \"classes\"> {\n  /** The label of the tag element. */\n  label?: React.ReactNode;\n  /** Indicates that the form element is disabled. */\n  disabled?: boolean;\n  /** The type of the tag element. A tag can be of semantic or categoric type. */\n  type?: \"semantic\" | \"categorical\";\n  /** Background color to be applied to the tag */\n  color?: HvColorAny;\n  /** Icon used to customize the delete icon in the Chip element */\n  deleteIcon?: React.ReactElement;\n  /**\n   * The callback fired when the delete icon is pressed.\n   * This function has to be provided to the component, in order to render the delete icon\n   * */\n  onDelete?: (event: React.MouseEvent<HTMLElement>) => void;\n  /** Callback triggered when any item is clicked. */\n  onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n  /** Aria properties to apply to delete button in tag\n   * @deprecated no longer used\n   */\n  deleteButtonArialLabel?: string;\n  /** Props to apply to delete icon */\n  deleteButtonProps?: HTMLAttributes<HTMLDivElement>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTagClasses;\n  /** @ignore */\n  ref?: MuiChipProps[\"ref\"];\n  /** @ignore */\n  component?: MuiChipProps[\"component\"];\n}\n\nconst getCategoricalColor = (customColor, colors) => {\n  return (customColor && colors?.[customColor]) || customColor || colors?.cat1;\n};\n\n/**\n * A Tag is one word that describes a specific aspect of an asset. A single asset can have\n * multiple tags.\n * Use tags to highlight an item's status for quick recognition and navigation\n * Use color to indicate meanings that users can learn and recognize across products\n *\n * It leverages the Chip component from Material UI\n */\nexport const HvTag = (props: HvTagProps) => {\n  const {\n    classes: classesProp,\n    className,\n    style,\n    label,\n    disabled,\n    type = \"semantic\",\n    color,\n    deleteIcon,\n    onDelete,\n    onClick,\n    // TODO: remove from API\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    deleteButtonArialLabel = \"Delete tag\",\n    deleteButtonProps = {},\n    ...others\n  } = useDefaultProps(\"HvTag\", props);\n  const { colors } = useTheme();\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const defaultDeleteIcon = (\n    <CloseXS\n      role=\"none\"\n      className={cx(classes.button, classes.tagButton)}\n      iconSize=\"XS\"\n      color=\"base_dark\"\n      {...deleteButtonProps}\n    />\n  );\n\n  const categoricalBackgroundColor =\n    type === \"categorical\" ? getCategoricalColor(color, colors) : undefined;\n\n  const backgroundColor =\n    (type === \"semantic\" && getColor(color, \"neutral_20\")) ||\n    (type === \"categorical\" && `${categoricalBackgroundColor}30`) ||\n    undefined;\n\n  const isClickable = !!(onClick || onDelete) && !disabled;\n\n  const clickableClass = css({\n    \"&:hover\": {\n      boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}`,\n    },\n  });\n\n  return (\n    <Chip\n      label={label}\n      disabled={disabled}\n      className={cx({ [clickableClass]: isClickable }, className)}\n      style={{\n        ...(disabled ? null : { backgroundColor }),\n        ...style,\n      }}\n      classes={{\n        root: cx(classes.root, classes.chipRoot, {\n          [classes.disabled]: disabled,\n          [classes.clickable]: isClickable,\n          [classes.categorical]: type === \"categorical\",\n          [classes.categoricalFocus]: type === \"categorical\" && !disabled,\n          [classes.categoricalDisabled]: type === \"categorical\" && disabled,\n        }),\n        label: classes.label,\n        deleteIcon: cx(classes.deleteIcon, {\n          [classes.disabledDeleteIcon]: disabled,\n        }),\n      }}\n      deleteIcon={deleteIcon || defaultDeleteIcon}\n      onDelete={disabled ? undefined : onDelete}\n      onClick={disabled ? undefined : onClick}\n      {...others}\n    />\n  );\n};\n"],"names":["useDefaultProps","useTheme","useClasses","jsx","CloseXS","getColor","Chip"],"mappings":";;;;;;;;;;;AAgDA,MAAM,sBAAsB,CAAC,aAAa,WAAW;AACnD,SAAQ,eAAe,SAAS,WAAW,KAAM,eAAe,QAAQ;AAC1E;AAUa,MAAA,QAAQ,CAAC,UAAsB;AACpC,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA,IAGA,yBAAyB;AAAA,IACzB,oBAAoB,CAAC;AAAA,IACrB,GAAG;AAAA,EAAA,IACDA,gBAAgB,gBAAA,SAAS,KAAK;AAC5B,QAAA,EAAE,WAAWC,SAAAA;AACnB,QAAM,EAAE,SAAS,IAAI,IAAI,IAAIC,WAAAA,WAAW,WAAW;AAEnD,QAAM,oBACJC,2BAAA;AAAA,IAACC,gBAAA;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW,GAAG,QAAQ,QAAQ,QAAQ,SAAS;AAAA,MAC/C,UAAS;AAAA,MACT,OAAM;AAAA,MACL,GAAG;AAAA,IAAA;AAAA,EAAA;AAIR,QAAM,6BACJ,SAAS,gBAAgB,oBAAoB,OAAO,MAAM,IAAI;AAE1D,QAAA,kBACH,SAAS,cAAcC,YAAS,SAAA,OAAO,YAAY,KACnD,SAAS,iBAAiB,GAAG,0BAA0B,QACxD;AAEF,QAAM,cAAc,CAAC,EAAE,WAAW,aAAa,CAAC;AAEhD,QAAM,iBAAiB,IAAI;AAAA,IACzB,WAAW;AAAA,MACT,WAAW,aAAa,0BAA0B;AAAA,IACpD;AAAA,EAAA,CACD;AAGC,SAAAF,2BAAA;AAAA,IAACG,cAAA;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,WAAW,GAAG,EAAE,CAAC,cAAc,GAAG,YAAA,GAAe,SAAS;AAAA,MAC1D,OAAO;AAAA,QACL,GAAI,WAAW,OAAO,EAAE,gBAAgB;AAAA,QACxC,GAAG;AAAA,MACL;AAAA,MACA,SAAS;AAAA,QACP,MAAM,GAAG,QAAQ,MAAM,QAAQ,UAAU;AAAA,UACvC,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACpB,CAAC,QAAQ,SAAS,GAAG;AAAA,UACrB,CAAC,QAAQ,WAAW,GAAG,SAAS;AAAA,UAChC,CAAC,QAAQ,gBAAgB,GAAG,SAAS,iBAAiB,CAAC;AAAA,UACvD,CAAC,QAAQ,mBAAmB,GAAG,SAAS,iBAAiB;AAAA,QAAA,CAC1D;AAAA,QACD,OAAO,QAAQ;AAAA,QACf,YAAY,GAAG,QAAQ,YAAY;AAAA,UACjC,CAAC,QAAQ,kBAAkB,GAAG;AAAA,QAAA,CAC/B;AAAA,MACH;AAAA,MACA,YAAY,cAAc;AAAA,MAC1B,UAAU,WAAW,SAAY;AAAA,MACjC,SAAS,WAAW,SAAY;AAAA,MAC/B,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;;;"}

package/dist/cjs/components/Tag/Tag.styles.cjs

@@ -3,11 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const focusUtils = require("../../utils/focusUtils.cjs");
 const classes = require("../../utils/classes.cjs");
-const hexToRgbA = require("../../utils/hexToRgbA.cjs");
-const {
-  staticClasses,
-  useClasses
-} = classes.createClasses("HvTag", {
+const { staticClasses, useClasses } = classes.createClasses("HvTag", {
   root: {},
   chipRoot: {
     "&.MuiChip-root": {
@@ -16,7 +12,7 @@ const {
       maxWidth: 180,
       fontFamily: uikitStyles.theme.fontFamily.body,
       "&:focus-visible": {
-        backgroundColor: hexToRgbA.hexToRgbA(uikitStyles.theme.colors.base_light, 0.3)
+        backgroundColor: uikitStyles.theme.alpha("base_light", 0.3)
       },
       "&$categorical": {
         borderRadius: 8,

package/dist/cjs/components/Tag/Tag.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.styles.cjs","sources":["../../../../src/components/Tag/Tag.styles.tsx"],"sourcesContent":["import { CSSProperties } from \"react\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\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      \"&:focus-visible\": {\n        backgroundColor: hexToRgbA(theme.colors.base_light, 0.3),\n      },\n\n      \"&$categorical\": {\n        borderRadius: 8,\n        \"& $label\": {\n          color: theme.colors.secondary,\n        },\n      },\n    },\n\n    \"&$disabled\": {\n      opacity: 1,\n      backgroundColor: theme.colors.atmo3,\n      \"& $label\": {\n        color: theme.colors.secondary_60,\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      padding: 0,\n      \"&:hover\": {\n        backgroundColor: theme.colors.containerBackgroundHover,\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  disabled: {},\n\n  clickable: {\n    cursor: \"pointer\",\n    \"&:focus-visible\": {\n      ...outlineStyles,\n    },\n  },\n\n  categorical: {},\n\n  label: {},\n\n  deleteIcon: {},\n\n  // TODO: redundant - use deleteIcon. remove in v6\n  button: {},\n  tagButton: {},\n  // TODO: redundant - use $clickable or :not($disabled). remove in v6\n  focusVisible: {},\n  disabledDeleteIcon: {},\n  categoricalFocus: {},\n  categoricalDisabled: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root","chipRoot","height","borderRadius","maxWidth","fontFamily","theme","body","backgroundColor","hexToRgbA","colors","base_light","color","secondary","opacity","atmo3","secondary_60","paddingLeft","space","xs","paddingRight","typography","caption1","base_dark","marginRight","width","padding","containerBackgroundHover","outlineStyles","outline","boxShadow","disabled","clickable","cursor","categorical","label","deleteIcon","button","tagButton","focusVisible","disabledDeleteIcon","categoricalFocus","categoricalDisabled"],"mappings":";;;;;;AAOa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,SAAS;AAAA,EAClEC,MAAM,CAAC;AAAA,EAEPC,UAAU;AAAA,IACR,kBAAkB;AAAA,MAChBC,QAAQ;AAAA,MACRC,cAAc;AAAA,MACdC,UAAU;AAAA,MACVC,YAAYC,YAAAA,MAAMD,WAAWE;AAAAA,MAE7B,mBAAmB;AAAA,QACjBC,iBAAiBC,UAAAA,UAAUH,YAAAA,MAAMI,OAAOC,YAAY,GAAG;AAAA,MACzD;AAAA,MAEA,iBAAiB;AAAA,QACfR,cAAc;AAAA,QACd,YAAY;AAAA,UACVS,OAAON,YAAAA,MAAMI,OAAOG;AAAAA,QACtB;AAAA,MACF;AAAA,IACF;AAAA,IAEA,cAAc;AAAA,MACZC,SAAS;AAAA,MACTN,iBAAiBF,YAAAA,MAAMI,OAAOK;AAAAA,MAC9B,YAAY;AAAA,QACVH,OAAON,YAAAA,MAAMI,OAAOM;AAAAA,MACtB;AAAA,IACF;AAAA,IAEA,oBAAoB;AAAA,MAClBC,aAAaX,YAAAA,MAAMY,MAAMC;AAAAA,MACzBC,cAAcd,YAAAA,MAAMY,MAAMC;AAAAA,MAC1B,GAAIb,YAAAA,MAAMe,WAAWC;AAAAA,MACrBV,OAAON,YAAAA,MAAMI,OAAOa;AAAAA,MACpB,OAAO;AAAA,QACLX,OAAON,YAAAA,MAAMI,OAAOa;AAAAA,MACtB;AAAA,IACF;AAAA,IAEA,yBAAyB;AAAA,MACvBC,aAAa;AAAA,MACbC,OAAO;AAAA,MACPvB,QAAQ;AAAA,MACRwB,SAAS;AAAA,MACT,WAAW;AAAA,QACTlB,iBAAiBF,YAAAA,MAAMI,OAAOiB;AAAAA,MAChC;AAAA,MACA,WAAW;AAAA,QACT,GAAGC,WAAAA;AAAAA,QACHzB,cAAc;AAAA,MAChB;AAAA,MACA,+BAA+B;AAAA,QAC7B0B,SAAS;AAAA,QACTC,WAAW;AAAA,MACb;AAAA,IACF;AAAA,EACF;AAAA,EAEAC,UAAU,CAAC;AAAA,EAEXC,WAAW;AAAA,IACTC,QAAQ;AAAA,IACR,mBAAmB;AAAA,MACjB,GAAGL,WAAAA;AAAAA,IACL;AAAA,EACF;AAAA,EAEAM,aAAa,CAAC;AAAA,EAEdC,OAAO,CAAC;AAAA,EAERC,YAAY,CAAC;AAAA;AAAA,EAGbC,QAAQ,CAAC;AAAA,EACTC,WAAW,CAAC;AAAA;AAAA,EAEZC,cAAc,CAAC;AAAA,EACfC,oBAAoB,CAAC;AAAA,EACrBC,kBAAkB,CAAC;AAAA,EACnBC,qBAAqB,CAAC;AACxB,CAAC;;;"}
+{"version":3,"file":"Tag.styles.cjs","sources":["../../../../src/components/Tag/Tag.styles.tsx"],"sourcesContent":["import { CSSProperties } from \"react\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\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      \"&:focus-visible\": {\n        backgroundColor: theme.alpha(\"base_light\", 0.3),\n      },\n\n      \"&$categorical\": {\n        borderRadius: 8,\n        \"& $label\": {\n          color: theme.colors.secondary,\n        },\n      },\n    },\n\n    \"&$disabled\": {\n      opacity: 1,\n      backgroundColor: theme.colors.atmo3,\n      \"& $label\": {\n        color: theme.colors.secondary_60,\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      padding: 0,\n      \"&:hover\": {\n        backgroundColor: theme.colors.containerBackgroundHover,\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  disabled: {},\n\n  clickable: {\n    cursor: \"pointer\",\n    \"&:focus-visible\": {\n      ...outlineStyles,\n    },\n  },\n\n  categorical: {},\n\n  label: {},\n\n  deleteIcon: {},\n\n  // TODO: redundant - use deleteIcon. remove in v6\n  button: {},\n  tagButton: {},\n  // TODO: redundant - use $clickable or :not($disabled). remove in v6\n  focusVisible: {},\n  disabledDeleteIcon: {},\n  categoricalFocus: {},\n  categoricalDisabled: {},\n});\n"],"names":["createClasses","theme","outlineStyles"],"mappings":";;;;;AAMO,MAAM,EAAE,eAAe,eAAeA,QAAAA,cAAc,SAAS;AAAA,EAClE,MAAM,CAAC;AAAA,EAEP,UAAU;AAAA,IACR,kBAAkB;AAAA,MAChB,QAAQ;AAAA,MACR,cAAc;AAAA,MACd,UAAU;AAAA,MACV,YAAYC,YAAAA,MAAM,WAAW;AAAA,MAE7B,mBAAmB;AAAA,QACjB,iBAAiBA,YAAA,MAAM,MAAM,cAAc,GAAG;AAAA,MAChD;AAAA,MAEA,iBAAiB;AAAA,QACf,cAAc;AAAA,QACd,YAAY;AAAA,UACV,OAAOA,YAAAA,MAAM,OAAO;AAAA,QACtB;AAAA,MACF;AAAA,IACF;AAAA,IAEA,cAAc;AAAA,MACZ,SAAS;AAAA,MACT,iBAAiBA,YAAAA,MAAM,OAAO;AAAA,MAC9B,YAAY;AAAA,QACV,OAAOA,YAAAA,MAAM,OAAO;AAAA,MACtB;AAAA,IACF;AAAA,IAEA,oBAAoB;AAAA,MAClB,aAAaA,YAAAA,MAAM,MAAM;AAAA,MACzB,cAAcA,YAAAA,MAAM,MAAM;AAAA,MAC1B,GAAIA,YAAAA,MAAM,WAAW;AAAA,MACrB,OAAOA,YAAAA,MAAM,OAAO;AAAA,MACpB,OAAO;AAAA,QACL,OAAOA,YAAAA,MAAM,OAAO;AAAA,MACtB;AAAA,IACF;AAAA,IAEA,yBAAyB;AAAA,MACvB,aAAa;AAAA,MACb,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,WAAW;AAAA,QACT,iBAAiBA,YAAAA,MAAM,OAAO;AAAA,MAChC;AAAA,MACA,WAAW;AAAA,QACT,GAAGC,WAAA;AAAA,QACH,cAAc;AAAA,MAChB;AAAA,MACA,+BAA+B;AAAA,QAC7B,SAAS;AAAA,QACT,WAAW;AAAA,MACb;AAAA,IACF;AAAA,EACF;AAAA,EAEA,UAAU,CAAC;AAAA,EAEX,WAAW;AAAA,IACT,QAAQ;AAAA,IACR,mBAAmB;AAAA,MACjB,GAAGA,WAAA;AAAA,IACL;AAAA,EACF;AAAA,EAEA,aAAa,CAAC;AAAA,EAEd,OAAO,CAAC;AAAA,EAER,YAAY,CAAC;AAAA;AAAA,EAGb,QAAQ,CAAC;AAAA,EACT,WAAW,CAAC;AAAA;AAAA,EAEZ,cAAc,CAAC;AAAA,EACf,oBAAoB,CAAC;AAAA,EACrB,kBAAkB,CAAC;AAAA,EACnB,qBAAqB,CAAC;AACxB,CAAC;;;"}