@hitachivantara/uikit-react-lab 5.19.3 → 5.20.0

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

@@ -1 +1 @@
-{"version":3,"file":"Flow.cjs","sources":["../../../src/Flow/Flow.tsx"],"sourcesContent":["import {\n  DndContext,\n  DndContextProps,\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 { HvFlowNodeAction, HvFlowNodeGroups, HvFlowNodeTypes } from \"./types\";\nimport { HvFlowProvider } from \"./FlowContext\";\nimport { HvDroppableFlow, HvDroppableFlowProps } from \"./DroppableFlow\";\n\nexport interface HvFlowProps<\n  NodeGroups extends keyof any = string,\n  NodeType extends string | undefined = string | undefined,\n  NodeData = any\n> extends HvDroppableFlowProps<NodeType, NodeData> {\n  /** Flow nodes groups. */\n  nodeGroups?: HvFlowNodeGroups<NodeGroups>;\n  /** Flow nodes types. */\n  nodeTypes?: HvFlowNodeTypes<NodeGroups, NodeData>;\n  /** Flow sidebar. */\n  sidebar?: React.ReactNode;\n  /** Flow default actions. */\n  defaultActions?: HvFlowNodeAction[];\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  defaultActions,\n  dndContextProps,\n  ...others\n}: HvFlowProps) => {\n  const sensors = useSensors(\n    useSensor(PointerSensor),\n    useSensor(KeyboardSensor)\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\n        nodeGroups={nodeGroups}\n        nodeTypes={nodeTypes}\n        defaultActions={defaultActions}\n      >\n        <DndContext\n          sensors={sensors}\n          modifiers={[restrictToWindowEdges]}\n          {...dndContextProps}\n        >\n          <HvDroppableFlow {...others} />\n          {sidebar}\n        </DndContext>\n      </HvFlowProvider>\n    </ReactFlowProvider>\n  );\n};\n"],"names":["useSensors","useSensor","PointerSensor","KeyboardSensor","ReactFlowProvider","jsx","HvFlowProvider","jsxs","DndContext","restrictToWindowEdges","HvDroppableFlow"],"mappings":";;;;;;;;AA6CO,MAAM,SAAS,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAmB;AACjB,QAAM,UAAUA,KAAA;AAAA,IACdC,KAAAA,UAAUC,KAAAA,aAAa;AAAA,IACvBD,KAAAA,UAAUE,KAAAA,cAAc;AAAA,EAAA;AAK1B,wCACGC,UAAAA,mBACC,EAAA,UAAAC,2BAAA;AAAA,IAACC,YAAA;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MAEA,UAAAC,2BAAA;AAAA,QAACC,KAAA;AAAA,QAAA;AAAA,UACC;AAAA,UACA,WAAW,CAACC,UAAAA,qBAAqB;AAAA,UAChC,GAAG;AAAA,UAEJ,UAAA;AAAA,YAACJ,2BAAAA,IAAAK,cAAA,iBAAA,EAAiB,GAAG,QAAQ;AAAA,YAC5B;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;;"}
+{"version":3,"file":"Flow.cjs","sources":["../../../src/Flow/Flow.tsx"],"sourcesContent":["import {\n  DndContext,\n  DndContextProps,\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 { HvFlowNodeAction, HvFlowNodeGroups, HvFlowNodeTypes } from \"./types\";\nimport { HvFlowProvider } from \"./FlowContext\";\nimport { HvDroppableFlow, HvDroppableFlowProps } from \"./DroppableFlow\";\n\nexport interface HvFlowProps<\n  NodeGroups extends keyof any = string,\n  NodeType extends string | undefined = string | undefined,\n  NodeData = any\n> extends HvDroppableFlowProps<NodeType, NodeData> {\n  /** Flow nodes groups. */\n  nodeGroups?: HvFlowNodeGroups<NodeGroups>;\n  /** Flow nodes types. */\n  nodeTypes?: HvFlowNodeTypes<NodeGroups, NodeData>;\n  /** Flow sidebar. */\n  sidebar?: React.ReactNode;\n  /** Flow default actions. */\n  defaultActions?: HvFlowNodeAction[];\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 * Take a look at the [usage page](https://lumada-design.github.io/uikit/master/?path=/docs/lab-flow-usage--docs) to learn more about this component.\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  defaultActions,\n  dndContextProps,\n  ...others\n}: HvFlowProps) => {\n  const sensors = useSensors(\n    useSensor(PointerSensor),\n    useSensor(KeyboardSensor)\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\n        nodeGroups={nodeGroups}\n        nodeTypes={nodeTypes}\n        defaultActions={defaultActions}\n      >\n        <DndContext\n          sensors={sensors}\n          modifiers={[restrictToWindowEdges]}\n          {...dndContextProps}\n        >\n          <HvDroppableFlow {...others} />\n          {sidebar}\n        </DndContext>\n      </HvFlowProvider>\n    </ReactFlowProvider>\n  );\n};\n"],"names":["useSensors","useSensor","PointerSensor","KeyboardSensor","ReactFlowProvider","jsx","HvFlowProvider","jsxs","DndContext","restrictToWindowEdges","HvDroppableFlow"],"mappings":";;;;;;;;AA+CO,MAAM,SAAS,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAmB;AACjB,QAAM,UAAUA,KAAA;AAAA,IACdC,KAAAA,UAAUC,KAAAA,aAAa;AAAA,IACvBD,KAAAA,UAAUE,KAAAA,cAAc;AAAA,EAAA;AAK1B,wCACGC,UAAAA,mBACC,EAAA,UAAAC,2BAAA;AAAA,IAACC,YAAA;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MAEA,UAAAC,2BAAA;AAAA,QAACC,KAAA;AAAA,QAAA;AAAA,UACC;AAAA,UACA,WAAW,CAACC,UAAAA,qBAAqB;AAAA,UAChC,GAAG;AAAA,UAEJ,UAAA;AAAA,YAACJ,2BAAAA,IAAAK,cAAA,iBAAA,EAAiB,GAAG,QAAQ;AAAA,YAC5B;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;;"}

