@hitachivantara/uikit-react-core 5.28.1 → 5.29.0

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

@@ -1 +1 @@
-{"version":3,"file":"Slider.styles.js","sources":["../../../../src/components/Slider/Slider.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { CSSProperties } from \"react\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nimport base from \"./base\";\n\nconst dot: CSSProperties = {\n  position: \"absolute\",\n  bottom: \"-1px\",\n  marginLeft: \"0px\",\n  width: \"1px\",\n  height: \"4px\",\n  border: \"none\",\n  borderRadius: \"0%\",\n  backgroundColor: theme.colors.atmo4,\n  cursor: \"pointer\",\n  verticalAlign: \"middle\",\n  zIndex: \"-3\",\n};\n\nconst dragSquare: CSSProperties = {\n  cursor: \"grab\",\n  width: \"calc(100% - 40px)\",\n  left: \"20px\",\n  height: \"27px\",\n  position: \"absolute\",\n  top: \"-12px\",\n  content: \"''\",\n  background: \"transparent\",\n  borderTop: `12px solid ${theme.slider.dragBarColor}`,\n  borderBottom: `12px solid ${theme.slider.dragBarColor}`,\n  zIndex: \"-2\",\n};\n\nconst ring: CSSProperties = {\n  width: \"32px\",\n  height: \"32px\",\n  borderRadius: \"50%\",\n  border: `9px solid ${theme.slider.ringColor}`,\n  opacity: theme.slider.ringOpacity,\n  content: \"''\",\n  position: \"absolute\",\n  top: \"-10px\",\n  left: \"-10px\",\n};\n\nconst border: CSSProperties = {\n  width: \"20px\",\n  height: \"20px\",\n  borderRadius: \"50%\",\n  border: `2px solid ${theme.colors.atmo1}`,\n  content: \"''\",\n  position: \"absolute\",\n  top: \"-4px\",\n  left: \"-4px\",\n};\n\nexport const sliderStyles = {\n  mark: {\n    ...theme.typography.caption1,\n    fontFamily: theme.fontFamily.body,\n    top: \"-2px\",\n    zIndex: -1,\n  },\n  disabledMark: {\n    ...theme.typography.caption1,\n    fontFamily: theme.fontFamily.body,\n    color: `${theme.colors.secondary_60}`,\n    cursor: \"not-allowed\",\n    top: \"-2px\",\n  },\n  dot: {\n    ...dot,\n  },\n  dotDisabled: {\n    ...dot,\n    cursor: \"not-allowed\",\n  },\n  knobHidden: { display: \"none\" },\n  knobHiddenLast: {\n    borderColor: \"transparent\",\n    height: \"3px\",\n    width: \"2px\",\n    marginLeft: \"-1px\",\n    border: \"none\",\n    borderRadius: \"0\",\n    marginTop: \"0px\",\n    left: \"100%\",\n    touchAction: \"none\",\n    cursor: \"default\",\n  },\n  knobInner: {\n    borderColor: \"transparent\",\n    boxShadow: \"none\",\n    backgroundColor: theme.colors.secondary,\n    width: \"16px\",\n    height: \"16px\",\n  },\n  knobOuter: {\n    position: \"relative\",\n    borderColor: \"transparent\",\n    borderRadius: \"50%\",\n    boxShadow: \"none\",\n    backgroundColor: theme.colors.atmo4,\n    width: \"32px\",\n    height: \"32px\",\n    top: \"-80%\",\n    left: \"-80%\",\n    zIndex: \"-1\",\n  },\n  track: {\n    backgroundColor: theme.colors.secondary,\n    height: \"3px\",\n    zIndex: \"-1\",\n    marginTop: \"-1px\",\n  },\n  rail: { backgroundColor: theme.colors.atmo4, height: \"1px\", zIndex: \"-3\" },\n} satisfies Record<string, CSSProperties>;\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSlider\", {\n  sliderBase: { ...base },\n  rootDisabled: {\n    cursor: \"not-allowed\",\n    \"&& .rc-slider-disabled\": {\n      background: \"transparent\",\n    },\n  },\n  sliderContainer: { marginBottom: \"18px\", padding: \"0 23px\" },\n  error: { padding: \"0 8px\" },\n  trackDragging: {\n    cursor: \"grabbing\",\n\n    \"&& .rc-slider-track\": {\n      \"&::before\": {\n        ...dragSquare,\n        cursor: \"grabbing\",\n      },\n    },\n  },\n  trackStandBy: {\n    \"&& .rc-slider-track\": {\n      \"&:hover\": {\n        \"&::before\": {\n          ...dragSquare,\n        },\n      },\n    },\n  },\n  sliderRoot: { zIndex: 0 },\n  rootRange: {},\n  handleContainer: {\n    \"&& .rc-slider-handle\": {\n      cursor: \"pointer\",\n      marginTop: \"-8px\",\n      opacity: 1,\n      \"&:active\": {\n        cursor: \"grab\",\n        \"&::before\": {\n          ...ring,\n        },\n        \"&::after\": {\n          ...border,\n        },\n      },\n      \"&:hover\": {\n        \"&::before\": {\n          ...ring,\n        },\n        \"&::after\": {\n          ...border,\n        },\n      },\n\n      // Note about the usage of `!important below`: the way the rc-slider allows us to\n      // style the knobs is through inline styles. This means that the `box-shadow`, which\n      // is an inline style and is set to `none` to prevent the default rc-slider style to\n      // show, can't be overridden for the focus scenario unless we use the `!important` flag.\n      \"&:focus-visible\": {\n        ...outlineStyles,\n        boxShadow: \"0 0 0 3px #52A8EC, 0 0 0 7px rgba(29,155,209,.3)!important\",\n        \"&::after\": {\n          ...border,\n        },\n      },\n    },\n  },\n  handle: {},\n  handleContainerDisabled: {\n    \"&& .rc-slider-handle\": {\n      cursor: \"not-allowed\",\n      marginTop: \"-8px\",\n      opacity: 1,\n      \"&:active\": {\n        cursor: \"not-allowed\",\n      },\n      \"&:hover\": {\n        cursor: \"not-allowed\",\n      },\n    },\n  },\n  handleHiddenContainer: { display: \"none\" },\n  labelContainer: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n    marginBottom: \"12px\",\n    marginLeft: \"20px\",\n    marginRight: \"20px\",\n  },\n  labelIncluded: { justifyContent: \"space-between\" },\n  onlyInput: { justifyContent: \"flex-end\" },\n  label: {},\n  root: {},\n  sliderTooltip: {\n    \"&& .rc-slider-tooltip-inner\": {\n      background: theme.colors.atmo1,\n      borderRadius: 0,\n      maxWidth: \"532px\",\n      height: \"100%\",\n      padding: theme.space.sm,\n      ...theme.typography.body,\n      fontFamily: theme.fontFamily.body,\n      boxShadow: \"none\",\n    },\n\n    \"&& .rc-slider-tooltip-arrow\": {\n      visibility: \"hidden\",\n    },\n  },\n});\n"],"names":["dot","position","bottom","marginLeft","width","height","border","borderRadius","backgroundColor","theme","colors","atmo4","cursor","verticalAlign","zIndex","dragSquare","left","top","content","background","borderTop","slider","dragBarColor","borderBottom","ring","ringColor","opacity","ringOpacity","atmo1","sliderStyles","mark","typography","caption1","fontFamily","body","disabledMark","color","secondary_60","dotDisabled","knobHidden","display","knobHiddenLast","borderColor","marginTop","touchAction","knobInner","boxShadow","secondary","knobOuter","track","rail","staticClasses","useClasses","createClasses","sliderBase","base","rootDisabled","sliderContainer","marginBottom","padding","error","trackDragging","trackStandBy","sliderRoot","rootRange","handleContainer","outlineStyles","handle","handleContainerDisabled","handleHiddenContainer","labelContainer","alignItems","justifyContent","marginRight","labelIncluded","onlyInput","label","root","sliderTooltip","maxWidth","space","sm","visibility"],"mappings":"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"}
+{"version":3,"file":"Slider.styles.js","sources":["../../../../src/components/Slider/Slider.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { CSSProperties } from \"react\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nimport base from \"./base\";\n\nconst dot: CSSProperties = {\n  position: \"absolute\",\n  bottom: \"-1px\",\n  marginLeft: \"0px\",\n  width: \"1px\",\n  height: \"4px\",\n  border: \"none\",\n  borderRadius: \"0%\",\n  backgroundColor: theme.colors.atmo4,\n  cursor: \"pointer\",\n  verticalAlign: \"middle\",\n  zIndex: \"-3\",\n};\n\nconst dragSquare: CSSProperties = {\n  cursor: \"grab\",\n  width: \"calc(100% - 40px)\",\n  left: \"20px\",\n  height: \"27px\",\n  position: \"absolute\",\n  top: \"-12px\",\n  content: \"''\",\n  background: \"transparent\",\n  borderTop: `12px solid ${theme.colors.primary_20}`,\n  borderBottom: `12px solid ${theme.colors.primary_20}`,\n  zIndex: \"-2\",\n};\n\nconst ring: CSSProperties = {\n  width: \"32px\",\n  height: \"32px\",\n  borderRadius: \"50%\",\n  border: `9px solid ${theme.colors.primary_20}`,\n  opacity: \"100%\",\n  content: \"''\",\n  position: \"absolute\",\n  top: \"-10px\",\n  left: \"-10px\",\n};\n\nconst border: CSSProperties = {\n  width: \"20px\",\n  height: \"20px\",\n  borderRadius: \"50%\",\n  border: `2px solid ${theme.colors.atmo1}`,\n  content: \"''\",\n  position: \"absolute\",\n  top: \"-4px\",\n  left: \"-4px\",\n};\n\nexport const sliderStyles = {\n  mark: {\n    ...theme.typography.caption1,\n    fontFamily: theme.fontFamily.body,\n    top: \"-2px\",\n    zIndex: -1,\n  },\n  disabledMark: {\n    ...theme.typography.caption1,\n    fontFamily: theme.fontFamily.body,\n    color: `${theme.colors.secondary_60}`,\n    cursor: \"not-allowed\",\n    top: \"-2px\",\n  },\n  dot: {\n    ...dot,\n  },\n  dotDisabled: {\n    ...dot,\n    cursor: \"not-allowed\",\n  },\n  knobHidden: { display: \"none\" },\n  knobHiddenLast: {\n    borderColor: \"transparent\",\n    height: \"3px\",\n    width: \"2px\",\n    marginLeft: \"-1px\",\n    border: \"none\",\n    borderRadius: \"0\",\n    marginTop: \"0px\",\n    left: \"100%\",\n    touchAction: \"none\",\n    cursor: \"default\",\n  },\n  knobInner: {\n    borderColor: \"transparent\",\n    boxShadow: \"none\",\n    backgroundColor: theme.colors.secondary,\n    width: \"16px\",\n    height: \"16px\",\n  },\n  knobOuter: {\n    position: \"relative\",\n    borderColor: \"transparent\",\n    borderRadius: \"50%\",\n    boxShadow: \"none\",\n    backgroundColor: theme.colors.atmo4,\n    width: \"32px\",\n    height: \"32px\",\n    top: \"-80%\",\n    left: \"-80%\",\n    zIndex: \"-1\",\n  },\n  track: {\n    backgroundColor: theme.colors.secondary,\n    height: \"3px\",\n    zIndex: \"-1\",\n    marginTop: \"-1px\",\n  },\n  rail: { backgroundColor: theme.colors.atmo4, height: \"1px\", zIndex: \"-3\" },\n} satisfies Record<string, CSSProperties>;\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSlider\", {\n  sliderBase: { ...base },\n  rootDisabled: {\n    cursor: \"not-allowed\",\n    \"&& .rc-slider-disabled\": {\n      background: \"transparent\",\n    },\n  },\n  sliderContainer: { marginBottom: \"18px\", padding: \"0 23px\" },\n  error: { padding: \"0 8px\" },\n  trackDragging: {\n    cursor: \"grabbing\",\n\n    \"&& .rc-slider-track\": {\n      \"&::before\": {\n        ...dragSquare,\n        cursor: \"grabbing\",\n      },\n    },\n  },\n  trackStandBy: {\n    \"&& .rc-slider-track\": {\n      \"&:hover\": {\n        \"&::before\": {\n          ...dragSquare,\n        },\n      },\n    },\n  },\n  sliderRoot: { zIndex: 0 },\n  rootRange: {},\n  handleContainer: {\n    \"&& .rc-slider-handle\": {\n      cursor: \"pointer\",\n      marginTop: \"-8px\",\n      opacity: 1,\n      \"&:active\": {\n        cursor: \"grab\",\n        \"&::before\": {\n          ...ring,\n        },\n        \"&::after\": {\n          ...border,\n        },\n      },\n      \"&:hover\": {\n        \"&::before\": {\n          ...ring,\n        },\n        \"&::after\": {\n          ...border,\n        },\n      },\n\n      // Note about the usage of `!important below`: the way the rc-slider allows us to\n      // style the knobs is through inline styles. This means that the `box-shadow`, which\n      // is an inline style and is set to `none` to prevent the default rc-slider style to\n      // show, can't be overridden for the focus scenario unless we use the `!important` flag.\n      \"&:focus-visible\": {\n        ...outlineStyles,\n        boxShadow: \"0 0 0 3px #52A8EC, 0 0 0 7px rgba(29,155,209,.3)!important\",\n        \"&::after\": {\n          ...border,\n        },\n      },\n    },\n  },\n  handle: {},\n  handleContainerDisabled: {\n    \"&& .rc-slider-handle\": {\n      cursor: \"not-allowed\",\n      marginTop: \"-8px\",\n      opacity: 1,\n      \"&:active\": {\n        cursor: \"not-allowed\",\n      },\n      \"&:hover\": {\n        cursor: \"not-allowed\",\n      },\n    },\n  },\n  handleHiddenContainer: { display: \"none\" },\n  labelContainer: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n    marginBottom: \"12px\",\n    marginLeft: \"20px\",\n    marginRight: \"20px\",\n  },\n  labelIncluded: { justifyContent: \"space-between\" },\n  onlyInput: { justifyContent: \"flex-end\" },\n  label: {},\n  root: {},\n  sliderTooltip: {\n    \"&& .rc-slider-tooltip-inner\": {\n      background: theme.colors.atmo1,\n      borderRadius: 0,\n      maxWidth: \"532px\",\n      height: \"100%\",\n      padding: theme.space.sm,\n      ...theme.typography.body,\n      fontFamily: theme.fontFamily.body,\n      boxShadow: \"none\",\n    },\n\n    \"&& .rc-slider-tooltip-arrow\": {\n      visibility: \"hidden\",\n    },\n  },\n});\n"],"names":["dot","position","bottom","marginLeft","width","height","border","borderRadius","backgroundColor","theme","colors","atmo4","cursor","verticalAlign","zIndex","dragSquare","left","top","content","background","borderTop","primary_20","borderBottom","ring","opacity","atmo1","sliderStyles","mark","typography","caption1","fontFamily","body","disabledMark","color","secondary_60","dotDisabled","knobHidden","display","knobHiddenLast","borderColor","marginTop","touchAction","knobInner","boxShadow","secondary","knobOuter","track","rail","staticClasses","useClasses","createClasses","sliderBase","base","rootDisabled","sliderContainer","marginBottom","padding","error","trackDragging","trackStandBy","sliderRoot","rootRange","handleContainer","outlineStyles","handle","handleContainerDisabled","handleHiddenContainer","labelContainer","alignItems","justifyContent","marginRight","labelIncluded","onlyInput","label","root","sliderTooltip","maxWidth","space","sm","visibility"],"mappings":"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"}

