@hitachivantara/uikit-react-lab 5.5.1 → 5.5.2

package/dist/cjs/components/Flow/Background/Background.cjs

@@ -1,16 +1,13 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const ReactFlow = require("reactflow");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const HvFlowBackground = ({
   color = "secondary",
   ...others
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(ReactFlow.Background, {
-    color: uikitStyles.getColor(color, uikitStyles.theme.colors.secondary),
-    ...others
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(ReactFlow.Background, { color: uikitStyles.getColor(color, uikitStyles.theme.colors.secondary), ...others });
 };
 exports.HvFlowBackground = HvFlowBackground;
 //# sourceMappingURL=Background.cjs.map

package/dist/cjs/components/Flow/Background/Background.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Background.cjs","sources":["../../../../../src/components/Flow/Background/Background.tsx"],"sourcesContent":["import { Background, BackgroundProps } from \"reactflow\";\n\nimport { HvColorAny, getColor, theme } from \"@hitachivantara/uikit-styles\";\n\nexport interface HvFlowBackgroundProps extends Omit<BackgroundProps, \"color\"> {\n  /** Color for the background dots. Defaults to `secondary`. */\n  color?: HvColorAny;\n}\n\nexport const HvFlowBackground = ({\n  color = \"secondary\",\n  ...others\n}: HvFlowBackgroundProps) => {\n  return (\n    <Background color={getColor(color, theme.colors.secondary)} {...others} />\n  );\n};\n"],"names":["HvFlowBackground","color","others","Background","getColor","theme","colors","secondary"],"mappings":";;;;;AASO,MAAMA,mBAAmBA,CAAC;AAAA,EAC/BC,QAAQ;AAAA,EACR,GAAGC;AACkB,MAAM;AAC3B,wCACGC,UAAAA,YAAU;AAAA,IAACF,OAAOG,YAAAA,SAASH,OAAOI,YAAAA,MAAMC,OAAOC,SAAS;AAAA,IAAE,GAAKL;AAAAA,EAAAA,CAAS;AAE7E;;"}
+{"version":3,"file":"Background.cjs","sources":["../../../../../src/components/Flow/Background/Background.tsx"],"sourcesContent":["import { Background, BackgroundProps } from \"reactflow\";\n\nimport { HvColorAny, getColor, theme } from \"@hitachivantara/uikit-styles\";\n\nexport interface HvFlowBackgroundProps extends Omit<BackgroundProps, \"color\"> {\n  /** Color for the background dots. Defaults to `secondary`. */\n  color?: HvColorAny;\n}\n\nexport const HvFlowBackground = ({\n  color = \"secondary\",\n  ...others\n}: HvFlowBackgroundProps) => {\n  return (\n    <Background color={getColor(color, theme.colors.secondary)} {...others} />\n  );\n};\n"],"names":["HvFlowBackground","color","others","jsx","Background","getColor","theme","colors","secondary"],"mappings":";;;;;AASO,MAAMA,mBAAmBA,CAAC;AAAA,EAC/BC,QAAQ;AAAA,EACR,GAAGC;AACkB,MAAM;AAEzB,SAAAC,+BAACC,UAAAA,YAAW,EAAA,OAAOC,YAAAA,SAASJ,OAAOK,kBAAMC,OAAOC,SAAS,GAAG,GAAIN,OAAU,CAAA;AAE9E;;"}

package/dist/cjs/components/Flow/Controls/Controls.cjs

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const ReactFlow = require("reactflow");
 const shallow = require("zustand/shallow");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const DEFAULT_LABELS = {
   fitView: "Fit view",
   zoomIn: "Zoom in",
@@ -63,46 +63,13 @@ const HvFlowControls = ({
     });
     onInteractiveChange == null ? void 0 : onInteractiveChange(!isInteractive);
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(ReactFlow.Panel, {
-    position,
-    ...others,
-    children: /* @__PURE__ */ jsxRuntime.jsxs(uikitReactCore.HvMultiButton, {
-      vertical: orientation === "vertical",
-      children: [!hideZoom && /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, {
-        icon: true,
-        title: labels == null ? void 0 : labels.zoomIn,
-        onClick: handleZoomIn,
-        disabled: maxZoomReached,
-        children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.ZoomIn, {
-          role: "none"
-        })
-      }), !hideZoom && /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, {
-        icon: true,
-        title: labels == null ? void 0 : labels.zoomOut,
-        onClick: handleZoomOut,
-        disabled: minZoomReached,
-        children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.ZoomOut, {
-          role: "none"
-        })
-      }), !hideFitView && /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, {
-        icon: true,
-        title: labels == null ? void 0 : labels.fitView,
-        onClick: handleFitView,
-        children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Focus, {
-          role: "none"
-        })
-      }), !hideInteractive && /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, {
-        icon: true,
-        title: labels == null ? void 0 : labels.interactive,
-        onClick: handleInteractive,
-        children: isInteractive ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Unlock, {
-          role: "none"
-        }) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Lock, {
-          role: "none"
-        })
-      }), children]
-    })
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(ReactFlow.Panel, { position, ...others, children: /* @__PURE__ */ jsxRuntime.jsxs(uikitReactCore.HvMultiButton, { vertical: orientation === "vertical", children: [
+    !hideZoom && /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, { icon: true, title: labels == null ? void 0 : labels.zoomIn, onClick: handleZoomIn, disabled: maxZoomReached, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.ZoomIn, { role: "none" }) }),
+    !hideZoom && /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, { icon: true, title: labels == null ? void 0 : labels.zoomOut, onClick: handleZoomOut, disabled: minZoomReached, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.ZoomOut, { role: "none" }) }),
+    !hideFitView && /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, { icon: true, title: labels == null ? void 0 : labels.fitView, onClick: handleFitView, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Focus, { role: "none" }) }),
+    !hideInteractive && /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, { icon: true, title: labels == null ? void 0 : labels.interactive, onClick: handleInteractive, children: isInteractive ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Unlock, { role: "none" }) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Lock, { role: "none" }) }),
+    children
+  ] }) });
 };
 exports.HvFlowControls = HvFlowControls;
 //# sourceMappingURL=Controls.cjs.map

