@hitachivantara/uikit-react-lab 5.31.2 → 5.32.1

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

@@ -1 +1 @@
-{"version":3,"file":"useFlowNode.js","sources":["../../../../src/Flow/hooks/useFlowNode.ts"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport {\n  Node,\n  Edge,\n  ReactFlowState,\n  useStore,\n  useNodes,\n  useEdges,\n} from \"reactflow\";\nimport { shallow } from \"zustand/shallow\";\n\nimport { useFlowInstance } from \"./useFlowInstance\";\nimport { useNodeId } from \"./useNodeId\";\n\n/** Retrieves the node instance */\nexport function useFlowNode<T extends Node = Node>(id?: string) {\n  const nodeId = useNodeId(id);\n\n  const nodeSelector = useCallback(\n    (state: ReactFlowState) =>\n      state.getNodes().find((n: Node): n is T => n.id === nodeId),\n    [nodeId]\n  );\n  return useStore<T | undefined>(nodeSelector, shallow);\n}\n\n/** Provides the input edges connected to the node */\nexport function useFlowNodeInputEdges(id?: string) {\n  const nodeId = useNodeId(id);\n\n  const inputEdgesSelector = useCallback(\n    (state: ReactFlowState) =>\n      state.edges.filter((e: Edge) => e.target === nodeId),\n    [nodeId]\n  );\n  return useStore(inputEdgesSelector, shallow);\n}\n\n/** Gives the output edges connected from the node */\nexport function useFlowNodeOutputEdges(id?: string) {\n  const nodeId = useNodeId(id);\n\n  const outputEdgesSelector = useCallback(\n    (state: ReactFlowState) =>\n      state.edges.filter((e: Edge) => e.source === nodeId),\n    [nodeId]\n  );\n  return useStore(outputEdgesSelector, shallow);\n}\n\n/** Offers both input and output edges of the node */\nexport function useFlowNodeEdges(id?: string) {\n  const nodeId = useNodeId(id);\n\n  const edgesSelector = useCallback(\n    (state: ReactFlowState) =>\n      state.edges.filter(\n        (e: Edge) => e.source === nodeId || e.target === nodeId\n      ),\n    [nodeId]\n  );\n  return useStore(edgesSelector, shallow);\n}\n\n/** Gets the parent nodes of a specified node (nodes that have an output connected to one of the inputs of the node) */\nexport function useFlowNodeParents(id?: string) {\n  const inputEdges = useFlowNodeInputEdges(id);\n  const parentNodesSelector = useCallback(\n    (state: ReactFlowState) => {\n      return inputEdges\n        .map((e) => state.getNodes().find((n: Node) => n.id === e.source))\n        .filter((n): n is Node => n !== null);\n    },\n    [inputEdges]\n  );\n  return useStore(parentNodesSelector, shallow);\n}\n\n/** Retrieves the nodes connected to the inputs of the node */\nexport function useFlowInputNodes<T = any>(id?: string) {\n  const nodeId = useNodeId(id);\n  const nodes = useNodes();\n  const edges = useEdges();\n\n  return useMemo(() => {\n    return edges\n      .filter((e) => e.target === nodeId)\n      .map((e) => nodes.find((n) => n.id === e.source))\n      .filter((n): n is Node<T> => n !== null);\n  }, [edges, nodeId, nodes]);\n}\n\n/** Retrieves the nodes connected to the outputs of the node */\nexport function useFlowOutputNodes<T = any>(id?: string) {\n  const nodeId = useNodeId(id);\n  const nodes = useNodes();\n  const edges = useEdges();\n\n  return useMemo(() => {\n    return edges\n      .filter((e) => e.source === nodeId)\n      .map((e) => nodes.find((n) => n.id === e.target))\n      .filter((n): n is Node<T> => n !== null);\n  }, [edges, nodeId, nodes]);\n}\n\n/** Utilities to manipulate a node in the flow */\nexport function useFlowNodeUtils<NodeData = any>(id?: string) {\n  const nodeId = useNodeId(id);\n  const reactFlowInstance = useFlowInstance<NodeData>();\n\n  /** Mutate the node's `.data` object */\n  const setNodeData = useCallback(\n    (setNewData: (newData?: NodeData) => NodeData) => {\n      if (!nodeId) return;\n\n      reactFlowInstance.setNodes((nodes) => {\n        return nodes.map((n) => {\n          if (n.id === nodeId) {\n            return { ...n, data: setNewData(n.data) };\n          }\n          return n;\n        });\n      });\n    },\n    [nodeId, reactFlowInstance]\n  );\n\n  return useMemo(\n    () => ({\n      setNodeData,\n    }),\n    [setNodeData]\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useFlowNode.js","sources":["../../../../src/Flow/hooks/useFlowNode.ts"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport {\n  Edge,\n  Node,\n  ReactFlowState,\n  useEdges,\n  useNodes,\n  useStore,\n} from \"reactflow\";\nimport { shallow } from \"zustand/shallow\";\n\nimport { useFlowInstance } from \"./useFlowInstance\";\nimport { useNodeId } from \"./useNodeId\";\n\n/** Retrieves the node instance */\nexport function useFlowNode<T extends Node = Node>(id?: string) {\n  const nodeId = useNodeId(id);\n\n  const nodeSelector = useCallback(\n    (state: ReactFlowState) =>\n      state.getNodes().find((n: Node): n is T => n.id === nodeId),\n    [nodeId],\n  );\n  return useStore<T | undefined>(nodeSelector, shallow);\n}\n\n/** Provides the input edges connected to the node */\nexport function useFlowNodeInputEdges(id?: string) {\n  const nodeId = useNodeId(id);\n\n  const inputEdgesSelector = useCallback(\n    (state: ReactFlowState) =>\n      state.edges.filter((e: Edge) => e.target === nodeId),\n    [nodeId],\n  );\n  return useStore(inputEdgesSelector, shallow);\n}\n\n/** Gives the output edges connected from the node */\nexport function useFlowNodeOutputEdges(id?: string) {\n  const nodeId = useNodeId(id);\n\n  const outputEdgesSelector = useCallback(\n    (state: ReactFlowState) =>\n      state.edges.filter((e: Edge) => e.source === nodeId),\n    [nodeId],\n  );\n  return useStore(outputEdgesSelector, shallow);\n}\n\n/** Offers both input and output edges of the node */\nexport function useFlowNodeEdges(id?: string) {\n  const nodeId = useNodeId(id);\n\n  const edgesSelector = useCallback(\n    (state: ReactFlowState) =>\n      state.edges.filter(\n        (e: Edge) => e.source === nodeId || e.target === nodeId,\n      ),\n    [nodeId],\n  );\n  return useStore(edgesSelector, shallow);\n}\n\n/** Gets the parent nodes of a specified node (nodes that have an output connected to one of the inputs of the node) */\nexport function useFlowNodeParents(id?: string) {\n  const inputEdges = useFlowNodeInputEdges(id);\n  const parentNodesSelector = useCallback(\n    (state: ReactFlowState) => {\n      return inputEdges\n        .map((e) => state.getNodes().find((n: Node) => n.id === e.source))\n        .filter((n): n is Node => n !== null);\n    },\n    [inputEdges],\n  );\n  return useStore(parentNodesSelector, shallow);\n}\n\n/** Retrieves the nodes connected to the inputs of the node */\nexport function useFlowInputNodes<T = any>(id?: string) {\n  const nodeId = useNodeId(id);\n  const nodes = useNodes();\n  const edges = useEdges();\n\n  return useMemo(() => {\n    return edges\n      .filter((e) => e.target === nodeId)\n      .map((e) => nodes.find((n) => n.id === e.source))\n      .filter((n): n is Node<T> => n !== null);\n  }, [edges, nodeId, nodes]);\n}\n\n/** Retrieves the nodes connected to the outputs of the node */\nexport function useFlowOutputNodes<T = any>(id?: string) {\n  const nodeId = useNodeId(id);\n  const nodes = useNodes();\n  const edges = useEdges();\n\n  return useMemo(() => {\n    return edges\n      .filter((e) => e.source === nodeId)\n      .map((e) => nodes.find((n) => n.id === e.target))\n      .filter((n): n is Node<T> => n !== null);\n  }, [edges, nodeId, nodes]);\n}\n\n/** Utilities to manipulate a node in the flow */\nexport function useFlowNodeUtils<NodeData = any>(id?: string) {\n  const nodeId = useNodeId(id);\n  const reactFlowInstance = useFlowInstance<NodeData>();\n\n  /** Mutate the node's `.data` object */\n  const setNodeData = useCallback(\n    (setNewData: (newData?: NodeData) => NodeData) => {\n      if (!nodeId) return;\n\n      reactFlowInstance.setNodes((nodes) => {\n        return nodes.map((n) => {\n          if (n.id === nodeId) {\n            return { ...n, data: setNewData(n.data) };\n          }\n          return n;\n        });\n      });\n    },\n    [nodeId, reactFlowInstance],\n  );\n\n  return useMemo(\n    () => ({\n      setNodeData,\n    }),\n    [setNodeData],\n  );\n}\n"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"DashboardNode.styles.js","sources":["../../../../src/Flow/nodes/DashboardNode.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nimport { staticClasses as nodeClasses } from \"../Node/Node.styles\";\n\nconst baseClasses = Object.fromEntries(\n  Object.keys(nodeClasses).map((key) => [key, {}])\n) as Record<keyof typeof nodeClasses, {}>;\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDashboardNode\", {\n  empty: {\n    padding: theme.spacing(\"sm\", 0, 0, 0),\n  },\n  // Spread here to know if we are overriding classes from parents\n  ...baseClasses,\n});\n"],"names":["nodeClasses"],"mappings":";;AAIA,MAAM,cAAc,OAAO;AAAA,EACzB,OAAO,KAAKA,eAAW,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAA,CAAE,CAAC;AACjD;AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,mBAAmB;AAAA,EAC5E,OAAO;AAAA,IACL,SAAS,MAAM,QAAQ,MAAM,GAAG,GAAG,CAAC;AAAA,EACtC;AAAA;AAAA,EAEA,GAAG;AACL,CAAC;"}
+{"version":3,"file":"DashboardNode.styles.js","sources":["../../../../src/Flow/nodes/DashboardNode.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nimport { staticClasses as nodeClasses } from \"../Node/Node.styles\";\n\nconst baseClasses = Object.fromEntries(\n  Object.keys(nodeClasses).map((key) => [key, {}]),\n) as Record<keyof typeof nodeClasses, {}>;\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDashboardNode\", {\n  empty: {\n    padding: theme.spacing(\"sm\", 0, 0, 0),\n  },\n  // Spread here to know if we are overriding classes from parents\n  ...baseClasses,\n});\n"],"names":["nodeClasses"],"mappings":";;AAIA,MAAM,cAAc,OAAO;AAAA,EACzB,OAAO,KAAKA,eAAW,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAA,CAAE,CAAC;AACjD;AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,mBAAmB;AAAA,EAC5E,OAAO;AAAA,IACL,SAAS,MAAM,QAAQ,MAAM,GAAG,GAAG,CAAC;AAAA,EACtC;AAAA;AAAA,EAEA,GAAG;AACL,CAAC;"}

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

@@ -1 +1 @@
-{"version":3,"file":"DefaultNavigation.js","sources":["../../../../src/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":[],"mappings":";;;;AAkDO,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAgC;AACxB,QAAA,EAAE,gBAAgB;AAGxB,QAAM,EAAE,WAAW,SAAS,QAAQ,YAAY,UAAU,QAAQ;AAClE,QAAM,gBAAgB;AAGhB,QAAA,aAAa,UAAU,WAAW,WAAW;AACnD,QAAM,EAAE,OAAO,YAAY,eAAe,IAAI,iBAAiB,UAAU;AAGzE,QAAM,WAAW,KAAK,IAAI,aAAa,SAAS,cAAc;AAC9D,QAAM,WAAW,KAAK;AAAA,IACpB,cAAc,UAAU,WAAW;AAAA,IACnC;AAAA,EAAA;AAIF,QAAM,QAAQ;AAEd,QAAM,SAAS,UAAU,CAAC,EAAE,aAAa;AAAA,IACvC,SAAS;AAAA,IACT;AAAA,IACA,eAAe,UAAU;AAAA,EACzB,EAAA;AAGA,SAAA,qBAAC,OAAK,EAAA,GAAG,OACP,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,UACF;AAAA,UACA,UAAU;AAAA,UACV,iBAAiB;AAAA,YACf;AAAA,YACA;AAAA,YACA;AAAA,YACA,QAAQ,aAAa,eAAe,0BAA0B;AAAA,UAChE;AAAA,UACA,YAAY;AAAA,YACV;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAAA,QACF;AAAA,MAAA;AAAA,IACF;AAAA,IACC;AAAA,EACH,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"DefaultNavigation.js","sources":["../../../../src/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":[],"mappings":";;;;AAkDO,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAgC;AACxB,QAAA,EAAE,gBAAgB;AAGxB,QAAM,EAAE,WAAW,SAAS,QAAQ,YAAY,UAAU,QAAQ;AAClE,QAAM,gBAAgB;AAGhB,QAAA,aAAa,UAAU,WAAW,WAAW;AACnD,QAAM,EAAE,OAAO,YAAY,eAAe,IAAI,iBAAiB,UAAU;AAGzE,QAAM,WAAW,KAAK,IAAI,aAAa,SAAS,cAAc;AAC9D,QAAM,WAAW,KAAK;AAAA,IACpB,cAAc,UAAU,WAAW;AAAA,IACnC;AAAA,EAAA;AAIF,QAAM,QAAQ;AAEd,QAAM,SAAS,UAAU,CAAC,EAAE,aAAa;AAAA,IACvC,SAAS;AAAA,IACT;AAAA,IACA,eAAe,UAAU;AAAA,EACzB,EAAA;AAGA,SAAA,qBAAC,OAAK,EAAA,GAAG,OACP,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,UACF;AAAA,UACA,UAAU;AAAA,UACV,iBAAiB;AAAA,YACf;AAAA,YACA;AAAA,YACA;AAAA,YACA,QAAQ,aAAa,eAAe,0BAA0B;AAAA,UAChE;AAAA,UACA,YAAY;AAAA,YACV;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAAA,QACF;AAAA,MAAA;AAAA,IACF;AAAA,IACC;AAAA,EACH,EAAA,CAAA;AAEJ;"}

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

@@ -1,6 +1,6 @@
 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 { HourGlass, Level3Bad, Level0Good } from "@hitachivantara/uikit-react-icons";
 import { getColor, getSemantic } from "../utils.js";
 import { useClasses } from "./Step.styles.js";
 const HvStep = ({

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

@@ -1 +1 @@
-{"version":3,"file":"Step.js","sources":["../../../../../src/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":[],"mappings":";;;;;AAgDO,MAAM,SAAS,CAAC;AAAA,EACrB;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,SAAS;AACX,MAAmB;AACjB,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,WAAW;AAAA,IACf,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAEN,QAAM,UAAU;AAAA,IACd,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,KAAK;AAEP,QAAM,UAAU;AAAA,IACd,IAAI,UAAU;AAAA,IACd,IAAI;AAAA,IACJ,IAAI,UAAU;AAAA,IACd,IAAI,UAAU;AAAA,IACd,IAAI,UAAU;AAAA,IACd,IAAI;AAEA,QAAA,kBAAkB,SAAS,KAAK;AAEhC,QAAA,QAAQ,UAAU,YAAY,UAAU;AAC9C,QAAM,WAAW,UAAU,YAAY,YAAY,KAAK,IAAI;AACtD,QAAA,SAAS,UAAU,YAAY,iBAAiB;AAEtD,QAAM,gBAAgB;AAAA,IACpB,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,KAAK;AAGL,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,UAAU,GAAG,UAAU;AAAA,QAClC;AAAA,QACA;AAAA,MACF;AAAA,MAEA,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,GAAG,QAAQ,OAAO;AAAA,YAC3B,CAAC,QAAQ,aAAa,GAAG,UAAU;AAAA,UAAA,CACpC;AAAA,UACD,cAAY,GAAG,KAAK;AAAA,UACpB,MAAI;AAAA,UACJ,oBAAoB;AAAA,UACpB,UAAU,YAAY,CAAC,WAAW,UAAU,EAAE,SAAS,KAAK;AAAA,UAC5D;AAAA,UAEA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,GAAG,QAAQ,QAAQ,QAAQ,IAAI,CAAC;AAAA,cAC3C;AAAA,cACA;AAAA,cACA;AAAA,cAEC,UACC,gBAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC;AAAA,kBACA;AAAA,kBACA,OAAO;AAAA,kBACP,QAAQ;AAAA,kBACR;AAAA,gBAAA;AAAA,cAAA,IAGF;AAAA,YAAA;AAAA,UAEJ;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"Step.js","sources":["../../../../../src/StepNavigation/DefaultNavigation/Step/Step.tsx"],"sourcesContent":["import {\n  ExtractNames,\n  HvAvatar,\n  HvAvatarSize,\n  HvBaseProps,\n  HvButton,\n  HvButtonProps,\n} from \"@hitachivantara/uikit-react-core\";\nimport {\n  HourGlass,\n  Level0Good,\n  Level3Bad,\n} from \"@hitachivantara/uikit-react-icons\";\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":[],"mappings":";;;;;AAgDO,MAAM,SAAS,CAAC;AAAA,EACrB;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,SAAS;AACX,MAAmB;AACjB,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,WAAW;AAAA,IACf,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAEN,QAAM,UAAU;AAAA,IACd,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,KAAK;AAEP,QAAM,UAAU;AAAA,IACd,IAAI,UAAU;AAAA,IACd,IAAI;AAAA,IACJ,IAAI,UAAU;AAAA,IACd,IAAI,UAAU;AAAA,IACd,IAAI,UAAU;AAAA,IACd,IAAI;AAEA,QAAA,kBAAkB,SAAS,KAAK;AAEhC,QAAA,QAAQ,UAAU,YAAY,UAAU;AAC9C,QAAM,WAAW,UAAU,YAAY,YAAY,KAAK,IAAI;AACtD,QAAA,SAAS,UAAU,YAAY,iBAAiB;AAEtD,QAAM,gBAAgB;AAAA,IACpB,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,KAAK;AAGL,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,UAAU,GAAG,UAAU;AAAA,QAClC;AAAA,QACA;AAAA,MACF;AAAA,MAEA,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,GAAG,QAAQ,OAAO;AAAA,YAC3B,CAAC,QAAQ,aAAa,GAAG,UAAU;AAAA,UAAA,CACpC;AAAA,UACD,cAAY,GAAG,KAAK;AAAA,UACpB,MAAI;AAAA,UACJ,oBAAoB;AAAA,UACpB,UAAU,YAAY,CAAC,WAAW,UAAU,EAAE,SAAS,KAAK;AAAA,UAC5D;AAAA,UAEA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,GAAG,QAAQ,QAAQ,QAAQ,IAAI,CAAC;AAAA,cAC3C;AAAA,cACA;AAAA,cACA;AAAA,cAEC,UACC,gBAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC;AAAA,kBACA;AAAA,kBACA,OAAO;AAAA,kBACP,QAAQ;AAAA,kBACR;AAAA,gBAAA;AAAA,cAAA,IAGF;AAAA,YAAA;AAAA,UAEJ;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}

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

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../../src/StepNavigation/DefaultNavigation/utils.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport type { HvStepProps } from \"./Step\";\n\nexport const getColor = (state: HvStepProps[\"state\"]) =>\n  ({\n    Pending: theme.colors.warning ?? \"warning\",\n    Failed: theme.colors.negative ?? \"negative\",\n    Completed: theme.colors.positive ?? \"positive\",\n    Current: theme.colors.secondary ?? \"secondary\",\n    Disabled: theme.colors.secondary_60 ?? \"secondary_60\",\n    Enabled: theme.colors.secondary ?? \"secondary\",\n  }[state]);\n\nexport const getSemantic = (state: HvStepProps[\"state\"]) =>\n  ({\n    Pending: \"warning\",\n    Failed: \"negative\",\n    Completed: \"positive\",\n    Current: \"secondary\",\n    Disabled: \"secondary_60\",\n    Enabled: \"secondary\",\n  }[state]);\n\nconst EXTRA_SMALL = { container: 32, avatar: 24 };\nconst SMALL = { container: 40, avatar: 32 };\nconst MEDIUM = { container: 48, avatar: 40 };\nconst LARGE = { container: 60, avatar: 52 };\nconst EXTRA_LARGE = { container: 96, avatar: 88 };\n\nexport const stepSizes = {\n  xs: EXTRA_SMALL,\n  sm: SMALL,\n  md: MEDIUM,\n  lg: LARGE,\n  xl: EXTRA_LARGE,\n};\n"],"names":[],"mappings":";AAIa,MAAA,WAAW,CAAC,WACtB;AAAA,EACC,SAAS,MAAM,OAAO,WAAW;AAAA,EACjC,QAAQ,MAAM,OAAO,YAAY;AAAA,EACjC,WAAW,MAAM,OAAO,YAAY;AAAA,EACpC,SAAS,MAAM,OAAO,aAAa;AAAA,EACnC,UAAU,MAAM,OAAO,gBAAgB;AAAA,EACvC,SAAS,MAAM,OAAO,aAAa;AACrC,GAAE,KAAK;AAEI,MAAA,cAAc,CAAC,WACzB;AAAA,EACC,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,SAAS;AAAA,EACT,UAAU;AAAA,EACV,SAAS;AACX,GAAE,KAAK;AAET,MAAM,cAAc,EAAE,WAAW,IAAI,QAAQ,GAAG;AAChD,MAAM,QAAQ,EAAE,WAAW,IAAI,QAAQ,GAAG;AAC1C,MAAM,SAAS,EAAE,WAAW,IAAI,QAAQ,GAAG;AAC3C,MAAM,QAAQ,EAAE,WAAW,IAAI,QAAQ,GAAG;AAC1C,MAAM,cAAc,EAAE,WAAW,IAAI,QAAQ,GAAG;AAEzC,MAAM,YAAY;AAAA,EACvB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;"}
+{"version":3,"file":"utils.js","sources":["../../../../src/StepNavigation/DefaultNavigation/utils.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport type { HvStepProps } from \"./Step\";\n\nexport const getColor = (state: HvStepProps[\"state\"]) =>\n  ({\n    Pending: theme.colors.warning ?? \"warning\",\n    Failed: theme.colors.negative ?? \"negative\",\n    Completed: theme.colors.positive ?? \"positive\",\n    Current: theme.colors.secondary ?? \"secondary\",\n    Disabled: theme.colors.secondary_60 ?? \"secondary_60\",\n    Enabled: theme.colors.secondary ?? \"secondary\",\n  })[state];\n\nexport const getSemantic = (state: HvStepProps[\"state\"]) =>\n  ({\n    Pending: \"warning\",\n    Failed: \"negative\",\n    Completed: \"positive\",\n    Current: \"secondary\",\n    Disabled: \"secondary_60\",\n    Enabled: \"secondary\",\n  })[state];\n\nconst EXTRA_SMALL = { container: 32, avatar: 24 };\nconst SMALL = { container: 40, avatar: 32 };\nconst MEDIUM = { container: 48, avatar: 40 };\nconst LARGE = { container: 60, avatar: 52 };\nconst EXTRA_LARGE = { container: 96, avatar: 88 };\n\nexport const stepSizes = {\n  xs: EXTRA_SMALL,\n  sm: SMALL,\n  md: MEDIUM,\n  lg: LARGE,\n  xl: EXTRA_LARGE,\n};\n"],"names":[],"mappings":";AAIa,MAAA,WAAW,CAAC,WACtB;AAAA,EACC,SAAS,MAAM,OAAO,WAAW;AAAA,EACjC,QAAQ,MAAM,OAAO,YAAY;AAAA,EACjC,WAAW,MAAM,OAAO,YAAY;AAAA,EACpC,SAAS,MAAM,OAAO,aAAa;AAAA,EACnC,UAAU,MAAM,OAAO,gBAAgB;AAAA,EACvC,SAAS,MAAM,OAAO,aAAa;AACrC,GAAG,KAAK;AAEG,MAAA,cAAc,CAAC,WACzB;AAAA,EACC,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,SAAS;AAAA,EACT,UAAU;AAAA,EACV,SAAS;AACX,GAAG,KAAK;AAEV,MAAM,cAAc,EAAE,WAAW,IAAI,QAAQ,GAAG;AAChD,MAAM,QAAQ,EAAE,WAAW,IAAI,QAAQ,GAAG;AAC1C,MAAM,SAAS,EAAE,WAAW,IAAI,QAAQ,GAAG;AAC3C,MAAM,QAAQ,EAAE,WAAW,IAAI,QAAQ,GAAG;AAC1C,MAAM,cAAc,EAAE,WAAW,IAAI,QAAQ,GAAG;AAEzC,MAAM,YAAY;AAAA,EACvB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;"}

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

@@ -1 +1 @@
-{"version":3,"file":"Dot.js","sources":["../../../../../src/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":[],"mappings":";;;;;AAwBO,MAAM,QAAQ,CAAC;AAAA,EACpB,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AACF,MAAkB;AAChB,QAAM,EAAE,SAAS,IAAI,IAAI,IAAI,WAAW,WAAW;AAEnD,QAAM,UAAU,SAAS,IAAI,KAAK,UAAU,YAAY,MAAM;AAG5D,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,IAAI;AAAA,UACF,iBAAiB,SAAS,KAAK;AAAA,UAC/B,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,uBAAuB;AAAA,YACrB,iBAAiB,SAAS,KAAK;AAAA,UACjC;AAAA,QAAA,CACD;AAAA,QACD,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,MAAM,GAAG,UAAU;AAAA,UAC5B,CAAC,QAAQ,aAAa,GACpB,YAAY,CAAC,WAAW,UAAU,EAAE,SAAS,KAAK;AAAA,QACtD;AAAA,QACA;AAAA,MACF;AAAA,MACA,cAAY,GAAG,KAAK;AAAA,MACpB,MAAI;AAAA,MACJ,oBAAoB;AAAA,MACpB,UAAU,YAAY,CAAC,WAAW,UAAU,EAAE,SAAS,KAAK;AAAA,MAC5D;AAAA,MAEC,UAAC,CAAA;AAAA,IAAA;AAAA,EAAA;AAGR;"}
+{"version":3,"file":"Dot.js","sources":["../../../../../src/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 { dotSizes, getColor } 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":[],"mappings":";;;;;AAwBO,MAAM,QAAQ,CAAC;AAAA,EACpB,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AACF,MAAkB;AAChB,QAAM,EAAE,SAAS,IAAI,IAAI,IAAI,WAAW,WAAW;AAEnD,QAAM,UAAU,SAAS,IAAI,KAAK,UAAU,YAAY,MAAM;AAG5D,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,IAAI;AAAA,UACF,iBAAiB,SAAS,KAAK;AAAA,UAC/B,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,uBAAuB;AAAA,YACrB,iBAAiB,SAAS,KAAK;AAAA,UACjC;AAAA,QAAA,CACD;AAAA,QACD,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,MAAM,GAAG,UAAU;AAAA,UAC5B,CAAC,QAAQ,aAAa,GACpB,YAAY,CAAC,WAAW,UAAU,EAAE,SAAS,KAAK;AAAA,QACtD;AAAA,QACA;AAAA,MACF;AAAA,MACA,cAAY,GAAG,KAAK;AAAA,MACpB,MAAI;AAAA,MACJ,oBAAoB;AAAA,MACpB,UAAU,YAAY,CAAC,WAAW,UAAU,EAAE,SAAS,KAAK;AAAA,MAC5D;AAAA,MAEC,UAAC,CAAA;AAAA,IAAA;AAAA,EAAA;AAGR;"}

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

@@ -1 +1 @@
-{"version":3,"file":"SimpleNavigation.js","sources":["../../../../src/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":[],"mappings":";;;;AAiDO,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA+B;AACvB,QAAA,EAAE,gBAAgB;AAGlB,QAAA,UAAU,SAAS,QAAQ;AACjC,QAAM,gBAAgB;AAGhB,QAAA,cAAc,WAAW,OAAO;AACtC,QAAM,EAAE,OAAO,YAAY,eAAe,IAAI,iBAAiB,UAAU;AAGzE,QAAM,WAAW,KAAK,IAAI,aAAa,SAAS,cAAc;AAC9D,QAAM,WAAW,KAAK,IAAI,aAAa,UAAU,MAAM,cAAc;AAGrE,QAAM,QAAQ;AAEd,QAAM,SAAS,UAAU,CAAC,EAAE,UAAU,cAAc;AAAA,IAClD,SAAS;AAAA,IACT,OAAO,GAAG,MAAM,KAAK,QAAQ;AAAA,IAC7B;AAAA,EACA,EAAA;AAGA,SAAA,qBAAC,OAAK,EAAA,GAAG,QACN,UAAA;AAAA,IAAA;AAAA,IACD;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,UACF;AAAA,UACA,UAAU;AAAA,UACV,iBAAiB;AAAA,YACf;AAAA,YACA;AAAA,YACA;AAAA,YACA,QAAQ,aAAa,eAAe,yBAAyB;AAAA,UAC/D;AAAA,UACA,YAAY;AAAA,YACV,SAAS;AAAA,YACT,SAAS,MAAM;AAAA,YACf;AAAA,UACF;AAAA,QACF;AAAA,MAAA;AAAA,IACF;AAAA,EACF,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"SimpleNavigation.js","sources":["../../../../src/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 { dotSizes, getColor } 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":[],"mappings":";;;;AAiDO,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA+B;AACvB,QAAA,EAAE,gBAAgB;AAGlB,QAAA,UAAU,SAAS,QAAQ;AACjC,QAAM,gBAAgB;AAGhB,QAAA,cAAc,WAAW,OAAO;AACtC,QAAM,EAAE,OAAO,YAAY,eAAe,IAAI,iBAAiB,UAAU;AAGzE,QAAM,WAAW,KAAK,IAAI,aAAa,SAAS,cAAc;AAC9D,QAAM,WAAW,KAAK,IAAI,aAAa,UAAU,MAAM,cAAc;AAGrE,QAAM,QAAQ;AAEd,QAAM,SAAS,UAAU,CAAC,EAAE,UAAU,cAAc;AAAA,IAClD,SAAS;AAAA,IACT,OAAO,GAAG,MAAM,KAAK,QAAQ;AAAA,IAC7B;AAAA,EACA,EAAA;AAGA,SAAA,qBAAC,OAAK,EAAA,GAAG,QACN,UAAA;AAAA,IAAA;AAAA,IACD;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,UACF;AAAA,UACA,UAAU;AAAA,UACV,iBAAiB;AAAA,YACf;AAAA,YACA;AAAA,YACA;AAAA,YACA,QAAQ,aAAa,eAAe,yBAAyB;AAAA,UAC/D;AAAA,UACA,YAAY;AAAA,YACV,SAAS;AAAA,YACT,SAAS,MAAM;AAAA,YACf;AAAA,UACF;AAAA,QACF;AAAA,MAAA;AAAA,IACF;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/dist/esm/StepNavigation/StepNavigation.js

@@ -1,10 +1,10 @@
 import { jsx } from "@emotion/react/jsx-runtime";
 import styled from "@emotion/styled";
-import { theme } from "@hitachivantara/uikit-styles";
 import { useTheme, useWidth, HvBox, HvTooltip, HvTypography } from "@hitachivantara/uikit-react-core";
-import { TITLE_WIDTH, TITLE_MARGIN, SEPARATOR_WIDTH } from "./utils.js";
+import { theme } from "@hitachivantara/uikit-styles";
 import { useClasses } from "./StepNavigation.styles.js";
 import { staticClasses } from "./StepNavigation.styles.js";
+import { TITLE_WIDTH, TITLE_MARGIN, SEPARATOR_WIDTH } from "./utils.js";
 import { HvDefaultNavigation } from "./DefaultNavigation/DefaultNavigation.js";
 import { HvSimpleNavigation } from "./SimpleNavigation/SimpleNavigation.js";
 const HvStepNavigation = ({

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

@@ -1 +1 @@
-{"version":3,"file":"StepNavigation.js","sources":["../../../src/StepNavigation/StepNavigation.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport styled from \"@emotion/styled\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport {\n  HvBaseProps,\n  HvBreakpoints,\n  useTheme,\n  useWidth,\n  HvBox,\n  HvTooltip,\n  HvTypography,\n  ExtractNames,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport {\n  HvDefaultNavigation,\n  HvDefaultNavigationProps,\n  HvStepProps,\n} from \"./DefaultNavigation\";\nimport { HvSimpleNavigation } from \"./SimpleNavigation\";\nimport { SEPARATOR_WIDTH, TITLE_MARGIN, TITLE_WIDTH } from \"./utils\";\nimport { staticClasses, useClasses } from \"./StepNavigation.styles\";\n\nexport { staticClasses as stepNavigationClasses };\n\nexport type HvStepNavigationClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvStepNavigationProps extends HvBaseProps {\n  /** Type of step navigation. Values = {\"Simple\", \"Default\"} */\n  type?: \"Simple\" | \"Default\";\n  /** Steps to show on the component. */\n  steps: Array<\n    Pick<\n      HvStepProps,\n      \"state\" | \"title\" | \"onClick\" | \"className\" | \"disabled\"\n    > & {\n      /** Class names to override styles on the separator component after the step. */\n      separatorClassName?: string;\n      /** Class names to override styles on the title component above the step. */\n      titleClassName?: string;\n    }\n  >;\n  /** Sets one of the standard sizes of the steps. */\n  stepSize?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n  /** Width of the component element on each breakpoint screen resolution. */\n  width?: { [breakpoint in HvBreakpoints]?: number };\n  /** Defines either show a title or only a tooltip on each step component. */\n  showTitles?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the empty state StepNavigation. */\n  classes?: HvStepNavigationClasses;\n}\n\n/**\n * Navigation page with steps.\n *\n * You need to define the <b>steps<b/> displayed on the component so that itself can be drawn on the UI.\n * On each step, you need to define a <b>state</b> - 'Pending', 'Failed', 'Completed', 'Current', 'Disabled' -\n * and a <b>title</b> to be shown as a tooltip or a text above of the step. You can also:\n * * Define a <b>className</b> on each step element;\n * * Define a <b>separatorClassName</b> to specify a className for the separator element. The default height\n * values of the separator element are 2px/3px on 'Simple'/'Default' layouts respectively;\n * * Define a <b>titleClassName</b> to specify a className for the title above each step element.\n *\n * For the root element, you can:\n * * Define a <b>className</b>;\n * * Choose a <b>type</b> of layout: 'Simple' or 'Default';\n * * Choose the <b>stepSize</b> of the step component: \"xs\", \"sm\", \"md\", \"lg\", \"xl\". The default size will be\n * correspondent to the current media breakpoint;\n * * Choose either you want to <b>showTitles</b> near to each step component or a tooltip on hover;\n * * Define a <b>width</b> of the component. If you don't define any value and the step component has no title\n * displayed above, the width of the separator element will be 100px.\n * If the step component has titles, each one will have 215px of width by default.\n */\nexport const HvStepNavigation = ({\n  className,\n  classes: classesProp,\n  width,\n  steps,\n  stepSize,\n  showTitles,\n  type = \"Default\",\n  \"aria-label\": ariaLabel,\n  ...others\n}: HvStepNavigationProps) => {\n  const { classes, css, cx } = useClasses(classesProp);\n\n  const { activeTheme } = useTheme();\n\n  // current breakpoint 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n  const breakpoint = useWidth();\n  // step configurations\n  const stepSizeKey =\n    stepSize ?? ([\"xs\", \"sm\"].includes(breakpoint) ? \"sm\" : \"md\");\n  const hasTitles = showTitles ?? ![\"xs\", \"sm\"].includes(breakpoint);\n\n  const styledLi = (containerSize) =>\n    styled(\"li\")({\n      width: containerSize,\n      height: containerSize,\n    });\n\n  const styledDiv = (containerSize) =>\n    styled(\"div\")({\n      width: containerSize,\n      height: containerSize,\n    });\n\n  const styledSeparatorElement = (\n    title,\n    separatorClassName,\n    separatorHeight,\n    separatorWidth,\n    backgroundColor\n  ) => {\n    const widthValue =\n      separatorWidth -\n      2 *\n        Number(\n          (activeTheme?.stepNavigation.separatorMargin || \"0px\").replace(\n            \"px\",\n            \"\"\n          )\n        );\n\n    return (\n      <li\n        aria-hidden\n        key={`separator-${title}`}\n        className={cx(\n          css({\n            height: separatorHeight,\n            width: widthValue,\n            backgroundColor,\n            margin: `0 ${theme.stepNavigation.separatorMargin}`,\n          }),\n          classes.separator\n        )}\n      >\n        <div className={separatorClassName} />\n      </li>\n    );\n  };\n\n  const drawItems = ({\n    separatorValues: { minWidth, maxWidth, getColor, height },\n    stepValues: { minSize, maxSize, StepComponent },\n  }: any) => {\n    const items = steps.reduce<ReactNode[]>(\n      (acc, { state, title, separatorClassName, ...props }, index): any => {\n        const containerSize = state === \"Current\" ? maxSize : minSize;\n        const StepContainer = styledLi(containerSize);\n        const Step = styledDiv(Math.max(containerSize, 30));\n        const stepProps = {\n          ...{\n            size: stepSizeKey,\n            state,\n            title,\n            number: index + 1,\n            ...props,\n          },\n        };\n        const stepElement = (\n          <StepContainer key={`step-${title}`} className={classes.li}>\n            {hasTitles ? (\n              <StepComponent\n                key={`step-${title}`}\n                aria-label={`${title}`}\n                {...stepProps}\n              />\n            ) : (\n              <HvTooltip\n                placement=\"bottom\"\n                title={<HvTypography>{`${index + 1}. ${title}`}</HvTypography>}\n              >\n                <div>\n                  <Step className={classes.li}>\n                    <StepComponent aria-label={`${title}`} {...stepProps} />\n                  </Step>\n                </div>\n              </HvTooltip>\n            )}\n          </StepContainer>\n        );\n        if (index < steps.length - 1) {\n          const separatorElement = styledSeparatorElement(\n            title,\n            separatorClassName,\n            height,\n            [steps[index + 1].state, state].includes(\"Current\")\n              ? minWidth\n              : maxWidth,\n            getColor(\n              steps[index + 1].state === \"Disabled\" ? \"Disabled\" : state,\n              theme\n            )\n          );\n          return [...acc, stepElement, separatorElement];\n        }\n        return [...acc, stepElement];\n      },\n      []\n    );\n\n    return <ol className={classes.ol}>{items}</ol>;\n  };\n\n  const getDynamicValues: HvDefaultNavigationProps[\"getDynamicValues\"] = (\n    stepsWidth\n  ) => {\n    const themeBreakpoints = activeTheme?.breakpoints.values || {};\n    const maxWidth =\n      width?.[breakpoint] ??\n      Math.max(\n        Number(hasTitles) * (TITLE_WIDTH + TITLE_MARGIN) * steps.length -\n          TITLE_MARGIN,\n        SEPARATOR_WIDTH * (steps.length - 1) + stepsWidth\n      );\n    const next = Object.keys(themeBreakpoints).find((_, index, self) =>\n      index - 1 >= 0 ? self[index - 1] === breakpoint : false\n    );\n    const navWidth = Math.min(\n      maxWidth,\n      next ? themeBreakpoints[next] : maxWidth\n    );\n    const titleWidth =\n      Number(hasTitles) * Math.ceil((navWidth + TITLE_MARGIN) / steps.length);\n    const separatorWidth =\n      Number(!hasTitles) *\n      Math.ceil((navWidth - stepsWidth) / (steps.length - 1));\n    return { width: navWidth, titleWidth, separatorWidth };\n  };\n\n  const getTitles = (getTitleProps) =>\n    hasTitles ? (\n      <div className={classes.titles}>\n        {steps.map(({ title: rawTitle, state, titleClassName }, index) => {\n          const {\n            variant = \"label\",\n            title = rawTitle,\n            titleWidth = 0,\n            titleDisabled = false,\n          } = getTitleProps({\n            state,\n            rawTitle,\n            number: index + 1,\n          });\n\n          return (\n            <HvTypography\n              variant={variant}\n              className={cx(\n                css({\n                  textAlign: \"center\",\n                  width: titleWidth - TITLE_MARGIN,\n                  marginRight: TITLE_MARGIN,\n                }),\n                titleClassName\n              )}\n              disabled={titleDisabled}\n              key={title}\n            >\n              {title}\n            </HvTypography>\n          );\n        })}\n      </div>\n    ) : null;\n\n  const StepNavigation = {\n    Default: HvDefaultNavigation,\n    Simple: HvSimpleNavigation,\n  }[type];\n\n  return (\n    <StepNavigation\n      numSteps={steps.length}\n      stepSize={stepSizeKey}\n      getTitles={getTitles}\n      getDynamicValues={getDynamicValues}\n      className={cx(classes.root, className)}\n      {...others}\n    >\n      {({ stepsWidth, navWidth, ...itemsProps }) => (\n        <HvBox\n          component=\"nav\"\n          style={{\n            width: `${navWidth}px`,\n            margin: 0,\n          }}\n          aria-label={ariaLabel}\n        >\n          {drawItems(itemsProps)}\n        </HvBox>\n      )}\n    </StepNavigation>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"StepNavigation.js","sources":["../../../src/StepNavigation/StepNavigation.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport styled from \"@emotion/styled\";\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvBox,\n  HvBreakpoints,\n  HvTooltip,\n  HvTypography,\n  useTheme,\n  useWidth,\n} from \"@hitachivantara/uikit-react-core\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport {\n  HvDefaultNavigation,\n  HvDefaultNavigationProps,\n  HvStepProps,\n} from \"./DefaultNavigation\";\nimport { HvSimpleNavigation } from \"./SimpleNavigation\";\nimport { staticClasses, useClasses } from \"./StepNavigation.styles\";\nimport { SEPARATOR_WIDTH, TITLE_MARGIN, TITLE_WIDTH } from \"./utils\";\n\nexport { staticClasses as stepNavigationClasses };\n\nexport type HvStepNavigationClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvStepNavigationProps extends HvBaseProps {\n  /** Type of step navigation. Values = {\"Simple\", \"Default\"} */\n  type?: \"Simple\" | \"Default\";\n  /** Steps to show on the component. */\n  steps: Array<\n    Pick<\n      HvStepProps,\n      \"state\" | \"title\" | \"onClick\" | \"className\" | \"disabled\"\n    > & {\n      /** Class names to override styles on the separator component after the step. */\n      separatorClassName?: string;\n      /** Class names to override styles on the title component above the step. */\n      titleClassName?: string;\n    }\n  >;\n  /** Sets one of the standard sizes of the steps. */\n  stepSize?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n  /** Width of the component element on each breakpoint screen resolution. */\n  width?: { [breakpoint in HvBreakpoints]?: number };\n  /** Defines either show a title or only a tooltip on each step component. */\n  showTitles?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the empty state StepNavigation. */\n  classes?: HvStepNavigationClasses;\n}\n\n/**\n * Navigation page with steps.\n *\n * You need to define the <b>steps<b/> displayed on the component so that itself can be drawn on the UI.\n * On each step, you need to define a <b>state</b> - 'Pending', 'Failed', 'Completed', 'Current', 'Disabled' -\n * and a <b>title</b> to be shown as a tooltip or a text above of the step. You can also:\n * * Define a <b>className</b> on each step element;\n * * Define a <b>separatorClassName</b> to specify a className for the separator element. The default height\n * values of the separator element are 2px/3px on 'Simple'/'Default' layouts respectively;\n * * Define a <b>titleClassName</b> to specify a className for the title above each step element.\n *\n * For the root element, you can:\n * * Define a <b>className</b>;\n * * Choose a <b>type</b> of layout: 'Simple' or 'Default';\n * * Choose the <b>stepSize</b> of the step component: \"xs\", \"sm\", \"md\", \"lg\", \"xl\". The default size will be\n * correspondent to the current media breakpoint;\n * * Choose either you want to <b>showTitles</b> near to each step component or a tooltip on hover;\n * * Define a <b>width</b> of the component. If you don't define any value and the step component has no title\n * displayed above, the width of the separator element will be 100px.\n * If the step component has titles, each one will have 215px of width by default.\n */\nexport const HvStepNavigation = ({\n  className,\n  classes: classesProp,\n  width,\n  steps,\n  stepSize,\n  showTitles,\n  type = \"Default\",\n  \"aria-label\": ariaLabel,\n  ...others\n}: HvStepNavigationProps) => {\n  const { classes, css, cx } = useClasses(classesProp);\n\n  const { activeTheme } = useTheme();\n\n  // current breakpoint 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n  const breakpoint = useWidth();\n  // step configurations\n  const stepSizeKey =\n    stepSize ?? ([\"xs\", \"sm\"].includes(breakpoint) ? \"sm\" : \"md\");\n  const hasTitles = showTitles ?? ![\"xs\", \"sm\"].includes(breakpoint);\n\n  const styledLi = (containerSize) =>\n    styled(\"li\")({\n      width: containerSize,\n      height: containerSize,\n    });\n\n  const styledDiv = (containerSize) =>\n    styled(\"div\")({\n      width: containerSize,\n      height: containerSize,\n    });\n\n  const styledSeparatorElement = (\n    title,\n    separatorClassName,\n    separatorHeight,\n    separatorWidth,\n    backgroundColor,\n  ) => {\n    const widthValue =\n      separatorWidth -\n      2 *\n        Number(\n          (activeTheme?.stepNavigation.separatorMargin || \"0px\").replace(\n            \"px\",\n            \"\",\n          ),\n        );\n\n    return (\n      <li\n        aria-hidden\n        key={`separator-${title}`}\n        className={cx(\n          css({\n            height: separatorHeight,\n            width: widthValue,\n            backgroundColor,\n            margin: `0 ${theme.stepNavigation.separatorMargin}`,\n          }),\n          classes.separator,\n        )}\n      >\n        <div className={separatorClassName} />\n      </li>\n    );\n  };\n\n  const drawItems = ({\n    separatorValues: { minWidth, maxWidth, getColor, height },\n    stepValues: { minSize, maxSize, StepComponent },\n  }: any) => {\n    const items = steps.reduce<ReactNode[]>(\n      (acc, { state, title, separatorClassName, ...props }, index): any => {\n        const containerSize = state === \"Current\" ? maxSize : minSize;\n        const StepContainer = styledLi(containerSize);\n        const Step = styledDiv(Math.max(containerSize, 30));\n        const stepProps = {\n          ...{\n            size: stepSizeKey,\n            state,\n            title,\n            number: index + 1,\n            ...props,\n          },\n        };\n        const stepElement = (\n          <StepContainer key={`step-${title}`} className={classes.li}>\n            {hasTitles ? (\n              <StepComponent\n                key={`step-${title}`}\n                aria-label={`${title}`}\n                {...stepProps}\n              />\n            ) : (\n              <HvTooltip\n                placement=\"bottom\"\n                title={<HvTypography>{`${index + 1}. ${title}`}</HvTypography>}\n              >\n                <div>\n                  <Step className={classes.li}>\n                    <StepComponent aria-label={`${title}`} {...stepProps} />\n                  </Step>\n                </div>\n              </HvTooltip>\n            )}\n          </StepContainer>\n        );\n        if (index < steps.length - 1) {\n          const separatorElement = styledSeparatorElement(\n            title,\n            separatorClassName,\n            height,\n            [steps[index + 1].state, state].includes(\"Current\")\n              ? minWidth\n              : maxWidth,\n            getColor(\n              steps[index + 1].state === \"Disabled\" ? \"Disabled\" : state,\n              theme,\n            ),\n          );\n          return [...acc, stepElement, separatorElement];\n        }\n        return [...acc, stepElement];\n      },\n      [],\n    );\n\n    return <ol className={classes.ol}>{items}</ol>;\n  };\n\n  const getDynamicValues: HvDefaultNavigationProps[\"getDynamicValues\"] = (\n    stepsWidth,\n  ) => {\n    const themeBreakpoints = activeTheme?.breakpoints.values || {};\n    const maxWidth =\n      width?.[breakpoint] ??\n      Math.max(\n        Number(hasTitles) * (TITLE_WIDTH + TITLE_MARGIN) * steps.length -\n          TITLE_MARGIN,\n        SEPARATOR_WIDTH * (steps.length - 1) + stepsWidth,\n      );\n    const next = Object.keys(themeBreakpoints).find((_, index, self) =>\n      index - 1 >= 0 ? self[index - 1] === breakpoint : false,\n    );\n    const navWidth = Math.min(\n      maxWidth,\n      next ? themeBreakpoints[next] : maxWidth,\n    );\n    const titleWidth =\n      Number(hasTitles) * Math.ceil((navWidth + TITLE_MARGIN) / steps.length);\n    const separatorWidth =\n      Number(!hasTitles) *\n      Math.ceil((navWidth - stepsWidth) / (steps.length - 1));\n    return { width: navWidth, titleWidth, separatorWidth };\n  };\n\n  const getTitles = (getTitleProps) =>\n    hasTitles ? (\n      <div className={classes.titles}>\n        {steps.map(({ title: rawTitle, state, titleClassName }, index) => {\n          const {\n            variant = \"label\",\n            title = rawTitle,\n            titleWidth = 0,\n            titleDisabled = false,\n          } = getTitleProps({\n            state,\n            rawTitle,\n            number: index + 1,\n          });\n\n          return (\n            <HvTypography\n              variant={variant}\n              className={cx(\n                css({\n                  textAlign: \"center\",\n                  width: titleWidth - TITLE_MARGIN,\n                  marginRight: TITLE_MARGIN,\n                }),\n                titleClassName,\n              )}\n              disabled={titleDisabled}\n              key={title}\n            >\n              {title}\n            </HvTypography>\n          );\n        })}\n      </div>\n    ) : null;\n\n  const StepNavigation = {\n    Default: HvDefaultNavigation,\n    Simple: HvSimpleNavigation,\n  }[type];\n\n  return (\n    <StepNavigation\n      numSteps={steps.length}\n      stepSize={stepSizeKey}\n      getTitles={getTitles}\n      getDynamicValues={getDynamicValues}\n      className={cx(classes.root, className)}\n      {...others}\n    >\n      {({ stepsWidth, navWidth, ...itemsProps }) => (\n        <HvBox\n          component=\"nav\"\n          style={{\n            width: `${navWidth}px`,\n            margin: 0,\n          }}\n          aria-label={ariaLabel}\n        >\n          {drawItems(itemsProps)}\n        </HvBox>\n      )}\n    </StepNavigation>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/Wizard/Wizard.js.map

@@ -1 +1 @@
-{"version":3,"file":"Wizard.js","sources":["../../../src/Wizard/Wizard.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from \"react\";\n\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvDialogProps,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { ModalProps } from \"@mui/material/Modal\";\n\nimport { HvStepNavigationProps } from \"../StepNavigation\";\nimport { HvWizardContent } from \"./WizardContent\";\nimport { HvWizardContext, HvWizardTabs } from \"./WizardContext\";\nimport { HvWizardTitle, HvWizardTitleProps } from \"./WizardTitle\";\nimport { HvWizardActions, HvWizardActionsProps } from \"./WizardActions\";\nimport { HvWizardContainer } from \"./WizardContainer\";\n\nimport { staticClasses, useClasses } from \"./Wizard.styles\";\n\nexport { staticClasses as wizardClasses };\n\nexport type HvWizardClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvWizardProps\n  extends HvBaseProps,\n    Pick<HvDialogProps, \"maxWidth\" | \"fullWidth\"> {\n  /** Current state of the Wizard. */\n  open: boolean;\n  /** Function executed on close. */\n  onClose: ModalProps[\"onClose\"];\n  /** Function executed on submit. */\n  handleSubmit: (context: HvWizardTabs) => void;\n  /** Title for the wizard. */\n  title?: string;\n  /** An object containing all the labels for the wizard. */\n  labels?: HvWizardActionsProps[\"labels\"] & HvWizardTitleProps[\"labels\"];\n  /** Shows the summary button. */\n  hasSummary?: boolean;\n  /** The content of the summary. */\n  summaryContent?: React.ReactNode;\n  /** Enables the skip button. */\n  skippable?: boolean;\n  /** Forces minimum height to the component. */\n  fixedHeight?: boolean;\n  /** Whether the loading animation is shown. */\n  loading?: boolean;\n  /** Custom object to define type, size and width of the StepNavigation component */\n  customStep?: Pick<HvStepNavigationProps, \"type\" | \"stepSize\" | \"width\">;\n  /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n  classes?: HvWizardClasses;\n}\n\nexport const HvWizard = ({\n  className,\n  children,\n  onClose,\n  handleSubmit,\n  title,\n  open,\n  skippable = true,\n  loading = false,\n  hasSummary = false,\n  summaryContent,\n  labels = {\n    cancel: \"Cancel\",\n    next: \"Next\",\n    previous: \"Previous\",\n    skip: \"Skip\",\n    submit: \"Submit\",\n    summary: \"Summary\",\n  },\n  fixedHeight = false,\n  customStep,\n  classes: classesProp,\n  ...others\n}: HvWizardProps) => {\n  const { classes } = useClasses(classesProp);\n\n  const [context, setContext] = useState<HvWizardTabs>({});\n  const [summary, setSummary] = useState(false);\n  const [tab, setTab] = useState(0);\n\n  const handleClose = useCallback(\n    (evt, reason) => {\n      if (reason !== \"backdropClick\") {\n        onClose?.(evt, reason);\n      }\n    },\n    [onClose]\n  );\n\n  // on unmount\n  useEffect(() => {\n    return () => {\n      if (!open) {\n        setContext((c) =>\n          Object.entries(c).reduce(\n            (acc, [key, child]) => ({\n              ...acc,\n              [+key]: {\n                ...child,\n                touched: false,\n              },\n            }),\n            {} as HvWizardTabs\n          )\n        );\n        setTab(0);\n      }\n    };\n  }, [open]);\n\n  const value = useMemo(\n    () => ({ context, setContext, summary, setSummary, tab, setTab }),\n    [context, setContext, summary, setSummary, tab, setTab]\n  );\n\n  return (\n    <HvWizardContext.Provider value={value}>\n      <HvWizardContainer\n        className={className}\n        classes={{ root: classes.root }}\n        handleClose={handleClose}\n        open={open}\n        {...others}\n      >\n        <HvWizardTitle\n          title={title}\n          hasSummary={hasSummary}\n          labels={labels}\n          customStep={customStep}\n        />\n        <HvWizardContent\n          loading={loading}\n          fixedHeight={fixedHeight}\n          summaryContent={summaryContent}\n        >\n          {children}\n        </HvWizardContent>\n        <HvWizardActions\n          loading={loading}\n          skippable={skippable}\n          labels={labels}\n          handleClose={handleClose}\n          handleSubmit={handleSubmit}\n        />\n      </HvWizardContainer>\n    </HvWizardContext.Provider>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAoDO,MAAM,WAAW,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,aAAa;AAAA,EACb;AAAA,EACA,SAAS;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,UAAU;AAAA,IACV,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,SAAS;AAAA,EACT,GAAG;AACL,MAAqB;AACnB,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAE1C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAuB,CAAE,CAAA;AACvD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,CAAC;AAEhC,QAAM,cAAc;AAAA,IAClB,CAAC,KAAK,WAAW;AACf,UAAI,WAAW,iBAAiB;AAC9B,kBAAU,KAAK,MAAM;AAAA,MACvB;AAAA,IACF;AAAA,IACA,CAAC,OAAO;AAAA,EAAA;AAIV,YAAU,MAAM;AACd,WAAO,MAAM;AACX,UAAI,CAAC,MAAM;AACT;AAAA,UAAW,CAAC,MACV,OAAO,QAAQ,CAAC,EAAE;AAAA,YAChB,CAAC,KAAK,CAAC,KAAK,KAAK,OAAO;AAAA,cACtB,GAAG;AAAA,cACH,CAAC,CAAC,GAAG,GAAG;AAAA,gBACN,GAAG;AAAA,gBACH,SAAS;AAAA,cACX;AAAA,YAAA;AAAA,YAEF,CAAC;AAAA,UACH;AAAA,QAAA;AAEF,eAAO,CAAC;AAAA,MACV;AAAA,IAAA;AAAA,EACF,GACC,CAAC,IAAI,CAAC;AAET,QAAM,QAAQ;AAAA,IACZ,OAAO,EAAE,SAAS,YAAY,SAAS,YAAY,KAAK;IACxD,CAAC,SAAS,YAAY,SAAS,YAAY,KAAK,MAAM;AAAA,EAAA;AAGxD,SACG,oBAAA,gBAAgB,UAAhB,EAAyB,OACxB,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAS,EAAE,MAAM,QAAQ,KAAK;AAAA,MAC9B;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YAEC;AAAA,UAAA;AAAA,QACH;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"Wizard.js","sources":["../../../src/Wizard/Wizard.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { ModalProps } from \"@mui/material/Modal\";\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvDialogProps,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { HvStepNavigationProps } from \"../StepNavigation\";\nimport { staticClasses, useClasses } from \"./Wizard.styles\";\nimport { HvWizardActions, HvWizardActionsProps } from \"./WizardActions\";\nimport { HvWizardContainer } from \"./WizardContainer\";\nimport { HvWizardContent } from \"./WizardContent\";\nimport { HvWizardContext, HvWizardTabs } from \"./WizardContext\";\nimport { HvWizardTitle, HvWizardTitleProps } from \"./WizardTitle\";\n\nexport { staticClasses as wizardClasses };\n\nexport type HvWizardClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvWizardProps\n  extends HvBaseProps,\n    Pick<HvDialogProps, \"maxWidth\" | \"fullWidth\"> {\n  /** Current state of the Wizard. */\n  open: boolean;\n  /** Function executed on close. */\n  onClose: ModalProps[\"onClose\"];\n  /** Function executed on submit. */\n  handleSubmit: (context: HvWizardTabs) => void;\n  /** Title for the wizard. */\n  title?: string;\n  /** An object containing all the labels for the wizard. */\n  labels?: HvWizardActionsProps[\"labels\"] & HvWizardTitleProps[\"labels\"];\n  /** Shows the summary button. */\n  hasSummary?: boolean;\n  /** The content of the summary. */\n  summaryContent?: React.ReactNode;\n  /** Enables the skip button. */\n  skippable?: boolean;\n  /** Forces minimum height to the component. */\n  fixedHeight?: boolean;\n  /** Whether the loading animation is shown. */\n  loading?: boolean;\n  /** Custom object to define type, size and width of the StepNavigation component */\n  customStep?: Pick<HvStepNavigationProps, \"type\" | \"stepSize\" | \"width\">;\n  /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n  classes?: HvWizardClasses;\n}\n\nexport const HvWizard = ({\n  className,\n  children,\n  onClose,\n  handleSubmit,\n  title,\n  open,\n  skippable = true,\n  loading = false,\n  hasSummary = false,\n  summaryContent,\n  labels = {\n    cancel: \"Cancel\",\n    next: \"Next\",\n    previous: \"Previous\",\n    skip: \"Skip\",\n    submit: \"Submit\",\n    summary: \"Summary\",\n  },\n  fixedHeight = false,\n  customStep,\n  classes: classesProp,\n  ...others\n}: HvWizardProps) => {\n  const { classes } = useClasses(classesProp);\n\n  const [context, setContext] = useState<HvWizardTabs>({});\n  const [summary, setSummary] = useState(false);\n  const [tab, setTab] = useState(0);\n\n  const handleClose = useCallback(\n    (evt, reason) => {\n      if (reason !== \"backdropClick\") {\n        onClose?.(evt, reason);\n      }\n    },\n    [onClose],\n  );\n\n  // on unmount\n  useEffect(() => {\n    return () => {\n      if (!open) {\n        setContext((c) =>\n          Object.entries(c).reduce(\n            (acc, [key, child]) => ({\n              ...acc,\n              [+key]: {\n                ...child,\n                touched: false,\n              },\n            }),\n            {} as HvWizardTabs,\n          ),\n        );\n        setTab(0);\n      }\n    };\n  }, [open]);\n\n  const value = useMemo(\n    () => ({ context, setContext, summary, setSummary, tab, setTab }),\n    [context, setContext, summary, setSummary, tab, setTab],\n  );\n\n  return (\n    <HvWizardContext.Provider value={value}>\n      <HvWizardContainer\n        className={className}\n        classes={{ root: classes.root }}\n        handleClose={handleClose}\n        open={open}\n        {...others}\n      >\n        <HvWizardTitle\n          title={title}\n          hasSummary={hasSummary}\n          labels={labels}\n          customStep={customStep}\n        />\n        <HvWizardContent\n          loading={loading}\n          fixedHeight={fixedHeight}\n          summaryContent={summaryContent}\n        >\n          {children}\n        </HvWizardContent>\n        <HvWizardActions\n          loading={loading}\n          skippable={skippable}\n          labels={labels}\n          handleClose={handleClose}\n          handleSubmit={handleSubmit}\n        />\n      </HvWizardContainer>\n    </HvWizardContext.Provider>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAiDO,MAAM,WAAW,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,aAAa;AAAA,EACb;AAAA,EACA,SAAS;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,UAAU;AAAA,IACV,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,SAAS;AAAA,EACT,GAAG;AACL,MAAqB;AACnB,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAE1C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAuB,CAAE,CAAA;AACvD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,CAAC;AAEhC,QAAM,cAAc;AAAA,IAClB,CAAC,KAAK,WAAW;AACf,UAAI,WAAW,iBAAiB;AAC9B,kBAAU,KAAK,MAAM;AAAA,MACvB;AAAA,IACF;AAAA,IACA,CAAC,OAAO;AAAA,EAAA;AAIV,YAAU,MAAM;AACd,WAAO,MAAM;AACX,UAAI,CAAC,MAAM;AACT;AAAA,UAAW,CAAC,MACV,OAAO,QAAQ,CAAC,EAAE;AAAA,YAChB,CAAC,KAAK,CAAC,KAAK,KAAK,OAAO;AAAA,cACtB,GAAG;AAAA,cACH,CAAC,CAAC,GAAG,GAAG;AAAA,gBACN,GAAG;AAAA,gBACH,SAAS;AAAA,cACX;AAAA,YAAA;AAAA,YAEF,CAAC;AAAA,UACH;AAAA,QAAA;AAEF,eAAO,CAAC;AAAA,MACV;AAAA,IAAA;AAAA,EACF,GACC,CAAC,IAAI,CAAC;AAET,QAAM,QAAQ;AAAA,IACZ,OAAO,EAAE,SAAS,YAAY,SAAS,YAAY,KAAK;IACxD,CAAC,SAAS,YAAY,SAAS,YAAY,KAAK,MAAM;AAAA,EAAA;AAGxD,SACG,oBAAA,gBAAgB,UAAhB,EAAyB,OACxB,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAS,EAAE,MAAM,QAAQ,KAAK;AAAA,MAC9B;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YAEC;AAAA,UAAA;AAAA,QACH;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}

package/dist/esm/Wizard/WizardActions/WizardActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"WizardActions.js","sources":["../../../../src/Wizard/WizardActions/WizardActions.tsx"],"sourcesContent":["import { useCallback, useContext, useEffect, useState } from \"react\";\n\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvButton,\n  HvDialogActions,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Backwards, Forwards } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvWizardContext, HvWizardTabs } from \"../WizardContext\";\nimport { staticClasses, useClasses } from \"./WizardActions.styles\";\n\nexport { staticClasses as wizardActionsClasses };\n\nexport type HvWizardActionsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvWizardActionsProps extends HvBaseProps {\n  /** Function to handle the cancel button. */\n  handleClose: (\n    event: React.SyntheticEvent,\n    reason?: \"escapeKeyDown\" | \"backdropClick\"\n  ) => void;\n  /** Function to handle the submit button. Also sends the current context state. */\n  handleSubmit: (context: any) => void;\n  /** An object containing all the labels for the wizard actions component. */\n  labels?: {\n    /** Cancel button label. */\n    cancel?: string | React.ReactNode;\n    /** Skip button label. */\n    skip?: string | React.ReactNode;\n    /** Previous button label. */\n    previous?: string | React.ReactNode;\n    /** Next button label. */\n    next?: string | React.ReactNode;\n    /** Submit button label. */\n    submit?: string | React.ReactNode;\n  };\n  /** Whether the submit button is disabled. */\n  loading?: boolean;\n  /** Enables the skip button. */\n  skippable?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n  classes?: HvWizardActionsClasses;\n  /** Function executed instead of default go to next page */\n  handleBeforeNext?: () => void;\n}\n\nexport const HvWizardActions = ({\n  classes: classesProp,\n  handleClose,\n  handleSubmit,\n  loading = false,\n  skippable = false,\n  labels = {\n    cancel: \"Cancel\",\n    next: \"Next\",\n    previous: \"Previous\",\n    skip: \"Skip\",\n    submit: \"Submit\",\n  },\n  handleBeforeNext,\n}: HvWizardActionsProps) => {\n  const { classes, css, cx } = useClasses(classesProp);\n\n  const { context, setContext, tab, setTab } = useContext(HvWizardContext);\n  const [pages, setPages] = useState(0);\n  const [canSubmit, setCanSubmit] = useState(false);\n\n  useEffect(() => {\n    const contextEntries = Object.entries(context);\n    if (contextEntries.length) {\n      setPages(contextEntries.length);\n\n      const validWizard = Object.entries(context).every(\n        ([, value]) => value?.valid\n      );\n      if (validWizard !== canSubmit) {\n        setCanSubmit(validWizard);\n      }\n    }\n  }, [context, canSubmit, setCanSubmit, setPages]);\n\n  const lastPage = pages - 1;\n  const isLastPage = tab >= lastPage;\n\n  const handleSkip = useCallback(() => {\n    setContext((c) =>\n      Object.entries(c).reduce(\n        (acc, [key, child]) => ({\n          ...acc,\n          [+key]: {\n            ...child,\n            valid: child?.valid !== false,\n          },\n        }),\n        {} as HvWizardTabs\n      )\n    );\n    setTab(lastPage);\n  }, [setTab, lastPage, setContext]);\n\n  const handleSubmitInternal = useCallback(\n    () => handleSubmit(context),\n    [handleSubmit, context]\n  );\n\n  return (\n    <HvDialogActions className={classes.actionsContainer}>\n      <HvButton\n        variant=\"secondaryGhost\"\n        onClick={handleClose}\n        className={classes.buttonWidth}\n      >\n        {labels.cancel ?? \"Cancel\"}\n      </HvButton>\n      {skippable && (\n        <HvButton\n          variant=\"secondaryGhost\"\n          disabled={isLastPage}\n          className={classes.buttonWidth}\n          onClick={handleSkip}\n        >\n          {labels.skip ?? \"Skip\"}\n        </HvButton>\n      )}\n      <div aria-hidden className={css({ flex: 1 })}>\n        &nbsp;\n      </div>\n      <div className={classes.buttonsContainer}>\n        <HvButton\n          variant=\"secondaryGhost\"\n          className={classes.buttonWidth}\n          disabled={tab <= 0}\n          onClick={() => setTab((t) => t - 1)}\n          startIcon={<Backwards />}\n        >\n          {labels.previous ?? \"Previous\"}\n        </HvButton>\n        {isLastPage ? (\n          <HvButton\n            variant=\"primary\"\n            className={classes.buttonWidth}\n            disabled={loading || !canSubmit}\n            onClick={handleSubmitInternal}\n          >\n            {labels.submit ?? \"Submit\"}\n          </HvButton>\n        ) : (\n          <HvButton\n            variant=\"secondaryGhost\"\n            className={cx(classes.buttonWidth, classes.buttonSpacing)}\n            onClick={() => {\n              if (handleBeforeNext) {\n                handleBeforeNext();\n              } else {\n                setTab((t) => t + 1);\n              }\n            }}\n            disabled={!skippable && !context?.[tab]?.valid}\n            endIcon={<Forwards />}\n          >\n            {labels.next ?? \"Next\"}\n          </HvButton>\n        )}\n      </div>\n    </HvDialogActions>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"WizardActions.js","sources":["../../../../src/Wizard/WizardActions/WizardActions.tsx"],"sourcesContent":["import { useCallback, useContext, useEffect, useState } from \"react\";\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvButton,\n  HvDialogActions,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Backwards, Forwards } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvWizardContext, HvWizardTabs } from \"../WizardContext\";\nimport { staticClasses, useClasses } from \"./WizardActions.styles\";\n\nexport { staticClasses as wizardActionsClasses };\n\nexport type HvWizardActionsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvWizardActionsProps extends HvBaseProps {\n  /** Function to handle the cancel button. */\n  handleClose: (\n    event: React.SyntheticEvent,\n    reason?: \"escapeKeyDown\" | \"backdropClick\",\n  ) => void;\n  /** Function to handle the submit button. Also sends the current context state. */\n  handleSubmit: (context: any) => void;\n  /** An object containing all the labels for the wizard actions component. */\n  labels?: {\n    /** Cancel button label. */\n    cancel?: string | React.ReactNode;\n    /** Skip button label. */\n    skip?: string | React.ReactNode;\n    /** Previous button label. */\n    previous?: string | React.ReactNode;\n    /** Next button label. */\n    next?: string | React.ReactNode;\n    /** Submit button label. */\n    submit?: string | React.ReactNode;\n  };\n  /** Whether the submit button is disabled. */\n  loading?: boolean;\n  /** Enables the skip button. */\n  skippable?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n  classes?: HvWizardActionsClasses;\n  /** Function executed instead of default go to next page */\n  handleBeforeNext?: () => void;\n}\n\nexport const HvWizardActions = ({\n  classes: classesProp,\n  handleClose,\n  handleSubmit,\n  loading = false,\n  skippable = false,\n  labels = {\n    cancel: \"Cancel\",\n    next: \"Next\",\n    previous: \"Previous\",\n    skip: \"Skip\",\n    submit: \"Submit\",\n  },\n  handleBeforeNext,\n}: HvWizardActionsProps) => {\n  const { classes, css, cx } = useClasses(classesProp);\n\n  const { context, setContext, tab, setTab } = useContext(HvWizardContext);\n  const [pages, setPages] = useState(0);\n  const [canSubmit, setCanSubmit] = useState(false);\n\n  useEffect(() => {\n    const contextEntries = Object.entries(context);\n    if (contextEntries.length) {\n      setPages(contextEntries.length);\n\n      const validWizard = Object.entries(context).every(\n        ([, value]) => value?.valid,\n      );\n      if (validWizard !== canSubmit) {\n        setCanSubmit(validWizard);\n      }\n    }\n  }, [context, canSubmit, setCanSubmit, setPages]);\n\n  const lastPage = pages - 1;\n  const isLastPage = tab >= lastPage;\n\n  const handleSkip = useCallback(() => {\n    setContext((c) =>\n      Object.entries(c).reduce(\n        (acc, [key, child]) => ({\n          ...acc,\n          [+key]: {\n            ...child,\n            valid: child?.valid !== false,\n          },\n        }),\n        {} as HvWizardTabs,\n      ),\n    );\n    setTab(lastPage);\n  }, [setTab, lastPage, setContext]);\n\n  const handleSubmitInternal = useCallback(\n    () => handleSubmit(context),\n    [handleSubmit, context],\n  );\n\n  return (\n    <HvDialogActions className={classes.actionsContainer}>\n      <HvButton\n        variant=\"secondaryGhost\"\n        onClick={handleClose}\n        className={classes.buttonWidth}\n      >\n        {labels.cancel ?? \"Cancel\"}\n      </HvButton>\n      {skippable && (\n        <HvButton\n          variant=\"secondaryGhost\"\n          disabled={isLastPage}\n          className={classes.buttonWidth}\n          onClick={handleSkip}\n        >\n          {labels.skip ?? \"Skip\"}\n        </HvButton>\n      )}\n      <div aria-hidden className={css({ flex: 1 })}>\n        &nbsp;\n      </div>\n      <div className={classes.buttonsContainer}>\n        <HvButton\n          variant=\"secondaryGhost\"\n          className={classes.buttonWidth}\n          disabled={tab <= 0}\n          onClick={() => setTab((t) => t - 1)}\n          startIcon={<Backwards />}\n        >\n          {labels.previous ?? \"Previous\"}\n        </HvButton>\n        {isLastPage ? (\n          <HvButton\n            variant=\"primary\"\n            className={classes.buttonWidth}\n            disabled={loading || !canSubmit}\n            onClick={handleSubmitInternal}\n          >\n            {labels.submit ?? \"Submit\"}\n          </HvButton>\n        ) : (\n          <HvButton\n            variant=\"secondaryGhost\"\n            className={cx(classes.buttonWidth, classes.buttonSpacing)}\n            onClick={() => {\n              if (handleBeforeNext) {\n                handleBeforeNext();\n              } else {\n                setTab((t) => t + 1);\n              }\n            }}\n            disabled={!skippable && !context?.[tab]?.valid}\n            endIcon={<Forwards />}\n          >\n            {labels.next ?? \"Next\"}\n          </HvButton>\n        )}\n      </div>\n    </HvDialogActions>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/Wizard/WizardActions/WizardActions.styles.js

@@ -1,5 +1,5 @@
-import { theme } from "@hitachivantara/uikit-styles";
 import { createClasses } from "@hitachivantara/uikit-react-core";
+import { theme } from "@hitachivantara/uikit-styles";
 const { staticClasses, useClasses } = createClasses("HvWizardActions", {
   actionsContainer: {},
   buttonWidth: {

package/dist/esm/Wizard/WizardActions/WizardActions.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"WizardActions.styles.js","sources":["../../../../src/Wizard/WizardActions/WizardActions.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { createClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvWizardActions\", {\n  actionsContainer: {},\n  buttonWidth: {\n    width: 120,\n    \"& span\": {\n      whiteSpace: \"normal\",\n      lineHeight: theme.lineHeights.sm,\n    },\n  },\n  buttonsContainer: {\n    display: \"flex\",\n    alignItems: \"center\",\n    gap: theme.space.xs,\n  },\n  buttonSpacing: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,mBAAmB;AAAA,EAC5E,kBAAkB,CAAC;AAAA,EACnB,aAAa;AAAA,IACX,OAAO;AAAA,IACP,UAAU;AAAA,MACR,YAAY;AAAA,MACZ,YAAY,MAAM,YAAY;AAAA,IAChC;AAAA,EACF;AAAA,EACA,kBAAkB;AAAA,IAChB,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,KAAK,MAAM,MAAM;AAAA,EACnB;AAAA,EACA,eAAe,CAAC;AAClB,CAAC;"}
+{"version":3,"file":"WizardActions.styles.js","sources":["../../../../src/Wizard/WizardActions/WizardActions.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-core\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvWizardActions\", {\n  actionsContainer: {},\n  buttonWidth: {\n    width: 120,\n    \"& span\": {\n      whiteSpace: \"normal\",\n      lineHeight: theme.lineHeights.sm,\n    },\n  },\n  buttonsContainer: {\n    display: \"flex\",\n    alignItems: \"center\",\n    gap: theme.space.xs,\n  },\n  buttonSpacing: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,mBAAmB;AAAA,EAC5E,kBAAkB,CAAC;AAAA,EACnB,aAAa;AAAA,IACX,OAAO;AAAA,IACP,UAAU;AAAA,MACR,YAAY;AAAA,MACZ,YAAY,MAAM,YAAY;AAAA,IAChC;AAAA,EACF;AAAA,EACA,kBAAkB;AAAA,IAChB,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,KAAK,MAAM,MAAM;AAAA,EACnB;AAAA,EACA,eAAe,CAAC;AAClB,CAAC;"}

package/dist/esm/Wizard/WizardContainer/WizardContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"WizardContainer.js","sources":["../../../../src/Wizard/WizardContainer/WizardContainer.tsx"],"sourcesContent":["import React from \"react\";\n\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvDialog,\n  HvDialogProps,\n  useDefaultProps,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { staticClasses, useClasses } from \"./WizardContainer.styles\";\n\nexport { staticClasses as wizardContainerClasses };\n\nexport type HvWizardContainerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvWizardContainerProps\n  extends Omit<HvBaseProps, \"onClose\">,\n    Pick<HvDialogProps, \"maxWidth\" | \"fullWidth\"> {\n  /** Current state of the Wizard. */\n  open: boolean;\n  /** Function executed on close. */\n  handleClose: (\n    event: React.SyntheticEvent,\n    reason?: \"escapeKeyDown\" | \"backdropClick\"\n  ) => void;\n  /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n  classes?: HvWizardContainerClasses;\n}\n\nexport const HvWizardContainer = (props: HvWizardContainerProps) => {\n  const {\n    classes: classesProp,\n    className,\n    children,\n    handleClose,\n    open,\n    ...others\n  } = useDefaultProps(\"HvWizardContainer\", props);\n  const { classes } = useClasses(classesProp);\n\n  return (\n    <HvDialog\n      classes={{\n        closeButton: classes.closeButton,\n        paper: classes.paper,\n      }}\n      className={classes.root}\n      open={open}\n      onClose={handleClose}\n      maxWidth=\"lg\"\n      {...others}\n    >\n      {children}\n    </HvDialog>\n  );\n};\n"],"names":[],"mappings":";;;;AA8Ba,MAAA,oBAAoB,CAAC,UAAkC;AAC5D,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,qBAAqB,KAAK;AAC9C,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAGxC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS;AAAA,QACP,aAAa,QAAQ;AAAA,QACrB,OAAO,QAAQ;AAAA,MACjB;AAAA,MACA,WAAW,QAAQ;AAAA,MACnB;AAAA,MACA,SAAS;AAAA,MACT,UAAS;AAAA,MACR,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"WizardContainer.js","sources":["../../../../src/Wizard/WizardContainer/WizardContainer.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvDialog,\n  HvDialogProps,\n  useDefaultProps,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { staticClasses, useClasses } from \"./WizardContainer.styles\";\n\nexport { staticClasses as wizardContainerClasses };\n\nexport type HvWizardContainerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvWizardContainerProps\n  extends Omit<HvBaseProps, \"onClose\">,\n    Pick<HvDialogProps, \"maxWidth\" | \"fullWidth\"> {\n  /** Current state of the Wizard. */\n  open: boolean;\n  /** Function executed on close. */\n  handleClose: (\n    event: React.SyntheticEvent,\n    reason?: \"escapeKeyDown\" | \"backdropClick\",\n  ) => void;\n  /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n  classes?: HvWizardContainerClasses;\n}\n\nexport const HvWizardContainer = (props: HvWizardContainerProps) => {\n  const {\n    classes: classesProp,\n    className,\n    children,\n    handleClose,\n    open,\n    ...others\n  } = useDefaultProps(\"HvWizardContainer\", props);\n  const { classes } = useClasses(classesProp);\n\n  return (\n    <HvDialog\n      classes={{\n        closeButton: classes.closeButton,\n        paper: classes.paper,\n      }}\n      className={classes.root}\n      open={open}\n      onClose={handleClose}\n      maxWidth=\"lg\"\n      {...others}\n    >\n      {children}\n    </HvDialog>\n  );\n};\n"],"names":[],"mappings":";;;;AA6Ba,MAAA,oBAAoB,CAAC,UAAkC;AAC5D,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,qBAAqB,KAAK;AAC9C,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAGxC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS;AAAA,QACP,aAAa,QAAQ;AAAA,QACrB,OAAO,QAAQ;AAAA,MACjB;AAAA,MACA,WAAW,QAAQ;AAAA,MACnB;AAAA,MACA,SAAS;AAAA,MACT,UAAS;AAAA,MACR,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/esm/Wizard/WizardContainer/WizardContainer.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"WizardContainer.styles.js","sources":["../../../../src/Wizard/WizardContainer/WizardContainer.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvWizardContainer\",\n  {\n    root: {},\n    paper: {\n      width: \"80%\",\n      maxWidth: \"80%\",\n      maxHeight: \"calc(100% - (2 * 80px))\",\n    },\n    closeButton: {\n      display: \"none\",\n    },\n  }\n);\n"],"names":[],"mappings":";AAEa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM,CAAC;AAAA,IACP,OAAO;AAAA,MACL,OAAO;AAAA,MACP,UAAU;AAAA,MACV,WAAW;AAAA,IACb;AAAA,IACA,aAAa;AAAA,MACX,SAAS;AAAA,IACX;AAAA,EACF;AACF;"}
+{"version":3,"file":"WizardContainer.styles.js","sources":["../../../../src/Wizard/WizardContainer/WizardContainer.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvWizardContainer\",\n  {\n    root: {},\n    paper: {\n      width: \"80%\",\n      maxWidth: \"80%\",\n      maxHeight: \"calc(100% - (2 * 80px))\",\n    },\n    closeButton: {\n      display: \"none\",\n    },\n  },\n);\n"],"names":[],"mappings":";AAEa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM,CAAC;AAAA,IACP,OAAO;AAAA,MACL,OAAO;AAAA,MACP,UAAU;AAAA,MACV,WAAW;AAAA,IACb;AAAA,IACA,aAAa;AAAA,MACX,SAAS;AAAA,IACX;AAAA,EACF;AACF;"}

package/dist/esm/Wizard/WizardContent/WizardContent.js

@@ -1,10 +1,9 @@
 import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import React, { useContext, useRef, useState, useCallback, useEffect } from "react";
-import { HvDialogContent } from "@hitachivantara/uikit-react-core";
 import { useElementSize } from "usehooks-ts";
+import { HvLoadingContainer, HvDialogContent } from "@hitachivantara/uikit-react-core";
 import { useClasses } from "./WizardContent.styles.js";
 import { staticClasses } from "./WizardContent.styles.js";
-import { LoadingContainer } from "./LoadingContainer.js";
 import HvWizardContext from "../WizardContext/WizardContext.js";
 const DRAWER_PERCENTAGE = 0.3;
 const DRAWER_MIN_WIDTH = 280;
@@ -18,17 +17,14 @@ const HvWizardContent = ({
   const { classes, cx } = useClasses(classesProp);
   const { context, setContext, summary, tab } = useContext(HvWizardContext);
   const arrayChildren = React.Children.toArray(children);
-  const initialContext = arrayChildren.reduce(
-    (acc, child, index) => {
-      const invalid = "mustValidate" in child.props && child.props.mustValidate === true ? false : null;
-      const valid = invalid ?? (index === 0 || null);
-      return {
-        ...acc,
-        [index]: { ...child.props, form: {}, valid, touched: index === 0 }
-      };
-    },
-    {}
-  );
+  const initialContext = arrayChildren.reduce((acc, child, index) => {
+    const invalid = "mustValidate" in child.props && child.props.mustValidate === true ? false : null;
+    const valid = invalid ?? (index === 0 || null);
+    return {
+      ...acc,
+      [index]: { ...child.props, form: {}, valid, touched: index === 0 }
+    };
+  }, {});
   const summaryRef = useRef();
   const resizedRef = useRef({ height: 0, width: 0 });
   const [containerRef, sizes] = useElementSize();
@@ -104,23 +100,23 @@ const HvWizardContent = ({
             children: summaryContent
           }
         ) }),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(HvLoadingContainer, { hidden: !loading, children: /* @__PURE__ */ jsx(
           HvDialogContent,
           {
             className: cx(classes.contentContainer, {
               [classes.fixedHeight]: fixedHeight
             }),
             indentContent: true,
-            children: /* @__PURE__ */ jsx(LoadingContainer, { hidden: !loading, children: React.Children.map(arrayChildren, (child, index) => {
+            children: React.Children.map(arrayChildren, (child, index) => {
               if (index === tab) {
                 return React.cloneElement(child, {
                   tab
                 });
               }
               return null;
-            }) })
+            })
           }
-        )
+        ) })
       ]
     }
   );

package/dist/esm/Wizard/WizardContent/WizardContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"WizardContent.js","sources":["../../../../src/Wizard/WizardContent/WizardContent.tsx"],"sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport React, {\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvDialogContent,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { useElementSize } from \"usehooks-ts\";\n\nimport { HvWizardContext, HvWizardTabs } from \"../WizardContext\";\nimport { staticClasses, useClasses } from \"./WizardContent.styles\";\nimport { LoadingContainer } from \"./LoadingContainer\";\n\nexport { staticClasses as wizardContentClasses };\n\nexport type HvWizardContentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvWizardContentProps extends HvBaseProps {\n  /** Forces minimum height to the component. */\n  fixedHeight?: boolean;\n  /** Whether the loading animation is shown. */\n  loading?: boolean;\n  /** The content of the summary. */\n  summaryContent?: React.ReactNode;\n  /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n  classes?: HvWizardContentClasses;\n}\n\ntype ChildElement = React.ReactElement<HvWizardTabs>;\n\nconst DRAWER_PERCENTAGE = 0.3;\nconst DRAWER_MIN_WIDTH = 280;\n\nexport const HvWizardContent = ({\n  classes: classesProp,\n  fixedHeight = false,\n  loading = false,\n  children,\n  summaryContent,\n}: HvWizardContentProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const { context, setContext, summary, tab } = useContext(HvWizardContext);\n\n  const arrayChildren = React.Children.toArray(children) as ChildElement[];\n\n  const initialContext = arrayChildren.reduce(\n    (acc, child: ChildElement, index) => {\n      const invalid =\n        \"mustValidate\" in child.props && child.props.mustValidate === true\n          ? false\n          : null;\n      const valid = invalid ?? (index === 0 || null);\n      return {\n        ...acc,\n        [index]: { ...child.props, form: {}, valid, touched: index === 0 },\n      };\n    },\n    {}\n  );\n\n  const summaryRef = useRef<HTMLElement>();\n  const resizedRef = useRef({ height: 0, width: 0 });\n  const [containerRef, sizes] = useElementSize();\n\n  const [summaryHeight, setSummaryHeight] = useState(0);\n  const [summaryWidth, setSummaryWidth] = useState(0);\n  const [summaryLeft, setSummaryLeft] = useState(0);\n\n  const updateSummaryMeasures = useCallback((newSizes) => {\n    const modalWidth = newSizes.width;\n    const drawerWidth = modalWidth * DRAWER_PERCENTAGE;\n    setSummaryHeight(newSizes.height);\n    setSummaryWidth(Math.max(drawerWidth, DRAWER_MIN_WIDTH));\n    setSummaryLeft(modalWidth - Math.max(drawerWidth, DRAWER_MIN_WIDTH));\n\n    resizedRef.current = {\n      height: newSizes.height,\n      width: newSizes.width,\n    };\n  }, []);\n\n  useEffect(() => {\n    const pageHeight = summaryRef.current?.getBoundingClientRect?.()?.height;\n    if (\n      (summary && sizes.height !== resizedRef.current.height) ||\n      sizes.width !== resizedRef.current.width\n    ) {\n      updateSummaryMeasures(sizes);\n    }\n\n    if (pageHeight && sizes.height !== pageHeight) {\n      updateSummaryMeasures({\n        width: sizes.width,\n        height: pageHeight,\n      });\n    }\n  }, [tab, sizes, summary, updateSummaryMeasures]);\n\n  useEffect(() => {\n    setContext(initialContext);\n  }, []);\n\n  useEffect(() => {\n    if (tab && !context[tab]?.touched) {\n      const updatedContext = Object.entries(context).reduce(\n        (acc, [key, childState]) => ({\n          ...acc,\n          ...(+key <= tab\n            ? {\n                [key]: {\n                  ...childState,\n                  touched: true,\n                  valid: childState?.valid ?? true,\n                },\n              }\n            : { [key]: childState }),\n        }),\n        {}\n      );\n\n      setContext(updatedContext);\n    }\n  }, [tab, context, setContext]);\n\n  const translateX = summaryWidth ? summaryWidth + 10 : 450;\n\n  return (\n    <div\n      className={classes.summaryRef}\n      ref={(el) => {\n        containerRef(el);\n        if (el) {\n          summaryRef.current = el;\n        }\n      }}\n    >\n      {summary !== null && (\n        <div className={classes.summarySticky}>\n          <div\n            className={classes.summaryContainer}\n            style={{\n              left: summaryLeft,\n              width: summaryWidth,\n              height: summaryHeight,\n              transform: `translate(${summary ? 0 : translateX}px, 0)`,\n            }}\n          >\n            {summaryContent}\n          </div>\n        </div>\n      )}\n      <HvDialogContent\n        className={cx(classes.contentContainer, {\n          [classes.fixedHeight]: fixedHeight,\n        })}\n        indentContent\n      >\n        <LoadingContainer hidden={!loading}>\n          {React.Children.map(arrayChildren, (child, index) => {\n            if (index === tab) {\n              return React.cloneElement(child as React.ReactElement, {\n                tab,\n              });\n            }\n            return null;\n          })}\n        </LoadingContainer>\n      </HvDialogContent>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"WizardContent.js","sources":["../../../../src/Wizard/WizardContent/WizardContent.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { useElementSize } from \"usehooks-ts\";\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvDialogContent,\n  HvLoadingContainer,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { HvWizardContext, HvWizardTabs } from \"../WizardContext\";\nimport { staticClasses, useClasses } from \"./WizardContent.styles\";\n\nexport { staticClasses as wizardContentClasses };\n\nexport type HvWizardContentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvWizardContentProps extends HvBaseProps {\n  /** Forces minimum height to the component. */\n  fixedHeight?: boolean;\n  /** Whether the loading animation is shown. */\n  loading?: boolean;\n  /** The content of the summary. */\n  summaryContent?: React.ReactNode;\n  /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n  classes?: HvWizardContentClasses;\n}\n\ntype ChildElement = React.ReactElement<HvWizardTabs>;\n\nconst DRAWER_PERCENTAGE = 0.3;\nconst DRAWER_MIN_WIDTH = 280;\n\nexport const HvWizardContent = ({\n  classes: classesProp,\n  fixedHeight = false,\n  loading = false,\n  children,\n  summaryContent,\n}: HvWizardContentProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const { context, setContext, summary, tab } = useContext(HvWizardContext);\n\n  const arrayChildren = React.Children.toArray(children) as ChildElement[];\n\n  const initialContext = arrayChildren.reduce((acc, child, index) => {\n    const invalid =\n      \"mustValidate\" in child.props && child.props.mustValidate === true\n        ? false\n        : null;\n    const valid = invalid ?? (index === 0 || null);\n    return {\n      ...acc,\n      [index]: { ...child.props, form: {}, valid, touched: index === 0 },\n    };\n  }, {});\n\n  const summaryRef = useRef<HTMLElement>();\n  const resizedRef = useRef({ height: 0, width: 0 });\n  const [containerRef, sizes] = useElementSize();\n\n  const [summaryHeight, setSummaryHeight] = useState(0);\n  const [summaryWidth, setSummaryWidth] = useState(0);\n  const [summaryLeft, setSummaryLeft] = useState(0);\n\n  const updateSummaryMeasures = useCallback((newSizes) => {\n    const modalWidth = newSizes.width;\n    const drawerWidth = modalWidth * DRAWER_PERCENTAGE;\n    setSummaryHeight(newSizes.height);\n    setSummaryWidth(Math.max(drawerWidth, DRAWER_MIN_WIDTH));\n    setSummaryLeft(modalWidth - Math.max(drawerWidth, DRAWER_MIN_WIDTH));\n\n    resizedRef.current = {\n      height: newSizes.height,\n      width: newSizes.width,\n    };\n  }, []);\n\n  useEffect(() => {\n    const pageHeight = summaryRef.current?.getBoundingClientRect?.()?.height;\n    if (\n      (summary && sizes.height !== resizedRef.current.height) ||\n      sizes.width !== resizedRef.current.width\n    ) {\n      updateSummaryMeasures(sizes);\n    }\n\n    if (pageHeight && sizes.height !== pageHeight) {\n      updateSummaryMeasures({\n        width: sizes.width,\n        height: pageHeight,\n      });\n    }\n  }, [tab, sizes, summary, updateSummaryMeasures]);\n\n  useEffect(() => {\n    setContext(initialContext);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    if (tab && !context[tab]?.touched) {\n      const updatedContext = Object.entries(context).reduce(\n        (acc, [key, childState]) => ({\n          ...acc,\n          ...(+key <= tab\n            ? {\n                [key]: {\n                  ...childState,\n                  touched: true,\n                  valid: childState?.valid ?? true,\n                },\n              }\n            : { [key]: childState }),\n        }),\n        {},\n      );\n\n      setContext(updatedContext);\n    }\n  }, [tab, context, setContext]);\n\n  const translateX = summaryWidth ? summaryWidth + 10 : 450;\n\n  return (\n    <div\n      className={classes.summaryRef}\n      ref={(el) => {\n        containerRef(el);\n        if (el) {\n          summaryRef.current = el;\n        }\n      }}\n    >\n      {summary !== null && (\n        <div className={classes.summarySticky}>\n          <div\n            className={classes.summaryContainer}\n            style={{\n              left: summaryLeft,\n              width: summaryWidth,\n              height: summaryHeight,\n              transform: `translate(${summary ? 0 : translateX}px, 0)`,\n            }}\n          >\n            {summaryContent}\n          </div>\n        </div>\n      )}\n      <HvLoadingContainer hidden={!loading}>\n        <HvDialogContent\n          className={cx(classes.contentContainer, {\n            [classes.fixedHeight]: fixedHeight,\n          })}\n          indentContent\n        >\n          {React.Children.map(arrayChildren, (child, index) => {\n            if (index === tab) {\n              return React.cloneElement(child as React.ReactElement, {\n                tab,\n              });\n            }\n            return null;\n          })}\n        </HvDialogContent>\n      </HvLoadingContainer>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/Wizard/WizardContent/WizardContent.styles.js

@@ -1,5 +1,5 @@
-import { theme } from "@hitachivantara/uikit-styles";
 import { createClasses } from "@hitachivantara/uikit-react-core";
+import { theme } from "@hitachivantara/uikit-styles";
 const { staticClasses, useClasses } = createClasses("HvWizardContent", {
   contentContainer: {
     position: "relative",

package/dist/esm/Wizard/WizardContent/WizardContent.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"WizardContent.styles.js","sources":["../../../../src/Wizard/WizardContent/WizardContent.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { createClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvWizardContent\", {\n  contentContainer: {\n    position: \"relative\",\n    padding: 20,\n    marginLeft: 0,\n    minHeight: 400,\n    overflowX: \"hidden\",\n  },\n  fixedHeight: {\n    minHeight: \"calc(100vh - 387px)\",\n  },\n  summaryRef: {\n    flex: 1,\n    overflowY: \"auto\",\n    overflowX: \"hidden\",\n  },\n  summarySticky: {\n    position: \"sticky\",\n    top: 0,\n    zIndex: 1,\n  },\n  summaryContainer: {\n    position: \"absolute\",\n    top: 0,\n    minWidth: 280,\n    boxShadow: theme.colors.shadow,\n    backgroundColor: theme.colors.atmo1,\n    transition: \"transform 0.3s\",\n    transitionTimingFunction: \"ease-in-out\",\n    overflowY: \"scroll\",\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,mBAAmB;AAAA,EAC5E,kBAAkB;AAAA,IAChB,UAAU;AAAA,IACV,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,WAAW;AAAA,EACb;AAAA,EACA,aAAa;AAAA,IACX,WAAW;AAAA,EACb;AAAA,EACA,YAAY;AAAA,IACV,MAAM;AAAA,IACN,WAAW;AAAA,IACX,WAAW;AAAA,EACb;AAAA,EACA,eAAe;AAAA,IACb,UAAU;AAAA,IACV,KAAK;AAAA,IACL,QAAQ;AAAA,EACV;AAAA,EACA,kBAAkB;AAAA,IAChB,UAAU;AAAA,IACV,KAAK;AAAA,IACL,UAAU;AAAA,IACV,WAAW,MAAM,OAAO;AAAA,IACxB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,YAAY;AAAA,IACZ,0BAA0B;AAAA,IAC1B,WAAW;AAAA,EACb;AACF,CAAC;"}
+{"version":3,"file":"WizardContent.styles.js","sources":["../../../../src/Wizard/WizardContent/WizardContent.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-core\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvWizardContent\", {\n  contentContainer: {\n    position: \"relative\",\n    padding: 20,\n    marginLeft: 0,\n    minHeight: 400,\n    overflowX: \"hidden\",\n  },\n  fixedHeight: {\n    minHeight: \"calc(100vh - 387px)\",\n  },\n  summaryRef: {\n    flex: 1,\n    overflowY: \"auto\",\n    overflowX: \"hidden\",\n  },\n  summarySticky: {\n    position: \"sticky\",\n    top: 0,\n    zIndex: 1,\n  },\n  summaryContainer: {\n    position: \"absolute\",\n    top: 0,\n    minWidth: 280,\n    boxShadow: theme.colors.shadow,\n    backgroundColor: theme.colors.atmo1,\n    transition: \"transform 0.3s\",\n    transitionTimingFunction: \"ease-in-out\",\n    overflowY: \"scroll\",\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,mBAAmB;AAAA,EAC5E,kBAAkB;AAAA,IAChB,UAAU;AAAA,IACV,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,WAAW;AAAA,EACb;AAAA,EACA,aAAa;AAAA,IACX,WAAW;AAAA,EACb;AAAA,EACA,YAAY;AAAA,IACV,MAAM;AAAA,IACN,WAAW;AAAA,IACX,WAAW;AAAA,EACb;AAAA,EACA,eAAe;AAAA,IACb,UAAU;AAAA,IACV,KAAK;AAAA,IACL,QAAQ;AAAA,EACV;AAAA,EACA,kBAAkB;AAAA,IAChB,UAAU;AAAA,IACV,KAAK;AAAA,IACL,UAAU;AAAA,IACV,WAAW,MAAM,OAAO;AAAA,IACxB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,YAAY;AAAA,IACZ,0BAA0B;AAAA,IAC1B,WAAW;AAAA,EACb;AACF,CAAC;"}

package/dist/esm/Wizard/WizardTitle/WizardTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"WizardTitle.js","sources":["../../../../src/Wizard/WizardTitle/WizardTitle.tsx"],"sourcesContent":["import { useContext, useEffect, useState } from \"react\";\n\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvButton,\n  HvDialogTitle,\n  HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Report } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvStepNavigation, HvStepNavigationProps } from \"../../StepNavigation\";\nimport { HvStepProps } from \"../../StepNavigation/DefaultNavigation\";\nimport { HvWizardContext } from \"../WizardContext\";\nimport { staticClasses, useClasses } from \"./WizardTitle.styles\";\n\nexport { staticClasses as wizardTitleClasses };\n\nexport type HvWizardTitleClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvWizardTitleProps extends HvBaseProps {\n  /** Title for the wizard. */\n  title?: string;\n  /** Shows the summary button. */\n  hasSummary?: boolean;\n  /** An object containing all the labels for the wizard header. */\n  labels?: {\n    /** Summary button label. */\n    summary?: string;\n  };\n  /** Custom object to define type, size and width of the StepNavigation component */\n  customStep?: Pick<HvStepNavigationProps, \"type\" | \"stepSize\" | \"width\">;\n  /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n  classes?: HvWizardTitleClasses;\n}\n\nconst switchTabState = (state, currentTab, index) => {\n  if (state.loading) return \"Pending\";\n  if (index === currentTab) return \"Current\";\n  if (state.valid) return \"Completed\";\n  if (state.disabled) return \"Disabled\";\n  if (state.valid === null) return \"Enabled\";\n  if (state.touched && state.valid === false) return \"Failed\";\n  return \"Enabled\";\n};\n\nexport const HvWizardTitle = ({\n  title,\n  hasSummary = false,\n  labels = {},\n  classes: classesProp,\n  customStep = {},\n}: HvWizardTitleProps) => {\n  const { context, setSummary, tab, setTab } = useContext(HvWizardContext);\n\n  const { classes } = useClasses(classesProp);\n\n  const [steps, setSteps] = useState<HvStepProps[]>([]);\n\n  useEffect(() => {\n    return () => {\n      setSummary(false);\n    };\n  }, [setSummary]);\n\n  const toggleSummary = () => {\n    setSummary((prevValue) => !prevValue);\n  };\n\n  useEffect(() => {\n    const contextArray = Object.entries(context);\n\n    if (contextArray.length) {\n      const updatedSteps: HvStepProps[] = contextArray.map(\n        ([, childState], index) => {\n          return {\n            title: childState?.name ?? `${index + 1}`,\n            state: switchTabState(childState, tab, index),\n            onClick: () => setTab(index),\n          };\n        }\n      );\n\n      setSteps(updatedSteps);\n    }\n  }, [context, tab, setTab]);\n\n  return (\n    <HvDialogTitle\n      className={classes.headerContainer}\n      classes={{\n        messageContainer: classes.messageContainer,\n      }}\n    >\n      <div className={classes.titleContainer}>\n        {title && (\n          <HvTypography variant=\"title3\" component=\"h3\">\n            {title}\n          </HvTypography>\n        )}\n        {!!steps.length && (\n          <HvStepNavigation\n            className={classes.stepContainer}\n            steps={steps}\n            type=\"Default\"\n            stepSize=\"xs\"\n            width={{\n              xs: 200,\n              sm: 350,\n              md: 600,\n              lg: 800,\n              xl: 1000,\n            }}\n            {...customStep}\n          />\n        )}\n        {hasSummary && (\n          <HvButton\n            variant=\"secondarySubtle\"\n            className={classes.buttonWidth}\n            classes={{\n              root: classes.rootSummaryButton,\n            }}\n            onClick={toggleSummary}\n            startIcon={<Report />}\n          >\n            {`${labels.summary ?? \"Summary\"}`}\n          </HvButton>\n        )}\n      </div>\n    </HvDialogTitle>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAoCA,MAAM,iBAAiB,CAAC,OAAO,YAAY,UAAU;AACnD,MAAI,MAAM;AAAgB,WAAA;AAC1B,MAAI,UAAU;AAAmB,WAAA;AACjC,MAAI,MAAM;AAAc,WAAA;AACxB,MAAI,MAAM;AAAiB,WAAA;AAC3B,MAAI,MAAM,UAAU;AAAa,WAAA;AAC7B,MAAA,MAAM,WAAW,MAAM,UAAU;AAAc,WAAA;AAC5C,SAAA;AACT;AAEO,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA,aAAa;AAAA,EACb,SAAS,CAAC;AAAA,EACV,SAAS;AAAA,EACT,aAAa,CAAC;AAChB,MAA0B;AACxB,QAAM,EAAE,SAAS,YAAY,KAAK,WAAW,WAAW,eAAe;AAEvE,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAE1C,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAwB,CAAE,CAAA;AAEpD,YAAU,MAAM;AACd,WAAO,MAAM;AACX,iBAAW,KAAK;AAAA,IAAA;AAAA,EAClB,GACC,CAAC,UAAU,CAAC;AAEf,QAAM,gBAAgB,MAAM;AACf,eAAA,CAAC,cAAc,CAAC,SAAS;AAAA,EAAA;AAGtC,YAAU,MAAM;AACR,UAAA,eAAe,OAAO,QAAQ,OAAO;AAE3C,QAAI,aAAa,QAAQ;AACvB,YAAM,eAA8B,aAAa;AAAA,QAC/C,CAAC,CAAG,EAAA,UAAU,GAAG,UAAU;AAClB,iBAAA;AAAA,YACL,OAAO,YAAY,QAAQ,GAAG,QAAQ,CAAC;AAAA,YACvC,OAAO,eAAe,YAAY,KAAK,KAAK;AAAA,YAC5C,SAAS,MAAM,OAAO,KAAK;AAAA,UAAA;AAAA,QAE/B;AAAA,MAAA;AAGF,eAAS,YAAY;AAAA,IACvB;AAAA,EACC,GAAA,CAAC,SAAS,KAAK,MAAM,CAAC;AAGvB,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,QAAQ;AAAA,MACnB,SAAS;AAAA,QACP,kBAAkB,QAAQ;AAAA,MAC5B;AAAA,MAEA,UAAC,qBAAA,OAAA,EAAI,WAAW,QAAQ,gBACrB,UAAA;AAAA,QAAA,6BACE,cAAa,EAAA,SAAQ,UAAS,WAAU,MACtC,UACH,OAAA;AAAA,QAED,CAAC,CAAC,MAAM,UACP;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,QAAQ;AAAA,YACnB;AAAA,YACA,MAAK;AAAA,YACL,UAAS;AAAA,YACT,OAAO;AAAA,cACL,IAAI;AAAA,cACJ,IAAI;AAAA,cACJ,IAAI;AAAA,cACJ,IAAI;AAAA,cACJ,IAAI;AAAA,YACN;AAAA,YACC,GAAG;AAAA,UAAA;AAAA,QACN;AAAA,QAED,cACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,WAAW,QAAQ;AAAA,YACnB,SAAS;AAAA,cACP,MAAM,QAAQ;AAAA,YAChB;AAAA,YACA,SAAS;AAAA,YACT,+BAAY,QAAO,EAAA;AAAA,YAElB,UAAA,GAAG,OAAO,WAAW,SAAS;AAAA,UAAA;AAAA,QACjC;AAAA,MAAA,GAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"WizardTitle.js","sources":["../../../../src/Wizard/WizardTitle/WizardTitle.tsx"],"sourcesContent":["import { useContext, useEffect, useState } from \"react\";\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvButton,\n  HvDialogTitle,\n  HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Report } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvStepNavigation, HvStepNavigationProps } from \"../../StepNavigation\";\nimport { HvStepProps } from \"../../StepNavigation/DefaultNavigation\";\nimport { HvWizardContext } from \"../WizardContext\";\nimport { staticClasses, useClasses } from \"./WizardTitle.styles\";\n\nexport { staticClasses as wizardTitleClasses };\n\nexport type HvWizardTitleClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvWizardTitleProps extends HvBaseProps {\n  /** Title for the wizard. */\n  title?: string;\n  /** Shows the summary button. */\n  hasSummary?: boolean;\n  /** An object containing all the labels for the wizard header. */\n  labels?: {\n    /** Summary button label. */\n    summary?: string;\n  };\n  /** Custom object to define type, size and width of the StepNavigation component */\n  customStep?: Pick<HvStepNavigationProps, \"type\" | \"stepSize\" | \"width\">;\n  /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n  classes?: HvWizardTitleClasses;\n}\n\nconst switchTabState = (state, currentTab, index) => {\n  if (state.loading) return \"Pending\";\n  if (index === currentTab) return \"Current\";\n  if (state.valid) return \"Completed\";\n  if (state.disabled) return \"Disabled\";\n  if (state.valid === null) return \"Enabled\";\n  if (state.touched && state.valid === false) return \"Failed\";\n  return \"Enabled\";\n};\n\nexport const HvWizardTitle = ({\n  title,\n  hasSummary = false,\n  labels = {},\n  classes: classesProp,\n  customStep = {},\n}: HvWizardTitleProps) => {\n  const { context, setSummary, tab, setTab } = useContext(HvWizardContext);\n\n  const { classes } = useClasses(classesProp);\n\n  const [steps, setSteps] = useState<HvStepProps[]>([]);\n\n  useEffect(() => {\n    return () => {\n      setSummary(false);\n    };\n  }, [setSummary]);\n\n  const toggleSummary = () => {\n    setSummary((prevValue) => !prevValue);\n  };\n\n  useEffect(() => {\n    const contextArray = Object.entries(context);\n\n    if (contextArray.length) {\n      const updatedSteps: HvStepProps[] = contextArray.map(\n        ([, childState], index) => {\n          return {\n            title: childState?.name ?? `${index + 1}`,\n            state: switchTabState(childState, tab, index),\n            onClick: () => setTab(index),\n          };\n        },\n      );\n\n      setSteps(updatedSteps);\n    }\n  }, [context, tab, setTab]);\n\n  return (\n    <HvDialogTitle\n      className={classes.headerContainer}\n      classes={{\n        messageContainer: classes.messageContainer,\n      }}\n    >\n      <div className={classes.titleContainer}>\n        {title && (\n          <HvTypography variant=\"title3\" component=\"h3\">\n            {title}\n          </HvTypography>\n        )}\n        {!!steps.length && (\n          <HvStepNavigation\n            className={classes.stepContainer}\n            steps={steps}\n            type=\"Default\"\n            stepSize=\"xs\"\n            width={{\n              xs: 200,\n              sm: 350,\n              md: 600,\n              lg: 800,\n              xl: 1000,\n            }}\n            {...customStep}\n          />\n        )}\n        {hasSummary && (\n          <HvButton\n            variant=\"secondarySubtle\"\n            className={classes.buttonWidth}\n            classes={{\n              root: classes.rootSummaryButton,\n            }}\n            onClick={toggleSummary}\n            startIcon={<Report />}\n          >\n            {`${labels.summary ?? \"Summary\"}`}\n          </HvButton>\n        )}\n      </div>\n    </HvDialogTitle>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAmCA,MAAM,iBAAiB,CAAC,OAAO,YAAY,UAAU;AACnD,MAAI,MAAM;AAAgB,WAAA;AAC1B,MAAI,UAAU;AAAmB,WAAA;AACjC,MAAI,MAAM;AAAc,WAAA;AACxB,MAAI,MAAM;AAAiB,WAAA;AAC3B,MAAI,MAAM,UAAU;AAAa,WAAA;AAC7B,MAAA,MAAM,WAAW,MAAM,UAAU;AAAc,WAAA;AAC5C,SAAA;AACT;AAEO,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA,aAAa;AAAA,EACb,SAAS,CAAC;AAAA,EACV,SAAS;AAAA,EACT,aAAa,CAAC;AAChB,MAA0B;AACxB,QAAM,EAAE,SAAS,YAAY,KAAK,WAAW,WAAW,eAAe;AAEvE,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAE1C,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAwB,CAAE,CAAA;AAEpD,YAAU,MAAM;AACd,WAAO,MAAM;AACX,iBAAW,KAAK;AAAA,IAAA;AAAA,EAClB,GACC,CAAC,UAAU,CAAC;AAEf,QAAM,gBAAgB,MAAM;AACf,eAAA,CAAC,cAAc,CAAC,SAAS;AAAA,EAAA;AAGtC,YAAU,MAAM;AACR,UAAA,eAAe,OAAO,QAAQ,OAAO;AAE3C,QAAI,aAAa,QAAQ;AACvB,YAAM,eAA8B,aAAa;AAAA,QAC/C,CAAC,CAAG,EAAA,UAAU,GAAG,UAAU;AAClB,iBAAA;AAAA,YACL,OAAO,YAAY,QAAQ,GAAG,QAAQ,CAAC;AAAA,YACvC,OAAO,eAAe,YAAY,KAAK,KAAK;AAAA,YAC5C,SAAS,MAAM,OAAO,KAAK;AAAA,UAAA;AAAA,QAE/B;AAAA,MAAA;AAGF,eAAS,YAAY;AAAA,IACvB;AAAA,EACC,GAAA,CAAC,SAAS,KAAK,MAAM,CAAC;AAGvB,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,QAAQ;AAAA,MACnB,SAAS;AAAA,QACP,kBAAkB,QAAQ;AAAA,MAC5B;AAAA,MAEA,UAAC,qBAAA,OAAA,EAAI,WAAW,QAAQ,gBACrB,UAAA;AAAA,QAAA,6BACE,cAAa,EAAA,SAAQ,UAAS,WAAU,MACtC,UACH,OAAA;AAAA,QAED,CAAC,CAAC,MAAM,UACP;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,QAAQ;AAAA,YACnB;AAAA,YACA,MAAK;AAAA,YACL,UAAS;AAAA,YACT,OAAO;AAAA,cACL,IAAI;AAAA,cACJ,IAAI;AAAA,cACJ,IAAI;AAAA,cACJ,IAAI;AAAA,cACJ,IAAI;AAAA,YACN;AAAA,YACC,GAAG;AAAA,UAAA;AAAA,QACN;AAAA,QAED,cACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,WAAW,QAAQ;AAAA,YACnB,SAAS;AAAA,cACP,MAAM,QAAQ;AAAA,YAChB;AAAA,YACA,SAAS;AAAA,YACT,+BAAY,QAAO,EAAA;AAAA,YAElB,UAAA,GAAG,OAAO,WAAW,SAAS;AAAA,UAAA;AAAA,QACjC;AAAA,MAAA,GAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/esm/Wizard/WizardTitle/WizardTitle.styles.js

@@ -1,5 +1,5 @@
-import { theme } from "@hitachivantara/uikit-styles";
 import { createClasses } from "@hitachivantara/uikit-react-core";
+import { theme } from "@hitachivantara/uikit-styles";
 const { staticClasses, useClasses } = createClasses("HvWizardTitle", {
   messageContainer: {
     "& > div": {

package/dist/esm/Wizard/WizardTitle/WizardTitle.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"WizardTitle.styles.js","sources":["../../../../src/Wizard/WizardTitle/WizardTitle.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { createClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvWizardTitle\", {\n  messageContainer: {\n    \"& > div\": {\n      width: \"100%\",\n    },\n  },\n  titleContainer: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n    gap: theme.spacing(1),\n    width: \"100%\",\n  },\n  buttonWidth: {\n    width: 120,\n  },\n  rootSummaryButton: {\n    paddingRight: 18,\n  },\n  headerContainer: {\n    backgroundColor: theme.colors.atmo2,\n    \"& h6\": {\n      fontSize: \"16px\",\n      fontWeight: \"bold\",\n      letterSpacing: 0,\n    },\n  },\n  stepContainer: {\n    margin: \"auto\",\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,kBAAkB;AAAA,IAChB,WAAW;AAAA,MACT,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA,gBAAgB;AAAA,IACd,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,KAAK,MAAM,QAAQ,CAAC;AAAA,IACpB,OAAO;AAAA,EACT;AAAA,EACA,aAAa;AAAA,IACX,OAAO;AAAA,EACT;AAAA,EACA,mBAAmB;AAAA,IACjB,cAAc;AAAA,EAChB;AAAA,EACA,iBAAiB;AAAA,IACf,iBAAiB,MAAM,OAAO;AAAA,IAC9B,QAAQ;AAAA,MACN,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,eAAe;AAAA,IACjB;AAAA,EACF;AAAA,EACA,eAAe;AAAA,IACb,QAAQ;AAAA,EACV;AACF,CAAC;"}
+{"version":3,"file":"WizardTitle.styles.js","sources":["../../../../src/Wizard/WizardTitle/WizardTitle.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-core\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvWizardTitle\", {\n  messageContainer: {\n    \"& > div\": {\n      width: \"100%\",\n    },\n  },\n  titleContainer: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n    gap: theme.spacing(1),\n    width: \"100%\",\n  },\n  buttonWidth: {\n    width: 120,\n  },\n  rootSummaryButton: {\n    paddingRight: 18,\n  },\n  headerContainer: {\n    backgroundColor: theme.colors.atmo2,\n    \"& h6\": {\n      fontSize: \"16px\",\n      fontWeight: \"bold\",\n      letterSpacing: 0,\n    },\n  },\n  stepContainer: {\n    margin: \"auto\",\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,kBAAkB;AAAA,IAChB,WAAW;AAAA,MACT,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA,gBAAgB;AAAA,IACd,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,KAAK,MAAM,QAAQ,CAAC;AAAA,IACpB,OAAO;AAAA,EACT;AAAA,EACA,aAAa;AAAA,IACX,OAAO;AAAA,EACT;AAAA,EACA,mBAAmB;AAAA,IACjB,cAAc;AAAA,EAChB;AAAA,EACA,iBAAiB;AAAA,IACf,iBAAiB,MAAM,OAAO;AAAA,IAC9B,QAAQ;AAAA,MACN,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,eAAe;AAAA,IACjB;AAAA,EACF;AAAA,EACA,eAAe;AAAA,IACb,QAAQ;AAAA,EACV;AACF,CAAC;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-lab",
-  "version": "5.31.2",
+  "version": "5.32.1",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Contributed React components for the NEXT UI Kit.",
@@ -32,9 +32,9 @@
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/modifiers": "^6.0.1",
     "@emotion/css": "^11.11.0",
-    "@hitachivantara/uikit-react-core": "^5.60.0",
-    "@hitachivantara/uikit-react-icons": "^5.9.3",
-    "@hitachivantara/uikit-styles": "^5.25.0",
+    "@hitachivantara/uikit-react-core": "^5.62.0",
+    "@hitachivantara/uikit-react-icons": "^5.9.5",
+    "@hitachivantara/uikit-styles": "^5.27.0",
     "@types/react-grid-layout": "^1.3.5",
     "react-grid-layout": "^1.4.4",
     "reactflow": "^11.10.1",
@@ -49,7 +49,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "68cdbb3a465690f8823074ba7390d9b721a42dd6",
+  "gitHead": "8bfae6c7b141d67c5aff36de5d8eb05e426a9837",
   "main": "dist/cjs/index.cjs",
   "exports": {
     ".": {