@hitachivantara/uikit-react-lab 5.5.1 → 5.5.3

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

@@ -1 +1 @@
-{"version":3,"file":"SidebarGroup.cjs","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,oBAAAA,WAAWJ,WAAW;AAE7C,QAAA;AAAA,IAAEK;AAAAA,IAAoBC;AAAAA,MAA0BC,YAAe,eAAA;AAErE,QAAMC,SAASC,MAAAA,QACb,MAAM,CAAC,EAACJ,yDAAoBK,KAAMC,CAAYA,YAAAA,YAAYnB,MAC1D,CAACa,oBAAoBb,EAAE,CACzB;AAEMoB,QAAAA,cAAcC,MAAAA,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,yCACE,MAAA;AAAA,IAAIU,WAAWd,GAAGC,IAAI;AAAA,MAAEc,aAAaC,qBAASvB,KAAK;AAAA,IAAA,CAAG,GAAGI,QAAQoB,IAAI;AAAA,IAAEC,WACrEC,2BAAAA,KAAA,OAAA;AAAA,MAAKL,WAAWjB,QAAQuB;AAAAA,MAAeF,WACrCC,2BAAAA,KAAA,OAAA;AAAA,QAAKL,WAAWjB,QAAQwB;AAAAA,QAAeH,WACrCI,2BAAAA,IAAA,OAAA;AAAA,UAAKR,WAAWjB,QAAQF;AAAAA,UAAM4B,MAAK;AAAA,UAAML,UACtCvB;AAAAA,QAAAA,CACE,GACL2B,2BAAAA,IAACE,6BAAY;AAAA,UAACC,SAAQ;AAAA,UAAQP,UAC3B1B,MAAMkC,SAAS,IAAK,GAAEnC,KAAM,KAAIC,MAAMkC,MAAO,MAAKnC;AAAAA,QAAAA,CACvC,CAAC;AAAA,MAAA,CACZ,GACL+B,2BAAAA,IAACK,yBAAQ;AAAA,QACPhC,MAAI;AAAA,QACJiC,SAASlB;AAAAA,QACT,iBAAeJ;AAAAA,QAAO,GAClBV;AAAAA,QAAiBsB,UAEpBZ,SAASgB,2BAAAA,IAACO,oBAAE;AAAA,UAACN,MAAK;AAAA,QAAA,CAAQ,IAAID,2BAAAA,IAACQ,sBAAI;AAAA,UAACP,MAAK;AAAA,QAAA,CAAQ;AAAA,MAAA,CAC1C,CAAC;AAAA,IAAA,CACR,GACJ7B,eACC4B,2BAAAA,IAAA,OAAA;AAAA,MAAKR,WAAWjB,QAAQkC;AAAAA,MAAqBb,yCAC1CM,6BAAY;AAAA,QAAAN,UAAExB;AAAAA,MAAAA,CAA0B;AAAA,IAAA,CACtC,GAENY,UACCgB,2BAAAA,IAAA,OAAA;AAAA,MAAKR,WAAWjB,QAAQmC;AAAAA,MAAed,UACpC1B,MAAMyC,IAAKC,CAAAA,uCACTC,0BAAAA,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.cjs","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","jsxs","borderColor","getColor","root","titleContainer","labelContainer","jsx","HvTypography","length","HvButton","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,oBAAAA,WAAWJ,WAAW;AAE7C,QAAA;AAAA,IAAEK;AAAAA,IAAoBC;AAAAA,MAA0BC,YAAe,eAAA;AAErE,QAAMC,SAASC,MAAAA,QACb,MAAM,CAAC,EAACJ,yDAAoBK,KAAMC,CAAYA,YAAAA,YAAYnB,MAC1D,CAACa,oBAAoBb,EAAE,CACzB;AAEMoB,QAAAA,cAAcC,MAAAA,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,SACGU,2BAAA,KAAA,MAAA,EAAG,WAAWd,GAAGC,IAAI;AAAA,IAAEc,aAAaC,qBAASvB,KAAK;AAAA,EAAG,CAAA,GAAGI,QAAQoB,IAAI,GACnE,UAAA;AAAA,IAACH,2BAAA,KAAA,OAAA,EAAI,WAAWjB,QAAQqB,gBACtB,UAAA;AAAA,MAACJ,2BAAA,KAAA,OAAA,EAAI,WAAWjB,QAAQsB,gBACtB,UAAA;AAAA,QAAAC,+BAAC,SAAI,WAAWvB,QAAQF,MAAM,MAAK,QAChCA,UACH,MAAA;AAAA,QACCyB,2BAAA,IAAAC,eAAA,cAAA,EAAa,SAAQ,UACnB7B,UAAM8B,MAAAA,SAAS,IAAK,GAAE/B,KAAM,KAAIC,MAAM8B,MAAO,MAAK/B,OACrD;AAAA,MAAA,GACF;AAAA,MACA6B,2BAAAA,IAACG,2BACC,MAAI,MACJ,SAASb,aACT,iBAAeJ,QACf,GAAIV,mBAEHU,mBAAUc,2BAAA,IAAAI,oBAAA,EAAG,MAAK,QAAM,mCAAOC,gBAAAA,MAAK,EAAA,MAAK,QAAS,EACrD,CAAA;AAAA,IAAA,GACF;AAAA,IACC/B,8CACE,OAAI,EAAA,WAAWG,QAAQ6B,sBACtB,UAAAN,2BAAAA,IAACC,eAAAA,cAAc3B,EAAAA,UAAAA,YAAAA,CAAY,EAC7B,CAAA;AAAA,IAEDY,UACEc,2BAAAA,IAAA,OAAA,EAAI,WAAWvB,QAAQ8B,gBACrBnC,gBAAMoC,IAAKC,CAAAA,QACTT,+BAAAU,0BAAAA,iCAAA,EAEK/B,GAAAA,WACA8B,GAAAA,OAFCA,IAAIvC,EAED,CAEX,GACH;AAAA,EAEJ,EAAA,CAAA;AAEJ;;;"}

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

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const material = require("@mui/material");
 const React = require("react");
 const core = require("@dnd-kit/core");
 const SidebarGroupItem = require("./SidebarGroupItem.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const HvFlowDraggableSidebarGroupItem = ({
   label,
   id,
@@ -34,15 +34,7 @@ const HvFlowDraggableSidebarGroupItem = ({
   const style = transform ? {
     transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`
   } : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsx(SidebarGroupItem.HvFlowSidebarGroupItem, {
-    ref: forkedRef,
-    style,
-    label,
-    isDragging,
-    ...listeners,
-    ...attributes,
-    ...others
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(SidebarGroupItem.HvFlowSidebarGroupItem, { ref: forkedRef, style, label, isDragging, ...listeners, ...attributes, ...others });
 };
 exports.HvFlowDraggableSidebarGroupItem = HvFlowDraggableSidebarGroupItem;
 //# sourceMappingURL=DraggableSidebarGroupItem.cjs.map

package/dist/cjs/components/Flow/Sidebar/SidebarGroup/SidebarGroupItem/DraggableSidebarGroupItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DraggableSidebarGroupItem.cjs","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,aAAoB,IAAI;AAElC,QAAA;AAAA,IAAEC;AAAAA,IAAYC;AAAAA,IAAWC;AAAAA,IAAYC;AAAAA,IAAYC;AAAAA,MACrDC,kBAAa;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,SAAAA,WAAWf,SAASI,UAAU;AAEhD,QAAMY,QAAQV,YACV;AAAA,IACEA,WAAY,eAAcA,UAAUI,CAAE,OAAMJ,UAAUO,CAAE;AAAA,EAE1DI,IAAAA;AAEJ,wCACGC,iBAAAA,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.cjs","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","jsx","HvFlowSidebarGroupItem"],"mappings":";;;;;;;AAiBO,MAAMA,kCAAkCA,CAAC;AAAA,EAC9CC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACiC,MAAM;;AACpCC,QAAAA,UAAUC,aAAoB,IAAI;AAElC,QAAA;AAAA,IAAEC;AAAAA,IAAYC;AAAAA,IAAWC;AAAAA,IAAYC;AAAAA,IAAYC;AAAAA,MACrDC,kBAAa;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,SAAAA,WAAWf,SAASI,UAAU;AAEhD,QAAMY,QAAQV,YACV;AAAA,IACEA,WAAY,eAAcA,UAAUI,CAAE,OAAMJ,UAAUO,CAAE;AAAA,EAE1DI,IAAAA;AAEJ,SACGC,2BAAA,IAAAC,iBAAA,wBAAA,EACC,KAAKL,WACL,OACA,OACA,YACIX,GAAAA,cACAD,YACAH,GAAAA,OACJ,CAAA;AAEN;;"}

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

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const SidebarGroupItem_styles = require("./SidebarGroupItem.styles.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const HvFlowSidebarGroupItem = React.forwardRef(({
   label,
   isDragging,
@@ -16,18 +16,12 @@ const HvFlowSidebarGroupItem = React.forwardRef(({
     classes,
     cx
   } = SidebarGroupItem_styles.useClasses(classesProp);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    ref,
-    className: cx(classes.root, {
-      [classes.dragging]: isDragging
-    }, className),
-    ...others,
-    children: [/* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, {
-      children: label
-    }), /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Drag, {
-      role: "none"
-    })]
-  });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cx(classes.root, {
+    [classes.dragging]: isDragging
+  }, className), ...others, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Drag, { role: "none" })
+  ] });
 });
 exports.flowSidebarGroupItemClasses = SidebarGroupItem_styles.staticClasses;
 exports.HvFlowSidebarGroupItem = HvFlowSidebarGroupItem;

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

@@ -1 +1 @@
-{"version":3,"file":"SidebarGroupItem.cjs","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,iBAIpC,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,wBAAAA,WAAWL,WAAW;AAE9C,yCACE,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,2BAAAA,IAACC,6BAAY;AAAA,MAAAF,UAAEX;AAAAA,IAAAA,CAAoB,GACnCY,2BAAAA,IAACE,sBAAI;AAAA,MAACC,MAAK;AAAA,IAAA,CAAQ,CAAC;AAAA,EAAA,CACjB;AAET,CACF;;;"}
+{"version":3,"file":"SidebarGroupItem.cjs","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","jsx","HvTypography","Drag"],"mappings":";;;;;;;AAwBaA,MAAAA,yBAAyBC,iBAIpC,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,wBAAAA,WAAWL,WAAW;AAE9C,yCACG,OACC,EAAA,KACA,WAAWI,GACTL,QAAQO,MACR;AAAA,IAAE,CAACP,QAAQQ,QAAQ,GAAGT;AAAAA,EACtBG,GAAAA,SACF,GACA,GAAIC,QAEJ,UAAA;AAAA,IAAAM,2BAAAA,IAACC,+BAAcZ,UAAM,MAAA,CAAA;AAAA,IACrBW,2BAAAA,IAACE,gBAAK,MAAA,EAAA,MAAK,OAAM,CAAA;AAAA,EACnB,EAAA,CAAA;AAEJ,CACF;;;"}

package/dist/cjs/components/StepNavigation/DefaultNavigation/DefaultNavigation.cjs

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const utils = require("./utils.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const Step = require("./Step/Step.cjs");
 const HvDefaultNavigation = ({
   numSteps,
@@ -37,9 +37,8 @@ const HvDefaultNavigation = ({
     titleWidth,
     titleDisabled: state === "Disabled"
   }));
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    ...other,
-    children: [/* @__PURE__ */ jsxRuntime.jsx(Steps, {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...other, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Steps, { ...{
       stepsWidth,
       navWidth: width,
       separatorValues: {
@@ -53,8 +52,9 @@ const HvDefaultNavigation = ({
         maxSize,
         StepComponent
       }
-    }), titles]
-  });
+    } }),
+    titles
+  ] });
 };
 exports.HvDefaultNavigation = HvDefaultNavigation;
 //# sourceMappingURL=DefaultNavigation.cjs.map

package/dist/cjs/components/StepNavigation/DefaultNavigation/DefaultNavigation.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultNavigation.cjs","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,eAAS,SAAA;AAG3B,QAAA;AAAA,IAAEC,WAAWC;AAAAA,IAASC,QAAQC;AAAAA,EAAAA,IAAYC,MAAAA,UAAUZ,QAAQ;AAClE,QAAMa,gBAAgBC,KAAAA;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,yCACE,OAAA;AAAA,IAAA,GAASpB;AAAAA,IAAKD,UAAA,CACZwB,2BAAAA,IAACL,OAAK;AAAA,MAEFR;AAAAA,MACAc,UAAUb;AAAAA,MACVc,iBAAiB;AAAA,QACfR;AAAAA,QACAH;AAAAA,QAAAA,UACAY,MAAAA;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.cjs","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","jsxs","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,eAAS,SAAA;AAG3B,QAAA;AAAA,IAAEC,WAAWC;AAAAA,IAASC,QAAQC;AAAAA,EAAAA,IAAYC,MAAAA,UAAUZ,QAAQ;AAClE,QAAMa,gBAAgBC,KAAAA;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,SAAAG,2BAAA,KAAC,OAAI,EAAA,GAAIvB,OACP,UAAA;AAAA,IAAAwB,2BAAA,IAAC,SACK,GAAA;AAAA,MACFd;AAAAA,MACAe,UAAUd;AAAAA,MACVe,iBAAiB;AAAA,QACfT;AAAAA,QACAH;AAAAA,QAAAA,UACAa,MAAAA;AAAAA,QACAC,SAAQ3B,2CAAa4B,eAAeC,2BAA0B;AAAA,MAChE;AAAA,MACAC,YAAY;AAAA,QACVzB;AAAAA,QACAF;AAAAA,QACAI;AAAAA,MACF;AAAA,IAAA,GACA;AAAA,IAEHW;AAAAA,EACH,EAAA,CAAA;AAEJ;;"}

package/dist/cjs/components/StepNavigation/DefaultNavigation/Step/Step.cjs

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const utils = require("../utils.cjs");
 const Step_styles = require("./Step.styles.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const HvStep = ({
   className,
   classes: classesProp,
@@ -47,34 +47,11 @@ const HvStep = ({
     Failed: uikitReactIcons.Level3Bad,
     Completed: uikitReactIcons.Level0Good
   }[state];
-  return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    className: cx(classes.root, {
-      [classes.notCurrent]: state !== "Current"
-    }, className),
-    children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.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__ */ jsxRuntime.jsx(uikitReactCore.HvAvatar, {
-        className: cx(classes.avatar, classes[size]),
-        backgroundColor,
-        status,
-        size,
-        children: IconComponent ? /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {
-          color,
-          semantic,
-          width: svgSize,
-          height: svgSize,
-          iconSize
-        }) : number
-      })
-    })
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(classes.root, {
+    [classes.notCurrent]: state !== "Current"
+  }, className), children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.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__ */ jsxRuntime.jsx(uikitReactCore.HvAvatar, { className: cx(classes.avatar, classes[size]), backgroundColor, status, size, children: IconComponent ? /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { color, semantic, width: svgSize, height: svgSize, iconSize }) : number }) }) });
 };
 exports.HvStep = HvStep;
 //# sourceMappingURL=Step.cjs.map

package/dist/cjs/components/StepNavigation/DefaultNavigation/Step/Step.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Step.cjs","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,YAAAA,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,eAASrB,KAAK;AAEhCsB,QAAAA,QAAQtB,UAAU,YAAY,UAAUuB;AAC9C,QAAMC,WAAWxB,UAAU,YAAYyB,MAAAA,YAAYzB,KAAK,IAAIuB;AACtDG,QAAAA,SAAS1B,UAAU,YAAY,iBAAiBuB;AAEtD,QAAMI,gBAAgB;AAAA,IACpBZ,SAASa,gBAAAA;AAAAA,IACTZ,QAAQa,gBAAAA;AAAAA,IACRZ,WAAWa,gBAAAA;AAAAA,IACX9B,KAAK;AAEP,wCACE,OAAA;AAAA,IACEH,WAAWS,GACTR,QAAQiC,MACR;AAAA,MACE,CAACjC,QAAQkC,UAAU,GAAGhC,UAAU;AAAA,OAElCH,SACF;AAAA,IAAEoC,yCAEDC,yBAAQ;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,yCAEhBO,yBAAQ;AAAA,QACP3C,WAAWS,GAAGR,QAAQ2C,QAAQ3C,QAAQM,IAAI,CAAC;AAAA,QAC3CgB;AAAAA,QACAM;AAAAA,QACAtB;AAAAA,QAAW6B,UAEVN,gBACCe,2BAAAA,IAACf,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.cjs","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","jsx","root","notCurrent","HvButton","ghost","ghostDisabled","includes","HvAvatar","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,YAAAA,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,eAASrB,KAAK;AAEhCsB,QAAAA,QAAQtB,UAAU,YAAY,UAAUuB;AAC9C,QAAMC,WAAWxB,UAAU,YAAYyB,MAAAA,YAAYzB,KAAK,IAAIuB;AACtDG,QAAAA,SAAS1B,UAAU,YAAY,iBAAiBuB;AAEtD,QAAMI,gBAAgB;AAAA,IACpBZ,SAASa,gBAAAA;AAAAA,IACTZ,QAAQa,gBAAAA;AAAAA,IACRZ,WAAWa,gBAAAA;AAAAA,IACX9B,KAAK;AAEP,SACG+B,2BAAAA,IAAA,OAAA,EACC,WAAWzB,GACTR,QAAQkC,MACR;AAAA,IACE,CAAClC,QAAQmC,UAAU,GAAGjC,UAAU;AAAA,EAAA,GAElCH,SACF,GAEA,UAAAkC,+BAACG,eAAAA,YACC,WAAW5B,GAAGR,QAAQqC,OAAO;AAAA,IAC3B,CAACrC,QAAQsC,aAAa,GAAGpC,UAAU;AAAA,EACpC,CAAA,GACD,cAAa,GAAEC,KAAM,IACrB,MAAI,MACJ,oBAAoB,OACpB,UAAUE,YAAY,CAAC,WAAW,UAAU,EAAEkC,SAASrC,KAAK,GAC5D,SAEA,UAAA+B,+BAACO,eAAAA,UACC,EAAA,WAAWhC,GAAGR,QAAQyC,QAAQzC,QAAQM,IAAI,CAAC,GAC3C,iBACA,QACA,MAECuB,UACC,gBAAAI,2BAAA,IAAC,iBACC,OACA,UACA,OAAOb,SACP,QAAQA,SACR,SAAmB,CAAA,IAGrBb,OAEJ,CAAA,EACF,CAAA,EACF,CAAA;AAEJ;;"}

package/dist/cjs/components/StepNavigation/SimpleNavigation/Dot/Dot.cjs

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const utils = require("../utils.cjs");
 const Dot_styles = require("./Dot.styles.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const HvDot = ({
   classes: classesProp,
   className,
@@ -19,25 +19,17 @@ const HvDot = ({
     css
   } = Dot_styles.useClasses(classesProp);
   const dotSize = utils.dotSizes[size] * (state === "Current" ? 1.5 : 1);
-  return /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, {
-    className: cx(css({
-      backgroundColor: utils.getColor(state),
-      width: dotSize,
-      height: dotSize,
-      "&:hover, &:disabled": {
-        backgroundColor: utils.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__ */ jsxRuntime.jsx(uikitReactCore.HvButton, { className: cx(css({
+    backgroundColor: utils.getColor(state),
+    width: dotSize,
+    height: dotSize,
+    "&:hover, &:disabled": {
+      backgroundColor: utils.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: [] });
 };
 exports.dotClasses = Dot_styles.staticClasses;
 exports.HvDot = HvDot;

package/dist/cjs/components/StepNavigation/SimpleNavigation/Dot/Dot.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Dot.cjs","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,WAAAA,WAAWT,WAAW;AAEnD,QAAMU,UAAUC,MAASP,SAAAA,IAAI,KAAKF,UAAU,YAAY,MAAM;AAE9D,wCACGU,eAAAA,UAAQ;AAAA,IACPX,WAAWM,GACTC,IAAI;AAAA,MACFK,iBAAiBC,eAASZ,KAAK;AAAA,MAC/Ba,OAAOL;AAAAA,MACPM,QAAQN;AAAAA,MACR,uBAAuB;AAAA,QACrBG,iBAAiBC,eAASZ,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.cjs","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","jsx","HvButton","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,WAAAA,WAAWT,WAAW;AAEnD,QAAMU,UAAUC,MAASP,SAAAA,IAAI,KAAKF,UAAU,YAAY,MAAM;AAE9D,SACGU,2BAAA,IAAAC,eAAA,UAAA,EACC,WAAWN,GACTC,IAAI;AAAA,IACFM,iBAAiBC,eAASb,KAAK;AAAA,IAC/Bc,OAAON;AAAAA,IACPO,QAAQP;AAAAA,IACR,uBAAuB;AAAA,MACrBI,iBAAiBC,eAASb,KAAK;AAAA,IACjC;AAAA,EAAA,CACD,GACDH,QAAQmB,MACR;AAAA,IACE,CAACnB,QAAQoB,MAAM,GAAGjB,UAAU;AAAA,IAC5B,CAACH,QAAQqB,aAAa,GACpBd,YAAY,CAAC,WAAW,UAAU,EAAEe,SAASnB,KAAK;AAAA,EAAA,GAEtDD,SACF,GACA,cAAa,GAAEE,KAAM,IACrB,MAAI,MACJ,oBAAoB,OACpB,UAAUG,YAAY,CAAC,WAAW,UAAU,EAAEe,SAASnB,KAAK,GAC5D,SAEC,UAAA,CACH,EAAA,CAAA;AAEJ;;;"}

package/dist/cjs/components/StepNavigation/SimpleNavigation/SimpleNavigation.cjs

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const utils = require("./utils.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const Dot = require("./Dot/Dot.cjs");
 const HvSimpleNavigation = ({
   numSteps,
@@ -34,9 +34,9 @@ const HvSimpleNavigation = ({
     title: `${number}. ${rawTitle}`,
     titleWidth
   }));
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    ...others,
-    children: [titles, /* @__PURE__ */ jsxRuntime.jsx(Steps, {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...others, children: [
+    titles,
+    /* @__PURE__ */ jsxRuntime.jsx(Steps, { ...{
       stepsWidth,
       navWidth: width,
       separatorValues: {
@@ -50,8 +50,8 @@ const HvSimpleNavigation = ({
         maxSize: 1.5 * dotSize,
         StepComponent
       }
-    })]
-  });
+    } })
+  ] });
 };
 exports.HvSimpleNavigation = HvSimpleNavigation;
 //# sourceMappingURL=SimpleNavigation.cjs.map

package/dist/cjs/components/StepNavigation/SimpleNavigation/SimpleNavigation.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SimpleNavigation.cjs","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,eAAS,SAAA;AAG3BC,QAAAA,UAAUC,eAASR,QAAQ;AACjC,QAAMS,gBAAgBC,IAAAA;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,yCACE,OAAA;AAAA,IAAA,GAAST;AAAAA,IAAMD,UACZiB,CAAAA,QACDK,2BAAAA,IAACN,OAAK;AAAA,MAEFR;AAAAA,MACAe,UAAUd;AAAAA,MACVe,iBAAiB;AAAA,QACfT;AAAAA,QACAH;AAAAA,QAAAA,UACAa,MAAAA;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.cjs","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","jsxs","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,eAAS,SAAA;AAG3BC,QAAAA,UAAUC,eAASR,QAAQ;AACjC,QAAMS,gBAAgBC,IAAAA;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,SAAAY,2BAAA,KAAC,OAAI,EAAA,GAAIrB,QACNgB,UAAAA;AAAAA,IAAAA;AAAAA,IACDM,2BAAA,IAAC,SACK,GAAA;AAAA,MACFf;AAAAA,MACAgB,UAAUf;AAAAA,MACVgB,iBAAiB;AAAA,QACfV;AAAAA,QACAH;AAAAA,QAAAA,UACAc,MAAAA;AAAAA,QACAC,SAAQzB,2CAAa0B,eAAeC,0BAAyB;AAAA,MAC/D;AAAA,MACAC,YAAY;AAAA,QACVC,SAAS3B;AAAAA,QACT4B,SAAS,MAAM5B;AAAAA,QACfE;AAAAA,MACF;AAAA,IAAA,GACA;AAAA,EAEN,EAAA,CAAA;AAEJ;;"}

package/dist/cjs/components/StepNavigation/StepNavigation.cjs

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const _styled = require("@emotion/styled/base");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const utils = require("./utils.cjs");
 const StepNavigation_styles = require("./StepNavigation.styles.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const DefaultNavigation = require("./DefaultNavigation/DefaultNavigation.cjs");
 const SimpleNavigation = require("./SimpleNavigation/SimpleNavigation.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
@@ -52,18 +52,12 @@ const HvStepNavigation = ({
   }, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2xhYi9zcmMvY29tcG9uZW50cy9TdGVwTmF2aWdhdGlvbi9TdGVwTmF2aWdhdGlvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBdUdJIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2xhYi9zcmMvY29tcG9uZW50cy9TdGVwTmF2aWdhdGlvbi9TdGVwTmF2aWdhdGlvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBSZWFjdE5vZGUgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuXG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5pbXBvcnQge1xuICBIdkJhc2VQcm9wcyxcbiAgSHZCcmVha3BvaW50cyxcbiAgdXNlVGhlbWUsXG4gIHVzZVdpZHRoLFxuICBIdkJveCxcbiAgSHZUb29sdGlwLFxuICBIdlR5cG9ncmFwaHksXG4gIEV4dHJhY3ROYW1lcyxcbn0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1yZWFjdC1jb3JlXCI7XG5cbmltcG9ydCB7XG4gIEh2RGVmYXVsdE5hdmlnYXRpb24sXG4gIEh2RGVmYXVsdE5hdmlnYXRpb25Qcm9wcyxcbiAgSHZTdGVwUHJvcHMsXG59IGZyb20gXCIuL0RlZmF1bHROYXZpZ2F0aW9uXCI7XG5pbXBvcnQgeyBIdlNpbXBsZU5hdmlnYXRpb24gfSBmcm9tIFwiLi9TaW1wbGVOYXZpZ2F0aW9uXCI7XG5pbXBvcnQgeyBTRVBBUkFUT1JfV0lEVEgsIFRJVExFX01BUkdJTiwgVElUTEVfV0lEVEggfSBmcm9tIFwiLi91dGlsc1wiO1xuaW1wb3J0IHsgc3RhdGljQ2xhc3NlcywgdXNlQ2xhc3NlcyB9IGZyb20gXCIuL1N0ZXBOYXZpZ2F0aW9uLnN0eWxlc1wiO1xuXG5leHBvcnQgeyBzdGF0aWNDbGFzc2VzIGFzIHN0ZXBOYXZpZ2F0aW9uQ2xhc3NlcyB9O1xuXG5leHBvcnQgdHlwZSBIdlN0ZXBOYXZpZ2F0aW9uQ2xhc3NlcyA9IEV4dHJhY3ROYW1lczx0eXBlb2YgdXNlQ2xhc3Nlcz47XG5cbmV4cG9ydCBpbnRlcmZhY2UgSHZTdGVwTmF2aWdhdGlvblByb3BzIGV4dGVuZHMgSHZCYXNlUHJvcHMge1xuICAvKiogVHlwZSBvZiBzdGVwIG5hdmlnYXRpb24uIFZhbHVlcyA9IHtcIlNpbXBsZVwiLCBcIkRlZmF1bHRcIn0gKi9cbiAgdHlwZT86IFwiU2ltcGxlXCIgfCBcIkRlZmF1bHRcIjtcbiAgLyoqIFN0ZXBzIHRvIHNob3cgb24gdGhlIGNvbXBvbmVudC4gKi9cbiAgc3RlcHM6IEFycmF5PFxuICAgIFBpY2s8XG4gICAgICBIdlN0ZXBQcm9wcyxcbiAgICAgIFwic3RhdGVcIiB8IFwidGl0bGVcIiB8IFwib25DbGlja1wiIHwgXCJjbGFzc05hbWVcIiB8IFwiZGlzYWJsZWRcIlxuICAgID4gJiB7XG4gICAgICAvKiogQ2xhc3MgbmFtZXMgdG8gb3ZlcnJpZGUgc3R5bGVzIG9uIHRoZSBzZXBhcmF0b3IgY29tcG9uZW50IGFmdGVyIHRoZSBzdGVwLiAqL1xuICAgICAgc2VwYXJhdG9yQ2xhc3NOYW1lPzogc3RyaW5nO1xuICAgICAgLyoqIENsYXNzIG5hbWVzIHRvIG92ZXJyaWRlIHN0eWxlcyBvbiB0aGUgdGl0bGUgY29tcG9uZW50IGFib3ZlIHRoZSBzdGVwLiAqL1xuICAgICAgdGl0bGVDbGFzc05hbWU/OiBzdHJpbmc7XG4gICAgfVxuICA+O1xuICAvKiogU2V0cyBvbmUgb2YgdGhlIHN0YW5kYXJkIHNpemVzIG9mIHRoZSBzdGVwcy4gKi9cbiAgc3RlcFNpemU/OiBcInhzXCIgfCBcInNtXCIgfCBcIm1kXCIgfCBcImxnXCIgfCBcInhsXCI7XG4gIC8qKiBXaWR0aCBvZiB0aGUgY29tcG9uZW50IGVsZW1lbnQgb24gZWFjaCBicmVha3BvaW50IHNjcmVlbiByZXNvbHV0aW9uLiAqL1xuICB3aWR0aD86IHsgW2JyZWFrcG9pbnQgaW4gSHZCcmVha3BvaW50c10/OiBudW1iZXIgfTtcbiAgLyoqIERlZmluZXMgZWl0aGVyIHNob3cgYSB0aXRsZSBvciBvbmx5IGEgdG9vbHRpcCBvbiBlYWNoIHN0ZXAgY29tcG9uZW50LiAqL1xuICBzaG93VGl0bGVzPzogYm9vbGVhbjtcbiAgLyoqIEEgSnNzIE9iamVjdCB1c2VkIHRvIG92ZXJyaWRlIG9yIGV4dGVuZCB0aGUgc3R5bGVzIGFwcGxpZWQgdG8gdGhlIGVtcHR5IHN0YXRlIFN0ZXBOYXZpZ2F0aW9uLiAqL1xuICBjbGFzc2VzPzogSHZTdGVwTmF2aWdhdGlvbkNsYXNzZXM7XG59XG5cbi8qKlxuICogTmF2aWdhdGlvbiBwYWdlIHdpdGggc3RlcHMuXG4gKlxuICogWW91IG5lZWQgdG8gZGVmaW5lIHRoZSA8Yj5zdGVwczxiLz4gZGlzcGxheWVkIG9uIHRoZSBjb21wb25lbnQgc28gdGhhdCBpdHNlbGYgY2FuIGJlIGRyYXduIG9uIHRoZSBVSS5cbiAqIE9uIGVhY2ggc3RlcCwgeW91IG5lZWQgdG8gZGVmaW5lIGEgPGI+c3RhdGU8L2I+IC0gJ1BlbmRpbmcnLCAnRmFpbGVkJywgJ0NvbXBsZXRlZCcsICdDdXJyZW50JywgJ0Rpc2FibGVkJyAtXG4gKiBhbmQgYSA8Yj50aXRsZTwvYj4gdG8gYmUgc2hvd24gYXMgYSB0b29sdGlwIG9yIGEgdGV4dCBhYm92ZSBvZiB0aGUgc3RlcC4gWW91IGNhbiBhbHNvOlxuICogKiBEZWZpbmUgYSA8Yj5jbGFzc05hbWU8L2I+IG9uIGVhY2ggc3RlcCBlbGVtZW50O1xuICogKiBEZWZpbmUgYSA8Yj5zZXBhcmF0b3JDbGFzc05hbWU8L2I+IHRvIHNwZWNpZnkgYSBjbGFzc05hbWUgZm9yIHRoZSBzZXBhcmF0b3IgZWxlbWVudC4gVGhlIGRlZmF1bHQgaGVpZ2h0XG4gKiB2YWx1ZXMgb2YgdGhlIHNlcGFyYXRvciBlbGVtZW50IGFyZSAycHgvM3B4IG9uICdTaW1wbGUnLydEZWZhdWx0JyBsYXlvdXRzIHJlc3BlY3RpdmVseTtcbiAqICogRGVmaW5lIGEgPGI+dGl0bGVDbGFzc05hbWU8L2I+IHRvIHNwZWNpZnkgYSBjbGFzc05hbWUgZm9yIHRoZSB0aXRsZSBhYm92ZSBlYWNoIHN0ZXAgZWxlbWVudC5cbiAqXG4gKiBGb3IgdGhlIHJvb3QgZWxlbWVudCwgeW91IGNhbjpcbiAqICogRGVmaW5lIGEgPGI+Y2xhc3NOYW1lPC9iPjtcbiAqICogQ2hvb3NlIGEgPGI+dHlwZTwvYj4gb2YgbGF5b3V0OiAnU2ltcGxlJyBvciAnRGVmYXVsdCc7XG4gKiAqIENob29zZSB0aGUgPGI+c3RlcFNpemU8L2I+IG9mIHRoZSBzdGVwIGNvbXBvbmVudDogXCJ4c1wiLCBcInNtXCIsIFwibWRcIiwgXCJsZ1wiLCBcInhsXCIuIFRoZSBkZWZhdWx0IHNpemUgd2lsbCBiZVxuICogY29ycmVzcG9uZGVudCB0byB0aGUgY3VycmVudCBtZWRpYSBicmVha3BvaW50O1xuICogKiBDaG9vc2UgZWl0aGVyIHlvdSB3YW50IHRvIDxiPnNob3dUaXRsZXM8L2I+IG5lYXIgdG8gZWFjaCBzdGVwIGNvbXBvbmVudCBvciBhIHRvb2x0aXAgb24gaG92ZXI7XG4gKiAqIERlZmluZSBhIDxiPndpZHRoPC9iPiBvZiB0aGUgY29tcG9uZW50LiBJZiB5b3UgZG9uJ3QgZGVmaW5lIGFueSB2YWx1ZSBhbmQgdGhlIHN0ZXAgY29tcG9uZW50IGhhcyBubyB0aXRsZVxuICogZGlzcGxheWVkIGFib3ZlLCB0aGUgd2lkdGggb2YgdGhlIHNlcGFyYXRvciBlbGVtZW50IHdpbGwgYmUgMTAwcHguXG4gKiBJZiB0aGUgc3RlcCBjb21wb25lbnQgaGFzIHRpdGxlcywgZWFjaCBvbmUgd2lsbCBoYXZlIDIxNXB4IG9mIHdpZHRoIGJ5IGRlZmF1bHQuXG4gKi9cbmV4cG9ydCBjb25zdCBIdlN0ZXBOYXZpZ2F0aW9uID0gKHtcbiAgY2xhc3NOYW1lLFxuICBjbGFzc2VzOiBjbGFzc2VzUHJvcCxcbiAgd2lkdGgsXG4gIHN0ZXBzLFxuICBzdGVwU2l6ZSxcbiAgc2hvd1RpdGxlcyxcbiAgdHlwZSA9IFwiRGVmYXVsdFwiLFxuICBcImFyaWEtbGFiZWxcIjogYXJpYUxhYmVsLFxuICAuLi5vdGhlcnNcbn06IEh2U3RlcE5hdmlnYXRpb25Qcm9wcykgPT4ge1xuICBjb25zdCB7IGNsYXNzZXMsIGNzcywgY3ggfSA9IHVzZUNsYXNzZXMoY2xhc3Nlc1Byb3ApO1xuXG4gIGNvbnN0IHsgYWN0aXZlVGhlbWUgfSA9IHVzZVRoZW1lKCk7XG5cbiAgLy8gY3VycmVudCBicmVha3BvaW50ICd4cycgfCAnc20nIHwgJ21kJyB8ICdsZycgfCAneGwnXG4gIGNvbnN0IGJyZWFrcG9pbnQgPSB1c2VXaWR0aCgpO1xuICAvLyBzdGVwIGNvbmZpZ3VyYXRpb25zXG4gIGNvbnN0IHN0ZXBTaXplS2V5ID1cbiAgICBzdGVwU2l6ZSA/PyAoW1wieHNcIiwgXCJzbVwiXS5pbmNsdWRlcyhicmVha3BvaW50KSA/IFwic21cIiA6IFwibWRcIik7XG4gIGNvbnN0IGhhc1RpdGxlcyA9IHNob3dUaXRsZXMgPz8gIVtcInhzXCIsIFwic21cIl0uaW5jbHVkZXMoYnJlYWtwb2ludCk7XG5cbiAgY29uc3Qgc3R5bGVkTGkgPSAoY29udGFpbmVyU2l6ZSkgPT5cbiAgICBzdHlsZWQoXCJsaVwiKSh7XG4gICAgICB3aWR0aDogY29udGFpbmVyU2l6ZSxcbiAgICAgIGhlaWdodDogY29udGFpbmVyU2l6ZSxcbiAgICB9KTtcblxuICBjb25zdCBzdHlsZWREaXYgPSAoY29udGFpbmVyU2l6ZSkgPT5cbiAgICBzdHlsZWQoXCJkaXZcIikoe1xuICAgICAgd2lkdGg6IGNvbnRhaW5lclNpemUsXG4gICAgICBoZWlnaHQ6IGNvbnRhaW5lclNpemUsXG4gICAgfSk7XG5cbiAgY29uc3Qgc3R5bGVkU2VwYXJhdG9yRWxlbWVudCA9IChcbiAgICB0aXRsZSxcbiAgICBzZXBhcmF0b3JDbGFzc05hbWUsXG4gICAgc2VwYXJhdG9ySGVpZ2h0LFxuICAgIHNlcGFyYXRvcldpZHRoLFxuICAgIGJhY2tncm91bmRDb2xvclxuICApID0+IHtcbiAgICBjb25zdCB3aWR0aFZhbHVlID1cbiAgICAgIHNlcGFyYXRvcldpZHRoIC1cbiAgICAgIDIgKlxuICAgICAgICBOdW1iZXIoXG4gICAgICAgICAgKGFjdGl2ZVRoZW1lPy5zdGVwTmF2aWdhdGlvbi5zZXBhcmF0b3JNYXJnaW4gfHwgXCIwcHhcIikucmVwbGFjZShcbiAgICAgICAgICAgIFwicHhcIixcbiAgICAgICAgICAgIFwiXCJcbiAgICAgICAgICApXG4gICAgICAgICk7XG5cbiAgICByZXR1cm4gKFxuICAgICAgPGxpXG4gICAgICAgIGFyaWEtaGlkZGVuXG4gICAgICAgIGtleT17YHNlcGFyYXRvci0ke3RpdGxlfWB9XG4gICAgICAgIGNsYXNzTmFtZT17Y3goXG4gICAgICAgICAgY3NzKHtcbiAgICAgICAgICAgIGhlaWdodDogc2VwYXJhdG9ySGVpZ2h0LFxuICAgICAgICAgICAgd2lkdGg6IHdpZHRoVmFsdWUsXG4gICAgICAgICAgICBiYWNrZ3JvdW5kQ29sb3IsXG4gICAgICAgICAgICBtYXJnaW46IGAwICR7dGhlbWUuc3RlcE5hdmlnYXRpb24uc2VwYXJhdG9yTWFyZ2lufWAsXG4gICAgICAgICAgfSksXG4gICAgICAgICAgY2xhc3Nlcy5zZXBhcmF0b3JcbiAgICAgICAgKX1cbiAgICAgID5cbiAgICAgICAgPGRpdiBjbGFzc05hbWU9e3NlcGFyYXRvckNsYXNzTmFtZX0gLz5cbiAgICAgIDwvbGk+XG4gICAgKTtcbiAgfTtcblxuICBjb25zdCBkcmF3SXRlbXMgPSAoe1xuICAgIHNlcGFyYXRvclZhbHVlczogeyBtaW5XaWR0aCwgbWF4V2lkdGgsIGdldENvbG9yLCBoZWlnaHQgfSxcbiAgICBzdGVwVmFsdWVzOiB7IG1pblNpemUsIG1heFNpemUsIFN0ZXBDb21wb25lbnQgfSxcbiAgfTogYW55KSA9PiB7XG4gICAgY29uc3QgaXRlbXMgPSBzdGVwcy5yZWR1Y2U8UmVhY3ROb2RlW10+KFxuICAgICAgKGFjYywgeyBzdGF0ZSwgdGl0bGUsIHNlcGFyYXRvckNsYXNzTmFtZSwgLi4ucHJvcHMgfSwgaW5kZXgpOiBhbnkgPT4ge1xuICAgICAgICBjb25zdCBjb250YWluZXJTaXplID0gc3RhdGUgPT09IFwiQ3VycmVudFwiID8gbWF4U2l6ZSA6IG1pblNpemU7XG4gICAgICAgIGNvbnN0IFN0ZXBDb250YWluZXIgPSBzdHlsZWRMaShjb250YWluZXJTaXplKTtcbiAgICAgICAgY29uc3QgU3RlcCA9IHN0eWxlZERpdihNYXRoLm1heChjb250YWluZXJTaXplLCAzMCkpO1xuICAgICAgICBjb25zdCBzdGVwUHJvcHMgPSB7XG4gICAgICAgICAgLi4ue1xuICAgICAgICAgICAgc2l6ZTogc3RlcFNpemVLZXksXG4gICAgICAgICAgICBzdGF0ZSxcbiAgICAgICAgICAgIHRpdGxlLFxuICAgICAgICAgICAgbnVtYmVyOiBpbmRleCArIDEsXG4gICAgICAgICAgICAuLi5wcm9wcyxcbiAgICAgICAgICB9LFxuICAgICAgICB9O1xuICAgICAgICBjb25zdCBzdGVwRWxlbWVudCA9IChcbiAgICAgICAgICA8U3RlcENvbnRhaW5lciBrZXk9e2BzdGVwLSR7dGl0bGV9YH0gY2xhc3NOYW1lPXtjbGFzc2VzLmxpfT5cbiAgICAgICAgICAgIHtoYXNUaXRsZXMgPyAoXG4gICAgICAgICAgICAgIDxTdGVwQ29tcG9uZW50XG4gICAgICAgICAgICAgICAga2V5PXtgc3RlcC0ke3RpdGxlfWB9XG4gICAgICAgICAgICAgICAgYXJpYS1sYWJlbD17YCR7dGl0bGV9YH1cbiAgICAgICAgICAgICAgICB7Li4uc3RlcFByb3BzfVxuICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgKSA6IChcbiAgICAgICAgICAgICAgPEh2VG9vbHRpcFxuICAgICAgICAgICAgICAgIHBsYWNlbWVudD1cImJvdHRvbVwiXG4gICAgICAgICAgICAgICAgdGl0bGU9ezxIdlR5cG9ncmFwaHk+e2Ake2luZGV4ICsgMX0uICR7dGl0bGV9YH08L0h2VHlwb2dyYXBoeT59XG4gICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICA8ZGl2PlxuICAgICAgICAgICAgICAgICAgPFN0ZXAgY2xhc3NOYW1lPXtjbGFzc2VzLmxpfT5cbiAgICAgICAgICAgICAgICAgICAgPFN0ZXBDb21wb25lbnQgYXJpYS1sYWJlbD17YCR7dGl0bGV9YH0gey4uLnN0ZXBQcm9wc30gLz5cbiAgICAgICAgICAgICAgICAgIDwvU3RlcD5cbiAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgICAgPC9IdlRvb2x0aXA+XG4gICAgICAgICAgICApfVxuICAgICAgICAgIDwvU3RlcENvbnRhaW5lcj5cbiAgICAgICAgKTtcbiAgICAgICAgaWYgKGluZGV4IDwgc3RlcHMubGVuZ3RoIC0gMSkge1xuICAgICAgICAgIGNvbnN0IHNlcGFyYXRvckVsZW1lbnQgPSBzdHlsZWRTZXBhcmF0b3JFbGVtZW50KFxuICAgICAgICAgICAgdGl0bGUsXG4gICAgICAgICAgICBzZXBhcmF0b3JDbGFzc05hbWUsXG4gICAgICAgICAgICBoZWlnaHQsXG4gICAgICAgICAgICBbc3RlcHNbaW5kZXggKyAxXS5zdGF0ZSwgc3RhdGVdLmluY2x1ZGVzKFwiQ3VycmVudFwiKVxuICAgICAgICAgICAgICA/IG1pbldpZHRoXG4gICAgICAgICAgICAgIDogbWF4V2lkdGgsXG4gICAgICAgICAgICBnZXRDb2xvcihcbiAgICAgICAgICAgICAgc3RlcHNbaW5kZXggKyAxXS5zdGF0ZSA9PT0gXCJEaXNhYmxlZFwiID8gXCJEaXNhYmxlZFwiIDogc3RhdGUsXG4gICAgICAgICAgICAgIHRoZW1lXG4gICAgICAgICAgICApXG4gICAgICAgICAgKTtcbiAgICAgICAgICByZXR1cm4gWy4uLmFjYywgc3RlcEVsZW1lbnQsIHNlcGFyYXRvckVsZW1lbnRdO1xuICAgICAgICB9XG4gICAgICAgIHJldHVybiBbLi4uYWNjLCBzdGVwRWxlbWVudF07XG4gICAgICB9LFxuICAgICAgW11cbiAgICApO1xuXG4gICAgcmV0dXJuIDxvbCBjbGFzc05hbWU9e2NsYXNzZXMub2x9PntpdGVtc308L29sPjtcbiAgfTtcblxuICBjb25zdCBnZXREeW5hbWljVmFsdWVzOiBIdkRlZmF1bHROYXZpZ2F0aW9uUHJvcHNbXCJnZXREeW5hbWljVmFsdWVzXCJdID0gKFxuICAgIHN0ZXBzV2lkdGhcbiAgKSA9PiB7XG4gICAgY29uc3QgdGhlbWVCcmVha3BvaW50cyA9IGFjdGl2ZVRoZW1lPy5icmVha3BvaW50cy52YWx1ZXMgfHwge307XG4gICAgY29uc3QgbWF4V2lkdGggPVxuICAgICAgd2lkdGg/LlticmVha3BvaW50XSA/P1xuICAgICAgTWF0aC5tYXgoXG4gICAgICAgIE51bWJlcihoYXNUaXRsZXMpICogKFRJVExFX1dJRFRIICsgVElUTEVfTUFSR0lOKSAqIHN0ZXBzLmxlbmd0aCAtXG4gICAgICAgICAgVElUTEVfTUFSR0lOLFxuICAgICAgICBTRVBBUkFUT1JfV0lEVEggKiAoc3RlcHMubGVuZ3RoIC0gMSkgKyBzdGVwc1dpZHRoXG4gICAgICApO1xuICAgIGNvbnN0IG5leHQgPSBPYmplY3Qua2V5cyh0aGVtZUJyZWFrcG9pbnRzKS5maW5kKChfLCBpbmRleCwgc2VsZikgPT5cbiAgICAgIGluZGV4IC0gMSA+PSAwID8gc2VsZltpbmRleCAtIDFdID09PSBicmVha3BvaW50IDogZmFsc2VcbiAgICApO1xuICAgIGNvbnN0IG5hdldpZHRoID0gTWF0aC5taW4oXG4gICAgICBtYXhXaWR0aCxcbiAgICAgIG5leHQgPyB0aGVtZUJyZWFrcG9pbnRzW25leHRdIDogbWF4V2lkdGhcbiAgICApO1xuICAgIGNvbnN0IHRpdGxlV2lkdGggPVxuICAgICAgTnVtYmVyKGhhc1RpdGxlcykgKiBNYXRoLmNlaWwoKG5hdldpZHRoICsgVElUTEVfTUFSR0lOKSAvIHN0ZXBzLmxlbmd0aCk7XG4gICAgY29uc3Qgc2VwYXJhdG9yV2lkdGggPVxuICAgICAgTnVtYmVyKCFoYXNUaXRsZXMpICpcbiAgICAgIE1hdGguY2VpbCgobmF2V2lkdGggLSBzdGVwc1dpZHRoKSAvIChzdGVwcy5sZW5ndGggLSAxKSk7XG4gICAgcmV0dXJuIHsgd2lkdGg6IG5hdldpZHRoLCB0aXRsZVdpZHRoLCBzZXBhcmF0b3JXaWR0aCB9O1xuICB9O1xuXG4gIGNvbnN0IGdldFRpdGxlcyA9IChnZXRUaXRsZVByb3BzKSA9PlxuICAgIGhhc1RpdGxlcyA/IChcbiAgICAgIDxkaXYgY2xhc3NOYW1lPXtjbGFzc2VzLnRpdGxlc30+XG4gICAgICAgIHtzdGVwcy5tYXAoKHsgdGl0bGU6IHJhd1RpdGxlLCBzdGF0ZSwgdGl0bGVDbGFzc05hbWUgfSwgaW5kZXgpID0+IHtcbiAgICAgICAgICBjb25zdCB7XG4gICAgICAgICAgICB2YXJpYW50ID0gXCJsYWJlbFwiLFxuICAgICAgICAgICAgdGl0bGUgPSByYXdUaXRsZSxcbiAgICAgICAgICAgIHRpdGxlV2lkdGggPSAwLFxuICAgICAgICAgICAgdGl0bGVEaXNhYmxlZCA9IGZhbHNlLFxuICAgICAgICAgIH0gPSBnZXRUaXRsZVByb3BzKHtcbiAgICAgICAgICAgIHN0YXRlLFxuICAgICAgICAgICAgcmF3VGl0bGUsXG4gICAgICAgICAgICBudW1iZXI6IGluZGV4ICsgMSxcbiAgICAgICAgICB9KTtcblxuICAgICAgICAgIHJldHVybiAoXG4gICAgICAgICAgICA8SHZUeXBvZ3JhcGh5XG4gICAgICAgICAgICAgIHZhcmlhbnQ9e3ZhcmlhbnR9XG4gICAgICAgICAgICAgIGNsYXNzTmFtZT17Y3goXG4gICAgICAgICAgICAgICAgY3NzKHtcbiAgICAgICAgICAgICAgICAgIHRleHRBbGlnbjogXCJjZW50ZXJcIixcbiAgICAgICAgICAgICAgICAgIHdpZHRoOiB0aXRsZVdpZHRoIC0gVElUTEVfTUFSR0lOLFxuICAgICAgICAgICAgICAgICAgbWFyZ2luUmlnaHQ6IFRJVExFX01BUkdJTixcbiAgICAgICAgICAgICAgICB9KSxcbiAgICAgICAgICAgICAgICB0aXRsZUNsYXNzTmFtZVxuICAgICAgICAgICAgICApfVxuICAgICAgICAgICAgICBkaXNhYmxlZD17dGl0bGVEaXNhYmxlZH1cbiAgICAgICAgICAgICAga2V5PXt0aXRsZX1cbiAgICAgICAgICAgID5cbiAgICAgICAgICAgICAge3RpdGxlfVxuICAgICAgICAgICAgPC9IdlR5cG9ncmFwaHk+XG4gICAgICAgICAgKTtcbiAgICAgICAgfSl9XG4gICAgICA8L2Rpdj5cbiAgICApIDogbnVsbDtcblxuICBjb25zdCBTdGVwTmF2aWdhdGlvbiA9IHtcbiAgICBEZWZhdWx0OiBIdkRlZmF1bHROYXZpZ2F0aW9uLFxuICAgIFNpbXBsZTogSHZTaW1wbGVOYXZpZ2F0aW9uLFxuICB9W3R5cGVdO1xuXG4gIHJldHVybiAoXG4gICAgPFN0ZXBOYXZpZ2F0aW9uXG4gICAgICBudW1TdGVwcz17c3RlcHMubGVuZ3RofVxuICAgICAgc3RlcFNpemU9e3N0ZXBTaXplS2V5fVxuICAgICAgZ2V0VGl0bGVzPXtnZXRUaXRsZXN9XG4gICAgICBnZXREeW5hbWljVmFsdWVzPXtnZXREeW5hbWljVmFsdWVzfVxuICAgICAgY2xhc3NOYW1lPXtjeChjbGFzc2VzLnJvb3QsIGNsYXNzTmFtZSl9XG4gICAgICB7Li4ub3RoZXJzfVxuICAgID5cbiAgICAgIHsoeyBzdGVwc1dpZHRoLCBuYXZXaWR0aCwgLi4uaXRlbXNQcm9wcyB9KSA9PiAoXG4gICAgICAgIDxIdkJveFxuICAgICAgICAgIGNvbXBvbmVudD1cIm5hdlwiXG4gICAgICAgICAgc3R5bGU9e3tcbiAgICAgICAgICAgIHdpZHRoOiBgJHtuYXZXaWR0aH1weGAsXG4gICAgICAgICAgICBtYXJnaW46IDAsXG4gICAgICAgICAgfX1cbiAgICAgICAgICBhcmlhLWxhYmVsPXthcmlhTGFiZWx9XG4gICAgICAgID5cbiAgICAgICAgICB7ZHJhd0l0ZW1zKGl0ZW1zUHJvcHMpfVxuICAgICAgICA8L0h2Qm94PlxuICAgICAgKX1cbiAgICA8L1N0ZXBOYXZpZ2F0aW9uPlxuICApO1xufTtcbiJdfQ== */");
   const styledSeparatorElement = (title, separatorClassName, separatorHeight, separatorWidth, backgroundColor) => {
     const widthValue = separatorWidth - 2 * Number(((activeTheme == null ? void 0 : activeTheme.stepNavigation.separatorMargin) || "0px").replace("px", ""));
-    return /* @__PURE__ */ jsxRuntime.jsx("li", {
-      "aria-hidden": true,
-      className: cx(css({
-        height: separatorHeight,
-        width: widthValue,
-        backgroundColor,
-        margin: `0 ${uikitStyles.theme.stepNavigation.separatorMargin}`
-      }), classes.separator),
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", {
-        className: separatorClassName
-      })
-    }, `separator-${title}`);
+    return /* @__PURE__ */ jsxRuntime.jsx("li", { "aria-hidden": true, className: cx(css({
+      height: separatorHeight,
+      width: widthValue,
+      backgroundColor,
+      margin: `0 ${uikitStyles.theme.stepNavigation.separatorMargin}`
+    }), classes.separator), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: separatorClassName }) }, `separator-${title}`);
   };
   const drawItems = ({
     separatorValues: {
@@ -96,37 +90,14 @@ const HvStepNavigation = ({
           ...props
         }
       };
-      const stepElement = /* @__PURE__ */ jsxRuntime.jsx(StepContainer, {
-        className: classes.li,
-        children: hasTitles ? /* @__PURE__ */ jsxRuntime.jsx(StepComponent, {
-          "aria-label": `${title}`,
-          ...stepProps
-        }, `step-${title}`) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTooltip, {
-          placement: "bottom",
-          title: /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, {
-            children: `${index + 1}. ${title}`
-          }),
-          children: /* @__PURE__ */ jsxRuntime.jsx("div", {
-            children: /* @__PURE__ */ jsxRuntime.jsx(Step, {
-              className: classes.li,
-              children: /* @__PURE__ */ jsxRuntime.jsx(StepComponent, {
-                "aria-label": `${title}`,
-                ...stepProps
-              })
-            })
-          })
-        })
-      }, `step-${title}`);
+      const stepElement = /* @__PURE__ */ jsxRuntime.jsx(StepContainer, { className: classes.li, children: hasTitles ? /* @__PURE__ */ jsxRuntime.jsx(StepComponent, { "aria-label": `${title}`, ...stepProps }, `step-${title}`) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTooltip, { placement: "bottom", title: /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { children: `${index + 1}. ${title}` }), children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Step, { className: classes.li, children: /* @__PURE__ */ jsxRuntime.jsx(StepComponent, { "aria-label": `${title}`, ...stepProps }) }) }) }) }, `step-${title}`);
       if (index < steps.length - 1) {
         const separatorElement = styledSeparatorElement(title, separatorClassName, height, [steps[index + 1].state, state].includes("Current") ? minWidth : maxWidth, getColor(steps[index + 1].state === "Disabled" ? "Disabled" : state, uikitStyles.theme));
         return [...acc, stepElement, separatorElement];
       }
       return [...acc, stepElement];
     }, []);
-    return /* @__PURE__ */ jsxRuntime.jsx("ol", {
-      className: classes.ol,
-      children: items
-    });
+    return /* @__PURE__ */ jsxRuntime.jsx("ol", { className: classes.ol, children: items });
   };
   const getDynamicValues = (stepsWidth) => {
     const themeBreakpoints = (activeTheme == null ? void 0 : activeTheme.breakpoints.values) || {};
@@ -141,60 +112,39 @@ const HvStepNavigation = ({
       separatorWidth
     };
   };
-  const getTitles = (getTitleProps) => hasTitles ? /* @__PURE__ */ jsxRuntime.jsx("div", {
-    className: classes.titles,
-    children: steps.map(({
-      title: rawTitle,
+  const getTitles = (getTitleProps) => hasTitles ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.titles, children: steps.map(({
+    title: rawTitle,
+    state,
+    titleClassName
+  }, index) => {
+    const {
+      variant = "label",
+      title = rawTitle,
+      titleWidth = 0,
+      titleDisabled = false
+    } = getTitleProps({
       state,
-      titleClassName
-    }, index) => {
-      const {
-        variant = "label",
-        title = rawTitle,
-        titleWidth = 0,
-        titleDisabled = false
-      } = getTitleProps({
-        state,
-        rawTitle,
-        number: index + 1
-      });
-      return /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, {
-        variant,
-        className: cx(css({
-          textAlign: "center",
-          width: titleWidth - utils.TITLE_MARGIN,
-          marginRight: utils.TITLE_MARGIN
-        }), titleClassName),
-        disabled: titleDisabled,
-        children: title
-      }, title);
-    })
-  }) : null;
+      rawTitle,
+      number: index + 1
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, { variant, className: cx(css({
+      textAlign: "center",
+      width: titleWidth - utils.TITLE_MARGIN,
+      marginRight: utils.TITLE_MARGIN
+    }), titleClassName), disabled: titleDisabled, children: title }, title);
+  }) }) : null;
   const StepNavigation = {
     Default: DefaultNavigation.HvDefaultNavigation,
     Simple: SimpleNavigation.HvSimpleNavigation
   }[type];
-  return /* @__PURE__ */ jsxRuntime.jsx(StepNavigation, {
-    numSteps: steps.length,
-    stepSize: stepSizeKey,
-    getTitles,
-    getDynamicValues,
-    className: cx(classes.root, className),
-    ...others,
-    children: ({
-      stepsWidth,
-      navWidth,
-      ...itemsProps
-    }) => /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvBox, {
-      component: "nav",
-      style: {
-        width: `${navWidth}px`,
-        margin: 0
-      },
-      "aria-label": ariaLabel,
-      children: drawItems(itemsProps)
-    })
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(StepNavigation, { numSteps: steps.length, stepSize: stepSizeKey, getTitles, getDynamicValues, className: cx(classes.root, className), ...others, children: ({
+    stepsWidth,
+    navWidth,
+    ...itemsProps
+  }) => /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvBox, { component: "nav", style: {
+    width: `${navWidth}px`,
+    margin: 0
+  }, "aria-label": ariaLabel, children: drawItems(itemsProps) }) });
 };
 exports.stepNavigationClasses = StepNavigation_styles.staticClasses;
 exports.HvStepNavigation = HvStepNavigation;