package/dist/cjs/components/Flow/Controls/Controls.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Controls.cjs","sources":["../../../../../src/components/Flow/Controls/Controls.tsx"],"sourcesContent":["import {\n  ControlProps,\n  Panel,\n  PanelPosition,\n  ReactFlowState,\n  useReactFlow,\n  useStore,\n  useStoreApi,\n} from \"reactflow\";\n\nimport { shallow } from \"zustand/shallow\";\n\nimport {\n  HvButton,\n  HvMultiButton,\n  useLabels,\n} from \"@hitachivantara/uikit-react-core\";\nimport {\n  Focus,\n  Lock,\n  Unlock,\n  ZoomIn,\n  ZoomOut,\n} from \"@hitachivantara/uikit-react-icons\";\n\nexport type HvFlowControlsPosition = PanelPosition;\n\nexport interface HvFlowControlsProps\n  extends Omit<\n    ControlProps,\n    \"position\" | \"showFitView\" | \"showInteractive\" | \"showZoom\"\n  > {\n  /** Controls position. Defaults to `bottom-center`. */\n  position?: HvFlowControlsPosition;\n  /** Controls orientation. Defaults to `horizontal`. */\n  orientation?: \"vertical\" | \"horizontal\";\n  /** Labels used on the controls buttons. */\n  labels?: {\n    zoomIn?: string;\n    zoomOut?: string;\n    fitView?: string;\n    interactive?: string;\n  };\n  /** Whether to hide the zoom controls. */\n  hideZoom?: boolean;\n  /** Whether to hide the fit view controls. */\n  hideFitView?: boolean;\n  /** Whether to hide the interactive controls. */\n  hideInteractive?: boolean;\n}\n\nconst DEFAULT_LABELS: HvFlowControlsProps[\"labels\"] = {\n  fitView: \"Fit view\",\n  zoomIn: \"Zoom in\",\n  zoomOut: \"Zoom out\",\n  interactive: \"Interactive\",\n};\n\nconst selector = (state: ReactFlowState) => ({\n  isInteractive:\n    state.nodesDraggable || state.nodesConnectable || state.elementsSelectable,\n  minZoomReached: state.transform[2] <= state.minZoom,\n  maxZoomReached: state.transform[2] >= state.maxZoom,\n});\n\nexport const HvFlowControls = ({\n  onZoomIn: onZoomInProp,\n  onZoomOut: onZoomOutProp,\n  onFitView: onFitViewProp,\n  labels: labelsProps,\n  hideInteractive,\n  hideFitView,\n  hideZoom,\n  position = \"bottom-center\",\n  orientation = \"horizontal\",\n  onInteractiveChange,\n  fitViewOptions,\n  children,\n  ...others\n}: HvFlowControlsProps) => {\n  const { isInteractive, minZoomReached, maxZoomReached } = useStore(\n    selector,\n    shallow\n  );\n  const store = useStoreApi();\n  const { zoomIn, zoomOut, fitView } = useReactFlow();\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProps);\n\n  const handleZoomIn = () => {\n    zoomIn();\n    onZoomInProp?.();\n  };\n\n  const handleZoomOut = () => {\n    zoomOut();\n    onZoomOutProp?.();\n  };\n\n  const handleFitView = () => {\n    fitView(fitViewOptions);\n    onFitViewProp?.();\n  };\n\n  const handleInteractive = () => {\n    store.setState({\n      nodesDraggable: !isInteractive,\n      nodesConnectable: !isInteractive,\n      elementsSelectable: !isInteractive,\n    });\n\n    onInteractiveChange?.(!isInteractive);\n  };\n\n  return (\n    <Panel position={position} {...others}>\n      <HvMultiButton vertical={orientation === \"vertical\"}>\n        {!hideZoom && (\n          <HvButton\n            icon\n            title={labels?.zoomIn}\n            onClick={handleZoomIn}\n            disabled={maxZoomReached}\n          >\n            <ZoomIn role=\"none\" />\n          </HvButton>\n        )}\n        {!hideZoom && (\n          <HvButton\n            icon\n            title={labels?.zoomOut}\n            onClick={handleZoomOut}\n            disabled={minZoomReached}\n          >\n            <ZoomOut role=\"none\" />\n          </HvButton>\n        )}\n        {!hideFitView && (\n          <HvButton icon title={labels?.fitView} onClick={handleFitView}>\n            <Focus role=\"none\" />\n          </HvButton>\n        )}\n        {!hideInteractive && (\n          <HvButton\n            icon\n            title={labels?.interactive}\n            onClick={handleInteractive}\n          >\n            {isInteractive ? <Unlock role=\"none\" /> : <Lock role=\"none\" />}\n          </HvButton>\n        )}\n        {children}\n      </HvMultiButton>\n    </Panel>\n  );\n};\n"],"names":["DEFAULT_LABELS","fitView","zoomIn","zoomOut","interactive","selector","state","isInteractive","nodesDraggable","nodesConnectable","elementsSelectable","minZoomReached","transform","minZoom","maxZoomReached","maxZoom","HvFlowControls","onZoomIn","onZoomInProp","onZoomOut","onZoomOutProp","onFitView","onFitViewProp","labels","labelsProps","hideInteractive","hideFitView","hideZoom","position","orientation","onInteractiveChange","fitViewOptions","children","others","useStore","shallow","store","useStoreApi","useReactFlow","useLabels","handleZoomIn","handleZoomOut","handleFitView","handleInteractive","setState","Panel","HvMultiButton","vertical","HvButton","icon","title","onClick","disabled","ZoomIn","role","ZoomOut","Focus","_jsx","Unlock","Lock"],"mappings":";;;;;;;AAmDA,MAAMA,iBAAgD;AAAA,EACpDC,SAAS;AAAA,EACTC,QAAQ;AAAA,EACRC,SAAS;AAAA,EACTC,aAAa;AACf;AAEA,MAAMC,WAAWA,CAACC,WAA2B;AAAA,EAC3CC,eACED,MAAME,kBAAkBF,MAAMG,oBAAoBH,MAAMI;AAAAA,EAC1DC,gBAAgBL,MAAMM,UAAU,CAAC,KAAKN,MAAMO;AAAAA,EAC5CC,gBAAgBR,MAAMM,UAAU,CAAC,KAAKN,MAAMS;AAC9C;AAEO,MAAMC,iBAAiBA,CAAC;AAAA,EAC7BC,UAAUC;AAAAA,EACVC,WAAWC;AAAAA,EACXC,WAAWC;AAAAA,EACXC,QAAQC;AAAAA,EACRC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,WAAW;AAAA,EACXC,cAAc;AAAA,EACdC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACgB,MAAM;AACnB,QAAA;AAAA,IAAE1B;AAAAA,IAAeI;AAAAA,IAAgBG;AAAAA,EAAAA,IAAmBoB,UACxD7B,SAAAA,UACA8B,QAAAA,OACF;AACA,QAAMC,QAAQC,UAAAA;AACR,QAAA;AAAA,IAAEnC;AAAAA,IAAQC;AAAAA,IAASF;AAAAA,MAAYqC,UAAa,aAAA;AAE5Cf,QAAAA,SAASgB,eAAAA,UAAUvC,gBAAgBwB,WAAW;AAEpD,QAAMgB,eAAeA,MAAM;AAClB;AACQ;AAAA,EAAA;AAGjB,QAAMC,gBAAgBA,MAAM;AAClB;AACQ;AAAA,EAAA;AAGlB,QAAMC,gBAAgBA,MAAM;AAC1BzC,YAAQ8B,cAAc;AACN;AAAA,EAAA;AAGlB,QAAMY,oBAAoBA,MAAM;AAC9BP,UAAMQ,SAAS;AAAA,MACbpC,gBAAgB,CAACD;AAAAA,MACjBE,kBAAkB,CAACF;AAAAA,MACnBG,oBAAoB,CAACH;AAAAA,IAAAA,CACtB;AAEDuB,+DAAsB,CAACvB;AAAAA,EAAa;AAGtC,wCACGsC,UAAAA,OAAK;AAAA,IAACjB;AAAAA,IAAmB,GAAKK;AAAAA,IAAMD,0CAClCc,8BAAa;AAAA,MAACC,UAAUlB,gBAAgB;AAAA,MAAWG,WACjD,CAACL,2CACCqB,eAAAA,UAAQ;AAAA,QACPC,MAAI;AAAA,QACJC,OAAO3B,iCAAQrB;AAAAA,QACfiD,SAASX;AAAAA,QACTY,UAAUtC;AAAAA,QAAekB,yCAExBqB,wBAAM;AAAA,UAACC,MAAK;AAAA,QAAA,CAAQ;AAAA,MACb,CAAA,GAEX,CAAC3B,2CACCqB,yBAAQ;AAAA,QACPC,MAAI;AAAA,QACJC,OAAO3B,iCAAQpB;AAAAA,QACfgD,SAASV;AAAAA,QACTW,UAAUzC;AAAAA,QAAeqB,yCAExBuB,yBAAO;AAAA,UAACD,MAAK;AAAA,QAAA,CAAQ;AAAA,MACd,CAAA,GAEX,CAAC5B,8CACCsB,yBAAQ;AAAA,QAACC,MAAI;AAAA,QAACC,OAAO3B,iCAAQtB;AAAAA,QAASkD,SAAST;AAAAA,QAAcV,yCAC3DwB,uBAAK;AAAA,UAACF,MAAK;AAAA,QAAA,CAAQ;AAAA,MACZ,CAAA,GAEX,CAAC7B,kDACCuB,yBAAQ;AAAA,QACPC,MAAI;AAAA,QACJC,OAAO3B,iCAAQnB;AAAAA,QACf+C,SAASR;AAAAA,QAAkBX,UAE1BzB,gBAAgBkD,2BAAAA,IAACC,wBAAM;AAAA,UAACJ,MAAK;AAAA,QAAA,CAAQ,IAAIG,2BAAAA,IAACE,sBAAI;AAAA,UAACL,MAAK;AAAA,QAAA,CAAQ;AAAA,MACrD,CAAA,GAEXtB,QAAQ;AAAA,IAAA,CACI;AAAA,EAAA,CACV;AAEX;;"}
+{"version":3,"file":"Controls.cjs","sources":["../../../../../src/components/Flow/Controls/Controls.tsx"],"sourcesContent":["import {\n  ControlProps,\n  Panel,\n  PanelPosition,\n  ReactFlowState,\n  useReactFlow,\n  useStore,\n  useStoreApi,\n} from \"reactflow\";\n\nimport { shallow } from \"zustand/shallow\";\n\nimport {\n  HvButton,\n  HvMultiButton,\n  useLabels,\n} from \"@hitachivantara/uikit-react-core\";\nimport {\n  Focus,\n  Lock,\n  Unlock,\n  ZoomIn,\n  ZoomOut,\n} from \"@hitachivantara/uikit-react-icons\";\n\nexport type HvFlowControlsPosition = PanelPosition;\n\nexport interface HvFlowControlsProps\n  extends Omit<\n    ControlProps,\n    \"position\" | \"showFitView\" | \"showInteractive\" | \"showZoom\"\n  > {\n  /** Controls position. Defaults to `bottom-center`. */\n  position?: HvFlowControlsPosition;\n  /** Controls orientation. Defaults to `horizontal`. */\n  orientation?: \"vertical\" | \"horizontal\";\n  /** Labels used on the controls buttons. */\n  labels?: {\n    zoomIn?: string;\n    zoomOut?: string;\n    fitView?: string;\n    interactive?: string;\n  };\n  /** Whether to hide the zoom controls. */\n  hideZoom?: boolean;\n  /** Whether to hide the fit view controls. */\n  hideFitView?: boolean;\n  /** Whether to hide the interactive controls. */\n  hideInteractive?: boolean;\n}\n\nconst DEFAULT_LABELS: HvFlowControlsProps[\"labels\"] = {\n  fitView: \"Fit view\",\n  zoomIn: \"Zoom in\",\n  zoomOut: \"Zoom out\",\n  interactive: \"Interactive\",\n};\n\nconst selector = (state: ReactFlowState) => ({\n  isInteractive:\n    state.nodesDraggable || state.nodesConnectable || state.elementsSelectable,\n  minZoomReached: state.transform[2] <= state.minZoom,\n  maxZoomReached: state.transform[2] >= state.maxZoom,\n});\n\nexport const HvFlowControls = ({\n  onZoomIn: onZoomInProp,\n  onZoomOut: onZoomOutProp,\n  onFitView: onFitViewProp,\n  labels: labelsProps,\n  hideInteractive,\n  hideFitView,\n  hideZoom,\n  position = \"bottom-center\",\n  orientation = \"horizontal\",\n  onInteractiveChange,\n  fitViewOptions,\n  children,\n  ...others\n}: HvFlowControlsProps) => {\n  const { isInteractive, minZoomReached, maxZoomReached } = useStore(\n    selector,\n    shallow\n  );\n  const store = useStoreApi();\n  const { zoomIn, zoomOut, fitView } = useReactFlow();\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProps);\n\n  const handleZoomIn = () => {\n    zoomIn();\n    onZoomInProp?.();\n  };\n\n  const handleZoomOut = () => {\n    zoomOut();\n    onZoomOutProp?.();\n  };\n\n  const handleFitView = () => {\n    fitView(fitViewOptions);\n    onFitViewProp?.();\n  };\n\n  const handleInteractive = () => {\n    store.setState({\n      nodesDraggable: !isInteractive,\n      nodesConnectable: !isInteractive,\n      elementsSelectable: !isInteractive,\n    });\n\n    onInteractiveChange?.(!isInteractive);\n  };\n\n  return (\n    <Panel position={position} {...others}>\n      <HvMultiButton vertical={orientation === \"vertical\"}>\n        {!hideZoom && (\n          <HvButton\n            icon\n            title={labels?.zoomIn}\n            onClick={handleZoomIn}\n            disabled={maxZoomReached}\n          >\n            <ZoomIn role=\"none\" />\n          </HvButton>\n        )}\n        {!hideZoom && (\n          <HvButton\n            icon\n            title={labels?.zoomOut}\n            onClick={handleZoomOut}\n            disabled={minZoomReached}\n          >\n            <ZoomOut role=\"none\" />\n          </HvButton>\n        )}\n        {!hideFitView && (\n          <HvButton icon title={labels?.fitView} onClick={handleFitView}>\n            <Focus role=\"none\" />\n          </HvButton>\n        )}\n        {!hideInteractive && (\n          <HvButton\n            icon\n            title={labels?.interactive}\n            onClick={handleInteractive}\n          >\n            {isInteractive ? <Unlock role=\"none\" /> : <Lock role=\"none\" />}\n          </HvButton>\n        )}\n        {children}\n      </HvMultiButton>\n    </Panel>\n  );\n};\n"],"names":["DEFAULT_LABELS","fitView","zoomIn","zoomOut","interactive","selector","state","isInteractive","nodesDraggable","nodesConnectable","elementsSelectable","minZoomReached","transform","minZoom","maxZoomReached","maxZoom","HvFlowControls","onZoomIn","onZoomInProp","onZoomOut","onZoomOutProp","onFitView","onFitViewProp","labels","labelsProps","hideInteractive","hideFitView","hideZoom","position","orientation","onInteractiveChange","fitViewOptions","children","others","useStore","shallow","store","useStoreApi","useReactFlow","useLabels","handleZoomIn","handleZoomOut","handleFitView","handleInteractive","setState","jsx","Panel","jsxs","HvMultiButton","HvButton","ZoomIn","ZoomOut","Focus","Unlock","Lock"],"mappings":";;;;;;;AAmDA,MAAMA,iBAAgD;AAAA,EACpDC,SAAS;AAAA,EACTC,QAAQ;AAAA,EACRC,SAAS;AAAA,EACTC,aAAa;AACf;AAEA,MAAMC,WAAWA,CAACC,WAA2B;AAAA,EAC3CC,eACED,MAAME,kBAAkBF,MAAMG,oBAAoBH,MAAMI;AAAAA,EAC1DC,gBAAgBL,MAAMM,UAAU,CAAC,KAAKN,MAAMO;AAAAA,EAC5CC,gBAAgBR,MAAMM,UAAU,CAAC,KAAKN,MAAMS;AAC9C;AAEO,MAAMC,iBAAiBA,CAAC;AAAA,EAC7BC,UAAUC;AAAAA,EACVC,WAAWC;AAAAA,EACXC,WAAWC;AAAAA,EACXC,QAAQC;AAAAA,EACRC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,WAAW;AAAA,EACXC,cAAc;AAAA,EACdC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACgB,MAAM;AACnB,QAAA;AAAA,IAAE1B;AAAAA,IAAeI;AAAAA,IAAgBG;AAAAA,EAAAA,IAAmBoB,UACxD7B,SAAAA,UACA8B,QAAAA,OACF;AACA,QAAMC,QAAQC,UAAAA;AACR,QAAA;AAAA,IAAEnC;AAAAA,IAAQC;AAAAA,IAASF;AAAAA,MAAYqC,UAAa,aAAA;AAE5Cf,QAAAA,SAASgB,eAAAA,UAAUvC,gBAAgBwB,WAAW;AAEpD,QAAMgB,eAAeA,MAAM;AAClB;AACQ;AAAA,EAAA;AAGjB,QAAMC,gBAAgBA,MAAM;AAClB;AACQ;AAAA,EAAA;AAGlB,QAAMC,gBAAgBA,MAAM;AAC1BzC,YAAQ8B,cAAc;AACN;AAAA,EAAA;AAGlB,QAAMY,oBAAoBA,MAAM;AAC9BP,UAAMQ,SAAS;AAAA,MACbpC,gBAAgB,CAACD;AAAAA,MACjBE,kBAAkB,CAACF;AAAAA,MACnBG,oBAAoB,CAACH;AAAAA,IAAAA,CACtB;AAEDuB,+DAAsB,CAACvB;AAAAA,EAAa;AAIpC,SAAAsC,2BAAA,IAACC,mBAAM,UAAwBb,GAAAA,QAC7B,UAACc,2BAAA,KAAAC,eAAA,eAAA,EAAc,UAAUnB,gBAAgB,YACtC,UAAA;AAAA,IAAA,CAACF,YACCkB,2BAAA,IAAAI,yBAAA,EACC,MAAI,MACJ,OAAO1B,iCAAQrB,QACf,SAASsC,cACT,UAAU1B,gBAEV,UAAA+B,2BAAA,IAACK,gBAAO,QAAA,EAAA,MAAK,OAAM,CAAA,GACrB;AAAA,IAED,CAACvB,YACAkB,2BAAA,IAACI,yBACC,EAAA,MAAI,MACJ,OAAO1B,iCAAQpB,SACf,SAASsC,eACT,UAAU9B,gBAEV,yCAACwC,gBAAQ,SAAA,EAAA,MAAK,OAAM,CAAA,GACtB;AAAA,IAED,CAACzB,eACCmB,2BAAAA,IAAAI,eAAA,UAAA,EAAS,MAAI,MAAC,OAAO1B,iCAAQtB,SAAS,SAASyC,eAC9C,UAAAG,+BAACO,gBAAAA,OAAM,EAAA,MAAK,OAAM,CAAA,GACpB;AAAA,IAED,CAAC3B,mBACCoB,2BAAAA,IAAAI,eAAA,UAAA,EACC,MAAI,MACJ,OAAO1B,iCAAQnB,aACf,SAASuC,mBAERpC,UAAgB,gBAAAsC,2BAAAA,IAACQ,0BAAO,MAAK,OAAA,CAAM,IAAOR,+BAAAS,gBAAAA,MAAA,EAAK,MAAK,OAAA,CAAS,EAChE,CAAA;AAAA,IAEDtB;AAAAA,EAAAA,EACH,CAAA,EACF,CAAA;AAEJ;;"}

