@hitachivantara/uikit-react-core 5.17.0 → 5.18.1

package/dist/cjs/components/BreadCrumb/Page/Page.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Page.styles.cjs","sources":["../../../../../src/components/BreadCrumb/Page/Page.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/css\";\nimport { outlineStyles } from \"@hitachivantara/uikit-react-core\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const styles = {\n  link: {\n    padding: `8px ${theme.space.xs}`,\n    borderRadius: theme.radii.base,\n    maxWidth: 170 + 16,\n    textTransform: \"capitalize\",\n    \"&:hover\": {\n      cursor: \"pointer\",\n      backgroundColor: theme.colors.atmo3,\n    },\n    \"&:focus\": {\n      backgroundColor: theme.colors.atmo3,\n    },\n    \"&:focus-visible\": {\n      ...outlineStyles,\n    },\n  },\n} satisfies Record<string, CSSInterpolation>;\n"],"names":["styles","link","padding","theme","space","xs","borderRadius","radii","base","maxWidth","textTransform","cursor","backgroundColor","colors","atmo3","outlineStyles"],"mappings":";;;;AAIO,MAAMA,SAAS;AAAA,EACpBC,MAAM;AAAA,IACJC,SAAU,OAAMC,YAAAA,MAAMC,MAAMC;AAAAA,IAC5BC,cAAcH,YAAAA,MAAMI,MAAMC;AAAAA,IAC1BC,UAAU,MAAM;AAAA,IAChBC,eAAe;AAAA,IACf,WAAW;AAAA,MACTC,QAAQ;AAAA,MACRC,iBAAiBT,YAAAA,MAAMU,OAAOC;AAAAA,IAChC;AAAA,IACA,WAAW;AAAA,MACTF,iBAAiBT,YAAAA,MAAMU,OAAOC;AAAAA,IAChC;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAGC,eAAAA;AAAAA,IACL;AAAA,EACF;AACF;;"}
+{"version":3,"file":"Page.styles.cjs","sources":["../../../../../src/components/BreadCrumb/Page/Page.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils\";\nimport { outlineStyles } from \"@hitachivantara/uikit-react-core\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvPage\", {\n  link: {\n    padding: `8px ${theme.space.xs}`,\n    borderRadius: theme.radii.base,\n    maxWidth: 170 + 16,\n    textTransform: \"capitalize\",\n    \"&:hover\": {\n      cursor: \"pointer\",\n      backgroundColor: theme.colors.atmo3,\n    },\n    \"&:focus\": {\n      backgroundColor: theme.colors.atmo3,\n    },\n    \"&:focus-visible\": {\n      ...outlineStyles,\n    },\n  },\n  label: {},\n  a: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","link","padding","theme","space","xs","borderRadius","radii","base","maxWidth","textTransform","cursor","backgroundColor","colors","atmo3","outlineStyles","label","a"],"mappings":";;;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,UAAU;AAAA,EACnEC,MAAM;AAAA,IACJC,SAAU,OAAMC,YAAAA,MAAMC,MAAMC;AAAAA,IAC5BC,cAAcH,YAAAA,MAAMI,MAAMC;AAAAA,IAC1BC,UAAU,MAAM;AAAA,IAChBC,eAAe;AAAA,IACf,WAAW;AAAA,MACTC,QAAQ;AAAA,MACRC,iBAAiBT,YAAAA,MAAMU,OAAOC;AAAAA,IAChC;AAAA,IACA,WAAW;AAAA,MACTF,iBAAiBT,YAAAA,MAAMU,OAAOC;AAAAA,IAChC;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAGC,eAAAA;AAAAA,IACL;AAAA,EACF;AAAA,EACAC,OAAO,CAAC;AAAA,EACRC,GAAG,CAAC;AACN,CAAC;;;"}

package/dist/cjs/components/BreadCrumb/utils.cjs

@@ -12,7 +12,7 @@ const pathWithSubMenu = (id, onClick, listRoute, maxVisible, dropDownMenuProps)
     event.preventDefault();
     onClick == null ? void 0 : onClick(event, data);
   };
