@hitachivantara/uikit-react-lab 5.19.0 → 5.19.1

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

@@ -11,46 +11,43 @@ const HvDefaultNavigation = ({
   children,
   ...other
 }) => {
-  const {
-    activeTheme
-  } = useTheme();
-  const {
-    container: maxSize,
-    avatar: minSize
-  } = stepSizes[stepSize];
+  const { activeTheme } = useTheme();
+  const { container: maxSize, avatar: minSize } = stepSizes[stepSize];
   const StepComponent = HvStep;
   const stepsWidth = maxSize + minSize * (numSteps - 1);
-  const {
-    width,
-    titleWidth,
-    separatorWidth
-  } = getDynamicValues(stepsWidth);
+  const { width, titleWidth, separatorWidth } = getDynamicValues(stepsWidth);
   const maxWidth = Math.max(titleWidth - minSize, separatorWidth);
-  const minWidth = Math.max(titleWidth - (maxSize + minSize) * 0.5, separatorWidth);
+  const minWidth = Math.max(
+    titleWidth - (maxSize + minSize) * 0.5,
+    separatorWidth
+  );
   const Steps = children;
-  const titles = getTitles(({
-    state
-  }) => ({
+  const titles = getTitles(({ state }) => ({
     variant: "label",
     titleWidth,
     titleDisabled: state === "Disabled"
   }));
   return /* @__PURE__ */ jsxs("div", { ...other, children: [
-    /* @__PURE__ */ jsx(Steps, { ...{
-      stepsWidth,
-      navWidth: width,
-      separatorValues: {
-        minWidth,
-        maxWidth,
-        getColor,
-        height: activeTheme?.stepNavigation.defaultSeparatorHeight || 0
-      },
-      stepValues: {
-        minSize,
-        maxSize,
-        StepComponent
+    /* @__PURE__ */ jsx(
+      Steps,
+      {
+        ...{
+          stepsWidth,
+          navWidth: width,
+          separatorValues: {
+            minWidth,
+            maxWidth,
+            getColor,
+            height: activeTheme?.stepNavigation.defaultSeparatorHeight || 0
+          },
+          stepValues: {
+            minSize,
+            maxSize,
+            StepComponent
+          }
+        }
       }
-    } }),
+    ),
     titles
   ] });
 };

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

@@ -1 +1 @@
-{"version":3,"file":"DefaultNavigation.js","sources":["../../../../../src/components/StepNavigation/DefaultNavigation/DefaultNavigation.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport {\n  HvBaseProps,\n  HvTheme,\n  useTheme,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { HvStep, HvStepProps } from \"./Step\";\nimport { getColor, stepSizes } from \"./utils\";\n\nexport type ComponentChildProps = {\n  stepsWidth: number;\n  navWidth: number;\n  separatorValues: {\n    minWidth: number;\n    maxWidth: number;\n    getColor: (state: HvStepProps[\"state\"], activeTheme: HvTheme) => any;\n    height: number;\n  };\n  stepValues: {\n    minSize: number;\n    maxSize: number;\n    StepComponent: React.ComponentType<HvStepProps>;\n  };\n};\n\nexport interface HvDefaultNavigationProps\n  extends Omit<HvBaseProps, \"children\"> {\n  /** Number of steps to show on the component. */\n  numSteps: number;\n  /** Sets one of the standard sizes of the steps. */\n  stepSize: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n  /** Returns a `ReactNode` of the titles container. */\n  getTitles: (\n    getTitleProps?: (params: {\n      state: HvStepProps[\"state\"];\n      rawTitle: string;\n      number: number;\n    }) => { variant?: string; title?: string }\n  ) => ReactNode;\n  /** Returns dynamic width values of the component (width, titleWidth, separatorWidth). */\n  getDynamicValues: (stepsWidth: number) => {\n    width: number;\n    titleWidth: number;\n    separatorWidth: number;\n  };\n  /** Component to render Step Navigation with props = {separatorValues, stepValues, stepsWidth} */\n  children: React.FunctionComponent<ComponentChildProps>;\n}\n\nexport const HvDefaultNavigation = ({\n  numSteps,\n  stepSize,\n  getTitles,\n  getDynamicValues,\n  className,\n  children,\n  ...other\n}: HvDefaultNavigationProps) => {\n  const { activeTheme } = useTheme();\n\n  // step values\n  const { container: maxSize, avatar: minSize } = stepSizes[stepSize];\n  const StepComponent = HvStep;\n  //\n\n  const stepsWidth = maxSize + minSize * (numSteps - 1);\n  const { width, titleWidth, separatorWidth } = getDynamicValues(stepsWidth);\n\n  // separator values\n  const maxWidth = Math.max(titleWidth - minSize, separatorWidth);\n  const minWidth = Math.max(\n    titleWidth - (maxSize + minSize) * 0.5,\n    separatorWidth\n  );\n  //\n\n  const Steps = children;\n\n  const titles = getTitles(({ state }) => ({\n    variant: \"label\",\n    titleWidth,\n    titleDisabled: state === \"Disabled\",\n  }));\n\n  return (\n    <div {...other}>\n      <Steps\n        {...{\n          stepsWidth,\n          navWidth: width,\n          separatorValues: {\n            minWidth,\n            maxWidth,\n            getColor,\n            height: activeTheme?.stepNavigation.defaultSeparatorHeight || 0,\n          },\n          stepValues: {\n            minSize,\n            maxSize,\n            StepComponent,\n          },\n        }}\n      />\n      {titles}\n    </div>\n  );\n};\n"],"names":["HvDefaultNavigation","numSteps","stepSize","getTitles","getDynamicValues","className","children","other","activeTheme","useTheme","container","maxSize","avatar","minSize","stepSizes","StepComponent","HvStep","stepsWidth","width","titleWidth","separatorWidth","maxWidth","Math","max","minWidth","Steps","titles","state","variant","titleDisabled","navWidth","separatorValues","getColor","height","stepNavigation","defaultSeparatorHeight","stepValues"],"mappings":";;;;AAkDO,MAAMA,sBAAsBA,CAAC;AAAA,EAClCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACqB,MAAM;AACxB,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,SAAS;AAG3B,QAAA;AAAA,IAAEC,WAAWC;AAAAA,IAASC,QAAQC;AAAAA,EAAAA,IAAYC,UAAUZ,QAAQ;AAClE,QAAMa,gBAAgBC;AAGhBC,QAAAA,aAAaN,UAAUE,WAAWZ,WAAW;AAC7C,QAAA;AAAA,IAAEiB;AAAAA,IAAOC;AAAAA,IAAYC;AAAAA,EAAAA,IAAmBhB,iBAAiBa,UAAU;AAGzE,QAAMI,WAAWC,KAAKC,IAAIJ,aAAaN,SAASO,cAAc;AAC9D,QAAMI,WAAWF,KAAKC,IACpBJ,cAAcR,UAAUE,WAAW,KACnCO,cACF;AAGA,QAAMK,QAAQnB;AAERoB,QAAAA,SAASvB,UAAU,CAAC;AAAA,IAAEwB;AAAAA,EAAAA,OAAa;AAAA,IACvCC,SAAS;AAAA,IACTT;AAAAA,IACAU,eAAeF,UAAU;AAAA,EACzB,EAAA;AAGA,SAAA,qBAAC,OAAI,EAAA,GAAIpB,OACP,UAAA;AAAA,IAAA,oBAAC,SACK,GAAA;AAAA,MACFU;AAAAA,MACAa,UAAUZ;AAAAA,MACVa,iBAAiB;AAAA,QACfP;AAAAA,QACAH;AAAAA,QACAW;AAAAA,QACAC,QAAQzB,aAAa0B,eAAeC,0BAA0B;AAAA,MAChE;AAAA,MACAC,YAAY;AAAA,QACVvB;AAAAA,QACAF;AAAAA,QACAI;AAAAA,MACF;AAAA,IAAA,GACA;AAAA,IAEHW;AAAAA,EACH,EAAA,CAAA;AAEJ;"}
+{"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":[],"mappings":";;;;AAkDO,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAgC;AACxB,QAAA,EAAE,gBAAgB;AAGxB,QAAM,EAAE,WAAW,SAAS,QAAQ,YAAY,UAAU,QAAQ;AAClE,QAAM,gBAAgB;AAGhB,QAAA,aAAa,UAAU,WAAW,WAAW;AACnD,QAAM,EAAE,OAAO,YAAY,eAAe,IAAI,iBAAiB,UAAU;AAGzE,QAAM,WAAW,KAAK,IAAI,aAAa,SAAS,cAAc;AAC9D,QAAM,WAAW,KAAK;AAAA,IACpB,cAAc,UAAU,WAAW;AAAA,IACnC;AAAA,EAAA;AAIF,QAAM,QAAQ;AAEd,QAAM,SAAS,UAAU,CAAC,EAAE,aAAa;AAAA,IACvC,SAAS;AAAA,IACT;AAAA,IACA,eAAe,UAAU;AAAA,EACzB,EAAA;AAGA,SAAA,qBAAC,OAAK,EAAA,GAAG,OACP,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,UACF;AAAA,UACA,UAAU;AAAA,UACV,iBAAiB;AAAA,YACf;AAAA,YACA;AAAA,YACA;AAAA,YACA,QAAQ,aAAa,eAAe,0BAA0B;AAAA,UAChE;AAAA,UACA,YAAY;AAAA,YACV;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAAA,QACF;AAAA,MAAA;AAAA,IACF;AAAA,IACC;AAAA,EACH,EAAA,CAAA;AAEJ;"}

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

@@ -13,10 +13,7 @@ const HvStep = ({
   size = "md",
   number = 1
 }) => {
-  const {
-    classes,
-    cx
-  } = useClasses(classesProp);
+  const { classes, cx } = useClasses(classesProp);
   const iconSize = {
     xs: "XS",
     sm: "XS",
@@ -45,11 +42,50 @@ const HvStep = ({
     Failed: Level3Bad,
     Completed: Level0Good
   }[state];
-  return /* @__PURE__ */ jsx("div", { className: cx(classes.root, {
-    [classes.notCurrent]: state !== "Current"
-  }, className), children: /* @__PURE__ */ jsx(HvButton, { className: cx(classes.ghost, {
-    [classes.ghostDisabled]: state === "Current"
-  }), "aria-label": `${title}`, icon: true, overrideIconColors: false, disabled: disabled ?? ["Current", "Disabled"].includes(state), onClick, children: /* @__PURE__ */ jsx(HvAvatar, { className: cx(classes.avatar, classes[size]), backgroundColor, status, size, children: IconComponent ? /* @__PURE__ */ jsx(IconComponent, { color, semantic, width: svgSize, height: svgSize, iconSize }) : number }) }) });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx(
+        classes.root,
+        {
+          [classes.notCurrent]: state !== "Current"
+        },
+        className
+      ),
+      children: /* @__PURE__ */ jsx(
+        HvButton,
+        {
+          className: cx(classes.ghost, {
+            [classes.ghostDisabled]: state === "Current"
+          }),
+          "aria-label": `${title}`,
+          icon: true,
+          overrideIconColors: false,
+          disabled: disabled ?? ["Current", "Disabled"].includes(state),
+          onClick,
+          children: /* @__PURE__ */ jsx(
+            HvAvatar,
+            {
+              className: cx(classes.avatar, classes[size]),
+              backgroundColor,
+              status,
+              size,
+              children: IconComponent ? /* @__PURE__ */ jsx(
+                IconComponent,
+                {
+                  color,
+                  semantic,
+                  width: svgSize,
+                  height: svgSize,
+                  iconSize
+                }
+              ) : number
+            }
+          )
+        }
+      )
+    }
+  );
 };
 export {
   HvStep

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

@@ -1 +1 @@
-{"version":3,"file":"Step.js","sources":["../../../../../../src/components/StepNavigation/DefaultNavigation/Step/Step.tsx"],"sourcesContent":["import {\n  Level0Good,\n  Level3Bad,\n  HourGlass,\n} from \"@hitachivantara/uikit-react-icons\";\nimport {\n  HvAvatarSize,\n  HvButtonProps,\n  HvBaseProps,\n  ExtractNames,\n  HvAvatar,\n  HvButton,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { getColor, getSemantic } from \"../utils\";\nimport { useClasses } from \"./Step.styles\";\n\ntype HvStepClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvStepProps\n  extends Pick<HvButtonProps, \"onClick\">,\n    Omit<HvBaseProps, \"onClick\"> {\n  /** A Jss Object used to override or extend the styles applied to the empty state StepNavigation. */\n  classes?: HvStepClasses;\n  /** State of the step. Values = {\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\", \"Enabled\"} */\n  state:\n    | \"Pending\"\n    | \"Failed\"\n    | \"Completed\"\n    | \"Current\"\n    | \"Disabled\"\n    | \"Enabled\";\n  /** Title of the step. */\n  title: string;\n  /** Sets one of the standard sizes of the step */\n  size?: HvAvatarSize;\n  /** Number of the step. */\n  number?: number;\n  /**\n   * Define if a step is disabled/enabled.\n   * If this property is not defined and the step is on state \"Disabled\", the step component will be disabled\n   */\n  disabled?: boolean;\n}\n\n/**\n * Step element of \"Default\" Step Navigation root component\n */\nexport const HvStep = ({\n  className,\n  classes: classesProp,\n  state,\n  title,\n  onClick,\n  disabled,\n  size = \"md\",\n  number = 1,\n}: HvStepProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const iconSize = {\n    xs: \"XS\",\n    sm: \"XS\",\n    md: \"S\",\n    ml: \"M\",\n    xl: \"M\",\n  }[size];\n\n  const squareL = {\n    Pending: 16,\n    Failed: 24,\n    Completed: 24,\n  }[state];\n\n  const svgSize = {\n    xs: squareL - 8,\n    sm: squareL,\n    md: squareL + 8,\n    lg: squareL + 16,\n    xl: squareL + 24,\n  }[size];\n\n  const backgroundColor = getColor(state);\n\n  const color = state === \"Pending\" ? \"atmo2\" : undefined;\n  const semantic = state !== \"Pending\" ? getSemantic(state) : undefined;\n  const status = state === \"Current\" ? \"secondary_60\" : undefined;\n\n  const IconComponent = {\n    Pending: HourGlass,\n    Failed: Level3Bad,\n    Completed: Level0Good,\n  }[state];\n\n  return (\n    <div\n      className={cx(\n        classes.root,\n        {\n          [classes.notCurrent]: state !== \"Current\",\n        },\n        className\n      )}\n    >\n      <HvButton\n        className={cx(classes.ghost, {\n          [classes.ghostDisabled]: state === \"Current\",\n        })}\n        aria-label={`${title}`}\n        icon\n        overrideIconColors={false}\n        disabled={disabled ?? [\"Current\", \"Disabled\"].includes(state)}\n        onClick={onClick}\n      >\n        <HvAvatar\n          className={cx(classes.avatar, classes[size])}\n          backgroundColor={backgroundColor}\n          status={status}\n          size={size}\n        >\n          {IconComponent ? (\n            <IconComponent\n              color={color}\n              semantic={semantic}\n              width={svgSize}\n              height={svgSize}\n              iconSize={iconSize}\n            />\n          ) : (\n            number\n          )}\n        </HvAvatar>\n      </HvButton>\n    </div>\n  );\n};\n"],"names":["HvStep","className","classes","classesProp","state","title","onClick","disabled","size","number","cx","useClasses","iconSize","xs","sm","md","ml","xl","squareL","Pending","Failed","Completed","svgSize","lg","backgroundColor","getColor","color","undefined","semantic","getSemantic","status","IconComponent","HourGlass","Level3Bad","Level0Good","root","notCurrent","ghost","ghostDisabled","includes","avatar"],"mappings":";;;;;AAgDO,MAAMA,SAASA,CAAC;AAAA,EACrBC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,OAAO;AAAA,EACPC,SAAS;AACE,MAAM;AACX,QAAA;AAAA,IAAEP;AAAAA,IAASQ;AAAAA,EAAAA,IAAOC,WAAWR,WAAW;AAE9C,QAAMS,WAAW;AAAA,IACfC,IAAI;AAAA,IACJC,IAAI;AAAA,IACJC,IAAI;AAAA,IACJC,IAAI;AAAA,IACJC,IAAI;AAAA,IACJT,IAAI;AAEN,QAAMU,UAAU;AAAA,IACdC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXjB,KAAK;AAEP,QAAMkB,UAAU;AAAA,IACdT,IAAIK,UAAU;AAAA,IACdJ,IAAII;AAAAA,IACJH,IAAIG,UAAU;AAAA,IACdK,IAAIL,UAAU;AAAA,IACdD,IAAIC,UAAU;AAAA,IACdV,IAAI;AAEAgB,QAAAA,kBAAkBC,SAASrB,KAAK;AAEhCsB,QAAAA,QAAQtB,UAAU,YAAY,UAAUuB;AAC9C,QAAMC,WAAWxB,UAAU,YAAYyB,YAAYzB,KAAK,IAAIuB;AACtDG,QAAAA,SAAS1B,UAAU,YAAY,iBAAiBuB;AAEtD,QAAMI,gBAAgB;AAAA,IACpBZ,SAASa;AAAAA,IACTZ,QAAQa;AAAAA,IACRZ,WAAWa;AAAAA,IACX9B,KAAK;AAEP,SACG,oBAAA,OAAA,EACC,WAAWM,GACTR,QAAQiC,MACR;AAAA,IACE,CAACjC,QAAQkC,UAAU,GAAGhC,UAAU;AAAA,EAAA,GAElCH,SACF,GAEA,UAAA,oBAAC,YACC,WAAWS,GAAGR,QAAQmC,OAAO;AAAA,IAC3B,CAACnC,QAAQoC,aAAa,GAAGlC,UAAU;AAAA,EACpC,CAAA,GACD,cAAa,GAAEC,KAAM,IACrB,MAAI,MACJ,oBAAoB,OACpB,UAAUE,YAAY,CAAC,WAAW,UAAU,EAAEgC,SAASnC,KAAK,GAC5D,SAEA,UAAA,oBAAC,UACC,EAAA,WAAWM,GAAGR,QAAQsC,QAAQtC,QAAQM,IAAI,CAAC,GAC3C,iBACA,QACA,MAECuB,UACC,gBAAA,oBAAC,iBACC,OACA,UACA,OAAOT,SACP,QAAQA,SACR,SAAmB,CAAA,IAGrBb,OAEJ,CAAA,EACF,CAAA,EACF,CAAA;AAEJ;"}
+{"version":3,"file":"Step.js","sources":["../../../../../../src/components/StepNavigation/DefaultNavigation/Step/Step.tsx"],"sourcesContent":["import {\n  Level0Good,\n  Level3Bad,\n  HourGlass,\n} from \"@hitachivantara/uikit-react-icons\";\nimport {\n  HvAvatarSize,\n  HvButtonProps,\n  HvBaseProps,\n  ExtractNames,\n  HvAvatar,\n  HvButton,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { getColor, getSemantic } from \"../utils\";\nimport { useClasses } from \"./Step.styles\";\n\ntype HvStepClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvStepProps\n  extends Pick<HvButtonProps, \"onClick\">,\n    Omit<HvBaseProps, \"onClick\"> {\n  /** A Jss Object used to override or extend the styles applied to the empty state StepNavigation. */\n  classes?: HvStepClasses;\n  /** State of the step. Values = {\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\", \"Enabled\"} */\n  state:\n    | \"Pending\"\n    | \"Failed\"\n    | \"Completed\"\n    | \"Current\"\n    | \"Disabled\"\n    | \"Enabled\";\n  /** Title of the step. */\n  title: string;\n  /** Sets one of the standard sizes of the step */\n  size?: HvAvatarSize;\n  /** Number of the step. */\n  number?: number;\n  /**\n   * Define if a step is disabled/enabled.\n   * If this property is not defined and the step is on state \"Disabled\", the step component will be disabled\n   */\n  disabled?: boolean;\n}\n\n/**\n * Step element of \"Default\" Step Navigation root component\n */\nexport const HvStep = ({\n  className,\n  classes: classesProp,\n  state,\n  title,\n  onClick,\n  disabled,\n  size = \"md\",\n  number = 1,\n}: HvStepProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const iconSize = {\n    xs: \"XS\",\n    sm: \"XS\",\n    md: \"S\",\n    ml: \"M\",\n    xl: \"M\",\n  }[size];\n\n  const squareL = {\n    Pending: 16,\n    Failed: 24,\n    Completed: 24,\n  }[state];\n\n  const svgSize = {\n    xs: squareL - 8,\n    sm: squareL,\n    md: squareL + 8,\n    lg: squareL + 16,\n    xl: squareL + 24,\n  }[size];\n\n  const backgroundColor = getColor(state);\n\n  const color = state === \"Pending\" ? \"atmo2\" : undefined;\n  const semantic = state !== \"Pending\" ? getSemantic(state) : undefined;\n  const status = state === \"Current\" ? \"secondary_60\" : undefined;\n\n  const IconComponent = {\n    Pending: HourGlass,\n    Failed: Level3Bad,\n    Completed: Level0Good,\n  }[state];\n\n  return (\n    <div\n      className={cx(\n        classes.root,\n        {\n          [classes.notCurrent]: state !== \"Current\",\n        },\n        className\n      )}\n    >\n      <HvButton\n        className={cx(classes.ghost, {\n          [classes.ghostDisabled]: state === \"Current\",\n        })}\n        aria-label={`${title}`}\n        icon\n        overrideIconColors={false}\n        disabled={disabled ?? [\"Current\", \"Disabled\"].includes(state)}\n        onClick={onClick}\n      >\n        <HvAvatar\n          className={cx(classes.avatar, classes[size])}\n          backgroundColor={backgroundColor}\n          status={status}\n          size={size}\n        >\n          {IconComponent ? (\n            <IconComponent\n              color={color}\n              semantic={semantic}\n              width={svgSize}\n              height={svgSize}\n              iconSize={iconSize}\n            />\n          ) : (\n            number\n          )}\n        </HvAvatar>\n      </HvButton>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;AAgDO,MAAM,SAAS,CAAC;AAAA,EACrB;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,SAAS;AACX,MAAmB;AACjB,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,WAAW;AAAA,IACf,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAEN,QAAM,UAAU;AAAA,IACd,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,KAAK;AAEP,QAAM,UAAU;AAAA,IACd,IAAI,UAAU;AAAA,IACd,IAAI;AAAA,IACJ,IAAI,UAAU;AAAA,IACd,IAAI,UAAU;AAAA,IACd,IAAI,UAAU;AAAA,IACd,IAAI;AAEA,QAAA,kBAAkB,SAAS,KAAK;AAEhC,QAAA,QAAQ,UAAU,YAAY,UAAU;AAC9C,QAAM,WAAW,UAAU,YAAY,YAAY,KAAK,IAAI;AACtD,QAAA,SAAS,UAAU,YAAY,iBAAiB;AAEtD,QAAM,gBAAgB;AAAA,IACpB,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,KAAK;AAGL,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,UAAU,GAAG,UAAU;AAAA,QAClC;AAAA,QACA;AAAA,MACF;AAAA,MAEA,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,GAAG,QAAQ,OAAO;AAAA,YAC3B,CAAC,QAAQ,aAAa,GAAG,UAAU;AAAA,UAAA,CACpC;AAAA,UACD,cAAY,GAAG,KAAK;AAAA,UACpB,MAAI;AAAA,UACJ,oBAAoB;AAAA,UACpB,UAAU,YAAY,CAAC,WAAW,UAAU,EAAE,SAAS,KAAK;AAAA,UAC5D;AAAA,UAEA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,GAAG,QAAQ,QAAQ,QAAQ,IAAI,CAAC;AAAA,cAC3C;AAAA,cACA;AAAA,cACA;AAAA,cAEC,UACC,gBAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC;AAAA,kBACA;AAAA,kBACA,OAAO;AAAA,kBACP,QAAQ;AAAA,kBACR;AAAA,gBAAA;AAAA,cAAA,IAGF;AAAA,YAAA;AAAA,UAEJ;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}

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

@@ -1,8 +1,5 @@
 import { createClasses } from "@hitachivantara/uikit-react-core";
-const {
-  staticClasses,
-  useClasses
-} = createClasses("HvStep", {
+const { staticClasses, useClasses } = createClasses("HvStep", {
   root: {},
   ghost: {
     "&:hover": {
@@ -16,9 +13,7 @@ const {
     }
   },
   ghostDisabled: {},
-  notCurrent: {
-    margin: "-8px"
-  },
+  notCurrent: { margin: "-8px" },
   xs: {},
   sm: {},
   md: {},

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

@@ -1 +1 @@
-{"version":3,"file":"Step.styles.js","sources":["../../../../../../src/components/StepNavigation/DefaultNavigation/Step/Step.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvStep\", {\n  root: {},\n  ghost: {\n    \"&:hover\": {\n      backgroundColor: \"transparent\",\n    },\n    \"&$ghostDisabled\": {\n      cursor: \"default\",\n    },\n    \"&$ghostDisabled&:hover\": {\n      cursor: \"default\",\n    },\n  },\n  ghostDisabled: {},\n  notCurrent: { margin: \"-8px\" },\n  xs: {},\n  sm: {},\n  md: {},\n  lg: {},\n  xl: {},\n  avatar: {\n    \"&$xs\": {\n      fontSize: \"0.625rem\",\n    },\n    \"&$sm\": {\n      fontSize: \"1rem\",\n    },\n    \"&$md\": {\n      fontSize: \"1.5rem\",\n    },\n    \"&$lg\": {\n      fontSize: \"2rem\",\n    },\n    \"&$xl\": {\n      fontSize: \"2.5rem\",\n    },\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","ghost","backgroundColor","cursor","ghostDisabled","notCurrent","margin","xs","sm","md","lg","xl","avatar","fontSize"],"mappings":";AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,UAAU;AAAA,EACnEC,MAAM,CAAC;AAAA,EACPC,OAAO;AAAA,IACL,WAAW;AAAA,MACTC,iBAAiB;AAAA,IACnB;AAAA,IACA,mBAAmB;AAAA,MACjBC,QAAQ;AAAA,IACV;AAAA,IACA,0BAA0B;AAAA,MACxBA,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAC,eAAe,CAAC;AAAA,EAChBC,YAAY;AAAA,IAAEC,QAAQ;AAAA,EAAO;AAAA,EAC7BC,IAAI,CAAC;AAAA,EACLC,IAAI,CAAC;AAAA,EACLC,IAAI,CAAC;AAAA,EACLC,IAAI,CAAC;AAAA,EACLC,IAAI,CAAC;AAAA,EACLC,QAAQ;AAAA,IACN,QAAQ;AAAA,MACNC,UAAU;AAAA,IACZ;AAAA,IACA,QAAQ;AAAA,MACNA,UAAU;AAAA,IACZ;AAAA,IACA,QAAQ;AAAA,MACNA,UAAU;AAAA,IACZ;AAAA,IACA,QAAQ;AAAA,MACNA,UAAU;AAAA,IACZ;AAAA,IACA,QAAQ;AAAA,MACNA,UAAU;AAAA,IACZ;AAAA,EACF;AACF,CAAC;"}
+{"version":3,"file":"Step.styles.js","sources":["../../../../../../src/components/StepNavigation/DefaultNavigation/Step/Step.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvStep\", {\n  root: {},\n  ghost: {\n    \"&:hover\": {\n      backgroundColor: \"transparent\",\n    },\n    \"&$ghostDisabled\": {\n      cursor: \"default\",\n    },\n    \"&$ghostDisabled&:hover\": {\n      cursor: \"default\",\n    },\n  },\n  ghostDisabled: {},\n  notCurrent: { margin: \"-8px\" },\n  xs: {},\n  sm: {},\n  md: {},\n  lg: {},\n  xl: {},\n  avatar: {\n    \"&$xs\": {\n      fontSize: \"0.625rem\",\n    },\n    \"&$sm\": {\n      fontSize: \"1rem\",\n    },\n    \"&$md\": {\n      fontSize: \"1.5rem\",\n    },\n    \"&$lg\": {\n      fontSize: \"2rem\",\n    },\n    \"&$xl\": {\n      fontSize: \"2.5rem\",\n    },\n  },\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,UAAU;AAAA,EACnE,MAAM,CAAC;AAAA,EACP,OAAO;AAAA,IACL,WAAW;AAAA,MACT,iBAAiB;AAAA,IACnB;AAAA,IACA,mBAAmB;AAAA,MACjB,QAAQ;AAAA,IACV;AAAA,IACA,0BAA0B;AAAA,MACxB,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACA,eAAe,CAAC;AAAA,EAChB,YAAY,EAAE,QAAQ,OAAO;AAAA,EAC7B,IAAI,CAAC;AAAA,EACL,IAAI,CAAC;AAAA,EACL,IAAI,CAAC;AAAA,EACL,IAAI,CAAC;AAAA,EACL,IAAI,CAAC;AAAA,EACL,QAAQ;AAAA,IACN,QAAQ;AAAA,MACN,UAAU;AAAA,IACZ;AAAA,IACA,QAAQ;AAAA,MACN,UAAU;AAAA,IACZ;AAAA,IACA,QAAQ;AAAA,MACN,UAAU;AAAA,IACZ;AAAA,IACA,QAAQ;AAAA,MACN,UAAU;AAAA,IACZ;AAAA,IACA,QAAQ;AAAA,MACN,UAAU;AAAA,IACZ;AAAA,EACF;AACF,CAAC;"}

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

@@ -15,26 +15,11 @@ const getSemantic = (state) => ({
   Disabled: "secondary_60",
   Enabled: "secondary"
 })[state];
-const EXTRA_SMALL = {
-  container: 32,
-  avatar: 24
-};
-const SMALL = {
-  container: 40,
-  avatar: 32
-};
-const MEDIUM = {
-  container: 48,
-  avatar: 40
-};
-const LARGE = {
-  container: 60,
-  avatar: 52
-};
-const EXTRA_LARGE = {
-  container: 96,
-  avatar: 88
-};
+const EXTRA_SMALL = { container: 32, avatar: 24 };
+const SMALL = { container: 40, avatar: 32 };
+const MEDIUM = { container: 48, avatar: 40 };
+const LARGE = { container: 60, avatar: 52 };
+const EXTRA_LARGE = { container: 96, avatar: 88 };
 const stepSizes = {
   xs: EXTRA_SMALL,
   sm: SMALL,

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

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../../../src/components/StepNavigation/DefaultNavigation/utils.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport type { HvStepProps } from \"./Step\";\n\nexport const getColor = (state: HvStepProps[\"state\"]) =>\n  ({\n    Pending: theme.colors.warning ?? \"warning\",\n    Failed: theme.colors.negative ?? \"negative\",\n    Completed: theme.colors.positive ?? \"positive\",\n    Current: theme.colors.secondary ?? \"secondary\",\n    Disabled: theme.colors.secondary_60 ?? \"secondary_60\",\n    Enabled: theme.colors.secondary ?? \"secondary\",\n  }[state]);\n\nexport const getSemantic = (state: HvStepProps[\"state\"]) =>\n  ({\n    Pending: \"warning\",\n    Failed: \"negative\",\n    Completed: \"positive\",\n    Current: \"secondary\",\n    Disabled: \"secondary_60\",\n    Enabled: \"secondary\",\n  }[state]);\n\nconst EXTRA_SMALL = { container: 32, avatar: 24 };\nconst SMALL = { container: 40, avatar: 32 };\nconst MEDIUM = { container: 48, avatar: 40 };\nconst LARGE = { container: 60, avatar: 52 };\nconst EXTRA_LARGE = { container: 96, avatar: 88 };\n\nexport const stepSizes = {\n  xs: EXTRA_SMALL,\n  sm: SMALL,\n  md: MEDIUM,\n  lg: LARGE,\n  xl: EXTRA_LARGE,\n};\n"],"names":["getColor","state","Pending","theme","colors","warning","Failed","negative","Completed","positive","Current","secondary","Disabled","secondary_60","Enabled","getSemantic","EXTRA_SMALL","container","avatar","SMALL","MEDIUM","LARGE","EXTRA_LARGE","stepSizes","xs","sm","md","lg","xl"],"mappings":";AAIaA,MAAAA,WAAWA,CAACC,WACtB;AAAA,EACCC,SAASC,MAAMC,OAAOC,WAAW;AAAA,EACjCC,QAAQH,MAAMC,OAAOG,YAAY;AAAA,EACjCC,WAAWL,MAAMC,OAAOK,YAAY;AAAA,EACpCC,SAASP,MAAMC,OAAOO,aAAa;AAAA,EACnCC,UAAUT,MAAMC,OAAOS,gBAAgB;AAAA,EACvCC,SAASX,MAAMC,OAAOO,aAAa;AACrC,GAAEV,KAAK;AAEIc,MAAAA,cAAcA,CAACd,WACzB;AAAA,EACCC,SAAS;AAAA,EACTI,QAAQ;AAAA,EACRE,WAAW;AAAA,EACXE,SAAS;AAAA,EACTE,UAAU;AAAA,EACVE,SAAS;AACX,GAAEb,KAAK;AAET,MAAMe,cAAc;AAAA,EAAEC,WAAW;AAAA,EAAIC,QAAQ;AAAG;AAChD,MAAMC,QAAQ;AAAA,EAAEF,WAAW;AAAA,EAAIC,QAAQ;AAAG;AAC1C,MAAME,SAAS;AAAA,EAAEH,WAAW;AAAA,EAAIC,QAAQ;AAAG;AAC3C,MAAMG,QAAQ;AAAA,EAAEJ,WAAW;AAAA,EAAIC,QAAQ;AAAG;AAC1C,MAAMI,cAAc;AAAA,EAAEL,WAAW;AAAA,EAAIC,QAAQ;AAAG;AAEzC,MAAMK,YAAY;AAAA,EACvBC,IAAIR;AAAAA,EACJS,IAAIN;AAAAA,EACJO,IAAIN;AAAAA,EACJO,IAAIN;AAAAA,EACJO,IAAIN;AACN;"}
+{"version":3,"file":"utils.js","sources":["../../../../../src/components/StepNavigation/DefaultNavigation/utils.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport type { HvStepProps } from \"./Step\";\n\nexport const getColor = (state: HvStepProps[\"state\"]) =>\n  ({\n    Pending: theme.colors.warning ?? \"warning\",\n    Failed: theme.colors.negative ?? \"negative\",\n    Completed: theme.colors.positive ?? \"positive\",\n    Current: theme.colors.secondary ?? \"secondary\",\n    Disabled: theme.colors.secondary_60 ?? \"secondary_60\",\n    Enabled: theme.colors.secondary ?? \"secondary\",\n  }[state]);\n\nexport const getSemantic = (state: HvStepProps[\"state\"]) =>\n  ({\n    Pending: \"warning\",\n    Failed: \"negative\",\n    Completed: \"positive\",\n    Current: \"secondary\",\n    Disabled: \"secondary_60\",\n    Enabled: \"secondary\",\n  }[state]);\n\nconst EXTRA_SMALL = { container: 32, avatar: 24 };\nconst SMALL = { container: 40, avatar: 32 };\nconst MEDIUM = { container: 48, avatar: 40 };\nconst LARGE = { container: 60, avatar: 52 };\nconst EXTRA_LARGE = { container: 96, avatar: 88 };\n\nexport const stepSizes = {\n  xs: EXTRA_SMALL,\n  sm: SMALL,\n  md: MEDIUM,\n  lg: LARGE,\n  xl: EXTRA_LARGE,\n};\n"],"names":[],"mappings":";AAIa,MAAA,WAAW,CAAC,WACtB;AAAA,EACC,SAAS,MAAM,OAAO,WAAW;AAAA,EACjC,QAAQ,MAAM,OAAO,YAAY;AAAA,EACjC,WAAW,MAAM,OAAO,YAAY;AAAA,EACpC,SAAS,MAAM,OAAO,aAAa;AAAA,EACnC,UAAU,MAAM,OAAO,gBAAgB;AAAA,EACvC,SAAS,MAAM,OAAO,aAAa;AACrC,GAAE,KAAK;AAEI,MAAA,cAAc,CAAC,WACzB;AAAA,EACC,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,SAAS;AAAA,EACT,UAAU;AAAA,EACV,SAAS;AACX,GAAE,KAAK;AAET,MAAM,cAAc,EAAE,WAAW,IAAI,QAAQ,GAAG;AAChD,MAAM,QAAQ,EAAE,WAAW,IAAI,QAAQ,GAAG;AAC1C,MAAM,SAAS,EAAE,WAAW,IAAI,QAAQ,GAAG;AAC3C,MAAM,QAAQ,EAAE,WAAW,IAAI,QAAQ,GAAG;AAC1C,MAAM,cAAc,EAAE,WAAW,IAAI,QAAQ,GAAG;AAEzC,MAAM,YAAY;AAAA,EACvB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;"}

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

@@ -12,23 +12,35 @@ const HvDot = ({
   onClick,
   disabled
 }) => {
-  const {
-    classes,
-    cx,
-    css
-  } = useClasses(classesProp);
+  const { classes, cx, css } = useClasses(classesProp);
   const dotSize = dotSizes[size] * (state === "Current" ? 1.5 : 1);
-  return /* @__PURE__ */ jsx(HvButton, { className: cx(css({
-    backgroundColor: getColor(state),
-    width: dotSize,
-    height: dotSize,
-    "&:hover, &:disabled": {
-      backgroundColor: getColor(state)
+  return /* @__PURE__ */ jsx(
+    HvButton,
+    {
+      className: cx(
+        css({
+          backgroundColor: getColor(state),
+          width: dotSize,
+          height: dotSize,
+          "&:hover, &:disabled": {
+            backgroundColor: getColor(state)
+          }
+        }),
+        classes.root,
+        {
+          [classes.active]: state === "Current",
+          [classes.ghostDisabled]: disabled ?? ["Current", "Disabled"].includes(state)
+        },
+        className
+      ),
+      "aria-label": `${title}`,
+      icon: true,
+      overrideIconColors: false,
+      disabled: disabled ?? ["Current", "Disabled"].includes(state),
+      onClick,
+      children: []
     }
-  }), classes.root, {
-    [classes.active]: state === "Current",
-    [classes.ghostDisabled]: disabled ?? ["Current", "Disabled"].includes(state)
-  }, className), "aria-label": `${title}`, icon: true, overrideIconColors: false, disabled: disabled ?? ["Current", "Disabled"].includes(state), onClick, children: [] });
+  );
 };
 export {
   HvDot,

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

@@ -1 +1 @@
-{"version":3,"file":"Dot.js","sources":["../../../../../../src/components/StepNavigation/SimpleNavigation/Dot/Dot.tsx"],"sourcesContent":["import {\n  ExtractNames,\n  HvBaseProps,\n  HvButton,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { HvStepProps } from \"../../DefaultNavigation\";\nimport { getColor, dotSizes } from \"../utils\";\nimport { staticClasses, useClasses } from \"./Dot.styles\";\n\nexport { staticClasses as dotClasses };\n\nexport type HvDotClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDotProps\n  extends Pick<\n      HvStepProps,\n      \"size\" | \"title\" | \"state\" | \"onClick\" | \"disabled\"\n    >,\n    Omit<HvBaseProps, \"title\" | \"onClick\"> {\n  /** A Jss Object used to override or extend the styles applied to the empty state StepNavigation. */\n  classes?: HvDotClasses;\n}\n\nexport const HvDot = ({\n  classes: classesProp,\n  className,\n  state,\n  title,\n  size = \"sm\",\n  onClick,\n  disabled,\n}: HvDotProps) => {\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const dotSize = dotSizes[size] * (state === \"Current\" ? 1.5 : 1);\n\n  return (\n    <HvButton\n      className={cx(\n        css({\n          backgroundColor: getColor(state),\n          width: dotSize,\n          height: dotSize,\n          \"&:hover, &:disabled\": {\n            backgroundColor: getColor(state),\n          },\n        }),\n        classes.root,\n        {\n          [classes.active]: state === \"Current\",\n          [classes.ghostDisabled]:\n            disabled ?? [\"Current\", \"Disabled\"].includes(state),\n        },\n        className\n      )}\n      aria-label={`${title}`}\n      icon\n      overrideIconColors={false}\n      disabled={disabled ?? [\"Current\", \"Disabled\"].includes(state)}\n      onClick={onClick}\n    >\n      {[]}\n    </HvButton>\n  );\n};\n"],"names":["HvDot","classes","classesProp","className","state","title","size","onClick","disabled","cx","css","useClasses","dotSize","dotSizes","backgroundColor","getColor","width","height","root","active","ghostDisabled","includes"],"mappings":";;;;;AAwBO,MAAMA,QAAQA,CAAC;AAAA,EACpBC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,OAAO;AAAA,EACPC;AAAAA,EACAC;AACU,MAAM;AACV,QAAA;AAAA,IAAEP;AAAAA,IAASQ;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,WAAWT,WAAW;AAEnD,QAAMU,UAAUC,SAASP,IAAI,KAAKF,UAAU,YAAY,MAAM;AAE9D,SACG,oBAAA,UAAA,EACC,WAAWK,GACTC,IAAI;AAAA,IACFI,iBAAiBC,SAASX,KAAK;AAAA,IAC/BY,OAAOJ;AAAAA,IACPK,QAAQL;AAAAA,IACR,uBAAuB;AAAA,MACrBE,iBAAiBC,SAASX,KAAK;AAAA,IACjC;AAAA,EAAA,CACD,GACDH,QAAQiB,MACR;AAAA,IACE,CAACjB,QAAQkB,MAAM,GAAGf,UAAU;AAAA,IAC5B,CAACH,QAAQmB,aAAa,GACpBZ,YAAY,CAAC,WAAW,UAAU,EAAEa,SAASjB,KAAK;AAAA,EAAA,GAEtDD,SACF,GACA,cAAa,GAAEE,KAAM,IACrB,MAAI,MACJ,oBAAoB,OACpB,UAAUG,YAAY,CAAC,WAAW,UAAU,EAAEa,SAASjB,KAAK,GAC5D,SAEC,UAAA,CACH,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"Dot.js","sources":["../../../../../../src/components/StepNavigation/SimpleNavigation/Dot/Dot.tsx"],"sourcesContent":["import {\n  ExtractNames,\n  HvBaseProps,\n  HvButton,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { HvStepProps } from \"../../DefaultNavigation\";\nimport { getColor, dotSizes } from \"../utils\";\nimport { staticClasses, useClasses } from \"./Dot.styles\";\n\nexport { staticClasses as dotClasses };\n\nexport type HvDotClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDotProps\n  extends Pick<\n      HvStepProps,\n      \"size\" | \"title\" | \"state\" | \"onClick\" | \"disabled\"\n    >,\n    Omit<HvBaseProps, \"title\" | \"onClick\"> {\n  /** A Jss Object used to override or extend the styles applied to the empty state StepNavigation. */\n  classes?: HvDotClasses;\n}\n\nexport const HvDot = ({\n  classes: classesProp,\n  className,\n  state,\n  title,\n  size = \"sm\",\n  onClick,\n  disabled,\n}: HvDotProps) => {\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const dotSize = dotSizes[size] * (state === \"Current\" ? 1.5 : 1);\n\n  return (\n    <HvButton\n      className={cx(\n        css({\n          backgroundColor: getColor(state),\n          width: dotSize,\n          height: dotSize,\n          \"&:hover, &:disabled\": {\n            backgroundColor: getColor(state),\n          },\n        }),\n        classes.root,\n        {\n          [classes.active]: state === \"Current\",\n          [classes.ghostDisabled]:\n            disabled ?? [\"Current\", \"Disabled\"].includes(state),\n        },\n        className\n      )}\n      aria-label={`${title}`}\n      icon\n      overrideIconColors={false}\n      disabled={disabled ?? [\"Current\", \"Disabled\"].includes(state)}\n      onClick={onClick}\n    >\n      {[]}\n    </HvButton>\n  );\n};\n"],"names":[],"mappings":";;;;;AAwBO,MAAM,QAAQ,CAAC;AAAA,EACpB,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AACF,MAAkB;AAChB,QAAM,EAAE,SAAS,IAAI,IAAI,IAAI,WAAW,WAAW;AAEnD,QAAM,UAAU,SAAS,IAAI,KAAK,UAAU,YAAY,MAAM;AAG5D,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,IAAI;AAAA,UACF,iBAAiB,SAAS,KAAK;AAAA,UAC/B,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,uBAAuB;AAAA,YACrB,iBAAiB,SAAS,KAAK;AAAA,UACjC;AAAA,QAAA,CACD;AAAA,QACD,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,MAAM,GAAG,UAAU;AAAA,UAC5B,CAAC,QAAQ,aAAa,GACpB,YAAY,CAAC,WAAW,UAAU,EAAE,SAAS,KAAK;AAAA,QACtD;AAAA,QACA;AAAA,MACF;AAAA,MACA,cAAY,GAAG,KAAK;AAAA,MACpB,MAAI;AAAA,MACJ,oBAAoB;AAAA,MACpB,UAAU,YAAY,CAAC,WAAW,UAAU,EAAE,SAAS,KAAK;AAAA,MAC5D;AAAA,MAEC,UAAC,CAAA;AAAA,IAAA;AAAA,EAAA;AAGR;"}

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

@@ -1,12 +1,6 @@
 import { createClasses } from "@hitachivantara/uikit-react-core";
-const {
-  staticClasses,
-  useClasses
-} = createClasses("HvDot", {
-  root: {
-    borderRadius: "50%",
-    zIndex: 1
-  },
+const { staticClasses, useClasses } = createClasses("HvDot", {
+  root: { borderRadius: "50%", zIndex: 1 },
   active: {},
   ghostDisabled: {}
 });

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

@@ -1 +1 @@
-{"version":3,"file":"Dot.styles.js","sources":["../../../../../../src/components/StepNavigation/SimpleNavigation/Dot/Dot.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDot\", {\n  root: { borderRadius: \"50%\", zIndex: 1 },\n  active: {},\n  ghostDisabled: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root","borderRadius","zIndex","active","ghostDisabled"],"mappings":";AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,SAAS;AAAA,EAClEC,MAAM;AAAA,IAAEC,cAAc;AAAA,IAAOC,QAAQ;AAAA,EAAE;AAAA,EACvCC,QAAQ,CAAC;AAAA,EACTC,eAAe,CAAC;AAClB,CAAC;"}
+{"version":3,"file":"Dot.styles.js","sources":["../../../../../../src/components/StepNavigation/SimpleNavigation/Dot/Dot.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDot\", {\n  root: { borderRadius: \"50%\", zIndex: 1 },\n  active: {},\n  ghostDisabled: {},\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,SAAS;AAAA,EAClE,MAAM,EAAE,cAAc,OAAO,QAAQ,EAAE;AAAA,EACvC,QAAQ,CAAC;AAAA,EACT,eAAe,CAAC;AAClB,CAAC;"}

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

@@ -10,45 +10,41 @@ const HvSimpleNavigation = ({
   children,
   ...others
 }) => {
-  const {
-    activeTheme
-  } = useTheme();
+  const { activeTheme } = useTheme();
   const dotSize = dotSizes[stepSize];
   const StepComponent = HvDot;
   const stepsWidth = (numSteps + 0.5) * dotSize;
-  const {
-    width,
-    titleWidth,
-    separatorWidth
-  } = getDynamicValues(stepsWidth);
+  const { width, titleWidth, separatorWidth } = getDynamicValues(stepsWidth);
   const maxWidth = Math.max(titleWidth - dotSize, separatorWidth);
   const minWidth = Math.max(titleWidth - dotSize * 1.25, separatorWidth);
   const Steps = children;
-  const titles = getTitles(({
-    rawTitle,
-    number
-  }) => ({
+  const titles = getTitles(({ rawTitle, number }) => ({
     variant: "label",
     title: `${number}. ${rawTitle}`,
     titleWidth
   }));
   return /* @__PURE__ */ jsxs("div", { ...others, children: [
     titles,
-    /* @__PURE__ */ jsx(Steps, { ...{
-      stepsWidth,
-      navWidth: width,
-      separatorValues: {
-        minWidth,
-        maxWidth,
-        getColor,
-        height: activeTheme?.stepNavigation.simpleSeparatorHeight || 0
-      },
-      stepValues: {
-        minSize: dotSize,
-        maxSize: 1.5 * dotSize,
-        StepComponent
+    /* @__PURE__ */ jsx(
+      Steps,
+      {
+        ...{
+          stepsWidth,
+          navWidth: width,
+          separatorValues: {
+            minWidth,
+            maxWidth,
+            getColor,
+            height: activeTheme?.stepNavigation.simpleSeparatorHeight || 0
+          },
+          stepValues: {
+            minSize: dotSize,
+            maxSize: 1.5 * dotSize,
+            StepComponent
+          }
+        }
       }
-    } })
+    )
   ] });
 };
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"SimpleNavigation.js","sources":["../../../../../src/components/StepNavigation/SimpleNavigation/SimpleNavigation.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport {\n  HvBaseProps,\n  HvTheme,\n  useTheme,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { HvDot, HvDotProps } from \"./Dot\";\nimport { getColor, dotSizes } from \"./utils\";\n\nexport type ComponentChildProps = {\n  stepsWidth: number;\n  navWidth: number;\n  separatorValues: {\n    minWidth: number;\n    maxWidth: number;\n    getColor: (state: HvDotProps[\"state\"], activeTheme: HvTheme) => any;\n    height: number;\n  };\n  stepValues: {\n    minSize: number;\n    maxSize: number;\n    StepComponent: React.ComponentType<HvDotProps>;\n  };\n};\n\nexport interface HvSimpleNavigationProps extends Omit<HvBaseProps, \"children\"> {\n  /** Sets one of the standard sizes of the steps. */\n  stepSize?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n  /** Number of steps to show on the component. */\n  numSteps: number;\n  /** Returns a `ReactNode` of the titles container. */\n  getTitles: (\n    getTitleProps?: (params: {\n      state: HvDotProps[\"state\"];\n      rawTitle: string;\n      number: number;\n    }) => { variant: string; title: string }\n  ) => ReactNode;\n  /** Returns dynamic width values of the component (width, titleWidth, separatorWidth). */\n  getDynamicValues: (stepsWidth: number) => {\n    width: number;\n    titleWidth: number;\n    separatorWidth: number;\n  };\n  /** Component to render Step Navigation with props = {separatorValues, stepValues, stepsWidth} */\n  children: React.FunctionComponent<ComponentChildProps>;\n}\n\nexport const HvSimpleNavigation = ({\n  numSteps,\n  stepSize = \"sm\",\n  getTitles,\n  getDynamicValues,\n  children,\n  ...others\n}: HvSimpleNavigationProps) => {\n  const { activeTheme } = useTheme();\n\n  // step values\n  const dotSize = dotSizes[stepSize];\n  const StepComponent = HvDot;\n  //\n\n  const stepsWidth = (numSteps + 0.5) * dotSize;\n  const { width, titleWidth, separatorWidth } = getDynamicValues(stepsWidth);\n\n  // separator values\n  const maxWidth = Math.max(titleWidth - dotSize, separatorWidth);\n  const minWidth = Math.max(titleWidth - dotSize * 1.25, separatorWidth);\n  //\n\n  const Steps = children;\n\n  const titles = getTitles(({ rawTitle, number }) => ({\n    variant: \"label\",\n    title: `${number}. ${rawTitle}`,\n    titleWidth,\n  }));\n\n  return (\n    <div {...others}>\n      {titles}\n      <Steps\n        {...{\n          stepsWidth,\n          navWidth: width,\n          separatorValues: {\n            minWidth,\n            maxWidth,\n            getColor,\n            height: activeTheme?.stepNavigation.simpleSeparatorHeight || 0,\n          },\n          stepValues: {\n            minSize: dotSize,\n            maxSize: 1.5 * dotSize,\n            StepComponent,\n          },\n        }}\n      />\n    </div>\n  );\n};\n"],"names":["HvSimpleNavigation","numSteps","stepSize","getTitles","getDynamicValues","children","others","activeTheme","useTheme","dotSize","dotSizes","StepComponent","HvDot","stepsWidth","width","titleWidth","separatorWidth","maxWidth","Math","max","minWidth","Steps","titles","rawTitle","number","variant","title","navWidth","separatorValues","getColor","height","stepNavigation","simpleSeparatorHeight","stepValues","minSize","maxSize"],"mappings":";;;;AAiDO,MAAMA,qBAAqBA,CAAC;AAAA,EACjCC;AAAAA,EACAC,WAAW;AAAA,EACXC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACoB,MAAM;AACvB,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,SAAS;AAG3BC,QAAAA,UAAUC,SAASR,QAAQ;AACjC,QAAMS,gBAAgBC;AAGhBC,QAAAA,cAAcZ,WAAW,OAAOQ;AAChC,QAAA;AAAA,IAAEK;AAAAA,IAAOC;AAAAA,IAAYC;AAAAA,EAAAA,IAAmBZ,iBAAiBS,UAAU;AAGzE,QAAMI,WAAWC,KAAKC,IAAIJ,aAAaN,SAASO,cAAc;AAC9D,QAAMI,WAAWF,KAAKC,IAAIJ,aAAaN,UAAU,MAAMO,cAAc;AAGrE,QAAMK,QAAQhB;AAERiB,QAAAA,SAASnB,UAAU,CAAC;AAAA,IAAEoB;AAAAA,IAAUC;AAAAA,EAAAA,OAAc;AAAA,IAClDC,SAAS;AAAA,IACTC,OAAQ,GAAEF,MAAO,KAAID,QAAS;AAAA,IAC9BR;AAAAA,EACA,EAAA;AAGA,SAAA,qBAAC,OAAI,EAAA,GAAIT,QACNgB,UAAAA;AAAAA,IAAAA;AAAAA,IACD,oBAAC,SACK,GAAA;AAAA,MACFT;AAAAA,MACAc,UAAUb;AAAAA,MACVc,iBAAiB;AAAA,QACfR;AAAAA,QACAH;AAAAA,QACAY;AAAAA,QACAC,QAAQvB,aAAawB,eAAeC,yBAAyB;AAAA,MAC/D;AAAA,MACAC,YAAY;AAAA,QACVC,SAASzB;AAAAA,QACT0B,SAAS,MAAM1B;AAAAA,QACfE;AAAAA,MACF;AAAA,IAAA,GACA;AAAA,EAEN,EAAA,CAAA;AAEJ;"}
+{"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":[],"mappings":";;;;AAiDO,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA+B;AACvB,QAAA,EAAE,gBAAgB;AAGlB,QAAA,UAAU,SAAS,QAAQ;AACjC,QAAM,gBAAgB;AAGhB,QAAA,cAAc,WAAW,OAAO;AACtC,QAAM,EAAE,OAAO,YAAY,eAAe,IAAI,iBAAiB,UAAU;AAGzE,QAAM,WAAW,KAAK,IAAI,aAAa,SAAS,cAAc;AAC9D,QAAM,WAAW,KAAK,IAAI,aAAa,UAAU,MAAM,cAAc;AAGrE,QAAM,QAAQ;AAEd,QAAM,SAAS,UAAU,CAAC,EAAE,UAAU,cAAc;AAAA,IAClD,SAAS;AAAA,IACT,OAAO,GAAG,MAAM,KAAK,QAAQ;AAAA,IAC7B;AAAA,EACA,EAAA;AAGA,SAAA,qBAAC,OAAK,EAAA,GAAG,QACN,UAAA;AAAA,IAAA;AAAA,IACD;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,UACF;AAAA,UACA,UAAU;AAAA,UACV,iBAAiB;AAAA,YACf;AAAA,YACA;AAAA,YACA;AAAA,YACA,QAAQ,aAAa,eAAe,yBAAyB;AAAA,UAC/D;AAAA,UACA,YAAY;AAAA,YACV,SAAS;AAAA,YACT,SAAS,MAAM;AAAA,YACf;AAAA,UACF;AAAA,QACF;AAAA,MAAA;AAAA,IACF;AAAA,EACF,EAAA,CAAA;AAEJ;"}

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

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../../../src/components/StepNavigation/SimpleNavigation/utils.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\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":";AAIO,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;"}
+{"version":3,"file":"utils.js","sources":["../../../../../src/components/StepNavigation/SimpleNavigation/utils.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\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":[],"mappings":";AAIO,MAAM,WAAW;AAAA,EACtB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEa,MAAA,WAAW,CAAC,UACvB,UAAU,aAAa,MAAM,OAAO,eAAe,MAAM,OAAO;"}