package/dist/cjs/components/Flow/DroppableFlow.cjs

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
 const ReactFlow = require("reactflow");
 require("reactflow/dist/style.css");
@@ -7,7 +8,6 @@ const core = require("@dnd-kit/core");
 const uid = require("uid");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const Flow_styles = require("./Flow.styles.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const FlowContext = require("./FlowContext/FlowContext.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const ReactFlow__default = /* @__PURE__ */ _interopDefault(ReactFlow);
@@ -84,21 +84,7 @@ const HvDroppableFlow = ({
     handleFlowChange(nodes, eds);
     onEdgesChangeProp == null ? void 0 : onEdgesChangeProp(changes);
   }, [edges, handleFlowChange, nodes, onEdgesChangeProp]);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    id: elementId,
-    ref: setNodeRef,
-    className: cx(classes.root, className),
-    children: /* @__PURE__ */ jsxRuntime.jsx(ReactFlow__default.default, {
-      nodes,
-      edges,
-      nodeTypes,
-      onNodesChange: handleNodesChange,
-      onEdgesChange: handleEdgesChange,
-      onConnect: handleConnect,
-      ...others,
-      children
-    })
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { id: elementId, ref: setNodeRef, className: cx(classes.root, className), children: /* @__PURE__ */ jsxRuntime.jsx(ReactFlow__default.default, { nodes, edges, nodeTypes, onNodesChange: handleNodesChange, onEdgesChange: handleEdgesChange, onConnect: handleConnect, ...others, children }) });
 };
 exports.flowClasses = Flow_styles.staticClasses;
 exports.HvDroppableFlow = HvDroppableFlow;

package/dist/cjs/components/Flow/DroppableFlow.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DroppableFlow.cjs","sources":["../../../../src/components/Flow/DroppableFlow.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nimport ReactFlow, {\n  Connection,\n  EdgeChange,\n  NodeChange,\n  ReactFlowProps,\n  addEdge,\n  applyEdgeChanges,\n  applyNodeChanges,\n  useReactFlow,\n} from \"reactflow\";\nimport \"reactflow/dist/style.css\";\n\nimport { DragEndEvent, useDndMonitor, useDroppable } from \"@dnd-kit/core\";\n\nimport { uid } from \"uid\";\n\nimport { ExtractNames, useUniqueId } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvFlowEdge, HvFlowNode } from \"./types\";\nimport { staticClasses, useClasses } from \"./Flow.styles\";\nimport { useFlowContext } from \"./FlowContext\";\n\nexport { staticClasses as flowClasses };\n\nexport type HvFlowClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDroppableFlowProps<\n  NodeData = any,\n  NodeType extends string | undefined = string | undefined\n> extends Omit<ReactFlowProps, \"nodes\" | \"edges\" | \"nodeTypes\"> {\n  /** Flow content: background, controls, and minimap. */\n  children?: React.ReactNode;\n  /** Flow nodes. */\n  nodes?: HvFlowNode<NodeData, NodeType>[];\n  /** Flow edges. */\n  edges?: HvFlowEdge[];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowClasses;\n  /** Function called when the flow changes. Returns the updated nodes and edges. */\n  onFlowChange?: (\n    nodes: HvFlowNode<NodeData, NodeType>[],\n    edges: HvFlowEdge[]\n  ) => void;\n}\n\nexport const HvDroppableFlow = ({\n  id,\n  className,\n  children,\n  onFlowChange,\n  classes: classesProp,\n  nodes: initialNodes = [],\n  edges: initialEdges = [],\n  onConnect: onConnectProp,\n  onNodesChange: onNodesChangeProp,\n  onEdgesChange: onEdgesChangeProp,\n  ...others\n}: HvDroppableFlowProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const elementId = useUniqueId(id, \"hvFlow\");\n\n  const reactFlowInstance = useReactFlow();\n\n  const { nodeTypes } = useFlowContext();\n\n  const [nodes, setNodes] = useState(initialNodes);\n  const [edges, setEdges] = useState(initialEdges);\n\n  const { setNodeRef } = useDroppable({\n    id: elementId,\n  });\n\n  const handleDragEnd = useCallback(\n    (event: DragEndEvent) => {\n      if (event.over && event.over.id === elementId) {\n        const type = event.active.id.toString();\n\n        // Converts the coordinates to the react flow coordinate system\n        const position = reactFlowInstance.project({\n          x: (event.active.data.current?.hvFlow?.x || 0) - event.over.rect.left,\n          y: (event.active.data.current?.hvFlow?.y || 0) - event.over.rect.top,\n        });\n\n        const newNode: HvFlowNode = {\n          id: uid(),\n          position,\n          data: {},\n          type,\n        };\n\n        setNodes((nds) => nds.concat(newNode));\n      }\n    },\n    [elementId, reactFlowInstance, setNodes]\n  );\n\n  useDndMonitor({\n    onDragEnd: handleDragEnd,\n  });\n\n  const handleFlowChange = useCallback(\n    (\n      nds: NonNullable<HvDroppableFlowProps[\"nodes\"]>,\n      eds: NonNullable<HvDroppableFlowProps[\"edges\"]>\n    ) => {\n      // The new flow is returned if the user is not dragging nodes\n      // This avoids triggering this handler too many times\n      const isDragging = nds.find((node) => node.dragging);\n      if (!isDragging) {\n        onFlowChange?.(nds, eds);\n      }\n    },\n    [onFlowChange]\n  );\n\n  const handleConnect = useCallback(\n    (connection: Connection) => {\n      const eds = addEdge(connection, edges);\n      setEdges(eds);\n\n      handleFlowChange(nodes, eds);\n      onConnectProp?.(connection);\n    },\n    [edges, handleFlowChange, nodes, onConnectProp]\n  );\n\n  const handleNodesChange = useCallback(\n    (changes: NodeChange[]) => {\n      const nds = applyNodeChanges(changes, nodes);\n      setNodes(nds);\n\n      handleFlowChange(nds, edges);\n      onNodesChangeProp?.(changes);\n    },\n    [edges, handleFlowChange, nodes, onNodesChangeProp]\n  );\n\n  const handleEdgesChange = useCallback(\n    (changes: EdgeChange[]) => {\n      const eds = applyEdgeChanges(changes, edges);\n      setEdges(eds);\n\n      handleFlowChange(nodes, eds);\n      onEdgesChangeProp?.(changes);\n    },\n    [edges, handleFlowChange, nodes, onEdgesChangeProp]\n  );\n\n  return (\n    <div\n      id={elementId}\n      ref={setNodeRef}\n      className={cx(classes.root, className)}\n    >\n      <ReactFlow\n        nodes={nodes}\n        edges={edges}\n        nodeTypes={nodeTypes}\n        onNodesChange={handleNodesChange}\n        onEdgesChange={handleEdgesChange}\n        onConnect={handleConnect}\n        {...others}\n      >\n        {children}\n      </ReactFlow>\n    </div>\n  );\n};\n"],"names":["HvDroppableFlow","id","className","children","onFlowChange","classes","classesProp","nodes","initialNodes","edges","initialEdges","onConnect","onConnectProp","onNodesChange","onNodesChangeProp","onEdgesChange","onEdgesChangeProp","others","cx","useClasses","elementId","useUniqueId","reactFlowInstance","useReactFlow","nodeTypes","useFlowContext","setNodes","useState","setEdges","setNodeRef","useDroppable","handleDragEnd","useCallback","event","over","type","active","toString","position","project","x","data","current","hvFlow","rect","left","y","top","newNode","uid","nds","concat","useDndMonitor","onDragEnd","handleFlowChange","eds","isDragging","find","node","dragging","handleConnect","connection","addEdge","handleNodesChange","changes","applyNodeChanges","handleEdgesChange","applyEdgeChanges","ref","root","ReactFlow"],"mappings":"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"}
+{"version":3,"file":"DroppableFlow.cjs","sources":["../../../../src/components/Flow/DroppableFlow.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nimport ReactFlow, {\n  Connection,\n  EdgeChange,\n  NodeChange,\n  ReactFlowProps,\n  addEdge,\n  applyEdgeChanges,\n  applyNodeChanges,\n  useReactFlow,\n} from \"reactflow\";\nimport \"reactflow/dist/style.css\";\n\nimport { DragEndEvent, useDndMonitor, useDroppable } from \"@dnd-kit/core\";\n\nimport { uid } from \"uid\";\n\nimport { ExtractNames, useUniqueId } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvFlowEdge, HvFlowNode } from \"./types\";\nimport { staticClasses, useClasses } from \"./Flow.styles\";\nimport { useFlowContext } from \"./FlowContext\";\n\nexport { staticClasses as flowClasses };\n\nexport type HvFlowClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDroppableFlowProps<\n  NodeData = any,\n  NodeType extends string | undefined = string | undefined\n> extends Omit<ReactFlowProps, \"nodes\" | \"edges\" | \"nodeTypes\"> {\n  /** Flow content: background, controls, and minimap. */\n  children?: React.ReactNode;\n  /** Flow nodes. */\n  nodes?: HvFlowNode<NodeData, NodeType>[];\n  /** Flow edges. */\n  edges?: HvFlowEdge[];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowClasses;\n  /** Function called when the flow changes. Returns the updated nodes and edges. */\n  onFlowChange?: (\n    nodes: HvFlowNode<NodeData, NodeType>[],\n    edges: HvFlowEdge[]\n  ) => void;\n}\n\nexport const HvDroppableFlow = ({\n  id,\n  className,\n  children,\n  onFlowChange,\n  classes: classesProp,\n  nodes: initialNodes = [],\n  edges: initialEdges = [],\n  onConnect: onConnectProp,\n  onNodesChange: onNodesChangeProp,\n  onEdgesChange: onEdgesChangeProp,\n  ...others\n}: HvDroppableFlowProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const elementId = useUniqueId(id, \"hvFlow\");\n\n  const reactFlowInstance = useReactFlow();\n\n  const { nodeTypes } = useFlowContext();\n\n  const [nodes, setNodes] = useState(initialNodes);\n  const [edges, setEdges] = useState(initialEdges);\n\n  const { setNodeRef } = useDroppable({\n    id: elementId,\n  });\n\n  const handleDragEnd = useCallback(\n    (event: DragEndEvent) => {\n      if (event.over && event.over.id === elementId) {\n        const type = event.active.id.toString();\n\n        // Converts the coordinates to the react flow coordinate system\n        const position = reactFlowInstance.project({\n          x: (event.active.data.current?.hvFlow?.x || 0) - event.over.rect.left,\n          y: (event.active.data.current?.hvFlow?.y || 0) - event.over.rect.top,\n        });\n\n        const newNode: HvFlowNode = {\n          id: uid(),\n          position,\n          data: {},\n          type,\n        };\n\n        setNodes((nds) => nds.concat(newNode));\n      }\n    },\n    [elementId, reactFlowInstance, setNodes]\n  );\n\n  useDndMonitor({\n    onDragEnd: handleDragEnd,\n  });\n\n  const handleFlowChange = useCallback(\n    (\n      nds: NonNullable<HvDroppableFlowProps[\"nodes\"]>,\n      eds: NonNullable<HvDroppableFlowProps[\"edges\"]>\n    ) => {\n      // The new flow is returned if the user is not dragging nodes\n      // This avoids triggering this handler too many times\n      const isDragging = nds.find((node) => node.dragging);\n      if (!isDragging) {\n        onFlowChange?.(nds, eds);\n      }\n    },\n    [onFlowChange]\n  );\n\n  const handleConnect = useCallback(\n    (connection: Connection) => {\n      const eds = addEdge(connection, edges);\n      setEdges(eds);\n\n      handleFlowChange(nodes, eds);\n      onConnectProp?.(connection);\n    },\n    [edges, handleFlowChange, nodes, onConnectProp]\n  );\n\n  const handleNodesChange = useCallback(\n    (changes: NodeChange[]) => {\n      const nds = applyNodeChanges(changes, nodes);\n      setNodes(nds);\n\n      handleFlowChange(nds, edges);\n      onNodesChangeProp?.(changes);\n    },\n    [edges, handleFlowChange, nodes, onNodesChangeProp]\n  );\n\n  const handleEdgesChange = useCallback(\n    (changes: EdgeChange[]) => {\n      const eds = applyEdgeChanges(changes, edges);\n      setEdges(eds);\n\n      handleFlowChange(nodes, eds);\n      onEdgesChangeProp?.(changes);\n    },\n    [edges, handleFlowChange, nodes, onEdgesChangeProp]\n  );\n\n  return (\n    <div\n      id={elementId}\n      ref={setNodeRef}\n      className={cx(classes.root, className)}\n    >\n      <ReactFlow\n        nodes={nodes}\n        edges={edges}\n        nodeTypes={nodeTypes}\n        onNodesChange={handleNodesChange}\n        onEdgesChange={handleEdgesChange}\n        onConnect={handleConnect}\n        {...others}\n      >\n        {children}\n      </ReactFlow>\n    </div>\n  );\n};\n"],"names":["HvDroppableFlow","id","className","children","onFlowChange","classes","classesProp","nodes","initialNodes","edges","initialEdges","onConnect","onConnectProp","onNodesChange","onNodesChangeProp","onEdgesChange","onEdgesChangeProp","others","cx","useClasses","elementId","useUniqueId","reactFlowInstance","useReactFlow","nodeTypes","useFlowContext","setNodes","useState","setEdges","setNodeRef","useDroppable","handleDragEnd","useCallback","event","over","type","active","toString","position","project","x","data","current","hvFlow","rect","left","y","top","newNode","uid","nds","concat","useDndMonitor","onDragEnd","handleFlowChange","eds","isDragging","find","node","dragging","handleConnect","connection","addEdge","handleNodesChange","changes","applyNodeChanges","handleEdgesChange","applyEdgeChanges","jsx","root","ReactFlow"],"mappings":"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"}

