@hitachivantara/uikit-react-core 5.0.0-next.21 → 5.0.0-next.23

package/dist/esm/components/Calendar/SingleCalendar/SingleCalendar.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"SingleCalendar.styles.js","sources":["../../../../../src/components/Calendar/SingleCalendar/SingleCalendar.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport singleCalendarClasses from \"./singleCalendarClasses\";\n\nexport const StyledCalendarContainer = styled(\"div\")({\n  backgroundColor: theme.colors.atmo1,\n  width: \"320px\",\n  minHeight: \"440px\",\n  position: \"relative\",\n});\n\nexport const StyledCalendarWrapper = styled(\"div\")({\n  overflow: \"hidden\",\n  backgroundColor: theme.colors.atmo1,\n  padding: theme.spacing(\"sm\"),\n});\n\nexport const StyledCalendarGrid = styled(\"div\")({\n  display: \"flex\",\n  flexFlow: \"wrap\",\n  width: \"280px\",\n  [`& .${singleCalendarClasses.cellsInRange}`]: {\n    backgroundColor: theme.colors.atmo3,\n    [`& .${singleCalendarClasses.startBookend}`]: {\n      borderLeft: `1px solid ${theme.colors.acce1}`,\n      backgroundColor: theme.colors.atmo3,\n      \"&:hover\": {\n        borderRight: `1px solid ${theme.colors.acce1}`,\n      },\n    },\n  },\n\n  [`&:hover .${singleCalendarClasses.cellsInRange}`]: {\n    backgroundColor: theme.colors.atmo3,\n    [`& .${singleCalendarClasses.startBookend}`]: {\n      borderLeft: `1px solid ${theme.colors.acce1}`,\n      borderRight: \"inherit\",\n    },\n  },\n\n  [`& .${singleCalendarClasses.cellsInRange}:hover`]: {\n    backgroundColor: theme.colors.atmo3,\n    [`& .${singleCalendarClasses.calendarDate}`]: {\n      borderRight: `1px solid ${theme.colors.acce1}`,\n    },\n  },\n\n  [`& .${singleCalendarClasses.cellsInRange}:hover ~ .${singleCalendarClasses.cellsInRange}`]:\n    {\n      backgroundColor: theme.colors.atmo1, // controls the right side of the hovered range\n    },\n  [`& .${singleCalendarClasses.cellsOutsideRange}:hover ~ .${singleCalendarClasses.cellsInRange}`]:\n    {\n      backgroundColor: theme.colors.atmo1, // control the right side when hovering outside of the range\n    },\n});\n"],"names":["StyledCalendarContainer","process","env","NODE_ENV","target","label","backgroundColor","theme","colors","atmo1","width","minHeight","position","StyledCalendarWrapper","overflow","padding","spacing","StyledCalendarGrid","display","flexFlow","singleCalendarClasses","cellsInRange","atmo3","startBookend","borderLeft","acce1","borderRight","calendarDate","cellsOutsideRange"],"mappings":";;;AAIO,MAAMA,0BAAiC,wBAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACnDC,iBAAiBC,MAAMC,OAAOC;AAAAA,EAC9BC,OAAO;AAAA,EACPC,WAAW;AAAA,EACXC,UAAU;AACZ,GAACX,QAAAC,IAAAC,aAAC,eAAA,KAAA,y9FAAA;AAEK,MAAMU,wBAA+B,wBAAA,OAAKZ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACjDS,UAAU;AAAA,EACVR,iBAAiBC,MAAMC,OAAOC;AAAAA,EAC9BM,SAASR,MAAMS,QAAQ,IAAI;AAC7B,GAACf,QAAAC,IAAAC,aAAC,eAAA,KAAA,y9FAAA;AAEK,MAAMc,qBAA4B,wBAAA,OAAKhB,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EAC9Ca,SAAS;AAAA,EACTC,UAAU;AAAA,EACVT,OAAO;AAAA,EACP,CAAE,MAAKU,sBAAsBC,cAAc,GAAG;AAAA,IAC5Cf,iBAAiBC,MAAMC,OAAOc;AAAAA,IAC9B,CAAE,MAAKF,sBAAsBG,cAAc,GAAG;AAAA,MAC5CC,YAAa,aAAYjB,MAAMC,OAAOiB;AAAAA,MACtCnB,iBAAiBC,MAAMC,OAAOc;AAAAA,MAC9B,WAAW;AAAA,QACTI,aAAc,aAAYnB,MAAMC,OAAOiB;AAAAA,MACzC;AAAA,IACF;AAAA,EACF;AAAA,EAEA,CAAE,YAAWL,sBAAsBC,cAAc,GAAG;AAAA,IAClDf,iBAAiBC,MAAMC,OAAOc;AAAAA,IAC9B,CAAE,MAAKF,sBAAsBG,cAAc,GAAG;AAAA,MAC5CC,YAAa,aAAYjB,MAAMC,OAAOiB;AAAAA,MACtCC,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EAEA,CAAE,MAAKN,sBAAsBC,oBAAoB,GAAG;AAAA,IAClDf,iBAAiBC,MAAMC,OAAOc;AAAAA,IAC9B,CAAE,MAAKF,sBAAsBO,cAAc,GAAG;AAAA,MAC5CD,aAAc,aAAYnB,MAAMC,OAAOiB;AAAAA,IACzC;AAAA,EACF;AAAA,EAEA,CAAE,MAAKL,sBAAsBC,yBAAyBD,sBAAsBC,cAAc,GACxF;AAAA,IACEf,iBAAiBC,MAAMC,OAAOC;AAAAA;AAAAA,EAChC;AAAA,EACF,CAAE,MAAKW,sBAAsBQ,8BAA8BR,sBAAsBC,cAAc,GAC7F;AAAA,IACEf,iBAAiBC,MAAMC,OAAOC;AAAAA;AAAAA,EAChC;AACJ,GAACR,QAAAC,IAAAC,aAAC,eAAA,KAAA,y9FAAA;"}
+{"version":3,"file":"SingleCalendar.styles.js","sources":["../../../../../src/components/Calendar/SingleCalendar/SingleCalendar.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport singleCalendarClasses from \"./singleCalendarClasses\";\n\nexport const StyledCalendarContainer = styled(\"div\")({\n  backgroundColor: theme.colors.atmo1,\n  width: \"320px\",\n  minHeight: \"440px\",\n  position: \"relative\",\n});\n\nexport const StyledCalendarWrapper = styled(\"div\")({\n  overflow: \"hidden\",\n  backgroundColor: theme.colors.atmo1,\n  padding: theme.spacing(\"sm\"),\n});\n\nexport const StyledCalendarGrid = styled(\"div\")({\n  display: \"flex\",\n  flexFlow: \"wrap\",\n  width: \"280px\",\n  [`& .${singleCalendarClasses.cellsInRange}`]: {\n    backgroundColor: theme.colors.atmo3,\n    [`& .${singleCalendarClasses.startBookend}`]: {\n      borderLeft: `1px solid ${theme.colors.secondary}`,\n      backgroundColor: theme.colors.atmo3,\n      \"&:hover\": {\n        borderRight: `1px solid ${theme.colors.secondary}`,\n      },\n    },\n  },\n\n  [`&:hover .${singleCalendarClasses.cellsInRange}`]: {\n    backgroundColor: theme.colors.atmo3,\n    [`& .${singleCalendarClasses.startBookend}`]: {\n      borderLeft: `1px solid ${theme.colors.secondary}`,\n      borderRight: \"inherit\",\n    },\n  },\n\n  [`& .${singleCalendarClasses.cellsInRange}:hover`]: {\n    backgroundColor: theme.colors.atmo3,\n    [`& .${singleCalendarClasses.calendarDate}`]: {\n      borderRight: `1px solid ${theme.colors.secondary}`,\n    },\n  },\n\n  [`& .${singleCalendarClasses.cellsInRange}:hover ~ .${singleCalendarClasses.cellsInRange}`]:\n    {\n      backgroundColor: theme.colors.atmo1, // controls the right side of the hovered range\n    },\n  [`& .${singleCalendarClasses.cellsOutsideRange}:hover ~ .${singleCalendarClasses.cellsInRange}`]:\n    {\n      backgroundColor: theme.colors.atmo1, // control the right side when hovering outside of the range\n    },\n});\n"],"names":["StyledCalendarContainer","process","env","NODE_ENV","target","label","backgroundColor","theme","colors","atmo1","width","minHeight","position","StyledCalendarWrapper","overflow","padding","spacing","StyledCalendarGrid","display","flexFlow","singleCalendarClasses","cellsInRange","atmo3","startBookend","borderLeft","secondary","borderRight","calendarDate","cellsOutsideRange"],"mappings":";;;AAIO,MAAMA,0BAAiC,wBAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACnDC,iBAAiBC,MAAMC,OAAOC;AAAAA,EAC9BC,OAAO;AAAA,EACPC,WAAW;AAAA,EACXC,UAAU;AACZ,GAACX,QAAAC,IAAAC,aAAC,eAAA,KAAA,6+FAAA;AAEK,MAAMU,wBAA+B,wBAAA,OAAKZ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACjDS,UAAU;AAAA,EACVR,iBAAiBC,MAAMC,OAAOC;AAAAA,EAC9BM,SAASR,MAAMS,QAAQ,IAAI;AAC7B,GAACf,QAAAC,IAAAC,aAAC,eAAA,KAAA,6+FAAA;AAEK,MAAMc,qBAA4B,wBAAA,OAAKhB,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EAC9Ca,SAAS;AAAA,EACTC,UAAU;AAAA,EACVT,OAAO;AAAA,EACP,CAAE,MAAKU,sBAAsBC,cAAc,GAAG;AAAA,IAC5Cf,iBAAiBC,MAAMC,OAAOc;AAAAA,IAC9B,CAAE,MAAKF,sBAAsBG,cAAc,GAAG;AAAA,MAC5CC,YAAa,aAAYjB,MAAMC,OAAOiB;AAAAA,MACtCnB,iBAAiBC,MAAMC,OAAOc;AAAAA,MAC9B,WAAW;AAAA,QACTI,aAAc,aAAYnB,MAAMC,OAAOiB;AAAAA,MACzC;AAAA,IACF;AAAA,EACF;AAAA,EAEA,CAAE,YAAWL,sBAAsBC,cAAc,GAAG;AAAA,IAClDf,iBAAiBC,MAAMC,OAAOc;AAAAA,IAC9B,CAAE,MAAKF,sBAAsBG,cAAc,GAAG;AAAA,MAC5CC,YAAa,aAAYjB,MAAMC,OAAOiB;AAAAA,MACtCC,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EAEA,CAAE,MAAKN,sBAAsBC,oBAAoB,GAAG;AAAA,IAClDf,iBAAiBC,MAAMC,OAAOc;AAAAA,IAC9B,CAAE,MAAKF,sBAAsBO,cAAc,GAAG;AAAA,MAC5CD,aAAc,aAAYnB,MAAMC,OAAOiB;AAAAA,IACzC;AAAA,EACF;AAAA,EAEA,CAAE,MAAKL,sBAAsBC,yBAAyBD,sBAAsBC,cAAc,GACxF;AAAA,IACEf,iBAAiBC,MAAMC,OAAOC;AAAAA;AAAAA,EAChC;AAAA,EACF,CAAE,MAAKW,sBAAsBQ,8BAA8BR,sBAAsBC,cAAc,GAC7F;AAAA,IACEf,iBAAiBC,MAAMC,OAAOC;AAAAA;AAAAA,EAChC;AACJ,GAACR,QAAAC,IAAAC,aAAC,eAAA,KAAA,i/FAAA;"}

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

