@hitachivantara/uikit-react-core 5.17.0 → 5.18.0

package/dist/esm/components/BulkActions/BulkActions.js

@@ -29,7 +29,7 @@ const HvBulkActions = ({
   onSelectAllPages,
   ...others
 }) => {
-  var _a, _b;
+  var _a;
   const {
     activeTheme,
     selectedMode
@@ -78,7 +78,6 @@ const HvBulkActions = ({
           className: clsx(classes == null ? void 0 : classes.selectAllPages, bulkActionsClasses.selectAllPages),
           variant: isSemantic ? "semantic" : "secondaryGhost",
           onClick: onSelectAllPages,
-          size: ((_b = activeTheme == null ? void 0 : activeTheme.bulkActions) == null ? void 0 : _b.buttonSize) || "md",
           children: selectAllPagesLabel ?? `Select all ${numTotal} items across all pages`
         })]
       })]

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

@@ -1 +1 @@
-{"version":3,"file":"BulkActions.js","sources":["../../../../src/components/BulkActions/BulkActions.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types\";\nimport {\n  HvButton,\n  HvButtonProps,\n  HvButtonSize,\n  HvCheckBox,\n  HvCheckBoxProps,\n  HvActionGeneric,\n  HvActionsGenericProps,\n  HvTypography,\n} from \"@core/components\";\nimport { useEffect, useState } from \"react\";\nimport { clsx } from \"clsx\";\nimport { setId } from \"@core/utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { useTheme } from \"@core/hooks\";\nimport {\n  StyledGenericActions,\n  StyledRoot,\n  StyledSelectAllContainer,\n  StyledDivider,\n} from \"./BulkActions.styles\";\nimport bulkActionsClasses, { HvBulkActionsClasses } from \"./bulkActionsClasses\";\n\nexport interface HvBulkActionsProps extends HvBaseProps {\n  /**\n   * Custom label for select all checkbox\n   */\n  selectAllLabel?: React.ReactNode;\n  /**\n   * Custom label for select all checkbox conjunction\n   */\n  selectAllConjunctionLabel?: string;\n  /**\n   * Custom label for select all pages button\n   */\n  selectAllPagesLabel?: React.ReactNode;\n  /**\n   * Whether select all pages element should be visible\n   */\n  showSelectAllPages?: boolean;\n  /**\n   * The total number of elements\n   */\n  numTotal?: number;\n  /**\n   * The number of elements currently selected\n   */\n  numSelected?: number;\n  /**\n   * Function called when the \"select all\" Checkbox is toggled.\n   */\n  onSelectAll?: HvCheckBoxProps[\"onChange\"];\n  /**\n   * Function called when the \"select all pages\" button is clicked toggled.\n   */\n  onSelectAllPages?: HvButtonProps[\"onClick\"];\n  /**\n   * Whether the bulk actions should use the semantic styles when there are selected elements.\n   */\n  semantic?: boolean;\n  /**\n   * The renderable content inside the right actions slot,\n   * or an Array of actions `{ id, label, icon, disabled, ... }`\n   */\n  actions?: React.ReactNode | HvActionGeneric[];\n  /**\n   *  Whether actions should be all disabled\n   */\n  actionsDisabled?: boolean;\n  /**\n   *  The callback function ran when an action is triggered, receiving `action` as param\n   */\n  actionsCallback?: HvActionsGenericProps[\"actionsCallback\"];\n  /**\n   *  The number of maximum visible actions before they're collapsed into a `DropDownMenu`.\n   */\n  maxVisibleActions?: number;\n  /**\n   * Properties to be passed onto the checkbox component, the values of the object are equivalent to the\n   * HvCheckbox API.\n   */\n  checkboxProps?: HvCheckBoxProps;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvBulkActionsClasses;\n}\n\n/**\n * Bulk Actions allow users to perform an action on a single or multiple items.\n * Also known as \"batch production\" of multiple items at once, one stage at a time.\n */\nexport const HvBulkActions = ({\n  id,\n  className,\n  classes,\n  selectAllPagesLabel,\n  actionsDisabled,\n  maxVisibleActions,\n  checkboxProps,\n  actions,\n  numTotal = 0,\n  numSelected = 0,\n  selectAllLabel = \"All\",\n  selectAllConjunctionLabel = \"/\",\n  showSelectAllPages = false,\n  semantic = true,\n  actionsCallback,\n  onSelectAll,\n  onSelectAllPages,\n  ...others\n}: HvBulkActionsProps) => {\n  const { activeTheme, selectedMode } = useTheme();\n\n  const [anySelected, setAnySelected] = useState<boolean>(false);\n\n  const isSemantic = semantic && anySelected;\n\n  useEffect(() => {\n    setAnySelected(numSelected > 0);\n  }, [numSelected]);\n\n  const selectAllLabelComponent = (\n    <HvTypography\n      component=\"span\"\n      disabled={checkboxProps?.disabled}\n      variant=\"body\"\n    >\n      {!anySelected ? (\n        <>\n          <HvTypography variant=\"label\">{selectAllLabel}</HvTypography>\n          {` (${numTotal})`}\n        </>\n      ) : (\n        <>\n          <HvTypography variant=\"label\">{numSelected}</HvTypography>\n          {` ${selectAllConjunctionLabel} ${numTotal}`}\n        </>\n      )}\n    </HvTypography>\n  );\n\n  return (\n    <StyledRoot\n      id={id}\n      className={clsx(\n        className,\n        classes?.root,\n        bulkActionsClasses.root,\n        isSemantic && clsx(classes?.semantic, bulkActionsClasses.semantic)\n      )}\n      $isSemantic={isSemantic}\n      $baseColor={\n        activeTheme?.colors?.modes[selectedMode].base_light ||\n        theme.colors.base_light\n      }\n      {...others}\n    >\n      <StyledSelectAllContainer\n        className={clsx(\n          classes?.selectAllContainer,\n          bulkActionsClasses.selectAllContainer\n        )}\n      >\n        <HvCheckBox\n          id={setId(id, \"select\")}\n          className={clsx(classes?.selectAll, bulkActionsClasses.selectAll)}\n          checked={numSelected > 0}\n          semantic={isSemantic}\n          onChange={onSelectAll}\n          indeterminate={numSelected > 0 && numSelected < numTotal}\n          label={selectAllLabelComponent}\n          {...checkboxProps}\n        />\n        {showSelectAllPages && anySelected && numSelected < numTotal && (\n          <>\n            <StyledDivider />\n            <HvButton\n              id={setId(id, \"pages\")}\n              className={clsx(\n                classes?.selectAllPages,\n                bulkActionsClasses.selectAllPages\n              )}\n              variant={isSemantic ? \"semantic\" : \"secondaryGhost\"}\n              onClick={onSelectAllPages}\n              size={\n                (activeTheme?.bulkActions?.buttonSize as HvButtonSize) || \"md\"\n              }\n            >\n              {selectAllPagesLabel ??\n                `Select all ${numTotal} items across all pages`}\n            </HvButton>\n          </>\n        )}\n      </StyledSelectAllContainer>\n      <StyledGenericActions\n        id={setId(id, \"actions\")}\n        classes={{ root: clsx(classes?.actions, bulkActionsClasses.actions) }}\n        category={isSemantic ? \"semantic\" : \"secondaryGhost\"}\n        actions={actions}\n        disabled={actionsDisabled ?? numSelected === 0}\n        actionsCallback={actionsCallback}\n        maxVisibleActions={maxVisibleActions}\n      />\n    </StyledRoot>\n  );\n};\n"],"names":["HvBulkActions","id","className","classes","selectAllPagesLabel","actionsDisabled","maxVisibleActions","checkboxProps","actions","numTotal","numSelected","selectAllLabel","selectAllConjunctionLabel","showSelectAllPages","semantic","actionsCallback","onSelectAll","onSelectAllPages","others","activeTheme","selectedMode","useTheme","anySelected","setAnySelected","useState","isSemantic","useEffect","selectAllLabelComponent","HvTypography","component","disabled","variant","children","_jsxs","_Fragment","_jsx","StyledRoot","clsx","root","bulkActionsClasses","$isSemantic","$baseColor","colors","modes","base_light","theme","StyledSelectAllContainer","selectAllContainer","HvCheckBox","setId","selectAll","checked","onChange","indeterminate","label","StyledDivider","HvButton","selectAllPages","onClick","size","bulkActions","buttonSize","StyledGenericActions","category"],"mappings":"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"}
+{"version":3,"file":"BulkActions.js","sources":["../../../../src/components/BulkActions/BulkActions.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types\";\nimport {\n  HvButton,\n  HvButtonProps,\n  HvCheckBox,\n  HvCheckBoxProps,\n  HvActionGeneric,\n  HvActionsGenericProps,\n  HvTypography,\n} from \"@core/components\";\nimport { useEffect, useState } from \"react\";\nimport { clsx } from \"clsx\";\nimport { setId } from \"@core/utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { useTheme } from \"@core/hooks\";\nimport {\n  StyledGenericActions,\n  StyledRoot,\n  StyledSelectAllContainer,\n  StyledDivider,\n} from \"./BulkActions.styles\";\nimport bulkActionsClasses, { HvBulkActionsClasses } from \"./bulkActionsClasses\";\n\nexport interface HvBulkActionsProps extends HvBaseProps {\n  /**\n   * Custom label for select all checkbox\n   */\n  selectAllLabel?: React.ReactNode;\n  /**\n   * Custom label for select all checkbox conjunction\n   */\n  selectAllConjunctionLabel?: string;\n  /**\n   * Custom label for select all pages button\n   */\n  selectAllPagesLabel?: React.ReactNode;\n  /**\n   * Whether select all pages element should be visible\n   */\n  showSelectAllPages?: boolean;\n  /**\n   * The total number of elements\n   */\n  numTotal?: number;\n  /**\n   * The number of elements currently selected\n   */\n  numSelected?: number;\n  /**\n   * Function called when the \"select all\" Checkbox is toggled.\n   */\n  onSelectAll?: HvCheckBoxProps[\"onChange\"];\n  /**\n   * Function called when the \"select all pages\" button is clicked toggled.\n   */\n  onSelectAllPages?: HvButtonProps[\"onClick\"];\n  /**\n   * Whether the bulk actions should use the semantic styles when there are selected elements.\n   */\n  semantic?: boolean;\n  /**\n   * The renderable content inside the right actions slot,\n   * or an Array of actions `{ id, label, icon, disabled, ... }`\n   */\n  actions?: React.ReactNode | HvActionGeneric[];\n  /**\n   *  Whether actions should be all disabled\n   */\n  actionsDisabled?: boolean;\n  /**\n   *  The callback function ran when an action is triggered, receiving `action` as param\n   */\n  actionsCallback?: HvActionsGenericProps[\"actionsCallback\"];\n  /**\n   *  The number of maximum visible actions before they're collapsed into a `DropDownMenu`.\n   */\n  maxVisibleActions?: number;\n  /**\n   * Properties to be passed onto the checkbox component, the values of the object are equivalent to the\n   * HvCheckbox API.\n   */\n  checkboxProps?: HvCheckBoxProps;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvBulkActionsClasses;\n}\n\n/**\n * Bulk Actions allow users to perform an action on a single or multiple items.\n * Also known as \"batch production\" of multiple items at once, one stage at a time.\n */\nexport const HvBulkActions = ({\n  id,\n  className,\n  classes,\n  selectAllPagesLabel,\n  actionsDisabled,\n  maxVisibleActions,\n  checkboxProps,\n  actions,\n  numTotal = 0,\n  numSelected = 0,\n  selectAllLabel = \"All\",\n  selectAllConjunctionLabel = \"/\",\n  showSelectAllPages = false,\n  semantic = true,\n  actionsCallback,\n  onSelectAll,\n  onSelectAllPages,\n  ...others\n}: HvBulkActionsProps) => {\n  const { activeTheme, selectedMode } = useTheme();\n\n  const [anySelected, setAnySelected] = useState<boolean>(false);\n\n  const isSemantic = semantic && anySelected;\n\n  useEffect(() => {\n    setAnySelected(numSelected > 0);\n  }, [numSelected]);\n\n  const selectAllLabelComponent = (\n    <HvTypography\n      component=\"span\"\n      disabled={checkboxProps?.disabled}\n      variant=\"body\"\n    >\n      {!anySelected ? (\n        <>\n          <HvTypography variant=\"label\">{selectAllLabel}</HvTypography>\n          {` (${numTotal})`}\n        </>\n      ) : (\n        <>\n          <HvTypography variant=\"label\">{numSelected}</HvTypography>\n          {` ${selectAllConjunctionLabel} ${numTotal}`}\n        </>\n      )}\n    </HvTypography>\n  );\n\n  return (\n    <StyledRoot\n      id={id}\n      className={clsx(\n        className,\n        classes?.root,\n        bulkActionsClasses.root,\n        isSemantic && clsx(classes?.semantic, bulkActionsClasses.semantic)\n      )}\n      $isSemantic={isSemantic}\n      $baseColor={\n        activeTheme?.colors?.modes[selectedMode].base_light ||\n        theme.colors.base_light\n      }\n      {...others}\n    >\n      <StyledSelectAllContainer\n        className={clsx(\n          classes?.selectAllContainer,\n          bulkActionsClasses.selectAllContainer\n        )}\n      >\n        <HvCheckBox\n          id={setId(id, \"select\")}\n          className={clsx(classes?.selectAll, bulkActionsClasses.selectAll)}\n          checked={numSelected > 0}\n          semantic={isSemantic}\n          onChange={onSelectAll}\n          indeterminate={numSelected > 0 && numSelected < numTotal}\n          label={selectAllLabelComponent}\n          {...checkboxProps}\n        />\n        {showSelectAllPages && anySelected && numSelected < numTotal && (\n          <>\n            <StyledDivider />\n            <HvButton\n              id={setId(id, \"pages\")}\n              className={clsx(\n                classes?.selectAllPages,\n                bulkActionsClasses.selectAllPages\n              )}\n              variant={isSemantic ? \"semantic\" : \"secondaryGhost\"}\n              onClick={onSelectAllPages}\n            >\n              {selectAllPagesLabel ??\n                `Select all ${numTotal} items across all pages`}\n            </HvButton>\n          </>\n        )}\n      </StyledSelectAllContainer>\n      <StyledGenericActions\n        id={setId(id, \"actions\")}\n        classes={{ root: clsx(classes?.actions, bulkActionsClasses.actions) }}\n        category={isSemantic ? \"semantic\" : \"secondaryGhost\"}\n        actions={actions}\n        disabled={actionsDisabled ?? numSelected === 0}\n        actionsCallback={actionsCallback}\n        maxVisibleActions={maxVisibleActions}\n      />\n    </StyledRoot>\n  );\n};\n"],"names":["HvBulkActions","id","className","classes","selectAllPagesLabel","actionsDisabled","maxVisibleActions","checkboxProps","actions","numTotal","numSelected","selectAllLabel","selectAllConjunctionLabel","showSelectAllPages","semantic","actionsCallback","onSelectAll","onSelectAllPages","others","activeTheme","selectedMode","useTheme","anySelected","setAnySelected","useState","isSemantic","useEffect","selectAllLabelComponent","HvTypography","component","disabled","variant","children","_jsxs","_Fragment","_jsx","StyledRoot","clsx","root","bulkActionsClasses","$isSemantic","$baseColor","colors","modes","base_light","theme","StyledSelectAllContainer","selectAllContainer","HvCheckBox","setId","selectAll","checked","onChange","indeterminate","label","StyledDivider","HvButton","selectAllPages","onClick","StyledGenericActions","category"],"mappings":"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"}

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