package/dist/cjs/components/Flow/Flow.cjs

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
 const core = require("@dnd-kit/core");
 const modifiers = require("@dnd-kit/modifiers");
 const ReactFlow = require("reactflow");
 const DroppableFlow = require("./DroppableFlow.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const FlowContext = require("./FlowContext/FlowContext.cjs");
 const SidebarGroupItem = require("./Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.cjs");
 const HvFlow = ({
@@ -26,28 +26,11 @@ const HvFlow = ({
   const handleDragEnd = () => {
     setDraggingLabel(void 0);
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(ReactFlow.ReactFlowProvider, {
-    children: /* @__PURE__ */ jsxRuntime.jsx(FlowContext.HvFlowProvider, {
-      nodeGroups,
-      nodeTypes,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(core.DndContext, {
-        onDragStart: handleDragStart,
-        onDragEnd: handleDragEnd,
-        sensors,
-        modifiers: [modifiers.restrictToWindowEdges],
-        ...dndContextProps,
-        children: [/* @__PURE__ */ jsxRuntime.jsx(DroppableFlow.HvDroppableFlow, {
-          ...others
-        }), sidebar, /* @__PURE__ */ jsxRuntime.jsx(core.DragOverlay, {
-          modifiers: [modifiers.restrictToWindowEdges],
-          children: draggingLabel ? /* @__PURE__ */ jsxRuntime.jsx(SidebarGroupItem.HvFlowSidebarGroupItem, {
-            label: draggingLabel,
-            isDragging: true
-          }) : null
-        })]
-      })
-    })
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(ReactFlow.ReactFlowProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(FlowContext.HvFlowProvider, { nodeGroups, nodeTypes, children: /* @__PURE__ */ jsxRuntime.jsxs(core.DndContext, { onDragStart: handleDragStart, onDragEnd: handleDragEnd, sensors, modifiers: [modifiers.restrictToWindowEdges], ...dndContextProps, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DroppableFlow.HvDroppableFlow, { ...others }),
+    sidebar,
+    /* @__PURE__ */ jsxRuntime.jsx(core.DragOverlay, { modifiers: [modifiers.restrictToWindowEdges], children: draggingLabel ? /* @__PURE__ */ jsxRuntime.jsx(SidebarGroupItem.HvFlowSidebarGroupItem, { label: draggingLabel, isDragging: true }) : null })
+  ] }) }) });
 };
 exports.HvFlow = HvFlow;
 //# sourceMappingURL=Flow.cjs.map

package/dist/cjs/components/Flow/Flow.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Flow.cjs","sources":["../../../../src/components/Flow/Flow.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport {\n  DndContext,\n  DndContextProps,\n  DragOverlay,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors,\n} from \"@dnd-kit/core\";\nimport { restrictToWindowEdges } from \"@dnd-kit/modifiers\";\n\nimport { ReactFlowProvider } from \"reactflow\";\n\nimport { HvFlowNodeGroups, HvFlowNodeTypes } from \"./types\";\nimport { HvFlowProvider } from \"./FlowContext\";\nimport { HvDroppableFlow, HvDroppableFlowProps } from \"./DroppableFlow\";\nimport { HvFlowSidebarGroupItem } from \"./Sidebar/SidebarGroup/SidebarGroupItem\";\n\nexport interface HvFlowProps<\n  NodeData = any,\n  NodeType extends string | undefined = string | undefined,\n  NodeGroups extends keyof any = string\n> extends HvDroppableFlowProps<NodeData, NodeType> {\n  /** Flow nodes groups. */\n  nodeGroups?: HvFlowNodeGroups<NodeGroups>;\n  /** Flow nodes types. */\n  nodeTypes?: HvFlowNodeTypes<NodeGroups>;\n  /** Flow sidebar. */\n  sidebar?: React.ReactNode;\n  /**\n   * Dnd Kit context props. This should be used for accessibility purposes.\n   *\n   * More information can be found on the [Dnd Kit documentation](https://docs.dndkit.com/guides/accessibility)\n   */\n  dndContextProps?: Pick<DndContextProps, \"accessibility\">;\n}\n\n/**\n * Flow component to build interactive node-based UIs.\n *\n * This implementation leverages [React Flow](https://reactflow.dev).\n * The drag and drop functionality leverages [Dnd Kit](https://docs.dndkit.com)\n *\n * DISCLAIMER: This component is a work in progress and there might be breaking changes.\n */\nexport const HvFlow = ({\n  nodeTypes,\n  nodeGroups,\n  sidebar,\n  dndContextProps,\n  ...others\n}: HvFlowProps) => {\n  const [draggingLabel, setDraggingLabel] = useState(undefined);\n\n  const sensors = useSensors(\n    useSensor(PointerSensor),\n    useSensor(KeyboardSensor)\n  );\n\n  const handleDragStart: DndContextProps[\"onDragStart\"] = (event) => {\n    if (event.active.data.current?.hvFlow) {\n      setDraggingLabel(event.active.data.current.hvFlow?.label);\n    }\n  };\n\n  const handleDragEnd: DndContextProps[\"onDragEnd\"] = () => {\n    setDraggingLabel(undefined);\n  };\n\n  // We're wrapping the main Flow component with the ReactFlowProvider to access the react flow instance.\n  // HvFlowContext is our custom internal context.\n  return (\n    <ReactFlowProvider>\n      <HvFlowProvider nodeGroups={nodeGroups} nodeTypes={nodeTypes}>\n        <DndContext\n          onDragStart={handleDragStart}\n          onDragEnd={handleDragEnd}\n          sensors={sensors}\n          modifiers={[restrictToWindowEdges]}\n          {...dndContextProps}\n        >\n          <HvDroppableFlow {...others} />\n          {sidebar}\n          <DragOverlay modifiers={[restrictToWindowEdges]}>\n            {draggingLabel ? (\n              <HvFlowSidebarGroupItem label={draggingLabel} isDragging />\n            ) : null}\n          </DragOverlay>\n        </DndContext>\n      </HvFlowProvider>\n    </ReactFlowProvider>\n  );\n};\n"],"names":["HvFlow","nodeTypes","nodeGroups","sidebar","dndContextProps","others","draggingLabel","setDraggingLabel","useState","undefined","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","handleDragStart","event","active","data","current","hvFlow","label","handleDragEnd","ReactFlowProvider","children","HvFlowProvider","DndContext","onDragStart","onDragEnd","modifiers","restrictToWindowEdges","_jsx","HvDroppableFlow","DragOverlay","HvFlowSidebarGroupItem","isDragging"],"mappings":";;;;;;;;;;AA+CO,MAAMA,SAASA,CAAC;AAAA,EACrBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACQ,MAAM;AACjB,QAAM,CAACC,eAAeC,gBAAgB,IAAIC,MAAAA,SAASC,MAAS;AAE5D,QAAMC,UAAUC,KAAAA,WACdC,KAAAA,UAAUC,KAAa,aAAA,GACvBD,KAAAA,UAAUE,KAAc,cAAA,CAC1B;AAEA,QAAMC,kBAAmDC,CAAU,UAAA;;AACjE,SAAIA,WAAMC,OAAOC,KAAKC,YAAlBH,mBAA2BI,QAAQ;AACrCb,wBAAiBS,WAAMC,OAAOC,KAAKC,QAAQC,WAA1BJ,mBAAkCK,KAAK;AAAA,IAC1D;AAAA,EAAA;AAGF,QAAMC,gBAA8CA,MAAM;AACxDf,qBAAiBE,MAAS;AAAA,EAAA;AAK5B,wCACGc,UAAAA,mBAAiB;AAAA,IAAAC,yCACfC,4BAAc;AAAA,MAACvB;AAAAA,MAAwBD;AAAAA,MAAqBuB,0CAC1DE,iBAAU;AAAA,QACTC,aAAaZ;AAAAA,QACba,WAAWN;AAAAA,QACXZ;AAAAA,QACAmB,WAAW,CAACC,UAAAA,qBAAqB;AAAA,QAAE,GAC/B1B;AAAAA,QAAeoB,UAAA,CAEnBO,2BAAAA,IAACC,+BAAe;AAAA,UAAA,GAAK3B;AAAAA,QAAAA,CAAS,GAC7BF,SACD4B,2BAAAA,IAACE,kBAAW;AAAA,UAACJ,WAAW,CAACC,UAAAA,qBAAqB;AAAA,UAAEN,UAC7ClB,gBACCyB,2BAAAA,IAACG,yCAAsB;AAAA,YAACb,OAAOf;AAAAA,YAAe6B,YAAU;AAAA,UAAE,CAAA,IACxD;AAAA,QAAA,CACO,CAAC;AAAA,MAAA,CACJ;AAAA,IAAA,CACE;AAAA,EAAA,CACC;AAEvB;;"}
+{"version":3,"file":"Flow.cjs","sources":["../../../../src/components/Flow/Flow.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport {\n  DndContext,\n  DndContextProps,\n  DragOverlay,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors,\n} from \"@dnd-kit/core\";\nimport { restrictToWindowEdges } from \"@dnd-kit/modifiers\";\n\nimport { ReactFlowProvider } from \"reactflow\";\n\nimport { HvFlowNodeGroups, HvFlowNodeTypes } from \"./types\";\nimport { HvFlowProvider } from \"./FlowContext\";\nimport { HvDroppableFlow, HvDroppableFlowProps } from \"./DroppableFlow\";\nimport { HvFlowSidebarGroupItem } from \"./Sidebar/SidebarGroup/SidebarGroupItem\";\n\nexport interface HvFlowProps<\n  NodeData = any,\n  NodeType extends string | undefined = string | undefined,\n  NodeGroups extends keyof any = string\n> extends HvDroppableFlowProps<NodeData, NodeType> {\n  /** Flow nodes groups. */\n  nodeGroups?: HvFlowNodeGroups<NodeGroups>;\n  /** Flow nodes types. */\n  nodeTypes?: HvFlowNodeTypes<NodeGroups>;\n  /** Flow sidebar. */\n  sidebar?: React.ReactNode;\n  /**\n   * Dnd Kit context props. This should be used for accessibility purposes.\n   *\n   * More information can be found on the [Dnd Kit documentation](https://docs.dndkit.com/guides/accessibility)\n   */\n  dndContextProps?: Pick<DndContextProps, \"accessibility\">;\n}\n\n/**\n * Flow component to build interactive node-based UIs.\n *\n * This implementation leverages [React Flow](https://reactflow.dev).\n * The drag and drop functionality leverages [Dnd Kit](https://docs.dndkit.com)\n *\n * DISCLAIMER: This component is a work in progress and there might be breaking changes.\n */\nexport const HvFlow = ({\n  nodeTypes,\n  nodeGroups,\n  sidebar,\n  dndContextProps,\n  ...others\n}: HvFlowProps) => {\n  const [draggingLabel, setDraggingLabel] = useState(undefined);\n\n  const sensors = useSensors(\n    useSensor(PointerSensor),\n    useSensor(KeyboardSensor)\n  );\n\n  const handleDragStart: DndContextProps[\"onDragStart\"] = (event) => {\n    if (event.active.data.current?.hvFlow) {\n      setDraggingLabel(event.active.data.current.hvFlow?.label);\n    }\n  };\n\n  const handleDragEnd: DndContextProps[\"onDragEnd\"] = () => {\n    setDraggingLabel(undefined);\n  };\n\n  // We're wrapping the main Flow component with the ReactFlowProvider to access the react flow instance.\n  // HvFlowContext is our custom internal context.\n  return (\n    <ReactFlowProvider>\n      <HvFlowProvider nodeGroups={nodeGroups} nodeTypes={nodeTypes}>\n        <DndContext\n          onDragStart={handleDragStart}\n          onDragEnd={handleDragEnd}\n          sensors={sensors}\n          modifiers={[restrictToWindowEdges]}\n          {...dndContextProps}\n        >\n          <HvDroppableFlow {...others} />\n          {sidebar}\n          <DragOverlay modifiers={[restrictToWindowEdges]}>\n            {draggingLabel ? (\n              <HvFlowSidebarGroupItem label={draggingLabel} isDragging />\n            ) : null}\n          </DragOverlay>\n        </DndContext>\n      </HvFlowProvider>\n    </ReactFlowProvider>\n  );\n};\n"],"names":["HvFlow","nodeTypes","nodeGroups","sidebar","dndContextProps","others","draggingLabel","setDraggingLabel","useState","undefined","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","handleDragStart","event","active","data","current","hvFlow","label","handleDragEnd","ReactFlowProvider","jsx","HvFlowProvider","DndContext","restrictToWindowEdges","HvDroppableFlow","DragOverlay","HvFlowSidebarGroupItem"],"mappings":";;;;;;;;;;AA+CO,MAAMA,SAASA,CAAC;AAAA,EACrBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACQ,MAAM;AACjB,QAAM,CAACC,eAAeC,gBAAgB,IAAIC,MAAAA,SAASC,MAAS;AAE5D,QAAMC,UAAUC,KAAAA,WACdC,KAAAA,UAAUC,KAAa,aAAA,GACvBD,KAAAA,UAAUE,KAAc,cAAA,CAC1B;AAEA,QAAMC,kBAAmDC,CAAU,UAAA;;AACjE,SAAIA,WAAMC,OAAOC,KAAKC,YAAlBH,mBAA2BI,QAAQ;AACrCb,wBAAiBS,WAAMC,OAAOC,KAAKC,QAAQC,WAA1BJ,mBAAkCK,KAAK;AAAA,IAC1D;AAAA,EAAA;AAGF,QAAMC,gBAA8CA,MAAM;AACxDf,qBAAiBE,MAAS;AAAA,EAAA;AAK5B,wCACGc,UAAAA,mBACC,EAAA,UAAAC,2BAAA,IAACC,8BAAe,YAAwB,WACtC,0CAACC,KAAAA,YACC,EAAA,aAAaX,iBACb,WAAWO,eACX,SACA,WAAW,CAACK,+BAAqB,GACjC,GAAIvB,iBAEJ,UAAA;AAAA,IAACoB,2BAAAA,IAAAI,cAAA,iBAAA,EAAgB,GAAIvB,QAAO;AAAA,IAC3BF;AAAAA,IACAqB,2BAAA,IAAAK,KAAA,aAAA,EAAY,WAAW,CAACF,UAAAA,qBAAqB,GAC3CrB,UAAAA,gBACEkB,2BAAAA,IAAAM,iBAAAA,wBAAA,EAAuB,OAAOxB,eAAe,YAAU,KAAA,CAAA,IACtD,MACN;AAAA,EAAA,GACF,GACF,EACF,CAAA;AAEJ;;"}

package/dist/cjs/components/Flow/FlowContext/FlowContext.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const React = require("react");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
+const React = require("react");
 const HvFlowContext = React.createContext({});
 const HvFlowProvider = ({
   nodeGroups,
@@ -15,10 +15,7 @@ const HvFlowProvider = ({
     expandedNodeGroups,
     setExpandedNodeGroups
   }), [nodeGroups, nodeTypes, expandedNodeGroups]);
-  return /* @__PURE__ */ jsxRuntime.jsx(HvFlowContext.Provider, {
-    value,
-    children
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(HvFlowContext.Provider, { value, children });
 };
 const useFlowContext = () => React.useContext(HvFlowContext);
 exports.HvFlowContext = HvFlowContext;

package/dist/cjs/components/Flow/FlowContext/FlowContext.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FlowContext.cjs","sources":["../../../../../src/components/Flow/FlowContext/FlowContext.tsx"],"sourcesContent":["import {\n  Dispatch,\n  SetStateAction,\n  createContext,\n  useContext,\n  useMemo,\n  useState,\n} from \"react\";\n\nimport { HvFlowNodeGroups, HvFlowNodeTypes } from \"../types\";\n\nexport interface HvFlowContextValue<NodeGroups extends keyof any = string> {\n  /** Flow nodes types. */\n  nodeTypes?: HvFlowNodeTypes<NodeGroups>;\n  /** Flow nodes groups. */\n  nodeGroups?: HvFlowNodeGroups<NodeGroups>;\n  /** Flow nodes groups expanded on sidebar. */\n  expandedNodeGroups?: string[];\n  /** Function to set `expandedNodeGroups`. */\n  setExpandedNodeGroups?: Dispatch<SetStateAction<string[]>>;\n}\n\nexport const HvFlowContext = createContext<HvFlowContextValue>({});\n\nexport interface HvFlowProviderProps<NodeGroups extends keyof any = string> {\n  /** Flow nodes types. */\n  nodeTypes?: HvFlowContextValue<NodeGroups>[\"nodeTypes\"];\n  /** Flow nodes groups. */\n  nodeGroups?: HvFlowContextValue<NodeGroups>[\"nodeGroups\"];\n  /** Children. */\n  children?: React.ReactNode;\n}\n\nexport const HvFlowProvider = ({\n  nodeGroups,\n  nodeTypes,\n  children,\n}: HvFlowProviderProps) => {\n  const [expandedNodeGroups, setExpandedNodeGroups] = useState<string[]>([]);\n\n  const value = useMemo(\n    () => ({\n      nodeTypes,\n      nodeGroups,\n      expandedNodeGroups,\n      setExpandedNodeGroups,\n    }),\n    [nodeGroups, nodeTypes, expandedNodeGroups]\n  );\n\n  return (\n    <HvFlowContext.Provider value={value}>{children}</HvFlowContext.Provider>\n  );\n};\n\nexport const useFlowContext = () => useContext(HvFlowContext);\n"],"names":["HvFlowContext","createContext","HvFlowProvider","nodeGroups","nodeTypes","children","expandedNodeGroups","setExpandedNodeGroups","useState","value","useMemo","_jsx","Provider","useFlowContext","useContext"],"mappings":";;;;AAsBaA,MAAAA,gBAAgBC,MAAkC,cAAA,EAAE;AAW1D,MAAMC,iBAAiBA,CAAC;AAAA,EAC7BC;AAAAA,EACAC;AAAAA,EACAC;AACmB,MAAM;AACzB,QAAM,CAACC,oBAAoBC,qBAAqB,IAAIC,MAAAA,SAAmB,CAAE,CAAA;AAEnEC,QAAAA,QAAQC,MAAAA,QACZ,OAAO;AAAA,IACLN;AAAAA,IACAD;AAAAA,IACAG;AAAAA,IACAC;AAAAA,EAEF,IAAA,CAACJ,YAAYC,WAAWE,kBAAkB,CAC5C;AAGEK,SAAAA,2BAAAA,IAACX,cAAcY,UAAQ;AAAA,IAACH;AAAAA,IAAaJ;AAAAA,EAAAA,CAAmC;AAE5E;AAEaQ,MAAAA,iBAAiBA,MAAMC,MAAAA,WAAWd,aAAa;;;;"}
+{"version":3,"file":"FlowContext.cjs","sources":["../../../../../src/components/Flow/FlowContext/FlowContext.tsx"],"sourcesContent":["import {\n  Dispatch,\n  SetStateAction,\n  createContext,\n  useContext,\n  useMemo,\n  useState,\n} from \"react\";\n\nimport { HvFlowNodeGroups, HvFlowNodeTypes } from \"../types\";\n\nexport interface HvFlowContextValue<NodeGroups extends keyof any = string> {\n  /** Flow nodes types. */\n  nodeTypes?: HvFlowNodeTypes<NodeGroups>;\n  /** Flow nodes groups. */\n  nodeGroups?: HvFlowNodeGroups<NodeGroups>;\n  /** Flow nodes groups expanded on sidebar. */\n  expandedNodeGroups?: string[];\n  /** Function to set `expandedNodeGroups`. */\n  setExpandedNodeGroups?: Dispatch<SetStateAction<string[]>>;\n}\n\nexport const HvFlowContext = createContext<HvFlowContextValue>({});\n\nexport interface HvFlowProviderProps<NodeGroups extends keyof any = string> {\n  /** Flow nodes types. */\n  nodeTypes?: HvFlowContextValue<NodeGroups>[\"nodeTypes\"];\n  /** Flow nodes groups. */\n  nodeGroups?: HvFlowContextValue<NodeGroups>[\"nodeGroups\"];\n  /** Children. */\n  children?: React.ReactNode;\n}\n\nexport const HvFlowProvider = ({\n  nodeGroups,\n  nodeTypes,\n  children,\n}: HvFlowProviderProps) => {\n  const [expandedNodeGroups, setExpandedNodeGroups] = useState<string[]>([]);\n\n  const value = useMemo(\n    () => ({\n      nodeTypes,\n      nodeGroups,\n      expandedNodeGroups,\n      setExpandedNodeGroups,\n    }),\n    [nodeGroups, nodeTypes, expandedNodeGroups]\n  );\n\n  return (\n    <HvFlowContext.Provider value={value}>{children}</HvFlowContext.Provider>\n  );\n};\n\nexport const useFlowContext = () => useContext(HvFlowContext);\n"],"names":["HvFlowContext","createContext","HvFlowProvider","nodeGroups","nodeTypes","children","expandedNodeGroups","setExpandedNodeGroups","useState","value","useMemo","jsx","useFlowContext","useContext"],"mappings":";;;;AAsBaA,MAAAA,gBAAgBC,MAAkC,cAAA,EAAE;AAW1D,MAAMC,iBAAiBA,CAAC;AAAA,EAC7BC;AAAAA,EACAC;AAAAA,EACAC;AACmB,MAAM;AACzB,QAAM,CAACC,oBAAoBC,qBAAqB,IAAIC,MAAAA,SAAmB,CAAE,CAAA;AAEnEC,QAAAA,QAAQC,MAAAA,QACZ,OAAO;AAAA,IACLN;AAAAA,IACAD;AAAAA,IACAG;AAAAA,IACAC;AAAAA,EAEF,IAAA,CAACJ,YAAYC,WAAWE,kBAAkB,CAC5C;AAEA,SACGK,2BAAAA,IAAA,cAAc,UAAd,EAAuB,OAAeN,SAAS,CAAA;AAEpD;AAEaO,MAAAA,iBAAiBA,MAAMC,MAAAA,WAAWb,aAAa;;;;"}

package/dist/cjs/components/Flow/Minimap/Minimap.cjs

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const ReactFlow = require("reactflow");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const Minimap_styles = require("./Minimap.styles.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const HvFlowMinimap = ({
   nodeColor = "atmo4",
   maskColor = "atmo3",
@@ -17,14 +17,7 @@ const HvFlowMinimap = ({
     classes,
     cx
   } = Minimap_styles.useClasses(classesProp);
-  return /* @__PURE__ */ jsxRuntime.jsx(ReactFlow.MiniMap, {
-    className: cx(classes.root, className),
-    nodeColor: typeof nodeColor === "string" ? uikitStyles.getColor(nodeColor, uikitStyles.theme.colors.atmo4) : nodeColor,
-    nodeStrokeColor: typeof nodeStrokeColor === "string" ? uikitStyles.getColor(nodeStrokeColor, uikitStyles.theme.colors.atmo4) : nodeStrokeColor,
-    maskColor: uikitStyles.getColor(maskColor, uikitStyles.theme.colors.atmo3),
-    maskStrokeColor: uikitStyles.getColor(maskStrokeColor, uikitStyles.theme.colors.atmo3),
-    ...others
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(ReactFlow.MiniMap, { className: cx(classes.root, className), nodeColor: typeof nodeColor === "string" ? uikitStyles.getColor(nodeColor, uikitStyles.theme.colors.atmo4) : nodeColor, nodeStrokeColor: typeof nodeStrokeColor === "string" ? uikitStyles.getColor(nodeStrokeColor, uikitStyles.theme.colors.atmo4) : nodeStrokeColor, maskColor: uikitStyles.getColor(maskColor, uikitStyles.theme.colors.atmo3), maskStrokeColor: uikitStyles.getColor(maskStrokeColor, uikitStyles.theme.colors.atmo3), ...others });
 };
 exports.flowMinimapClasses = Minimap_styles.staticClasses;
 exports.HvFlowMinimap = HvFlowMinimap;

package/dist/cjs/components/Flow/Minimap/Minimap.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Minimap.cjs","sources":["../../../../../src/components/Flow/Minimap/Minimap.tsx"],"sourcesContent":["import { GetMiniMapNodeAttribute, MiniMap, MiniMapProps } from \"reactflow\";\n\nimport { ExtractNames } from \"@hitachivantara/uikit-react-core\";\nimport { HvColorAny, getColor, theme } from \"@hitachivantara/uikit-styles\";\n\nimport { staticClasses, useClasses } from \"./Minimap.styles\";\n\nexport { staticClasses as flowMinimapClasses };\n\nexport type HvFlowMinimapClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFlowMinimapProps<NodeData = any>\n  extends Omit<\n    MiniMapProps<NodeData>,\n    \"nodeColor\" | \"nodeStrokeColor\" | \"maskColor\" | \"maskStrokeColor\"\n  > {\n  /** Node color. Defaults to `atmo4`. */\n  nodeColor?: HvColorAny | GetMiniMapNodeAttribute<NodeData>;\n  /** Node stroke color. Defaults to `atmo4`. */\n  nodeStrokeColor?: HvColorAny | GetMiniMapNodeAttribute<NodeData>;\n  /** Mask color. Defaults to `atmo3`. */\n  maskColor?: HvColorAny;\n  /** Mask stroke color. Defaults to `atmo3`. */\n  maskStrokeColor?: HvColorAny;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowMinimapClasses;\n}\n\nexport const HvFlowMinimap = ({\n  nodeColor = \"atmo4\",\n  maskColor = \"atmo3\",\n  maskStrokeColor = \"atmo3\",\n  nodeStrokeColor = \"atmo4\",\n  classes: classesProp,\n  className,\n  ...others\n}: HvFlowMinimapProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <MiniMap\n      className={cx(classes.root, className)}\n      nodeColor={\n        typeof nodeColor === \"string\"\n          ? getColor(nodeColor, theme.colors.atmo4)\n          : nodeColor\n      }\n      nodeStrokeColor={\n        typeof nodeStrokeColor === \"string\"\n          ? getColor(nodeStrokeColor, theme.colors.atmo4)\n          : nodeStrokeColor\n      }\n      maskColor={getColor(maskColor, theme.colors.atmo3)}\n      maskStrokeColor={getColor(maskStrokeColor, theme.colors.atmo3)}\n      {...others}\n    />\n  );\n};\n"],"names":["HvFlowMinimap","nodeColor","maskColor","maskStrokeColor","nodeStrokeColor","classes","classesProp","className","others","cx","useClasses","MiniMap","root","getColor","theme","colors","atmo4","atmo3"],"mappings":";;;;;;AA4BO,MAAMA,gBAAgBA,CAAC;AAAA,EAC5BC,YAAY;AAAA,EACZC,YAAY;AAAA,EACZC,kBAAkB;AAAA,EAClBC,kBAAkB;AAAA,EAClBC,SAASC;AAAAA,EACTC;AAAAA,EACA,GAAGC;AACe,MAAM;AAClB,QAAA;AAAA,IAAEH;AAAAA,IAASI;AAAAA,EAAAA,IAAOC,eAAAA,WAAWJ,WAAW;AAE9C,wCACGK,UAAAA,SAAO;AAAA,IACNJ,WAAWE,GAAGJ,QAAQO,MAAML,SAAS;AAAA,IACrCN,WACE,OAAOA,cAAc,WACjBY,qBAASZ,WAAWa,kBAAMC,OAAOC,KAAK,IACtCf;AAAAA,IAENG,iBACE,OAAOA,oBAAoB,WACvBS,qBAAST,iBAAiBU,kBAAMC,OAAOC,KAAK,IAC5CZ;AAAAA,IAENF,WAAWW,YAAAA,SAASX,WAAWY,YAAAA,MAAMC,OAAOE,KAAK;AAAA,IACjDd,iBAAiBU,YAAAA,SAASV,iBAAiBW,YAAAA,MAAMC,OAAOE,KAAK;AAAA,IAAE,GAC3DT;AAAAA,EAAAA,CACL;AAEL;;;"}
+{"version":3,"file":"Minimap.cjs","sources":["../../../../../src/components/Flow/Minimap/Minimap.tsx"],"sourcesContent":["import { GetMiniMapNodeAttribute, MiniMap, MiniMapProps } from \"reactflow\";\n\nimport { ExtractNames } from \"@hitachivantara/uikit-react-core\";\nimport { HvColorAny, getColor, theme } from \"@hitachivantara/uikit-styles\";\n\nimport { staticClasses, useClasses } from \"./Minimap.styles\";\n\nexport { staticClasses as flowMinimapClasses };\n\nexport type HvFlowMinimapClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFlowMinimapProps<NodeData = any>\n  extends Omit<\n    MiniMapProps<NodeData>,\n    \"nodeColor\" | \"nodeStrokeColor\" | \"maskColor\" | \"maskStrokeColor\"\n  > {\n  /** Node color. Defaults to `atmo4`. */\n  nodeColor?: HvColorAny | GetMiniMapNodeAttribute<NodeData>;\n  /** Node stroke color. Defaults to `atmo4`. */\n  nodeStrokeColor?: HvColorAny | GetMiniMapNodeAttribute<NodeData>;\n  /** Mask color. Defaults to `atmo3`. */\n  maskColor?: HvColorAny;\n  /** Mask stroke color. Defaults to `atmo3`. */\n  maskStrokeColor?: HvColorAny;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowMinimapClasses;\n}\n\nexport const HvFlowMinimap = ({\n  nodeColor = \"atmo4\",\n  maskColor = \"atmo3\",\n  maskStrokeColor = \"atmo3\",\n  nodeStrokeColor = \"atmo4\",\n  classes: classesProp,\n  className,\n  ...others\n}: HvFlowMinimapProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <MiniMap\n      className={cx(classes.root, className)}\n      nodeColor={\n        typeof nodeColor === \"string\"\n          ? getColor(nodeColor, theme.colors.atmo4)\n          : nodeColor\n      }\n      nodeStrokeColor={\n        typeof nodeStrokeColor === \"string\"\n          ? getColor(nodeStrokeColor, theme.colors.atmo4)\n          : nodeStrokeColor\n      }\n      maskColor={getColor(maskColor, theme.colors.atmo3)}\n      maskStrokeColor={getColor(maskStrokeColor, theme.colors.atmo3)}\n      {...others}\n    />\n  );\n};\n"],"names":["HvFlowMinimap","nodeColor","maskColor","maskStrokeColor","nodeStrokeColor","classes","classesProp","className","others","cx","useClasses","jsx","MiniMap","root","getColor","theme","colors","atmo4","atmo3"],"mappings":";;;;;;AA4BO,MAAMA,gBAAgBA,CAAC;AAAA,EAC5BC,YAAY;AAAA,EACZC,YAAY;AAAA,EACZC,kBAAkB;AAAA,EAClBC,kBAAkB;AAAA,EAClBC,SAASC;AAAAA,EACTC;AAAAA,EACA,GAAGC;AACe,MAAM;AAClB,QAAA;AAAA,IAAEH;AAAAA,IAASI;AAAAA,EAAAA,IAAOC,eAAAA,WAAWJ,WAAW;AAG5C,SAAAK,2BAAA,IAACC,qBACC,WAAWH,GAAGJ,QAAQQ,MAAMN,SAAS,GACrC,WACE,OAAON,cAAc,WACjBa,YAAAA,SAASb,WAAWc,kBAAMC,OAAOC,KAAK,IACtChB,WAEN,iBACE,OAAOG,oBAAoB,WACvBU,YAAAA,SAASV,iBAAiBW,kBAAMC,OAAOC,KAAK,IAC5Cb,iBAEN,WAAWU,YAAAA,SAASZ,WAAWa,kBAAMC,OAAOE,KAAK,GACjD,iBAAiBJ,YAASX,SAAAA,iBAAiBY,YAAAA,MAAMC,OAAOE,KAAK,GAC7D,GAAIV,OACJ,CAAA;AAEN;;;"}

package/dist/cjs/components/Flow/Sidebar/Sidebar.cjs

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
 const debounce = require("lodash/debounce");
 const core = require("@dnd-kit/core");
@@ -7,7 +8,6 @@ const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const Sidebar_styles = require("./Sidebar.styles.cjs");
 const utils = require("./utils.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const SidebarGroup = require("./SidebarGroup/SidebarGroup.cjs");
 const FlowContext = require("../FlowContext/FlowContext.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
@@ -62,59 +62,25 @@ const HvFlowSidebar = ({
     setExpandedNodeGroups == null ? void 0 : setExpandedNodeGroups(value ? Object.keys(gps) : []);
   };
   const handleDebouncedSearch = debounce__default.default(handleSearch, 500);
-  return /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvDrawer, {
-    BackdropComponent: void 0,
-    variant: "persistent",
-    classes: {
-      paper: classes.drawerPaper
-    },
-    anchor,
-    buttonTitle,
-    ...others,
-    children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
-      id: drawerElementId,
-      ref: setNodeRef,
-      children: [/* @__PURE__ */ jsxRuntime.jsxs("div", {
-        className: classes.titleContainer,
-        children: [/* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Add, {
-          role: "none"
-        }), /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, {
-          variant: "title3",
-          children: title
-        })]
-      }), /* @__PURE__ */ jsxRuntime.jsxs("div", {
-        className: classes.contentContainer,
-        children: [/* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, {
-          className: classes.description,
-          children: description
-        }), /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvInput, {
-          className: classes.searchRoot,
-          type: "search",
-          placeholder: labels == null ? void 0 : labels.searchPlaceholder,
-          "aria-label": labels == null ? void 0 : labels.searchAriaLabel,
-          "aria-controls": groupsElementId,
-          "aria-owns": groupsElementId,
-          onChange: handleDebouncedSearch,
-          inputProps: {
-            autoComplete: "off"
-          }
-        }), /* @__PURE__ */ jsxRuntime.jsx("ul", {
-          id: groupsElementId,
-          className: classes.groupsContainer,
-          children: Object.entries(groups).map((obj) => /* @__PURE__ */ jsxRuntime.jsx(SidebarGroup.HvFlowSidebarGroup, {
-            id: obj[0],
-            expandButtonProps: {
-              "aria-label": labels == null ? void 0 : labels.expandGroupButtonAriaLabel
-            },
-            itemProps: {
-              "aria-roledescription": labels == null ? void 0 : labels.itemAriaRoleDescription
-            },
-            ...obj[1]
-          }, obj[0]))
-        })]
-      })]
-    })
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvDrawer, { BackdropComponent: void 0, variant: "persistent", classes: {
+    paper: classes.drawerPaper
+  }, anchor, buttonTitle, ...others, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { id: drawerElementId, ref: setNodeRef, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.titleContainer, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Add, { role: "none" }),
+      /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { variant: "title3", children: title })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.contentContainer, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { className: classes.description, children: description }),
+      /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvInput, { className: classes.searchRoot, type: "search", placeholder: labels == null ? void 0 : labels.searchPlaceholder, "aria-label": labels == null ? void 0 : labels.searchAriaLabel, "aria-controls": groupsElementId, "aria-owns": groupsElementId, onChange: handleDebouncedSearch, inputProps: {
+        autoComplete: "off"
+      } }),
+      /* @__PURE__ */ jsxRuntime.jsx("ul", { id: groupsElementId, className: classes.groupsContainer, children: Object.entries(groups).map((obj) => /* @__PURE__ */ jsxRuntime.jsx(SidebarGroup.HvFlowSidebarGroup, { id: obj[0], expandButtonProps: {
+        "aria-label": labels == null ? void 0 : labels.expandGroupButtonAriaLabel
+      }, itemProps: {
+        "aria-roledescription": labels == null ? void 0 : labels.itemAriaRoleDescription
+      }, ...obj[1] }, obj[0])) })
+    ] })
+  ] }) });
 };
 exports.flowSidebarClasses = Sidebar_styles.staticClasses;
 exports.HvFlowSidebar = HvFlowSidebar;

