@hitachivantara/uikit-react-lab 5.5.1 → 5.5.3

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

@@ -1 +1 @@
-{"version":3,"file":"StepNavigation.cjs","sources":["../../../../src/components/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":["HvStepNavigation","className","classes","classesProp","width","steps","stepSize","showTitles","type","ariaLabel","others","css","cx","useClasses","activeTheme","useTheme","breakpoint","useWidth","stepSizeKey","includes","hasTitles","styledLi","containerSize","_styled","process","env","NODE_ENV","target","label","height","styledDiv","styledSeparatorElement","title","separatorClassName","separatorHeight","separatorWidth","backgroundColor","widthValue","Number","stepNavigation","separatorMargin","replace","margin","theme","separator","children","drawItems","separatorValues","minWidth","maxWidth","getColor","stepValues","minSize","maxSize","StepComponent","items","reduce","acc","state","props","index","StepContainer","Step","Math","max","stepProps","size","number","stepElement","li","_jsx","HvTooltip","placement","HvTypography","length","separatorElement","ol","getDynamicValues","stepsWidth","themeBreakpoints","breakpoints","values","TITLE_WIDTH","TITLE_MARGIN","SEPARATOR_WIDTH","next","Object","keys","find","_","self","navWidth","min","titleWidth","ceil","getTitles","getTitleProps","titles","map","rawTitle","titleClassName","variant","titleDisabled","textAlign","marginRight","disabled","StepNavigation","Default","HvDefaultNavigation","Simple","HvSimpleNavigation","numSteps","root","itemsProps","HvBox","component","style"],"mappings":"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"}
+{"version":3,"file":"StepNavigation.cjs","sources":["../../../../src/components/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":["HvStepNavigation","className","classes","classesProp","width","steps","stepSize","showTitles","type","ariaLabel","others","css","cx","useClasses","activeTheme","useTheme","breakpoint","useWidth","stepSizeKey","includes","hasTitles","styledLi","containerSize","_styled","process","env","NODE_ENV","target","label","height","styledDiv","styledSeparatorElement","title","separatorClassName","separatorHeight","separatorWidth","backgroundColor","widthValue","Number","stepNavigation","separatorMargin","replace","margin","theme","separator","jsx","drawItems","separatorValues","minWidth","maxWidth","getColor","stepValues","minSize","maxSize","StepComponent","items","reduce","acc","state","props","index","StepContainer","Step","Math","max","stepProps","size","number","stepElement","li","HvTooltip","HvTypography","length","separatorElement","ol","getDynamicValues","stepsWidth","themeBreakpoints","breakpoints","values","TITLE_WIDTH","TITLE_MARGIN","SEPARATOR_WIDTH","next","Object","keys","find","_","self","navWidth","min","titleWidth","ceil","getTitles","getTitleProps","titles","map","rawTitle","titleClassName","variant","titleDisabled","textAlign","marginRight","StepNavigation","Default","HvDefaultNavigation","Simple","HvSimpleNavigation","root","itemsProps","HvBox"],"mappings":"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"}

package/dist/cjs/components/Wizard/Wizard.cjs

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
 const Wizard_styles = require("./Wizard.styles.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const WizardContext = require("./WizardContext/WizardContext.cjs");
 const WizardContainer = require("./WizardContainer/WizardContainer.cjs");
 const WizardTitle = require("./WizardTitle/WizardTitle.cjs");
@@ -65,35 +65,13 @@ const HvWizard = ({
     tab,
     setTab
   }), [context, setContext, summary, setSummary, tab, setTab]);
-  return /* @__PURE__ */ jsxRuntime.jsx(WizardContext.default.Provider, {
-    value,
-    children: /* @__PURE__ */ jsxRuntime.jsxs(WizardContainer.HvWizardContainer, {
-      className,
-      classes: {
-        root: classes.root
-      },
-      handleClose,
-      open,
-      ...others,
-      children: [/* @__PURE__ */ jsxRuntime.jsx(WizardTitle.HvWizardTitle, {
-        title,
-        hasSummary,
-        labels,
-        customStep
-      }), /* @__PURE__ */ jsxRuntime.jsx(WizardContent.HvWizardContent, {
-        loading,
-        fixedHeight,
-        summaryContent,
-        children
-      }), /* @__PURE__ */ jsxRuntime.jsx(WizardActions.HvWizardActions, {
-        loading,
-        skippable,
-        labels,
-        handleClose,
-        handleSubmit
-      })]
-    })
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(WizardContext.default.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsxs(WizardContainer.HvWizardContainer, { className, classes: {
+    root: classes.root
+  }, handleClose, open, ...others, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(WizardTitle.HvWizardTitle, { title, hasSummary, labels, customStep }),
+    /* @__PURE__ */ jsxRuntime.jsx(WizardContent.HvWizardContent, { loading, fixedHeight, summaryContent, children }),
+    /* @__PURE__ */ jsxRuntime.jsx(WizardActions.HvWizardActions, { loading, skippable, labels, handleClose, handleSubmit })
+  ] }) });
 };
 exports.wizardClasses = Wizard_styles.staticClasses;
 exports.HvWizard = HvWizard;

package/dist/cjs/components/Wizard/Wizard.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Wizard.cjs","sources":["../../../../src/components/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\";\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":["HvWizard","className","children","onClose","handleSubmit","title","open","skippable","loading","hasSummary","summaryContent","labels","cancel","next","previous","skip","submit","summary","fixedHeight","customStep","classes","classesProp","others","useClasses","context","setContext","useState","setSummary","tab","setTab","handleClose","useCallback","evt","reason","useEffect","c","Object","entries","reduce","acc","key","child","touched","value","useMemo","_jsx","HvWizardContext","Provider","HvWizardContainer","root","HvWizardTitle","HvWizardContent","HvWizardActions"],"mappings":";;;;;;;;;;AAoDO,MAAMA,WAAWA,CAAC;AAAA,EACvBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,YAAY;AAAA,EACZC,UAAU;AAAA,EACVC,aAAa;AAAA,EACbC;AAAAA,EACAC,SAAS;AAAA,IACPC,QAAQ;AAAA,IACRC,MAAM;AAAA,IACNC,UAAU;AAAA,IACVC,MAAM;AAAA,IACNC,QAAQ;AAAA,IACRC,SAAS;AAAA,EACX;AAAA,EACAC,cAAc;AAAA,EACdC;AAAAA,EACAC,SAASC;AAAAA,EACT,GAAGC;AACU,MAAM;AACb,QAAA;AAAA,IAAEF;AAAAA,EAAAA,IAAYG,cAAAA,WAAWF,WAAW;AAE1C,QAAM,CAACG,SAASC,UAAU,IAAIC,MAAAA,SAAuB,CAAE,CAAA;AACvD,QAAM,CAACT,SAASU,UAAU,IAAID,eAAS,KAAK;AAC5C,QAAM,CAACE,KAAKC,MAAM,IAAIH,eAAS,CAAC;AAEhC,QAAMI,cAAcC,MAAAA,YAClB,CAACC,KAAKC,WAAW;AACf,QAAIA,WAAW,iBAAiB;AAC9B9B,yCAAU6B,KAAKC;AAAAA,IACjB;AAAA,EAAA,GAEF,CAAC9B,OAAO,CACV;AAGA+B,QAAAA,UAAU,MAAM;AACd,WAAO,MAAM;AACX,UAAI,CAAC5B,MAAM;AACG6B,mBAAAA,CAAAA,MACVC,OAAOC,QAAQF,CAAC,EAAEG,OAChB,CAACC,KAAK,CAACC,KAAKC,KAAK,OAAO;AAAA,UACtB,GAAGF;AAAAA,UACH,CAAC,CAACC,GAAG,GAAG;AAAA,YACN,GAAGC;AAAAA,YACHC,SAAS;AAAA,UACX;AAAA,QAAA,IAEF,CACF,CAAA,CACF;AACAb,eAAO,CAAC;AAAA,MACV;AAAA,IAAA;AAAA,EACF,GACC,CAACvB,IAAI,CAAC;AAEHqC,QAAAA,QAAQC,MAAAA,QACZ,OAAO;AAAA,IAAEpB;AAAAA,IAASC;AAAAA,IAAYR;AAAAA,IAASU;AAAAA,IAAYC;AAAAA,IAAKC;AAAAA,EAAAA,IACxD,CAACL,SAASC,YAAYR,SAASU,YAAYC,KAAKC,MAAM,CACxD;AAGEgB,SAAAA,2BAAAA,IAACC,sBAAgBC,UAAQ;AAAA,IAACJ;AAAAA,IAAazC,0CACpC8C,mCAAiB;AAAA,MAChB/C;AAAAA,MACAmB,SAAS;AAAA,QAAE6B,MAAM7B,QAAQ6B;AAAAA,MAAK;AAAA,MAC9BnB;AAAAA,MACAxB;AAAAA,MAAW,GACPgB;AAAAA,MAAMpB,UAAA,CAEV2C,2BAAAA,IAACK,2BAAa;AAAA,QACZ7C;AAAAA,QACAI;AAAAA,QACAE;AAAAA,QACAQ;AAAAA,MAAAA,CACD,GACD0B,2BAAAA,IAACM,+BAAe;AAAA,QACd3C;AAAAA,QACAU;AAAAA,QACAR;AAAAA,QAA+BR;AAAAA,MAAAA,CAGhB,GACjB2C,2BAAAA,IAACO,+BAAe;AAAA,QACd5C;AAAAA,QACAD;AAAAA,QACAI;AAAAA,QACAmB;AAAAA,QACA1B;AAAAA,MAAAA,CACD,CAAC;AAAA,IAAA,CACe;AAAA,EAAA,CACK;AAE9B;;;"}
+{"version":3,"file":"Wizard.cjs","sources":["../../../../src/components/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\";\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":["HvWizard","className","children","onClose","handleSubmit","title","open","skippable","loading","hasSummary","summaryContent","labels","cancel","next","previous","skip","submit","summary","fixedHeight","customStep","classes","classesProp","others","useClasses","context","setContext","useState","setSummary","tab","setTab","handleClose","useCallback","evt","reason","useEffect","c","Object","entries","reduce","acc","key","child","touched","value","useMemo","jsx","HvWizardContext","jsxs","HvWizardContainer","root","HvWizardTitle","HvWizardContent","HvWizardActions"],"mappings":";;;;;;;;;;AAoDO,MAAMA,WAAWA,CAAC;AAAA,EACvBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,YAAY;AAAA,EACZC,UAAU;AAAA,EACVC,aAAa;AAAA,EACbC;AAAAA,EACAC,SAAS;AAAA,IACPC,QAAQ;AAAA,IACRC,MAAM;AAAA,IACNC,UAAU;AAAA,IACVC,MAAM;AAAA,IACNC,QAAQ;AAAA,IACRC,SAAS;AAAA,EACX;AAAA,EACAC,cAAc;AAAA,EACdC;AAAAA,EACAC,SAASC;AAAAA,EACT,GAAGC;AACU,MAAM;AACb,QAAA;AAAA,IAAEF;AAAAA,EAAAA,IAAYG,cAAAA,WAAWF,WAAW;AAE1C,QAAM,CAACG,SAASC,UAAU,IAAIC,MAAAA,SAAuB,CAAE,CAAA;AACvD,QAAM,CAACT,SAASU,UAAU,IAAID,eAAS,KAAK;AAC5C,QAAM,CAACE,KAAKC,MAAM,IAAIH,eAAS,CAAC;AAEhC,QAAMI,cAAcC,MAAAA,YAClB,CAACC,KAAKC,WAAW;AACf,QAAIA,WAAW,iBAAiB;AAC9B9B,yCAAU6B,KAAKC;AAAAA,IACjB;AAAA,EAAA,GAEF,CAAC9B,OAAO,CACV;AAGA+B,QAAAA,UAAU,MAAM;AACd,WAAO,MAAM;AACX,UAAI,CAAC5B,MAAM;AACG6B,mBAAAA,CAAAA,MACVC,OAAOC,QAAQF,CAAC,EAAEG,OAChB,CAACC,KAAK,CAACC,KAAKC,KAAK,OAAO;AAAA,UACtB,GAAGF;AAAAA,UACH,CAAC,CAACC,GAAG,GAAG;AAAA,YACN,GAAGC;AAAAA,YACHC,SAAS;AAAA,UACX;AAAA,QAAA,IAEF,CACF,CAAA,CACF;AACAb,eAAO,CAAC;AAAA,MACV;AAAA,IAAA;AAAA,EACF,GACC,CAACvB,IAAI,CAAC;AAEHqC,QAAAA,QAAQC,MAAAA,QACZ,OAAO;AAAA,IAAEpB;AAAAA,IAASC;AAAAA,IAAYR;AAAAA,IAASU;AAAAA,IAAYC;AAAAA,IAAKC;AAAAA,EAAAA,IACxD,CAACL,SAASC,YAAYR,SAASU,YAAYC,KAAKC,MAAM,CACxD;AAGE,SAAAgB,+BAACC,cAAAA,QAAgB,UAAhB,EAAyB,OACxB,UAACC,2BAAAA,KAAAC,gBAAA,mBAAA,EACC,WACA,SAAS;AAAA,IAAEC,MAAM7B,QAAQ6B;AAAAA,EACzB,GAAA,aACA,MACA,GAAI3B,QAEJ,UAAA;AAAA,IAAAuB,2BAAA,IAACK,YACC,eAAA,EAAA,OACA,YACA,QACA,YAAuB;AAAA,IAExBL,2BAAA,IAAAM,cAAA,iBAAA,EACC,SACA,aACA,gBAECjD,UACH;AAAA,mCACCkD,cACC,iBAAA,EAAA,SACA,WACA,QACA,aACA,cAA2B;AAAA,EAAA,EAE/B,CAAA,EACF,CAAA;AAEJ;;;"}

package/dist/cjs/components/Wizard/WizardActions/WizardActions.cjs

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const WizardActions_styles = require("./WizardActions.styles.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const WizardContext = require("../WizardContext/WizardContext.cjs");
 const HvWizardActions = ({
   classes: classesProp,
@@ -57,50 +57,17 @@ const HvWizardActions = ({
     setTab(lastPage);
   }, [setTab, lastPage, setContext]);
   const handleSubmitInternal = React.useCallback(() => handleSubmit(context), [handleSubmit, context]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(uikitReactCore.HvDialogActions, {
-    className: classes.actionsContainer,
-    children: [/* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, {
-      variant: "secondaryGhost",
-      onClick: handleClose,
-      className: classes.buttonWidth,
-      children: `${labels.cancel ?? "Cancel"}`
-    }), skippable && /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, {
-      variant: "secondaryGhost",
-      disabled: isLastPage,
-      className: classes.buttonWidth,
-      onClick: handleSkip,
-      children: `${labels.skip ?? "Skip"}`
-    }), /* @__PURE__ */ jsxRuntime.jsx("div", {
-      "aria-hidden": true,
-      className: css({
-        flex: 1
-      }),
-      children: " "
-    }), /* @__PURE__ */ jsxRuntime.jsxs("div", {
-      className: classes.buttonsContainer,
-      children: [/* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, {
-        variant: "secondaryGhost",
-        className: classes.buttonWidth,
-        disabled: tab <= 0,
-        onClick: () => setTab((t) => t - 1),
-        startIcon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Backwards, {}),
-        children: `${labels.previous ?? "Previous"}`
-      }), isLastPage ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, {
-        variant: "primary",
-        className: classes.buttonWidth,
-        disabled: loading || !canSubmit,
-        onClick: handleSubmitInternal,
-        children: `${labels.submit ?? "Submit"}`
-      }) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, {
-        variant: "secondaryGhost",
-        className: cx(classes.buttonWidth, classes.buttonSpacing),
-        onClick: () => setTab((t) => t + 1),
-        disabled: !skippable && !((_a = context == null ? void 0 : context[tab]) == null ? void 0 : _a.valid),
-        endIcon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Forwards, {}),
-        children: `${labels.next ?? "Next"}`
-      })]
-    })]
-  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(uikitReactCore.HvDialogActions, { className: classes.actionsContainer, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, { variant: "secondaryGhost", onClick: handleClose, className: classes.buttonWidth, children: `${labels.cancel ?? "Cancel"}` }),
+    skippable && /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, { variant: "secondaryGhost", disabled: isLastPage, className: classes.buttonWidth, onClick: handleSkip, children: `${labels.skip ?? "Skip"}` }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": true, className: css({
+      flex: 1
+    }), children: " " }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.buttonsContainer, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, { variant: "secondaryGhost", className: classes.buttonWidth, disabled: tab <= 0, onClick: () => setTab((t) => t - 1), startIcon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Backwards, {}), children: `${labels.previous ?? "Previous"}` }),
+      isLastPage ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, { variant: "primary", className: classes.buttonWidth, disabled: loading || !canSubmit, onClick: handleSubmitInternal, children: `${labels.submit ?? "Submit"}` }) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, { variant: "secondaryGhost", className: cx(classes.buttonWidth, classes.buttonSpacing), onClick: () => setTab((t) => t + 1), disabled: !skippable && !((_a = context == null ? void 0 : context[tab]) == null ? void 0 : _a.valid), endIcon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Forwards, {}), children: `${labels.next ?? "Next"}` })
+    ] })
+  ] });
 };
 exports.wizardActionsClasses = WizardActions_styles.staticClasses;
 exports.HvWizardActions = HvWizardActions;

package/dist/cjs/components/Wizard/WizardActions/WizardActions.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"WizardActions.cjs","sources":["../../../../../src/components/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;\n    /** Skip button label. */\n    skip?: string;\n    /** Previous button label. */\n    previous?: string;\n    /** Next button label. */\n    next?: string;\n    /** Submit button label. */\n    submit?: string;\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}\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}: 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={() => setTab((t) => t + 1)}\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":["HvWizardActions","classes","classesProp","handleClose","handleSubmit","loading","skippable","labels","cancel","next","previous","skip","submit","css","cx","useClasses","context","setContext","tab","setTab","useContext","HvWizardContext","pages","setPages","useState","canSubmit","setCanSubmit","useEffect","contextEntries","Object","entries","length","validWizard","every","value","valid","lastPage","isLastPage","handleSkip","useCallback","c","reduce","acc","key","child","handleSubmitInternal","HvDialogActions","className","actionsContainer","children","_jsx","HvButton","variant","onClick","buttonWidth","disabled","flex","_jsxs","buttonsContainer","t","startIcon","Backwards","buttonSpacing","endIcon","Forwards"],"mappings":"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"}
+{"version":3,"file":"WizardActions.cjs","sources":["../../../../../src/components/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;\n    /** Skip button label. */\n    skip?: string;\n    /** Previous button label. */\n    previous?: string;\n    /** Next button label. */\n    next?: string;\n    /** Submit button label. */\n    submit?: string;\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}\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}: 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={() => setTab((t) => t + 1)}\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":["HvWizardActions","classes","classesProp","handleClose","handleSubmit","loading","skippable","labels","cancel","next","previous","skip","submit","css","cx","useClasses","context","setContext","tab","setTab","useContext","HvWizardContext","pages","setPages","useState","canSubmit","setCanSubmit","useEffect","contextEntries","Object","entries","length","validWizard","every","value","valid","lastPage","isLastPage","handleSkip","useCallback","c","reduce","acc","key","child","handleSubmitInternal","jsxs","HvDialogActions","actionsContainer","jsx","HvButton","buttonWidth","flex","buttonsContainer","t","Backwards","buttonSpacing","Forwards"],"mappings":"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"}

package/dist/cjs/components/Wizard/WizardContainer/WizardContainer.cjs

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const WizardContainer_styles = require("./WizardContainer.styles.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const HvWizardContainer = ({
   classes: classesProp,
   className,
@@ -14,18 +14,10 @@ const HvWizardContainer = ({
   const {
     classes
   } = WizardContainer_styles.useClasses(classesProp);
-  return /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvDialog, {
-    classes: {
-      closeButton: classes.closeButton,
-      paper: classes.paper
-    },
-    className: classes.root,
-    open,
-    onClose: handleClose,
-    maxWidth: "lg",
-    ...others,
-    children
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvDialog, { classes: {
+    closeButton: classes.closeButton,
+    paper: classes.paper
+  }, className: classes.root, open, onClose: handleClose, maxWidth: "lg", ...others, children });
 };
 exports.wizardContainerClasses = WizardContainer_styles.staticClasses;
 exports.HvWizardContainer = HvWizardContainer;

package/dist/cjs/components/Wizard/WizardContainer/WizardContainer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"WizardContainer.cjs","sources":["../../../../../src/components/Wizard/WizardContainer/WizardContainer.tsx"],"sourcesContent":["import React from \"react\";\n\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvDialog,\n  HvDialogProps,\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 = ({\n  classes: classesProp,\n  className,\n  children,\n  handleClose,\n  open,\n  ...others\n}: HvWizardContainerProps) => {\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":["HvWizardContainer","classes","classesProp","className","children","handleClose","open","others","useClasses","HvDialog","closeButton","paper","root","onClose","maxWidth"],"mappings":";;;;;AA6BO,MAAMA,oBAAoBA,CAAC;AAAA,EAChCC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACmB,MAAM;AACtB,QAAA;AAAA,IAAEN;AAAAA,EAAAA,IAAYO,uBAAAA,WAAWN,WAAW;AAE1C,wCACGO,eAAAA,UAAQ;AAAA,IACPR,SAAS;AAAA,MACPS,aAAaT,QAAQS;AAAAA,MACrBC,OAAOV,QAAQU;AAAAA,IACjB;AAAA,IACAR,WAAWF,QAAQW;AAAAA,IACnBN;AAAAA,IACAO,SAASR;AAAAA,IACTS,UAAS;AAAA,IAAI,GACTP;AAAAA,IAAMH;AAAAA,EAAAA,CAGF;AAEd;;;"}
+{"version":3,"file":"WizardContainer.cjs","sources":["../../../../../src/components/Wizard/WizardContainer/WizardContainer.tsx"],"sourcesContent":["import React from \"react\";\n\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvDialog,\n  HvDialogProps,\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 = ({\n  classes: classesProp,\n  className,\n  children,\n  handleClose,\n  open,\n  ...others\n}: HvWizardContainerProps) => {\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":["HvWizardContainer","classes","classesProp","className","children","handleClose","open","others","useClasses","jsx","HvDialog","closeButton","paper","root"],"mappings":";;;;;AA6BO,MAAMA,oBAAoBA,CAAC;AAAA,EAChCC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACmB,MAAM;AACtB,QAAA;AAAA,IAAEN;AAAAA,EAAAA,IAAYO,uBAAAA,WAAWN,WAAW;AAGxC,SAAAO,2BAAA,IAACC,2BACC,SAAS;AAAA,IACPC,aAAaV,QAAQU;AAAAA,IACrBC,OAAOX,QAAQW;AAAAA,EACjB,GACA,WAAWX,QAAQY,MACnB,MACA,SAASR,aACT,UAAS,MACLE,GAAAA,QAEHH,SACH,CAAA;AAEJ;;;"}

package/dist/cjs/components/Wizard/WizardContent/LoadingContainer.cjs

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const LoadingContainer_styles = require("./LoadingContainer.styles.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const LoadingContainer = ({
   children,
   hidden,
@@ -13,31 +13,21 @@ const LoadingContainer = ({
     classes,
     cx
   } = LoadingContainer_styles.useClasses(classesProp);
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
-      style: {
-        top: 0,
-        left: 0,
-        height: "100%",
-        width: "100%"
-      },
-      className: cx(classes.overlay, {
-        [classes.blur]: !hidden
-      }),
-      children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvLoading, {
-        classes: {
-          root: classes.loading
-        },
-        hidden,
-        ...others
-      })
-    }), /* @__PURE__ */ jsxRuntime.jsx("div", {
-      style: {
-        display: "flow-root"
-      },
-      children
-    })]
-  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+      top: 0,
+      left: 0,
+      height: "100%",
+      width: "100%"
+    }, className: cx(classes.overlay, {
+      [classes.blur]: !hidden
+    }), children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvLoading, { classes: {
+      root: classes.loading
+    }, hidden, ...others }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+      display: "flow-root"
+    }, children })
+  ] });
 };
 exports.LoadingContainer = LoadingContainer;
 //# sourceMappingURL=LoadingContainer.cjs.map

package/dist/cjs/components/Wizard/WizardContent/LoadingContainer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingContainer.cjs","sources":["../../../../../src/components/Wizard/WizardContent/LoadingContainer.tsx"],"sourcesContent":["import {\n  HvLoading,\n  HvLoadingProps,\n  ExtractNames,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { useClasses } from \"./LoadingContainer.styles\";\n\ntype HvWizardLoadingContainerClasses = ExtractNames<typeof useClasses>;\n\ninterface LoadingContainerProps extends Omit<HvLoadingProps, \"classes\"> {\n  classes?: HvWizardLoadingContainerClasses;\n}\n\nexport const LoadingContainer = ({\n  children,\n  hidden,\n  classes: classesProp,\n  ...others\n}: LoadingContainerProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <>\n      <div\n        style={{\n          top: 0,\n          left: 0,\n          height: \"100%\",\n          width: \"100%\",\n        }}\n        className={cx(classes.overlay, { [classes.blur]: !hidden })}\n      >\n        <HvLoading\n          classes={{\n            root: classes.loading,\n          }}\n          hidden={hidden}\n          {...others}\n        />\n      </div>\n      <div style={{ display: \"flow-root\" }}>{children}</div>\n    </>\n  );\n};\n"],"names":["LoadingContainer","children","hidden","classes","classesProp","others","cx","useClasses","_Fragment","_jsx","style","top","left","height","width","className","overlay","blur","HvLoading","root","loading","display"],"mappings":";;;;;AAcO,MAAMA,mBAAmBA,CAAC;AAAA,EAC/BC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AAAAA,EACT,GAAGC;AACkB,MAAM;AACrB,QAAA;AAAA,IAAEF;AAAAA,IAASG;AAAAA,EAAAA,IAAOC,wBAAAA,WAAWH,WAAW;AAE9C,yCACEI,WAAAA,UAAA;AAAA,IAAAP,WACEQ,2BAAAA,IAAA,OAAA;AAAA,MACEC,OAAO;AAAA,QACLC,KAAK;AAAA,QACLC,MAAM;AAAA,QACNC,QAAQ;AAAA,QACRC,OAAO;AAAA,MACT;AAAA,MACAC,WAAWT,GAAGH,QAAQa,SAAS;AAAA,QAAE,CAACb,QAAQc,IAAI,GAAG,CAACf;AAAAA,MAAAA,CAAQ;AAAA,MAAED,yCAE3DiB,0BAAS;AAAA,QACRf,SAAS;AAAA,UACPgB,MAAMhB,QAAQiB;AAAAA,QAChB;AAAA,QACAlB;AAAAA,QAAe,GACXG;AAAAA,MAAAA,CACL;AAAA,IAAA,CACE,GACLI,2BAAAA,IAAA,OAAA;AAAA,MAAKC,OAAO;AAAA,QAAEW,SAAS;AAAA,MAAY;AAAA,MAAEpB;AAAAA,IAAAA,CAAgB,CAAC;AAAA,EAAA,CACtD;AAEN;;"}
+{"version":3,"file":"LoadingContainer.cjs","sources":["../../../../../src/components/Wizard/WizardContent/LoadingContainer.tsx"],"sourcesContent":["import {\n  HvLoading,\n  HvLoadingProps,\n  ExtractNames,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { useClasses } from \"./LoadingContainer.styles\";\n\ntype HvWizardLoadingContainerClasses = ExtractNames<typeof useClasses>;\n\ninterface LoadingContainerProps extends Omit<HvLoadingProps, \"classes\"> {\n  classes?: HvWizardLoadingContainerClasses;\n}\n\nexport const LoadingContainer = ({\n  children,\n  hidden,\n  classes: classesProp,\n  ...others\n}: LoadingContainerProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <>\n      <div\n        style={{\n          top: 0,\n          left: 0,\n          height: \"100%\",\n          width: \"100%\",\n        }}\n        className={cx(classes.overlay, { [classes.blur]: !hidden })}\n      >\n        <HvLoading\n          classes={{\n            root: classes.loading,\n          }}\n          hidden={hidden}\n          {...others}\n        />\n      </div>\n      <div style={{ display: \"flow-root\" }}>{children}</div>\n    </>\n  );\n};\n"],"names":["LoadingContainer","children","hidden","classes","classesProp","others","cx","useClasses","jsxs","Fragment","jsx","top","left","height","width","overlay","blur","HvLoading","root","loading","display"],"mappings":";;;;;AAcO,MAAMA,mBAAmBA,CAAC;AAAA,EAC/BC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AAAAA,EACT,GAAGC;AACkB,MAAM;AACrB,QAAA;AAAA,IAAEF;AAAAA,IAASG;AAAAA,EAAAA,IAAOC,wBAAAA,WAAWH,WAAW;AAE9C,SAEII,2BAAA,KAAAC,qBAAA,EAAA,UAAA;AAAA,IAAAC,+BAAC,SACC,OAAO;AAAA,MACLC,KAAK;AAAA,MACLC,MAAM;AAAA,MACNC,QAAQ;AAAA,MACRC,OAAO;AAAA,IAET,GAAA,WAAWR,GAAGH,QAAQY,SAAS;AAAA,MAAE,CAACZ,QAAQa,IAAI,GAAG,CAACd;AAAAA,IAAQ,CAAA,GAE1D,UAACQ,2BAAAA,IAAAO,eAAA,WAAA,EACC,SAAS;AAAA,MACPC,MAAMf,QAAQgB;AAAAA,IAEhB,GAAA,QACId,GAAAA,OAAO,CAAA,GAEf;AAAA,IACAK,+BAAC,SAAI,OAAO;AAAA,MAAEU,SAAS;AAAA,OAAgBnB,SAAS,CAAA;AAAA,EAClD,EAAA,CAAA;AAEJ;;"}

package/dist/cjs/components/Wizard/WizardContent/WizardContent.cjs

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const usehooksTs = require("usehooks-ts");
 const React = require("react");
 const WizardContent_styles = require("./WizardContent.styles.cjs");
 const LoadingContainer = require("./LoadingContainer.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const WizardContext = require("../WizardContext/WizardContext.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const React__default = /* @__PURE__ */ _interopDefault(React);
@@ -97,44 +97,29 @@ const HvWizardContent = ({
     }
   }, [tab, context, setContext]);
   const translateX = summaryWidth ? summaryWidth + 10 : 450;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    className: classes.summaryRef,
-    ref: (el) => {
-      containerRef(el);
-      if (el) {
-        summaryRef.current = el;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.summaryRef, ref: (el) => {
+    containerRef(el);
+    if (el) {
+      summaryRef.current = el;
+    }
+  }, children: [
+    summary !== null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.summarySticky, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.summaryContainer, style: {
+      left: summaryLeft,
+      width: summaryWidth,
+      height: summaryHeight,
+      transform: `translate(${summary ? 0 : translateX}px, 0)`
+    }, children: summaryContent }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvDialogContent, { className: cx(classes.contentContainer, {
+      [classes.fixedHeight]: fixedHeight
+    }), indentContent: true, children: /* @__PURE__ */ jsxRuntime.jsx(LoadingContainer.LoadingContainer, { hidden: !loading, children: React__default.default.Children.map(arrayChildren, (child, index) => {
+      if (index === tab) {
+        return React__default.default.cloneElement(child, {
+          tab
+        });
       }
-    },
-    children: [summary !== null && /* @__PURE__ */ jsxRuntime.jsx("div", {
-      className: classes.summarySticky,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", {
-        className: classes.summaryContainer,
-        style: {
-          left: summaryLeft,
-          width: summaryWidth,
-          height: summaryHeight,
-          transform: `translate(${summary ? 0 : translateX}px, 0)`
-        },
-        children: summaryContent
-      })
-    }), /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvDialogContent, {
-      className: cx(classes.contentContainer, {
-        [classes.fixedHeight]: fixedHeight
-      }),
-      indentContent: true,
-      children: /* @__PURE__ */ jsxRuntime.jsx(LoadingContainer.LoadingContainer, {
-        hidden: !loading,
-        children: React__default.default.Children.map(arrayChildren, (child, index) => {
-          if (index === tab) {
-            return React__default.default.cloneElement(child, {
-              tab
-            });
-          }
-          return null;
-        })
-      })
-    })]
-  });
+      return null;
+    }) }) })
+  ] });
 };
 exports.wizardContentClasses = WizardContent_styles.staticClasses;
 exports.HvWizardContent = HvWizardContent;

