@hitachivantara/uikit-react-core 5.80.0 → 5.80.2

package/dist/cjs/Tab/Tab.styles.cjs

@@ -6,11 +6,10 @@ const focusUtils = require("../utils/focusUtils.cjs");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTab", {
   root: {
     marginTop: "3px",
-    padding: "0 16px",
+    padding: uikitStyles.theme.spacing(0, "sm"),
     minWidth: 70,
     minHeight: 32,
     textTransform: "none",
-    fontFamily: uikitStyles.theme.fontFamily.body,
     ...uikitStyles.theme.typography.body,
     "&:hover": {
       backgroundColor: uikitStyles.theme.colors.containerBackgroundHover,
@@ -21,10 +20,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTab", {
       }
     },
     "&$selected": {
-      color: uikitStyles.theme.typography.label.color,
-      fontWeight: uikitStyles.theme.typography.label.fontWeight,
-      lineHeight: uikitStyles.theme.typography.label.lineHeight,
-      letterSpacing: uikitStyles.theme.typography.label.letterSpacing
+      fontWeight: uikitStyles.theme.typography.label.fontWeight
     },
     "&$disabled": {
       color: uikitStyles.theme.colors.secondary_60,
@@ -48,6 +44,9 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTab", {
     // Override Mui styling: https://mui.com/material-ui/api/tab/#css
     "& .MuiTab-iconWrapper": {
       margin: 0
+    },
+    "& svg .color0": {
+      fill: "currentcolor"
     }
   },
   focusVisible: {

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;

package/dist/cjs/Tabs/Tabs.cjs

@@ -1,32 +1,32 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
 const Tabs = require("@mui/material/Tabs");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const Tabs_styles = require("./Tabs.styles.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const Tabs__default = /* @__PURE__ */ _interopDefault(Tabs);
-const HvTabs = (props) => {
+const HvTabs = React.forwardRef(function HvTabs2(props, ref) {
   const {
     classes: classesProp,
-    floating = false,
+    floating,
     ...others
   } = uikitReactUtils.useDefaultProps("HvTabs", props);
   const { classes, cx } = Tabs_styles.useClasses(classesProp);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Tabs__default.default,
     {
+      ref,
       classes: {
-        root: classes.root,
+        root: cx(classes.root, { [classes.floating]: floating }),
         flexContainer: classes.flexContainer,
         indicator: classes.indicator,
         scroller: classes.scroller
       },
-      TabIndicatorProps: { children: /* @__PURE__ */ jsxRuntime.jsx("div", {}) },
-      className: cx(floating && classes.floating),
       ...others
     }
   );
-};
+});
 exports.tabsClasses = Tabs_styles.staticClasses;
 exports.HvTabs = HvTabs;

package/dist/cjs/Tabs/Tabs.styles.cjs

@@ -1,29 +1,17 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const uikitStyles = require("@hitachivantara/uikit-styles");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTabs", {
   root: {
     minHeight: 0,
     overflow: "visible"
   },
-  indicator: {
-    display: "flex",
-    justifyContent: "center",
-    backgroundColor: "transparent",
-    "& > div": {
-      width: "100%",
-      backgroundColor: `${uikitStyles.theme.colors.secondary}`
-    },
-    height: 2
-  },
+  indicator: {},
   scroller: {
     overflow: "visible !important"
   },
   flexContainer: {
-    "& button:first-of-type": {
-      marginLeft: "3px"
-    }
+    marginLeft: "3px"
   },
   floating: {}
 });

package/dist/cjs/Tag/Tag.cjs

@@ -13,7 +13,7 @@ const Chip__default = /* @__PURE__ */ _interopDefault(Chip);
 const getCategoricalColor = (customColor, colors) => {
   return customColor && colors?.[customColor] || customColor || colors?.cat1;
 };