package/dist/cjs/components/Flow/Sidebar/Sidebar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.cjs","sources":["../../../../../src/components/Flow/Sidebar/Sidebar.tsx"],"sourcesContent":["import { useMemo, useState } from \"react\";\n\nimport debounce from \"lodash/debounce\";\n\nimport { useDroppable } from \"@dnd-kit/core\";\n\nimport {\n  ExtractNames,\n  HvDrawer,\n  HvDrawerProps,\n  HvInput,\n  HvInputProps,\n  HvTypography,\n  useLabels,\n  useUniqueId,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Add } from \"@hitachivantara/uikit-react-icons\";\n\nimport { staticClasses, useClasses } from \"./Sidebar.styles\";\nimport { HvFlowSidebarGroup } from \"./SidebarGroup\";\nimport { useFlowContext } from \"../FlowContext\";\nimport { buildGroups } from \"./utils\";\n\nexport { staticClasses as flowSidebarClasses };\n\nexport type HvFlowSidebarClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFlowSidebarProps\n  extends Omit<HvDrawerProps, \"classes\" | \"title\"> {\n  /** Sidebar title. */\n  title?: string;\n  /** Sidebar description. */\n  description?: string;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowSidebarClasses;\n  /** Labels used on the sidebar. */\n  labels?: {\n    itemAriaRoleDescription?: string;\n    expandGroupButtonAriaLabel?: string;\n    searchPlaceholder?: string;\n    searchAriaLabel?: string;\n  };\n}\n\nconst DEFAULT_LABELS: HvFlowSidebarProps[\"labels\"] = {\n  itemAriaRoleDescription: \"Draggable\",\n  expandGroupButtonAriaLabel: \"Expand group\",\n  searchPlaceholder: \"Search node...\",\n  searchAriaLabel: \"Search node...\",\n};\n\nexport const HvFlowSidebar = ({\n  id,\n  title,\n  description,\n  anchor = \"right\",\n  buttonTitle = \"Close\",\n  classes: classesProp,\n  labels: labelsProps,\n  ...others\n}: HvFlowSidebarProps) => {\n  const { classes } = useClasses(classesProp);\n\n  const { nodeGroups, nodeTypes, setExpandedNodeGroups } = useFlowContext();\n\n  const unfilteredGroups = useMemo(\n    () => buildGroups(nodeGroups, nodeTypes),\n    [nodeGroups, nodeTypes]\n  );\n\n  const [groups, setGroups] = useState(unfilteredGroups);\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProps);\n\n  const drawerElementId = useUniqueId(id, \"hvFlowSidebarDrawer\");\n  const groupsElementId = useUniqueId(id, \"hvFlowSidebarGroups\");\n\n  // The sidebar is droppable to distinguish between the canvas and the sidebar\n  // Otherwise items dropped inside the sidebar will be added to the canvas\n  const { setNodeRef } = useDroppable({\n    id: drawerElementId,\n  });\n\n  const handleSearch: HvInputProps[\"onChange\"] = (event, value) => {\n    const gps = value\n      ? Object.entries(unfilteredGroups).reduce((acc, curr) => {\n          // Filter nodes by search\n          const filteredNodes = curr[1].nodes.filter((obj) =>\n            obj.label.toLocaleLowerCase().includes(value.toLocaleLowerCase())\n          );\n          const nodesCount = filteredNodes.length;\n\n          // Only show groups with nodes\n          if (nodesCount > 0) {\n            acc[curr[0]] = {\n              ...curr[1],\n              nodes: filteredNodes,\n            };\n          }\n\n          return acc;\n        }, {})\n      : unfilteredGroups;\n\n    setGroups(gps);\n    setExpandedNodeGroups?.(value ? Object.keys(gps) : []);\n  };\n\n  const handleDebouncedSearch = debounce(handleSearch, 500);\n\n  return (\n    <HvDrawer\n      BackdropComponent={undefined}\n      variant=\"persistent\"\n      classes={{\n        paper: classes.drawerPaper,\n      }}\n      anchor={anchor}\n      buttonTitle={buttonTitle}\n      {...others}\n    >\n      <div id={drawerElementId} ref={setNodeRef}>\n        <div className={classes.titleContainer}>\n          <Add role=\"none\" />\n          <HvTypography variant=\"title3\">{title}</HvTypography>\n        </div>\n        <div className={classes.contentContainer}>\n          <HvTypography className={classes.description}>\n            {description}\n          </HvTypography>\n          <HvInput\n            className={classes.searchRoot}\n            type=\"search\"\n            placeholder={labels?.searchPlaceholder}\n            aria-label={labels?.searchAriaLabel}\n            aria-controls={groupsElementId}\n            aria-owns={groupsElementId}\n            onChange={handleDebouncedSearch}\n            inputProps={{ autoComplete: \"off\" }}\n          />\n          <ul id={groupsElementId} className={classes.groupsContainer}>\n            {Object.entries(groups).map((obj) => (\n              <HvFlowSidebarGroup\n                key={obj[0]}\n                id={obj[0]}\n                expandButtonProps={{\n                  \"aria-label\": labels?.expandGroupButtonAriaLabel,\n                }}\n                itemProps={{\n                  \"aria-roledescription\": labels?.itemAriaRoleDescription,\n                }}\n                {...obj[1]}\n              />\n            ))}\n          </ul>\n        </div>\n      </div>\n    </HvDrawer>\n  );\n};\n"],"names":["DEFAULT_LABELS","itemAriaRoleDescription","expandGroupButtonAriaLabel","searchPlaceholder","searchAriaLabel","HvFlowSidebar","id","title","description","anchor","buttonTitle","classes","classesProp","labels","labelsProps","others","useClasses","nodeGroups","nodeTypes","setExpandedNodeGroups","useFlowContext","unfilteredGroups","useMemo","buildGroups","groups","setGroups","useState","useLabels","drawerElementId","useUniqueId","groupsElementId","setNodeRef","useDroppable","handleSearch","event","value","gps","Object","entries","reduce","acc","curr","filteredNodes","nodes","filter","obj","label","toLocaleLowerCase","includes","nodesCount","length","keys","handleDebouncedSearch","debounce","HvDrawer","BackdropComponent","undefined","variant","paper","drawerPaper","children","ref","_jsxs","className","titleContainer","_jsx","Add","role","HvTypography","contentContainer","HvInput","searchRoot","type","placeholder","onChange","inputProps","autoComplete","groupsContainer","map","HvFlowSidebarGroup","expandButtonProps","itemProps"],"mappings":"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"}
+{"version":3,"file":"Sidebar.cjs","sources":["../../../../../src/components/Flow/Sidebar/Sidebar.tsx"],"sourcesContent":["import { useMemo, useState } from \"react\";\n\nimport debounce from \"lodash/debounce\";\n\nimport { useDroppable } from \"@dnd-kit/core\";\n\nimport {\n  ExtractNames,\n  HvDrawer,\n  HvDrawerProps,\n  HvInput,\n  HvInputProps,\n  HvTypography,\n  useLabels,\n  useUniqueId,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Add } from \"@hitachivantara/uikit-react-icons\";\n\nimport { staticClasses, useClasses } from \"./Sidebar.styles\";\nimport { HvFlowSidebarGroup } from \"./SidebarGroup\";\nimport { useFlowContext } from \"../FlowContext\";\nimport { buildGroups } from \"./utils\";\n\nexport { staticClasses as flowSidebarClasses };\n\nexport type HvFlowSidebarClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFlowSidebarProps\n  extends Omit<HvDrawerProps, \"classes\" | \"title\"> {\n  /** Sidebar title. */\n  title?: string;\n  /** Sidebar description. */\n  description?: string;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowSidebarClasses;\n  /** Labels used on the sidebar. */\n  labels?: {\n    itemAriaRoleDescription?: string;\n    expandGroupButtonAriaLabel?: string;\n    searchPlaceholder?: string;\n    searchAriaLabel?: string;\n  };\n}\n\nconst DEFAULT_LABELS: HvFlowSidebarProps[\"labels\"] = {\n  itemAriaRoleDescription: \"Draggable\",\n  expandGroupButtonAriaLabel: \"Expand group\",\n  searchPlaceholder: \"Search node...\",\n  searchAriaLabel: \"Search node...\",\n};\n\nexport const HvFlowSidebar = ({\n  id,\n  title,\n  description,\n  anchor = \"right\",\n  buttonTitle = \"Close\",\n  classes: classesProp,\n  labels: labelsProps,\n  ...others\n}: HvFlowSidebarProps) => {\n  const { classes } = useClasses(classesProp);\n\n  const { nodeGroups, nodeTypes, setExpandedNodeGroups } = useFlowContext();\n\n  const unfilteredGroups = useMemo(\n    () => buildGroups(nodeGroups, nodeTypes),\n    [nodeGroups, nodeTypes]\n  );\n\n  const [groups, setGroups] = useState(unfilteredGroups);\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProps);\n\n  const drawerElementId = useUniqueId(id, \"hvFlowSidebarDrawer\");\n  const groupsElementId = useUniqueId(id, \"hvFlowSidebarGroups\");\n\n  // The sidebar is droppable to distinguish between the canvas and the sidebar\n  // Otherwise items dropped inside the sidebar will be added to the canvas\n  const { setNodeRef } = useDroppable({\n    id: drawerElementId,\n  });\n\n  const handleSearch: HvInputProps[\"onChange\"] = (event, value) => {\n    const gps = value\n      ? Object.entries(unfilteredGroups).reduce((acc, curr) => {\n          // Filter nodes by search\n          const filteredNodes = curr[1].nodes.filter((obj) =>\n            obj.label.toLocaleLowerCase().includes(value.toLocaleLowerCase())\n          );\n          const nodesCount = filteredNodes.length;\n\n          // Only show groups with nodes\n          if (nodesCount > 0) {\n            acc[curr[0]] = {\n              ...curr[1],\n              nodes: filteredNodes,\n            };\n          }\n\n          return acc;\n        }, {})\n      : unfilteredGroups;\n\n    setGroups(gps);\n    setExpandedNodeGroups?.(value ? Object.keys(gps) : []);\n  };\n\n  const handleDebouncedSearch = debounce(handleSearch, 500);\n\n  return (\n    <HvDrawer\n      BackdropComponent={undefined}\n      variant=\"persistent\"\n      classes={{\n        paper: classes.drawerPaper,\n      }}\n      anchor={anchor}\n      buttonTitle={buttonTitle}\n      {...others}\n    >\n      <div id={drawerElementId} ref={setNodeRef}>\n        <div className={classes.titleContainer}>\n          <Add role=\"none\" />\n          <HvTypography variant=\"title3\">{title}</HvTypography>\n        </div>\n        <div className={classes.contentContainer}>\n          <HvTypography className={classes.description}>\n            {description}\n          </HvTypography>\n          <HvInput\n            className={classes.searchRoot}\n            type=\"search\"\n            placeholder={labels?.searchPlaceholder}\n            aria-label={labels?.searchAriaLabel}\n            aria-controls={groupsElementId}\n            aria-owns={groupsElementId}\n            onChange={handleDebouncedSearch}\n            inputProps={{ autoComplete: \"off\" }}\n          />\n          <ul id={groupsElementId} className={classes.groupsContainer}>\n            {Object.entries(groups).map((obj) => (\n              <HvFlowSidebarGroup\n                key={obj[0]}\n                id={obj[0]}\n                expandButtonProps={{\n                  \"aria-label\": labels?.expandGroupButtonAriaLabel,\n                }}\n                itemProps={{\n                  \"aria-roledescription\": labels?.itemAriaRoleDescription,\n                }}\n                {...obj[1]}\n              />\n            ))}\n          </ul>\n        </div>\n      </div>\n    </HvDrawer>\n  );\n};\n"],"names":["DEFAULT_LABELS","itemAriaRoleDescription","expandGroupButtonAriaLabel","searchPlaceholder","searchAriaLabel","HvFlowSidebar","id","title","description","anchor","buttonTitle","classes","classesProp","labels","labelsProps","others","useClasses","nodeGroups","nodeTypes","setExpandedNodeGroups","useFlowContext","unfilteredGroups","useMemo","buildGroups","groups","setGroups","useState","useLabels","drawerElementId","useUniqueId","groupsElementId","setNodeRef","useDroppable","handleSearch","event","value","gps","Object","entries","reduce","acc","curr","filteredNodes","nodes","filter","obj","label","toLocaleLowerCase","includes","nodesCount","length","keys","handleDebouncedSearch","debounce","HvDrawer","undefined","paper","drawerPaper","jsxs","titleContainer","jsx","Add","HvTypography","contentContainer","HvInput","searchRoot","autoComplete","groupsContainer","map","HvFlowSidebarGroup"],"mappings":"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"}

