@hitachivantara/uikit-react-core 5.0.0-next.7 → 5.0.0-next.9

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

@@ -1 +1 @@
-{"version":3,"file":"BulkActions.js","sources":["../../../../src/components/BulkActions/BulkActions.tsx"],"sourcesContent":["import { HvCheckBox, HvCheckBoxProps } from \"../CheckBox\";\nimport { HvBaseProps } from \"../../types\";\nimport { HvActionGeneric, HvActionsGenericProps } from \"../ActionsGeneric\";\nimport bulkActionsClasses, { HvBulkActionsClasses } from \"./bulkActionsClasses\";\nimport { HvButton, HvButtonProps, HvButtonSize } from \"../Button\";\nimport { useContext, useEffect, useState } from \"react\";\nimport { HvTypography } from \"components\";\nimport {\n  StyledGenericActions,\n  StyledRoot,\n  StyledSelectAllContainer,\n  StyledDivider,\n} from \"./BulkActions.styles\";\nimport clsx from \"clsx\";\nimport { setId } from \"utils\";\nimport { HvThemeContext } from \"providers\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport type HvBulkActionsProps = 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 } = useContext(HvThemeContext);\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          <b>{selectAllLabel}</b>\n          {` (${numTotal})`}\n        </>\n      ) : (\n        <>\n          <b>{numSelected}</b>\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].base1 || theme.colors.base1\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","useContext","HvThemeContext","anySelected","setAnySelected","useState","isSemantic","useEffect","selectAllLabelComponent","HvTypography","component","disabled","variant","children","_jsxs","_Fragment","_jsx","StyledRoot","clsx","root","bulkActionsClasses","$isSemantic","$baseColor","colors","modes","base1","theme","StyledSelectAllContainer","selectAllContainer","HvCheckBox","setId","selectAll","checked","onChange","indeterminate","label","StyledDivider","HvButton","selectAllPages","onClick","size","bulkActions","buttonSize","StyledGenericActions","category"],"mappings":";;;;;;;;;;;AAuFO,MAAMA,gBAAgBA,CAAC;AAAA,EAC5BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,WAAW;AAAA,EACXC,cAAc;AAAA,EACdC,iBAAiB;AAAA,EACjBC,4BAA4B;AAAA,EAC5BC,qBAAqB;AAAA,EACrBC,WAAW;AAAA,EACXC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,KACGC;AACe,MAAM;;AAClB,QAAA;AAAA,IAAEC;AAAAA,IAAaC;AAAAA,EAAAA,IAAiBC,WAAWC,cAAc;AAE/D,QAAM,CAACC,aAAaC,cAAc,IAAIC,SAAkB,KAAK;AAE7D,QAAMC,aAAaZ,YAAYS;AAE/BI,YAAU,MAAM;AACdH,mBAAed,cAAc,CAAC;AAAA,EAAA,GAC7B,CAACA,WAAW,CAAC;AAEVkB,QAAAA,8CACHC,cAAY;AAAA,IACXC,WAAU;AAAA,IACVC,UAAUxB,+CAAewB;AAAAA,IACzBC,SAAQ;AAAA,IAAMC,UAEb,CAACV,cACAW,qBAAAC,UAAA;AAAA,MAAAF,WACEG,oBAAA,KAAA;AAAA,QAAAH,UAAItB;AAAAA,MAAmB,CAAA,GACrB,KAAIF,WAAW;AAAA,IAAA,CAChB,IAEHyB,qBAAAC,UAAA;AAAA,MAAAF,WACEG,oBAAA,KAAA;AAAA,QAAAH,UAAIvB;AAAAA,MAAAA,CAAW,GACb,IAAGE,6BAA6BH,UAAU;AAAA,IAAA,CAAA;AAAA,EAAA,CAInD;AAED,8BACG4B,YAAU;AAAA,IACTpC;AAAAA,IACAC,WAAWoC,KACTpC,WACAC,mCAASoC,MACTC,mBAAmBD,MACnBb,cAAcY,KAAKnC,mCAASW,UAAU0B,mBAAmB1B,QAAQ,CAAC;AAAA,IAEpE2B,aAAaf;AAAAA,IACbgB,cACEvB,gDAAawB,WAAbxB,mBAAqByB,MAAMxB,cAAcyB,UAASC,MAAMH,OAAOE;AAAAA,IAChE,GACG3B;AAAAA,IAAMe,UAAA,CAEVC,qBAACa,0BAAwB;AAAA,MACvB7C,WAAWoC,KACTnC,mCAAS6C,oBACTR,mBAAmBQ,kBAAkB;AAAA,MACrCf,UAAA,CAEFG,oBAACa,YAAU;AAAA,QACThD,IAAIiD,MAAMjD,IAAI,QAAQ;AAAA,QACtBC,WAAWoC,KAAKnC,mCAASgD,WAAWX,mBAAmBW,SAAS;AAAA,QAChEC,SAAS1C,cAAc;AAAA,QACvBI,UAAUY;AAAAA,QACV2B,UAAUrC;AAAAA,QACVsC,eAAe5C,cAAc,KAAKA,cAAcD;AAAAA,QAChD8C,OAAO3B;AAAAA,QAAwB,GAC3BrB;AAAAA,MAAAA,CACJ,GACDM,sBAAsBU,eAAeb,cAAcD,iCAClD0B,UAAA;AAAA,QAAAF,UAAA,CACGuB,oBAAAA,wCACAC,UAAQ;AAAA,UACPxD,IAAIiD,MAAMjD,IAAI,OAAO;AAAA,UACrBC,WAAWoC,KACTnC,mCAASuD,gBACTlB,mBAAmBkB,cAAc;AAAA,UAEnC1B,SAASN,aAAa,aAAa;AAAA,UACnCiC,SAAS1C;AAAAA,UACT2C,QACGzC,gDAAa0C,gBAAb1C,mBAA0B2C,eAA+B;AAAA,UAC3D7B,UAEA7B,oDACE,cAAaK;AAAAA,QAAAA,CACP,CAAA;AAAA,MAAA,CAEd,CAAA;AAAA,IAAA,CACwB,GAC3B2B,oBAAC2B,sBAAoB;AAAA,MACnB9D,IAAIiD,MAAMjD,IAAI,SAAS;AAAA,MACvBE,SAAS;AAAA,QAAEoC,MAAMD,KAAKnC,mCAASK,SAASgC,mBAAmBhC,OAAO;AAAA,MAAE;AAAA,MACpEwD,UAAUtC,aAAa,aAAa;AAAA,MACpClB;AAAAA,MACAuB,UAAU1B,4CAAmBK,gBAAgB;AAAA,MAC7CK;AAAAA,MACAT;AAAAA,IAAAA,CACA,CAAA;AAAA,EAAA,CACS;AAEjB;"}
+{"version":3,"file":"BulkActions.js","sources":["../../../../src/components/BulkActions/BulkActions.tsx"],"sourcesContent":["import { HvCheckBox, HvCheckBoxProps } from \"../CheckBox\";\nimport { HvBaseProps } from \"../../types\";\nimport { HvActionGeneric, HvActionsGenericProps } from \"../ActionsGeneric\";\nimport bulkActionsClasses, { HvBulkActionsClasses } from \"./bulkActionsClasses\";\nimport { HvButton, HvButtonProps, HvButtonSize } from \"../Button\";\nimport { useContext, useEffect, useState } from \"react\";\nimport { HvTypography } from \"components\";\nimport {\n  StyledGenericActions,\n  StyledRoot,\n  StyledSelectAllContainer,\n  StyledDivider,\n} from \"./BulkActions.styles\";\nimport clsx from \"clsx\";\nimport { setId } from \"utils\";\nimport { HvThemeContext } from \"providers\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport type HvBulkActionsProps = 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 } = useContext(HvThemeContext);\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          <b>{selectAllLabel}</b>\n          {` (${numTotal})`}\n        </>\n      ) : (\n        <>\n          <b>{numSelected}</b>\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].base1 || theme.colors.base1\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","useContext","HvThemeContext","anySelected","setAnySelected","useState","isSemantic","useEffect","selectAllLabelComponent","disabled","clsx","root","bulkActionsClasses","colors","modes","base1","theme","selectAllContainer","setId","selectAll","selectAllPages","bulkActions","buttonSize"],"mappings":";;;;;;;;;;;AAuFO,MAAMA,gBAAgBA,CAAC;AAAA,EAC5BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,WAAW;AAAA,EACXC,cAAc;AAAA,EACdC,iBAAiB;AAAA,EACjBC,4BAA4B;AAAA,EAC5BC,qBAAqB;AAAA,EACrBC,WAAW;AAAA,EACXC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,KACGC;AACe,MAAM;;AAClB,QAAA;AAAA,IAAEC;AAAAA,IAAaC;AAAAA,EAAAA,IAAiBC,WAAWC,cAAc;AAE/D,QAAM,CAACC,aAAaC,cAAc,IAAIC,SAAkB,KAAK;AAE7D,QAAMC,aAAaZ,YAAYS;AAE/BI,YAAU,MAAM;AACdH,mBAAed,cAAc,CAAC;AAAA,EAAA,GAC7B,CAACA,WAAW,CAAC;AAEhB,QAAMkB,0BACJ,oBAAC,cACC,EAAA,WAAU,QACV,UAAUrB,+CAAesB,UACzB,SAAQ,QAEP,UAACN,CAAAA,cAEE,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA,oBAAC,OAAGZ,UAAe,eAAA,CAAA;AAAA,IACjB,KAAIF;AAAAA,EAAAA,EAAAA,CACR,IAGE,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA,oBAAC,OAAGC,UAAY,YAAA,CAAA;AAAA,IACd,IAAGE,6BAA6BH;AAAAA,EAAAA,EACpC,CAAA,EAEJ,CAAA;AAGF,SACG,qBAAA,YAAA,EACC,IACA,WAAWqB,KACT5B,WACAC,mCAAS4B,MACTC,mBAAmBD,MACnBL,cAAcI,KAAK3B,mCAASW,UAAUkB,mBAAmBlB,QAAQ,CAAC,GAEpE,aAAaY,YACb,cACEP,gDAAac,WAAbd,mBAAqBe,MAAMd,cAAce,UAASC,MAAMH,OAAOE,OAEjE,GAAIjB,QAEJ,UAAA;AAAA,IAAA,qBAAC,4BACC,WAAWY,KACT3B,mCAASkC,oBACTL,mBAAmBK,kBAAkB,GAGvC,UAAA;AAAA,MAAA,oBAAC,YACC,EAAA,IAAIC,MAAMrC,IAAI,QAAQ,GACtB,WAAW6B,KAAK3B,mCAASoC,WAAWP,mBAAmBO,SAAS,GAChE,SAAS7B,cAAc,GACvB,UAAUgB,YACV,UAAUV,aACV,eAAeN,cAAc,KAAKA,cAAcD,UAChD,OAAOmB,yBACP,GAAIrB,cAAc,CAAA;AAAA,MAEnBM,sBAAsBU,eAAeb,cAAcD,YAEhD,qBAAA,UAAA,EAAA,UAAA;AAAA,QAAA,oBAAC,eAAa,EAAA;AAAA,QACd,oBAAC,UACC,EAAA,IAAI6B,MAAMrC,IAAI,OAAO,GACrB,WAAW6B,KACT3B,mCAASqC,gBACTR,mBAAmBQ,cAAc,GAEnC,SAASd,aAAa,aAAa,kBACnC,SAAST,kBACT,QACGE,gDAAasB,gBAAbtB,mBAA0BuB,eAA+B,MAG3DtC,UACE,oDAAA,cAAaK,mCAClB;AAAA,MAAA,GACF;AAAA,IAAA,GAEJ;AAAA,wBACC,sBACC,EAAA,IAAI6B,MAAMrC,IAAI,SAAS,GACvB,SAAS;AAAA,MAAE8B,MAAMD,KAAK3B,mCAASK,SAASwB,mBAAmBxB,OAAO;AAAA,IAAE,GACpE,UAAUkB,aAAa,aAAa,kBACpC,SACA,UAAUrB,4CAAmBK,gBAAgB,GAC7C,iBACA,kBAAqC,CAAA;AAAA,EAEzC,EAAA,CAAA;AAEJ;"}

package/dist/esm/components/Button/Button.js