package/dist/cjs/Flow/nodes/DashboardNode.cjs

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+const Node = require("../Node/Node.cjs");
+const Dashboard = require("../../Dashboard/Dashboard.cjs");
+const { staticClasses, useClasses } = uikitReactCore.createClasses("HvDashboardNode", {
+  actions: {
+    display: "flex",
+    justifyContent: "space-around",
+    padding: uikitReactCore.theme.space.xs
+  },
+  empty: {
+    padding: uikitReactCore.theme.spacing("sm", 0, 0, 0)
+  }
+});
+const DEFAULT_LABELS = {
+  title: "Dashboard",
+  description: "Dashboard",
+  emptyMessage: "No visualizations connected to the dashboard.",
+  dialogTitle: "Configure dashboard",
+  dialogSubtitle: "Please configure the layout of your dashboard as needed.",
+  dialogApply: "Apply",
+  dialogCancel: "Cancel"
+};
+const HvDashboardNode = (props) => {
+  const {
+    id,
+    open,
+    layout,
+    labels: labelsProp,
+    classes: classesProp,
+    previewItems,
+    children,
+    dialogProps,
+    dashboardProps,
+    onApply,
+    onCancel,
+    onClose,
+    ...others
+  } = props;
+  const labels = uikitReactCore.useLabels(DEFAULT_LABELS, labelsProp);
+  const { classes } = useClasses(classesProp);
+  return /* @__PURE__ */ jsxRuntime.jsxs(Node.HvFlowNode, { id, classes, ...others, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.actions, children }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      uikitReactCore.HvDialog,
+      {
+        open,
+        maxWidth: "lg",
+        fullWidth: true,
+        onClose,
+        ...dialogProps,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvDialogTitle, { variant: "info", children: labels?.dialogTitle }),
+          /* @__PURE__ */ jsxRuntime.jsxs(uikitReactCore.HvDialogContent, { indentContent: true, children: [
+            labels?.dialogSubtitle,
+            layout && layout?.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+              Dashboard.HvDashboard,
+              {
+                cols: 12,
+                layout,
+                compactType: "vertical",
+                rowHeight: 80,
+                margin: [16, 16],
+                containerPadding: [0, 16],
+                ...dashboardProps,
+                children: previewItems
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
+              uikitReactCore.HvEmptyState,
+              {
+                className: classes.empty,
+                icon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Info, { role: "none" }),
+                message: labels?.emptyMessage
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(uikitReactCore.HvDialogActions, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, { variant: "primary", onClick: onApply, children: labels?.dialogApply }),
+            /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, { variant: "secondarySubtle", onClick: onCancel, children: labels?.dialogCancel })
+          ] })
+        ]
+      }
+    )
+  ] });
+};
+exports.HvDashboardNode = HvDashboardNode;
+exports.hvDashboardNodeClasses = staticClasses;
+//# sourceMappingURL=DashboardNode.cjs.map

