@hitachivantara/uikit-react-lab 5.19.0 → 5.19.2

package/dist/esm/components/Dashboard/Dashboard.styles.js

@@ -1,12 +1,194 @@
 import { css } from "@emotion/react";
 import { createClasses, theme } from "@hitachivantara/uikit-react-core";
-const {
-  staticClasses,
-  useClasses
-} = createClasses("HvDashboard", {
+const { staticClasses, useClasses } = createClasses("HvDashboard", {
   root: {}
 });
-const gridStyles = /* @__PURE__ */ css(".react-grid-layout{position:relative;transition:height 200ms ease;}.react-grid-item{transition:all 200ms ease;transition-property:left,top,width,height;}.react-grid-item img{pointer-events:none;user-select:none;}.react-grid-item.cssTransforms{transition-property:transform,width,height;}.react-grid-item.resizing{transition:none;z-index:1;will-change:width,height;}.react-grid-item.react-draggable-dragging{transition:none;z-index:3;will-change:transform;}.react-grid-item.dropping{visibility:hidden;}.react-grid-item.react-grid-placeholder{background:", theme.colors.primary_20, ';transition-duration:100ms;z-index:2;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;}.react-grid-item.react-grid-placeholder.placeholder-resizing{transition:none;}.react-grid-item>.react-resizable-handle{position:absolute;width:20px;height:20px;}.react-grid-item>.react-resizable-handle::after{content:"";position:absolute;right:3px;bottom:3px;width:5px;height:5px;border-right:2px solid rgba(0, 0, 0, 0.4);border-bottom:2px solid rgba(0, 0, 0, 0.4);}.react-resizable-hide>.react-resizable-handle{display:none;}.react-grid-item>.react-resizable-handle.react-resizable-handle-sw{bottom:0;left:0;cursor:sw-resize;transform:rotate(90deg);}.react-grid-item>.react-resizable-handle.react-resizable-handle-se{bottom:0;right:0;cursor:se-resize;}.react-grid-item>.react-resizable-handle.react-resizable-handle-nw{top:0;left:0;cursor:nw-resize;transform:rotate(180deg);}.react-grid-item>.react-resizable-handle.react-resizable-handle-ne{top:0;right:0;cursor:ne-resize;transform:rotate(270deg);}.react-grid-item>.react-resizable-handle.react-resizable-handle-w,.react-grid-item>.react-resizable-handle.react-resizable-handle-e{top:50%;margin-top:-10px;cursor:ew-resize;}.react-grid-item>.react-resizable-handle.react-resizable-handle-w{left:0;transform:rotate(135deg);}.react-grid-item>.react-resizable-handle.react-resizable-handle-e{right:0;transform:rotate(315deg);}.react-grid-item>.react-resizable-handle.react-resizable-handle-n,.react-grid-item>.react-resizable-handle.react-resizable-handle-s{left:50%;margin-left:-10px;cursor:ns-resize;}.react-grid-item>.react-resizable-handle.react-resizable-handle-n{top:0;transform:rotate(225deg);}.react-grid-item>.react-resizable-handle.react-resizable-handle-s{bottom:0;transform:rotate(45deg);}.react-resizable{position:relative;}.react-resizable-handle{position:absolute;width:20px;height:20px;background-repeat:no-repeat;background-origin:content-box;box-sizing:border-box;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+");background-position:bottom right;padding:0 3px 3px 0;}.react-resizable-handle-sw{bottom:0;left:0;cursor:sw-resize;transform:rotate(90deg);}.react-resizable-handle-se{bottom:0;right:0;cursor:se-resize;}.react-resizable-handle-nw{top:0;left:0;cursor:nw-resize;transform:rotate(180deg);}.react-resizable-handle-ne{top:0;right:0;cursor:ne-resize;transform:rotate(270deg);}.react-resizable-handle-w,.react-resizable-handle-e{top:50%;margin-top:-10px;cursor:ew-resize;}.react-resizable-handle-w{left:0;transform:rotate(135deg);}.react-resizable-handle-e{right:0;transform:rotate(315deg);}.react-resizable-handle-n,.react-resizable-handle-s{left:50%;margin-left:-10px;cursor:ns-resize;}.react-resizable-handle-n{top:0;transform:rotate(225deg);}.react-resizable-handle-s{bottom:0;transform:rotate(45deg);}' + (process.env.NODE_ENV === "production" ? "" : ";label:gridStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2xhYi9zcmMvY29tcG9uZW50cy9EYXNoYm9hcmQvRGFzaGJvYXJkLnN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPNkIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvbGFiL3NyYy9jb21wb25lbnRzL0Rhc2hib2FyZC9EYXNoYm9hcmQuc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSBcIkBlbW90aW9uL3JlYWN0XCI7XG5pbXBvcnQgeyBjcmVhdGVDbGFzc2VzLCB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtcmVhY3QtY29yZVwiO1xuXG5leHBvcnQgY29uc3QgeyBzdGF0aWNDbGFzc2VzLCB1c2VDbGFzc2VzIH0gPSBjcmVhdGVDbGFzc2VzKFwiSHZEYXNoYm9hcmRcIiwge1xuICByb290OiB7fSxcbn0pO1xuXG5leHBvcnQgY29uc3QgZ3JpZFN0eWxlcyA9IGNzc2BcbiAgLnJlYWN0LWdyaWQtbGF5b3V0IHtcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgdHJhbnNpdGlvbjogaGVpZ2h0IDIwMG1zIGVhc2U7XG4gIH1cbiAgLnJlYWN0LWdyaWQtaXRlbSB7XG4gICAgdHJhbnNpdGlvbjogYWxsIDIwMG1zIGVhc2U7XG4gICAgdHJhbnNpdGlvbi1wcm9wZXJ0eTogbGVmdCwgdG9wLCB3aWR0aCwgaGVpZ2h0O1xuICB9XG4gIC5yZWFjdC1ncmlkLWl0ZW0gaW1nIHtcbiAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcbiAgICB1c2VyLXNlbGVjdDogbm9uZTtcbiAgfVxuICAucmVhY3QtZ3JpZC1pdGVtLmNzc1RyYW5zZm9ybXMge1xuICAgIHRyYW5zaXRpb24tcHJvcGVydHk6IHRyYW5zZm9ybSwgd2lkdGgsIGhlaWdodDtcbiAgfVxuICAucmVhY3QtZ3JpZC1pdGVtLnJlc2l6aW5nIHtcbiAgICB0cmFuc2l0aW9uOiBub25lO1xuICAgIHotaW5kZXg6IDE7XG4gICAgd2lsbC1jaGFuZ2U6IHdpZHRoLCBoZWlnaHQ7XG4gIH1cblxuICAucmVhY3QtZ3JpZC1pdGVtLnJlYWN0LWRyYWdnYWJsZS1kcmFnZ2luZyB7XG4gICAgdHJhbnNpdGlvbjogbm9uZTtcbiAgICB6LWluZGV4OiAzO1xuICAgIHdpbGwtY2hhbmdlOiB0cmFuc2Zvcm07XG4gIH1cblxuICAucmVhY3QtZ3JpZC1pdGVtLmRyb3BwaW5nIHtcbiAgICB2aXNpYmlsaXR5OiBoaWRkZW47XG4gIH1cblxuICAucmVhY3QtZ3JpZC1pdGVtLnJlYWN0LWdyaWQtcGxhY2Vob2xkZXIge1xuICAgIGJhY2tncm91bmQ6ICR7dGhlbWUuY29sb3JzLnByaW1hcnlfMjB9O1xuICAgIHRyYW5zaXRpb24tZHVyYXRpb246IDEwMG1zO1xuICAgIHotaW5kZXg6IDI7XG4gICAgLXdlYmtpdC11c2VyLXNlbGVjdDogbm9uZTtcbiAgICAtbW96LXVzZXItc2VsZWN0OiBub25lO1xuICAgIC1tcy11c2VyLXNlbGVjdDogbm9uZTtcbiAgICAtby11c2VyLXNlbGVjdDogbm9uZTtcbiAgICB1c2VyLXNlbGVjdDogbm9uZTtcbiAgfVxuXG4gIC5yZWFjdC1ncmlkLWl0ZW0ucmVhY3QtZ3JpZC1wbGFjZWhvbGRlci5wbGFjZWhvbGRlci1yZXNpemluZyB7XG4gICAgdHJhbnNpdGlvbjogbm9uZTtcbiAgfVxuXG4gIC5yZWFjdC1ncmlkLWl0ZW0gPiAucmVhY3QtcmVzaXphYmxlLWhhbmRsZSB7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIHdpZHRoOiAyMHB4O1xuICAgIGhlaWdodDogMjBweDtcbiAgfVxuXG4gIC5yZWFjdC1ncmlkLWl0ZW0gPiAucmVhY3QtcmVzaXphYmxlLWhhbmRsZTo6YWZ0ZXIge1xuICAgIGNvbnRlbnQ6IFwiXCI7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIHJpZ2h0OiAzcHg7XG4gICAgYm90dG9tOiAzcHg7XG4gICAgd2lkdGg6IDVweDtcbiAgICBoZWlnaHQ6IDVweDtcbiAgICBib3JkZXItcmlnaHQ6IDJweCBzb2xpZCByZ2JhKDAsIDAsIDAsIDAuNCk7XG4gICAgYm9yZGVyLWJvdHRvbTogMnB4IHNvbGlkIHJnYmEoMCwgMCwgMCwgMC40KTtcbiAgfVxuXG4gIC5yZWFjdC1yZXNpemFibGUtaGlkZSA+IC5yZWFjdC1yZXNpemFibGUtaGFuZGxlIHtcbiAgICBkaXNwbGF5OiBub25lO1xuICB9XG5cbiAgLnJlYWN0LWdyaWQtaXRlbSA+IC5yZWFjdC1yZXNpemFibGUtaGFuZGxlLnJlYWN0LXJlc2l6YWJsZS1oYW5kbGUtc3cge1xuICAgIGJvdHRvbTogMDtcbiAgICBsZWZ0OiAwO1xuICAgIGN1cnNvcjogc3ctcmVzaXplO1xuICAgIHRyYW5zZm9ybTogcm90YXRlKDkwZGVnKTtcbiAgfVxuICAucmVhY3QtZ3JpZC1pdGVtID4gLnJlYWN0LXJlc2l6YWJsZS1oYW5kbGUucmVhY3QtcmVzaXphYmxlLWhhbmRsZS1zZSB7XG4gICAgYm90dG9tOiAwO1xuICAgIHJpZ2h0OiAwO1xuICAgIGN1cnNvcjogc2UtcmVzaXplO1xuICB9XG4gIC5yZWFjdC1ncmlkLWl0ZW0gPiAucmVhY3QtcmVzaXphYmxlLWhhbmRsZS5yZWFjdC1yZXNpemFibGUtaGFuZGxlLW53IHtcbiAgICB0b3A6IDA7XG4gICAgbGVmdDogMDtcbiAgICBjdXJzb3I6IG53LXJlc2l6ZTtcbiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgxODBkZWcpO1xuICB9XG4gIC5yZWFjdC1ncmlkLWl0ZW0gPiAucmVhY3QtcmVzaXphYmxlLWhhbmRsZS5yZWFjdC1yZXNpemFibGUtaGFuZGxlLW5lIHtcbiAgICB0b3A6IDA7XG4gICAgcmlnaHQ6IDA7XG4gICAgY3Vyc29yOiBuZS1yZXNpemU7XG4gICAgdHJhbnNmb3JtOiByb3RhdGUoMjcwZGVnKTtcbiAgfVxuICAucmVhY3QtZ3JpZC1pdGVtID4gLnJlYWN0LXJlc2l6YWJsZS1oYW5kbGUucmVhY3QtcmVzaXphYmxlLWhhbmRsZS13LFxuICAucmVhY3QtZ3JpZC1pdGVtID4gLnJlYWN0LXJlc2l6YWJsZS1oYW5kbGUucmVhY3QtcmVzaXphYmxlLWhhbmRsZS1lIHtcbiAgICB0b3A6IDUwJTtcbiAgICBtYXJnaW4tdG9wOiAtMTBweDtcbiAgICBjdXJzb3I6IGV3LXJlc2l6ZTtcbiAgfVxuICAucmVhY3QtZ3JpZC1pdGVtID4gLnJlYWN0LXJlc2l6YWJsZS1oYW5kbGUucmVhY3QtcmVzaXphYmxlLWhhbmRsZS13IHtcbiAgICBsZWZ0OiAwO1xuICAgIHRyYW5zZm9ybTogcm90YXRlKDEzNWRlZyk7XG4gIH1cbiAgLnJlYWN0LWdyaWQtaXRlbSA+IC5yZWFjdC1yZXNpemFibGUtaGFuZGxlLnJlYWN0LXJlc2l6YWJsZS1oYW5kbGUtZSB7XG4gICAgcmlnaHQ6IDA7XG4gICAgdHJhbnNmb3JtOiByb3RhdGUoMzE1ZGVnKTtcbiAgfVxuICAucmVhY3QtZ3JpZC1pdGVtID4gLnJlYWN0LXJlc2l6YWJsZS1oYW5kbGUucmVhY3QtcmVzaXphYmxlLWhhbmRsZS1uLFxuICAucmVhY3QtZ3JpZC1pdGVtID4gLnJlYWN0LXJlc2l6YWJsZS1oYW5kbGUucmVhY3QtcmVzaXphYmxlLWhhbmRsZS1zIHtcbiAgICBsZWZ0OiA1MCU7XG4gICAgbWFyZ2luLWxlZnQ6IC0xMHB4O1xuICAgIGN1cnNvcjogbnMtcmVzaXplO1xuICB9XG4gIC5yZWFjdC1ncmlkLWl0ZW0gPiAucmVhY3QtcmVzaXphYmxlLWhhbmRsZS5yZWFjdC1yZXNpemFibGUtaGFuZGxlLW4ge1xuICAgIHRvcDogMDtcbiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgyMjVkZWcpO1xuICB9XG4gIC5yZWFjdC1ncmlkLWl0ZW0gPiAucmVhY3QtcmVzaXphYmxlLWhhbmRsZS5yZWFjdC1yZXNpemFibGUtaGFuZGxlLXMge1xuICAgIGJvdHRvbTogMDtcbiAgICB0cmFuc2Zvcm06IHJvdGF0ZSg0NWRlZyk7XG4gIH1cblxuICAucmVhY3QtcmVzaXphYmxlIHtcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIH1cbiAgLnJlYWN0LXJlc2l6YWJsZS1oYW5kbGUge1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICB3aWR0aDogMjBweDtcbiAgICBoZWlnaHQ6IDIwcHg7XG4gICAgYmFja2dyb3VuZC1yZXBlYXQ6IG5vLXJlcGVhdDtcbiAgICBiYWNrZ3JvdW5kLW9yaWdpbjogY29udGVudC1ib3g7XG4gICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICBiYWNrZ3JvdW5kLWltYWdlOiB1cmwoXCJkYXRhOmltYWdlL3N2Zyt4bWw7YmFzZTY0LFBITjJaeUI0Yld4dWN6MGlhSFIwY0RvdkwzZDNkeTUzTXk1dmNtY3ZNakF3TUM5emRtY2lJSFpwWlhkQ2IzZzlJakFnTUNBMklEWWlJSE4wZVd4bFBTSmlZV05yWjNKdmRXNWtMV052Ykc5eU9pTm1abVptWm1Zd01DSWdlRDBpTUhCNElpQjVQU0l3Y0hnaUlIZHBaSFJvUFNJMmNIZ2lJR2hsYVdkb2REMGlObkI0SWo0OFp5QnZjR0ZqYVhSNVBTSXdMak13TWlJK1BIQmhkR2dnWkQwaVRTQTJJRFlnVENBd0lEWWdUQ0F3SURRdU1pQk1JRFFnTkM0eUlFd2dOQzR5SURRdU1pQk1JRFF1TWlBd0lFd2dOaUF3SUV3Z05pQTJJRXdnTmlBMklGb2lJR1pwYkd3OUlpTXdNREF3TURBaUx6NDhMMmMrUEM5emRtYytcIik7XG4gICAgYmFja2dyb3VuZC1wb3NpdGlvbjogYm90dG9tIHJpZ2h0O1xuICAgIHBhZGRpbmc6IDAgM3B4IDNweCAwO1xuICB9XG4gIC5yZWFjdC1yZXNpemFibGUtaGFuZGxlLXN3IHtcbiAgICBib3R0b206IDA7XG4gICAgbGVmdDogMDtcbiAgICBjdXJzb3I6IHN3LXJlc2l6ZTtcbiAgICB0cmFuc2Zvcm06IHJvdGF0ZSg5MGRlZyk7XG4gIH1cbiAgLnJlYWN0LXJlc2l6YWJsZS1oYW5kbGUtc2Uge1xuICAgIGJvdHRvbTogMDtcbiAgICByaWdodDogMDtcbiAgICBjdXJzb3I6IHNlLXJlc2l6ZTtcbiAgfVxuICAucmVhY3QtcmVzaXphYmxlLWhhbmRsZS1udyB7XG4gICAgdG9wOiAwO1xuICAgIGxlZnQ6IDA7XG4gICAgY3Vyc29yOiBudy1yZXNpemU7XG4gICAgdHJhbnNmb3JtOiByb3RhdGUoMTgwZGVnKTtcbiAgfVxuICAucmVhY3QtcmVzaXphYmxlLWhhbmRsZS1uZSB7XG4gICAgdG9wOiAwO1xuICAgIHJpZ2h0OiAwO1xuICAgIGN1cnNvcjogbmUtcmVzaXplO1xuICAgIHRyYW5zZm9ybTogcm90YXRlKDI3MGRlZyk7XG4gIH1cbiAgLnJlYWN0LXJlc2l6YWJsZS1oYW5kbGUtdyxcbiAgLnJlYWN0LXJlc2l6YWJsZS1oYW5kbGUtZSB7XG4gICAgdG9wOiA1MCU7XG4gICAgbWFyZ2luLXRvcDogLTEwcHg7XG4gICAgY3Vyc29yOiBldy1yZXNpemU7XG4gIH1cbiAgLnJlYWN0LXJlc2l6YWJsZS1oYW5kbGUtdyB7XG4gICAgbGVmdDogMDtcbiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgxMzVkZWcpO1xuICB9XG4gIC5yZWFjdC1yZXNpemFibGUtaGFuZGxlLWUge1xuICAgIHJpZ2h0OiAwO1xuICAgIHRyYW5zZm9ybTogcm90YXRlKDMxNWRlZyk7XG4gIH1cbiAgLnJlYWN0LXJlc2l6YWJsZS1oYW5kbGUtbixcbiAgLnJlYWN0LXJlc2l6YWJsZS1oYW5kbGUtcyB7XG4gICAgbGVmdDogNTAlO1xuICAgIG1hcmdpbi1sZWZ0OiAtMTBweDtcbiAgICBjdXJzb3I6IG5zLXJlc2l6ZTtcbiAgfVxuICAucmVhY3QtcmVzaXphYmxlLWhhbmRsZS1uIHtcbiAgICB0b3A6IDA7XG4gICAgdHJhbnNmb3JtOiByb3RhdGUoMjI1ZGVnKTtcbiAgfVxuICAucmVhY3QtcmVzaXphYmxlLWhhbmRsZS1zIHtcbiAgICBib3R0b206IDA7XG4gICAgdHJhbnNmb3JtOiByb3RhdGUoNDVkZWcpO1xuICB9XG5gO1xuIl19 */");
+const gridStyles = css`
+  .react-grid-layout {
+    position: relative;
+    transition: height 200ms ease;
+  }
+  .react-grid-item {
+    transition: all 200ms ease;
+    transition-property: left, top, width, height;
+  }
+  .react-grid-item img {
+    pointer-events: none;
+    user-select: none;
+  }
+  .react-grid-item.cssTransforms {
+    transition-property: transform, width, height;
+  }
+  .react-grid-item.resizing {
+    transition: none;
+    z-index: 1;
+    will-change: width, height;
+  }
+
+  .react-grid-item.react-draggable-dragging {
+    transition: none;
+    z-index: 3;
+    will-change: transform;
+  }
+
+  .react-grid-item.dropping {
+    visibility: hidden;
+  }
+
+  .react-grid-item.react-grid-placeholder {
+    background: ${theme.colors.primary_20};
+    transition-duration: 100ms;
+    z-index: 2;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -o-user-select: none;
+    user-select: none;
+  }
+
+  .react-grid-item.react-grid-placeholder.placeholder-resizing {
+    transition: none;
+  }
+
+  .react-grid-item > .react-resizable-handle {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+  }
+
+  .react-grid-item > .react-resizable-handle::after {
+    content: "";
+    position: absolute;
+    right: 3px;
+    bottom: 3px;
+    width: 5px;
+    height: 5px;
+    border-right: 2px solid rgba(0, 0, 0, 0.4);
+    border-bottom: 2px solid rgba(0, 0, 0, 0.4);
+  }
+
+  .react-resizable-hide > .react-resizable-handle {
+    display: none;
+  }
+
+  .react-grid-item > .react-resizable-handle.react-resizable-handle-sw {
+    bottom: 0;
+    left: 0;
+    cursor: sw-resize;
+    transform: rotate(90deg);
+  }
+  .react-grid-item > .react-resizable-handle.react-resizable-handle-se {
+    bottom: 0;
+    right: 0;
+    cursor: se-resize;
+  }
+  .react-grid-item > .react-resizable-handle.react-resizable-handle-nw {
+    top: 0;
+    left: 0;
+    cursor: nw-resize;
+    transform: rotate(180deg);
+  }
+  .react-grid-item > .react-resizable-handle.react-resizable-handle-ne {
+    top: 0;
+    right: 0;
+    cursor: ne-resize;
+    transform: rotate(270deg);
+  }
+  .react-grid-item > .react-resizable-handle.react-resizable-handle-w,
+  .react-grid-item > .react-resizable-handle.react-resizable-handle-e {
+    top: 50%;
+    margin-top: -10px;
+    cursor: ew-resize;
+  }
+  .react-grid-item > .react-resizable-handle.react-resizable-handle-w {
+    left: 0;
+    transform: rotate(135deg);
+  }
+  .react-grid-item > .react-resizable-handle.react-resizable-handle-e {
+    right: 0;
+    transform: rotate(315deg);
+  }
+  .react-grid-item > .react-resizable-handle.react-resizable-handle-n,
+  .react-grid-item > .react-resizable-handle.react-resizable-handle-s {
+    left: 50%;
+    margin-left: -10px;
+    cursor: ns-resize;
+  }
+  .react-grid-item > .react-resizable-handle.react-resizable-handle-n {
+    top: 0;
+    transform: rotate(225deg);
+  }
+  .react-grid-item > .react-resizable-handle.react-resizable-handle-s {
+    bottom: 0;
+    transform: rotate(45deg);
+  }
+
+  .react-resizable {
+    position: relative;
+  }
+  .react-resizable-handle {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    background-repeat: no-repeat;
+    background-origin: content-box;
+    box-sizing: border-box;
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+");
+    background-position: bottom right;
+    padding: 0 3px 3px 0;
+  }
+  .react-resizable-handle-sw {
+    bottom: 0;
+    left: 0;
+    cursor: sw-resize;
+    transform: rotate(90deg);
+  }
+  .react-resizable-handle-se {
+    bottom: 0;
+    right: 0;
+    cursor: se-resize;
+  }
+  .react-resizable-handle-nw {
+    top: 0;
+    left: 0;
+    cursor: nw-resize;
+    transform: rotate(180deg);
+  }
+  .react-resizable-handle-ne {
+    top: 0;
+    right: 0;
+    cursor: ne-resize;
+    transform: rotate(270deg);
+  }
+  .react-resizable-handle-w,
+  .react-resizable-handle-e {
+    top: 50%;
+    margin-top: -10px;
+    cursor: ew-resize;
+  }
+  .react-resizable-handle-w {
+    left: 0;
+    transform: rotate(135deg);
+  }
+  .react-resizable-handle-e {
+    right: 0;
+    transform: rotate(315deg);
+  }
+  .react-resizable-handle-n,
+  .react-resizable-handle-s {
+    left: 50%;
+    margin-left: -10px;
+    cursor: ns-resize;
+  }
+  .react-resizable-handle-n {
+    top: 0;
+    transform: rotate(225deg);
+  }
+  .react-resizable-handle-s {
+    bottom: 0;
+    transform: rotate(45deg);
+  }
+`;
 export {
   gridStyles,
   staticClasses,

package/dist/esm/components/Dashboard/Dashboard.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dashboard.styles.js","sources":["../../../../src/components/Dashboard/Dashboard.styles.ts"],"sourcesContent":["import { css } from \"@emotion/react\";\nimport { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDashboard\", {\n  root: {},\n});\n\nexport const gridStyles = css`\n  .react-grid-layout {\n    position: relative;\n    transition: height 200ms ease;\n  }\n  .react-grid-item {\n    transition: all 200ms ease;\n    transition-property: left, top, width, height;\n  }\n  .react-grid-item img {\n    pointer-events: none;\n    user-select: none;\n  }\n  .react-grid-item.cssTransforms {\n    transition-property: transform, width, height;\n  }\n  .react-grid-item.resizing {\n    transition: none;\n    z-index: 1;\n    will-change: width, height;\n  }\n\n  .react-grid-item.react-draggable-dragging {\n    transition: none;\n    z-index: 3;\n    will-change: transform;\n  }\n\n  .react-grid-item.dropping {\n    visibility: hidden;\n  }\n\n  .react-grid-item.react-grid-placeholder {\n    background: ${theme.colors.primary_20};\n    transition-duration: 100ms;\n    z-index: 2;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    -o-user-select: none;\n    user-select: none;\n  }\n\n  .react-grid-item.react-grid-placeholder.placeholder-resizing {\n    transition: none;\n  }\n\n  .react-grid-item > .react-resizable-handle {\n    position: absolute;\n    width: 20px;\n    height: 20px;\n  }\n\n  .react-grid-item > .react-resizable-handle::after {\n    content: \"\";\n    position: absolute;\n    right: 3px;\n    bottom: 3px;\n    width: 5px;\n    height: 5px;\n    border-right: 2px solid rgba(0, 0, 0, 0.4);\n    border-bottom: 2px solid rgba(0, 0, 0, 0.4);\n  }\n\n  .react-resizable-hide > .react-resizable-handle {\n    display: none;\n  }\n\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-sw {\n    bottom: 0;\n    left: 0;\n    cursor: sw-resize;\n    transform: rotate(90deg);\n  }\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-se {\n    bottom: 0;\n    right: 0;\n    cursor: se-resize;\n  }\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-nw {\n    top: 0;\n    left: 0;\n    cursor: nw-resize;\n    transform: rotate(180deg);\n  }\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-ne {\n    top: 0;\n    right: 0;\n    cursor: ne-resize;\n    transform: rotate(270deg);\n  }\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-w,\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-e {\n    top: 50%;\n    margin-top: -10px;\n    cursor: ew-resize;\n  }\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-w {\n    left: 0;\n    transform: rotate(135deg);\n  }\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-e {\n    right: 0;\n    transform: rotate(315deg);\n  }\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-n,\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-s {\n    left: 50%;\n    margin-left: -10px;\n    cursor: ns-resize;\n  }\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-n {\n    top: 0;\n    transform: rotate(225deg);\n  }\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-s {\n    bottom: 0;\n    transform: rotate(45deg);\n  }\n\n  .react-resizable {\n    position: relative;\n  }\n  .react-resizable-handle {\n    position: absolute;\n    width: 20px;\n    height: 20px;\n    background-repeat: no-repeat;\n    background-origin: content-box;\n    box-sizing: border-box;\n    background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+\");\n    background-position: bottom right;\n    padding: 0 3px 3px 0;\n  }\n  .react-resizable-handle-sw {\n    bottom: 0;\n    left: 0;\n    cursor: sw-resize;\n    transform: rotate(90deg);\n  }\n  .react-resizable-handle-se {\n    bottom: 0;\n    right: 0;\n    cursor: se-resize;\n  }\n  .react-resizable-handle-nw {\n    top: 0;\n    left: 0;\n    cursor: nw-resize;\n    transform: rotate(180deg);\n  }\n  .react-resizable-handle-ne {\n    top: 0;\n    right: 0;\n    cursor: ne-resize;\n    transform: rotate(270deg);\n  }\n  .react-resizable-handle-w,\n  .react-resizable-handle-e {\n    top: 50%;\n    margin-top: -10px;\n    cursor: ew-resize;\n  }\n  .react-resizable-handle-w {\n    left: 0;\n    transform: rotate(135deg);\n  }\n  .react-resizable-handle-e {\n    right: 0;\n    transform: rotate(315deg);\n  }\n  .react-resizable-handle-n,\n  .react-resizable-handle-s {\n    left: 50%;\n    margin-left: -10px;\n    cursor: ns-resize;\n  }\n  .react-resizable-handle-n {\n    top: 0;\n    transform: rotate(225deg);\n  }\n  .react-resizable-handle-s {\n    bottom: 0;\n    transform: rotate(45deg);\n  }\n`;\n"],"names":["staticClasses","useClasses","createClasses","root","gridStyles","theme","colors","primary_20","process","env","NODE_ENV"],"mappings":";;AAGa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,eAAe;AAAA,EACxEC,MAAM,CAAC;AACT,CAAC;AAEM,MAAMC,6kBAiCKC,MAAMC,OAAOC,YAAU,+lGAAAC,QAAAC,IAAAC,aAAA,eAAA,KAAA,uBAAAF,QAAAC,IAAAC,aAwJxC,eAAA,KAAA,6lOAAA;"}
+{"version":3,"file":"Dashboard.styles.js","sources":["../../../../src/components/Dashboard/Dashboard.styles.ts"],"sourcesContent":["import { css } from \"@emotion/react\";\nimport { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDashboard\", {\n  root: {},\n});\n\nexport const gridStyles = css`\n  .react-grid-layout {\n    position: relative;\n    transition: height 200ms ease;\n  }\n  .react-grid-item {\n    transition: all 200ms ease;\n    transition-property: left, top, width, height;\n  }\n  .react-grid-item img {\n    pointer-events: none;\n    user-select: none;\n  }\n  .react-grid-item.cssTransforms {\n    transition-property: transform, width, height;\n  }\n  .react-grid-item.resizing {\n    transition: none;\n    z-index: 1;\n    will-change: width, height;\n  }\n\n  .react-grid-item.react-draggable-dragging {\n    transition: none;\n    z-index: 3;\n    will-change: transform;\n  }\n\n  .react-grid-item.dropping {\n    visibility: hidden;\n  }\n\n  .react-grid-item.react-grid-placeholder {\n    background: ${theme.colors.primary_20};\n    transition-duration: 100ms;\n    z-index: 2;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    -o-user-select: none;\n    user-select: none;\n  }\n\n  .react-grid-item.react-grid-placeholder.placeholder-resizing {\n    transition: none;\n  }\n\n  .react-grid-item > .react-resizable-handle {\n    position: absolute;\n    width: 20px;\n    height: 20px;\n  }\n\n  .react-grid-item > .react-resizable-handle::after {\n    content: \"\";\n    position: absolute;\n    right: 3px;\n    bottom: 3px;\n    width: 5px;\n    height: 5px;\n    border-right: 2px solid rgba(0, 0, 0, 0.4);\n    border-bottom: 2px solid rgba(0, 0, 0, 0.4);\n  }\n\n  .react-resizable-hide > .react-resizable-handle {\n    display: none;\n  }\n\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-sw {\n    bottom: 0;\n    left: 0;\n    cursor: sw-resize;\n    transform: rotate(90deg);\n  }\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-se {\n    bottom: 0;\n    right: 0;\n    cursor: se-resize;\n  }\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-nw {\n    top: 0;\n    left: 0;\n    cursor: nw-resize;\n    transform: rotate(180deg);\n  }\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-ne {\n    top: 0;\n    right: 0;\n    cursor: ne-resize;\n    transform: rotate(270deg);\n  }\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-w,\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-e {\n    top: 50%;\n    margin-top: -10px;\n    cursor: ew-resize;\n  }\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-w {\n    left: 0;\n    transform: rotate(135deg);\n  }\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-e {\n    right: 0;\n    transform: rotate(315deg);\n  }\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-n,\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-s {\n    left: 50%;\n    margin-left: -10px;\n    cursor: ns-resize;\n  }\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-n {\n    top: 0;\n    transform: rotate(225deg);\n  }\n  .react-grid-item > .react-resizable-handle.react-resizable-handle-s {\n    bottom: 0;\n    transform: rotate(45deg);\n  }\n\n  .react-resizable {\n    position: relative;\n  }\n  .react-resizable-handle {\n    position: absolute;\n    width: 20px;\n    height: 20px;\n    background-repeat: no-repeat;\n    background-origin: content-box;\n    box-sizing: border-box;\n    background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+\");\n    background-position: bottom right;\n    padding: 0 3px 3px 0;\n  }\n  .react-resizable-handle-sw {\n    bottom: 0;\n    left: 0;\n    cursor: sw-resize;\n    transform: rotate(90deg);\n  }\n  .react-resizable-handle-se {\n    bottom: 0;\n    right: 0;\n    cursor: se-resize;\n  }\n  .react-resizable-handle-nw {\n    top: 0;\n    left: 0;\n    cursor: nw-resize;\n    transform: rotate(180deg);\n  }\n  .react-resizable-handle-ne {\n    top: 0;\n    right: 0;\n    cursor: ne-resize;\n    transform: rotate(270deg);\n  }\n  .react-resizable-handle-w,\n  .react-resizable-handle-e {\n    top: 50%;\n    margin-top: -10px;\n    cursor: ew-resize;\n  }\n  .react-resizable-handle-w {\n    left: 0;\n    transform: rotate(135deg);\n  }\n  .react-resizable-handle-e {\n    right: 0;\n    transform: rotate(315deg);\n  }\n  .react-resizable-handle-n,\n  .react-resizable-handle-s {\n    left: 50%;\n    margin-left: -10px;\n    cursor: ns-resize;\n  }\n  .react-resizable-handle-n {\n    top: 0;\n    transform: rotate(225deg);\n  }\n  .react-resizable-handle-s {\n    bottom: 0;\n    transform: rotate(45deg);\n  }\n`;\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,eAAe;AAAA,EACxE,MAAM,CAAC;AACT,CAAC;AAEM,MAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAiCR,MAAM,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

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","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;"}
+{"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":[],"mappings":";;;AASO,MAAM,mBAAmB,CAAC;AAAA,EAC/B,QAAQ;AAAA,EACR,GAAG;AACL,MAA6B;AAEzB,SAAA,oBAAC,YAAW,EAAA,OAAO,SAAS,OAAO,MAAM,OAAO,SAAS,GAAI,GAAG,OAAQ,CAAA;AAE5E;"}

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

@@ -29,17 +29,12 @@ const HvFlowControls = ({
   children,
   ...others
 }) => {
-  const {
-    isInteractive,
-    minZoomReached,
-    maxZoomReached
-  } = useStore(selector, shallow);
+  const { isInteractive, minZoomReached, maxZoomReached } = useStore(
+    selector,
+    shallow
+  );
   const store = useStoreApi();
-  const {
-    zoomIn,
-    zoomOut,
-    fitView
-  } = useReactFlow();
+  const { zoomIn, zoomOut, fitView } = useReactFlow();
   const labels = useLabels(DEFAULT_LABELS, labelsProps);
   const handleZoomIn = () => {
     zoomIn();
@@ -62,10 +57,36 @@ const HvFlowControls = ({
     onInteractiveChange?.(!isInteractive);
   };
   return /* @__PURE__ */ jsx(Panel, { position, ...others, children: /* @__PURE__ */ jsxs(HvMultiButton, { vertical: orientation === "vertical", children: [
-    !hideZoom && /* @__PURE__ */ jsx(HvButton, { icon: true, title: labels?.zoomIn, onClick: handleZoomIn, disabled: maxZoomReached, children: /* @__PURE__ */ jsx(ZoomIn, { role: "none" }) }),
-    !hideZoom && /* @__PURE__ */ jsx(HvButton, { icon: true, title: labels?.zoomOut, onClick: handleZoomOut, disabled: minZoomReached, children: /* @__PURE__ */ jsx(ZoomOut, { role: "none" }) }),
+    !hideZoom && /* @__PURE__ */ jsx(
+      HvButton,
+      {
+        icon: true,
+        title: labels?.zoomIn,
+        onClick: handleZoomIn,
+        disabled: maxZoomReached,
+        children: /* @__PURE__ */ jsx(ZoomIn, { role: "none" })
+      }
+    ),
+    !hideZoom && /* @__PURE__ */ jsx(
+      HvButton,
+      {
+        icon: true,
+        title: labels?.zoomOut,
+        onClick: handleZoomOut,
+        disabled: minZoomReached,
+        children: /* @__PURE__ */ jsx(ZoomOut, { role: "none" })
+      }
+    ),
     !hideFitView && /* @__PURE__ */ jsx(HvButton, { icon: true, title: labels?.fitView, onClick: handleFitView, children: /* @__PURE__ */ jsx(Focus, { role: "none" }) }),
-    !hideInteractive && /* @__PURE__ */ jsx(HvButton, { icon: true, title: labels?.interactive, onClick: handleInteractive, children: isInteractive ? /* @__PURE__ */ jsx(Unlock, { role: "none" }) : /* @__PURE__ */ jsx(Lock, { role: "none" }) }),
+    !hideInteractive && /* @__PURE__ */ jsx(
+      HvButton,
+      {
+        icon: true,
+        title: labels?.interactive,
+        onClick: handleInteractive,
+        children: isInteractive ? /* @__PURE__ */ jsx(Unlock, { role: "none" }) : /* @__PURE__ */ jsx(Lock, { role: "none" })
+      }
+    ),
     children
   ] }) });
 };

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"],"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;EAAA;AAGjB,QAAMC,gBAAgBA,MAAM;AAClB;AACQ;EAAA;AAGlB,QAAMC,gBAAgBA,MAAM;AAC1BzC,YAAQ8B,cAAc;AACN;EAAA;AAGlB,QAAMY,oBAAoBA,MAAM;AAC9BP,UAAMQ,SAAS;AAAA,MACbpC,gBAAgB,CAACD;AAAAA,MACjBE,kBAAkB,CAACF;AAAAA,MACnBG,oBAAoB,CAACH;AAAAA,IAAAA,CACtB;AAEDuB,0BAAsB,CAACvB,aAAa;AAAA,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,QAAQrB,QACf,SAASsC,cACT,UAAU1B,gBAEV,UAAA,oBAAC,QAAO,EAAA,MAAK,OAAM,CAAA,GACrB;AAAA,IAED,CAACa,YACA,oBAAC,UACC,EAAA,MAAI,MACJ,OAAOJ,QAAQpB,SACf,SAASsC,eACT,UAAU9B,gBAEV,8BAAC,SAAQ,EAAA,MAAK,OAAM,CAAA,GACtB;AAAA,IAED,CAACe,eACC,oBAAA,UAAA,EAAS,MAAI,MAAC,OAAOH,QAAQtB,SAAS,SAASyC,eAC9C,UAAA,oBAAC,OAAM,EAAA,MAAK,OAAM,CAAA,GACpB;AAAA,IAED,CAACjB,mBACC,oBAAA,UAAA,EACC,MAAI,MACJ,OAAOF,QAAQnB,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;"}
+{"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":[],"mappings":";;;;;AAmDA,MAAM,iBAAgD;AAAA,EACpD,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,aAAa;AACf;AAEA,MAAM,WAAW,CAAC,WAA2B;AAAA,EAC3C,eACE,MAAM,kBAAkB,MAAM,oBAAoB,MAAM;AAAA,EAC1D,gBAAgB,MAAM,UAAU,CAAC,KAAK,MAAM;AAAA,EAC5C,gBAAgB,MAAM,UAAU,CAAC,KAAK,MAAM;AAC9C;AAEO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,UAAU;AAAA,EACV,WAAW;AAAA,EACX,WAAW;AAAA,EACX,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA2B;AACzB,QAAM,EAAE,eAAe,gBAAgB,eAAmB,IAAA;AAAA,IACxD;AAAA,IACA;AAAA,EAAA;AAEF,QAAM,QAAQ;AACd,QAAM,EAAE,QAAQ,SAAS,YAAY,aAAa;AAE5C,QAAA,SAAS,UAAU,gBAAgB,WAAW;AAEpD,QAAM,eAAe,MAAM;AAClB;AACQ;EAAA;AAGjB,QAAM,gBAAgB,MAAM;AAClB;AACQ;EAAA;AAGlB,QAAM,gBAAgB,MAAM;AAC1B,YAAQ,cAAc;AACN;EAAA;AAGlB,QAAM,oBAAoB,MAAM;AAC9B,UAAM,SAAS;AAAA,MACb,gBAAgB,CAAC;AAAA,MACjB,kBAAkB,CAAC;AAAA,MACnB,oBAAoB,CAAC;AAAA,IAAA,CACtB;AAED,0BAAsB,CAAC,aAAa;AAAA,EAAA;AAIpC,SAAA,oBAAC,SAAM,UAAqB,GAAG,QAC7B,UAAC,qBAAA,eAAA,EAAc,UAAU,gBAAgB,YACtC,UAAA;AAAA,IAAA,CAAC,YACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAI;AAAA,QACJ,OAAO,QAAQ;AAAA,QACf,SAAS;AAAA,QACT,UAAU;AAAA,QAEV,UAAA,oBAAC,QAAO,EAAA,MAAK,OAAO,CAAA;AAAA,MAAA;AAAA,IACtB;AAAA,IAED,CAAC,YACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAI;AAAA,QACJ,OAAO,QAAQ;AAAA,QACf,SAAS;AAAA,QACT,UAAU;AAAA,QAEV,UAAA,oBAAC,SAAQ,EAAA,MAAK,OAAO,CAAA;AAAA,MAAA;AAAA,IACvB;AAAA,IAED,CAAC,eACC,oBAAA,UAAA,EAAS,MAAI,MAAC,OAAO,QAAQ,SAAS,SAAS,eAC9C,UAAA,oBAAC,OAAM,EAAA,MAAK,OAAO,CAAA,GACrB;AAAA,IAED,CAAC,mBACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAI;AAAA,QACJ,OAAO,QAAQ;AAAA,QACf,SAAS;AAAA,QAER,UAAA,oCAAiB,QAAO,EAAA,MAAK,QAAO,IAAK,oBAAC,MAAK,EAAA,MAAK,OAAO,CAAA;AAAA,MAAA;AAAA,IAC9D;AAAA,IAED;AAAA,EAAA,EACH,CAAA,EACF,CAAA;AAEJ;"}

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

@@ -32,11 +32,15 @@ const validateEdge = (nodes, edges, edge, nodeMetaRegistry) => {
   const targetMaxConnections = inputs[edge.targetHandle]?.maxConnections;
   let isValid = targetAccepts.length === 0 || targetAccepts.includes(sourceProvides);
   if (isValid && targetMaxConnections != null) {
-    const targetConnections = edges.filter((edg) => edg.target === edge.target && edg.targetHandle === edge.targetHandle).length;
+    const targetConnections = edges.filter(
+      (edg) => edg.target === edge.target && edg.targetHandle === edge.targetHandle
+    ).length;
     isValid = targetConnections < targetMaxConnections;
   }
   if (isValid && sourceMaxConnections != null) {
-    const sourceConnections = edges.filter((edg) => edg.source === edge.source && edg.sourceHandle === edge.sourceHandle).length;
+    const sourceConnections = edges.filter(
+      (edg) => edg.source === edge.source && edg.sourceHandle === edge.sourceHandle
+    ).length;
     isValid = sourceConnections < sourceMaxConnections;
   }
   return isValid;
@@ -56,77 +60,83 @@ const HvDroppableFlow = ({
   defaultEdgeOptions: defaultEdgeOptionsProp,
   ...others
 }) => {
-  const {
-    classes,
-    cx
-  } = useClasses(classesProp);
+  const { classes, cx } = useClasses(classesProp);
   const elementId = useUniqueId(id, "hvFlow");
   const reactFlowInstance = useReactFlow();
-  const {
-    nodeTypes
-  } = useFlowContext();
+  const { nodeTypes } = useFlowContext();
   const [nodes, setNodes] = useState(initialNodes);
   const [edges, setEdges] = useState(initialEdges);
-  const {
-    setNodeRef
-  } = useDroppable({
+  const { setNodeRef } = useDroppable({
     id: elementId
   });
-  const handleDragEnd = useCallback((event) => {
-    if (event.over?.id !== elementId)
-      return;
-    const hvFlow = event.active.data.current?.hvFlow;
-    const type = hvFlow?.type;
-    if (!type || !nodeTypes?.[type]) {
-      return;
-    }
-    const position = reactFlowInstance.project({
-      x: (hvFlow?.x || 0) - event.over.rect.left,
-      y: (hvFlow?.y || 0) - event.over.rect.top
-    });
-    const data = hvFlow?.data || {};
-    const newNode = {
-      id: uid(),
-      position,
-      data,
-      type
-    };
-    if (onDndDrop) {
-      onDndDrop(event, newNode);
-      return;
-    }
-    setNodes((nds) => nds.concat(newNode));
-  }, [elementId, nodeTypes, onDndDrop, reactFlowInstance]);
+  const handleDragEnd = useCallback(
+    (event) => {
+      if (event.over?.id !== elementId)
+        return;
+      const hvFlow = event.active.data.current?.hvFlow;
+      const type = hvFlow?.type;
+      if (!type || !nodeTypes?.[type]) {
+        return;
+      }
+      const position = reactFlowInstance.project({
+        x: (hvFlow?.x || 0) - event.over.rect.left,
+        y: (hvFlow?.y || 0) - event.over.rect.top
+      });
+      const data = hvFlow?.data || {};
+      const newNode = {
+        id: uid(),
+        position,
+        data,
+        type
+      };
+      if (onDndDrop) {
+        onDndDrop(event, newNode);
+        return;
+      }
+      setNodes((nds) => nds.concat(newNode));
+    },
+    [elementId, nodeTypes, onDndDrop, reactFlowInstance]
+  );
   useDndMonitor({
     onDragEnd: handleDragEnd
   });
-  const handleFlowChange = useCallback((nds, eds) => {
-    const isDragging = nds.find((node) => node.dragging);
-    if (!isDragging) {
-      onFlowChange?.(nds, eds);
-    }
-  }, [onFlowChange]);
-  const handleConnect = useCallback((connection) => {
-    const eds = addEdge(connection, edges);
-    setEdges(eds);
-    handleFlowChange(nodes, eds);
-    onConnectProp?.(connection);
-  }, [edges, handleFlowChange, nodes, onConnectProp]);
-  const handleNodesChange = useCallback((changes) => {
-    const nds = applyNodeChanges(changes, nodes);
-    setNodes(nds);
-    handleFlowChange(nds, edges);
-    onNodesChangeProp?.(changes);
-  }, [edges, handleFlowChange, nodes, onNodesChangeProp]);
-  const handleEdgesChange = useCallback((changes) => {
-    const eds = applyEdgeChanges(changes, edges);
-    setEdges(eds);
-    handleFlowChange(nodes, eds);
-    onEdgesChangeProp?.(changes);
-  }, [edges, handleFlowChange, nodes, onEdgesChangeProp]);
-  const {
-    registry
-  } = useNodeMetaRegistry();
+  const handleFlowChange = useCallback(
+    (nds, eds) => {
+      const isDragging = nds.find((node) => node.dragging);
+      if (!isDragging) {
+        onFlowChange?.(nds, eds);
+      }
+    },
+    [onFlowChange]
+  );
+  const handleConnect = useCallback(
+    (connection) => {
+      const eds = addEdge(connection, edges);
+      setEdges(eds);
+      handleFlowChange(nodes, eds);
+      onConnectProp?.(connection);
+    },
+    [edges, handleFlowChange, nodes, onConnectProp]
+  );
+  const handleNodesChange = useCallback(
+    (changes) => {
+      const nds = applyNodeChanges(changes, nodes);
+      setNodes(nds);
+      handleFlowChange(nds, edges);
+      onNodesChangeProp?.(changes);
+    },
+    [edges, handleFlowChange, nodes, onNodesChangeProp]
+  );
+  const handleEdgesChange = useCallback(
+    (changes) => {
+      const eds = applyEdgeChanges(changes, edges);
+      setEdges(eds);
+      handleFlowChange(nodes, eds);
+      onEdgesChangeProp?.(changes);
+    },
+    [edges, handleFlowChange, nodes, onEdgesChangeProp]
+  );
+  const { registry } = useNodeMetaRegistry();
   const isValidConnection = (connection) => validateEdge(nodes, edges, connection, registry);
   const defaultEdgeOptions = {
     markerEnd: {
@@ -142,8 +152,33 @@ const HvDroppableFlow = ({
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Global, { styles: flowStyles }),
-    /* @__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, isValidConnection, defaultEdgeOptions, snapGrid: [1, 1], snapToGrid: true, onError: (code, message) => {
-    }, ...others, children }) })
+    /* @__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,
+            isValidConnection,
+            defaultEdgeOptions,
+            snapGrid: [1, 1],
+            snapToGrid: true,
+            onError: (code, message) => {
+            },
+            ...others,
+            children
+          }
+        )
+      }
+    )
   ] });
 };
 export {

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  MarkerType,\n  Edge,\n  Node,\n} from \"reactflow\";\n\nimport { Global } from \"@emotion/react\";\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 { HvFlowNodeMetaRegistry } from \"./types\";\nimport { staticClasses, useClasses } from \"./Flow.styles\";\nimport { useFlowContext } from \"./hooks\";\nimport { flowStyles } from \"./base\";\nimport { useNodeMetaRegistry } from \"./FlowContext/NodeMetaContext\";\n\nexport { staticClasses as flowClasses };\n\nexport type HvFlowClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDroppableFlowProps<\n  NodeType extends string | undefined = string | undefined,\n  NodeData = any\n> extends Omit<ReactFlowProps, \"nodes\" | \"edges\" | \"nodeTypes\"> {\n  /** Flow content: background, controls, and minimap. */\n  children?: React.ReactNode;\n  /** Flow nodes. */\n  nodes?: Node<NodeData, NodeType>[];\n  /** Flow edges. */\n  edges?: Edge[];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowClasses;\n  /** Callback called when the flow changes. Returns the updated nodes and edges. */\n  onFlowChange?: (nodes: Node<NodeData, NodeType>[], edges: Edge[]) => void;\n  /**\n   * Callback called when a node is dropped in the flow.\n   *\n   * This callback should be used to override the custom UI Kit drop event.\n   * Thus, when defined, the user is responsible for adding nodes to the flow.\n   *\n   * This callback is called when `HvFlowSidebar` is used or a custom sidebar was created using Dnd Kit.\n   * When a custom sidebar was created using the native HTML drag and drop API, refer to the `onDrop` callback.\n   *\n   * Returns the event and the node to be added to the flow.\n   */\n  onDndDrop?: (event: DragEndEvent, node: Node) => void;\n}\n\nexport const getNode = (nodes: Node[], nodeId: string) => {\n  return nodes.find((n) => n.id === nodeId);\n};\n\nconst validateEdge = (\n  nodes: Node[],\n  edges: Edge[],\n  edge: Edge,\n  nodeMetaRegistry: HvFlowNodeMetaRegistry\n) => {\n  if (!edge.sourceHandle || !edge.targetHandle) return false;\n\n  const sourceNode = getNode(nodes, edge.source);\n  const targetNode = getNode(nodes, edge.target);\n\n  if (!sourceNode || !targetNode) return false;\n\n  const sourceType = sourceNode.type;\n  const targetType = targetNode.type;\n\n  if (!sourceType || !targetType) return false;\n\n  const inputs = nodeMetaRegistry[edge.target]?.inputs || [];\n  const outputs = nodeMetaRegistry[edge.source]?.outputs || [];\n\n  const sourceProvides = outputs[edge.sourceHandle]?.provides || \"\";\n  const targetAccepts = inputs[edge.targetHandle]?.accepts || [];\n  const sourceMaxConnections = outputs[edge.sourceHandle]?.maxConnections;\n  const targetMaxConnections = inputs[edge.targetHandle]?.maxConnections;\n\n  let isValid =\n    targetAccepts.length === 0 || targetAccepts.includes(sourceProvides);\n\n  if (isValid && targetMaxConnections != null) {\n    const targetConnections = edges.filter(\n      (edg) =>\n        edg.target === edge.target && edg.targetHandle === edge.targetHandle\n    ).length;\n\n    isValid = targetConnections < targetMaxConnections;\n  }\n\n  if (isValid && sourceMaxConnections != null) {\n    const sourceConnections = edges.filter(\n      (edg) =>\n        edg.source === edge.source && edg.sourceHandle === edge.sourceHandle\n    ).length;\n\n    isValid = sourceConnections < sourceMaxConnections;\n  }\n\n  return isValid;\n};\n\nexport const HvDroppableFlow = ({\n  id,\n  className,\n  children,\n  onFlowChange,\n  onDndDrop,\n  classes: classesProp,\n  nodes: initialNodes = [],\n  edges: initialEdges = [],\n  onConnect: onConnectProp,\n  onNodesChange: onNodesChangeProp,\n  onEdgesChange: onEdgesChangeProp,\n  defaultEdgeOptions: defaultEdgeOptionsProp,\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?.id !== elementId) return;\n\n      const hvFlow = event.active.data.current?.hvFlow;\n      const type = hvFlow?.type;\n\n      // Only known node types can be dropped in the canvas\n      if (!type || !nodeTypes?.[type]) {\n        if (import.meta.env.DEV) {\n          // eslint-disable-next-line no-console\n          console.error(\n            `Could not add node to the flow because of unknown type ${type}. Use nodeTypes to define all the node types.`\n          );\n        }\n        return;\n      }\n\n      // Converts the coordinates to the react flow coordinate system\n      const position = reactFlowInstance.project({\n        x: (hvFlow?.x || 0) - event.over.rect.left,\n        y: (hvFlow?.y || 0) - event.over.rect.top,\n      });\n\n      // Node data\n      const data = hvFlow?.data || {};\n\n      // Node to add\n      const newNode: Node = {\n        id: uid(),\n        position,\n        data,\n        type,\n      };\n\n      // Drop override\n      if (onDndDrop) {\n        onDndDrop(event, newNode);\n        return;\n      }\n\n      setNodes((nds) => nds.concat(newNode));\n    },\n    [elementId, nodeTypes, onDndDrop, reactFlowInstance]\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  const { registry } = useNodeMetaRegistry();\n  const isValidConnection = (connection) =>\n    validateEdge(nodes, edges, connection, registry);\n\n  const defaultEdgeOptions = {\n    markerEnd: {\n      type: MarkerType.ArrowClosed,\n      height: 20,\n      width: 20,\n    },\n    type: \"smoothstep\",\n    pathOptions: {\n      borderRadius: 40,\n    },\n    ...defaultEdgeOptionsProp,\n  };\n\n  return (\n    <>\n      <Global styles={flowStyles} />\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          isValidConnection={isValidConnection}\n          defaultEdgeOptions={defaultEdgeOptions}\n          snapGrid={[1, 1]}\n          snapToGrid\n          onError={(code, message) => {\n            if (import.meta.env.DEV) {\n              // eslint-disable-next-line no-console\n              console.error(message);\n            }\n          }}\n          {...others}\n        >\n          {children}\n        </ReactFlow>\n      </div>\n    </>\n  );\n};\n"],"names":["getNode","nodes","nodeId","find","n","id","validateEdge","edges","edge","nodeMetaRegistry","sourceHandle","targetHandle","sourceNode","source","targetNode","target","sourceType","type","targetType","inputs","outputs","sourceProvides","provides","targetAccepts","accepts","sourceMaxConnections","maxConnections","targetMaxConnections","isValid","length","includes","targetConnections","filter","edg","sourceConnections","HvDroppableFlow","className","children","onFlowChange","onDndDrop","classes","classesProp","initialNodes","initialEdges","onConnect","onConnectProp","onNodesChange","onNodesChangeProp","onEdgesChange","onEdgesChangeProp","defaultEdgeOptions","defaultEdgeOptionsProp","others","cx","useClasses","elementId","useUniqueId","reactFlowInstance","useReactFlow","nodeTypes","useFlowContext","setNodes","useState","setEdges","setNodeRef","useDroppable","handleDragEnd","useCallback","event","over","hvFlow","active","data","current","position","project","x","rect","left","y","top","newNode","uid","nds","concat","onDragEnd","handleFlowChange","eds","isDragging","node","dragging","handleConnect","connection","addEdge","handleNodesChange","changes","applyNodeChanges","handleEdgesChange","applyEdgeChanges","registry","useNodeMetaRegistry","isValidConnection","markerEnd","MarkerType","ArrowClosed","height","width","pathOptions","borderRadius","flowStyles","root","code","message"],"mappings":"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"}
+{"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  MarkerType,\n  Edge,\n  Node,\n} from \"reactflow\";\n\nimport { Global } from \"@emotion/react\";\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 { HvFlowNodeMetaRegistry } from \"./types\";\nimport { staticClasses, useClasses } from \"./Flow.styles\";\nimport { useFlowContext } from \"./hooks\";\nimport { flowStyles } from \"./base\";\nimport { useNodeMetaRegistry } from \"./FlowContext/NodeMetaContext\";\n\nexport { staticClasses as flowClasses };\n\nexport type HvFlowClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDroppableFlowProps<\n  NodeType extends string | undefined = string | undefined,\n  NodeData = any\n> extends Omit<ReactFlowProps, \"nodes\" | \"edges\" | \"nodeTypes\"> {\n  /** Flow content: background, controls, and minimap. */\n  children?: React.ReactNode;\n  /** Flow nodes. */\n  nodes?: Node<NodeData, NodeType>[];\n  /** Flow edges. */\n  edges?: Edge[];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowClasses;\n  /** Callback called when the flow changes. Returns the updated nodes and edges. */\n  onFlowChange?: (nodes: Node<NodeData, NodeType>[], edges: Edge[]) => void;\n  /**\n   * Callback called when a node is dropped in the flow.\n   *\n   * This callback should be used to override the custom UI Kit drop event.\n   * Thus, when defined, the user is responsible for adding nodes to the flow.\n   *\n   * This callback is called when `HvFlowSidebar` is used or a custom sidebar was created using Dnd Kit.\n   * When a custom sidebar was created using the native HTML drag and drop API, refer to the `onDrop` callback.\n   *\n   * Returns the event and the node to be added to the flow.\n   */\n  onDndDrop?: (event: DragEndEvent, node: Node) => void;\n}\n\nexport const getNode = (nodes: Node[], nodeId: string) => {\n  return nodes.find((n) => n.id === nodeId);\n};\n\nconst validateEdge = (\n  nodes: Node[],\n  edges: Edge[],\n  edge: Edge,\n  nodeMetaRegistry: HvFlowNodeMetaRegistry\n) => {\n  if (!edge.sourceHandle || !edge.targetHandle) return false;\n\n  const sourceNode = getNode(nodes, edge.source);\n  const targetNode = getNode(nodes, edge.target);\n\n  if (!sourceNode || !targetNode) return false;\n\n  const sourceType = sourceNode.type;\n  const targetType = targetNode.type;\n\n  if (!sourceType || !targetType) return false;\n\n  const inputs = nodeMetaRegistry[edge.target]?.inputs || [];\n  const outputs = nodeMetaRegistry[edge.source]?.outputs || [];\n\n  const sourceProvides = outputs[edge.sourceHandle]?.provides || \"\";\n  const targetAccepts = inputs[edge.targetHandle]?.accepts || [];\n  const sourceMaxConnections = outputs[edge.sourceHandle]?.maxConnections;\n  const targetMaxConnections = inputs[edge.targetHandle]?.maxConnections;\n\n  let isValid =\n    targetAccepts.length === 0 || targetAccepts.includes(sourceProvides);\n\n  if (isValid && targetMaxConnections != null) {\n    const targetConnections = edges.filter(\n      (edg) =>\n        edg.target === edge.target && edg.targetHandle === edge.targetHandle\n    ).length;\n\n    isValid = targetConnections < targetMaxConnections;\n  }\n\n  if (isValid && sourceMaxConnections != null) {\n    const sourceConnections = edges.filter(\n      (edg) =>\n        edg.source === edge.source && edg.sourceHandle === edge.sourceHandle\n    ).length;\n\n    isValid = sourceConnections < sourceMaxConnections;\n  }\n\n  return isValid;\n};\n\nexport const HvDroppableFlow = ({\n  id,\n  className,\n  children,\n  onFlowChange,\n  onDndDrop,\n  classes: classesProp,\n  nodes: initialNodes = [],\n  edges: initialEdges = [],\n  onConnect: onConnectProp,\n  onNodesChange: onNodesChangeProp,\n  onEdgesChange: onEdgesChangeProp,\n  defaultEdgeOptions: defaultEdgeOptionsProp,\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?.id !== elementId) return;\n\n      const hvFlow = event.active.data.current?.hvFlow;\n      const type = hvFlow?.type;\n\n      // Only known node types can be dropped in the canvas\n      if (!type || !nodeTypes?.[type]) {\n        if (import.meta.env.DEV) {\n          // eslint-disable-next-line no-console\n          console.error(\n            `Could not add node to the flow because of unknown type ${type}. Use nodeTypes to define all the node types.`\n          );\n        }\n        return;\n      }\n\n      // Converts the coordinates to the react flow coordinate system\n      const position = reactFlowInstance.project({\n        x: (hvFlow?.x || 0) - event.over.rect.left,\n        y: (hvFlow?.y || 0) - event.over.rect.top,\n      });\n\n      // Node data\n      const data = hvFlow?.data || {};\n\n      // Node to add\n      const newNode: Node = {\n        id: uid(),\n        position,\n        data,\n        type,\n      };\n\n      // Drop override\n      if (onDndDrop) {\n        onDndDrop(event, newNode);\n        return;\n      }\n\n      setNodes((nds) => nds.concat(newNode));\n    },\n    [elementId, nodeTypes, onDndDrop, reactFlowInstance]\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  const { registry } = useNodeMetaRegistry();\n  const isValidConnection = (connection) =>\n    validateEdge(nodes, edges, connection, registry);\n\n  const defaultEdgeOptions = {\n    markerEnd: {\n      type: MarkerType.ArrowClosed,\n      height: 20,\n      width: 20,\n    },\n    type: \"smoothstep\",\n    pathOptions: {\n      borderRadius: 40,\n    },\n    ...defaultEdgeOptionsProp,\n  };\n\n  return (\n    <>\n      <Global styles={flowStyles} />\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          isValidConnection={isValidConnection}\n          defaultEdgeOptions={defaultEdgeOptions}\n          snapGrid={[1, 1]}\n          snapToGrid\n          onError={(code, message) => {\n            if (import.meta.env.DEV) {\n              // eslint-disable-next-line no-console\n              console.error(message);\n            }\n          }}\n          {...others}\n        >\n          {children}\n        </ReactFlow>\n      </div>\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}

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

@@ -2,14 +2,8 @@ import { jsx } from "@emotion/react/jsx-runtime";
 import { useNodes } from "reactflow";
 import { HvEmptyState } from "@hitachivantara/uikit-react-core";
 import { useClasses } from "./Empty.styles.js";
-const HvFlowEmpty = ({
-  className,
-  ...others
-}) => {
-  const {
-    classes,
-    cx
-  } = useClasses();
+const HvFlowEmpty = ({ className, ...others }) => {
+  const { classes, cx } = useClasses();
   const nodes = useNodes();
   return !nodes || (nodes.length === 0 ? /* @__PURE__ */ jsx(HvEmptyState, { className: cx(classes.root, className), ...others }) : null);
 };