@hitachivantara/uikit-react-core 5.97.0 → 5.99.0

package/dist/esm/QueryBuilder/QueryBuilder.js

@@ -4,13 +4,13 @@ import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useControlled } from "../hooks/useControlled.js";
 import { useLabels } from "../hooks/useLabels.js";
 import { isEqual } from "../utils/helpers.js";
+import { ConfirmationDialog } from "./ConfirmationDialog.js";
 import { defaultOperators, defaultCombinators, HvQueryBuilderProvider, defaultLabels } from "./Context.js";
 import { useClasses } from "./QueryBuilder.styles.js";
 import { staticClasses } from "./QueryBuilder.styles.js";
+import { RuleGroup } from "./RuleGroup.js";
 import { emptyGroup, setNodeIds, clearNodeIds } from "./utils/index.js";
 import reducer from "./utils/reducer.js";
-import { RuleGroup } from "./RuleGroup/RuleGroup.js";
-import { ConfirmationDialog } from "./ConfirmationDialog/ConfirmationDialog.js";
 const HvQueryBuilder = (props) => {
   const {
     attributes,
@@ -131,14 +131,14 @@ const HvQueryBuilder = (props) => {
     /* @__PURE__ */ jsx(
       ConfirmationDialog,
       {
-        isOpen: pendingAction != null,
+        open: pendingAction != null,
         onConfirm: handleConfirm,
         onCancel: handleCancel,
         title: pendingAction?.dialog.dialogTitle,
         message: pendingAction?.dialog.dialogMessage,
         confirmButtonLabel: pendingAction?.dialog.dialogConfirm,
         cancelButtonLabel: pendingAction?.dialog.dialogCancel,
-        closeButtonTooltip: pendingAction?.dialog.dialogCloseTooltip
+        buttonTitle: pendingAction?.dialog.dialogCloseTooltip
       }
     )
   ] });

