@hitachivantara/uikit-react-lab 5.5.1 → 5.5.3

package/dist/cjs/components/Wizard/WizardTitle/WizardTitle.cjs

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const WizardTitle_styles = require("./WizardTitle.styles.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const WizardContext = require("../WizardContext/WizardContext.cjs");
 const StepNavigation = require("../../StepNavigation/StepNavigation.cjs");
 const switchTabState = (state, currentTab, index) => {
@@ -56,42 +56,21 @@ const HvWizardTitle = ({
       setSteps(updatedSteps);
     }
   }, [context, tab, setTab]);
-  return /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvDialogTitle, {
-    className: classes.headerContainer,
-    classes: {
-      messageContainer: classes.messageContainer
-    },
-    children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
-      className: classes.titleContainer,
-      children: [title && /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, {
-        variant: "title3",
-        component: "h3",
-        children: title
-      }), !!steps.length && /* @__PURE__ */ jsxRuntime.jsx(StepNavigation.HvStepNavigation, {
-        className: classes.stepContainer,
-        steps,
-        type: "Default",
-        stepSize: "xs",
-        width: {
-          xs: 200,
-          sm: 350,
-          md: 600,
-          lg: 800,
-          xl: 1e3
-        },
-        ...customStep
-      }), hasSummary && /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, {
-        variant: "secondarySubtle",
-        className: classes.buttonWidth,
-        classes: {
-          root: classes.rootSummaryButton
-        },
-        onClick: toggleSummary,
-        startIcon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Report, {}),
-        children: `${labels.summary ?? "Summary"}`
-      })]
-    })
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvDialogTitle, { className: classes.headerContainer, classes: {
+    messageContainer: classes.messageContainer
+  }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.titleContainer, children: [
+    title && /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { variant: "title3", component: "h3", children: title }),
+    !!steps.length && /* @__PURE__ */ jsxRuntime.jsx(StepNavigation.HvStepNavigation, { className: classes.stepContainer, steps, type: "Default", stepSize: "xs", width: {
+      xs: 200,
+      sm: 350,
+      md: 600,
+      lg: 800,
+      xl: 1e3
+    }, ...customStep }),
+    hasSummary && /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, { variant: "secondarySubtle", className: classes.buttonWidth, classes: {
+      root: classes.rootSummaryButton
+    }, onClick: toggleSummary, startIcon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Report, {}), children: `${labels.summary ?? "Summary"}` })
+  ] }) });
 };
 exports.wizardTitleClasses = WizardTitle_styles.staticClasses;
 exports.HvWizardTitle = HvWizardTitle;