package/dist/cjs/components/Flow/Sidebar/SidebarGroup/SidebarGroup.cjs

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const SidebarGroup_styles = require("./SidebarGroup.styles.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const FlowContext = require("../../FlowContext/FlowContext.cjs");
 const DraggableSidebarGroupItem = require("./SidebarGroupItem/DraggableSidebarGroupItem.cjs");
 const HvFlowSidebarGroup = ({
@@ -32,46 +32,19 @@ const HvFlowSidebarGroup = ({
   const handleClick = React.useCallback(() => {
     setExpandedNodeGroups == null ? void 0 : setExpandedNodeGroups((prev) => opened ? prev.filter((groupId) => id !== groupId) : [...prev, id]);
   }, [id, opened, setExpandedNodeGroups]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("li", {
-    className: cx(css({
-      borderColor: uikitStyles.getColor(color)
-    }), classes.root),
-    children: [/* @__PURE__ */ jsxRuntime.jsxs("div", {
-      className: classes.titleContainer,
-      children: [/* @__PURE__ */ jsxRuntime.jsxs("div", {
-        className: classes.labelContainer,
-        children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
-          className: classes.icon,
-          role: "none",
-          children: icon
-        }), /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, {
-          variant: "title4",
-          children: nodes.length > 1 ? `${label} (${nodes.length})` : label
-        })]
-      }), /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, {
-        icon: true,
-        onClick: handleClick,
-        "aria-expanded": opened,
-        ...expandButtonProps,
-        children: opened ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Up, {
-          role: "none"
-        }) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Down, {
-          role: "none"
-        })
-      })]
-    }), description && /* @__PURE__ */ jsxRuntime.jsx("div", {
-      className: classes.descriptionContainer,
-      children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, {
-        children: description
-      })
-    }), opened && /* @__PURE__ */ jsxRuntime.jsx("div", {
-      className: classes.itemsContainer,
-      children: nodes.map((obj) => /* @__PURE__ */ jsxRuntime.jsx(DraggableSidebarGroupItem.HvFlowDraggableSidebarGroupItem, {
-        ...itemProps,
-        ...obj
-      }, obj.id))
-    })]
-  });
+  return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: cx(css({
+    borderColor: uikitStyles.getColor(color)
+  }), classes.root), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.titleContainer, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.labelContainer, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.icon, role: "none", children: icon }),
+        /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { variant: "title4", children: nodes.length > 1 ? `${label} (${nodes.length})` : label })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, { icon: true, onClick: handleClick, "aria-expanded": opened, ...expandButtonProps, children: opened ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Up, { role: "none" }) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Down, { role: "none" }) })
+    ] }),
+    description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.descriptionContainer, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { children: description }) }),
+    opened && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.itemsContainer, children: nodes.map((obj) => /* @__PURE__ */ jsxRuntime.jsx(DraggableSidebarGroupItem.HvFlowDraggableSidebarGroupItem, { ...itemProps, ...obj }, obj.id)) })
+  ] });
 };
 exports.flowSidebarGroupClasses = SidebarGroup_styles.staticClasses;
 exports.HvFlowSidebarGroup = HvFlowSidebarGroup;