@@ -1,9 +1,9 @@
+import { ClassNames } from "@emotion/react";
 import { theme } from "@hitachivantara/uikit-styles";
 import clsx from "clsx";
-import { useCreateEmotion } from "../../hooks/useCreateEmotion.js";
-import { createClasses } from "./Card.styles.js";
+import { styles } from "./Card.styles.js";
 import cardClasses from "./cardClasses.js";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { HvBox } from "../Box/Box.js";
 const HvCard = ({
   classes,
@@ -16,28 +16,28 @@ const HvCard = ({
   bgcolor,
   ...others
 }) => {
-  const {
-    css
-  } = useCreateEmotion();
-  const styles = createClasses(css);
-  return /* @__PURE__ */ jsxs(HvBox, {
-    "aria-selected": selectable ? selected : void 0,
-    className: clsx(styles.root, css({
-      backgroundColor: bgcolor && theme.colors[bgcolor] || theme.card.backgroundColor
-    }), "HvIsCardGridElement", cardClasses.root, classes == null ? void 0 : classes.root, className, selectable && clsx(styles.selectable, cardClasses.selectable, classes == null ? void 0 : classes.selectable), selected && clsx(styles.selected, cardClasses.selected, classes == null ? void 0 : classes.selected)),
-    ...others,
-    children: [/* @__PURE__ */ jsxs("div", {
-      className: clsx(styles.semanticContainer, cardClasses.semanticContainer, classes == null ? void 0 : classes.semanticContainer),
-      children: [/* @__PURE__ */ jsx("div", {
-        className: clsx(styles.semanticBar, css({
-          height: selected ? 4 : 2,
-          backgroundColor: statusColor === "sema0" ? selected ? theme.colors.acce1 : theme.colors.atmo4 : theme.colors[statusColor]
-        }), cardClasses.semanticBar, classes == null ? void 0 : classes.semanticBar)
-      }), /* @__PURE__ */ jsx("div", {
-        className: clsx(styles.icon, cardClasses.icon, classes == null ? void 0 : classes.icon),
-        children: icon
-      })]
-    }), children]
+  return /* @__PURE__ */ jsx(ClassNames, {
+    children: ({
+      css
+    }) => /* @__PURE__ */ jsxs(HvBox, {
+      "aria-selected": selectable ? selected : void 0,
+      className: clsx(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)),
+      ...others,
+      children: [/* @__PURE__ */ jsxs("div", {
+        className: clsx(css(styles.semanticContainer), cardClasses.semanticContainer, classes == null ? void 0 : classes.semanticContainer),
+        children: [/* @__PURE__ */ jsx("div", {
+          className: clsx(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)
+        }), /* @__PURE__ */ jsx("div", {
+          className: clsx(css(styles.icon), cardClasses.icon, classes == null ? void 0 : classes.icon),
+          children: icon
+        })]
+      }), children]
+    })
   });
 };
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport clsx from \"clsx\";\nimport { HvBox } from \"components\";\nimport { useCreateEmotion } from \"hooks/useCreateEmotion\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { HvAtmosphereColorKeys, HvSemanticColorKeys } from \"../../types/tokens\";\nimport { createClasses } from \"./Card.styles\";\nimport cardClasses, { HvCardClasses } from \"./cardClasses\";\n\nexport type HvCardProps = 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  const { css } = useCreateEmotion();\n  const styles = createClasses(css);\n\n  return (\n    <HvBox\n      aria-selected={selectable ? selected : undefined}\n      className={clsx(\n        styles.root,\n        css({\n          backgroundColor:\n            (bgcolor && theme.colors[bgcolor]) || theme.card.backgroundColor,\n        }),\n        \"HvIsCardGridElement\",\n        cardClasses.root,\n        classes?.root,\n        className,\n        selectable &&\n          clsx(styles.selectable, cardClasses.selectable, classes?.selectable),\n        selected &&\n          clsx(styles.selected, cardClasses.selected, classes?.selected)\n      )}\n      {...others}\n    >\n      <div\n        className={clsx(\n          styles.semanticContainer,\n          cardClasses.semanticContainer,\n          classes?.semanticContainer\n        )}\n      >\n        <div\n          className={clsx(\n            styles.semanticBar,\n            css({\n              height: selected ? 4 : 2,\n              backgroundColor:\n                statusColor === \"sema0\"\n                  ? selected\n                    ? theme.colors.acce1\n                    : theme.colors.atmo4\n                  : theme.colors[statusColor],\n            }),\n            cardClasses.semanticBar,\n            classes?.semanticBar\n          )}\n        />\n        <div className={clsx(styles.icon, cardClasses.icon, classes?.icon)}>\n          {icon}\n        </div>\n      </div>\n      {children}\n    </HvBox>\n  );\n};\n"],"names":["HvCard","classes","className","children","icon","selectable","selected","statusColor","bgcolor","others","css","useCreateEmotion","styles","createClasses","HvBox","undefined","clsx","root","backgroundColor","theme","colors","card","cardClasses","_jsxs","semanticContainer","_jsx","semanticBar","height","acce1","atmo4"],"mappings":";;;;;;;AAqCO,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;AACX,QAAA;AAAA,IAAEC;AAAAA,MAAQC,iBAAkB;AAC5BC,QAAAA,SAASC,cAAcH,GAAG;AAEhC,8BACGI,OAAK;AAAA,IACJ,iBAAeT,aAAaC,WAAWS;AAAAA,IACvCb,WAAWc,KACTJ,OAAOK,MACPP,IAAI;AAAA,MACFQ,iBACGV,WAAWW,MAAMC,OAAOZ,OAAO,KAAMW,MAAME,KAAKH;AAAAA,IACpD,CAAA,GACD,uBACAI,YAAYL,MACZhB,mCAASgB,MACTf,WACAG,cACEW,KAAKJ,OAAOP,YAAYiB,YAAYjB,YAAYJ,mCAASI,UAAU,GACrEC,YACEU,KAAKJ,OAAON,UAAUgB,YAAYhB,UAAUL,mCAASK,QAAQ,CAAC;AAAA,IAChE,GACEG;AAAAA,IAAMN,WAEVoB,qBAAA,OAAA;AAAA,MACErB,WAAWc,KACTJ,OAAOY,mBACPF,YAAYE,mBACZvB,mCAASuB,iBAAiB;AAAA,MAC1BrB,WAEFsB,oBAAA,OAAA;AAAA,QACEvB,WAAWc,KACTJ,OAAOc,aACPhB,IAAI;AAAA,UACFiB,QAAQrB,WAAW,IAAI;AAAA,UACvBY,iBACEX,gBAAgB,UACZD,WACEa,MAAMC,OAAOQ,QACbT,MAAMC,OAAOS,QACfV,MAAMC,OAAOb,WAAW;AAAA,QAC/B,CAAA,GACDe,YAAYI,aACZzB,mCAASyB,WAAW;AAAA,MAAA,CACpB,GAEJD,oBAAA,OAAA;AAAA,QAAKvB,WAAWc,KAAKJ,OAAOR,MAAMkB,YAAYlB,MAAMH,mCAASG,IAAI;AAAA,QAAED,UAChEC;AAAAA,MAAAA,CACG,CAAA;AAAA,IAAA,CAAA,GAEPD,QAAQ;AAAA,EAAA,CACH;AAEZ;"}
+{"version":3,"file":"Card.js","sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import { ClassNames } from \"@emotion/react\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport clsx from \"clsx\";\nimport { HvBox } from \"components\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { HvAtmosphereColorKeys, HvSemanticColorKeys } from \"../../types/tokens\";\nimport { styles } from \"./Card.styles\";\nimport cardClasses, { HvCardClasses } from \"./cardClasses\";\n\nexport type HvCardProps = 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":";;;;;;;AAqCO,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;"}

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

@@ -1,7 +1,7 @@
 import { theme } from "@hitachivantara/uikit-styles";
 import { outlineStyles } from "../../utils/focusUtils.js";
-const createClasses = (css) => ({
-  root: css({
+const styles = {
+  root: {
     overflow: "visible",
     position: "relative",
     outline: theme.card.outline,
@@ -12,39 +12,39 @@ const createClasses = (css) => ({
     "&:focus": {
       outline: "none"
     }
-  }),
-  selected: css({
-    outline: `1px solid ${theme.colors.acce1}`,
+  },
+  selected: {
+    outline: `1px solid ${theme.colors.secondary}`,
     "&:hover": {
-      outline: `1px solid ${theme.colors.acce1}`
+      outline: `1px solid ${theme.colors.secondary}`
     },
     "&:focus": {
-      outline: `1px solid ${theme.colors.acce1}`
+      outline: `1px solid ${theme.colors.secondary}`
     }
-  }),
-  selectable: css({
+  },
+  selectable: {
     "&:hover": {
       outline: `1px solid ${theme.card.hoverColor}`
     }
-  }),
-  semanticContainer: css({
+  },
+  semanticContainer: {
     position: "relative",
     "& > *": {
       position: "absolute",
       zIndex: 1
     }
-  }),
-  icon: css({
+  },
+  icon: {
     top: `calc(${theme.card.iconMargin} + ${theme.space.xs})`,
     right: `calc(${theme.card.iconMargin} + ${theme.space.xs})`
-  }),
-  semanticBar: css({
+  },
+  semanticBar: {
     width: "100%",
     top: -1,
     right: 0
-  })
-});
+  }
+};
 export {
-  createClasses
+  styles
 };
 //# sourceMappingURL=Card.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Card.styles.js","sources":["../../../../src/components/Card/Card.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/css\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { outlineStyles } from \"utils/focusUtils\";\n\nexport const createClasses = (\n  css: (...args: CSSInterpolation[]) => string\n) => ({\n  root: css({\n    overflow: \"visible\",\n    position: \"relative\",\n    outline: theme.card.outline,\n    borderRadius: theme.card.borderRadius,\n    \"&.focus-visible\": {\n      ...outlineStyles,\n    },\n    \"&:focus\": {\n      outline: \"none\",\n    },\n  }),\n  selected: css({\n    outline: `1px solid ${theme.colors.acce1}`,\n    \"&:hover\": {\n      outline: `1px solid ${theme.colors.acce1}`,\n    },\n    \"&:focus\": {\n      outline: `1px solid ${theme.colors.acce1}`,\n    },\n  }),\n  selectable: css({\n    \"&:hover\": {\n      outline: `1px solid ${theme.card.hoverColor}`,\n    },\n  }),\n  semanticContainer: css({\n    position: \"relative\",\n    \"& > *\": {\n      position: \"absolute\",\n      zIndex: 1,\n    },\n  }),\n  icon: css({\n    top: `calc(${theme.card.iconMargin} + ${theme.space.xs})`,\n    right: `calc(${theme.card.iconMargin} + ${theme.space.xs})`,\n  }),\n  semanticBar: css({\n    width: \"100%\",\n    top: -1,\n    right: 0,\n  }),\n});\n"],"names":["createClasses","css","root","overflow","position","outline","theme","card","borderRadius","outlineStyles","selected","colors","acce1","selectable","hoverColor","semanticContainer","zIndex","icon","top","iconMargin","space","xs","right","semanticBar","width"],"mappings":";;AAIaA,MAAAA,gBAAgBA,CAC3BC,SACI;AAAA,EACJC,MAAMD,IAAI;AAAA,IACRE,UAAU;AAAA,IACVC,UAAU;AAAA,IACVC,SAASC,MAAMC,KAAKF;AAAAA,IACpBG,cAAcF,MAAMC,KAAKC;AAAAA,IACzB,mBAAmB;AAAA,MACjB,GAAGC;AAAAA,IACL;AAAA,IACA,WAAW;AAAA,MACTJ,SAAS;AAAA,IACX;AAAA,EAAA,CACD;AAAA,EACDK,UAAUT,IAAI;AAAA,IACZI,SAAU,aAAYC,MAAMK,OAAOC;AAAAA,IACnC,WAAW;AAAA,MACTP,SAAU,aAAYC,MAAMK,OAAOC;AAAAA,IACrC;AAAA,IACA,WAAW;AAAA,MACTP,SAAU,aAAYC,MAAMK,OAAOC;AAAAA,IACrC;AAAA,EAAA,CACD;AAAA,EACDC,YAAYZ,IAAI;AAAA,IACd,WAAW;AAAA,MACTI,SAAU,aAAYC,MAAMC,KAAKO;AAAAA,IACnC;AAAA,EAAA,CACD;AAAA,EACDC,mBAAmBd,IAAI;AAAA,IACrBG,UAAU;AAAA,IACV,SAAS;AAAA,MACPA,UAAU;AAAA,MACVY,QAAQ;AAAA,IACV;AAAA,EAAA,CACD;AAAA,EACDC,MAAMhB,IAAI;AAAA,IACRiB,KAAM,QAAOZ,MAAMC,KAAKY,gBAAgBb,MAAMc,MAAMC;AAAAA,IACpDC,OAAQ,QAAOhB,MAAMC,KAAKY,gBAAgBb,MAAMc,MAAMC;AAAAA,EAAAA,CACvD;AAAA,EACDE,aAAatB,IAAI;AAAA,IACfuB,OAAO;AAAA,IACPN,KAAK;AAAA,IACLI,OAAO;AAAA,EAAA,CACR;AACH;"}
+{"version":3,"file":"Card.styles.js","sources":["../../../../src/components/Card/Card.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { outlineStyles } from \"utils/focusUtils\";\n\nexport const styles: { [key: string]: CSSInterpolation } = {\n  root: {\n    overflow: \"visible\",\n    position: \"relative\",\n    outline: theme.card.outline,\n    borderRadius: theme.card.borderRadius,\n    \"&.focus-visible\": {\n      ...outlineStyles,\n    },\n    \"&:focus\": {\n      outline: \"none\",\n    },\n  },\n  selected: {\n    outline: `1px solid ${theme.colors.secondary}`,\n    \"&:hover\": {\n      outline: `1px solid ${theme.colors.secondary}`,\n    },\n    \"&:focus\": {\n      outline: `1px solid ${theme.colors.secondary}`,\n    },\n  },\n  selectable: {\n    \"&:hover\": {\n      outline: `1px solid ${theme.card.hoverColor}`,\n    },\n  },\n  semanticContainer: {\n    position: \"relative\",\n    \"& > *\": {\n      position: \"absolute\",\n      zIndex: 1,\n    },\n  },\n  icon: {\n    top: `calc(${theme.card.iconMargin} + ${theme.space.xs})`,\n    right: `calc(${theme.card.iconMargin} + ${theme.space.xs})`,\n  },\n  semanticBar: {\n    width: \"100%\",\n    top: -1,\n    right: 0,\n  },\n};\n"],"names":["styles","root","overflow","position","outline","theme","card","borderRadius","outlineStyles","selected","colors","secondary","selectable","hoverColor","semanticContainer","zIndex","icon","top","iconMargin","space","xs","right","semanticBar","width"],"mappings":";;AAIO,MAAMA,SAA8C;AAAA,EACzDC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVC,UAAU;AAAA,IACVC,SAASC,MAAMC,KAAKF;AAAAA,IACpBG,cAAcF,MAAMC,KAAKC;AAAAA,IACzB,mBAAmB;AAAA,MACjB,GAAGC;AAAAA,IACL;AAAA,IACA,WAAW;AAAA,MACTJ,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACAK,UAAU;AAAA,IACRL,SAAU,aAAYC,MAAMK,OAAOC;AAAAA,IACnC,WAAW;AAAA,MACTP,SAAU,aAAYC,MAAMK,OAAOC;AAAAA,IACrC;AAAA,IACA,WAAW;AAAA,MACTP,SAAU,aAAYC,MAAMK,OAAOC;AAAAA,IACrC;AAAA,EACF;AAAA,EACAC,YAAY;AAAA,IACV,WAAW;AAAA,MACTR,SAAU,aAAYC,MAAMC,KAAKO;AAAAA,IACnC;AAAA,EACF;AAAA,EACAC,mBAAmB;AAAA,IACjBX,UAAU;AAAA,IACV,SAAS;AAAA,MACPA,UAAU;AAAA,MACVY,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAC,MAAM;AAAA,IACJC,KAAM,QAAOZ,MAAMC,KAAKY,gBAAgBb,MAAMc,MAAMC;AAAAA,IACpDC,OAAQ,QAAOhB,MAAMC,KAAKY,gBAAgBb,MAAMc,MAAMC;AAAAA,EACxD;AAAA,EACAE,aAAa;AAAA,IACXC,OAAO;AAAA,IACPN,KAAK;AAAA,IACLI,OAAO;AAAA,EACT;AACF;"}

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

@@ -1,8 +1,8 @@
 import clsx from "clsx";
-import { createClasses } from "./Content.styles.js";
+import { styles } from "./Content.styles.js";
 import MuiCardContent from "@mui/material/CardContent";
 import cardContentClasses from "./contentClasses.js";
-import { useCreateEmotion } from "../../../hooks/useCreateEmotion.js";
+import { ClassNames } from "@emotion/react";
 import { jsx } from "@emotion/react/jsx-runtime";
 const HvCardContent = ({
   id,
@@ -12,16 +12,16 @@ const HvCardContent = ({
   onClick,
   ...others
 }) => {
-  const {
-    css
-  } = useCreateEmotion();
-  const styles = createClasses(css);
-  return /* @__PURE__ */ jsx(MuiCardContent, {
-    id,
-    className: clsx(styles.content, classes == null ? void 0 : classes.content, cardContentClasses.content, className),
-    onClick,
-    ...others,
-    children
+  return /* @__PURE__ */ jsx(ClassNames, {
+    children: ({
+      css
+    }) => /* @__PURE__ */ jsx(MuiCardContent, {
+      id,
+      className: clsx(css(styles.content), classes == null ? void 0 : classes.content, cardContentClasses.content, className),
+      onClick,
+      ...others,
+      children
+    })
   });
 };
 export {

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 \"../../../types/generic\";\nimport { createClasses } from \"./Content.styles\";\nimport MuiCardContent, {\n  CardContentProps as MuiCardContentProps,\n} from \"@mui/material/CardContent\";\nimport cardContentClasses, { HvCardContentClasses } from \"./contentClasses\";\nimport { useCreateEmotion } from \"hooks/useCreateEmotion\";\n\nexport type HvCardContentProps = 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  const { css } = useCreateEmotion();\n  const styles = createClasses(css);\n\n  return (\n    <MuiCardContent\n      id={id}\n      className={clsx(\n        styles.content,\n        classes?.content,\n        cardContentClasses.content,\n        className\n      )}\n      onClick={onClick}\n      {...others}\n    >\n      {children}\n    </MuiCardContent>\n  );\n};\n"],"names":["HvCardContent","id","classes","className","children","onClick","others","css","useCreateEmotion","styles","createClasses","MuiCardContent","clsx","content","cardContentClasses"],"mappings":";;;;;;AAmBO,MAAMA,gBAAgBA,CAAC;AAAA,EAC5BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACe,MAAM;AAClB,QAAA;AAAA,IAAEC;AAAAA,MAAQC,iBAAkB;AAC5BC,QAAAA,SAASC,cAAcH,GAAG;AAEhC,6BACGI,gBAAc;AAAA,IACbV;AAAAA,IACAE,WAAWS,KACTH,OAAOI,SACPX,mCAASW,SACTC,mBAAmBD,SACnBV,SAAS;AAAA,IAEXE;AAAAA,IAAiB,GACbC;AAAAA,IAAMF;AAAAA,EAAAA,CAGK;AAErB;"}
+{"version":3,"file":"Content.js","sources":["../../../../../src/components/Card/Content/Content.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { HvBaseProps } from \"../../../types/generic\";\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 type HvCardContentProps = 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":";;;;;;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,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;"}

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

@@ -1,13 +1,13 @@
 import { theme } from "@hitachivantara/uikit-styles";
-const createClasses = (css) => ({
-  content: css({
+const styles = {
+  content: {
     padding: `0 ${theme.space.sm} 15px ${theme.space.sm}`,
     "&:last-child": {
       paddingBottom: theme.space.sm
     }
-  })
-});
+  }
+};
 export {
-  createClasses
+  styles
 };
 //# sourceMappingURL=Content.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Content.styles.js","sources":["../../../../../src/components/Card/Content/Content.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/css\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const createClasses = (\n  css: (...args: CSSInterpolation[]) => string\n) => ({\n  content: css({\n    padding: `0 ${theme.space.sm} 15px ${theme.space.sm}`,\n    \"&:last-child\": {\n      paddingBottom: theme.space.sm,\n    },\n  }),\n});\n"],"names":["createClasses","css","content","padding","theme","space","sm","paddingBottom"],"mappings":";AAGaA,MAAAA,gBAAgBA,CAC3BC,SACI;AAAA,EACJC,SAASD,IAAI;AAAA,IACXE,SAAU,KAAIC,MAAMC,MAAMC,WAAWF,MAAMC,MAAMC;AAAAA,IACjD,gBAAgB;AAAA,MACdC,eAAeH,MAAMC,MAAMC;AAAAA,IAC7B;AAAA,EAAA,CACD;AACH;"}
+{"version":3,"file":"Content.styles.js","sources":["../../../../../src/components/Card/Content/Content.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const styles: { [key: string]: CSSInterpolation } = {\n  content: {\n    padding: `0 ${theme.space.sm} 15px ${theme.space.sm}`,\n    \"&:last-child\": {\n      paddingBottom: theme.space.sm,\n    },\n  },\n};\n"],"names":["styles","content","padding","theme","space","sm","paddingBottom"],"mappings":";AAGO,MAAMA,SAA8C;AAAA,EACzDC,SAAS;AAAA,IACPC,SAAU,KAAIC,MAAMC,MAAMC,WAAWF,MAAMC,MAAMC;AAAAA,IACjD,gBAAgB;AAAA,MACdC,eAAeH,MAAMC,MAAMC;AAAAA,IAC7B;AAAA,EACF;AACF;"}

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

@@ -1,10 +1,10 @@
 import clsx from "clsx";
 import MuiCardHeader from "@mui/material/CardHeader";
 import cardHeaderClasses from "./headerClasses.js";
-import { createClasses } from "./Header.styles.js";
-import { useTheme } from "../../../hooks/useTheme.js";
-import { useCreateEmotion } from "../../../hooks/useCreateEmotion.js";
+import { styles } from "./Header.styles.js";
+import { ClassNames } from "@emotion/react";
 import { jsx } from "@emotion/react/jsx-runtime";
+import { useTheme } from "../../../hooks/useTheme.js";
 const HvCardHeader = ({
   classes,
   className,
@@ -17,30 +17,30 @@ const HvCardHeader = ({
   const {
     activeTheme
   } = useTheme();
-  const {
-    css
-  } = useCreateEmotion();
-  const styles = createClasses(css);
-  return /* @__PURE__ */ jsx(MuiCardHeader, {
-    title,
-    subheader,
-    action: icon,
-    onClick,
-    className: clsx(styles.root, classes == null ? void 0 : classes.root, cardHeaderClasses.root, className),
-    classes: {
-      title: icon ? clsx(styles.titleShort, cardHeaderClasses.titleShort, classes == null ? void 0 : classes.titleShort, css({
-        ...activeTheme == null ? void 0 : activeTheme.typography[activeTheme == null ? void 0 : activeTheme.card.titleVariant]
-      })) : clsx(styles.title, cardHeaderClasses.title, classes == null ? void 0 : classes.title, css({
-        ...activeTheme == null ? void 0 : activeTheme.typography[activeTheme == null ? void 0 : activeTheme.card.titleVariant]
-      })),
-      subheader: clsx(styles.subheader, cardHeaderClasses.subheader, classes == null ? void 0 : classes.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(styles.action, cardHeaderClasses.action, classes == null ? void 0 : classes.action),
-      content: clsx(cardHeaderClasses.content, classes == null ? void 0 : classes.content)
-    },
-    ...others
+  return /* @__PURE__ */ jsx(ClassNames, {
+    children: ({
+      css
+    }) => /* @__PURE__ */ jsx(MuiCardHeader, {
+      title,
+      subheader,
+      action: icon,
+      onClick,
+      className: clsx(css(styles.root), classes == null ? void 0 : classes.root, cardHeaderClasses.root, className),
+      classes: {
+        title: icon ? clsx(css(styles.titleShort), cardHeaderClasses.titleShort, classes == null ? void 0 : classes.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({
+          ...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({
+          ...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)
+      },
+      ...others
+    })
   });
 };
 export {

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 \"../../../types/generic\";\nimport cardHeaderClasses, { HvCardHeaderClasses } from \"./headerClasses\";\nimport { createClasses } from \"./Header.styles\";\nimport { useTheme } from \"hooks/useTheme\";\nimport { useCreateEmotion } from \"hooks/useCreateEmotion\";\n\nexport type HvCardHeaderProps = 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  const { css } = useCreateEmotion();\n  const styles = createClasses(css);\n\n  return (\n    <MuiCardHeader\n      title={title}\n      subheader={subheader}\n      action={icon}\n      onClick={onClick}\n      className={clsx(\n        styles.root,\n        classes?.root,\n        cardHeaderClasses.root,\n        className\n      )}\n      classes={{\n        title: icon\n          ? clsx(\n              styles.titleShort,\n              cardHeaderClasses.titleShort,\n              classes?.titleShort,\n              css({\n                ...activeTheme?.typography[activeTheme?.card.titleVariant],\n              })\n            )\n          : clsx(\n              styles.title,\n              cardHeaderClasses.title,\n              classes?.title,\n              css({\n                ...activeTheme?.typography[activeTheme?.card.titleVariant],\n              })\n            ),\n        subheader: clsx(\n          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(styles.action, cardHeaderClasses.action, classes?.action),\n        content: clsx(cardHeaderClasses.content, classes?.content),\n      }}\n      {...others}\n    />\n  );\n};\n"],"names":["HvCardHeader","classes","className","title","subheader","icon","onClick","others","activeTheme","useTheme","css","useCreateEmotion","styles","createClasses","MuiCardHeader","action","clsx","root","cardHeaderClasses","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;AAC5B,QAAA;AAAA,IAAEC;AAAAA,MAAQC,iBAAkB;AAC5BC,QAAAA,SAASC,cAAcH,GAAG;AAEhC,6BACGI,eAAa;AAAA,IACZX;AAAAA,IACAC;AAAAA,IACAW,QAAQV;AAAAA,IACRC;AAAAA,IACAJ,WAAWc,KACTJ,OAAOK,MACPhB,mCAASgB,MACTC,kBAAkBD,MAClBf,SAAS;AAAA,IAEXD,SAAS;AAAA,MACPE,OAAOE,OACHW,KACEJ,OAAOO,YACPD,kBAAkBC,YAClBlB,mCAASkB,YACTT,IAAI;AAAA,QACF,GAAGF,2CAAaY,WAAWZ,2CAAaa,KAAKC;AAAAA,MAAY,CAC1D,CAAC,IAEJN,KACEJ,OAAOT,OACPe,kBAAkBf,OAClBF,mCAASE,OACTO,IAAI;AAAA,QACF,GAAGF,2CAAaY,WAAWZ,2CAAaa,KAAKC;AAAAA,MAAY,CAC1D,CAAC;AAAA,MAERlB,WAAWY,KACTJ,OAAOR,WACPc,kBAAkBd,WAClBH,mCAASG,WACTM,IAAI;AAAA,QACF,GAAGF,2CAAaY,WAAWZ,2CAAaa,KAAKE;AAAAA,QAC7CC,OAAOhB,2CAAaa,KAAKI;AAAAA,MAAAA,CAC1B,CAAC;AAAA,MAEJV,QAAQC,KAAKJ,OAAOG,QAAQG,kBAAkBH,QAAQd,mCAASc,MAAM;AAAA,MACrEW,SAASV,KAAKE,kBAAkBQ,SAASzB,mCAASyB,OAAO;AAAA,IAC3D;AAAA,IAAE,GACEnB;AAAAA,EAAAA,CACJ;AAEN;"}
+{"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 \"../../../types/generic\";\nimport cardHeaderClasses, { HvCardHeaderClasses } from \"./headerClasses\";\nimport { styles } from \"./Header.styles\";\nimport { useTheme } from \"hooks\";\nimport { ClassNames } from \"@emotion/react\";\n\nexport type HvCardHeaderProps = 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":";;;;;;;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,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;"}

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

@@ -1,29 +1,29 @@
 import { theme } from "@hitachivantara/uikit-styles";
-const createClasses = (css) => ({
-  root: css({
+const styles = {
+  root: {
     padding: `15px ${theme.space.sm}`,
     position: "relative"
-  }),
-  titleShort: css({
+  },
+  titleShort: {
     fontFamily: theme.fontFamily.body,
     marginRight: "30px"
-  }),
-  title: css({
+  },
+  title: {
     fontFamily: theme.fontFamily.body
-  }),
-  subheader: css({
+  },
+  subheader: {
     fontFamily: theme.fontFamily.body
-  }),
-  action: css({
+  },
+  action: {
     position: "absolute",
     right: 20,
     marginTop: 0,
     marginRight: "0px",
     paddingLeft: theme.space.xs,
     top: "15px"
-  })
-});
+  }
+};
 export {
-  createClasses
+  styles
 };
 //# sourceMappingURL=Header.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Header.styles.js","sources":["../../../../../src/components/Card/Header/Header.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { CSSInterpolation } from \"@emotion/css\";\n\nexport const createClasses = (\n  css: (...args: CSSInterpolation[]) => string\n) => ({\n  root: css({ padding: `15px ${theme.space.sm}`, position: \"relative\" }),\n  titleShort: css({\n    fontFamily: theme.fontFamily.body,\n    marginRight: \"30px\",\n  }),\n  title: css({\n    fontFamily: theme.fontFamily.body,\n  }),\n  subheader: css({\n    fontFamily: theme.fontFamily.body,\n  }),\n  action: css({\n    position: \"absolute\",\n    right: 20,\n    marginTop: 0,\n    marginRight: \"0px\",\n    paddingLeft: theme.space.xs,\n    top: \"15px\",\n  }),\n});\n"],"names":["createClasses","css","root","padding","theme","space","sm","position","titleShort","fontFamily","body","marginRight","title","subheader","action","right","marginTop","paddingLeft","xs","top"],"mappings":";AAGaA,MAAAA,gBAAgBA,CAC3BC,SACI;AAAA,EACJC,MAAMD,IAAI;AAAA,IAAEE,SAAU,QAAOC,MAAMC,MAAMC;AAAAA,IAAMC,UAAU;AAAA,EAAA,CAAY;AAAA,EACrEC,YAAYP,IAAI;AAAA,IACdQ,YAAYL,MAAMK,WAAWC;AAAAA,IAC7BC,aAAa;AAAA,EAAA,CACd;AAAA,EACDC,OAAOX,IAAI;AAAA,IACTQ,YAAYL,MAAMK,WAAWC;AAAAA,EAAAA,CAC9B;AAAA,EACDG,WAAWZ,IAAI;AAAA,IACbQ,YAAYL,MAAMK,WAAWC;AAAAA,EAAAA,CAC9B;AAAA,EACDI,QAAQb,IAAI;AAAA,IACVM,UAAU;AAAA,IACVQ,OAAO;AAAA,IACPC,WAAW;AAAA,IACXL,aAAa;AAAA,IACbM,aAAab,MAAMC,MAAMa;AAAAA,IACzBC,KAAK;AAAA,EAAA,CACN;AACH;"}
+{"version":3,"file":"Header.styles.js","sources":["../../../../../src/components/Card/Header/Header.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { CSSInterpolation } from \"@emotion/serialize\";\n\nexport const styles: { [key: string]: CSSInterpolation } = {\n  root: { padding: `15px ${theme.space.sm}`, position: \"relative\" },\n  titleShort: {\n    fontFamily: theme.fontFamily.body,\n    marginRight: \"30px\",\n  },\n  title: {\n    fontFamily: theme.fontFamily.body,\n  },\n  subheader: {\n    fontFamily: theme.fontFamily.body,\n  },\n  action: {\n    position: \"absolute\",\n    right: 20,\n    marginTop: 0,\n    marginRight: \"0px\",\n    paddingLeft: theme.space.xs,\n    top: \"15px\",\n  },\n};\n"],"names":["styles","root","padding","theme","space","sm","position","titleShort","fontFamily","body","marginRight","title","subheader","action","right","marginTop","paddingLeft","xs","top"],"mappings":";AAGO,MAAMA,SAA8C;AAAA,EACzDC,MAAM;AAAA,IAAEC,SAAU,QAAOC,MAAMC,MAAMC;AAAAA,IAAMC,UAAU;AAAA,EAAW;AAAA,EAChEC,YAAY;AAAA,IACVC,YAAYL,MAAMK,WAAWC;AAAAA,IAC7BC,aAAa;AAAA,EACf;AAAA,EACAC,OAAO;AAAA,IACLH,YAAYL,MAAMK,WAAWC;AAAAA,EAC/B;AAAA,EACAG,WAAW;AAAA,IACTJ,YAAYL,MAAMK,WAAWC;AAAAA,EAC/B;AAAA,EACAI,QAAQ;AAAA,IACNP,UAAU;AAAA,IACVQ,OAAO;AAAA,IACPC,WAAW;AAAA,IACXL,aAAa;AAAA,IACbM,aAAab,MAAMC,MAAMa;AAAAA,IACzBC,KAAK;AAAA,EACP;AACF;"}

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

@@ -1,8 +1,8 @@
 import MuiCardMedia from "@mui/material/CardMedia";
-import { createClasses } from "./Media.styles.js";
+import { styles } from "./Media.styles.js";
 import cardMediaClasses from "./mediaClasses.js";
 import clsx from "clsx";
-import { useCreateEmotion } from "../../../hooks/useCreateEmotion.js";
+import { ClassNames } from "@emotion/react";
 import { jsx } from "@emotion/react/jsx-runtime";
 const HvCardMedia = ({
   id,
@@ -13,22 +13,22 @@ const HvCardMedia = ({
   onClick,
   ...others
 }) => {
-  const {
-    css
-  } = useCreateEmotion();
-  const styles = createClasses(css);
-  return /* @__PURE__ */ jsx(MuiCardMedia, {
-    id,
-    classes: {
-      root: clsx(styles.root, cardMediaClasses.root, classes == null ? void 0 : classes.root),
-      media: clsx(cardMediaClasses.media, classes == null ? void 0 : classes.media)
-    },
-    className,
-    role: "img",
-    title,
-    onClick,
-    ...others,
-    children
+  return /* @__PURE__ */ jsx(ClassNames, {
+    children: ({
+      css
+    }) => /* @__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)
+      },
+      className,
+      role: "img",
+      title,
+      onClick,
+      ...others,
+      children
+    })
   });
 };
 export {

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 { createClasses } from \"./Media.styles\";\nimport { HvBaseProps } from \"../../../types/generic\";\nimport cardMediaClasses, { HvCardMediaClasses } from \"./mediaClasses\";\nimport clsx from \"clsx\";\nimport { ImgHTMLAttributes } from \"react\";\nimport { useCreateEmotion } from \"hooks/useCreateEmotion\";\n\nexport type HvCardMediaProps = Omit<MuiCardMediaProps, \"classes\"> &\n  ImgHTMLAttributes<HTMLImageElement> &\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  const { css } = useCreateEmotion();\n  const styles = createClasses(css);\n\n  return (\n    <MuiCardMedia\n      id={id}\n      classes={{\n        root: clsx(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};\n"],"names":["HvCardMedia","id","classes","className","children","title","onClick","others","css","useCreateEmotion","styles","createClasses","MuiCardMedia","root","clsx","cardMediaClasses","media","role"],"mappings":";;;;;;AA2BO,MAAMA,cAAcA,CAAC;AAAA,EAC1BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACa,MAAM;AAChB,QAAA;AAAA,IAAEC;AAAAA,MAAQC,iBAAkB;AAC5BC,QAAAA,SAASC,cAAcH,GAAG;AAEhC,6BACGI,cAAY;AAAA,IACXX;AAAAA,IACAC,SAAS;AAAA,MACPW,MAAMC,KAAKJ,OAAOG,MAAME,iBAAiBF,MAAMX,mCAASW,IAAI;AAAA,MAC5DG,OAAOF,KAAKC,iBAAiBC,OAAOd,mCAASc,KAAK;AAAA,IACpD;AAAA,IACAb;AAAAA,IACAc,MAAK;AAAA,IACLZ;AAAAA,IACAC;AAAAA,IAAiB,GACbC;AAAAA,IAAMH;AAAAA,EAAAA,CAGG;AAEnB;"}
+{"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 \"../../../types/generic\";\nimport cardMediaClasses, { HvCardMediaClasses } from \"./mediaClasses\";\nimport clsx from \"clsx\";\nimport { ImgHTMLAttributes } from \"react\";\nimport { ClassNames } from \"@emotion/react\";\n\nexport type HvCardMediaProps = Omit<MuiCardMediaProps, \"classes\"> &\n  ImgHTMLAttributes<HTMLImageElement> &\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":";;;;;;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,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;"}

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

@@ -1,9 +1,9 @@
-const createClasses = (css) => ({
-  root: css({
+const styles = {
+  root: {
     width: "100%"
-  })
-});
+  }
+};
 export {
-  createClasses
+  styles
 };
 //# sourceMappingURL=Media.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Media.styles.js","sources":["../../../../../src/components/Card/Media/Media.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/css\";\n\nexport const createClasses = (\n  css: (...args: CSSInterpolation[]) => string\n) => ({\n  root: css({ width: \"100%\" }),\n});\n"],"names":["createClasses","css","root","width"],"mappings":"AAEaA,MAAAA,gBAAgBA,CAC3BC,SACI;AAAA,EACJC,MAAMD,IAAI;AAAA,IAAEE,OAAO;AAAA,EAAA,CAAQ;AAC7B;"}
+{"version":3,"file":"Media.styles.js","sources":["../../../../../src/components/Card/Media/Media.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\n\nexport const styles: { [key: string]: CSSInterpolation } = {\n  root: { width: \"100%\" },\n};\n"],"names":["styles","root","width"],"mappings":"AAEO,MAAMA,SAA8C;AAAA,EACzDC,MAAM;AAAA,IAAEC,OAAO;AAAA,EAAO;AACxB;"}