package/dist/esm/QueryBuilder/Rule/{Attribute/Attribute.js → Attribute.js}

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
-import { useMemo, memo } from "react";
-import { useQueryBuilderContext } from "../../Context.js";
-import { isBigList } from "../../utils/index.js";
-import { HvDropdown } from "../../../Dropdown/Dropdown.js";
+import { useMemo } from "react";
+import { useQueryBuilderContext } from "../Context.js";
+import { isBigList } from "../utils/index.js";
+import { HvDropdown } from "../../Dropdown/Dropdown.js";
 const Attribute = ({
   id,
   attribute,
@@ -60,7 +60,6 @@ const Attribute = ({
     }
   );
 };
-memo(Attribute);
 export {
   Attribute
 };

package/dist/esm/QueryBuilder/Rule/{Operator/Operator.js → Operator.js}

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
-import { useMemo, memo } from "react";
-import { useQueryBuilderContext } from "../../Context.js";
-import { isBigList } from "../../utils/index.js";
-import { HvDropdown } from "../../../Dropdown/Dropdown.js";
+import { useMemo } from "react";
+import { useQueryBuilderContext } from "../Context.js";
+import { isBigList } from "../utils/index.js";
+import { HvDropdown } from "../../Dropdown/Dropdown.js";
 const Operator = ({
   id,
   combinator,
@@ -55,7 +55,6 @@ const Operator = ({
     }
   );
 };
-memo(Operator);
 export {
   Operator
 };

package/dist/esm/QueryBuilder/Rule/Rule.js

@@ -5,12 +5,11 @@ import useMediaQuery from "@mui/material/useMediaQuery";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { HvIcon } from "../../icons.js";
 import { useQueryBuilderContext } from "../Context.js";
+import { Value } from "../Value/Value.js";
+import { Attribute } from "./Attribute.js";
+import { Operator } from "./Operator.js";
 import { useClasses } from "./Rule.styles.js";
-import { staticClasses } from "./Rule.styles.js";
 import { HvGrid } from "../../Grid/Grid.js";
-import { Attribute } from "./Attribute/Attribute.js";
-import { Operator } from "./Operator/Operator.js";
-import { Value } from "./Value/Value.js";
 import { HvIconButton } from "../../IconButton/IconButton.js";
 const Rule = (props) => {
   const {
@@ -100,6 +99,5 @@ const Rule = (props) => {
   );
 };
 export {
-  Rule,
-  staticClasses as queryBuilderRuleClasses
+  Rule
 };

package/dist/esm/QueryBuilder/Rule/Rule.styles.js

@@ -1,60 +1,56 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-import { staticClasses as staticClasses$1 } from "../QueryBuilder.styles.js";
-const { useClasses, staticClasses } = createClasses(
-  "HvQueryBuilder-Rule",
-  {
-    root: {
-      position: "relative",
-      marginTop: theme.space.xs,
-      minHeight: 94,
-      "&>div:not(:last-child)": {
-        paddingRight: theme.space.md
-      },
-      // hide required * as all fields are required
-      "& label>span[aria-hidden]": {
-        visibility: "hidden"
-      },
-      "&::before": {
-        content: '""',
-        position: "absolute",
-        zIndex: 2,
-        width: "17px",
-        height: "44px",
-        borderBottom: `1px solid ${theme.colors.border}`,
-        borderLeft: `1px solid ${theme.colors.border}`,
-        top: 0,
-        left: `calc(-1 * 17px)`
-      },
-      [`:not(.${staticClasses$1.topRulesContainer})>&:last-child::after`]: {
-        content: '""',
-        position: "absolute",
-        zIndex: 1,
-        width: "17px",
-        height: "100%",
-        borderLeft: `1px solid ${theme.colors.border}`,
-        top: 0,
-        left: `calc(-1 * 17px)`
-      }
+import { staticClasses } from "../QueryBuilder.styles.js";
+const { useClasses } = createClasses("HvQueryBuilderRule", {
+  root: {
+    position: "relative",
+    marginTop: theme.space.xs,
+    minHeight: 94,
+    "&>div:not(:last-child)": {
+      paddingRight: theme.space.md
     },
-    actionsContainer: {
-      marginLeft: "auto",
-      marginTop: "24px",
-      "&>:not(:last-child)": {
-        marginRight: theme.space.xs
-      }
+    // hide required * as all fields are required
+    "& label>span[aria-hidden]": {
+      visibility: "hidden"
     },
-    isMdDown: {
-      "&>div:not(:last-child)": {
-        paddingRight: 0
-      },
-      "&>div:not(:first-of-type)": {
-        marginTop: theme.space.xs
-      }
+    "&::before": {
+      content: '""',
+      position: "absolute",
+      zIndex: 2,
+      width: "17px",
+      height: "44px",
+      borderBottom: `1px solid ${theme.colors.border}`,
+      borderLeft: `1px solid ${theme.colors.border}`,
+      top: 0,
+      left: `calc(-1 * 17px)`
+    },
+    [`:not(.${staticClasses.topRulesContainer})>&:last-child::after`]: {
+      content: '""',
+      position: "absolute",
+      zIndex: 1,
+      width: "17px",
+      height: "100%",
+      borderLeft: `1px solid ${theme.colors.border}`,
+      top: 0,
+      left: `calc(-1 * 17px)`
+    }
+  },
+  actionsContainer: {
+    marginLeft: "auto",
+    marginTop: "24px",
+    "&>:not(:last-child)": {
+      marginRight: theme.space.xs
+    }
+  },
+  isMdDown: {
+    "&>div:not(:last-child)": {
+      paddingRight: 0
+    },
+    "&>div:not(:first-of-type)": {
+      marginTop: theme.space.xs
     }
   }
-);
+});
 export {
-  staticClasses,
   useClasses
 };

package/dist/esm/QueryBuilder/{RuleGroup/RuleGroup.js → RuleGroup.js}

@@ -1,14 +1,14 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useCallback } from "react";
-import { HvIcon } from "../../icons.js";
-import { useQueryBuilderContext } from "../Context.js";
-import { useClasses } from "../QueryBuilder.styles.js";
-import { HvButton } from "../../Button/Button.js";
-import { Rule } from "../Rule/Rule.js";
-import { HvEmptyState } from "../../EmptyState/EmptyState.js";
-import { HvMultiButton } from "../../MultiButton/MultiButton.js";
-import { HvIconButton } from "../../IconButton/IconButton.js";
-import { HvTypography } from "../../Typography/Typography.js";
+import { HvIcon } from "../icons.js";
+import { useQueryBuilderContext } from "./Context.js";
+import { useClasses } from "./QueryBuilder.styles.js";
+import { Rule } from "./Rule/Rule.js";
+import { HvButton } from "../Button/Button.js";
+import { HvEmptyState } from "../EmptyState/EmptyState.js";
+import { HvMultiButton } from "../MultiButton/MultiButton.js";
+import { HvIconButton } from "../IconButton/IconButton.js";
+import { HvTypography } from "../Typography/Typography.js";
 const RuleGroup = ({
   level = 0,
   id,

package/dist/esm/QueryBuilder/{Rule/Value/BooleanValue → Value}/BooleanValue.js

@@ -1,8 +1,7 @@
 import { jsx } from "react/jsx-runtime";
-import { memo } from "react";
-import { useQueryBuilderContext } from "../../../Context.js";
-import { isBigList } from "../../../utils/index.js";
-import { HvDropdown } from "../../../../Dropdown/Dropdown.js";
+import { useQueryBuilderContext } from "../Context.js";
+import { isBigList } from "../utils/index.js";
+import { HvDropdown } from "../../Dropdown/Dropdown.js";
 const BooleanValue = ({ id, value = true }) => {
   const { labels, dispatchAction, readOnly } = useQueryBuilderContext();
   const values = ["true", "false"].map((v) => ({
@@ -36,7 +35,6 @@ const BooleanValue = ({ id, value = true }) => {
     }
   );
 };
-memo(BooleanValue);
 export {
   BooleanValue
 };

package/dist/esm/QueryBuilder/{Rule/Value/DateTimeValue → Value}/DateTimeValue.js

@@ -1,18 +1,63 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useCallback, useMemo, memo } from "react";
+import { useState, useCallback, useMemo } from "react";
 import { useTheme } from "@mui/material/styles";
 import useMediaQuery from "@mui/material/useMediaQuery";
-import dayjs from "dayjs";
-import { uniqueId } from "../../../../utils/helpers.js";
-import { useQueryBuilderContext } from "../../../Context.js";
-import { useClasses } from "./DateTimeValue.styles.js";
-import { padTime, parseDate, parseTime } from "./utils.js";
-import { HvDatePicker } from "../../../../DatePicker/DatePicker.js";
-import { HvTimePicker } from "../../../../TimePicker/TimePicker.js";
-import { HvWarningText } from "../../../../FormElement/WarningText/WarningText.js";
-function valueIsRange(operator) {
-  return operator === "range";
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+import { theme } from "@hitachivantara/uikit-styles";
+import { uniqueId } from "../../utils/helpers.js";
+import { useQueryBuilderContext } from "../Context.js";
+import { HvDatePicker } from "../../DatePicker/DatePicker.js";
+import { HvTimePicker } from "../../TimePicker/TimePicker.js";
+import { HvWarningText } from "../../FormElement/WarningText/WarningText.js";
+function formatDate(date) {
+  return date?.toISOString().slice(0, 10);
 }
+function formatTime(time) {
+  if (!time) return void 0;
+  const { hours, minutes, seconds } = time;
+  const date = new Date(Date.UTC(2020, 8, 8, hours, minutes, seconds));
+  return date.toISOString().slice(11, 19);
+}
+function parseDate(date) {
+  return date ? new Date(date) : void 0;
+}
+function parseTime(time) {
+  if (!time) return null;
+  const parts = time.split(":");
+  return {
+    hours: Number(parts[0]),
+    minutes: Number(parts[1]),
+    seconds: Number(parts[2]) || 0
+  };
+}
+const { useClasses } = createClasses("HvQueryBuilderDateTimeValue", {
+  root: {
+    display: "flex",
+    flexDirection: "column"
+  },
+  row: {},
+  vertical: {
+    display: "flex",
+    flexDirection: "column"
+  },
+  horizontal: {
+    display: "flex",
+    "& > div:not(:last-child)": {
+      marginRight: theme.space.md
+    }
+  },
+  isMdDown: {
+    "& > div:not(:last-child)": {
+      marginRight: `calc(${theme.space.md} / 2)`
+    }
+  },
+  datePicker: {
+    flex: 1
+  },
+  timePicker: {
+    flex: 1
+  }
+});
 const DateTimeValue = ({
   id,
   operator,
@@ -20,9 +65,9 @@ const DateTimeValue = ({
   initialTouched = false
 }) => {
   const { classes, cx } = useClasses();
-  const theme = useTheme();
-  const isMdDown = useMediaQuery(theme.breakpoints.down("md"));
-  const isRange = valueIsRange(operator);
+  const theme2 = useTheme();
+  const isMdDown = useMediaQuery(theme2.breakpoints.down("md"));
+  const isRange = operator === "range";
   const { labels, dispatchAction, readOnly } = useQueryBuilderContext();
   const elementId = uniqueId(`datetime${id}`);
   const [touchedDate, setTouchedDate] = useState(initialTouched);
@@ -32,10 +77,7 @@ const DateTimeValue = ({
   const onDateChange = useCallback(
     (data) => {
       setTouchedDate(true);
-      let date;
-      if (data != null) {
-        date = dayjs(data).format("YYYY-MM-DD");
-      }
+      const date = formatDate(data);
       const oldValue = !isRange ? valueProp?.date : valueProp?.start?.date;
       if (date !== oldValue) {
         let value;
@@ -65,12 +107,7 @@ const DateTimeValue = ({
   const onTimeChange = useCallback(
     (data) => {
       setTouchedTime(true);
-      let time;
-      if (data != null) {
-        time = `${padTime(data.hours)}:${padTime(data.minutes)}:${padTime(
-          data.seconds
-        )}`;
-      }
+      const time = formatTime(data);
       const oldValue = !isRange ? valueProp?.time : valueProp?.start?.time;
       if (time !== oldValue) {
         let value;
@@ -100,10 +137,7 @@ const DateTimeValue = ({
   const onEndDateChange = useCallback(
     (data) => {
       setTouchedEndDate(true);
-      let date;
-      if (data != null) {
-        date = dayjs(data).format("YYYY-MM-DD");
-      }
+      const date = formatDate(data);
       if (date !== valueProp?.end?.date) {
         const value = {
           start: valueProp?.start,
@@ -124,12 +158,7 @@ const DateTimeValue = ({
   const onEndTimeChange = useCallback(
     (data) => {
       setTouchedEndTime(true);
-      let time;
-      if (data != null) {
-        time = `${padTime(data.hours)}:${padTime(data.minutes)}:${padTime(
-          data.seconds
-        )}`;
-      }
+      const time = formatTime(data);
       if (time !== valueProp?.end?.time) {
         const value = {
           start: valueProp?.start,
@@ -274,7 +303,6 @@ const DateTimeValue = ({
     ] })
   ] });
 };
-memo(DateTimeValue);
 export {
   DateTimeValue
 };

package/dist/esm/QueryBuilder/{Rule/Value/EmptyValue → Value}/EmptyValue.js

@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { useQueryBuilderContext } from "../../../Context.js";
+import { useQueryBuilderContext } from "../Context.js";
 const EmptyValue = ({ id }) => {
   const { dispatchAction } = useQueryBuilderContext();
   useEffect(() => {

package/dist/esm/QueryBuilder/{Rule/Value/NumericValue → Value}/NumericValue.js

@@ -1,11 +1,37 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useCallback, useState, memo } from "react";
+import { useCallback, useState } from "react";
 import { useTheme } from "@mui/material/styles";
 import useMediaQuery from "@mui/material/useMediaQuery";
-import { uniqueId } from "../../../../utils/helpers.js";
-import { useQueryBuilderContext } from "../../../Context.js";
-import { useClasses } from "./Numeric.styles.js";
-import { HvInput } from "../../../../Input/Input.js";
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+import { theme } from "@hitachivantara/uikit-styles";
+import { uniqueId } from "../../utils/helpers.js";
+import { useQueryBuilderContext } from "../Context.js";
+import { HvInput } from "../../Input/Input.js";
+const { useClasses } = createClasses("HvQueryBuilderNumericValue", {
+  root: {},
+  label: {
+    paddingBottom: "6px"
+  },
+  inputContainer: {},
+  rangeContainer: {
+    display: "flex",
+    "& $inputContainer": {
+      flexGrow: 1,
+      overflow: "auto"
+    },
+    "& > $inputContainer:not(:last-child)": {
+      marginRight: theme.space.md
+    }
+  },
+  input: {
+    flexGrow: 1
+  },
+  isMdDown: {
+    "& > $inputContainer:not(:last-child)": {
+      marginRight: `calc(${theme.space.md} / 2)`
+    }
+  }
+});
 const NumericValue = ({
   id,
   value,
@@ -15,8 +41,8 @@ const NumericValue = ({
   const { classes, cx } = useClasses();
   const isRange = operator === "range";
   const { labels, dispatchAction, readOnly } = useQueryBuilderContext();
-  const theme = useTheme();
-  const isMdDown = useMediaQuery(theme.breakpoints.down("md"));
+  const theme2 = useTheme();
+  const isMdDown = useMediaQuery(theme2.breakpoints.down("md"));
   const onSingleValueChange = useCallback(
     (event, data) => {
       dispatchAction({
@@ -177,7 +203,6 @@ const NumericValue = ({
     ) })
   ] });
 };
-memo(NumericValue);
 export {
   NumericValue
 };

package/dist/esm/QueryBuilder/{Rule/Value/TextValue → Value}/TextValue.js

@@ -1,8 +1,13 @@
 import { jsx } from "react/jsx-runtime";
-import { useState, memo } from "react";
-import { useQueryBuilderContext } from "../../../Context.js";
-import { useClasses } from "./TextValue.styles.js";
-import { HvInput } from "../../../../Input/Input.js";
+import { useState } from "react";
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+import { useQueryBuilderContext } from "../Context.js";
+import { HvInput } from "../../Input/Input.js";
+const { useClasses } = createClasses("HvQueryBuilderTextValue", {
+  location: {
+    flexGrow: 1
+  }
+});
 const TextValue = ({
   id,
   value = "",
@@ -46,7 +51,6 @@ const TextValue = ({
     }
   );
 };
-memo(TextValue);
 export {
   TextValue
 };

package/dist/esm/QueryBuilder/{Rule/Value → Value}/Value.js

@@ -1,12 +1,11 @@
 import { jsx } from "react/jsx-runtime";
-import { memo } from "react";
-import { useQueryBuilderContext } from "../../Context.js";
-import { defaultRendererKey } from "../../types.js";
-import { EmptyValue } from "./EmptyValue/EmptyValue.js";
-import { TextValue } from "./TextValue/TextValue.js";
-import { DateTimeValue } from "./DateTimeValue/DateTimeValue.js";
-import { NumericValue } from "./NumericValue/NumericValue.js";
-import { BooleanValue } from "./BooleanValue/BooleanValue.js";
+import { useQueryBuilderContext } from "../Context.js";
+import { defaultRendererKey } from "../types.js";
+import { BooleanValue } from "./BooleanValue.js";
+import { DateTimeValue } from "./DateTimeValue.js";
+import { EmptyValue } from "./EmptyValue.js";
+import { NumericValue } from "./NumericValue.js";
+import { TextValue } from "./TextValue.js";
 const getRenderer = (renderer, operator) => (
   // 1. Custom renderer
   typeof renderer === "function" && renderer || // 2. Custom operator renderer
@@ -70,7 +69,6 @@ const Value = ({
       return /* @__PURE__ */ jsx(TextValue, { id, value: valueProp, initialTouched });
   }
 };
-memo(Value);
 export {
   Value
 };

package/dist/esm/Radio/Radio.js

@@ -114,11 +114,11 @@ const HvRadio = forwardRef(
             "div",
             {
               className: cx(classes.container, {
-                [classes.disabled]: disabled,
                 [classes.focusVisible]: !!(focusVisible && label),
-                [classes.invalidContainer]: isStateInvalid,
+                [classes.semantic]: semantic,
                 [classes.checked]: isChecked,
-                [classes.semantic]: semantic
+                [classes.invalidContainer]: isStateInvalid,
+                [classes.disabled]: disabled
               }),
               children: [
                 radio,

package/dist/esm/Section/Section.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import { forwardRef, useRef } from "react";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useExpandable } from "../hooks/useExpandable.js";
 import { HvIcon } from "../icons.js";
@@ -15,6 +15,7 @@ const HvSection = forwardRef(
       title,
       expandable,
       expanded,
+      expandableHeader,
       defaultExpanded = true,
       actions,
       onToggle,
@@ -25,6 +26,7 @@ const HvSection = forwardRef(
       ...others
     } = useDefaultProps("HvSection", props);
     const { classes, cx } = useClasses(classesProp);
+    const expandButtonRef = useRef(null);
     const { isOpen, toggleOpen, buttonProps, regionProps } = useExpandable({
       id,
       expanded,
@@ -41,24 +43,47 @@ const HvSection = forwardRef(
         }),
         ...others,
         children: [
-          hasHeader && /* @__PURE__ */ jsxs("div", { className: classes.header, children: [
-            expandable && /* @__PURE__ */ jsx(
-              HvButton,
-              {
-                icon: true,
-                onClick: (event) => {
-                  toggleOpen();
-                  onToggle?.(event, !isOpen);
-                },
-                "aria-label": isOpen ? "Collapse" : "Expand",
-                ...buttonProps,
-                ...expandButtonProps,
-                children: /* @__PURE__ */ jsx(HvIcon, { name: "CaretDown", size: "xs", rotate: isOpen })
-              }
-            ),
-            title,
-            /* @__PURE__ */ jsx("div", { className: classes.actions, children: actions })
-          ] }),
+          hasHeader && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cx(classes.header, {
+                [classes.headerExpandable]: expandable && expandableHeader
+              }),
+              onClick: () => {
+                if (!expandableHeader) return;
+                expandButtonRef.current?.click();
+              },
+              children: [
+                expandable && /* @__PURE__ */ jsx(
+                  HvButton,
+                  {
+                    ref: expandButtonRef,
+                    icon: true,
+                    onClick: (event) => {
+                      event.stopPropagation();
+                      toggleOpen();
+                      onToggle?.(event, !isOpen);
+                    },
+                    "aria-label": isOpen ? "Collapse" : "Expand",
+                    ...buttonProps,
+                    ...expandButtonProps,
+                    children: /* @__PURE__ */ jsx(HvIcon, { name: "CaretDown", size: "xs", rotate: isOpen })
+                  }
+                ),
+                title,
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: classes.actions,
+                    onClick: (evt) => {
+                      evt.stopPropagation();
+                    },
+                    children: actions
+                  }
+                )
+              ]
+            }
+          ),
           /* @__PURE__ */ jsx(
             "div",
             {

package/dist/esm/Section/Section.styles.js

@@ -7,6 +7,7 @@ const { staticClasses, useClasses } = createClasses("HvSection", {
     flexDirection: "column",
     backgroundColor: theme.colors.bgContainer,
     borderRadius: theme.radii.round,
+    overflow: "hidden",
     border: `1px solid ${theme.colors.border}`
   },
   hidden: { height: 0, display: "none" },
@@ -15,12 +16,23 @@ const { staticClasses, useClasses } = createClasses("HvSection", {
     alignItems: "center",
     borderColor: "inherit",
     position: "relative",
-    padding: theme.space.sm
+    padding: theme.space.sm,
+    "+ $content": {
+      borderTopLeftRadius: 0,
+      borderTopRightRadius: 0
+    }
+  },
+  headerExpandable: {
+    cursor: "pointer",
+    ":hover": {
+      backgroundColor: theme.colors.bgHover
+    }
   },
   content: {
     padding: theme.space.sm,
     borderRadius: "inherit",
-    borderColor: "inherit"
+    borderColor: "inherit",
+    flex: 1
   },
   hasHeader: {
     paddingTop: 0