package/dist/cjs/components/Wizard/WizardTitle/WizardTitle.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"WizardTitle.cjs","sources":["../../../../../src/components/Wizard/WizardTitle/WizardTitle.tsx"],"sourcesContent":["import { useContext, useEffect, useState } from \"react\";\n\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvButton,\n  HvDialogTitle,\n  HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Report } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvStepNavigation, HvStepNavigationProps } from \"../../StepNavigation\";\nimport { HvStepProps } from \"../../StepNavigation/DefaultNavigation\";\nimport { HvWizardContext } from \"../WizardContext\";\nimport { staticClasses, useClasses } from \"./WizardTitle.styles\";\n\nexport { staticClasses as wizardTitleClasses };\n\nexport type HvWizardTitleClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvWizardTitleProps extends HvBaseProps {\n  /** Title for the wizard. */\n  title?: string;\n  /** Shows the summary button. */\n  hasSummary?: boolean;\n  /** An object containing all the labels for the wizard header. */\n  labels?: {\n    /** Summary button label. */\n    summary?: string;\n  };\n  /** Custom object to define type, size and width of the StepNavigation component */\n  customStep?: Pick<HvStepNavigationProps, \"type\" | \"stepSize\" | \"width\">;\n  /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n  classes?: HvWizardTitleClasses;\n}\n\nconst switchTabState = (state, currentTab, index) => {\n  if (index === currentTab) return \"Current\";\n  if (state.valid) return \"Completed\";\n  if (state.valid === null) return \"Enabled\";\n  if (state.touched && state.valid === false) return \"Failed\";\n  // \"Disabled\"\n  // \"Pending\"\n  return \"Enabled\";\n};\n\nexport const HvWizardTitle = ({\n  title,\n  hasSummary = false,\n  labels = {},\n  classes: classesProp,\n  customStep = {},\n}: HvWizardTitleProps) => {\n  const { context, setSummary, tab, setTab } = useContext(HvWizardContext);\n\n  const { classes } = useClasses(classesProp);\n\n  const [steps, setSteps] = useState<HvStepProps[]>([]);\n\n  useEffect(() => {\n    return () => {\n      setSummary(false);\n    };\n  }, [setSummary]);\n\n  const toggleSummary = () => {\n    setSummary((prevValue) => !prevValue);\n  };\n\n  useEffect(() => {\n    const contextArray = Object.entries(context);\n\n    if (contextArray.length) {\n      const updatedSteps: HvStepProps[] = contextArray.map(\n        ([, childState], index) => {\n          return {\n            title: childState?.name ?? `${index + 1}`,\n            state: switchTabState(childState, tab, index),\n            onClick: () => setTab(index),\n          };\n        }\n      );\n\n      setSteps(updatedSteps);\n    }\n  }, [context, tab, setTab]);\n\n  return (\n    <HvDialogTitle\n      className={classes.headerContainer}\n      classes={{\n        messageContainer: classes.messageContainer,\n      }}\n    >\n      <div className={classes.titleContainer}>\n        {title && (\n          <HvTypography variant=\"title3\" component=\"h3\">\n            {title}\n          </HvTypography>\n        )}\n        {!!steps.length && (\n          <HvStepNavigation\n            className={classes.stepContainer}\n            steps={steps}\n            type=\"Default\"\n            stepSize=\"xs\"\n            width={{\n              xs: 200,\n              sm: 350,\n              md: 600,\n              lg: 800,\n              xl: 1000,\n            }}\n            {...customStep}\n          />\n        )}\n        {hasSummary && (\n          <HvButton\n            variant=\"secondarySubtle\"\n            className={classes.buttonWidth}\n            classes={{\n              root: classes.rootSummaryButton,\n            }}\n            onClick={toggleSummary}\n            startIcon={<Report />}\n          >\n            {`${labels.summary ?? \"Summary\"}`}\n          </HvButton>\n        )}\n      </div>\n    </HvDialogTitle>\n  );\n};\n"],"names":["switchTabState","state","currentTab","index","valid","touched","HvWizardTitle","title","hasSummary","labels","classes","classesProp","customStep","context","setSummary","tab","setTab","useContext","HvWizardContext","useClasses","steps","setSteps","useState","useEffect","toggleSummary","prevValue","contextArray","Object","entries","length","updatedSteps","map","childState","name","onClick","HvDialogTitle","className","headerContainer","messageContainer","children","titleContainer","_jsx","HvTypography","variant","component","HvStepNavigation","stepContainer","type","stepSize","width","xs","sm","md","lg","xl","HvButton","buttonWidth","root","rootSummaryButton","startIcon","Report","summary"],"mappings":";;;;;;;;;AAoCA,MAAMA,iBAAiBA,CAACC,OAAOC,YAAYC,UAAU;AACnD,MAAIA,UAAUD;AAAmB,WAAA;AACjC,MAAID,MAAMG;AAAc,WAAA;AACxB,MAAIH,MAAMG,UAAU;AAAa,WAAA;AAC7BH,MAAAA,MAAMI,WAAWJ,MAAMG,UAAU;AAAc,WAAA;AAG5C,SAAA;AACT;AAEO,MAAME,gBAAgBA,CAAC;AAAA,EAC5BC;AAAAA,EACAC,aAAa;AAAA,EACbC,SAAS,CAAC;AAAA,EACVC,SAASC;AAAAA,EACTC,aAAa,CAAC;AACI,MAAM;AAClB,QAAA;AAAA,IAAEC;AAAAA,IAASC;AAAAA,IAAYC;AAAAA,IAAKC;AAAAA,EAAAA,IAAWC,MAAAA,WAAWC,cAAAA,OAAe;AAEjE,QAAA;AAAA,IAAER;AAAAA,EAAAA,IAAYS,mBAAAA,WAAWR,WAAW;AAE1C,QAAM,CAACS,OAAOC,QAAQ,IAAIC,MAAAA,SAAwB,CAAE,CAAA;AAEpDC,QAAAA,UAAU,MAAM;AACd,WAAO,MAAM;AACXT,iBAAW,KAAK;AAAA,IAAA;AAAA,EAClB,GACC,CAACA,UAAU,CAAC;AAEf,QAAMU,gBAAgBA,MAAM;AACdC,eAAAA,CAAAA,cAAc,CAACA,SAAS;AAAA,EAAA;AAGtCF,QAAAA,UAAU,MAAM;AACRG,UAAAA,eAAeC,OAAOC,QAAQf,OAAO;AAE3C,QAAIa,aAAaG,QAAQ;AACjBC,YAAAA,eAA8BJ,aAAaK,IAC/C,CAAC,CAAGC,EAAAA,UAAU,GAAG7B,UAAU;AAClB,eAAA;AAAA,UACLI,QAAOyB,yCAAYC,SAAS,GAAE9B,QAAQ,CAAE;AAAA,UACxCF,OAAOD,eAAegC,YAAYjB,KAAKZ,KAAK;AAAA,UAC5C+B,SAASA,MAAMlB,OAAOb,KAAK;AAAA,QAAA;AAAA,MAC7B,CAEJ;AAEAkB,eAASS,YAAY;AAAA,IACvB;AAAA,EACC,GAAA,CAACjB,SAASE,KAAKC,MAAM,CAAC;AAEzB,wCACGmB,eAAAA,eAAa;AAAA,IACZC,WAAW1B,QAAQ2B;AAAAA,IACnB3B,SAAS;AAAA,MACP4B,kBAAkB5B,QAAQ4B;AAAAA,IAC5B;AAAA,IAAEC,0CAEF,OAAA;AAAA,MAAKH,WAAW1B,QAAQ8B;AAAAA,MAAeD,UACpChC,CAAAA,SACCkC,2BAAAA,IAACC,6BAAY;AAAA,QAACC,SAAQ;AAAA,QAASC,WAAU;AAAA,QAAIL,UAC1ChC;AAAAA,MACW,CAAA,GAEf,CAAC,CAACa,MAAMS,yCACNgB,eAAAA,kBAAgB;AAAA,QACfT,WAAW1B,QAAQoC;AAAAA,QACnB1B;AAAAA,QACA2B,MAAK;AAAA,QACLC,UAAS;AAAA,QACTC,OAAO;AAAA,UACLC,IAAI;AAAA,UACJC,IAAI;AAAA,UACJC,IAAI;AAAA,UACJC,IAAI;AAAA,UACJC,IAAI;AAAA,QACN;AAAA,QAAE,GACE1C;AAAAA,MAAAA,CACL,GAEFJ,cACCiC,2BAAAA,IAACc,yBAAQ;AAAA,QACPZ,SAAQ;AAAA,QACRP,WAAW1B,QAAQ8C;AAAAA,QACnB9C,SAAS;AAAA,UACP+C,MAAM/C,QAAQgD;AAAAA,QAChB;AAAA,QACAxB,SAASV;AAAAA,QACTmC,WAAWlB,2BAAAA,IAACmB,0BAAQ;AAAA,QAAErB,UAEpB,GAAE9B,OAAOoD,WAAW,SAAU;AAAA,MAAA,CACxB,CACX;AAAA,IAAA,CACE;AAAA,EAAA,CACQ;AAEnB;;;"}
+{"version":3,"file":"WizardTitle.cjs","sources":["../../../../../src/components/Wizard/WizardTitle/WizardTitle.tsx"],"sourcesContent":["import { useContext, useEffect, useState } from \"react\";\n\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvButton,\n  HvDialogTitle,\n  HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Report } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvStepNavigation, HvStepNavigationProps } from \"../../StepNavigation\";\nimport { HvStepProps } from \"../../StepNavigation/DefaultNavigation\";\nimport { HvWizardContext } from \"../WizardContext\";\nimport { staticClasses, useClasses } from \"./WizardTitle.styles\";\n\nexport { staticClasses as wizardTitleClasses };\n\nexport type HvWizardTitleClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvWizardTitleProps extends HvBaseProps {\n  /** Title for the wizard. */\n  title?: string;\n  /** Shows the summary button. */\n  hasSummary?: boolean;\n  /** An object containing all the labels for the wizard header. */\n  labels?: {\n    /** Summary button label. */\n    summary?: string;\n  };\n  /** Custom object to define type, size and width of the StepNavigation component */\n  customStep?: Pick<HvStepNavigationProps, \"type\" | \"stepSize\" | \"width\">;\n  /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n  classes?: HvWizardTitleClasses;\n}\n\nconst switchTabState = (state, currentTab, index) => {\n  if (index === currentTab) return \"Current\";\n  if (state.valid) return \"Completed\";\n  if (state.valid === null) return \"Enabled\";\n  if (state.touched && state.valid === false) return \"Failed\";\n  // \"Disabled\"\n  // \"Pending\"\n  return \"Enabled\";\n};\n\nexport const HvWizardTitle = ({\n  title,\n  hasSummary = false,\n  labels = {},\n  classes: classesProp,\n  customStep = {},\n}: HvWizardTitleProps) => {\n  const { context, setSummary, tab, setTab } = useContext(HvWizardContext);\n\n  const { classes } = useClasses(classesProp);\n\n  const [steps, setSteps] = useState<HvStepProps[]>([]);\n\n  useEffect(() => {\n    return () => {\n      setSummary(false);\n    };\n  }, [setSummary]);\n\n  const toggleSummary = () => {\n    setSummary((prevValue) => !prevValue);\n  };\n\n  useEffect(() => {\n    const contextArray = Object.entries(context);\n\n    if (contextArray.length) {\n      const updatedSteps: HvStepProps[] = contextArray.map(\n        ([, childState], index) => {\n          return {\n            title: childState?.name ?? `${index + 1}`,\n            state: switchTabState(childState, tab, index),\n            onClick: () => setTab(index),\n          };\n        }\n      );\n\n      setSteps(updatedSteps);\n    }\n  }, [context, tab, setTab]);\n\n  return (\n    <HvDialogTitle\n      className={classes.headerContainer}\n      classes={{\n        messageContainer: classes.messageContainer,\n      }}\n    >\n      <div className={classes.titleContainer}>\n        {title && (\n          <HvTypography variant=\"title3\" component=\"h3\">\n            {title}\n          </HvTypography>\n        )}\n        {!!steps.length && (\n          <HvStepNavigation\n            className={classes.stepContainer}\n            steps={steps}\n            type=\"Default\"\n            stepSize=\"xs\"\n            width={{\n              xs: 200,\n              sm: 350,\n              md: 600,\n              lg: 800,\n              xl: 1000,\n            }}\n            {...customStep}\n          />\n        )}\n        {hasSummary && (\n          <HvButton\n            variant=\"secondarySubtle\"\n            className={classes.buttonWidth}\n            classes={{\n              root: classes.rootSummaryButton,\n            }}\n            onClick={toggleSummary}\n            startIcon={<Report />}\n          >\n            {`${labels.summary ?? \"Summary\"}`}\n          </HvButton>\n        )}\n      </div>\n    </HvDialogTitle>\n  );\n};\n"],"names":["switchTabState","state","currentTab","index","valid","touched","HvWizardTitle","title","hasSummary","labels","classes","classesProp","customStep","context","setSummary","tab","setTab","useContext","HvWizardContext","useClasses","steps","setSteps","useState","useEffect","toggleSummary","prevValue","contextArray","Object","entries","length","updatedSteps","map","childState","name","onClick","jsx","HvDialogTitle","headerContainer","messageContainer","jsxs","titleContainer","HvTypography","HvStepNavigation","stepContainer","xs","sm","md","lg","xl","HvButton","buttonWidth","root","rootSummaryButton","Report","summary"],"mappings":";;;;;;;;;AAoCA,MAAMA,iBAAiBA,CAACC,OAAOC,YAAYC,UAAU;AACnD,MAAIA,UAAUD;AAAmB,WAAA;AACjC,MAAID,MAAMG;AAAc,WAAA;AACxB,MAAIH,MAAMG,UAAU;AAAa,WAAA;AAC7BH,MAAAA,MAAMI,WAAWJ,MAAMG,UAAU;AAAc,WAAA;AAG5C,SAAA;AACT;AAEO,MAAME,gBAAgBA,CAAC;AAAA,EAC5BC;AAAAA,EACAC,aAAa;AAAA,EACbC,SAAS,CAAC;AAAA,EACVC,SAASC;AAAAA,EACTC,aAAa,CAAC;AACI,MAAM;AAClB,QAAA;AAAA,IAAEC;AAAAA,IAASC;AAAAA,IAAYC;AAAAA,IAAKC;AAAAA,EAAAA,IAAWC,MAAAA,WAAWC,cAAAA,OAAe;AAEjE,QAAA;AAAA,IAAER;AAAAA,EAAAA,IAAYS,mBAAAA,WAAWR,WAAW;AAE1C,QAAM,CAACS,OAAOC,QAAQ,IAAIC,MAAAA,SAAwB,CAAE,CAAA;AAEpDC,QAAAA,UAAU,MAAM;AACd,WAAO,MAAM;AACXT,iBAAW,KAAK;AAAA,IAAA;AAAA,EAClB,GACC,CAACA,UAAU,CAAC;AAEf,QAAMU,gBAAgBA,MAAM;AACdC,eAAAA,CAAAA,cAAc,CAACA,SAAS;AAAA,EAAA;AAGtCF,QAAAA,UAAU,MAAM;AACRG,UAAAA,eAAeC,OAAOC,QAAQf,OAAO;AAE3C,QAAIa,aAAaG,QAAQ;AACjBC,YAAAA,eAA8BJ,aAAaK,IAC/C,CAAC,CAAGC,EAAAA,UAAU,GAAG7B,UAAU;AAClB,eAAA;AAAA,UACLI,QAAOyB,yCAAYC,SAAS,GAAE9B,QAAQ,CAAE;AAAA,UACxCF,OAAOD,eAAegC,YAAYjB,KAAKZ,KAAK;AAAA,UAC5C+B,SAASA,MAAMlB,OAAOb,KAAK;AAAA,QAAA;AAAA,MAC7B,CAEJ;AAEAkB,eAASS,YAAY;AAAA,IACvB;AAAA,EACC,GAAA,CAACjB,SAASE,KAAKC,MAAM,CAAC;AAEzB,SACGmB,2BAAAA,IAAAC,eAAAA,eAAA,EACC,WAAW1B,QAAQ2B,iBACnB,SAAS;AAAA,IACPC,kBAAkB5B,QAAQ4B;AAAAA,EAAAA,GAG5B,UAAAC,2BAAAA,KAAC,OAAI,EAAA,WAAW7B,QAAQ8B,gBACrBjC,UAAAA;AAAAA,IAAAA,wCACEkC,eAAa,cAAA,EAAA,SAAQ,UAAS,WAAU,MACtClC,UACH,OAAA;AAAA,IAED,CAAC,CAACa,MAAMS,yCACNa,eACC,kBAAA,EAAA,WAAWhC,QAAQiC,eACnB,OACA,MAAK,WACL,UAAS,MACT,OAAO;AAAA,MACLC,IAAI;AAAA,MACJC,IAAI;AAAA,MACJC,IAAI;AAAA,MACJC,IAAI;AAAA,MACJC,IAAI;AAAA,IAAA,GAEFpC,GAAAA,WAEP,CAAA;AAAA,IACAJ,6CACEyC,eACC,UAAA,EAAA,SAAQ,mBACR,WAAWvC,QAAQwC,aACnB,SAAS;AAAA,MACPC,MAAMzC,QAAQ0C;AAAAA,IAChB,GACA,SAAS5B,eACT,WAAWW,2BAAA,IAACkB,6BAEV,UAAE5C,GAAAA,OAAO6C,WAAW,SAAU,GAClC,CAAA;AAAA,EAAA,EAEJ,CAAA,EACF,CAAA;AAEJ;;;"}

