@hitachivantara/uikit-react-lab 5.5.1 → 5.5.3

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

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

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

@@ -1,10 +1,10 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { useMemo, useCallback } from "react";
 import { Up, Down } from "@hitachivantara/uikit-react-icons";
 import { HvTypography, HvButton } from "@hitachivantara/uikit-react-core";
 import { getColor } from "@hitachivantara/uikit-styles";
 import { useClasses } from "./SidebarGroup.styles.js";
 import { staticClasses } from "./SidebarGroup.styles.js";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { useFlowContext } from "../../FlowContext/FlowContext.js";
 import { HvFlowDraggableSidebarGroupItem } from "./SidebarGroupItem/DraggableSidebarGroupItem.js";
 const HvFlowSidebarGroup = ({
@@ -31,46 +31,19 @@ const HvFlowSidebarGroup = ({
   const handleClick = useCallback(() => {
     setExpandedNodeGroups == null ? void 0 : setExpandedNodeGroups((prev) => opened ? prev.filter((groupId) => id !== groupId) : [...prev, id]);
   }, [id, opened, setExpandedNodeGroups]);
-  return /* @__PURE__ */ jsxs("li", {
-    className: cx(css({
-      borderColor: getColor(color)
-    }), classes.root),
-    children: [/* @__PURE__ */ jsxs("div", {
-      className: classes.titleContainer,
-      children: [/* @__PURE__ */ jsxs("div", {
-        className: classes.labelContainer,
-        children: [/* @__PURE__ */ jsx("div", {
-          className: classes.icon,
-          role: "none",
-          children: icon
-        }), /* @__PURE__ */ jsx(HvTypography, {
-          variant: "title4",
-          children: nodes.length > 1 ? `${label} (${nodes.length})` : label
-        })]
-      }), /* @__PURE__ */ jsx(HvButton, {
-        icon: true,
-        onClick: handleClick,
-        "aria-expanded": opened,
-        ...expandButtonProps,
-        children: opened ? /* @__PURE__ */ jsx(Up, {
-          role: "none"
-        }) : /* @__PURE__ */ jsx(Down, {
-          role: "none"
-        })
-      })]
-    }), description && /* @__PURE__ */ jsx("div", {
-      className: classes.descriptionContainer,
-      children: /* @__PURE__ */ jsx(HvTypography, {
-        children: description
-      })
-    }), opened && /* @__PURE__ */ jsx("div", {
-      className: classes.itemsContainer,
-      children: nodes.map((obj) => /* @__PURE__ */ jsx(HvFlowDraggableSidebarGroupItem, {
-        ...itemProps,
-        ...obj
-      }, obj.id))
-    })]
-  });
+  return /* @__PURE__ */ jsxs("li", { className: cx(css({
+    borderColor: getColor(color)
+  }), classes.root), children: [
+    /* @__PURE__ */ jsxs("div", { className: classes.titleContainer, children: [
+      /* @__PURE__ */ jsxs("div", { className: classes.labelContainer, children: [
+        /* @__PURE__ */ jsx("div", { className: classes.icon, role: "none", children: icon }),
+        /* @__PURE__ */ jsx(HvTypography, { variant: "title4", children: nodes.length > 1 ? `${label} (${nodes.length})` : label })
+      ] }),
+      /* @__PURE__ */ jsx(HvButton, { icon: true, onClick: handleClick, "aria-expanded": opened, ...expandButtonProps, children: opened ? /* @__PURE__ */ jsx(Up, { role: "none" }) : /* @__PURE__ */ jsx(Down, { role: "none" }) })
+    ] }),
+    description && /* @__PURE__ */ jsx("div", { className: classes.descriptionContainer, children: /* @__PURE__ */ jsx(HvTypography, { children: description }) }),
+    opened && /* @__PURE__ */ jsx("div", { className: classes.itemsContainer, children: nodes.map((obj) => /* @__PURE__ */ jsx(HvFlowDraggableSidebarGroupItem, { ...itemProps, ...obj }, obj.id)) })
+  ] });
 };
 export {
   HvFlowSidebarGroup,

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

@@ -1 +1 @@
-{"version":3,"file":"SidebarGroup.js","sources":["../../../../../../src/components/Flow/Sidebar/SidebarGroup/SidebarGroup.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\n\nimport { Down, Up } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  ExtractNames,\n  HvButton,\n  HvButtonProps,\n  HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { getColor } from \"@hitachivantara/uikit-styles\";\n\nimport { HvFlowNodeGroup } from \"../../types\";\nimport { staticClasses, useClasses } from \"./SidebarGroup.styles\";\nimport {\n  HvFlowDraggableSidebarGroupItem,\n  HvFlowDraggableSidebarGroupItemProps,\n} from \"./SidebarGroupItem\";\nimport { useFlowContext } from \"../../FlowContext\";\n\nexport { staticClasses as flowSidebarGroupClasses };\n\nexport type HvFlowSidebarGroupClasses = ExtractNames<typeof useClasses>;\n\nexport type HvFlowSidebarGroupNodes = {\n  id: string;\n  label: string;\n}[];\n\nexport interface HvFlowSidebarGroupProps extends HvFlowNodeGroup {\n  /** Group id. */\n  id: string;\n  /** Group nodes. */\n  nodes: HvFlowSidebarGroupNodes;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowSidebarGroupClasses;\n  /** Expand button props. */\n  expandButtonProps?: HvButtonProps;\n  /** Item group props. */\n  itemProps?: Partial<HvFlowDraggableSidebarGroupItemProps>;\n}\n\nexport const HvFlowSidebarGroup = ({\n  id,\n  label,\n  nodes,\n  color,\n  description,\n  icon,\n  expandButtonProps,\n  classes: classesProp,\n  itemProps,\n}: HvFlowSidebarGroupProps) => {\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const { expandedNodeGroups, setExpandedNodeGroups } = useFlowContext();\n\n  const opened = useMemo(\n    () => !!expandedNodeGroups?.find((groupId) => groupId === id),\n    [expandedNodeGroups, id]\n  );\n\n  const handleClick = useCallback(() => {\n    setExpandedNodeGroups?.((prev) =>\n      opened ? prev.filter((groupId) => id !== groupId) : [...prev, id]\n    );\n  }, [id, opened, setExpandedNodeGroups]);\n\n  return (\n    <li className={cx(css({ borderColor: getColor(color) }), classes.root)}>\n      <div className={classes.titleContainer}>\n        <div className={classes.labelContainer}>\n          <div className={classes.icon} role=\"none\">\n            {icon}\n          </div>\n          <HvTypography variant=\"title4\">\n            {nodes.length > 1 ? `${label} (${nodes.length})` : label}\n          </HvTypography>\n        </div>\n        <HvButton\n          icon\n          onClick={handleClick}\n          aria-expanded={opened}\n          {...expandButtonProps}\n        >\n          {opened ? <Up role=\"none\" /> : <Down role=\"none\" />}\n        </HvButton>\n      </div>\n      {description && (\n        <div className={classes.descriptionContainer}>\n          <HvTypography>{description}</HvTypography>\n        </div>\n      )}\n      {opened && (\n        <div className={classes.itemsContainer}>\n          {nodes.map((obj) => (\n            <HvFlowDraggableSidebarGroupItem\n              key={obj.id}\n              {...itemProps}\n              {...obj}\n            />\n          ))}\n        </div>\n      )}\n    </li>\n  );\n};\n"],"names":["HvFlowSidebarGroup","id","label","nodes","color","description","icon","expandButtonProps","classes","classesProp","itemProps","cx","css","useClasses","expandedNodeGroups","setExpandedNodeGroups","useFlowContext","opened","useMemo","find","groupId","handleClick","useCallback","prev","filter","className","borderColor","getColor","root","children","_jsxs","titleContainer","labelContainer","_jsx","role","HvTypography","variant","length","HvButton","onClick","Up","Down","descriptionContainer","itemsContainer","map","obj","HvFlowDraggableSidebarGroupItem"],"mappings":";;;;;;;;;AAyCO,MAAMA,qBAAqBA,CAAC;AAAA,EACjCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AACuB,MAAM;AACvB,QAAA;AAAA,IAAEF;AAAAA,IAASG;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,WAAWJ,WAAW;AAE7C,QAAA;AAAA,IAAEK;AAAAA,IAAoBC;AAAAA,MAA0BC,eAAe;AAErE,QAAMC,SAASC,QACb,MAAM,CAAC,EAACJ,yDAAoBK,KAAMC,CAAYA,YAAAA,YAAYnB,MAC1D,CAACa,oBAAoBb,EAAE,CACzB;AAEMoB,QAAAA,cAAcC,YAAY,MAAM;AACpCP,mEAAyBQ,CACvBN,SAAAA,SAASM,KAAKC,OAAQJ,CAAYnB,YAAAA,OAAOmB,OAAO,IAAI,CAAC,GAAGG,MAAMtB,EAAE;AAAA,EAEjE,GAAA,CAACA,IAAIgB,QAAQF,qBAAqB,CAAC;AAEtC,8BACE,MAAA;AAAA,IAAIU,WAAWd,GAAGC,IAAI;AAAA,MAAEc,aAAaC,SAASvB,KAAK;AAAA,IAAA,CAAG,GAAGI,QAAQoB,IAAI;AAAA,IAAEC,WACrEC,qBAAA,OAAA;AAAA,MAAKL,WAAWjB,QAAQuB;AAAAA,MAAeF,WACrCC,qBAAA,OAAA;AAAA,QAAKL,WAAWjB,QAAQwB;AAAAA,QAAeH,WACrCI,oBAAA,OAAA;AAAA,UAAKR,WAAWjB,QAAQF;AAAAA,UAAM4B,MAAK;AAAA,UAAML,UACtCvB;AAAAA,QAAAA,CACE,GACL2B,oBAACE,cAAY;AAAA,UAACC,SAAQ;AAAA,UAAQP,UAC3B1B,MAAMkC,SAAS,IAAK,GAAEnC,KAAM,KAAIC,MAAMkC,MAAO,MAAKnC;AAAAA,QAAAA,CACvC,CAAC;AAAA,MAAA,CACZ,GACL+B,oBAACK,UAAQ;AAAA,QACPhC,MAAI;AAAA,QACJiC,SAASlB;AAAAA,QACT,iBAAeJ;AAAAA,QAAO,GAClBV;AAAAA,QAAiBsB,UAEpBZ,SAASgB,oBAACO,IAAE;AAAA,UAACN,MAAK;AAAA,QAAA,CAAQ,IAAID,oBAACQ,MAAI;AAAA,UAACP,MAAK;AAAA,QAAA,CAAQ;AAAA,MAAA,CAC1C,CAAC;AAAA,IAAA,CACR,GACJ7B,eACC4B,oBAAA,OAAA;AAAA,MAAKR,WAAWjB,QAAQkC;AAAAA,MAAqBb,8BAC1CM,cAAY;AAAA,QAAAN,UAAExB;AAAAA,MAAAA,CAA0B;AAAA,IAAA,CACtC,GAENY,UACCgB,oBAAA,OAAA;AAAA,MAAKR,WAAWjB,QAAQmC;AAAAA,MAAed,UACpC1B,MAAMyC,IAAKC,CAAAA,4BACTC,iCAA+B;AAAA,QAAA,GAE1BpC;AAAAA,QAAS,GACTmC;AAAAA,MAAAA,GAFCA,IAAI5C,EAGV,CACF;AAAA,IAAA,CACE,CACN;AAAA,EAAA,CACC;AAER;"}
+{"version":3,"file":"SidebarGroup.js","sources":["../../../../../../src/components/Flow/Sidebar/SidebarGroup/SidebarGroup.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\n\nimport { Down, Up } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  ExtractNames,\n  HvButton,\n  HvButtonProps,\n  HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { getColor } from \"@hitachivantara/uikit-styles\";\n\nimport { HvFlowNodeGroup } from \"../../types\";\nimport { staticClasses, useClasses } from \"./SidebarGroup.styles\";\nimport {\n  HvFlowDraggableSidebarGroupItem,\n  HvFlowDraggableSidebarGroupItemProps,\n} from \"./SidebarGroupItem\";\nimport { useFlowContext } from \"../../FlowContext\";\n\nexport { staticClasses as flowSidebarGroupClasses };\n\nexport type HvFlowSidebarGroupClasses = ExtractNames<typeof useClasses>;\n\nexport type HvFlowSidebarGroupNodes = {\n  id: string;\n  label: string;\n}[];\n\nexport interface HvFlowSidebarGroupProps extends HvFlowNodeGroup {\n  /** Group id. */\n  id: string;\n  /** Group nodes. */\n  nodes: HvFlowSidebarGroupNodes;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowSidebarGroupClasses;\n  /** Expand button props. */\n  expandButtonProps?: HvButtonProps;\n  /** Item group props. */\n  itemProps?: Partial<HvFlowDraggableSidebarGroupItemProps>;\n}\n\nexport const HvFlowSidebarGroup = ({\n  id,\n  label,\n  nodes,\n  color,\n  description,\n  icon,\n  expandButtonProps,\n  classes: classesProp,\n  itemProps,\n}: HvFlowSidebarGroupProps) => {\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const { expandedNodeGroups, setExpandedNodeGroups } = useFlowContext();\n\n  const opened = useMemo(\n    () => !!expandedNodeGroups?.find((groupId) => groupId === id),\n    [expandedNodeGroups, id]\n  );\n\n  const handleClick = useCallback(() => {\n    setExpandedNodeGroups?.((prev) =>\n      opened ? prev.filter((groupId) => id !== groupId) : [...prev, id]\n    );\n  }, [id, opened, setExpandedNodeGroups]);\n\n  return (\n    <li className={cx(css({ borderColor: getColor(color) }), classes.root)}>\n      <div className={classes.titleContainer}>\n        <div className={classes.labelContainer}>\n          <div className={classes.icon} role=\"none\">\n            {icon}\n          </div>\n          <HvTypography variant=\"title4\">\n            {nodes.length > 1 ? `${label} (${nodes.length})` : label}\n          </HvTypography>\n        </div>\n        <HvButton\n          icon\n          onClick={handleClick}\n          aria-expanded={opened}\n          {...expandButtonProps}\n        >\n          {opened ? <Up role=\"none\" /> : <Down role=\"none\" />}\n        </HvButton>\n      </div>\n      {description && (\n        <div className={classes.descriptionContainer}>\n          <HvTypography>{description}</HvTypography>\n        </div>\n      )}\n      {opened && (\n        <div className={classes.itemsContainer}>\n          {nodes.map((obj) => (\n            <HvFlowDraggableSidebarGroupItem\n              key={obj.id}\n              {...itemProps}\n              {...obj}\n            />\n          ))}\n        </div>\n      )}\n    </li>\n  );\n};\n"],"names":["HvFlowSidebarGroup","id","label","nodes","color","description","icon","expandButtonProps","classes","classesProp","itemProps","cx","css","useClasses","expandedNodeGroups","setExpandedNodeGroups","useFlowContext","opened","useMemo","find","groupId","handleClick","useCallback","prev","filter","borderColor","getColor","root","titleContainer","labelContainer","length","descriptionContainer","itemsContainer","map","obj"],"mappings":";;;;;;;;;AAyCO,MAAMA,qBAAqBA,CAAC;AAAA,EACjCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AACuB,MAAM;AACvB,QAAA;AAAA,IAAEF;AAAAA,IAASG;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,WAAWJ,WAAW;AAE7C,QAAA;AAAA,IAAEK;AAAAA,IAAoBC;AAAAA,MAA0BC,eAAe;AAErE,QAAMC,SAASC,QACb,MAAM,CAAC,EAACJ,yDAAoBK,KAAMC,CAAYA,YAAAA,YAAYnB,MAC1D,CAACa,oBAAoBb,EAAE,CACzB;AAEMoB,QAAAA,cAAcC,YAAY,MAAM;AACpCP,mEAAyBQ,CACvBN,SAAAA,SAASM,KAAKC,OAAQJ,CAAYnB,YAAAA,OAAOmB,OAAO,IAAI,CAAC,GAAGG,MAAMtB,EAAE;AAAA,EAEjE,GAAA,CAACA,IAAIgB,QAAQF,qBAAqB,CAAC;AAEtC,SACG,qBAAA,MAAA,EAAG,WAAWJ,GAAGC,IAAI;AAAA,IAAEa,aAAaC,SAAStB,KAAK;AAAA,EAAG,CAAA,GAAGI,QAAQmB,IAAI,GACnE,UAAA;AAAA,IAAC,qBAAA,OAAA,EAAI,WAAWnB,QAAQoB,gBACtB,UAAA;AAAA,MAAC,qBAAA,OAAA,EAAI,WAAWpB,QAAQqB,gBACtB,UAAA;AAAA,QAAA,oBAAC,SAAI,WAAWrB,QAAQF,MAAM,MAAK,QAChCA,UACH,MAAA;AAAA,QACC,oBAAA,cAAA,EAAa,SAAQ,UACnBH,UAAM2B,MAAAA,SAAS,IAAK,GAAE5B,KAAM,KAAIC,MAAM2B,MAAO,MAAK5B,OACrD;AAAA,MAAA,GACF;AAAA,MACA,oBAAC,YACC,MAAI,MACJ,SAASmB,aACT,iBAAeJ,QACf,GAAIV,mBAEHU,mBAAU,oBAAA,IAAA,EAAG,MAAK,QAAM,wBAAO,MAAK,EAAA,MAAK,QAAS,EACrD,CAAA;AAAA,IAAA,GACF;AAAA,IACCZ,mCACE,OAAI,EAAA,WAAWG,QAAQuB,sBACtB,UAAA,oBAAC,cAAc1B,EAAAA,UAAAA,YAAAA,CAAY,EAC7B,CAAA;AAAA,IAEDY,UACE,oBAAA,OAAA,EAAI,WAAWT,QAAQwB,gBACrB7B,gBAAM8B,IAAKC,CAAAA,QACT,oBAAA,iCAAA,EAEKxB,GAAAA,WACAwB,GAAAA,OAFCA,IAAIjC,EAED,CAEX,GACH;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}

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

@@ -1,8 +1,8 @@
+import { jsx } from "@emotion/react/jsx-runtime";
 import { useForkRef } from "@mui/material";
 import { useRef } from "react";
 import { useDraggable } from "@dnd-kit/core";
 import { HvFlowSidebarGroupItem } from "./SidebarGroupItem.js";
-import { jsx } from "@emotion/react/jsx-runtime";
 const HvFlowDraggableSidebarGroupItem = ({
   label,
   id,
@@ -32,15 +32,7 @@ const HvFlowDraggableSidebarGroupItem = ({
   const style = transform ? {
     transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`
   } : void 0;
-  return /* @__PURE__ */ jsx(HvFlowSidebarGroupItem, {
-    ref: forkedRef,
-    style,
-    label,
-    isDragging,
-    ...listeners,
-    ...attributes,
-    ...others
-  });
+  return /* @__PURE__ */ jsx(HvFlowSidebarGroupItem, { ref: forkedRef, style, label, isDragging, ...listeners, ...attributes, ...others });
 };
 export {
   HvFlowDraggableSidebarGroupItem

package/dist/esm/components/Flow/Sidebar/SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"DraggableSidebarGroupItem.js","sources":["../../../../../../../src/components/Flow/Sidebar/SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.tsx"],"sourcesContent":["import { useForkRef } from \"@mui/material\";\n\nimport { useRef } from \"react\";\n\nimport { useDraggable } from \"@dnd-kit/core\";\n\nimport {\n  HvFlowSidebarGroupItem,\n  HvFlowSidebarGroupItemProps,\n} from \"./SidebarGroupItem\";\n\nexport interface HvFlowDraggableSidebarGroupItemProps\n  extends HvFlowSidebarGroupItemProps {\n  /** Item id: the item type. */\n  id: string;\n}\n\nexport const HvFlowDraggableSidebarGroupItem = ({\n  label,\n  id,\n  ...others\n}: HvFlowDraggableSidebarGroupItemProps) => {\n  const itemRef = useRef<HTMLElement>(null);\n\n  const { attributes, listeners, setNodeRef, isDragging, transform } =\n    useDraggable({\n      id,\n      data: {\n        hvFlow: {\n          // Needed for the drag overlay: otherwise the item is cut by the drawer because of overflow\n          label,\n          // Item position: used to position the item when dropped\n          x: itemRef.current?.getBoundingClientRect().x,\n          y: itemRef.current?.getBoundingClientRect().y,\n        },\n      },\n    });\n\n  const forkedRef = useForkRef(itemRef, setNodeRef);\n\n  const style = transform\n    ? {\n        transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,\n      }\n    : undefined;\n\n  return (\n    <HvFlowSidebarGroupItem\n      ref={forkedRef}\n      style={style}\n      label={label}\n      isDragging={isDragging}\n      {...listeners}\n      {...attributes}\n      {...others}\n    />\n  );\n};\n"],"names":["HvFlowDraggableSidebarGroupItem","label","id","others","itemRef","useRef","attributes","listeners","setNodeRef","isDragging","transform","useDraggable","data","hvFlow","x","current","getBoundingClientRect","y","forkedRef","useForkRef","style","undefined","HvFlowSidebarGroupItem","ref"],"mappings":";;;;;AAiBO,MAAMA,kCAAkCA,CAAC;AAAA,EAC9CC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACiC,MAAM;;AACpCC,QAAAA,UAAUC,OAAoB,IAAI;AAElC,QAAA;AAAA,IAAEC;AAAAA,IAAYC;AAAAA,IAAWC;AAAAA,IAAYC;AAAAA,IAAYC;AAAAA,MACrDC,aAAa;AAAA,IACXT;AAAAA,IACAU,MAAM;AAAA,MACJC,QAAQ;AAAA;AAAA,QAENZ;AAAAA;AAAAA,QAEAa,IAAGV,aAAQW,YAARX,mBAAiBY,wBAAwBF;AAAAA,QAC5CG,IAAGb,aAAQW,YAARX,mBAAiBY,wBAAwBC;AAAAA,MAC9C;AAAA,IACF;AAAA,EAAA,CACD;AAEGC,QAAAA,YAAYC,WAAWf,SAASI,UAAU;AAEhD,QAAMY,QAAQV,YACV;AAAA,IACEA,WAAY,eAAcA,UAAUI,CAAE,OAAMJ,UAAUO,CAAE;AAAA,EAE1DI,IAAAA;AAEJ,6BACGC,wBAAsB;AAAA,IACrBC,KAAKL;AAAAA,IACLE;AAAAA,IACAnB;AAAAA,IACAQ;AAAAA,IAAuB,GACnBF;AAAAA,IAAS,GACTD;AAAAA,IAAU,GACVH;AAAAA,EAAAA,CACL;AAEL;"}
+{"version":3,"file":"DraggableSidebarGroupItem.js","sources":["../../../../../../../src/components/Flow/Sidebar/SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.tsx"],"sourcesContent":["import { useForkRef } from \"@mui/material\";\n\nimport { useRef } from \"react\";\n\nimport { useDraggable } from \"@dnd-kit/core\";\n\nimport {\n  HvFlowSidebarGroupItem,\n  HvFlowSidebarGroupItemProps,\n} from \"./SidebarGroupItem\";\n\nexport interface HvFlowDraggableSidebarGroupItemProps\n  extends HvFlowSidebarGroupItemProps {\n  /** Item id: the item type. */\n  id: string;\n}\n\nexport const HvFlowDraggableSidebarGroupItem = ({\n  label,\n  id,\n  ...others\n}: HvFlowDraggableSidebarGroupItemProps) => {\n  const itemRef = useRef<HTMLElement>(null);\n\n  const { attributes, listeners, setNodeRef, isDragging, transform } =\n    useDraggable({\n      id,\n      data: {\n        hvFlow: {\n          // Needed for the drag overlay: otherwise the item is cut by the drawer because of overflow\n          label,\n          // Item position: used to position the item when dropped\n          x: itemRef.current?.getBoundingClientRect().x,\n          y: itemRef.current?.getBoundingClientRect().y,\n        },\n      },\n    });\n\n  const forkedRef = useForkRef(itemRef, setNodeRef);\n\n  const style = transform\n    ? {\n        transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,\n      }\n    : undefined;\n\n  return (\n    <HvFlowSidebarGroupItem\n      ref={forkedRef}\n      style={style}\n      label={label}\n      isDragging={isDragging}\n      {...listeners}\n      {...attributes}\n      {...others}\n    />\n  );\n};\n"],"names":["HvFlowDraggableSidebarGroupItem","label","id","others","itemRef","useRef","attributes","listeners","setNodeRef","isDragging","transform","useDraggable","data","hvFlow","x","current","getBoundingClientRect","y","forkedRef","useForkRef","style","undefined"],"mappings":";;;;;AAiBO,MAAMA,kCAAkCA,CAAC;AAAA,EAC9CC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACiC,MAAM;;AACpCC,QAAAA,UAAUC,OAAoB,IAAI;AAElC,QAAA;AAAA,IAAEC;AAAAA,IAAYC;AAAAA,IAAWC;AAAAA,IAAYC;AAAAA,IAAYC;AAAAA,MACrDC,aAAa;AAAA,IACXT;AAAAA,IACAU,MAAM;AAAA,MACJC,QAAQ;AAAA;AAAA,QAENZ;AAAAA;AAAAA,QAEAa,IAAGV,aAAQW,YAARX,mBAAiBY,wBAAwBF;AAAAA,QAC5CG,IAAGb,aAAQW,YAARX,mBAAiBY,wBAAwBC;AAAAA,MAC9C;AAAA,IACF;AAAA,EAAA,CACD;AAEGC,QAAAA,YAAYC,WAAWf,SAASI,UAAU;AAEhD,QAAMY,QAAQV,YACV;AAAA,IACEA,WAAY,eAAcA,UAAUI,CAAE,OAAMJ,UAAUO,CAAE;AAAA,EAE1DI,IAAAA;AAEJ,SACG,oBAAA,wBAAA,EACC,KAAKH,WACL,OACA,OACA,YACIX,GAAAA,cACAD,YACAH,GAAAA,OACJ,CAAA;AAEN;"}

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

@@ -1,9 +1,9 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { forwardRef } from "react";
 import { HvTypography } from "@hitachivantara/uikit-react-core";
 import { Drag } from "@hitachivantara/uikit-react-icons";
 import { useClasses } from "./SidebarGroupItem.styles.js";
 import { staticClasses } from "./SidebarGroupItem.styles.js";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 const HvFlowSidebarGroupItem = forwardRef(({
   label,
   isDragging,
@@ -15,18 +15,12 @@ const HvFlowSidebarGroupItem = forwardRef(({
     classes,
     cx
   } = useClasses(classesProp);
-  return /* @__PURE__ */ jsxs("div", {
-    ref,
-    className: cx(classes.root, {
-      [classes.dragging]: isDragging
-    }, className),
-    ...others,
-    children: [/* @__PURE__ */ jsx(HvTypography, {
-      children: label
-    }), /* @__PURE__ */ jsx(Drag, {
-      role: "none"
-    })]
-  });
+  return /* @__PURE__ */ jsxs("div", { ref, className: cx(classes.root, {
+    [classes.dragging]: isDragging
+  }, className), ...others, children: [
+    /* @__PURE__ */ jsx(HvTypography, { children: label }),
+    /* @__PURE__ */ jsx(Drag, { role: "none" })
+  ] });
 });
 export {
   HvFlowSidebarGroupItem,

package/dist/esm/components/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarGroupItem.js","sources":["../../../../../../../src/components/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Drag } from \"@hitachivantara/uikit-react-icons\";\n\nimport { staticClasses, useClasses } from \"./SidebarGroupItem.styles\";\n\nexport { staticClasses as flowSidebarGroupItemClasses };\n\nexport type HvFlowSidebarGroupItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFlowSidebarGroupItemProps extends HvBaseProps {\n  /** Item label. */\n  label: string;\n  /** Whether the item is being dragged. */\n  isDragging?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowSidebarGroupItemClasses;\n}\n\nexport const HvFlowSidebarGroupItem = forwardRef<\n  HTMLDivElement,\n  HvFlowSidebarGroupItemProps\n>(\n  (\n    {\n      label,\n      isDragging,\n      classes: classesProp,\n      className,\n      ...others\n    }: HvFlowSidebarGroupItemProps,\n    ref\n  ) => {\n    const { classes, cx } = useClasses(classesProp);\n\n    return (\n      <div\n        ref={ref}\n        className={cx(\n          classes.root,\n          { [classes.dragging]: isDragging },\n          className\n        )}\n        {...others}\n      >\n        <HvTypography>{label}</HvTypography>\n        <Drag role=\"none\" />\n      </div>\n    );\n  }\n);\n"],"names":["HvFlowSidebarGroupItem","forwardRef","label","isDragging","classes","classesProp","className","others","ref","cx","useClasses","root","dragging","children","_jsx","HvTypography","Drag","role"],"mappings":";;;;;;AAwBaA,MAAAA,yBAAyBC,WAIpC,CACE;AAAA,EACEC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AAAAA,EACA,GAAGC;AACwB,GAC7BC,QACG;AACG,QAAA;AAAA,IAAEJ;AAAAA,IAASK;AAAAA,EAAAA,IAAOC,WAAWL,WAAW;AAE9C,8BACE,OAAA;AAAA,IACEG;AAAAA,IACAF,WAAWG,GACTL,QAAQO,MACR;AAAA,MAAE,CAACP,QAAQQ,QAAQ,GAAGT;AAAAA,OACtBG,SACF;AAAA,IAAE,GACEC;AAAAA,IAAMM,UAAA,CAEVC,oBAACC,cAAY;AAAA,MAAAF,UAAEX;AAAAA,IAAAA,CAAoB,GACnCY,oBAACE,MAAI;AAAA,MAACC,MAAK;AAAA,IAAA,CAAQ,CAAC;AAAA,EAAA,CACjB;AAET,CACF;"}
+{"version":3,"file":"SidebarGroupItem.js","sources":["../../../../../../../src/components/Flow/Sidebar/SidebarGroup/SidebarGroupItem/SidebarGroupItem.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Drag } from \"@hitachivantara/uikit-react-icons\";\n\nimport { staticClasses, useClasses } from \"./SidebarGroupItem.styles\";\n\nexport { staticClasses as flowSidebarGroupItemClasses };\n\nexport type HvFlowSidebarGroupItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFlowSidebarGroupItemProps extends HvBaseProps {\n  /** Item label. */\n  label: string;\n  /** Whether the item is being dragged. */\n  isDragging?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFlowSidebarGroupItemClasses;\n}\n\nexport const HvFlowSidebarGroupItem = forwardRef<\n  HTMLDivElement,\n  HvFlowSidebarGroupItemProps\n>(\n  (\n    {\n      label,\n      isDragging,\n      classes: classesProp,\n      className,\n      ...others\n    }: HvFlowSidebarGroupItemProps,\n    ref\n  ) => {\n    const { classes, cx } = useClasses(classesProp);\n\n    return (\n      <div\n        ref={ref}\n        className={cx(\n          classes.root,\n          { [classes.dragging]: isDragging },\n          className\n        )}\n        {...others}\n      >\n        <HvTypography>{label}</HvTypography>\n        <Drag role=\"none\" />\n      </div>\n    );\n  }\n);\n"],"names":["HvFlowSidebarGroupItem","forwardRef","label","isDragging","classes","classesProp","className","others","ref","cx","useClasses","root","dragging"],"mappings":";;;;;;AAwBaA,MAAAA,yBAAyBC,WAIpC,CACE;AAAA,EACEC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AAAAA,EACA,GAAGC;AACwB,GAC7BC,QACG;AACG,QAAA;AAAA,IAAEJ;AAAAA,IAASK;AAAAA,EAAAA,IAAOC,WAAWL,WAAW;AAE9C,8BACG,OACC,EAAA,KACA,WAAWI,GACTL,QAAQO,MACR;AAAA,IAAE,CAACP,QAAQQ,QAAQ,GAAGT;AAAAA,EACtBG,GAAAA,SACF,GACA,GAAIC,QAEJ,UAAA;AAAA,IAAA,oBAAC,gBAAcL,UAAM,MAAA,CAAA;AAAA,IACrB,oBAAC,MAAK,EAAA,MAAK,OAAM,CAAA;AAAA,EACnB,EAAA,CAAA;AAEJ,CACF;"}

package/dist/esm/components/StepNavigation/DefaultNavigation/DefaultNavigation.js

@@ -1,6 +1,6 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { useTheme } from "@hitachivantara/uikit-react-core";
 import { getColor, stepSizes } from "./utils.js";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { HvStep } from "./Step/Step.js";
 const HvDefaultNavigation = ({
   numSteps,
@@ -35,9 +35,8 @@ const HvDefaultNavigation = ({
     titleWidth,
     titleDisabled: state === "Disabled"
   }));
-  return /* @__PURE__ */ jsxs("div", {
-    ...other,
-    children: [/* @__PURE__ */ jsx(Steps, {
+  return /* @__PURE__ */ jsxs("div", { ...other, children: [
+    /* @__PURE__ */ jsx(Steps, { ...{
       stepsWidth,
       navWidth: width,
       separatorValues: {
@@ -51,8 +50,9 @@ const HvDefaultNavigation = ({
         maxSize,
         StepComponent
       }
-    }), titles]
-  });
+    } }),
+    titles
+  ] });
 };
 export {
   HvDefaultNavigation

package/dist/esm/components/StepNavigation/DefaultNavigation/DefaultNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultNavigation.js","sources":["../../../../../src/components/StepNavigation/DefaultNavigation/DefaultNavigation.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport {\n  HvBaseProps,\n  HvTheme,\n  useTheme,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { HvStep, HvStepProps } from \"./Step\";\nimport { getColor, stepSizes } from \"./utils\";\n\nexport type ComponentChildProps = {\n  stepsWidth: number;\n  navWidth: number;\n  separatorValues: {\n    minWidth: number;\n    maxWidth: number;\n    getColor: (state: HvStepProps[\"state\"], activeTheme: HvTheme) => any;\n    height: number;\n  };\n  stepValues: {\n    minSize: number;\n    maxSize: number;\n    StepComponent: React.ComponentType<HvStepProps>;\n  };\n};\n\nexport interface HvDefaultNavigationProps\n  extends Omit<HvBaseProps, \"children\"> {\n  /** Number of steps to show on the component. */\n  numSteps: number;\n  /** Sets one of the standard sizes of the steps. */\n  stepSize: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n  /** Returns a `ReactNode` of the titles container. */\n  getTitles: (\n    getTitleProps?: (params: {\n      state: HvStepProps[\"state\"];\n      rawTitle: string;\n      number: number;\n    }) => { variant?: string; title?: string }\n  ) => ReactNode;\n  /** Returns dynamic width values of the component (width, titleWidth, separatorWidth). */\n  getDynamicValues: (stepsWidth: number) => {\n    width: number;\n    titleWidth: number;\n    separatorWidth: number;\n  };\n  /** Component to render Step Navigation with props = {separatorValues, stepValues, stepsWidth} */\n  children: React.FunctionComponent<ComponentChildProps>;\n}\n\nexport const HvDefaultNavigation = ({\n  numSteps,\n  stepSize,\n  getTitles,\n  getDynamicValues,\n  className,\n  children,\n  ...other\n}: HvDefaultNavigationProps) => {\n  const { activeTheme } = useTheme();\n\n  // step values\n  const { container: maxSize, avatar: minSize } = stepSizes[stepSize];\n  const StepComponent = HvStep;\n  //\n\n  const stepsWidth = maxSize + minSize * (numSteps - 1);\n  const { width, titleWidth, separatorWidth } = getDynamicValues(stepsWidth);\n\n  // separator values\n  const maxWidth = Math.max(titleWidth - minSize, separatorWidth);\n  const minWidth = Math.max(\n    titleWidth - (maxSize + minSize) * 0.5,\n    separatorWidth\n  );\n  //\n\n  const Steps = children;\n\n  const titles = getTitles(({ state }) => ({\n    variant: \"label\",\n    titleWidth,\n    titleDisabled: state === \"Disabled\",\n  }));\n\n  return (\n    <div {...other}>\n      <Steps\n        {...{\n          stepsWidth,\n          navWidth: width,\n          separatorValues: {\n            minWidth,\n            maxWidth,\n            getColor,\n            height: activeTheme?.stepNavigation.defaultSeparatorHeight || 0,\n          },\n          stepValues: {\n            minSize,\n            maxSize,\n            StepComponent,\n          },\n        }}\n      />\n      {titles}\n    </div>\n  );\n};\n"],"names":["HvDefaultNavigation","numSteps","stepSize","getTitles","getDynamicValues","className","children","other","activeTheme","useTheme","container","maxSize","avatar","minSize","stepSizes","StepComponent","HvStep","stepsWidth","width","titleWidth","separatorWidth","maxWidth","Math","max","minWidth","Steps","titles","state","variant","titleDisabled","_jsx","navWidth","separatorValues","getColor","height","stepNavigation","defaultSeparatorHeight","stepValues"],"mappings":";;;;AAkDO,MAAMA,sBAAsBA,CAAC;AAAA,EAClCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACqB,MAAM;AACxB,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,SAAS;AAG3B,QAAA;AAAA,IAAEC,WAAWC;AAAAA,IAASC,QAAQC;AAAAA,EAAAA,IAAYC,UAAUZ,QAAQ;AAClE,QAAMa,gBAAgBC;AAGhBC,QAAAA,aAAaN,UAAUE,WAAWZ,WAAW;AAC7C,QAAA;AAAA,IAAEiB;AAAAA,IAAOC;AAAAA,IAAYC;AAAAA,EAAAA,IAAmBhB,iBAAiBa,UAAU;AAGzE,QAAMI,WAAWC,KAAKC,IAAIJ,aAAaN,SAASO,cAAc;AAC9D,QAAMI,WAAWF,KAAKC,IACpBJ,cAAcR,UAAUE,WAAW,KACnCO,cACF;AAGA,QAAMK,QAAQnB;AAERoB,QAAAA,SAASvB,UAAU,CAAC;AAAA,IAAEwB;AAAAA,EAAAA,OAAa;AAAA,IACvCC,SAAS;AAAA,IACTT;AAAAA,IACAU,eAAeF,UAAU;AAAA,EACzB,EAAA;AAEF,8BACE,OAAA;AAAA,IAAA,GAASpB;AAAAA,IAAKD,UAAA,CACZwB,oBAACL,OAAK;AAAA,MAEFR;AAAAA,MACAc,UAAUb;AAAAA,MACVc,iBAAiB;AAAA,QACfR;AAAAA,QACAH;AAAAA,QACAY;AAAAA,QACAC,SAAQ1B,2CAAa2B,eAAeC,2BAA0B;AAAA,MAChE;AAAA,MACAC,YAAY;AAAA,QACVxB;AAAAA,QACAF;AAAAA,QACAI;AAAAA,MACF;AAAA,IAEH,CAAA,GACAW,MAAM;AAAA,EAAA,CACJ;AAET;"}
+{"version":3,"file":"DefaultNavigation.js","sources":["../../../../../src/components/StepNavigation/DefaultNavigation/DefaultNavigation.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport {\n  HvBaseProps,\n  HvTheme,\n  useTheme,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { HvStep, HvStepProps } from \"./Step\";\nimport { getColor, stepSizes } from \"./utils\";\n\nexport type ComponentChildProps = {\n  stepsWidth: number;\n  navWidth: number;\n  separatorValues: {\n    minWidth: number;\n    maxWidth: number;\n    getColor: (state: HvStepProps[\"state\"], activeTheme: HvTheme) => any;\n    height: number;\n  };\n  stepValues: {\n    minSize: number;\n    maxSize: number;\n    StepComponent: React.ComponentType<HvStepProps>;\n  };\n};\n\nexport interface HvDefaultNavigationProps\n  extends Omit<HvBaseProps, \"children\"> {\n  /** Number of steps to show on the component. */\n  numSteps: number;\n  /** Sets one of the standard sizes of the steps. */\n  stepSize: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n  /** Returns a `ReactNode` of the titles container. */\n  getTitles: (\n    getTitleProps?: (params: {\n      state: HvStepProps[\"state\"];\n      rawTitle: string;\n      number: number;\n    }) => { variant?: string; title?: string }\n  ) => ReactNode;\n  /** Returns dynamic width values of the component (width, titleWidth, separatorWidth). */\n  getDynamicValues: (stepsWidth: number) => {\n    width: number;\n    titleWidth: number;\n    separatorWidth: number;\n  };\n  /** Component to render Step Navigation with props = {separatorValues, stepValues, stepsWidth} */\n  children: React.FunctionComponent<ComponentChildProps>;\n}\n\nexport const HvDefaultNavigation = ({\n  numSteps,\n  stepSize,\n  getTitles,\n  getDynamicValues,\n  className,\n  children,\n  ...other\n}: HvDefaultNavigationProps) => {\n  const { activeTheme } = useTheme();\n\n  // step values\n  const { container: maxSize, avatar: minSize } = stepSizes[stepSize];\n  const StepComponent = HvStep;\n  //\n\n  const stepsWidth = maxSize + minSize * (numSteps - 1);\n  const { width, titleWidth, separatorWidth } = getDynamicValues(stepsWidth);\n\n  // separator values\n  const maxWidth = Math.max(titleWidth - minSize, separatorWidth);\n  const minWidth = Math.max(\n    titleWidth - (maxSize + minSize) * 0.5,\n    separatorWidth\n  );\n  //\n\n  const Steps = children;\n\n  const titles = getTitles(({ state }) => ({\n    variant: \"label\",\n    titleWidth,\n    titleDisabled: state === \"Disabled\",\n  }));\n\n  return (\n    <div {...other}>\n      <Steps\n        {...{\n          stepsWidth,\n          navWidth: width,\n          separatorValues: {\n            minWidth,\n            maxWidth,\n            getColor,\n            height: activeTheme?.stepNavigation.defaultSeparatorHeight || 0,\n          },\n          stepValues: {\n            minSize,\n            maxSize,\n            StepComponent,\n          },\n        }}\n      />\n      {titles}\n    </div>\n  );\n};\n"],"names":["HvDefaultNavigation","numSteps","stepSize","getTitles","getDynamicValues","className","children","other","activeTheme","useTheme","container","maxSize","avatar","minSize","stepSizes","StepComponent","HvStep","stepsWidth","width","titleWidth","separatorWidth","maxWidth","Math","max","minWidth","Steps","titles","state","variant","titleDisabled","navWidth","separatorValues","getColor","height","stepNavigation","defaultSeparatorHeight","stepValues"],"mappings":";;;;AAkDO,MAAMA,sBAAsBA,CAAC;AAAA,EAClCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACqB,MAAM;AACxB,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,SAAS;AAG3B,QAAA;AAAA,IAAEC,WAAWC;AAAAA,IAASC,QAAQC;AAAAA,EAAAA,IAAYC,UAAUZ,QAAQ;AAClE,QAAMa,gBAAgBC;AAGhBC,QAAAA,aAAaN,UAAUE,WAAWZ,WAAW;AAC7C,QAAA;AAAA,IAAEiB;AAAAA,IAAOC;AAAAA,IAAYC;AAAAA,EAAAA,IAAmBhB,iBAAiBa,UAAU;AAGzE,QAAMI,WAAWC,KAAKC,IAAIJ,aAAaN,SAASO,cAAc;AAC9D,QAAMI,WAAWF,KAAKC,IACpBJ,cAAcR,UAAUE,WAAW,KACnCO,cACF;AAGA,QAAMK,QAAQnB;AAERoB,QAAAA,SAASvB,UAAU,CAAC;AAAA,IAAEwB;AAAAA,EAAAA,OAAa;AAAA,IACvCC,SAAS;AAAA,IACTT;AAAAA,IACAU,eAAeF,UAAU;AAAA,EACzB,EAAA;AAGA,SAAA,qBAAC,OAAI,EAAA,GAAIpB,OACP,UAAA;AAAA,IAAA,oBAAC,SACK,GAAA;AAAA,MACFU;AAAAA,MACAa,UAAUZ;AAAAA,MACVa,iBAAiB;AAAA,QACfP;AAAAA,QACAH;AAAAA,QACAW;AAAAA,QACAC,SAAQzB,2CAAa0B,eAAeC,2BAA0B;AAAA,MAChE;AAAA,MACAC,YAAY;AAAA,QACVvB;AAAAA,QACAF;AAAAA,QACAI;AAAAA,MACF;AAAA,IAAA,GACA;AAAA,IAEHW;AAAAA,EACH,EAAA,CAAA;AAEJ;"}

package/dist/esm/components/StepNavigation/DefaultNavigation/Step/Step.js

@@ -1,8 +1,8 @@
+import { jsx } from "@emotion/react/jsx-runtime";
 import { HourGlass, Level3Bad, Level0Good } from "@hitachivantara/uikit-react-icons";
 import { HvButton, HvAvatar } from "@hitachivantara/uikit-react-core";
 import { getColor, getSemantic } from "../utils.js";
 import { useClasses } from "./Step.styles.js";
-import { jsx } from "@emotion/react/jsx-runtime";
 const HvStep = ({
   className,
   classes: classesProp,
@@ -45,34 +45,11 @@ const HvStep = ({
     Failed: Level3Bad,
     Completed: Level0Good
   }[state];
-  return /* @__PURE__ */ jsx("div", {
-    className: cx(classes.root, {
-      [classes.notCurrent]: state !== "Current"
-    }, className),
-    children: /* @__PURE__ */ jsx(HvButton, {
-      className: cx(classes.ghost, {
-        [classes.ghostDisabled]: state === "Current"
-      }),
-      "aria-label": `${title}`,
-      icon: true,
-      overrideIconColors: false,
-      disabled: disabled ?? ["Current", "Disabled"].includes(state),
-      onClick,
-      children: /* @__PURE__ */ jsx(HvAvatar, {
-        className: cx(classes.avatar, classes[size]),
-        backgroundColor,
-        status,
-        size,
-        children: IconComponent ? /* @__PURE__ */ jsx(IconComponent, {
-          color,
-          semantic,
-          width: svgSize,
-          height: svgSize,
-          iconSize
-        }) : number
-      })
-    })
-  });
+  return /* @__PURE__ */ jsx("div", { className: cx(classes.root, {
+    [classes.notCurrent]: state !== "Current"
+  }, className), children: /* @__PURE__ */ jsx(HvButton, { className: cx(classes.ghost, {
+    [classes.ghostDisabled]: state === "Current"
+  }), "aria-label": `${title}`, icon: true, overrideIconColors: false, disabled: disabled ?? ["Current", "Disabled"].includes(state), onClick, children: /* @__PURE__ */ jsx(HvAvatar, { className: cx(classes.avatar, classes[size]), backgroundColor, status, size, children: IconComponent ? /* @__PURE__ */ jsx(IconComponent, { color, semantic, width: svgSize, height: svgSize, iconSize }) : number }) }) });
 };
 export {
   HvStep

package/dist/esm/components/StepNavigation/DefaultNavigation/Step/Step.js.map

@@ -1 +1 @@
-{"version":3,"file":"Step.js","sources":["../../../../../../src/components/StepNavigation/DefaultNavigation/Step/Step.tsx"],"sourcesContent":["import {\n  Level0Good,\n  Level3Bad,\n  HourGlass,\n} from \"@hitachivantara/uikit-react-icons\";\nimport {\n  HvAvatarSize,\n  HvButtonProps,\n  HvBaseProps,\n  ExtractNames,\n  HvAvatar,\n  HvButton,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { getColor, getSemantic } from \"../utils\";\nimport { useClasses } from \"./Step.styles\";\n\ntype HvStepClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvStepProps\n  extends Pick<HvButtonProps, \"onClick\">,\n    Omit<HvBaseProps, \"onClick\"> {\n  /** A Jss Object used to override or extend the styles applied to the empty state StepNavigation. */\n  classes?: HvStepClasses;\n  /** State of the step. Values = {\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\", \"Enabled\"} */\n  state:\n    | \"Pending\"\n    | \"Failed\"\n    | \"Completed\"\n    | \"Current\"\n    | \"Disabled\"\n    | \"Enabled\";\n  /** Title of the step. */\n  title: string;\n  /** Sets one of the standard sizes of the step */\n  size?: HvAvatarSize;\n  /** Number of the step. */\n  number?: number;\n  /**\n   * Define if a step is disabled/enabled.\n   * If this property is not defined and the step is on state \"Disabled\", the step component will be disabled\n   */\n  disabled?: boolean;\n}\n\n/**\n * Step element of \"Default\" Step Navigation root component\n */\nexport const HvStep = ({\n  className,\n  classes: classesProp,\n  state,\n  title,\n  onClick,\n  disabled,\n  size = \"md\",\n  number = 1,\n}: HvStepProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const iconSize = {\n    xs: \"XS\",\n    sm: \"XS\",\n    md: \"S\",\n    ml: \"M\",\n    xl: \"M\",\n  }[size];\n\n  const squareL = {\n    Pending: 16,\n    Failed: 24,\n    Completed: 24,\n  }[state];\n\n  const svgSize = {\n    xs: squareL - 8,\n    sm: squareL,\n    md: squareL + 8,\n    lg: squareL + 16,\n    xl: squareL + 24,\n  }[size];\n\n  const backgroundColor = getColor(state);\n\n  const color = state === \"Pending\" ? \"atmo2\" : undefined;\n  const semantic = state !== \"Pending\" ? getSemantic(state) : undefined;\n  const status = state === \"Current\" ? \"secondary_60\" : undefined;\n\n  const IconComponent = {\n    Pending: HourGlass,\n    Failed: Level3Bad,\n    Completed: Level0Good,\n  }[state];\n\n  return (\n    <div\n      className={cx(\n        classes.root,\n        {\n          [classes.notCurrent]: state !== \"Current\",\n        },\n        className\n      )}\n    >\n      <HvButton\n        className={cx(classes.ghost, {\n          [classes.ghostDisabled]: state === \"Current\",\n        })}\n        aria-label={`${title}`}\n        icon\n        overrideIconColors={false}\n        disabled={disabled ?? [\"Current\", \"Disabled\"].includes(state)}\n        onClick={onClick}\n      >\n        <HvAvatar\n          className={cx(classes.avatar, classes[size])}\n          backgroundColor={backgroundColor}\n          status={status}\n          size={size}\n        >\n          {IconComponent ? (\n            <IconComponent\n              color={color}\n              semantic={semantic}\n              width={svgSize}\n              height={svgSize}\n              iconSize={iconSize}\n            />\n          ) : (\n            number\n          )}\n        </HvAvatar>\n      </HvButton>\n    </div>\n  );\n};\n"],"names":["HvStep","className","classes","classesProp","state","title","onClick","disabled","size","number","cx","useClasses","iconSize","xs","sm","md","ml","xl","squareL","Pending","Failed","Completed","svgSize","lg","backgroundColor","getColor","color","undefined","semantic","getSemantic","status","IconComponent","HourGlass","Level3Bad","Level0Good","root","notCurrent","children","HvButton","ghost","ghostDisabled","icon","overrideIconColors","includes","HvAvatar","avatar","_jsx","width","height"],"mappings":";;;;;AAgDO,MAAMA,SAASA,CAAC;AAAA,EACrBC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,OAAO;AAAA,EACPC,SAAS;AACE,MAAM;AACX,QAAA;AAAA,IAAEP;AAAAA,IAASQ;AAAAA,EAAAA,IAAOC,WAAWR,WAAW;AAE9C,QAAMS,WAAW;AAAA,IACfC,IAAI;AAAA,IACJC,IAAI;AAAA,IACJC,IAAI;AAAA,IACJC,IAAI;AAAA,IACJC,IAAI;AAAA,IACJT,IAAI;AAEN,QAAMU,UAAU;AAAA,IACdC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXjB,KAAK;AAEP,QAAMkB,UAAU;AAAA,IACdT,IAAIK,UAAU;AAAA,IACdJ,IAAII;AAAAA,IACJH,IAAIG,UAAU;AAAA,IACdK,IAAIL,UAAU;AAAA,IACdD,IAAIC,UAAU;AAAA,IACdV,IAAI;AAEAgB,QAAAA,kBAAkBC,SAASrB,KAAK;AAEhCsB,QAAAA,QAAQtB,UAAU,YAAY,UAAUuB;AAC9C,QAAMC,WAAWxB,UAAU,YAAYyB,YAAYzB,KAAK,IAAIuB;AACtDG,QAAAA,SAAS1B,UAAU,YAAY,iBAAiBuB;AAEtD,QAAMI,gBAAgB;AAAA,IACpBZ,SAASa;AAAAA,IACTZ,QAAQa;AAAAA,IACRZ,WAAWa;AAAAA,IACX9B,KAAK;AAEP,6BACE,OAAA;AAAA,IACEH,WAAWS,GACTR,QAAQiC,MACR;AAAA,MACE,CAACjC,QAAQkC,UAAU,GAAGhC,UAAU;AAAA,OAElCH,SACF;AAAA,IAAEoC,8BAEDC,UAAQ;AAAA,MACPrC,WAAWS,GAAGR,QAAQqC,OAAO;AAAA,QAC3B,CAACrC,QAAQsC,aAAa,GAAGpC,UAAU;AAAA,MAAA,CACpC;AAAA,MACD,cAAa,GAAEC,KAAM;AAAA,MACrBoC,MAAI;AAAA,MACJC,oBAAoB;AAAA,MACpBnC,UAAUA,YAAY,CAAC,WAAW,UAAU,EAAEoC,SAASvC,KAAK;AAAA,MAC5DE;AAAAA,MAAiB+B,8BAEhBO,UAAQ;AAAA,QACP3C,WAAWS,GAAGR,QAAQ2C,QAAQ3C,QAAQM,IAAI,CAAC;AAAA,QAC3CgB;AAAAA,QACAM;AAAAA,QACAtB;AAAAA,QAAW6B,UAEVN,gBACCe,oBAACf,eAAa;AAAA,UACZL;AAAAA,UACAE;AAAAA,UACAmB,OAAOzB;AAAAA,UACP0B,QAAQ1B;AAAAA,UACRV;AAAAA,QACD,CAAA,IAEDH;AAAAA,MAAAA,CAEM;AAAA,IAAA,CACF;AAAA,EAAA,CACP;AAET;"}
+{"version":3,"file":"Step.js","sources":["../../../../../../src/components/StepNavigation/DefaultNavigation/Step/Step.tsx"],"sourcesContent":["import {\n  Level0Good,\n  Level3Bad,\n  HourGlass,\n} from \"@hitachivantara/uikit-react-icons\";\nimport {\n  HvAvatarSize,\n  HvButtonProps,\n  HvBaseProps,\n  ExtractNames,\n  HvAvatar,\n  HvButton,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { getColor, getSemantic } from \"../utils\";\nimport { useClasses } from \"./Step.styles\";\n\ntype HvStepClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvStepProps\n  extends Pick<HvButtonProps, \"onClick\">,\n    Omit<HvBaseProps, \"onClick\"> {\n  /** A Jss Object used to override or extend the styles applied to the empty state StepNavigation. */\n  classes?: HvStepClasses;\n  /** State of the step. Values = {\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\", \"Enabled\"} */\n  state:\n    | \"Pending\"\n    | \"Failed\"\n    | \"Completed\"\n    | \"Current\"\n    | \"Disabled\"\n    | \"Enabled\";\n  /** Title of the step. */\n  title: string;\n  /** Sets one of the standard sizes of the step */\n  size?: HvAvatarSize;\n  /** Number of the step. */\n  number?: number;\n  /**\n   * Define if a step is disabled/enabled.\n   * If this property is not defined and the step is on state \"Disabled\", the step component will be disabled\n   */\n  disabled?: boolean;\n}\n\n/**\n * Step element of \"Default\" Step Navigation root component\n */\nexport const HvStep = ({\n  className,\n  classes: classesProp,\n  state,\n  title,\n  onClick,\n  disabled,\n  size = \"md\",\n  number = 1,\n}: HvStepProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const iconSize = {\n    xs: \"XS\",\n    sm: \"XS\",\n    md: \"S\",\n    ml: \"M\",\n    xl: \"M\",\n  }[size];\n\n  const squareL = {\n    Pending: 16,\n    Failed: 24,\n    Completed: 24,\n  }[state];\n\n  const svgSize = {\n    xs: squareL - 8,\n    sm: squareL,\n    md: squareL + 8,\n    lg: squareL + 16,\n    xl: squareL + 24,\n  }[size];\n\n  const backgroundColor = getColor(state);\n\n  const color = state === \"Pending\" ? \"atmo2\" : undefined;\n  const semantic = state !== \"Pending\" ? getSemantic(state) : undefined;\n  const status = state === \"Current\" ? \"secondary_60\" : undefined;\n\n  const IconComponent = {\n    Pending: HourGlass,\n    Failed: Level3Bad,\n    Completed: Level0Good,\n  }[state];\n\n  return (\n    <div\n      className={cx(\n        classes.root,\n        {\n          [classes.notCurrent]: state !== \"Current\",\n        },\n        className\n      )}\n    >\n      <HvButton\n        className={cx(classes.ghost, {\n          [classes.ghostDisabled]: state === \"Current\",\n        })}\n        aria-label={`${title}`}\n        icon\n        overrideIconColors={false}\n        disabled={disabled ?? [\"Current\", \"Disabled\"].includes(state)}\n        onClick={onClick}\n      >\n        <HvAvatar\n          className={cx(classes.avatar, classes[size])}\n          backgroundColor={backgroundColor}\n          status={status}\n          size={size}\n        >\n          {IconComponent ? (\n            <IconComponent\n              color={color}\n              semantic={semantic}\n              width={svgSize}\n              height={svgSize}\n              iconSize={iconSize}\n            />\n          ) : (\n            number\n          )}\n        </HvAvatar>\n      </HvButton>\n    </div>\n  );\n};\n"],"names":["HvStep","className","classes","classesProp","state","title","onClick","disabled","size","number","cx","useClasses","iconSize","xs","sm","md","ml","xl","squareL","Pending","Failed","Completed","svgSize","lg","backgroundColor","getColor","color","undefined","semantic","getSemantic","status","IconComponent","HourGlass","Level3Bad","Level0Good","root","notCurrent","ghost","ghostDisabled","includes","avatar"],"mappings":";;;;;AAgDO,MAAMA,SAASA,CAAC;AAAA,EACrBC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,OAAO;AAAA,EACPC,SAAS;AACE,MAAM;AACX,QAAA;AAAA,IAAEP;AAAAA,IAASQ;AAAAA,EAAAA,IAAOC,WAAWR,WAAW;AAE9C,QAAMS,WAAW;AAAA,IACfC,IAAI;AAAA,IACJC,IAAI;AAAA,IACJC,IAAI;AAAA,IACJC,IAAI;AAAA,IACJC,IAAI;AAAA,IACJT,IAAI;AAEN,QAAMU,UAAU;AAAA,IACdC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXjB,KAAK;AAEP,QAAMkB,UAAU;AAAA,IACdT,IAAIK,UAAU;AAAA,IACdJ,IAAII;AAAAA,IACJH,IAAIG,UAAU;AAAA,IACdK,IAAIL,UAAU;AAAA,IACdD,IAAIC,UAAU;AAAA,IACdV,IAAI;AAEAgB,QAAAA,kBAAkBC,SAASrB,KAAK;AAEhCsB,QAAAA,QAAQtB,UAAU,YAAY,UAAUuB;AAC9C,QAAMC,WAAWxB,UAAU,YAAYyB,YAAYzB,KAAK,IAAIuB;AACtDG,QAAAA,SAAS1B,UAAU,YAAY,iBAAiBuB;AAEtD,QAAMI,gBAAgB;AAAA,IACpBZ,SAASa;AAAAA,IACTZ,QAAQa;AAAAA,IACRZ,WAAWa;AAAAA,IACX9B,KAAK;AAEP,SACG,oBAAA,OAAA,EACC,WAAWM,GACTR,QAAQiC,MACR;AAAA,IACE,CAACjC,QAAQkC,UAAU,GAAGhC,UAAU;AAAA,EAAA,GAElCH,SACF,GAEA,UAAA,oBAAC,YACC,WAAWS,GAAGR,QAAQmC,OAAO;AAAA,IAC3B,CAACnC,QAAQoC,aAAa,GAAGlC,UAAU;AAAA,EACpC,CAAA,GACD,cAAa,GAAEC,KAAM,IACrB,MAAI,MACJ,oBAAoB,OACpB,UAAUE,YAAY,CAAC,WAAW,UAAU,EAAEgC,SAASnC,KAAK,GAC5D,SAEA,UAAA,oBAAC,UACC,EAAA,WAAWM,GAAGR,QAAQsC,QAAQtC,QAAQM,IAAI,CAAC,GAC3C,iBACA,QACA,MAECuB,UACC,gBAAA,oBAAC,iBACC,OACA,UACA,OAAOT,SACP,QAAQA,SACR,SAAmB,CAAA,IAGrBb,OAEJ,CAAA,EACF,CAAA,EACF,CAAA;AAEJ;"}

package/dist/esm/components/StepNavigation/SimpleNavigation/Dot/Dot.js

@@ -1,8 +1,8 @@
+import { jsx } from "@emotion/react/jsx-runtime";
 import { HvButton } from "@hitachivantara/uikit-react-core";
 import { getColor, dotSizes } from "../utils.js";
 import { useClasses } from "./Dot.styles.js";
 import { staticClasses } from "./Dot.styles.js";
-import { jsx } from "@emotion/react/jsx-runtime";
 const HvDot = ({
   classes: classesProp,
   className,
@@ -18,25 +18,17 @@ const HvDot = ({
     css
   } = useClasses(classesProp);
   const dotSize = dotSizes[size] * (state === "Current" ? 1.5 : 1);
-  return /* @__PURE__ */ jsx(HvButton, {
-    className: cx(css({
-      backgroundColor: getColor(state),
-      width: dotSize,
-      height: dotSize,
-      "&:hover, &:disabled": {
-        backgroundColor: getColor(state)
-      }
-    }), classes.root, {
-      [classes.active]: state === "Current",
-      [classes.ghostDisabled]: disabled ?? ["Current", "Disabled"].includes(state)
-    }, className),
-    "aria-label": `${title}`,
-    icon: true,
-    overrideIconColors: false,
-    disabled: disabled ?? ["Current", "Disabled"].includes(state),
-    onClick,
-    children: []
-  });
+  return /* @__PURE__ */ jsx(HvButton, { className: cx(css({
+    backgroundColor: getColor(state),
+    width: dotSize,
+    height: dotSize,
+    "&:hover, &:disabled": {
+      backgroundColor: getColor(state)
+    }
+  }), classes.root, {
+    [classes.active]: state === "Current",
+    [classes.ghostDisabled]: disabled ?? ["Current", "Disabled"].includes(state)
+  }, className), "aria-label": `${title}`, icon: true, overrideIconColors: false, disabled: disabled ?? ["Current", "Disabled"].includes(state), onClick, children: [] });
 };
 export {
   HvDot,

package/dist/esm/components/StepNavigation/SimpleNavigation/Dot/Dot.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dot.js","sources":["../../../../../../src/components/StepNavigation/SimpleNavigation/Dot/Dot.tsx"],"sourcesContent":["import {\n  ExtractNames,\n  HvBaseProps,\n  HvButton,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { HvStepProps } from \"../../DefaultNavigation\";\nimport { getColor, dotSizes } from \"../utils\";\nimport { staticClasses, useClasses } from \"./Dot.styles\";\n\nexport { staticClasses as dotClasses };\n\nexport type HvDotClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDotProps\n  extends Pick<\n      HvStepProps,\n      \"size\" | \"title\" | \"state\" | \"onClick\" | \"disabled\"\n    >,\n    Omit<HvBaseProps, \"title\" | \"onClick\"> {\n  /** A Jss Object used to override or extend the styles applied to the empty state StepNavigation. */\n  classes?: HvDotClasses;\n}\n\nexport const HvDot = ({\n  classes: classesProp,\n  className,\n  state,\n  title,\n  size = \"sm\",\n  onClick,\n  disabled,\n}: HvDotProps) => {\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const dotSize = dotSizes[size] * (state === \"Current\" ? 1.5 : 1);\n\n  return (\n    <HvButton\n      className={cx(\n        css({\n          backgroundColor: getColor(state),\n          width: dotSize,\n          height: dotSize,\n          \"&:hover, &:disabled\": {\n            backgroundColor: getColor(state),\n          },\n        }),\n        classes.root,\n        {\n          [classes.active]: state === \"Current\",\n          [classes.ghostDisabled]:\n            disabled ?? [\"Current\", \"Disabled\"].includes(state),\n        },\n        className\n      )}\n      aria-label={`${title}`}\n      icon\n      overrideIconColors={false}\n      disabled={disabled ?? [\"Current\", \"Disabled\"].includes(state)}\n      onClick={onClick}\n    >\n      {[]}\n    </HvButton>\n  );\n};\n"],"names":["HvDot","classes","classesProp","className","state","title","size","onClick","disabled","cx","css","useClasses","dotSize","dotSizes","HvButton","backgroundColor","getColor","width","height","root","active","ghostDisabled","includes","icon","overrideIconColors","children"],"mappings":";;;;;AAwBO,MAAMA,QAAQA,CAAC;AAAA,EACpBC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,OAAO;AAAA,EACPC;AAAAA,EACAC;AACU,MAAM;AACV,QAAA;AAAA,IAAEP;AAAAA,IAASQ;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,WAAWT,WAAW;AAEnD,QAAMU,UAAUC,SAASP,IAAI,KAAKF,UAAU,YAAY,MAAM;AAE9D,6BACGU,UAAQ;AAAA,IACPX,WAAWM,GACTC,IAAI;AAAA,MACFK,iBAAiBC,SAASZ,KAAK;AAAA,MAC/Ba,OAAOL;AAAAA,MACPM,QAAQN;AAAAA,MACR,uBAAuB;AAAA,QACrBG,iBAAiBC,SAASZ,KAAK;AAAA,MACjC;AAAA,IAAA,CACD,GACDH,QAAQkB,MACR;AAAA,MACE,CAAClB,QAAQmB,MAAM,GAAGhB,UAAU;AAAA,MAC5B,CAACH,QAAQoB,aAAa,GACpBb,YAAY,CAAC,WAAW,UAAU,EAAEc,SAASlB,KAAK;AAAA,OAEtDD,SACF;AAAA,IACA,cAAa,GAAEE,KAAM;AAAA,IACrBkB,MAAI;AAAA,IACJC,oBAAoB;AAAA,IACpBhB,UAAUA,YAAY,CAAC,WAAW,UAAU,EAAEc,SAASlB,KAAK;AAAA,IAC5DG;AAAAA,IAAiBkB,UAEhB,CAAA;AAAA,EAAA,CACO;AAEd;"}
+{"version":3,"file":"Dot.js","sources":["../../../../../../src/components/StepNavigation/SimpleNavigation/Dot/Dot.tsx"],"sourcesContent":["import {\n  ExtractNames,\n  HvBaseProps,\n  HvButton,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { HvStepProps } from \"../../DefaultNavigation\";\nimport { getColor, dotSizes } from \"../utils\";\nimport { staticClasses, useClasses } from \"./Dot.styles\";\n\nexport { staticClasses as dotClasses };\n\nexport type HvDotClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDotProps\n  extends Pick<\n      HvStepProps,\n      \"size\" | \"title\" | \"state\" | \"onClick\" | \"disabled\"\n    >,\n    Omit<HvBaseProps, \"title\" | \"onClick\"> {\n  /** A Jss Object used to override or extend the styles applied to the empty state StepNavigation. */\n  classes?: HvDotClasses;\n}\n\nexport const HvDot = ({\n  classes: classesProp,\n  className,\n  state,\n  title,\n  size = \"sm\",\n  onClick,\n  disabled,\n}: HvDotProps) => {\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const dotSize = dotSizes[size] * (state === \"Current\" ? 1.5 : 1);\n\n  return (\n    <HvButton\n      className={cx(\n        css({\n          backgroundColor: getColor(state),\n          width: dotSize,\n          height: dotSize,\n          \"&:hover, &:disabled\": {\n            backgroundColor: getColor(state),\n          },\n        }),\n        classes.root,\n        {\n          [classes.active]: state === \"Current\",\n          [classes.ghostDisabled]:\n            disabled ?? [\"Current\", \"Disabled\"].includes(state),\n        },\n        className\n      )}\n      aria-label={`${title}`}\n      icon\n      overrideIconColors={false}\n      disabled={disabled ?? [\"Current\", \"Disabled\"].includes(state)}\n      onClick={onClick}\n    >\n      {[]}\n    </HvButton>\n  );\n};\n"],"names":["HvDot","classes","classesProp","className","state","title","size","onClick","disabled","cx","css","useClasses","dotSize","dotSizes","backgroundColor","getColor","width","height","root","active","ghostDisabled","includes"],"mappings":";;;;;AAwBO,MAAMA,QAAQA,CAAC;AAAA,EACpBC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,OAAO;AAAA,EACPC;AAAAA,EACAC;AACU,MAAM;AACV,QAAA;AAAA,IAAEP;AAAAA,IAASQ;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,WAAWT,WAAW;AAEnD,QAAMU,UAAUC,SAASP,IAAI,KAAKF,UAAU,YAAY,MAAM;AAE9D,SACG,oBAAA,UAAA,EACC,WAAWK,GACTC,IAAI;AAAA,IACFI,iBAAiBC,SAASX,KAAK;AAAA,IAC/BY,OAAOJ;AAAAA,IACPK,QAAQL;AAAAA,IACR,uBAAuB;AAAA,MACrBE,iBAAiBC,SAASX,KAAK;AAAA,IACjC;AAAA,EAAA,CACD,GACDH,QAAQiB,MACR;AAAA,IACE,CAACjB,QAAQkB,MAAM,GAAGf,UAAU;AAAA,IAC5B,CAACH,QAAQmB,aAAa,GACpBZ,YAAY,CAAC,WAAW,UAAU,EAAEa,SAASjB,KAAK;AAAA,EAAA,GAEtDD,SACF,GACA,cAAa,GAAEE,KAAM,IACrB,MAAI,MACJ,oBAAoB,OACpB,UAAUG,YAAY,CAAC,WAAW,UAAU,EAAEa,SAASjB,KAAK,GAC5D,SAEC,UAAA,CACH,EAAA,CAAA;AAEJ;"}

package/dist/esm/components/StepNavigation/SimpleNavigation/SimpleNavigation.js

@@ -1,6 +1,6 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { useTheme } from "@hitachivantara/uikit-react-core";
 import { getColor, dotSizes } from "./utils.js";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { HvDot } from "./Dot/Dot.js";
 const HvSimpleNavigation = ({
   numSteps,
@@ -32,9 +32,9 @@ const HvSimpleNavigation = ({
     title: `${number}. ${rawTitle}`,
     titleWidth
   }));
-  return /* @__PURE__ */ jsxs("div", {
-    ...others,
-    children: [titles, /* @__PURE__ */ jsx(Steps, {
+  return /* @__PURE__ */ jsxs("div", { ...others, children: [
+    titles,
+    /* @__PURE__ */ jsx(Steps, { ...{
       stepsWidth,
       navWidth: width,
       separatorValues: {
@@ -48,8 +48,8 @@ const HvSimpleNavigation = ({
         maxSize: 1.5 * dotSize,
         StepComponent
       }
-    })]
-  });
+    } })
+  ] });
 };
 export {
   HvSimpleNavigation

package/dist/esm/components/StepNavigation/SimpleNavigation/SimpleNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"SimpleNavigation.js","sources":["../../../../../src/components/StepNavigation/SimpleNavigation/SimpleNavigation.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport {\n  HvBaseProps,\n  HvTheme,\n  useTheme,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { HvDot, HvDotProps } from \"./Dot\";\nimport { getColor, dotSizes } from \"./utils\";\n\nexport type ComponentChildProps = {\n  stepsWidth: number;\n  navWidth: number;\n  separatorValues: {\n    minWidth: number;\n    maxWidth: number;\n    getColor: (state: HvDotProps[\"state\"], activeTheme: HvTheme) => any;\n    height: number;\n  };\n  stepValues: {\n    minSize: number;\n    maxSize: number;\n    StepComponent: React.ComponentType<HvDotProps>;\n  };\n};\n\nexport interface HvSimpleNavigationProps extends Omit<HvBaseProps, \"children\"> {\n  /** Sets one of the standard sizes of the steps. */\n  stepSize?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n  /** Number of steps to show on the component. */\n  numSteps: number;\n  /** Returns a `ReactNode` of the titles container. */\n  getTitles: (\n    getTitleProps?: (params: {\n      state: HvDotProps[\"state\"];\n      rawTitle: string;\n      number: number;\n    }) => { variant: string; title: string }\n  ) => ReactNode;\n  /** Returns dynamic width values of the component (width, titleWidth, separatorWidth). */\n  getDynamicValues: (stepsWidth: number) => {\n    width: number;\n    titleWidth: number;\n    separatorWidth: number;\n  };\n  /** Component to render Step Navigation with props = {separatorValues, stepValues, stepsWidth} */\n  children: React.FunctionComponent<ComponentChildProps>;\n}\n\nexport const HvSimpleNavigation = ({\n  numSteps,\n  stepSize = \"sm\",\n  getTitles,\n  getDynamicValues,\n  children,\n  ...others\n}: HvSimpleNavigationProps) => {\n  const { activeTheme } = useTheme();\n\n  // step values\n  const dotSize = dotSizes[stepSize];\n  const StepComponent = HvDot;\n  //\n\n  const stepsWidth = (numSteps + 0.5) * dotSize;\n  const { width, titleWidth, separatorWidth } = getDynamicValues(stepsWidth);\n\n  // separator values\n  const maxWidth = Math.max(titleWidth - dotSize, separatorWidth);\n  const minWidth = Math.max(titleWidth - dotSize * 1.25, separatorWidth);\n  //\n\n  const Steps = children;\n\n  const titles = getTitles(({ rawTitle, number }) => ({\n    variant: \"label\",\n    title: `${number}. ${rawTitle}`,\n    titleWidth,\n  }));\n\n  return (\n    <div {...others}>\n      {titles}\n      <Steps\n        {...{\n          stepsWidth,\n          navWidth: width,\n          separatorValues: {\n            minWidth,\n            maxWidth,\n            getColor,\n            height: activeTheme?.stepNavigation.simpleSeparatorHeight || 0,\n          },\n          stepValues: {\n            minSize: dotSize,\n            maxSize: 1.5 * dotSize,\n            StepComponent,\n          },\n        }}\n      />\n    </div>\n  );\n};\n"],"names":["HvSimpleNavigation","numSteps","stepSize","getTitles","getDynamicValues","children","others","activeTheme","useTheme","dotSize","dotSizes","StepComponent","HvDot","stepsWidth","width","titleWidth","separatorWidth","maxWidth","Math","max","minWidth","Steps","titles","rawTitle","number","variant","title","_jsx","navWidth","separatorValues","getColor","height","stepNavigation","simpleSeparatorHeight","stepValues","minSize","maxSize"],"mappings":";;;;AAiDO,MAAMA,qBAAqBA,CAAC;AAAA,EACjCC;AAAAA,EACAC,WAAW;AAAA,EACXC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACoB,MAAM;AACvB,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,SAAS;AAG3BC,QAAAA,UAAUC,SAASR,QAAQ;AACjC,QAAMS,gBAAgBC;AAGhBC,QAAAA,cAAcZ,WAAW,OAAOQ;AAChC,QAAA;AAAA,IAAEK;AAAAA,IAAOC;AAAAA,IAAYC;AAAAA,EAAAA,IAAmBZ,iBAAiBS,UAAU;AAGzE,QAAMI,WAAWC,KAAKC,IAAIJ,aAAaN,SAASO,cAAc;AAC9D,QAAMI,WAAWF,KAAKC,IAAIJ,aAAaN,UAAU,MAAMO,cAAc;AAGrE,QAAMK,QAAQhB;AAERiB,QAAAA,SAASnB,UAAU,CAAC;AAAA,IAAEoB;AAAAA,IAAUC;AAAAA,EAAAA,OAAc;AAAA,IAClDC,SAAS;AAAA,IACTC,OAAQ,GAAEF,MAAO,KAAID,QAAS;AAAA,IAC9BR;AAAAA,EACA,EAAA;AAEF,8BACE,OAAA;AAAA,IAAA,GAAST;AAAAA,IAAMD,UACZiB,CAAAA,QACDK,oBAACN,OAAK;AAAA,MAEFR;AAAAA,MACAe,UAAUd;AAAAA,MACVe,iBAAiB;AAAA,QACfT;AAAAA,QACAH;AAAAA,QACAa;AAAAA,QACAC,SAAQxB,2CAAayB,eAAeC,0BAAyB;AAAA,MAC/D;AAAA,MACAC,YAAY;AAAA,QACVC,SAAS1B;AAAAA,QACT2B,SAAS,MAAM3B;AAAAA,QACfE;AAAAA,MACF;AAAA,IAAA,CAEH,CAAC;AAAA,EAAA,CACC;AAET;"}
+{"version":3,"file":"SimpleNavigation.js","sources":["../../../../../src/components/StepNavigation/SimpleNavigation/SimpleNavigation.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport {\n  HvBaseProps,\n  HvTheme,\n  useTheme,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { HvDot, HvDotProps } from \"./Dot\";\nimport { getColor, dotSizes } from \"./utils\";\n\nexport type ComponentChildProps = {\n  stepsWidth: number;\n  navWidth: number;\n  separatorValues: {\n    minWidth: number;\n    maxWidth: number;\n    getColor: (state: HvDotProps[\"state\"], activeTheme: HvTheme) => any;\n    height: number;\n  };\n  stepValues: {\n    minSize: number;\n    maxSize: number;\n    StepComponent: React.ComponentType<HvDotProps>;\n  };\n};\n\nexport interface HvSimpleNavigationProps extends Omit<HvBaseProps, \"children\"> {\n  /** Sets one of the standard sizes of the steps. */\n  stepSize?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n  /** Number of steps to show on the component. */\n  numSteps: number;\n  /** Returns a `ReactNode` of the titles container. */\n  getTitles: (\n    getTitleProps?: (params: {\n      state: HvDotProps[\"state\"];\n      rawTitle: string;\n      number: number;\n    }) => { variant: string; title: string }\n  ) => ReactNode;\n  /** Returns dynamic width values of the component (width, titleWidth, separatorWidth). */\n  getDynamicValues: (stepsWidth: number) => {\n    width: number;\n    titleWidth: number;\n    separatorWidth: number;\n  };\n  /** Component to render Step Navigation with props = {separatorValues, stepValues, stepsWidth} */\n  children: React.FunctionComponent<ComponentChildProps>;\n}\n\nexport const HvSimpleNavigation = ({\n  numSteps,\n  stepSize = \"sm\",\n  getTitles,\n  getDynamicValues,\n  children,\n  ...others\n}: HvSimpleNavigationProps) => {\n  const { activeTheme } = useTheme();\n\n  // step values\n  const dotSize = dotSizes[stepSize];\n  const StepComponent = HvDot;\n  //\n\n  const stepsWidth = (numSteps + 0.5) * dotSize;\n  const { width, titleWidth, separatorWidth } = getDynamicValues(stepsWidth);\n\n  // separator values\n  const maxWidth = Math.max(titleWidth - dotSize, separatorWidth);\n  const minWidth = Math.max(titleWidth - dotSize * 1.25, separatorWidth);\n  //\n\n  const Steps = children;\n\n  const titles = getTitles(({ rawTitle, number }) => ({\n    variant: \"label\",\n    title: `${number}. ${rawTitle}`,\n    titleWidth,\n  }));\n\n  return (\n    <div {...others}>\n      {titles}\n      <Steps\n        {...{\n          stepsWidth,\n          navWidth: width,\n          separatorValues: {\n            minWidth,\n            maxWidth,\n            getColor,\n            height: activeTheme?.stepNavigation.simpleSeparatorHeight || 0,\n          },\n          stepValues: {\n            minSize: dotSize,\n            maxSize: 1.5 * dotSize,\n            StepComponent,\n          },\n        }}\n      />\n    </div>\n  );\n};\n"],"names":["HvSimpleNavigation","numSteps","stepSize","getTitles","getDynamicValues","children","others","activeTheme","useTheme","dotSize","dotSizes","StepComponent","HvDot","stepsWidth","width","titleWidth","separatorWidth","maxWidth","Math","max","minWidth","Steps","titles","rawTitle","number","variant","title","navWidth","separatorValues","getColor","height","stepNavigation","simpleSeparatorHeight","stepValues","minSize","maxSize"],"mappings":";;;;AAiDO,MAAMA,qBAAqBA,CAAC;AAAA,EACjCC;AAAAA,EACAC,WAAW;AAAA,EACXC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACoB,MAAM;AACvB,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,SAAS;AAG3BC,QAAAA,UAAUC,SAASR,QAAQ;AACjC,QAAMS,gBAAgBC;AAGhBC,QAAAA,cAAcZ,WAAW,OAAOQ;AAChC,QAAA;AAAA,IAAEK;AAAAA,IAAOC;AAAAA,IAAYC;AAAAA,EAAAA,IAAmBZ,iBAAiBS,UAAU;AAGzE,QAAMI,WAAWC,KAAKC,IAAIJ,aAAaN,SAASO,cAAc;AAC9D,QAAMI,WAAWF,KAAKC,IAAIJ,aAAaN,UAAU,MAAMO,cAAc;AAGrE,QAAMK,QAAQhB;AAERiB,QAAAA,SAASnB,UAAU,CAAC;AAAA,IAAEoB;AAAAA,IAAUC;AAAAA,EAAAA,OAAc;AAAA,IAClDC,SAAS;AAAA,IACTC,OAAQ,GAAEF,MAAO,KAAID,QAAS;AAAA,IAC9BR;AAAAA,EACA,EAAA;AAGA,SAAA,qBAAC,OAAI,EAAA,GAAIT,QACNgB,UAAAA;AAAAA,IAAAA;AAAAA,IACD,oBAAC,SACK,GAAA;AAAA,MACFT;AAAAA,MACAc,UAAUb;AAAAA,MACVc,iBAAiB;AAAA,QACfR;AAAAA,QACAH;AAAAA,QACAY;AAAAA,QACAC,SAAQvB,2CAAawB,eAAeC,0BAAyB;AAAA,MAC/D;AAAA,MACAC,YAAY;AAAA,QACVC,SAASzB;AAAAA,QACT0B,SAAS,MAAM1B;AAAAA,QACfE;AAAAA,MACF;AAAA,IAAA,GACA;AAAA,EAEN,EAAA,CAAA;AAEJ;"}