@hitachivantara/uikit-react-lab 5.4.20 → 5.4.22

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

@@ -1 +1 @@
-{"version":3,"file":"DefaultNavigation.cjs","sources":["../../../../../src/components/StepNavigation/DefaultNavigation/DefaultNavigation.tsx"],"sourcesContent":["import {\n  HvBaseProps,\n  HvTheme,\n  useTheme,\n} from \"@hitachivantara/uikit-react-core\";\nimport { HvDefaultNavigationClasses } from \"./defaultNavigationClasses\";\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  /** A Jss Object used to override or extend the styles applied to the empty state StepNavigation. */\n  classes?: HvDefaultNavigationClasses;\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":";;;;;;AAmDO,MAAMA,sBAAsBA,CAAC;AAAA,EAClCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACqB,MAAM;AACxB,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,eAAS,SAAA;AAG3B,QAAA;AAAA,IAAEC,WAAWC;AAAAA,IAASC,QAAQC;AAAAA,EAAAA,IAAYC,MAAAA,UAAUZ,QAAQ;AAClE,QAAMa,gBAAgBC,KAAAA;AAGhBC,QAAAA,aAAaN,UAAUE,WAAWZ,WAAW;AAC7C,QAAA;AAAA,IAAEiB;AAAAA,IAAOC;AAAAA,IAAYC;AAAAA,EAAAA,IAAmBhB,iBAAiBa,UAAU;AAGzE,QAAMI,WAAWC,KAAKC,IAAIJ,aAAaN,SAASO,cAAc;AAC9D,QAAMI,WAAWF,KAAKC,IACpBJ,cAAcR,UAAUE,WAAW,KACnCO,cACF;AAGA,QAAMK,QAAQnB;AAERoB,QAAAA,SAASvB,UAAU,CAAC;AAAA,IAAEwB;AAAAA,EAAAA,OAAa;AAAA,IACvCC,SAAS;AAAA,IACTT;AAAAA,IACAU,eAAeF,UAAU;AAAA,EACzB,EAAA;AAEF,yCACE,OAAA;AAAA,IAAA,GAASpB;AAAAA,IAAKD,UAAA,CACZwB,2BAAAA,IAACL,OAAK;AAAA,MAEFR;AAAAA,MACAc,UAAUb;AAAAA,MACVc,iBAAiB;AAAA,QACfR;AAAAA,QACAH;AAAAA,QAAAA,UACAY,MAAAA;AAAAA,QACAC,SAAQ1B,2CAAa2B,eAAeC,2BAA0B;AAAA,MAChE;AAAA,MACAC,YAAY;AAAA,QACVxB;AAAAA,QACAF;AAAAA,QACAI;AAAAA,MACF;AAAA,IAEH,CAAA,GACAW,MAAM;AAAA,EAAA,CACJ;AAET;;"}
+{"version":3,"file":"DefaultNavigation.cjs","sources":["../../../../../src/components/StepNavigation/DefaultNavigation/DefaultNavigation.tsx"],"sourcesContent":["import {\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,eAAS,SAAA;AAG3B,QAAA;AAAA,IAAEC,WAAWC;AAAAA,IAASC,QAAQC;AAAAA,EAAAA,IAAYC,MAAAA,UAAUZ,QAAQ;AAClE,QAAMa,gBAAgBC,KAAAA;AAGhBC,QAAAA,aAAaN,UAAUE,WAAWZ,WAAW;AAC7C,QAAA;AAAA,IAAEiB;AAAAA,IAAOC;AAAAA,IAAYC;AAAAA,EAAAA,IAAmBhB,iBAAiBa,UAAU;AAGzE,QAAMI,WAAWC,KAAKC,IAAIJ,aAAaN,SAASO,cAAc;AAC9D,QAAMI,WAAWF,KAAKC,IACpBJ,cAAcR,UAAUE,WAAW,KACnCO,cACF;AAGA,QAAMK,QAAQnB;AAERoB,QAAAA,SAASvB,UAAU,CAAC;AAAA,IAAEwB;AAAAA,EAAAA,OAAa;AAAA,IACvCC,SAAS;AAAA,IACTT;AAAAA,IACAU,eAAeF,UAAU;AAAA,EACzB,EAAA;AAEF,yCACE,OAAA;AAAA,IAAA,GAASpB;AAAAA,IAAKD,UAAA,CACZwB,2BAAAA,IAACL,OAAK;AAAA,MAEFR;AAAAA,MACAc,UAAUb;AAAAA,MACVc,iBAAiB;AAAA,QACfR;AAAAA,QACAH;AAAAA,QAAAA,UACAY,MAAAA;AAAAA,QACAC,SAAQ1B,2CAAa2B,eAAeC,2BAA0B;AAAA,MAChE;AAAA,MACAC,YAAY;AAAA,QACVxB;AAAAA,QACAF;AAAAA,QACAI;AAAAA,MACF;AAAA,IAEH,CAAA,GACAW,MAAM;AAAA,EAAA,CACJ;AAET;;"}

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

@@ -1,15 +1,14 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const clsx = require("clsx");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const Step_styles = require("./Step.styles.cjs");
-const stepClasses = require("./stepClasses.cjs");
 const utils = require("../utils.cjs");
+const Step_styles = require("./Step.styles.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const HvStep = ({
   className,
-  classes,
+  classes: classesProp,
   state,
   title,
   onClick,
@@ -17,6 +16,10 @@ const HvStep = ({
   size = "md",
   number = 1
 }) => {
+  const {
+    classes,
+    cx
+  } = Step_styles.useClasses(classesProp);
   const iconSize = {
     xs: "XS",
     sm: "XS",
@@ -45,23 +48,25 @@ const HvStep = ({
     Failed: uikitReactIcons.Level3Bad,
     Completed: uikitReactIcons.Level0Good
   }[state];
-  return /* @__PURE__ */ jsxRuntime.jsx(Step_styles.StyledRoot, {
-    className: clsx.clsx(className, stepClasses.default.root, classes == null ? void 0 : classes.root, state !== "Current" && clsx.clsx(stepClasses.default.notCurrent, classes == null ? void 0 : classes.notCurrent)),
-    $notCurrent: state !== "Current",
-    children: /* @__PURE__ */ jsxRuntime.jsx(Step_styles.StyledButton, {
-      className: clsx.clsx(stepClasses.default.ghost, classes == null ? void 0 : classes.ghost, state === "Current" && clsx.clsx(stepClasses.default.ghostDisabled, classes == null ? void 0 : classes.ghostDisabled)),
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    className: cx(classes.root, {
+      [classes.notCurrent]: state !== "Current"
+    }, className),
+    children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, {
+      className: cx(classes.ghost, {
+        [classes.ghostDisabled]: state === "Current"
+      }),
       "aria-label": `step-${title}`,
       icon: true,
       variant: "secondaryGhost",
       overrideIconColors: false,
       disabled: disabled ?? ["Current", "Disabled"].includes(state),
       onClick,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Step_styles.StyledAvatar, {
-        className: clsx.clsx(stepClasses.default.avatar, classes == null ? void 0 : classes.avatar, stepClasses.default[size], classes == null ? void 0 : classes[size]),
+      children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvAvatar, {
+        className: cx(classes.avatar, classes[size]),
         backgroundColor,
         status,
         size,
-        $size: size,
         children: IconComponent ? /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {
           color,
           semantic,

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

@@ -1 +1 @@
-{"version":3,"file":"Step.cjs","sources":["../../../../../../src/components/StepNavigation/DefaultNavigation/Step/Step.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  Level0Good,\n  Level3Bad,\n  HourGlass,\n} from \"@hitachivantara/uikit-react-icons\";\nimport {\n  HvAvatarSize,\n  HvButtonProps,\n  HvBaseProps,\n} from \"@hitachivantara/uikit-react-core\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { StyledRoot, StyledButton, StyledAvatar } from \"./Step.styles\";\nimport stepClasses, { HvStepClasses } from \"./stepClasses\";\nimport { getColor, getSemantic } from \"../utils\";\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,\n  state,\n  title,\n  onClick,\n  disabled,\n  size = \"md\",\n  number = 1,\n}: HvStepProps) => {\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    <StyledRoot\n      className={clsx(\n        className,\n        stepClasses.root,\n        classes?.root,\n        state !== \"Current\" && clsx(stepClasses.notCurrent, classes?.notCurrent)\n      )}\n      $notCurrent={state !== \"Current\"}\n    >\n      <StyledButton\n        className={clsx(\n          stepClasses.ghost,\n          classes?.ghost,\n          state === \"Current\" &&\n            clsx(stepClasses.ghostDisabled, classes?.ghostDisabled)\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        <StyledAvatar\n          className={clsx(\n            stepClasses.avatar,\n            classes?.avatar,\n            stepClasses[size],\n            classes?.[size]\n          )}\n          backgroundColor={backgroundColor}\n          status={status}\n          size={size}\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        </StyledAvatar>\n      </StyledButton>\n    </StyledRoot>\n  );\n};\n"],"names":["HvStep","className","classes","state","title","onClick","disabled","size","number","iconSize","xs","sm","md","ml","xl","squareL","Pending","Failed","Completed","svgSize","lg","backgroundColor","getColor","theme","color","undefined","semantic","getSemantic","status","IconComponent","HourGlass","Level3Bad","Level0Good","StyledRoot","clsx","stepClasses","root","notCurrent","$notCurrent","children","StyledButton","ghost","ghostDisabled","icon","variant","overrideIconColors","includes","StyledAvatar","avatar","$size","_jsx","width","height"],"mappings":";;;;;;;;;AA6CO,MAAMA,SAASA,CAAC;AAAA,EACrBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,OAAO;AAAA,EACPC,SAAS;AACE,MAAM;AACjB,QAAMC,WAAW;AAAA,IACfC,IAAI;AAAA,IACJC,IAAI;AAAA,IACJC,IAAI;AAAA,IACJC,IAAI;AAAA,IACJC,IAAI;AAAA,IACJP,IAAI;AAEN,QAAMQ,UAAU;AAAA,IACdC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXf,KAAK;AAEP,QAAMgB,UAAU;AAAA,IACdT,IAAIK,UAAU;AAAA,IACdJ,IAAII;AAAAA,IACJH,IAAIG,UAAU;AAAA,IACdK,IAAIL,UAAU;AAAA,IACdD,IAAIC,UAAU;AAAA,IACdR,IAAI;AAEAc,QAAAA,kBAAkBC,MAAAA,SAASnB,OAAOoB,YAAK,KAAA;AAEvCC,QAAAA,QAAQrB,UAAU,YAAY,UAAUsB;AAC9C,QAAMC,WAAWvB,UAAU,YAAYwB,MAAAA,YAAYxB,KAAK,IAAIsB;AACtDG,QAAAA,SAASzB,UAAU,YAAY,iBAAiBsB;AAEtD,QAAMI,gBAAgB;AAAA,IACpBb,SAASc,gBAAAA;AAAAA,IACTb,QAAQc,gBAAAA;AAAAA,IACRb,WAAWc,gBAAAA;AAAAA,IACX7B,KAAK;AAEP,wCACG8B,YAAAA,YAAU;AAAA,IACThC,WAAWiC,KAAAA,KACTjC,WACAkC,YAAAA,QAAYC,MACZlC,mCAASkC,MACTjC,UAAU,aAAa+B,KAAKC,KAAAA,YAAAA,QAAYE,YAAYnC,mCAASmC,UAAU,CACzE;AAAA,IACAC,aAAanC,UAAU;AAAA,IAAUoC,yCAEhCC,0BAAY;AAAA,MACXvC,WAAWiC,KAAAA,KACTC,YAAAA,QAAYM,OACZvC,mCAASuC,OACTtC,UAAU,aACR+B,KAAKC,KAAAA,YAAAA,QAAYO,eAAexC,mCAASwC,aAAa,CAC1D;AAAA,MACA,cAAa,QAAOtC;AAAAA,MACpBuC,MAAI;AAAA,MACJC,SAAQ;AAAA,MACRC,oBAAoB;AAAA,MACpBvC,UAAUA,YAAY,CAAC,WAAW,UAAU,EAAEwC,SAAS3C,KAAK;AAAA,MAC5DE;AAAAA,MAAiBkC,yCAEhBQ,0BAAY;AAAA,QACX9C,WAAWiC,KACTC,KAAAA,oBAAYa,QACZ9C,mCAAS8C,QACTb,YAAAA,QAAY5B,IAAI,GAChBL,mCAAUK,KACZ;AAAA,QACAc;AAAAA,QACAO;AAAAA,QACArB;AAAAA,QACA0C,OAAO1C;AAAAA,QAAKgC,UAEXV,gBACCqB,2BAAAA,IAACrB,eAAa;AAAA,UACZL;AAAAA,UACAE;AAAAA,UACAyB,OAAOhC;AAAAA,UACPiC,QAAQjC;AAAAA,UACRV;AAAAA,QACD,CAAA,IAEDD;AAAAA,MAAAA,CAEU;AAAA,IAAA,CACF;AAAA,EAAA,CACJ;AAEhB;;"}
+{"version":3,"file":"Step.cjs","sources":["../../../../../../src/components/StepNavigation/DefaultNavigation/Step/Step.tsx"],"sourcesContent":["import {\n  Level0Good,\n  Level3Bad,\n  HourGlass,\n} from \"@hitachivantara/uikit-react-icons\";\nimport {\n  HvAvatarSize,\n  HvButtonProps,\n  HvBaseProps,\n  ExtractNames,\n  HvAvatar,\n  HvButton,\n} from \"@hitachivantara/uikit-react-core\";\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,YAAAA,WAAWR,WAAW;AAE9C,QAAMS,WAAW;AAAA,IACfC,IAAI;AAAA,IACJC,IAAI;AAAA,IACJC,IAAI;AAAA,IACJC,IAAI;AAAA,IACJC,IAAI;AAAA,IACJT,IAAI;AAEN,QAAMU,UAAU;AAAA,IACdC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXjB,KAAK;AAEP,QAAMkB,UAAU;AAAA,IACdT,IAAIK,UAAU;AAAA,IACdJ,IAAII;AAAAA,IACJH,IAAIG,UAAU;AAAA,IACdK,IAAIL,UAAU;AAAA,IACdD,IAAIC,UAAU;AAAA,IACdV,IAAI;AAEAgB,QAAAA,kBAAkBC,MAAAA,SAASrB,OAAOsB,YAAK,KAAA;AAEvCC,QAAAA,QAAQvB,UAAU,YAAY,UAAUwB;AAC9C,QAAMC,WAAWzB,UAAU,YAAY0B,MAAAA,YAAY1B,KAAK,IAAIwB;AACtDG,QAAAA,SAAS3B,UAAU,YAAY,iBAAiBwB;AAEtD,QAAMI,gBAAgB;AAAA,IACpBb,SAASc,gBAAAA;AAAAA,IACTb,QAAQc,gBAAAA;AAAAA,IACRb,WAAWc,gBAAAA;AAAAA,IACX/B,KAAK;AAEP,wCACE,OAAA;AAAA,IACEH,WAAWS,GACTR,QAAQkC,MACR;AAAA,MACE,CAAClC,QAAQmC,UAAU,GAAGjC,UAAU;AAAA,OAElCH,SACF;AAAA,IAAEqC,yCAEDC,yBAAQ;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,yCAEhBQ,yBAAQ;AAAA,QACP7C,WAAWS,GAAGR,QAAQ6C,QAAQ7C,QAAQM,IAAI,CAAC;AAAA,QAC3CgB;AAAAA,QACAO;AAAAA,QACAvB;AAAAA,QAAW8B,UAEVN,gBACCgB,2BAAAA,IAAChB,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;;"}

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

@@ -1,63 +1,43 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const _styled = require("@emotion/styled/base");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-function _EMOTION_STRINGIFIED_CSS_ERROR__() {
-  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
-}
-const StyledRoot = /* @__PURE__ */ _styled__default.default("div", process.env.NODE_ENV === "production" ? {
-  target: "e1bnfr852"
-} : {
-  target: "e1bnfr852",
-  label: "StyledRoot"
-})(({
-  $notCurrent
-}) => ({
-  ...$notCurrent && {
+const {
+  staticClasses,
+  useClasses
+} = uikitReactCore.createClasses("HvStep", {
+  root: {},
+  ghost: {
+    "&:hover": {
+      backgroundColor: "transparent"
+    },
+    "&$ghostDisabled": {
+      cursor: "default"
+    },
+    "&$ghostDisabled&:hover": {
+      cursor: "default"
+    }
+  },
+  ghostDisabled: {},
+  notCurrent: {
     margin: "-8px"
-  }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2xhYi9zcmMvY29tcG9uZW50cy9TdGVwTmF2aWdhdGlvbi9EZWZhdWx0TmF2aWdhdGlvbi9TdGVwL1N0ZXAuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHMEIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvbGFiL3NyYy9jb21wb25lbnRzL1N0ZXBOYXZpZ2F0aW9uL0RlZmF1bHROYXZpZ2F0aW9uL1N0ZXAvU3RlcC5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBIdkF2YXRhciwgSHZCdXR0b24gfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXJlYWN0LWNvcmVcIjtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFJvb3QgPSBzdHlsZWQoXCJkaXZcIikoXG4gICh7ICRub3RDdXJyZW50IH06IHsgJG5vdEN1cnJlbnQ6IGJvb2xlYW4gfSkgPT4gKHtcbiAgICAuLi4oJG5vdEN1cnJlbnQgJiYge1xuICAgICAgbWFyZ2luOiBcIi04cHhcIixcbiAgICB9KSxcbiAgfSlcbik7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRCdXR0b24gPSBzdHlsZWQoSHZCdXR0b24pKHtcbiAgXCImOmhvdmVyXCI6IHtcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IFwidHJhbnNwYXJlbnRcIixcbiAgfSxcbiAgXCImJGdob3N0RGlzYWJsZWRcIjoge1xuICAgIGN1cnNvcjogXCJkZWZhdWx0XCIsXG4gIH0sXG4gIFwiJiRnaG9zdERpc2FibGVkJjpob3ZlclwiOiB7XG4gICAgY3Vyc29yOiBcImRlZmF1bHRcIixcbiAgfSxcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQXZhdGFyID0gc3R5bGVkKEh2QXZhdGFyKShcbiAgKHsgJHNpemUgfTogeyAkc2l6ZTogc3RyaW5nIH0pID0+ICh7XG4gICAgLi4uKCRzaXplID09PSBcInhzXCIgJiYge1xuICAgICAgZm9udFNpemU6IFwiMC42MjVyZW1cIixcbiAgICB9KSxcbiAgICAuLi4oJHNpemUgPT09IFwic21cIiAmJiB7XG4gICAgICBmb250U2l6ZTogXCIxcmVtXCIsXG4gICAgfSksXG4gICAgLi4uKCRzaXplID09PSBcIm1kXCIgJiYge1xuICAgICAgZm9udFNpemU6IFwiMS41cmVtXCIsXG4gICAgfSksXG4gICAgLi4uKCRzaXplID09PSBcImxnXCIgJiYge1xuICAgICAgZm9udFNpemU6IFwiMnJlbVwiLFxuICAgIH0pLFxuICAgIC4uLigkc2l6ZSA9PT0gXCJ4bFwiICYmIHtcbiAgICAgIGZvbnRTaXplOiBcIjIuNXJlbVwiLFxuICAgIH0pLFxuICB9KVxuKTtcbiJdfQ== */");
-const StyledButton = /* @__PURE__ */ _styled__default.default(uikitReactCore.HvButton, process.env.NODE_ENV === "production" ? {
-  target: "e1bnfr851"
-} : {
-  target: "e1bnfr851",
-  label: "StyledButton"
-})(process.env.NODE_ENV === "production" ? {
-  name: "olepyb",
-  styles: "&:hover{background-color:transparent;}&$ghostDisabled{cursor:default;}&$ghostDisabled&:hover{cursor:default;}"
-} : {
-  name: "olepyb",
-  styles: "&:hover{background-color:transparent;}&$ghostDisabled{cursor:default;}&$ghostDisabled&:hover{cursor:default;}",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2xhYi9zcmMvY29tcG9uZW50cy9TdGVwTmF2aWdhdGlvbi9EZWZhdWx0TmF2aWdhdGlvbi9TdGVwL1N0ZXAuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFXNEIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvbGFiL3NyYy9jb21wb25lbnRzL1N0ZXBOYXZpZ2F0aW9uL0RlZmF1bHROYXZpZ2F0aW9uL1N0ZXAvU3RlcC5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBIdkF2YXRhciwgSHZCdXR0b24gfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXJlYWN0LWNvcmVcIjtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFJvb3QgPSBzdHlsZWQoXCJkaXZcIikoXG4gICh7ICRub3RDdXJyZW50IH06IHsgJG5vdEN1cnJlbnQ6IGJvb2xlYW4gfSkgPT4gKHtcbiAgICAuLi4oJG5vdEN1cnJlbnQgJiYge1xuICAgICAgbWFyZ2luOiBcIi04cHhcIixcbiAgICB9KSxcbiAgfSlcbik7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRCdXR0b24gPSBzdHlsZWQoSHZCdXR0b24pKHtcbiAgXCImOmhvdmVyXCI6IHtcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IFwidHJhbnNwYXJlbnRcIixcbiAgfSxcbiAgXCImJGdob3N0RGlzYWJsZWRcIjoge1xuICAgIGN1cnNvcjogXCJkZWZhdWx0XCIsXG4gIH0sXG4gIFwiJiRnaG9zdERpc2FibGVkJjpob3ZlclwiOiB7XG4gICAgY3Vyc29yOiBcImRlZmF1bHRcIixcbiAgfSxcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQXZhdGFyID0gc3R5bGVkKEh2QXZhdGFyKShcbiAgKHsgJHNpemUgfTogeyAkc2l6ZTogc3RyaW5nIH0pID0+ICh7XG4gICAgLi4uKCRzaXplID09PSBcInhzXCIgJiYge1xuICAgICAgZm9udFNpemU6IFwiMC42MjVyZW1cIixcbiAgICB9KSxcbiAgICAuLi4oJHNpemUgPT09IFwic21cIiAmJiB7XG4gICAgICBmb250U2l6ZTogXCIxcmVtXCIsXG4gICAgfSksXG4gICAgLi4uKCRzaXplID09PSBcIm1kXCIgJiYge1xuICAgICAgZm9udFNpemU6IFwiMS41cmVtXCIsXG4gICAgfSksXG4gICAgLi4uKCRzaXplID09PSBcImxnXCIgJiYge1xuICAgICAgZm9udFNpemU6IFwiMnJlbVwiLFxuICAgIH0pLFxuICAgIC4uLigkc2l6ZSA9PT0gXCJ4bFwiICYmIHtcbiAgICAgIGZvbnRTaXplOiBcIjIuNXJlbVwiLFxuICAgIH0pLFxuICB9KVxuKTtcbiJdfQ== */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const StyledAvatar = /* @__PURE__ */ _styled__default.default(uikitReactCore.HvAvatar, process.env.NODE_ENV === "production" ? {
-  target: "e1bnfr850"
-} : {
-  target: "e1bnfr850",
-  label: "StyledAvatar"
-})(({
-  $size
-}) => ({
-  ...$size === "xs" && {
+  },
+  xs: {
     fontSize: "0.625rem"
   },
-  ...$size === "sm" && {
+  sm: {
     fontSize: "1rem"
   },
-  ...$size === "md" && {
+  md: {
     fontSize: "1.5rem"
   },
-  ...$size === "lg" && {
+  lg: {
     fontSize: "2rem"
   },
-  ...$size === "xl" && {
+  xl: {
     fontSize: "2.5rem"
-  }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2xhYi9zcmMvY29tcG9uZW50cy9TdGVwTmF2aWdhdGlvbi9EZWZhdWx0TmF2aWdhdGlvbi9TdGVwL1N0ZXAuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF1QjRCIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2xhYi9zcmMvY29tcG9uZW50cy9TdGVwTmF2aWdhdGlvbi9EZWZhdWx0TmF2aWdhdGlvbi9TdGVwL1N0ZXAuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgSHZBdmF0YXIsIEh2QnV0dG9uIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1yZWFjdC1jb3JlXCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRSb290ID0gc3R5bGVkKFwiZGl2XCIpKFxuICAoeyAkbm90Q3VycmVudCB9OiB7ICRub3RDdXJyZW50OiBib29sZWFuIH0pID0+ICh7XG4gICAgLi4uKCRub3RDdXJyZW50ICYmIHtcbiAgICAgIG1hcmdpbjogXCItOHB4XCIsXG4gICAgfSksXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQnV0dG9uID0gc3R5bGVkKEh2QnV0dG9uKSh7XG4gIFwiJjpob3ZlclwiOiB7XG4gICAgYmFja2dyb3VuZENvbG9yOiBcInRyYW5zcGFyZW50XCIsXG4gIH0sXG4gIFwiJiRnaG9zdERpc2FibGVkXCI6IHtcbiAgICBjdXJzb3I6IFwiZGVmYXVsdFwiLFxuICB9LFxuICBcIiYkZ2hvc3REaXNhYmxlZCY6aG92ZXJcIjoge1xuICAgIGN1cnNvcjogXCJkZWZhdWx0XCIsXG4gIH0sXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEF2YXRhciA9IHN0eWxlZChIdkF2YXRhcikoXG4gICh7ICRzaXplIH06IHsgJHNpemU6IHN0cmluZyB9KSA9PiAoe1xuICAgIC4uLigkc2l6ZSA9PT0gXCJ4c1wiICYmIHtcbiAgICAgIGZvbnRTaXplOiBcIjAuNjI1cmVtXCIsXG4gICAgfSksXG4gICAgLi4uKCRzaXplID09PSBcInNtXCIgJiYge1xuICAgICAgZm9udFNpemU6IFwiMXJlbVwiLFxuICAgIH0pLFxuICAgIC4uLigkc2l6ZSA9PT0gXCJtZFwiICYmIHtcbiAgICAgIGZvbnRTaXplOiBcIjEuNXJlbVwiLFxuICAgIH0pLFxuICAgIC4uLigkc2l6ZSA9PT0gXCJsZ1wiICYmIHtcbiAgICAgIGZvbnRTaXplOiBcIjJyZW1cIixcbiAgICB9KSxcbiAgICAuLi4oJHNpemUgPT09IFwieGxcIiAmJiB7XG4gICAgICBmb250U2l6ZTogXCIyLjVyZW1cIixcbiAgICB9KSxcbiAgfSlcbik7XG4iXX0= */");
-exports.StyledAvatar = StyledAvatar;
-exports.StyledButton = StyledButton;
-exports.StyledRoot = StyledRoot;
+  },
+  avatar: {}
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
 //# sourceMappingURL=Step.styles.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Step.styles.cjs","sources":["../../../../../../src/components/StepNavigation/DefaultNavigation/Step/Step.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { HvAvatar, HvButton } from \"@hitachivantara/uikit-react-core\";\n\nexport const StyledRoot = styled(\"div\")(\n  ({ $notCurrent }: { $notCurrent: boolean }) => ({\n    ...($notCurrent && {\n      margin: \"-8px\",\n    }),\n  })\n);\n\nexport const StyledButton = styled(HvButton)({\n  \"&:hover\": {\n    backgroundColor: \"transparent\",\n  },\n  \"&$ghostDisabled\": {\n    cursor: \"default\",\n  },\n  \"&$ghostDisabled&:hover\": {\n    cursor: \"default\",\n  },\n});\n\nexport const StyledAvatar = styled(HvAvatar)(\n  ({ $size }: { $size: string }) => ({\n    ...($size === \"xs\" && {\n      fontSize: \"0.625rem\",\n    }),\n    ...($size === \"sm\" && {\n      fontSize: \"1rem\",\n    }),\n    ...($size === \"md\" && {\n      fontSize: \"1.5rem\",\n    }),\n    ...($size === \"lg\" && {\n      fontSize: \"2rem\",\n    }),\n    ...($size === \"xl\" && {\n      fontSize: \"2.5rem\",\n    }),\n  })\n);\n"],"names":["StyledRoot","_styled","process","env","NODE_ENV","target","label","$notCurrent","margin","StyledButton","HvButton","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","StyledAvatar","HvAvatar","$size","fontSize"],"mappings":";;;;;;;;;AAGO,MAAMA,aAAoBC,iCAAA,QAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EACpC,CAAC;AAAA,EAAEC;AAAsC,OAAO;AAAA,EAC9C,GAAIA,eAAe;AAAA,IACjBC,QAAQ;AAAA,EACV;AACF,IAAEN,QAAAC,IAAAC,k0DACJ;AAEO,MAAMK,eAAsBC,iCAAAA,QAAAA,eAAAA,UAAQR,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAO,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAU3C;AAEM,MAAMC,eAAsBC,iCAAAA,QAAAA,eAAAA,UAAQf,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EACzC,CAAC;AAAA,EAAEY;AAAyB,OAAO;AAAA,EACjC,GAAIA,UAAU,QAAQ;AAAA,IACpBC,UAAU;AAAA,EACZ;AAAA,EACA,GAAID,UAAU,QAAQ;AAAA,IACpBC,UAAU;AAAA,EACZ;AAAA,EACA,GAAID,UAAU,QAAQ;AAAA,IACpBC,UAAU;AAAA,EACZ;AAAA,EACA,GAAID,UAAU,QAAQ;AAAA,IACpBC,UAAU;AAAA,EACZ;AAAA,EACA,GAAID,UAAU,QAAQ;AAAA,IACpBC,UAAU;AAAA,EACZ;AACF,IAAEjB,QAAAC,IAAAC,k0DACJ;;;;"}
+{"version":3,"file":"Step.styles.cjs","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: { fontSize: \"0.625rem\" },\n  sm: { fontSize: \"1rem\" },\n  md: { fontSize: \"1.5rem\" },\n  lg: { fontSize: \"2rem\" },\n  xl: { fontSize: \"2.5rem\" },\n  avatar: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root","ghost","backgroundColor","cursor","ghostDisabled","notCurrent","margin","xs","fontSize","sm","md","lg","xl","avatar"],"mappings":";;;AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,eAAAA,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;AAAA,IAAEC,UAAU;AAAA,EAAW;AAAA,EAC3BC,IAAI;AAAA,IAAED,UAAU;AAAA,EAAO;AAAA,EACvBE,IAAI;AAAA,IAAEF,UAAU;AAAA,EAAS;AAAA,EACzBG,IAAI;AAAA,IAAEH,UAAU;AAAA,EAAO;AAAA,EACvBI,IAAI;AAAA,IAAEJ,UAAU;AAAA,EAAS;AAAA,EACzBK,QAAQ,CAAC;AACX,CAAC;;;"}

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

@@ -1,13 +1,12 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const react = require("@emotion/react");
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const Dot_styles = require("./Dot.styles.cjs");
-const dotClasses = require("./dotClasses.cjs");
 const utils = require("../utils.cjs");
+const Dot_styles = require("./Dot.styles.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const HvDot = ({
-  classes,
+  classes: classesProp,
   className,
   state,
   title,
@@ -15,28 +14,32 @@ const HvDot = ({
   onClick,
   disabled
 }) => {
+  const {
+    classes,
+    cx,
+    css
+  } = Dot_styles.useClasses(classesProp);
   const dotSize = utils.dotSizes[size] * (state === "Current" ? 1.5 : 1);
-  return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
-    children: ({
-      css,
-      cx
-    }) => /* @__PURE__ */ jsxRuntime.jsx(Dot_styles.StyledButton, {
-      className: cx(dotClasses.default.root, state === "Current" && dotClasses.default.active, (disabled ?? ["Current", "Disabled"].includes(state)) && dotClasses.default.ghostDisabled, css({
-        backgroundColor: utils.getColor(state, uikitStyles.theme),
-        width: dotSize,
-        height: dotSize,
-        "&:hover": {
-          backgroundColor: utils.getColor(state, uikitStyles.theme)
-        }
-      }), className, classes == null ? void 0 : classes.root, state === "Current" && (classes == null ? void 0 : classes.active), (disabled ?? ["Current", "Disabled"].includes(state)) && (classes == null ? void 0 : classes.ghostDisabled)),
-      "aria-label": `step-${title}`,
-      icon: true,
-      overrideIconColors: false,
-      disabled: disabled ?? ["Current", "Disabled"].includes(state),
-      onClick,
-      children: []
-    })
+  return /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, {
+    className: cx(css({
+      backgroundColor: utils.getColor(state, uikitStyles.theme),
+      width: dotSize,
+      height: dotSize,
+      "&:hover": {
+        backgroundColor: utils.getColor(state, uikitStyles.theme)
+      }
+    }), classes.root, {
+      [classes.active]: state === "Current",
+      [classes.ghostDisabled]: disabled ?? ["Current", "Disabled"].includes(state)
+    }, className),
+    "aria-label": `step-${title}`,
+    icon: true,
+    overrideIconColors: false,
+    disabled: disabled ?? ["Current", "Disabled"].includes(state),
+    onClick,
+    children: []
   });
 };
+exports.dotClasses = Dot_styles.staticClasses;
 exports.HvDot = HvDot;
 //# sourceMappingURL=Dot.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Dot.cjs","sources":["../../../../../../src/components/StepNavigation/SimpleNavigation/Dot/Dot.tsx"],"sourcesContent":["import { HvBaseProps } from \"@hitachivantara/uikit-react-core\";\nimport { ClassNames } from \"@emotion/react\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { HvStepProps } from \"../../DefaultNavigation\";\nimport { StyledButton } from \"./Dot.styles\";\nimport dotClasses, { HvDotClasses } from \"./dotClasses\";\nimport { getColor, dotSizes } from \"../utils\";\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,\n  className,\n  state,\n  title,\n  size = \"sm\",\n  onClick,\n  disabled,\n}: HvDotProps) => {\n  const dotSize = dotSizes[size] * (state === \"Current\" ? 1.5 : 1);\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <StyledButton\n          className={cx(\n            dotClasses.root,\n            state === \"Current\" && dotClasses.active,\n            (disabled ?? [\"Current\", \"Disabled\"].includes(state)) &&\n              dotClasses.ghostDisabled,\n            css({\n              backgroundColor: getColor(state, theme),\n              width: dotSize,\n              height: dotSize,\n              \"&:hover\": {\n                backgroundColor: getColor(state, theme),\n              },\n            }),\n            className,\n            classes?.root,\n            state === \"Current\" && classes?.active,\n            (disabled ?? [\"Current\", \"Disabled\"].includes(state)) &&\n              classes?.ghostDisabled\n          )}\n          aria-label={`step-${title}`}\n          icon\n          overrideIconColors={false}\n          disabled={disabled ?? [\"Current\", \"Disabled\"].includes(state)}\n          onClick={onClick}\n        >\n          {[]}\n        </StyledButton>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["HvDot","classes","className","state","title","size","onClick","disabled","dotSize","dotSizes","ClassNames","children","css","cx","StyledButton","dotClasses","root","active","includes","ghostDisabled","backgroundColor","getColor","theme","width","height","icon","overrideIconColors"],"mappings":";;;;;;;;AAkBO,MAAMA,QAAQA,CAAC;AAAA,EACpBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,OAAO;AAAA,EACPC;AAAAA,EACAC;AACU,MAAM;AAChB,QAAMC,UAAUC,MAASJ,SAAAA,IAAI,KAAKF,UAAU,YAAY,MAAM;AAE9D,wCACGO,MAAAA,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,qCACNC,WAAAA,cAAY;AAAA,MACXZ,WAAWW,GACTE,mBAAWC,MACXb,UAAU,aAAaY,mBAAWE,SACjCV,YAAY,CAAC,WAAW,UAAU,EAAEW,SAASf,KAAK,MACjDY,WAAAA,QAAWI,eACbP,IAAI;AAAA,QACFQ,iBAAiBC,MAAAA,SAASlB,OAAOmB,iBAAK;AAAA,QACtCC,OAAOf;AAAAA,QACPgB,QAAQhB;AAAAA,QACR,WAAW;AAAA,UACTY,iBAAiBC,MAAAA,SAASlB,OAAOmB,iBAAK;AAAA,QACxC;AAAA,MAAA,CACD,GACDpB,WACAD,mCAASe,MACTb,UAAU,cAAaF,mCAASgB,UAC/BV,YAAY,CAAC,WAAW,UAAU,EAAEW,SAASf,KAAK,OACjDF,mCAASkB,cACb;AAAA,MACA,cAAa,QAAOf;AAAAA,MACpBqB,MAAI;AAAA,MACJC,oBAAoB;AAAA,MACpBnB,UAAUA,YAAY,CAAC,WAAW,UAAU,EAAEW,SAASf,KAAK;AAAA,MAC5DG;AAAAA,MAAiBK,UAEhB,CAAA;AAAA,IAAA,CACW;AAAA,EAAA,CAEN;AAEhB;;"}
+{"version":3,"file":"Dot.cjs","sources":["../../../../../../src/components/StepNavigation/SimpleNavigation/Dot/Dot.tsx"],"sourcesContent":["import {\n  ExtractNames,\n  HvBaseProps,\n  HvButton,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { 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,WAAAA,WAAWT,WAAW;AAEnD,QAAMU,UAAUC,MAASP,SAAAA,IAAI,KAAKF,UAAU,YAAY,MAAM;AAE9D,wCACGU,eAAAA,UAAQ;AAAA,IACPX,WAAWM,GACTC,IAAI;AAAA,MACFK,iBAAiBC,MAAAA,SAASZ,OAAOa,iBAAK;AAAA,MACtCC,OAAON;AAAAA,MACPO,QAAQP;AAAAA,MACR,WAAW;AAAA,QACTG,iBAAiBC,MAAAA,SAASZ,OAAOa,iBAAK;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;;;"}

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

@@ -1,25 +1,17 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const _styled = require("@emotion/styled/base");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-function _EMOTION_STRINGIFIED_CSS_ERROR__() {
-  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
-}
-const StyledButton = /* @__PURE__ */ _styled__default.default(uikitReactCore.HvButton, process.env.NODE_ENV === "production" ? {
-  target: "eyawp1r0"
-} : {
-  target: "eyawp1r0",
-  label: "StyledButton"
-})(process.env.NODE_ENV === "production" ? {
-  name: "18ft53n",
-  styles: "border-radius:50%;z-index:1"
-} : {
-  name: "18ft53n",
-  styles: "border-radius:50%;z-index:1",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2xhYi9zcmMvY29tcG9uZW50cy9TdGVwTmF2aWdhdGlvbi9TaW1wbGVOYXZpZ2F0aW9uL0RvdC9Eb3Quc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHNEIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvbGFiL3NyYy9jb21wb25lbnRzL1N0ZXBOYXZpZ2F0aW9uL1NpbXBsZU5hdmlnYXRpb24vRG90L0RvdC5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBIdkJ1dHRvbiB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtcmVhY3QtY29yZVwiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQnV0dG9uID0gc3R5bGVkKEh2QnV0dG9uKSh7XG4gIGJvcmRlclJhZGl1czogXCI1MCVcIixcbiAgekluZGV4OiAxLFxufSk7XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+const {
+  staticClasses,
+  useClasses
+} = uikitReactCore.createClasses("HvDot", {
+  root: {
+    borderRadius: "50%",
+    zIndex: 1
+  },
+  active: {},
+  ghostDisabled: {}
 });
-exports.StyledButton = StyledButton;
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
 //# sourceMappingURL=Dot.styles.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Dot.styles.cjs","sources":["../../../../../../src/components/StepNavigation/SimpleNavigation/Dot/Dot.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { HvButton } from \"@hitachivantara/uikit-react-core\";\n\nexport const StyledButton = styled(HvButton)({\n  borderRadius: \"50%\",\n  zIndex: 1,\n});\n"],"names":["StyledButton","HvButton","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__"],"mappings":";;;;;;;;;AAGO,MAAMA,eAAsBC,iCAAAA,QAAAA,eAAAA,UAAQC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAG,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAG3C;;"}
+{"version":3,"file":"Dot.styles.cjs","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,eAAAA,cAAc,SAAS;AAAA,EAClEC,MAAM;AAAA,IAAEC,cAAc;AAAA,IAAOC,QAAQ;AAAA,EAAE;AAAA,EACvCC,QAAQ,CAAC;AAAA,EACTC,eAAe,CAAC;AAClB,CAAC;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"SimpleNavigation.cjs","sources":["../../../../../src/components/StepNavigation/SimpleNavigation/SimpleNavigation.tsx"],"sourcesContent":["import {\n  HvBaseProps,\n  HvTheme,\n  useTheme,\n} from \"@hitachivantara/uikit-react-core\";\nimport { HvStepNavigationProps } from \"../StepNavigation\";\nimport { HvDot, HvDotProps } from \"./Dot\";\nimport { HvSimpleNavigationClasses } from \"./simpleNavigationClasses\";\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\n  extends Pick<HvStepNavigationProps, \"stepSize\">,\n    Omit<HvBaseProps, \"children\"> {\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  /** A Jss Object used to override or extend the styles applied to the empty state StepNavigation. */\n  classes?: HvSimpleNavigationClasses;\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":";;;;;;AAmDO,MAAMA,qBAAqBA,CAAC;AAAA,EACjCC;AAAAA,EACAC,WAAW;AAAA,EACXC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACoB,MAAM;AACvB,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,eAAS,SAAA;AAG3BC,QAAAA,UAAUC,eAASR,QAAQ;AACjC,QAAMS,gBAAgBC,IAAAA;AAGhBC,QAAAA,cAAcZ,WAAW,OAAOQ;AAChC,QAAA;AAAA,IAAEK;AAAAA,IAAOC;AAAAA,IAAYC;AAAAA,EAAAA,IAAmBZ,iBAAiBS,UAAU;AAGzE,QAAMI,WAAWC,KAAKC,IAAIJ,aAAaN,SAASO,cAAc;AAC9D,QAAMI,WAAWF,KAAKC,IAAIJ,aAAaN,UAAU,MAAMO,cAAc;AAGrE,QAAMK,QAAQhB;AAERiB,QAAAA,SAASnB,UAAU,CAAC;AAAA,IAAEoB;AAAAA,IAAUC;AAAAA,EAAAA,OAAc;AAAA,IAClDC,SAAS;AAAA,IACTC,OAAQ,GAAEF,WAAWD;AAAAA,IACrBR;AAAAA,EACA,EAAA;AAEF,yCACE,OAAA;AAAA,IAAA,GAAST;AAAAA,IAAMD,UACZiB,CAAAA,QACDK,2BAAAA,IAACN,OAAK;AAAA,MAEFR;AAAAA,MACAe,UAAUd;AAAAA,MACVe,iBAAiB;AAAA,QACfT;AAAAA,QACAH;AAAAA,QAAAA,UACAa,MAAAA;AAAAA,QACAC,SAAQxB,2CAAayB,eAAeC,0BAAyB;AAAA,MAC/D;AAAA,MACAC,YAAY;AAAA,QACVC,SAAS1B;AAAAA,QACT2B,SAAS,MAAM3B;AAAAA,QACfE;AAAAA,MACF;AAAA,IAAA,CAEH,CAAC;AAAA,EAAA,CACC;AAET;;"}
+{"version":3,"file":"SimpleNavigation.cjs","sources":["../../../../../src/components/StepNavigation/SimpleNavigation/SimpleNavigation.tsx"],"sourcesContent":["import {\n  HvBaseProps,\n  HvTheme,\n  useTheme,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { HvStepNavigationProps } from \"../StepNavigation\";\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\n  extends Pick<HvStepNavigationProps, \"stepSize\">,\n    Omit<HvBaseProps, \"children\"> {\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":";;;;;;AAiDO,MAAMA,qBAAqBA,CAAC;AAAA,EACjCC;AAAAA,EACAC,WAAW;AAAA,EACXC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACoB,MAAM;AACvB,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,eAAS,SAAA;AAG3BC,QAAAA,UAAUC,eAASR,QAAQ;AACjC,QAAMS,gBAAgBC,IAAAA;AAGhBC,QAAAA,cAAcZ,WAAW,OAAOQ;AAChC,QAAA;AAAA,IAAEK;AAAAA,IAAOC;AAAAA,IAAYC;AAAAA,EAAAA,IAAmBZ,iBAAiBS,UAAU;AAGzE,QAAMI,WAAWC,KAAKC,IAAIJ,aAAaN,SAASO,cAAc;AAC9D,QAAMI,WAAWF,KAAKC,IAAIJ,aAAaN,UAAU,MAAMO,cAAc;AAGrE,QAAMK,QAAQhB;AAERiB,QAAAA,SAASnB,UAAU,CAAC;AAAA,IAAEoB;AAAAA,IAAUC;AAAAA,EAAAA,OAAc;AAAA,IAClDC,SAAS;AAAA,IACTC,OAAQ,GAAEF,WAAWD;AAAAA,IACrBR;AAAAA,EACA,EAAA;AAEF,yCACE,OAAA;AAAA,IAAA,GAAST;AAAAA,IAAMD,UACZiB,CAAAA,QACDK,2BAAAA,IAACN,OAAK;AAAA,MAEFR;AAAAA,MACAe,UAAUd;AAAAA,MACVe,iBAAiB;AAAA,QACfT;AAAAA,QACAH;AAAAA,QAAAA,UACAa,MAAAA;AAAAA,QACAC,SAAQxB,2CAAayB,eAAeC,0BAAyB;AAAA,MAC/D;AAAA,MACAC,YAAY;AAAA,QACVC,SAAS1B;AAAAA,QACT2B,SAAS,MAAM3B;AAAAA,QACfE;AAAAA,MACF;AAAA,IAAA,CAEH,CAAC;AAAA,EAAA,CACC;AAET;;"}