@hitachivantara/uikit-react-core 5.80.1 → 5.80.2

package/dist/cjs/Header/Brand/Brand.cjs

@@ -5,7 +5,7 @@ const React = require("react");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const Brand_styles = require("./Brand.styles.cjs");
 const Typography = require("../../Typography/Typography.cjs");
-const HvHeaderBrand = React.forwardRef((props, ref) => {
+const HvHeaderBrand = React.forwardRef(function HvHeaderBrand2(props, ref) {
   const {
     classes: classesProp,
     logo,

package/dist/cjs/Header/Header.cjs

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const Header_styles = require("./Header.styles.cjs");
-const HvHeader = (props) => {
+const HvHeader = React.forwardRef(function HvHeader2(props, ref) {
   const {
     className,
     classes: classesProp,
@@ -15,6 +16,7 @@ const HvHeader = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "header",
     {
+      ref,
       style: { position },
       className: cx(
         classes.root,
@@ -26,6 +28,6 @@ const HvHeader = (props) => {
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.header, children })
     }
   );
-};
+});
 exports.headerClasses = Header_styles.staticClasses;
 exports.HvHeader = HvHeader;

package/dist/cjs/Header/Navigation/Navigation.cjs

@@ -8,7 +8,7 @@ const useSelectionPath = require("./useSelectionPath.cjs");
 const FocusContext = require("./utils/FocusContext.cjs");
 const SelectionContext = require("./utils/SelectionContext.cjs");
 const MenuBar = require("./MenuBar/MenuBar.cjs");
-const HvHeaderNavigation = React.forwardRef((props, ref) => {
+const HvHeaderNavigation = React.forwardRef(function HvHeaderNavigation2(props, ref) {
   const {
     data,
     selected,

package/dist/cjs/Input/Input.cjs

@@ -46,7 +46,7 @@ const changeInputValue = (input, value = "") => {
   setInputValue?.call(input, value);
   input?.dispatchEvent(event);
 };
-const HvInput = React.forwardRef((props, ref) => {
+const HvInput = React.forwardRef(function HvInput2(props, ref) {
   const {
     classes: classesProp,
     className,

package/dist/cjs/ListContainer/ListContainer.cjs

@@ -6,7 +6,7 @@ const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const useForkRef = require("../hooks/useForkRef.cjs");
 const ListContainer_styles = require("./ListContainer.styles.cjs");
 const ListContext = require("./ListContext/ListContext.cjs");
-const HvListContainer = React.forwardRef((props, ref) => {
+const HvListContainer = React.forwardRef(function HvListContainer2(props, ref) {
   const {
     id,
     classes: classesProp,

package/dist/cjs/ListContainer/ListItem/ListItem.cjs

@@ -21,7 +21,7 @@ const applyClassNameToElement = (element, className) => {
     className
   });
 };
-const HvListItem = React.forwardRef((props, ref) => {
+const HvListItem = React.forwardRef(function HvListItem2(props, ref) {
   const {
     classes: classesProp,
     className,

package/dist/cjs/Loading/Loading.cjs

@@ -1,12 +1,13 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const helpers = require("../utils/helpers.cjs");
 const Loading_styles = require("./Loading.styles.cjs");
 const Typography = require("../Typography/Typography.cjs");
-const HvLoading = (props) => {
+const HvLoading = React.forwardRef(function HvLoading2(props, ref) {
   const {
     color,
     hidden,
@@ -23,6 +24,7 @@ const HvLoading = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
+      ref,
       hidden: !!hidden,
       style: uikitReactUtils.mergeStyles(style, {
         color: uikitStyles.getColor(color, small ? "secondary" : "brand"),
@@ -53,6 +55,6 @@ const HvLoading = (props) => {
       ]
     }
   );
-};
+});
 exports.loadingClasses = Loading_styles.staticClasses;
 exports.HvLoading = HvLoading;

package/dist/cjs/LoadingContainer/LoadingContainer.cjs

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const LoadingContainer_styles = require("./LoadingContainer.styles.cjs");
 const Loading = require("../Loading/Loading.cjs");
-const HvLoadingContainer = (props) => {
+const HvLoadingContainer = React.forwardRef(function HvLoadingContainer2(props, ref) {
   const {
     children,
     className,
@@ -18,7 +19,7 @@ const HvLoadingContainer = (props) => {
   } = uikitReactUtils.useDefaultProps("HvLoadingContainer", props);
   const { classes, cx } = LoadingContainer_styles.useClasses(classesProp);
   const ariaLabel = ariaLabelProp || typeof label === "string" && label || "Loading";
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(classes.root, className), ...others, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cx(classes.root, className), ...others, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       Loading.HvLoading,
       {
@@ -35,6 +36,6 @@ const HvLoadingContainer = (props) => {
     ),
     children
   ] });
-};
+});
 exports.loadingContainerClasses = LoadingContainer_styles.staticClasses;
 exports.HvLoadingContainer = HvLoadingContainer;

package/dist/cjs/Login/Login.cjs

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const Login_styles = require("./Login.styles.cjs");
-const HvLogin = (props) => {
+const HvLogin = React.forwardRef(function HvLogin2(props, ref) {
   const {
-    id,
     className,
     classes: classesProp,
     children,
@@ -16,7 +16,7 @@ const HvLogin = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      id,
+      ref,
       className: cx(classes.root, className),
       style: {
         backgroundImage: background && `url(${background})`
@@ -25,6 +25,6 @@ const HvLogin = (props) => {
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.formContainer, children })
     }
   );
-};
+});
 exports.loginClasses = Login_styles.staticClasses;
 exports.HvLogin = HvLogin;

package/dist/cjs/Pagination/Pagination.cjs

@@ -41,7 +41,7 @@ const DEFAULT_LABELS = {
   /** Label of the last page button */
   lastPage: "Last Page"
 };
-const HvPagination = (props) => {
+const HvPagination = React.forwardRef(function HvPagination2(props, ref) {
   const {
     classes: classesProp,
     className,
@@ -107,7 +107,7 @@ const HvPagination = (props) => {
       ...currentPageInputProps
     }
   ) });
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { id, className: cx(classes.root, className), ...others, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, id, className: cx(classes.root, className), ...others, children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.pageSizeOptions, ...showPageProps, children: showPageSizeOptions && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       !isXsDown && /* @__PURE__ */ jsxRuntime.jsx(
         Typography.HvTypography,
@@ -202,6 +202,6 @@ const HvPagination = (props) => {
       )
     ] })
   ] });
-};
+});
 exports.paginationClasses = Pagination_styles.staticClasses;
 exports.HvPagination = HvPagination;

package/dist/cjs/Panel/Panel.cjs

@@ -5,7 +5,7 @@ const React = require("react");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const Panel_styles = require("./Panel.styles.cjs");
 const HvPanel = React.forwardRef(
-  (props, ref) => {
+  function HvPanel2(props, ref) {
     const {
       className,
       classes: classesProp,

package/dist/cjs/Panel/Panel.styles.cjs

@@ -7,7 +7,8 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvPanel", {
     position: "relative",
     padding: uikitStyles.theme.space.sm,
     backgroundColor: uikitStyles.theme.colors.atmo1,
-    overflow: "auto"
+    overflow: "auto",
+    borderRadius: "inherit"
   }
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/Radio/Radio.cjs

@@ -13,7 +13,7 @@ const FormElement = require("../Forms/FormElement/FormElement.cjs");
 const Label = require("../Forms/Label/Label.cjs");
 const WarningText = require("../Forms/WarningText/WarningText.cjs");
 const HvRadio = React.forwardRef(
-  (props, ref) => {
+  function HvRadio2(props, ref) {
     const {
       classes: classesProp,
       className,

package/dist/cjs/RadioGroup/RadioGroup.cjs

@@ -25,7 +25,7 @@ const getValueFromSelectedChildren = (children) => {
   return null;
 };
 const HvRadioGroup = React.forwardRef(
-  (props, ref) => {
+  function HvRadioGroup2(props, ref) {
     const {
       id,
       classes: classesProp,

package/dist/cjs/Section/Section.cjs

@@ -8,7 +8,7 @@ const useExpandable = require("../hooks/useExpandable.cjs");
 const Section_styles = require("./Section.styles.cjs");
 const Button = require("../Button/Button.cjs");
 const HvSection = React.forwardRef(
-  (props, ref) => {
+  function HvSection2(props, ref) {
     const {
       id,
       classes: classesProp,
@@ -31,49 +31,44 @@ const HvSection = React.forwardRef(
       expanded,
       defaultExpanded
     });
-    const showContent = expandable ? !!isOpen : true;
+    const hasHeader = title || actions || expandable;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         ref,
         id,
-        className: cx(classes.root, className),
+        className: cx(classes.root, className, {
+          [classes.raisedHeader]: raisedHeader && isOpen
+        }),
         ...others,
         children: [
-          (title || actions || expandable) && /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              className: cx(classes.header, {
-                [classes.raisedHeader]: raisedHeader && isOpen
-              }),
-              children: [
-                expandable && /* @__PURE__ */ jsxRuntime.jsx(
-                  Button.HvButton,
-                  {
-                    icon: true,
-                    onClick: (event) => {
-                      toggleOpen();
-                      onToggle?.(event, !isOpen);
-                    },
-                    "aria-label": isOpen ? "Collapse" : "Expand",
-                    ...buttonProps,
-                    ...expandButtonProps,
-                    children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Down, { style: { rotate: isOpen ? "180deg" : void 0 } })
-                  }
-                ),
-                title,
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.actions, children: actions })
-              ]
-            }
-          ),
+          hasHeader && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.header, children: [
+            expandable && /* @__PURE__ */ jsxRuntime.jsx(
+              Button.HvButton,
+              {
+                icon: true,
+                onClick: (event) => {
+                  toggleOpen();
+                  onToggle?.(event, !isOpen);
+                },
+                "aria-label": isOpen ? "Collapse" : "Expand",
+                ...buttonProps,
+                ...expandButtonProps,
+                children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Down, { style: { rotate: isOpen ? "180deg" : void 0 } })
+              }
+            ),
+            title,
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.actions, children: actions })
+          ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               ref: contentRef,
               hidden: !isOpen,
               className: cx(classes.content, {
-                [classes.hidden]: !showContent,
-                [classes.spaceTop]: !(title || actions || expandable)
+                [classes.hidden]: expandable && !isOpen,
+                [classes.spaceTop]: !hasHeader,
+                [classes.hasHeader]: hasHeader
               }),
               ...expandable && regionProps,
               children

package/dist/cjs/Section/Section.styles.cjs

@@ -20,21 +20,25 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSection",
     padding: uikitStyles.theme.space.sm
   },
   content: {
-    padding: uikitStyles.theme.spacing(0, "sm", "sm", "sm")
+    padding: uikitStyles.theme.space.sm,
+    borderRadius: "inherit"
   },
-  spaceTop: {
-    paddingTop: uikitStyles.theme.space.sm
+  hasHeader: {
+    paddingTop: 0
   },
+  /** @deprecated use `hasHeader` instead */
+  spaceTop: {},
   actions: {
     display: "flex",
     gap: uikitStyles.theme.space.xs,
-    position: "absolute",
-    right: 0
+    marginLeft: "auto"
   },
   raisedHeader: {
-    zIndex: 1,
-    boxShadow: uikitStyles.theme.colors.shadow,
-    "+ div": {
+    "& $header": {
+      zIndex: 1,
+      boxShadow: uikitStyles.theme.colors.shadow
+    },
+    "& $content": {
       paddingTop: uikitStyles.theme.space.sm
     }
   }

package/dist/cjs/Select/OptionGroup.cjs

@@ -12,7 +12,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvOptionGro
   }
 });
 const HvOptionGroup = React.forwardRef(
-  (props, ref) => {
+  function HvOptionGroup2(props, ref) {
     const {
       className,
       classes: classesProp,

package/dist/cjs/SelectionList/SelectionList.cjs

@@ -23,7 +23,7 @@ const getValueFromSelectedChildren = (children, multiple) => {
   }).filter((v) => v !== void 0);
   return multiple ? selectedValues : selectedValues?.[0];
 };
-const HvSelectionList = React.forwardRef((props, ref) => {
+const HvSelectionList = React.forwardRef(function HvSelectionList2(props, ref) {
   const {
     id,
     classes: classesProp,

package/dist/cjs/Snackbar/Snackbar.cjs

@@ -4,6 +4,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const Slide = require("@mui/material/Slide");
 const Snackbar = require("@mui/material/Snackbar");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const helpers = require("../utils/helpers.cjs");
 const setId = require("../utils/setId.cjs");
 const Snackbar_styles = require("./Snackbar.styles.cjs");
@@ -11,29 +12,30 @@ const SnackbarContent = require("./SnackbarContent/SnackbarContent.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const Slide__default = /* @__PURE__ */ _interopDefault(Slide);
 const Snackbar__default = /* @__PURE__ */ _interopDefault(Snackbar);
-const HvSnackbar = ({
-  classes: classesProp,
-  className,
-  id,
-  open = false,
-  onClose,
-  label = "",
-  anchorOrigin = { vertical: "top", horizontal: "right" },
-  autoHideDuration = 5e3,
-  variant = "default",
-  showIcon = false,
-  customIcon = null,
-  action = null,
-  actionCallback,
-  // TODO - remove in v6
-  onAction,
-  transitionDuration = 300,
-  transitionDirection = "left",
-  container,
-  offset = 60,
-  snackbarContentProps,
-  ...others
-}) => {
+const HvSnackbar = React.forwardRef(function HvSnackbar2(props, ref) {
+  const {
+    classes: classesProp,
+    className,
+    id,
+    open = false,
+    onClose,
+    label = "",
+    anchorOrigin = { vertical: "top", horizontal: "right" },
+    autoHideDuration = 5e3,
+    variant = "default",
+    showIcon = false,
+    customIcon = null,
+    action = null,
+    actionCallback,
+    // TODO - remove in v6
+    onAction,
+    transitionDuration = 300,
+    transitionDirection = "left",
+    container,
+    offset = 60,
+    snackbarContentProps,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvSnackbar", props);
   const { classes } = Snackbar_styles.useClasses(classesProp);
   const anchorOriginOffset = {
     anchorOriginTop: {
@@ -57,6 +59,7 @@ const HvSnackbar = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Snackbar__default.default,
     {
+      ref,
       style: anchorOriginOffset[`anchorOrigin${helpers.capitalize(anchorOrigin.vertical)}`],
       classes,
       className,
@@ -84,6 +87,6 @@ const HvSnackbar = ({
       )
     }
   );
-};
+});
 exports.snackbarClasses = Snackbar_styles.staticClasses;
 exports.HvSnackbar = HvSnackbar;

package/dist/cjs/Switch/Switch.cjs

@@ -15,7 +15,7 @@ const Label = require("../Forms/Label/Label.cjs");
 const WarningText = require("../Forms/WarningText/WarningText.cjs");
 const isSemantical = (color) => ["positive", "negative", "warning"].includes(color);
 const HvSwitch = React.forwardRef(
-  (props, ref) => {
+  function HvSwitch2(props, ref) {
     const {
       classes: classesProp,
       className,

package/dist/cjs/Tab/Tab.cjs

@@ -1,12 +1,13 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
 const Tab = require("@mui/material/Tab");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const Tab_styles = require("./Tab.styles.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const Tab__default = /* @__PURE__ */ _interopDefault(Tab);
-const HvTab = (props) => {
+const HvTab = React.forwardRef(function HvTab2(props, ref) {
   const {
     classes: classesProp,
     iconPosition = "top",
@@ -17,6 +18,7 @@ const HvTab = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     Tab__default.default,
     {
+      ref,
       classes: {
         root: classes.root,
         selected: classes.selected,
@@ -28,6 +30,6 @@ const HvTab = (props) => {
       ...others
     }
   );
-};
+});
 exports.tabClasses = Tab_styles.staticClasses;
 exports.HvTab = HvTab;

package/dist/cjs/Table/Table.cjs

@@ -26,7 +26,7 @@ const computeTablePartComponents = (rootComponent) => {
     Td: rootComponent
   };
 };
-const HvTable = React.forwardRef((props, ref) => {
+const HvTable = React.forwardRef(function HvTable2(props, ref) {
   const {
     classes: classesProp,
     className,

package/dist/cjs/Table/TableCell/TableCell.cjs

@@ -43,11 +43,11 @@ const HvTableCell = React.forwardRef(
         className: cx(
           classes.root,
           classes[type],
+          align !== "inherit" && classes[`align${helpers.capitalize(align)}`],
+          variant !== "default" && classes[`variant${helpers.capitalize(variant)}`],
           {
-            [classes[`align${helpers.capitalize(align)}`]]: align !== "inherit",
             [classes.variantList]: tableContext.variant === "listrow",
             [classes.variantListHead]: tableContext.variant === "listrow" && type !== "body",
-            [classes[`variant${helpers.capitalize(variant)}`]]: variant !== "default",
             [classes.sorted]: sorted,
             [classes.stickyColumn]: stickyColumn,
             [classes.stickyColumnMostLeft]: stickyColumnMostLeft,

package/dist/cjs/Table/TableHeader/TableHeader.cjs

@@ -73,6 +73,8 @@ const HvTableHeader = React.forwardRef(
               )
             }
           }),
+          align !== "inherit" && classes[`align${helpers.capitalize(align)}`],
+          variant !== "default" && classes[`variant${helpers.capitalize(variant)}`],
           {
             [classes.groupColumnMostLeft]: groupColumnMostLeft,
             [classes.groupColumnMostRight]: groupColumnMostRight,
@@ -83,9 +85,7 @@ const HvTableHeader = React.forwardRef(
             [classes.stickyColumn]: stickyColumn,
             [classes.stickyColumnMostLeft]: stickyColumnMostLeft,
             [classes.stickyColumnLeastRight]: stickyColumnLeastRight,
-            [classes.variantList]: tableContext.variant === "listrow",
-            [classes[`align${helpers.capitalize(align)}`]]: align !== "inherit",
-            [classes[`variant${helpers.capitalize(variant)}`]]: variant !== "default"
+            [classes.variantList]: tableContext.variant === "listrow"
           },
           className
         ),
@@ -94,9 +94,10 @@ const HvTableHeader = React.forwardRef(
         children: /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: cx(classes.headerContent, {
-              [classes[`alignFlex${helpers.capitalize(align)}`]]: align !== "inherit"
-            }),
+            className: cx(
+              classes.headerContent,
+              align !== "inherit" && classes[`alignFlex${helpers.capitalize(align)}`]
+            ),
             children: [
               isHeadCell && sortable && /* @__PURE__ */ jsxRuntime.jsx(
                 Button.HvButton,

package/dist/cjs/TableSection/TableSection.cjs

@@ -7,7 +7,7 @@ const useUniqueId = require("../hooks/useUniqueId.cjs");
 const TableSection_styles = require("./TableSection.styles.cjs");
 const Section = require("../Section/Section.cjs");
 const HvTableSection = React.forwardRef(
-  (props, ref) => {
+  function HvTableSection2(props, ref) {
     const {
       id,
       classes: classesProp,

package/dist/cjs/TableSection/TableSection.styles.cjs

@@ -11,33 +11,33 @@ require("../Table/TableRow/TableRow.cjs");
 const TableCell_styles = require("../Table/TableCell/TableCell.styles.cjs");
 require("../Table/TableCell/TableCell.cjs");
 const BulkActions_styles = require("../BulkActions/BulkActions.styles.cjs");
-require("react/jsx-runtime");
+require("../BulkActions/BulkActions.cjs");
 const Pagination_styles = require("../Pagination/Pagination.styles.cjs");
-require("react");
-require("@mui/material");
-require("@hitachivantara/uikit-react-icons");
+require("../Pagination/Pagination.cjs");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableSection", {
   root: {},
   header: {
     // Only apply the border to divide the header and content when both are displayed
-    "+ div": { borderTop: `1px solid ${uikitStyles.theme.colors.atmo3}` }
-  },
-  actions: {
-    right: uikitStyles.theme.space.sm
+    "+ div": {
+      borderTop: `1px solid ${uikitStyles.theme.colors.atmo3}`,
+      borderTopLeftRadius: 0,
+      borderTopRightRadius: 0
+    }
   },
+  actions: {},
   content: {
     marginTop: 0,
     padding: 0,
     // Apply border radius to the first child if there's not an header
     "&:first-of-type": {
       "& > :first-of-type": {
-        borderTopLeftRadius: uikitStyles.theme.radii.round,
-        borderTopRightRadius: uikitStyles.theme.radii.round
+        borderTopLeftRadius: "inherit",
+        borderTopRightRadius: "inherit"
       }
     },
     "& > :last-child": {
-      borderBottomLeftRadius: uikitStyles.theme.radii.round,
-      borderBottomRightRadius: uikitStyles.theme.radii.round
+      borderBottomLeftRadius: "inherit",
+      borderBottomRightRadius: "inherit"
     },
     [`& .${TableContainer_styles.staticClasses.root}`]: {
       paddingBottom: 0
@@ -91,11 +91,13 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableSect
   },
   hidden: {},
   raisedHeader: {
-    "+ div": {
+    "& $content": {
       paddingTop: 0
     }
   },
-  spaceTop: { paddingTop: 0 }
+  hasHeader: {},
+  /** @deprecated use `hasHeader` instead */
+  spaceTop: {}
 });
 exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;