package/dist/esm/components/Flow/Background/Background.js

@@ -1,14 +1,11 @@
+import { jsx } from "@emotion/react/jsx-runtime";
 import { Background } from "reactflow";
 import { getColor, theme } from "@hitachivantara/uikit-styles";
-import { jsx } from "@emotion/react/jsx-runtime";
 const HvFlowBackground = ({
   color = "secondary",
   ...others
 }) => {
-  return /* @__PURE__ */ jsx(Background, {
-    color: getColor(color, theme.colors.secondary),
-    ...others
-  });
+  return /* @__PURE__ */ jsx(Background, { color: getColor(color, theme.colors.secondary), ...others });
 };
 export {
   HvFlowBackground

package/dist/esm/components/Flow/Background/Background.js.map

@@ -1 +1 @@
-{"version":3,"file":"Background.js","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,6BACGC,YAAU;AAAA,IAACF,OAAOG,SAASH,OAAOI,MAAMC,OAAOC,SAAS;AAAA,IAAE,GAAKL;AAAAA,EAAAA,CAAS;AAE7E;"}
+{"version":3,"file":"Background.js","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","getColor","theme","colors","secondary"],"mappings":";;;AASO,MAAMA,mBAAmBA,CAAC;AAAA,EAC/BC,QAAQ;AAAA,EACR,GAAGC;AACkB,MAAM;AAEzB,SAAA,oBAAC,YAAW,EAAA,OAAOC,SAASF,OAAOG,MAAMC,OAAOC,SAAS,GAAG,GAAIJ,OAAU,CAAA;AAE9E;"}