package/dist/cjs/Flow/nodes/DashboardNode.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardNode.cjs","sources":["../../../../src/Flow/nodes/DashboardNode.tsx"],"sourcesContent":["import {\n  ExtractNames,\n  HvButton,\n  HvDialog,\n  HvDialogActions,\n  HvDialogContent,\n  HvDialogProps,\n  HvDialogTitle,\n  HvEmptyState,\n  createClasses,\n  theme,\n  useLabels,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Info } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvDashboard, HvDashboardProps } from \"../../Dashboard\";\nimport { HvFlowNode, HvFlowNodeProps, HvFlowNodeClasses } from \"../Node\";\n\nconst { staticClasses, useClasses } = createClasses(\"HvDashboardNode\", {\n  actions: {\n    display: \"flex\",\n    justifyContent: \"space-around\",\n    padding: theme.space.xs,\n  },\n  empty: {\n    padding: theme.spacing(\"sm\", 0, 0, 0),\n  },\n});\n\nexport { staticClasses as hvDashboardNodeClasses };\n\nconst DEFAULT_LABELS = {\n  title: \"Dashboard\",\n  description: \"Dashboard\",\n  emptyMessage: \"No visualizations connected to the dashboard.\",\n  dialogTitle: \"Configure dashboard\",\n  dialogSubtitle: \"Please configure the layout of your dashboard as needed.\",\n  dialogApply: \"Apply\",\n  dialogCancel: \"Cancel\",\n};\n\nexport interface HvDashboardNodeClasses\n  extends ExtractNames<typeof useClasses>,\n    HvFlowNodeClasses {}\n\nexport interface HvDashboardNodeProps\n  extends HvFlowNodeProps,\n    Pick<HvDialogProps, \"open\" | \"onClose\">,\n    Pick<HvDashboardProps, \"layout\"> {\n  classes?: HvDashboardNodeClasses;\n  labels?: typeof DEFAULT_LABELS;\n  previewItems?: React.ReactNode;\n  onApply?: () => void;\n  onCancel?: () => void;\n\n  dashboardProps?: Omit<HvDashboardProps, \"children\">;\n  dialogProps?: HvDialogProps;\n}\n\nexport const HvDashboardNode = (props: HvDashboardNodeProps) => {\n  const {\n    id,\n    open,\n    layout,\n    labels: labelsProp,\n    classes: classesProp,\n    previewItems,\n    children,\n    dialogProps,\n    dashboardProps,\n    onApply,\n    onCancel,\n    onClose,\n    ...others\n  } = props;\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n  const { classes } = useClasses(classesProp);\n\n  return (\n    <HvFlowNode id={id} classes={classes as any} {...others}>\n      <div className={classes.actions}>{children}</div>\n      <HvDialog\n        open={open}\n        maxWidth=\"lg\"\n        fullWidth\n        onClose={onClose}\n        {...dialogProps}\n      >\n        <HvDialogTitle variant=\"info\">{labels?.dialogTitle}</HvDialogTitle>\n        <HvDialogContent indentContent>\n          {labels?.dialogSubtitle}\n          {layout && layout?.length > 0 ? (\n            <HvDashboard\n              cols={12}\n              layout={layout}\n              compactType=\"vertical\"\n              rowHeight={80}\n              margin={[16, 16]}\n              containerPadding={[0, 16]}\n              {...dashboardProps}\n            >\n              {previewItems}\n            </HvDashboard>\n          ) : (\n            <HvEmptyState\n              className={classes.empty}\n              icon={<Info role=\"none\" />}\n              message={labels?.emptyMessage}\n            />\n          )}\n        </HvDialogContent>\n        <HvDialogActions>\n          <HvButton variant=\"primary\" onClick={onApply}>\n            {labels?.dialogApply}\n          </HvButton>\n          <HvButton variant=\"secondarySubtle\" onClick={onCancel}>\n            {labels?.dialogCancel}\n          </HvButton>\n        </HvDialogActions>\n      </HvDialog>\n    </HvFlowNode>\n  );\n};\n"],"names":["createClasses","theme","useLabels","jsxs","HvFlowNode","jsx","HvDialog","HvDialogTitle","HvDialogContent","HvDashboard","HvEmptyState","Info","HvDialogActions","HvButton"],"mappings":";;;;;;;AAkBA,MAAM,EAAE,eAAe,eAAeA,eAAAA,cAAc,mBAAmB;AAAA,EACrE,SAAS;AAAA,IACP,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,SAASC,eAAAA,MAAM,MAAM;AAAA,EACvB;AAAA,EACA,OAAO;AAAA,IACL,SAASA,eAAM,MAAA,QAAQ,MAAM,GAAG,GAAG,CAAC;AAAA,EACtC;AACF,CAAC;AAID,MAAM,iBAAiB;AAAA,EACrB,OAAO;AAAA,EACP,aAAa;AAAA,EACb,cAAc;AAAA,EACd,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,cAAc;AAChB;AAoBa,MAAA,kBAAkB,CAAC,UAAgC;AACxD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACD,IAAA;AACE,QAAA,SAASC,eAAAA,UAAU,gBAAgB,UAAU;AACnD,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAE1C,SACGC,2BAAAA,KAAAC,KAAAA,YAAA,EAAW,IAAQ,SAA0B,GAAG,QAC/C,UAAA;AAAA,IAAAC,2BAAA,IAAC,OAAI,EAAA,WAAW,QAAQ,SAAU,UAAS;AAAA,IAC3CF,2BAAA;AAAA,MAACG,eAAA;AAAA,MAAA;AAAA,QACC;AAAA,QACA,UAAS;AAAA,QACT,WAAS;AAAA,QACT;AAAA,QACC,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAAD,2BAAA,IAACE,eAAc,eAAA,EAAA,SAAQ,QAAQ,UAAA,QAAQ,aAAY;AAAA,UACnDJ,2BAAAA,KAACK,eAAAA,iBAAgB,EAAA,eAAa,MAC3B,UAAA;AAAA,YAAQ,QAAA;AAAA,YACR,UAAU,QAAQ,SAAS,IAC1BH,2BAAA;AAAA,cAACI,UAAA;AAAA,cAAA;AAAA,gBACC,MAAM;AAAA,gBACN;AAAA,gBACA,aAAY;AAAA,gBACZ,WAAW;AAAA,gBACX,QAAQ,CAAC,IAAI,EAAE;AAAA,gBACf,kBAAkB,CAAC,GAAG,EAAE;AAAA,gBACvB,GAAG;AAAA,gBAEH,UAAA;AAAA,cAAA;AAAA,YAAA,IAGHJ,2BAAA;AAAA,cAACK,eAAA;AAAA,cAAA;AAAA,gBACC,WAAW,QAAQ;AAAA,gBACnB,MAAML,2BAAAA,IAACM,gBAAAA,MAAK,EAAA,MAAK,OAAO,CAAA;AAAA,gBACxB,SAAS,QAAQ;AAAA,cAAA;AAAA,YACnB;AAAA,UAAA,GAEJ;AAAA,0CACCC,eAAAA,iBACC,EAAA,UAAA;AAAA,YAAAP,+BAACQ,eAAAA,YAAS,SAAQ,WAAU,SAAS,SAClC,kBAAQ,aACX;AAAA,2CACCA,eAAAA,UAAS,EAAA,SAAQ,mBAAkB,SAAS,UAC1C,kBAAQ,cACX;AAAA,UAAA,GACF;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EACF,EAAA,CAAA;AAEJ;;;"}

package/dist/cjs/index.cjs

@@ -15,6 +15,7 @@ const BaseNode_styles = require("./Flow/Node/BaseNode.styles.cjs");
 const BaseNode = require("./Flow/Node/BaseNode.cjs");
 const Node_styles = require("./Flow/Node/Node.styles.cjs");
 const Node = require("./Flow/Node/Node.cjs");
+const DashboardNode = require("./Flow/nodes/DashboardNode.cjs");
 const useFlowNode = require("./Flow/hooks/useFlowNode.cjs");
 const useFlowContext = require("./Flow/hooks/useFlowContext.cjs");
 const useFlowNodeMeta = require("./Flow/hooks/useFlowNodeMeta.cjs");