@@ -1,11 +1,10 @@
-import { ClassNames } from "@emotion/react";
 import { theme } from "@hitachivantara/uikit-styles";
-import { styles } from "./Card.styles.js";
-import cardClasses from "./cardClasses.js";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { useClasses } from "./Card.styles.js";
+import { staticClasses } from "./Card.styles.js";
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { HvBox } from "../Box/Box.js";
 const HvCard = ({
-  classes,
+  classes: classesProp,
   className,
   children,
   icon,
@@ -15,32 +14,36 @@ const HvCard = ({
   bgcolor,
   ...others
 }) => {
-  return /* @__PURE__ */ jsx(ClassNames, {
-    children: ({
-      css,
-      cx
-    }) => /* @__PURE__ */ jsxs(HvBox, {
-      "aria-selected": selectable ? selected : void 0,
-      className: cx("HvIsCardGridElement", cardClasses.root, selectable && cardClasses.selectable, selected && cardClasses.selected, css(styles.root), css({
-        backgroundColor: bgcolor && theme.colors[bgcolor] || theme.card.backgroundColor
-      }), 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: cx(cardClasses.semanticContainer, css(styles.semanticContainer), classes == null ? void 0 : classes.semanticContainer),
-        children: [/* @__PURE__ */ jsx("div", {
-          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]
-          }), classes == null ? void 0 : classes.semanticBar)
-        }), /* @__PURE__ */ jsx("div", {
-          className: cx(cardClasses.icon, css(styles.icon), classes == null ? void 0 : classes.icon),
-          children: icon
-        })]
-      }), children]
-    })
+  const {
+    classes,
+    css,
+    cx
+  } = useClasses(classesProp);
+  return /* @__PURE__ */ jsxs(HvBox, {
+    "aria-selected": selectable ? selected : void 0,
+    className: cx("HvIsCardGridElement", classes.root, css({
+      backgroundColor: bgcolor && theme.colors[bgcolor] || theme.card.backgroundColor
+    }), className, {
+      [classes.selectable]: selectable,
+      [classes.selected]: selected
+    }),
+    ...others,
+    children: [/* @__PURE__ */ jsxs("div", {
+      className: classes.semanticContainer,
+      children: [/* @__PURE__ */ jsx("div", {
+        className: cx(css({
+          height: selected ? 4 : 2,
+          backgroundColor: statusColor === "sema0" ? selected ? theme.colors.secondary : theme.colors.atmo4 : theme.colors[statusColor]
+        }), classes.semanticBar)
+      }), /* @__PURE__ */ jsx("div", {
+        className: classes.icon,
+        children: icon
+      })]
+    }), children]
   });
 };
 export {
-  HvCard
+  HvCard,
+  staticClasses as cardClasses
 };
 //# sourceMappingURL=Card.js.map

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

