@hitachivantara/uikit-react-lab 6.1.8 → 6.1.10

package/dist/Flow/Sidebar/Sidebar.js

@@ -1,142 +1,120 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useMemo, useEffect } from "react";
-import { useDroppable, useDndMonitor, DragOverlay } from "@dnd-kit/core";
-import { restrictToWindowEdges } from "@dnd-kit/modifiers";
-import { useLabels, useUniqueId, HvDrawer, HvTypography, HvInput } from "@hitachivantara/uikit-react-core";
-import { Add } from "@hitachivantara/uikit-react-icons";
-import { useClasses } from "./Sidebar.styles.js";
-import { staticClasses } from "./Sidebar.styles.js";
 import { useFlowContext } from "../hooks/useFlowContext.js";
+import { useClasses } from "./Sidebar.styles.js";
+import { HvFlowSidebarGroupItem } from "./SidebarGroup/SidebarGroupItem/SidebarGroupItem.js";
 import { HvFlowDraggableSidebarGroupItem } from "./SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.js";
 import { HvFlowSidebarGroup } from "./SidebarGroup/SidebarGroup.js";
-import { HvFlowSidebarGroupItem } from "./SidebarGroup/SidebarGroupItem/SidebarGroupItem.js";
-const DEFAULT_LABELS = {
-  itemAriaRoleDescription: "Draggable",
-  expandGroupButtonAriaLabel: "Expand group",
-  searchPlaceholder: "Search node...",
-  searchAriaLabel: "Search node..."
-};
-const HvFlowSidebar = ({
-  id,
-  title,
-  description,
-  anchor = "right",
-  buttonTitle = "Close",
-  flatten = false,
-  classes: classesProp,
-  labels: labelsProps,
-  dragOverlayProps,
-  ...others
-}) => {
-  const { classes } = useClasses(classesProp);
-  const { nodeGroups, setExpandedNodeGroups } = useFlowContext();
-  const [filterValue, setFilterValue] = useState("");
-  const [draggingLabel, setDraggingLabel] = useState();
-  const labels = useLabels(DEFAULT_LABELS, labelsProps);
-  const drawerElementId = useUniqueId(id);
-  const groupsElementId = useUniqueId();
-  const { setNodeRef } = useDroppable({ id: drawerElementId });
-  const handleDragStart = (event) => {
-    if (event.active.data.current?.hvFlow) {
-      setDraggingLabel(event.active.data.current.hvFlow?.label);
-    }
-  };
-  const handleDragEnd = () => {
-    setDraggingLabel(void 0);
-  };
-  useDndMonitor({
-    onDragEnd: handleDragEnd,
-    onDragStart: handleDragStart
-  });
-  const filteredGroups = useMemo(() => {
-    if (!filterValue || !nodeGroups) return nodeGroups || {};
-    return filterValue ? Object.entries(nodeGroups).reduce(
-      (acc, [groupId, group]) => {
-        const filteredItems = (group.items || []).filter(
-          (item) => item.label.toLowerCase().includes(filterValue.toLowerCase())
-        );
-        const itemsCount = Object.keys(filteredItems).length;
-        if (itemsCount > 0) {
-          acc[groupId] = {
-            ...group,
-            items: filteredItems
-          };
-        }
-        return acc;
-      },
-      {}
-    ) : nodeGroups;
-  }, [filterValue, nodeGroups]);
-  useEffect(() => {
-    setExpandedNodeGroups?.(filterValue ? Object.keys(filteredGroups) : []);
-  }, [filterValue, filteredGroups, setExpandedNodeGroups]);
-  return /* @__PURE__ */ jsxs(
-    HvDrawer,
-    {
-      BackdropComponent: void 0,
-      variant: "persistent",
-      classes: {
-        paper: classes.drawerPaper
-      },
-      hideBackdrop: true,
-      anchor,
-      buttonTitle,
-      ...others,
-      children: [
-        /* @__PURE__ */ jsxs("div", { id: drawerElementId, ref: setNodeRef, children: [
-          /* @__PURE__ */ jsxs("div", { className: classes.titleContainer, children: [
-            /* @__PURE__ */ jsx(Add, {}),
-            /* @__PURE__ */ jsx(HvTypography, { component: "p", variant: "title3", children: title })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: classes.contentContainer, children: [
-            /* @__PURE__ */ jsx(HvTypography, { className: classes.description, children: description }),
-            /* @__PURE__ */ jsx(
-              HvInput,
-              {
-                className: classes.searchRoot,
-                type: "search",
-                placeholder: labels?.searchPlaceholder,
-                "aria-label": labels?.searchAriaLabel,
-                "aria-controls": groupsElementId,
-                "aria-owns": groupsElementId,
-                onChange: (evt, val) => setFilterValue(val.trim()),
-                inputProps: { autoComplete: "off" }
-              }
-            ),
-            /* @__PURE__ */ jsx("ul", { id: groupsElementId, className: classes.groupsContainer, children: Object.entries(filteredGroups).map(([groupId, group]) => {
-              if (flatten) {
-                return (group.items || []).map((item, i) => /* @__PURE__ */ jsx(
-                  HvFlowDraggableSidebarGroupItem,
-                  {
-                    "aria-roledescription": labels?.itemAriaRoleDescription,
-                    ...item
-                  },
-                  `${item.nodeType}-${i}`
-                ));
-              }
-              return /* @__PURE__ */ jsx(
-                HvFlowSidebarGroup,
-                {
-                  id: groupId,
-                  expandButtonProps: {
-                    "aria-label": labels?.expandGroupButtonAriaLabel
-                  },
-                  itemProps: {
-                    "aria-roledescription": labels?.itemAriaRoleDescription
-                  },
-                  ...group
-                },
-                groupId
-              );
-            }) })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx(DragOverlay, { modifiers: [restrictToWindowEdges], ...dragOverlayProps, children: draggingLabel ? /* @__PURE__ */ jsx(HvFlowSidebarGroupItem, { label: draggingLabel, isDragging: true }) : null })
-      ]
-    }
-  );
+import { useEffect, useMemo, useState } from "react";
+import { HvDrawer, HvInput, HvTypography, useLabels, useUniqueId } from "@hitachivantara/uikit-react-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Add } from "@hitachivantara/uikit-react-icons";
+import { DragOverlay, useDndMonitor, useDroppable } from "@dnd-kit/core";
+import { restrictToWindowEdges } from "@dnd-kit/modifiers";
+//#region src/Flow/Sidebar/Sidebar.tsx
+var DEFAULT_LABELS = {
+	itemAriaRoleDescription: "Draggable",
+	expandGroupButtonAriaLabel: "Expand group",
+	searchPlaceholder: "Search node...",
+	searchAriaLabel: "Search node..."
 };
-export {
-  HvFlowSidebar,
-  staticClasses as flowSidebarClasses
+var HvFlowSidebar = ({ id, title, description, anchor = "right", buttonTitle = "Close", flatten = false, classes: classesProp, labels: labelsProps, dragOverlayProps, ...others }) => {
+	const { classes } = useClasses(classesProp);
+	const { nodeGroups, setExpandedNodeGroups } = useFlowContext();
+	const [filterValue, setFilterValue] = useState("");
+	const [draggingLabel, setDraggingLabel] = useState();
+	const labels = useLabels(DEFAULT_LABELS, labelsProps);
+	const drawerElementId = useUniqueId(id);
+	const groupsElementId = useUniqueId();
+	const { setNodeRef } = useDroppable({ id: drawerElementId });
+	const handleDragStart = (event) => {
+		if (event.active.data.current?.hvFlow) setDraggingLabel(event.active.data.current.hvFlow?.label);
+	};
+	const handleDragEnd = () => {
+		setDraggingLabel(void 0);
+	};
+	useDndMonitor({
+		onDragEnd: handleDragEnd,
+		onDragStart: handleDragStart
+	});
+	const filteredGroups = useMemo(() => {
+		if (!filterValue || !nodeGroups) return nodeGroups || {};
+		return filterValue ? Object.entries(nodeGroups).reduce((acc, [groupId, group]) => {
+			const filteredItems = (group.items || []).filter((item) => item.label.toLowerCase().includes(filterValue.toLowerCase()));
+			if (Object.keys(filteredItems).length > 0) acc[groupId] = {
+				...group,
+				items: filteredItems
+			};
+			return acc;
+		}, {}) : nodeGroups;
+	}, [filterValue, nodeGroups]);
+	useEffect(() => {
+		setExpandedNodeGroups?.(filterValue ? Object.keys(filteredGroups) : []);
+	}, [
+		filterValue,
+		filteredGroups,
+		setExpandedNodeGroups
+	]);
+	return /* @__PURE__ */ jsxs(HvDrawer, {
+		BackdropComponent: void 0,
+		variant: "persistent",
+		classes: { paper: classes.drawerPaper },
+		hideBackdrop: true,
+		anchor,
+		buttonTitle,
+		...others,
+		children: [/* @__PURE__ */ jsxs("div", {
+			id: drawerElementId,
+			ref: setNodeRef,
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: classes.titleContainer,
+				children: [/* @__PURE__ */ jsx(Add, {}), /* @__PURE__ */ jsx(HvTypography, {
+					component: "p",
+					variant: "title3",
+					children: title
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: classes.contentContainer,
+				children: [
+					/* @__PURE__ */ jsx(HvTypography, {
+						className: classes.description,
+						children: description
+					}),
+					/* @__PURE__ */ jsx(HvInput, {
+						className: classes.searchRoot,
+						type: "search",
+						placeholder: labels?.searchPlaceholder,
+						"aria-label": labels?.searchAriaLabel,
+						"aria-controls": groupsElementId,
+						"aria-owns": groupsElementId,
+						onChange: (evt, val) => setFilterValue(val.trim()),
+						inputProps: { autoComplete: "off" }
+					}),
+					/* @__PURE__ */ jsx("ul", {
+						id: groupsElementId,
+						className: classes.groupsContainer,
+						children: Object.entries(filteredGroups).map(([groupId, group]) => {
+							if (flatten) return group.items?.map((item, i) => /* @__PURE__ */ jsx(HvFlowDraggableSidebarGroupItem, {
+								"aria-roledescription": labels?.itemAriaRoleDescription,
+								...item
+							}, `${item.nodeType}-${i}`));
+							return /* @__PURE__ */ jsx(HvFlowSidebarGroup, {
+								id: groupId,
+								expandButtonProps: { "aria-label": labels?.expandGroupButtonAriaLabel },
+								itemProps: { "aria-roledescription": labels?.itemAriaRoleDescription },
+								...group
+							}, groupId);
+						})
+					})
+				]
+			})]
+		}), /* @__PURE__ */ jsx(DragOverlay, {
+			modifiers: [restrictToWindowEdges],
+			...dragOverlayProps,
+			children: draggingLabel ? /* @__PURE__ */ jsx(HvFlowSidebarGroupItem, {
+				label: draggingLabel,
+				isDragging: true
+			}) : null
+		})]
+	});
 };
+//#endregion
+export { HvFlowSidebar };

package/dist/Flow/Sidebar/Sidebar.styles.js

@@ -1,24 +1,23 @@
 import { createClasses, theme } from "@hitachivantara/uikit-react-core";
-const { staticClasses, useClasses } = createClasses("HvFlowSidebar", {
-  drawerPaper: { width: "360px" },
-  titleContainer: {
-    display: "flex",
-    padding: theme.spacing("sm", "lg", "xs", "sm")
-  },
-  contentContainer: { padding: theme.spacing(0, "lg", "sm", "lg") },
-  description: { color: theme.colors.textSubtle },
-  searchRoot: {
-    paddingTop: theme.space.sm,
-    paddingBottom: theme.space.sm
-  },
-  groupsContainer: {
-    display: "flex",
-    flexDirection: "column",
-    gap: theme.space.sm,
-    listStyleType: "none"
-  }
+//#region src/Flow/Sidebar/Sidebar.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvFlowSidebar", {
+	drawerPaper: { width: "360px" },
+	titleContainer: {
+		display: "flex",
+		padding: theme.spacing("sm", "lg", "xs", "sm")
+	},
+	contentContainer: { padding: theme.spacing(0, "lg", "sm", "lg") },
+	description: { color: theme.colors.textSubtle },
+	searchRoot: {
+		paddingTop: theme.space.sm,
+		paddingBottom: theme.space.sm
+	},
+	groupsContainer: {
+		display: "flex",
+		flexDirection: "column",
+		gap: theme.space.sm,
+		listStyleType: "none"
+	}
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { staticClasses, useClasses };

package/dist/Flow/Sidebar/SidebarGroup/SidebarGroup.js

@@ -1,63 +1,60 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useMemo, useCallback } from "react";
-import { HvTypography, HvButton } from "@hitachivantara/uikit-react-core";
-import { DropDownXS } from "@hitachivantara/uikit-react-icons";
-import { getColor } from "@hitachivantara/uikit-styles";
-import { useClasses } from "./SidebarGroup.styles.js";
-import { staticClasses } from "./SidebarGroup.styles.js";
 import { useFlowContext } from "../../hooks/useFlowContext.js";
+import { useClasses } from "./SidebarGroup.styles.js";
 import { HvFlowDraggableSidebarGroupItem } from "./SidebarGroupItem/DraggableSidebarGroupItem.js";
-const HvFlowSidebarGroup = ({
-  id,
-  label,
-  items = [],
-  color,
-  description,
-  icon,
-  expandButtonProps,
-  classes: classesProp,
-  itemProps
-}) => {
-  const { classes, cx, css } = useClasses(classesProp);
-  const { expandedNodeGroups, setExpandedNodeGroups } = useFlowContext();
-  const opened = useMemo(
-    () => !!expandedNodeGroups?.find((group) => group === id),
-    [expandedNodeGroups, id]
-  );
-  const handleClick = useCallback(() => {
-    setExpandedNodeGroups?.(
-      (prev) => opened ? prev.filter((group) => id !== group) : [...prev, id]
-    );
-  }, [id, opened, setExpandedNodeGroups]);
-  return /* @__PURE__ */ jsxs("li", { className: cx(css({ borderColor: getColor(color) }), classes.root), children: [
-    /* @__PURE__ */ jsxs("div", { className: classes.titleContainer, children: [
-      /* @__PURE__ */ jsxs("div", { className: classes.labelContainer, children: [
-        /* @__PURE__ */ jsx("div", { className: classes.icon, role: "presentation", children: icon }),
-        /* @__PURE__ */ jsx(HvTypography, { component: "p", variant: "title4", children: Object.keys(items).length > 1 ? `${label} (${Object.keys(items).length})` : label })
-      ] }),
-      /* @__PURE__ */ jsx(
-        HvButton,
-        {
-          icon: true,
-          onClick: handleClick,
-          "aria-expanded": opened,
-          ...expandButtonProps,
-          children: /* @__PURE__ */ jsx(DropDownXS, { rotate: opened })
-        }
-      )
-    ] }),
-    description && /* @__PURE__ */ jsx("div", { className: classes.descriptionContainer, children: /* @__PURE__ */ jsx(HvTypography, { children: description }) }),
-    opened && /* @__PURE__ */ jsx("div", { className: classes.itemsContainer, children: Object.entries(items).map(([itemId, item]) => /* @__PURE__ */ jsx(
-      HvFlowDraggableSidebarGroupItem,
-      {
-        ...itemProps,
-        ...item
-      },
-      itemId
-    )) })
-  ] });
-};
-export {
-  HvFlowSidebarGroup,
-  staticClasses as flowSidebarGroupClasses
+import { useCallback, useMemo } from "react";
+import { HvButton, HvTypography } from "@hitachivantara/uikit-react-core";
+import { getColor } from "@hitachivantara/uikit-styles";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { DropDownXS } from "@hitachivantara/uikit-react-icons";
+//#region src/Flow/Sidebar/SidebarGroup/SidebarGroup.tsx
+var HvFlowSidebarGroup = ({ id, label, items = [], color, description, icon, expandButtonProps, classes: classesProp, itemProps }) => {
+	const { classes, cx, css } = useClasses(classesProp);
+	const { expandedNodeGroups, setExpandedNodeGroups } = useFlowContext();
+	const opened = useMemo(() => !!expandedNodeGroups?.find((group) => group === id), [expandedNodeGroups, id]);
+	const handleClick = useCallback(() => {
+		setExpandedNodeGroups?.((prev) => opened ? prev.filter((group) => id !== group) : [...prev, id]);
+	}, [
+		id,
+		opened,
+		setExpandedNodeGroups
+	]);
+	return /* @__PURE__ */ jsxs("li", {
+		className: cx(css({ borderColor: getColor(color) }), classes.root),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: classes.titleContainer,
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: classes.labelContainer,
+					children: [/* @__PURE__ */ jsx("div", {
+						className: classes.icon,
+						role: "presentation",
+						children: icon
+					}), /* @__PURE__ */ jsx(HvTypography, {
+						component: "p",
+						variant: "title4",
+						children: Object.keys(items).length > 1 ? `${label} (${Object.keys(items).length})` : label
+					})]
+				}), /* @__PURE__ */ jsx(HvButton, {
+					icon: true,
+					onClick: handleClick,
+					"aria-expanded": opened,
+					...expandButtonProps,
+					children: /* @__PURE__ */ jsx(DropDownXS, { rotate: opened })
+				})]
+			}),
+			description && /* @__PURE__ */ jsx("div", {
+				className: classes.descriptionContainer,
+				children: /* @__PURE__ */ jsx(HvTypography, { children: description })
+			}),
+			opened && /* @__PURE__ */ jsx("div", {
+				className: classes.itemsContainer,
+				children: Object.entries(items).map(([itemId, item]) => /* @__PURE__ */ jsx(HvFlowDraggableSidebarGroupItem, {
+					...itemProps,
+					...item
+				}, itemId))
+			})
+		]
+	});
 };
+//#endregion
+export { HvFlowSidebarGroup };

package/dist/Flow/Sidebar/SidebarGroup/SidebarGroup.styles.js

@@ -1,34 +1,28 @@
 import { createClasses, theme } from "@hitachivantara/uikit-react-core";
-const { staticClasses, useClasses } = createClasses(
-  "HvFlowSidebarGroup",
-  {
-    root: {
-      padding: theme.space.sm,
-      borderRadius: theme.radii.round,
-      borderWidth: "1px",
-      borderTopWidth: "3px"
-    },
-    titleContainer: {
-      display: "flex",
-      justifyContent: "space-between"
-    },
-    labelContainer: {
-      display: "flex",
-      alignItems: "center"
-    },
-    icon: { paddingRight: theme.space.xs },
-    descriptionContainer: {
-      padding: `${theme.space.xs} 0 ${theme.space.sm} calc(32px + ${theme.space.xs})`
-    },
-    itemsContainer: {
-      display: "flex",
-      flexDirection: "column",
-      gap: theme.space.xs,
-      paddingLeft: theme.space.sm
-    }
-  }
-);
-export {
-  staticClasses,
-  useClasses
-};
+//#region src/Flow/Sidebar/SidebarGroup/SidebarGroup.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvFlowSidebarGroup", {
+	root: {
+		padding: theme.space.sm,
+		borderRadius: theme.radii.round,
+		borderWidth: "1px",
+		borderTopWidth: "3px"
+	},
+	titleContainer: {
+		display: "flex",
+		justifyContent: "space-between"
+	},
+	labelContainer: {
+		display: "flex",
+		alignItems: "center"
+	},
+	icon: { paddingRight: theme.space.xs },
+	descriptionContainer: { padding: `${theme.space.xs} 0 ${theme.space.sm} calc(32px + ${theme.space.xs})` },
+	itemsContainer: {
+		display: "flex",
+		flexDirection: "column",
+		gap: theme.space.xs,
+		paddingLeft: theme.space.sm
+	}
+});
+//#endregion
+export { useClasses };

package/dist/Flow/Sidebar/SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.js

@@ -1,51 +1,31 @@
-import { jsx } from "react/jsx-runtime";
+import { HvFlowSidebarGroupItem } from "./SidebarGroupItem.js";
 import { useRef } from "react";
+import { useUniqueId } from "@hitachivantara/uikit-react-core";
+import { jsx } from "react/jsx-runtime";
 import { useDraggable } from "@dnd-kit/core";
 import { useForkRef } from "@mui/material/utils";
-import { useUniqueId } from "@hitachivantara/uikit-react-core";
-import { HvFlowSidebarGroupItem } from "./SidebarGroupItem.js";
-const HvFlowDraggableSidebarGroupItem = ({
-  id: idProp,
-  label,
-  nodeType,
-  data,
-  ...others
-}) => {
-  const itemRef = useRef(null);
-  const id = useUniqueId(idProp);
-  const { attributes, listeners, setNodeRef, isDragging, transform } = useDraggable({
-    id,
-    data: {
-      hvFlow: {
-        // Needed to know which item is being dragged and dropped
-        type: nodeType,
-        // Needed for the drag overlay: otherwise the item is cut by the drawer because of overflow
-        label,
-        // Item position: used to position the item when dropped
-        x: itemRef.current?.getBoundingClientRect().x,
-        y: itemRef.current?.getBoundingClientRect().y,
-        // Data
-        data
-      }
-    }
-  });
-  const forkedRef = useForkRef(itemRef, setNodeRef);
-  const style = transform ? {
-    transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`
-  } : void 0;
-  return /* @__PURE__ */ jsx(
-    HvFlowSidebarGroupItem,
-    {
-      ref: forkedRef,
-      style,
-      label,
-      isDragging,
-      ...listeners,
-      ...attributes,
-      ...others
-    }
-  );
-};
-export {
-  HvFlowDraggableSidebarGroupItem
+//#region src/Flow/Sidebar/SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.tsx
+var HvFlowDraggableSidebarGroupItem = ({ id: idProp, label, nodeType, data, ...others }) => {
+	const itemRef = useRef(null);
+	const { attributes, listeners, setNodeRef, isDragging, transform } = useDraggable({
+		id: useUniqueId(idProp),
+		data: { hvFlow: {
+			type: nodeType,
+			label,
+			x: itemRef.current?.getBoundingClientRect().x,
+			y: itemRef.current?.getBoundingClientRect().y,
+			data
+		} }
+	});
+	return /* @__PURE__ */ jsx(HvFlowSidebarGroupItem, {
+		ref: useForkRef(itemRef, setNodeRef),
+		style: transform ? { transform: `translate3d(${transform.x}px, ${transform.y}px, 0)` } : void 0,
+		label,
+		isDragging,
+		...listeners,
+		...attributes,
+		...others
+	});
 };
+//#endregion
+export { HvFlowDraggableSidebarGroupItem };

package/dist/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.js

@@ -1,36 +1,18 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { useClasses } from "./SidebarGroupItem.styles.js";
 import { forwardRef } from "react";
 import { HvTypography } from "@hitachivantara/uikit-react-core";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Drag } from "@hitachivantara/uikit-react-icons";
-import { useClasses } from "./SidebarGroupItem.styles.js";
-import { staticClasses } from "./SidebarGroupItem.styles.js";
-const HvFlowSidebarGroupItem = forwardRef(function HvFlowSidebarGroupItem2(props, ref) {
-  const {
-    label,
-    isDragging,
-    classes: classesProp,
-    className,
-    ...others
-  } = props;
-  const { classes, cx } = useClasses(classesProp);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref,
-      className: cx(
-        classes.root,
-        { [classes.dragging]: isDragging },
-        className
-      ),
-      ...others,
-      children: [
-        /* @__PURE__ */ jsx(HvTypography, { children: label }),
-        /* @__PURE__ */ jsx(Drag, {})
-      ]
-    }
-  );
+//#region src/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.tsx
+var HvFlowSidebarGroupItem = forwardRef(function HvFlowSidebarGroupItem(props, ref) {
+	const { label, isDragging, classes: classesProp, className, ...others } = props;
+	const { classes, cx } = useClasses(classesProp);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cx(classes.root, { [classes.dragging]: isDragging }, className),
+		...others,
+		children: [/* @__PURE__ */ jsx(HvTypography, { children: label }), /* @__PURE__ */ jsx(Drag, {})]
+	});
 });
-export {
-  HvFlowSidebarGroupItem,
-  staticClasses as flowSidebarGroupItemClasses
-};
+//#endregion
+export { HvFlowSidebarGroupItem };

package/dist/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.styles.js

@@ -1,23 +1,17 @@
-import { createClasses, theme, outlineStyles } from "@hitachivantara/uikit-react-core";
-const { staticClasses, useClasses } = createClasses(
-  "HvFlowSidebarGroupItem",
-  {
-    root: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "space-between",
-      border: `1px solid ${theme.colors.border}`,
-      padding: theme.spacing(0, 0, 0, "sm"),
-      cursor: "pointer",
-      boxShadow: `0 1px 0 ${theme.colors.shad1}`,
-      "&:focus-visible": {
-        ...outlineStyles
-      }
-    },
-    dragging: { borderColor: theme.colors.primaryStrong }
-  }
-);
-export {
-  staticClasses,
-  useClasses
-};
+import { createClasses, outlineStyles, theme } from "@hitachivantara/uikit-react-core";
+//#region src/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvFlowSidebarGroupItem", {
+	root: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "space-between",
+		border: `1px solid ${theme.colors.border}`,
+		padding: theme.spacing(0, 0, 0, "sm"),
+		cursor: "pointer",
+		boxShadow: `0 1px 0 ${theme.colors.shad1}`,
+		"&:focus-visible": { ...outlineStyles }
+	},
+	dragging: { borderColor: theme.colors.primaryStrong }
+});
+//#endregion
+export { useClasses };