-  listRoute.splice(1, nbrElemToSubMenu, /* @__PURE__ */ jsxRuntime.jsx(DropDownMenu.default, {
+  listRoute.splice(1, nbrElemToSubMenu, /* @__PURE__ */ jsxRuntime.jsx(DropDownMenu.HvDropDownMenu, {
     id: setId.setId(id, "submenu"),
     icon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.MoreOptionsHorizontal, {
       iconSize: "S",

package/dist/cjs/components/BreadCrumb/utils.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"utils.cjs","sources":["../../../../src/components/BreadCrumb/utils.tsx"],"sourcesContent":["import { MoreOptionsHorizontal } from \"@hitachivantara/uikit-react-icons\";\nimport { HvDropDownMenu } from \"@core/components\";\nimport { setId } from \"@core/utils\";\n\nexport const removeExtension = (label) =>\n  label.includes(\".\") ? label.substring(0, label.lastIndexOf(\".\")) : label;\n\nexport const pathWithSubMenu = (\n  id,\n  onClick,\n  listRoute,\n  maxVisible,\n  dropDownMenuProps\n) => {\n  const nbrElemToSubMenu = listRoute.length - maxVisible;\n  const subMenuList = listRoute.slice(1, nbrElemToSubMenu + 1);\n\n  const handleClick = (event, data) => {\n    event.preventDefault();\n\n    onClick?.(event, data);\n  };\n\n  listRoute.splice(\n    1,\n    nbrElemToSubMenu,\n    <HvDropDownMenu\n      id={setId(id, \"submenu\")}\n      icon={<MoreOptionsHorizontal iconSize=\"S\" color=\"secondary\" />}\n      dataList={subMenuList}\n      {...dropDownMenuProps}\n      onClick={onClick != null ? handleClick : undefined}\n    />\n  );\n\n  return listRoute;\n};\n"],"names":["removeExtension","label","includes","substring","lastIndexOf","pathWithSubMenu","id","onClick","listRoute","maxVisible","dropDownMenuProps","nbrElemToSubMenu","length","subMenuList","slice","handleClick","event","data","preventDefault","splice","_jsx","HvDropDownMenu","setId","icon","MoreOptionsHorizontal","iconSize","color","dataList","undefined"],"mappings":";;;;;;AAIO,MAAMA,kBAAmBC,CAAAA,UAC9BA,MAAMC,SAAS,GAAG,IAAID,MAAME,UAAU,GAAGF,MAAMG,YAAY,GAAG,CAAC,IAAIH;AAE9D,MAAMI,kBAAkBA,CAC7BC,IACAC,SACAC,WACAC,YACAC,sBACG;AACGC,QAAAA,mBAAmBH,UAAUI,SAASH;AAC5C,QAAMI,cAAcL,UAAUM,MAAM,GAAGH,mBAAmB,CAAC;AAErDI,QAAAA,cAAcA,CAACC,OAAOC,SAAS;AACnCD,UAAME,eAAe;AAErBX,uCAAUS,OAAOC;AAAAA,EAAI;AAGvBT,YAAUW,OACR,GACAR,kBACAS,2BAAAA,IAACC,aAAAA,SAAc;AAAA,IACbf,IAAIgB,MAAAA,MAAMhB,IAAI,SAAS;AAAA,IACvBiB,qCAAOC,uCAAqB;AAAA,MAACC,UAAS;AAAA,MAAIC,OAAM;AAAA,IAAA,CAAa;AAAA,IAC7DC,UAAUd;AAAAA,IAAY,GAClBH;AAAAA,IACJH,SAASA,WAAW,OAAOQ,cAAca;AAAAA,EAC1C,CAAA,CACH;AAEOpB,SAAAA;AACT;;;"}
+{"version":3,"file":"utils.cjs","sources":["../../../../src/components/BreadCrumb/utils.tsx"],"sourcesContent":["import { MoreOptionsHorizontal } from \"@hitachivantara/uikit-react-icons\";\nimport { HvDropDownMenu } from \"@core/components\";\nimport { setId } from \"@core/utils\";\n\nexport const removeExtension = (label) =>\n  label.includes(\".\") ? label.substring(0, label.lastIndexOf(\".\")) : label;\n\nexport const pathWithSubMenu = (\n  id,\n  onClick,\n  listRoute,\n  maxVisible,\n  dropDownMenuProps\n) => {\n  const nbrElemToSubMenu = listRoute.length - maxVisible;\n  const subMenuList = listRoute.slice(1, nbrElemToSubMenu + 1);\n\n  const handleClick = (event, data) => {\n    event.preventDefault();\n\n    onClick?.(event, data);\n  };\n\n  listRoute.splice(\n    1,\n    nbrElemToSubMenu,\n    <HvDropDownMenu\n      id={setId(id, \"submenu\")}\n      icon={<MoreOptionsHorizontal iconSize=\"S\" color=\"secondary\" />}\n      dataList={subMenuList}\n      {...dropDownMenuProps}\n      onClick={onClick != null ? handleClick : undefined}\n    />\n  );\n\n  return listRoute;\n};\n"],"names":["removeExtension","label","includes","substring","lastIndexOf","pathWithSubMenu","id","onClick","listRoute","maxVisible","dropDownMenuProps","nbrElemToSubMenu","length","subMenuList","slice","handleClick","event","data","preventDefault","splice","_jsx","HvDropDownMenu","setId","icon","MoreOptionsHorizontal","iconSize","color","dataList","undefined"],"mappings":";;;;;;AAIO,MAAMA,kBAAmBC,CAAAA,UAC9BA,MAAMC,SAAS,GAAG,IAAID,MAAME,UAAU,GAAGF,MAAMG,YAAY,GAAG,CAAC,IAAIH;AAE9D,MAAMI,kBAAkBA,CAC7BC,IACAC,SACAC,WACAC,YACAC,sBACG;AACGC,QAAAA,mBAAmBH,UAAUI,SAASH;AAC5C,QAAMI,cAAcL,UAAUM,MAAM,GAAGH,mBAAmB,CAAC;AAErDI,QAAAA,cAAcA,CAACC,OAAOC,SAAS;AACnCD,UAAME,eAAe;AAErBX,uCAAUS,OAAOC;AAAAA,EAAI;AAGvBT,YAAUW,OACR,GACAR,kBACAS,2BAAAA,IAACC,aAAAA,gBAAc;AAAA,IACbf,IAAIgB,MAAAA,MAAMhB,IAAI,SAAS;AAAA,IACvBiB,qCAAOC,uCAAqB;AAAA,MAACC,UAAS;AAAA,MAAIC,OAAM;AAAA,IAAA,CAAa;AAAA,IAC7DC,UAAUd;AAAAA,IAAY,GAClBH;AAAAA,IACJH,SAASA,WAAW,OAAOQ,cAAca;AAAAA,EAC1C,CAAA,CACH;AAEOpB,SAAAA;AACT;;;"}

package/dist/cjs/components/BulkActions/BulkActions.cjs

@@ -31,7 +31,7 @@ const HvBulkActions = ({
   onSelectAllPages,
   ...others
 }) => {
-  var _a, _b;
+  var _a;
   const {
     activeTheme,
     selectedMode
@@ -80,7 +80,6 @@ const HvBulkActions = ({
           className: clsx.clsx(classes == null ? void 0 : classes.selectAllPages, bulkActionsClasses.default.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/cjs/components/BulkActions/BulkActions.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BulkActions.cjs","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.cjs","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/cjs/components/Card/Card.cjs

@@ -1,13 +1,11 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const react = require("@emotion/react");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const Card_styles = require("./Card.styles.cjs");
-const cardClasses = require("./cardClasses.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const Box = require("../Box/Box.cjs");
 const HvCard = ({
-  classes,
+  classes: classesProp,
   className,
   children,
   icon,
@@ -17,30 +15,34 @@ const HvCard = ({
   bgcolor,
   ...others
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
-    children: ({
-      css,
-      cx
-    }) => /* @__PURE__ */ jsxRuntime.jsxs(Box.HvBox, {
-      "aria-selected": selectable ? selected : void 0,
-      className: cx("HvIsCardGridElement", cardClasses.default.root, selectable && cardClasses.default.selectable, selected && cardClasses.default.selected, css(Card_styles.styles.root), css({
-        backgroundColor: bgcolor && uikitStyles.theme.colors[bgcolor] || uikitStyles.theme.card.backgroundColor
-      }), selectable && css(Card_styles.styles.selectable), selected && css(Card_styles.styles.selected), className, classes == null ? void 0 : classes.root, selectable && css(Card_styles.styles.selectable), selected && css(Card_styles.styles.selected)),
-      ...others,
-      children: [/* @__PURE__ */ jsxRuntime.jsxs("div", {
-        className: cx(cardClasses.default.semanticContainer, css(Card_styles.styles.semanticContainer), classes == null ? void 0 : classes.semanticContainer),
-        children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
-          className: cx(cardClasses.default.semanticBar, css(Card_styles.styles.semanticBar), css({
-            height: selected ? 4 : 2,
-            backgroundColor: statusColor === "sema0" ? selected ? uikitStyles.theme.colors.secondary : uikitStyles.theme.colors.atmo4 : uikitStyles.theme.colors[statusColor]
-          }), classes == null ? void 0 : classes.semanticBar)
-        }), /* @__PURE__ */ jsxRuntime.jsx("div", {
-          className: cx(cardClasses.default.icon, css(Card_styles.styles.icon), classes == null ? void 0 : classes.icon),
-          children: icon
-        })]
-      }), children]
-    })
+  const {
+    classes,
+    css,
+    cx
+  } = Card_styles.useClasses(classesProp);
+  return /* @__PURE__ */ jsxRuntime.jsxs(Box.HvBox, {
+    "aria-selected": selectable ? selected : void 0,
+    className: cx("HvIsCardGridElement", classes.root, css({
+      backgroundColor: bgcolor && uikitStyles.theme.colors[bgcolor] || uikitStyles.theme.card.backgroundColor
+    }), className, {
+      [classes.selectable]: selectable,
+      [classes.selected]: selected
+    }),
+    ...others,
+    children: [/* @__PURE__ */ jsxRuntime.jsxs("div", {
+      className: classes.semanticContainer,
+      children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
+        className: cx(css({
+          height: selected ? 4 : 2,
+          backgroundColor: statusColor === "sema0" ? selected ? uikitStyles.theme.colors.secondary : uikitStyles.theme.colors.atmo4 : uikitStyles.theme.colors[statusColor]
+        }), classes.semanticBar)
+      }), /* @__PURE__ */ jsxRuntime.jsx("div", {
+        className: classes.icon,
+        children: icon
+      })]
+    }), children]
   });
 };
+exports.cardClasses = Card_styles.staticClasses;
 exports.HvCard = HvCard;
 //# sourceMappingURL=Card.cjs.map

package/dist/cjs/components/Card/Card.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Card.cjs","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,wCACGC,MAAAA,YAAU;AAAA,IAAAP,UACRA,CAAC;AAAA,MAAEQ;AAAAA,MAAKC;AAAAA,IAAAA,sCACNC,IAAAA,OAAK;AAAA,MACJ,iBAAeR,aAAaC,WAAWQ;AAAAA,MACvCZ,WAAWU,GACT,uBACAG,YAAAA,QAAYC,MACZX,cAAcU,oBAAYV,YAC1BC,YAAYS,YAAAA,QAAYT,UACxBK,IAAIM,YAAAA,OAAOD,IAAI,GACfL,IAAI;AAAA,QACFO,iBACGV,WAAWW,kBAAMC,OAAOZ,OAAO,KAChCW,YAAAA,MAAME,KAAKH;AAAAA,MAAAA,CACd,GACDb,cAAcM,IAAIM,mBAAOZ,UAAU,GACnCC,YAAYK,IAAIM,mBAAOX,QAAQ,GAC/BJ,WACAD,mCAASe,MACTX,cAAcM,IAAIM,mBAAOZ,UAAU,GACnCC,YAAYK,IAAIM,mBAAOX,QAAQ,CACjC;AAAA,MAAE,GACEG;AAAAA,MAAMN,WAEVmB,2BAAAA,KAAA,OAAA;AAAA,QACEpB,WAAWU,GACTG,YAAYQ,QAAAA,mBACZZ,IAAIM,YAAAA,OAAOM,iBAAiB,GAC5BtB,mCAASsB,iBACX;AAAA,QAAEpB,WAEFqB,2BAAAA,IAAA,OAAA;AAAA,UACEtB,WAAWU,GACTG,YAAAA,QAAYU,aACZd,IAAIM,mBAAOQ,WAAW,GACtBd,IAAI;AAAA,YACFe,QAAQpB,WAAW,IAAI;AAAA,YACvBY,iBACEX,gBAAgB,UACZD,WACEa,YAAMC,MAAAA,OAAOO,YACbR,YAAAA,MAAMC,OAAOQ,QACfT,YAAAA,MAAMC,OAAOb,WAAW;AAAA,UAAA,CAC/B,GACDN,mCAASwB,WACX;AAAA,QAAA,CACD,GACDD,2BAAAA,IAAA,OAAA;AAAA,UACEtB,WAAWU,GAAGG,YAAYX,QAAAA,MAAMO,IAAIM,YAAAA,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.cjs","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,YAAAA,WAAWX,WAAW;AACnD,yCACGY,IAAAA,OAAK;AAAA,IACJ,iBAAeR,aAAaC,WAAWQ;AAAAA,IACvCZ,WAAWS,GACT,uBACAX,QAAQe,MACRL,IAAI;AAAA,MACFM,iBACGR,WAAWS,kBAAMC,OAAOV,OAAO,KAAMS,YAAAA,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,2BAAAA,KAAA,OAAA;AAAA,MAAKlB,WAAWF,QAAQqB;AAAAA,MAAkBlB,WACxCmB,2BAAAA,IAAA,OAAA;AAAA,QACEpB,WAAWS,GACTD,IAAI;AAAA,UACFa,QAAQjB,WAAW,IAAI;AAAA,UACvBU,iBACET,gBAAgB,UACZD,WACEW,YAAMC,MAAAA,OAAOM,YACbP,YAAAA,MAAMC,OAAOO,QACfR,YAAAA,MAAMC,OAAOX,WAAW;AAAA,QAAA,CAC/B,GACDP,QAAQ0B,WACV;AAAA,MAAA,CACD,GACDJ,2BAAAA,IAAA,OAAA;AAAA,QAAKpB,WAAWF,QAAQI;AAAAA,QAAKD,UAAEC;AAAAA,MAAAA,CAAU,CAAC;AAAA,IACvC,CAAA,GACJD,QAAQ;AAAA,EAAA,CACJ;AAEX;;;"}

package/dist/cjs/components/Card/Card.styles.cjs

@@ -2,7 +2,11 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const focusUtils = require("../../utils/focusUtils.cjs");
-const styles = {
+const classes = require("../../utils/classes.cjs");
+const {
+  staticClasses,
+  useClasses
+} = classes.createClasses("HvCard", {
   root: {
     overflow: "visible",
     position: "relative",
@@ -45,6 +49,7 @@ const styles = {
     top: -1,
     right: 0
   }
-};
-exports.styles = styles;
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
 //# sourceMappingURL=Card.styles.cjs.map

package/dist/cjs/components/Card/Card.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Card.styles.cjs","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,YAAAA,MAAMC,KAAKF;AAAAA,IACpBG,cAAcF,YAAAA,MAAMC,KAAKC;AAAAA,IACzB,mBAAmB;AAAA,MACjB,GAAGC,WAAAA;AAAAA,IACL;AAAA,IACA,WAAW;AAAA,MACTJ,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACAK,UAAU;AAAA,IACRL,SAAU,aAAYC,YAAAA,MAAMK,OAAOC;AAAAA,IACnC,WAAW;AAAA,MACTP,SAAU,aAAYC,YAAAA,MAAMK,OAAOC;AAAAA,IACrC;AAAA,IACA,WAAW;AAAA,MACTP,SAAU,aAAYC,YAAAA,MAAMK,OAAOC;AAAAA,IACrC;AAAA,EACF;AAAA,EACAC,YAAY;AAAA,IACV,WAAW;AAAA,MACTR,SAAU,aAAYC,YAAAA,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,YAAAA,MAAMC,KAAKY,gBAAgBb,kBAAMc,MAAMC;AAAAA,IACpDC,OAAQ,QAAOhB,YAAAA,MAAMC,KAAKY,gBAAgBb,kBAAMc,MAAMC;AAAAA,EACxD;AAAA,EACAE,aAAa;AAAA,IACXC,OAAO;AAAA,IACPN,KAAK;AAAA,IACLI,OAAO;AAAA,EACT;AACF;;"}
+{"version":3,"file":"Card.styles.cjs","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,QAAAA,cAAc,UAAU;AAAA,EACnEC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVC,UAAU;AAAA,IACVC,SAASC,YAAAA,MAAMC,KAAKF;AAAAA,IACpBG,cAAcF,YAAAA,MAAMC,KAAKC;AAAAA,IACzB,mBAAmB;AAAA,MACjB,GAAGC,WAAAA;AAAAA,IACL;AAAA,IACA,WAAW;AAAA,MACTJ,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACAK,UAAU;AAAA,IACRL,SAAU,aAAYC,YAAAA,MAAMK,OAAOC;AAAAA,IACnC,WAAW;AAAA,MACTP,SAAU,aAAYC,YAAAA,MAAMK,OAAOC;AAAAA,IACrC;AAAA,IACA,WAAW;AAAA,MACTP,SAAU,aAAYC,YAAAA,MAAMK,OAAOC;AAAAA,IACrC;AAAA,EACF;AAAA,EACAC,YAAY;AAAA,IACV,WAAW;AAAA,MACTR,SAAU,aAAYC,YAAAA,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,YAAAA,MAAMC,KAAKY,gBAAgBb,kBAAMc,MAAMC;AAAAA,IACpDC,OAAQ,QAAOhB,YAAAA,MAAMC,KAAKY,gBAAgBb,kBAAMc,MAAMC;AAAAA,EACxD;AAAA,EACAE,aAAa;AAAA,IACXC,OAAO;AAAA,IACPN,KAAK;AAAA,IACLI,OAAO;AAAA,EACT;AACF,CAAC;;;"}

package/dist/cjs/components/Card/Content/Content.cjs

@@ -1,32 +1,30 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const MuiCardContent = require("@mui/material/CardContent");
-const react = require("@emotion/react");
 const Content_styles = require("./Content.styles.cjs");
-const contentClasses = require("./contentClasses.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const MuiCardContent__default = /* @__PURE__ */ _interopDefault(MuiCardContent);
 const HvCardContent = ({
   id,
-  classes,
+  classes: classesProp,
   className,
   children,
   onClick,
   ...others
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
-    children: ({
-      css,
-      cx
-    }) => /* @__PURE__ */ jsxRuntime.jsx(MuiCardContent__default.default, {
-      id,
-      className: cx(contentClasses.default.content, css(Content_styles.styles.content), className, classes == null ? void 0 : classes.content),
-      onClick,
-      ...others,
-      children
-    })
+  const {
+    classes,
+    cx
+  } = Content_styles.useClasses(classesProp);
+  return /* @__PURE__ */ jsxRuntime.jsx(MuiCardContent__default.default, {
+    id,
+    className: cx(classes.content, className),
+    onClick,
+    ...others,
+    children
   });
 };
+exports.cardContentClasses = Content_styles.staticClasses;
 exports.HvCardContent = HvCardContent;
 //# sourceMappingURL=Content.cjs.map

package/dist/cjs/components/Card/Content/Content.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Content.cjs","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,wCACGC,MAAAA,YAAU;AAAA,IAAAH,UACRA,CAAC;AAAA,MAAEI;AAAAA,MAAKC;AAAAA,IAAAA,qCACNC,wBAAAA,SAAc;AAAA,MACbT;AAAAA,MACAE,WAAWM,GACTE,uBAAmBC,SACnBJ,IAAIK,sBAAOD,OAAO,GAClBT,WACAD,mCAASU,OACX;AAAA,MACAP;AAAAA,MAAiB,GACbC;AAAAA,MAAMF;AAAAA,IAAAA,CAGI;AAAA,EAAA,CAER;AAEhB;;"}
+{"version":3,"file":"Content.cjs","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,eAAAA,WAAWN,WAAW;AAC9C,wCACGO,wBAAAA,SAAc;AAAA,IACbT;AAAAA,IACAG,WAAWI,GAAGN,QAAQS,SAASP,SAAS;AAAA,IACxCE;AAAAA,IAAiB,GACbC;AAAAA,IAAMF;AAAAA,EAAAA,CAGI;AAEpB;;;"}

package/dist/cjs/components/Card/Content/Content.styles.cjs

@@ -1,13 +1,18 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const styles = {
+const classes = require("../../../utils/classes.cjs");
+const {
+  staticClasses,
+  useClasses
+} = classes.createClasses("HvCardContent", {
   content: {
     padding: `0 ${uikitStyles.theme.space.sm} 15px ${uikitStyles.theme.space.sm}`,
     "&:last-child": {
       paddingBottom: uikitStyles.theme.space.sm
     }
   }
-};
-exports.styles = styles;
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
 //# sourceMappingURL=Content.styles.cjs.map

package/dist/cjs/components/Card/Content/Content.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Content.styles.cjs","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,YAAAA,MAAMC,MAAMC,WAAWF,kBAAMC,MAAMC;AAAAA,IACjD,gBAAgB;AAAA,MACdC,eAAeH,YAAAA,MAAMC,MAAMC;AAAAA,IAC7B;AAAA,EACF;AACF;;"}
+{"version":3,"file":"Content.styles.cjs","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,QAAAA,cAAc,iBAAiB;AAAA,EAC1EC,SAAS;AAAA,IACPC,SAAU,KAAIC,YAAAA,MAAMC,MAAMC,WAAWF,kBAAMC,MAAMC;AAAAA,IACjD,gBAAgB;AAAA,MACdC,eAAeH,YAAAA,MAAMC,MAAMC;AAAAA,IAC7B;AAAA,EACF;AACF,CAAC;;;"}

package/dist/cjs/components/Card/Header/Header.cjs

@@ -1,15 +1,13 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const MuiCardHeader = require("@mui/material/CardHeader");
-const react = require("@emotion/react");
-const headerClasses = require("./headerClasses.cjs");
 const Header_styles = require("./Header.styles.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const useTheme = require("../../../hooks/useTheme.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const MuiCardHeader__default = /* @__PURE__ */ _interopDefault(MuiCardHeader);
 const HvCardHeader = ({
-  classes,
+  classes: classesProp,
   className,
   title,
   subheader,
@@ -20,32 +18,34 @@ const HvCardHeader = ({
   const {
     activeTheme
   } = useTheme.useTheme();
-  return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
-    children: ({
-      css,
-      cx
-    }) => /* @__PURE__ */ jsxRuntime.jsx(MuiCardHeader__default.default, {
-      title,
-      subheader,
-      action: icon,
-      onClick,
-      className: cx(headerClasses.default.root, css(Header_styles.styles.root), className, classes == null ? void 0 : classes.root),
-      classes: {
-        title: icon ? cx(headerClasses.default.titleShort, css(Header_styles.styles.titleShort), css({
-          ...activeTheme == null ? void 0 : activeTheme.typography[activeTheme == null ? void 0 : activeTheme.card.titleVariant]
-        }), classes == null ? void 0 : classes.titleShort) : cx(headerClasses.default.title, css(Header_styles.styles.title), css({
-          ...activeTheme == null ? void 0 : activeTheme.typography[activeTheme == null ? void 0 : activeTheme.card.titleVariant]
-        }), classes == null ? void 0 : classes.title),
-        subheader: cx(headerClasses.default.subheader, css(Header_styles.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(headerClasses.default.action, css(Header_styles.styles.action), classes == null ? void 0 : classes.action),
-        content: cx(headerClasses.default.content, classes == null ? void 0 : classes.content)
-      },
-      ...others
-    })
+  const {
+    classes,
+    css,
+    cx
+  } = Header_styles.useClasses(classesProp);
+  return /* @__PURE__ */ jsxRuntime.jsx(MuiCardHeader__default.default, {
+    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
   });
 };
+exports.cardHeaderClasses = Header_styles.staticClasses;
 exports.HvCardHeader = HvCardHeader;
 //# sourceMappingURL=Header.cjs.map

package/dist/cjs/components/Card/Header/Header.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Header.cjs","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,SAAA;AAEjC,wCACGC,MAAAA,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,qCACNC,uBAAAA,SAAa;AAAA,MACZX;AAAAA,MACAC;AAAAA,MACAW,QAAQV;AAAAA,MACRC;AAAAA,MACAJ,WAAWW,GACTG,sBAAkBC,MAClBL,IAAIM,qBAAOD,IAAI,GACff,WACAD,mCAASgB,IACX;AAAA,MACAhB,SAAS;AAAA,QACPE,OAAOE,OACHQ,GACEG,sBAAkBG,YAClBP,IAAIM,cAAAA,OAAOC,UAAU,GACrBP,IAAI;AAAA,UACF,GAAGJ,2CAAaY,WAAWZ,2CAAaa,KAAKC;AAAAA,QAC9C,CAAA,GACDrB,mCAASkB,UACX,IACAN,GACEG,cAAAA,QAAkBb,OAClBS,IAAIM,cAAAA,OAAOf,KAAK,GAChBS,IAAI;AAAA,UACF,GAAGJ,2CAAaY,WAAWZ,2CAAaa,KAAKC;AAAAA,QAAY,CAC1D,GACDrB,mCAASE,KACX;AAAA,QACJC,WAAWS,GACTG,cAAAA,QAAkBZ,WAClBQ,IAAIM,qBAAOd,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,cAAkBD,QAAAA,QAClBH,IAAIM,cAAAA,OAAOH,MAAM,GACjBd,mCAASc,MACX;AAAA,QACAW,SAASb,GAAGG,cAAAA,QAAkBU,SAASzB,mCAASyB,OAAO;AAAA,MACzD;AAAA,MAAE,GACEnB;AAAAA,IAAAA,CACL;AAAA,EAAA,CAEO;AAEhB;;"}
+{"version":3,"file":"Header.cjs","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,SAAA;AAC3B,QAAA;AAAA,IAAET;AAAAA,IAASU;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,cAAAA,WAAWX,WAAW;AAEnD,wCACGY,uBAAAA,SAAa;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/cjs/components/Card/Header/Header.styles.cjs

@@ -1,7 +1,11 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const styles = {
+const classes = require("../../../utils/classes.cjs");
+const {
+  staticClasses,
+  useClasses
+} = classes.createClasses("HvCardHeader", {
   root: {
     padding: `15px ${uikitStyles.theme.space.sm}`,
     position: "relative"
@@ -16,6 +20,7 @@ const styles = {
   subheader: {
     fontFamily: uikitStyles.theme.fontFamily.body
   },
+  content: {},
   action: {
     position: "absolute",
     right: 20,
@@ -24,6 +29,7 @@ const styles = {
     paddingLeft: uikitStyles.theme.space.xs,
     top: "15px"
   }
-};
-exports.styles = styles;
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
 //# sourceMappingURL=Header.styles.cjs.map

package/dist/cjs/components/Card/Header/Header.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Header.styles.cjs","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,YAAAA,MAAMC,MAAMC;AAAAA,IAAMC,UAAU;AAAA,EAAW;AAAA,EAChEC,YAAY;AAAA,IACVC,YAAYL,YAAAA,MAAMK,WAAWC;AAAAA,IAC7BC,aAAa;AAAA,EACf;AAAA,EACAC,OAAO;AAAA,IACLH,YAAYL,YAAAA,MAAMK,WAAWC;AAAAA,EAC/B;AAAA,EACAG,WAAW;AAAA,IACTJ,YAAYL,YAAAA,MAAMK,WAAWC;AAAAA,EAC/B;AAAA,EACAI,QAAQ;AAAA,IACNP,UAAU;AAAA,IACVQ,OAAO;AAAA,IACPC,WAAW;AAAA,IACXL,aAAa;AAAA,IACbM,aAAab,YAAAA,MAAMC,MAAMa;AAAAA,IACzBC,KAAK;AAAA,EACP;AACF;;"}
+{"version":3,"file":"Header.styles.cjs","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,QAAAA,cAAc,gBAAgB;AAAA,EACzEC,MAAM;AAAA,IAAEC,SAAU,QAAOC,YAAAA,MAAMC,MAAMC;AAAAA,IAAMC,UAAU;AAAA,EAAW;AAAA,EAChEC,YAAY;AAAA,IACVC,YAAYL,YAAAA,MAAMK,WAAWC;AAAAA,IAC7BC,aAAa;AAAA,EACf;AAAA,EACAC,OAAO;AAAA,IACLH,YAAYL,YAAAA,MAAMK,WAAWC;AAAAA,EAC/B;AAAA,EACAG,WAAW;AAAA,IACTJ,YAAYL,YAAAA,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,YAAAA,MAAMC,MAAMc;AAAAA,IACzBC,KAAK;AAAA,EACP;AACF,CAAC;;;"}

package/dist/cjs/components/Card/Media/Media.cjs

@@ -1,39 +1,36 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const MuiCardMedia = require("@mui/material/CardMedia");
-const react = require("@emotion/react");
-const mediaClasses = require("./mediaClasses.cjs");
 const Media_styles = require("./Media.styles.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const MuiCardMedia__default = /* @__PURE__ */ _interopDefault(MuiCardMedia);
 const HvCardMedia = ({
   id,
-  classes,
+  classes: classesProp,
   className,
   children,
   title,
   onClick,
   ...others
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
-    children: ({
-      css,
-      cx
-    }) => /* @__PURE__ */ jsxRuntime.jsx(MuiCardMedia__default.default, {
-      id,
-      classes: {
-        root: cx(mediaClasses.default.root, css(Media_styles.styles.root), classes == null ? void 0 : classes.root),
-        media: cx(mediaClasses.default.media, classes == null ? void 0 : classes.media)
-      },
-      className,
-      role: "img",
-      title,
-      onClick,
-      ...others,
-      children
-    })
+  const {
+    classes
+  } = Media_styles.useClasses(classesProp);
+  return /* @__PURE__ */ jsxRuntime.jsx(MuiCardMedia__default.default, {
+    id,
+    classes: {
+      root: classes.root,
+      media: classes.media
+    },
+    className,
+    role: "img",
+    title,
+    onClick,
+    ...others,
+    children
   });
 };
+exports.cardMediaClasses = Media_styles.staticClasses;
 exports.HvCardMedia = HvCardMedia;
 //# sourceMappingURL=Media.cjs.map

package/dist/cjs/components/Card/Media/Media.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Media.cjs","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,wCACGC,MAAAA,YAAU;AAAA,IAAAJ,UACRA,CAAC;AAAA,MAAEK;AAAAA,MAAKC;AAAAA,IAAAA,qCACNC,sBAAAA,SAAY;AAAA,MACXV;AAAAA,MACAC,SAAS;AAAA,QACPU,MAAMF,GAAGG,aAAiBD,QAAAA,MAAMH,IAAIK,aAAAA,OAAOF,IAAI,GAAGV,mCAASU,IAAI;AAAA,QAC/DG,OAAOL,GAAGG,aAAAA,QAAiBE,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.cjs","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,aAAAA,WAAWN,WAAW;AAC1C,wCACGO,sBAAAA,SAAY;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/cjs/components/Card/Media/Media.styles.cjs

@@ -1,9 +1,15 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const styles = {
+const classes = require("../../../utils/classes.cjs");
+const {
+  staticClasses,
+  useClasses
+} = classes.createClasses("HvCardMedia", {
   root: {
     width: "100%"
-  }
-};
-exports.styles = styles;
+  },
+  media: {}
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
 //# sourceMappingURL=Media.styles.cjs.map

package/dist/cjs/components/Card/Media/Media.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Media.styles.cjs","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.cjs","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,QAAAA,cAAc,eAAe;AAAA,EACxEC,MAAM;AAAA,IAAEC,OAAO;AAAA,EAAO;AAAA,EACtBC,OAAO,CAAC;AACV,CAAC;;;"}