@hitachivantara/uikit-react-core 5.24.3 → 5.24.5

package/dist/esm/components/Slider/SliderInput/SliderInput.styles.js

@@ -1,53 +1,20 @@
-import _styled from "@emotion/styled/base";
-import { HvInput } from "../../Input/Input.js";
-function _EMOTION_STRINGIFIED_CSS_ERROR__() {
-  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
-}
-const StyledRoot = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "e13c18d82"
-} : {
-  target: "e13c18d82",
-  label: "StyledRoot"
-})(process.env.NODE_ENV === "production" ? {
-  name: "zjik7",
-  styles: "display:flex"
-} : {
-  name: "zjik7",
-  styles: "display:flex",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvU2xpZGVyL1NsaWRlcklucHV0L1NsaWRlcklucHV0LnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSTBCIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvU2xpZGVyL1NsaWRlcklucHV0L1NsaWRlcklucHV0LnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuaW1wb3J0IHsgSHZJbnB1dCB9IGZyb20gXCJAY29yZS9jb21wb25lbnRzL0lucHV0XCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRSb290ID0gc3R5bGVkKFwiZGl2XCIpKHsgZGlzcGxheTogXCJmbGV4XCIgfSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRJbnB1dENvbnRhaW5lciA9IHN0eWxlZChcImRpdlwiKSh7IGRpc3BsYXk6IFwiZmxleFwiIH0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkSW5wdXQgPSBzdHlsZWQoSHZJbnB1dCkoeyBtYXhXaWR0aDogXCI1MHB4XCIgfSk7XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const StyledInputContainer = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "e13c18d81"
-} : {
-  target: "e13c18d81",
-  label: "StyledInputContainer"
-})(process.env.NODE_ENV === "production" ? {
-  name: "zjik7",
-  styles: "display:flex"
-} : {
-  name: "zjik7",
-  styles: "display:flex",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvU2xpZGVyL1NsaWRlcklucHV0L1NsaWRlcklucHV0LnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBTW9DIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvU2xpZGVyL1NsaWRlcklucHV0L1NsaWRlcklucHV0LnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuaW1wb3J0IHsgSHZJbnB1dCB9IGZyb20gXCJAY29yZS9jb21wb25lbnRzL0lucHV0XCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRSb290ID0gc3R5bGVkKFwiZGl2XCIpKHsgZGlzcGxheTogXCJmbGV4XCIgfSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRJbnB1dENvbnRhaW5lciA9IHN0eWxlZChcImRpdlwiKSh7IGRpc3BsYXk6IFwiZmxleFwiIH0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkSW5wdXQgPSBzdHlsZWQoSHZJbnB1dCkoeyBtYXhXaWR0aDogXCI1MHB4XCIgfSk7XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const StyledInput = /* @__PURE__ */ _styled(HvInput, process.env.NODE_ENV === "production" ? {
-  target: "e13c18d80"
-} : {
-  target: "e13c18d80",
-  label: "StyledInput"
-})(process.env.NODE_ENV === "production" ? {
-  name: "3yvj47",
-  styles: "max-width:50px"
-} : {
-  name: "3yvj47",
-  styles: "max-width:50px",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvU2xpZGVyL1NsaWRlcklucHV0L1NsaWRlcklucHV0LnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBUTJCIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvU2xpZGVyL1NsaWRlcklucHV0L1NsaWRlcklucHV0LnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuaW1wb3J0IHsgSHZJbnB1dCB9IGZyb20gXCJAY29yZS9jb21wb25lbnRzL0lucHV0XCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRSb290ID0gc3R5bGVkKFwiZGl2XCIpKHsgZGlzcGxheTogXCJmbGV4XCIgfSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRJbnB1dENvbnRhaW5lciA9IHN0eWxlZChcImRpdlwiKSh7IGRpc3BsYXk6IFwiZmxleFwiIH0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkSW5wdXQgPSBzdHlsZWQoSHZJbnB1dCkoeyBtYXhXaWR0aDogXCI1MHB4XCIgfSk7XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+import { createClasses } from "../../../utils/classes.js";
+const {
+  staticClasses,
+  useClasses
+} = createClasses("HvSliderInput", {
+  inputRoot: {
+    display: "flex"
+  },
+  input: {
+    maxWidth: "50px"
+  },
+  inputContainer: {
+    display: "flex"
+  }
 });
 export {
-  StyledInput,
-  StyledInputContainer,
-  StyledRoot
+  staticClasses,
+  useClasses
 };
 //# sourceMappingURL=SliderInput.styles.js.map

package/dist/esm/components/Slider/SliderInput/SliderInput.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderInput.styles.js","sources":["../../../../../src/components/Slider/SliderInput/SliderInput.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nimport { HvInput } from \"@core/components/Input\";\n\nexport const StyledRoot = styled(\"div\")({ display: \"flex\" });\n\nexport const StyledInputContainer = styled(\"div\")({ display: \"flex\" });\n\nexport const StyledInput = styled(HvInput)({ maxWidth: \"50px\" });\n"],"names":["StyledRoot","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","StyledInputContainer","StyledInput","HvInput"],"mappings":";;;;;AAIO,MAAMA,aAAoB,wBAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAG,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAAoB;AAEpD,MAAMC,uBAA8B,wBAAA,OAAKV,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAG,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAAoB;AAE9D,MAAME,cAAqBC,wBAAAA,SAAOZ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAG,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAAqB;"}
+{"version":3,"file":"SliderInput.styles.js","sources":["../../../../../src/components/Slider/SliderInput/SliderInput.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSliderInput\", {\n  inputRoot: { display: \"flex\" },\n  input: { maxWidth: \"50px\" },\n  inputContainer: { display: \"flex\" },\n});\n"],"names":["staticClasses","useClasses","createClasses","inputRoot","display","input","maxWidth","inputContainer"],"mappings":";AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,iBAAiB;AAAA,EAC1EC,WAAW;AAAA,IAAEC,SAAS;AAAA,EAAO;AAAA,EAC7BC,OAAO;AAAA,IAAEC,UAAU;AAAA,EAAO;AAAA,EAC1BC,gBAAgB;AAAA,IAAEH,SAAS;AAAA,EAAO;AACpC,CAAC;"}

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

@@ -1,12 +1,14 @@
-import { clsx } from "clsx";
 import { useState } from "react";
 import { theme } from "@hitachivantara/uikit-styles";
+import Chip from "@mui/material/Chip";
 import { useTheme } from "../../hooks/useTheme.js";
 import { useDefaultProps } from "../../hooks/useDefaultProps.js";
-import { StyledChip, StyledButton, StyledCloseXS } from "./Tag.styles.js";
+import { CloseXS } from "@hitachivantara/uikit-react-icons";
+import { useClasses } from "./Tag.styles.js";
+import { staticClasses } from "./Tag.styles.js";
 import { hasDeleteAction, getOnDeleteCallback, hasClickAction } from "./utils.js";
-import tagClasses from "./tagClasses.js";
 import { jsx } from "@emotion/react/jsx-runtime";
+import { HvButton } from "../Button/Button.js";
 const getColor = (customColor, type, colors) => {
   const defaultSemanticColor = theme.colors.neutral_20;
   const defaultCategoricalColor = colors.cat1;
@@ -20,9 +22,9 @@ const getColor = (customColor, type, colors) => {
   return backgroundColor;
 };
 const HvTag = (props) => {
-  var _a, _b;
+  var _a;
   const {
-    classes,
+    classes: classesProp,
     className,
     style,
     label,
@@ -41,31 +43,39 @@ const HvTag = (props) => {
     activeTheme,
     selectedMode
   } = useTheme();
+  const {
+    classes,
+    cx,
+    css
+  } = useClasses(classesProp);
   const getDeleteIcon = () => {
     const disabledSemanticColor = type === "semantic" ? "secondary_60" : "base_dark";
     const {
       tabIndex = 0
     } = deleteButtonProps;
-    return /* @__PURE__ */ jsx(StyledButton, {
+    const closeIconStyles = css({
+      ...disabled ? {
+        cursor: "not-allowed"
+      } : void 0,
+      height: 16,
+      "& svg .color0": {
+        fill: theme.colors[disabled ? disabledSemanticColor : "base_dark"]
+      }
+    });
+    return /* @__PURE__ */ jsx(HvButton, {
       classes: {
-        startIcon: clsx(tagClasses.tagButton, classes == null ? void 0 : classes.tagButton),
-        focusVisible: clsx(tagClasses.focusVisible, classes == null ? void 0 : classes.focusVisible),
-        root: clsx(tagClasses.button, classes == null ? void 0 : classes.button)
+        startIcon: classes.tagButton,
+        focusVisible: classes.focusVisible,
+        root: classes.button
       },
       "aria-label": deleteButtonArialLabel,
       tabIndex,
       variant: "secondaryGhost",
       ...deleteButtonProps,
-      children: /* @__PURE__ */ jsx(StyledCloseXS, {
+      children: /* @__PURE__ */ jsx(CloseXS, {
         iconSize: "XS",
-        style: {
-          ...disabled ? {
-            cursor: "not-allowed"
-          } : void 0,
-          height: 16
-        },
-        color: disabled ? disabledSemanticColor : "base_dark",
-        $color: disabled ? disabledSemanticColor : "base_dark"
+        className: closeIconStyles,
+        color: disabled ? disabledSemanticColor : "base_dark"
       })
     });
   };
@@ -80,9 +90,9 @@ const HvTag = (props) => {
     inlineStyle.backgroundColor = `${categoricalBackgroundColor}30`;
   }
   const [hover, setHover] = useState(false);
-  return /* @__PURE__ */ jsx(StyledChip, {
+  return /* @__PURE__ */ jsx(Chip, {
     label,
-    className: clsx(classes == null ? void 0 : classes.root, className, tagClasses.root),
+    className: cx(classes.root, className),
     onMouseEnter: () => {
       setHover(!!onClick);
     },
@@ -96,24 +106,28 @@ const HvTag = (props) => {
       } : null
     },
     classes: {
-      root: clsx(tagClasses.chipRoot, classes == null ? void 0 : classes.chipRoot, type === "categorical" && clsx(tagClasses.categorical, classes == null ? void 0 : classes.categorical), disabled && clsx(tagClasses.disabled, classes == null ? void 0 : classes.disabled), !!onClick && clsx(tagClasses.clickable, classes == null ? void 0 : classes.clickable), type === "categorical" && !disabled && clsx(tagClasses.categoricalFocus, classes == null ? void 0 : classes.categoricalFocus), type === "categorical" && disabled && clsx(tagClasses.categoricalDisabled, classes == null ? void 0 : classes.categoricalDisabled)),
-      label: clsx(tagClasses.label, classes == null ? void 0 : classes.label),
-      deleteIcon: clsx(classes == null ? void 0 : classes.deleteIcon, tagClasses.deleteIcon, disabled && clsx(tagClasses.disabledDeleteIcon, classes == null ? void 0 : classes.disabledDeleteIcon))
+      root: cx(classes.chipRoot, {
+        [classes.disabled]: disabled,
+        [classes.clickable]: !!onClick,
+        [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: hasDeleteAction(onDelete) && deleteIcon || getDeleteIcon(),
     onDelete: getOnDeleteCallback(disabled, onDelete),
     onClick: disabled ? void 0 : onClick,
     role: role || (hasClickAction(onClick) ? "button" : void 0),
     tabIndex: hasDeleteAction(onDelete) ? void 0 : 0,
-    $type: type,
-    $disabled: disabled || false,
-    $categoricalFocus: type === "categorical" && !disabled,
-    $categoricalDisabled: type === "categorical" && disabled || false,
-    $baseLightColor: ((_b = activeTheme == null ? void 0 : activeTheme.colors) == null ? void 0 : _b.modes[selectedMode].base_light) || theme.colors.base_light,
     ...others
   });
 };
 export {
-  HvTag
+  HvTag,
+  staticClasses as tagClasses
 };
 //# sourceMappingURL=Tag.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sources":["../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\n\nimport { CSSProperties, useState } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { ChipProps as MuiChipProps } from \"@mui/material/Chip\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport {\n  HvSemanticColorKeys,\n  HvCategoricalColorKeys,\n} from \"@core/types/tokens\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvButtonProps } from \"@core/components/Button\";\n\nimport { StyledChip, StyledButton, StyledCloseXS } from \"./Tag.styles\";\nimport { getOnDeleteCallback, hasDeleteAction, hasClickAction } from \"./utils\";\nimport tagClasses, { HvTagClasses } from \"./tagClasses\";\n\nexport interface HvTagProps\n  extends Omit<MuiChipProps, \"color\" | \"classes\">,\n    HvBaseProps<HTMLDivElement, \"children\"> {\n  /** Inline styles to be applied to the root element. */\n  style?: CSSProperties;\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?: HvSemanticColorKeys | HvCategoricalColorKeys | string;\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  /** The role of the element with an attributed event. */\n  role?: string;\n  /** Aria properties to apply to delete button in tag */\n  deleteButtonArialLabel?: string;\n  /** Props to apply to delete button */\n  deleteButtonProps?: HvButtonProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTagClasses;\n}\n\nconst getColor = (customColor, type, colors) => {\n  const defaultSemanticColor = theme.colors.neutral_20;\n  const defaultCategoricalColor = colors.cat1;\n\n  let backgroundColor;\n\n  if (type === \"semantic\") {\n    backgroundColor =\n      theme.colors[customColor] || customColor || defaultSemanticColor;\n  }\n  if (type === \"categorical\") {\n    backgroundColor =\n      colors[customColor] || customColor || defaultCategoricalColor;\n  }\n  return backgroundColor;\n};\n\n/**\n * A Tag is one word that describes a specific aspect of an asset. A single asset can have\n * multiple tags.\n * Use tags to highlight an item's status for quick recognition and navigation\n * Use color to indicate meanings that users can learn and recognize across products\n *\n * It leverages the Chip component from Material UI\n */\nexport const HvTag = (props: HvTagProps) => {\n  const {\n    classes,\n    className,\n    style,\n    label,\n    disabled,\n    type = \"semantic\",\n    color,\n    deleteIcon,\n    onDelete,\n    onClick,\n    role,\n    deleteButtonArialLabel = \"Delete tag\",\n    deleteButtonProps = {},\n    ...others\n  } = useDefaultProps(\"HvTag\", props);\n  const { activeTheme, selectedMode } = useTheme();\n\n  const getDeleteIcon = () => {\n    const disabledSemanticColor =\n      type === \"semantic\" ? \"secondary_60\" : \"base_dark\";\n    const { tabIndex = 0 } = deleteButtonProps;\n\n    return (\n      <StyledButton\n        classes={{\n          startIcon: clsx(tagClasses.tagButton, classes?.tagButton),\n          focusVisible: clsx(tagClasses.focusVisible, classes?.focusVisible),\n          root: clsx(tagClasses.button, classes?.button),\n        }}\n        aria-label={deleteButtonArialLabel}\n        tabIndex={tabIndex}\n        variant=\"secondaryGhost\"\n        {...deleteButtonProps}\n      >\n        <StyledCloseXS\n          iconSize=\"XS\"\n          style={{\n            ...(disabled ? { cursor: \"not-allowed\" } : undefined),\n            height: 16,\n          }}\n          color={disabled ? disabledSemanticColor : \"base_dark\"}\n          $color={disabled ? disabledSemanticColor : \"base_dark\"}\n        />\n      </StyledButton>\n    );\n  };\n\n  const inlineStyle = {\n    ...style,\n  };\n\n  let categoricalBackgroundColor;\n\n  if (type === \"semantic\") {\n    inlineStyle.backgroundColor = getColor(color, type, {});\n  } else if (type === \"categorical\") {\n    categoricalBackgroundColor = getColor(\n      color,\n      type,\n      activeTheme?.colors?.modes[selectedMode]\n    );\n\n    inlineStyle.backgroundColor = `${categoricalBackgroundColor}30`;\n  }\n\n  const [hover, setHover] = useState(false);\n\n  return (\n    <StyledChip\n      label={label}\n      className={clsx(classes?.root, className, tagClasses.root)}\n      onMouseEnter={() => {\n        setHover(!!onClick);\n      }}\n      onMouseLeave={() => {\n        setHover(false);\n      }}\n      style={{\n        ...(disabled ? null : inlineStyle),\n        ...(hover && !disabled\n          ? { boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}` }\n          : null),\n      }}\n      classes={{\n        root: clsx(\n          tagClasses.chipRoot,\n          classes?.chipRoot,\n          type === \"categorical\" &&\n            clsx(tagClasses.categorical, classes?.categorical),\n          disabled && clsx(tagClasses.disabled, classes?.disabled),\n          !!onClick && clsx(tagClasses.clickable, classes?.clickable),\n          type === \"categorical\" &&\n            !disabled &&\n            clsx(tagClasses.categoricalFocus, classes?.categoricalFocus),\n          type === \"categorical\" &&\n            disabled &&\n            clsx(tagClasses.categoricalDisabled, classes?.categoricalDisabled)\n        ),\n        label: clsx(tagClasses.label, classes?.label),\n        deleteIcon: clsx(\n          classes?.deleteIcon,\n          tagClasses.deleteIcon,\n          disabled &&\n            clsx(tagClasses.disabledDeleteIcon, classes?.disabledDeleteIcon)\n        ),\n      }}\n      deleteIcon={(hasDeleteAction(onDelete) && deleteIcon) || getDeleteIcon()}\n      onDelete={getOnDeleteCallback(disabled, onDelete)}\n      onClick={disabled ? undefined : onClick}\n      role={role || (hasClickAction(onClick) ? \"button\" : undefined)}\n      tabIndex={hasDeleteAction(onDelete) ? undefined : 0}\n      $type={type}\n      $disabled={disabled || false}\n      $categoricalFocus={type === \"categorical\" && !disabled}\n      $categoricalDisabled={(type === \"categorical\" && disabled) || false}\n      $baseLightColor={\n        activeTheme?.colors?.modes[selectedMode].base_light ||\n        theme.colors.base_light\n      }\n      {...others}\n    />\n  );\n};\n"],"names":["getColor","customColor","type","colors","defaultSemanticColor","theme","neutral_20","defaultCategoricalColor","cat1","backgroundColor","HvTag","props","classes","className","style","label","disabled","color","deleteIcon","onDelete","onClick","role","deleteButtonArialLabel","deleteButtonProps","others","useDefaultProps","activeTheme","selectedMode","useTheme","getDeleteIcon","disabledSemanticColor","tabIndex","StyledButton","startIcon","clsx","tagClasses","tagButton","focusVisible","root","button","variant","children","StyledCloseXS","iconSize","cursor","undefined","height","$color","inlineStyle","categoricalBackgroundColor","modes","hover","setHover","useState","StyledChip","onMouseEnter","onMouseLeave","boxShadow","chipRoot","categorical","clickable","categoricalFocus","categoricalDisabled","disabledDeleteIcon","hasDeleteAction","getOnDeleteCallback","hasClickAction","$type","$disabled","$categoricalFocus","$categoricalDisabled","$baseLightColor","base_light"],"mappings":"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"}
+{"version":3,"file":"Tag.js","sources":["../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import { CSSProperties, useState } from \"react\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport Chip, { ChipProps as MuiChipProps } from \"@mui/material/Chip\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport {\n  HvSemanticColorKeys,\n  HvCategoricalColorKeys,\n} from \"@core/types/tokens\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvButton, HvButtonProps } from \"@core/components/Button\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { CloseXS } from \"@hitachivantara/uikit-react-icons\";\nimport { staticClasses, useClasses } from \"./Tag.styles\";\nimport { getOnDeleteCallback, hasDeleteAction, hasClickAction } from \"./utils\";\n\nexport { staticClasses as tagClasses };\n\nexport type HvTagClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTagProps\n  extends Omit<MuiChipProps, \"color\" | \"classes\">,\n    HvBaseProps<HTMLDivElement, \"children\"> {\n  /** Inline styles to be applied to the root element. */\n  style?: CSSProperties;\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?: HvSemanticColorKeys | HvCategoricalColorKeys | string;\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  /** The role of the element with an attributed event. */\n  role?: string;\n  /** Aria properties to apply to delete button in tag */\n  deleteButtonArialLabel?: string;\n  /** Props to apply to delete button */\n  deleteButtonProps?: HvButtonProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTagClasses;\n}\n\nconst getColor = (customColor, type, colors) => {\n  const defaultSemanticColor = theme.colors.neutral_20;\n  const defaultCategoricalColor = colors.cat1;\n\n  let backgroundColor;\n\n  if (type === \"semantic\") {\n    backgroundColor =\n      theme.colors[customColor] || customColor || defaultSemanticColor;\n  }\n  if (type === \"categorical\") {\n    backgroundColor =\n      colors[customColor] || customColor || defaultCategoricalColor;\n  }\n  return backgroundColor;\n};\n\n/**\n * A Tag is one word that describes a specific aspect of an asset. A single asset can have\n * multiple tags.\n * Use tags to highlight an item's status for quick recognition and navigation\n * Use color to indicate meanings that users can learn and recognize across products\n *\n * It leverages the Chip component from Material UI\n */\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    role,\n    deleteButtonArialLabel = \"Delete tag\",\n    deleteButtonProps = {},\n    ...others\n  } = useDefaultProps(\"HvTag\", props);\n  const { activeTheme, selectedMode } = useTheme();\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const getDeleteIcon = () => {\n    const disabledSemanticColor =\n      type === \"semantic\" ? \"secondary_60\" : \"base_dark\";\n    const { tabIndex = 0 } = deleteButtonProps;\n\n    const closeIconStyles = css({\n      ...(disabled ? { cursor: \"not-allowed\" } : undefined),\n      height: 16,\n      \"& svg .color0\": {\n        fill: theme.colors[disabled ? disabledSemanticColor : \"base_dark\"],\n      },\n    });\n    return (\n      <HvButton\n        classes={{\n          startIcon: classes.tagButton,\n          focusVisible: classes.focusVisible,\n          root: classes.button,\n        }}\n        aria-label={deleteButtonArialLabel}\n        tabIndex={tabIndex}\n        variant=\"secondaryGhost\"\n        {...deleteButtonProps}\n      >\n        <CloseXS\n          iconSize=\"XS\"\n          className={closeIconStyles}\n          color={disabled ? disabledSemanticColor : \"base_dark\"}\n        />\n      </HvButton>\n    );\n  };\n\n  const inlineStyle = {\n    ...style,\n  };\n\n  let categoricalBackgroundColor;\n\n  if (type === \"semantic\") {\n    inlineStyle.backgroundColor = getColor(color, type, {});\n  } else if (type === \"categorical\") {\n    categoricalBackgroundColor = getColor(\n      color,\n      type,\n      activeTheme?.colors?.modes[selectedMode]\n    );\n\n    inlineStyle.backgroundColor = `${categoricalBackgroundColor}30`;\n  }\n\n  const [hover, setHover] = useState(false);\n\n  return (\n    <Chip\n      label={label}\n      className={cx(classes.root, className)}\n      onMouseEnter={() => {\n        setHover(!!onClick);\n      }}\n      onMouseLeave={() => {\n        setHover(false);\n      }}\n      style={{\n        ...(disabled ? null : inlineStyle),\n        ...(hover && !disabled\n          ? { boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}` }\n          : null),\n      }}\n      classes={{\n        root: cx(classes.chipRoot, {\n          [classes.disabled]: disabled,\n          [classes.clickable]: !!onClick,\n          [classes.categorical]: type === \"categorical\",\n          [classes.categoricalFocus]: type === \"categorical\" && !disabled,\n          [classes.categoricalDisabled]: type === \"categorical\" && disabled,\n        }),\n        label: classes.label,\n        deleteIcon: cx(classes.deleteIcon, {\n          [classes.disabledDeleteIcon]: disabled,\n        }),\n      }}\n      deleteIcon={(hasDeleteAction(onDelete) && deleteIcon) || getDeleteIcon()}\n      onDelete={getOnDeleteCallback(disabled, onDelete)}\n      onClick={disabled ? undefined : onClick}\n      role={role || (hasClickAction(onClick) ? \"button\" : undefined)}\n      tabIndex={hasDeleteAction(onDelete) ? undefined : 0}\n      {...others}\n    />\n  );\n};\n"],"names":["getColor","customColor","type","colors","defaultSemanticColor","theme","neutral_20","defaultCategoricalColor","cat1","backgroundColor","HvTag","props","classes","classesProp","className","style","label","disabled","color","deleteIcon","onDelete","onClick","role","deleteButtonArialLabel","deleteButtonProps","others","useDefaultProps","activeTheme","selectedMode","useTheme","cx","css","useClasses","getDeleteIcon","disabledSemanticColor","tabIndex","closeIconStyles","cursor","undefined","height","fill","HvButton","startIcon","tagButton","focusVisible","root","button","variant","children","CloseXS","iconSize","inlineStyle","categoricalBackgroundColor","modes","hover","setHover","useState","Chip","onMouseEnter","onMouseLeave","boxShadow","chipRoot","clickable","categorical","categoricalFocus","categoricalDisabled","disabledDeleteIcon","hasDeleteAction","getOnDeleteCallback","hasClickAction"],"mappings":"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"}

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

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

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

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