@@ -1 +1 @@
-{"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,CACjC;AAAA,MAAE,GACEG;AAAAA,MAAMN,WAEVmB,qBAAA,OAAA;AAAA,QACEpB,WAAWU,GACTG,YAAYQ,mBACZZ,IAAIM,OAAOM,iBAAiB,GAC5BtB,mCAASsB,iBACX;AAAA,QAAEpB,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,WACX;AAAA,QAAA,CACD,GACDD,oBAAA,OAAA;AAAA,UACEtB,WAAWU,GAAGG,YAAYX,MAAMO,IAAIM,OAAOb,IAAI,GAAGH,mCAASG,IAAI;AAAA,UAAED,UAEhEC;AAAAA,QAAAA,CACE,CAAC;AAAA,MACH,CAAA,GACJD,QAAQ;AAAA,IAAA,CACJ;AAAA,EAAA,CAEC;AAEhB;"}
+{"version":3,"file":"Card.js","sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { HvBox } from \"@core/components\";\nimport { ExtractNames } from \"@core/utils\";\nimport {\n  HvBaseProps,\n  HvAtmosphereColorKeys,\n  HvSemanticColorKeys,\n} from \"@core/types\";\nimport { staticClasses, useClasses } from \"./Card.styles\";\n\nexport { staticClasses as cardClasses };\n\nexport type HvCardClasses = ExtractNames<typeof useClasses>;\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: classesProp,\n  className,\n  children,\n  icon,\n  selectable = false,\n  selected = false,\n  statusColor = \"sema0\",\n  bgcolor,\n  ...others\n}: HvCardProps) => {\n  const { classes, css, cx } = useClasses(classesProp);\n  return (\n    <HvBox\n      aria-selected={selectable ? selected : undefined}\n      className={cx(\n        \"HvIsCardGridElement\",\n        classes.root,\n        css({\n          backgroundColor:\n            (bgcolor && theme.colors[bgcolor]) || theme.card.backgroundColor,\n        }),\n        className,\n        {\n          [classes.selectable]: selectable,\n          [classes.selected]: selected,\n        }\n      )}\n      {...others}\n    >\n      <div className={classes.semanticContainer}>\n        <div\n          className={cx(\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 className={classes.icon}>{icon}</div>\n      </div>\n      {children}\n    </HvBox>\n  );\n};\n"],"names":["HvCard","classes","classesProp","className","children","icon","selectable","selected","statusColor","bgcolor","others","css","cx","useClasses","HvBox","undefined","root","backgroundColor","theme","colors","card","_jsxs","semanticContainer","_jsx","height","secondary","atmo4","semanticBar"],"mappings":";;;;;AA0CO,MAAMA,SAASA,CAAC;AAAA,EACrBC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,aAAa;AAAA,EACbC,WAAW;AAAA,EACXC,cAAc;AAAA,EACdC;AAAAA,EACA,GAAGC;AACQ,MAAM;AACX,QAAA;AAAA,IAAET;AAAAA,IAASU;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,WAAWX,WAAW;AACnD,8BACGY,OAAK;AAAA,IACJ,iBAAeR,aAAaC,WAAWQ;AAAAA,IACvCZ,WAAWS,GACT,uBACAX,QAAQe,MACRL,IAAI;AAAA,MACFM,iBACGR,WAAWS,MAAMC,OAAOV,OAAO,KAAMS,MAAME,KAAKH;AAAAA,IACpD,CAAA,GACDd,WACA;AAAA,MACE,CAACF,QAAQK,UAAU,GAAGA;AAAAA,MACtB,CAACL,QAAQM,QAAQ,GAAGA;AAAAA,IAAAA,CAExB;AAAA,IAAE,GACEG;AAAAA,IAAMN,WAEViB,qBAAA,OAAA;AAAA,MAAKlB,WAAWF,QAAQqB;AAAAA,MAAkBlB,WACxCmB,oBAAA,OAAA;AAAA,QACEpB,WAAWS,GACTD,IAAI;AAAA,UACFa,QAAQjB,WAAW,IAAI;AAAA,UACvBU,iBACET,gBAAgB,UACZD,WACEW,MAAMC,OAAOM,YACbP,MAAMC,OAAOO,QACfR,MAAMC,OAAOX,WAAW;AAAA,QAAA,CAC/B,GACDP,QAAQ0B,WACV;AAAA,MAAA,CACD,GACDJ,oBAAA,OAAA;AAAA,QAAKpB,WAAWF,QAAQI;AAAAA,QAAKD,UAAEC;AAAAA,MAAAA,CAAU,CAAC;AAAA,IACvC,CAAA,GACJD,QAAQ;AAAA,EAAA,CACJ;AAEX;"}

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

