@hitachivantara/uikit-react-lab 5.4.26 → 5.4.27

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  HvGrid,\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, 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      <HvGrid>\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      </HvGrid>\n      <HvGrid 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      </HvGrid>\n    </HvDialogActions>\n  );\n};\n"],"names":["HvWizardActions","classes","classesProp","handleClose","handleSubmit","loading","skippable","labels","cancel","next","previous","skip","submit","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","_jsxs","HvGrid","_jsx","HvButton","variant","onClick","buttonWidth","disabled","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","HvDialogActions","className","actionsContainer","children","_jsx","HvButton","variant","onClick","buttonWidth","disabled","flex","_jsxs","buttonsContainer","t","startIcon","Backwards","buttonSpacing","endIcon","Forwards"],"mappings":"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"}

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

@@ -6,6 +6,7 @@ const {
   staticClasses,
   useClasses
 } = uikitReactCore.createClasses("HvWizardActions", {
+  actionsContainer: {},
   buttonWidth: {
     width: 120,
     "& span": {
@@ -13,20 +14,12 @@ const {
       lineHeight: uikitStyles.theme.lineHeights.sm
     }
   },
-  actionsContainer: {
-    display: "flex",
-    justifyContent: "space-between"
-  },
   buttonsContainer: {
     display: "flex",
     alignItems: "center",
-    "& > button:last-child": {
-      marginLeft: 20
-    }
+    gap: uikitStyles.theme.space.xs
   },
-  buttonSpacing: {
-    paddingLeft: 28
-  }
+  buttonSpacing: {}
 });
 exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;

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

@@ -1 +1 @@
-{"version":3,"file":"WizardActions.styles.cjs","sources":["../../../../../src/components/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  buttonWidth: {\n    width: 120,\n    \"& span\": {\n      whiteSpace: \"normal\",\n      lineHeight: theme.lineHeights.sm,\n    },\n  },\n  actionsContainer: {\n    display: \"flex\",\n    justifyContent: \"space-between\",\n  },\n  buttonsContainer: {\n    display: \"flex\",\n    alignItems: \"center\",\n    \"& > button:last-child\": {\n      marginLeft: 20,\n    },\n  },\n  buttonSpacing: {\n    paddingLeft: 28,\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","buttonWidth","width","whiteSpace","lineHeight","theme","lineHeights","sm","actionsContainer","display","justifyContent","buttonsContainer","alignItems","marginLeft","buttonSpacing","paddingLeft"],"mappings":";;;;AAGa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,eAAAA,cAAc,mBAAmB;AAAA,EAC5EC,aAAa;AAAA,IACXC,OAAO;AAAA,IACP,UAAU;AAAA,MACRC,YAAY;AAAA,MACZC,YAAYC,YAAAA,MAAMC,YAAYC;AAAAA,IAChC;AAAA,EACF;AAAA,EACAC,kBAAkB;AAAA,IAChBC,SAAS;AAAA,IACTC,gBAAgB;AAAA,EAClB;AAAA,EACAC,kBAAkB;AAAA,IAChBF,SAAS;AAAA,IACTG,YAAY;AAAA,IACZ,yBAAyB;AAAA,MACvBC,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACAC,eAAe;AAAA,IACbC,aAAa;AAAA,EACf;AACF,CAAC;;;"}
+{"version":3,"file":"WizardActions.styles.cjs","sources":["../../../../../src/components/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":["staticClasses","useClasses","createClasses","actionsContainer","buttonWidth","width","whiteSpace","lineHeight","theme","lineHeights","sm","buttonsContainer","display","alignItems","gap","space","xs","buttonSpacing"],"mappings":";;;;AAGa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,eAAAA,cAAc,mBAAmB;AAAA,EAC5EC,kBAAkB,CAAC;AAAA,EACnBC,aAAa;AAAA,IACXC,OAAO;AAAA,IACP,UAAU;AAAA,MACRC,YAAY;AAAA,MACZC,YAAYC,YAAAA,MAAMC,YAAYC;AAAAA,IAChC;AAAA,EACF;AAAA,EACAC,kBAAkB;AAAA,IAChBC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZC,KAAKN,YAAAA,MAAMO,MAAMC;AAAAA,EACnB;AAAA,EACAC,eAAe,CAAC;AAClB,CAAC;;;"}

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

@@ -61,10 +61,7 @@ const HvWizardTitle = ({
     classes: {
       messageContainer: classes.messageContainer
     },
-    children: /* @__PURE__ */ jsxRuntime.jsxs(uikitReactCore.HvGrid, {
-      container: true,
-      justifyContent: "space-between",
-      alignItems: "center",
+    children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
       className: classes.titleContainer,
       children: [title && /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, {
         variant: "title3",

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

@@ -1 +1 @@
-{"version":3,"file":"WizardTitle.cjs","sources":["../../../../../src/components/Wizard/WizardTitle/WizardTitle.tsx"],"sourcesContent":["import { useContext, useEffect, useState } from \"react\";\n\nimport {\n  ExtractNames,\n  HvBaseProps,\n  HvButton,\n  HvDialogTitle,\n  HvGrid,\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 (index === currentTab) return \"Current\";\n  if (state.valid) return \"Completed\";\n  if (state.valid === null) return \"Enabled\";\n  if (state.touched && state.valid === false) return \"Failed\";\n  // \"Disabled\"\n  // \"Pending\"\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      <HvGrid\n        container\n        justifyContent=\"space-between\"\n        alignItems=\"center\"\n        className={classes.titleContainer}\n      >\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      </HvGrid>\n    </HvDialogTitle>\n  );\n};\n"],"names":["switchTabState","state","currentTab","index","valid","touched","HvWizardTitle","title","hasSummary","labels","classes","classesProp","customStep","context","setSummary","tab","setTab","useContext","HvWizardContext","useClasses","steps","setSteps","useState","useEffect","toggleSummary","prevValue","contextArray","Object","entries","length","updatedSteps","map","childState","name","onClick","HvDialogTitle","className","headerContainer","messageContainer","children","HvGrid","container","justifyContent","alignItems","titleContainer","_jsx","HvTypography","variant","component","HvStepNavigation","stepContainer","type","stepSize","width","xs","sm","md","lg","xl","HvButton","buttonWidth","root","rootSummaryButton","startIcon","Report","summary"],"mappings":";;;;;;;;;AAqCA,MAAMA,iBAAiBA,CAACC,OAAOC,YAAYC,UAAU;AACnD,MAAIA,UAAUD;AAAmB,WAAA;AACjC,MAAID,MAAMG;AAAc,WAAA;AACxB,MAAIH,MAAMG,UAAU;AAAa,WAAA;AAC7BH,MAAAA,MAAMI,WAAWJ,MAAMG,UAAU;AAAc,WAAA;AAG5C,SAAA;AACT;AAEO,MAAME,gBAAgBA,CAAC;AAAA,EAC5BC;AAAAA,EACAC,aAAa;AAAA,EACbC,SAAS,CAAC;AAAA,EACVC,SAASC;AAAAA,EACTC,aAAa,CAAC;AACI,MAAM;AAClB,QAAA;AAAA,IAAEC;AAAAA,IAASC;AAAAA,IAAYC;AAAAA,IAAKC;AAAAA,EAAAA,IAAWC,MAAAA,WAAWC,cAAAA,OAAe;AAEjE,QAAA;AAAA,IAAER;AAAAA,EAAAA,IAAYS,mBAAAA,WAAWR,WAAW;AAE1C,QAAM,CAACS,OAAOC,QAAQ,IAAIC,MAAAA,SAAwB,CAAE,CAAA;AAEpDC,QAAAA,UAAU,MAAM;AACd,WAAO,MAAM;AACXT,iBAAW,KAAK;AAAA,IAAA;AAAA,EAClB,GACC,CAACA,UAAU,CAAC;AAEf,QAAMU,gBAAgBA,MAAM;AACdC,eAAAA,CAAAA,cAAc,CAACA,SAAS;AAAA,EAAA;AAGtCF,QAAAA,UAAU,MAAM;AACRG,UAAAA,eAAeC,OAAOC,QAAQf,OAAO;AAE3C,QAAIa,aAAaG,QAAQ;AACjBC,YAAAA,eAA8BJ,aAAaK,IAC/C,CAAC,CAAGC,EAAAA,UAAU,GAAG7B,UAAU;AAClB,eAAA;AAAA,UACLI,QAAOyB,yCAAYC,SAAS,GAAE9B,QAAQ;AAAA,UACtCF,OAAOD,eAAegC,YAAYjB,KAAKZ,KAAK;AAAA,UAC5C+B,SAASA,MAAMlB,OAAOb,KAAK;AAAA,QAAA;AAAA,MAC7B,CAEJ;AAEAkB,eAASS,YAAY;AAAA,IACvB;AAAA,EACC,GAAA,CAACjB,SAASE,KAAKC,MAAM,CAAC;AAEzB,wCACGmB,eAAAA,eAAa;AAAA,IACZC,WAAW1B,QAAQ2B;AAAAA,IACnB3B,SAAS;AAAA,MACP4B,kBAAkB5B,QAAQ4B;AAAAA,IAC5B;AAAA,IAAEC,0CAEDC,uBAAM;AAAA,MACLC,WAAS;AAAA,MACTC,gBAAe;AAAA,MACfC,YAAW;AAAA,MACXP,WAAW1B,QAAQkC;AAAAA,MAAeL,UAEjChC,CAAAA,SACCsC,2BAAAA,IAACC,6BAAY;AAAA,QAACC,SAAQ;AAAA,QAASC,WAAU;AAAA,QAAIT,UAC1ChC;AAAAA,MACW,CAAA,GAEf,CAAC,CAACa,MAAMS,yCACNoB,eAAAA,kBAAgB;AAAA,QACfb,WAAW1B,QAAQwC;AAAAA,QACnB9B;AAAAA,QACA+B,MAAK;AAAA,QACLC,UAAS;AAAA,QACTC,OAAO;AAAA,UACLC,IAAI;AAAA,UACJC,IAAI;AAAA,UACJC,IAAI;AAAA,UACJC,IAAI;AAAA,UACJC,IAAI;AAAA,QACN;AAAA,QAAE,GACE9C;AAAAA,MAAAA,CACL,GAEFJ,cACCqC,2BAAAA,IAACc,yBAAQ;AAAA,QACPZ,SAAQ;AAAA,QACRX,WAAW1B,QAAQkD;AAAAA,QACnBlD,SAAS;AAAA,UACPmD,MAAMnD,QAAQoD;AAAAA,QAChB;AAAA,QACA5B,SAASV;AAAAA,QACTuC,WAAWlB,2BAAAA,IAACmB,0BAAQ;AAAA,QAAEzB,UAEpB,GAAE9B,OAAOwD,WAAW;AAAA,MAAA,CACd,CACX;AAAA,IAAA,CACK;AAAA,EAAA,CACK;AAEnB;;;"}
+{"version":3,"file":"WizardTitle.cjs","sources":["../../../../../src/components/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 (index === currentTab) return \"Current\";\n  if (state.valid) return \"Completed\";\n  if (state.valid === null) return \"Enabled\";\n  if (state.touched && state.valid === false) return \"Failed\";\n  // \"Disabled\"\n  // \"Pending\"\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":["switchTabState","state","currentTab","index","valid","touched","HvWizardTitle","title","hasSummary","labels","classes","classesProp","customStep","context","setSummary","tab","setTab","useContext","HvWizardContext","useClasses","steps","setSteps","useState","useEffect","toggleSummary","prevValue","contextArray","Object","entries","length","updatedSteps","map","childState","name","onClick","HvDialogTitle","className","headerContainer","messageContainer","children","titleContainer","_jsx","HvTypography","variant","component","HvStepNavigation","stepContainer","type","stepSize","width","xs","sm","md","lg","xl","HvButton","buttonWidth","root","rootSummaryButton","startIcon","Report","summary"],"mappings":";;;;;;;;;AAoCA,MAAMA,iBAAiBA,CAACC,OAAOC,YAAYC,UAAU;AACnD,MAAIA,UAAUD;AAAmB,WAAA;AACjC,MAAID,MAAMG;AAAc,WAAA;AACxB,MAAIH,MAAMG,UAAU;AAAa,WAAA;AAC7BH,MAAAA,MAAMI,WAAWJ,MAAMG,UAAU;AAAc,WAAA;AAG5C,SAAA;AACT;AAEO,MAAME,gBAAgBA,CAAC;AAAA,EAC5BC;AAAAA,EACAC,aAAa;AAAA,EACbC,SAAS,CAAC;AAAA,EACVC,SAASC;AAAAA,EACTC,aAAa,CAAC;AACI,MAAM;AAClB,QAAA;AAAA,IAAEC;AAAAA,IAASC;AAAAA,IAAYC;AAAAA,IAAKC;AAAAA,EAAAA,IAAWC,MAAAA,WAAWC,cAAAA,OAAe;AAEjE,QAAA;AAAA,IAAER;AAAAA,EAAAA,IAAYS,mBAAAA,WAAWR,WAAW;AAE1C,QAAM,CAACS,OAAOC,QAAQ,IAAIC,MAAAA,SAAwB,CAAE,CAAA;AAEpDC,QAAAA,UAAU,MAAM;AACd,WAAO,MAAM;AACXT,iBAAW,KAAK;AAAA,IAAA;AAAA,EAClB,GACC,CAACA,UAAU,CAAC;AAEf,QAAMU,gBAAgBA,MAAM;AACdC,eAAAA,CAAAA,cAAc,CAACA,SAAS;AAAA,EAAA;AAGtCF,QAAAA,UAAU,MAAM;AACRG,UAAAA,eAAeC,OAAOC,QAAQf,OAAO;AAE3C,QAAIa,aAAaG,QAAQ;AACjBC,YAAAA,eAA8BJ,aAAaK,IAC/C,CAAC,CAAGC,EAAAA,UAAU,GAAG7B,UAAU;AAClB,eAAA;AAAA,UACLI,QAAOyB,yCAAYC,SAAS,GAAE9B,QAAQ;AAAA,UACtCF,OAAOD,eAAegC,YAAYjB,KAAKZ,KAAK;AAAA,UAC5C+B,SAASA,MAAMlB,OAAOb,KAAK;AAAA,QAAA;AAAA,MAC7B,CAEJ;AAEAkB,eAASS,YAAY;AAAA,IACvB;AAAA,EACC,GAAA,CAACjB,SAASE,KAAKC,MAAM,CAAC;AAEzB,wCACGmB,eAAAA,eAAa;AAAA,IACZC,WAAW1B,QAAQ2B;AAAAA,IACnB3B,SAAS;AAAA,MACP4B,kBAAkB5B,QAAQ4B;AAAAA,IAC5B;AAAA,IAAEC,0CAEF,OAAA;AAAA,MAAKH,WAAW1B,QAAQ8B;AAAAA,MAAeD,UACpChC,CAAAA,SACCkC,2BAAAA,IAACC,6BAAY;AAAA,QAACC,SAAQ;AAAA,QAASC,WAAU;AAAA,QAAIL,UAC1ChC;AAAAA,MACW,CAAA,GAEf,CAAC,CAACa,MAAMS,yCACNgB,eAAAA,kBAAgB;AAAA,QACfT,WAAW1B,QAAQoC;AAAAA,QACnB1B;AAAAA,QACA2B,MAAK;AAAA,QACLC,UAAS;AAAA,QACTC,OAAO;AAAA,UACLC,IAAI;AAAA,UACJC,IAAI;AAAA,UACJC,IAAI;AAAA,UACJC,IAAI;AAAA,UACJC,IAAI;AAAA,QACN;AAAA,QAAE,GACE1C;AAAAA,MAAAA,CACL,GAEFJ,cACCiC,2BAAAA,IAACc,yBAAQ;AAAA,QACPZ,SAAQ;AAAA,QACRP,WAAW1B,QAAQ8C;AAAAA,QACnB9C,SAAS;AAAA,UACP+C,MAAM/C,QAAQgD;AAAAA,QAChB;AAAA,QACAxB,SAASV;AAAAA,QACTmC,WAAWlB,2BAAAA,IAACmB,0BAAQ;AAAA,QAAErB,UAEpB,GAAE9B,OAAOoD,WAAW;AAAA,MAAA,CACd,CACX;AAAA,IAAA,CACE;AAAA,EAAA,CACQ;AAEnB;;;"}

package/dist/cjs/components/Wizard/WizardTitle/WizardTitle.styles.cjs

@@ -12,7 +12,10 @@ const {
     }
   },
   titleContainer: {
-    margin: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: uikitStyles.theme.spacing(1),
     width: "100%"
   },
   buttonWidth: {

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

@@ -1 +1 @@
-{"version":3,"file":"WizardTitle.styles.cjs","sources":["../../../../../src/components/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    margin: 0,\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":["staticClasses","useClasses","createClasses","messageContainer","width","titleContainer","margin","buttonWidth","rootSummaryButton","paddingRight","headerContainer","backgroundColor","theme","colors","atmo2","fontSize","fontWeight","letterSpacing","stepContainer"],"mappings":";;;;AAGa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,eAAAA,cAAc,iBAAiB;AAAA,EAC1EC,kBAAkB;AAAA,IAChB,WAAW;AAAA,MACTC,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACAC,gBAAgB;AAAA,IACdC,QAAQ;AAAA,IACRF,OAAO;AAAA,EACT;AAAA,EACAG,aAAa;AAAA,IACXH,OAAO;AAAA,EACT;AAAA,EACAI,mBAAmB;AAAA,IACjBC,cAAc;AAAA,EAChB;AAAA,EACAC,iBAAiB;AAAA,IACfC,iBAAiBC,YAAAA,MAAMC,OAAOC;AAAAA,IAC9B,QAAQ;AAAA,MACNC,UAAU;AAAA,MACVC,YAAY;AAAA,MACZC,eAAe;AAAA,IACjB;AAAA,EACF;AAAA,EACAC,eAAe;AAAA,IACbZ,QAAQ;AAAA,EACV;AACF,CAAC;;;"}
+{"version":3,"file":"WizardTitle.styles.cjs","sources":["../../../../../src/components/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":["staticClasses","useClasses","createClasses","messageContainer","width","titleContainer","display","alignItems","justifyContent","gap","theme","spacing","buttonWidth","rootSummaryButton","paddingRight","headerContainer","backgroundColor","colors","atmo2","fontSize","fontWeight","letterSpacing","stepContainer","margin"],"mappings":";;;;AAGa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,eAAAA,cAAc,iBAAiB;AAAA,EAC1EC,kBAAkB;AAAA,IAChB,WAAW;AAAA,MACTC,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACAC,gBAAgB;AAAA,IACdC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZC,gBAAgB;AAAA,IAChBC,KAAKC,YAAAA,MAAMC,QAAQ,CAAC;AAAA,IACpBP,OAAO;AAAA,EACT;AAAA,EACAQ,aAAa;AAAA,IACXR,OAAO;AAAA,EACT;AAAA,EACAS,mBAAmB;AAAA,IACjBC,cAAc;AAAA,EAChB;AAAA,EACAC,iBAAiB;AAAA,IACfC,iBAAiBN,YAAAA,MAAMO,OAAOC;AAAAA,IAC9B,QAAQ;AAAA,MACNC,UAAU;AAAA,MACVC,YAAY;AAAA,MACZC,eAAe;AAAA,IACjB;AAAA,EACF;AAAA,EACAC,eAAe;AAAA,IACbC,QAAQ;AAAA,EACV;AACF,CAAC;;;"}

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

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

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

@@ -56,7 +56,6 @@ const HvStep = ({
       }),
       "aria-label": `step-${title}`,
       icon: true,
-      variant: "secondaryGhost",
       overrideIconColors: false,
       disabled: disabled ?? ["Current", "Disabled"].includes(state),
       onClick,

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

@@ -1 +1 @@
-{"version":3,"file":"Step.js","sources":["../../../../../../src/components/StepNavigation/DefaultNavigation/Step/Step.tsx"],"sourcesContent":["import {\n  Level0Good,\n  Level3Bad,\n  HourGlass,\n} from \"@hitachivantara/uikit-react-icons\";\nimport {\n  HvAvatarSize,\n  HvButtonProps,\n  HvBaseProps,\n  ExtractNames,\n  HvAvatar,\n  HvButton,\n} from \"@hitachivantara/uikit-react-core\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\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, theme);\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={`step-${title}`}\n        icon\n        variant=\"secondaryGhost\"\n        overrideIconColors={false}\n        disabled={disabled ?? [\"Current\", \"Disabled\"].includes(state)}\n        onClick={onClick}\n      >\n        <HvAvatar\n          className={cx(classes.avatar, classes[size])}\n          backgroundColor={backgroundColor}\n          status={status}\n          size={size}\n        >\n          {IconComponent ? (\n            <IconComponent\n              color={color}\n              semantic={semantic}\n              width={svgSize}\n              height={svgSize}\n              iconSize={iconSize}\n            />\n          ) : (\n            number\n          )}\n        </HvAvatar>\n      </HvButton>\n    </div>\n  );\n};\n"],"names":["HvStep","className","classes","classesProp","state","title","onClick","disabled","size","number","cx","useClasses","iconSize","xs","sm","md","ml","xl","squareL","Pending","Failed","Completed","svgSize","lg","backgroundColor","getColor","theme","color","undefined","semantic","getSemantic","status","IconComponent","HourGlass","Level3Bad","Level0Good","root","notCurrent","children","HvButton","ghost","ghostDisabled","icon","variant","overrideIconColors","includes","HvAvatar","avatar","_jsx","width","height"],"mappings":";;;;;;AAiDO,MAAMA,SAASA,CAAC;AAAA,EACrBC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,OAAO;AAAA,EACPC,SAAS;AACE,MAAM;AACX,QAAA;AAAA,IAAEP;AAAAA,IAASQ;AAAAA,EAAAA,IAAOC,WAAWR,WAAW;AAE9C,QAAMS,WAAW;AAAA,IACfC,IAAI;AAAA,IACJC,IAAI;AAAA,IACJC,IAAI;AAAA,IACJC,IAAI;AAAA,IACJC,IAAI;AAAA,IACJT,IAAI;AAEN,QAAMU,UAAU;AAAA,IACdC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXjB,KAAK;AAEP,QAAMkB,UAAU;AAAA,IACdT,IAAIK,UAAU;AAAA,IACdJ,IAAII;AAAAA,IACJH,IAAIG,UAAU;AAAA,IACdK,IAAIL,UAAU;AAAA,IACdD,IAAIC,UAAU;AAAA,IACdV,IAAI;AAEAgB,QAAAA,kBAAkBC,SAASrB,OAAOsB,KAAK;AAEvCC,QAAAA,QAAQvB,UAAU,YAAY,UAAUwB;AAC9C,QAAMC,WAAWzB,UAAU,YAAY0B,YAAY1B,KAAK,IAAIwB;AACtDG,QAAAA,SAAS3B,UAAU,YAAY,iBAAiBwB;AAEtD,QAAMI,gBAAgB;AAAA,IACpBb,SAASc;AAAAA,IACTb,QAAQc;AAAAA,IACRb,WAAWc;AAAAA,IACX/B,KAAK;AAEP,6BACE,OAAA;AAAA,IACEH,WAAWS,GACTR,QAAQkC,MACR;AAAA,MACE,CAAClC,QAAQmC,UAAU,GAAGjC,UAAU;AAAA,OAElCH,SACF;AAAA,IAAEqC,8BAEDC,UAAQ;AAAA,MACPtC,WAAWS,GAAGR,QAAQsC,OAAO;AAAA,QAC3B,CAACtC,QAAQuC,aAAa,GAAGrC,UAAU;AAAA,MAAA,CACpC;AAAA,MACD,cAAa,QAAOC;AAAAA,MACpBqC,MAAI;AAAA,MACJC,SAAQ;AAAA,MACRC,oBAAoB;AAAA,MACpBrC,UAAUA,YAAY,CAAC,WAAW,UAAU,EAAEsC,SAASzC,KAAK;AAAA,MAC5DE;AAAAA,MAAiBgC,8BAEhBQ,UAAQ;AAAA,QACP7C,WAAWS,GAAGR,QAAQ6C,QAAQ7C,QAAQM,IAAI,CAAC;AAAA,QAC3CgB;AAAAA,QACAO;AAAAA,QACAvB;AAAAA,QAAW8B,UAEVN,gBACCgB,oBAAChB,eAAa;AAAA,UACZL;AAAAA,UACAE;AAAAA,UACAoB,OAAO3B;AAAAA,UACP4B,QAAQ5B;AAAAA,UACRV;AAAAA,QACD,CAAA,IAEDH;AAAAA,MAAAA,CAEM;AAAA,IAAA,CACF;AAAA,EAAA,CACP;AAET;"}
+{"version":3,"file":"Step.js","sources":["../../../../../../src/components/StepNavigation/DefaultNavigation/Step/Step.tsx"],"sourcesContent":["import {\n  Level0Good,\n  Level3Bad,\n  HourGlass,\n} from \"@hitachivantara/uikit-react-icons\";\nimport {\n  HvAvatarSize,\n  HvButtonProps,\n  HvBaseProps,\n  ExtractNames,\n  HvAvatar,\n  HvButton,\n} from \"@hitachivantara/uikit-react-core\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\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, theme);\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={`step-${title}`}\n        icon\n        overrideIconColors={false}\n        disabled={disabled ?? [\"Current\", \"Disabled\"].includes(state)}\n        onClick={onClick}\n      >\n        <HvAvatar\n          className={cx(classes.avatar, classes[size])}\n          backgroundColor={backgroundColor}\n          status={status}\n          size={size}\n        >\n          {IconComponent ? (\n            <IconComponent\n              color={color}\n              semantic={semantic}\n              width={svgSize}\n              height={svgSize}\n              iconSize={iconSize}\n            />\n          ) : (\n            number\n          )}\n        </HvAvatar>\n      </HvButton>\n    </div>\n  );\n};\n"],"names":["HvStep","className","classes","classesProp","state","title","onClick","disabled","size","number","cx","useClasses","iconSize","xs","sm","md","ml","xl","squareL","Pending","Failed","Completed","svgSize","lg","backgroundColor","getColor","theme","color","undefined","semantic","getSemantic","status","IconComponent","HourGlass","Level3Bad","Level0Good","root","notCurrent","children","HvButton","ghost","ghostDisabled","icon","overrideIconColors","includes","HvAvatar","avatar","_jsx","width","height"],"mappings":";;;;;;AAiDO,MAAMA,SAASA,CAAC;AAAA,EACrBC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,OAAO;AAAA,EACPC,SAAS;AACE,MAAM;AACX,QAAA;AAAA,IAAEP;AAAAA,IAASQ;AAAAA,EAAAA,IAAOC,WAAWR,WAAW;AAE9C,QAAMS,WAAW;AAAA,IACfC,IAAI;AAAA,IACJC,IAAI;AAAA,IACJC,IAAI;AAAA,IACJC,IAAI;AAAA,IACJC,IAAI;AAAA,IACJT,IAAI;AAEN,QAAMU,UAAU;AAAA,IACdC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXjB,KAAK;AAEP,QAAMkB,UAAU;AAAA,IACdT,IAAIK,UAAU;AAAA,IACdJ,IAAII;AAAAA,IACJH,IAAIG,UAAU;AAAA,IACdK,IAAIL,UAAU;AAAA,IACdD,IAAIC,UAAU;AAAA,IACdV,IAAI;AAEAgB,QAAAA,kBAAkBC,SAASrB,OAAOsB,KAAK;AAEvCC,QAAAA,QAAQvB,UAAU,YAAY,UAAUwB;AAC9C,QAAMC,WAAWzB,UAAU,YAAY0B,YAAY1B,KAAK,IAAIwB;AACtDG,QAAAA,SAAS3B,UAAU,YAAY,iBAAiBwB;AAEtD,QAAMI,gBAAgB;AAAA,IACpBb,SAASc;AAAAA,IACTb,QAAQc;AAAAA,IACRb,WAAWc;AAAAA,IACX/B,KAAK;AAEP,6BACE,OAAA;AAAA,IACEH,WAAWS,GACTR,QAAQkC,MACR;AAAA,MACE,CAAClC,QAAQmC,UAAU,GAAGjC,UAAU;AAAA,OAElCH,SACF;AAAA,IAAEqC,8BAEDC,UAAQ;AAAA,MACPtC,WAAWS,GAAGR,QAAQsC,OAAO;AAAA,QAC3B,CAACtC,QAAQuC,aAAa,GAAGrC,UAAU;AAAA,MAAA,CACpC;AAAA,MACD,cAAa,QAAOC;AAAAA,MACpBqC,MAAI;AAAA,MACJC,oBAAoB;AAAA,MACpBpC,UAAUA,YAAY,CAAC,WAAW,UAAU,EAAEqC,SAASxC,KAAK;AAAA,MAC5DE;AAAAA,MAAiBgC,8BAEhBO,UAAQ;AAAA,QACP5C,WAAWS,GAAGR,QAAQ4C,QAAQ5C,QAAQM,IAAI,CAAC;AAAA,QAC3CgB;AAAAA,QACAO;AAAAA,QACAvB;AAAAA,QAAW8B,UAEVN,gBACCe,oBAACf,eAAa;AAAA,UACZL;AAAAA,UACAE;AAAAA,UACAmB,OAAO1B;AAAAA,UACP2B,QAAQ3B;AAAAA,UACRV;AAAAA,QACD,CAAA,IAEDH;AAAAA,MAAAA,CAEM;AAAA,IAAA,CACF;AAAA,EAAA,CACP;AAET;"}

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

@@ -1,5 +1,4 @@
 import { HvButton } from "@hitachivantara/uikit-react-core";
-import { theme } from "@hitachivantara/uikit-styles";
 import { getColor, dotSizes } from "../utils.js";
 import { useClasses } from "./Dot.styles.js";
 import { staticClasses } from "./Dot.styles.js";
@@ -21,11 +20,11 @@ const HvDot = ({
   const dotSize = dotSizes[size] * (state === "Current" ? 1.5 : 1);
   return /* @__PURE__ */ jsx(HvButton, {
     className: cx(css({
-      backgroundColor: getColor(state, theme),
+      backgroundColor: getColor(state),
       width: dotSize,
       height: dotSize,
-      "&:hover": {
-        backgroundColor: getColor(state, theme)
+      "&:hover, &:disabled": {
+        backgroundColor: getColor(state)
       }
     }), classes.root, {
       [classes.active]: state === "Current",

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

@@ -1 +1 @@
-{"version":3,"file":"Dot.js","sources":["../../../../../../src/components/StepNavigation/SimpleNavigation/Dot/Dot.tsx"],"sourcesContent":["import {\n  ExtractNames,\n  HvBaseProps,\n  HvButton,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\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, theme),\n          width: dotSize,\n          height: dotSize,\n          \"&:hover\": {\n            backgroundColor: getColor(state, theme),\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={`step-${title}`}\n      icon\n      overrideIconColors={false}\n      disabled={disabled ?? [\"Current\", \"Disabled\"].includes(state)}\n      onClick={onClick}\n    >\n      {[]}\n    </HvButton>\n  );\n};\n"],"names":["HvDot","classes","classesProp","className","state","title","size","onClick","disabled","cx","css","useClasses","dotSize","dotSizes","HvButton","backgroundColor","getColor","theme","width","height","root","active","ghostDisabled","includes","icon","overrideIconColors","children"],"mappings":";;;;;;AA0BO,MAAMA,QAAQA,CAAC;AAAA,EACpBC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,OAAO;AAAA,EACPC;AAAAA,EACAC;AACU,MAAM;AACV,QAAA;AAAA,IAAEP;AAAAA,IAASQ;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,WAAWT,WAAW;AAEnD,QAAMU,UAAUC,SAASP,IAAI,KAAKF,UAAU,YAAY,MAAM;AAE9D,6BACGU,UAAQ;AAAA,IACPX,WAAWM,GACTC,IAAI;AAAA,MACFK,iBAAiBC,SAASZ,OAAOa,KAAK;AAAA,MACtCC,OAAON;AAAAA,MACPO,QAAQP;AAAAA,MACR,WAAW;AAAA,QACTG,iBAAiBC,SAASZ,OAAOa,KAAK;AAAA,MACxC;AAAA,IAAA,CACD,GACDhB,QAAQmB,MACR;AAAA,MACE,CAACnB,QAAQoB,MAAM,GAAGjB,UAAU;AAAA,MAC5B,CAACH,QAAQqB,aAAa,GACpBd,YAAY,CAAC,WAAW,UAAU,EAAEe,SAASnB,KAAK;AAAA,OAEtDD,SACF;AAAA,IACA,cAAa,QAAOE;AAAAA,IACpBmB,MAAI;AAAA,IACJC,oBAAoB;AAAA,IACpBjB,UAAUA,YAAY,CAAC,WAAW,UAAU,EAAEe,SAASnB,KAAK;AAAA,IAC5DG;AAAAA,IAAiBmB,UAEhB,CAAA;AAAA,EAAA,CACO;AAEd;"}
+{"version":3,"file":"Dot.js","sources":["../../../../../../src/components/StepNavigation/SimpleNavigation/Dot/Dot.tsx"],"sourcesContent":["import {\n  ExtractNames,\n  HvBaseProps,\n  HvButton,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { HvStepProps } from \"../../DefaultNavigation\";\nimport { getColor, dotSizes } from \"../utils\";\nimport { staticClasses, useClasses } from \"./Dot.styles\";\n\nexport { staticClasses as dotClasses };\n\nexport type HvDotClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDotProps\n  extends Pick<\n      HvStepProps,\n      \"size\" | \"title\" | \"state\" | \"onClick\" | \"disabled\"\n    >,\n    Omit<HvBaseProps, \"title\" | \"onClick\"> {\n  /** A Jss Object used to override or extend the styles applied to the empty state StepNavigation. */\n  classes?: HvDotClasses;\n}\n\nexport const HvDot = ({\n  classes: classesProp,\n  className,\n  state,\n  title,\n  size = \"sm\",\n  onClick,\n  disabled,\n}: HvDotProps) => {\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const dotSize = dotSizes[size] * (state === \"Current\" ? 1.5 : 1);\n\n  return (\n    <HvButton\n      className={cx(\n        css({\n          backgroundColor: getColor(state),\n          width: dotSize,\n          height: dotSize,\n          \"&:hover, &:disabled\": {\n            backgroundColor: getColor(state),\n          },\n        }),\n        classes.root,\n        {\n          [classes.active]: state === \"Current\",\n          [classes.ghostDisabled]:\n            disabled ?? [\"Current\", \"Disabled\"].includes(state),\n        },\n        className\n      )}\n      aria-label={`step-${title}`}\n      icon\n      overrideIconColors={false}\n      disabled={disabled ?? [\"Current\", \"Disabled\"].includes(state)}\n      onClick={onClick}\n    >\n      {[]}\n    </HvButton>\n  );\n};\n"],"names":["HvDot","classes","classesProp","className","state","title","size","onClick","disabled","cx","css","useClasses","dotSize","dotSizes","HvButton","backgroundColor","getColor","width","height","root","active","ghostDisabled","includes","icon","overrideIconColors","children"],"mappings":";;;;;AAwBO,MAAMA,QAAQA,CAAC;AAAA,EACpBC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,OAAO;AAAA,EACPC;AAAAA,EACAC;AACU,MAAM;AACV,QAAA;AAAA,IAAEP;AAAAA,IAASQ;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,WAAWT,WAAW;AAEnD,QAAMU,UAAUC,SAASP,IAAI,KAAKF,UAAU,YAAY,MAAM;AAE9D,6BACGU,UAAQ;AAAA,IACPX,WAAWM,GACTC,IAAI;AAAA,MACFK,iBAAiBC,SAASZ,KAAK;AAAA,MAC/Ba,OAAOL;AAAAA,MACPM,QAAQN;AAAAA,MACR,uBAAuB;AAAA,QACrBG,iBAAiBC,SAASZ,KAAK;AAAA,MACjC;AAAA,IAAA,CACD,GACDH,QAAQkB,MACR;AAAA,MACE,CAAClB,QAAQmB,MAAM,GAAGhB,UAAU;AAAA,MAC5B,CAACH,QAAQoB,aAAa,GACpBb,YAAY,CAAC,WAAW,UAAU,EAAEc,SAASlB,KAAK;AAAA,OAEtDD,SACF;AAAA,IACA,cAAa,QAAOE;AAAAA,IACpBkB,MAAI;AAAA,IACJC,oBAAoB;AAAA,IACpBhB,UAAUA,YAAY,CAAC,WAAW,UAAU,EAAEc,SAASlB,KAAK;AAAA,IAC5DG;AAAAA,IAAiBkB,UAEhB,CAAA;AAAA,EAAA,CACO;AAEd;"}

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

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

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

@@ -1,3 +1,4 @@
+import { theme } from "@hitachivantara/uikit-styles";
 const dotSizes = {
   xs: 8,
   sm: 10,
@@ -5,9 +6,7 @@ const dotSizes = {
   lg: 14,
   xl: 16
 };
-const defaultColor = (theme) => theme.colors.secondary ?? "secondary";
-const disabledColor = (theme) => theme.colors.secondary_60 ?? "secondary_60";
-const getColor = (state, theme) => state === "Disabled" ? disabledColor(theme) : defaultColor(theme);
+const getColor = (state) => state === "Disabled" ? theme.colors.secondary_60 : theme.colors.secondary;
 export {
   dotSizes,
   getColor

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

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../../../src/components/StepNavigation/SimpleNavigation/utils.ts"],"sourcesContent":["const dotSizes = {\n  xs: 8,\n  sm: 10,\n  md: 12,\n  lg: 14,\n  xl: 16,\n};\n\nconst defaultColor = (theme) => theme.colors.secondary ?? \"secondary\";\nconst disabledColor = (theme) => theme.colors.secondary_60 ?? \"secondary_60\";\n\nconst getColor = (state, theme) =>\n  state === \"Disabled\" ? disabledColor(theme) : defaultColor(theme);\n\nexport { dotSizes, getColor };\n"],"names":["dotSizes","xs","sm","md","lg","xl","defaultColor","theme","colors","secondary","disabledColor","secondary_60","getColor","state"],"mappings":"AAAA,MAAMA,WAAW;AAAA,EACfC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AACN;AAEA,MAAMC,eAAgBC,CAAAA,UAAUA,MAAMC,OAAOC,aAAa;AAC1D,MAAMC,gBAAiBH,CAAAA,UAAUA,MAAMC,OAAOG,gBAAgB;AAExDC,MAAAA,WAAWA,CAACC,OAAON,UACvBM,UAAU,aAAaH,cAAcH,KAAK,IAAID,aAAaC,KAAK;"}
+{"version":3,"file":"utils.js","sources":["../../../../../src/components/StepNavigation/SimpleNavigation/utils.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { HvStepProps } from \"../DefaultNavigation\";\n\nexport const dotSizes = {\n  xs: 8,\n  sm: 10,\n  md: 12,\n  lg: 14,\n  xl: 16,\n};\n\nexport const getColor = (state: HvStepProps[\"state\"]) =>\n  state === \"Disabled\" ? theme.colors.secondary_60 : theme.colors.secondary;\n"],"names":["dotSizes","xs","sm","md","lg","xl","getColor","state","theme","colors","secondary_60","secondary"],"mappings":";AAGO,MAAMA,WAAW;AAAA,EACtBC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AACN;AAEaC,MAAAA,WAAWA,CAACC,UACvBA,UAAU,aAAaC,MAAMC,OAAOC,eAAeF,MAAMC,OAAOE;"}