package/dist/esm/components/Flow/Controls/Controls.js

@@ -1,8 +1,8 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useStore, useStoreApi, useReactFlow, Panel } from "reactflow";
 import { shallow } from "zustand/shallow";
 import { useLabels, HvMultiButton, HvButton } from "@hitachivantara/uikit-react-core";
 import { ZoomIn, ZoomOut, Focus, Unlock, Lock } from "@hitachivantara/uikit-react-icons";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 const DEFAULT_LABELS = {
   fitView: "Fit view",
   zoomIn: "Zoom in",
@@ -61,46 +61,13 @@ const HvFlowControls = ({
     });
     onInteractiveChange == null ? void 0 : onInteractiveChange(!isInteractive);
   };
-  return /* @__PURE__ */ jsx(Panel, {
-    position,
-    ...others,
-    children: /* @__PURE__ */ jsxs(HvMultiButton, {
-      vertical: orientation === "vertical",
-      children: [!hideZoom && /* @__PURE__ */ jsx(HvButton, {
-        icon: true,
-        title: labels == null ? void 0 : labels.zoomIn,
-        onClick: handleZoomIn,
-        disabled: maxZoomReached,
-        children: /* @__PURE__ */ jsx(ZoomIn, {
-          role: "none"
-        })
-      }), !hideZoom && /* @__PURE__ */ jsx(HvButton, {
-        icon: true,
-        title: labels == null ? void 0 : labels.zoomOut,
-        onClick: handleZoomOut,
-        disabled: minZoomReached,
-        children: /* @__PURE__ */ jsx(ZoomOut, {
-          role: "none"
-        })
-      }), !hideFitView && /* @__PURE__ */ jsx(HvButton, {
-        icon: true,
-        title: labels == null ? void 0 : labels.fitView,
-        onClick: handleFitView,
-        children: /* @__PURE__ */ jsx(Focus, {
-          role: "none"
-        })
-      }), !hideInteractive && /* @__PURE__ */ jsx(HvButton, {
-        icon: true,
-        title: labels == null ? void 0 : labels.interactive,
-        onClick: handleInteractive,
-        children: isInteractive ? /* @__PURE__ */ jsx(Unlock, {
-          role: "none"
-        }) : /* @__PURE__ */ jsx(Lock, {
-          role: "none"
-        })
-      }), children]
-    })
-  });
+  return /* @__PURE__ */ jsx(Panel, { position, ...others, children: /* @__PURE__ */ jsxs(HvMultiButton, { vertical: orientation === "vertical", children: [
+    !hideZoom && /* @__PURE__ */ jsx(HvButton, { icon: true, title: labels == null ? void 0 : labels.zoomIn, onClick: handleZoomIn, disabled: maxZoomReached, children: /* @__PURE__ */ jsx(ZoomIn, { role: "none" }) }),
+    !hideZoom && /* @__PURE__ */ jsx(HvButton, { icon: true, title: labels == null ? void 0 : labels.zoomOut, onClick: handleZoomOut, disabled: minZoomReached, children: /* @__PURE__ */ jsx(ZoomOut, { role: "none" }) }),
+    !hideFitView && /* @__PURE__ */ jsx(HvButton, { icon: true, title: labels == null ? void 0 : labels.fitView, onClick: handleFitView, children: /* @__PURE__ */ jsx(Focus, { role: "none" }) }),
+    !hideInteractive && /* @__PURE__ */ jsx(HvButton, { icon: true, title: labels == null ? void 0 : labels.interactive, onClick: handleInteractive, children: isInteractive ? /* @__PURE__ */ jsx(Unlock, { role: "none" }) : /* @__PURE__ */ jsx(Lock, { role: "none" }) }),
+    children
+  ] }) });
 };
 export {
   HvFlowControls

package/dist/esm/components/Flow/Controls/Controls.js.map

@@ -1 +1 @@
-{"version":3,"file":"Controls.js","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,SACxD7B,UACA8B,OACF;AACA,QAAMC,QAAQC;AACR,QAAA;AAAA,IAAEnC;AAAAA,IAAQC;AAAAA,IAASF;AAAAA,MAAYqC,aAAa;AAE5Cf,QAAAA,SAASgB,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,6BACGsC,OAAK;AAAA,IAACjB;AAAAA,IAAmB,GAAKK;AAAAA,IAAMD,+BAClCc,eAAa;AAAA,MAACC,UAAUlB,gBAAgB;AAAA,MAAWG,WACjD,CAACL,gCACCqB,UAAQ;AAAA,QACPC,MAAI;AAAA,QACJC,OAAO3B,iCAAQrB;AAAAA,QACfiD,SAASX;AAAAA,QACTY,UAAUtC;AAAAA,QAAekB,8BAExBqB,QAAM;AAAA,UAACC,MAAK;AAAA,QAAA,CAAQ;AAAA,MACb,CAAA,GAEX,CAAC3B,gCACCqB,UAAQ;AAAA,QACPC,MAAI;AAAA,QACJC,OAAO3B,iCAAQpB;AAAAA,QACfgD,SAASV;AAAAA,QACTW,UAAUzC;AAAAA,QAAeqB,8BAExBuB,SAAO;AAAA,UAACD,MAAK;AAAA,QAAA,CAAQ;AAAA,MACd,CAAA,GAEX,CAAC5B,mCACCsB,UAAQ;AAAA,QAACC,MAAI;AAAA,QAACC,OAAO3B,iCAAQtB;AAAAA,QAASkD,SAAST;AAAAA,QAAcV,8BAC3DwB,OAAK;AAAA,UAACF,MAAK;AAAA,QAAA,CAAQ;AAAA,MACZ,CAAA,GAEX,CAAC7B,uCACCuB,UAAQ;AAAA,QACPC,MAAI;AAAA,QACJC,OAAO3B,iCAAQnB;AAAAA,QACf+C,SAASR;AAAAA,QAAkBX,UAE1BzB,gBAAgBkD,oBAACC,QAAM;AAAA,UAACJ,MAAK;AAAA,QAAA,CAAQ,IAAIG,oBAACE,MAAI;AAAA,UAACL,MAAK;AAAA,QAAA,CAAQ;AAAA,MACrD,CAAA,GAEXtB,QAAQ;AAAA,IAAA,CACI;AAAA,EAAA,CACV;AAEX;"}
+{"version":3,"file":"Controls.js","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"],"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,SACxD7B,UACA8B,OACF;AACA,QAAMC,QAAQC;AACR,QAAA;AAAA,IAAEnC;AAAAA,IAAQC;AAAAA,IAASF;AAAAA,MAAYqC,aAAa;AAE5Cf,QAAAA,SAASgB,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,SAAA,oBAAC,SAAM,UAAwB0B,GAAAA,QAC7B,UAAC,qBAAA,eAAA,EAAc,UAAUJ,gBAAgB,YACtC,UAAA;AAAA,IAAA,CAACF,YACC,oBAAA,UAAA,EACC,MAAI,MACJ,OAAOJ,iCAAQrB,QACf,SAASsC,cACT,UAAU1B,gBAEV,UAAA,oBAAC,QAAO,EAAA,MAAK,OAAM,CAAA,GACrB;AAAA,IAED,CAACa,YACA,oBAAC,UACC,EAAA,MAAI,MACJ,OAAOJ,iCAAQpB,SACf,SAASsC,eACT,UAAU9B,gBAEV,8BAAC,SAAQ,EAAA,MAAK,OAAM,CAAA,GACtB;AAAA,IAED,CAACe,eACC,oBAAA,UAAA,EAAS,MAAI,MAAC,OAAOH,iCAAQtB,SAAS,SAASyC,eAC9C,UAAA,oBAAC,OAAM,EAAA,MAAK,OAAM,CAAA,GACpB;AAAA,IAED,CAACjB,mBACC,oBAAA,UAAA,EACC,MAAI,MACJ,OAAOF,iCAAQnB,aACf,SAASuC,mBAERpC,UAAgB,gBAAA,oBAAC,UAAO,MAAK,OAAA,CAAM,IAAO,oBAAA,MAAA,EAAK,MAAK,OAAA,CAAS,EAChE,CAAA;AAAA,IAEDyB;AAAAA,EAAAA,EACH,CAAA,EACF,CAAA;AAEJ;"}