package/dist/cjs/components/Wizard/WizardContent/WizardContent.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"WizardContent.cjs","sources":["../../../../../src/components/Wizard/WizardContent/WizardContent.tsx"],"sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvDialogContent,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { useElementSize } from \"usehooks-ts\";\n\nimport React, {\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\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":["DRAWER_PERCENTAGE","DRAWER_MIN_WIDTH","HvWizardContent","classes","classesProp","fixedHeight","loading","children","summaryContent","cx","useClasses","context","setContext","summary","tab","useContext","HvWizardContext","arrayChildren","React","Children","toArray","initialContext","reduce","acc","child","index","invalid","props","mustValidate","valid","form","touched","summaryRef","useRef","resizedRef","height","width","containerRef","sizes","useElementSize","summaryHeight","setSummaryHeight","useState","summaryWidth","setSummaryWidth","summaryLeft","setSummaryLeft","updateSummaryMeasures","useCallback","newSizes","modalWidth","drawerWidth","Math","max","current","useEffect","pageHeight","getBoundingClientRect","updatedContext","Object","entries","key","childState","translateX","className","ref","el","summarySticky","summaryContainer","style","left","transform","_jsx","HvDialogContent","contentContainer","indentContent","LoadingContainer","hidden","map","cloneElement"],"mappings":"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"}
+{"version":3,"file":"WizardContent.cjs","sources":["../../../../../src/components/Wizard/WizardContent/WizardContent.tsx"],"sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvDialogContent,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { useElementSize } from \"usehooks-ts\";\n\nimport React, {\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\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":["DRAWER_PERCENTAGE","DRAWER_MIN_WIDTH","HvWizardContent","classes","classesProp","fixedHeight","loading","children","summaryContent","cx","useClasses","context","setContext","summary","tab","useContext","HvWizardContext","arrayChildren","React","Children","toArray","initialContext","reduce","acc","child","index","invalid","props","mustValidate","valid","form","touched","summaryRef","useRef","resizedRef","height","width","containerRef","sizes","useElementSize","summaryHeight","setSummaryHeight","useState","summaryWidth","setSummaryWidth","summaryLeft","setSummaryLeft","updateSummaryMeasures","useCallback","newSizes","modalWidth","drawerWidth","Math","max","current","useEffect","pageHeight","getBoundingClientRect","updatedContext","Object","entries","key","childState","translateX","el","jsx","summarySticky","summaryContainer","left","transform","HvDialogContent","contentContainer","LoadingContainer","map","cloneElement"],"mappings":"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"}