@@ -46,6 +47,8 @@ exports.flowBaseNodeClasses = BaseNode_styles.staticClasses;
 exports.HvFlowBaseNode = BaseNode.HvFlowBaseNode;
 exports.flowNodeClasses = Node_styles.staticClasses;
 exports.HvFlowNode = Node.HvFlowNode;
+exports.HvDashboardNode = DashboardNode.HvDashboardNode;
+exports.hvDashboardNodeClasses = DashboardNode.hvDashboardNodeClasses;
 exports.useFlowInputNodes = useFlowNode.useFlowInputNodes;
 exports.useFlowNode = useFlowNode.useFlowNode;
 exports.useFlowNodeEdges = useFlowNode.useFlowNodeEdges;

package/dist/cjs/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"Flow.js","sources":["../../../src/Flow/Flow.tsx"],"sourcesContent":["import {\n  DndContext,\n  DndContextProps,\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 { HvFlowNodeAction, HvFlowNodeGroups, HvFlowNodeTypes } from \"./types\";\nimport { HvFlowProvider } from \"./FlowContext\";\nimport { HvDroppableFlow, HvDroppableFlowProps } from \"./DroppableFlow\";\n\nexport interface HvFlowProps<\n  NodeGroups extends keyof any = string,\n  NodeType extends string | undefined = string | undefined,\n  NodeData = any\n> extends HvDroppableFlowProps<NodeType, NodeData> {\n  /** Flow nodes groups. */\n  nodeGroups?: HvFlowNodeGroups<NodeGroups>;\n  /** Flow nodes types. */\n  nodeTypes?: HvFlowNodeTypes<NodeGroups, NodeData>;\n  /** Flow sidebar. */\n  sidebar?: React.ReactNode;\n  /** Flow default actions. */\n  defaultActions?: HvFlowNodeAction[];\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  defaultActions,\n  dndContextProps,\n  ...others\n}: HvFlowProps) => {\n  const sensors = useSensors(\n    useSensor(PointerSensor),\n    useSensor(KeyboardSensor)\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\n        nodeGroups={nodeGroups}\n        nodeTypes={nodeTypes}\n        defaultActions={defaultActions}\n      >\n        <DndContext\n          sensors={sensors}\n          modifiers={[restrictToWindowEdges]}\n          {...dndContextProps}\n        >\n          <HvDroppableFlow {...others} />\n          {sidebar}\n        </DndContext>\n      </HvFlowProvider>\n    </ReactFlowProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;;AA6CO,MAAM,SAAS,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAmB;AACjB,QAAM,UAAU;AAAA,IACd,UAAU,aAAa;AAAA,IACvB,UAAU,cAAc;AAAA,EAAA;AAK1B,6BACG,mBACC,EAAA,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MAEA,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,WAAW,CAAC,qBAAqB;AAAA,UAChC,GAAG;AAAA,UAEJ,UAAA;AAAA,YAAC,oBAAA,iBAAA,EAAiB,GAAG,QAAQ;AAAA,YAC5B;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"Flow.js","sources":["../../../src/Flow/Flow.tsx"],"sourcesContent":["import {\n  DndContext,\n  DndContextProps,\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 { HvFlowNodeAction, HvFlowNodeGroups, HvFlowNodeTypes } from \"./types\";\nimport { HvFlowProvider } from \"./FlowContext\";\nimport { HvDroppableFlow, HvDroppableFlowProps } from \"./DroppableFlow\";\n\nexport interface HvFlowProps<\n  NodeGroups extends keyof any = string,\n  NodeType extends string | undefined = string | undefined,\n  NodeData = any\n> extends HvDroppableFlowProps<NodeType, NodeData> {\n  /** Flow nodes groups. */\n  nodeGroups?: HvFlowNodeGroups<NodeGroups>;\n  /** Flow nodes types. */\n  nodeTypes?: HvFlowNodeTypes<NodeGroups, NodeData>;\n  /** Flow sidebar. */\n  sidebar?: React.ReactNode;\n  /** Flow default actions. */\n  defaultActions?: HvFlowNodeAction[];\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 * Take a look at the [usage page](https://lumada-design.github.io/uikit/master/?path=/docs/lab-flow-usage--docs) to learn more about this component.\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  defaultActions,\n  dndContextProps,\n  ...others\n}: HvFlowProps) => {\n  const sensors = useSensors(\n    useSensor(PointerSensor),\n    useSensor(KeyboardSensor)\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\n        nodeGroups={nodeGroups}\n        nodeTypes={nodeTypes}\n        defaultActions={defaultActions}\n      >\n        <DndContext\n          sensors={sensors}\n          modifiers={[restrictToWindowEdges]}\n          {...dndContextProps}\n        >\n          <HvDroppableFlow {...others} />\n          {sidebar}\n        </DndContext>\n      </HvFlowProvider>\n    </ReactFlowProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;;AA+CO,MAAM,SAAS,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAmB;AACjB,QAAM,UAAU;AAAA,IACd,UAAU,aAAa;AAAA,IACvB,UAAU,cAAc;AAAA,EAAA;AAK1B,6BACG,mBACC,EAAA,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MAEA,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,WAAW,CAAC,qBAAqB;AAAA,UAChC,GAAG;AAAA,UAEJ,UAAA;AAAA,YAAC,oBAAA,iBAAA,EAAiB,GAAG,QAAQ;AAAA,YAC5B;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}

package/dist/esm/Flow/nodes/DashboardNode.js

@@ -0,0 +1,91 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { createClasses, theme, useLabels, HvDialog, HvDialogTitle, HvDialogContent, HvEmptyState, HvDialogActions, HvButton } from "@hitachivantara/uikit-react-core";
+import { Info } from "@hitachivantara/uikit-react-icons";
+import { HvFlowNode } from "../Node/Node.js";
+import { HvDashboard } from "../../Dashboard/Dashboard.js";
+const { staticClasses, useClasses } = createClasses("HvDashboardNode", {
+  actions: {
+    display: "flex",
+    justifyContent: "space-around",
+    padding: theme.space.xs
+  },
+  empty: {
+    padding: theme.spacing("sm", 0, 0, 0)
+  }
+});
+const DEFAULT_LABELS = {
+  title: "Dashboard",
+  description: "Dashboard",
+  emptyMessage: "No visualizations connected to the dashboard.",
+  dialogTitle: "Configure dashboard",
+  dialogSubtitle: "Please configure the layout of your dashboard as needed.",
+  dialogApply: "Apply",
+  dialogCancel: "Cancel"
+};
+const HvDashboardNode = (props) => {
+  const {
+    id,
+    open,
+    layout,
+    labels: labelsProp,
+    classes: classesProp,
+    previewItems,
+    children,
+    dialogProps,
+    dashboardProps,
+    onApply,
+    onCancel,
+    onClose,
+    ...others
+  } = props;
+  const labels = useLabels(DEFAULT_LABELS, labelsProp);
+  const { classes } = useClasses(classesProp);
+  return /* @__PURE__ */ jsxs(HvFlowNode, { id, classes, ...others, children: [
+    /* @__PURE__ */ jsx("div", { className: classes.actions, children }),
+    /* @__PURE__ */ jsxs(
+      HvDialog,
+      {
+        open,
+        maxWidth: "lg",
+        fullWidth: true,
+        onClose,
+        ...dialogProps,
+        children: [
+          /* @__PURE__ */ jsx(HvDialogTitle, { variant: "info", children: labels?.dialogTitle }),
+          /* @__PURE__ */ jsxs(HvDialogContent, { indentContent: true, children: [
+            labels?.dialogSubtitle,
+            layout && layout?.length > 0 ? /* @__PURE__ */ jsx(
+              HvDashboard,
+              {
+                cols: 12,
+                layout,
+                compactType: "vertical",
+                rowHeight: 80,
+                margin: [16, 16],
+                containerPadding: [0, 16],
+                ...dashboardProps,
+                children: previewItems
+              }
+            ) : /* @__PURE__ */ jsx(
+              HvEmptyState,
+              {
+                className: classes.empty,
+                icon: /* @__PURE__ */ jsx(Info, { role: "none" }),
+                message: labels?.emptyMessage
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(HvDialogActions, { children: [
+            /* @__PURE__ */ jsx(HvButton, { variant: "primary", onClick: onApply, children: labels?.dialogApply }),
+            /* @__PURE__ */ jsx(HvButton, { variant: "secondarySubtle", onClick: onCancel, children: labels?.dialogCancel })
+          ] })
+        ]
+      }
+    )
+  ] });
+};
+export {
+  HvDashboardNode,
+  staticClasses as hvDashboardNodeClasses
+};
+//# sourceMappingURL=DashboardNode.js.map

package/dist/esm/Flow/nodes/DashboardNode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardNode.js","sources":["../../../../src/Flow/nodes/DashboardNode.tsx"],"sourcesContent":["import {\n  ExtractNames,\n  HvButton,\n  HvDialog,\n  HvDialogActions,\n  HvDialogContent,\n  HvDialogProps,\n  HvDialogTitle,\n  HvEmptyState,\n  createClasses,\n  theme,\n  useLabels,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Info } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvDashboard, HvDashboardProps } from \"../../Dashboard\";\nimport { HvFlowNode, HvFlowNodeProps, HvFlowNodeClasses } from \"../Node\";\n\nconst { staticClasses, useClasses } = createClasses(\"HvDashboardNode\", {\n  actions: {\n    display: \"flex\",\n    justifyContent: \"space-around\",\n    padding: theme.space.xs,\n  },\n  empty: {\n    padding: theme.spacing(\"sm\", 0, 0, 0),\n  },\n});\n\nexport { staticClasses as hvDashboardNodeClasses };\n\nconst DEFAULT_LABELS = {\n  title: \"Dashboard\",\n  description: \"Dashboard\",\n  emptyMessage: \"No visualizations connected to the dashboard.\",\n  dialogTitle: \"Configure dashboard\",\n  dialogSubtitle: \"Please configure the layout of your dashboard as needed.\",\n  dialogApply: \"Apply\",\n  dialogCancel: \"Cancel\",\n};\n\nexport interface HvDashboardNodeClasses\n  extends ExtractNames<typeof useClasses>,\n    HvFlowNodeClasses {}\n\nexport interface HvDashboardNodeProps\n  extends HvFlowNodeProps,\n    Pick<HvDialogProps, \"open\" | \"onClose\">,\n    Pick<HvDashboardProps, \"layout\"> {\n  classes?: HvDashboardNodeClasses;\n  labels?: typeof DEFAULT_LABELS;\n  previewItems?: React.ReactNode;\n  onApply?: () => void;\n  onCancel?: () => void;\n\n  dashboardProps?: Omit<HvDashboardProps, \"children\">;\n  dialogProps?: HvDialogProps;\n}\n\nexport const HvDashboardNode = (props: HvDashboardNodeProps) => {\n  const {\n    id,\n    open,\n    layout,\n    labels: labelsProp,\n    classes: classesProp,\n    previewItems,\n    children,\n    dialogProps,\n    dashboardProps,\n    onApply,\n    onCancel,\n    onClose,\n    ...others\n  } = props;\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n  const { classes } = useClasses(classesProp);\n\n  return (\n    <HvFlowNode id={id} classes={classes as any} {...others}>\n      <div className={classes.actions}>{children}</div>\n      <HvDialog\n        open={open}\n        maxWidth=\"lg\"\n        fullWidth\n        onClose={onClose}\n        {...dialogProps}\n      >\n        <HvDialogTitle variant=\"info\">{labels?.dialogTitle}</HvDialogTitle>\n        <HvDialogContent indentContent>\n          {labels?.dialogSubtitle}\n          {layout && layout?.length > 0 ? (\n            <HvDashboard\n              cols={12}\n              layout={layout}\n              compactType=\"vertical\"\n              rowHeight={80}\n              margin={[16, 16]}\n              containerPadding={[0, 16]}\n              {...dashboardProps}\n            >\n              {previewItems}\n            </HvDashboard>\n          ) : (\n            <HvEmptyState\n              className={classes.empty}\n              icon={<Info role=\"none\" />}\n              message={labels?.emptyMessage}\n            />\n          )}\n        </HvDialogContent>\n        <HvDialogActions>\n          <HvButton variant=\"primary\" onClick={onApply}>\n            {labels?.dialogApply}\n          </HvButton>\n          <HvButton variant=\"secondarySubtle\" onClick={onCancel}>\n            {labels?.dialogCancel}\n          </HvButton>\n        </HvDialogActions>\n      </HvDialog>\n    </HvFlowNode>\n  );\n};\n"],"names":[],"mappings":";;;;;AAkBA,MAAM,EAAE,eAAe,eAAe,cAAc,mBAAmB;AAAA,EACrE,SAAS;AAAA,IACP,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,SAAS,MAAM,MAAM;AAAA,EACvB;AAAA,EACA,OAAO;AAAA,IACL,SAAS,MAAM,QAAQ,MAAM,GAAG,GAAG,CAAC;AAAA,EACtC;AACF,CAAC;AAID,MAAM,iBAAiB;AAAA,EACrB,OAAO;AAAA,EACP,aAAa;AAAA,EACb,cAAc;AAAA,EACd,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,cAAc;AAChB;AAoBa,MAAA,kBAAkB,CAAC,UAAgC;AACxD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACD,IAAA;AACE,QAAA,SAAS,UAAU,gBAAgB,UAAU;AACnD,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAE1C,SACG,qBAAA,YAAA,EAAW,IAAQ,SAA0B,GAAG,QAC/C,UAAA;AAAA,IAAA,oBAAC,OAAI,EAAA,WAAW,QAAQ,SAAU,UAAS;AAAA,IAC3C;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,UAAS;AAAA,QACT,WAAS;AAAA,QACT;AAAA,QACC,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA,oBAAC,eAAc,EAAA,SAAQ,QAAQ,UAAA,QAAQ,aAAY;AAAA,UACnD,qBAAC,iBAAgB,EAAA,eAAa,MAC3B,UAAA;AAAA,YAAQ,QAAA;AAAA,YACR,UAAU,QAAQ,SAAS,IAC1B;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAM;AAAA,gBACN;AAAA,gBACA,aAAY;AAAA,gBACZ,WAAW;AAAA,gBACX,QAAQ,CAAC,IAAI,EAAE;AAAA,gBACf,kBAAkB,CAAC,GAAG,EAAE;AAAA,gBACvB,GAAG;AAAA,gBAEH,UAAA;AAAA,cAAA;AAAA,YAAA,IAGH;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAW,QAAQ;AAAA,gBACnB,MAAM,oBAAC,MAAK,EAAA,MAAK,OAAO,CAAA;AAAA,gBACxB,SAAS,QAAQ;AAAA,cAAA;AAAA,YACnB;AAAA,UAAA,GAEJ;AAAA,+BACC,iBACC,EAAA,UAAA;AAAA,YAAA,oBAAC,YAAS,SAAQ,WAAU,SAAS,SAClC,kBAAQ,aACX;AAAA,gCACC,UAAS,EAAA,SAAQ,mBAAkB,SAAS,UAC1C,kBAAQ,cACX;AAAA,UAAA,GACF;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/dist/esm/index.js

@@ -13,6 +13,7 @@ import { staticClasses as staticClasses5 } from "./Flow/Node/BaseNode.styles.js"
 import { HvFlowBaseNode } from "./Flow/Node/BaseNode.js";
 import { staticClasses as staticClasses6 } from "./Flow/Node/Node.styles.js";
 import { HvFlowNode } from "./Flow/Node/Node.js";
+import { HvDashboardNode, hvDashboardNodeClasses } from "./Flow/nodes/DashboardNode.js";
 import { useFlowInputNodes, useFlowNode, useFlowNodeEdges, useFlowNodeInputEdges, useFlowNodeOutputEdges, useFlowNodeParents, useFlowOutputNodes } from "./Flow/hooks/useFlowNode.js";
 import { useFlowContext } from "./Flow/hooks/useFlowContext.js";
 import { useFlowNodeMeta } from "./Flow/hooks/useFlowNodeMeta.js";
@@ -31,6 +32,7 @@ import { staticClasses as staticClasses12 } from "./Wizard/WizardTitle/WizardTit
 import { HvWizardTitle } from "./Wizard/WizardTitle/WizardTitle.js";
 export {
   HvDashboard,
+  HvDashboardNode,
   HvFlow,
   HvFlowBackground,
   HvFlowBaseNode,
@@ -52,6 +54,7 @@ export {
   staticClasses3 as flowMinimapClasses,
   staticClasses6 as flowNodeClasses,
   staticClasses4 as flowSidebarClasses,
+  hvDashboardNodeClasses,
   staticClasses7 as stepNavigationClasses,
   useFlowContext,
   useFlowInputNodes,

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/types/index.d.ts

@@ -36,6 +36,16 @@ export declare const dashboardClasses: {
     root: "HvDashboard-root";
 };
 
+declare const DEFAULT_LABELS: {
+    title: string;
+    description: string;
+    emptyMessage: string;
+    dialogTitle: string;
+    dialogSubtitle: string;
+    dialogApply: string;
+    dialogCancel: string;
+};
+
 export declare const flowBaseNodeClasses: {
     root: "HvFlowBaseNode-root";
     title: "HvFlowBaseNode-title";
@@ -87,6 +97,26 @@ export declare const HvDashboard: (props: HvDashboardProps) => JSX_2.Element;
 
 export declare type HvDashboardClasses = ExtractNames<typeof useClasses>;
 
+export declare const HvDashboardNode: (props: HvDashboardNodeProps) => JSX_2.Element;
+
+export declare interface HvDashboardNodeClasses extends ExtractNames<typeof useClasses_7>, HvFlowNodeClasses {
+}
+
+export declare const hvDashboardNodeClasses: {
+    empty: "HvDashboardNode-empty";
+    actions: "HvDashboardNode-actions";
+};
+
+export declare interface HvDashboardNodeProps extends HvFlowNodeProps, Pick<HvDialogProps, "open" | "onClose">, Pick<HvDashboardProps, "layout"> {
+    classes?: HvDashboardNodeClasses;
+    labels?: typeof DEFAULT_LABELS;
+    previewItems?: React.ReactNode;
+    onApply?: () => void;
+    onCancel?: () => void;
+    dashboardProps?: Omit<HvDashboardProps, "children">;
+    dialogProps?: HvDialogProps;
+}
+
 export declare interface HvDashboardProps extends Omit<ResponsiveProps, "cols"> {
     /** Dashboard items. Each node must be `key`'ed  */
     children: React.ReactNode;
@@ -135,6 +165,8 @@ declare interface HvDroppableFlowProps<NodeType extends string | undefined = str
  * This implementation leverages [React Flow](https://reactflow.dev).
  * The drag and drop functionality leverages [Dnd Kit](https://docs.dndkit.com)
  *
+ * Take a look at the [usage page](https://lumada-design.github.io/uikit/master/?path=/docs/lab-flow-usage--docs) to learn more about this component.
+ *
  * DISCLAIMER: This component is a work in progress and there might be breaking changes.
  */
 export declare const HvFlow: ({ nodeTypes, nodeGroups, sidebar, defaultActions, dndContextProps, ...others }: HvFlowProps) => JSX_2.Element;
@@ -391,7 +423,7 @@ export declare interface HvFlowSidebarProps extends Omit<HvDrawerProps, "classes
     defaultGroupProps?: HvFlowNodeGroup;
 }
 
-declare type HvStepClasses = ExtractNames<typeof useClasses_8>;
+declare type HvStepClasses = ExtractNames<typeof useClasses_9>;
 
 /**
  * Navigation page with steps.
@@ -416,7 +448,7 @@ declare type HvStepClasses = ExtractNames<typeof useClasses_8>;
  */
 export declare const HvStepNavigation: ({ className, classes: classesProp, width, steps, stepSize, showTitles, type, "aria-label": ariaLabel, ...others }: HvStepNavigationProps) => JSX_2.Element;
 
-export declare type HvStepNavigationClasses = ExtractNames<typeof useClasses_7>;
+export declare type HvStepNavigationClasses = ExtractNames<typeof useClasses_8>;
 
 export declare interface HvStepNavigationProps extends HvBaseProps {
     /** Type of step navigation. Values = {"Simple", "Default"} */
@@ -462,7 +494,7 @@ export declare const HvWizard: ({ className, children, onClose, handleSubmit, ti
 
 export declare const HvWizardActions: ({ classes: classesProp, handleClose, handleSubmit, loading, skippable, labels, }: HvWizardActionsProps) => JSX_2.Element;
 
-export declare type HvWizardActionsClasses = ExtractNames<typeof useClasses_10>;
+export declare type HvWizardActionsClasses = ExtractNames<typeof useClasses_11>;
 
 export declare interface HvWizardActionsProps extends HvBaseProps {
     /** Function to handle the cancel button. */
@@ -490,11 +522,11 @@ export declare interface HvWizardActionsProps extends HvBaseProps {
     classes?: HvWizardActionsClasses;
 }
 
-export declare type HvWizardClasses = ExtractNames<typeof useClasses_9>;
+export declare type HvWizardClasses = ExtractNames<typeof useClasses_10>;
 
 export declare const HvWizardContainer: (props: HvWizardContainerProps) => JSX_2.Element;
 
-export declare type HvWizardContainerClasses = ExtractNames<typeof useClasses_12>;
+export declare type HvWizardContainerClasses = ExtractNames<typeof useClasses_13>;
 
 export declare interface HvWizardContainerProps extends Omit<HvBaseProps, "onClose">, Pick<HvDialogProps, "maxWidth" | "fullWidth"> {
     /** Current state of the Wizard. */
@@ -507,7 +539,7 @@ export declare interface HvWizardContainerProps extends Omit<HvBaseProps, "onClo
 
 export declare const HvWizardContent: ({ classes: classesProp, fixedHeight, loading, children, summaryContent, }: HvWizardContentProps) => JSX_2.Element;
 
-export declare type HvWizardContentClasses = ExtractNames<typeof useClasses_13>;
+export declare type HvWizardContentClasses = ExtractNames<typeof useClasses_14>;
 
 export declare interface HvWizardContentProps extends HvBaseProps {
     /** Forces minimum height to the component. */
@@ -574,7 +606,7 @@ export declare type HvWizardTabs = {
 
 export declare const HvWizardTitle: ({ title, hasSummary, labels, classes: classesProp, customStep, }: HvWizardTitleProps) => JSX_2.Element;
 
-export declare type HvWizardTitleClasses = ExtractNames<typeof useClasses_11>;
+export declare type HvWizardTitleClasses = ExtractNames<typeof useClasses_12>;
 
 export declare interface HvWizardTitleProps extends HvBaseProps {
     /** Title for the wizard. */
@@ -615,7 +647,18 @@ declare const useClasses: (classesProp?: Partial<Record<"root", string>>, addSta
     cx: (...args: any) => string;
 };
 
-declare const useClasses_10: (classesProp?: Partial<Record<"actionsContainer" | "buttonWidth" | "buttonsContainer" | "buttonSpacing", string>>, addStatic?: boolean) => {
+declare const useClasses_10: (classesProp?: Partial<Record<"root", string>>, addStatic?: boolean) => {
+    classes: {
+        root: string;
+    };
+    css: {
+        (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
+        (...args: CSSInterpolation[]): string;
+    };
+    cx: (...args: any) => string;
+};
+
+declare const useClasses_11: (classesProp?: Partial<Record<"actionsContainer" | "buttonWidth" | "buttonsContainer" | "buttonSpacing", string>>, addStatic?: boolean) => {
     classes: {
         actionsContainer: string;
         buttonWidth: string;
@@ -629,7 +672,7 @@ declare const useClasses_10: (classesProp?: Partial<Record<"actionsContainer" |
     cx: (...args: any) => string;
 };
 
-declare const useClasses_11: (classesProp?: Partial<Record<"titleContainer" | "messageContainer" | "headerContainer" | "buttonWidth" | "rootSummaryButton" | "stepContainer", string>>, addStatic?: boolean) => {
+declare const useClasses_12: (classesProp?: Partial<Record<"titleContainer" | "messageContainer" | "headerContainer" | "buttonWidth" | "rootSummaryButton" | "stepContainer", string>>, addStatic?: boolean) => {
     classes: {
         titleContainer: string;
         messageContainer: string;
@@ -645,7 +688,7 @@ declare const useClasses_11: (classesProp?: Partial<Record<"titleContainer" | "m
     cx: (...args: any) => string;
 };
 
-declare const useClasses_12: (classesProp?: Partial<Record<"root" | "paper" | "closeButton", string>>, addStatic?: boolean) => {
+declare const useClasses_13: (classesProp?: Partial<Record<"root" | "paper" | "closeButton", string>>, addStatic?: boolean) => {
     classes: {
         root: string;
         paper: string;
@@ -658,7 +701,7 @@ declare const useClasses_12: (classesProp?: Partial<Record<"root" | "paper" | "c
     cx: (...args: any) => string;
 };
 
-declare const useClasses_13: (classesProp?: Partial<Record<"contentContainer" | "fixedHeight" | "summaryRef" | "summarySticky" | "summaryContainer", string>>, addStatic?: boolean) => {
+declare const useClasses_14: (classesProp?: Partial<Record<"contentContainer" | "fixedHeight" | "summaryRef" | "summarySticky" | "summaryContainer", string>>, addStatic?: boolean) => {
     classes: {
         contentContainer: string;
         fixedHeight: string;
@@ -747,7 +790,19 @@ declare const useClasses_6: (classesProp?: Partial<Record<"actions" | "subtitleC
     cx: (...args: any) => string;
 };
 
-declare const useClasses_7: (classesProp?: Partial<Record<"root" | "separator" | "li" | "ol" | "titles", string>>, addStatic?: boolean) => {
+declare const useClasses_7: (classesProp?: Partial<Record<"empty" | "actions", string>>, addStatic?: boolean) => {
+    classes: {
+        empty: string;
+        actions: string;
+    };
+    css: {
+        (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
+        (...args: CSSInterpolation[]): string;
+    };
+    cx: (...args: any) => string;
+};
+
+declare const useClasses_8: (classesProp?: Partial<Record<"root" | "separator" | "li" | "ol" | "titles", string>>, addStatic?: boolean) => {
     classes: {
         root: string;
         separator: string;
@@ -762,7 +817,7 @@ declare const useClasses_7: (classesProp?: Partial<Record<"root" | "separator" |
     cx: (...args: any) => string;
 };
 
-declare const useClasses_8: (classesProp?: Partial<Record<"xs" | "sm" | "md" | "lg" | "xl" | "root" | "ghost" | "avatar" | "ghostDisabled" | "notCurrent", string>>, addStatic?: boolean) => {
+declare const useClasses_9: (classesProp?: Partial<Record<"xs" | "sm" | "md" | "lg" | "xl" | "root" | "ghost" | "avatar" | "ghostDisabled" | "notCurrent", string>>, addStatic?: boolean) => {
     classes: {
         xs: string;
         sm: string;
@@ -782,17 +837,6 @@ declare const useClasses_8: (classesProp?: Partial<Record<"xs" | "sm" | "md" | "
     cx: (...args: any) => string;
 };
 
-declare const useClasses_9: (classesProp?: Partial<Record<"root", string>>, addStatic?: boolean) => {
-    classes: {
-        root: string;
-    };
-    css: {
-        (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
-        (...args: CSSInterpolation[]): string;
-    };
-    cx: (...args: any) => string;
-};
-
 export declare const useFlowContext: () => HvFlowContextValue<string>;
 
 export declare function useFlowInputNodes<T = any>(id: string): Node_2<T, string | undefined>[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-lab",
-  "version": "5.19.3",
+  "version": "5.20.0",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Contributed React components for the NEXT UI Kit.",
@@ -32,7 +32,7 @@
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/modifiers": "^6.0.1",
     "@emotion/css": "^11.11.0",
-    "@hitachivantara/uikit-react-core": "^5.39.4",
+    "@hitachivantara/uikit-react-core": "^5.40.0",
     "@hitachivantara/uikit-react-icons": "^5.7.10",
     "@hitachivantara/uikit-styles": "^5.17.0",
     "lodash": "^4.17.21",
@@ -49,7 +49,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "54385e042bf911657da6b7f11e74f5b326a24238",
+  "gitHead": "4fb47a8125a716a8b225c460b41cd303c879dbba",
   "main": "dist/cjs/index.cjs",
   "exports": {
     ".": {