@@ -1,6 +1,10 @@
 import { theme } from "@hitachivantara/uikit-styles";
 import { outlineStyles } from "../../utils/focusUtils.js";
-const styles = {
+import { createClasses } from "../../utils/classes.js";
+const {
+  staticClasses,
+  useClasses
+} = createClasses("HvCard", {
   root: {
     overflow: "visible",
     position: "relative",
@@ -43,8 +47,9 @@ const styles = {
     top: -1,
     right: 0
   }
-};
+});
 export {
-  styles
+  staticClasses,
+  useClasses
 };
 //# 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/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { HvCardClasses } from \"./cardClasses\";\n\nexport const styles: Partial<Record<keyof HvCardClasses, 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":";;AAKO,MAAMA,SAAiE;AAAA,EAC5EC,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;"}
+{"version":3,"file":"Card.styles.js","sources":["../../../../src/components/Card/Card.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCard\", {\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":["staticClasses","useClasses","createClasses","root","overflow","position","outline","theme","card","borderRadius","outlineStyles","selected","colors","secondary","selectable","hoverColor","semanticContainer","zIndex","icon","top","iconMargin","space","xs","right","semanticBar","width"],"mappings":";;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,UAAU;AAAA,EACnEC,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,CAAC;"}

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

@@ -1,30 +1,29 @@
 import MuiCardContent from "@mui/material/CardContent";
-import { ClassNames } from "@emotion/react";
-import { styles } from "./Content.styles.js";
-import cardContentClasses from "./contentClasses.js";
+import { useClasses } from "./Content.styles.js";
+import { staticClasses } from "./Content.styles.js";
 import { jsx } from "@emotion/react/jsx-runtime";
 const HvCardContent = ({
   id,
-  classes,
+  classes: classesProp,
   className,
   children,
   onClick,
   ...others
 }) => {
-  return /* @__PURE__ */ jsx(ClassNames, {
-    children: ({
-      css,
-      cx
-    }) => /* @__PURE__ */ jsx(MuiCardContent, {
-      id,
-      className: cx(cardContentClasses.content, css(styles.content), className, classes == null ? void 0 : classes.content),
-      onClick,
-      ...others,
-      children
-    })
+  const {
+    classes,
+    cx
+  } = useClasses(classesProp);
+  return /* @__PURE__ */ jsx(MuiCardContent, {
+    id,
+    className: cx(classes.content, className),
+    onClick,
+    ...others,
+    children
   });
 };
 export {
-  HvCardContent
+  HvCardContent,
+  staticClasses as cardContentClasses
 };
 //# sourceMappingURL=Content.js.map

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 { HvBaseProps } from \"@core/types\";\nimport MuiCardContent, {\n  CardContentProps as MuiCardContentProps,\n} from \"@mui/material/CardContent\";\nimport { ClassNames } from \"@emotion/react\";\nimport { styles } from \"./Content.styles\";\nimport cardContentClasses, { HvCardContentClasses } from \"./contentClasses\";\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,OACX;AAAA,MACAP;AAAAA,MAAiB,GACbC;AAAAA,MAAMF;AAAAA,IAAAA,CAGI;AAAA,EAAA,CAER;AAEhB;"}
+{"version":3,"file":"Content.js","sources":["../../../../../src/components/Card/Content/Content.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types\";\nimport MuiCardContent, {\n  CardContentProps as MuiCardContentProps,\n} from \"@mui/material/CardContent\";\nimport { ExtractNames } from \"@core/utils\";\nimport { staticClasses, useClasses } from \"./Content.styles\";\n\nexport { staticClasses as cardContentClasses };\n\nexport type HvCardContentClasses = ExtractNames<typeof useClasses>;\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: classesProp,\n  className,\n  children,\n  onClick,\n  ...others\n}: HvCardContentProps) => {\n  const { classes, cx } = useClasses(classesProp);\n  return (\n    <MuiCardContent\n      id={id}\n      className={cx(classes.content, className)}\n      onClick={onClick}\n      {...others}\n    >\n      {children}\n    </MuiCardContent>\n  );\n};\n"],"names":["HvCardContent","id","classes","classesProp","className","children","onClick","others","cx","useClasses","MuiCardContent","content"],"mappings":";;;;AAsBO,MAAMA,gBAAgBA,CAAC;AAAA,EAC5BC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACe,MAAM;AAClB,QAAA;AAAA,IAAEL;AAAAA,IAASM;AAAAA,EAAAA,IAAOC,WAAWN,WAAW;AAC9C,6BACGO,gBAAc;AAAA,IACbT;AAAAA,IACAG,WAAWI,GAAGN,QAAQS,SAASP,SAAS;AAAA,IACxCE;AAAAA,IAAiB,GACbC;AAAAA,IAAMF;AAAAA,EAAAA,CAGI;AAEpB;"}

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

@@ -1,13 +1,18 @@
 import { theme } from "@hitachivantara/uikit-styles";
-const styles = {
+import { createClasses } from "../../../utils/classes.js";
+const {
+  staticClasses,
+  useClasses
+} = createClasses("HvCardContent", {
   content: {
     padding: `0 ${theme.space.sm} 15px ${theme.space.sm}`,
     "&:last-child": {
       paddingBottom: theme.space.sm
     }
   }
-};
+});
 export {
-  styles
+  staticClasses,
+  useClasses
 };
 //# 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/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { HvCardContentClasses } from \"./contentClasses\";\n\nexport const styles: Partial<\n  Record<keyof HvCardContentClasses, CSSInterpolation>\n> = {\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":";AAIO,MAAMA,SAET;AAAA,EACFC,SAAS;AAAA,IACPC,SAAU,KAAIC,MAAMC,MAAMC,WAAWF,MAAMC,MAAMC;AAAAA,IACjD,gBAAgB;AAAA,MACdC,eAAeH,MAAMC,MAAMC;AAAAA,IAC7B;AAAA,EACF;AACF;"}
+{"version":3,"file":"Content.styles.js","sources":["../../../../../src/components/Card/Content/Content.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { createClasses } from \"@core/utils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCardContent\", {\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":["staticClasses","useClasses","createClasses","content","padding","theme","space","sm","paddingBottom"],"mappings":";;AAGa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,iBAAiB;AAAA,EAC1EC,SAAS;AAAA,IACPC,SAAU,KAAIC,MAAMC,MAAMC,WAAWF,MAAMC,MAAMC;AAAAA,IACjD,gBAAgB;AAAA,MACdC,eAAeH,MAAMC,MAAMC;AAAAA,IAC7B;AAAA,EACF;AACF,CAAC;"}

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

@@ -1,11 +1,10 @@
 import MuiCardHeader from "@mui/material/CardHeader";
-import { ClassNames } from "@emotion/react";
-import cardHeaderClasses from "./headerClasses.js";
-import { styles } from "./Header.styles.js";
+import { useClasses } from "./Header.styles.js";
+import { staticClasses } from "./Header.styles.js";
 import { jsx } from "@emotion/react/jsx-runtime";
 import { useTheme } from "../../../hooks/useTheme.js";
 const HvCardHeader = ({
-  classes,
+  classes: classesProp,
   className,
   title,
   subheader,
@@ -16,34 +15,36 @@ const HvCardHeader = ({
   const {
     activeTheme
   } = useTheme();
-  return /* @__PURE__ */ jsx(ClassNames, {
-    children: ({
-      css,
-      cx
-    }) => /* @__PURE__ */ jsx(MuiCardHeader, {
-      title,
-      subheader,
-      action: icon,
-      onClick,
-      className: cx(cardHeaderClasses.root, css(styles.root), className, classes == null ? void 0 : classes.root),
-      classes: {
-        title: icon ? cx(cardHeaderClasses.titleShort, css(styles.titleShort), css({
-          ...activeTheme == null ? void 0 : activeTheme.typography[activeTheme == null ? void 0 : activeTheme.card.titleVariant]
-        }), 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]
-        }), 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
-        }), 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
-    })
+  const {
+    classes,
+    css,
+    cx
+  } = useClasses(classesProp);
+  return /* @__PURE__ */ jsx(MuiCardHeader, {
+    title,
+    subheader,
+    action: icon,
+    onClick,
+    className: cx(className, classes.root),
+    classes: {
+      title: cx(css({
+        ...activeTheme == null ? void 0 : activeTheme.typography[activeTheme == null ? void 0 : activeTheme.card.titleVariant]
+      }), {
+        [classes.titleShort]: icon,
+        [classes.title]: !icon
+      }),
+      subheader: cx(css({
+        ...activeTheme == null ? void 0 : activeTheme.typography[activeTheme == null ? void 0 : activeTheme.card.subheaderVariant],
+        color: activeTheme == null ? void 0 : activeTheme.card.subheaderColor
+      }), classes.subheader),
+      action: classes.action,
+      content: classes.content
+    },
+    ...others
   });
 };
 export {
-  HvCardHeader
+  HvCardHeader,
+  staticClasses as cardHeaderClasses
 };
 //# sourceMappingURL=Header.js.map

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 MuiCardHeader, {\n  CardHeaderProps as MuiCardHeaderProps,\n} from \"@mui/material/CardHeader\";\nimport { HvBaseProps } from \"@core/types\";\nimport { useTheme } from \"@core/hooks\";\nimport { ClassNames } from \"@emotion/react\";\nimport cardHeaderClasses, { HvCardHeaderClasses } from \"./headerClasses\";\nimport { styles } from \"./Header.styles\";\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,SAAS;AAEjC,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,IACX;AAAA,MACAhB,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,UACX,IACAN,GACEG,kBAAkBb,OAClBS,IAAIM,OAAOf,KAAK,GAChBS,IAAI;AAAA,UACF,GAAGJ,2CAAaY,WAAWZ,2CAAaa,KAAKC;AAAAA,QAAY,CAC1D,GACDrB,mCAASE,KACX;AAAA,QACJC,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,SACX;AAAA,QACAW,QAAQF,GACNG,kBAAkBD,QAClBH,IAAIM,OAAOH,MAAM,GACjBd,mCAASc,MACX;AAAA,QACAW,SAASb,GAAGG,kBAAkBU,SAASzB,mCAASyB,OAAO;AAAA,MACzD;AAAA,MAAE,GACEnB;AAAAA,IAAAA,CACL;AAAA,EAAA,CAEO;AAEhB;"}
+{"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 { useTheme } from \"@core/hooks\";\nimport { ExtractNames } from \"@core/utils\";\nimport { staticClasses, useClasses } from \"./Header.styles\";\n\nexport { staticClasses as cardHeaderClasses };\n\nexport type HvCardHeaderClasses = ExtractNames<typeof useClasses>;\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: classesProp,\n  className,\n  title,\n  subheader,\n  icon,\n  onClick,\n  ...others\n}: HvCardHeaderProps) => {\n  const { activeTheme } = useTheme();\n  const { classes, css, cx } = useClasses(classesProp);\n\n  return (\n    <MuiCardHeader\n      title={title}\n      subheader={subheader}\n      action={icon}\n      onClick={onClick}\n      className={cx(className, classes.root)}\n      classes={{\n        title: cx(\n          css({\n            ...activeTheme?.typography[activeTheme?.card.titleVariant],\n          }),\n          {\n            [classes.titleShort]: icon,\n            [classes.title]: !icon,\n          }\n        ),\n        subheader: cx(\n          css({\n            ...activeTheme?.typography[activeTheme?.card.subheaderVariant],\n            color: activeTheme?.card.subheaderColor,\n          }),\n          classes.subheader\n        ),\n        action: classes.action,\n        content: classes.content,\n      }}\n      {...others}\n    />\n  );\n};\n"],"names":["HvCardHeader","classes","classesProp","className","title","subheader","icon","onClick","others","activeTheme","useTheme","css","cx","useClasses","MuiCardHeader","action","root","typography","card","titleVariant","titleShort","subheaderVariant","color","subheaderColor","content"],"mappings":";;;;;AA2BO,MAAMA,eAAeA,CAAC;AAAA,EAC3BC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACc,MAAM;AACjB,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,SAAS;AAC3B,QAAA;AAAA,IAAET;AAAAA,IAASU;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,WAAWX,WAAW;AAEnD,6BACGY,eAAa;AAAA,IACZV;AAAAA,IACAC;AAAAA,IACAU,QAAQT;AAAAA,IACRC;AAAAA,IACAJ,WAAWS,GAAGT,WAAWF,QAAQe,IAAI;AAAA,IACrCf,SAAS;AAAA,MACPG,OAAOQ,GACLD,IAAI;AAAA,QACF,GAAGF,2CAAaQ,WAAWR,2CAAaS,KAAKC;AAAAA,MAAY,CAC1D,GACD;AAAA,QACE,CAAClB,QAAQmB,UAAU,GAAGd;AAAAA,QACtB,CAACL,QAAQG,KAAK,GAAG,CAACE;AAAAA,MAAAA,CAEtB;AAAA,MACAD,WAAWO,GACTD,IAAI;AAAA,QACF,GAAGF,2CAAaQ,WAAWR,2CAAaS,KAAKG;AAAAA,QAC7CC,OAAOb,2CAAaS,KAAKK;AAAAA,MAAAA,CAC1B,GACDtB,QAAQI,SACV;AAAA,MACAU,QAAQd,QAAQc;AAAAA,MAChBS,SAASvB,QAAQuB;AAAAA,IACnB;AAAA,IAAE,GACEhB;AAAAA,EAAAA,CACL;AAEL;"}

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

@@ -1,5 +1,9 @@
 import { theme } from "@hitachivantara/uikit-styles";
-const styles = {
+import { createClasses } from "../../../utils/classes.js";
+const {
+  staticClasses,
+  useClasses
+} = createClasses("HvCardHeader", {
   root: {
     padding: `15px ${theme.space.sm}`,
     position: "relative"
@@ -14,6 +18,7 @@ const styles = {
   subheader: {
     fontFamily: theme.fontFamily.body
   },
+  content: {},
   action: {
     position: "absolute",
     right: 20,
@@ -22,8 +27,9 @@ const styles = {
     paddingLeft: theme.space.xs,
     top: "15px"
   }
-};
+});
 export {
-  styles
+  staticClasses,
+  useClasses
 };
 //# 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/serialize\";\nimport { HvCardHeaderClasses } from \"./headerClasses\";\n\nexport const styles: Partial<\n  Record<keyof HvCardHeaderClasses, CSSInterpolation>\n> = {\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":";AAIO,MAAMA,SAET;AAAA,EACFC,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;"}
+{"version":3,"file":"Header.styles.js","sources":["../../../../../src/components/Card/Header/Header.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { createClasses } from \"@core/utils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCardHeader\", {\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  content: {},\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":["staticClasses","useClasses","createClasses","root","padding","theme","space","sm","position","titleShort","fontFamily","body","marginRight","title","subheader","content","action","right","marginTop","paddingLeft","xs","top"],"mappings":";;AAGa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,gBAAgB;AAAA,EACzEC,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,SAAS,CAAC;AAAA,EACVC,QAAQ;AAAA,IACNR,UAAU;AAAA,IACVS,OAAO;AAAA,IACPC,WAAW;AAAA,IACXN,aAAa;AAAA,IACbO,aAAad,MAAMC,MAAMc;AAAAA,IACzBC,KAAK;AAAA,EACP;AACF,CAAC;"}

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

@@ -1,37 +1,35 @@
 import MuiCardMedia from "@mui/material/CardMedia";
-import { ClassNames } from "@emotion/react";
-import cardMediaClasses from "./mediaClasses.js";
-import { styles } from "./Media.styles.js";
+import { useClasses } from "./Media.styles.js";
+import { staticClasses } from "./Media.styles.js";
 import { jsx } from "@emotion/react/jsx-runtime";
 const HvCardMedia = ({
   id,
-  classes,
+  classes: classesProp,
   className,
   children,
   title,
   onClick,
   ...others
 }) => {
-  return /* @__PURE__ */ jsx(ClassNames, {
-    children: ({
-      css,
-      cx
-    }) => /* @__PURE__ */ jsx(MuiCardMedia, {
-      id,
-      classes: {
-        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",
-      title,
-      onClick,
-      ...others,
-      children
-    })
+  const {
+    classes
+  } = useClasses(classesProp);
+  return /* @__PURE__ */ jsx(MuiCardMedia, {
+    id,
+    classes: {
+      root: classes.root,
+      media: classes.media
+    },
+    className,
+    role: "img",
+    title,
+    onClick,
+    ...others,
+    children
   });
 };
 export {
-  HvCardMedia
+  HvCardMedia,
+  staticClasses as cardMediaClasses
 };
 //# sourceMappingURL=Media.js.map

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 { HvBaseProps } from \"@core/types\";\nimport { ImgHTMLAttributes } from \"react\";\nimport { ClassNames } from \"@emotion/react\";\nimport cardMediaClasses, { HvCardMediaClasses } from \"./mediaClasses\";\nimport { styles } from \"./Media.styles\";\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,CAGE;AAAA,EAAA,CAEN;AAEhB;"}
+{"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 { HvBaseProps } from \"@core/types\";\nimport { ExtractNames } from \"@core/utils\";\nimport { ImgHTMLAttributes } from \"react\";\nimport { staticClasses, useClasses } from \"./Media.styles\";\n\nexport { staticClasses as cardMediaClasses };\n\nexport type HvCardMediaClasses = ExtractNames<typeof useClasses>;\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: classesProp,\n  className,\n  children,\n  title,\n  onClick,\n  ...others\n}: HvCardMediaProps) => {\n  const { classes } = useClasses(classesProp);\n  return (\n    <MuiCardMedia\n      id={id}\n      classes={{\n        root: classes.root,\n        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","classesProp","className","children","title","onClick","others","useClasses","MuiCardMedia","root","media","role"],"mappings":";;;;AA8BO,MAAMA,cAAcA,CAAC;AAAA,EAC1BC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACa,MAAM;AAChB,QAAA;AAAA,IAAEN;AAAAA,EAAAA,IAAYO,WAAWN,WAAW;AAC1C,6BACGO,cAAY;AAAA,IACXT;AAAAA,IACAC,SAAS;AAAA,MACPS,MAAMT,QAAQS;AAAAA,MACdC,OAAOV,QAAQU;AAAAA,IACjB;AAAA,IACAR;AAAAA,IACAS,MAAK;AAAA,IACLP;AAAAA,IACAC;AAAAA,IAAiB,GACbC;AAAAA,IAAMH;AAAAA,EAAAA,CAGE;AAElB;"}

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

@@ -1,9 +1,15 @@
-const styles = {
+import { createClasses } from "../../../utils/classes.js";
+const {
+  staticClasses,
+  useClasses
+} = createClasses("HvCardMedia", {
   root: {
     width: "100%"
-  }
-};
+  },
+  media: {}
+});
 export {
-  styles
+  staticClasses,
+  useClasses
 };
 //# 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/serialize\";\nimport { HvCardMediaClasses } from \"./mediaClasses\";\n\nexport const styles: Partial<\n  Record<keyof HvCardMediaClasses, CSSInterpolation>\n> = {\n  root: { width: \"100%\" },\n};\n"],"names":["styles","root","width"],"mappings":"AAGO,MAAMA,SAET;AAAA,EACFC,MAAM;AAAA,IAAEC,OAAO;AAAA,EAAO;AACxB;"}
+{"version":3,"file":"Media.styles.js","sources":["../../../../../src/components/Card/Media/Media.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCardMedia\", {\n  root: { width: \"100%\" },\n  media: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root","width","media"],"mappings":";AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,eAAe;AAAA,EACxEC,MAAM;AAAA,IAAEC,OAAO;AAAA,EAAO;AAAA,EACtBC,OAAO,CAAC;AACV,CAAC;"}