package/dist/esm/components/Snackbar/SnackbarContent/SnackbarContent.js

@@ -6,19 +6,21 @@ import { iconVariant } from "../../../utils/iconVariant.js";
 import { useTheme } from "../../../hooks/useTheme.js";
 import { useClasses } from "./SnackbarContent.styles.js";
 import { staticClasses } from "./SnackbarContent.styles.js";
+import { useDefaultProps } from "../../../hooks/useDefaultProps.js";
 import { HvActionsGeneric } from "../../ActionsGeneric/ActionsGeneric.js";
-const HvSnackbarContent = forwardRef(({
-  className,
-  id,
-  classes: classesProp,
-  label,
-  variant = "default",
-  showIcon,
-  customIcon,
-  action,
-  actionCallback,
-  ...others
-}, ref) => {
+const HvSnackbarContent = forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    classes: classesProp,
+    label,
+    variant = "default",
+    showIcon,
+    customIcon,
+    action,
+    actionCallback,
+    ...others
+  } = useDefaultProps("HvSnackbarContent", props);
   const icon = customIcon || showIcon && iconVariant(variant, "base_dark");
   const innerAction = isValidElement(action) ? action : [action];
   const {

package/dist/esm/components/Snackbar/SnackbarContent/SnackbarContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"SnackbarContent.js","sources":["../../../../../src/components/Snackbar/SnackbarContent/SnackbarContent.tsx"],"sourcesContent":["import { forwardRef, isValidElement } from \"react\";\n\nimport SnackbarContent, {\n  SnackbarContentProps as MuiSnackbarContentProps,\n} from \"@mui/material/SnackbarContent\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\nimport { iconVariant } from \"@core/utils/iconVariant\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport {\n  HvActionsGeneric,\n  HvActionGeneric,\n} from \"@core/components/ActionsGeneric\";\nimport { HvButtonVariant } from \"@core/components/Button\";\nimport { useTheme } from \"@core/hooks/useTheme\";\n\nimport { staticClasses, useClasses } from \"./SnackbarContent.styles\";\nimport { HvSnackbarVariant } from \"../types\";\n\nexport { staticClasses as snackbarContentClasses };\n\nexport type HvSnackbarContentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSnackbarContentProps\n  extends Omit<MuiSnackbarContentProps, \"variant\" | \"action\" | \"classes\">,\n    HvBaseProps {\n  /** The message to display. */\n  label?: React.ReactNode;\n  /** Variant of the snackbar. */\n  variant?: HvSnackbarVariant;\n  /** Controls if the associated icon to the variant should be shown. */\n  showIcon?: boolean;\n  /** Custom icon to replace the variant default. */\n  customIcon?: React.ReactNode;\n  /** Action to display. */\n  action?: React.ReactNode | HvActionGeneric;\n  /** The callback function ran when an action is triggered, receiving `action` as param */\n  actionCallback?: (\n    event: React.SyntheticEvent,\n    id: string,\n    action: HvActionGeneric\n  ) => void;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvSnackbarContentClasses;\n}\n\nexport const HvSnackbarContent = forwardRef<\n  HTMLDivElement,\n  HvSnackbarContentProps\n>(\n  (\n    {\n      className,\n      id,\n      classes: classesProp,\n      label,\n      variant = \"default\",\n      showIcon,\n      customIcon,\n      action,\n      actionCallback,\n      ...others\n    },\n    ref\n  ) => {\n    const icon = customIcon || (showIcon && iconVariant(variant, \"base_dark\"));\n    const innerAction: any = isValidElement(action) ? action : [action];\n\n    const { classes, cx } = useClasses(classesProp);\n    const { activeTheme } = useTheme();\n\n    return (\n      <SnackbarContent\n        ref={ref}\n        id={id}\n        classes={{\n          root: classes.root,\n          message: classes.message,\n        }}\n        className={cx(classes?.[variant], className)}\n        message={\n          <div id={setId(id, \"message\")} className={classes.messageSpan}>\n            {icon && <div className={classes.iconVariant}>{icon}</div>}\n            <div className={classes.messageText}>{label}</div>\n            {action && (\n              <div id={setId(id, \"action\")} className={classes.action}>\n                <HvActionsGeneric\n                  id={id}\n                  category={\n                    activeTheme?.snackbar.actionButtonVariant as HvButtonVariant\n                  }\n                  actions={innerAction}\n                  actionsCallback={actionCallback}\n                />\n              </div>\n            )}\n          </div>\n        }\n        {...others}\n      />\n    );\n  }\n);\n"],"names":["HvSnackbarContent","forwardRef","className","id","classes","classesProp","label","variant","showIcon","customIcon","action","actionCallback","others","ref","icon","iconVariant","innerAction","isValidElement","cx","useClasses","activeTheme","useTheme","root","message","setId","messageSpan","messageText","snackbar","actionButtonVariant"],"mappings":";;;;;;;;;AA+CaA,MAAAA,oBAAoBC,WAI/B,CACE;AAAA,EACEC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AAAAA,EACAC,UAAU;AAAA,EACVC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACL,GACAC,QACG;AACH,QAAMC,OAAOL,cAAeD,YAAYO,YAAYR,SAAS,WAAW;AACxE,QAAMS,cAAmBC,eAAeP,MAAM,IAAIA,SAAS,CAACA,MAAM;AAE5D,QAAA;AAAA,IAAEN;AAAAA,IAASc;AAAAA,EAAAA,IAAOC,WAAWd,WAAW;AACxC,QAAA;AAAA,IAAEe;AAAAA,MAAgBC,SAAS;AAEjC,SACG,oBAAA,iBAAA,EACC,KACA,IACA,SAAS;AAAA,IACPC,MAAMlB,QAAQkB;AAAAA,IACdC,SAASnB,QAAQmB;AAAAA,EAAAA,GAEnB,WAAWL,GAAGd,mCAAUG,UAAUL,SAAS,GAC3C,SACG,qBAAA,OAAA,EAAI,IAAIsB,MAAMrB,IAAI,SAAS,GAAG,WAAWC,QAAQqB,aAC/CX,UAAAA;AAAAA,IAAAA,QAAS,oBAAA,OAAA,EAAI,WAAWV,QAAQW,aAAcD,UAAK,MAAA;AAAA,IACnD,oBAAA,OAAA,EAAI,WAAWV,QAAQsB,aAAcpB,UAAM,OAAA;AAAA,IAC3CI,8BACE,OAAI,EAAA,IAAIc,MAAMrB,IAAI,QAAQ,GAAG,WAAWC,QAAQM,QAC/C,8BAAC,kBACC,EAAA,IACA,UACEU,2CAAaO,SAASC,qBAExB,SAASZ,aACT,iBAAiBL,eAAAA,CAAe,EAEpC,CAAA;AAAA,EAAA,GAEJ,GAEEC,GAAAA,OACJ,CAAA;AAEN,CACF;"}
+{"version":3,"file":"SnackbarContent.js","sources":["../../../../../src/components/Snackbar/SnackbarContent/SnackbarContent.tsx"],"sourcesContent":["import { forwardRef, isValidElement } from \"react\";\n\nimport SnackbarContent, {\n  SnackbarContentProps as MuiSnackbarContentProps,\n} from \"@mui/material/SnackbarContent\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\nimport { iconVariant } from \"@core/utils/iconVariant\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport {\n  HvActionsGeneric,\n  HvActionGeneric,\n} from \"@core/components/ActionsGeneric\";\nimport { HvButtonVariant } from \"@core/components/Button\";\nimport { useTheme } from \"@core/hooks/useTheme\";\n\nimport { useDefaultProps } from \"@core/hooks\";\nimport { staticClasses, useClasses } from \"./SnackbarContent.styles\";\nimport { HvSnackbarVariant } from \"../types\";\n\nexport { staticClasses as snackbarContentClasses };\n\nexport type HvSnackbarContentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSnackbarContentProps\n  extends Omit<MuiSnackbarContentProps, \"variant\" | \"action\" | \"classes\">,\n    HvBaseProps {\n  /** The message to display. */\n  label?: React.ReactNode;\n  /** Variant of the snackbar. */\n  variant?: HvSnackbarVariant;\n  /** Controls if the associated icon to the variant should be shown. */\n  showIcon?: boolean;\n  /** Custom icon to replace the variant default. */\n  customIcon?: React.ReactNode;\n  /** Action to display. */\n  action?: React.ReactNode | HvActionGeneric;\n  /** The callback function ran when an action is triggered, receiving `action` as param */\n  actionCallback?: (\n    event: React.SyntheticEvent,\n    id: string,\n    action: HvActionGeneric\n  ) => void;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvSnackbarContentClasses;\n}\n\nexport const HvSnackbarContent = forwardRef<\n  HTMLDivElement,\n  HvSnackbarContentProps\n>((props: HvSnackbarContentProps, ref) => {\n  const {\n    className,\n    id,\n    classes: classesProp,\n    label,\n    variant = \"default\",\n    showIcon,\n    customIcon,\n    action,\n    actionCallback,\n    ...others\n  } = useDefaultProps(\"HvSnackbarContent\", props);\n\n  const icon = customIcon || (showIcon && iconVariant(variant, \"base_dark\"));\n  const innerAction: any = isValidElement(action) ? action : [action];\n\n  const { classes, cx } = useClasses(classesProp);\n  const { activeTheme } = useTheme();\n\n  return (\n    <SnackbarContent\n      ref={ref}\n      id={id}\n      classes={{\n        root: classes.root,\n        message: classes.message,\n      }}\n      className={cx(classes?.[variant], className)}\n      message={\n        <div id={setId(id, \"message\")} className={classes.messageSpan}>\n          {icon && <div className={classes.iconVariant}>{icon}</div>}\n          <div className={classes.messageText}>{label}</div>\n          {action && (\n            <div id={setId(id, \"action\")} className={classes.action}>\n              <HvActionsGeneric\n                id={id}\n                category={\n                  activeTheme?.snackbar.actionButtonVariant as HvButtonVariant\n                }\n                actions={innerAction}\n                actionsCallback={actionCallback}\n              />\n            </div>\n          )}\n        </div>\n      }\n      {...others}\n    />\n  );\n});\n"],"names":["HvSnackbarContent","forwardRef","props","ref","className","id","classes","classesProp","label","variant","showIcon","customIcon","action","actionCallback","others","useDefaultProps","icon","iconVariant","innerAction","isValidElement","cx","useClasses","activeTheme","useTheme","root","message","setId","messageSpan","messageText","snackbar","actionButtonVariant"],"mappings":";;;;;;;;;;AAgDO,MAAMA,oBAAoBC,WAG/B,CAACC,OAA+BC,QAAQ;AAClC,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC,UAAU;AAAA,IACVC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,qBAAqBb,KAAK;AAE9C,QAAMc,OAAOL,cAAeD,YAAYO,YAAYR,SAAS,WAAW;AACxE,QAAMS,cAAmBC,eAAeP,MAAM,IAAIA,SAAS,CAACA,MAAM;AAE5D,QAAA;AAAA,IAAEN;AAAAA,IAASc;AAAAA,EAAAA,IAAOC,WAAWd,WAAW;AACxC,QAAA;AAAA,IAAEe;AAAAA,MAAgBC,SAAS;AAEjC,SACG,oBAAA,iBAAA,EACC,KACA,IACA,SAAS;AAAA,IACPC,MAAMlB,QAAQkB;AAAAA,IACdC,SAASnB,QAAQmB;AAAAA,EAAAA,GAEnB,WAAWL,GAAGd,mCAAUG,UAAUL,SAAS,GAC3C,SACG,qBAAA,OAAA,EAAI,IAAIsB,MAAMrB,IAAI,SAAS,GAAG,WAAWC,QAAQqB,aAC/CX,UAAAA;AAAAA,IAAAA,QAAS,oBAAA,OAAA,EAAI,WAAWV,QAAQW,aAAcD,UAAK,MAAA;AAAA,IACnD,oBAAA,OAAA,EAAI,WAAWV,QAAQsB,aAAcpB,UAAM,OAAA;AAAA,IAC3CI,8BACE,OAAI,EAAA,IAAIc,MAAMrB,IAAI,QAAQ,GAAG,WAAWC,QAAQM,QAC/C,8BAAC,kBACC,EAAA,IACA,UACEU,2CAAaO,SAASC,qBAExB,SAASZ,aACT,iBAAiBL,eAAAA,CAAe,EAEpC,CAAA;AAAA,EAAA,GAEJ,GAEEC,GAAAA,OACJ,CAAA;AAEN,CAAC;"}

package/dist/esm/components/Snackbar/SnackbarContent/SnackbarContent.styles.js

@@ -48,7 +48,7 @@ const {
   action: {
     textAlign: "right",
     paddingLeft: theme.space.xs,
-    marginLeft: theme.snackbar.actionMarginLeft,
+    marginLeft: "auto",
     [`& .${staticClasses$1.button}`]: {
       borderColor: theme.colors.base_dark,
       color: theme.colors.base_dark,

package/dist/esm/components/Snackbar/SnackbarContent/SnackbarContent.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"SnackbarContent.styles.js","sources":["../../../../../src/components/Snackbar/SnackbarContent/SnackbarContent.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\nimport { actionsGenericClasses } from \"@core/components/ActionsGeneric\";\n\nexport const { useClasses, staticClasses } = createClasses(\n  \"HvSnackbar-Content\",\n  {\n    root: {\n      width: \"310px\",\n      minHeight: \"52px\",\n      maxHeight: \"92px\",\n      padding: theme.space.xs,\n      boxShadow: \"none\",\n    },\n    success: {\n      backgroundColor: theme.colors.positive_20,\n    },\n    error: {\n      backgroundColor: theme.colors.negative_20,\n    },\n    default: {\n      backgroundColor: theme.colors.neutral_20,\n    },\n    warning: {\n      backgroundColor: theme.colors.warning_20,\n    },\n    message: {\n      padding: 0,\n      width: \"100%\",\n    },\n    messageSpan: {\n      display: \"flex\",\n      alignItems: \"center\",\n      minHeight: \"32px\",\n    },\n    messageText: {\n      paddingLeft: theme.space.xs,\n      color: theme.colors.base_dark,\n      fontFamily: theme.fontFamily.body,\n      maxHeight: \"72px\",\n      wordBreak: \"break-word\",\n      textWrap: \"balance\",\n      overflow: \"hidden\",\n    },\n    action: {\n      textAlign: \"right\",\n      paddingLeft: theme.space.xs,\n      marginLeft: theme.snackbar.actionMarginLeft,\n      [`& .${actionsGenericClasses.button}`]: {\n        borderColor: theme.colors.base_dark,\n        color: theme.colors.base_dark,\n        \"&:hover\": {\n          borderColor: theme.colors.base_dark,\n        },\n      },\n    },\n    iconVariant: {},\n  }\n);\n"],"names":["useClasses","staticClasses","createClasses","root","width","minHeight","maxHeight","padding","theme","space","xs","boxShadow","success","backgroundColor","colors","positive_20","error","negative_20","default","neutral_20","warning","warning_20","message","messageSpan","display","alignItems","messageText","paddingLeft","color","base_dark","fontFamily","body","wordBreak","textWrap","overflow","action","textAlign","marginLeft","snackbar","actionMarginLeft","actionsGenericClasses","button","borderColor","iconVariant"],"mappings":";;;;;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAYC;AAAc,IAAIC,cAC3C,sBACA;AAAA,EACEC,MAAM;AAAA,IACJC,OAAO;AAAA,IACPC,WAAW;AAAA,IACXC,WAAW;AAAA,IACXC,SAASC,MAAMC,MAAMC;AAAAA,IACrBC,WAAW;AAAA,EACb;AAAA,EACAC,SAAS;AAAA,IACPC,iBAAiBL,MAAMM,OAAOC;AAAAA,EAChC;AAAA,EACAC,OAAO;AAAA,IACLH,iBAAiBL,MAAMM,OAAOG;AAAAA,EAChC;AAAA,EACAC,SAAS;AAAA,IACPL,iBAAiBL,MAAMM,OAAOK;AAAAA,EAChC;AAAA,EACAC,SAAS;AAAA,IACPP,iBAAiBL,MAAMM,OAAOO;AAAAA,EAChC;AAAA,EACAC,SAAS;AAAA,IACPf,SAAS;AAAA,IACTH,OAAO;AAAA,EACT;AAAA,EACAmB,aAAa;AAAA,IACXC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZpB,WAAW;AAAA,EACb;AAAA,EACAqB,aAAa;AAAA,IACXC,aAAanB,MAAMC,MAAMC;AAAAA,IACzBkB,OAAOpB,MAAMM,OAAOe;AAAAA,IACpBC,YAAYtB,MAAMsB,WAAWC;AAAAA,IAC7BzB,WAAW;AAAA,IACX0B,WAAW;AAAA,IACXC,UAAU;AAAA,IACVC,UAAU;AAAA,EACZ;AAAA,EACAC,QAAQ;AAAA,IACNC,WAAW;AAAA,IACXT,aAAanB,MAAMC,MAAMC;AAAAA,IACzB2B,YAAY7B,MAAM8B,SAASC;AAAAA,IAC3B,CAAE,MAAKC,gBAAsBC,MAAO,EAAC,GAAG;AAAA,MACtCC,aAAalC,MAAMM,OAAOe;AAAAA,MAC1BD,OAAOpB,MAAMM,OAAOe;AAAAA,MACpB,WAAW;AAAA,QACTa,aAAalC,MAAMM,OAAOe;AAAAA,MAC5B;AAAA,IACF;AAAA,EACF;AAAA,EACAc,aAAa,CAAC;AAChB,CACF;"}
+{"version":3,"file":"SnackbarContent.styles.js","sources":["../../../../../src/components/Snackbar/SnackbarContent/SnackbarContent.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\nimport { actionsGenericClasses } from \"@core/components/ActionsGeneric\";\n\nexport const { useClasses, staticClasses } = createClasses(\n  \"HvSnackbar-Content\",\n  {\n    root: {\n      width: \"310px\",\n      minHeight: \"52px\",\n      maxHeight: \"92px\",\n      padding: theme.space.xs,\n      boxShadow: \"none\",\n    },\n    success: {\n      backgroundColor: theme.colors.positive_20,\n    },\n    error: {\n      backgroundColor: theme.colors.negative_20,\n    },\n    default: {\n      backgroundColor: theme.colors.neutral_20,\n    },\n    warning: {\n      backgroundColor: theme.colors.warning_20,\n    },\n    message: {\n      padding: 0,\n      width: \"100%\",\n    },\n    messageSpan: {\n      display: \"flex\",\n      alignItems: \"center\",\n      minHeight: \"32px\",\n    },\n    messageText: {\n      paddingLeft: theme.space.xs,\n      color: theme.colors.base_dark,\n      fontFamily: theme.fontFamily.body,\n      maxHeight: \"72px\",\n      wordBreak: \"break-word\",\n      textWrap: \"balance\",\n      overflow: \"hidden\",\n    },\n    action: {\n      textAlign: \"right\",\n      paddingLeft: theme.space.xs,\n      marginLeft: \"auto\",\n      [`& .${actionsGenericClasses.button}`]: {\n        borderColor: theme.colors.base_dark,\n        color: theme.colors.base_dark,\n        \"&:hover\": {\n          borderColor: theme.colors.base_dark,\n        },\n      },\n    },\n    iconVariant: {},\n  }\n);\n"],"names":["useClasses","staticClasses","createClasses","root","width","minHeight","maxHeight","padding","theme","space","xs","boxShadow","success","backgroundColor","colors","positive_20","error","negative_20","default","neutral_20","warning","warning_20","message","messageSpan","display","alignItems","messageText","paddingLeft","color","base_dark","fontFamily","body","wordBreak","textWrap","overflow","action","textAlign","marginLeft","actionsGenericClasses","button","borderColor","iconVariant"],"mappings":";;;;;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAYC;AAAc,IAAIC,cAC3C,sBACA;AAAA,EACEC,MAAM;AAAA,IACJC,OAAO;AAAA,IACPC,WAAW;AAAA,IACXC,WAAW;AAAA,IACXC,SAASC,MAAMC,MAAMC;AAAAA,IACrBC,WAAW;AAAA,EACb;AAAA,EACAC,SAAS;AAAA,IACPC,iBAAiBL,MAAMM,OAAOC;AAAAA,EAChC;AAAA,EACAC,OAAO;AAAA,IACLH,iBAAiBL,MAAMM,OAAOG;AAAAA,EAChC;AAAA,EACAC,SAAS;AAAA,IACPL,iBAAiBL,MAAMM,OAAOK;AAAAA,EAChC;AAAA,EACAC,SAAS;AAAA,IACPP,iBAAiBL,MAAMM,OAAOO;AAAAA,EAChC;AAAA,EACAC,SAAS;AAAA,IACPf,SAAS;AAAA,IACTH,OAAO;AAAA,EACT;AAAA,EACAmB,aAAa;AAAA,IACXC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZpB,WAAW;AAAA,EACb;AAAA,EACAqB,aAAa;AAAA,IACXC,aAAanB,MAAMC,MAAMC;AAAAA,IACzBkB,OAAOpB,MAAMM,OAAOe;AAAAA,IACpBC,YAAYtB,MAAMsB,WAAWC;AAAAA,IAC7BzB,WAAW;AAAA,IACX0B,WAAW;AAAA,IACXC,UAAU;AAAA,IACVC,UAAU;AAAA,EACZ;AAAA,EACAC,QAAQ;AAAA,IACNC,WAAW;AAAA,IACXT,aAAanB,MAAMC,MAAMC;AAAAA,IACzB2B,YAAY;AAAA,IACZ,CAAE,MAAKC,gBAAsBC,MAAO,EAAC,GAAG;AAAA,MACtCC,aAAahC,MAAMM,OAAOe;AAAAA,MAC1BD,OAAOpB,MAAMM,OAAOe;AAAAA,MACpB,WAAW;AAAA,QACTW,aAAahC,MAAMM,OAAOe;AAAAA,MAC5B;AAAA,IACF;AAAA,EACF;AAAA,EACAY,aAAa,CAAC;AAChB,CACF;"}

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

@@ -21,7 +21,7 @@ const {
     borderBottom: "1px solid transparent"
   },
   invalidSwitch: {
-    paddingBottom: theme.switch.invalidPaddingBottom,
+    paddingBottom: "1px",
     borderBottom: `1px solid ${theme.colors.negative}`
   }
 });

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.styles.js","sources":["../../../../src/components/Switch/Switch.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSwitch\", {\n  root: {\n    display: \"inline-flex\",\n    flexDirection: \"column\",\n    alignItems: \"flex-start\",\n  },\n  label: { marginBottom: theme.space.xs },\n  error: {},\n  switchContainer: {\n    height: \"32px\",\n    display: \"flex\",\n    flexDirection: \"column\",\n    justifyContent: \"center\",\n    borderBottom: \"1px solid transparent\",\n  },\n  invalidSwitch: {\n    paddingBottom: theme.switch.invalidPaddingBottom,\n    borderBottom: `1px solid ${theme.colors.negative}`,\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","flexDirection","alignItems","label","marginBottom","theme","space","xs","error","switchContainer","height","justifyContent","borderBottom","invalidSwitch","paddingBottom","switch","invalidPaddingBottom","colors","negative"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,YAAY;AAAA,EACrEC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,eAAe;AAAA,IACfC,YAAY;AAAA,EACd;AAAA,EACAC,OAAO;AAAA,IAAEC,cAAcC,MAAMC,MAAMC;AAAAA,EAAG;AAAA,EACtCC,OAAO,CAAC;AAAA,EACRC,iBAAiB;AAAA,IACfC,QAAQ;AAAA,IACRV,SAAS;AAAA,IACTC,eAAe;AAAA,IACfU,gBAAgB;AAAA,IAChBC,cAAc;AAAA,EAChB;AAAA,EACAC,eAAe;AAAA,IACbC,eAAeT,MAAMU,OAAOC;AAAAA,IAC5BJ,cAAe,aAAYP,MAAMY,OAAOC,QAAS;AAAA,EACnD;AACF,CAAC;"}
+{"version":3,"file":"Switch.styles.js","sources":["../../../../src/components/Switch/Switch.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSwitch\", {\n  root: {\n    display: \"inline-flex\",\n    flexDirection: \"column\",\n    alignItems: \"flex-start\",\n  },\n  label: { marginBottom: theme.space.xs },\n  error: {},\n  switchContainer: {\n    height: \"32px\",\n    display: \"flex\",\n    flexDirection: \"column\",\n    justifyContent: \"center\",\n    borderBottom: \"1px solid transparent\",\n  },\n  invalidSwitch: {\n    paddingBottom: \"1px\",\n    borderBottom: `1px solid ${theme.colors.negative}`,\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","flexDirection","alignItems","label","marginBottom","theme","space","xs","error","switchContainer","height","justifyContent","borderBottom","invalidSwitch","paddingBottom","colors","negative"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,YAAY;AAAA,EACrEC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,eAAe;AAAA,IACfC,YAAY;AAAA,EACd;AAAA,EACAC,OAAO;AAAA,IAAEC,cAAcC,MAAMC,MAAMC;AAAAA,EAAG;AAAA,EACtCC,OAAO,CAAC;AAAA,EACRC,iBAAiB;AAAA,IACfC,QAAQ;AAAA,IACRV,SAAS;AAAA,IACTC,eAAe;AAAA,IACfU,gBAAgB;AAAA,IAChBC,cAAc;AAAA,EAChB;AAAA,EACAC,eAAe;AAAA,IACbC,eAAe;AAAA,IACfF,cAAe,aAAYP,MAAMU,OAAOC,QAAS;AAAA,EACnD;AACF,CAAC;"}

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

@@ -7,18 +7,18 @@ const {
 } = createClasses("HvTab", {
   root: {
     marginTop: "3px",
-    padding: theme.tab.padding,
+    padding: "0 16px",
     minWidth: 70,
     minHeight: 32,
     textTransform: "none",
     fontFamily: theme.fontFamily.body,
     ...theme.typography.body,
     "&:hover": {
-      backgroundColor: theme.tab.hoverBackgroundColor,
-      borderRadius: theme.tab.hoverBackgroundBorderRadius,
+      backgroundColor: theme.colors.containerBackgroundHover,
+      borderRadius: theme.radii.base,
       "&::after": {
         height: "1px",
-        backgroundColor: theme.tab.hoverUnderlineBackgroundColor
+        backgroundColor: theme.colors.atmo4
       }
     },
     "&$selected": {

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

@@ -1 +1 @@
-{"version":3,"file":"Tab.styles.js","sources":["../../../../src/components/Tab/Tab.styles.tsx"],"sourcesContent":["import { CSSProperties } from \"react\";\nimport { createClasses } from \"@core/utils/classes\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { outlineStyles } from \"@core/utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTab\", {\n  root: {\n    marginTop: \"3px\",\n    padding: theme.tab.padding,\n    minWidth: 70,\n    minHeight: 32,\n    textTransform: \"none\",\n    fontFamily: theme.fontFamily.body,\n    ...(theme.typography.body as CSSProperties),\n    \"&:hover\": {\n      backgroundColor: theme.tab.hoverBackgroundColor,\n      borderRadius: theme.tab.hoverBackgroundBorderRadius,\n      \"&::after\": {\n        height: \"1px\",\n        backgroundColor: theme.tab.hoverUnderlineBackgroundColor,\n      },\n    },\n    \"&$selected\": {\n      color: theme.typography.label.color,\n      fontWeight: theme.typography.label.fontWeight,\n      lineHeight: theme.typography.label.lineHeight,\n      letterSpacing: theme.typography.label.letterSpacing,\n    },\n    \"&$disabled\": {\n      color: theme.colors.secondary_60,\n      cursor: \"not-allowed\",\n      pointerEvents: \"all\",\n      opacity: 1,\n      \"&:hover\": {\n        background: \"none\",\n      },\n    },\n    opacity: 1,\n    \"&::after\": {\n      position: \"absolute\",\n      left: 0,\n      top: \"calc(100% - 1px)\",\n      height: \"1px\",\n      width: \"100%\",\n      backgroundColor: theme.colors.atmo4,\n      content: \"''\",\n    },\n    // Override Mui styling: https://mui.com/material-ui/api/tab/#css\n    \"& .MuiTab-iconWrapper\": {\n      margin: 0,\n    },\n  },\n  focusVisible: {\n    ...outlineStyles,\n  },\n  selected: {},\n  disabled: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root","marginTop","padding","theme","tab","minWidth","minHeight","textTransform","fontFamily","body","typography","backgroundColor","hoverBackgroundColor","borderRadius","hoverBackgroundBorderRadius","height","hoverUnderlineBackgroundColor","color","label","fontWeight","lineHeight","letterSpacing","colors","secondary_60","cursor","pointerEvents","opacity","background","position","left","top","width","atmo4","content","margin","focusVisible","outlineStyles","selected","disabled"],"mappings":";;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,SAAS;AAAA,EAClEC,MAAM;AAAA,IACJC,WAAW;AAAA,IACXC,SAASC,MAAMC,IAAIF;AAAAA,IACnBG,UAAU;AAAA,IACVC,WAAW;AAAA,IACXC,eAAe;AAAA,IACfC,YAAYL,MAAMK,WAAWC;AAAAA,IAC7B,GAAIN,MAAMO,WAAWD;AAAAA,IACrB,WAAW;AAAA,MACTE,iBAAiBR,MAAMC,IAAIQ;AAAAA,MAC3BC,cAAcV,MAAMC,IAAIU;AAAAA,MACxB,YAAY;AAAA,QACVC,QAAQ;AAAA,QACRJ,iBAAiBR,MAAMC,IAAIY;AAAAA,MAC7B;AAAA,IACF;AAAA,IACA,cAAc;AAAA,MACZC,OAAOd,MAAMO,WAAWQ,MAAMD;AAAAA,MAC9BE,YAAYhB,MAAMO,WAAWQ,MAAMC;AAAAA,MACnCC,YAAYjB,MAAMO,WAAWQ,MAAME;AAAAA,MACnCC,eAAelB,MAAMO,WAAWQ,MAAMG;AAAAA,IACxC;AAAA,IACA,cAAc;AAAA,MACZJ,OAAOd,MAAMmB,OAAOC;AAAAA,MACpBC,QAAQ;AAAA,MACRC,eAAe;AAAA,MACfC,SAAS;AAAA,MACT,WAAW;AAAA,QACTC,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IACAD,SAAS;AAAA,IACT,YAAY;AAAA,MACVE,UAAU;AAAA,MACVC,MAAM;AAAA,MACNC,KAAK;AAAA,MACLf,QAAQ;AAAA,MACRgB,OAAO;AAAA,MACPpB,iBAAiBR,MAAMmB,OAAOU;AAAAA,MAC9BC,SAAS;AAAA,IACX;AAAA;AAAA,IAEA,yBAAyB;AAAA,MACvBC,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAC,cAAc;AAAA,IACZ,GAAGC;AAAAA,EACL;AAAA,EACAC,UAAU,CAAC;AAAA,EACXC,UAAU,CAAC;AACb,CAAC;"}
+{"version":3,"file":"Tab.styles.js","sources":["../../../../src/components/Tab/Tab.styles.tsx"],"sourcesContent":["import { CSSProperties } from \"react\";\nimport { createClasses } from \"@core/utils/classes\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { outlineStyles } from \"@core/utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTab\", {\n  root: {\n    marginTop: \"3px\",\n    padding: \"0 16px\",\n    minWidth: 70,\n    minHeight: 32,\n    textTransform: \"none\",\n    fontFamily: theme.fontFamily.body,\n    ...(theme.typography.body as CSSProperties),\n    \"&:hover\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n      borderRadius: theme.radii.base,\n      \"&::after\": {\n        height: \"1px\",\n        backgroundColor: theme.colors.atmo4,\n      },\n    },\n    \"&$selected\": {\n      color: theme.typography.label.color,\n      fontWeight: theme.typography.label.fontWeight,\n      lineHeight: theme.typography.label.lineHeight,\n      letterSpacing: theme.typography.label.letterSpacing,\n    },\n    \"&$disabled\": {\n      color: theme.colors.secondary_60,\n      cursor: \"not-allowed\",\n      pointerEvents: \"all\",\n      opacity: 1,\n      \"&:hover\": {\n        background: \"none\",\n      },\n    },\n    opacity: 1,\n    \"&::after\": {\n      position: \"absolute\",\n      left: 0,\n      top: \"calc(100% - 1px)\",\n      height: \"1px\",\n      width: \"100%\",\n      backgroundColor: theme.colors.atmo4,\n      content: \"''\",\n    },\n    // Override Mui styling: https://mui.com/material-ui/api/tab/#css\n    \"& .MuiTab-iconWrapper\": {\n      margin: 0,\n    },\n  },\n  focusVisible: {\n    ...outlineStyles,\n  },\n  selected: {},\n  disabled: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root","marginTop","padding","minWidth","minHeight","textTransform","fontFamily","theme","body","typography","backgroundColor","colors","containerBackgroundHover","borderRadius","radii","base","height","atmo4","color","label","fontWeight","lineHeight","letterSpacing","secondary_60","cursor","pointerEvents","opacity","background","position","left","top","width","content","margin","focusVisible","outlineStyles","selected","disabled"],"mappings":";;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,SAAS;AAAA,EAClEC,MAAM;AAAA,IACJC,WAAW;AAAA,IACXC,SAAS;AAAA,IACTC,UAAU;AAAA,IACVC,WAAW;AAAA,IACXC,eAAe;AAAA,IACfC,YAAYC,MAAMD,WAAWE;AAAAA,IAC7B,GAAID,MAAME,WAAWD;AAAAA,IACrB,WAAW;AAAA,MACTE,iBAAiBH,MAAMI,OAAOC;AAAAA,MAC9BC,cAAcN,MAAMO,MAAMC;AAAAA,MAC1B,YAAY;AAAA,QACVC,QAAQ;AAAA,QACRN,iBAAiBH,MAAMI,OAAOM;AAAAA,MAChC;AAAA,IACF;AAAA,IACA,cAAc;AAAA,MACZC,OAAOX,MAAME,WAAWU,MAAMD;AAAAA,MAC9BE,YAAYb,MAAME,WAAWU,MAAMC;AAAAA,MACnCC,YAAYd,MAAME,WAAWU,MAAME;AAAAA,MACnCC,eAAef,MAAME,WAAWU,MAAMG;AAAAA,IACxC;AAAA,IACA,cAAc;AAAA,MACZJ,OAAOX,MAAMI,OAAOY;AAAAA,MACpBC,QAAQ;AAAA,MACRC,eAAe;AAAA,MACfC,SAAS;AAAA,MACT,WAAW;AAAA,QACTC,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IACAD,SAAS;AAAA,IACT,YAAY;AAAA,MACVE,UAAU;AAAA,MACVC,MAAM;AAAA,MACNC,KAAK;AAAA,MACLd,QAAQ;AAAA,MACRe,OAAO;AAAA,MACPrB,iBAAiBH,MAAMI,OAAOM;AAAAA,MAC9Be,SAAS;AAAA,IACX;AAAA;AAAA,IAEA,yBAAyB;AAAA,MACvBC,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAC,cAAc;AAAA,IACZ,GAAGC;AAAAA,EACL;AAAA,EACAC,UAAU,CAAC;AAAA,EACXC,UAAU,CAAC;AACb,CAAC;"}

package/dist/esm/components/Table/TableCell/TableCell.js

@@ -9,6 +9,7 @@ import { useTheme } from "../../../hooks/useTheme.js";
 import TableContext from "../TableContext.js";
 import TableSectionContext from "../TableSectionContext.js";
 import { useClasses, staticClasses } from "./TableCell.styles.js";
+import { useDefaultProps } from "../../../hooks/useDefaultProps.js";
 const defaultComponent = "td";
 const getSortedColor = (color, alpha) => {
   return checkValidHexColorValue(color) && alpha ? hexToRgbA(color, parseFloat(alpha)) : color;
@@ -33,7 +34,7 @@ const HvTableCell = forwardRef((props, externalRef) => {
     resizable = false,
     resizing = false,
     ...others
-  } = props;
+  } = useDefaultProps("HvTableCell", props);
   const {
     classes,
     cx,

package/dist/esm/components/Table/TableCell/TableCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableCell.js","sources":["../../../../../src/components/Table/TableCell/TableCell.tsx"],"sourcesContent":["import capitalize from \"lodash/capitalize\";\n\nimport {\n  CSSProperties,\n  forwardRef,\n  TdHTMLAttributes,\n  useContext,\n  useEffect,\n  useState,\n} from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { checkValidHexColorValue } from \"@core/utils/checkValidHexColorValue\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { getVarValue } from \"@core/utils/theme\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\nimport { useTheme } from \"@core/hooks/useTheme\";\n\nimport {\n  HvTableCellAlign,\n  HvTableCellType,\n  HvTableCellVariant,\n} from \"../Table\";\nimport TableContext from \"../TableContext\";\nimport TableSectionContext from \"../TableSectionContext\";\nimport { staticClasses, useClasses } from \"./TableCell.styles\";\n\nexport { staticClasses as tableCellClasses };\n\nexport type HvTableCellClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTableCellProps\n  extends Omit<TdHTMLAttributes<HTMLTableCellElement>, \"align\"> {\n  /** The component used for the root node. Either a string to use a HTML element or a component. Defaults to td. */\n  component?: React.ElementType;\n  /** Content to be rendered */\n  children?: React.ReactNode;\n  /** Inline styles to be applied to the root element. */\n  style?: CSSProperties;\n  /** Set the text-align on the table cell content. */\n  align?: HvTableCellAlign;\n  /** Sets the cell's variant. */\n  variant?: HvTableCellVariant | \"listcheckbox\" | \"listactions\";\n  /** Specify the cell's type. The prop defaults to the value inherited from the parent TableHead, TableBody, or TableFooter components. */\n  type?: HvTableCellType;\n  /** Whether or not the cell is part of a sorted column. */\n  sorted?: boolean;\n  /** The cell is part of a sticky column. */\n  stickyColumn?: boolean;\n  /** The cell is part of the last sticky to the left column. */\n  stickyColumnMostLeft?: boolean;\n  /** The cell is part of the first sticky to the right column. */\n  stickyColumnLeastRight?: boolean;\n  /** The cell is part of the first column in the group. */\n  groupColumnMostLeft?: boolean;\n  /** The cell is part of the last column in the group. */\n  groupColumnMostRight?: boolean;\n  /** Whether or not the cell is resizable */\n  resizable?: boolean;\n  /** Whether or not the cell is being resized */\n  resizing?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTableCellClasses;\n}\n\nconst defaultComponent = \"td\";\n\nconst getSortedColor = (color?: string, alpha?: string) => {\n  return checkValidHexColorValue(color) && alpha\n    ? hexToRgbA(color, parseFloat(alpha))\n    : color;\n};\n\n/**\n * `HvTableCell` acts as a `td` element and inherits styles from its context\n */\nexport const HvTableCell = forwardRef<HTMLElement, HvTableCellProps>(\n  (props, externalRef) => {\n    const {\n      children,\n      component,\n      className,\n      style,\n      classes: classesProp,\n      align = \"inherit\",\n      variant = \"default\",\n      type: typeProp,\n      stickyColumn = false,\n      stickyColumnMostLeft = false,\n      stickyColumnLeastRight = false,\n      groupColumnMostLeft = false,\n      groupColumnMostRight = false,\n      sorted = false,\n      resizable = false,\n      resizing = false,\n      ...others\n    } = props;\n    const { classes, cx, css } = useClasses(classesProp);\n    const { colors, rootId } = useTheme();\n    const tableContext = useContext(TableContext);\n    const tableSectionContext = useContext(TableSectionContext);\n\n    const [sortedColorValue, setSortedColorValue] = useState<string>();\n    const [sortedColorAlpha, setSortedColorAlpha] = useState<string>();\n\n    const type = typeProp || tableSectionContext?.type || \"body\";\n\n    const Component =\n      component || tableContext?.components?.Td || defaultComponent;\n\n    const [sortedColor, setSortedColor] = useState(\n      getSortedColor(sortedColorValue, sortedColorAlpha)\n    );\n\n    useEffect(() => {\n      setSortedColorValue(getVarValue(theme.table.rowSortedColor, rootId));\n      setSortedColorAlpha(getVarValue(theme.table.rowSortedColorAlpha, rootId));\n\n      setSortedColor(getSortedColor(sortedColorValue, sortedColorAlpha));\n    }, [colors, sortedColorValue, sortedColorAlpha, rootId]);\n\n    return (\n      <Component\n        ref={externalRef}\n        role={Component === defaultComponent ? null : \"cell\"}\n        style={style}\n        className={cx(\n          classes.root,\n          classes[type],\n          type === \"body\" &&\n            css({\n              [`&.${staticClasses.sorted}`]: {\n                backgroundColor: sortedColor,\n              },\n            }),\n          stickyColumn &&\n            css({\n              [`&.${staticClasses.sorted}`]: {\n                backgroundImage: `linear-gradient(to right, ${sortedColor}, ${sortedColor})`,\n              },\n            }),\n          {\n            [classes[`align${capitalize(align)}`]]: align !== \"inherit\",\n            [classes.variantList]: tableContext.variant === \"listrow\",\n            [classes.variantListHead]:\n              tableContext.variant === \"listrow\" && type !== \"body\",\n            [classes[`variant${capitalize(variant)}`]]: variant !== \"default\",\n            [classes.sorted]: sorted,\n            [classes.stickyColumn]: stickyColumn,\n            [classes.stickyColumnMostLeft]: stickyColumnMostLeft,\n            [classes.stickyColumnLeastRight]: stickyColumnLeastRight,\n            [classes.groupColumnMostLeft]: groupColumnMostLeft,\n            [classes.groupColumnMostRight]: groupColumnMostRight,\n            [classes.resizable]: resizable,\n            [classes.resizing]: resizing,\n          },\n          className\n        )}\n        {...others}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["defaultComponent","getSortedColor","color","alpha","checkValidHexColorValue","hexToRgbA","parseFloat","HvTableCell","forwardRef","props","externalRef","children","component","className","style","classes","classesProp","align","variant","type","typeProp","stickyColumn","stickyColumnMostLeft","stickyColumnLeastRight","groupColumnMostLeft","groupColumnMostRight","sorted","resizable","resizing","others","cx","css","useClasses","colors","rootId","useTheme","tableContext","useContext","TableContext","tableSectionContext","TableSectionContext","sortedColorValue","setSortedColorValue","useState","sortedColorAlpha","setSortedColorAlpha","Component","components","Td","sortedColor","setSortedColor","useEffect","getVarValue","theme","table","rowSortedColor","rowSortedColorAlpha","root","staticClasses","backgroundColor","backgroundImage","capitalize","variantList","variantListHead"],"mappings":"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"}
+{"version":3,"file":"TableCell.js","sources":["../../../../../src/components/Table/TableCell/TableCell.tsx"],"sourcesContent":["import capitalize from \"lodash/capitalize\";\n\nimport {\n  CSSProperties,\n  forwardRef,\n  TdHTMLAttributes,\n  useContext,\n  useEffect,\n  useState,\n} from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { checkValidHexColorValue } from \"@core/utils/checkValidHexColorValue\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { getVarValue } from \"@core/utils/theme\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\nimport { useTheme } from \"@core/hooks/useTheme\";\n\nimport { useDefaultProps } from \"@core/hooks\";\nimport {\n  HvTableCellAlign,\n  HvTableCellType,\n  HvTableCellVariant,\n} from \"../Table\";\nimport TableContext from \"../TableContext\";\nimport TableSectionContext from \"../TableSectionContext\";\nimport { staticClasses, useClasses } from \"./TableCell.styles\";\n\nexport { staticClasses as tableCellClasses };\n\nexport type HvTableCellClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTableCellProps\n  extends Omit<TdHTMLAttributes<HTMLTableCellElement>, \"align\"> {\n  /** The component used for the root node. Either a string to use a HTML element or a component. Defaults to td. */\n  component?: React.ElementType;\n  /** Content to be rendered */\n  children?: React.ReactNode;\n  /** Inline styles to be applied to the root element. */\n  style?: CSSProperties;\n  /** Set the text-align on the table cell content. */\n  align?: HvTableCellAlign;\n  /** Sets the cell's variant. */\n  variant?: HvTableCellVariant | \"listcheckbox\" | \"listactions\";\n  /** Specify the cell's type. The prop defaults to the value inherited from the parent TableHead, TableBody, or TableFooter components. */\n  type?: HvTableCellType;\n  /** Whether or not the cell is part of a sorted column. */\n  sorted?: boolean;\n  /** The cell is part of a sticky column. */\n  stickyColumn?: boolean;\n  /** The cell is part of the last sticky to the left column. */\n  stickyColumnMostLeft?: boolean;\n  /** The cell is part of the first sticky to the right column. */\n  stickyColumnLeastRight?: boolean;\n  /** The cell is part of the first column in the group. */\n  groupColumnMostLeft?: boolean;\n  /** The cell is part of the last column in the group. */\n  groupColumnMostRight?: boolean;\n  /** Whether or not the cell is resizable */\n  resizable?: boolean;\n  /** Whether or not the cell is being resized */\n  resizing?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTableCellClasses;\n}\n\nconst defaultComponent = \"td\";\n\nconst getSortedColor = (color?: string, alpha?: string) => {\n  return checkValidHexColorValue(color) && alpha\n    ? hexToRgbA(color, parseFloat(alpha))\n    : color;\n};\n\n/**\n * `HvTableCell` acts as a `td` element and inherits styles from its context\n */\nexport const HvTableCell = forwardRef<HTMLElement, HvTableCellProps>(\n  (props, externalRef) => {\n    const {\n      children,\n      component,\n      className,\n      style,\n      classes: classesProp,\n      align = \"inherit\",\n      variant = \"default\",\n      type: typeProp,\n      stickyColumn = false,\n      stickyColumnMostLeft = false,\n      stickyColumnLeastRight = false,\n      groupColumnMostLeft = false,\n      groupColumnMostRight = false,\n      sorted = false,\n      resizable = false,\n      resizing = false,\n      ...others\n    } = useDefaultProps(\"HvTableCell\", props);\n    const { classes, cx, css } = useClasses(classesProp);\n    const { colors, rootId } = useTheme();\n    const tableContext = useContext(TableContext);\n    const tableSectionContext = useContext(TableSectionContext);\n\n    const [sortedColorValue, setSortedColorValue] = useState<string>();\n    const [sortedColorAlpha, setSortedColorAlpha] = useState<string>();\n\n    const type = typeProp || tableSectionContext?.type || \"body\";\n\n    const Component =\n      component || tableContext?.components?.Td || defaultComponent;\n\n    const [sortedColor, setSortedColor] = useState(\n      getSortedColor(sortedColorValue, sortedColorAlpha)\n    );\n\n    useEffect(() => {\n      setSortedColorValue(getVarValue(theme.table.rowSortedColor, rootId));\n      setSortedColorAlpha(getVarValue(theme.table.rowSortedColorAlpha, rootId));\n\n      setSortedColor(getSortedColor(sortedColorValue, sortedColorAlpha));\n    }, [colors, sortedColorValue, sortedColorAlpha, rootId]);\n\n    return (\n      <Component\n        ref={externalRef}\n        role={Component === defaultComponent ? null : \"cell\"}\n        style={style}\n        className={cx(\n          classes.root,\n          classes[type],\n          type === \"body\" &&\n            css({\n              [`&.${staticClasses.sorted}`]: {\n                backgroundColor: sortedColor,\n              },\n            }),\n          stickyColumn &&\n            css({\n              [`&.${staticClasses.sorted}`]: {\n                backgroundImage: `linear-gradient(to right, ${sortedColor}, ${sortedColor})`,\n              },\n            }),\n          {\n            [classes[`align${capitalize(align)}`]]: align !== \"inherit\",\n            [classes.variantList]: tableContext.variant === \"listrow\",\n            [classes.variantListHead]:\n              tableContext.variant === \"listrow\" && type !== \"body\",\n            [classes[`variant${capitalize(variant)}`]]: variant !== \"default\",\n            [classes.sorted]: sorted,\n            [classes.stickyColumn]: stickyColumn,\n            [classes.stickyColumnMostLeft]: stickyColumnMostLeft,\n            [classes.stickyColumnLeastRight]: stickyColumnLeastRight,\n            [classes.groupColumnMostLeft]: groupColumnMostLeft,\n            [classes.groupColumnMostRight]: groupColumnMostRight,\n            [classes.resizable]: resizable,\n            [classes.resizing]: resizing,\n          },\n          className\n        )}\n        {...others}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["defaultComponent","getSortedColor","color","alpha","checkValidHexColorValue","hexToRgbA","parseFloat","HvTableCell","forwardRef","props","externalRef","children","component","className","style","classes","classesProp","align","variant","type","typeProp","stickyColumn","stickyColumnMostLeft","stickyColumnLeastRight","groupColumnMostLeft","groupColumnMostRight","sorted","resizable","resizing","others","useDefaultProps","cx","css","useClasses","colors","rootId","useTheme","tableContext","useContext","TableContext","tableSectionContext","TableSectionContext","sortedColorValue","setSortedColorValue","useState","sortedColorAlpha","setSortedColorAlpha","Component","components","Td","sortedColor","setSortedColor","useEffect","getVarValue","theme","table","rowSortedColor","rowSortedColorAlpha","root","staticClasses","backgroundColor","backgroundImage","capitalize","variantList","variantListHead"],"mappings":"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"}

package/dist/esm/components/Table/TableCell/TableCell.styles.js

@@ -8,7 +8,7 @@ const {
   root: {
     verticalAlign: "inherit",
     textAlign: "left",
-    padding: `${theme.table.cellPaddingTop} ${theme.space.xs} ${theme.table.cellPaddingBottom} ${theme.spacing(4)}`,
+    padding: `calc(${theme.space.xs} - 2px ) ${theme.space.xs} calc(${theme.space.xs} - 3px ) ${theme.spacing(4)}`,
     borderBottom: `1px solid ${theme.colors.atmo4}`
   },
   /** Styles applied to the cell when it's in the table head. */
@@ -16,7 +16,7 @@ const {
     height: 52,
     verticalAlign: "top",
     backgroundColor: theme.colors.atmo1,
-    borderTop: `1px solid ${theme.table.headerBorderTopColor}`,
+    borderTop: "1px solid transparent",
     borderBottom: `1px solid ${theme.colors.atmo4}`,
     ...theme.typography.label
   },
@@ -61,7 +61,7 @@ const {
     padding: 0,
     width: 32,
     maxWidth: 32,
-    borderRight: theme.table.cellBorder
+    borderRight: `solid 1px ${theme.colors.atmo4}`
   },
   /** Styles applied to the component root when its variant is actions */
   variantActions: {
@@ -69,7 +69,7 @@ const {
     padding: 0,
     width: 32,
     maxWidth: 32,
-    borderLeft: theme.table.cellBorder
+    borderLeft: `solid 1px ${theme.colors.atmo4}`
   },
   /** Styles applied to the component root when its variant is expand */
   variantExpand: {
@@ -96,7 +96,7 @@ const {
   /** Styles applied to the cell when its variant is list and actions. */
   variantListactions: {
     verticalAlign: "middle",
-    borderLeft: theme.table.cellListBorder,
+    borderLeft: "none",
     paddingLeft: "0",
     textAlign: "center",
     width: 130,
@@ -104,7 +104,7 @@ const {
   },
   /** Styles applied to the cell when its variant is list and checkbox. */
   variantListcheckbox: {
-    borderRight: theme.table.cellListBorder,
+    borderRight: "none",
     padding: 0,
     textAlign: "center",
     width: 34,
@@ -121,22 +121,22 @@ const {
   },
   /** Styles applied to the cell when it's part of the last sticky to the left column. */
   stickyColumnMostLeft: {
-    borderRight: theme.table.cellBorder
+    borderRight: `solid 1px ${theme.colors.atmo4}`
   },
   /** Styles applied to the cell when it's part of the first right sticky column. */
   stickyColumnLeastRight: {
-    borderLeft: theme.table.cellBorder
+    borderLeft: `solid 1px ${theme.colors.atmo4}`
   },
   /** Styles applied to the cell when it's part of the first column in the group. */
   groupColumnMostLeft: {
-    borderLeft: theme.table.cellBorder,
+    borderLeft: `solid 1px ${theme.colors.atmo4}`,
     "&:first-of-type": {
       borderLeft: 0
     }
   },
   /** Styles applied to the cell when it's part of the last column in the group. */
   groupColumnMostRight: {
-    borderRight: theme.table.cellBorder,
+    borderRight: `solid 1px ${theme.colors.atmo4}`,
     // due to the ":has()" selector not being supported in browsers,
     // this need to be managed with inline styles
     // To be uncommented when not needed (see comment in src/Table/hooks/useSticky.js)
@@ -150,7 +150,7 @@ const {
   },
   /** Styles applied to the cell when it's part of a resizable column. */
   resizable: {
-    borderRight: theme.table.cellBorder
+    borderRight: `solid 1px ${theme.colors.atmo4}`
   },
   /** Styles applied to the cell when it's part of a resizing column. */
   resizing: {

package/dist/esm/components/Table/TableCell/TableCell.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableCell.styles.js","sources":["../../../../../src/components/Table/TableCell/TableCell.styles.tsx"],"sourcesContent":["import { CSSProperties } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTableCell\", {\n  /** Styles applied to the component root class. */\n  root: {\n    verticalAlign: \"inherit\",\n    textAlign: \"left\",\n    padding: `${theme.table.cellPaddingTop} ${theme.space.xs} ${\n      theme.table.cellPaddingBottom\n    } ${theme.spacing(4)}`,\n    borderBottom: `1px solid ${theme.colors.atmo4}`,\n  },\n  /** Styles applied to the cell when it's in the table head. */\n  head: {\n    height: 52,\n    verticalAlign: \"top\",\n\n    backgroundColor: theme.colors.atmo1,\n    borderTop: `1px solid ${theme.table.headerBorderTopColor}`,\n    borderBottom: `1px solid ${theme.colors.atmo4}`,\n    ...(theme.typography.label as CSSProperties),\n  },\n  /** Styles applied to the cell when it's in the table body. */\n  body: {\n    minHeight: 32,\n    \"td&\": {\n      height: 32,\n    },\n    backgroundColor: \"inherit\",\n    ...(theme.typography.body as CSSProperties),\n    fontFamily: theme.fontFamily.body,\n  },\n  /** Styles applied to the cell when it's in the table footer. */\n  footer: {},\n  /** Styles applied to the cell when it's part of a sorted column. */\n  sorted: {},\n  /** Styles applied to the component root when it is left aligned */\n  alignLeft: {\n    textAlign: \"left\",\n  },\n  /** Styles applied to the component root when it is center aligned */\n  alignCenter: {\n    textAlign: \"center\",\n  },\n  /** Styles applied to the component root when it is right aligned */\n  alignRight: {\n    textAlign: \"right\",\n    flexDirection: \"row-reverse\",\n  },\n  /** Styles applied to the component root when it is justified */\n  alignJustify: {\n    textAlign: \"justify\",\n  },\n\n  /** Styles applied to the component root when its variant is none */\n  variantNone: {\n    padding: 0,\n  },\n  /** Styles applied to the component root when its variant is checkbox */\n  variantCheckbox: {\n    boxSizing: \"content-box\",\n    padding: 0,\n    width: 32,\n    maxWidth: 32,\n    borderRight: theme.table.cellBorder,\n  },\n  /** Styles applied to the component root when its variant is actions */\n  variantActions: {\n    boxSizing: \"content-box\",\n    padding: 0,\n    width: 32,\n    maxWidth: 32,\n    borderLeft: theme.table.cellBorder,\n  },\n  /** Styles applied to the component root when its variant is expand */\n  variantExpand: {\n    paddingLeft: 0,\n    paddingTop: 0,\n    paddingBottom: 0,\n  },\n  /** Styles applied to the component root when its variant is list */\n  variantList: {\n    minHeight: 52,\n    \"td&\": {\n      height: 52,\n    },\n    padding: \"0, 0, 0, 32px\",\n    border: 0,\n  },\n  /** Styles applied to the cell when its variant is list and the type is head. */\n  variantListHead: {\n    backgroundColor: \"inherit\",\n    \"td&\": {\n      height: 16,\n    },\n  },\n  /** Styles applied to the cell when its variant is list and actions. */\n  variantListactions: {\n    verticalAlign: \"middle\",\n    borderLeft: theme.table.cellListBorder,\n    paddingLeft: \"0\",\n    textAlign: \"center\",\n    width: 130,\n    maxWidth: 130,\n  },\n  /** Styles applied to the cell when its variant is list and checkbox. */\n  variantListcheckbox: {\n    borderRight: theme.table.cellListBorder,\n    padding: 0,\n    textAlign: \"center\",\n    width: 34,\n    maxWidth: 34,\n  },\n  /** Styles applied to the cell when it's part of a sticky column. */\n  stickyColumn: {\n    position: \"sticky\",\n    zIndex: 2,\n    background: theme.colors.atmo2,\n\n    \"&$groupColumnMostRight+$stickyColumn\": {\n      borderLeft: 0,\n    },\n  },\n  /** Styles applied to the cell when it's part of the last sticky to the left column. */\n  stickyColumnMostLeft: {\n    borderRight: theme.table.cellBorder,\n  },\n  /** Styles applied to the cell when it's part of the first right sticky column. */\n  stickyColumnLeastRight: {\n    borderLeft: theme.table.cellBorder,\n  },\n\n  /** Styles applied to the cell when it's part of the first column in the group. */\n  groupColumnMostLeft: {\n    borderLeft: theme.table.cellBorder,\n\n    \"&:first-of-type\": {\n      borderLeft: 0,\n    },\n  },\n  /** Styles applied to the cell when it's part of the last column in the group. */\n  groupColumnMostRight: {\n    borderRight: theme.table.cellBorder,\n\n    // due to the \":has()\" selector not being supported in browsers,\n    // this need to be managed with inline styles\n    // To be uncommented when not needed (see comment in src/Table/hooks/useSticky.js)\n    // \"&:last-child,&:has(+ $stickyColumnLeastRight)\": {\n    \"&:last-child\": {\n      borderRight: 0,\n    },\n\n    \"&+:not($stickyColumn)\": {\n      borderLeft: 0,\n    },\n  },\n\n  /** Styles applied to the cell when it's part of a resizable column. */\n  resizable: {\n    borderRight: theme.table.cellBorder,\n  },\n  /** Styles applied to the cell when it's part of a resizing column. */\n  resizing: {\n    borderRight: `solid 2px ${theme.colors.secondary}`,\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","verticalAlign","textAlign","padding","theme","table","cellPaddingTop","space","xs","cellPaddingBottom","spacing","borderBottom","colors","atmo4","head","height","backgroundColor","atmo1","borderTop","headerBorderTopColor","typography","label","body","minHeight","fontFamily","footer","sorted","alignLeft","alignCenter","alignRight","flexDirection","alignJustify","variantNone","variantCheckbox","boxSizing","width","maxWidth","borderRight","cellBorder","variantActions","borderLeft","variantExpand","paddingLeft","paddingTop","paddingBottom","variantList","border","variantListHead","variantListactions","cellListBorder","variantListcheckbox","stickyColumn","position","zIndex","background","atmo2","stickyColumnMostLeft","stickyColumnLeastRight","groupColumnMostLeft","groupColumnMostRight","resizable","resizing","secondary"],"mappings":"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"}
+{"version":3,"file":"TableCell.styles.js","sources":["../../../../../src/components/Table/TableCell/TableCell.styles.tsx"],"sourcesContent":["import { CSSProperties } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTableCell\", {\n  /** Styles applied to the component root class. */\n  root: {\n    verticalAlign: \"inherit\",\n    textAlign: \"left\",\n    padding: `calc(${theme.space.xs} - 2px ) ${theme.space.xs} calc(${\n      theme.space.xs\n    } - 3px ) ${theme.spacing(4)}`,\n    borderBottom: `1px solid ${theme.colors.atmo4}`,\n  },\n  /** Styles applied to the cell when it's in the table head. */\n  head: {\n    height: 52,\n    verticalAlign: \"top\",\n\n    backgroundColor: theme.colors.atmo1,\n    borderTop: \"1px solid transparent\",\n    borderBottom: `1px solid ${theme.colors.atmo4}`,\n    ...(theme.typography.label as CSSProperties),\n  },\n  /** Styles applied to the cell when it's in the table body. */\n  body: {\n    minHeight: 32,\n    \"td&\": {\n      height: 32,\n    },\n    backgroundColor: \"inherit\",\n    ...(theme.typography.body as CSSProperties),\n    fontFamily: theme.fontFamily.body,\n  },\n  /** Styles applied to the cell when it's in the table footer. */\n  footer: {},\n  /** Styles applied to the cell when it's part of a sorted column. */\n  sorted: {},\n  /** Styles applied to the component root when it is left aligned */\n  alignLeft: {\n    textAlign: \"left\",\n  },\n  /** Styles applied to the component root when it is center aligned */\n  alignCenter: {\n    textAlign: \"center\",\n  },\n  /** Styles applied to the component root when it is right aligned */\n  alignRight: {\n    textAlign: \"right\",\n    flexDirection: \"row-reverse\",\n  },\n  /** Styles applied to the component root when it is justified */\n  alignJustify: {\n    textAlign: \"justify\",\n  },\n\n  /** Styles applied to the component root when its variant is none */\n  variantNone: {\n    padding: 0,\n  },\n  /** Styles applied to the component root when its variant is checkbox */\n  variantCheckbox: {\n    boxSizing: \"content-box\",\n    padding: 0,\n    width: 32,\n    maxWidth: 32,\n    borderRight: `solid 1px ${theme.colors.atmo4}`,\n  },\n  /** Styles applied to the component root when its variant is actions */\n  variantActions: {\n    boxSizing: \"content-box\",\n    padding: 0,\n    width: 32,\n    maxWidth: 32,\n    borderLeft: `solid 1px ${theme.colors.atmo4}`,\n  },\n  /** Styles applied to the component root when its variant is expand */\n  variantExpand: {\n    paddingLeft: 0,\n    paddingTop: 0,\n    paddingBottom: 0,\n  },\n  /** Styles applied to the component root when its variant is list */\n  variantList: {\n    minHeight: 52,\n    \"td&\": {\n      height: 52,\n    },\n    padding: \"0, 0, 0, 32px\",\n    border: 0,\n  },\n  /** Styles applied to the cell when its variant is list and the type is head. */\n  variantListHead: {\n    backgroundColor: \"inherit\",\n    \"td&\": {\n      height: 16,\n    },\n  },\n  /** Styles applied to the cell when its variant is list and actions. */\n  variantListactions: {\n    verticalAlign: \"middle\",\n    borderLeft: \"none\",\n    paddingLeft: \"0\",\n    textAlign: \"center\",\n    width: 130,\n    maxWidth: 130,\n  },\n  /** Styles applied to the cell when its variant is list and checkbox. */\n  variantListcheckbox: {\n    borderRight: \"none\",\n    padding: 0,\n    textAlign: \"center\",\n    width: 34,\n    maxWidth: 34,\n  },\n  /** Styles applied to the cell when it's part of a sticky column. */\n  stickyColumn: {\n    position: \"sticky\",\n    zIndex: 2,\n    background: theme.colors.atmo2,\n\n    \"&$groupColumnMostRight+$stickyColumn\": {\n      borderLeft: 0,\n    },\n  },\n  /** Styles applied to the cell when it's part of the last sticky to the left column. */\n  stickyColumnMostLeft: {\n    borderRight: `solid 1px ${theme.colors.atmo4}`,\n  },\n  /** Styles applied to the cell when it's part of the first right sticky column. */\n  stickyColumnLeastRight: {\n    borderLeft: `solid 1px ${theme.colors.atmo4}`,\n  },\n\n  /** Styles applied to the cell when it's part of the first column in the group. */\n  groupColumnMostLeft: {\n    borderLeft: `solid 1px ${theme.colors.atmo4}`,\n\n    \"&:first-of-type\": {\n      borderLeft: 0,\n    },\n  },\n  /** Styles applied to the cell when it's part of the last column in the group. */\n  groupColumnMostRight: {\n    borderRight: `solid 1px ${theme.colors.atmo4}`,\n\n    // due to the \":has()\" selector not being supported in browsers,\n    // this need to be managed with inline styles\n    // To be uncommented when not needed (see comment in src/Table/hooks/useSticky.js)\n    // \"&:last-child,&:has(+ $stickyColumnLeastRight)\": {\n    \"&:last-child\": {\n      borderRight: 0,\n    },\n\n    \"&+:not($stickyColumn)\": {\n      borderLeft: 0,\n    },\n  },\n\n  /** Styles applied to the cell when it's part of a resizable column. */\n  resizable: {\n    borderRight: `solid 1px ${theme.colors.atmo4}`,\n  },\n  /** Styles applied to the cell when it's part of a resizing column. */\n  resizing: {\n    borderRight: `solid 2px ${theme.colors.secondary}`,\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","verticalAlign","textAlign","padding","theme","space","xs","spacing","borderBottom","colors","atmo4","head","height","backgroundColor","atmo1","borderTop","typography","label","body","minHeight","fontFamily","footer","sorted","alignLeft","alignCenter","alignRight","flexDirection","alignJustify","variantNone","variantCheckbox","boxSizing","width","maxWidth","borderRight","variantActions","borderLeft","variantExpand","paddingLeft","paddingTop","paddingBottom","variantList","border","variantListHead","variantListactions","variantListcheckbox","stickyColumn","position","zIndex","background","atmo2","stickyColumnMostLeft","stickyColumnLeastRight","groupColumnMostLeft","groupColumnMostRight","resizable","resizing","secondary"],"mappings":"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"}

package/dist/esm/components/Table/TableHeader/TableHeader.js

@@ -9,34 +9,36 @@ import TableSectionContext from "../TableSectionContext.js";
 import { getSortIcon, isParagraph } from "./utils.js";
 import { useClasses, staticClasses } from "./TableHeader.styles.js";
 import { HvButton } from "../../Button/Button.js";
+import { useDefaultProps } from "../../../hooks/useDefaultProps.js";
 import { HvTypography } from "../../Typography/Typography.js";
 const defaultComponent = "th";
-const HvTableHeader = forwardRef(({
-  children,
-  component,
-  className,
-  style,
-  classes: classesProp,
-  scope: scopeProp,
-  align = "inherit",
-  variant = "default",
-  type: typeProp,
-  stickyColumn = false,
-  stickyColumnMostLeft = false,
-  stickyColumnLeastRight = false,
-  groupColumnMostLeft = false,
-  groupColumnMostRight = false,
-  sortDirection = "none",
-  sorted,
-  sortable,
-  headerTextProps,
-  resizerProps = {},
-  resizable = false,
-  resizing = false,
-  sortButtonProps,
-  ...others
-}, externalRef) => {
+const HvTableHeader = forwardRef((props, externalRef) => {
   var _a;
+  const {
+    children,
+    component,
+    className,
+    style,
+    classes: classesProp,
+    scope: scopeProp,
+    align = "inherit",
+    variant = "default",
+    type: typeProp,
+    stickyColumn = false,
+    stickyColumnMostLeft = false,
+    stickyColumnLeastRight = false,
+    groupColumnMostLeft = false,
+    groupColumnMostRight = false,
+    sortDirection = "none",
+    sorted,
+    sortable,
+    headerTextProps,
+    resizerProps = {},
+    resizable = false,
+    resizing = false,
+    sortButtonProps,
+    ...others
+  } = useDefaultProps("HvTableHeader", props);
   const {
     classes,
     cx,

package/dist/esm/components/Table/TableHeader/TableHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeader.js","sources":["../../../../../src/components/Table/TableHeader/TableHeader.tsx"],"sourcesContent":["import {\n  forwardRef,\n  HTMLAttributes,\n  ThHTMLAttributes,\n  useContext,\n  useMemo,\n} from \"react\";\n\nimport capitalize from \"lodash/capitalize\";\n\nimport { hexToRgb, alpha } from \"@mui/material\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvTypography, HvTypographyProps } from \"@core/components/Typography\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvButton, HvButtonProps } from \"@core/components/Button\";\n\nimport TableContext from \"../TableContext\";\nimport TableSectionContext from \"../TableSectionContext\";\nimport { getSortIcon, isParagraph } from \"./utils\";\nimport { useClasses, staticClasses } from \"./TableHeader.styles\";\nimport {\n  HvTableCellAlign,\n  HvTableCellType,\n  HvTableCellVariant,\n} from \"../Table\";\n\nexport { staticClasses as tableHeaderClasses };\n\nexport type HvTableHeaderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTableHeaderProps\n  extends Omit<ThHTMLAttributes<HTMLTableCellElement>, \"align\"> {\n  /** The component used for the root node. Either a string to use a HTML element or a component. Defaults to th. */\n  component?: React.ElementType;\n  /** Content to be rendered */\n  children?: React.ReactNode;\n  /** The scope of cells that the header element relates to. */\n  scope?: \"col\" | \"row\" | \"colgroup\" | \"rowgroup\";\n  /** Set the text-align on the table cell content. */\n  align?: HvTableCellAlign;\n  /** Sets the cell's variant. */\n  variant?: HvTableCellVariant;\n  /** Specify the cell type. The prop defaults to the value inherited from the parent TableHead, TableBody, or TableFooter components. */\n  type?: HvTableCellType;\n  /** The cell is part of a sticky column. */\n  stickyColumn?: boolean;\n  /** The cell is part of the last sticky to the left column. */\n  stickyColumnMostLeft?: boolean;\n  /** The cell is part of the first sticky to the right column. */\n  stickyColumnLeastRight?: boolean;\n  /** The cell is part of the first column in the group. */\n  groupColumnMostLeft?: boolean;\n  /** The cell is part of the last column in the group. */\n  groupColumnMostRight?: boolean;\n  /** Whether or not the cell is sorted */\n  sorted?: boolean;\n  /** Whether or not the cell is sortable */\n  sortable?: boolean;\n  /** Set sort direction icon and aria-sort. */\n  sortDirection?: \"ascending\" | \"descending\" | false;\n  /** Extra props to be passed onto the text in the header. */\n  headerTextProps?: HvTypographyProps;\n  /** Whether or not the cell is resizable */\n  resizable?: boolean;\n  /** Whether or not the cell is being resized */\n  resizing?: boolean;\n  /** The resize props injected in the resize handler */\n  resizerProps?: HTMLAttributes<HTMLDivElement>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTableHeaderClasses;\n  /** Extra props to be passed onto the sort button in the header. */\n  sortButtonProps?: HvButtonProps;\n}\n\nconst defaultComponent = \"th\";\n\n/**\n * `HvTableHeader` acts as a `th` element and inherits styles from its context\n */\nexport const HvTableHeader = forwardRef<HTMLElement, HvTableHeaderProps>(\n  (\n    {\n      children,\n      component,\n      className,\n      style,\n      classes: classesProp,\n      scope: scopeProp,\n      align = \"inherit\",\n      variant = \"default\",\n      type: typeProp,\n      stickyColumn = false,\n      stickyColumnMostLeft = false,\n      stickyColumnLeastRight = false,\n      groupColumnMostLeft = false,\n      groupColumnMostRight = false,\n      sortDirection = \"none\",\n      sorted,\n      sortable,\n      headerTextProps,\n      resizerProps = {},\n      resizable = false,\n      resizing = false,\n      sortButtonProps,\n      ...others\n    },\n    externalRef\n  ) => {\n    const { classes, cx, css } = useClasses(classesProp);\n\n    const { colors } = useTheme();\n    const tableContext = useContext(TableContext);\n    const tableSectionContext = useContext(TableSectionContext);\n\n    const type = typeProp || tableSectionContext?.type || \"body\";\n    const isHeadCell = type === \"head\";\n\n    const scope = scopeProp ?? (isHeadCell ? \"col\" : \"row\");\n\n    const Sort = useMemo(\n      () => getSortIcon(sorted && sortDirection),\n      [sorted, sortDirection]\n    );\n\n    const Component =\n      component || tableContext?.components?.Th || defaultComponent;\n\n    const role =\n      Component === defaultComponent\n        ? null\n        : isHeadCell\n        ? \"columnheader\"\n        : \"rowheader\";\n    const paragraph = isParagraph(children);\n\n    return (\n      <Component\n        ref={externalRef}\n        role={role}\n        scope={scope}\n        style={style}\n        className={cx(\n          classes.root,\n          classes[type],\n          type === \"body\" &&\n            css({\n              [`&.${staticClasses.sorted}`]: {\n                backgroundColor: alpha(\n                  hexToRgb(colors?.atmo1 || theme.colors.atmo1),\n                  0.4\n                ),\n              },\n            }),\n          {\n            [classes.groupColumnMostLeft]: groupColumnMostLeft,\n            [classes.groupColumnMostRight]: groupColumnMostRight,\n            [classes.sortable]: sortable,\n            [classes.sorted]: sorted,\n            [classes.resizable]: resizable,\n            [classes.resizing]: resizing,\n            [classes.stickyColumn]: stickyColumn,\n            [classes.stickyColumnMostLeft]: stickyColumnMostLeft,\n            [classes.stickyColumnLeastRight]: stickyColumnLeastRight,\n            [classes.variantList]: tableContext.variant === \"listrow\",\n            [classes[`align${capitalize(align)}`]]: align !== \"inherit\",\n            [classes[`variant${capitalize(variant)}`]]: variant !== \"default\",\n          },\n          className\n        )}\n        aria-sort={sortable ? sortDirection : undefined}\n        {...others}\n      >\n        <div\n          className={cx(classes.headerContent, {\n            [classes[`alignFlex${capitalize(align)}`]]: align !== \"inherit\",\n          })}\n        >\n          {isHeadCell && sortable && (\n            <HvButton\n              className={classes.sortButton}\n              icon\n              overrideIconColors={false}\n              aria-label=\"Sort\"\n              {...sortButtonProps}\n            >\n              <Sort className={classes.sortIcon} />\n            </HvButton>\n          )}\n          <HvTypography\n            component=\"div\"\n            className={cx({\n              [classes.headerText]: !paragraph,\n              [classes.headerParagraph]: paragraph,\n              [classes.sortableHeaderText]: sortable,\n            })}\n            variant=\"label\"\n            {...headerTextProps}\n          >\n            {children}\n          </HvTypography>\n          {resizable && <div {...resizerProps} className={classes.resizer} />}\n        </div>\n      </Component>\n    );\n  }\n);\n"],"names":["defaultComponent","HvTableHeader","forwardRef","children","component","className","style","classes","classesProp","scope","scopeProp","align","variant","type","typeProp","stickyColumn","stickyColumnMostLeft","stickyColumnLeastRight","groupColumnMostLeft","groupColumnMostRight","sortDirection","sorted","sortable","headerTextProps","resizerProps","resizable","resizing","sortButtonProps","others","externalRef","cx","css","useClasses","colors","useTheme","tableContext","useContext","TableContext","tableSectionContext","TableSectionContext","isHeadCell","Sort","useMemo","getSortIcon","Component","components","Th","role","paragraph","isParagraph","root","staticClasses","backgroundColor","alpha","hexToRgb","atmo1","theme","variantList","capitalize","undefined","headerContent","sortButton","sortIcon","headerText","headerParagraph","sortableHeaderText","resizer"],"mappings":";;;;;;;;;;;;AA6EA,MAAMA,mBAAmB;AAKZC,MAAAA,gBAAgBC,WAC3B,CACE;AAAA,EACEC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AAAAA,EACTC,OAAOC;AAAAA,EACPC,QAAQ;AAAA,EACRC,UAAU;AAAA,EACVC,MAAMC;AAAAA,EACNC,eAAe;AAAA,EACfC,uBAAuB;AAAA,EACvBC,yBAAyB;AAAA,EACzBC,sBAAsB;AAAA,EACtBC,uBAAuB;AAAA,EACvBC,gBAAgB;AAAA,EAChBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,eAAe,CAAC;AAAA,EAChBC,YAAY;AAAA,EACZC,WAAW;AAAA,EACXC;AAAAA,EACA,GAAGC;AACL,GACAC,gBACG;;AACG,QAAA;AAAA,IAAEtB;AAAAA,IAASuB;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,WAAWxB,WAAW;AAE7C,QAAA;AAAA,IAAEyB;AAAAA,MAAWC,SAAS;AACtBC,QAAAA,eAAeC,WAAWC,YAAY;AACtCC,QAAAA,sBAAsBF,WAAWG,mBAAmB;AAEpD1B,QAAAA,OAAOC,aAAYwB,2DAAqBzB,SAAQ;AACtD,QAAM2B,aAAa3B,SAAS;AAEtBJ,QAAAA,QAAQC,cAAc8B,aAAa,QAAQ;AAE3CC,QAAAA,OAAOC,QACX,MAAMC,YAAYtB,UAAUD,aAAa,GACzC,CAACC,QAAQD,aAAa,CACxB;AAEA,QAAMwB,YACJxC,eAAa+B,kDAAcU,eAAdV,mBAA0BW,OAAM9C;AAE/C,QAAM+C,OACJH,cAAc5C,mBACV,OACAwC,aACA,iBACA;AACAQ,QAAAA,YAAYC,YAAY9C,QAAQ;AAEtC,6BACG,WACC,EAAA,KAAK0B,aACL,MACA,OACA,OACA,WAAWC,GACTvB,QAAQ2C,MACR3C,QAAQM,IAAI,GACZA,SAAS,UACPkB,IAAI;AAAA,IACF,CAAE,KAAIoB,cAAc9B,MAAO,EAAC,GAAG;AAAA,MAC7B+B,iBAAiBC,MACfC,UAASrB,iCAAQsB,UAASC,MAAMvB,OAAOsB,KAAK,GAC5C,GACF;AAAA,IACF;AAAA,EAAA,CACD,GACH;AAAA,IACE,CAAChD,QAAQW,mBAAmB,GAAGA;AAAAA,IAC/B,CAACX,QAAQY,oBAAoB,GAAGA;AAAAA,IAChC,CAACZ,QAAQe,QAAQ,GAAGA;AAAAA,IACpB,CAACf,QAAQc,MAAM,GAAGA;AAAAA,IAClB,CAACd,QAAQkB,SAAS,GAAGA;AAAAA,IACrB,CAAClB,QAAQmB,QAAQ,GAAGA;AAAAA,IACpB,CAACnB,QAAQQ,YAAY,GAAGA;AAAAA,IACxB,CAACR,QAAQS,oBAAoB,GAAGA;AAAAA,IAChC,CAACT,QAAQU,sBAAsB,GAAGA;AAAAA,IAClC,CAACV,QAAQkD,WAAW,GAAGtB,aAAavB,YAAY;AAAA,IAChD,CAACL,QAAS,QAAOmD,WAAW/C,KAAK,CAAE,EAAC,CAAC,GAAGA,UAAU;AAAA,IAClD,CAACJ,QAAS,UAASmD,WAAW9C,OAAO,CAAE,EAAC,CAAC,GAAGA,YAAY;AAAA,EAAA,GAE1DP,SACF,GACA,aAAWiB,WAAWF,gBAAgBuC,QACtC,GAAI/B,QAEJ,UAAC,qBAAA,OAAA,EACC,WAAWE,GAAGvB,QAAQqD,eAAe;AAAA,IACnC,CAACrD,QAAS,YAAWmD,WAAW/C,KAAK,CAAE,EAAC,CAAC,GAAGA,UAAU;AAAA,EACvD,CAAA,GAEA6B,UAAAA;AAAAA,IAAAA,cAAclB,YACZ,oBAAA,UAAA,EACC,WAAWf,QAAQsD,YACnB,MAAI,MACJ,oBAAoB,OACpB,cAAW,QACX,GAAIlC,iBAEJ,UAAA,oBAAC,QAAK,WAAWpB,QAAQuD,UAAS,EACpC,CAAA;AAAA,IAED,oBAAA,cAAA,EACC,WAAU,OACV,WAAWhC,GAAG;AAAA,MACZ,CAACvB,QAAQwD,UAAU,GAAG,CAACf;AAAAA,MACvB,CAACzC,QAAQyD,eAAe,GAAGhB;AAAAA,MAC3B,CAACzC,QAAQ0D,kBAAkB,GAAG3C;AAAAA,IAC/B,CAAA,GACD,SAAQ,SACJC,GAAAA,iBAEHpB,SACH,CAAA;AAAA,IACCsB,aAAc,oBAAA,OAAA,EAAQD,GAAAA,cAAc,WAAWjB,QAAQ2D,SAAW;AAAA,EAAA,EACrE,CAAA,EACF,CAAA;AAEJ,CACF;"}
+{"version":3,"file":"TableHeader.js","sources":["../../../../../src/components/Table/TableHeader/TableHeader.tsx"],"sourcesContent":["import {\n  forwardRef,\n  HTMLAttributes,\n  ThHTMLAttributes,\n  useContext,\n  useMemo,\n} from \"react\";\n\nimport capitalize from \"lodash/capitalize\";\n\nimport { hexToRgb, alpha } from \"@mui/material\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvTypography, HvTypographyProps } from \"@core/components/Typography\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvButton, HvButtonProps } from \"@core/components/Button\";\n\nimport { useDefaultProps } from \"@core/hooks\";\nimport TableContext from \"../TableContext\";\nimport TableSectionContext from \"../TableSectionContext\";\nimport { getSortIcon, isParagraph } from \"./utils\";\nimport { useClasses, staticClasses } from \"./TableHeader.styles\";\nimport {\n  HvTableCellAlign,\n  HvTableCellType,\n  HvTableCellVariant,\n} from \"../Table\";\n\nexport { staticClasses as tableHeaderClasses };\n\nexport type HvTableHeaderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTableHeaderProps\n  extends Omit<ThHTMLAttributes<HTMLTableCellElement>, \"align\"> {\n  /** The component used for the root node. Either a string to use a HTML element or a component. Defaults to th. */\n  component?: React.ElementType;\n  /** Content to be rendered */\n  children?: React.ReactNode;\n  /** The scope of cells that the header element relates to. */\n  scope?: \"col\" | \"row\" | \"colgroup\" | \"rowgroup\";\n  /** Set the text-align on the table cell content. */\n  align?: HvTableCellAlign;\n  /** Sets the cell's variant. */\n  variant?: HvTableCellVariant;\n  /** Specify the cell type. The prop defaults to the value inherited from the parent TableHead, TableBody, or TableFooter components. */\n  type?: HvTableCellType;\n  /** The cell is part of a sticky column. */\n  stickyColumn?: boolean;\n  /** The cell is part of the last sticky to the left column. */\n  stickyColumnMostLeft?: boolean;\n  /** The cell is part of the first sticky to the right column. */\n  stickyColumnLeastRight?: boolean;\n  /** The cell is part of the first column in the group. */\n  groupColumnMostLeft?: boolean;\n  /** The cell is part of the last column in the group. */\n  groupColumnMostRight?: boolean;\n  /** Whether or not the cell is sorted */\n  sorted?: boolean;\n  /** Whether or not the cell is sortable */\n  sortable?: boolean;\n  /** Set sort direction icon and aria-sort. */\n  sortDirection?: \"ascending\" | \"descending\" | false;\n  /** Extra props to be passed onto the text in the header. */\n  headerTextProps?: HvTypographyProps;\n  /** Whether or not the cell is resizable */\n  resizable?: boolean;\n  /** Whether or not the cell is being resized */\n  resizing?: boolean;\n  /** The resize props injected in the resize handler */\n  resizerProps?: HTMLAttributes<HTMLDivElement>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTableHeaderClasses;\n  /** Extra props to be passed onto the sort button in the header. */\n  sortButtonProps?: HvButtonProps;\n}\n\nconst defaultComponent = \"th\";\n\n/**\n * `HvTableHeader` acts as a `th` element and inherits styles from its context\n */\nexport const HvTableHeader = forwardRef<HTMLElement, HvTableHeaderProps>(\n  (props, externalRef) => {\n    const {\n      children,\n      component,\n      className,\n      style,\n      classes: classesProp,\n      scope: scopeProp,\n      align = \"inherit\",\n      variant = \"default\",\n      type: typeProp,\n      stickyColumn = false,\n      stickyColumnMostLeft = false,\n      stickyColumnLeastRight = false,\n      groupColumnMostLeft = false,\n      groupColumnMostRight = false,\n      sortDirection = \"none\",\n      sorted,\n      sortable,\n      headerTextProps,\n      resizerProps = {},\n      resizable = false,\n      resizing = false,\n      sortButtonProps,\n      ...others\n    } = useDefaultProps(\"HvTableHeader\", props);\n    const { classes, cx, css } = useClasses(classesProp);\n\n    const { colors } = useTheme();\n    const tableContext = useContext(TableContext);\n    const tableSectionContext = useContext(TableSectionContext);\n\n    const type = typeProp || tableSectionContext?.type || \"body\";\n    const isHeadCell = type === \"head\";\n\n    const scope = scopeProp ?? (isHeadCell ? \"col\" : \"row\");\n\n    const Sort = useMemo(\n      () => getSortIcon(sorted && sortDirection),\n      [sorted, sortDirection]\n    );\n\n    const Component =\n      component || tableContext?.components?.Th || defaultComponent;\n\n    const role =\n      Component === defaultComponent\n        ? null\n        : isHeadCell\n        ? \"columnheader\"\n        : \"rowheader\";\n    const paragraph = isParagraph(children);\n\n    return (\n      <Component\n        ref={externalRef}\n        role={role}\n        scope={scope}\n        style={style}\n        className={cx(\n          classes.root,\n          classes[type],\n          type === \"body\" &&\n            css({\n              [`&.${staticClasses.sorted}`]: {\n                backgroundColor: alpha(\n                  hexToRgb(colors?.atmo1 || theme.colors.atmo1),\n                  0.4\n                ),\n              },\n            }),\n          {\n            [classes.groupColumnMostLeft]: groupColumnMostLeft,\n            [classes.groupColumnMostRight]: groupColumnMostRight,\n            [classes.sortable]: sortable,\n            [classes.sorted]: sorted,\n            [classes.resizable]: resizable,\n            [classes.resizing]: resizing,\n            [classes.stickyColumn]: stickyColumn,\n            [classes.stickyColumnMostLeft]: stickyColumnMostLeft,\n            [classes.stickyColumnLeastRight]: stickyColumnLeastRight,\n            [classes.variantList]: tableContext.variant === \"listrow\",\n            [classes[`align${capitalize(align)}`]]: align !== \"inherit\",\n            [classes[`variant${capitalize(variant)}`]]: variant !== \"default\",\n          },\n          className\n        )}\n        aria-sort={sortable ? sortDirection : undefined}\n        {...others}\n      >\n        <div\n          className={cx(classes.headerContent, {\n            [classes[`alignFlex${capitalize(align)}`]]: align !== \"inherit\",\n          })}\n        >\n          {isHeadCell && sortable && (\n            <HvButton\n              className={classes.sortButton}\n              icon\n              overrideIconColors={false}\n              aria-label=\"Sort\"\n              {...sortButtonProps}\n            >\n              <Sort className={classes.sortIcon} />\n            </HvButton>\n          )}\n          <HvTypography\n            component=\"div\"\n            className={cx({\n              [classes.headerText]: !paragraph,\n              [classes.headerParagraph]: paragraph,\n              [classes.sortableHeaderText]: sortable,\n            })}\n            variant=\"label\"\n            {...headerTextProps}\n          >\n            {children}\n          </HvTypography>\n          {resizable && <div {...resizerProps} className={classes.resizer} />}\n        </div>\n      </Component>\n    );\n  }\n);\n"],"names":["defaultComponent","HvTableHeader","forwardRef","props","externalRef","children","component","className","style","classes","classesProp","scope","scopeProp","align","variant","type","typeProp","stickyColumn","stickyColumnMostLeft","stickyColumnLeastRight","groupColumnMostLeft","groupColumnMostRight","sortDirection","sorted","sortable","headerTextProps","resizerProps","resizable","resizing","sortButtonProps","others","useDefaultProps","cx","css","useClasses","colors","useTheme","tableContext","useContext","TableContext","tableSectionContext","TableSectionContext","isHeadCell","Sort","useMemo","getSortIcon","Component","components","Th","role","paragraph","isParagraph","root","staticClasses","backgroundColor","alpha","hexToRgb","atmo1","theme","variantList","capitalize","undefined","headerContent","sortButton","sortIcon","headerText","headerParagraph","sortableHeaderText","resizer"],"mappings":"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"}

package/dist/esm/components/Table/TableHeader/TableHeader.styles.js

@@ -22,7 +22,7 @@ const {
     borderBottom: `1px solid ${theme.colors.atmo4}`,
     "*:first-of-type > &": {
       height: "var(--first-row-cell-height)",
-      borderTop: `1px solid ${theme.table.headerBorderTopColor}`
+      borderTop: "1px solid transparent"
     },
     "&$variantList": {
       backgroundColor: "inherit",
@@ -37,13 +37,13 @@ const {
       paddingLeft: 0,
       cursor: "pointer",
       "&:hover": {
-        backgroundColor: theme.table.headerHoverColor,
+        backgroundColor: "transparent",
         "& $sortIcon": {
           visibility: "visible"
         }
       },
       "&:focus-within": {
-        backgroundColor: theme.table.headerHoverColor,
+        backgroundColor: "transparent",
         "& $sortIcon": {
           visibility: "visible"
         }
@@ -114,7 +114,7 @@ const {
       boxShadow: "none",
       backgroundColor: "transparent",
       "&:hover": {
-        backgroundColor: theme.table.sortButtonHoverColor
+        backgroundColor: theme.colors.primary_20
       }
     }
   },