package/dist/esm/components/Flow/DroppableFlow.js

@@ -1,3 +1,4 @@
+import { jsx } from "@emotion/react/jsx-runtime";
 import { useState, useCallback } from "react";
 import ReactFlow, { useReactFlow, addEdge, applyNodeChanges, applyEdgeChanges } from "reactflow";
 import "reactflow/dist/style.css";
@@ -6,7 +7,6 @@ import { uid } from "uid";
 import { useUniqueId } from "@hitachivantara/uikit-react-core";
 import { useClasses } from "./Flow.styles.js";
 import { staticClasses } from "./Flow.styles.js";
-import { jsx } from "@emotion/react/jsx-runtime";
 import { useFlowContext } from "./FlowContext/FlowContext.js";
 const HvDroppableFlow = ({
   id,
@@ -81,21 +81,7 @@ const HvDroppableFlow = ({
     handleFlowChange(nodes, eds);
     onEdgesChangeProp == null ? void 0 : onEdgesChangeProp(changes);
   }, [edges, handleFlowChange, nodes, onEdgesChangeProp]);
-  return /* @__PURE__ */ jsx("div", {
-    id: elementId,
-    ref: setNodeRef,
-    className: cx(classes.root, className),
-    children: /* @__PURE__ */ jsx(ReactFlow, {
-      nodes,
-      edges,
-      nodeTypes,
-      onNodesChange: handleNodesChange,
-      onEdgesChange: handleEdgesChange,
-      onConnect: handleConnect,
-      ...others,
-      children
-    })
-  });
+  return /* @__PURE__ */ jsx("div", { id: elementId, ref: setNodeRef, className: cx(classes.root, className), children: /* @__PURE__ */ jsx(ReactFlow, { nodes, edges, nodeTypes, onNodesChange: handleNodesChange, onEdgesChange: handleEdgesChange, onConnect: handleConnect, ...others, children }) });
 };
 export {
   HvDroppableFlow,

package/dist/esm/components/Flow/DroppableFlow.js.map

@@ -1 +1 @@
-{"version":3,"file":"DroppableFlow.js","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","onDragEnd","handleFlowChange","eds","isDragging","find","node","dragging","handleConnect","connection","addEdge","handleNodesChange","changes","applyNodeChanges","handleEdgesChange","applyEdgeChanges","ref","root","ReactFlow"],"mappings":";;;;;;;;;;AA+CO,MAAMA,kBAAkBA,CAAC;AAAA,EAC9BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AAAAA,EACTC,OAAOC,eAAe,CAAE;AAAA,EACxBC,OAAOC,eAAe,CAAE;AAAA,EACxBC,WAAWC;AAAAA,EACXC,eAAeC;AAAAA,EACfC,eAAeC;AAAAA,EACf,GAAGC;AACiB,MAAM;AACpB,QAAA;AAAA,IAAEZ;AAAAA,IAASa;AAAAA,EAAAA,IAAOC,WAAWb,WAAW;AAExCc,QAAAA,YAAYC,YAAYpB,IAAI,QAAQ;AAE1C,QAAMqB,oBAAoBC;AAEpB,QAAA;AAAA,IAAEC;AAAAA,MAAcC,eAAe;AAErC,QAAM,CAAClB,OAAOmB,QAAQ,IAAIC,SAASnB,YAAY;AAC/C,QAAM,CAACC,OAAOmB,QAAQ,IAAID,SAASjB,YAAY;AAEzC,QAAA;AAAA,IAAEmB;AAAAA,MAAeC,aAAa;AAAA,IAClC7B,IAAImB;AAAAA,EAAAA,CACL;AAEKW,QAAAA,gBAAgBC,YACpB,CAACC,UAAwB;;AACvB,QAAIA,MAAMC,QAAQD,MAAMC,KAAKjC,OAAOmB,WAAW;AAC7C,YAAMe,OAAOF,MAAMG,OAAOnC,GAAGoC,SAAS;AAGhCC,YAAAA,WAAWhB,kBAAkBiB,QAAQ;AAAA,QACzCC,MAAIP,iBAAMG,OAAOK,KAAKC,YAAlBT,mBAA2BU,WAA3BV,mBAAmCO,MAAK,KAAKP,MAAMC,KAAKU,KAAKC;AAAAA,QACjEC,MAAIb,iBAAMG,OAAOK,KAAKC,YAAlBT,mBAA2BU,WAA3BV,mBAAmCa,MAAK,KAAKb,MAAMC,KAAKU,KAAKG;AAAAA,MAAAA,CAClE;AAED,YAAMC,UAAsB;AAAA,QAC1B/C,IAAIgD,IAAI;AAAA,QACRX;AAAAA,QACAG,MAAM,CAAC;AAAA,QACPN;AAAAA,MAAAA;AAGFT,eAAUwB,CAAQA,QAAAA,IAAIC,OAAOH,OAAO,CAAC;AAAA,IACvC;AAAA,EAEF,GAAA,CAAC5B,WAAWE,mBAAmBI,QAAQ,CACzC;AAEc,gBAAA;AAAA,IACZ0B,WAAWrB;AAAAA,EAAAA,CACZ;AAED,QAAMsB,mBAAmBrB,YACvB,CACEkB,KACAI,QACG;AAGH,UAAMC,aAAaL,IAAIM,KAAMC,CAAAA,SAASA,KAAKC,QAAQ;AACnD,QAAI,CAACH,YAAY;AACfnD,mDAAe8C,KAAKI;AAAAA,IACtB;AAAA,EAAA,GAEF,CAAClD,YAAY,CACf;AAEMuD,QAAAA,gBAAgB3B,YACpB,CAAC4B,eAA2B;AACpBN,UAAAA,MAAMO,QAAQD,YAAYnD,KAAK;AACrCmB,aAAS0B,GAAG;AAEZD,qBAAiB9C,OAAO+C,GAAG;AAC3B1C,mDAAgBgD;AAAAA,KAElB,CAACnD,OAAO4C,kBAAkB9C,OAAOK,aAAa,CAChD;AAEMkD,QAAAA,oBAAoB9B,YACxB,CAAC+B,YAA0B;AACnBb,UAAAA,MAAMc,iBAAiBD,SAASxD,KAAK;AAC3CmB,aAASwB,GAAG;AAEZG,qBAAiBH,KAAKzC,KAAK;AAC3BK,2DAAoBiD;AAAAA,KAEtB,CAACtD,OAAO4C,kBAAkB9C,OAAOO,iBAAiB,CACpD;AAEMmD,QAAAA,oBAAoBjC,YACxB,CAAC+B,YAA0B;AACnBT,UAAAA,MAAMY,iBAAiBH,SAAStD,KAAK;AAC3CmB,aAAS0B,GAAG;AAEZD,qBAAiB9C,OAAO+C,GAAG;AAC3BtC,2DAAoB+C;AAAAA,KAEtB,CAACtD,OAAO4C,kBAAkB9C,OAAOS,iBAAiB,CACpD;AAEA,6BACE,OAAA;AAAA,IACEf,IAAImB;AAAAA,IACJ+C,KAAKtC;AAAAA,IACL3B,WAAWgB,GAAGb,QAAQ+D,MAAMlE,SAAS;AAAA,IAAEC,8BAEtCkE,WAAS;AAAA,MACR9D;AAAAA,MACAE;AAAAA,MACAe;AAAAA,MACAX,eAAeiD;AAAAA,MACf/C,eAAekD;AAAAA,MACftD,WAAWgD;AAAAA,MAAc,GACrB1C;AAAAA,MAAMd;AAAAA,IAAAA,CAGD;AAAA,EAAA,CACR;AAET;"}
+{"version":3,"file":"DroppableFlow.js","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","onDragEnd","handleFlowChange","eds","isDragging","find","node","dragging","handleConnect","connection","addEdge","handleNodesChange","changes","applyNodeChanges","handleEdgesChange","applyEdgeChanges","root"],"mappings":";;;;;;;;;;AA+CO,MAAMA,kBAAkBA,CAAC;AAAA,EAC9BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AAAAA,EACTC,OAAOC,eAAe,CAAE;AAAA,EACxBC,OAAOC,eAAe,CAAE;AAAA,EACxBC,WAAWC;AAAAA,EACXC,eAAeC;AAAAA,EACfC,eAAeC;AAAAA,EACf,GAAGC;AACiB,MAAM;AACpB,QAAA;AAAA,IAAEZ;AAAAA,IAASa;AAAAA,EAAAA,IAAOC,WAAWb,WAAW;AAExCc,QAAAA,YAAYC,YAAYpB,IAAI,QAAQ;AAE1C,QAAMqB,oBAAoBC;AAEpB,QAAA;AAAA,IAAEC;AAAAA,MAAcC,eAAe;AAErC,QAAM,CAAClB,OAAOmB,QAAQ,IAAIC,SAASnB,YAAY;AAC/C,QAAM,CAACC,OAAOmB,QAAQ,IAAID,SAASjB,YAAY;AAEzC,QAAA;AAAA,IAAEmB;AAAAA,MAAeC,aAAa;AAAA,IAClC7B,IAAImB;AAAAA,EAAAA,CACL;AAEKW,QAAAA,gBAAgBC,YACpB,CAACC,UAAwB;;AACvB,QAAIA,MAAMC,QAAQD,MAAMC,KAAKjC,OAAOmB,WAAW;AAC7C,YAAMe,OAAOF,MAAMG,OAAOnC,GAAGoC,SAAS;AAGhCC,YAAAA,WAAWhB,kBAAkBiB,QAAQ;AAAA,QACzCC,MAAIP,iBAAMG,OAAOK,KAAKC,YAAlBT,mBAA2BU,WAA3BV,mBAAmCO,MAAK,KAAKP,MAAMC,KAAKU,KAAKC;AAAAA,QACjEC,MAAIb,iBAAMG,OAAOK,KAAKC,YAAlBT,mBAA2BU,WAA3BV,mBAAmCa,MAAK,KAAKb,MAAMC,KAAKU,KAAKG;AAAAA,MAAAA,CAClE;AAED,YAAMC,UAAsB;AAAA,QAC1B/C,IAAIgD,IAAI;AAAA,QACRX;AAAAA,QACAG,MAAM,CAAC;AAAA,QACPN;AAAAA,MAAAA;AAGFT,eAAUwB,CAAQA,QAAAA,IAAIC,OAAOH,OAAO,CAAC;AAAA,IACvC;AAAA,EAEF,GAAA,CAAC5B,WAAWE,mBAAmBI,QAAQ,CACzC;AAEc,gBAAA;AAAA,IACZ0B,WAAWrB;AAAAA,EAAAA,CACZ;AAED,QAAMsB,mBAAmBrB,YACvB,CACEkB,KACAI,QACG;AAGH,UAAMC,aAAaL,IAAIM,KAAMC,CAAAA,SAASA,KAAKC,QAAQ;AACnD,QAAI,CAACH,YAAY;AACfnD,mDAAe8C,KAAKI;AAAAA,IACtB;AAAA,EAAA,GAEF,CAAClD,YAAY,CACf;AAEMuD,QAAAA,gBAAgB3B,YACpB,CAAC4B,eAA2B;AACpBN,UAAAA,MAAMO,QAAQD,YAAYnD,KAAK;AACrCmB,aAAS0B,GAAG;AAEZD,qBAAiB9C,OAAO+C,GAAG;AAC3B1C,mDAAgBgD;AAAAA,KAElB,CAACnD,OAAO4C,kBAAkB9C,OAAOK,aAAa,CAChD;AAEMkD,QAAAA,oBAAoB9B,YACxB,CAAC+B,YAA0B;AACnBb,UAAAA,MAAMc,iBAAiBD,SAASxD,KAAK;AAC3CmB,aAASwB,GAAG;AAEZG,qBAAiBH,KAAKzC,KAAK;AAC3BK,2DAAoBiD;AAAAA,KAEtB,CAACtD,OAAO4C,kBAAkB9C,OAAOO,iBAAiB,CACpD;AAEMmD,QAAAA,oBAAoBjC,YACxB,CAAC+B,YAA0B;AACnBT,UAAAA,MAAMY,iBAAiBH,SAAStD,KAAK;AAC3CmB,aAAS0B,GAAG;AAEZD,qBAAiB9C,OAAO+C,GAAG;AAC3BtC,2DAAoB+C;AAAAA,KAEtB,CAACtD,OAAO4C,kBAAkB9C,OAAOS,iBAAiB,CACpD;AAGE,SAAA,oBAAC,OACC,EAAA,IAAII,WACJ,KAAKS,YACL,WAAWX,GAAGb,QAAQ8D,MAAMjE,SAAS,GAErC,UAAA,oBAAC,aACC,OACA,OACA,WACA,eAAe4D,mBACf,eAAeG,mBACf,WAAWN,eACX,GAAI1C,QAEHd,SACH,CAAA,EACF,CAAA;AAEJ;"}