-const HvTag = React.forwardRef((props, ref) => {
+const HvTag = React.forwardRef(function HvTag2(props, ref) {
   const {
     classes: classesProp,
     className,

package/dist/cjs/TagsInput/TagsInput.cjs

@@ -25,7 +25,7 @@ const Input = require("../Input/Input.cjs");
 const Suggestions = require("../Forms/Suggestions/Suggestions.cjs");
 const WarningText = require("../Forms/WarningText/WarningText.cjs");
 const HvTagsInput = React.forwardRef(
-  (props, ref) => {
+  function HvTagsInput2(props, ref) {
     const {
       classes: classesProp,
       className,

package/dist/cjs/TextArea/TextArea.cjs

@@ -16,7 +16,7 @@ const InfoMessage = require("../Forms/InfoMessage/InfoMessage.cjs");
 const CharCounter = require("../Forms/CharCounter/CharCounter.cjs");
 const BaseInput = require("../BaseInput/BaseInput.cjs");
 const WarningText = require("../Forms/WarningText/WarningText.cjs");
-const HvTextArea = React.forwardRef((props, ref) => {
+const HvTextArea = React.forwardRef(function HvTextArea2(props, ref) {
   const {
     id,
     className,

package/dist/cjs/TimePicker/Placeholder.cjs

@@ -22,7 +22,7 @@ const PlaceholderSegment = ({
   })() });
 };
 const Placeholder = React.forwardRef(
-  (props, ref) => {
+  function Placeholder2(props, ref) {
     const { name, state, placeholders, onKeyDown, ...others } = props;
     const { value, segments } = state;
     return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(

package/dist/cjs/TimePicker/TimePicker.cjs

@@ -25,7 +25,7 @@ const toTime = (value) => {
   return new date.Time(hours, minutes, seconds);
 };
 const HvTimePicker = React.forwardRef(
-  (props, ref) => {
+  function HvTimePicker2(props, ref) {
     const {
       classes: classesProp,
       className,

package/dist/cjs/ToggleButton/ToggleButton.cjs

@@ -5,7 +5,7 @@ const React = require("react");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const useControlled = require("../hooks/useControlled.cjs");
 const Button = require("../Button/Button.cjs");
-const HvToggleButton = React.forwardRef((props, ref) => {
+const HvToggleButton = React.forwardRef(function HvToggleButton2(props, ref) {
   const {
     defaultSelected,
     selected,

package/dist/cjs/Tooltip/Tooltip.cjs

@@ -10,7 +10,7 @@ const Tooltip_styles = require("./Tooltip.styles.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const Fade__default = /* @__PURE__ */ _interopDefault(Fade);
 const Tooltip__default = /* @__PURE__ */ _interopDefault(Tooltip);
-const HvTooltip = React.forwardRef((props, ref) => {
+const HvTooltip = React.forwardRef(function HvTooltip2(props, ref) {
   const {
     className,
     classes: classesProp,

package/dist/cjs/TreeView/TreeItem/DefaultContent.cjs

@@ -14,7 +14,7 @@ const { useClasses } = uikitReactUtils.createClasses("HvTreeContent", {
   label: {}
 });
 const DefaultContent = React.forwardRef(
-  (props, ref) => {
+  function DefaultContent2(props, ref) {
     const {
       classes: classesProp,
       className,

package/dist/cjs/TreeView/TreeItem/TreeItem.cjs

@@ -12,7 +12,7 @@ const TreeItem_styles = require("./TreeItem.styles.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const Collapse__default = /* @__PURE__ */ _interopDefault(Collapse);
 const HvTreeItem = React.forwardRef(
-  (props, ref) => {
+  function HvTreeItem2(props, ref) {
     const {
       id: idProp,
       nodeId,

package/dist/cjs/VerticalNavigation/TreeView/TreeView.cjs

@@ -18,7 +18,7 @@ function findNextFirstChar(firstChars, startIndex, char) {
 function noopSelection() {
   return false;
 }
-const HvVerticalNavigationTreeView = React.forwardRef((props, ref) => {
+const HvVerticalNavigationTreeView = React.forwardRef(function HvVerticalNavigationTreeView2(props, ref) {
   const {
     id: idProp,
     className,

package/dist/cjs/VerticalNavigation/VerticalNavigation.cjs

@@ -7,7 +7,7 @@ const utils = require("./NavigationSlider/utils.cjs");
 const VerticalNavigation_utils = require("./utils/VerticalNavigation.utils.cjs");
 const VerticalNavigation_styles = require("./VerticalNavigation.styles.cjs");
 const VerticalNavigationContext = require("./VerticalNavigationContext.cjs");
-const HvVerticalNavigation = React.forwardRef((props, ref) => {
+const HvVerticalNavigation = React.forwardRef(function HvVerticalNavigation2(props, ref) {
   const {
     id,
     className,

package/dist/cjs/providers/ThemeProvider.cjs

@@ -92,7 +92,8 @@ const HvThemeProvider = ({
       components: {
         MuiButtonBase: {
           defaultProps: {
-            disableRipple: true
+            disableRipple: true,
+            disableTouchRipple: true
           }
         }
       },

package/dist/cjs/utils/helpers.cjs

@@ -6,8 +6,8 @@ const uniqueId = (prefix = "") => {
 const range = (length, start = 0) => {
   return Array.from({ length: length - start }, (_, i) => i + start);
 };
-const capitalize = (string = "") => {
-  return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
+const capitalize = (string) => {
+  return string.charAt(0).toUpperCase() + string.slice(1);
 };
 function isEqual(obj1, obj2) {
   if (!obj1 || !obj2 || typeof obj1 !== "object" || typeof obj2 !== "object") {

package/dist/esm/Accordion/Accordion.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useCallback, useMemo } from "react";
+import { forwardRef, useCallback, useMemo } from "react";
 import { DropUpXS } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useExpandable } from "../hooks/useExpandable.js";
@@ -7,9 +7,9 @@ import { useClasses } from "./Accordion.styles.js";
 import { staticClasses } from "./Accordion.styles.js";
 import { HvButtonBase } from "../ButtonBase/ButtonBase.js";
 import { HvTypography } from "../Typography/Typography.js";
-const HvAccordion = (props) => {
+const HvAccordion = forwardRef(function HvAccordion2(props, ref) {
   const {
-    id: idProp,
+    id,
     className,
     classes: classesProp,
     disabled = false,
@@ -26,7 +26,7 @@ const HvAccordion = (props) => {
   } = useDefaultProps("HvAccordion", props);
   const { classes, cx } = useClasses(classesProp);
   const { isOpen, toggleOpen, buttonProps, regionProps } = useExpandable({
-    id: idProp,
+    id,
     expanded,
     disabled,
     defaultExpanded
@@ -78,7 +78,7 @@ const HvAccordion = (props) => {
     isOpen,
     labelVariant
   ]);
-  return /* @__PURE__ */ jsxs("div", { id: idProp, className: cx(classes.root, className), ...others, children: [
+  return /* @__PURE__ */ jsxs("div", { ref, id, className: cx(classes.root, className), ...others, children: [
     accordionHeader,
     /* @__PURE__ */ jsx(
       "div",
@@ -91,7 +91,7 @@ const HvAccordion = (props) => {
       }
     )
   ] });
-};
+});
 export {
   HvAccordion,
   staticClasses as accordionClasses

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

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sources":["../../../src/Accordion/Accordion.tsx"],"sourcesContent":["import { 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 = (props: HvAccordionProps) => {\n  const {\n    id: idProp,\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: idProp,\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 id={idProp} 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":[],"mappings":";;;;;;;;;AA8Ca,MAAA,cAAc,CAAC,UAA4B;AAChD,QAAA;AAAA,IACJ,IAAI;AAAA,IACJ;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,IAAI;AAAA,IACJ;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,IAAI,QAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QAC1D,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;"}
+{"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;"}

package/dist/esm/ActionBar/ActionBar.js

@@ -1,8 +1,9 @@
 import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useClasses } from "./ActionBar.styles.js";
 import { staticClasses } from "./ActionBar.styles.js";
-const HvActionBar = (props) => {
+const HvActionBar = forwardRef(function HvActionBar2(props, ref) {
   const {
     classes: classesProp,
     className,
@@ -10,8 +11,8 @@ const HvActionBar = (props) => {
     ...others
   } = useDefaultProps("HvActionBar", props);
   const { classes, cx } = useClasses(classesProp);
-  return /* @__PURE__ */ jsx("div", { className: cx(classes.root, className), ...others, children });
-};
+  return /* @__PURE__ */ jsx("div", { ref, className: cx(classes.root, className), ...others, children });
+});
 export {
   HvActionBar,
   staticClasses as actionBarClasses

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

@@ -1 +1 @@
-{"version":3,"file":"ActionBar.js","sources":["../../../src/ActionBar/ActionBar.tsx"],"sourcesContent":["import {\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 = (props: HvActionBarProps) => {\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 className={cx(classes.root, className)} {...others}>\n      {children}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;AAiBa,MAAA,cAAc,CAAC,UAA4B;AAChD,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,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QAC9C,SACH,CAAA;AAEJ;"}
+{"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;"}

package/dist/esm/ActionsGeneric/ActionsGeneric.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { isValidElement } from "react";
+import { forwardRef, isValidElement } from "react";
 import { MoreOptionsVertical } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { setId } from "../utils/setId.js";
@@ -8,7 +8,7 @@ import { staticClasses } from "./ActionsGeneric.styles.js";
 import { HvIconButton } from "../IconButton/IconButton.js";
 import { HvButton } from "../Button/Button.js";
 import { HvDropDownMenu } from "../DropDownMenu/DropDownMenu.js";
-const HvActionsGeneric = (props) => {
+const HvActionsGeneric = forwardRef(function HvActionsGeneric2(props, ref) {
   const {
     id: idProp,
     classes: classesProp,
@@ -96,6 +96,7 @@ const HvActionsGeneric = (props) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
+      ref,
       className: cx(
         classes.root,
         { [classes.actionContainer]: actionOverflow },
@@ -105,7 +106,7 @@ const HvActionsGeneric = (props) => {
       children: actionOverflow ? renderActionsGrid() : actions.map((action, idx) => renderButton(action, idx))
     }
   );
-};
+});
 export {
   HvActionsGeneric,
   staticClasses as actionsGenericClasses

package/dist/esm/ActionsGeneric/ActionsGeneric.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionsGeneric.js","sources":["../../../src/ActionsGeneric/ActionsGeneric.tsx"],"sourcesContent":["import { isValidElement } from \"react\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButton, HvButtonProps, HvButtonVariant } from \"../Button\";\nimport { HvDropDownMenu, HvDropDownMenuProps } from \"../DropDownMenu\";\nimport { HvIconButton } from \"../IconButton\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./ActionsGeneric.styles\";\n\nexport { staticClasses as actionsGenericClasses };\n\nexport type HvActionsGenericClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvActionGeneric {\n  /** Action id. */\n  id: string;\n  /** Action label. */\n  label: string;\n  /** Action icon. */\n  icon?:\n    | React.ReactNode\n    | ((params: { isDisabled?: boolean }) => React.ReactNode);\n  /** Whether the action is disabled or not. */\n  disabled?: boolean;\n  /** When set to `true`, the button will have the icon has its content and a tooltip with the label will appear when the button is visible and hovered. */\n  iconOnly?: boolean;\n}\n\nexport interface HvActionsGenericProps extends HvBaseProps {\n  /**\n   * The button category for all actions.\n   *\n   * @deprecated Use `variant` instead.\n   */\n  category?: HvButtonVariant;\n  /** The button variant for all actions. */\n  variant?: HvButtonVariant;\n  /** Whether the actions should be all disabled. */\n  disabled?: boolean;\n  /** Whether the actions should be all icon buttons when visible. */\n  iconOnly?: boolean;\n  /** The renderable content inside the actions slot of the footer, or an array of actions. */\n  actions: React.ReactNode | HvActionGeneric[];\n  /**\n   * The callback function called when an action is triggered, receiving the `action` as parameter.\n   *\n   * @deprecated Use `onAction` instead.\n   * */\n  actionsCallback?: (\n    event: React.SyntheticEvent,\n    id: string,\n    action: HvActionGeneric,\n  ) => void;\n  /** The callback function called when an action is triggered, receiving the `action` as parameter. */\n  onAction?: (event: React.SyntheticEvent, action: HvActionGeneric) => void;\n  /** The maximum number of visible actions before they're collapsed into a dropdown menu. */\n  maxVisibleActions?: number;\n  /** Props to be applied to the dropdown menu. */\n  dropdownMenuProps?: Partial<HvDropDownMenuProps>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvActionsGenericClasses;\n}\n\nexport const HvActionsGeneric = (props: HvActionsGenericProps) => {\n  const {\n    id: idProp,\n    classes: classesProp,\n    className,\n    category = \"secondaryGhost\", // TODO - remove and update variant default in v6\n    variant: variantProp,\n    disabled = false,\n    actions = [],\n    actionsCallback, // TODO - remove in v6\n    onAction,\n    maxVisibleActions = Infinity,\n    iconOnly: iconOnlyProp,\n    dropdownMenuProps: dropdownMenuPropsProp,\n    ...others\n  } = useDefaultProps(\"HvActionsGeneric\", props);\n\n  const { onClick: onClickDropdownMenu, ...dropdownMenuProps } =\n    dropdownMenuPropsProp || {};\n\n  const variant = variantProp || category;\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const handleCallback: HvActionsGenericProps[\"actionsCallback\"] = (\n    event,\n    id,\n    action,\n  ) => {\n    actionsCallback?.(event, id, action);\n    onAction?.(event, action);\n  };\n\n  if (!Array.isArray(actions)) return isValidElement(actions) ? actions : null;\n\n  const renderButton = (action: HvActionGeneric, idx: number) => {\n    const {\n      disabled: actDisabled,\n      id: actId,\n      icon,\n      label,\n      iconOnly,\n      ...other\n    } = action;\n    const actionId = setId(idProp, idx, \"action\", action.id);\n\n    const renderedIcon = isValidElement(icon)\n      ? icon\n      : (icon as Function)?.({ isDisabled: disabled });\n\n    const commonButtonProps: HvButtonProps = {\n      id: actionId,\n      variant,\n      className: classes.button,\n      disabled: actDisabled ?? disabled,\n      onClick: (event) => handleCallback(event, idProp || \"\", action),\n      ...other,\n    };\n\n    const key = actionId || idx;\n    const isIcon = iconOnly ?? iconOnlyProp;\n\n    if (isIcon) {\n      return (\n        <HvIconButton key={key} {...commonButtonProps} title={label}>\n          {renderedIcon}\n        </HvIconButton>\n      );\n    }\n\n    return (\n      <HvButton key={key} {...commonButtonProps} startIcon={renderedIcon}>\n        {label}\n      </HvButton>\n    );\n  };\n\n  const renderActionsGrid = () => {\n    const actsVisible = actions.slice(0, maxVisibleActions);\n    const actsDropdown = actions.slice(maxVisibleActions);\n\n    const semantic = variant === \"semantic\";\n    const iconColor =\n      (disabled && \"secondary_60\") || (semantic && \"base_dark\") || undefined;\n\n    return (\n      <>\n        {actsVisible.map((action, idx) => renderButton(action, idx))}\n        <HvDropDownMenu\n          id={setId(idProp, \"menu\")}\n          disabled={disabled}\n          variant={variant}\n          classes={{\n            root: classes.dropDownMenu,\n            icon: classes.dropDownMenuButton,\n            iconSelected: classes.dropDownMenuButtonSelected,\n          }}\n          icon={<MoreOptionsVertical color={iconColor} />}\n          placement=\"left\"\n          onClick={(event, action) => {\n            handleCallback(event, idProp || \"\", action as HvActionGeneric);\n            onClickDropdownMenu?.(event, action);\n          }}\n          dataList={actsDropdown}\n          keepOpened={false}\n          disablePortal={false}\n          {...dropdownMenuProps}\n        />\n      </>\n    );\n  };\n\n  const actionOverflow = actions.length > maxVisibleActions;\n\n  return (\n    <div\n      className={cx(\n        classes.root,\n        { [classes.actionContainer]: actionOverflow },\n        className,\n      )}\n      {...others}\n    >\n      {actionOverflow\n        ? renderActionsGrid()\n        : actions.map((action, idx) => renderButton(action, idx))}\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ActionsGeneric.js","sources":["../../../src/ActionsGeneric/ActionsGeneric.tsx"],"sourcesContent":["import { forwardRef, isValidElement } from \"react\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButton, HvButtonProps, HvButtonVariant } from \"../Button\";\nimport { HvDropDownMenu, HvDropDownMenuProps } from \"../DropDownMenu\";\nimport { HvIconButton } from \"../IconButton\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./ActionsGeneric.styles\";\n\nexport { staticClasses as actionsGenericClasses };\n\nexport type HvActionsGenericClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvActionGeneric {\n  /** Action id. */\n  id: string;\n  /** Action label. */\n  label: string;\n  /** Action icon. */\n  icon?:\n    | React.ReactNode\n    | ((params: { isDisabled?: boolean }) => React.ReactNode);\n  /** Whether the action is disabled or not. */\n  disabled?: boolean;\n  /** When set to `true`, the button will have the icon has its content and a tooltip with the label will appear when the button is visible and hovered. */\n  iconOnly?: boolean;\n}\n\nexport interface HvActionsGenericProps extends HvBaseProps {\n  /**\n   * The button category for all actions.\n   *\n   * @deprecated Use `variant` instead.\n   */\n  category?: HvButtonVariant;\n  /** The button variant for all actions. */\n  variant?: HvButtonVariant;\n  /** Whether the actions should be all disabled. */\n  disabled?: boolean;\n  /** Whether the actions should be all icon buttons when visible. */\n  iconOnly?: boolean;\n  /** The renderable content inside the actions slot of the footer, or an array of actions. */\n  actions: React.ReactNode | HvActionGeneric[];\n  /**\n   * The callback function called when an action is triggered, receiving the `action` as parameter.\n   *\n   * @deprecated Use `onAction` instead.\n   * */\n  actionsCallback?: (\n    event: React.SyntheticEvent,\n    id: string,\n    action: HvActionGeneric,\n  ) => void;\n  /** The callback function called when an action is triggered, receiving the `action` as parameter. */\n  onAction?: (event: React.SyntheticEvent, action: HvActionGeneric) => void;\n  /** The maximum number of visible actions before they're collapsed into a dropdown menu. */\n  maxVisibleActions?: number;\n  /** Props to be applied to the dropdown menu. */\n  dropdownMenuProps?: Partial<HvDropDownMenuProps>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvActionsGenericClasses;\n}\n\nexport const HvActionsGeneric = forwardRef<\n  React.ComponentRef<\"div\">,\n  HvActionsGenericProps\n>(function HvActionsGeneric(props, ref) {\n  const {\n    id: idProp,\n    classes: classesProp,\n    className,\n    category = \"secondaryGhost\", // TODO - remove and update variant default in v6\n    variant: variantProp,\n    disabled = false,\n    actions = [],\n    actionsCallback, // TODO - remove in v6\n    onAction,\n    maxVisibleActions = Infinity,\n    iconOnly: iconOnlyProp,\n    dropdownMenuProps: dropdownMenuPropsProp,\n    ...others\n  } = useDefaultProps(\"HvActionsGeneric\", props);\n\n  const { onClick: onClickDropdownMenu, ...dropdownMenuProps } =\n    dropdownMenuPropsProp || {};\n\n  const variant = variantProp || category;\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const handleCallback: HvActionsGenericProps[\"actionsCallback\"] = (\n    event,\n    id,\n    action,\n  ) => {\n    actionsCallback?.(event, id, action);\n    onAction?.(event, action);\n  };\n\n  if (!Array.isArray(actions)) return isValidElement(actions) ? actions : null;\n\n  const renderButton = (action: HvActionGeneric, idx: number) => {\n    const {\n      disabled: actDisabled,\n      id: actId,\n      icon,\n      label,\n      iconOnly,\n      ...other\n    } = action;\n    const actionId = setId(idProp, idx, \"action\", action.id);\n\n    const renderedIcon = isValidElement(icon)\n      ? icon\n      : (icon as Function)?.({ isDisabled: disabled });\n\n    const commonButtonProps: HvButtonProps = {\n      id: actionId,\n      variant,\n      className: classes.button,\n      disabled: actDisabled ?? disabled,\n      onClick: (event) => handleCallback(event, idProp || \"\", action),\n      ...other,\n    };\n\n    const key = actionId || idx;\n    const isIcon = iconOnly ?? iconOnlyProp;\n\n    if (isIcon) {\n      return (\n        <HvIconButton key={key} {...commonButtonProps} title={label}>\n          {renderedIcon}\n        </HvIconButton>\n      );\n    }\n\n    return (\n      <HvButton key={key} {...commonButtonProps} startIcon={renderedIcon}>\n        {label}\n      </HvButton>\n    );\n  };\n\n  const renderActionsGrid = () => {\n    const actsVisible = actions.slice(0, maxVisibleActions);\n    const actsDropdown = actions.slice(maxVisibleActions);\n\n    const semantic = variant === \"semantic\";\n    const iconColor =\n      (disabled && \"secondary_60\") || (semantic && \"base_dark\") || undefined;\n\n    return (\n      <>\n        {actsVisible.map((action, idx) => renderButton(action, idx))}\n        <HvDropDownMenu\n          id={setId(idProp, \"menu\")}\n          disabled={disabled}\n          variant={variant}\n          classes={{\n            root: classes.dropDownMenu,\n            icon: classes.dropDownMenuButton,\n            iconSelected: classes.dropDownMenuButtonSelected,\n          }}\n          icon={<MoreOptionsVertical color={iconColor} />}\n          placement=\"left\"\n          onClick={(event, action) => {\n            handleCallback(event, idProp || \"\", action as HvActionGeneric);\n            onClickDropdownMenu?.(event, action);\n          }}\n          dataList={actsDropdown}\n          keepOpened={false}\n          disablePortal={false}\n          {...dropdownMenuProps}\n        />\n      </>\n    );\n  };\n\n  const actionOverflow = actions.length > maxVisibleActions;\n\n  return (\n    <div\n      ref={ref}\n      className={cx(\n        classes.root,\n        { [classes.actionContainer]: actionOverflow },\n        className,\n      )}\n      {...others}\n    >\n      {actionOverflow\n        ? renderActionsGrid()\n        : actions.map((action, idx) => renderButton(action, idx))}\n    </div>\n  );\n});\n"],"names":["HvActionsGeneric"],"mappings":";;;;;;;;;;AAoEO,MAAM,mBAAmB,WAG9B,SAASA,kBAAiB,OAAO,KAAK;AAChC,QAAA;AAAA,IACJ,IAAI;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA,WAAW;AAAA;AAAA,IACX,SAAS;AAAA,IACT,WAAW;AAAA,IACX,UAAU,CAAC;AAAA,IACX;AAAA;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA,IACpB,UAAU;AAAA,IACV,mBAAmB;AAAA,IACnB,GAAG;AAAA,EAAA,IACD,gBAAgB,oBAAoB,KAAK;AAE7C,QAAM,EAAE,SAAS,qBAAqB,GAAG,kBAAkB,IACzD,yBAAyB;AAE3B,QAAM,UAAU,eAAe;AAE/B,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,iBAA2D,CAC/D,OACA,IACA,WACG;AACe,sBAAA,OAAO,IAAI,MAAM;AACnC,eAAW,OAAO,MAAM;AAAA,EAAA;AAGtB,MAAA,CAAC,MAAM,QAAQ,OAAO,EAAU,QAAA,eAAe,OAAO,IAAI,UAAU;AAElE,QAAA,eAAe,CAAC,QAAyB,QAAgB;AACvD,UAAA;AAAA,MACJ,UAAU;AAAA,MACV,IAAI;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACD,IAAA;AACJ,UAAM,WAAW,MAAM,QAAQ,KAAK,UAAU,OAAO,EAAE;AAEjD,UAAA,eAAe,eAAe,IAAI,IACpC,OACC,OAAoB,EAAE,YAAY,SAAA,CAAU;AAEjD,UAAM,oBAAmC;AAAA,MACvC,IAAI;AAAA,MACJ;AAAA,MACA,WAAW,QAAQ;AAAA,MACnB,UAAU,eAAe;AAAA,MACzB,SAAS,CAAC,UAAU,eAAe,OAAO,UAAU,IAAI,MAAM;AAAA,MAC9D,GAAG;AAAA,IAAA;AAGL,UAAM,MAAM,YAAY;AACxB,UAAM,SAAS,YAAY;AAE3B,QAAI,QAAQ;AACV,iCACG,cAAwB,EAAA,GAAG,mBAAmB,OAAO,OACnD,0BADgB,GAEnB;AAAA,IAEJ;AAEA,+BACG,UAAoB,EAAA,GAAG,mBAAmB,WAAW,cACnD,mBADY,GAEf;AAAA,EAAA;AAIJ,QAAM,oBAAoB,MAAM;AAC9B,UAAM,cAAc,QAAQ,MAAM,GAAG,iBAAiB;AAChD,UAAA,eAAe,QAAQ,MAAM,iBAAiB;AAEpD,UAAM,WAAW,YAAY;AAC7B,UAAM,YACH,YAAY,kBAAoB,YAAY,eAAgB;AAE/D,WAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,MAAA,YAAY,IAAI,CAAC,QAAQ,QAAQ,aAAa,QAAQ,GAAG,CAAC;AAAA,MAC3D;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI,MAAM,QAAQ,MAAM;AAAA,UACxB;AAAA,UACA;AAAA,UACA,SAAS;AAAA,YACP,MAAM,QAAQ;AAAA,YACd,MAAM,QAAQ;AAAA,YACd,cAAc,QAAQ;AAAA,UACxB;AAAA,UACA,MAAM,oBAAC,qBAAoB,EAAA,OAAO,UAAW,CAAA;AAAA,UAC7C,WAAU;AAAA,UACV,SAAS,CAAC,OAAO,WAAW;AACX,2BAAA,OAAO,UAAU,IAAI,MAAyB;AAC7D,kCAAsB,OAAO,MAAM;AAAA,UACrC;AAAA,UACA,UAAU;AAAA,UACV,YAAY;AAAA,UACZ,eAAe;AAAA,UACd,GAAG;AAAA,QAAA;AAAA,MACN;AAAA,IACF,EAAA,CAAA;AAAA,EAAA;AAIE,QAAA,iBAAiB,QAAQ,SAAS;AAGtC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,EAAE,CAAC,QAAQ,eAAe,GAAG,eAAe;AAAA,QAC5C;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH,UAAA,iBACG,kBAAkB,IAClB,QAAQ,IAAI,CAAC,QAAQ,QAAQ,aAAa,QAAQ,GAAG,CAAC;AAAA,IAAA;AAAA,EAAA;AAGhE,CAAC;"}

package/dist/esm/AppSwitcher/AppSwitcher.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { forwardRef, useMemo } from "react";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useClasses } from "./AppSwitcher.styles.js";
 import { staticClasses } from "./AppSwitcher.styles.js";
@@ -8,7 +8,7 @@ import { HvPanel } from "../Panel/Panel.js";
 import { HvTypography } from "../Typography/Typography.js";
 import { HvOverflowTooltip } from "../OverflowTooltip/OverflowTooltip.js";
 import { HvListContainer } from "../ListContainer/ListContainer.js";
-const HvAppSwitcher = (props) => {
+const HvAppSwitcher = forwardRef(function HvAppSwitcher2(props, ref) {
   const {
     className,
     classes: classesProp,
@@ -53,6 +53,7 @@ const HvAppSwitcher = (props) => {
   return /* @__PURE__ */ jsxs(
     HvPanel,
     {
+      ref,
       className: cx(
         classes.root,
         classes[layout],
@@ -93,7 +94,7 @@ const HvAppSwitcher = (props) => {
       ]
     }
   );
-};
+});
 export {
   HvAppSwitcher,
   staticClasses as appSwitcherClasses

package/dist/esm/AppSwitcher/AppSwitcher.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppSwitcher.js","sources":["../../../src/AppSwitcher/AppSwitcher.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvListContainer } from \"../ListContainer\";\nimport { HvOverflowTooltip } from \"../OverflowTooltip\";\nimport { HvPanel } from \"../Panel\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { HvAppSwitcherAction, HvAppSwitcherActionApplication } from \"./Action\";\nimport { staticClasses, useClasses } from \"./AppSwitcher.styles\";\n\nexport { staticClasses as appSwitcherClasses };\n\nexport type HvAppSwitcherClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAppSwitcherProps extends HvBaseProps {\n  /** Number of columns to render. One, two, or whatever fits the component's width. */\n  layout?: \"single\" | \"dual\" | \"fluid\";\n  /** Title to be displayed on the header of the component. */\n  title?: string;\n  /** The list of applications to be used to render the actions on the component. */\n  applications?: HvAppSwitcherActionApplication[];\n  /** Triggered when an action is clicked. */\n  onActionClickedCallback?: (\n    event: React.MouseEvent,\n    application: HvAppSwitcherActionApplication,\n  ) => void;\n  /** Must return a boolean stating if the action element is selected or not. */\n  isActionSelectedCallback?: (\n    application: HvAppSwitcherActionApplication,\n  ) => boolean;\n  /** Element to be added to the header container, if none is provided a label with the title will be added. */\n  header?: React.ReactNode;\n  /** Element to be added to the footer container. */\n  footer?: React.ReactNode;\n  /**\n   * Flag stating if the panel is opened or closed.\n   *\n   * @deprecated This logic should be external, i.e. using the HvAppSwitcher inside a Drawer component.\n   */\n  isOpen?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvAppSwitcherClasses;\n}\n\nexport const HvAppSwitcher = (props: HvAppSwitcherProps) => {\n  const {\n    className,\n    classes: classesProp,\n    layout = \"single\",\n    title,\n    applications,\n    onActionClickedCallback = () => {},\n    isActionSelectedCallback = () => false,\n    header,\n    footer,\n    isOpen,\n    ...others\n  } = useDefaultProps(\"HvAppSwitcher\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const panelActions = useMemo(\n    () =>\n      applications?.map((application) => {\n        if (application.name) {\n          return (\n            <HvAppSwitcherAction\n              key={application.id || `${application.name}_${application.url}`}\n              application={application}\n              onClickCallback={onActionClickedCallback}\n              isSelectedCallback={isActionSelectedCallback}\n              classes={{\n                root: classes.item,\n                selected: classes.itemSelected,\n                disabled: classes.itemDisabled,\n                typography: classes.itemTrigger,\n                icon: classes.itemIcon,\n                title: classes.itemTitle,\n                iconInfo: classes.itemInfoIcon,\n              }}\n            />\n          );\n        }\n\n        return undefined;\n      }),\n    [applications, classes, isActionSelectedCallback, onActionClickedCallback],\n  );\n\n  return (\n    <HvPanel\n      className={cx(\n        classes.root,\n        classes[layout],\n        { [classes.open]: !!isOpen, [classes.closed]: isOpen === false },\n        className,\n      )}\n      {...others}\n    >\n      {(header && (\n        <HvTypography component=\"div\" variant=\"label\" className={classes.title}>\n          {header}\n        </HvTypography>\n      )) ||\n        (title && (\n          <HvOverflowTooltip\n            className={classes.title}\n            data={title}\n            placement=\"top-start\"\n            classes={{\n              tooltipAnchorParagraph: classes.titleAnchor,\n            }}\n          />\n        ))}\n      <HvListContainer\n        condensed\n        disableGutters\n        className={classes.actionsContainer}\n      >\n        {panelActions}\n      </HvListContainer>\n      {footer && (\n        <HvTypography\n          component=\"div\"\n          variant=\"label\"\n          className={classes.footerContainer}\n        >\n          {footer}\n        </HvTypography>\n      )}\n    </HvPanel>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAgDa,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,0BAA0B,MAAM;AAAA,IAAC;AAAA,IACjC,2BAA2B,MAAM;AAAA,IACjC;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAC1C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,eAAe;AAAA,IACnB,MACE,cAAc,IAAI,CAAC,gBAAgB;AACjC,UAAI,YAAY,MAAM;AAElB,eAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC;AAAA,YACA,iBAAiB;AAAA,YACjB,oBAAoB;AAAA,YACpB,SAAS;AAAA,cACP,MAAM,QAAQ;AAAA,cACd,UAAU,QAAQ;AAAA,cAClB,UAAU,QAAQ;AAAA,cAClB,YAAY,QAAQ;AAAA,cACpB,MAAM,QAAQ;AAAA,cACd,OAAO,QAAQ;AAAA,cACf,UAAU,QAAQ;AAAA,YACpB;AAAA,UAAA;AAAA,UAZK,YAAY,MAAM,GAAG,YAAY,IAAI,IAAI,YAAY,GAAG;AAAA,QAAA;AAAA,MAenE;AAEO,aAAA;AAAA,IAAA,CACR;AAAA,IACH,CAAC,cAAc,SAAS,0BAA0B,uBAAuB;AAAA,EAAA;AAIzE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,QAAQ,MAAM;AAAA,QACd,EAAE,CAAC,QAAQ,IAAI,GAAG,CAAC,CAAC,QAAQ,CAAC,QAAQ,MAAM,GAAG,WAAW,MAAM;AAAA,QAC/D;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEF,UAAA;AAAA,QACA,UAAA,oBAAC,cAAa,EAAA,WAAU,OAAM,SAAQ,SAAQ,WAAW,QAAQ,OAC9D,UACH,OAAA,CAAA,KAEC,SACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,QAAQ;AAAA,YACnB,MAAM;AAAA,YACN,WAAU;AAAA,YACV,SAAS;AAAA,cACP,wBAAwB,QAAQ;AAAA,YAClC;AAAA,UAAA;AAAA,QACF;AAAA,QAEJ;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAS;AAAA,YACT,gBAAc;AAAA,YACd,WAAW,QAAQ;AAAA,YAElB,UAAA;AAAA,UAAA;AAAA,QACH;AAAA,QACC,UACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,SAAQ;AAAA,YACR,WAAW,QAAQ;AAAA,YAElB,UAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}
+{"version":3,"file":"AppSwitcher.js","sources":["../../../src/AppSwitcher/AppSwitcher.tsx"],"sourcesContent":["import { forwardRef, useMemo } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvListContainer } from \"../ListContainer\";\nimport { HvOverflowTooltip } from \"../OverflowTooltip\";\nimport { HvPanel } from \"../Panel\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { HvAppSwitcherAction, HvAppSwitcherActionApplication } from \"./Action\";\nimport { staticClasses, useClasses } from \"./AppSwitcher.styles\";\n\nexport { staticClasses as appSwitcherClasses };\n\nexport type HvAppSwitcherClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAppSwitcherProps extends HvBaseProps {\n  /** Number of columns to render. One, two, or whatever fits the component's width. */\n  layout?: \"single\" | \"dual\" | \"fluid\";\n  /** Title to be displayed on the header of the component. */\n  title?: string;\n  /** The list of applications to be used to render the actions on the component. */\n  applications?: HvAppSwitcherActionApplication[];\n  /** Triggered when an action is clicked. */\n  onActionClickedCallback?: (\n    event: React.MouseEvent,\n    application: HvAppSwitcherActionApplication,\n  ) => void;\n  /** Must return a boolean stating if the action element is selected or not. */\n  isActionSelectedCallback?: (\n    application: HvAppSwitcherActionApplication,\n  ) => boolean;\n  /** Element to be added to the header container, if none is provided a label with the title will be added. */\n  header?: React.ReactNode;\n  /** Element to be added to the footer container. */\n  footer?: React.ReactNode;\n  /**\n   * Flag stating if the panel is opened or closed.\n   *\n   * @deprecated This logic should be external, i.e. using the HvAppSwitcher inside a Drawer component.\n   */\n  isOpen?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvAppSwitcherClasses;\n}\n\nexport const HvAppSwitcher = forwardRef<\n  React.ComponentRef<typeof HvPanel>,\n  HvAppSwitcherProps\n>(function HvAppSwitcher(props, ref) {\n  const {\n    className,\n    classes: classesProp,\n    layout = \"single\",\n    title,\n    applications,\n    onActionClickedCallback = () => {},\n    isActionSelectedCallback = () => false,\n    header,\n    footer,\n    isOpen,\n    ...others\n  } = useDefaultProps(\"HvAppSwitcher\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const panelActions = useMemo(\n    () =>\n      applications?.map((application) => {\n        if (application.name) {\n          return (\n            <HvAppSwitcherAction\n              key={application.id || `${application.name}_${application.url}`}\n              application={application}\n              onClickCallback={onActionClickedCallback}\n              isSelectedCallback={isActionSelectedCallback}\n              classes={{\n                root: classes.item,\n                selected: classes.itemSelected,\n                disabled: classes.itemDisabled,\n                typography: classes.itemTrigger,\n                icon: classes.itemIcon,\n                title: classes.itemTitle,\n                iconInfo: classes.itemInfoIcon,\n              }}\n            />\n          );\n        }\n\n        return undefined;\n      }),\n    [applications, classes, isActionSelectedCallback, onActionClickedCallback],\n  );\n\n  return (\n    <HvPanel\n      ref={ref}\n      className={cx(\n        classes.root,\n        classes[layout],\n        { [classes.open]: !!isOpen, [classes.closed]: isOpen === false },\n        className,\n      )}\n      {...others}\n    >\n      {(header && (\n        <HvTypography component=\"div\" variant=\"label\" className={classes.title}>\n          {header}\n        </HvTypography>\n      )) ||\n        (title && (\n          <HvOverflowTooltip\n            className={classes.title}\n            data={title}\n            placement=\"top-start\"\n            classes={{\n              tooltipAnchorParagraph: classes.titleAnchor,\n            }}\n          />\n        ))}\n      <HvListContainer\n        condensed\n        disableGutters\n        className={classes.actionsContainer}\n      >\n        {panelActions}\n      </HvListContainer>\n      {footer && (\n        <HvTypography\n          component=\"div\"\n          variant=\"label\"\n          className={classes.footerContainer}\n        >\n          {footer}\n        </HvTypography>\n      )}\n    </HvPanel>\n  );\n});\n"],"names":["HvAppSwitcher"],"mappings":";;;;;;;;;;AAgDO,MAAM,gBAAgB,WAG3B,SAASA,eAAc,OAAO,KAAK;AAC7B,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,0BAA0B,MAAM;AAAA,IAAC;AAAA,IACjC,2BAA2B,MAAM;AAAA,IACjC;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAC1C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,eAAe;AAAA,IACnB,MACE,cAAc,IAAI,CAAC,gBAAgB;AACjC,UAAI,YAAY,MAAM;AAElB,eAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC;AAAA,YACA,iBAAiB;AAAA,YACjB,oBAAoB;AAAA,YACpB,SAAS;AAAA,cACP,MAAM,QAAQ;AAAA,cACd,UAAU,QAAQ;AAAA,cAClB,UAAU,QAAQ;AAAA,cAClB,YAAY,QAAQ;AAAA,cACpB,MAAM,QAAQ;AAAA,cACd,OAAO,QAAQ;AAAA,cACf,UAAU,QAAQ;AAAA,YACpB;AAAA,UAAA;AAAA,UAZK,YAAY,MAAM,GAAG,YAAY,IAAI,IAAI,YAAY,GAAG;AAAA,QAAA;AAAA,MAenE;AAEO,aAAA;AAAA,IAAA,CACR;AAAA,IACH,CAAC,cAAc,SAAS,0BAA0B,uBAAuB;AAAA,EAAA;AAIzE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,QAAQ,MAAM;AAAA,QACd,EAAE,CAAC,QAAQ,IAAI,GAAG,CAAC,CAAC,QAAQ,CAAC,QAAQ,MAAM,GAAG,WAAW,MAAM;AAAA,QAC/D;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEF,UAAA;AAAA,QACA,UAAA,oBAAC,cAAa,EAAA,WAAU,OAAM,SAAQ,SAAQ,WAAW,QAAQ,OAC9D,UACH,OAAA,CAAA,KAEC,SACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,QAAQ;AAAA,YACnB,MAAM;AAAA,YACN,WAAU;AAAA,YACV,SAAS;AAAA,cACP,wBAAwB,QAAQ;AAAA,YAClC;AAAA,UAAA;AAAA,QACF;AAAA,QAEJ;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAS;AAAA,YACT,gBAAc;AAAA,YACd,WAAW,QAAQ;AAAA,YAElB,UAAA;AAAA,UAAA;AAAA,QACH;AAAA,QACC,UACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,SAAQ;AAAA,YACR,WAAW,QAAQ;AAAA,YAElB,UAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;"}