@@ -1,6 +1,8 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import clsx from "clsx";
 import { forwardRef } from "react";
 import { StyledButton, StyledContentDiv, StyledIconSpan, StyledChildren } from "./Button.styles.js";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import buttonClasses from "./buttonClasses.js";
 const mapVariant = (variant) => {
   if (variant === "secondary") {
     console.warn("Button variant 'secondary' is deprecated. Please use 'secondarySubtle'.");
@@ -12,12 +14,6 @@ const mapVariant = (variant) => {
   }
   return variant;
 };
-const onFocusHandler = (event) => {
-  event.target.classList.add("HvIsFocusVisible");
-};
-const onBlurHandler = (event) => {
-  event.target.classList.remove("HvIsFocusVisible");
-};
 const HvButton = forwardRef((props, ref) => {
   const {
     id,
@@ -34,29 +30,24 @@ const HvButton = forwardRef((props, ref) => {
     overrideIconColors = true,
     ...others
   } = props;
-  return /* @__PURE__ */ jsx(StyledButton, {
-    id,
-    className,
-    ref,
-    onClick,
-    disabled,
-    onFocus: onFocusHandler,
-    onBlur: onBlurHandler,
-    $variant: mapVariant(variant),
-    $iconOnly: !!icon,
-    $size: size,
-    $radius: radius,
-    $overrideIconColors: overrideIconColors,
-    $disabled: !!disabled,
-    ...others,
-    children: /* @__PURE__ */ jsxs(StyledContentDiv, {
-      children: [startIcon && /* @__PURE__ */ jsx(StyledIconSpan, {
-        children: startIcon
-      }), children && /* @__PURE__ */ jsx(StyledChildren, {
-        children
-      })]
-    })
-  });
+  const onFocusHandler = (event) => {
+    event.target.classList.add("HvIsFocusVisible");
+    event.target.classList.add(buttonClasses.focusVisible);
+    if (classes == null ? void 0 : classes.focusVisible) {
+      event.target.classList.add(classes.focusVisible);
+    }
+  };
+  const onBlurHandler = (event) => {
+    event.target.classList.remove("HvIsFocusVisible");
+    event.target.classList.remove(buttonClasses.focusVisible);
+    if (classes == null ? void 0 : classes.focusVisible) {
+      event.target.classList.remove(classes.focusVisible);
+    }
+  };
+  return /* @__PURE__ */ jsx(StyledButton, { id, className: clsx(className, classes == null ? void 0 : classes.root, buttonClasses.root), ref, onClick, disabled, onFocus: onFocusHandler, onBlur: onBlurHandler, $variant: mapVariant(variant), $iconOnly: !!icon, $size: size, $radius: radius, $overrideIconColors: overrideIconColors, $disabled: !!disabled, ...others, children: /* @__PURE__ */ jsxs(StyledContentDiv, { children: [
+    startIcon && /* @__PURE__ */ jsx(StyledIconSpan, { className: clsx(classes == null ? void 0 : classes.startIcon, buttonClasses.startIcon), children: startIcon }),
+    children && /* @__PURE__ */ jsx(StyledChildren, { children })
+  ] }) });
 });
 export {
   HvButton

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

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { CSSProperties, forwardRef, ReactElement } from \"react\";\nimport {\n  StyledButton,\n  StyledChildren,\n  StyledContentDiv,\n  StyledIconSpan,\n} from \"./Button.styles\";\nimport { HvButtonClasses } from \"./buttonClasses\";\n\nexport type HvButtonVariant =\n  | \"primary\"\n  | \"primarySubtle\"\n  | \"primaryGhost\"\n  | \"secondarySubtle\"\n  | \"secondaryGhost\"\n  | \"semantic\"\n  // deprecated props\n  | \"secondary\"\n  | \"ghost\";\n\nexport type HvButtonSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nexport type HvButtonRadius = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"none\" | \"base\";\n\nexport interface HvButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Use the variant prop to change the visual style of the Button. */\n  variant?: HvButtonVariant;\n  sx?: CSSProperties;\n  icon?: boolean;\n  className?: string;\n  startIcon?: ReactElement;\n  size?: HvButtonSize;\n  radius?: HvButtonRadius;\n  overrideIconColors?: boolean;\n  selected?: boolean;\n  classes?: HvButtonClasses;\n}\n\n/**\n * Normalize the button variant. It's meant to give us some retro-compatibility with\n * the DS 3.6 API.\n *\n * @param variant the variant of the button\n * @returns       the normalized variant in DS 5 API\n */\nconst mapVariant = (variant: HvButtonVariant): HvButtonVariant => {\n  if (variant === \"secondary\") {\n    console.warn(\n      \"Button variant 'secondary' is deprecated. Please use 'secondarySubtle'.\"\n    );\n    return \"secondarySubtle\";\n  }\n  if (variant === \"ghost\") {\n    console.warn(\n      \"Button variant 'ghost' is deprecated. Please use 'primaryGhost'.\"\n    );\n    return \"primaryGhost\";\n  }\n  return variant;\n};\n\nconst onFocusHandler = (event) => {\n  event.target.classList.add(\"HvIsFocusVisible\");\n};\n\nconst onBlurHandler = (event) => {\n  event.target.classList.remove(\"HvIsFocusVisible\");\n};\n\n/**\n * Button component is used to trigger an action or event.\n */\nexport const HvButton = forwardRef<HTMLButtonElement, HvButtonProps>(\n  (props, ref) => {\n    const {\n      id,\n      classes,\n      children,\n      variant = \"primary\",\n      onClick,\n      disabled,\n      className,\n      startIcon,\n      icon = false,\n      size,\n      radius = \"base\",\n      overrideIconColors = true,\n      ...others\n    }: HvButtonProps = props;\n\n    return (\n      <StyledButton\n        id={id}\n        className={className}\n        ref={ref}\n        onClick={onClick}\n        disabled={disabled}\n        onFocus={onFocusHandler}\n        onBlur={onBlurHandler}\n        $variant={mapVariant(variant)}\n        $iconOnly={!!icon}\n        $size={size}\n        $radius={radius}\n        $overrideIconColors={overrideIconColors}\n        $disabled={!!disabled}\n        {...others}\n      >\n        <StyledContentDiv>\n          {startIcon && <StyledIconSpan>{startIcon}</StyledIconSpan>}\n          {children && <StyledChildren>{children}</StyledChildren>}\n        </StyledContentDiv>\n      </StyledButton>\n    );\n  }\n);\n"],"names":["mapVariant","variant","console","warn","onFocusHandler","event","target","classList","add","onBlurHandler","remove","HvButton","forwardRef","props","ref","id","classes","children","onClick","disabled","className","startIcon","icon","size","radius","overrideIconColors","others","StyledButton","onFocus","onBlur","$variant","$iconOnly","$size","$radius","$overrideIconColors","$disabled","StyledContentDiv","_jsx","StyledIconSpan","StyledChildren"],"mappings":";;;AA8CA,MAAMA,aAAaA,CAACC,YAA8C;AAChE,MAAIA,YAAY,aAAa;AAC3BC,YAAQC,KACN,yEAAyE;AAEpE,WAAA;AAAA,EACT;AACA,MAAIF,YAAY,SAAS;AACvBC,YAAQC,KACN,kEAAkE;AAE7D,WAAA;AAAA,EACT;AACOF,SAAAA;AACT;AAEA,MAAMG,iBAAkBC,CAAU,UAAA;AAC1BC,QAAAA,OAAOC,UAAUC,IAAI,kBAAkB;AAC/C;AAEA,MAAMC,gBAAiBJ,CAAU,UAAA;AACzBC,QAAAA,OAAOC,UAAUG,OAAO,kBAAkB;AAClD;AAKO,MAAMC,WAAWC,WACtB,CAACC,OAAOC,QAAQ;AACR,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAhB,UAAU;AAAA,IACViB;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,OAAO;AAAA,IACPC;AAAAA,IACAC,SAAS;AAAA,IACTC,qBAAqB;AAAA,OAClBC;AAAAA,EACcb,IAAAA;AAEnB,6BACGc,cAAY;AAAA,IACXZ;AAAAA,IACAK;AAAAA,IACAN;AAAAA,IACAI;AAAAA,IACAC;AAAAA,IACAS,SAASxB;AAAAA,IACTyB,QAAQpB;AAAAA,IACRqB,UAAU9B,WAAWC,OAAO;AAAA,IAC5B8B,WAAW,CAAC,CAACT;AAAAA,IACbU,OAAOT;AAAAA,IACPU,SAAST;AAAAA,IACTU,qBAAqBT;AAAAA,IACrBU,WAAW,CAAC,CAAChB;AAAAA,IAAS,GAClBO;AAAAA,IAAMT,+BAETmB,kBAAgB;AAAA,MAAAnB,UACdI,CAAAA,aAAagB,oBAACC,gBAAc;AAAA,QAAArB,UAAEI;AAAAA,MAAAA,CAAS,GACvCJ,YAAYoB,oBAACE,gBAAc;AAAA,QAAAtB;AAAAA,MAAAA,CAA4B,CAAA;AAAA,IAAA,CAAA;AAAA,EAAA,CAE7C;AAEnB,CAAC;"}
+{"version":3,"file":"Button.js","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { CSSProperties, forwardRef, ReactElement } from \"react\";\nimport {\n  StyledButton,\n  StyledChildren,\n  StyledContentDiv,\n  StyledIconSpan,\n} from \"./Button.styles\";\nimport buttonClasses, { HvButtonClasses } from \"./buttonClasses\";\n\nexport type HvButtonVariant =\n  | \"primary\"\n  | \"primarySubtle\"\n  | \"primaryGhost\"\n  | \"secondarySubtle\"\n  | \"secondaryGhost\"\n  | \"semantic\"\n  // deprecated props\n  | \"secondary\"\n  | \"ghost\";\n\nexport type HvButtonSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nexport type HvButtonRadius = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"none\" | \"base\";\n\nexport interface HvButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Use the variant prop to change the visual style of the Button. */\n  variant?: HvButtonVariant;\n  sx?: CSSProperties;\n  icon?: boolean;\n  className?: string;\n  startIcon?: ReactElement;\n  size?: HvButtonSize;\n  radius?: HvButtonRadius;\n  overrideIconColors?: boolean;\n  selected?: boolean;\n  classes?: HvButtonClasses;\n}\n\n/**\n * Normalize the button variant. It's meant to give us some retro-compatibility with\n * the DS 3.6 API.\n *\n * @param variant the variant of the button\n * @returns       the normalized variant in DS 5 API\n */\nconst mapVariant = (variant: HvButtonVariant): HvButtonVariant => {\n  if (variant === \"secondary\") {\n    console.warn(\n      \"Button variant 'secondary' is deprecated. Please use 'secondarySubtle'.\"\n    );\n    return \"secondarySubtle\";\n  }\n  if (variant === \"ghost\") {\n    console.warn(\n      \"Button variant 'ghost' is deprecated. Please use 'primaryGhost'.\"\n    );\n    return \"primaryGhost\";\n  }\n  return variant;\n};\n\n/**\n * Button component is used to trigger an action or event.\n */\nexport const HvButton = forwardRef<HTMLButtonElement, HvButtonProps>(\n  (props, ref) => {\n    const {\n      id,\n      classes,\n      children,\n      variant = \"primary\",\n      onClick,\n      disabled,\n      className,\n      startIcon,\n      icon = false,\n      size,\n      radius = \"base\",\n      overrideIconColors = true,\n      ...others\n    }: HvButtonProps = props;\n\n    const onFocusHandler = (event) => {\n      event.target.classList.add(\"HvIsFocusVisible\");\n      event.target.classList.add(buttonClasses.focusVisible);\n      if (classes?.focusVisible) {\n        event.target.classList.add(classes.focusVisible);\n      }\n    };\n\n    const onBlurHandler = (event) => {\n      event.target.classList.remove(\"HvIsFocusVisible\");\n      event.target.classList.remove(buttonClasses.focusVisible);\n      if (classes?.focusVisible) {\n        event.target.classList.remove(classes.focusVisible);\n      }\n    };\n\n    return (\n      <StyledButton\n        id={id}\n        className={clsx(className, classes?.root, buttonClasses.root)}\n        ref={ref}\n        onClick={onClick}\n        disabled={disabled}\n        onFocus={onFocusHandler}\n        onBlur={onBlurHandler}\n        $variant={mapVariant(variant)}\n        $iconOnly={!!icon}\n        $size={size}\n        $radius={radius}\n        $overrideIconColors={overrideIconColors}\n        $disabled={!!disabled}\n        {...others}\n      >\n        <StyledContentDiv>\n          {startIcon && (\n            <StyledIconSpan\n              className={clsx(classes?.startIcon, buttonClasses.startIcon)}\n            >\n              {startIcon}\n            </StyledIconSpan>\n          )}\n          {children && <StyledChildren>{children}</StyledChildren>}\n        </StyledContentDiv>\n      </StyledButton>\n    );\n  }\n);\n"],"names":["mapVariant","variant","console","warn","HvButton","forwardRef","props","ref","id","classes","children","onClick","disabled","className","startIcon","icon","size","radius","overrideIconColors","others","onFocusHandler","event","target","classList","add","buttonClasses","focusVisible","onBlurHandler","remove","clsx","root"],"mappings":";;;;;AA+CA,MAAMA,aAAaA,CAACC,YAA8C;AAChE,MAAIA,YAAY,aAAa;AAC3BC,YAAQC,KACN,yEAAyE;AAEpE,WAAA;AAAA,EACT;AACA,MAAIF,YAAY,SAAS;AACvBC,YAAQC,KACN,kEAAkE;AAE7D,WAAA;AAAA,EACT;AACOF,SAAAA;AACT;AAKO,MAAMG,WAAWC,WACtB,CAACC,OAAOC,QAAQ;AACR,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAT,UAAU;AAAA,IACVU;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,OAAO;AAAA,IACPC;AAAAA,IACAC,SAAS;AAAA,IACTC,qBAAqB;AAAA,OAClBC;AAAAA,EACcb,IAAAA;AAEnB,QAAMc,iBAAkBC,CAAU,UAAA;AAC1BC,UAAAA,OAAOC,UAAUC,IAAI,kBAAkB;AAC7CH,UAAMC,OAAOC,UAAUC,IAAIC,cAAcC,YAAY;AACrD,QAAIjB,mCAASiB,cAAc;AACzBL,YAAMC,OAAOC,UAAUC,IAAIf,QAAQiB,YAAY;AAAA,IACjD;AAAA,EAAA;AAGF,QAAMC,gBAAiBN,CAAU,UAAA;AACzBC,UAAAA,OAAOC,UAAUK,OAAO,kBAAkB;AAChDP,UAAMC,OAAOC,UAAUK,OAAOH,cAAcC,YAAY;AACxD,QAAIjB,mCAASiB,cAAc;AACzBL,YAAMC,OAAOC,UAAUK,OAAOnB,QAAQiB,YAAY;AAAA,IACpD;AAAA,EAAA;AAGF,6BACG,cACC,EAAA,IACA,WAAWG,KAAKhB,WAAWJ,mCAASqB,MAAML,cAAcK,IAAI,GAC5D,KACA,SACA,UACA,SAASV,gBACT,QAAQO,eACR,UAAU3B,WAAWC,OAAO,GAC5B,WAAW,CAAC,CAACc,MACb,OAAOC,MACP,SAASC,QACT,qBAAqBC,oBACrB,WAAW,CAAC,CAACN,UACTO,GAAAA,QAEJ,+BAAC,kBACEL,EAAAA,UAAAA;AAAAA,IACC,aAAA,oBAAC,kBACC,WAAWe,KAAKpB,mCAASK,WAAWW,cAAcX,SAAS,GAE1DA,UACH,UAAA,CAAA;AAAA,IAEDJ,YAAa,oBAAA,gBAAA,EAAgBA,SAAS,CAAA;AAAA,EAAA,EACzC,CAAA,EACF,CAAA;AAEJ,CAAC;"}

package/dist/esm/components/Button/buttonClasses.js

@@ -1,5 +1,5 @@
 import { getClasses } from "../../utils/classes.js";
-const classKeys = ["focusVisible", "startIcon", "primary"];
+const classKeys = ["root", "startIcon", "focusVisible"];
 const buttonClasses = getClasses(classKeys, "HvButton");
 const buttonClasses$1 = buttonClasses;
 export {

package/dist/esm/components/Button/buttonClasses.js.map

@@ -1 +1 @@
-{"version":3,"file":"buttonClasses.js","sources":["../../../../src/components/Button/buttonClasses.ts"],"sourcesContent":["import { getClasses } from \"utils\";\n\nexport type HvButtonClasses = {\n  focusVisible?: string;\n  startIcon?: string;\n  primary?: string;\n};\n\nconst classKeys: string[] = [\"focusVisible\", \"startIcon\", \"primary\"];\n\nconst buttonClasses = getClasses<HvButtonClasses>(classKeys, \"HvButton\");\n\nexport default buttonClasses;\n"],"names":["classKeys","buttonClasses","getClasses"],"mappings":";AAQA,MAAMA,YAAsB,CAAC,gBAAgB,aAAa,SAAS;AAEnE,MAAMC,gBAAgBC,WAA4BF,WAAW,UAAU;AAEvE,MAAA,kBAAeC;"}
+{"version":3,"file":"buttonClasses.js","sources":["../../../../src/components/Button/buttonClasses.ts"],"sourcesContent":["import { getClasses } from \"utils\";\n\nexport type HvButtonClasses = {\n  root?: string;\n  startIcon?: string;\n  focusVisible?: string;\n};\n\nconst classKeys: string[] = [\"root\", \"startIcon\", \"focusVisible\"];\n\nconst buttonClasses = getClasses<HvButtonClasses>(classKeys, \"HvButton\");\n\nexport default buttonClasses;\n"],"names":["classKeys","buttonClasses","getClasses"],"mappings":";AAQA,MAAMA,YAAsB,CAAC,QAAQ,aAAa,cAAc;AAEhE,MAAMC,gBAAgBC,WAA4BF,WAAW,UAAU;AAEvE,MAAA,kBAAeC;"}

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

@@ -1,7 +1,10 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { css } from "@emotion/css";
+import { theme } from "@hitachivantara/uikit-styles";
 import clsx from "clsx";
-import { StyledRoot, StyledContainer, StyledBar, StyledIcon } from "./Card.styles.js";
+import { styles } from "./Card.styles.js";
 import cardClasses from "./cardClasses.js";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { HvBox } from "../Box/Box.js";
 const HvCard = ({
   classes,
   className,
@@ -10,25 +13,21 @@ const HvCard = ({
   selectable = false,
   selected = false,
   statusColor = "sema0",
-  bgcolor = "atmo1",
+  bgcolor,
   ...others
 }) => {
-  return /* @__PURE__ */ jsxs(StyledRoot, {
-    "aria-selected": selectable ? selected : void 0,
-    className: clsx("HvIsCardGridElement", cardClasses.root, classes == null ? void 0 : classes.root, className, selectable && clsx(cardClasses.selectable, classes == null ? void 0 : classes.selectable), selected && clsx(cardClasses.selected, classes == null ? void 0 : classes.selected)),
-    $selectable: selectable,
-    $selected: selected,
-    $bgcolor: bgcolor,
-    ...others,
-    children: [/* @__PURE__ */ jsxs(StyledContainer, {
-      children: [/* @__PURE__ */ jsx(StyledBar, {
-        className: clsx(cardClasses.semanticBar, classes == null ? void 0 : classes.semanticBar),
-        $barColor: statusColor
-      }), /* @__PURE__ */ jsx(StyledIcon, {
-        children: icon
-      })]
-    }), children]
-  });
+  return /* @__PURE__ */ jsxs(HvBox, { "aria-selected": selectable ? selected : void 0, className: clsx(styles.root, bgcolor && /* @__PURE__ */ css({
+    backgroundColor: theme.colors[bgcolor]
+  }, process.env.NODE_ENV === "production" ? "" : ";label:HvCard;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FyZC9DYXJkLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFzRFUiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9DYXJkL0NhcmQudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSBcIkBlbW90aW9uL2Nzc1wiO1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuaW1wb3J0IGNsc3ggZnJvbSBcImNsc3hcIjtcbmltcG9ydCB7IEh2Qm94IH0gZnJvbSBcImNvbXBvbmVudHNcIjtcbmltcG9ydCB7IEh2QmFzZVByb3BzIH0gZnJvbSBcIi4uLy4uL3R5cGVzXCI7XG5pbXBvcnQgeyBIdkF0bW9zcGhlcmVDb2xvcktleXMsIEh2U2VtYW50aWNDb2xvcktleXMgfSBmcm9tIFwiLi4vLi4vdHlwZXMvdG9rZW5zXCI7XG5pbXBvcnQgeyBzdHlsZXMgfSBmcm9tIFwiLi9DYXJkLnN0eWxlc1wiO1xuaW1wb3J0IGNhcmRDbGFzc2VzLCB7IEh2Q2FyZENsYXNzZXMgfSBmcm9tIFwiLi9jYXJkQ2xhc3Nlc1wiO1xuXG5leHBvcnQgdHlwZSBIdkNhcmRQcm9wcyA9IEh2QmFzZVByb3BzICYge1xuICAvKiogVGhlIHJlbmRlcmFibGUgY29udGVudCBpbnNpZGUgdGhlIGljb24gc2xvdCBvZiB0aGUgaGVhZGVyLiAqL1xuICBpY29uPzogUmVhY3QuUmVhY3ROb2RlO1xuICAvKiogV2hldGhlciB0aGUgY2FyZCBpcyBzZWxlY3RhYmxlLiAqL1xuICBzZWxlY3RhYmxlPzogYm9vbGVhbjtcbiAgLyoqIFdoZXRoZXIgdGhlIGNhcmQgaXMgY3VycmVudGx5IHNlbGVjdGVkLiAqL1xuICBzZWxlY3RlZD86IGJvb2xlYW47XG4gIC8qKiBUaGUgYmFja2dyb3VuZCBjb2xvciBvZiB0aGUgY2FyZC4gKi9cbiAgYmdjb2xvcj86XG4gICAgfCBcInNlbWEwXCJcbiAgICB8IEh2U2VtYW50aWNDb2xvcktleXNcbiAgICB8IEh2QXRtb3NwaGVyZUNvbG9yS2V5c1xuICAgIHwgXCJ0cmFuc3BhcmVudFwiO1xuICAvKipcbiAgICogIFRoZSBib3JkZXIgY29sb3IgYXQgdGhlIHRvcCBvZiB0aGUgY2FyZC4gTXVzdCBiZSBvbmUgb2YgcGFsZXR0ZSBzZW1hbnRpYyBvciBhdG1vc3BoZXJlIGNvbG9ycy5cbiAgICogIFRvIHNldCBhbm90aGVyIGNvbG9yLCB0aGUgYm9yZGVyVG9wIHNob3VsZCBiZSBvdmVycmlkZS5cbiAgICovXG4gIHN0YXR1c0NvbG9yPzogXCJzZW1hMFwiIHwgSHZTZW1hbnRpY0NvbG9yS2V5cyB8IEh2QXRtb3NwaGVyZUNvbG9yS2V5cztcbiAgLyoqIEEgSnNzIE9iamVjdCB1c2VkIHRvIG92ZXJyaWRlIG9yIGV4dGVuZCB0aGUgc3R5bGVzIGFwcGxpZWQgdG8gdGhlIGNvbXBvbmVudC4gKi9cbiAgY2xhc3Nlcz86IEh2Q2FyZENsYXNzZXM7XG59O1xuXG4vKipcbiAqIEEgY2FyZCBpcyBhIGNvbnRhaW5lciBmb3IgYSBmZXcgc2hvcnQgYW5kIHJlbGF0ZWQgcGllY2VzIG9mIGNvbnRlbnQuXG4gKiBJdCByb3VnaGx5IHJlc2VtYmxlcyBhIHBsYXlpbmcgY2FyZCBpbiBzaXplIGFuZCBzaGFwZSBhbmQgaXMgaW50ZW5kZWQgYXMgYVxuICogbGlua2VkIHNob3J0IHJlcHJlc2VudGF0aW9uIG9mIGEgY29uY2VwdHVhbCB1bml0LiBGb3IgdGhhdCByZWFzb24sXG4gKiB0aGlzIHBhdHRlcm4gbXVzdCBiZSB1c2VkIGFzIGFuIGVudHJ5LXBvaW50IGZvciBmdXJ0aGVyIGluZm9ybWF0aW9uLlxuICovXG5leHBvcnQgY29uc3QgSHZDYXJkID0gKHtcbiAgY2xhc3NlcyxcbiAgY2xhc3NOYW1lLFxuICBjaGlsZHJlbixcbiAgaWNvbixcbiAgc2VsZWN0YWJsZSA9IGZhbHNlLFxuICBzZWxlY3RlZCA9IGZhbHNlLFxuICBzdGF0dXNDb2xvciA9IFwic2VtYTBcIixcbiAgYmdjb2xvcixcbiAgLi4ub3RoZXJzXG59OiBIdkNhcmRQcm9wcykgPT4ge1xuICByZXR1cm4gKFxuICAgIDxIdkJveFxuICAgICAgYXJpYS1zZWxlY3RlZD17c2VsZWN0YWJsZSA/IHNlbGVjdGVkIDogdW5kZWZpbmVkfVxuICAgICAgY2xhc3NOYW1lPXtjbHN4KFxuICAgICAgICBzdHlsZXMucm9vdCxcbiAgICAgICAgYmdjb2xvciAmJlxuICAgICAgICAgIGNzcyh7XG4gICAgICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9yc1tiZ2NvbG9yXSxcbiAgICAgICAgICB9KSxcbiAgICAgICAgXCJIdklzQ2FyZEdyaWRFbGVtZW50XCIsXG4gICAgICAgIGNhcmRDbGFzc2VzLnJvb3QsXG4gICAgICAgIGNsYXNzZXM/LnJvb3QsXG4gICAgICAgIGNsYXNzTmFtZSxcbiAgICAgICAgc2VsZWN0YWJsZSAmJlxuICAgICAgICAgIGNsc3goc3R5bGVzLnNlbGVjdGFibGUsIGNhcmRDbGFzc2VzLnNlbGVjdGFibGUsIGNsYXNzZXM/LnNlbGVjdGFibGUpLFxuICAgICAgICBzZWxlY3RlZCAmJlxuICAgICAgICAgIGNsc3goc3R5bGVzLnNlbGVjdGVkLCBjYXJkQ2xhc3Nlcy5zZWxlY3RlZCwgY2xhc3Nlcz8uc2VsZWN0ZWQpXG4gICAgICApfVxuICAgICAgey4uLm90aGVyc31cbiAgICA+XG4gICAgICA8ZGl2XG4gICAgICAgIGNsYXNzTmFtZT17Y2xzeChcbiAgICAgICAgICBzdHlsZXMuc2VtYW50aWNDb250YWluZXIsXG4gICAgICAgICAgY2FyZENsYXNzZXMuc2VtYW50aWNDb250YWluZXIsXG4gICAgICAgICAgY2xhc3Nlcz8uc2VtYW50aWNDb250YWluZXJcbiAgICAgICAgKX1cbiAgICAgID5cbiAgICAgICAgPGRpdlxuICAgICAgICAgIGNsYXNzTmFtZT17Y2xzeChcbiAgICAgICAgICAgIHN0eWxlcy5zZW1hbnRpY0JhcixcbiAgICAgICAgICAgIGNzcyh7XG4gICAgICAgICAgICAgIGhlaWdodDogc2VsZWN0ZWQgPyA0IDogMixcbiAgICAgICAgICAgICAgYmFja2dyb3VuZENvbG9yOlxuICAgICAgICAgICAgICAgIHN0YXR1c0NvbG9yID09PSBcInNlbWEwXCJcbiAgICAgICAgICAgICAgICAgID8gc2VsZWN0ZWRcbiAgICAgICAgICAgICAgICAgICAgPyB0aGVtZS5jb2xvcnMuYWNjZTFcbiAgICAgICAgICAgICAgICAgICAgOiB0aGVtZS5jb2xvcnMuYXRtbzRcbiAgICAgICAgICAgICAgICAgIDogdGhlbWUuY29sb3JzW3N0YXR1c0NvbG9yXSxcbiAgICAgICAgICAgIH0pLFxuICAgICAgICAgICAgY2FyZENsYXNzZXMuc2VtYW50aWNCYXIsXG4gICAgICAgICAgICBjbGFzc2VzPy5zZW1hbnRpY0JhclxuICAgICAgICAgICl9XG4gICAgICAgIC8+XG4gICAgICAgIDxkaXYgY2xhc3NOYW1lPXtjbHN4KHN0eWxlcy5pY29uLCBjYXJkQ2xhc3Nlcy5pY29uLCBjbGFzc2VzPy5pY29uKX0+XG4gICAgICAgICAge2ljb259XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgPC9IdkJveD5cbiAgKTtcbn07XG4iXX0= */"), "HvIsCardGridElement", cardClasses.root, classes == null ? void 0 : classes.root, className, selectable && clsx(styles.selectable, cardClasses.selectable, classes == null ? void 0 : classes.selectable), selected && clsx(styles.selected, cardClasses.selected, classes == null ? void 0 : classes.selected)), ...others, children: [
+    /* @__PURE__ */ jsxs("div", { className: clsx(styles.semanticContainer, cardClasses.semanticContainer, classes == null ? void 0 : classes.semanticContainer), children: [
+      /* @__PURE__ */ jsx("div", { className: clsx(styles.semanticBar, /* @__PURE__ */ css({
+        height: selected ? 4 : 2,
+        backgroundColor: statusColor === "sema0" ? selected ? theme.colors.acce1 : theme.colors.atmo4 : theme.colors[statusColor]
+      }, process.env.NODE_ENV === "production" ? "" : ";label:HvCard;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FyZC9DYXJkLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE4RVkiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9DYXJkL0NhcmQudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSBcIkBlbW90aW9uL2Nzc1wiO1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuaW1wb3J0IGNsc3ggZnJvbSBcImNsc3hcIjtcbmltcG9ydCB7IEh2Qm94IH0gZnJvbSBcImNvbXBvbmVudHNcIjtcbmltcG9ydCB7IEh2QmFzZVByb3BzIH0gZnJvbSBcIi4uLy4uL3R5cGVzXCI7XG5pbXBvcnQgeyBIdkF0bW9zcGhlcmVDb2xvcktleXMsIEh2U2VtYW50aWNDb2xvcktleXMgfSBmcm9tIFwiLi4vLi4vdHlwZXMvdG9rZW5zXCI7XG5pbXBvcnQgeyBzdHlsZXMgfSBmcm9tIFwiLi9DYXJkLnN0eWxlc1wiO1xuaW1wb3J0IGNhcmRDbGFzc2VzLCB7IEh2Q2FyZENsYXNzZXMgfSBmcm9tIFwiLi9jYXJkQ2xhc3Nlc1wiO1xuXG5leHBvcnQgdHlwZSBIdkNhcmRQcm9wcyA9IEh2QmFzZVByb3BzICYge1xuICAvKiogVGhlIHJlbmRlcmFibGUgY29udGVudCBpbnNpZGUgdGhlIGljb24gc2xvdCBvZiB0aGUgaGVhZGVyLiAqL1xuICBpY29uPzogUmVhY3QuUmVhY3ROb2RlO1xuICAvKiogV2hldGhlciB0aGUgY2FyZCBpcyBzZWxlY3RhYmxlLiAqL1xuICBzZWxlY3RhYmxlPzogYm9vbGVhbjtcbiAgLyoqIFdoZXRoZXIgdGhlIGNhcmQgaXMgY3VycmVudGx5IHNlbGVjdGVkLiAqL1xuICBzZWxlY3RlZD86IGJvb2xlYW47XG4gIC8qKiBUaGUgYmFja2dyb3VuZCBjb2xvciBvZiB0aGUgY2FyZC4gKi9cbiAgYmdjb2xvcj86XG4gICAgfCBcInNlbWEwXCJcbiAgICB8IEh2U2VtYW50aWNDb2xvcktleXNcbiAgICB8IEh2QXRtb3NwaGVyZUNvbG9yS2V5c1xuICAgIHwgXCJ0cmFuc3BhcmVudFwiO1xuICAvKipcbiAgICogIFRoZSBib3JkZXIgY29sb3IgYXQgdGhlIHRvcCBvZiB0aGUgY2FyZC4gTXVzdCBiZSBvbmUgb2YgcGFsZXR0ZSBzZW1hbnRpYyBvciBhdG1vc3BoZXJlIGNvbG9ycy5cbiAgICogIFRvIHNldCBhbm90aGVyIGNvbG9yLCB0aGUgYm9yZGVyVG9wIHNob3VsZCBiZSBvdmVycmlkZS5cbiAgICovXG4gIHN0YXR1c0NvbG9yPzogXCJzZW1hMFwiIHwgSHZTZW1hbnRpY0NvbG9yS2V5cyB8IEh2QXRtb3NwaGVyZUNvbG9yS2V5cztcbiAgLyoqIEEgSnNzIE9iamVjdCB1c2VkIHRvIG92ZXJyaWRlIG9yIGV4dGVuZCB0aGUgc3R5bGVzIGFwcGxpZWQgdG8gdGhlIGNvbXBvbmVudC4gKi9cbiAgY2xhc3Nlcz86IEh2Q2FyZENsYXNzZXM7XG59O1xuXG4vKipcbiAqIEEgY2FyZCBpcyBhIGNvbnRhaW5lciBmb3IgYSBmZXcgc2hvcnQgYW5kIHJlbGF0ZWQgcGllY2VzIG9mIGNvbnRlbnQuXG4gKiBJdCByb3VnaGx5IHJlc2VtYmxlcyBhIHBsYXlpbmcgY2FyZCBpbiBzaXplIGFuZCBzaGFwZSBhbmQgaXMgaW50ZW5kZWQgYXMgYVxuICogbGlua2VkIHNob3J0IHJlcHJlc2VudGF0aW9uIG9mIGEgY29uY2VwdHVhbCB1bml0LiBGb3IgdGhhdCByZWFzb24sXG4gKiB0aGlzIHBhdHRlcm4gbXVzdCBiZSB1c2VkIGFzIGFuIGVudHJ5LXBvaW50IGZvciBmdXJ0aGVyIGluZm9ybWF0aW9uLlxuICovXG5leHBvcnQgY29uc3QgSHZDYXJkID0gKHtcbiAgY2xhc3NlcyxcbiAgY2xhc3NOYW1lLFxuICBjaGlsZHJlbixcbiAgaWNvbixcbiAgc2VsZWN0YWJsZSA9IGZhbHNlLFxuICBzZWxlY3RlZCA9IGZhbHNlLFxuICBzdGF0dXNDb2xvciA9IFwic2VtYTBcIixcbiAgYmdjb2xvcixcbiAgLi4ub3RoZXJzXG59OiBIdkNhcmRQcm9wcykgPT4ge1xuICByZXR1cm4gKFxuICAgIDxIdkJveFxuICAgICAgYXJpYS1zZWxlY3RlZD17c2VsZWN0YWJsZSA/IHNlbGVjdGVkIDogdW5kZWZpbmVkfVxuICAgICAgY2xhc3NOYW1lPXtjbHN4KFxuICAgICAgICBzdHlsZXMucm9vdCxcbiAgICAgICAgYmdjb2xvciAmJlxuICAgICAgICAgIGNzcyh7XG4gICAgICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9yc1tiZ2NvbG9yXSxcbiAgICAgICAgICB9KSxcbiAgICAgICAgXCJIdklzQ2FyZEdyaWRFbGVtZW50XCIsXG4gICAgICAgIGNhcmRDbGFzc2VzLnJvb3QsXG4gICAgICAgIGNsYXNzZXM/LnJvb3QsXG4gICAgICAgIGNsYXNzTmFtZSxcbiAgICAgICAgc2VsZWN0YWJsZSAmJlxuICAgICAgICAgIGNsc3goc3R5bGVzLnNlbGVjdGFibGUsIGNhcmRDbGFzc2VzLnNlbGVjdGFibGUsIGNsYXNzZXM/LnNlbGVjdGFibGUpLFxuICAgICAgICBzZWxlY3RlZCAmJlxuICAgICAgICAgIGNsc3goc3R5bGVzLnNlbGVjdGVkLCBjYXJkQ2xhc3Nlcy5zZWxlY3RlZCwgY2xhc3Nlcz8uc2VsZWN0ZWQpXG4gICAgICApfVxuICAgICAgey4uLm90aGVyc31cbiAgICA+XG4gICAgICA8ZGl2XG4gICAgICAgIGNsYXNzTmFtZT17Y2xzeChcbiAgICAgICAgICBzdHlsZXMuc2VtYW50aWNDb250YWluZXIsXG4gICAgICAgICAgY2FyZENsYXNzZXMuc2VtYW50aWNDb250YWluZXIsXG4gICAgICAgICAgY2xhc3Nlcz8uc2VtYW50aWNDb250YWluZXJcbiAgICAgICAgKX1cbiAgICAgID5cbiAgICAgICAgPGRpdlxuICAgICAgICAgIGNsYXNzTmFtZT17Y2xzeChcbiAgICAgICAgICAgIHN0eWxlcy5zZW1hbnRpY0JhcixcbiAgICAgICAgICAgIGNzcyh7XG4gICAgICAgICAgICAgIGhlaWdodDogc2VsZWN0ZWQgPyA0IDogMixcbiAgICAgICAgICAgICAgYmFja2dyb3VuZENvbG9yOlxuICAgICAgICAgICAgICAgIHN0YXR1c0NvbG9yID09PSBcInNlbWEwXCJcbiAgICAgICAgICAgICAgICAgID8gc2VsZWN0ZWRcbiAgICAgICAgICAgICAgICAgICAgPyB0aGVtZS5jb2xvcnMuYWNjZTFcbiAgICAgICAgICAgICAgICAgICAgOiB0aGVtZS5jb2xvcnMuYXRtbzRcbiAgICAgICAgICAgICAgICAgIDogdGhlbWUuY29sb3JzW3N0YXR1c0NvbG9yXSxcbiAgICAgICAgICAgIH0pLFxuICAgICAgICAgICAgY2FyZENsYXNzZXMuc2VtYW50aWNCYXIsXG4gICAgICAgICAgICBjbGFzc2VzPy5zZW1hbnRpY0JhclxuICAgICAgICAgICl9XG4gICAgICAgIC8+XG4gICAgICAgIDxkaXYgY2xhc3NOYW1lPXtjbHN4KHN0eWxlcy5pY29uLCBjYXJkQ2xhc3Nlcy5pY29uLCBjbGFzc2VzPy5pY29uKX0+XG4gICAgICAgICAge2ljb259XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgPC9IdkJveD5cbiAgKTtcbn07XG4iXX0= */"), cardClasses.semanticBar, classes == null ? void 0 : classes.semanticBar) }),
+      /* @__PURE__ */ jsx("div", { className: clsx(styles.icon, cardClasses.icon, classes == null ? void 0 : classes.icon), children: icon })
+    ] }),
+    children
+  ] });
 };
 export {
   HvCard

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

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { HvBaseProps } from \"../../types\";\nimport { HvAtmosphereColorKeys, HvSemanticColorKeys } from \"../../types/tokens\";\nimport {\n  StyledRoot,\n  StyledContainer,\n  StyledBar,\n  StyledIcon,\n} from \"./Card.styles\";\nimport cardClasses, { HvCardClasses } from \"./cardClasses\";\n\nexport type HvCardProps = HvBaseProps & {\n  /** The renderable content inside the icon slot of the header. */\n  icon?: React.ReactNode;\n  /** Whether the card is selectable. */\n  selectable?: boolean;\n  /** Whether the card is currently selected. */\n  selected?: boolean;\n  /** The background color of the card. */\n  bgcolor?: \"sema0\" | HvSemanticColorKeys | HvAtmosphereColorKeys;\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 = \"atmo1\",\n  ...others\n}: HvCardProps) => {\n  return (\n    <StyledRoot\n      aria-selected={selectable ? selected : undefined}\n      className={clsx(\n        \"HvIsCardGridElement\",\n        cardClasses.root,\n        classes?.root,\n        className,\n        selectable && clsx(cardClasses.selectable, classes?.selectable),\n        selected && clsx(cardClasses.selected, classes?.selected)\n      )}\n      $selectable={selectable}\n      $selected={selected}\n      $bgcolor={bgcolor}\n      {...others}\n    >\n      <StyledContainer>\n        <StyledBar\n          className={clsx(cardClasses.semanticBar, classes?.semanticBar)}\n          $barColor={statusColor}\n        />\n        <StyledIcon>{icon}</StyledIcon>\n      </StyledContainer>\n      {children}\n    </StyledRoot>\n  );\n};\n"],"names":["HvCard","classes","className","children","icon","selectable","selected","statusColor","bgcolor","others","StyledRoot","undefined","clsx","cardClasses","root","$selectable","$selected","$bgcolor","_jsxs","StyledContainer","_jsx","StyledBar","semanticBar","$barColor","StyledIcon"],"mappings":";;;;AAmCO,MAAMA,SAASA,CAAC;AAAA,EACrBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,aAAa;AAAA,EACbC,WAAW;AAAA,EACXC,cAAc;AAAA,EACdC,UAAU;AAAA,KACPC;AACQ,MAAM;AACjB,8BACGC,YAAU;AAAA,IACT,iBAAeL,aAAaC,WAAWK;AAAAA,IACvCT,WAAWU,KACT,uBACAC,YAAYC,MACZb,mCAASa,MACTZ,WACAG,cAAcO,KAAKC,YAAYR,YAAYJ,mCAASI,UAAU,GAC9DC,YAAYM,KAAKC,YAAYP,UAAUL,mCAASK,QAAQ,CAAC;AAAA,IAE3DS,aAAaV;AAAAA,IACbW,WAAWV;AAAAA,IACXW,UAAUT;AAAAA,IAAQ,GACdC;AAAAA,IAAMN,UAAA,CAEVe,qBAACC,iBAAe;AAAA,MAAAhB,UAAA,CACdiB,oBAACC,WAAS;AAAA,QACRnB,WAAWU,KAAKC,YAAYS,aAAarB,mCAASqB,WAAW;AAAA,QAC7DC,WAAWhB;AAAAA,MAAAA,CACX,GACFa,oBAACI,YAAU;AAAA,QAAArB,UAAEC;AAAAA,MAAAA,CAAkB,CAAA;AAAA,IAAA,CAAA,GAEhCD,QAAQ;AAAA,EAAA,CACE;AAEjB;"}
+{"version":3,"file":"Card.js","sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import { css } from \"@emotion/css\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport clsx from \"clsx\";\nimport { HvBox } from \"components\";\nimport { HvBaseProps } from \"../../types\";\nimport { HvAtmosphereColorKeys, HvSemanticColorKeys } from \"../../types/tokens\";\nimport { styles } from \"./Card.styles\";\nimport cardClasses, { HvCardClasses } from \"./cardClasses\";\n\nexport type HvCardProps = HvBaseProps & {\n  /** The renderable content inside the icon slot of the header. */\n  icon?: React.ReactNode;\n  /** Whether the card is selectable. */\n  selectable?: boolean;\n  /** Whether the card is currently selected. */\n  selected?: boolean;\n  /** The background color of the card. */\n  bgcolor?:\n    | \"sema0\"\n    | HvSemanticColorKeys\n    | HvAtmosphereColorKeys\n    | \"transparent\";\n  /**\n   *  The border color at the top of the card. Must be one of palette semantic or atmosphere colors.\n   *  To set another color, the borderTop should be override.\n   */\n  statusColor?: \"sema0\" | HvSemanticColorKeys | HvAtmosphereColorKeys;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvCardClasses;\n};\n\n/**\n * A card is a container for a few short and related pieces of content.\n * It roughly resembles a playing card in size and shape and is intended as a\n * linked short representation of a conceptual unit. For that reason,\n * this pattern must be used as an entry-point for further information.\n */\nexport const HvCard = ({\n  classes,\n  className,\n  children,\n  icon,\n  selectable = false,\n  selected = false,\n  statusColor = \"sema0\",\n  bgcolor,\n  ...others\n}: HvCardProps) => {\n  return (\n    <HvBox\n      aria-selected={selectable ? selected : undefined}\n      className={clsx(\n        styles.root,\n        bgcolor &&\n          css({\n            backgroundColor: theme.colors[bgcolor],\n          }),\n        \"HvIsCardGridElement\",\n        cardClasses.root,\n        classes?.root,\n        className,\n        selectable &&\n          clsx(styles.selectable, cardClasses.selectable, classes?.selectable),\n        selected &&\n          clsx(styles.selected, cardClasses.selected, classes?.selected)\n      )}\n      {...others}\n    >\n      <div\n        className={clsx(\n          styles.semanticContainer,\n          cardClasses.semanticContainer,\n          classes?.semanticContainer\n        )}\n      >\n        <div\n          className={clsx(\n            styles.semanticBar,\n            css({\n              height: selected ? 4 : 2,\n              backgroundColor:\n                statusColor === \"sema0\"\n                  ? selected\n                    ? theme.colors.acce1\n                    : theme.colors.atmo4\n                  : theme.colors[statusColor],\n            }),\n            cardClasses.semanticBar,\n            classes?.semanticBar\n          )}\n        />\n        <div className={clsx(styles.icon, cardClasses.icon, classes?.icon)}>\n          {icon}\n        </div>\n      </div>\n      {children}\n    </HvBox>\n  );\n};\n"],"names":["HvCard","classes","className","children","icon","selectable","selected","statusColor","bgcolor","others","undefined","clsx","styles","root","backgroundColor","theme","colors","process","env","NODE_ENV","cardClasses","semanticContainer","semanticBar","height","acce1","atmo4"],"mappings":";;;;;;;AAqCO,MAAMA,SAASA,CAAC;AAAA,EACrBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,aAAa;AAAA,EACbC,WAAW;AAAA,EACXC,cAAc;AAAA,EACdC;AAAAA,KACGC;AACQ,MAAM;AAEf,SAAA,qBAAC,OACC,EAAA,iBAAeJ,aAAaC,WAAWI,QACvC,WAAWC,KACTC,OAAOC,MACPL,WACM,oBAAA;AAAA,IACFM,iBAAiBC,MAAMC,OAAOR;AAAAA,EAAAA,GAC/BS,QAAAC,IAAAC,aAAAF,eAAAA,KAAAA,kBAAAA,QAAAC,IAAAC,qgJACH,uBACAC,YAAYP,MACZZ,mCAASY,MACTX,WACAG,cACEM,KAAKC,OAAOP,YAAYe,YAAYf,YAAYJ,mCAASI,UAAU,GACrEC,YACEK,KAAKC,OAAON,UAAUc,YAAYd,UAAUL,mCAASK,QAAQ,CAAC,GAElE,GAAIG,QAEJ,UAAA;AAAA,IAAC,qBAAA,OAAA,EACC,WAAWE,KACTC,OAAOS,mBACPD,YAAYC,mBACZpB,mCAASoB,iBAAiB,GAG5B,UAAA;AAAA,MAAA,oBAAC,OACC,EAAA,WAAWV,KACTC,OAAOU,aACH,oBAAA;AAAA,QACFC,QAAQjB,WAAW,IAAI;AAAA,QACvBQ,iBACEP,gBAAgB,UACZD,WACES,MAAMC,OAAOQ,QACbT,MAAMC,OAAOS,QACfV,MAAMC,OAAOT;AAAAA,MAAAA,GACpBU,QAAAC,IAAAC,aAAA,eAAA,KAAA,kBAAAF,QAAAC,IAAAC,aAAC,eAAA,KAAA,i+IAAA,GACFC,YAAYE,aACZrB,mCAASqB,WAAW,GACpB;AAAA,MAEJ,oBAAC,OAAI,EAAA,WAAWX,KAAKC,OAAOR,MAAMgB,YAAYhB,MAAMH,mCAASG,IAAI,GAC9DA,UACH,KAAA,CAAA;AAAA,IAAA,GACF;AAAA,IACCD;AAAAA,EACH,EAAA,CAAA;AAEJ;"}

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

@@ -1,113 +1,56 @@
-import _styled from "@emotion/styled/base";
+import { css } from "@emotion/css";
 import { theme } from "@hitachivantara/uikit-styles";
-import { transientOptions } from "../../utils/transientOptions.js";
-import cardClasses from "./cardClasses.js";
-import { HvBox } from "../Box/Box.js";
 import { outlineStyles } from "../../utils/focusUtils.js";
 function _EMOTION_STRINGIFIED_CSS_ERROR__() {
   return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
 }
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-const getColor = (c) => theme.colors[c];
-const StyledRoot = /* @__PURE__ */ _styled(HvBox, process.env.NODE_ENV === "production" ? _extends({}, {
-  target: "e5h2ket3"
-}, transientOptions) : _extends({}, {
-  target: "e5h2ket3",
-  label: "StyledRoot"
-}, transientOptions))(({
-  $selectable,
-  $selected,
-  $bgcolor
-}) => ({
-  overflow: "visible",
-  position: "relative",
-  backgroundColor: getColor($bgcolor),
-  outline: theme.card.outline,
-  borderRadius: theme.card.borderRadius,
-  "&.focus-visible": {
-    ...outlineStyles
-  },
-  "&:focus": {
-    outline: "none"
-  },
-  ...$selectable && {
-    "&:hover": {
-      outline: `1px solid ${theme.card.hoverColor}`
+const styles = {
+  root: /* @__PURE__ */ css({
+    overflow: "visible",
+    position: "relative",
+    outline: theme.card.outline,
+    borderRadius: theme.card.borderRadius,
+    "&.focus-visible": {
+      ...outlineStyles
+    },
+    "&:focus": {
+      outline: "none"
     }
-  },
-  ...$selected && {
+  }, process.env.NODE_ENV === "production" ? "" : ";label:root;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FyZC9DYXJkLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS1EiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9DYXJkL0NhcmQuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gXCJAZW1vdGlvbi9jc3NcIjtcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcbmltcG9ydCB7IG91dGxpbmVTdHlsZXMgfSBmcm9tIFwidXRpbHNcIjtcblxuZXhwb3J0IGNvbnN0IHN0eWxlcyA9IHtcbiAgcm9vdDogY3NzKHtcbiAgICBvdmVyZmxvdzogXCJ2aXNpYmxlXCIsXG4gICAgcG9zaXRpb246IFwicmVsYXRpdmVcIixcbiAgICBvdXRsaW5lOiB0aGVtZS5jYXJkLm91dGxpbmUsXG4gICAgYm9yZGVyUmFkaXVzOiB0aGVtZS5jYXJkLmJvcmRlclJhZGl1cyxcbiAgICBcIiYuZm9jdXMtdmlzaWJsZVwiOiB7XG4gICAgICAuLi5vdXRsaW5lU3R5bGVzLFxuICAgIH0sXG4gICAgXCImOmZvY3VzXCI6IHtcbiAgICAgIG91dGxpbmU6IFwibm9uZVwiLFxuICAgIH0sXG4gIH0pLFxuICBzZWxlY3RlZDogY3NzKHtcbiAgICBvdXRsaW5lOiBgMXB4IHNvbGlkICR7dGhlbWUuY29sb3JzLmFjY2UxfWAsXG4gICAgXCImOmhvdmVyXCI6IHtcbiAgICAgIG91dGxpbmU6IGAxcHggc29saWQgJHt0aGVtZS5jb2xvcnMuYWNjZTF9YCxcbiAgICB9LFxuICAgIFwiJjpmb2N1c1wiOiB7XG4gICAgICBvdXRsaW5lOiBgMXB4IHNvbGlkICR7dGhlbWUuY29sb3JzLmFjY2UxfWAsXG4gICAgfSxcbiAgfSksXG4gIHNlbGVjdGFibGU6IGNzcyh7XG4gICAgXCImOmhvdmVyXCI6IHtcbiAgICAgIG91dGxpbmU6IGAxcHggc29saWQgJHt0aGVtZS5jYXJkLmhvdmVyQ29sb3J9YCxcbiAgICB9LFxuICB9KSxcbiAgc2VtYW50aWNDb250YWluZXI6IGNzcyh7XG4gICAgcG9zaXRpb246IFwicmVsYXRpdmVcIixcbiAgICBcIiYgPiAqXCI6IHtcbiAgICAgIHBvc2l0aW9uOiBcImFic29sdXRlXCIsXG4gICAgICB6SW5kZXg6IDEsXG4gICAgfSxcbiAgfSksXG4gIGljb246IGNzcyh7XG4gICAgdG9wOiBgY2FsYygke3RoZW1lLmNhcmQuaWNvbk1hcmdpbn0gKyAke3RoZW1lLnNwYWNlLnhzfSlgLFxuICAgIHJpZ2h0OiBgY2FsYygke3RoZW1lLmNhcmQuaWNvbk1hcmdpbn0gKyAke3RoZW1lLnNwYWNlLnhzfSlgLFxuICB9KSxcbiAgc2VtYW50aWNCYXI6IGNzcyh7XG4gICAgd2lkdGg6IFwiMTAwJVwiLFxuICAgIHRvcDogLTEsXG4gICAgcmlnaHQ6IDAsXG4gIH0pLFxufTtcbiJdfQ== */"),
+  selected: /* @__PURE__ */ css({
     outline: `1px solid ${theme.colors.acce1}`,
     "&:hover": {
       outline: `1px solid ${theme.colors.acce1}`
     },
     "&:focus": {
       outline: `1px solid ${theme.colors.acce1}`
-    },
-    [`& .${cardClasses.semanticBar}`]: {
-      height: 4
-    },
-    "& .sema0": {
-      backgroundColor: theme.colors.acce1
     }
-  }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FyZC9DYXJkLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBUzBCIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FyZC9DYXJkLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcbmltcG9ydCB7IEh2Qm94IH0gZnJvbSBcImNvbXBvbmVudHNcIjtcbmltcG9ydCB7IG91dGxpbmVTdHlsZXMgfSBmcm9tIFwidXRpbHNcIjtcbmltcG9ydCB7IHRyYW5zaWVudE9wdGlvbnMgfSBmcm9tIFwidXRpbHMvdHJhbnNpZW50T3B0aW9uc1wiO1xuaW1wb3J0IGNhcmRDbGFzc2VzIGZyb20gXCIuL2NhcmRDbGFzc2VzXCI7XG5cbmNvbnN0IGdldENvbG9yID0gKGM6IHN0cmluZyk6IHN0cmluZyA9PiB0aGVtZS5jb2xvcnNbY107XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRSb290ID0gc3R5bGVkKFxuICBIdkJveCxcbiAgdHJhbnNpZW50T3B0aW9uc1xuKSgoeyAkc2VsZWN0YWJsZSwgJHNlbGVjdGVkLCAkYmdjb2xvciB9KSA9PiAoe1xuICBvdmVyZmxvdzogXCJ2aXNpYmxlXCIsXG4gIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG4gIGJhY2tncm91bmRDb2xvcjogZ2V0Q29sb3IoJGJnY29sb3IpLFxuICBvdXRsaW5lOiB0aGVtZS5jYXJkLm91dGxpbmUsXG4gIGJvcmRlclJhZGl1czogdGhlbWUuY2FyZC5ib3JkZXJSYWRpdXMsXG4gIFwiJi5mb2N1cy12aXNpYmxlXCI6IHtcbiAgICAuLi5vdXRsaW5lU3R5bGVzLFxuICB9LFxuICBcIiY6Zm9jdXNcIjoge1xuICAgIG91dGxpbmU6IFwibm9uZVwiLFxuICB9LFxuICAuLi4oJHNlbGVjdGFibGUgJiYge1xuICAgIFwiJjpob3ZlclwiOiB7XG4gICAgICBvdXRsaW5lOiBgMXB4IHNvbGlkICR7dGhlbWUuY2FyZC5ob3ZlckNvbG9yfWAsXG4gICAgfSxcbiAgfSksXG4gIC4uLigkc2VsZWN0ZWQgJiYge1xuICAgIG91dGxpbmU6IGAxcHggc29saWQgJHt0aGVtZS5jb2xvcnMuYWNjZTF9YCxcbiAgICBcIiY6aG92ZXJcIjoge1xuICAgICAgb3V0bGluZTogYDFweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5hY2NlMX1gLFxuICAgIH0sXG4gICAgXCImOmZvY3VzXCI6IHtcbiAgICAgIG91dGxpbmU6IGAxcHggc29saWQgJHt0aGVtZS5jb2xvcnMuYWNjZTF9YCxcbiAgICB9LFxuICAgIFtgJiAuJHtjYXJkQ2xhc3Nlcy5zZW1hbnRpY0Jhcn1gXToge1xuICAgICAgaGVpZ2h0OiA0LFxuICAgIH0sXG4gICAgXCImIC5zZW1hMFwiOiB7XG4gICAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5hY2NlMSxcbiAgICB9LFxuICB9KSxcbn0pKTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENvbnRhaW5lciA9IHN0eWxlZChcImRpdlwiKSh7XG4gIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG4gIFwiJiA+ICpcIjoge1xuICAgIHBvc2l0aW9uOiBcImFic29sdXRlXCIsXG4gICAgekluZGV4OiAxLFxuICB9LFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRCYXIgPSBzdHlsZWQoXG4gIFwiZGl2XCIsXG4gIHRyYW5zaWVudE9wdGlvbnNcbikoKHsgJGJhckNvbG9yIH06IHsgJGJhckNvbG9yOiBzdHJpbmcgfSkgPT4gKHtcbiAgd2lkdGg6IFwiMTAwJVwiLFxuICBoZWlnaHQ6IDIsXG4gIHRvcDogLTEsXG4gIHJpZ2h0OiAwLFxuICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9yc1skYmFyQ29sb3JdLFxuICAuLi4oJGJhckNvbG9yID09PSBcInNlbWEwXCIgJiYge1xuICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLmF0bW80LFxuICB9KSxcbn0pKTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEljb24gPSBzdHlsZWQoXCJkaXZcIikoe1xuICB0b3A6IGBjYWxjKCR7dGhlbWUuY2FyZC5pY29uTWFyZ2lufSArICR7dGhlbWUuc3BhY2UueHN9KWAsXG4gIHJpZ2h0OiBgY2FsYygke3RoZW1lLmNhcmQuaWNvbk1hcmdpbn0gKyAke3RoZW1lLnNwYWNlLnhzfSlgLFxufSk7XG4iXX0= */");
-const StyledContainer = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "e5h2ket2"
-} : {
-  target: "e5h2ket2",
-  label: "StyledContainer"
-})(process.env.NODE_ENV === "production" ? {
-  name: "emolmc",
-  styles: "position:relative;& > *{position:absolute;z-index:1;}"
-} : {
-  name: "emolmc",
-  styles: "position:relative;& > *{position:absolute;z-index:1;}",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FyZC9DYXJkLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBOEMrQiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL0NhcmQvQ2FyZC5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5pbXBvcnQgeyBIdkJveCB9IGZyb20gXCJjb21wb25lbnRzXCI7XG5pbXBvcnQgeyBvdXRsaW5lU3R5bGVzIH0gZnJvbSBcInV0aWxzXCI7XG5pbXBvcnQgeyB0cmFuc2llbnRPcHRpb25zIH0gZnJvbSBcInV0aWxzL3RyYW5zaWVudE9wdGlvbnNcIjtcbmltcG9ydCBjYXJkQ2xhc3NlcyBmcm9tIFwiLi9jYXJkQ2xhc3Nlc1wiO1xuXG5jb25zdCBnZXRDb2xvciA9IChjOiBzdHJpbmcpOiBzdHJpbmcgPT4gdGhlbWUuY29sb3JzW2NdO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUm9vdCA9IHN0eWxlZChcbiAgSHZCb3gsXG4gIHRyYW5zaWVudE9wdGlvbnNcbikoKHsgJHNlbGVjdGFibGUsICRzZWxlY3RlZCwgJGJnY29sb3IgfSkgPT4gKHtcbiAgb3ZlcmZsb3c6IFwidmlzaWJsZVwiLFxuICBwb3NpdGlvbjogXCJyZWxhdGl2ZVwiLFxuICBiYWNrZ3JvdW5kQ29sb3I6IGdldENvbG9yKCRiZ2NvbG9yKSxcbiAgb3V0bGluZTogdGhlbWUuY2FyZC5vdXRsaW5lLFxuICBib3JkZXJSYWRpdXM6IHRoZW1lLmNhcmQuYm9yZGVyUmFkaXVzLFxuICBcIiYuZm9jdXMtdmlzaWJsZVwiOiB7XG4gICAgLi4ub3V0bGluZVN0eWxlcyxcbiAgfSxcbiAgXCImOmZvY3VzXCI6IHtcbiAgICBvdXRsaW5lOiBcIm5vbmVcIixcbiAgfSxcbiAgLi4uKCRzZWxlY3RhYmxlICYmIHtcbiAgICBcIiY6aG92ZXJcIjoge1xuICAgICAgb3V0bGluZTogYDFweCBzb2xpZCAke3RoZW1lLmNhcmQuaG92ZXJDb2xvcn1gLFxuICAgIH0sXG4gIH0pLFxuICAuLi4oJHNlbGVjdGVkICYmIHtcbiAgICBvdXRsaW5lOiBgMXB4IHNvbGlkICR7dGhlbWUuY29sb3JzLmFjY2UxfWAsXG4gICAgXCImOmhvdmVyXCI6IHtcbiAgICAgIG91dGxpbmU6IGAxcHggc29saWQgJHt0aGVtZS5jb2xvcnMuYWNjZTF9YCxcbiAgICB9LFxuICAgIFwiJjpmb2N1c1wiOiB7XG4gICAgICBvdXRsaW5lOiBgMXB4IHNvbGlkICR7dGhlbWUuY29sb3JzLmFjY2UxfWAsXG4gICAgfSxcbiAgICBbYCYgLiR7Y2FyZENsYXNzZXMuc2VtYW50aWNCYXJ9YF06IHtcbiAgICAgIGhlaWdodDogNCxcbiAgICB9LFxuICAgIFwiJiAuc2VtYTBcIjoge1xuICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuYWNjZTEsXG4gICAgfSxcbiAgfSksXG59KSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRDb250YWluZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBwb3NpdGlvbjogXCJyZWxhdGl2ZVwiLFxuICBcIiYgPiAqXCI6IHtcbiAgICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICAgIHpJbmRleDogMSxcbiAgfSxcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQmFyID0gc3R5bGVkKFxuICBcImRpdlwiLFxuICB0cmFuc2llbnRPcHRpb25zXG4pKCh7ICRiYXJDb2xvciB9OiB7ICRiYXJDb2xvcjogc3RyaW5nIH0pID0+ICh7XG4gIHdpZHRoOiBcIjEwMCVcIixcbiAgaGVpZ2h0OiAyLFxuICB0b3A6IC0xLFxuICByaWdodDogMCxcbiAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnNbJGJhckNvbG9yXSxcbiAgLi4uKCRiYXJDb2xvciA9PT0gXCJzZW1hMFwiICYmIHtcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5hdG1vNCxcbiAgfSksXG59KSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRJY29uID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgdG9wOiBgY2FsYygke3RoZW1lLmNhcmQuaWNvbk1hcmdpbn0gKyAke3RoZW1lLnNwYWNlLnhzfSlgLFxuICByaWdodDogYGNhbGMoJHt0aGVtZS5jYXJkLmljb25NYXJnaW59ICsgJHt0aGVtZS5zcGFjZS54c30pYCxcbn0pO1xuIl19 */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const StyledBar = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? _extends({}, {
-  target: "e5h2ket1"
-}, transientOptions) : _extends({}, {
-  target: "e5h2ket1",
-  label: "StyledBar"
-}, transientOptions))(({
-  $barColor
-}) => ({
-  width: "100%",
-  height: 2,
-  top: -1,
-  right: 0,
-  backgroundColor: theme.colors[$barColor],
-  ...$barColor === "sema0" && {
-    backgroundColor: theme.colors.atmo4
-  }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FyZC9DYXJkLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc0R5QiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL0NhcmQvQ2FyZC5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5pbXBvcnQgeyBIdkJveCB9IGZyb20gXCJjb21wb25lbnRzXCI7XG5pbXBvcnQgeyBvdXRsaW5lU3R5bGVzIH0gZnJvbSBcInV0aWxzXCI7XG5pbXBvcnQgeyB0cmFuc2llbnRPcHRpb25zIH0gZnJvbSBcInV0aWxzL3RyYW5zaWVudE9wdGlvbnNcIjtcbmltcG9ydCBjYXJkQ2xhc3NlcyBmcm9tIFwiLi9jYXJkQ2xhc3Nlc1wiO1xuXG5jb25zdCBnZXRDb2xvciA9IChjOiBzdHJpbmcpOiBzdHJpbmcgPT4gdGhlbWUuY29sb3JzW2NdO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUm9vdCA9IHN0eWxlZChcbiAgSHZCb3gsXG4gIHRyYW5zaWVudE9wdGlvbnNcbikoKHsgJHNlbGVjdGFibGUsICRzZWxlY3RlZCwgJGJnY29sb3IgfSkgPT4gKHtcbiAgb3ZlcmZsb3c6IFwidmlzaWJsZVwiLFxuICBwb3NpdGlvbjogXCJyZWxhdGl2ZVwiLFxuICBiYWNrZ3JvdW5kQ29sb3I6IGdldENvbG9yKCRiZ2NvbG9yKSxcbiAgb3V0bGluZTogdGhlbWUuY2FyZC5vdXRsaW5lLFxuICBib3JkZXJSYWRpdXM6IHRoZW1lLmNhcmQuYm9yZGVyUmFkaXVzLFxuICBcIiYuZm9jdXMtdmlzaWJsZVwiOiB7XG4gICAgLi4ub3V0bGluZVN0eWxlcyxcbiAgfSxcbiAgXCImOmZvY3VzXCI6IHtcbiAgICBvdXRsaW5lOiBcIm5vbmVcIixcbiAgfSxcbiAgLi4uKCRzZWxlY3RhYmxlICYmIHtcbiAgICBcIiY6aG92ZXJcIjoge1xuICAgICAgb3V0bGluZTogYDFweCBzb2xpZCAke3RoZW1lLmNhcmQuaG92ZXJDb2xvcn1gLFxuICAgIH0sXG4gIH0pLFxuICAuLi4oJHNlbGVjdGVkICYmIHtcbiAgICBvdXRsaW5lOiBgMXB4IHNvbGlkICR7dGhlbWUuY29sb3JzLmFjY2UxfWAsXG4gICAgXCImOmhvdmVyXCI6IHtcbiAgICAgIG91dGxpbmU6IGAxcHggc29saWQgJHt0aGVtZS5jb2xvcnMuYWNjZTF9YCxcbiAgICB9LFxuICAgIFwiJjpmb2N1c1wiOiB7XG4gICAgICBvdXRsaW5lOiBgMXB4IHNvbGlkICR7dGhlbWUuY29sb3JzLmFjY2UxfWAsXG4gICAgfSxcbiAgICBbYCYgLiR7Y2FyZENsYXNzZXMuc2VtYW50aWNCYXJ9YF06IHtcbiAgICAgIGhlaWdodDogNCxcbiAgICB9LFxuICAgIFwiJiAuc2VtYTBcIjoge1xuICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuYWNjZTEsXG4gICAgfSxcbiAgfSksXG59KSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRDb250YWluZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBwb3NpdGlvbjogXCJyZWxhdGl2ZVwiLFxuICBcIiYgPiAqXCI6IHtcbiAgICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICAgIHpJbmRleDogMSxcbiAgfSxcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQmFyID0gc3R5bGVkKFxuICBcImRpdlwiLFxuICB0cmFuc2llbnRPcHRpb25zXG4pKCh7ICRiYXJDb2xvciB9OiB7ICRiYXJDb2xvcjogc3RyaW5nIH0pID0+ICh7XG4gIHdpZHRoOiBcIjEwMCVcIixcbiAgaGVpZ2h0OiAyLFxuICB0b3A6IC0xLFxuICByaWdodDogMCxcbiAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnNbJGJhckNvbG9yXSxcbiAgLi4uKCRiYXJDb2xvciA9PT0gXCJzZW1hMFwiICYmIHtcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5hdG1vNCxcbiAgfSksXG59KSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRJY29uID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgdG9wOiBgY2FsYygke3RoZW1lLmNhcmQuaWNvbk1hcmdpbn0gKyAke3RoZW1lLnNwYWNlLnhzfSlgLFxuICByaWdodDogYGNhbGMoJHt0aGVtZS5jYXJkLmljb25NYXJnaW59ICsgJHt0aGVtZS5zcGFjZS54c30pYCxcbn0pO1xuIl19 */");
-const StyledIcon = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "e5h2ket0"
-} : {
-  target: "e5h2ket0",
-  label: "StyledIcon"
-})({
-  top: `calc(${theme.card.iconMargin} + ${theme.space.xs})`,
-  right: `calc(${theme.card.iconMargin} + ${theme.space.xs})`
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FyZC9DYXJkLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0UwQiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL0NhcmQvQ2FyZC5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5pbXBvcnQgeyBIdkJveCB9IGZyb20gXCJjb21wb25lbnRzXCI7XG5pbXBvcnQgeyBvdXRsaW5lU3R5bGVzIH0gZnJvbSBcInV0aWxzXCI7XG5pbXBvcnQgeyB0cmFuc2llbnRPcHRpb25zIH0gZnJvbSBcInV0aWxzL3RyYW5zaWVudE9wdGlvbnNcIjtcbmltcG9ydCBjYXJkQ2xhc3NlcyBmcm9tIFwiLi9jYXJkQ2xhc3Nlc1wiO1xuXG5jb25zdCBnZXRDb2xvciA9IChjOiBzdHJpbmcpOiBzdHJpbmcgPT4gdGhlbWUuY29sb3JzW2NdO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUm9vdCA9IHN0eWxlZChcbiAgSHZCb3gsXG4gIHRyYW5zaWVudE9wdGlvbnNcbikoKHsgJHNlbGVjdGFibGUsICRzZWxlY3RlZCwgJGJnY29sb3IgfSkgPT4gKHtcbiAgb3ZlcmZsb3c6IFwidmlzaWJsZVwiLFxuICBwb3NpdGlvbjogXCJyZWxhdGl2ZVwiLFxuICBiYWNrZ3JvdW5kQ29sb3I6IGdldENvbG9yKCRiZ2NvbG9yKSxcbiAgb3V0bGluZTogdGhlbWUuY2FyZC5vdXRsaW5lLFxuICBib3JkZXJSYWRpdXM6IHRoZW1lLmNhcmQuYm9yZGVyUmFkaXVzLFxuICBcIiYuZm9jdXMtdmlzaWJsZVwiOiB7XG4gICAgLi4ub3V0bGluZVN0eWxlcyxcbiAgfSxcbiAgXCImOmZvY3VzXCI6IHtcbiAgICBvdXRsaW5lOiBcIm5vbmVcIixcbiAgfSxcbiAgLi4uKCRzZWxlY3RhYmxlICYmIHtcbiAgICBcIiY6aG92ZXJcIjoge1xuICAgICAgb3V0bGluZTogYDFweCBzb2xpZCAke3RoZW1lLmNhcmQuaG92ZXJDb2xvcn1gLFxuICAgIH0sXG4gIH0pLFxuICAuLi4oJHNlbGVjdGVkICYmIHtcbiAgICBvdXRsaW5lOiBgMXB4IHNvbGlkICR7dGhlbWUuY29sb3JzLmFjY2UxfWAsXG4gICAgXCImOmhvdmVyXCI6IHtcbiAgICAgIG91dGxpbmU6IGAxcHggc29saWQgJHt0aGVtZS5jb2xvcnMuYWNjZTF9YCxcbiAgICB9LFxuICAgIFwiJjpmb2N1c1wiOiB7XG4gICAgICBvdXRsaW5lOiBgMXB4IHNvbGlkICR7dGhlbWUuY29sb3JzLmFjY2UxfWAsXG4gICAgfSxcbiAgICBbYCYgLiR7Y2FyZENsYXNzZXMuc2VtYW50aWNCYXJ9YF06IHtcbiAgICAgIGhlaWdodDogNCxcbiAgICB9LFxuICAgIFwiJiAuc2VtYTBcIjoge1xuICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuYWNjZTEsXG4gICAgfSxcbiAgfSksXG59KSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRDb250YWluZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBwb3NpdGlvbjogXCJyZWxhdGl2ZVwiLFxuICBcIiYgPiAqXCI6IHtcbiAgICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICAgIHpJbmRleDogMSxcbiAgfSxcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQmFyID0gc3R5bGVkKFxuICBcImRpdlwiLFxuICB0cmFuc2llbnRPcHRpb25zXG4pKCh7ICRiYXJDb2xvciB9OiB7ICRiYXJDb2xvcjogc3RyaW5nIH0pID0+ICh7XG4gIHdpZHRoOiBcIjEwMCVcIixcbiAgaGVpZ2h0OiAyLFxuICB0b3A6IC0xLFxuICByaWdodDogMCxcbiAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnNbJGJhckNvbG9yXSxcbiAgLi4uKCRiYXJDb2xvciA9PT0gXCJzZW1hMFwiICYmIHtcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5hdG1vNCxcbiAgfSksXG59KSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRJY29uID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgdG9wOiBgY2FsYygke3RoZW1lLmNhcmQuaWNvbk1hcmdpbn0gKyAke3RoZW1lLnNwYWNlLnhzfSlgLFxuICByaWdodDogYGNhbGMoJHt0aGVtZS5jYXJkLmljb25NYXJnaW59ICsgJHt0aGVtZS5zcGFjZS54c30pYCxcbn0pO1xuIl19 */");
+  }, process.env.NODE_ENV === "production" ? "" : ";label:selected;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FyZC9DYXJkLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUJZIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FyZC9DYXJkLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tIFwiQGVtb3Rpb24vY3NzXCI7XG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5pbXBvcnQgeyBvdXRsaW5lU3R5bGVzIH0gZnJvbSBcInV0aWxzXCI7XG5cbmV4cG9ydCBjb25zdCBzdHlsZXMgPSB7XG4gIHJvb3Q6IGNzcyh7XG4gICAgb3ZlcmZsb3c6IFwidmlzaWJsZVwiLFxuICAgIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG4gICAgb3V0bGluZTogdGhlbWUuY2FyZC5vdXRsaW5lLFxuICAgIGJvcmRlclJhZGl1czogdGhlbWUuY2FyZC5ib3JkZXJSYWRpdXMsXG4gICAgXCImLmZvY3VzLXZpc2libGVcIjoge1xuICAgICAgLi4ub3V0bGluZVN0eWxlcyxcbiAgICB9LFxuICAgIFwiJjpmb2N1c1wiOiB7XG4gICAgICBvdXRsaW5lOiBcIm5vbmVcIixcbiAgICB9LFxuICB9KSxcbiAgc2VsZWN0ZWQ6IGNzcyh7XG4gICAgb3V0bGluZTogYDFweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5hY2NlMX1gLFxuICAgIFwiJjpob3ZlclwiOiB7XG4gICAgICBvdXRsaW5lOiBgMXB4IHNvbGlkICR7dGhlbWUuY29sb3JzLmFjY2UxfWAsXG4gICAgfSxcbiAgICBcIiY6Zm9jdXNcIjoge1xuICAgICAgb3V0bGluZTogYDFweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5hY2NlMX1gLFxuICAgIH0sXG4gIH0pLFxuICBzZWxlY3RhYmxlOiBjc3Moe1xuICAgIFwiJjpob3ZlclwiOiB7XG4gICAgICBvdXRsaW5lOiBgMXB4IHNvbGlkICR7dGhlbWUuY2FyZC5ob3ZlckNvbG9yfWAsXG4gICAgfSxcbiAgfSksXG4gIHNlbWFudGljQ29udGFpbmVyOiBjc3Moe1xuICAgIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG4gICAgXCImID4gKlwiOiB7XG4gICAgICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICAgICAgekluZGV4OiAxLFxuICAgIH0sXG4gIH0pLFxuICBpY29uOiBjc3Moe1xuICAgIHRvcDogYGNhbGMoJHt0aGVtZS5jYXJkLmljb25NYXJnaW59ICsgJHt0aGVtZS5zcGFjZS54c30pYCxcbiAgICByaWdodDogYGNhbGMoJHt0aGVtZS5jYXJkLmljb25NYXJnaW59ICsgJHt0aGVtZS5zcGFjZS54c30pYCxcbiAgfSksXG4gIHNlbWFudGljQmFyOiBjc3Moe1xuICAgIHdpZHRoOiBcIjEwMCVcIixcbiAgICB0b3A6IC0xLFxuICAgIHJpZ2h0OiAwLFxuICB9KSxcbn07XG4iXX0= */"),
+  selectable: /* @__PURE__ */ css({
+    "&:hover": {
+      outline: `1px solid ${theme.card.hoverColor}`
+    }
+  }, process.env.NODE_ENV === "production" ? "" : ";label:selectable;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FyZC9DYXJkLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMEJjIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FyZC9DYXJkLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tIFwiQGVtb3Rpb24vY3NzXCI7XG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5pbXBvcnQgeyBvdXRsaW5lU3R5bGVzIH0gZnJvbSBcInV0aWxzXCI7XG5cbmV4cG9ydCBjb25zdCBzdHlsZXMgPSB7XG4gIHJvb3Q6IGNzcyh7XG4gICAgb3ZlcmZsb3c6IFwidmlzaWJsZVwiLFxuICAgIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG4gICAgb3V0bGluZTogdGhlbWUuY2FyZC5vdXRsaW5lLFxuICAgIGJvcmRlclJhZGl1czogdGhlbWUuY2FyZC5ib3JkZXJSYWRpdXMsXG4gICAgXCImLmZvY3VzLXZpc2libGVcIjoge1xuICAgICAgLi4ub3V0bGluZVN0eWxlcyxcbiAgICB9LFxuICAgIFwiJjpmb2N1c1wiOiB7XG4gICAgICBvdXRsaW5lOiBcIm5vbmVcIixcbiAgICB9LFxuICB9KSxcbiAgc2VsZWN0ZWQ6IGNzcyh7XG4gICAgb3V0bGluZTogYDFweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5hY2NlMX1gLFxuICAgIFwiJjpob3ZlclwiOiB7XG4gICAgICBvdXRsaW5lOiBgMXB4IHNvbGlkICR7dGhlbWUuY29sb3JzLmFjY2UxfWAsXG4gICAgfSxcbiAgICBcIiY6Zm9jdXNcIjoge1xuICAgICAgb3V0bGluZTogYDFweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5hY2NlMX1gLFxuICAgIH0sXG4gIH0pLFxuICBzZWxlY3RhYmxlOiBjc3Moe1xuICAgIFwiJjpob3ZlclwiOiB7XG4gICAgICBvdXRsaW5lOiBgMXB4IHNvbGlkICR7dGhlbWUuY2FyZC5ob3ZlckNvbG9yfWAsXG4gICAgfSxcbiAgfSksXG4gIHNlbWFudGljQ29udGFpbmVyOiBjc3Moe1xuICAgIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG4gICAgXCImID4gKlwiOiB7XG4gICAgICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICAgICAgekluZGV4OiAxLFxuICAgIH0sXG4gIH0pLFxuICBpY29uOiBjc3Moe1xuICAgIHRvcDogYGNhbGMoJHt0aGVtZS5jYXJkLmljb25NYXJnaW59ICsgJHt0aGVtZS5zcGFjZS54c30pYCxcbiAgICByaWdodDogYGNhbGMoJHt0aGVtZS5jYXJkLmljb25NYXJnaW59ICsgJHt0aGVtZS5zcGFjZS54c30pYCxcbiAgfSksXG4gIHNlbWFudGljQmFyOiBjc3Moe1xuICAgIHdpZHRoOiBcIjEwMCVcIixcbiAgICB0b3A6IC0xLFxuICAgIHJpZ2h0OiAwLFxuICB9KSxcbn07XG4iXX0= */"),
+  semanticContainer: /* @__PURE__ */ css(process.env.NODE_ENV === "production" ? {
+    name: "emolmc",
+    styles: "position:relative;& > *{position:absolute;z-index:1;}"
+  } : {
+    name: "1kcigpt-semanticContainer",
+    styles: "position:relative;& > *{position:absolute;z-index:1;};label:semanticContainer;",
+    map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FyZC9DYXJkLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBK0JxQiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL0NhcmQvQ2FyZC5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSBcIkBlbW90aW9uL2Nzc1wiO1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuaW1wb3J0IHsgb3V0bGluZVN0eWxlcyB9IGZyb20gXCJ1dGlsc1wiO1xuXG5leHBvcnQgY29uc3Qgc3R5bGVzID0ge1xuICByb290OiBjc3Moe1xuICAgIG92ZXJmbG93OiBcInZpc2libGVcIixcbiAgICBwb3NpdGlvbjogXCJyZWxhdGl2ZVwiLFxuICAgIG91dGxpbmU6IHRoZW1lLmNhcmQub3V0bGluZSxcbiAgICBib3JkZXJSYWRpdXM6IHRoZW1lLmNhcmQuYm9yZGVyUmFkaXVzLFxuICAgIFwiJi5mb2N1cy12aXNpYmxlXCI6IHtcbiAgICAgIC4uLm91dGxpbmVTdHlsZXMsXG4gICAgfSxcbiAgICBcIiY6Zm9jdXNcIjoge1xuICAgICAgb3V0bGluZTogXCJub25lXCIsXG4gICAgfSxcbiAgfSksXG4gIHNlbGVjdGVkOiBjc3Moe1xuICAgIG91dGxpbmU6IGAxcHggc29saWQgJHt0aGVtZS5jb2xvcnMuYWNjZTF9YCxcbiAgICBcIiY6aG92ZXJcIjoge1xuICAgICAgb3V0bGluZTogYDFweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5hY2NlMX1gLFxuICAgIH0sXG4gICAgXCImOmZvY3VzXCI6IHtcbiAgICAgIG91dGxpbmU6IGAxcHggc29saWQgJHt0aGVtZS5jb2xvcnMuYWNjZTF9YCxcbiAgICB9LFxuICB9KSxcbiAgc2VsZWN0YWJsZTogY3NzKHtcbiAgICBcIiY6aG92ZXJcIjoge1xuICAgICAgb3V0bGluZTogYDFweCBzb2xpZCAke3RoZW1lLmNhcmQuaG92ZXJDb2xvcn1gLFxuICAgIH0sXG4gIH0pLFxuICBzZW1hbnRpY0NvbnRhaW5lcjogY3NzKHtcbiAgICBwb3NpdGlvbjogXCJyZWxhdGl2ZVwiLFxuICAgIFwiJiA+ICpcIjoge1xuICAgICAgcG9zaXRpb246IFwiYWJzb2x1dGVcIixcbiAgICAgIHpJbmRleDogMSxcbiAgICB9LFxuICB9KSxcbiAgaWNvbjogY3NzKHtcbiAgICB0b3A6IGBjYWxjKCR7dGhlbWUuY2FyZC5pY29uTWFyZ2lufSArICR7dGhlbWUuc3BhY2UueHN9KWAsXG4gICAgcmlnaHQ6IGBjYWxjKCR7dGhlbWUuY2FyZC5pY29uTWFyZ2lufSArICR7dGhlbWUuc3BhY2UueHN9KWAsXG4gIH0pLFxuICBzZW1hbnRpY0JhcjogY3NzKHtcbiAgICB3aWR0aDogXCIxMDAlXCIsXG4gICAgdG9wOiAtMSxcbiAgICByaWdodDogMCxcbiAgfSksXG59O1xuIl19 */",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  }),
+  icon: /* @__PURE__ */ css({
+    top: `calc(${theme.card.iconMargin} + ${theme.space.xs})`,
+    right: `calc(${theme.card.iconMargin} + ${theme.space.xs})`
+  }, process.env.NODE_ENV === "production" ? "" : ";label:icon;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FyZC9DYXJkLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc0NRIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FyZC9DYXJkLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tIFwiQGVtb3Rpb24vY3NzXCI7XG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5pbXBvcnQgeyBvdXRsaW5lU3R5bGVzIH0gZnJvbSBcInV0aWxzXCI7XG5cbmV4cG9ydCBjb25zdCBzdHlsZXMgPSB7XG4gIHJvb3Q6IGNzcyh7XG4gICAgb3ZlcmZsb3c6IFwidmlzaWJsZVwiLFxuICAgIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG4gICAgb3V0bGluZTogdGhlbWUuY2FyZC5vdXRsaW5lLFxuICAgIGJvcmRlclJhZGl1czogdGhlbWUuY2FyZC5ib3JkZXJSYWRpdXMsXG4gICAgXCImLmZvY3VzLXZpc2libGVcIjoge1xuICAgICAgLi4ub3V0bGluZVN0eWxlcyxcbiAgICB9LFxuICAgIFwiJjpmb2N1c1wiOiB7XG4gICAgICBvdXRsaW5lOiBcIm5vbmVcIixcbiAgICB9LFxuICB9KSxcbiAgc2VsZWN0ZWQ6IGNzcyh7XG4gICAgb3V0bGluZTogYDFweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5hY2NlMX1gLFxuICAgIFwiJjpob3ZlclwiOiB7XG4gICAgICBvdXRsaW5lOiBgMXB4IHNvbGlkICR7dGhlbWUuY29sb3JzLmFjY2UxfWAsXG4gICAgfSxcbiAgICBcIiY6Zm9jdXNcIjoge1xuICAgICAgb3V0bGluZTogYDFweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5hY2NlMX1gLFxuICAgIH0sXG4gIH0pLFxuICBzZWxlY3RhYmxlOiBjc3Moe1xuICAgIFwiJjpob3ZlclwiOiB7XG4gICAgICBvdXRsaW5lOiBgMXB4IHNvbGlkICR7dGhlbWUuY2FyZC5ob3ZlckNvbG9yfWAsXG4gICAgfSxcbiAgfSksXG4gIHNlbWFudGljQ29udGFpbmVyOiBjc3Moe1xuICAgIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG4gICAgXCImID4gKlwiOiB7XG4gICAgICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICAgICAgekluZGV4OiAxLFxuICAgIH0sXG4gIH0pLFxuICBpY29uOiBjc3Moe1xuICAgIHRvcDogYGNhbGMoJHt0aGVtZS5jYXJkLmljb25NYXJnaW59ICsgJHt0aGVtZS5zcGFjZS54c30pYCxcbiAgICByaWdodDogYGNhbGMoJHt0aGVtZS5jYXJkLmljb25NYXJnaW59ICsgJHt0aGVtZS5zcGFjZS54c30pYCxcbiAgfSksXG4gIHNlbWFudGljQmFyOiBjc3Moe1xuICAgIHdpZHRoOiBcIjEwMCVcIixcbiAgICB0b3A6IC0xLFxuICAgIHJpZ2h0OiAwLFxuICB9KSxcbn07XG4iXX0= */"),
+  semanticBar: /* @__PURE__ */ css({
+    width: "100%",
+    top: -1,
+    right: 0
+  }, process.env.NODE_ENV === "production" ? "" : ";label:semanticBar;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FyZC9DYXJkLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMENlIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FyZC9DYXJkLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tIFwiQGVtb3Rpb24vY3NzXCI7XG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5pbXBvcnQgeyBvdXRsaW5lU3R5bGVzIH0gZnJvbSBcInV0aWxzXCI7XG5cbmV4cG9ydCBjb25zdCBzdHlsZXMgPSB7XG4gIHJvb3Q6IGNzcyh7XG4gICAgb3ZlcmZsb3c6IFwidmlzaWJsZVwiLFxuICAgIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG4gICAgb3V0bGluZTogdGhlbWUuY2FyZC5vdXRsaW5lLFxuICAgIGJvcmRlclJhZGl1czogdGhlbWUuY2FyZC5ib3JkZXJSYWRpdXMsXG4gICAgXCImLmZvY3VzLXZpc2libGVcIjoge1xuICAgICAgLi4ub3V0bGluZVN0eWxlcyxcbiAgICB9LFxuICAgIFwiJjpmb2N1c1wiOiB7XG4gICAgICBvdXRsaW5lOiBcIm5vbmVcIixcbiAgICB9LFxuICB9KSxcbiAgc2VsZWN0ZWQ6IGNzcyh7XG4gICAgb3V0bGluZTogYDFweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5hY2NlMX1gLFxuICAgIFwiJjpob3ZlclwiOiB7XG4gICAgICBvdXRsaW5lOiBgMXB4IHNvbGlkICR7dGhlbWUuY29sb3JzLmFjY2UxfWAsXG4gICAgfSxcbiAgICBcIiY6Zm9jdXNcIjoge1xuICAgICAgb3V0bGluZTogYDFweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5hY2NlMX1gLFxuICAgIH0sXG4gIH0pLFxuICBzZWxlY3RhYmxlOiBjc3Moe1xuICAgIFwiJjpob3ZlclwiOiB7XG4gICAgICBvdXRsaW5lOiBgMXB4IHNvbGlkICR7dGhlbWUuY2FyZC5ob3ZlckNvbG9yfWAsXG4gICAgfSxcbiAgfSksXG4gIHNlbWFudGljQ29udGFpbmVyOiBjc3Moe1xuICAgIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG4gICAgXCImID4gKlwiOiB7XG4gICAgICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICAgICAgekluZGV4OiAxLFxuICAgIH0sXG4gIH0pLFxuICBpY29uOiBjc3Moe1xuICAgIHRvcDogYGNhbGMoJHt0aGVtZS5jYXJkLmljb25NYXJnaW59ICsgJHt0aGVtZS5zcGFjZS54c30pYCxcbiAgICByaWdodDogYGNhbGMoJHt0aGVtZS5jYXJkLmljb25NYXJnaW59ICsgJHt0aGVtZS5zcGFjZS54c30pYCxcbiAgfSksXG4gIHNlbWFudGljQmFyOiBjc3Moe1xuICAgIHdpZHRoOiBcIjEwMCVcIixcbiAgICB0b3A6IC0xLFxuICAgIHJpZ2h0OiAwLFxuICB9KSxcbn07XG4iXX0= */")
+};
 export {
-  StyledBar,
-  StyledContainer,
-  StyledIcon,
-  StyledRoot
+  styles
 };
 //# sourceMappingURL=Card.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Card.styles.js","sources":["../../../../src/components/Card/Card.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { HvBox } from \"components\";\nimport { outlineStyles } from \"utils\";\nimport { transientOptions } from \"utils/transientOptions\";\nimport cardClasses from \"./cardClasses\";\n\nconst getColor = (c: string): string => theme.colors[c];\n\nexport const StyledRoot = styled(\n  HvBox,\n  transientOptions\n)(({ $selectable, $selected, $bgcolor }) => ({\n  overflow: \"visible\",\n  position: \"relative\",\n  backgroundColor: getColor($bgcolor),\n  outline: theme.card.outline,\n  borderRadius: theme.card.borderRadius,\n  \"&.focus-visible\": {\n    ...outlineStyles,\n  },\n  \"&:focus\": {\n    outline: \"none\",\n  },\n  ...($selectable && {\n    \"&:hover\": {\n      outline: `1px solid ${theme.card.hoverColor}`,\n    },\n  }),\n  ...($selected && {\n    outline: `1px solid ${theme.colors.acce1}`,\n    \"&:hover\": {\n      outline: `1px solid ${theme.colors.acce1}`,\n    },\n    \"&:focus\": {\n      outline: `1px solid ${theme.colors.acce1}`,\n    },\n    [`& .${cardClasses.semanticBar}`]: {\n      height: 4,\n    },\n    \"& .sema0\": {\n      backgroundColor: theme.colors.acce1,\n    },\n  }),\n}));\n\nexport const StyledContainer = styled(\"div\")({\n  position: \"relative\",\n  \"& > *\": {\n    position: \"absolute\",\n    zIndex: 1,\n  },\n});\n\nexport const StyledBar = styled(\n  \"div\",\n  transientOptions\n)(({ $barColor }: { $barColor: string }) => ({\n  width: \"100%\",\n  height: 2,\n  top: -1,\n  right: 0,\n  backgroundColor: theme.colors[$barColor],\n  ...($barColor === \"sema0\" && {\n    backgroundColor: theme.colors.atmo4,\n  }),\n}));\n\nexport const StyledIcon = styled(\"div\")({\n  top: `calc(${theme.card.iconMargin} + ${theme.space.xs})`,\n  right: `calc(${theme.card.iconMargin} + ${theme.space.xs})`,\n});\n"],"names":["getColor","c","theme","colors","StyledRoot","HvBox","process","env","NODE_ENV","_extends","target","transientOptions","label","$selectable","$selected","$bgcolor","overflow","position","backgroundColor","outline","card","borderRadius","outlineStyles","hoverColor","acce1","cardClasses","semanticBar","height","StyledContainer","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","StyledBar","$barColor","width","top","right","atmo4","StyledIcon","iconMargin","space","xs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAMA,WAAWA,CAACC,MAAsBC,MAAMC,OAAOF;AAExCG,MAAAA,qCACXC,OAAKC,QAAAC,IAAAC,4BAAAC,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,GACLC,gBAAgB,IAAAF,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,EAAAE,OAAA;AAAA,GAAhBD,gBAAgB,CACjB,EAAC,CAAC;AAAA,EAAEE;AAAAA,EAAaC;AAAAA,EAAWC;AAAS,OAAO;AAAA,EAC3CC,UAAU;AAAA,EACVC,UAAU;AAAA,EACVC,iBAAiBlB,SAASe,QAAQ;AAAA,EAClCI,SAASjB,MAAMkB,KAAKD;AAAAA,EACpBE,cAAcnB,MAAMkB,KAAKC;AAAAA,EACzB,mBAAmB;AAAA,IACjB,GAAGC;AAAAA,EACL;AAAA,EACA,WAAW;AAAA,IACTH,SAAS;AAAA,EACX;AAAA,EACA,GAAIN,eAAe;AAAA,IACjB,WAAW;AAAA,MACTM,SAAU,aAAYjB,MAAMkB,KAAKG;AAAAA,IACnC;AAAA,EACF;AAAA,EACA,GAAIT,aAAa;AAAA,IACfK,SAAU,aAAYjB,MAAMC,OAAOqB;AAAAA,IACnC,WAAW;AAAA,MACTL,SAAU,aAAYjB,MAAMC,OAAOqB;AAAAA,IACrC;AAAA,IACA,WAAW;AAAA,MACTL,SAAU,aAAYjB,MAAMC,OAAOqB;AAAAA,IACrC;AAAA,IACA,CAAE,MAAKC,YAAYC,gBAAgB;AAAA,MACjCC,QAAQ;AAAA,IACV;AAAA,IACA,YAAY;AAAA,MACVT,iBAAiBhB,MAAMC,OAAOqB;AAAAA,IAChC;AAAA,EACF;AACF,IAAElB,QAAAC,IAAAC,aAAC,eAAA,KAAA,y3FAAA;AAEI,MAAMoB,kBAAyB,wBAAA,OAAKtB,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAE,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAE,OAAA;AAAA,CAAA,EAACN,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAqB,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAM1C;AAEWC,MAAAA,oCACX,OAAK5B,QAAAC,IAAAC,4BAAAC,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,GACLC,gBAAgB,IAAAF,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,EAAAE,OAAA;AAAA,GAAhBD,gBAAgB,CACjB,EAAC,CAAC;AAAA,EAAEwB;AAAiC,OAAO;AAAA,EAC3CC,OAAO;AAAA,EACPT,QAAQ;AAAA,EACRU,KAAK;AAAA,EACLC,OAAO;AAAA,EACPpB,iBAAiBhB,MAAMC,OAAOgC;AAAAA,EAC9B,GAAIA,cAAc,WAAW;AAAA,IAC3BjB,iBAAiBhB,MAAMC,OAAOoC;AAAAA,EAChC;AACF,IAAEjC,QAAAC,IAAAC,aAAC,eAAA,KAAA,y3FAAA;AAEI,MAAMgC,aAAoB,wBAAA,OAAKlC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAE,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAE,OAAA;AAAA,CAAA,EAAE;AAAA,EACtCyB,KAAM,QAAOnC,MAAMkB,KAAKqB,gBAAgBvC,MAAMwC,MAAMC;AAAAA,EACpDL,OAAQ,QAAOpC,MAAMkB,KAAKqB,gBAAgBvC,MAAMwC,MAAMC;AACxD,GAACrC,QAAAC,IAAAC,aAAC,eAAA,KAAA,y3FAAA;"}
+{"version":3,"file":"Card.styles.js","sources":["../../../../src/components/Card/Card.styles.tsx"],"sourcesContent":["import { css } from \"@emotion/css\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { outlineStyles } from \"utils\";\n\nexport const styles = {\n  root: css({\n    overflow: \"visible\",\n    position: \"relative\",\n    outline: theme.card.outline,\n    borderRadius: theme.card.borderRadius,\n    \"&.focus-visible\": {\n      ...outlineStyles,\n    },\n    \"&:focus\": {\n      outline: \"none\",\n    },\n  }),\n  selected: css({\n    outline: `1px solid ${theme.colors.acce1}`,\n    \"&:hover\": {\n      outline: `1px solid ${theme.colors.acce1}`,\n    },\n    \"&:focus\": {\n      outline: `1px solid ${theme.colors.acce1}`,\n    },\n  }),\n  selectable: css({\n    \"&:hover\": {\n      outline: `1px solid ${theme.card.hoverColor}`,\n    },\n  }),\n  semanticContainer: css({\n    position: \"relative\",\n    \"& > *\": {\n      position: \"absolute\",\n      zIndex: 1,\n    },\n  }),\n  icon: css({\n    top: `calc(${theme.card.iconMargin} + ${theme.space.xs})`,\n    right: `calc(${theme.card.iconMargin} + ${theme.space.xs})`,\n  }),\n  semanticBar: css({\n    width: \"100%\",\n    top: -1,\n    right: 0,\n  }),\n};\n"],"names":["styles","root","overflow","position","outline","theme","card","borderRadius","outlineStyles","process","env","NODE_ENV","selected","colors","acce1","selectable","hoverColor","semanticContainer","css","name","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","icon","top","iconMargin","space","xs","right","semanticBar","width"],"mappings":";;;;;;AAIO,MAAMA,SAAS;AAAA,EACpBC,MAAU,oBAAA;AAAA,IACRC,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,EACDK,GAAAA,QAAAC,IAAAC,aAAAF,eAAAA,KAAAA,gBAAAA,QAAAC,IAAAC,aAAC,eAAA,KAAA,q8DAAA;AAAA,EACFC,UAAc,oBAAA;AAAA,IACZR,SAAU,aAAYC,MAAMQ,OAAOC;AAAAA,IACnC,WAAW;AAAA,MACTV,SAAU,aAAYC,MAAMQ,OAAOC;AAAAA,IACrC;AAAA,IACA,WAAW;AAAA,MACTV,SAAU,aAAYC,MAAMQ,OAAOC;AAAAA,IACrC;AAAA,EACDL,GAAAA,QAAAC,IAAAC,aAAAF,eAAAA,KAAAA,oBAAAA,QAAAC,IAAAC,aAAC,eAAA,KAAA,q8DAAA;AAAA,EACFI,YAAgB,oBAAA;AAAA,IACd,WAAW;AAAA,MACTX,SAAU,aAAYC,MAAMC,KAAKU;AAAAA,IACnC;AAAA,EACDP,GAAAA,QAAAC,IAAAC,aAAAF,eAAAA,KAAAA,sBAAAA,QAAAC,IAAAC,aAAC,eAAA,KAAA,q8DAAA;AAAA,EACFM,mBAAmBC,oBAAGT,QAAAC,IAAAC,aAAA,eAAA;AAAA,IAAAQ,MAAA;AAAA,IAAAnB,QAAA;AAAA,EAAA,IAAA;AAAA,IAAAmB,MAAA;AAAA,IAAAnB,QAAA;AAAA,IAAAoB,KAAA;AAAA,IAAAC,UAAAC;AAAAA,EAAAA,CAMpB;AAAA,EACFC,MAAU,oBAAA;AAAA,IACRC,KAAM,QAAOnB,MAAMC,KAAKmB,gBAAgBpB,MAAMqB,MAAMC;AAAAA,IACpDC,OAAQ,QAAOvB,MAAMC,KAAKmB,gBAAgBpB,MAAMqB,MAAMC;AAAAA,EACvDlB,GAAAA,QAAAC,IAAAC,aAAAF,eAAAA,KAAAA,gBAAAA,QAAAC,IAAAC,aAAC,eAAA,KAAA,q8DAAA;AAAA,EACFkB,aAAiB,oBAAA;AAAA,IACfC,OAAO;AAAA,IACPN,KAAK;AAAA,IACLI,OAAO;AAAA,EACRnB,GAAAA,QAAAC,IAAAC,aAAA,eAAA,KAAA,uBAAAF,QAAAC,IAAAC,aAAA,eAAA,KAAA,q8DAAA;AACH;"}

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

@@ -1,7 +1,8 @@
+import { jsx } from "@emotion/react/jsx-runtime";
 import clsx from "clsx";
-import { StyledContent } from "./Content.styles.js";
+import { styles } from "./Content.styles.js";
+import MuiCardContent from "@mui/material/CardContent";
 import cardContentClasses from "./contentClasses.js";
-import { jsx } from "@emotion/react/jsx-runtime";
 const HvContent = ({
   id,
   classes,
@@ -10,13 +11,7 @@ const HvContent = ({
   onClick,
   ...others
 }) => {
-  return /* @__PURE__ */ jsx(StyledContent, {
-    id,
-    className: clsx(classes == null ? void 0 : classes.content, cardContentClasses.content, className),
-    onClick,
-    ...others,
-    children
-  });
+  return /* @__PURE__ */ jsx(MuiCardContent, { id, className: clsx(styles.content, classes == null ? void 0 : classes.content, cardContentClasses.content, className), onClick, ...others, children });
 };
 export {
   HvContent

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

@@ -1 +1 @@
-{"version":3,"file":"Content.js","sources":["../../../../../src/components/Card/Content/Content.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { HvBaseProps } from \"../../../types\";\nimport { StyledContent } from \"./Content.styles\";\nimport { CardContentProps as MuiCardContentProps } from \"@mui/material/CardContent\";\nimport cardContentClasses, { HvCardContentClasses } from \"./contentClasses\";\n\nexport type HvContentProps = MuiCardContentProps &\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 HvContent = ({\n  id,\n  classes,\n  className,\n  children,\n  onClick,\n  ...others\n}: HvContentProps) => {\n  return (\n    <StyledContent\n      id={id}\n      className={clsx(classes?.content, cardContentClasses.content, className)}\n      onClick={onClick}\n      {...others}\n    >\n      {children}\n    </StyledContent>\n  );\n};\n"],"names":["HvContent","id","classes","className","children","onClick","others","StyledContent","clsx","content","cardContentClasses"],"mappings":";;;;AAgBO,MAAMA,YAAYA,CAAC;AAAA,EACxBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,KACGC;AACW,MAAM;AACpB,6BACGC,eAAa;AAAA,IACZN;AAAAA,IACAE,WAAWK,KAAKN,mCAASO,SAASC,mBAAmBD,SAASN,SAAS;AAAA,IACvEE;AAAAA,IAAiB,GACbC;AAAAA,IAAMF;AAAAA,EAAAA,CAGI;AAEpB;"}
+{"version":3,"file":"Content.js","sources":["../../../../../src/components/Card/Content/Content.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { HvBaseProps } from \"../../../types\";\nimport { styles } from \"./Content.styles\";\nimport MuiCardContent, {\n  CardContentProps as MuiCardContentProps,\n} from \"@mui/material/CardContent\";\nimport cardContentClasses, { HvCardContentClasses } from \"./contentClasses\";\n\nexport type HvContentProps = 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 HvContent = ({\n  id,\n  classes,\n  className,\n  children,\n  onClick,\n  ...others\n}: HvContentProps) => {\n  return (\n    <MuiCardContent\n      id={id}\n      className={clsx(\n        styles.content,\n        classes?.content,\n        cardContentClasses.content,\n        className\n      )}\n      onClick={onClick}\n      {...others}\n    >\n      {children}\n    </MuiCardContent>\n  );\n};\n"],"names":["HvContent","id","classes","className","children","onClick","others","clsx","styles","content","cardContentClasses"],"mappings":";;;;;AAkBO,MAAMA,YAAYA,CAAC;AAAA,EACxBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,KACGC;AACW,MAAM;AACpB,6BACG,gBACC,EAAA,IACA,WAAWC,KACTC,OAAOC,SACPP,mCAASO,SACTC,mBAAmBD,SACnBN,SAAS,GAEX,SACA,GAAIG,QAEHF,SACH,CAAA;AAEJ;"}

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

@@ -1,18 +1,14 @@
-import _styled from "@emotion/styled/base";
+import { css } from "@emotion/css";
 import { theme } from "@hitachivantara/uikit-styles";
-import CardContent from "@mui/material/CardContent";
-const StyledContent = /* @__PURE__ */ _styled(CardContent, process.env.NODE_ENV === "production" ? {
-  target: "e12hctsi0"
-} : {
-  target: "e12hctsi0",
-  label: "StyledContent"
-})({
-  padding: `0 ${theme.space.sm} 15px ${theme.space.sm}`,
-  "&:last-child": {
-    paddingBottom: theme.space.sm
-  }
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FyZC9Db250ZW50L0NvbnRlbnQuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFJNkIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9DYXJkL0NvbnRlbnQvQ29udGVudC5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5pbXBvcnQgQ2FyZENvbnRlbnQgZnJvbSBcIkBtdWkvbWF0ZXJpYWwvQ2FyZENvbnRlbnRcIjtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENvbnRlbnQgPSBzdHlsZWQoQ2FyZENvbnRlbnQpKHtcbiAgcGFkZGluZzogYDAgJHt0aGVtZS5zcGFjZS5zbX0gMTVweCAke3RoZW1lLnNwYWNlLnNtfWAsXG4gIFwiJjpsYXN0LWNoaWxkXCI6IHtcbiAgICBwYWRkaW5nQm90dG9tOiB0aGVtZS5zcGFjZS5zbSxcbiAgfSxcbn0pO1xuIl19 */");
+const styles = {
+  content: /* @__PURE__ */ css({
+    padding: `0 ${theme.space.sm} 15px ${theme.space.sm}`,
+    "&:last-child": {
+      paddingBottom: theme.space.sm
+    }
+  }, process.env.NODE_ENV === "production" ? "" : ";label:content;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQ2FyZC9Db250ZW50L0NvbnRlbnQuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFJVyIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL0NhcmQvQ29udGVudC9Db250ZW50LnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tIFwiQGVtb3Rpb24vY3NzXCI7XG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5cbmV4cG9ydCBjb25zdCBzdHlsZXMgPSB7XG4gIGNvbnRlbnQ6IGNzcyh7XG4gICAgcGFkZGluZzogYDAgJHt0aGVtZS5zcGFjZS5zbX0gMTVweCAke3RoZW1lLnNwYWNlLnNtfWAsXG4gICAgXCImOmxhc3QtY2hpbGRcIjoge1xuICAgICAgcGFkZGluZ0JvdHRvbTogdGhlbWUuc3BhY2Uuc20sXG4gICAgfSxcbiAgfSksXG59O1xuIl19 */")
+};
 export {
-  StyledContent
+  styles
 };
 //# sourceMappingURL=Content.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Content.styles.js","sources":["../../../../../src/components/Card/Content/Content.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport CardContent from \"@mui/material/CardContent\";\n\nexport const StyledContent = styled(CardContent)({\n  padding: `0 ${theme.space.sm} 15px ${theme.space.sm}`,\n  \"&:last-child\": {\n    paddingBottom: theme.space.sm,\n  },\n});\n"],"names":["StyledContent","CardContent","process","env","NODE_ENV","target","label","padding","theme","space","sm","paddingBottom"],"mappings":";;;AAIO,MAAMA,gBAAuBC,wBAAAA,aAAWC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EAC/CC,SAAU,KAAIC,MAAMC,MAAMC,WAAWF,MAAMC,MAAMC;AAAAA,EACjD,gBAAgB;AAAA,IACdC,eAAeH,MAAMC,MAAMC;AAAAA,EAC7B;AACF,GAACR,QAAAC,IAAAC,aAAC,eAAA,KAAA,65BAAA;"}
+{"version":3,"file":"Content.styles.js","sources":["../../../../../src/components/Card/Content/Content.styles.tsx"],"sourcesContent":["import { css } from \"@emotion/css\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const styles = {\n  content: css({\n    padding: `0 ${theme.space.sm} 15px ${theme.space.sm}`,\n    \"&:last-child\": {\n      paddingBottom: theme.space.sm,\n    },\n  }),\n};\n"],"names":["styles","content","padding","theme","space","sm","paddingBottom","process","env","NODE_ENV"],"mappings":";;AAGO,MAAMA,SAAS;AAAA,EACpBC,SAAa,oBAAA;AAAA,IACXC,SAAU,KAAIC,MAAMC,MAAMC,WAAWF,MAAMC,MAAMC;AAAAA,IACjD,gBAAgB;AAAA,MACdC,eAAeH,MAAMC,MAAMC;AAAAA,IAC7B;AAAA,EACDE,GAAAA,QAAAC,IAAAC,aAAA,eAAA,KAAA,mBAAAF,QAAAC,IAAAC,aAAA,eAAA,KAAA,q1BAAA;AACH;"}