package/dist/esm/components/Flow/Flow.js

@@ -1,9 +1,9 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useState } from "react";
 import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, DragOverlay } from "@dnd-kit/core";
 import { restrictToWindowEdges } from "@dnd-kit/modifiers";
 import { ReactFlowProvider } from "reactflow";
 import { HvDroppableFlow } from "./DroppableFlow.js";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { HvFlowProvider } from "./FlowContext/FlowContext.js";
 import { HvFlowSidebarGroupItem } from "./Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.js";
 const HvFlow = ({
@@ -24,28 +24,11 @@ const HvFlow = ({
   const handleDragEnd = () => {
     setDraggingLabel(void 0);
   };
-  return /* @__PURE__ */ jsx(ReactFlowProvider, {
-    children: /* @__PURE__ */ jsx(HvFlowProvider, {
-      nodeGroups,
-      nodeTypes,
-      children: /* @__PURE__ */ jsxs(DndContext, {
-        onDragStart: handleDragStart,
-        onDragEnd: handleDragEnd,
-        sensors,
-        modifiers: [restrictToWindowEdges],
-        ...dndContextProps,
-        children: [/* @__PURE__ */ jsx(HvDroppableFlow, {
-          ...others
-        }), sidebar, /* @__PURE__ */ jsx(DragOverlay, {
-          modifiers: [restrictToWindowEdges],
-          children: draggingLabel ? /* @__PURE__ */ jsx(HvFlowSidebarGroupItem, {
-            label: draggingLabel,
-            isDragging: true
-          }) : null
-        })]
-      })
-    })
-  });
+  return /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(HvFlowProvider, { nodeGroups, nodeTypes, children: /* @__PURE__ */ jsxs(DndContext, { onDragStart: handleDragStart, onDragEnd: handleDragEnd, sensors, modifiers: [restrictToWindowEdges], ...dndContextProps, children: [
+    /* @__PURE__ */ jsx(HvDroppableFlow, { ...others }),
+    sidebar,
+    /* @__PURE__ */ jsx(DragOverlay, { modifiers: [restrictToWindowEdges], children: draggingLabel ? /* @__PURE__ */ jsx(HvFlowSidebarGroupItem, { label: draggingLabel, isDragging: true }) : null })
+  ] }) }) });
 };
 export {
   HvFlow

package/dist/esm/components/Flow/Flow.js.map

@@ -1 +1 @@
-{"version":3,"file":"Flow.js","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,SAASC,MAAS;AAE5D,QAAMC,UAAUC,WACdC,UAAUC,aAAa,GACvBD,UAAUE,cAAc,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,6BACGc,mBAAiB;AAAA,IAAAC,8BACfC,gBAAc;AAAA,MAACvB;AAAAA,MAAwBD;AAAAA,MAAqBuB,+BAC1DE,YAAU;AAAA,QACTC,aAAaZ;AAAAA,QACba,WAAWN;AAAAA,QACXZ;AAAAA,QACAmB,WAAW,CAACC,qBAAqB;AAAA,QAAE,GAC/B1B;AAAAA,QAAeoB,UAAA,CAEnBO,oBAACC,iBAAe;AAAA,UAAA,GAAK3B;AAAAA,QAAAA,CAAS,GAC7BF,SACD4B,oBAACE,aAAW;AAAA,UAACJ,WAAW,CAACC,qBAAqB;AAAA,UAAEN,UAC7ClB,gBACCyB,oBAACG,wBAAsB;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.js","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","restrictToWindowEdges"],"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,SAASC,MAAS;AAE5D,QAAMC,UAAUC,WACdC,UAAUC,aAAa,GACvBD,UAAUE,cAAc,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,6BACG,mBACC,EAAA,UAAA,oBAAC,kBAAe,YAAwB,WACtC,+BAAC,YACC,EAAA,aAAaM,iBACb,WAAWO,eACX,SACA,WAAW,CAACC,qBAAqB,GACjC,GAAInB,iBAEJ,UAAA;AAAA,IAAC,oBAAA,iBAAA,EAAgB,GAAIC,QAAO;AAAA,IAC3BF;AAAAA,IACA,oBAAA,aAAA,EAAY,WAAW,CAACoB,qBAAqB,GAC3CjB,UAAAA,gBACE,oBAAA,wBAAA,EAAuB,OAAOA,eAAe,YAAU,KAAA,CAAA,IACtD,MACN;AAAA,EAAA,GACF,GACF,EACF,CAAA;AAEJ;"}

package/dist/esm/components/Flow/FlowContext/FlowContext.js

@@ -1,5 +1,5 @@
-import { createContext, useState, useMemo, useContext } from "react";
 import { jsx } from "@emotion/react/jsx-runtime";
+import { createContext, useState, useMemo, useContext } from "react";
 const HvFlowContext = createContext({});
 const HvFlowProvider = ({
   nodeGroups,
@@ -13,10 +13,7 @@ const HvFlowProvider = ({
     expandedNodeGroups,
     setExpandedNodeGroups
   }), [nodeGroups, nodeTypes, expandedNodeGroups]);
-  return /* @__PURE__ */ jsx(HvFlowContext.Provider, {
-    value,
-    children
-  });
+  return /* @__PURE__ */ jsx(HvFlowContext.Provider, { value, children });
 };
 const useFlowContext = () => useContext(HvFlowContext);
 export {

package/dist/esm/components/Flow/FlowContext/FlowContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlowContext.js","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,cAAkC,EAAE;AAW1D,MAAMC,iBAAiBA,CAAC;AAAA,EAC7BC;AAAAA,EACAC;AAAAA,EACAC;AACmB,MAAM;AACzB,QAAM,CAACC,oBAAoBC,qBAAqB,IAAIC,SAAmB,CAAE,CAAA;AAEnEC,QAAAA,QAAQC,QACZ,OAAO;AAAA,IACLN;AAAAA,IACAD;AAAAA,IACAG;AAAAA,IACAC;AAAAA,EAEF,IAAA,CAACJ,YAAYC,WAAWE,kBAAkB,CAC5C;AAGEK,SAAAA,oBAACX,cAAcY,UAAQ;AAAA,IAACH;AAAAA,IAAaJ;AAAAA,EAAAA,CAAmC;AAE5E;AAEaQ,MAAAA,iBAAiBA,MAAMC,WAAWd,aAAa;"}
+{"version":3,"file":"FlowContext.js","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","useFlowContext","useContext"],"mappings":";;AAsBaA,MAAAA,gBAAgBC,cAAkC,EAAE;AAW1D,MAAMC,iBAAiBA,CAAC;AAAA,EAC7BC;AAAAA,EACAC;AAAAA,EACAC;AACmB,MAAM;AACzB,QAAM,CAACC,oBAAoBC,qBAAqB,IAAIC,SAAmB,CAAE,CAAA;AAEnEC,QAAAA,QAAQC,QACZ,OAAO;AAAA,IACLN;AAAAA,IACAD;AAAAA,IACAG;AAAAA,IACAC;AAAAA,EAEF,IAAA,CAACJ,YAAYC,WAAWE,kBAAkB,CAC5C;AAEA,SACG,oBAAA,cAAc,UAAd,EAAuB,OAAeD,SAAS,CAAA;AAEpD;AAEaM,MAAAA,iBAAiBA,MAAMC,WAAWZ,aAAa;"}

package/dist/esm/components/Flow/Minimap/Minimap.js

@@ -1,8 +1,8 @@
+import { jsx } from "@emotion/react/jsx-runtime";
 import { MiniMap } from "reactflow";
 import { getColor, theme } from "@hitachivantara/uikit-styles";
 import { useClasses } from "./Minimap.styles.js";
 import { staticClasses } from "./Minimap.styles.js";
-import { jsx } from "@emotion/react/jsx-runtime";
 const HvFlowMinimap = ({
   nodeColor = "atmo4",
   maskColor = "atmo3",
@@ -16,14 +16,7 @@ const HvFlowMinimap = ({
     classes,
     cx
   } = useClasses(classesProp);
-  return /* @__PURE__ */ jsx(MiniMap, {
-    className: cx(classes.root, className),
-    nodeColor: typeof nodeColor === "string" ? getColor(nodeColor, theme.colors.atmo4) : nodeColor,
-    nodeStrokeColor: typeof nodeStrokeColor === "string" ? getColor(nodeStrokeColor, theme.colors.atmo4) : nodeStrokeColor,
-    maskColor: getColor(maskColor, theme.colors.atmo3),
-    maskStrokeColor: getColor(maskStrokeColor, theme.colors.atmo3),
-    ...others
-  });
+  return /* @__PURE__ */ jsx(MiniMap, { className: cx(classes.root, className), nodeColor: typeof nodeColor === "string" ? getColor(nodeColor, theme.colors.atmo4) : nodeColor, nodeStrokeColor: typeof nodeStrokeColor === "string" ? getColor(nodeStrokeColor, theme.colors.atmo4) : nodeStrokeColor, maskColor: getColor(maskColor, theme.colors.atmo3), maskStrokeColor: getColor(maskStrokeColor, theme.colors.atmo3), ...others });
 };
 export {
   HvFlowMinimap,

package/dist/esm/components/Flow/Minimap/Minimap.js.map

@@ -1 +1 @@
-{"version":3,"file":"Minimap.js","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,WAAWJ,WAAW;AAE9C,6BACGK,SAAO;AAAA,IACNJ,WAAWE,GAAGJ,QAAQO,MAAML,SAAS;AAAA,IACrCN,WACE,OAAOA,cAAc,WACjBY,SAASZ,WAAWa,MAAMC,OAAOC,KAAK,IACtCf;AAAAA,IAENG,iBACE,OAAOA,oBAAoB,WACvBS,SAAST,iBAAiBU,MAAMC,OAAOC,KAAK,IAC5CZ;AAAAA,IAENF,WAAWW,SAASX,WAAWY,MAAMC,OAAOE,KAAK;AAAA,IACjDd,iBAAiBU,SAASV,iBAAiBW,MAAMC,OAAOE,KAAK;AAAA,IAAE,GAC3DT;AAAAA,EAAAA,CACL;AAEL;"}
+{"version":3,"file":"Minimap.js","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","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,WAAWJ,WAAW;AAG5C,SAAA,oBAAC,WACC,WAAWG,GAAGJ,QAAQM,MAAMJ,SAAS,GACrC,WACE,OAAON,cAAc,WACjBW,SAASX,WAAWY,MAAMC,OAAOC,KAAK,IACtCd,WAEN,iBACE,OAAOG,oBAAoB,WACvBQ,SAASR,iBAAiBS,MAAMC,OAAOC,KAAK,IAC5CX,iBAEN,WAAWQ,SAASV,WAAWW,MAAMC,OAAOE,KAAK,GACjD,iBAAiBJ,SAAST,iBAAiBU,MAAMC,OAAOE,KAAK,GAC7D,GAAIR,OACJ,CAAA;AAEN;"}

package/dist/esm/components/Flow/Sidebar/Sidebar.js

@@ -1,3 +1,4 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useMemo, useState } from "react";
 import debounce from "lodash/debounce";
 import { useDroppable } from "@dnd-kit/core";
@@ -6,7 +7,6 @@ import { Add } from "@hitachivantara/uikit-react-icons";
 import { useClasses } from "./Sidebar.styles.js";
 import { staticClasses } from "./Sidebar.styles.js";
 import { buildGroups } from "./utils.js";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { HvFlowSidebarGroup } from "./SidebarGroup/SidebarGroup.js";
 import { useFlowContext } from "../FlowContext/FlowContext.js";
 const DEFAULT_LABELS = {
@@ -59,59 +59,25 @@ const HvFlowSidebar = ({
     setExpandedNodeGroups == null ? void 0 : setExpandedNodeGroups(value ? Object.keys(gps) : []);
   };
   const handleDebouncedSearch = debounce(handleSearch, 500);
-  return /* @__PURE__ */ jsx(HvDrawer, {
-    BackdropComponent: void 0,
-    variant: "persistent",
-    classes: {
-      paper: classes.drawerPaper
-    },
-    anchor,
-    buttonTitle,
-    ...others,
-    children: /* @__PURE__ */ jsxs("div", {
-      id: drawerElementId,
-      ref: setNodeRef,
-      children: [/* @__PURE__ */ jsxs("div", {
-        className: classes.titleContainer,
-        children: [/* @__PURE__ */ jsx(Add, {
-          role: "none"
-        }), /* @__PURE__ */ jsx(HvTypography, {
-          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 == 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__ */ jsx("ul", {
-          id: groupsElementId,
-          className: classes.groupsContainer,
-          children: Object.entries(groups).map((obj) => /* @__PURE__ */ jsx(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__ */ jsx(HvDrawer, { BackdropComponent: void 0, variant: "persistent", classes: {
+    paper: classes.drawerPaper
+  }, anchor, buttonTitle, ...others, children: /* @__PURE__ */ jsxs("div", { id: drawerElementId, ref: setNodeRef, children: [
+    /* @__PURE__ */ jsxs("div", { className: classes.titleContainer, children: [
+      /* @__PURE__ */ jsx(Add, { role: "none" }),
+      /* @__PURE__ */ jsx(HvTypography, { 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 == 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__ */ jsx("ul", { id: groupsElementId, className: classes.groupsContainer, children: Object.entries(groups).map((obj) => /* @__PURE__ */ jsx(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])) })
+    ] })
+  ] }) });
 };
 export {
   HvFlowSidebar,