@hitachivantara/uikit-react-core 5.40.1 → 5.41.1

package/dist/cjs/{Snackbar/SnackbarProvider → SnackbarProvider}/SnackbarProvider.cjs

@@ -4,7 +4,7 @@ const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
 const notistack = require("notistack");
 const SnackbarProvider_styles = require("./SnackbarProvider.styles.cjs");
-const SnackbarContent = require("../SnackbarContent/SnackbarContent.cjs");
+const SnackbarContent = require("../Snackbar/SnackbarContent/SnackbarContent.cjs");
 const HvNotistackSnackMessage = React.forwardRef((props, ref) => {
   const { id, message, variant = "success", snackbarContentProps } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(notistack.SnackbarContent, { ref, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -20,7 +20,11 @@ const HvNotistackSnackMessage = React.forwardRef((props, ref) => {
   ) });
 });
 const useHvSnackbar = () => {
-  const { enqueueSnackbar: enqueueNotistackSnackbar, closeSnackbar } = notistack.useSnackbar();
+  const snackbarContext = notistack.useSnackbar();
+  if (!snackbarContext) {
+    throw new Error("useHvSnackbar must be used within an HvSnackbarProvider");
+  }
+  const { enqueueSnackbar: enqueueNotistackSnackbar, closeSnackbar } = snackbarContext;
   const enqueueSnackbar = React.useCallback(
     (message, options = {}) => {
       const {

package/dist/cjs/SnackbarProvider/SnackbarProvider.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SnackbarProvider.cjs","sources":["../../../src/SnackbarProvider/SnackbarProvider.tsx"],"sourcesContent":["import { forwardRef, ReactNode, useCallback, useMemo } from \"react\";\n\nimport {\n  CombinedClassKey,\n  OptionsObject,\n  SnackbarContent,\n  SnackbarProvider,\n  SnackbarProviderProps,\n  useSnackbar,\n} from \"notistack\";\n\nimport { SnackbarOrigin } from \"@mui/material/Snackbar\";\nimport { ClassNameMap } from \"@mui/material/styles\";\n\nimport { ExtractNames } from \"../utils/classes\";\nimport {\n  HvSnackbarContent,\n  HvSnackbarContentProps,\n} from \"../Snackbar/SnackbarContent\";\nimport { HvSnackbarVariant } from \"../Snackbar/types\";\nimport { staticClasses, useClasses } from \"./SnackbarProvider.styles\";\n\nexport { staticClasses as snackbarProviderClasses };\n\nexport type HvSnackbarProviderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSnackbarProviderProps {\n  /** Your component tree. */\n  children: React.ReactNode;\n  /** Max visible snackbars. */\n  maxSnack?: number;\n  /** How much time the snackbar remains visible in milliseconds. */\n  autoHideDuration?: number;\n  /** Where is the snackbar placed. */\n  anchorOrigin?: SnackbarOrigin;\n  /** Class object used to override notistack classes. */\n  notistackClassesOverride?: Partial<ClassNameMap<CombinedClassKey>>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvSnackbarProviderClasses;\n  className?: string;\n}\n\nexport interface HvNotistackSnackMessageProps extends OptionsObject {\n  /** Id to be applied to the root node. */\n  id?: string;\n  /** class name to apply on the root node */\n  className?: string;\n  /** Your component tree. */\n  message?: ReactNode;\n  /** Variant of the snackbar. */\n  variant?: HvSnackbarVariant;\n  /** Extra values to pass to the snackbar. */\n  snackbarContentProps?: HvSnackbarContentProps;\n}\n\nconst HvNotistackSnackMessage = forwardRef<\n  HTMLDivElement,\n  HvNotistackSnackMessageProps\n>((props, ref) => {\n  const { id, message, variant = \"success\", snackbarContentProps } = props;\n  return (\n    <SnackbarContent ref={ref}>\n      <HvSnackbarContent\n        id={id}\n        variant={variant}\n        showIcon\n        label={message}\n        role=\"none\"\n        {...snackbarContentProps}\n      />\n    </SnackbarContent>\n  );\n});\n\n// We override notistack hook to be able to customize the snackbar that should be called.\nexport const useHvSnackbar = () => {\n  const snackbarContext = useSnackbar();\n\n  if (!snackbarContext) {\n    throw new Error(\"useHvSnackbar must be used within an HvSnackbarProvider\");\n  }\n\n  const { enqueueSnackbar: enqueueNotistackSnackbar, closeSnackbar } =\n    snackbarContext;\n\n  const enqueueSnackbar = useCallback(\n    (message: ReactNode, options: HvNotistackSnackMessageProps = {}) => {\n      const {\n        id,\n        variant = \"success\",\n        snackbarContentProps,\n        className,\n        ...otherOptions\n      } = options;\n\n      return enqueueNotistackSnackbar(\n        <HvNotistackSnackMessage\n          id={id}\n          message={message}\n          variant={variant}\n          snackbarContentProps={snackbarContentProps}\n        />,\n        { ...otherOptions, className }\n      );\n    },\n    [enqueueNotistackSnackbar]\n  );\n  return useMemo(\n    () => ({\n      enqueueSnackbar,\n      closeSnackbar,\n    }),\n    [enqueueSnackbar, closeSnackbar]\n  );\n};\n\nexport const HvSnackbarProvider = ({\n  children,\n  notistackClassesOverride,\n  maxSnack = 5,\n  autoHideDuration = 5000,\n  anchorOrigin = {\n    vertical: \"top\",\n    horizontal: \"right\",\n  },\n  classes: classesProp,\n  className,\n  ...others\n}: HvSnackbarProviderProps) => {\n  const { classes, css, cx } = useClasses(classesProp);\n\n  const notistackClasses: SnackbarProviderProps[\"classes\"] = {\n    containerRoot: css({\n      pointerEvents: \"all\",\n      \"& > div > div\": {\n        // Overrides notistack extra padding\n        padding: \"0 !important\",\n        transition: \"all 0s ease 0s !important\",\n      },\n    }),\n    ...notistackClassesOverride,\n  };\n\n  return (\n    <SnackbarProvider\n      classes={notistackClasses}\n      maxSnack={maxSnack}\n      autoHideDuration={autoHideDuration}\n      anchorOrigin={anchorOrigin as SnackbarOrigin}\n      className={cx(classes.snackItemRoot, className)}\n      {...others}\n    >\n      {children}\n    </SnackbarProvider>\n  );\n};\n"],"names":["forwardRef","jsx","SnackbarContent","HvSnackbarContent","useSnackbar","useCallback","useMemo","useClasses","SnackbarProvider"],"mappings":";;;;;;;AAuDA,MAAM,0BAA0BA,MAAA,WAG9B,CAAC,OAAO,QAAQ;AAChB,QAAM,EAAE,IAAI,SAAS,UAAU,WAAW,qBAAyB,IAAA;AAEjE,SAAAC,2BAAA,IAACC,6BAAgB,KACf,UAAAD,2BAAA;AAAA,IAACE,gBAAA;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,UAAQ;AAAA,MACR,OAAO;AAAA,MACP,MAAK;AAAA,MACJ,GAAG;AAAA,IAAA;AAAA,EAER,EAAA,CAAA;AAEJ,CAAC;AAGM,MAAM,gBAAgB,MAAM;AACjC,QAAM,kBAAkBC,UAAAA;AAExB,MAAI,CAAC,iBAAiB;AACd,UAAA,IAAI,MAAM,yDAAyD;AAAA,EAC3E;AAEA,QAAM,EAAE,iBAAiB,0BAA0B,cAAA,IACjD;AAEF,QAAM,kBAAkBC,MAAA;AAAA,IACtB,CAAC,SAAoB,UAAwC,OAAO;AAC5D,YAAA;AAAA,QACJ;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MACD,IAAA;AAEG,aAAA;AAAA,QACLJ,2BAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,QACA,EAAE,GAAG,cAAc,UAAU;AAAA,MAAA;AAAA,IAEjC;AAAA,IACA,CAAC,wBAAwB;AAAA,EAAA;AAEpB,SAAAK,MAAA;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IAAA;AAAA,IAEF,CAAC,iBAAiB,aAAa;AAAA,EAAA;AAEnC;AAEO,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,mBAAmB;AAAA,EACnB,eAAe;AAAA,IACb,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA,GAAG;AACL,MAA+B;AAC7B,QAAM,EAAE,SAAS,KAAK,GAAG,IAAIC,wBAAAA,WAAW,WAAW;AAEnD,QAAM,mBAAqD;AAAA,IACzD,eAAe,IAAI;AAAA,MACjB,eAAe;AAAA,MACf,iBAAiB;AAAA;AAAA,QAEf,SAAS;AAAA,QACT,YAAY;AAAA,MACd;AAAA,IAAA,CACD;AAAA,IACD,GAAG;AAAA,EAAA;AAIH,SAAAN,2BAAA;AAAA,IAACO,UAAA;AAAA,IAAA;AAAA,MACC,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,GAAG,QAAQ,eAAe,SAAS;AAAA,MAC7C,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;;;;"}

package/dist/cjs/{Snackbar/SnackbarProvider → SnackbarProvider}/SnackbarProvider.styles.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const classes = require("../../utils/classes.cjs");
+const classes = require("../utils/classes.cjs");
 const { useClasses, staticClasses } = classes.createClasses(
   "HvSnackbarProvider",
   {

package/dist/cjs/SnackbarProvider/SnackbarProvider.styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SnackbarProvider.styles.cjs","sources":["../../../src/SnackbarProvider/SnackbarProvider.styles.ts"],"sourcesContent":["import { createClasses } from \"../utils/classes\";\n\nexport const { useClasses, staticClasses } = createClasses(\n  \"HvSnackbarProvider\",\n  {\n    snackItemRoot: {\n      backgroundColor: \"transparent !important\",\n      boxShadow: \"none !important\",\n      \"&&\": {\n        color: \"inherit\",\n        padding: \"0\",\n        fontSize: \"inherit\",\n        boxShadow: \"none\",\n        alignItems: \"center\",\n        fontFamily: \"inherit\",\n        fontWeight: \"inherit\",\n        lineHeight: \"inherit\",\n        borderRadius: \"0\",\n        letterSpacing: \"inherit\",\n        backgroundColor: \"inherit\",\n      },\n    },\n  }\n);\n"],"names":["createClasses"],"mappings":";;;AAEa,MAAA,EAAE,YAAY,cAAA,IAAkBA,QAAA;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,eAAe;AAAA,MACb,iBAAiB;AAAA,MACjB,WAAW;AAAA,MACX,MAAM;AAAA,QACJ,OAAO;AAAA,QACP,SAAS;AAAA,QACT,UAAU;AAAA,QACV,WAAW;AAAA,QACX,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,cAAc;AAAA,QACd,eAAe;AAAA,QACf,iBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,EACF;AACF;;;"}

package/dist/cjs/Tag/Tag.cjs

@@ -6,6 +6,7 @@ const Chip = require("@mui/material/Chip");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const useTheme = require("../hooks/useTheme.cjs");
 const useDefaultProps = require("../hooks/useDefaultProps.cjs");
+const useControlled = require("../hooks/useControlled.cjs");
 const Tag_styles = require("./Tag.styles.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const Chip__default = /* @__PURE__ */ _interopDefault(Chip);
@@ -20,6 +21,9 @@ const HvTag = (props) => {
     label,
     disabled,
     type = "semantic",
+    selectable,
+    selected,
+    defaultSelected = false,
     color,
     deleteIcon,
     onDelete,
@@ -32,13 +36,16 @@ const HvTag = (props) => {
   } = useDefaultProps.useDefaultProps("HvTag", props);
   const { colors } = useTheme.useTheme();
   const { classes, cx, css } = Tag_styles.useClasses(classesProp);
+  const [isSelected, setIsSelected] = useControlled.useControlled(
+    selected,
+    Boolean(defaultSelected)
+  );
   const defaultDeleteIcon = /* @__PURE__ */ jsxRuntime.jsx(
     uikitReactIcons.CloseXS,
     {
       role: "none",
       className: cx(classes.button, classes.tagButton),
       iconSize: "XS",
-      color: "base_dark",
       ...deleteButtonProps
     }
   );
@@ -50,6 +57,15 @@ const HvTag = (props) => {
       boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}`
     }
   });
+  const onClickHandler = (event) => {
+    if (disabled)
+      return;
+    if (selectable)
+      setIsSelected(!isSelected);
+    onClick?.(event, !isSelected);
+  };
+  const colorOverride = disabled && ["atmo3", "secondary_60"] || void 0;
+  const avatarIcon = isSelected ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.CheckboxCheck, { color: colorOverride, iconSize: "XS" }) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Checkbox, { color: colorOverride, iconSize: "XS" });
   return /* @__PURE__ */ jsxRuntime.jsx(
     Chip__default.default,
     {
@@ -75,7 +91,11 @@ const HvTag = (props) => {
       },
       deleteIcon: deleteIcon || defaultDeleteIcon,
       onDelete: disabled ? void 0 : onDelete,
-      onClick: disabled ? void 0 : onClick,
+      onClick: onClickHandler,
+      "aria-pressed": isSelected,
+      ...selectable && type === "semantic" && {
+        avatar: avatarIcon
+      },
       ...others
     }
   );

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.cjs","sources":["../../../src/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 \"../hooks/useTheme\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../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;;;"}
+{"version":3,"file":"Tag.cjs","sources":["../../../src/Tag/Tag.tsx"],"sourcesContent":["import React, { HTMLAttributes } from \"react\";\nimport { HvColorAny, getColor } from \"@hitachivantara/uikit-styles\";\nimport Chip, { ChipProps as MuiChipProps } from \"@mui/material/Chip\";\n\nimport {\n  Checkbox,\n  CheckboxCheck,\n  CloseXS,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { useTheme } from \"../hooks/useTheme\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { useControlled } from \"../hooks/useControlled\";\n\nimport { staticClasses, useClasses } from \"./Tag.styles\";\n\nexport { staticClasses as tagClasses };\n\nexport type HvTagClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTagProps\n  extends Omit<MuiChipProps, \"color\" | \"classes\" | \"onSelect\"> {\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>, selected?: boolean) => 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  /** Determines whether or not the tag is selectable. */\n  selectable?: boolean;\n  /** Defines if the tag is selected. When defined the tag state becomes controlled. */\n  selected?: boolean;\n  /** When uncontrolled, defines the initial selected state. */\n  defaultSelected?: boolean;\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    selectable,\n    selected,\n    defaultSelected = false,\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 [isSelected, setIsSelected] = useControlled(\n    selected,\n    Boolean(defaultSelected)\n  );\n\n  const defaultDeleteIcon = (\n    <CloseXS\n      role=\"none\"\n      className={cx(classes.button, classes.tagButton)}\n      iconSize=\"XS\"\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  const onClickHandler = (event) => {\n    if (disabled) return;\n    if (selectable) setIsSelected(!isSelected);\n    onClick?.(event, !isSelected);\n  };\n\n  const colorOverride = (disabled && [\"atmo3\", \"secondary_60\"]) || undefined;\n\n  const avatarIcon = isSelected ? (\n    <CheckboxCheck color={colorOverride} iconSize=\"XS\" />\n  ) : (\n    <Checkbox color={colorOverride} iconSize=\"XS\" />\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={onClickHandler}\n      aria-pressed={isSelected}\n      {...(selectable &&\n        type === \"semantic\" && {\n          avatar: avatarIcon,\n        })}\n      {...others}\n    />\n  );\n};\n"],"names":["useDefaultProps","useTheme","useClasses","useControlled","jsx","CloseXS","getColor","CheckboxCheck","Checkbox","Chip"],"mappings":";;;;;;;;;;;;AA6DA,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,kBAAkB;AAAA,IAClB;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;AAE7C,QAAA,CAAC,YAAY,aAAa,IAAIC,cAAA;AAAA,IAClC;AAAA,IACA,QAAQ,eAAe;AAAA,EAAA;AAGzB,QAAM,oBACJC,2BAAA;AAAA,IAACC,gBAAA;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW,GAAG,QAAQ,QAAQ,QAAQ,SAAS;AAAA,MAC/C,UAAS;AAAA,MACR,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;AAEK,QAAA,iBAAiB,CAAC,UAAU;AAC5B,QAAA;AAAU;AACV,QAAA;AAAY,oBAAc,CAAC,UAAU;AAC/B,cAAA,OAAO,CAAC,UAAU;AAAA,EAAA;AAG9B,QAAM,gBAAiB,YAAY,CAAC,SAAS,cAAc,KAAM;AAEjE,QAAM,aAAa,aAChBF,2BAAA,IAAAG,gBAAA,eAAA,EAAc,OAAO,eAAe,UAAS,KAAK,CAAA,IAElDH,2BAAAA,IAAAI,gBAAAA,UAAA,EAAS,OAAO,eAAe,UAAS,KAAK,CAAA;AAI9C,SAAAJ,2BAAA;AAAA,IAACK,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;AAAA,MACT,gBAAc;AAAA,MACb,GAAI,cACH,SAAS,cAAc;AAAA,QACrB,QAAQ;AAAA,MACV;AAAA,MACD,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;;;"}

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

@@ -1,12 +1,21 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
+const Chip = require("@mui/material/Chip");
 const focusUtils = require("../utils/focusUtils.cjs");
 const classes = require("../utils/classes.cjs");
 const { staticClasses, useClasses } = classes.createClasses("HvTag", {
-  root: {},
+  root: {
+    color: uikitStyles.theme.colors.base_dark,
+    [`& .${Chip.chipClasses.avatar}`]: {
+      width: 12,
+      height: 12,
+      marginLeft: 2,
+      marginRight: 0
+    }
+  },
   chipRoot: {
-    "&.MuiChip-root": {
+    [`&.${Chip.chipClasses.root}`]: {
       height: 16,
       borderRadius: 0,
       maxWidth: 180,
@@ -28,22 +37,24 @@ const { staticClasses, useClasses } = classes.createClasses("HvTag", {
         color: uikitStyles.theme.colors.secondary_60
       }
     },
-    "& .MuiChip-label": {
-      paddingLeft: uikitStyles.theme.space.xs,
-      paddingRight: uikitStyles.theme.space.xs,
-      ...uikitStyles.theme.typography.caption1,
-      color: uikitStyles.theme.colors.base_dark,
-      "& p": {
-        color: uikitStyles.theme.colors.base_dark
-      }
+    [`& .${Chip.chipClasses.label}`]: {
+      paddingLeft: 4,
+      paddingRight: 4,
+      ...uikitStyles.theme.typography.caption2,
+      color: "currentcolor"
     },
-    "& .MuiChip-deleteIcon": {
-      marginRight: 0,
+    [`& .${Chip.chipClasses.deleteIcon}`]: {
+      margin: 0,
       width: 16,
       height: 16,
       padding: 0,
+      color: "currentColor",
+      "& svg .color0": {
+        fill: "currentcolor"
+      },
       "&:hover": {
-        backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
+        backgroundColor: uikitStyles.theme.colors.containerBackgroundHover,
+        color: "unset"
       },
       "&:focus": {
         ...focusUtils.outlineStyles,

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.styles.cjs","sources":["../../../src/Tag/Tag.styles.tsx"],"sourcesContent":["import { CSSProperties } from \"react\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\nimport { createClasses } from \"../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;;;"}
+{"version":3,"file":"Tag.styles.cjs","sources":["../../../src/Tag/Tag.styles.tsx"],"sourcesContent":["import { CSSProperties } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { chipClasses } from \"@mui/material/Chip\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTag\", {\n  root: {\n    color: theme.colors.base_dark,\n\n    [`& .${chipClasses.avatar}`]: {\n      width: 12,\n      height: 12,\n      marginLeft: 2,\n      marginRight: 0,\n    },\n  },\n\n  chipRoot: {\n    [`&.${chipClasses.root}`]: {\n      height: 16,\n      borderRadius: 0,\n      maxWidth: 180,\n      fontFamily: theme.fontFamily.body,\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    [`& .${chipClasses.label}`]: {\n      paddingLeft: 4,\n      paddingRight: 4,\n      ...(theme.typography.caption2 as CSSProperties),\n      color: \"currentcolor\",\n    },\n\n    [`& .${chipClasses.deleteIcon}`]: {\n      margin: 0,\n      width: 16,\n      height: 16,\n      padding: 0,\n      color: \"currentColor\",\n      \"& svg .color0\": {\n        fill: \"currentcolor\",\n      },\n      \"&:hover\": {\n        backgroundColor: theme.colors.containerBackgroundHover,\n        color: \"unset\",\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","chipClasses","outlineStyles"],"mappings":";;;;;;AAUO,MAAM,EAAE,eAAe,eAAeA,QAAAA,cAAc,SAAS;AAAA,EAClE,MAAM;AAAA,IACJ,OAAOC,YAAAA,MAAM,OAAO;AAAA,IAEpB,CAAC,MAAMC,iBAAY,MAAM,EAAE,GAAG;AAAA,MAC5B,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EAEA,UAAU;AAAA,IACR,CAAC,KAAKA,iBAAY,IAAI,EAAE,GAAG;AAAA,MACzB,QAAQ;AAAA,MACR,cAAc;AAAA,MACd,UAAU;AAAA,MACV,YAAYD,YAAAA,MAAM,WAAW;AAAA,MAC7B,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,CAAC,MAAMC,iBAAY,KAAK,EAAE,GAAG;AAAA,MAC3B,aAAa;AAAA,MACb,cAAc;AAAA,MACd,GAAID,YAAAA,MAAM,WAAW;AAAA,MACrB,OAAO;AAAA,IACT;AAAA,IAEA,CAAC,MAAMC,iBAAY,UAAU,EAAE,GAAG;AAAA,MAChC,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,OAAO;AAAA,MACP,iBAAiB;AAAA,QACf,MAAM;AAAA,MACR;AAAA,MACA,WAAW;AAAA,QACT,iBAAiBD,YAAAA,MAAM,OAAO;AAAA,QAC9B,OAAO;AAAA,MACT;AAAA,MACA,WAAW;AAAA,QACT,GAAGE,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;;;"}

package/dist/cjs/index.cjs

@@ -225,10 +225,10 @@ const Slider_styles = require("./Slider/Slider.styles.cjs");
 const Slider = require("./Slider/Slider.cjs");
 const Snackbar_styles = require("./Snackbar/Snackbar.styles.cjs");
 const Snackbar = require("./Snackbar/Snackbar.cjs");
-const SnackbarProvider_styles = require("./Snackbar/SnackbarProvider/SnackbarProvider.styles.cjs");
-const SnackbarProvider = require("./Snackbar/SnackbarProvider/SnackbarProvider.cjs");
 const SnackbarContent_styles = require("./Snackbar/SnackbarContent/SnackbarContent.styles.cjs");
 const SnackbarContent = require("./Snackbar/SnackbarContent/SnackbarContent.cjs");
+const SnackbarProvider_styles = require("./SnackbarProvider/SnackbarProvider.styles.cjs");
+const SnackbarProvider = require("./SnackbarProvider/SnackbarProvider.cjs");
 const Stack_styles = require("./Stack/Stack.styles.cjs");
 const Stack = require("./Stack/Stack.cjs");
 const Switch_styles = require("./Switch/Switch.styles.cjs");
@@ -571,11 +571,11 @@ exports.sliderClasses = Slider_styles.staticClasses;
 exports.HvSlider = Slider.HvSlider;
 exports.snackbarClasses = Snackbar_styles.staticClasses;
 exports.HvSnackbar = Snackbar.HvSnackbar;
+exports.snackbarContentClasses = SnackbarContent_styles.staticClasses;
+exports.HvSnackbarContent = SnackbarContent.HvSnackbarContent;
 exports.snackbarProviderClasses = SnackbarProvider_styles.staticClasses;
 exports.HvSnackbarProvider = SnackbarProvider.HvSnackbarProvider;
 exports.useHvSnackbar = SnackbarProvider.useHvSnackbar;
-exports.snackbarContentClasses = SnackbarContent_styles.staticClasses;
-exports.HvSnackbarContent = SnackbarContent.HvSnackbarContent;
 exports.stackClasses = Stack_styles.staticClasses;
 exports.HvStack = Stack.HvStack;
 exports.switchClasses = Switch_styles.staticClasses;

package/dist/esm/{Snackbar/SnackbarProvider → SnackbarProvider}/SnackbarProvider.js

@@ -3,7 +3,7 @@ import { forwardRef, useCallback, useMemo } from "react";
 import { SnackbarContent, useSnackbar, SnackbarProvider } from "notistack";
 import { useClasses } from "./SnackbarProvider.styles.js";
 import { staticClasses } from "./SnackbarProvider.styles.js";
-import { HvSnackbarContent } from "../SnackbarContent/SnackbarContent.js";
+import { HvSnackbarContent } from "../Snackbar/SnackbarContent/SnackbarContent.js";
 const HvNotistackSnackMessage = forwardRef((props, ref) => {
   const { id, message, variant = "success", snackbarContentProps } = props;
   return /* @__PURE__ */ jsx(SnackbarContent, { ref, children: /* @__PURE__ */ jsx(
@@ -19,7 +19,11 @@ const HvNotistackSnackMessage = forwardRef((props, ref) => {
   ) });
 });
 const useHvSnackbar = () => {
-  const { enqueueSnackbar: enqueueNotistackSnackbar, closeSnackbar } = useSnackbar();
+  const snackbarContext = useSnackbar();
+  if (!snackbarContext) {
+    throw new Error("useHvSnackbar must be used within an HvSnackbarProvider");
+  }
+  const { enqueueSnackbar: enqueueNotistackSnackbar, closeSnackbar } = snackbarContext;
   const enqueueSnackbar = useCallback(
     (message, options = {}) => {
       const {

package/dist/esm/SnackbarProvider/SnackbarProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SnackbarProvider.js","sources":["../../../src/SnackbarProvider/SnackbarProvider.tsx"],"sourcesContent":["import { forwardRef, ReactNode, useCallback, useMemo } from \"react\";\n\nimport {\n  CombinedClassKey,\n  OptionsObject,\n  SnackbarContent,\n  SnackbarProvider,\n  SnackbarProviderProps,\n  useSnackbar,\n} from \"notistack\";\n\nimport { SnackbarOrigin } from \"@mui/material/Snackbar\";\nimport { ClassNameMap } from \"@mui/material/styles\";\n\nimport { ExtractNames } from \"../utils/classes\";\nimport {\n  HvSnackbarContent,\n  HvSnackbarContentProps,\n} from \"../Snackbar/SnackbarContent\";\nimport { HvSnackbarVariant } from \"../Snackbar/types\";\nimport { staticClasses, useClasses } from \"./SnackbarProvider.styles\";\n\nexport { staticClasses as snackbarProviderClasses };\n\nexport type HvSnackbarProviderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSnackbarProviderProps {\n  /** Your component tree. */\n  children: React.ReactNode;\n  /** Max visible snackbars. */\n  maxSnack?: number;\n  /** How much time the snackbar remains visible in milliseconds. */\n  autoHideDuration?: number;\n  /** Where is the snackbar placed. */\n  anchorOrigin?: SnackbarOrigin;\n  /** Class object used to override notistack classes. */\n  notistackClassesOverride?: Partial<ClassNameMap<CombinedClassKey>>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvSnackbarProviderClasses;\n  className?: string;\n}\n\nexport interface HvNotistackSnackMessageProps extends OptionsObject {\n  /** Id to be applied to the root node. */\n  id?: string;\n  /** class name to apply on the root node */\n  className?: string;\n  /** Your component tree. */\n  message?: ReactNode;\n  /** Variant of the snackbar. */\n  variant?: HvSnackbarVariant;\n  /** Extra values to pass to the snackbar. */\n  snackbarContentProps?: HvSnackbarContentProps;\n}\n\nconst HvNotistackSnackMessage = forwardRef<\n  HTMLDivElement,\n  HvNotistackSnackMessageProps\n>((props, ref) => {\n  const { id, message, variant = \"success\", snackbarContentProps } = props;\n  return (\n    <SnackbarContent ref={ref}>\n      <HvSnackbarContent\n        id={id}\n        variant={variant}\n        showIcon\n        label={message}\n        role=\"none\"\n        {...snackbarContentProps}\n      />\n    </SnackbarContent>\n  );\n});\n\n// We override notistack hook to be able to customize the snackbar that should be called.\nexport const useHvSnackbar = () => {\n  const snackbarContext = useSnackbar();\n\n  if (!snackbarContext) {\n    throw new Error(\"useHvSnackbar must be used within an HvSnackbarProvider\");\n  }\n\n  const { enqueueSnackbar: enqueueNotistackSnackbar, closeSnackbar } =\n    snackbarContext;\n\n  const enqueueSnackbar = useCallback(\n    (message: ReactNode, options: HvNotistackSnackMessageProps = {}) => {\n      const {\n        id,\n        variant = \"success\",\n        snackbarContentProps,\n        className,\n        ...otherOptions\n      } = options;\n\n      return enqueueNotistackSnackbar(\n        <HvNotistackSnackMessage\n          id={id}\n          message={message}\n          variant={variant}\n          snackbarContentProps={snackbarContentProps}\n        />,\n        { ...otherOptions, className }\n      );\n    },\n    [enqueueNotistackSnackbar]\n  );\n  return useMemo(\n    () => ({\n      enqueueSnackbar,\n      closeSnackbar,\n    }),\n    [enqueueSnackbar, closeSnackbar]\n  );\n};\n\nexport const HvSnackbarProvider = ({\n  children,\n  notistackClassesOverride,\n  maxSnack = 5,\n  autoHideDuration = 5000,\n  anchorOrigin = {\n    vertical: \"top\",\n    horizontal: \"right\",\n  },\n  classes: classesProp,\n  className,\n  ...others\n}: HvSnackbarProviderProps) => {\n  const { classes, css, cx } = useClasses(classesProp);\n\n  const notistackClasses: SnackbarProviderProps[\"classes\"] = {\n    containerRoot: css({\n      pointerEvents: \"all\",\n      \"& > div > div\": {\n        // Overrides notistack extra padding\n        padding: \"0 !important\",\n        transition: \"all 0s ease 0s !important\",\n      },\n    }),\n    ...notistackClassesOverride,\n  };\n\n  return (\n    <SnackbarProvider\n      classes={notistackClasses}\n      maxSnack={maxSnack}\n      autoHideDuration={autoHideDuration}\n      anchorOrigin={anchorOrigin as SnackbarOrigin}\n      className={cx(classes.snackItemRoot, className)}\n      {...others}\n    >\n      {children}\n    </SnackbarProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAuDA,MAAM,0BAA0B,WAG9B,CAAC,OAAO,QAAQ;AAChB,QAAM,EAAE,IAAI,SAAS,UAAU,WAAW,qBAAyB,IAAA;AAEjE,SAAA,oBAAC,mBAAgB,KACf,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,UAAQ;AAAA,MACR,OAAO;AAAA,MACP,MAAK;AAAA,MACJ,GAAG;AAAA,IAAA;AAAA,EAER,EAAA,CAAA;AAEJ,CAAC;AAGM,MAAM,gBAAgB,MAAM;AACjC,QAAM,kBAAkB;AAExB,MAAI,CAAC,iBAAiB;AACd,UAAA,IAAI,MAAM,yDAAyD;AAAA,EAC3E;AAEA,QAAM,EAAE,iBAAiB,0BAA0B,cAAA,IACjD;AAEF,QAAM,kBAAkB;AAAA,IACtB,CAAC,SAAoB,UAAwC,OAAO;AAC5D,YAAA;AAAA,QACJ;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MACD,IAAA;AAEG,aAAA;AAAA,QACL;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,QACA,EAAE,GAAG,cAAc,UAAU;AAAA,MAAA;AAAA,IAEjC;AAAA,IACA,CAAC,wBAAwB;AAAA,EAAA;AAEpB,SAAA;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IAAA;AAAA,IAEF,CAAC,iBAAiB,aAAa;AAAA,EAAA;AAEnC;AAEO,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,mBAAmB;AAAA,EACnB,eAAe;AAAA,IACb,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA,GAAG;AACL,MAA+B;AAC7B,QAAM,EAAE,SAAS,KAAK,GAAG,IAAI,WAAW,WAAW;AAEnD,QAAM,mBAAqD;AAAA,IACzD,eAAe,IAAI;AAAA,MACjB,eAAe;AAAA,MACf,iBAAiB;AAAA;AAAA,QAEf,SAAS;AAAA,QACT,YAAY;AAAA,MACd;AAAA,IAAA,CACD;AAAA,IACD,GAAG;AAAA,EAAA;AAIH,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,GAAG,QAAQ,eAAe,SAAS;AAAA,MAC7C,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/esm/{Snackbar/SnackbarProvider → SnackbarProvider}/SnackbarProvider.styles.js

@@ -1,4 +1,4 @@
-import { createClasses } from "../../utils/classes.js";
+import { createClasses } from "../utils/classes.js";
 const { useClasses, staticClasses } = createClasses(
   "HvSnackbarProvider",
   {

package/dist/esm/SnackbarProvider/SnackbarProvider.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SnackbarProvider.styles.js","sources":["../../../src/SnackbarProvider/SnackbarProvider.styles.ts"],"sourcesContent":["import { createClasses } from \"../utils/classes\";\n\nexport const { useClasses, staticClasses } = createClasses(\n  \"HvSnackbarProvider\",\n  {\n    snackItemRoot: {\n      backgroundColor: \"transparent !important\",\n      boxShadow: \"none !important\",\n      \"&&\": {\n        color: \"inherit\",\n        padding: \"0\",\n        fontSize: \"inherit\",\n        boxShadow: \"none\",\n        alignItems: \"center\",\n        fontFamily: \"inherit\",\n        fontWeight: \"inherit\",\n        lineHeight: \"inherit\",\n        borderRadius: \"0\",\n        letterSpacing: \"inherit\",\n        backgroundColor: \"inherit\",\n      },\n    },\n  }\n);\n"],"names":[],"mappings":";AAEa,MAAA,EAAE,YAAY,cAAA,IAAkB;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,eAAe;AAAA,MACb,iBAAiB;AAAA,MACjB,WAAW;AAAA,MACX,MAAM;AAAA,QACJ,OAAO;AAAA,QACP,SAAS;AAAA,QACT,UAAU;AAAA,QACV,WAAW;AAAA,QACX,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,cAAc;AAAA,QACd,eAAe;AAAA,QACf,iBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,EACF;AACF;"}

package/dist/esm/Tag/Tag.js

@@ -1,9 +1,10 @@
 import { jsx } from "@emotion/react/jsx-runtime";
 import { getColor } from "@hitachivantara/uikit-styles";
 import Chip from "@mui/material/Chip";
-import { CloseXS } from "@hitachivantara/uikit-react-icons";
+import { CloseXS, CheckboxCheck, Checkbox } from "@hitachivantara/uikit-react-icons";
 import { useTheme } from "../hooks/useTheme.js";
 import { useDefaultProps } from "../hooks/useDefaultProps.js";
+import { useControlled } from "../hooks/useControlled.js";
 import { useClasses } from "./Tag.styles.js";
 import { staticClasses } from "./Tag.styles.js";
 const getCategoricalColor = (customColor, colors) => {
@@ -17,6 +18,9 @@ const HvTag = (props) => {
     label,
     disabled,
     type = "semantic",
+    selectable,
+    selected,
+    defaultSelected = false,
     color,
     deleteIcon,
     onDelete,
@@ -29,13 +33,16 @@ const HvTag = (props) => {
   } = useDefaultProps("HvTag", props);
   const { colors } = useTheme();
   const { classes, cx, css } = useClasses(classesProp);
+  const [isSelected, setIsSelected] = useControlled(
+    selected,
+    Boolean(defaultSelected)
+  );
   const defaultDeleteIcon = /* @__PURE__ */ jsx(
     CloseXS,
     {
       role: "none",
       className: cx(classes.button, classes.tagButton),
       iconSize: "XS",
-      color: "base_dark",
       ...deleteButtonProps
     }
   );
@@ -47,6 +54,15 @@ const HvTag = (props) => {
       boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}`
     }
   });
+  const onClickHandler = (event) => {
+    if (disabled)
+      return;
+    if (selectable)
+      setIsSelected(!isSelected);
+    onClick?.(event, !isSelected);
+  };
+  const colorOverride = disabled && ["atmo3", "secondary_60"] || void 0;
+  const avatarIcon = isSelected ? /* @__PURE__ */ jsx(CheckboxCheck, { color: colorOverride, iconSize: "XS" }) : /* @__PURE__ */ jsx(Checkbox, { color: colorOverride, iconSize: "XS" });
   return /* @__PURE__ */ jsx(
     Chip,
     {
@@ -72,7 +88,11 @@ const HvTag = (props) => {
       },
       deleteIcon: deleteIcon || defaultDeleteIcon,
       onDelete: disabled ? void 0 : onDelete,
-      onClick: disabled ? void 0 : onClick,
+      onClick: onClickHandler,
+      "aria-pressed": isSelected,
+      ...selectable && type === "semantic" && {
+        avatar: avatarIcon
+      },
       ...others
     }
   );

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sources":["../../../src/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 \"../hooks/useTheme\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../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":[],"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,IACD,gBAAgB,SAAS,KAAK;AAC5B,QAAA,EAAE,WAAW;AACnB,QAAM,EAAE,SAAS,IAAI,IAAI,IAAI,WAAW,WAAW;AAEnD,QAAM,oBACJ;AAAA,IAAC;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,cAAc,SAAS,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,SAAA;AAAA,IAAC;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;"}
+{"version":3,"file":"Tag.js","sources":["../../../src/Tag/Tag.tsx"],"sourcesContent":["import React, { HTMLAttributes } from \"react\";\nimport { HvColorAny, getColor } from \"@hitachivantara/uikit-styles\";\nimport Chip, { ChipProps as MuiChipProps } from \"@mui/material/Chip\";\n\nimport {\n  Checkbox,\n  CheckboxCheck,\n  CloseXS,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { useTheme } from \"../hooks/useTheme\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { useControlled } from \"../hooks/useControlled\";\n\nimport { staticClasses, useClasses } from \"./Tag.styles\";\n\nexport { staticClasses as tagClasses };\n\nexport type HvTagClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTagProps\n  extends Omit<MuiChipProps, \"color\" | \"classes\" | \"onSelect\"> {\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>, selected?: boolean) => 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  /** Determines whether or not the tag is selectable. */\n  selectable?: boolean;\n  /** Defines if the tag is selected. When defined the tag state becomes controlled. */\n  selected?: boolean;\n  /** When uncontrolled, defines the initial selected state. */\n  defaultSelected?: boolean;\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    selectable,\n    selected,\n    defaultSelected = false,\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 [isSelected, setIsSelected] = useControlled(\n    selected,\n    Boolean(defaultSelected)\n  );\n\n  const defaultDeleteIcon = (\n    <CloseXS\n      role=\"none\"\n      className={cx(classes.button, classes.tagButton)}\n      iconSize=\"XS\"\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  const onClickHandler = (event) => {\n    if (disabled) return;\n    if (selectable) setIsSelected(!isSelected);\n    onClick?.(event, !isSelected);\n  };\n\n  const colorOverride = (disabled && [\"atmo3\", \"secondary_60\"]) || undefined;\n\n  const avatarIcon = isSelected ? (\n    <CheckboxCheck color={colorOverride} iconSize=\"XS\" />\n  ) : (\n    <Checkbox color={colorOverride} iconSize=\"XS\" />\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={onClickHandler}\n      aria-pressed={isSelected}\n      {...(selectable &&\n        type === \"semantic\" && {\n          avatar: avatarIcon,\n        })}\n      {...others}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AA6DA,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,kBAAkB;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA,IAGA,yBAAyB;AAAA,IACzB,oBAAoB,CAAC;AAAA,IACrB,GAAG;AAAA,EAAA,IACD,gBAAgB,SAAS,KAAK;AAC5B,QAAA,EAAE,WAAW;AACnB,QAAM,EAAE,SAAS,IAAI,IAAI,IAAI,WAAW,WAAW;AAE7C,QAAA,CAAC,YAAY,aAAa,IAAI;AAAA,IAClC;AAAA,IACA,QAAQ,eAAe;AAAA,EAAA;AAGzB,QAAM,oBACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW,GAAG,QAAQ,QAAQ,QAAQ,SAAS;AAAA,MAC/C,UAAS;AAAA,MACR,GAAG;AAAA,IAAA;AAAA,EAAA;AAIR,QAAM,6BACJ,SAAS,gBAAgB,oBAAoB,OAAO,MAAM,IAAI;AAE1D,QAAA,kBACH,SAAS,cAAc,SAAS,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;AAEK,QAAA,iBAAiB,CAAC,UAAU;AAC5B,QAAA;AAAU;AACV,QAAA;AAAY,oBAAc,CAAC,UAAU;AAC/B,cAAA,OAAO,CAAC,UAAU;AAAA,EAAA;AAG9B,QAAM,gBAAiB,YAAY,CAAC,SAAS,cAAc,KAAM;AAEjE,QAAM,aAAa,aAChB,oBAAA,eAAA,EAAc,OAAO,eAAe,UAAS,KAAK,CAAA,IAElD,oBAAA,UAAA,EAAS,OAAO,eAAe,UAAS,KAAK,CAAA;AAI9C,SAAA;AAAA,IAAC;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;AAAA,MACT,gBAAc;AAAA,MACb,GAAI,cACH,SAAS,cAAc;AAAA,QACrB,QAAQ;AAAA,MACV;AAAA,MACD,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}

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

@@ -1,10 +1,19 @@
 import { theme } from "@hitachivantara/uikit-styles";
+import { chipClasses } from "@mui/material/Chip";
 import { outlineStyles } from "../utils/focusUtils.js";
 import { createClasses } from "../utils/classes.js";
 const { staticClasses, useClasses } = createClasses("HvTag", {
-  root: {},
+  root: {
+    color: theme.colors.base_dark,
+    [`& .${chipClasses.avatar}`]: {
+      width: 12,
+      height: 12,
+      marginLeft: 2,
+      marginRight: 0
+    }
+  },
   chipRoot: {
-    "&.MuiChip-root": {
+    [`&.${chipClasses.root}`]: {
       height: 16,
       borderRadius: 0,
       maxWidth: 180,
@@ -26,22 +35,24 @@ const { staticClasses, useClasses } = createClasses("HvTag", {
         color: theme.colors.secondary_60
       }
     },
-    "& .MuiChip-label": {
-      paddingLeft: theme.space.xs,
-      paddingRight: theme.space.xs,
-      ...theme.typography.caption1,
-      color: theme.colors.base_dark,
-      "& p": {
-        color: theme.colors.base_dark
-      }
+    [`& .${chipClasses.label}`]: {
+      paddingLeft: 4,
+      paddingRight: 4,
+      ...theme.typography.caption2,
+      color: "currentcolor"
     },
-    "& .MuiChip-deleteIcon": {
-      marginRight: 0,
+    [`& .${chipClasses.deleteIcon}`]: {
+      margin: 0,
       width: 16,
       height: 16,
       padding: 0,
+      color: "currentColor",
+      "& svg .color0": {
+        fill: "currentcolor"
+      },
       "&:hover": {
-        backgroundColor: theme.colors.containerBackgroundHover
+        backgroundColor: theme.colors.containerBackgroundHover,
+        color: "unset"
       },
       "&:focus": {
         ...outlineStyles,

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.styles.js","sources":["../../../src/Tag/Tag.styles.tsx"],"sourcesContent":["import { CSSProperties } from \"react\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\nimport { createClasses } from \"../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":[],"mappings":";;;AAMO,MAAM,EAAE,eAAe,eAAe,cAAc,SAAS;AAAA,EAClE,MAAM,CAAC;AAAA,EAEP,UAAU;AAAA,IACR,kBAAkB;AAAA,MAChB,QAAQ;AAAA,MACR,cAAc;AAAA,MACd,UAAU;AAAA,MACV,YAAY,MAAM,WAAW;AAAA,MAE7B,mBAAmB;AAAA,QACjB,iBAAiB,MAAM,MAAM,cAAc,GAAG;AAAA,MAChD;AAAA,MAEA,iBAAiB;AAAA,QACf,cAAc;AAAA,QACd,YAAY;AAAA,UACV,OAAO,MAAM,OAAO;AAAA,QACtB;AAAA,MACF;AAAA,IACF;AAAA,IAEA,cAAc;AAAA,MACZ,SAAS;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,MAC9B,YAAY;AAAA,QACV,OAAO,MAAM,OAAO;AAAA,MACtB;AAAA,IACF;AAAA,IAEA,oBAAoB;AAAA,MAClB,aAAa,MAAM,MAAM;AAAA,MACzB,cAAc,MAAM,MAAM;AAAA,MAC1B,GAAI,MAAM,WAAW;AAAA,MACrB,OAAO,MAAM,OAAO;AAAA,MACpB,OAAO;AAAA,QACL,OAAO,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,iBAAiB,MAAM,OAAO;AAAA,MAChC;AAAA,MACA,WAAW;AAAA,QACT,GAAG;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,GAAG;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;"}
+{"version":3,"file":"Tag.styles.js","sources":["../../../src/Tag/Tag.styles.tsx"],"sourcesContent":["import { CSSProperties } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { chipClasses } from \"@mui/material/Chip\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTag\", {\n  root: {\n    color: theme.colors.base_dark,\n\n    [`& .${chipClasses.avatar}`]: {\n      width: 12,\n      height: 12,\n      marginLeft: 2,\n      marginRight: 0,\n    },\n  },\n\n  chipRoot: {\n    [`&.${chipClasses.root}`]: {\n      height: 16,\n      borderRadius: 0,\n      maxWidth: 180,\n      fontFamily: theme.fontFamily.body,\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    [`& .${chipClasses.label}`]: {\n      paddingLeft: 4,\n      paddingRight: 4,\n      ...(theme.typography.caption2 as CSSProperties),\n      color: \"currentcolor\",\n    },\n\n    [`& .${chipClasses.deleteIcon}`]: {\n      margin: 0,\n      width: 16,\n      height: 16,\n      padding: 0,\n      color: \"currentColor\",\n      \"& svg .color0\": {\n        fill: \"currentcolor\",\n      },\n      \"&:hover\": {\n        backgroundColor: theme.colors.containerBackgroundHover,\n        color: \"unset\",\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":[],"mappings":";;;;AAUO,MAAM,EAAE,eAAe,eAAe,cAAc,SAAS;AAAA,EAClE,MAAM;AAAA,IACJ,OAAO,MAAM,OAAO;AAAA,IAEpB,CAAC,MAAM,YAAY,MAAM,EAAE,GAAG;AAAA,MAC5B,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EAEA,UAAU;AAAA,IACR,CAAC,KAAK,YAAY,IAAI,EAAE,GAAG;AAAA,MACzB,QAAQ;AAAA,MACR,cAAc;AAAA,MACd,UAAU;AAAA,MACV,YAAY,MAAM,WAAW;AAAA,MAC7B,mBAAmB;AAAA,QACjB,iBAAiB,MAAM,MAAM,cAAc,GAAG;AAAA,MAChD;AAAA,MAEA,iBAAiB;AAAA,QACf,cAAc;AAAA,QACd,YAAY;AAAA,UACV,OAAO,MAAM,OAAO;AAAA,QACtB;AAAA,MACF;AAAA,IACF;AAAA,IAEA,cAAc;AAAA,MACZ,SAAS;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,MAC9B,YAAY;AAAA,QACV,OAAO,MAAM,OAAO;AAAA,MACtB;AAAA,IACF;AAAA,IAEA,CAAC,MAAM,YAAY,KAAK,EAAE,GAAG;AAAA,MAC3B,aAAa;AAAA,MACb,cAAc;AAAA,MACd,GAAI,MAAM,WAAW;AAAA,MACrB,OAAO;AAAA,IACT;AAAA,IAEA,CAAC,MAAM,YAAY,UAAU,EAAE,GAAG;AAAA,MAChC,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,OAAO;AAAA,MACP,iBAAiB;AAAA,QACf,MAAM;AAAA,MACR;AAAA,MACA,WAAW;AAAA,QACT,iBAAiB,MAAM,OAAO;AAAA,QAC9B,OAAO;AAAA,MACT;AAAA,MACA,WAAW;AAAA,QACT,GAAG;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,GAAG;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;"}

package/dist/esm/index.js

@@ -223,10 +223,10 @@ import { staticClasses as staticClasses86 } from "./Slider/Slider.styles.js";
 import { HvSlider } from "./Slider/Slider.js";
 import { staticClasses as staticClasses87 } from "./Snackbar/Snackbar.styles.js";
 import { HvSnackbar } from "./Snackbar/Snackbar.js";
-import { staticClasses as staticClasses88 } from "./Snackbar/SnackbarProvider/SnackbarProvider.styles.js";
-import { HvSnackbarProvider, useHvSnackbar } from "./Snackbar/SnackbarProvider/SnackbarProvider.js";
-import { staticClasses as staticClasses89 } from "./Snackbar/SnackbarContent/SnackbarContent.styles.js";
+import { staticClasses as staticClasses88 } from "./Snackbar/SnackbarContent/SnackbarContent.styles.js";
 import { HvSnackbarContent } from "./Snackbar/SnackbarContent/SnackbarContent.js";
+import { staticClasses as staticClasses89 } from "./SnackbarProvider/SnackbarProvider.styles.js";
+import { HvSnackbarProvider, useHvSnackbar } from "./SnackbarProvider/SnackbarProvider.js";
 import { staticClasses as staticClasses90 } from "./Stack/Stack.styles.js";
 import { HvStack } from "./Stack/Stack.js";
 import { staticClasses as staticClasses91 } from "./Switch/Switch.styles.js";
@@ -597,8 +597,8 @@ export {
   staticClasses85 as simpleGridClasses,
   staticClasses86 as sliderClasses,
   staticClasses87 as snackbarClasses,
-  staticClasses89 as snackbarContentClasses,
-  staticClasses88 as snackbarProviderClasses,
+  staticClasses88 as snackbarContentClasses,
+  staticClasses89 as snackbarProviderClasses,
   staticClasses90 as stackClasses,
   staticClasses12 as suggestionsClasses,
   staticClasses91 as switchClasses,

package/dist/types/index.d.ts

@@ -4567,7 +4567,7 @@ export declare const hvNodeFallback: (value: any) => any;
 export declare interface HvNotistackSnackMessageProps extends OptionsObject {
     /** Id to be applied to the root node. */
     id?: string;
-    /** Classname to apply on the root node */
+    /** class name to apply on the root node */
     className?: string;
     /** Your component tree. */
     message?: ReactNode;
@@ -6398,9 +6398,9 @@ export declare type HvTagClasses = ExtractNames<typeof useClasses_107>;
 
 export declare function hvTagColumn<D extends object = Record<string, unknown>, H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer, A extends object = Record<string, unknown>>(col: HvTableColumnConfig<D, H>, valueDataKey: keyof A, colorDataKey: keyof A, textColorDataKey: keyof A, fromRowData?: boolean, tagProps?: HvTagProps): HvTableColumnConfig<D, H>;
 
-export declare interface HvTagProps extends Omit<ChipProps, "color" | "classes"> {
+export declare interface HvTagProps extends Omit<ChipProps, "color" | "classes" | "onSelect"> {
     /** The label of the tag element. */
-    label?: React.ReactNode;
+    label?: React_2.ReactNode;
     /** Indicates that the form element is disabled. */
     disabled?: boolean;
     /** The type of the tag element. A tag can be of semantic or categoric type. */
@@ -6408,14 +6408,14 @@ export declare interface HvTagProps extends Omit<ChipProps, "color" | "classes">
     /** Background color to be applied to the tag */
     color?: HvColorAny;
     /** Icon used to customize the delete icon in the Chip element */
-    deleteIcon?: React.ReactElement;
+    deleteIcon?: React_2.ReactElement;
     /**
      * The callback fired when the delete icon is pressed.
      * This function has to be provided to the component, in order to render the delete icon
      * */
-    onDelete?: (event: React.MouseEvent<HTMLElement>) => void;
+    onDelete?: (event: React_2.MouseEvent<HTMLElement>) => void;
     /** Callback triggered when any item is clicked. */
-    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    onClick?: (event: React_2.MouseEvent<HTMLElement>, selected?: boolean) => void;
     /** Aria properties to apply to delete button in tag
      * @deprecated no longer used
      */
@@ -6428,6 +6428,12 @@ export declare interface HvTagProps extends Omit<ChipProps, "color" | "classes">
     ref?: ChipProps["ref"];
     /** @ignore */
     component?: ChipProps["component"];
+    /** Determines whether or not the tag is selectable. */
+    selectable?: boolean;
+    /** Defines if the tag is selected. When defined the tag state becomes controlled. */
+    selected?: boolean;
+    /** When uncontrolled, defines the initial selected state. */
+    defaultSelected?: boolean;
 }
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "5.40.1",
+  "version": "5.41.1",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Core React components for the NEXT Design System.",
@@ -64,7 +64,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "124dccecc5e2bdbc6c8d03ac94e5928ab532176d",
+  "gitHead": "f832f11b0fb13078c7d71a8f4ce9173010108413",
   "main": "dist/cjs/index.cjs",
   "exports": {
     ".": {

package/dist/cjs/Snackbar/SnackbarProvider/SnackbarProvider.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"SnackbarProvider.cjs","sources":["../../../../src/Snackbar/SnackbarProvider/SnackbarProvider.tsx"],"sourcesContent":["import { forwardRef, ReactNode, useCallback, useMemo } from \"react\";\n\nimport {\n  CombinedClassKey,\n  OptionsObject,\n  SnackbarContent,\n  SnackbarProvider,\n  SnackbarProviderProps,\n  useSnackbar,\n} from \"notistack\";\n\nimport { SnackbarOrigin } from \"@mui/material/Snackbar\";\nimport { ClassNameMap } from \"@mui/material/styles\";\n\nimport { ExtractNames } from \"../../utils/classes\";\n\nimport { HvSnackbarContent, HvSnackbarContentProps } from \"../SnackbarContent\";\nimport { staticClasses, useClasses } from \"./SnackbarProvider.styles\";\nimport { HvSnackbarVariant } from \"../types\";\n\nexport { staticClasses as snackbarProviderClasses };\n\nexport type HvSnackbarProviderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSnackbarProviderProps {\n  /** Your component tree. */\n  children: React.ReactNode;\n  /** Max visible snackbars. */\n  maxSnack?: number;\n  /** How much time the snackbar remains visible in milliseconds. */\n  autoHideDuration?: number;\n  /** Where is the snackbar placed. */\n  anchorOrigin?: SnackbarOrigin;\n  /** Class object used to override notistack classes. */\n  notistackClassesOverride?: Partial<ClassNameMap<CombinedClassKey>>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvSnackbarProviderClasses;\n  className?: string;\n}\n\nexport interface HvNotistackSnackMessageProps extends OptionsObject {\n  /** Id to be applied to the root node. */\n  id?: string;\n  /** Classname to apply on the root node */\n  className?: string;\n  /** Your component tree. */\n  message?: ReactNode;\n  /** Variant of the snackbar. */\n  variant?: HvSnackbarVariant;\n  /** Extra values to pass to the snackbar. */\n  snackbarContentProps?: HvSnackbarContentProps;\n}\n\nconst HvNotistackSnackMessage = forwardRef<\n  HTMLDivElement,\n  HvNotistackSnackMessageProps\n>((props, ref) => {\n  const { id, message, variant = \"success\", snackbarContentProps } = props;\n  return (\n    <SnackbarContent ref={ref}>\n      <HvSnackbarContent\n        id={id}\n        variant={variant}\n        showIcon\n        label={message}\n        role=\"none\"\n        {...snackbarContentProps}\n      />\n    </SnackbarContent>\n  );\n});\n\n// We override notistack hook to be able to customize the snackbar that should be called.\nexport const useHvSnackbar = () => {\n  const { enqueueSnackbar: enqueueNotistackSnackbar, closeSnackbar } =\n    useSnackbar();\n\n  const enqueueSnackbar = useCallback(\n    (message: ReactNode, options: HvNotistackSnackMessageProps = {}) => {\n      const {\n        id,\n        variant = \"success\",\n        snackbarContentProps,\n        className,\n        ...otherOptions\n      } = options;\n\n      return enqueueNotistackSnackbar(\n        <HvNotistackSnackMessage\n          id={id}\n          message={message}\n          variant={variant}\n          snackbarContentProps={snackbarContentProps}\n        />,\n        { ...otherOptions, className }\n      );\n    },\n    [enqueueNotistackSnackbar]\n  );\n  return useMemo(\n    () => ({\n      enqueueSnackbar,\n      closeSnackbar,\n    }),\n    [enqueueSnackbar, closeSnackbar]\n  );\n};\n\nexport const HvSnackbarProvider = ({\n  children,\n  notistackClassesOverride,\n  maxSnack = 5,\n  autoHideDuration = 5000,\n  anchorOrigin = {\n    vertical: \"top\",\n    horizontal: \"right\",\n  },\n  classes: classesProp,\n  className,\n  ...others\n}: HvSnackbarProviderProps) => {\n  const { classes, css, cx } = useClasses(classesProp);\n\n  const notistackClasses: SnackbarProviderProps[\"classes\"] = {\n    containerRoot: css({\n      pointerEvents: \"all\",\n      \"& > div > div\": {\n        // Overrides notistack extra padding\n        padding: \"0 !important\",\n        transition: \"all 0s ease 0s !important\",\n      },\n    }),\n    ...notistackClassesOverride,\n  };\n\n  return (\n    <SnackbarProvider\n      classes={notistackClasses}\n      maxSnack={maxSnack}\n      autoHideDuration={autoHideDuration}\n      anchorOrigin={anchorOrigin as SnackbarOrigin}\n      className={cx(classes.snackItemRoot, className)}\n      {...others}\n    >\n      {children}\n    </SnackbarProvider>\n  );\n};\n"],"names":["forwardRef","jsx","SnackbarContent","HvSnackbarContent","useSnackbar","useCallback","useMemo","useClasses","SnackbarProvider"],"mappings":";;;;;;;AAqDA,MAAM,0BAA0BA,MAAA,WAG9B,CAAC,OAAO,QAAQ;AAChB,QAAM,EAAE,IAAI,SAAS,UAAU,WAAW,qBAAyB,IAAA;AAEjE,SAAAC,2BAAA,IAACC,6BAAgB,KACf,UAAAD,2BAAA;AAAA,IAACE,gBAAA;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,UAAQ;AAAA,MACR,OAAO;AAAA,MACP,MAAK;AAAA,MACJ,GAAG;AAAA,IAAA;AAAA,EAER,EAAA,CAAA;AAEJ,CAAC;AAGM,MAAM,gBAAgB,MAAM;AACjC,QAAM,EAAE,iBAAiB,0BAA0B,kBACjDC,UAAY,YAAA;AAEd,QAAM,kBAAkBC,MAAA;AAAA,IACtB,CAAC,SAAoB,UAAwC,OAAO;AAC5D,YAAA;AAAA,QACJ;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MACD,IAAA;AAEG,aAAA;AAAA,QACLJ,2BAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,QACA,EAAE,GAAG,cAAc,UAAU;AAAA,MAAA;AAAA,IAEjC;AAAA,IACA,CAAC,wBAAwB;AAAA,EAAA;AAEpB,SAAAK,MAAA;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IAAA;AAAA,IAEF,CAAC,iBAAiB,aAAa;AAAA,EAAA;AAEnC;AAEO,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,mBAAmB;AAAA,EACnB,eAAe;AAAA,IACb,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA,GAAG;AACL,MAA+B;AAC7B,QAAM,EAAE,SAAS,KAAK,GAAG,IAAIC,wBAAAA,WAAW,WAAW;AAEnD,QAAM,mBAAqD;AAAA,IACzD,eAAe,IAAI;AAAA,MACjB,eAAe;AAAA,MACf,iBAAiB;AAAA;AAAA,QAEf,SAAS;AAAA,QACT,YAAY;AAAA,MACd;AAAA,IAAA,CACD;AAAA,IACD,GAAG;AAAA,EAAA;AAIH,SAAAN,2BAAA;AAAA,IAACO,UAAA;AAAA,IAAA;AAAA,MACC,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,GAAG,QAAQ,eAAe,SAAS;AAAA,MAC7C,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;;;;"}

package/dist/cjs/Snackbar/SnackbarProvider/SnackbarProvider.styles.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"SnackbarProvider.styles.cjs","sources":["../../../../src/Snackbar/SnackbarProvider/SnackbarProvider.styles.tsx"],"sourcesContent":["import { createClasses } from \"../../utils/classes\";\n\nexport const { useClasses, staticClasses } = createClasses(\n  \"HvSnackbarProvider\",\n  {\n    snackItemRoot: {\n      backgroundColor: \"transparent !important\",\n      boxShadow: \"none !important\",\n      \"&&\": {\n        color: \"inherit\",\n        padding: \"0\",\n        fontSize: \"inherit\",\n        boxShadow: \"none\",\n        alignItems: \"center\",\n        fontFamily: \"inherit\",\n        fontWeight: \"inherit\",\n        lineHeight: \"inherit\",\n        borderRadius: \"0\",\n        letterSpacing: \"inherit\",\n        backgroundColor: \"inherit\",\n      },\n    },\n  }\n);\n"],"names":["createClasses"],"mappings":";;;AAEa,MAAA,EAAE,YAAY,cAAA,IAAkBA,QAAA;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,eAAe;AAAA,MACb,iBAAiB;AAAA,MACjB,WAAW;AAAA,MACX,MAAM;AAAA,QACJ,OAAO;AAAA,QACP,SAAS;AAAA,QACT,UAAU;AAAA,QACV,WAAW;AAAA,QACX,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,cAAc;AAAA,QACd,eAAe;AAAA,QACf,iBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,EACF;AACF;;;"}

package/dist/esm/Snackbar/SnackbarProvider/SnackbarProvider.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SnackbarProvider.js","sources":["../../../../src/Snackbar/SnackbarProvider/SnackbarProvider.tsx"],"sourcesContent":["import { forwardRef, ReactNode, useCallback, useMemo } from \"react\";\n\nimport {\n  CombinedClassKey,\n  OptionsObject,\n  SnackbarContent,\n  SnackbarProvider,\n  SnackbarProviderProps,\n  useSnackbar,\n} from \"notistack\";\n\nimport { SnackbarOrigin } from \"@mui/material/Snackbar\";\nimport { ClassNameMap } from \"@mui/material/styles\";\n\nimport { ExtractNames } from \"../../utils/classes\";\n\nimport { HvSnackbarContent, HvSnackbarContentProps } from \"../SnackbarContent\";\nimport { staticClasses, useClasses } from \"./SnackbarProvider.styles\";\nimport { HvSnackbarVariant } from \"../types\";\n\nexport { staticClasses as snackbarProviderClasses };\n\nexport type HvSnackbarProviderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSnackbarProviderProps {\n  /** Your component tree. */\n  children: React.ReactNode;\n  /** Max visible snackbars. */\n  maxSnack?: number;\n  /** How much time the snackbar remains visible in milliseconds. */\n  autoHideDuration?: number;\n  /** Where is the snackbar placed. */\n  anchorOrigin?: SnackbarOrigin;\n  /** Class object used to override notistack classes. */\n  notistackClassesOverride?: Partial<ClassNameMap<CombinedClassKey>>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvSnackbarProviderClasses;\n  className?: string;\n}\n\nexport interface HvNotistackSnackMessageProps extends OptionsObject {\n  /** Id to be applied to the root node. */\n  id?: string;\n  /** Classname to apply on the root node */\n  className?: string;\n  /** Your component tree. */\n  message?: ReactNode;\n  /** Variant of the snackbar. */\n  variant?: HvSnackbarVariant;\n  /** Extra values to pass to the snackbar. */\n  snackbarContentProps?: HvSnackbarContentProps;\n}\n\nconst HvNotistackSnackMessage = forwardRef<\n  HTMLDivElement,\n  HvNotistackSnackMessageProps\n>((props, ref) => {\n  const { id, message, variant = \"success\", snackbarContentProps } = props;\n  return (\n    <SnackbarContent ref={ref}>\n      <HvSnackbarContent\n        id={id}\n        variant={variant}\n        showIcon\n        label={message}\n        role=\"none\"\n        {...snackbarContentProps}\n      />\n    </SnackbarContent>\n  );\n});\n\n// We override notistack hook to be able to customize the snackbar that should be called.\nexport const useHvSnackbar = () => {\n  const { enqueueSnackbar: enqueueNotistackSnackbar, closeSnackbar } =\n    useSnackbar();\n\n  const enqueueSnackbar = useCallback(\n    (message: ReactNode, options: HvNotistackSnackMessageProps = {}) => {\n      const {\n        id,\n        variant = \"success\",\n        snackbarContentProps,\n        className,\n        ...otherOptions\n      } = options;\n\n      return enqueueNotistackSnackbar(\n        <HvNotistackSnackMessage\n          id={id}\n          message={message}\n          variant={variant}\n          snackbarContentProps={snackbarContentProps}\n        />,\n        { ...otherOptions, className }\n      );\n    },\n    [enqueueNotistackSnackbar]\n  );\n  return useMemo(\n    () => ({\n      enqueueSnackbar,\n      closeSnackbar,\n    }),\n    [enqueueSnackbar, closeSnackbar]\n  );\n};\n\nexport const HvSnackbarProvider = ({\n  children,\n  notistackClassesOverride,\n  maxSnack = 5,\n  autoHideDuration = 5000,\n  anchorOrigin = {\n    vertical: \"top\",\n    horizontal: \"right\",\n  },\n  classes: classesProp,\n  className,\n  ...others\n}: HvSnackbarProviderProps) => {\n  const { classes, css, cx } = useClasses(classesProp);\n\n  const notistackClasses: SnackbarProviderProps[\"classes\"] = {\n    containerRoot: css({\n      pointerEvents: \"all\",\n      \"& > div > div\": {\n        // Overrides notistack extra padding\n        padding: \"0 !important\",\n        transition: \"all 0s ease 0s !important\",\n      },\n    }),\n    ...notistackClassesOverride,\n  };\n\n  return (\n    <SnackbarProvider\n      classes={notistackClasses}\n      maxSnack={maxSnack}\n      autoHideDuration={autoHideDuration}\n      anchorOrigin={anchorOrigin as SnackbarOrigin}\n      className={cx(classes.snackItemRoot, className)}\n      {...others}\n    >\n      {children}\n    </SnackbarProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAqDA,MAAM,0BAA0B,WAG9B,CAAC,OAAO,QAAQ;AAChB,QAAM,EAAE,IAAI,SAAS,UAAU,WAAW,qBAAyB,IAAA;AAEjE,SAAA,oBAAC,mBAAgB,KACf,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,UAAQ;AAAA,MACR,OAAO;AAAA,MACP,MAAK;AAAA,MACJ,GAAG;AAAA,IAAA;AAAA,EAER,EAAA,CAAA;AAEJ,CAAC;AAGM,MAAM,gBAAgB,MAAM;AACjC,QAAM,EAAE,iBAAiB,0BAA0B,kBACjD,YAAY;AAEd,QAAM,kBAAkB;AAAA,IACtB,CAAC,SAAoB,UAAwC,OAAO;AAC5D,YAAA;AAAA,QACJ;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MACD,IAAA;AAEG,aAAA;AAAA,QACL;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,QACA,EAAE,GAAG,cAAc,UAAU;AAAA,MAAA;AAAA,IAEjC;AAAA,IACA,CAAC,wBAAwB;AAAA,EAAA;AAEpB,SAAA;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IAAA;AAAA,IAEF,CAAC,iBAAiB,aAAa;AAAA,EAAA;AAEnC;AAEO,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,mBAAmB;AAAA,EACnB,eAAe;AAAA,IACb,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA,GAAG;AACL,MAA+B;AAC7B,QAAM,EAAE,SAAS,KAAK,GAAG,IAAI,WAAW,WAAW;AAEnD,QAAM,mBAAqD;AAAA,IACzD,eAAe,IAAI;AAAA,MACjB,eAAe;AAAA,MACf,iBAAiB;AAAA;AAAA,QAEf,SAAS;AAAA,QACT,YAAY;AAAA,MACd;AAAA,IAAA,CACD;AAAA,IACD,GAAG;AAAA,EAAA;AAIH,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,GAAG,QAAQ,eAAe,SAAS;AAAA,MAC7C,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/esm/Snackbar/SnackbarProvider/SnackbarProvider.styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SnackbarProvider.styles.js","sources":["../../../../src/Snackbar/SnackbarProvider/SnackbarProvider.styles.tsx"],"sourcesContent":["import { createClasses } from \"../../utils/classes\";\n\nexport const { useClasses, staticClasses } = createClasses(\n  \"HvSnackbarProvider\",\n  {\n    snackItemRoot: {\n      backgroundColor: \"transparent !important\",\n      boxShadow: \"none !important\",\n      \"&&\": {\n        color: \"inherit\",\n        padding: \"0\",\n        fontSize: \"inherit\",\n        boxShadow: \"none\",\n        alignItems: \"center\",\n        fontFamily: \"inherit\",\n        fontWeight: \"inherit\",\n        lineHeight: \"inherit\",\n        borderRadius: \"0\",\n        letterSpacing: \"inherit\",\n        backgroundColor: \"inherit\",\n      },\n    },\n  }\n);\n"],"names":[],"mappings":";AAEa,MAAA,EAAE,YAAY,cAAA,IAAkB;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,eAAe;AAAA,MACb,iBAAiB;AAAA,MACjB,WAAW;AAAA,MACX,MAAM;AAAA,QACJ,OAAO;AAAA,QACP,SAAS;AAAA,QACT,UAAU;AAAA,QACV,WAAW;AAAA,QACX,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,cAAc;AAAA,QACd,eAAe;AAAA,QACf,iBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,EACF;AACF;"}