@hitachivantara/uikit-react-lab 5.2.3 → 5.3.1

package/dist/esm/{packages/lab/src/components → components}/Wizard/WizardTitle/WizardTitle.js

@@ -1,13 +1,12 @@
 import { ClassNames } from "@emotion/react";
 import { HvDialogTitle, HvGrid, HvTypography, HvButton } from "@hitachivantara/uikit-react-core";
 import { Report } from "@hitachivantara/uikit-react-icons";
-import { clsx } from "../../../../../../node_modules/clsx/dist/clsx.m.js";
-import wizardTitleClasses from "./wizardTitleClasses.js";
-import { styles } from "./WizardTitle.styles.js";
 import { useContext, useState, useEffect } from "react";
-import { HvWizardContext } from "../WizardContext/WizardContext.js";
+import { styles } from "./WizardTitle.styles.js";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import wizardTitleClasses from "./wizardTitleClasses.js";
 import { HvStepNavigation } from "../../StepNavigation/StepNavigation.js";
+import HvWizardContext from "../WizardContext/WizardContext.js";
 const switchTabState = (state, currentTab, index) => {
   if (index === currentTab)
     return "Current";
@@ -60,23 +59,24 @@ const HvWizardTitle = ({
   };
   return /* @__PURE__ */ jsx(ClassNames, {
     children: ({
-      css
+      css,
+      cx
     }) => /* @__PURE__ */ jsx(HvDialogTitle, {
-      className: clsx(classes == null ? void 0 : classes.headerContainer, wizardTitleClasses.headerContainer, css(styles.headerContainer)),
+      className: cx(wizardTitleClasses.headerContainer, css(styles.headerContainer), classes == null ? void 0 : classes.headerContainer),
       classes: {
-        messageContainer: clsx(classes == null ? void 0 : classes.messageContainer, wizardTitleClasses.messageContainer, css(styles.messageContainer))
+        messageContainer: cx(wizardTitleClasses.messageContainer, css(styles.messageContainer), classes == null ? void 0 : classes.messageContainer)
       },
       children: /* @__PURE__ */ jsxs(HvGrid, {
         container: true,
         justifyContent: "space-between",
         alignItems: "center",
-        className: clsx(classes == null ? void 0 : classes.titleContainer, wizardTitleClasses.titleContainer, css(styles.titleContainer)),
+        className: cx(wizardTitleClasses.titleContainer, css(styles.titleContainer), classes == null ? void 0 : classes.titleContainer),
         children: [title && /* @__PURE__ */ jsx(HvTypography, {
           variant: "title3",
           component: "h3",
           children: title
         }), !!steps.length && /* @__PURE__ */ jsx(HvStepNavigation, {
-          className: clsx(classes == null ? void 0 : classes.stepContainer, wizardTitleClasses.stepContainer, css(styles.stepContainer)),
+          className: cx(wizardTitleClasses.stepContainer, css(styles.stepContainer), classes == null ? void 0 : classes.stepContainer),
           steps,
           type: (customStep == null ? void 0 : customStep.type) ?? "Default",
           stepSize: (customStep == null ? void 0 : customStep.stepSize) ?? "xs",
@@ -88,9 +88,9 @@ const HvWizardTitle = ({
           }
         }), hasSummary && /* @__PURE__ */ jsx(HvButton, {
           variant: "secondarySubtle",
-          className: clsx(classes == null ? void 0 : classes.buttonWidth, wizardTitleClasses.buttonWidth, css(styles.buttonWidth)),
+          className: cx(wizardTitleClasses.buttonWidth, css(styles.buttonWidth), classes == null ? void 0 : classes.buttonWidth),
           classes: {
-            root: clsx(classes == null ? void 0 : classes.rootSummaryButton, wizardTitleClasses.rootSummaryButton, css(styles.rootSummaryButton))
+            root: cx(wizardTitleClasses.rootSummaryButton, css(styles.rootSummaryButton), classes == null ? void 0 : classes.rootSummaryButton)
           },
           onClick: toggleSummary,
           startIcon: /* @__PURE__ */ jsx(Report, {}),

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

@@ -0,0 +1 @@
+{"version":3,"file":"WizardTitle.js","sources":["../../../../../src/components/Wizard/WizardTitle/WizardTitle.tsx"],"sourcesContent":["import { ClassNames } from \"@emotion/react\";\nimport {\n  HvBaseProps,\n  HvButton,\n  HvDialogTitle,\n  HvGrid,\n  HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Report } from \"@hitachivantara/uikit-react-icons\";\nimport { useContext, useEffect, useState } from \"react\";\nimport { HvStepNavigation, HvStepNavigationProps } from \"components\";\nimport { HvStepProps } from \"components/StepNavigation/DefaultNavigation\";\nimport { HvWizardContext, wizardTitleClasses, HvWizardTitleClasses } from \"..\";\nimport { styles } from \"./WizardTitle.styles\";\n\nexport interface HvWizardTitleProps extends HvBaseProps {\n  /** Title for the wizard. */\n  title?: string;\n  /** Shows the summary button. */\n  hasSummary?: boolean;\n  /** An object containing all the labels for the wizard header. */\n  labels?: {\n    /** Summary button label. */\n    summary?: string;\n  };\n  /** Custom object to define type, size and width of the StepNavigation component */\n  customStep?: Pick<HvStepNavigationProps, \"type\" | \"stepSize\" | \"width\">;\n  /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n  classes?: HvWizardTitleClasses;\n}\n\nconst switchTabState = (state, currentTab, index) => {\n  if (index === currentTab) return \"Current\";\n  if (state.valid) return \"Completed\";\n  if (state.valid === null) return \"Enabled\";\n  if (state.touched && state.valid === false) return \"Failed\";\n  // \"Disabled\"\n  // \"Pending\"\n  return \"Enabled\";\n};\n\nexport const HvWizardTitle = ({\n  title,\n  hasSummary = false,\n  labels = {},\n  classes,\n  customStep = {},\n}: HvWizardTitleProps) => {\n  const { context, summary, setSummary, tab, setTab } =\n    useContext(HvWizardContext);\n\n  const [steps, setSteps] = useState<HvStepProps[]>([]);\n\n  useEffect(() => {\n    if (summary === null && hasSummary) {\n      setSummary(false);\n    }\n\n    return () => {\n      setSummary(false);\n    };\n  }, []);\n\n  useEffect(() => {\n    const contextArray = Object.entries(context);\n\n    if (contextArray.length) {\n      const updatedSteps: HvStepProps[] = contextArray.map(\n        ([, childState], index) => {\n          return {\n            title: childState?.name ?? `${index + 1}`,\n            state: switchTabState(childState, tab, index),\n            onClick: () => setTab(index),\n          };\n        }\n      );\n\n      setSteps(updatedSteps);\n    }\n  }, [context, tab, setTab]);\n\n  const toggleSummary = () => {\n    setSummary((oldSummary) => !oldSummary);\n  };\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <HvDialogTitle\n          className={cx(\n            wizardTitleClasses.headerContainer,\n            css(styles.headerContainer),\n            classes?.headerContainer\n          )}\n          classes={{\n            messageContainer: cx(\n              wizardTitleClasses.messageContainer,\n              css(styles.messageContainer),\n              classes?.messageContainer\n            ),\n          }}\n        >\n          <HvGrid\n            container\n            justifyContent=\"space-between\"\n            alignItems=\"center\"\n            className={cx(\n              wizardTitleClasses.titleContainer,\n              css(styles.titleContainer),\n              classes?.titleContainer\n            )}\n          >\n            {title && (\n              <HvTypography variant=\"title3\" component=\"h3\">\n                {title}\n              </HvTypography>\n            )}\n            {!!steps.length && (\n              <HvStepNavigation\n                className={cx(\n                  wizardTitleClasses.stepContainer,\n                  css(styles.stepContainer),\n                  classes?.stepContainer\n                )}\n                steps={steps}\n                type={customStep?.type ?? \"Default\"}\n                stepSize={customStep?.stepSize ?? \"xs\"}\n                width={\n                  customStep?.width ?? { xs: 200, sm: 350, md: 600, lg: 800 }\n                }\n              />\n            )}\n            {hasSummary && (\n              <HvButton\n                variant=\"secondarySubtle\"\n                className={cx(\n                  wizardTitleClasses.buttonWidth,\n                  css(styles.buttonWidth),\n                  classes?.buttonWidth\n                )}\n                classes={{\n                  root: cx(\n                    wizardTitleClasses.rootSummaryButton,\n                    css(styles.rootSummaryButton),\n                    classes?.rootSummaryButton\n                  ),\n                }}\n                onClick={toggleSummary}\n                startIcon={<Report />}\n              >\n                {`${labels.summary ?? \"Summary\"}`}\n              </HvButton>\n            )}\n          </HvGrid>\n        </HvDialogTitle>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["switchTabState","state","currentTab","index","valid","touched","HvWizardTitle","title","hasSummary","labels","classes","customStep","context","summary","setSummary","tab","setTab","useContext","HvWizardContext","steps","setSteps","useState","useEffect","contextArray","Object","entries","length","updatedSteps","map","childState","name","onClick","toggleSummary","oldSummary","ClassNames","children","css","cx","HvDialogTitle","className","wizardTitleClasses","headerContainer","styles","messageContainer","HvGrid","container","justifyContent","alignItems","titleContainer","_jsx","HvTypography","variant","component","HvStepNavigation","stepContainer","type","stepSize","width","xs","sm","md","lg","HvButton","buttonWidth","root","rootSummaryButton","startIcon","Report"],"mappings":"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"}

package/dist/esm/{packages/lab/src/components → components}/Wizard/WizardTitle/WizardTitle.styles.js

@@ -1,4 +1,4 @@
-import { theme } from "@hitachivantara/uikit-react-core";
+import { theme } from "@hitachivantara/uikit-styles";
 const styles = {
   messageContainer: {
     "& > div": {

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

@@ -0,0 +1 @@
+{"version":3,"file":"WizardTitle.styles.js","sources":["../../../../../src/components/Wizard/WizardTitle/WizardTitle.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { HvWizardTitleClasses } from \"./wizardTitleClasses\";\n\nexport const styles: Partial<\n  Record<keyof HvWizardTitleClasses, CSSInterpolation>\n> = {\n  messageContainer: {\n    \"& > div\": {\n      width: \"100%\",\n    },\n  },\n  titleContainer: {\n    margin: 0,\n    width: \"100%\",\n  },\n  buttonWidth: {\n    width: 120,\n  },\n  rootSummaryButton: {\n    paddingRight: 18,\n  },\n  headerContainer: {\n    backgroundColor: theme.colors.atmo2,\n    \"& h6\": {\n      fontSize: \"16px\",\n      fontWeight: \"bold\",\n      letterSpacing: 0,\n    },\n  },\n  stepContainer: {\n    margin: \"auto\",\n  },\n};\n"],"names":["styles","messageContainer","width","titleContainer","margin","buttonWidth","rootSummaryButton","paddingRight","headerContainer","backgroundColor","theme","colors","atmo2","fontSize","fontWeight","letterSpacing","stepContainer"],"mappings":";AAIO,MAAMA,SAET;AAAA,EACFC,kBAAkB;AAAA,IAChB,WAAW;AAAA,MACTC,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACAC,gBAAgB;AAAA,IACdC,QAAQ;AAAA,IACRF,OAAO;AAAA,EACT;AAAA,EACAG,aAAa;AAAA,IACXH,OAAO;AAAA,EACT;AAAA,EACAI,mBAAmB;AAAA,IACjBC,cAAc;AAAA,EAChB;AAAA,EACAC,iBAAiB;AAAA,IACfC,iBAAiBC,MAAMC,OAAOC;AAAAA,IAC9B,QAAQ;AAAA,MACNC,UAAU;AAAA,MACVC,YAAY;AAAA,MACZC,eAAe;AAAA,IACjB;AAAA,EACF;AAAA,EACAC,eAAe;AAAA,IACbZ,QAAQ;AAAA,EACV;AACF;"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"wizardTitleClasses.js","sources":["../../../../../src/components/Wizard/WizardTitle/wizardTitleClasses.ts"],"sourcesContent":["import { getClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport type HvWizardTitleClasses = {\n  /** Styles applied to the header container. */\n  headerContainer?: string;\n  /** Styles applied to override the Dialog Title styles. */\n  messageContainer?: string;\n  /** Styles applied to the header content container. */\n  titleContainer?: string;\n  /** Styles applied to the Button component to override its width. */\n  buttonWidth?: string;\n  /** Styles applied to the Button component to override its right padding. */\n  rootSummaryButton?: string;\n  /** Styles applies to the step container. */\n  stepContainer?: string;\n};\n\nconst classKeys: (keyof HvWizardTitleClasses)[] = [\n  \"headerContainer\",\n  \"messageContainer\",\n  \"titleContainer\",\n  \"buttonWidth\",\n  \"rootSummaryButton\",\n  \"stepContainer\",\n];\n\nconst wizardTitleClasses = getClasses(classKeys, \"HvWizardTitle\");\n\nexport default wizardTitleClasses;\n"],"names":["classKeys","wizardTitleClasses","getClasses"],"mappings":";AAiBA,MAAMA,YAA4C,CAChD,mBACA,oBACA,kBACA,eACA,qBACA,eAAe;AAGjB,MAAMC,qBAAqBC,WAAWF,WAAW,eAAe;AAEhE,MAAA,uBAAeC;"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"wizardClasses.js","sources":["../../../../src/components/Wizard/wizardClasses.ts"],"sourcesContent":["import { getClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport type HvWizardClasses = {\n  /** Styles applied to the component root class. */\n  root?: string;\n};\n\nconst classKeys: (keyof HvWizardClasses)[] = [\"root\"];\n\nconst wizardClasses = getClasses(classKeys, \"HvWizard\");\n\nexport default wizardClasses;\n"],"names":["classKeys","wizardClasses","getClasses"],"mappings":";AAOA,MAAMA,YAAuC,CAAC,MAAM;AAEpD,MAAMC,gBAAgBC,WAAWF,WAAW,UAAU;AAEtD,MAAA,kBAAeC;"}

package/dist/esm/{packages/lab/src/index.js → index.js}

@@ -8,7 +8,7 @@ import { default as default5 } from "./components/Wizard/WizardContainer/wizardC
 import { HvWizardContainer } from "./components/Wizard/WizardContainer/WizardContainer.js";
 import { default as default6 } from "./components/Wizard/WizardContent/wizardContentClasses.js";
 import { HvWizardContent } from "./components/Wizard/WizardContent/WizardContent.js";
-import { HvWizardContext, default as default7 } from "./components/Wizard/WizardContext/WizardContext.js";
+import { default as default7 } from "./components/Wizard/WizardContext/WizardContext.js";
 import { default as default8 } from "./components/Wizard/WizardTitle/wizardTitleClasses.js";
 import { HvWizardTitle } from "./components/Wizard/WizardTitle/WizardTitle.js";
 export {
@@ -17,8 +17,7 @@ export {
   HvWizardActions,
   HvWizardContainer,
   HvWizardContent,
-  HvWizardContext,
-  default7 as HvWizardProvider,
+  default7 as HvWizardContext,
   HvWizardTitle,
   default2 as stepNavigationClasses,
   default4 as wizardActionsClasses,

package/dist/types/index.d.ts

@@ -3,6 +3,7 @@ import { HvAvatarSize } from '@hitachivantara/uikit-react-core';
 import { HvBaseProps } from '@hitachivantara/uikit-react-core';
 import { HvBreakpoints } from '@hitachivantara/uikit-react-core';
 import { HvButtonProps } from '@hitachivantara/uikit-react-core';
+import { HvStepNavigationProps as HvStepNavigationProps_2 } from 'components';
 import type { JSX as JSX_2 } from '@emotion/react/jsx-runtime';
 import { ModalProps } from '@mui/material';
 import { default as React_2 } from 'react';
@@ -204,11 +205,11 @@ export declare interface HvWizardContentProps extends HvBaseProps {
 export declare const HvWizardContext: React_2.Context<HvWizardContextProp>;
 
 declare type HvWizardContextProp = {
-    context: HvWizardTabs<HvWizardTab>;
-    updateContext: (values?: HvWizardTabs<HvWizardTab>) => void;
-    summary: any;
-    setSummary: (oldSummary?: any) => void;
-    tab: any;
+    context: HvWizardTabs;
+    setContext: React_2.Dispatch<React_2.SetStateAction<HvWizardTabs>>;
+    summary: boolean;
+    setSummary: React_2.Dispatch<React_2.SetStateAction<boolean>>;
+    tab: number;
     setTab: Dispatch<SetStateAction<number>>;
 };
 
@@ -218,7 +219,7 @@ export declare interface HvWizardProps extends HvBaseProps {
     /** Function executed on close. */
     onClose: ModalProps["onClose"];
     /** Function executed on submit. */
-    handleSubmit: (context: HvWizardTabs<HvWizardTab>) => void;
+    handleSubmit: (context: HvWizardTabs) => void;
     /** Title for the wizard. */
     title?: string;
     /** An object containing all the labels for the wizard. */
@@ -239,10 +240,6 @@ export declare interface HvWizardProps extends HvBaseProps {
     classes?: HvWizardClasses;
 }
 
-export declare const HvWizardProvider: ({ children }: {
-    children: any;
-}) => JSX_2.Element;
-
 export declare type HvWizardTab = {
     name?: string;
     valid?: boolean;
@@ -250,10 +247,11 @@ export declare type HvWizardTab = {
     touched?: boolean;
     form?: any;
     children?: React_2.ReactNode;
+    [other: string]: any;
 };
 
-export declare type HvWizardTabs<T extends HvWizardTab> = {
-    [tab in number]?: T;
+export declare type HvWizardTabs = {
+    [tab in number]?: HvWizardTab;
 };
 
 export declare const HvWizardTitle: ({ title, hasSummary, labels, classes, customStep, }: HvWizardTitleProps) => JSX_2.Element;
@@ -284,7 +282,7 @@ export declare interface HvWizardTitleProps extends HvBaseProps {
         summary?: string;
     };
     /** Custom object to define type, size and width of the StepNavigation component */
-    customStep?: Pick<HvStepNavigationProps, "type" | "stepSize" | "width">;
+    customStep?: Pick<HvStepNavigationProps_2, "type" | "stepSize" | "width">;
     /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */
     classes?: HvWizardTitleClasses;
 }
@@ -299,8 +297,8 @@ export declare const stepNavigationClasses: {
 
 export declare const wizardActionsClasses: {
     actionsContainer: "HvWizardActions-actionsContainer";
-    buttonWidth: "HvWizardActions-buttonWidth";
     buttonsContainer: "HvWizardActions-buttonsContainer";
+    buttonWidth: "HvWizardActions-buttonWidth";
     buttonSpacing: "HvWizardActions-buttonSpacing";
 };
 
@@ -310,8 +308,8 @@ export declare const wizardClasses: {
 
 export declare const wizardContainerClasses: {
     root: "HvWizardContainer-root";
-    paper: "HvWizardContainer-paper";
     closeButton: "HvWizardContainer-closeButton";
+    paper: "HvWizardContainer-paper";
 };
 
 export declare const wizardContentClasses: {
@@ -326,8 +324,8 @@ export declare const wizardTitleClasses: {
     titleContainer: "HvWizardTitle-titleContainer";
     messageContainer: "HvWizardTitle-messageContainer";
     buttonWidth: "HvWizardTitle-buttonWidth";
-    rootSummaryButton: "HvWizardTitle-rootSummaryButton";
     headerContainer: "HvWizardTitle-headerContainer";
+    rootSummaryButton: "HvWizardTitle-rootSummaryButton";
     stepContainer: "HvWizardTitle-stepContainer";
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-lab",
-  "version": "5.2.3",
+  "version": "5.3.1",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Contributed React components for the NEXT UI Kit.",
@@ -30,7 +30,8 @@
   },
   "dependencies": {
     "@emotion/cache": "^11.10.5",
-    "@hitachivantara/uikit-react-core": "^5.6.0",
+    "@hitachivantara/uikit-react-core": "^5.7.1",
+    "clsx": "^1.2.1",
     "usehooks-ts": "^2.9.1"
   },
   "files": [
@@ -40,7 +41,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "e0cc7fc6f24f7579f5bfb56435315925e30ae725",
+  "gitHead": "c3b256edc78382d2ccb89104a5570d076dd52034",
   "main": "dist/cjs/index.cjs",
   "exports": {
     ".": {

package/dist/cjs/packages/lab/src/components/StepNavigation/DefaultNavigation/DefaultNavigation.cjs.map

@@ -1 +0,0 @@
-{"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/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,eAAU,SAAA;AAG5B,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,cAAc;AAIhB,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,IAAC,CAAA,GAGJW,MAAM;AAAA,EAAA,CACH;AAEV;;"}

package/dist/cjs/packages/lab/src/components/StepNavigation/DefaultNavigation/Step/Step.cjs.map

@@ -1 +0,0 @@
-{"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 { StyledRoot, StyledButton, StyledAvatar } from \"./Step.styles\";\nimport stepClasses, { HvStepClasses } from \"./stepClasses\";\nimport { getColor, getSemantic } from \"../utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\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,OAAAA,KACTjC,WACAkC,YAAAA,QAAYC,MACZlC,mCAASkC,MACTjC,UAAU,aAAa+B,OAAKC,KAAAA,YAAAA,QAAYE,YAAYnC,mCAASmC,UAAU,CAAC;AAAA,IAE1EC,aAAanC,UAAU;AAAA,IAAUoC,yCAEhCC,0BAAY;AAAA,MACXvC,WAAWiC,OAAAA,KACTC,YAAAA,QAAYM,OACZvC,mCAASuC,OACTtC,UAAU,aACR+B,OAAKC,KAAAA,YAAAA,QAAYO,eAAexC,mCAASwC,aAAa,CAAC;AAAA,MAE3D,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,OACTC,KAAAA,oBAAYa,QACZ9C,mCAAS8C,QACTb,YAAAA,QAAY5B,IAAI,GAChBL,mCAAUK,KAAK;AAAA,QAEjBc;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,QAAmB,CAAA,IAGrBD;AAAAA,MAAAA,CACD;AAAA,IAAA,CACY;AAAA,EAAA,CAEN;AAEjB;;"}

package/dist/cjs/packages/lab/src/components/StepNavigation/DefaultNavigation/Step/Step.styles.cjs.map

@@ -1 +0,0 @@
-{"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,aACH,eAAA,KAAA,iyDAAA;AAEM,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,CAU1C;AAEK,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,aACH,eAAA,KAAA,iyDAAA;;;;"}

package/dist/cjs/packages/lab/src/components/StepNavigation/DefaultNavigation/Step/stepClasses.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"stepClasses.cjs","sources":["../../../../../../../../../src/components/StepNavigation/DefaultNavigation/Step/stepClasses.ts"],"sourcesContent":["import { getClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport interface HvStepClasses {\n  /** Styles applied to the component root class. */\n  root?: string;\n  /** Styles applied to the ghost class. */\n  ghost?: string;\n  /** Styles applied to the ghostDisabled class. */\n  ghostDisabled?: string;\n  /** Styles applied to the root element when step is not in \"current\" state. */\n  notCurrent?: string;\n  /** Styles applied to the root element when size is XS. */\n  xs?: string;\n  /** Styles applied to the root element when size is SM. */\n  sm?: string;\n  /** Styles applied to the root element when size is MD. */\n  md?: string;\n  /** Styles applied to the root element when size is LG. */\n  lg?: string;\n  /** Styles applied to the root element when size is XL. */\n  xl?: string;\n  /** Styles applied to the avatar element. */\n  avatar?: string;\n  /** Styles applied to the title of a step element. */\n  stepTitle?: string;\n}\n\nconst classKeys: (keyof HvStepClasses)[] = [\n  \"root\",\n  \"ghost\",\n  \"ghostDisabled\",\n  \"notCurrent\",\n  \"xs\",\n  \"sm\",\n  \"md\",\n  \"lg\",\n  \"xl\",\n  \"avatar\",\n  \"stepTitle\",\n];\n\nconst stepClasses = getClasses(classKeys, \"HvStep\");\n\nexport default stepClasses;\n"],"names":["classKeys","stepClasses","getClasses"],"mappings":";;;AA2BA,MAAMA,YAAqC,CACzC,QACA,SACA,iBACA,cACA,MACA,MACA,MACA,MACA,MACA,UACA,WAAW;AAGb,MAAMC,cAAcC,eAAWF,WAAAA,WAAW,QAAQ;AAElD,MAAA,gBAAeC;;"}

package/dist/cjs/packages/lab/src/components/StepNavigation/DefaultNavigation/utils.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.cjs","sources":["../../../../../../../../src/components/StepNavigation/DefaultNavigation/utils.ts"],"sourcesContent":["const getColor = (state, theme) =>\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\nconst getSemantic = (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\nconst stepSizes = {\n  xs: EXTRA_SMALL,\n  sm: SMALL,\n  md: MEDIUM,\n  lg: LARGE,\n  xl: EXTRA_LARGE,\n};\n\nexport { getColor, getSemantic, stepSizes };\n"],"names":["getColor","state","theme","Pending","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":";;AAAMA,MAAAA,WAAWA,CAACC,OAAOC,WACtB;AAAA,EACCC,SAASD,MAAME,OAAOC,WAAW;AAAA,EACjCC,QAAQJ,MAAME,OAAOG,YAAY;AAAA,EACjCC,WAAWN,MAAME,OAAOK,YAAY;AAAA,EACpCC,SAASR,MAAME,OAAOO,aAAa;AAAA,EACnCC,UAAUV,MAAME,OAAOS,gBAAgB;AAAA,EACvCC,SAASZ,MAAME,OAAOO,aAAa;AACrC,GAAEV,KAAK;AAET,MAAMc,cAAed,CAClB,WAAA;AAAA,EACCE,SAAS;AAAA,EACTG,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;AAEhD,MAAMK,YAAY;AAAA,EAChBC,IAAIR;AAAAA,EACJS,IAAIN;AAAAA,EACJO,IAAIN;AAAAA,EACJO,IAAIN;AAAAA,EACJO,IAAIN;AACN;;;;"}

package/dist/cjs/packages/lab/src/components/StepNavigation/SimpleNavigation/Dot/Dot.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Dot.cjs","sources":["../../../../../../../../../src/components/StepNavigation/SimpleNavigation/Dot/Dot.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { HvBaseProps } from \"@hitachivantara/uikit-react-core\";\nimport { HvStepProps } from \"../../DefaultNavigation/Step/Step\";\nimport { StyledButton } from \"./Dot.styles\";\nimport dotClasses, { HvDotClasses } from \"./dotClasses\";\nimport { getColor, dotSizes } from \"../utils\";\nimport { ClassNames } from \"@emotion/react\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\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 }) => (\n        <StyledButton\n          className={clsx(\n            className,\n            classes?.root,\n            dotClasses.root,\n            css({\n              backgroundColor: getColor(state, theme),\n              width: dotSize,\n              height: dotSize,\n              \"&:hover\": {\n                backgroundColor: getColor(state, theme),\n              },\n            }),\n            state === \"Current\" && clsx(dotClasses.active, classes?.active),\n            (disabled ?? [\"Current\", \"Disabled\"].includes(state)) &&\n              clsx(dotClasses.ghostDisabled, 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","StyledButton","clsx","root","dotClasses","backgroundColor","getColor","theme","width","height","active","includes","ghostDisabled","icon","overrideIconColors"],"mappings":";;;;;;;;;AAmBO,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,IAAAA,qCACDC,WAAAA,cAAY;AAAA,MACXX,WAAWY,OACTZ,KAAAA,WACAD,mCAASc,MACTC,WAAAA,QAAWD,MACXH,IAAI;AAAA,QACFK,iBAAiBC,MAAAA,SAASf,OAAOgB,iBAAK;AAAA,QACtCC,OAAOZ;AAAAA,QACPa,QAAQb;AAAAA,QACR,WAAW;AAAA,UACTS,iBAAiBC,MAAAA,SAASf,OAAOgB,iBAAK;AAAA,QACxC;AAAA,MAAA,CACD,GACDhB,UAAU,aAAaW,YAAKE,WAAAA,QAAWM,QAAQrB,mCAASqB,MAAM,IAC7Df,YAAY,CAAC,WAAW,UAAU,EAAEgB,SAASpB,KAAK,MACjDW,YAAKE,WAAAA,QAAWQ,eAAevB,mCAASuB,aAAa,CAAC;AAAA,MAE1D,cAAa,QAAOpB;AAAAA,MACpBqB,MAAI;AAAA,MACJC,oBAAoB;AAAA,MACpBnB,UAAUA,YAAY,CAAC,WAAW,UAAU,EAAEgB,SAASpB,KAAK;AAAA,MAC5DG;AAAAA,MAAiBK,UAEhB,CAAA;AAAA,IAAA,CAAE;AAAA,EAAA,CAGI;AAEjB;;"}

package/dist/cjs/packages/lab/src/components/StepNavigation/SimpleNavigation/Dot/Dot.styles.cjs.map

@@ -1 +0,0 @@
-{"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,CAG1C;;"}

package/dist/cjs/packages/lab/src/components/StepNavigation/SimpleNavigation/Dot/dotClasses.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"dotClasses.cjs","sources":["../../../../../../../../../src/components/StepNavigation/SimpleNavigation/Dot/dotClasses.ts"],"sourcesContent":["import { getClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport interface HvDotClasses {\n  root?: string;\n  active?: string;\n  ghostDisabled?: string;\n}\n\nconst classKeys: (keyof HvDotClasses)[] = [\"root\", \"active\", \"ghostDisabled\"];\n\nconst dotClasses = getClasses(classKeys, \"HvDot\");\n\nexport default dotClasses;\n"],"names":["classKeys","dotClasses","getClasses"],"mappings":";;;AAQA,MAAMA,YAAoC,CAAC,QAAQ,UAAU,eAAe;AAE5E,MAAMC,aAAaC,eAAWF,WAAAA,WAAW,OAAO;AAEhD,MAAA,eAAeC;;"}

package/dist/cjs/packages/lab/src/components/StepNavigation/SimpleNavigation/SimpleNavigation.cjs.map

@@ -1 +0,0 @@
-{"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/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,eAAU,SAAA;AAG5BC,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,CAEF,CAAA;AAAA,EAAA,CACE;AAEV;;"}

package/dist/cjs/packages/lab/src/components/StepNavigation/SimpleNavigation/utils.cjs.map

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