@hitachivantara/uikit-react-core 5.7.0 → 5.7.2

package/dist/cjs/components/ScrollTo/Vertical/ScrollToVertical.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollToVertical.cjs","sources":["../../../../../src/components/ScrollTo/Vertical/ScrollToVertical.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types\";\nimport scrollToVerticalClasses, {\n  HvScrollToVerticalClasses,\n} from \"./scrollToVerticalClasses\";\nimport { generateDynamicStyles, styles } from \"./ScrollToVertical.styles\";\nimport { clsx } from \"clsx\";\nimport { useTheme, useUniqueId } from \"@core/hooks\";\nimport { HvVerticalScrollListItem } from \"./VerticalScrollListItem\";\nimport { isKeypress, keyboardCodes, setId } from \"@core/utils\";\nimport { useScrollTo } from \"../useScrollTo\";\nimport { useMemo } from \"react\";\nimport { withTooltip } from \"../withTooltip\";\nimport { ClassNames } from \"@emotion/react\";\nimport fade from \"@core/utils/hexToRgbA\";\nimport { HvScrollToTooltipPositions } from \"../types\";\n\nconst { Enter } = keyboardCodes;\n\nexport interface HvScrollToVerticalOption {\n  key?: string;\n  label: string;\n  value: string;\n  offset?: number;\n}\n\nexport type HvScrollToVerticalPositions = \"absolute\" | \"fixed\" | \"relative\";\n\nexport interface HvScrollToVerticalProps\n  extends HvBaseProps<HTMLOListElement, \"onChange\" | \"onClick\"> {\n  /** An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied */\n  options: HvScrollToVerticalOption[];\n  /** True if the href location link should be applied. It will create an a element around every list item */\n  href?: boolean;\n  /** Default selected index passed from the parent. */\n  defaultSelectedIndex?: number;\n  /**\n   * The Id of the scrollable container containing displayed elements.\n   *\n   * Defaults to `window` if unspecified.\n   */\n  scrollElementId?: string;\n  /**\n   * Defines the offset from the top of each element for getting an optimal viewing region in the container.\n   * This allows to exclude regions of the container that are obscured by other content (such as fixed-positioned toolbars or titles)\n   * or to put more breathing room between the targeted element and the edges of the container.\n   *\n   * Each element can also have a specific offset via the options property.\n   */\n  offset?: number;\n  /** Position of the Vertical scroll to. */\n  position?: HvScrollToVerticalPositions;\n  /** Position of tooltip identifying the current item. */\n  tooltipPosition?: HvScrollToTooltipPositions;\n  /** A function called each time the selected index changes. */\n  onChange?: (\n    event:\n      | Event\n      | React.MouseEvent<HTMLDivElement>\n      | React.KeyboardEvent<HTMLDivElement>,\n    index: number\n  ) => void;\n  /** A function called each time an user clicks on a tab element. */\n  onClick?: (event: React.MouseEvent<HTMLDivElement>, index: number) => void;\n  /** A function called each time an user press enter on a tab element. */\n  onEnter?: (event: React.KeyboardEvent<HTMLDivElement>, index: number) => void;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvScrollToVerticalClasses;\n}\n\n/**\n * The vertical scroll to element can be used to quickly navigate in a page.\n */\nexport const HvScrollToVertical = ({\n  id,\n  defaultSelectedIndex = 0,\n  scrollElementId,\n  href = true,\n  onChange,\n  onClick,\n  onEnter,\n  className,\n  classes,\n  options,\n  offset = 0,\n  position = \"relative\",\n  tooltipPosition = \"left\",\n  ...others\n}: HvScrollToVerticalProps) => {\n  const { activeTheme, selectedMode } = useTheme();\n\n  const elementId = useUniqueId(id, \"hvVerticalScrollto\");\n\n  const [selectedIndex, setScrollTo] = useScrollTo(\n    defaultSelectedIndex,\n    scrollElementId,\n    href,\n    offset,\n    options,\n    onChange\n  );\n\n  const handleSelection = (\n    event:\n      | React.MouseEvent<HTMLDivElement>\n      | React.KeyboardEvent<HTMLDivElement>,\n    value: string,\n    index: number\n  ) => {\n    event.preventDefault();\n\n    const wrappedOnChange = () => {\n      onChange?.(event, index);\n    };\n\n    setScrollTo(event, value, index, wrappedOnChange);\n  };\n\n  const tooltipWrappers = useMemo(() => {\n    return options.map((option) => {\n      return withTooltip(option.label, \"div\", tooltipPosition, false);\n    });\n  }, [options, tooltipPosition]);\n\n  const tabs = options.map((option, index) => {\n    const selected = selectedIndex === index;\n    const tooltipWrapper = tooltipWrappers[index];\n\n    return (\n      <HvVerticalScrollListItem\n        id={setId(elementId, `item-${index}`)}\n        onClick={(event) => {\n          handleSelection(event, option.value, index);\n          onClick?.(event, index);\n        }}\n        onKeyDown={(event) => {\n          if (isKeypress(event, Enter) === true) {\n            handleSelection(event, option.value, index);\n            onEnter?.(event, index);\n          }\n        }}\n        tooltipWrapper={tooltipWrapper}\n        selected={selected}\n        key={option.key || option.label}\n        aria-label={option.label}\n      />\n    );\n  });\n\n  const dynamicClasses = generateDynamicStyles(options.length);\n\n  return (\n    <ClassNames>\n      {({ css }) => (\n        <ol\n          className={clsx(\n            className,\n            classes?.root,\n            scrollToVerticalClasses.root,\n            css(styles.root),\n            css({\n              backgroundColor: fade(\n                activeTheme?.colors.modes[selectedMode].atmo2,\n                activeTheme?.scrollTo.backgroundColorOpacity\n              ),\n            }),\n            position === \"fixed\" &&\n              clsx(\n                classes?.positionFixed,\n                scrollToVerticalClasses.positionFixed,\n                css(dynamicClasses.positionFixed)\n              ),\n            position === \"absolute\" &&\n              clsx(\n                classes?.positionAbsolute,\n                scrollToVerticalClasses.positionAbsolute,\n                css(dynamicClasses.positionAbsolute)\n              )\n          )}\n          id={elementId}\n          {...others}\n        >\n          {tabs}\n        </ol>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["Enter","keyboardCodes","HvScrollToVertical","id","defaultSelectedIndex","scrollElementId","href","onChange","onClick","onEnter","className","classes","options","offset","position","tooltipPosition","others","activeTheme","selectedMode","useTheme","elementId","useUniqueId","selectedIndex","setScrollTo","useScrollTo","handleSelection","event","value","index","preventDefault","wrappedOnChange","tooltipWrappers","useMemo","map","option","withTooltip","label","tabs","selected","tooltipWrapper","HvVerticalScrollListItem","setId","onKeyDown","isKeypress","key","dynamicClasses","generateDynamicStyles","length","ClassNames","children","css","clsx","root","scrollToVerticalClasses","styles","backgroundColor","fade","colors","modes","atmo2","scrollTo","backgroundColorOpacity","positionFixed","positionAbsolute"],"mappings":";;;;;;;;;;;;;;;;;AAgBA,MAAM;AAAA,EAAEA;AAAM,IAAIC;AAwDX,MAAMC,qBAAqBA,CAAC;AAAA,EACjCC;AAAAA,EACAC,uBAAuB;AAAA,EACvBC;AAAAA,EACAC,OAAO;AAAA,EACPC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAAS;AAAA,EACTC,WAAW;AAAA,EACXC,kBAAkB;AAAA,EAClB,GAAGC;AACoB,MAAM;AACvB,QAAA;AAAA,IAAEC;AAAAA,IAAaC;AAAAA,MAAiBC,SAAU,SAAA;AAE1CC,QAAAA,YAAYC,YAAAA,QAAYlB,IAAI,oBAAoB;AAEhD,QAAA,CAACmB,eAAeC,WAAW,IAAIC,wBACnCpB,sBACAC,iBACAC,MACAO,QACAD,SACAL,QAAQ;AAGV,QAAMkB,kBAAkBA,CACtBC,OAGAC,OACAC,UACG;AACHF,UAAMG,eAAgB;AAEtB,UAAMC,kBAAkBA,MAAM;AAC5BvB,2CAAWmB,OAAOE;AAAAA,IAAK;AAGbF,gBAAAA,OAAOC,OAAOC,OAAOE,eAAe;AAAA,EAAA;AAG5CC,QAAAA,kBAAkBC,MAAAA,QAAQ,MAAM;AAC7BpB,WAAAA,QAAQqB,IAAKC,CAAW,WAAA;AAC7B,aAAOC,YAAAA,YAAYD,OAAOE,OAAO,OAAOrB,iBAAiB,KAAK;AAAA,IAAA,CAC/D;AAAA,EAAA,GACA,CAACH,SAASG,eAAe,CAAC;AAE7B,QAAMsB,OAAOzB,QAAQqB,IAAI,CAACC,QAAQN,UAAU;AAC1C,UAAMU,WAAWhB,kBAAkBM;AAC7BW,UAAAA,iBAAiBR,gBAAgBH,KAAK;AAE5C,0CACGY,uBAAAA,0BAAwB;AAAA,MACvBrC,IAAIsC,MAAAA,MAAMrB,WAAY,QAAOQ,OAAO;AAAA,MACpCpB,SAAUkB,CAAU,UAAA;AACFA,wBAAAA,OAAOQ,OAAOP,OAAOC,KAAK;AAC1CpB,2CAAUkB,OAAOE;AAAAA,MACnB;AAAA,MACAc,WAAYhB,CAAU,UAAA;AACpB,YAAIiB,oBAAWjB,OAAO1B,KAAK,MAAM,MAAM;AACrB0B,0BAAAA,OAAOQ,OAAOP,OAAOC,KAAK;AAC1CnB,6CAAUiB,OAAOE;AAAAA,QACnB;AAAA,MACF;AAAA,MACAW;AAAAA,MACAD;AAAAA,MAEA,cAAYJ,OAAOE;AAAAA,IADdF,GAAAA,OAAOU,OAAOV,OAAOE,KAAK;AAAA,EAAA,CAIpC;AAEKS,QAAAA,iBAAiBC,wBAAAA,sBAAsBlC,QAAQmC,MAAM;AAE3D,wCACGC,MAAAA,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,IAAAA,qCACF,MAAA;AAAA,MACExC,WAAWyC,KACTzC,KAAAA,WACAC,mCAASyC,MACTC,wBAAAA,QAAwBD,MACxBF,IAAII,wBAAAA,OAAOF,IAAI,GACfF,IAAI;AAAA,QACFK,iBAAiBC,UACfvC,QAAAA,2CAAawC,OAAOC,MAAMxC,cAAcyC,OACxC1C,2CAAa2C,SAASC,sBAAsB;AAAA,MAE/C,CAAA,GACD/C,aAAa,WACXqC,KAAAA,KACExC,mCAASmD,eACTT,wBAAAA,QAAwBS,eACxBZ,IAAIL,eAAeiB,aAAa,CAAC,GAErChD,aAAa,cACXqC,UACExC,mCAASoD,kBACTV,gCAAwBU,kBACxBb,IAAIL,eAAekB,gBAAgB,CAAC,CACrC;AAAA,MAEL5D,IAAIiB;AAAAA,MAAU,GACVJ;AAAAA,MAAMiC,UAETZ;AAAAA,IAAAA,CAAI;AAAA,EAAA,CAGE;AAEjB;;"}
+{"version":3,"file":"ScrollToVertical.cjs","sources":["../../../../../src/components/ScrollTo/Vertical/ScrollToVertical.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types\";\nimport scrollToVerticalClasses, {\n  HvScrollToVerticalClasses,\n} from \"./scrollToVerticalClasses\";\nimport { generateDynamicStyles, styles } from \"./ScrollToVertical.styles\";\nimport { useTheme, useUniqueId } from \"@core/hooks\";\nimport { HvVerticalScrollListItem } from \"./VerticalScrollListItem\";\nimport { isKeypress, keyboardCodes, setId } from \"@core/utils\";\nimport { useScrollTo } from \"../useScrollTo\";\nimport { useMemo } from \"react\";\nimport { withTooltip } from \"../withTooltip\";\nimport { ClassNames } from \"@emotion/react\";\nimport fade from \"@core/utils/hexToRgbA\";\nimport { HvScrollToTooltipPositions } from \"../types\";\n\nconst { Enter } = keyboardCodes;\n\nexport interface HvScrollToVerticalOption {\n  key?: string;\n  label: string;\n  value: string;\n  offset?: number;\n}\n\nexport type HvScrollToVerticalPositions = \"absolute\" | \"fixed\" | \"relative\";\n\nexport interface HvScrollToVerticalProps\n  extends HvBaseProps<HTMLOListElement, \"onChange\" | \"onClick\"> {\n  /** An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied */\n  options: HvScrollToVerticalOption[];\n  /** True if the href location link should be applied. It will create an a element around every list item */\n  href?: boolean;\n  /** Default selected index passed from the parent. */\n  defaultSelectedIndex?: number;\n  /**\n   * The Id of the scrollable container containing displayed elements.\n   *\n   * Defaults to `window` if unspecified.\n   */\n  scrollElementId?: string;\n  /**\n   * Defines the offset from the top of each element for getting an optimal viewing region in the container.\n   * This allows to exclude regions of the container that are obscured by other content (such as fixed-positioned toolbars or titles)\n   * or to put more breathing room between the targeted element and the edges of the container.\n   *\n   * Each element can also have a specific offset via the options property.\n   */\n  offset?: number;\n  /** Position of the Vertical scroll to. */\n  position?: HvScrollToVerticalPositions;\n  /** Position of tooltip identifying the current item. */\n  tooltipPosition?: HvScrollToTooltipPositions;\n  /** A function called each time the selected index changes. */\n  onChange?: (\n    event:\n      | Event\n      | React.MouseEvent<HTMLDivElement>\n      | React.KeyboardEvent<HTMLDivElement>,\n    index: number\n  ) => void;\n  /** A function called each time an user clicks on a tab element. */\n  onClick?: (event: React.MouseEvent<HTMLDivElement>, index: number) => void;\n  /** A function called each time an user press enter on a tab element. */\n  onEnter?: (event: React.KeyboardEvent<HTMLDivElement>, index: number) => void;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvScrollToVerticalClasses;\n}\n\n/**\n * The vertical scroll to element can be used to quickly navigate in a page.\n */\nexport const HvScrollToVertical = ({\n  id,\n  defaultSelectedIndex = 0,\n  scrollElementId,\n  href = true,\n  onChange,\n  onClick,\n  onEnter,\n  className,\n  classes,\n  options,\n  offset = 0,\n  position = \"relative\",\n  tooltipPosition = \"left\",\n  ...others\n}: HvScrollToVerticalProps) => {\n  const { activeTheme, selectedMode } = useTheme();\n\n  const elementId = useUniqueId(id, \"hvVerticalScrollto\");\n\n  const [selectedIndex, setScrollTo] = useScrollTo(\n    defaultSelectedIndex,\n    scrollElementId,\n    href,\n    offset,\n    options,\n    onChange\n  );\n\n  const handleSelection = (\n    event:\n      | React.MouseEvent<HTMLDivElement>\n      | React.KeyboardEvent<HTMLDivElement>,\n    value: string,\n    index: number\n  ) => {\n    event.preventDefault();\n\n    const wrappedOnChange = () => {\n      onChange?.(event, index);\n    };\n\n    setScrollTo(event, value, index, wrappedOnChange);\n  };\n\n  const tooltipWrappers = useMemo(() => {\n    return options.map((option) => {\n      return withTooltip(option.label, \"div\", tooltipPosition, false);\n    });\n  }, [options, tooltipPosition]);\n\n  const tabs = options.map((option, index) => {\n    const selected = selectedIndex === index;\n    const tooltipWrapper = tooltipWrappers[index];\n\n    return (\n      <HvVerticalScrollListItem\n        id={setId(elementId, `item-${index}`)}\n        onClick={(event) => {\n          handleSelection(event, option.value, index);\n          onClick?.(event, index);\n        }}\n        onKeyDown={(event) => {\n          if (isKeypress(event, Enter) === true) {\n            handleSelection(event, option.value, index);\n            onEnter?.(event, index);\n          }\n        }}\n        tooltipWrapper={tooltipWrapper}\n        selected={selected}\n        key={option.key || option.label}\n        aria-label={option.label}\n      />\n    );\n  });\n\n  const dynamicClasses = generateDynamicStyles(options.length);\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <ol\n          className={cx(\n            scrollToVerticalClasses.root,\n            position === \"fixed\" && scrollToVerticalClasses.positionFixed,\n            position === \"absolute\" && scrollToVerticalClasses.positionAbsolute,\n            css(styles.root),\n            css({\n              backgroundColor: fade(\n                activeTheme?.colors.modes[selectedMode].atmo2,\n                activeTheme?.scrollTo.backgroundColorOpacity\n              ),\n            }),\n            position === \"fixed\" && css(dynamicClasses.positionFixed),\n            position === \"absolute\" && css(dynamicClasses.positionAbsolute),\n            className,\n            classes?.root,\n            position === \"fixed\" && classes?.positionFixed,\n            position === \"absolute\" && classes?.positionAbsolute\n          )}\n          id={elementId}\n          {...others}\n        >\n          {tabs}\n        </ol>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["Enter","keyboardCodes","HvScrollToVertical","id","defaultSelectedIndex","scrollElementId","href","onChange","onClick","onEnter","className","classes","options","offset","position","tooltipPosition","others","activeTheme","selectedMode","useTheme","elementId","useUniqueId","selectedIndex","setScrollTo","useScrollTo","handleSelection","event","value","index","preventDefault","wrappedOnChange","tooltipWrappers","useMemo","map","option","withTooltip","label","tabs","selected","tooltipWrapper","HvVerticalScrollListItem","setId","onKeyDown","isKeypress","key","dynamicClasses","generateDynamicStyles","length","ClassNames","children","css","cx","scrollToVerticalClasses","root","positionFixed","positionAbsolute","styles","backgroundColor","fade","colors","modes","atmo2","scrollTo","backgroundColorOpacity"],"mappings":";;;;;;;;;;;;;;;;AAeA,MAAM;AAAA,EAAEA;AAAM,IAAIC;AAwDX,MAAMC,qBAAqBA,CAAC;AAAA,EACjCC;AAAAA,EACAC,uBAAuB;AAAA,EACvBC;AAAAA,EACAC,OAAO;AAAA,EACPC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAAS;AAAA,EACTC,WAAW;AAAA,EACXC,kBAAkB;AAAA,EAClB,GAAGC;AACoB,MAAM;AACvB,QAAA;AAAA,IAAEC;AAAAA,IAAaC;AAAAA,MAAiBC,SAAU,SAAA;AAE1CC,QAAAA,YAAYC,YAAAA,QAAYlB,IAAI,oBAAoB;AAEhD,QAAA,CAACmB,eAAeC,WAAW,IAAIC,wBACnCpB,sBACAC,iBACAC,MACAO,QACAD,SACAL,QAAQ;AAGV,QAAMkB,kBAAkBA,CACtBC,OAGAC,OACAC,UACG;AACHF,UAAMG,eAAgB;AAEtB,UAAMC,kBAAkBA,MAAM;AAC5BvB,2CAAWmB,OAAOE;AAAAA,IAAK;AAGbF,gBAAAA,OAAOC,OAAOC,OAAOE,eAAe;AAAA,EAAA;AAG5CC,QAAAA,kBAAkBC,MAAAA,QAAQ,MAAM;AAC7BpB,WAAAA,QAAQqB,IAAKC,CAAW,WAAA;AAC7B,aAAOC,YAAAA,YAAYD,OAAOE,OAAO,OAAOrB,iBAAiB,KAAK;AAAA,IAAA,CAC/D;AAAA,EAAA,GACA,CAACH,SAASG,eAAe,CAAC;AAE7B,QAAMsB,OAAOzB,QAAQqB,IAAI,CAACC,QAAQN,UAAU;AAC1C,UAAMU,WAAWhB,kBAAkBM;AAC7BW,UAAAA,iBAAiBR,gBAAgBH,KAAK;AAE5C,0CACGY,uBAAAA,0BAAwB;AAAA,MACvBrC,IAAIsC,MAAAA,MAAMrB,WAAY,QAAOQ,OAAO;AAAA,MACpCpB,SAAUkB,CAAU,UAAA;AACFA,wBAAAA,OAAOQ,OAAOP,OAAOC,KAAK;AAC1CpB,2CAAUkB,OAAOE;AAAAA,MACnB;AAAA,MACAc,WAAYhB,CAAU,UAAA;AACpB,YAAIiB,oBAAWjB,OAAO1B,KAAK,MAAM,MAAM;AACrB0B,0BAAAA,OAAOQ,OAAOP,OAAOC,KAAK;AAC1CnB,6CAAUiB,OAAOE;AAAAA,QACnB;AAAA,MACF;AAAA,MACAW;AAAAA,MACAD;AAAAA,MAEA,cAAYJ,OAAOE;AAAAA,IADdF,GAAAA,OAAOU,OAAOV,OAAOE,KAAK;AAAA,EAAA,CAIpC;AAEKS,QAAAA,iBAAiBC,wBAAAA,sBAAsBlC,QAAQmC,MAAM;AAE3D,wCACGC,MAAAA,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,qCACP,MAAA;AAAA,MACEzC,WAAWyC,GACTC,gCAAwBC,MACxBvC,aAAa,WAAWsC,wBAAAA,QAAwBE,eAChDxC,aAAa,cAAcsC,gCAAwBG,kBACnDL,IAAIM,wBAAAA,OAAOH,IAAI,GACfH,IAAI;AAAA,QACFO,iBAAiBC,UACfzC,QAAAA,2CAAa0C,OAAOC,MAAM1C,cAAc2C,OACxC5C,2CAAa6C,SAASC,sBAAsB;AAAA,MAE/C,CAAA,GACDjD,aAAa,WAAWoC,IAAIL,eAAeS,aAAa,GACxDxC,aAAa,cAAcoC,IAAIL,eAAeU,gBAAgB,GAC9D7C,WACAC,mCAAS0C,MACTvC,aAAa,YAAWH,mCAAS2C,gBACjCxC,aAAa,eAAcH,mCAAS4C,iBAAgB;AAAA,MAEtDpD,IAAIiB;AAAAA,MAAU,GACVJ;AAAAA,MAAMiC,UAETZ;AAAAA,IAAAA,CAAI;AAAA,EAAA,CAGE;AAEjB;;"}

package/dist/cjs/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.cjs

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const verticalScrollListItemClasses = require("./verticalScrollListItemClasses.cjs");
 const react = require("@emotion/react");
-const clsx = require("clsx");
 const VerticalScrollListItem_styles = require("./VerticalScrollListItem.styles.cjs");
 const React = require("react");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
@@ -30,9 +29,10 @@ const HvVerticalScrollListItem = ({
   const NotSelected = React.useCallback(() => {
     return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
       children: ({
-        css
+        css,
+        cx
       }) => /* @__PURE__ */ jsxRuntime.jsx("div", {
-        className: clsx.clsx(classes == null ? void 0 : classes.notSelected, verticalScrollListItemClasses.default.notSelected, css(VerticalScrollListItem_styles.styles.notSelected))
+        className: cx(verticalScrollListItemClasses.default.notSelected, css(VerticalScrollListItem_styles.styles.notSelected), classes == null ? void 0 : classes.notSelected)
       })
     });
   }, [classes == null ? void 0 : classes.notSelected]);
@@ -42,10 +42,11 @@ const HvVerticalScrollListItem = ({
   }) : /* @__PURE__ */ jsxRuntime.jsx(NotSelected, {});
   return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
     children: ({
-      css
+      css,
+      cx
     }) => /* @__PURE__ */ jsxRuntime.jsx("li", {
       id,
-      className: clsx.clsx(className, classes == null ? void 0 : classes.root, verticalScrollListItemClasses.default.root, css(VerticalScrollListItem_styles.styles.root)),
+      className: cx(verticalScrollListItemClasses.default.root, css(VerticalScrollListItem_styles.styles.root), className, classes == null ? void 0 : classes.root),
       "aria-current": selected,
       children: /* @__PURE__ */ jsxRuntime.jsx("div", {
         id: buttonId,
@@ -53,13 +54,13 @@ const HvVerticalScrollListItem = ({
         tabIndex: 0,
         onClick,
         onKeyDown,
-        className: clsx.clsx(classes == null ? void 0 : classes.button, verticalScrollListItemClasses.default.button, css(VerticalScrollListItem_styles.styles.button)),
+        className: cx(verticalScrollListItemClasses.default.button, css(VerticalScrollListItem_styles.styles.button), classes == null ? void 0 : classes.button),
         "aria-label": ariaLabel,
         "aria-labelledby": labelId,
         ...others,
         children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip, {
           id: labelId,
-          className: clsx.clsx(classes == null ? void 0 : classes.text, verticalScrollListItemClasses.default.text, css(VerticalScrollListItem_styles.styles.text)),
+          className: cx(verticalScrollListItemClasses.default.text, css(VerticalScrollListItem_styles.styles.text), classes == null ? void 0 : classes.text),
           variant,
           children: icon
         })

package/dist/cjs/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"VerticalScrollListItem.cjs","sources":["../../../../../../src/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types\";\nimport verticalScrollListItemClasses, {\n  HvVerticalScrollListItemClasses,\n} from \"./verticalScrollListItemClasses\";\nimport { ClassNames } from \"@emotion/react\";\nimport { clsx } from \"clsx\";\nimport { styles } from \"./VerticalScrollListItem.styles\";\nimport { HvTypographyProps } from \"@core/components\";\nimport { setId } from \"@core/utils\";\nimport { useCallback } from \"react\";\nimport { CurrentStep } from \"@hitachivantara/uikit-react-icons\";\nimport { useTheme } from \"@core/hooks\";\n\nexport interface HvVerticalScrollListItemProps extends HvBaseProps {\n  /** A function component that renders a typography wrapped with a tooltip. */\n  tooltipWrapper: React.FunctionComponent<{\n    id?: string;\n    className?: string;\n    variant?: HvTypographyProps[\"variant\"];\n    children?: React.ReactNode;\n  }>;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvVerticalScrollListItemClasses;\n  /** Whether the element is selected. */\n  selected?: boolean;\n  /** The function to be executed when the element is clicked. */\n  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;\n  /** The function to be executed when the element is clicked. */\n  onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;\n}\n\n/**\n * HvVerticalScrollListItem a focusable item to be used as part of the vertical scroll\n */\nexport const HvVerticalScrollListItem = ({\n  id,\n  className,\n  classes,\n  selected,\n  \"aria-label\": ariaLabel,\n  onClick,\n  onKeyDown,\n  tooltipWrapper,\n  ...others\n}: HvVerticalScrollListItemProps) => {\n  const { activeTheme } = useTheme();\n\n  const variant: HvTypographyProps[\"variant\"] = selected ? \"label\" : \"body\";\n\n  const labelId = setId(id, \"label\");\n\n  const buttonId = setId(id, \"button\");\n\n  const Tooltip = tooltipWrapper;\n\n  const NotSelected = useCallback(() => {\n    return (\n      <ClassNames>\n        {({ css }) => (\n          <div\n            className={clsx(\n              classes?.notSelected,\n              verticalScrollListItemClasses.notSelected,\n              css(styles.notSelected)\n            )}\n          />\n        )}\n      </ClassNames>\n    );\n  }, [classes?.notSelected]);\n\n  const icon = selected ? (\n    <CurrentStep\n      height={activeTheme?.scrollTo.dotSelectedSize}\n      width={activeTheme?.scrollTo.dotSelectedSize}\n    />\n  ) : (\n    <NotSelected />\n  );\n\n  return (\n    <ClassNames>\n      {({ css }) => (\n        <li\n          id={id}\n          className={clsx(\n            className,\n            classes?.root,\n            verticalScrollListItemClasses.root,\n            css(styles.root)\n          )}\n          aria-current={selected}\n        >\n          <div\n            id={buttonId}\n            role=\"button\"\n            tabIndex={0}\n            onClick={onClick}\n            onKeyDown={onKeyDown}\n            className={clsx(\n              classes?.button,\n              verticalScrollListItemClasses.button,\n              css(styles.button)\n            )}\n            aria-label={ariaLabel}\n            aria-labelledby={labelId}\n            {...others}\n          >\n            <Tooltip\n              id={labelId}\n              className={clsx(\n                classes?.text,\n                verticalScrollListItemClasses.text,\n                css(styles.text)\n              )}\n              variant={variant}\n            >\n              {icon}\n            </Tooltip>\n          </div>\n        </li>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["HvVerticalScrollListItem","id","className","classes","selected","ariaLabel","onClick","onKeyDown","tooltipWrapper","others","activeTheme","useTheme","variant","labelId","setId","buttonId","Tooltip","NotSelected","useCallback","ClassNames","children","css","clsx","notSelected","verticalScrollListItemClasses","styles","icon","_jsx","CurrentStep","height","scrollTo","dotSelectedSize","width","root","role","tabIndex","button","text"],"mappings":";;;;;;;;;;;AAkCO,MAAMA,2BAA2BA,CAAC;AAAA,EACvCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,cAAcC;AAAAA,EACdC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AAC0B,MAAM;AAC7B,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,SAAU,SAAA;AAE5BC,QAAAA,UAAwCR,WAAW,UAAU;AAE7DS,QAAAA,UAAUC,MAAAA,MAAMb,IAAI,OAAO;AAE3Bc,QAAAA,WAAWD,MAAAA,MAAMb,IAAI,QAAQ;AAEnC,QAAMe,UAAUR;AAEVS,QAAAA,cAAcC,MAAAA,YAAY,MAAM;AACpC,0CACGC,MAAAA,YAAU;AAAA,MAAAC,UACRA,CAAC;AAAA,QAAEC;AAAAA,MAAAA,qCACF,OAAA;AAAA,QACEnB,WAAWoB,KAAAA,KACTnB,mCAASoB,aACTC,8BAAAA,QAA8BD,aAC9BF,IAAII,qCAAOF,WAAW,CAAC;AAAA,MAAA,CACvB;AAAA,IAAA,CAGK;AAAA,EAAA,GAEd,CAACpB,mCAASoB,WAAW,CAAC;AAEnBG,QAAAA,OAAOtB,WACXuB,2BAAAA,IAACC,6BAAW;AAAA,IACVC,QAAQnB,2CAAaoB,SAASC;AAAAA,IAC9BC,OAAOtB,2CAAaoB,SAASC;AAAAA,EAAgB,CAAA,IAG9Cd,2BAAAA,IAAAA,aACF,CAAA,CAAA;AAED,wCACGE,MAAAA,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,IAAAA,qCACF,MAAA;AAAA,MACEpB;AAAAA,MACAC,WAAWoB,KACTpB,KAAAA,WACAC,mCAAS8B,MACTT,sCAA8BS,MAC9BZ,IAAII,qCAAOQ,IAAI,CAAC;AAAA,MAElB,gBAAc7B;AAAAA,MAASgB,yCAEvB,OAAA;AAAA,QACEnB,IAAIc;AAAAA,QACJmB,MAAK;AAAA,QACLC,UAAU;AAAA,QACV7B;AAAAA,QACAC;AAAAA,QACAL,WAAWoB,KAAAA,KACTnB,mCAASiC,QACTZ,8BAAAA,QAA8BY,QAC9Bf,IAAII,qCAAOW,MAAM,CAAC;AAAA,QAEpB,cAAY/B;AAAAA,QACZ,mBAAiBQ;AAAAA,QAAQ,GACrBJ;AAAAA,QAAMW,yCAETJ,SAAO;AAAA,UACNf,IAAIY;AAAAA,UACJX,WAAWoB,KAAAA,KACTnB,mCAASkC,MACTb,8BAAAA,QAA8Ba,MAC9BhB,IAAII,qCAAOY,IAAI,CAAC;AAAA,UAElBzB;AAAAA,UAAiBQ,UAEhBM;AAAAA,QAAAA,CAAI;AAAA,MAAA,CACG;AAAA,IAAA,CACN;AAAA,EAAA,CAGC;AAEjB;;"}
+{"version":3,"file":"VerticalScrollListItem.cjs","sources":["../../../../../../src/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types\";\nimport verticalScrollListItemClasses, {\n  HvVerticalScrollListItemClasses,\n} from \"./verticalScrollListItemClasses\";\nimport { ClassNames } from \"@emotion/react\";\nimport { styles } from \"./VerticalScrollListItem.styles\";\nimport { HvTypographyProps } from \"@core/components\";\nimport { setId } from \"@core/utils\";\nimport { useCallback } from \"react\";\nimport { CurrentStep } from \"@hitachivantara/uikit-react-icons\";\nimport { useTheme } from \"@core/hooks\";\n\nexport interface HvVerticalScrollListItemProps extends HvBaseProps {\n  /** A function component that renders a typography wrapped with a tooltip. */\n  tooltipWrapper: React.FunctionComponent<{\n    id?: string;\n    className?: string;\n    variant?: HvTypographyProps[\"variant\"];\n    children?: React.ReactNode;\n  }>;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvVerticalScrollListItemClasses;\n  /** Whether the element is selected. */\n  selected?: boolean;\n  /** The function to be executed when the element is clicked. */\n  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;\n  /** The function to be executed when the element is clicked. */\n  onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;\n}\n\n/**\n * HvVerticalScrollListItem a focusable item to be used as part of the vertical scroll\n */\nexport const HvVerticalScrollListItem = ({\n  id,\n  className,\n  classes,\n  selected,\n  \"aria-label\": ariaLabel,\n  onClick,\n  onKeyDown,\n  tooltipWrapper,\n  ...others\n}: HvVerticalScrollListItemProps) => {\n  const { activeTheme } = useTheme();\n\n  const variant: HvTypographyProps[\"variant\"] = selected ? \"label\" : \"body\";\n\n  const labelId = setId(id, \"label\");\n\n  const buttonId = setId(id, \"button\");\n\n  const Tooltip = tooltipWrapper;\n\n  const NotSelected = useCallback(() => {\n    return (\n      <ClassNames>\n        {({ css, cx }) => (\n          <div\n            className={cx(\n              verticalScrollListItemClasses.notSelected,\n              css(styles.notSelected),\n              classes?.notSelected\n            )}\n          />\n        )}\n      </ClassNames>\n    );\n  }, [classes?.notSelected]);\n\n  const icon = selected ? (\n    <CurrentStep\n      height={activeTheme?.scrollTo.dotSelectedSize}\n      width={activeTheme?.scrollTo.dotSelectedSize}\n    />\n  ) : (\n    <NotSelected />\n  );\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <li\n          id={id}\n          className={cx(\n            verticalScrollListItemClasses.root,\n            css(styles.root),\n            className,\n            classes?.root\n          )}\n          aria-current={selected}\n        >\n          <div\n            id={buttonId}\n            role=\"button\"\n            tabIndex={0}\n            onClick={onClick}\n            onKeyDown={onKeyDown}\n            className={cx(\n              verticalScrollListItemClasses.button,\n              css(styles.button),\n              classes?.button\n            )}\n            aria-label={ariaLabel}\n            aria-labelledby={labelId}\n            {...others}\n          >\n            <Tooltip\n              id={labelId}\n              className={cx(\n                verticalScrollListItemClasses.text,\n                css(styles.text),\n                classes?.text\n              )}\n              variant={variant}\n            >\n              {icon}\n            </Tooltip>\n          </div>\n        </li>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["HvVerticalScrollListItem","id","className","classes","selected","ariaLabel","onClick","onKeyDown","tooltipWrapper","others","activeTheme","useTheme","variant","labelId","setId","buttonId","Tooltip","NotSelected","useCallback","ClassNames","children","css","cx","verticalScrollListItemClasses","notSelected","styles","icon","_jsx","CurrentStep","height","scrollTo","dotSelectedSize","width","root","role","tabIndex","button","text"],"mappings":";;;;;;;;;;AAiCO,MAAMA,2BAA2BA,CAAC;AAAA,EACvCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,cAAcC;AAAAA,EACdC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AAC0B,MAAM;AAC7B,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,SAAU,SAAA;AAE5BC,QAAAA,UAAwCR,WAAW,UAAU;AAE7DS,QAAAA,UAAUC,MAAAA,MAAMb,IAAI,OAAO;AAE3Bc,QAAAA,WAAWD,MAAAA,MAAMb,IAAI,QAAQ;AAEnC,QAAMe,UAAUR;AAEVS,QAAAA,cAAcC,MAAAA,YAAY,MAAM;AACpC,0CACGC,MAAAA,YAAU;AAAA,MAAAC,UACRA,CAAC;AAAA,QAAEC;AAAAA,QAAKC;AAAAA,MAAAA,qCACP,OAAA;AAAA,QACEpB,WAAWoB,GACTC,8BAA8BC,QAAAA,aAC9BH,IAAII,8BAAAA,OAAOD,WAAW,GACtBrB,mCAASqB,WAAW;AAAA,MAAA,CACpB;AAAA,IAAA,CAGK;AAAA,EAAA,GAEd,CAACrB,mCAASqB,WAAW,CAAC;AAEnBE,QAAAA,OAAOtB,WACXuB,2BAAAA,IAACC,6BAAW;AAAA,IACVC,QAAQnB,2CAAaoB,SAASC;AAAAA,IAC9BC,OAAOtB,2CAAaoB,SAASC;AAAAA,EAAgB,CAAA,IAG9Cd,2BAAAA,IAAAA,aACF,CAAA,CAAA;AAED,wCACGE,MAAAA,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,qCACP,MAAA;AAAA,MACErB;AAAAA,MACAC,WAAWoB,GACTC,sCAA8BU,MAC9BZ,IAAII,qCAAOQ,IAAI,GACf/B,WACAC,mCAAS8B,IAAI;AAAA,MAEf,gBAAc7B;AAAAA,MAASgB,yCAEvB,OAAA;AAAA,QACEnB,IAAIc;AAAAA,QACJmB,MAAK;AAAA,QACLC,UAAU;AAAA,QACV7B;AAAAA,QACAC;AAAAA,QACAL,WAAWoB,GACTC,8BAA8Ba,QAAAA,QAC9Bf,IAAII,8BAAAA,OAAOW,MAAM,GACjBjC,mCAASiC,MAAM;AAAA,QAEjB,cAAY/B;AAAAA,QACZ,mBAAiBQ;AAAAA,QAAQ,GACrBJ;AAAAA,QAAMW,yCAETJ,SAAO;AAAA,UACNf,IAAIY;AAAAA,UACJX,WAAWoB,GACTC,8BAA8Bc,QAAAA,MAC9BhB,IAAII,8BAAAA,OAAOY,IAAI,GACflC,mCAASkC,IAAI;AAAA,UAEfzB;AAAAA,UAAiBQ,UAEhBM;AAAAA,QAAAA,CAAI;AAAA,MAAA,CACG;AAAA,IAAA,CACN;AAAA,EAAA,CAGC;AAEjB;;"}

package/dist/esm/components/Banner/BannerContent/BannerContent.js

@@ -37,7 +37,7 @@ const HvBannerContent = forwardRef(({
           message: cx(bannerContentClasses.message, css(styles.message), classes == null ? void 0 : classes.message),
           action: cx(bannerContentClasses.action, css(styles.action), classes == null ? void 0 : classes.action)
         },
-        className: cx(bannerContentClasses.baseVariant, css(styles.baseVariant), classes == null ? void 0 : classes.baseVariant, bannerContentClasses[variant], css(styles[variant]), classes == null ? void 0 : classes[variant]),
+        className: cx(bannerContentClasses.baseVariant, bannerContentClasses[variant], css(styles.baseVariant), css(styles[variant]), classes == null ? void 0 : classes.baseVariant, classes == null ? void 0 : classes[variant]),
         message: /* @__PURE__ */ jsx(HvMessageContainer, {
           id,
           icon,

package/dist/esm/components/Banner/BannerContent/BannerContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"BannerContent.js","sources":["../../../../../src/components/Banner/BannerContent/BannerContent.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport SnackbarContent, {\n  SnackbarContentProps as MuiSnackbarContentProps,\n} from \"@mui/material/SnackbarContent\";\nimport { HvBaseProps } from \"@core/types\";\nimport { iconVariant } from \"@core/utils\";\nimport {\n  HvActionGeneric,\n  HvBannerActionPosition,\n  HvBannerVariant,\n} from \"@core/components\";\nimport bannerContentClasses, {\n  HvBannerContentClasses,\n} from \"./bannerContentClasses\";\nimport { HvActionContainer, HvActionContainerProps } from \"./ActionContainer\";\nimport { HvMessageContainer } from \"./MessageContainer\";\nimport { ClassNames } from \"@emotion/react\";\nimport { styles } from \"./BannerContent.styles\";\n\nexport interface HvBannerContentProps\n  extends Omit<MuiSnackbarContentProps, \"variant\" | \"classes\" | \"onClose\">,\n    HvBaseProps {\n  /** The message to display. */\n  content?: string;\n  /** Variant of the snackbar. */\n  variant?: HvBannerVariant;\n  /** Controls if the associated icon to the variant should be shown. */\n  showIcon?: boolean;\n  /** Custom icon to replace the variant default. */\n  customIcon?: React.ReactNode;\n  /** onClose function. */\n  onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /** Actions to display on the right side. */\n  actions?: React.ReactNode | HvActionGeneric[];\n  /**  The callback function ran when an action is triggered, receiving `action` as param */\n  actionsCallback?: (\n    event: React.SyntheticEvent,\n    id: string,\n    action: HvActionGeneric\n  ) => void;\n  /** The position property of the header. */\n  actionsPosition?: HvBannerActionPosition;\n  /** The props to pass down to the Action Container. */\n  actionProps?: HvActionContainerProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBannerContentClasses;\n}\n\nexport const HvBannerContent = forwardRef<HTMLDivElement, HvBannerContentProps>(\n  (\n    {\n      id,\n      classes,\n      showIcon = false,\n      customIcon,\n      variant = \"default\",\n      onClose,\n      actions,\n      actionsCallback,\n      actionsPosition = \"auto\",\n      content,\n      actionProps,\n      ...others\n    },\n    ref\n  ) => {\n    const icon =\n      customIcon || (showIcon && iconVariant(variant, \"base_dark\", undefined));\n\n    // default to inline\n    // this might try to be more intelligent in the future,\n    // taking into account the content length, available space,\n    // number of actions, etc..\n    const effectiveActionsPosition =\n      actionsPosition === \"auto\" ? \"inline\" : actionsPosition;\n\n    return (\n      <ClassNames>\n        {({ css, cx }) => (\n          <div\n            className={cx(\n              bannerContentClasses.outContainer,\n              css(styles.outContainer),\n              classes?.outContainer\n            )}\n          >\n            <SnackbarContent\n              ref={ref}\n              id={id}\n              classes={{\n                root: cx(\n                  bannerContentClasses.root,\n                  css(styles.root),\n                  classes?.root\n                ),\n                message: cx(\n                  bannerContentClasses.message,\n                  css(styles.message),\n                  classes?.message\n                ),\n                action: cx(\n                  bannerContentClasses.action,\n                  css(styles.action),\n                  classes?.action\n                ),\n              }}\n              className={cx(\n                bannerContentClasses.baseVariant,\n                css(styles.baseVariant),\n                classes?.baseVariant,\n                bannerContentClasses[variant],\n                css(styles[variant]),\n                classes?.[variant]\n              )}\n              message={\n                <HvMessageContainer\n                  id={id}\n                  icon={icon}\n                  {...(effectiveActionsPosition === \"inline\" && {\n                    actionsOnMessage: actions,\n                    actionsOnMessageCallback: actionsCallback,\n                  })}\n                  message={content}\n                />\n              }\n              action={\n                <HvActionContainer\n                  id={id}\n                  onClose={onClose}\n                  {...(effectiveActionsPosition === \"bottom-right\" && {\n                    action: actions,\n                    actionCallback: actionsCallback,\n                  })}\n                  {...actionProps}\n                />\n              }\n              {...others}\n            />\n          </div>\n        )}\n      </ClassNames>\n    );\n  }\n);\n"],"names":["HvBannerContent","forwardRef","id","classes","showIcon","customIcon","variant","onClose","actions","actionsCallback","actionsPosition","content","actionProps","others","ref","icon","iconVariant","undefined","effectiveActionsPosition","ClassNames","children","css","cx","className","bannerContentClasses","outContainer","styles","SnackbarContent","root","message","action","baseVariant","HvMessageContainer","actionsOnMessage","actionsOnMessageCallback","HvActionContainer","actionCallback"],"mappings":";;;;;;;;;AAgDaA,MAAAA,kBAAkBC,WAC7B,CACE;AAAA,EACEC;AAAAA,EACAC;AAAAA,EACAC,WAAW;AAAA,EACXC;AAAAA,EACAC,UAAU;AAAA,EACVC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,kBAAkB;AAAA,EAClBC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACL,GACAC,QACG;AACH,QAAMC,OACJV,cAAeD,YAAYY,YAAYV,SAAS,aAAaW,MAAS;AAMlEC,QAAAA,2BACJR,oBAAoB,SAAS,WAAWA;AAE1C,6BACGS,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,0BACP,OAAA;AAAA,MACEC,WAAWD,GACTE,qBAAqBC,cACrBJ,IAAIK,OAAOD,YAAY,GACvBtB,mCAASsB,YAAY;AAAA,MACrBL,8BAEDO,iBAAe;AAAA,QACdb;AAAAA,QACAZ;AAAAA,QACAC,SAAS;AAAA,UACPyB,MAAMN,GACJE,qBAAqBI,MACrBP,IAAIK,OAAOE,IAAI,GACfzB,mCAASyB,IAAI;AAAA,UAEfC,SAASP,GACPE,qBAAqBK,SACrBR,IAAIK,OAAOG,OAAO,GAClB1B,mCAAS0B,OAAO;AAAA,UAElBC,QAAQR,GACNE,qBAAqBM,QACrBT,IAAIK,OAAOI,MAAM,GACjB3B,mCAAS2B,MAAM;AAAA,QAEnB;AAAA,QACAP,WAAWD,GACTE,qBAAqBO,aACrBV,IAAIK,OAAOK,WAAW,GACtB5B,mCAAS4B,aACTP,qBAAqBlB,OAAO,GAC5Be,IAAIK,OAAOpB,OAAO,CAAC,GACnBH,mCAAUG,QAAQ;AAAA,QAEpBuB,6BACGG,oBAAkB;AAAA,UACjB9B;AAAAA,UACAa;AAAAA,UAAW,GACNG,6BAA6B,YAAY;AAAA,YAC5Ce,kBAAkBzB;AAAAA,YAClB0B,0BAA0BzB;AAAAA,UAC5B;AAAA,UACAoB,SAASlB;AAAAA,QAAAA,CAEZ;AAAA,QACDmB,4BACGK,mBAAiB;AAAA,UAChBjC;AAAAA,UACAK;AAAAA,UAAiB,GACZW,6BAA6B,kBAAkB;AAAA,YAClDY,QAAQtB;AAAAA,YACR4B,gBAAgB3B;AAAAA,UAClB;AAAA,UAAC,GACGG;AAAAA,QAAAA,CAEP;AAAA,QAAA,GACGC;AAAAA,MAAAA,CAAM;AAAA,IAAA,CACV;AAAA,EAAA,CAGK;AAEjB,CAAC;"}
+{"version":3,"file":"BannerContent.js","sources":["../../../../../src/components/Banner/BannerContent/BannerContent.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport SnackbarContent, {\n  SnackbarContentProps as MuiSnackbarContentProps,\n} from \"@mui/material/SnackbarContent\";\nimport { HvBaseProps } from \"@core/types\";\nimport { iconVariant } from \"@core/utils\";\nimport {\n  HvActionGeneric,\n  HvBannerActionPosition,\n  HvBannerVariant,\n} from \"@core/components\";\nimport bannerContentClasses, {\n  HvBannerContentClasses,\n} from \"./bannerContentClasses\";\nimport { HvActionContainer, HvActionContainerProps } from \"./ActionContainer\";\nimport { HvMessageContainer } from \"./MessageContainer\";\nimport { ClassNames } from \"@emotion/react\";\nimport { styles } from \"./BannerContent.styles\";\n\nexport interface HvBannerContentProps\n  extends Omit<MuiSnackbarContentProps, \"variant\" | \"classes\" | \"onClose\">,\n    HvBaseProps {\n  /** The message to display. */\n  content?: string;\n  /** Variant of the snackbar. */\n  variant?: HvBannerVariant;\n  /** Controls if the associated icon to the variant should be shown. */\n  showIcon?: boolean;\n  /** Custom icon to replace the variant default. */\n  customIcon?: React.ReactNode;\n  /** onClose function. */\n  onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /** Actions to display on the right side. */\n  actions?: React.ReactNode | HvActionGeneric[];\n  /**  The callback function ran when an action is triggered, receiving `action` as param */\n  actionsCallback?: (\n    event: React.SyntheticEvent,\n    id: string,\n    action: HvActionGeneric\n  ) => void;\n  /** The position property of the header. */\n  actionsPosition?: HvBannerActionPosition;\n  /** The props to pass down to the Action Container. */\n  actionProps?: HvActionContainerProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBannerContentClasses;\n}\n\nexport const HvBannerContent = forwardRef<HTMLDivElement, HvBannerContentProps>(\n  (\n    {\n      id,\n      classes,\n      showIcon = false,\n      customIcon,\n      variant = \"default\",\n      onClose,\n      actions,\n      actionsCallback,\n      actionsPosition = \"auto\",\n      content,\n      actionProps,\n      ...others\n    },\n    ref\n  ) => {\n    const icon =\n      customIcon || (showIcon && iconVariant(variant, \"base_dark\", undefined));\n\n    // default to inline\n    // this might try to be more intelligent in the future,\n    // taking into account the content length, available space,\n    // number of actions, etc..\n    const effectiveActionsPosition =\n      actionsPosition === \"auto\" ? \"inline\" : actionsPosition;\n\n    return (\n      <ClassNames>\n        {({ css, cx }) => (\n          <div\n            className={cx(\n              bannerContentClasses.outContainer,\n              css(styles.outContainer),\n              classes?.outContainer\n            )}\n          >\n            <SnackbarContent\n              ref={ref}\n              id={id}\n              classes={{\n                root: cx(\n                  bannerContentClasses.root,\n                  css(styles.root),\n                  classes?.root\n                ),\n                message: cx(\n                  bannerContentClasses.message,\n                  css(styles.message),\n                  classes?.message\n                ),\n                action: cx(\n                  bannerContentClasses.action,\n                  css(styles.action),\n                  classes?.action\n                ),\n              }}\n              className={cx(\n                bannerContentClasses.baseVariant,\n                bannerContentClasses[variant],\n                css(styles.baseVariant),\n                css(styles[variant]),\n                classes?.baseVariant,\n                classes?.[variant]\n              )}\n              message={\n                <HvMessageContainer\n                  id={id}\n                  icon={icon}\n                  {...(effectiveActionsPosition === \"inline\" && {\n                    actionsOnMessage: actions,\n                    actionsOnMessageCallback: actionsCallback,\n                  })}\n                  message={content}\n                />\n              }\n              action={\n                <HvActionContainer\n                  id={id}\n                  onClose={onClose}\n                  {...(effectiveActionsPosition === \"bottom-right\" && {\n                    action: actions,\n                    actionCallback: actionsCallback,\n                  })}\n                  {...actionProps}\n                />\n              }\n              {...others}\n            />\n          </div>\n        )}\n      </ClassNames>\n    );\n  }\n);\n"],"names":["HvBannerContent","forwardRef","id","classes","showIcon","customIcon","variant","onClose","actions","actionsCallback","actionsPosition","content","actionProps","others","ref","icon","iconVariant","undefined","effectiveActionsPosition","ClassNames","children","css","cx","className","bannerContentClasses","outContainer","styles","SnackbarContent","root","message","action","baseVariant","HvMessageContainer","actionsOnMessage","actionsOnMessageCallback","HvActionContainer","actionCallback"],"mappings":";;;;;;;;;AAgDaA,MAAAA,kBAAkBC,WAC7B,CACE;AAAA,EACEC;AAAAA,EACAC;AAAAA,EACAC,WAAW;AAAA,EACXC;AAAAA,EACAC,UAAU;AAAA,EACVC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,kBAAkB;AAAA,EAClBC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACL,GACAC,QACG;AACH,QAAMC,OACJV,cAAeD,YAAYY,YAAYV,SAAS,aAAaW,MAAS;AAMlEC,QAAAA,2BACJR,oBAAoB,SAAS,WAAWA;AAE1C,6BACGS,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,0BACP,OAAA;AAAA,MACEC,WAAWD,GACTE,qBAAqBC,cACrBJ,IAAIK,OAAOD,YAAY,GACvBtB,mCAASsB,YAAY;AAAA,MACrBL,8BAEDO,iBAAe;AAAA,QACdb;AAAAA,QACAZ;AAAAA,QACAC,SAAS;AAAA,UACPyB,MAAMN,GACJE,qBAAqBI,MACrBP,IAAIK,OAAOE,IAAI,GACfzB,mCAASyB,IAAI;AAAA,UAEfC,SAASP,GACPE,qBAAqBK,SACrBR,IAAIK,OAAOG,OAAO,GAClB1B,mCAAS0B,OAAO;AAAA,UAElBC,QAAQR,GACNE,qBAAqBM,QACrBT,IAAIK,OAAOI,MAAM,GACjB3B,mCAAS2B,MAAM;AAAA,QAEnB;AAAA,QACAP,WAAWD,GACTE,qBAAqBO,aACrBP,qBAAqBlB,OAAO,GAC5Be,IAAIK,OAAOK,WAAW,GACtBV,IAAIK,OAAOpB,OAAO,CAAC,GACnBH,mCAAS4B,aACT5B,mCAAUG,QAAQ;AAAA,QAEpBuB,6BACGG,oBAAkB;AAAA,UACjB9B;AAAAA,UACAa;AAAAA,UAAW,GACNG,6BAA6B,YAAY;AAAA,YAC5Ce,kBAAkBzB;AAAAA,YAClB0B,0BAA0BzB;AAAAA,UAC5B;AAAA,UACAoB,SAASlB;AAAAA,QAAAA,CAEZ;AAAA,QACDmB,4BACGK,mBAAiB;AAAA,UAChBjC;AAAAA,UACAK;AAAAA,UAAiB,GACZW,6BAA6B,kBAAkB;AAAA,YAClDY,QAAQtB;AAAAA,YACR4B,gBAAgB3B;AAAAA,UAClB;AAAA,UAAC,GACGG;AAAAA,QAAAA,CAEP;AAAA,QAAA,GACGC;AAAAA,MAAAA,CAAM;AAAA,IAAA,CACV;AAAA,EAAA,CAGK;AAEjB,CAAC;"}

package/dist/esm/components/Card/Card.js

@@ -1,4 +1,3 @@
-import { clsx } from "clsx";
 import { ClassNames } from "@emotion/react";
 import { theme } from "@hitachivantara/uikit-styles";
 import { styles } from "./Card.styles.js";
@@ -18,22 +17,23 @@ const HvCard = ({
 }) => {
   return /* @__PURE__ */ jsx(ClassNames, {
     children: ({
-      css
+      css,
+      cx
     }) => /* @__PURE__ */ jsxs(HvBox, {
       "aria-selected": selectable ? selected : void 0,
-      className: clsx(css(styles.root), css({
+      className: cx("HvIsCardGridElement", cardClasses.root, selectable && cardClasses.selectable, selected && cardClasses.selected, css(styles.root), css({
         backgroundColor: bgcolor && theme.colors[bgcolor] || theme.card.backgroundColor
-      }), "HvIsCardGridElement", cardClasses.root, classes == null ? void 0 : classes.root, className, selectable && clsx(css(styles.selectable), cardClasses.selectable, classes == null ? void 0 : classes.selectable), selected && clsx(css(styles.selected), cardClasses.selected, classes == null ? void 0 : classes.selected)),
+      }), selectable && css(styles.selectable), selected && css(styles.selected), className, classes == null ? void 0 : classes.root, selectable && css(styles.selectable), selected && css(styles.selected)),
       ...others,
       children: [/* @__PURE__ */ jsxs("div", {
-        className: clsx(css(styles.semanticContainer), cardClasses.semanticContainer, classes == null ? void 0 : classes.semanticContainer),
+        className: cx(cardClasses.semanticContainer, css(styles.semanticContainer), classes == null ? void 0 : classes.semanticContainer),
         children: [/* @__PURE__ */ jsx("div", {
-          className: clsx(css(styles.semanticBar), css({
+          className: cx(cardClasses.semanticBar, css(styles.semanticBar), css({
             height: selected ? 4 : 2,
             backgroundColor: statusColor === "sema0" ? selected ? theme.colors.secondary : theme.colors.atmo4 : theme.colors[statusColor]
-          }), cardClasses.semanticBar, classes == null ? void 0 : classes.semanticBar)
+          }), classes == null ? void 0 : classes.semanticBar)
         }), /* @__PURE__ */ jsx("div", {
-          className: clsx(css(styles.icon), cardClasses.icon, classes == null ? void 0 : classes.icon),
+          className: cx(cardClasses.icon, css(styles.icon), classes == null ? void 0 : classes.icon),
           children: icon
         })]
       }), children]

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

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ClassNames } from \"@emotion/react\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { HvBox } from \"@core/components\";\nimport {\n  HvBaseProps,\n  HvAtmosphereColorKeys,\n  HvSemanticColorKeys,\n} from \"@core/types\";\nimport { styles } from \"./Card.styles\";\nimport cardClasses, { HvCardClasses } from \"./cardClasses\";\n\nexport interface HvCardProps extends HvBaseProps {\n  /** The renderable content inside the icon slot of the header. */\n  icon?: React.ReactNode;\n  /** Whether the card is selectable. */\n  selectable?: boolean;\n  /** Whether the card is currently selected. */\n  selected?: boolean;\n  /** The background color of the card. */\n  bgcolor?:\n    | \"sema0\"\n    | HvSemanticColorKeys\n    | HvAtmosphereColorKeys\n    | \"transparent\";\n  /**\n   *  The border color at the top of the card. Must be one of palette semantic or atmosphere colors.\n   *  To set another color, the borderTop should be override.\n   */\n  statusColor?: \"sema0\" | HvSemanticColorKeys | HvAtmosphereColorKeys;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvCardClasses;\n}\n\n/**\n * A card is a container for a few short and related pieces of content.\n * It roughly resembles a playing card in size and shape and is intended as a\n * linked short representation of a conceptual unit. For that reason,\n * this pattern must be used as an entry-point for further information.\n */\nexport const HvCard = ({\n  classes,\n  className,\n  children,\n  icon,\n  selectable = false,\n  selected = false,\n  statusColor = \"sema0\",\n  bgcolor,\n  ...others\n}: HvCardProps) => {\n  return (\n    <ClassNames>\n      {({ css }) => (\n        <HvBox\n          aria-selected={selectable ? selected : undefined}\n          className={clsx(\n            css(styles.root),\n            css({\n              backgroundColor:\n                (bgcolor && theme.colors[bgcolor]) ||\n                theme.card.backgroundColor,\n            }),\n            \"HvIsCardGridElement\",\n            cardClasses.root,\n            classes?.root,\n            className,\n            selectable &&\n              clsx(\n                css(styles.selectable),\n                cardClasses.selectable,\n                classes?.selectable\n              ),\n            selected &&\n              clsx(\n                css(styles.selected),\n                cardClasses.selected,\n                classes?.selected\n              )\n          )}\n          {...others}\n        >\n          <div\n            className={clsx(\n              css(styles.semanticContainer),\n              cardClasses.semanticContainer,\n              classes?.semanticContainer\n            )}\n          >\n            <div\n              className={clsx(\n                css(styles.semanticBar),\n                css({\n                  height: selected ? 4 : 2,\n                  backgroundColor:\n                    statusColor === \"sema0\"\n                      ? selected\n                        ? theme.colors.secondary\n                        : theme.colors.atmo4\n                      : theme.colors[statusColor],\n                }),\n                cardClasses.semanticBar,\n                classes?.semanticBar\n              )}\n            />\n            <div\n              className={clsx(\n                css(styles.icon),\n                cardClasses.icon,\n                classes?.icon\n              )}\n            >\n              {icon}\n            </div>\n          </div>\n          {children}\n        </HvBox>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["HvCard","classes","className","children","icon","selectable","selected","statusColor","bgcolor","others","ClassNames","css","HvBox","undefined","clsx","styles","root","backgroundColor","theme","colors","card","cardClasses","_jsxs","semanticContainer","_jsx","semanticBar","height","secondary","atmo4"],"mappings":";;;;;;;AAwCO,MAAMA,SAASA,CAAC;AAAA,EACrBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,aAAa;AAAA,EACbC,WAAW;AAAA,EACXC,cAAc;AAAA,EACdC;AAAAA,EACA,GAAGC;AACQ,MAAM;AACjB,6BACGC,YAAU;AAAA,IAAAP,UACRA,CAAC;AAAA,MAAEQ;AAAAA,IAAAA,2BACDC,OAAK;AAAA,MACJ,iBAAeP,aAAaC,WAAWO;AAAAA,MACvCX,WAAWY,KACTH,IAAII,OAAOC,IAAI,GACfL,IAAI;AAAA,QACFM,iBACGT,WAAWU,MAAMC,OAAOX,OAAO,KAChCU,MAAME,KAAKH;AAAAA,MACd,CAAA,GACD,uBACAI,YAAYL,MACZf,mCAASe,MACTd,WACAG,cACES,KACEH,IAAII,OAAOV,UAAU,GACrBgB,YAAYhB,YACZJ,mCAASI,UAAU,GAEvBC,YACEQ,KACEH,IAAII,OAAOT,QAAQ,GACnBe,YAAYf,UACZL,mCAASK,QAAQ,CAClB;AAAA,MACH,GACEG;AAAAA,MAAMN,WAEVmB,qBAAA,OAAA;AAAA,QACEpB,WAAWY,KACTH,IAAII,OAAOQ,iBAAiB,GAC5BF,YAAYE,mBACZtB,mCAASsB,iBAAiB;AAAA,QAC1BpB,WAEFqB,oBAAA,OAAA;AAAA,UACEtB,WAAWY,KACTH,IAAII,OAAOU,WAAW,GACtBd,IAAI;AAAA,YACFe,QAAQpB,WAAW,IAAI;AAAA,YACvBW,iBACEV,gBAAgB,UACZD,WACEY,MAAMC,OAAOQ,YACbT,MAAMC,OAAOS,QACfV,MAAMC,OAAOZ,WAAW;AAAA,UAC/B,CAAA,GACDc,YAAYI,aACZxB,mCAASwB,WAAW;AAAA,QAAA,CACpB,GAEJD,oBAAA,OAAA;AAAA,UACEtB,WAAWY,KACTH,IAAII,OAAOX,IAAI,GACfiB,YAAYjB,MACZH,mCAASG,IAAI;AAAA,UACbD,UAEDC;AAAAA,QAAAA,CACG,CAAA;AAAA,MAAA,CAAA,GAEPD,QAAQ;AAAA,IAAA,CAAA;AAAA,EAAA,CAGF;AAEjB;"}
+{"version":3,"file":"Card.js","sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import { ClassNames } from \"@emotion/react\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { HvBox } from \"@core/components\";\nimport {\n  HvBaseProps,\n  HvAtmosphereColorKeys,\n  HvSemanticColorKeys,\n} from \"@core/types\";\nimport { styles } from \"./Card.styles\";\nimport cardClasses, { HvCardClasses } from \"./cardClasses\";\n\nexport interface HvCardProps extends HvBaseProps {\n  /** The renderable content inside the icon slot of the header. */\n  icon?: React.ReactNode;\n  /** Whether the card is selectable. */\n  selectable?: boolean;\n  /** Whether the card is currently selected. */\n  selected?: boolean;\n  /** The background color of the card. */\n  bgcolor?:\n    | \"sema0\"\n    | HvSemanticColorKeys\n    | HvAtmosphereColorKeys\n    | \"transparent\";\n  /**\n   *  The border color at the top of the card. Must be one of palette semantic or atmosphere colors.\n   *  To set another color, the borderTop should be override.\n   */\n  statusColor?: \"sema0\" | HvSemanticColorKeys | HvAtmosphereColorKeys;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvCardClasses;\n}\n\n/**\n * A card is a container for a few short and related pieces of content.\n * It roughly resembles a playing card in size and shape and is intended as a\n * linked short representation of a conceptual unit. For that reason,\n * this pattern must be used as an entry-point for further information.\n */\nexport const HvCard = ({\n  classes,\n  className,\n  children,\n  icon,\n  selectable = false,\n  selected = false,\n  statusColor = \"sema0\",\n  bgcolor,\n  ...others\n}: HvCardProps) => {\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <HvBox\n          aria-selected={selectable ? selected : undefined}\n          className={cx(\n            \"HvIsCardGridElement\",\n            cardClasses.root,\n            selectable && cardClasses.selectable,\n            selected && cardClasses.selected,\n            css(styles.root),\n            css({\n              backgroundColor:\n                (bgcolor && theme.colors[bgcolor]) ||\n                theme.card.backgroundColor,\n            }),\n            selectable && css(styles.selectable),\n            selected && css(styles.selected),\n            className,\n            classes?.root,\n            selectable && css(styles.selectable),\n            selected && css(styles.selected)\n          )}\n          {...others}\n        >\n          <div\n            className={cx(\n              cardClasses.semanticContainer,\n              css(styles.semanticContainer),\n              classes?.semanticContainer\n            )}\n          >\n            <div\n              className={cx(\n                cardClasses.semanticBar,\n                css(styles.semanticBar),\n                css({\n                  height: selected ? 4 : 2,\n                  backgroundColor:\n                    statusColor === \"sema0\"\n                      ? selected\n                        ? theme.colors.secondary\n                        : theme.colors.atmo4\n                      : theme.colors[statusColor],\n                }),\n                classes?.semanticBar\n              )}\n            />\n            <div\n              className={cx(cardClasses.icon, css(styles.icon), classes?.icon)}\n            >\n              {icon}\n            </div>\n          </div>\n          {children}\n        </HvBox>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["HvCard","classes","className","children","icon","selectable","selected","statusColor","bgcolor","others","ClassNames","css","cx","HvBox","undefined","cardClasses","root","styles","backgroundColor","theme","colors","card","_jsxs","semanticContainer","_jsx","semanticBar","height","secondary","atmo4"],"mappings":";;;;;;AAuCO,MAAMA,SAASA,CAAC;AAAA,EACrBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,aAAa;AAAA,EACbC,WAAW;AAAA,EACXC,cAAc;AAAA,EACdC;AAAAA,EACA,GAAGC;AACQ,MAAM;AACjB,6BACGC,YAAU;AAAA,IAAAP,UACRA,CAAC;AAAA,MAAEQ;AAAAA,MAAKC;AAAAA,IAAAA,2BACNC,OAAK;AAAA,MACJ,iBAAeR,aAAaC,WAAWQ;AAAAA,MACvCZ,WAAWU,GACT,uBACAG,YAAYC,MACZX,cAAcU,YAAYV,YAC1BC,YAAYS,YAAYT,UACxBK,IAAIM,OAAOD,IAAI,GACfL,IAAI;AAAA,QACFO,iBACGV,WAAWW,MAAMC,OAAOZ,OAAO,KAChCW,MAAME,KAAKH;AAAAA,MAAAA,CACd,GACDb,cAAcM,IAAIM,OAAOZ,UAAU,GACnCC,YAAYK,IAAIM,OAAOX,QAAQ,GAC/BJ,WACAD,mCAASe,MACTX,cAAcM,IAAIM,OAAOZ,UAAU,GACnCC,YAAYK,IAAIM,OAAOX,QAAQ,CAAC;AAAA,MAChC,GACEG;AAAAA,MAAMN,WAEVmB,qBAAA,OAAA;AAAA,QACEpB,WAAWU,GACTG,YAAYQ,mBACZZ,IAAIM,OAAOM,iBAAiB,GAC5BtB,mCAASsB,iBAAiB;AAAA,QAC1BpB,WAEFqB,oBAAA,OAAA;AAAA,UACEtB,WAAWU,GACTG,YAAYU,aACZd,IAAIM,OAAOQ,WAAW,GACtBd,IAAI;AAAA,YACFe,QAAQpB,WAAW,IAAI;AAAA,YACvBY,iBACEX,gBAAgB,UACZD,WACEa,MAAMC,OAAOO,YACbR,MAAMC,OAAOQ,QACfT,MAAMC,OAAOb,WAAW;AAAA,UAAA,CAC/B,GACDN,mCAASwB,WAAW;AAAA,QAAA,CACpB,GAEJD,oBAAA,OAAA;AAAA,UACEtB,WAAWU,GAAGG,YAAYX,MAAMO,IAAIM,OAAOb,IAAI,GAAGH,mCAASG,IAAI;AAAA,UAAED,UAEhEC;AAAAA,QAAAA,CACG,CAAA;AAAA,MAAA,CAAA,GAEPD,QAAQ;AAAA,IAAA,CAAA;AAAA,EAAA,CAGF;AAEjB;"}

package/dist/esm/components/Card/Content/Content.js

@@ -1,4 +1,3 @@
-import { clsx } from "clsx";
 import { styles } from "./Content.styles.js";
 import MuiCardContent from "@mui/material/CardContent";
 import cardContentClasses from "./contentClasses.js";
@@ -14,10 +13,11 @@ const HvCardContent = ({
 }) => {
   return /* @__PURE__ */ jsx(ClassNames, {
     children: ({
-      css
+      css,
+      cx
     }) => /* @__PURE__ */ jsx(MuiCardContent, {
       id,
-      className: clsx(css(styles.content), classes == null ? void 0 : classes.content, cardContentClasses.content, className),
+      className: cx(cardContentClasses.content, css(styles.content), className, classes == null ? void 0 : classes.content),
       onClick,
       ...others,
       children

package/dist/esm/components/Card/Content/Content.js.map

@@ -1 +1 @@
-{"version":3,"file":"Content.js","sources":["../../../../../src/components/Card/Content/Content.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { HvBaseProps } from \"@core/types\";\nimport { styles } from \"./Content.styles\";\nimport MuiCardContent, {\n  CardContentProps as MuiCardContentProps,\n} from \"@mui/material/CardContent\";\nimport cardContentClasses, { HvCardContentClasses } from \"./contentClasses\";\nimport { ClassNames } from \"@emotion/react\";\n\nexport interface HvCardContentProps\n  extends Omit<MuiCardContentProps, \"classes\">,\n    HvBaseProps {\n  /** Id to be applied to the root node. */\n  id?: string;\n  /** The function that will be executed when this section is clicked. */\n  onClick?: (event: React.SyntheticEvent) => void;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvCardContentClasses;\n}\n\nexport const HvCardContent = ({\n  id,\n  classes,\n  className,\n  children,\n  onClick,\n  ...others\n}: HvCardContentProps) => {\n  return (\n    <ClassNames>\n      {({ css }) => (\n        <MuiCardContent\n          id={id}\n          className={clsx(\n            css(styles.content),\n            classes?.content,\n            cardContentClasses.content,\n            className\n          )}\n          onClick={onClick}\n          {...others}\n        >\n          {children}\n        </MuiCardContent>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["HvCardContent","id","classes","className","children","onClick","others","ClassNames","css","MuiCardContent","clsx","styles","content","cardContentClasses"],"mappings":";;;;;;AAoBO,MAAMA,gBAAgBA,CAAC;AAAA,EAC5BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACe,MAAM;AACxB,6BACGC,YAAU;AAAA,IAAAH,UACRA,CAAC;AAAA,MAAEI;AAAAA,IAAAA,0BACDC,gBAAc;AAAA,MACbR;AAAAA,MACAE,WAAWO,KACTF,IAAIG,OAAOC,OAAO,GAClBV,mCAASU,SACTC,mBAAmBD,SACnBT,SAAS;AAAA,MAEXE;AAAAA,MAAiB,GACbC;AAAAA,MAAMF;AAAAA,IAAAA,CAED;AAAA,EAAA,CAGF;AAEjB;"}
+{"version":3,"file":"Content.js","sources":["../../../../../src/components/Card/Content/Content.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types\";\nimport { styles } from \"./Content.styles\";\nimport MuiCardContent, {\n  CardContentProps as MuiCardContentProps,\n} from \"@mui/material/CardContent\";\nimport cardContentClasses, { HvCardContentClasses } from \"./contentClasses\";\nimport { ClassNames } from \"@emotion/react\";\n\nexport interface HvCardContentProps\n  extends Omit<MuiCardContentProps, \"classes\">,\n    HvBaseProps {\n  /** Id to be applied to the root node. */\n  id?: string;\n  /** The function that will be executed when this section is clicked. */\n  onClick?: (event: React.SyntheticEvent) => void;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvCardContentClasses;\n}\n\nexport const HvCardContent = ({\n  id,\n  classes,\n  className,\n  children,\n  onClick,\n  ...others\n}: HvCardContentProps) => {\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <MuiCardContent\n          id={id}\n          className={cx(\n            cardContentClasses.content,\n            css(styles.content),\n            className,\n            classes?.content\n          )}\n          onClick={onClick}\n          {...others}\n        >\n          {children}\n        </MuiCardContent>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["HvCardContent","id","classes","className","children","onClick","others","ClassNames","css","cx","MuiCardContent","cardContentClasses","content","styles"],"mappings":";;;;;AAmBO,MAAMA,gBAAgBA,CAAC;AAAA,EAC5BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACe,MAAM;AACxB,6BACGC,YAAU;AAAA,IAAAH,UACRA,CAAC;AAAA,MAAEI;AAAAA,MAAKC;AAAAA,IAAAA,0BACNC,gBAAc;AAAA,MACbT;AAAAA,MACAE,WAAWM,GACTE,mBAAmBC,SACnBJ,IAAIK,OAAOD,OAAO,GAClBT,WACAD,mCAASU,OAAO;AAAA,MAElBP;AAAAA,MAAiB,GACbC;AAAAA,MAAMF;AAAAA,IAAAA,CAED;AAAA,EAAA,CAGF;AAEjB;"}

package/dist/esm/components/Card/Header/Header.js

@@ -1,4 +1,3 @@
-import { clsx } from "clsx";
 import MuiCardHeader from "@mui/material/CardHeader";
 import cardHeaderClasses from "./headerClasses.js";
 import { styles } from "./Header.styles.js";
@@ -19,25 +18,26 @@ const HvCardHeader = ({
   } = useTheme();
   return /* @__PURE__ */ jsx(ClassNames, {
     children: ({
-      css
+      css,
+      cx
     }) => /* @__PURE__ */ jsx(MuiCardHeader, {
       title,
       subheader,
       action: icon,
       onClick,
-      className: clsx(css(styles.root), classes == null ? void 0 : classes.root, cardHeaderClasses.root, className),
+      className: cx(cardHeaderClasses.root, css(styles.root), className, classes == null ? void 0 : classes.root),
       classes: {
-        title: icon ? clsx(css(styles.titleShort), cardHeaderClasses.titleShort, classes == null ? void 0 : classes.titleShort, css({
+        title: icon ? cx(cardHeaderClasses.titleShort, css(styles.titleShort), css({
           ...activeTheme == null ? void 0 : activeTheme.typography[activeTheme == null ? void 0 : activeTheme.card.titleVariant]
-        })) : clsx(css(styles.title), cardHeaderClasses.title, classes == null ? void 0 : classes.title, css({
+        }), classes == null ? void 0 : classes.titleShort) : cx(cardHeaderClasses.title, css(styles.title), css({
           ...activeTheme == null ? void 0 : activeTheme.typography[activeTheme == null ? void 0 : activeTheme.card.titleVariant]
-        })),
-        subheader: clsx(css(styles.subheader), cardHeaderClasses.subheader, classes == null ? void 0 : classes.subheader, css({
+        }), classes == null ? void 0 : classes.title),
+        subheader: cx(cardHeaderClasses.subheader, css(styles.subheader), css({
           ...activeTheme == null ? void 0 : activeTheme.typography[activeTheme == null ? void 0 : activeTheme.card.subheaderVariant],
           color: activeTheme == null ? void 0 : activeTheme.card.subheaderColor
-        })),
-        action: clsx(css(styles.action), cardHeaderClasses.action, classes == null ? void 0 : classes.action),
-        content: clsx(cardHeaderClasses.content, classes == null ? void 0 : classes.content)
+        }), classes == null ? void 0 : classes.subheader),
+        action: cx(cardHeaderClasses.action, css(styles.action), classes == null ? void 0 : classes.action),
+        content: cx(cardHeaderClasses.content, classes == null ? void 0 : classes.content)
       },
       ...others
     })

package/dist/esm/components/Card/Header/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sources":["../../../../../src/components/Card/Header/Header.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport MuiCardHeader, {\n  CardHeaderProps as MuiCardHeaderProps,\n} from \"@mui/material/CardHeader\";\nimport { HvBaseProps } from \"@core/types\";\nimport cardHeaderClasses, { HvCardHeaderClasses } from \"./headerClasses\";\nimport { styles } from \"./Header.styles\";\nimport { useTheme } from \"@core/hooks\";\nimport { ClassNames } from \"@emotion/react\";\n\nexport interface HvCardHeaderProps\n  extends Omit<MuiCardHeaderProps, \"classes\">,\n    HvBaseProps<HTMLDivElement, \"title\"> {\n  /** The renderable content inside the title slot of the header. */\n  title: React.ReactNode;\n  /** The renderable content inside the subheader slot of the header. */\n  subheader?: React.ReactNode;\n  /** The renderable content inside the icon slot of the header. */\n  icon?: React.ReactNode;\n  /** The function that will be executed when this section is clicked. */\n  onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvCardHeaderClasses;\n}\n\nexport const HvCardHeader = ({\n  classes,\n  className,\n  title,\n  subheader,\n  icon,\n  onClick,\n  ...others\n}: HvCardHeaderProps) => {\n  const { activeTheme } = useTheme();\n\n  return (\n    <ClassNames>\n      {({ css }) => (\n        <MuiCardHeader\n          title={title}\n          subheader={subheader}\n          action={icon}\n          onClick={onClick}\n          className={clsx(\n            css(styles.root),\n            classes?.root,\n            cardHeaderClasses.root,\n            className\n          )}\n          classes={{\n            title: icon\n              ? clsx(\n                  css(styles.titleShort),\n                  cardHeaderClasses.titleShort,\n                  classes?.titleShort,\n                  css({\n                    ...activeTheme?.typography[activeTheme?.card.titleVariant],\n                  })\n                )\n              : clsx(\n                  css(styles.title),\n                  cardHeaderClasses.title,\n                  classes?.title,\n                  css({\n                    ...activeTheme?.typography[activeTheme?.card.titleVariant],\n                  })\n                ),\n            subheader: clsx(\n              css(styles.subheader),\n              cardHeaderClasses.subheader,\n              classes?.subheader,\n              css({\n                ...activeTheme?.typography[activeTheme?.card.subheaderVariant],\n                color: activeTheme?.card.subheaderColor,\n              })\n            ),\n            action: clsx(\n              css(styles.action),\n              cardHeaderClasses.action,\n              classes?.action\n            ),\n            content: clsx(cardHeaderClasses.content, classes?.content),\n          }}\n          {...others}\n        />\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["HvCardHeader","classes","className","title","subheader","icon","onClick","others","activeTheme","useTheme","ClassNames","children","css","MuiCardHeader","action","clsx","styles","root","cardHeaderClasses","titleShort","typography","card","titleVariant","subheaderVariant","color","subheaderColor","content"],"mappings":";;;;;;;AAyBO,MAAMA,eAAeA,CAAC;AAAA,EAC3BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACc,MAAM;AACjB,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,SAAU;AAElC,6BACGC,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,IAAAA,0BACDC,eAAa;AAAA,MACZV;AAAAA,MACAC;AAAAA,MACAU,QAAQT;AAAAA,MACRC;AAAAA,MACAJ,WAAWa,KACTH,IAAII,OAAOC,IAAI,GACfhB,mCAASgB,MACTC,kBAAkBD,MAClBf,SAAS;AAAA,MAEXD,SAAS;AAAA,QACPE,OAAOE,OACHU,KACEH,IAAII,OAAOG,UAAU,GACrBD,kBAAkBC,YAClBlB,mCAASkB,YACTP,IAAI;AAAA,UACF,GAAGJ,2CAAaY,WAAWZ,2CAAaa,KAAKC;AAAAA,QAC9C,CAAA,CAAC,IAEJP,KACEH,IAAII,OAAOb,KAAK,GAChBe,kBAAkBf,OAClBF,mCAASE,OACTS,IAAI;AAAA,UACF,GAAGJ,2CAAaY,WAAWZ,2CAAaa,KAAKC;AAAAA,QAAY,CAC1D,CAAC;AAAA,QAERlB,WAAWW,KACTH,IAAII,OAAOZ,SAAS,GACpBc,kBAAkBd,WAClBH,mCAASG,WACTQ,IAAI;AAAA,UACF,GAAGJ,2CAAaY,WAAWZ,2CAAaa,KAAKE;AAAAA,UAC7CC,OAAOhB,2CAAaa,KAAKI;AAAAA,QAAAA,CAC1B,CAAC;AAAA,QAEJX,QAAQC,KACNH,IAAII,OAAOF,MAAM,GACjBI,kBAAkBJ,QAClBb,mCAASa,MAAM;AAAA,QAEjBY,SAASX,KAAKG,kBAAkBQ,SAASzB,mCAASyB,OAAO;AAAA,MAC3D;AAAA,MAAE,GACEnB;AAAAA,IAAAA,CAAM;AAAA,EAAA,CAGH;AAEjB;"}
+{"version":3,"file":"Header.js","sources":["../../../../../src/components/Card/Header/Header.tsx"],"sourcesContent":["import MuiCardHeader, {\n  CardHeaderProps as MuiCardHeaderProps,\n} from \"@mui/material/CardHeader\";\nimport { HvBaseProps } from \"@core/types\";\nimport cardHeaderClasses, { HvCardHeaderClasses } from \"./headerClasses\";\nimport { styles } from \"./Header.styles\";\nimport { useTheme } from \"@core/hooks\";\nimport { ClassNames } from \"@emotion/react\";\n\nexport interface HvCardHeaderProps\n  extends Omit<MuiCardHeaderProps, \"classes\">,\n    HvBaseProps<HTMLDivElement, \"title\"> {\n  /** The renderable content inside the title slot of the header. */\n  title: React.ReactNode;\n  /** The renderable content inside the subheader slot of the header. */\n  subheader?: React.ReactNode;\n  /** The renderable content inside the icon slot of the header. */\n  icon?: React.ReactNode;\n  /** The function that will be executed when this section is clicked. */\n  onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvCardHeaderClasses;\n}\n\nexport const HvCardHeader = ({\n  classes,\n  className,\n  title,\n  subheader,\n  icon,\n  onClick,\n  ...others\n}: HvCardHeaderProps) => {\n  const { activeTheme } = useTheme();\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <MuiCardHeader\n          title={title}\n          subheader={subheader}\n          action={icon}\n          onClick={onClick}\n          className={cx(\n            cardHeaderClasses.root,\n            css(styles.root),\n            className,\n            classes?.root\n          )}\n          classes={{\n            title: icon\n              ? cx(\n                  cardHeaderClasses.titleShort,\n                  css(styles.titleShort),\n                  css({\n                    ...activeTheme?.typography[activeTheme?.card.titleVariant],\n                  }),\n                  classes?.titleShort\n                )\n              : cx(\n                  cardHeaderClasses.title,\n                  css(styles.title),\n                  css({\n                    ...activeTheme?.typography[activeTheme?.card.titleVariant],\n                  }),\n                  classes?.title\n                ),\n            subheader: cx(\n              cardHeaderClasses.subheader,\n              css(styles.subheader),\n              css({\n                ...activeTheme?.typography[activeTheme?.card.subheaderVariant],\n                color: activeTheme?.card.subheaderColor,\n              }),\n              classes?.subheader\n            ),\n            action: cx(\n              cardHeaderClasses.action,\n              css(styles.action),\n              classes?.action\n            ),\n            content: cx(cardHeaderClasses.content, classes?.content),\n          }}\n          {...others}\n        />\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["HvCardHeader","classes","className","title","subheader","icon","onClick","others","activeTheme","useTheme","ClassNames","children","css","cx","MuiCardHeader","action","cardHeaderClasses","root","styles","titleShort","typography","card","titleVariant","subheaderVariant","color","subheaderColor","content"],"mappings":";;;;;;AAwBO,MAAMA,eAAeA,CAAC;AAAA,EAC3BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACc,MAAM;AACjB,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,SAAU;AAElC,6BACGC,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,0BACNC,eAAa;AAAA,MACZX;AAAAA,MACAC;AAAAA,MACAW,QAAQV;AAAAA,MACRC;AAAAA,MACAJ,WAAWW,GACTG,kBAAkBC,MAClBL,IAAIM,OAAOD,IAAI,GACff,WACAD,mCAASgB,IAAI;AAAA,MAEfhB,SAAS;AAAA,QACPE,OAAOE,OACHQ,GACEG,kBAAkBG,YAClBP,IAAIM,OAAOC,UAAU,GACrBP,IAAI;AAAA,UACF,GAAGJ,2CAAaY,WAAWZ,2CAAaa,KAAKC;AAAAA,QAC9C,CAAA,GACDrB,mCAASkB,UAAU,IAErBN,GACEG,kBAAkBb,OAClBS,IAAIM,OAAOf,KAAK,GAChBS,IAAI;AAAA,UACF,GAAGJ,2CAAaY,WAAWZ,2CAAaa,KAAKC;AAAAA,QAAY,CAC1D,GACDrB,mCAASE,KAAK;AAAA,QAEpBC,WAAWS,GACTG,kBAAkBZ,WAClBQ,IAAIM,OAAOd,SAAS,GACpBQ,IAAI;AAAA,UACF,GAAGJ,2CAAaY,WAAWZ,2CAAaa,KAAKE;AAAAA,UAC7CC,OAAOhB,2CAAaa,KAAKI;AAAAA,QAAAA,CAC1B,GACDxB,mCAASG,SAAS;AAAA,QAEpBW,QAAQF,GACNG,kBAAkBD,QAClBH,IAAIM,OAAOH,MAAM,GACjBd,mCAASc,MAAM;AAAA,QAEjBW,SAASb,GAAGG,kBAAkBU,SAASzB,mCAASyB,OAAO;AAAA,MACzD;AAAA,MAAE,GACEnB;AAAAA,IAAAA,CAAM;AAAA,EAAA,CAGH;AAEjB;"}

package/dist/esm/components/Card/Media/Media.js

@@ -1,7 +1,6 @@
 import MuiCardMedia from "@mui/material/CardMedia";
 import { styles } from "./Media.styles.js";
 import cardMediaClasses from "./mediaClasses.js";
-import { clsx } from "clsx";
 import { ClassNames } from "@emotion/react";
 import { jsx } from "@emotion/react/jsx-runtime";
 const HvCardMedia = ({
@@ -15,12 +14,13 @@ const HvCardMedia = ({
 }) => {
   return /* @__PURE__ */ jsx(ClassNames, {
     children: ({
-      css
+      css,
+      cx
     }) => /* @__PURE__ */ jsx(MuiCardMedia, {
       id,
       classes: {
-        root: clsx(css(styles.root), cardMediaClasses.root, classes == null ? void 0 : classes.root),
-        media: clsx(cardMediaClasses.media, classes == null ? void 0 : classes.media)
+        root: cx(cardMediaClasses.root, css(styles.root), classes == null ? void 0 : classes.root),
+        media: cx(cardMediaClasses.media, classes == null ? void 0 : classes.media)
       },
       className,
       role: "img",

package/dist/esm/components/Card/Media/Media.js.map

@@ -1 +1 @@
-{"version":3,"file":"Media.js","sources":["../../../../../src/components/Card/Media/Media.tsx"],"sourcesContent":["import MuiCardMedia, {\n  CardMediaProps as MuiCardMediaProps,\n} from \"@mui/material/CardMedia\";\nimport { styles } from \"./Media.styles\";\nimport { HvBaseProps } from \"@core/types\";\nimport cardMediaClasses, { HvCardMediaClasses } from \"./mediaClasses\";\nimport { clsx } from \"clsx\";\nimport { ImgHTMLAttributes } from \"react\";\nimport { ClassNames } from \"@emotion/react\";\n\nexport interface HvCardMediaProps\n  extends Omit<MuiCardMediaProps, \"classes\">,\n    ImgHTMLAttributes<HTMLDivElement>,\n    HvBaseProps<HTMLDivElement, \"onClick\" | \"title\"> {\n  /** Id to be applied to the root node. */\n  id?: string;\n  /** The title of the media. */\n  title?: string;\n  /** The function that will be executed when this section is clicked. */\n  onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;\n  /** The component used for the root node. Either a string to use a HTML element or a component. */\n  component?: React.ElementType;\n  /** The image to display. */\n  image?: string;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvCardMediaClasses;\n}\n\nexport const HvCardMedia = ({\n  id,\n  classes,\n  className,\n  children,\n  title,\n  onClick,\n  ...others\n}: HvCardMediaProps) => {\n  return (\n    <ClassNames>\n      {({ css }) => (\n        <MuiCardMedia\n          id={id}\n          classes={{\n            root: clsx(css(styles.root), cardMediaClasses.root, classes?.root),\n            media: clsx(cardMediaClasses.media, classes?.media),\n          }}\n          className={className}\n          role=\"img\"\n          title={title}\n          onClick={onClick}\n          {...others}\n        >\n          {children}\n        </MuiCardMedia>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["HvCardMedia","id","classes","className","children","title","onClick","others","ClassNames","css","MuiCardMedia","root","clsx","styles","cardMediaClasses","media","role"],"mappings":";;;;;;AA4BO,MAAMA,cAAcA,CAAC;AAAA,EAC1BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACa,MAAM;AACtB,6BACGC,YAAU;AAAA,IAAAJ,UACRA,CAAC;AAAA,MAAEK;AAAAA,IAAAA,0BACDC,cAAY;AAAA,MACXT;AAAAA,MACAC,SAAS;AAAA,QACPS,MAAMC,KAAKH,IAAII,OAAOF,IAAI,GAAGG,iBAAiBH,MAAMT,mCAASS,IAAI;AAAA,QACjEI,OAAOH,KAAKE,iBAAiBC,OAAOb,mCAASa,KAAK;AAAA,MACpD;AAAA,MACAZ;AAAAA,MACAa,MAAK;AAAA,MACLX;AAAAA,MACAC;AAAAA,MAAiB,GACbC;AAAAA,MAAMH;AAAAA,IAAAA,CAED;AAAA,EAAA,CAGF;AAEjB;"}
+{"version":3,"file":"Media.js","sources":["../../../../../src/components/Card/Media/Media.tsx"],"sourcesContent":["import MuiCardMedia, {\n  CardMediaProps as MuiCardMediaProps,\n} from \"@mui/material/CardMedia\";\nimport { styles } from \"./Media.styles\";\nimport { HvBaseProps } from \"@core/types\";\nimport cardMediaClasses, { HvCardMediaClasses } from \"./mediaClasses\";\nimport { ImgHTMLAttributes } from \"react\";\nimport { ClassNames } from \"@emotion/react\";\n\nexport interface HvCardMediaProps\n  extends Omit<MuiCardMediaProps, \"classes\">,\n    ImgHTMLAttributes<HTMLDivElement>,\n    HvBaseProps<HTMLDivElement, \"onClick\" | \"title\"> {\n  /** Id to be applied to the root node. */\n  id?: string;\n  /** The title of the media. */\n  title?: string;\n  /** The function that will be executed when this section is clicked. */\n  onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;\n  /** The component used for the root node. Either a string to use a HTML element or a component. */\n  component?: React.ElementType;\n  /** The image to display. */\n  image?: string;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvCardMediaClasses;\n}\n\nexport const HvCardMedia = ({\n  id,\n  classes,\n  className,\n  children,\n  title,\n  onClick,\n  ...others\n}: HvCardMediaProps) => {\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <MuiCardMedia\n          id={id}\n          classes={{\n            root: cx(cardMediaClasses.root, css(styles.root), classes?.root),\n            media: cx(cardMediaClasses.media, classes?.media),\n          }}\n          className={className}\n          role=\"img\"\n          title={title}\n          onClick={onClick}\n          {...others}\n        >\n          {children}\n        </MuiCardMedia>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["HvCardMedia","id","classes","className","children","title","onClick","others","ClassNames","css","cx","MuiCardMedia","root","cardMediaClasses","styles","media","role"],"mappings":";;;;;AA2BO,MAAMA,cAAcA,CAAC;AAAA,EAC1BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACa,MAAM;AACtB,6BACGC,YAAU;AAAA,IAAAJ,UACRA,CAAC;AAAA,MAAEK;AAAAA,MAAKC;AAAAA,IAAAA,0BACNC,cAAY;AAAA,MACXV;AAAAA,MACAC,SAAS;AAAA,QACPU,MAAMF,GAAGG,iBAAiBD,MAAMH,IAAIK,OAAOF,IAAI,GAAGV,mCAASU,IAAI;AAAA,QAC/DG,OAAOL,GAAGG,iBAAiBE,OAAOb,mCAASa,KAAK;AAAA,MAClD;AAAA,MACAZ;AAAAA,MACAa,MAAK;AAAA,MACLX;AAAAA,MACAC;AAAAA,MAAiB,GACbC;AAAAA,MAAMH;AAAAA,IAAAA,CAED;AAAA,EAAA,CAGF;AAEjB;"}