@hitachivantara/uikit-react-core 5.80.2 → 5.81.0

package/dist/cjs/MultiButton/MultiButton.cjs

@@ -33,7 +33,7 @@ const HvMultiButton = (props) => {
         classes.root,
         {
           [classes.multiple]: !split,
-          [classes.vertical]: vertical,
+          [classes.vertical]: !split && vertical,
           [classes[variant]]: variant,
           // TODO - remove in v6
           [classes.splitGroup]: split,
@@ -43,16 +43,15 @@ const HvMultiButton = (props) => {
       ),
       ...others,
       children: buttons.map((child, index) => {
-        const childIsSelected = !!child.props.selected;
         return React.cloneElement(child, {
           key: index,
           variant,
           disabled: disabled || child.props.disabled,
           size,
-          className: cx(child.props.className, classes.button, {
+          className: cx(classes.button, child.props.className, {
             [classes.firstButton]: index === 0,
             [classes.lastButton]: index === buttons.length - 1,
-            [classes.selected]: childIsSelected
+            [classes.selected]: child.props.selected
           })
         });
       })

package/dist/cjs/MultiButton/MultiButton.styles.cjs

@@ -8,105 +8,75 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvMultiButt
   root: {
     display: "flex",
     alignItems: "center",
-    transition: "none",
-    position: "relative",
-    zIndex: 0
+    position: "relative"
   },
   multiple: {
-    background: uikitStyles.theme.colors.atmo2,
-    // prevent the focus ring to be hidden by sibling hover background
-    "&>.HvIsFocusVisible": {
-      zIndex: 5
-    },
-    "& button$button": {
-      minWidth: "unset",
+    backgroundColor: uikitStyles.theme.colors.atmo2,
+    borderWidth: 0,
+    borderColor: `${uikitStyles.theme.colors.atmo4} transparent`,
+    borderRadius: uikitStyles.theme.radii.base,
+    "& $button": {
+      minWidth: 32,
+      minHeight: 32,
       width: "100%",
       maxWidth: 200,
       padding: 0,
-      transition: "none",
-      flex: "1 0 0px",
-      borderTop: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
-      borderBottom: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
-      borderLeft: "solid 1px transparent",
-      borderRight: "solid 1px transparent",
+      flex: 1,
+      borderColor: "inherit",
       borderRadius: 0,
       fontWeight: uikitStyles.theme.typography.body.fontWeight,
-      fontSize: uikitStyles.theme.typography.body.fontSize,
       "&:disabled": {
         color: uikitStyles.theme.colors.secondary_60,
-        borderTop: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
-        borderBottom: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
-        "&:hover": {
-          borderTop: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
-          borderBottom: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
-          borderLeft: "solid 1px transparent",
-          borderRight: "solid 1px transparent"
-        }
+        borderColor: "inherit"
+      },
+      "&:hover": {
+        borderColor: "inherit"
       },
       "&$firstButton": {
-        borderLeft: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
-        borderTopLeftRadius: uikitStyles.theme.radii.base,
-        borderBottomLeftRadius: uikitStyles.theme.radii.base,
+        borderLeftColor: uikitStyles.theme.colors.atmo4,
+        borderTopLeftRadius: "inherit",
+        borderBottomLeftRadius: "inherit",
         "&:disabled": {
-          borderLeft: `solid 1px ${uikitStyles.theme.colors.atmo4}`
+          borderLeftColor: uikitStyles.theme.colors.atmo4
         }
       },
       "&$lastButton": {
-        borderRight: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
-        borderTopRightRadius: uikitStyles.theme.radii.base,
-        borderBottomRightRadius: uikitStyles.theme.radii.base,
+        borderRightColor: uikitStyles.theme.colors.atmo4,
+        borderTopRightRadius: "inherit",
+        borderBottomRightRadius: "inherit",
         "&:disabled": {
-          borderRight: `solid 1px ${uikitStyles.theme.colors.atmo4}`
-        },
-        "&:disabled:hover": {
-          borderRight: `solid 1px ${uikitStyles.theme.colors.atmo4}`
+          borderRightColor: uikitStyles.theme.colors.atmo4
         }
       },
       "&:not($firstButton)": {
         marginLeft: "-1px"
       },
       "&$selected": {
-        background: uikitStyles.theme.colors.atmo1,
-        ...uikitStyles.theme.typography.label,
-        borderRadius: uikitStyles.theme.radii.base,
-        border: `solid 1px ${uikitStyles.theme.colors.secondary}`,
+        backgroundColor: uikitStyles.theme.colors.atmo1,
+        fontWeight: uikitStyles.theme.typography.label.fontWeight,
+        borderRadius: "inherit",
+        borderColor: uikitStyles.theme.colors.secondary,
         zIndex: 2,
-        "&:hover": {
-          background: uikitStyles.theme.colors.atmo3,
-          "&:not(:disabled)": {
-            border: `solid 1px ${uikitStyles.theme.colors.secondary}`
-          },
-          "&:disabled": {
-            border: `solid 1px ${uikitStyles.theme.colors.atmo4}`
-          }
-        },
-        // prevent the focus ring to be hidden by sibling hover background
-        // even when selected
-        "&.HvIsFocusVisible": {
-          zIndex: 5
+        "&:hover:not(:disabled),&:focus-visible": {
+          backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
         },
         "&:disabled": {
           zIndex: 1,
-          color: uikitStyles.theme.colors.secondary_60,
-          background: uikitStyles.theme.colors.atmo1,
-          border: `solid 1px ${uikitStyles.theme.colors.atmo4}`
+          borderColor: uikitStyles.theme.colors.atmo4
         }
       }
     }
   },
   splitGroup: {
     width: "fit-content",
-    background: uikitStyles.theme.colors.atmo1,
-    // HvButton, HvDropDownMenu
-    "& button$button:not($firstButton), & $button:not($firstButton) button": {
+    "& $button:not($firstButton)": {
       borderTopLeftRadius: 0,
       borderBottomLeftRadius: 0,
       "&:not([aria-controls])": {
         borderLeftWidth: 0
       }
     },
-    // HvButton, HvDropDownMenu
-    "& button$button:not($lastButton), & $button:not($lastButton) button": {
+    "& $button:not($lastButton)": {
       borderTopRightRadius: 0,
       borderBottomRightRadius: 0,
       "&:not([aria-controls])": {
@@ -121,52 +91,33 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvMultiButt
         height: "auto",
         backgroundColor: "currentcolor"
       }
-    },
-    // HvDropDownMenu
-    [`& .${DropDownMenu_styles.staticClasses.iconSelected}`]: {
-      zIndex: 2
     }
   },
-  splitGroupDisabled: { background: uikitStyles.theme.colors.atmo3 },
+  splitGroupDisabled: {},
   button: {
-    position: "relative"
+    position: "relative",
+    // prevent the focus ring to be hidden by sibling hover background
+    [`&:focus-visible, &.${DropDownMenu_styles.staticClasses.iconSelected}`]: {
+      zIndex: 5
+    }
   },
   selected: {},
   vertical: {
     flexDirection: "column",
     height: "auto",
-    "& button$button": {
+    borderColor: `transparent ${uikitStyles.theme.colors.atmo4}`,
+    "& $button": {
       minWidth: 32,
       width: "100%",
-      borderLeft: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
-      borderRight: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
-      borderTop: "solid 1px transparent",
-      borderBottom: "solid 1px transparent",
-      "&:disabled": {
-        color: uikitStyles.theme.colors.secondary_60,
-        borderLeft: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
-        borderRight: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
-        borderTop: "solid 1px transparent",
-        borderBottom: "solid 1px transparent",
-        "&:hover": {
-          borderLeft: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
-          borderRight: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
-          borderTop: "solid 1px transparent",
-          borderBottom: "solid 1px transparent"
-        }
-      },
       "&$firstButton": {
-        borderTop: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
-        borderTopLeftRadius: uikitStyles.theme.radii.base,
-        borderTopRightRadius: uikitStyles.theme.radii.base
+        borderTopColor: uikitStyles.theme.colors.atmo4,
+        borderTopLeftRadius: "inherit",
+        borderTopRightRadius: "inherit"
       },
       "&$lastButton": {
-        borderBottom: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
-        borderBottomLeftRadius: uikitStyles.theme.radii.base,
-        borderBottomRightRadius: uikitStyles.theme.radii.base,
-        "&:disabled:hover": {
-          borderBottom: `solid 1px ${uikitStyles.theme.colors.atmo4}`
-        }
+        borderBottomColor: uikitStyles.theme.colors.atmo4,
+        borderBottomLeftRadius: "inherit",
+        borderBottomRightRadius: "inherit"
       },
       "&:not($firstButton)": {
         marginLeft: 0,
@@ -174,24 +125,12 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvMultiButt
       },
       "&$selected": {
         height: 32,
-        width: `calc(100% + 2px) !important`,
-        background: uikitStyles.theme.colors.atmo1,
-        ...uikitStyles.theme.typography.label,
-        borderRadius: uikitStyles.theme.radii.base,
-        border: `solid 1px ${uikitStyles.theme.colors.secondary}`,
-        zIndex: 2,
-        "&:hover, &:focus": {
-          background: uikitStyles.theme.colors.atmo3
-        },
-        "&:disabled": {
-          zIndex: 1,
-          color: uikitStyles.theme.colors.secondary_60,
-          background: uikitStyles.theme.colors.atmo1,
-          border: `solid 1px ${uikitStyles.theme.colors.atmo4}`
-        }
+        width: "calc(100% + 2px)",
+        borderColor: uikitStyles.theme.colors.secondary
       }
     }
   },
+  // TODO - review the need for these classes in v6 (use :first-child and :last-child instead)
   firstButton: {},
   lastButton: {},
   // TODO - review the need for these classes in v6

package/dist/cjs/Pagination/Pagination.styles.cjs

@@ -39,6 +39,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvPaginatio
   pageSizeOptions: {
     display: "flex",
     position: "absolute",
+    gap: uikitStyles.theme.space.xs,
     height: 24,
     top: "50%",
     transform: "translateY(-50%)",
@@ -70,7 +71,6 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvPaginatio
   /** Styles applied to the page size selector dropdown element. */
   pageSizeOptionsSelect: {
     display: "inline-block",
-    margin: `0px ${uikitStyles.theme.space.xs}`,
     width: "auto",
     ...uikitStyles.theme.typography.caption2
   },

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

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const sortedColor = uikitStyles.theme.alpha("primary", 0.1);
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableCell", {
   /** Styles applied to the component root class. */
   root: {
@@ -29,10 +28,8 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableCell
       height: 32
     },
     backgroundColor: "inherit",
-    ...uikitStyles.theme.typography.body,
-    fontFamily: uikitStyles.theme.fontFamily.body,
     "&$sorted": {
-      backgroundImage: `linear-gradient(to right, ${sortedColor}, ${sortedColor})`
+      backgroundColor: uikitStyles.theme.alpha("primary", 0.1)
     }
   },
   /** Styles applied to the cell when it's in the table footer. */
@@ -160,7 +157,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableCell
   },
   /** Styles applied to the cell when it's part of a resizing column. */
   resizing: {
-    borderRight: `solid 2px ${uikitStyles.theme.colors.secondary}`
+    borderRight: `solid 2px ${uikitStyles.theme.colors.primary_80}`
   }
 });
 exports.staticClasses = staticClasses;

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

@@ -2,9 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const styles = require("@mui/material/styles");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const uikitStyles = require("@hitachivantara/uikit-styles");
 const helpers = require("../../utils/helpers.cjs");
 const TableContext = require("../TableContext.cjs");
 const TableSectionContext = require("../TableSectionContext.cjs");
@@ -40,8 +38,7 @@ const HvTableHeader = React.forwardRef(
       sortButtonProps,
       ...others
     } = uikitReactUtils.useDefaultProps("HvTableHeader", props);
-    const { classes, cx, css } = TableHeader_styles.useClasses(classesProp);
-    const { colors } = uikitReactUtils.useTheme();
+    const { classes, cx } = TableHeader_styles.useClasses(classesProp);
     const tableContext = React.useContext(TableContext.default);
     const tableSectionContext = React.useContext(TableSectionContext.TableSectionContext);
     const type = typeProp || tableSectionContext?.type || "body";
@@ -55,7 +52,7 @@ const HvTableHeader = React.forwardRef(
     const role = Component === defaultComponent ? null : isHeadCell ? "columnheader" : "rowheader";
     const paragraph = utils.isParagraph(children);
     const style = stickyColumn ? { ...styleProp, position: "sticky" } : styleProp;
-    return /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsxs(
       Component,
       {
         ref: externalRef,
@@ -65,14 +62,6 @@ const HvTableHeader = React.forwardRef(
         className: cx(
           classes.root,
           classes[type],
-          type === "body" && css({
-            [`&.${TableHeader_styles.staticClasses.sorted}`]: {
-              backgroundColor: styles.alpha(
-                styles.hexToRgb(colors?.atmo1 || uikitStyles.theme.colors.atmo1),
-                0.4
-              )
-            }
-          }),
           align !== "inherit" && classes[`align${helpers.capitalize(align)}`],
           variant !== "default" && classes[`variant${helpers.capitalize(variant)}`],
           {
@@ -91,43 +80,45 @@ const HvTableHeader = React.forwardRef(
         ),
         "aria-sort": sortable ? sortDirection : void 0,
         ...others,
-        children: /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: cx(
-              classes.headerContent,
-              align !== "inherit" && classes[`alignFlex${helpers.capitalize(align)}`]
-            ),
-            children: [
-              isHeadCell && sortable && /* @__PURE__ */ jsxRuntime.jsx(
-                Button.HvButton,
-                {
-                  className: classes.sortButton,
-                  icon: true,
-                  overrideIconColors: false,
-                  "aria-label": "Sort",
-                  ...sortButtonProps,
-                  children: /* @__PURE__ */ jsxRuntime.jsx(Sort, { className: classes.sortIcon })
-                }
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cx(
+                classes.headerContent,
+                align !== "inherit" && classes[`alignFlex${helpers.capitalize(align)}`]
               ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                Typography.HvTypography,
-                {
-                  component: "div",
-                  className: cx({
-                    [classes.headerText]: !paragraph,
-                    [classes.headerParagraph]: paragraph,
-                    [classes.sortableHeaderText]: sortable
-                  }),
-                  variant: "label",
-                  ...headerTextProps,
-                  children
-                }
-              ),
-              resizable && /* @__PURE__ */ jsxRuntime.jsx("div", { ...resizerProps, className: classes.resizer })
-            ]
-          }
-        )
+              children: [
+                isHeadCell && sortable && /* @__PURE__ */ jsxRuntime.jsx(
+                  Button.HvButton,
+                  {
+                    className: classes.sortButton,
+                    icon: true,
+                    overrideIconColors: false,
+                    "aria-label": "Sort",
+                    ...sortButtonProps,
+                    children: /* @__PURE__ */ jsxRuntime.jsx(Sort, { className: classes.sortIcon })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Typography.HvTypography,
+                  {
+                    component: "div",
+                    className: cx({
+                      [classes.headerText]: !paragraph,
+                      [classes.headerParagraph]: paragraph,
+                      [classes.sortableHeaderText]: sortable
+                    }),
+                    variant: "label",
+                    ...headerTextProps,
+                    children
+                  }
+                )
+              ]
+            }
+          ),
+          resizable && /* @__PURE__ */ jsxRuntime.jsx("div", { ...resizerProps, className: classes.resizer })
+        ]
       }
     );
   }

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

@@ -18,7 +18,6 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableHead
     verticalAlign: "top",
     alignContent: "start",
     ...uikitStyles.theme.typography.label,
-    transition: "background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
     backgroundColor: uikitStyles.theme.colors.atmo1,
     borderBottom: `1px solid ${uikitStyles.theme.colors.atmo4}`,
     "*:first-of-type > &": {
@@ -38,16 +37,10 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableHead
       paddingTop: 0,
       paddingLeft: 0,
       cursor: "pointer",
-      "&:hover": {
-        backgroundColor: "transparent",
+      ":hover, :focus-within": {
+        backgroundColor: uikitStyles.theme.colors.containerBackgroundHover,
         "& $sortIcon": {
-          visibility: "visible"
-        }
-      },
-      "&:focus-within": {
-        backgroundColor: "transparent",
-        "& $sortIcon": {
-          visibility: "visible"
+          opacity: 1
         }
       }
     }
@@ -55,6 +48,9 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableHead
   body: {
     backgroundColor: "inherit",
     ...uikitStyles.theme.typography.body,
+    ":where($sorted)": {
+      backgroundColor: uikitStyles.theme.alpha("atmo1", 0.4)
+    },
     "&$sortable:not($variantNone)": {
       paddingLeft: 32
     }
@@ -89,20 +85,17 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableHead
   sortableHeaderText: { paddingTop: "8px" },
   sorted: {
     "& $sortIcon": {
-      visibility: "visible"
+      opacity: 1
     }
   },
   sortable: {},
   sortButton: {
-    "$root$sortable &": {
+    ":focus-visible": {
       boxShadow: "none",
-      backgroundColor: "transparent",
-      "&:hover": {
-        backgroundColor: uikitStyles.theme.colors.primary_20
-      }
+      backgroundColor: "transparent"
     }
   },
-  sortIcon: { display: "inline-flex", visibility: "hidden" },
+  sortIcon: { opacity: 0 },
   alignLeft: { textAlign: "left" },
   alignRight: { textAlign: "right", flexDirection: "row-reverse" },
   alignCenter: { textAlign: "center" },
@@ -134,11 +127,16 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableHead
       height: 16
     }
   },
-  resizable: { borderRight: `solid 1px ${uikitStyles.theme.colors.atmo4}` },
-  resizing: { borderRight: `solid 2px ${uikitStyles.theme.colors.secondary}` },
+  resizable: {
+    borderRight: `1px solid ${uikitStyles.theme.colors.atmo4}`,
+    ":has($resizer:hover)": {
+      borderRight: `2px solid ${uikitStyles.theme.colors.primary_80}`
+    }
+  },
+  resizing: { borderRight: `2px solid ${uikitStyles.theme.colors.primary_80}` },
   resizer: {
     display: "inline-block",
-    width: 10,
+    width: 16,
     height: "100%",
     position: "absolute",
     right: 0,

package/dist/cjs/Table/TableRow/TableRow.styles.cjs

@@ -10,7 +10,10 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableRow"
     backgroundColor: uikitStyles.theme.colors.atmo1,
     verticalAlign: "middle",
     alignContent: "center",
-    outline: 0
+    outline: 0,
+    ":is($hover,$striped):hover": {
+      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
+    }
   },
   /** Styles applied to the component root when inside a `HvTableHead`. */
   head: {},
@@ -32,25 +35,14 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableRow"
   /** Styles applied to the component root when striped. */
   striped: {
     "&:nth-of-type(even)": {
-      backgroundColor: uikitStyles.theme.alpha("atmo1", 0.6),
-      "&:hover": {
-        backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
-      }
+      backgroundColor: uikitStyles.theme.alpha("atmo1", 0.6)
     },
     "&:nth-of-type(odd)": {
-      backgroundColor: "transparent",
-      "&:hover": {
-        backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
-      }
+      backgroundColor: "transparent"
     }
   },
   /** Styles applied to the component root on hover. */
-  hover: {
-    transition: "background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
-    "&:hover": {
-      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
-    }
-  },
+  hover: {},
   /** Styles applied to the component root when its table variant is list. */
   variantList: {
     // only applied on custom `display`

package/dist/esm/Accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sources":["../../../src/Accordion/Accordion.tsx"],"sourcesContent":["import { forwardRef, useCallback, useMemo } from \"react\";\nimport { DropUpXS } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButtonBase } from \"../ButtonBase\";\nimport { useExpandable } from \"../hooks/useExpandable\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography, HvTypographyVariants } from \"../Typography\";\nimport { staticClasses, useClasses } from \"./Accordion.styles\";\n\nexport { staticClasses as accordionClasses };\n\nexport type HvAccordionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAccordionProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\" | \"children\"> {\n  /** Content to be rendered. */\n  children: React.ReactNode;\n  /** The accordion label button. */\n  label?: string;\n  /** The function that will be executed whenever the accordion toggles. It will receive the state of the accordion. */\n  onChange?: (event: React.SyntheticEvent, value: boolean) => void;\n  /** Whether the accordion is open or not. If this property is defined the accordion must be fully controlled. */\n  expanded?: boolean;\n  /** When uncontrolled, defines the initial expanded state. */\n  defaultExpanded?: boolean;\n  /** An object containing props to be passed onto container holding the accordion children. */\n  containerProps?: React.HTMLAttributes<HTMLDivElement>;\n  /** Heading level to apply to accordion button. If ´undefined´ the button won't have a header wrapper. */\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n  /** Whether the accordion is disabled. */\n  disabled?: boolean;\n  /** Typography variant for the label. */\n  labelVariant?: HvTypographyVariants;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvAccordionClasses;\n  /** Whether to disable the internal usage of `preventDefault` and `stopPropagation` when the `onChange` event is triggered. */\n  disableEventHandling?: boolean; // TODO - remove in v6 as this should be the default behavior: `preventDefault` and `stopPropagation` shouldn't be triggered internally\n}\n\n/**\n * A accordion is a design element that expands in place to expose hidden information.\n */\nexport const HvAccordion = forwardRef<\n  React.ComponentRef<\"div\">,\n  HvAccordionProps\n>(function HvAccordion(props, ref) {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    disabled = false,\n    label,\n    onChange,\n    children,\n    expanded,\n    headingLevel,\n    defaultExpanded = false,\n    containerProps,\n    labelVariant = \"label\",\n    disableEventHandling,\n    ...others\n  } = useDefaultProps(\"HvAccordion\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const { isOpen, toggleOpen, buttonProps, regionProps } = useExpandable({\n    id,\n    expanded,\n    disabled,\n    defaultExpanded,\n  });\n\n  const handleClick = useCallback(\n    (event: React.SyntheticEvent) => {\n      if (!disabled) {\n        onChange?.(event, isOpen);\n        toggleOpen();\n      }\n\n      if (!disableEventHandling) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n    },\n    [disableEventHandling, disabled, isOpen, onChange, toggleOpen],\n  );\n\n  const accordionHeader = useMemo(() => {\n    const accordionButton = (\n      <HvTypography\n        {...buttonProps}\n        component={HvButtonBase}\n        className={cx(classes.label, { [classes.disabled]: disabled })}\n        disabled={disabled}\n        onClick={handleClick}\n        variant={labelVariant}\n      >\n        <DropUpXS\n          color=\"inherit\"\n          style={{ rotate: isOpen ? undefined : \"180deg\" }}\n        />\n        {label}\n      </HvTypography>\n    );\n\n    return headingLevel === undefined ? (\n      accordionButton\n    ) : (\n      <HvTypography component={`h${headingLevel}`} variant={labelVariant}>\n        {accordionButton}\n      </HvTypography>\n    );\n  }, [\n    cx,\n    classes,\n    handleClick,\n    label,\n    buttonProps,\n    disabled,\n    headingLevel,\n    isOpen,\n    labelVariant,\n  ]);\n\n  return (\n    <div ref={ref} id={id} className={cx(classes.root, className)} {...others}>\n      {accordionHeader}\n      <div\n        className={cx(classes.container, { [classes.hidden]: !isOpen })}\n        hidden={!isOpen}\n        {...regionProps}\n        {...containerProps}\n      >\n        {children}\n      </div>\n    </div>\n  );\n});\n"],"names":["HvAccordion"],"mappings":";;;;;;;;;AA8CO,MAAM,cAAc,WAGzB,SAASA,aAAY,OAAO,KAAK;AAC3B,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,eAAe,KAAK;AACxC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,EAAE,QAAQ,YAAY,aAAa,YAAA,IAAgB,cAAc;AAAA,IACrE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAED,QAAM,cAAc;AAAA,IAClB,CAAC,UAAgC;AAC/B,UAAI,CAAC,UAAU;AACb,mBAAW,OAAO,MAAM;AACb;MACb;AAEA,UAAI,CAAC,sBAAsB;AACzB,cAAM,eAAe;AACrB,cAAM,gBAAgB;AAAA,MACxB;AAAA,IACF;AAAA,IACA,CAAC,sBAAsB,UAAU,QAAQ,UAAU,UAAU;AAAA,EAAA;AAGzD,QAAA,kBAAkB,QAAQ,MAAM;AACpC,UAAM,kBACJ;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ,WAAW;AAAA,QACX,WAAW,GAAG,QAAQ,OAAO,EAAE,CAAC,QAAQ,QAAQ,GAAG,UAAU;AAAA,QAC7D;AAAA,QACA,SAAS;AAAA,QACT,SAAS;AAAA,QAET,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,OAAM;AAAA,cACN,OAAO,EAAE,QAAQ,SAAS,SAAY,SAAS;AAAA,YAAA;AAAA,UACjD;AAAA,UACC;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAIE,WAAA,iBAAiB,SACtB,kBAEC,oBAAA,cAAA,EAAa,WAAW,IAAI,YAAY,IAAI,SAAS,cACnD,UACH,gBAAA,CAAA;AAAA,EAAA,GAED;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAGC,SAAA,qBAAC,OAAI,EAAA,KAAU,IAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QAChE,UAAA;AAAA,IAAA;AAAA,IACD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,QAAQ,WAAW,EAAE,CAAC,QAAQ,MAAM,GAAG,CAAC,QAAQ;AAAA,QAC9D,QAAQ,CAAC;AAAA,QACR,GAAG;AAAA,QACH,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IACH;AAAA,EACF,EAAA,CAAA;AAEJ,CAAC;"}
+{"version":3,"file":"Accordion.js","sources":["../../../src/Accordion/Accordion.tsx"],"sourcesContent":["import { forwardRef, useCallback, useMemo } from \"react\";\nimport { DropUpXS } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButtonBase } from \"../ButtonBase\";\nimport { useExpandable } from \"../hooks/useExpandable\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography, HvTypographyVariants } from \"../Typography\";\nimport { staticClasses, useClasses } from \"./Accordion.styles\";\n\nexport { staticClasses as accordionClasses };\n\nexport type HvAccordionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAccordionProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\" | \"children\"> {\n  /** Content to be rendered. */\n  children: React.ReactNode;\n  /** The accordion label button. */\n  label?: string;\n  /** The function that will be executed whenever the accordion toggles. It will receive the state of the accordion. */\n  onChange?: (event: React.SyntheticEvent, value: boolean) => void;\n  /** Whether the accordion is open or not. If this property is defined the accordion must be fully controlled. */\n  expanded?: boolean;\n  /** When uncontrolled, defines the initial expanded state. */\n  defaultExpanded?: boolean;\n  /** An object containing props to be passed onto container holding the accordion children. */\n  containerProps?: React.HTMLAttributes<HTMLDivElement>;\n  /** Heading level to apply to accordion button. If ´undefined´ the button won't have a header wrapper. */\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n  /** Whether the accordion is disabled. */\n  disabled?: boolean;\n  /** Typography variant for the label. */\n  labelVariant?: HvTypographyVariants;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvAccordionClasses;\n  /** Whether to disable the internal usage of `preventDefault` and `stopPropagation` when the `onChange` event is triggered. */\n  disableEventHandling?: boolean; // TODO - remove in v6 as this should be the default behavior: `preventDefault` and `stopPropagation` shouldn't be triggered internally\n}\n\n/**\n * A accordion is a design element that expands in place to expose hidden information.\n */\nexport const HvAccordion = forwardRef<\n  React.ComponentRef<\"div\">,\n  HvAccordionProps\n>(function HvAccordion(props, ref) {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    disabled = false,\n    label,\n    onChange,\n    children,\n    expanded,\n    headingLevel,\n    defaultExpanded = false,\n    containerProps,\n    labelVariant = \"label\",\n    disableEventHandling,\n    ...others\n  } = useDefaultProps(\"HvAccordion\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const { isOpen, toggleOpen, buttonProps, regionProps } = useExpandable({\n    id,\n    expanded,\n    disabled,\n    defaultExpanded,\n  });\n\n  const handleClick = useCallback(\n    (event: React.SyntheticEvent) => {\n      if (!disabled) {\n        onChange?.(event, isOpen);\n        toggleOpen();\n      }\n\n      if (!disableEventHandling) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n    },\n    [disableEventHandling, disabled, isOpen, onChange, toggleOpen],\n  );\n\n  const accordionHeader = useMemo(() => {\n    const accordionButton = (\n      <HvTypography\n        {...buttonProps}\n        component={HvButtonBase}\n        className={cx(classes.label, { [classes.disabled]: disabled })}\n        disabled={disabled}\n        onClick={handleClick}\n        variant={labelVariant}\n      >\n        <DropUpXS\n          color=\"inherit\"\n          style={{ rotate: isOpen ? undefined : \"180deg\" }}\n        />\n        {label}\n      </HvTypography>\n    );\n\n    return headingLevel === undefined ? (\n      accordionButton\n    ) : (\n      <HvTypography component={`h${headingLevel}`} variant={labelVariant}>\n        {accordionButton}\n      </HvTypography>\n    );\n  }, [\n    cx,\n    classes,\n    handleClick,\n    label,\n    buttonProps,\n    disabled,\n    headingLevel,\n    isOpen,\n    labelVariant,\n  ]);\n\n  return (\n    <div ref={ref} id={id} className={cx(classes.root, className)} {...others}>\n      {accordionHeader}\n      <div\n        className={cx(classes.container, { [classes.hidden]: !isOpen })}\n        hidden={!isOpen}\n        {...regionProps}\n        {...containerProps}\n      >\n        {children}\n      </div>\n    </div>\n  );\n});\n"],"names":["HvAccordion"],"mappings":";;;;;;;;;AA8CO,MAAM,cAAc,WAGzB,SAASA,aAAY,OAAO,KAAK;AAC3B,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,eAAe,KAAK;AACxC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,QAAM,EAAE,QAAQ,YAAY,aAAa,YAAA,IAAgB,cAAc;AAAA,IACrE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAED,QAAM,cAAc;AAAA,IAClB,CAAC,UAAgC;AAC/B,UAAI,CAAC,UAAU;AACb,mBAAW,OAAO,MAAM;AACb,mBAAA;AAAA,MAAA;AAGb,UAAI,CAAC,sBAAsB;AACzB,cAAM,eAAe;AACrB,cAAM,gBAAgB;AAAA,MAAA;AAAA,IAE1B;AAAA,IACA,CAAC,sBAAsB,UAAU,QAAQ,UAAU,UAAU;AAAA,EAC/D;AAEM,QAAA,kBAAkB,QAAQ,MAAM;AACpC,UAAM,kBACJ;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ,WAAW;AAAA,QACX,WAAW,GAAG,QAAQ,OAAO,EAAE,CAAC,QAAQ,QAAQ,GAAG,UAAU;AAAA,QAC7D;AAAA,QACA,SAAS;AAAA,QACT,SAAS;AAAA,QAET,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,OAAM;AAAA,cACN,OAAO,EAAE,QAAQ,SAAS,SAAY,SAAS;AAAA,YAAA;AAAA,UACjD;AAAA,UACC;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAGK,WAAA,iBAAiB,SACtB,kBAEC,oBAAA,cAAA,EAAa,WAAW,IAAI,YAAY,IAAI,SAAS,cACnD,UACH,iBAAA;AAAA,EAAA,GAED;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAGC,SAAA,qBAAC,OAAI,EAAA,KAAU,IAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QAChE,UAAA;AAAA,IAAA;AAAA,IACD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,QAAQ,WAAW,EAAE,CAAC,QAAQ,MAAM,GAAG,CAAC,QAAQ;AAAA,QAC9D,QAAQ,CAAC;AAAA,QACR,GAAG;AAAA,QACH,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ,CAAC;"}

package/dist/esm/Accordion/Accordion.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.styles.js","sources":["../../../src/Accordion/Accordion.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvAccordion\", {\n  root: {\n    \"& + root\": {\n      paddingTop: 8,\n    },\n  },\n  hidden: { height: 0, display: \"none\" },\n  container: { paddingTop: 8, height: \"auto\" },\n  label: {\n    width: \"100%\",\n    display: \"flex\",\n    justifyContent: \"flex-start\",\n    alignItems: \"center\",\n    height: \"32px\",\n  },\n  disabled: {},\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,eAAe;AAAA,EACxE,MAAM;AAAA,IACJ,YAAY;AAAA,MACV,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACA,QAAQ,EAAE,QAAQ,GAAG,SAAS,OAAO;AAAA,EACrC,WAAW,EAAE,YAAY,GAAG,QAAQ,OAAO;AAAA,EAC3C,OAAO;AAAA,IACL,OAAO;AAAA,IACP,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,QAAQ;AAAA,EACV;AAAA,EACA,UAAU,CAAC;AACb,CAAC;"}
+{"version":3,"file":"Accordion.styles.js","sources":["../../../src/Accordion/Accordion.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvAccordion\", {\n  root: {\n    \"& + root\": {\n      paddingTop: 8,\n    },\n  },\n  hidden: { height: 0, display: \"none\" },\n  container: { paddingTop: 8, height: \"auto\" },\n  label: {\n    width: \"100%\",\n    display: \"flex\",\n    justifyContent: \"flex-start\",\n    alignItems: \"center\",\n    height: \"32px\",\n  },\n  disabled: {},\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,eAAe;AAAA,EACxE,MAAM;AAAA,IACJ,YAAY;AAAA,MACV,YAAY;AAAA,IAAA;AAAA,EAEhB;AAAA,EACA,QAAQ,EAAE,QAAQ,GAAG,SAAS,OAAO;AAAA,EACrC,WAAW,EAAE,YAAY,GAAG,QAAQ,OAAO;AAAA,EAC3C,OAAO;AAAA,IACL,OAAO;AAAA,IACP,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,QAAQ;AAAA,EACV;AAAA,EACA,UAAU,CAAA;AACZ,CAAC;"}

package/dist/esm/ActionBar/ActionBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionBar.js","sources":["../../../src/ActionBar/ActionBar.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { staticClasses, useClasses } from \"./ActionBar.styles\";\n\nexport { staticClasses as actionBarClasses };\n\nexport type HvActionBarClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvActionBarProps extends HvBaseProps {\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvActionBarClasses;\n}\n\nexport const HvActionBar = forwardRef<\n  React.ComponentRef<\"div\">,\n  HvActionBarProps\n>(function HvActionBar(props, ref) {\n  const {\n    classes: classesProp,\n    className,\n    children,\n    ...others\n  } = useDefaultProps(\"HvActionBar\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <div ref={ref} className={cx(classes.root, className)} {...others}>\n      {children}\n    </div>\n  );\n});\n"],"names":["HvActionBar"],"mappings":";;;;;AAkBO,MAAM,cAAc,WAGzB,SAASA,aAAY,OAAO,KAAK;AAC3B,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,eAAe,KAAK;AACxC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,SAAA,oBAAC,OAAI,EAAA,KAAU,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACxD,SACH,CAAA;AAEJ,CAAC;"}
+{"version":3,"file":"ActionBar.js","sources":["../../../src/ActionBar/ActionBar.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { staticClasses, useClasses } from \"./ActionBar.styles\";\n\nexport { staticClasses as actionBarClasses };\n\nexport type HvActionBarClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvActionBarProps extends HvBaseProps {\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvActionBarClasses;\n}\n\nexport const HvActionBar = forwardRef<\n  React.ComponentRef<\"div\">,\n  HvActionBarProps\n>(function HvActionBar(props, ref) {\n  const {\n    classes: classesProp,\n    className,\n    children,\n    ...others\n  } = useDefaultProps(\"HvActionBar\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <div ref={ref} className={cx(classes.root, className)} {...others}>\n      {children}\n    </div>\n  );\n});\n"],"names":["HvActionBar"],"mappings":";;;;;AAkBO,MAAM,cAAc,WAGzB,SAASA,aAAY,OAAO,KAAK;AAC3B,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,eAAe,KAAK;AACxC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAG5C,SAAA,oBAAC,OAAI,EAAA,KAAU,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACxD,SACH,CAAA;AAEJ,CAAC;"}

package/dist/esm/ActionBar/ActionBar.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionBar.styles.js","sources":["../../../src/ActionBar/ActionBar.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvActionBar\", {\n  root: {\n    width: \"100%\",\n    padding: theme.space.sm,\n    borderTop: `1px solid ${theme.colors.atmo4}`,\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"flex-end\",\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,eAAe;AAAA,EACxE,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,SAAS,MAAM,MAAM;AAAA,IACrB,WAAW,aAAa,MAAM,OAAO,KAAK;AAAA,IAC1C,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AACF,CAAC;"}
+{"version":3,"file":"ActionBar.styles.js","sources":["../../../src/ActionBar/ActionBar.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvActionBar\", {\n  root: {\n    width: \"100%\",\n    padding: theme.space.sm,\n    borderTop: `1px solid ${theme.colors.atmo4}`,\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"flex-end\",\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,eAAe;AAAA,EACxE,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,SAAS,MAAM,MAAM;AAAA,IACrB,WAAW,aAAa,MAAM,OAAO,KAAK;AAAA,IAC1C,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAAA;AAEpB,CAAC;"}