npm - @hitachivantara/uikit-react-lab - Versions diffs - 5.4.20 → 5.4.22 - Mend

@hitachivantara/uikit-react-lab 5.4.20 → 5.4.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (116) hide show

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"WizardContent.cjs","sources":["../../../../../src/components/Wizard/WizardContent/WizardContent.tsx"],"sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps /\nimport { ClassNames } from \"@emotion/react\";\nimport { HvBaseProps, HvDialogContent } from \"@hitachivantara/uikit-react-core\";\nimport { useElementSize } from \"usehooks-ts\";\nimport React, {\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport {\n HvWizardContext,\n HvWizardTabs,\n wizardContentClasses,\n HvWizardContentClasses,\n} from \"..\";\nimport { styles } from \"./WizardContent.styles\";\nimport { LoadingContainer } from \"./LoadingContainer\";\n\nexport interface HvWizardContentProps extends HvBaseProps {\n /* Forces minimum height to the component. /\n fixedHeight?: boolean;\n /* Whether the loading animation is shown. /\n loading?: boolean;\n /* The content of the summary. /\n summaryContent?: React.ReactNode;\n /* A Jss Object used to override or extend the styles applied to the empty state Wizard. /\n classes?: HvWizardContentClasses;\n}\n\ntype ChildElement = React.ReactElement<HvWizardTabs>;\n\nconst DRAWER_PERCENTAGE = 0.3;\nconst DRAWER_MIN_WIDTH = 280;\n\nexport const HvWizardContent = ({\n classes,\n fixedHeight = false,\n loading = false,\n children,\n summaryContent,\n}: HvWizardContentProps) => {\n const { context, setContext, summary, tab } = useContext(HvWizardContext);\n\n const arrayChildren = React.Children.toArray(children) as ChildElement[];\n\n const initialContext = arrayChildren.reduce(\n (acc, child: ChildElement, index) => {\n const invalid =\n \"mustValidate\" in child.props && child.props.mustValidate === true\n ? false\n : null;\n const valid = invalid ?? (index === 0 \|\| null);\n return {\n ...acc,\n [index]: { ...child.props, form: {}, valid, touched: index === 0 },\n };\n },\n {}\n );\n\n const summaryRef = useRef<HTMLElement>();\n const resizedRef = useRef({ height: 0, width: 0 });\n const [containerRef, sizes] = useElementSize();\n\n const [summaryHeight, setSummaryHeight] = useState(0);\n const [summaryWidth, setSummaryWidth] = useState(0);\n const [summaryLeft, setSummaryLeft] = useState(0);\n\n const updateSummaryMeasures = useCallback((newSizes) => {\n const modalWidth = newSizes.width;\n const drawerWidth = modalWidth DRAWER_PERCENTAGE;\n setSummaryHeight(newSizes.height);\n setSummaryWidth(Math.max(drawerWidth, DRAWER_MIN_WIDTH));\n setSummaryLeft(modalWidth - Math.max(drawerWidth, DRAWER_MIN_WIDTH));\n\n resizedRef.current = {\n height: newSizes.height,\n width: newSizes.width,\n };\n }, []);\n\n useEffect(() => {\n const pageHeight = summaryRef.current?.getBoundingClientRect?.()?.height;\n if (\n (summary && sizes.height !== resizedRef.current.height) \|\|\n sizes.width !== resizedRef.current.width\n ) {\n updateSummaryMeasures(sizes);\n }\n\n if (pageHeight && sizes.height !== pageHeight) {\n updateSummaryMeasures({\n width: sizes.width,\n height: pageHeight,\n });\n }\n }, [tab, sizes, summary, updateSummaryMeasures]);\n\n useEffect(() => {\n setContext(initialContext);\n }, []);\n\n useEffect(() => {\n if (tab && !context[tab]?.touched) {\n const updatedContext = Object.entries(context).reduce(\n (acc, [key, childState]) => ({\n ...acc,\n ...(+key <= tab\n ? {\n [key]: {\n ...childState,\n touched: true,\n valid: childState?.valid ?? true,\n },\n }\n : { [key]: childState }),\n }),\n {}\n );\n\n setContext(updatedContext);\n }\n }, [tab, context, setContext]);\n\n const translateX = summaryWidth ? summaryWidth + 10 : 450;\n\n return (\n <ClassNames>\n {({ css, cx }) => (\n <div\n className={cx(\n wizardContentClasses.summaryRef,\n css(styles.summaryRef),\n classes?.summaryRef\n )}\n ref={(el) => {\n containerRef(el);\n if (el) {\n summaryRef.current = el;\n }\n }}\n >\n {summary !== null && (\n <div\n className={cx(\n wizardContentClasses.summarySticky,\n css(styles.summarySticky),\n classes?.summarySticky\n )}\n >\n <div\n className={cx(\n wizardContentClasses.summaryContainer,\n css(styles.summaryContainer),\n classes?.summaryContainer\n )}\n style={{\n left: summaryLeft,\n width: summaryWidth,\n height: summaryHeight,\n transform: `translate(${summary ? 0 : translateX}px, 0)`,\n }}\n >\n {summaryContent}\n </div>\n </div>\n )}\n <HvDialogContent\n className={cx(\n wizardContentClasses.contentContainer,\n fixedHeight && wizardContentClasses.fixedHeight,\n css(styles.contentContainer),\n fixedHeight && css(styles.fixedHeight),\n classes?.contentContainer,\n fixedHeight && classes?.fixedHeight\n )}\n indentContent\n >\n <LoadingContainer hidden={!loading}>\n {React.Children.map(arrayChildren, (child, index) => {\n if (index === tab) {\n return React.cloneElement(child as React.ReactElement, {\n tab,\n });\n }\n return null;\n })}\n </LoadingContainer>\n </HvDialogContent>\n </div>\n )}\n </ClassNames>\n );\n};\n"],"names":["DRAWER_PERCENTAGE","DRAWER_MIN_WIDTH","HvWizardContent","classes","fixedHeight","loading","children","summaryContent","context","setContext","summary","tab","useContext","HvWizardContext","arrayChildren","React","Children","toArray","initialContext","reduce","acc","child","index","invalid","props","mustValidate","valid","form","touched","summaryRef","useRef","resizedRef","height","width","containerRef","sizes","useElementSize","summaryHeight","setSummaryHeight","useState","summaryWidth","setSummaryWidth","summaryLeft","setSummaryLeft","updateSummaryMeasures","useCallback","newSizes","modalWidth","drawerWidth","Math","max","current","useEffect","pageHeight","getBoundingClientRect","updatedContext","Object","entries","key","childState","translateX","ClassNames","css","cx","className","wizardContentClasses","styles","ref","el","summarySticky","summaryContainer","style","left","transform","_jsx","HvDialogContent","contentContainer","indentContent","LoadingContainer","hidden","map","cloneElement"],"mappings":"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"}
1	+ {"version":3,"file":"WizardContent.cjs","sources":["../../../../../src/components/Wizard/WizardContent/WizardContent.tsx"],"sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps /\nimport {\n ExtractNames,\n HvBaseProps,\n HvDialogContent,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport { useElementSize } from \"usehooks-ts\";\n\nimport React, {\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState,\n} from \"react\";\n\nimport { HvWizardContext, HvWizardTabs } from \"..\";\nimport { staticClasses, useClasses } from \"./WizardContent.styles\";\nimport { LoadingContainer } from \"./LoadingContainer\";\n\nexport { staticClasses as wizardContentClasses };\n\nexport type HvWizardContentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvWizardContentProps extends HvBaseProps {\n /* Forces minimum height to the component. /\n fixedHeight?: boolean;\n /* Whether the loading animation is shown. /\n loading?: boolean;\n /* The content of the summary. /\n summaryContent?: React.ReactNode;\n /* A Jss Object used to override or extend the styles applied to the empty state Wizard. /\n classes?: HvWizardContentClasses;\n}\n\ntype ChildElement = React.ReactElement<HvWizardTabs>;\n\nconst DRAWER_PERCENTAGE = 0.3;\nconst DRAWER_MIN_WIDTH = 280;\n\nexport const HvWizardContent = ({\n classes: classesProp,\n fixedHeight = false,\n loading = false,\n children,\n summaryContent,\n}: HvWizardContentProps) => {\n const { classes, cx } = useClasses(classesProp);\n\n const { context, setContext, summary, tab } = useContext(HvWizardContext);\n\n const arrayChildren = React.Children.toArray(children) as ChildElement[];\n\n const initialContext = arrayChildren.reduce(\n (acc, child: ChildElement, index) => {\n const invalid =\n \"mustValidate\" in child.props && child.props.mustValidate === true\n ? false\n : null;\n const valid = invalid ?? (index === 0 \|\| null);\n return {\n ...acc,\n [index]: { ...child.props, form: {}, valid, touched: index === 0 },\n };\n },\n {}\n );\n\n const summaryRef = useRef<HTMLElement>();\n const resizedRef = useRef({ height: 0, width: 0 });\n const [containerRef, sizes] = useElementSize();\n\n const [summaryHeight, setSummaryHeight] = useState(0);\n const [summaryWidth, setSummaryWidth] = useState(0);\n const [summaryLeft, setSummaryLeft] = useState(0);\n\n const updateSummaryMeasures = useCallback((newSizes) => {\n const modalWidth = newSizes.width;\n const drawerWidth = modalWidth DRAWER_PERCENTAGE;\n setSummaryHeight(newSizes.height);\n setSummaryWidth(Math.max(drawerWidth, DRAWER_MIN_WIDTH));\n setSummaryLeft(modalWidth - Math.max(drawerWidth, DRAWER_MIN_WIDTH));\n\n resizedRef.current = {\n height: newSizes.height,\n width: newSizes.width,\n };\n }, []);\n\n useEffect(() => {\n const pageHeight = summaryRef.current?.getBoundingClientRect?.()?.height;\n if (\n (summary && sizes.height !== resizedRef.current.height) \|\|\n sizes.width !== resizedRef.current.width\n ) {\n updateSummaryMeasures(sizes);\n }\n\n if (pageHeight && sizes.height !== pageHeight) {\n updateSummaryMeasures({\n width: sizes.width,\n height: pageHeight,\n });\n }\n }, [tab, sizes, summary, updateSummaryMeasures]);\n\n useEffect(() => {\n setContext(initialContext);\n }, []);\n\n useEffect(() => {\n if (tab && !context[tab]?.touched) {\n const updatedContext = Object.entries(context).reduce(\n (acc, [key, childState]) => ({\n ...acc,\n ...(+key <= tab\n ? {\n [key]: {\n ...childState,\n touched: true,\n valid: childState?.valid ?? true,\n },\n }\n : { [key]: childState }),\n }),\n {}\n );\n\n setContext(updatedContext);\n }\n }, [tab, context, setContext]);\n\n const translateX = summaryWidth ? summaryWidth + 10 : 450;\n\n return (\n <div\n className={classes.summaryRef}\n ref={(el) => {\n containerRef(el);\n if (el) {\n summaryRef.current = el;\n }\n }}\n >\n {summary !== null && (\n <div className={classes.summarySticky}>\n <div\n className={classes.summaryContainer}\n style={{\n left: summaryLeft,\n width: summaryWidth,\n height: summaryHeight,\n transform: `translate(${summary ? 0 : translateX}px, 0)`,\n }}\n >\n {summaryContent}\n </div>\n </div>\n )}\n <HvDialogContent\n className={cx(classes.contentContainer, {\n [classes.fixedHeight]: fixedHeight,\n })}\n indentContent\n >\n <LoadingContainer hidden={!loading}>\n {React.Children.map(arrayChildren, (child, index) => {\n if (index === tab) {\n return React.cloneElement(child as React.ReactElement, {\n tab,\n });\n }\n return null;\n })}\n </LoadingContainer>\n </HvDialogContent>\n </div>\n );\n};\n"],"names":["DRAWER_PERCENTAGE","DRAWER_MIN_WIDTH","HvWizardContent","classes","classesProp","fixedHeight","loading","children","summaryContent","cx","useClasses","context","setContext","summary","tab","useContext","HvWizardContext","arrayChildren","React","Children","toArray","initialContext","reduce","acc","child","index","invalid","props","mustValidate","valid","form","touched","summaryRef","useRef","resizedRef","height","width","containerRef","sizes","useElementSize","summaryHeight","setSummaryHeight","useState","summaryWidth","setSummaryWidth","summaryLeft","setSummaryLeft","updateSummaryMeasures","useCallback","newSizes","modalWidth","drawerWidth","Math","max","current","useEffect","pageHeight","getBoundingClientRect","updatedContext","Object","entries","key","childState","translateX","className","ref","el","summarySticky","summaryContainer","style","left","transform","_jsx","HvDialogContent","contentContainer","indentContent","LoadingContainer","hidden","map","cloneElement"],"mappings":"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"}

package/dist/cjs/components/Wizard/WizardContent/WizardContent.styles.cjs CHANGED Viewed

@@ -1,7 +1,11 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const styles = {
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const {
+  staticClasses,
+  useClasses
+} = uikitReactCore.createClasses("HvWizardContent", {
   contentContainer: {
     position: "relative",
     padding: 20,
@@ -32,6 +36,7 @@ const styles = {
     transitionTimingFunction: "ease-in-out",
     overflowY: "scroll"
   }
-};
-exports.styles = styles;
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
 //# sourceMappingURL=WizardContent.styles.cjs.map

package/dist/cjs/components/Wizard/WizardContent/WizardContent.styles.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"WizardContent.styles.cjs","sources":["../../../../../src/components/Wizard/WizardContent/WizardContent.styles.tsx"],"sourcesContent":["import { ~~CSSInterpolation~~ } from \"@~~emotion~~/~~serialize~~\";\nimport { ~~theme~~ } from \"@hitachivantara/uikit-~~styles~~\";\~~nimport~~ { ~~HvWizardContentClasses~~ } ~~from~~ \"~~./wizardContentClasses~~\"~~;\n\nexport const styles: Partial<\n Record<keyof HvWizardContentClasses~~, ~~CSSInterpolation>\n> =~~ {\n contentContainer: {\n position: \"relative\",\n padding: 20,\n marginLeft: 0,\n minHeight: 400,\n overflowX: \"hidden\",\n },\n fixedHeight: {\n minHeight: \"calc(100vh - 387px)\",\n },\n summaryRef: {\n flex: 1,\n overflowY: \"auto\",\n overflowX: \"hidden\",\n },\n summarySticky: {\n position: \"sticky\",\n top: 0,\n zIndex: 1,\n },\n summaryContainer: {\n position: \"absolute\",\n top: 0,\n minWidth: 280,\n boxShadow: theme.colors.shadow,\n backgroundColor: theme.colors.atmo1,\n transition: \"transform 0.3s\",\n transitionTimingFunction: \"ease-in-out\",\n overflowY: \"scroll\",\n },\n};\n"],"names":["~~styles~~","contentContainer","position","padding","marginLeft","minHeight","overflowX","fixedHeight","summaryRef","flex","overflowY","summarySticky","top","zIndex","summaryContainer","minWidth","boxShadow","theme","colors","shadow","backgroundColor","atmo1","transition","transitionTimingFunction"],"mappings":"~~;;;AAIO~~,~~MAAMA~~,~~SAET~~;AAAA,~~EACFC~~,kBAAkB;AAAA,IAChBC,UAAU;AAAA,IACVC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZC,WAAW;AAAA,IACXC,WAAW;AAAA,EACb;AAAA,EACAC,aAAa;AAAA,IACXF,WAAW;AAAA,EACb;AAAA,EACAG,YAAY;AAAA,IACVC,MAAM;AAAA,IACNC,WAAW;AAAA,IACXJ,WAAW;AAAA,EACb;AAAA,EACAK,eAAe;AAAA,IACbT,UAAU;AAAA,IACVU,KAAK;AAAA,IACLC,QAAQ;AAAA,EACV;AAAA,EACAC,kBAAkB;AAAA,IAChBZ,UAAU;AAAA,IACVU,KAAK;AAAA,IACLG,UAAU;AAAA,IACVC,WAAWC,YAAAA,MAAMC,OAAOC;AAAAA,IACxBC,iBAAiBH,YAAAA,MAAMC,OAAOG;AAAAA,IAC9BC,YAAY;AAAA,IACZC,0BAA0B;AAAA,IAC1Bb,WAAW;AAAA,EACb;AACF;;"}
1	+ {"version":3,"file":"WizardContent.styles.cjs","sources":["../../../../../src/components/Wizard/WizardContent/WizardContent.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { createClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvWizardContent\", {\n contentContainer: {\n position: \"relative\",\n padding: 20,\n marginLeft: 0,\n minHeight: 400,\n overflowX: \"hidden\",\n },\n fixedHeight: {\n minHeight: \"calc(100vh - 387px)\",\n },\n summaryRef: {\n flex: 1,\n overflowY: \"auto\",\n overflowX: \"hidden\",\n },\n summarySticky: {\n position: \"sticky\",\n top: 0,\n zIndex: 1,\n },\n summaryContainer: {\n position: \"absolute\",\n top: 0,\n minWidth: 280,\n boxShadow: theme.colors.shadow,\n backgroundColor: theme.colors.atmo1,\n transition: \"transform 0.3s\",\n transitionTimingFunction: \"ease-in-out\",\n overflowY: \"scroll\",\n },\n});\n"],"names":["staticClasses","useClasses","createClasses","contentContainer","position","padding","marginLeft","minHeight","overflowX","fixedHeight","summaryRef","flex","overflowY","summarySticky","top","zIndex","summaryContainer","minWidth","boxShadow","theme","colors","shadow","backgroundColor","atmo1","transition","transitionTimingFunction"],"mappings":";;;;AAGa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,eAAAA,cAAc,mBAAmB;AAAA,EAC5EC,kBAAkB;AAAA,IAChBC,UAAU;AAAA,IACVC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZC,WAAW;AAAA,IACXC,WAAW;AAAA,EACb;AAAA,EACAC,aAAa;AAAA,IACXF,WAAW;AAAA,EACb;AAAA,EACAG,YAAY;AAAA,IACVC,MAAM;AAAA,IACNC,WAAW;AAAA,IACXJ,WAAW;AAAA,EACb;AAAA,EACAK,eAAe;AAAA,IACbT,UAAU;AAAA,IACVU,KAAK;AAAA,IACLC,QAAQ;AAAA,EACV;AAAA,EACAC,kBAAkB;AAAA,IAChBZ,UAAU;AAAA,IACVU,KAAK;AAAA,IACLG,UAAU;AAAA,IACVC,WAAWC,YAAAA,MAAMC,OAAOC;AAAAA,IACxBC,iBAAiBH,YAAAA,MAAMC,OAAOG;AAAAA,IAC9BC,YAAY;AAAA,IACZC,0BAA0B;AAAA,IAC1Bb,WAAW;AAAA,EACb;AACF,CAAC;;;"}

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

@@ -1,14 +1,12 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const react = require("@emotion/react");
+const React = require("react");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
-const React = require("react");
 const WizardTitle_styles = require("./WizardTitle.styles.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
-const wizardTitleClasses = require("./wizardTitleClasses.cjs");
-const StepNavigation = require("../../StepNavigation/StepNavigation.cjs");
 const WizardContext = require("../WizardContext/WizardContext.cjs");
+const StepNavigation = require("../../StepNavigation/StepNavigation.cjs");
 const switchTabState = (state, currentTab, index) => {
   if (index === currentTab)
     return "Current";
@@ -24,7 +22,7 @@ const HvWizardTitle = ({
   title,
   hasSummary = false,
   labels = {},
-  classes,
+  classes: classesProp,
   customStep = {}
 }) => {
   const {
@@ -33,6 +31,9 @@ const HvWizardTitle = ({
     tab,
     setTab
   } = React.useContext(WizardContext.default);
+  const {
+    classes
+  } = WizardTitle_styles.useClasses(classesProp);
   const [steps, setSteps] = React.useState([]);
   React.useEffect(() => {
     return () => {
@@ -55,50 +56,46 @@ const HvWizardTitle = ({
       setSteps(updatedSteps);
     }
   }, [context, tab, setTab]);
-  return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
-    children: ({
-      css,
-      cx
-    }) => /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvDialogTitle, {
-      className: cx(wizardTitleClasses.default.headerContainer, css(WizardTitle_styles.styles.headerContainer), classes == null ? void 0 : classes.headerContainer),
-      classes: {
-        messageContainer: cx(wizardTitleClasses.default.messageContainer, css(WizardTitle_styles.styles.messageContainer), classes == null ? void 0 : classes.messageContainer)
-      },
-      children: /* @__PURE__ */ jsxRuntime.jsxs(uikitReactCore.HvGrid, {
-        container: true,
-        justifyContent: "space-between",
-        alignItems: "center",
-        className: cx(wizardTitleClasses.default.titleContainer, css(WizardTitle_styles.styles.titleContainer), classes == null ? void 0 : classes.titleContainer),
-        children: [title && /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, {
-          variant: "title3",
-          component: "h3",
-          children: title
-        }), !!steps.length && /* @__PURE__ */ jsxRuntime.jsx(StepNavigation.HvStepNavigation, {
-          className: cx(wizardTitleClasses.default.stepContainer, css(WizardTitle_styles.styles.stepContainer), classes == null ? void 0 : classes.stepContainer),
-          steps,
-          type: "Default",
-          stepSize: "xs",
-          width: {
-            xs: 200,
-            sm: 350,
-            md: 600,
-            lg: 800,
-            xl: 1e3
-          },
-          ...customStep
-        }), hasSummary && /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, {
-          variant: "secondarySubtle",
-          className: cx(wizardTitleClasses.default.buttonWidth, css(WizardTitle_styles.styles.buttonWidth), classes == null ? void 0 : classes.buttonWidth),
-          classes: {
-            root: cx(wizardTitleClasses.default.rootSummaryButton, css(WizardTitle_styles.styles.rootSummaryButton), classes == null ? void 0 : classes.rootSummaryButton)
-          },
-          onClick: toggleSummary,
-          startIcon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Report, {}),
-          children: `${labels.summary ?? "Summary"}`
-        })]
-      })
+  return /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvDialogTitle, {
+    className: classes.headerContainer,
+    classes: {
+      messageContainer: classes.messageContainer
+    },
+    children: /* @__PURE__ */ jsxRuntime.jsxs(uikitReactCore.HvGrid, {
+      container: true,
+      justifyContent: "space-between",
+      alignItems: "center",
+      className: classes.titleContainer,
+      children: [title && /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, {
+        variant: "title3",
+        component: "h3",
+        children: title
+      }), !!steps.length && /* @__PURE__ */ jsxRuntime.jsx(StepNavigation.HvStepNavigation, {
+        className: classes.stepContainer,
+        steps,
+        type: "Default",
+        stepSize: "xs",
+        width: {
+          xs: 200,
+          sm: 350,
+          md: 600,
+          lg: 800,
+          xl: 1e3
+        },
+        ...customStep
+      }), hasSummary && /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, {
+        variant: "secondarySubtle",
+        className: classes.buttonWidth,
+        classes: {
+          root: classes.rootSummaryButton
+        },
+        onClick: toggleSummary,
+        startIcon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Report, {}),
+        children: `${labels.summary ?? "Summary"}`
+      })]
     })
   });
 };
+exports.wizardTitleClasses = WizardTitle_styles.staticClasses;
 exports.HvWizardTitle = HvWizardTitle;
 //# sourceMappingURL=WizardTitle.cjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"WizardTitle.cjs","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 \"../../StepNavigation\";\nimport { HvStepProps } from \"../../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, setSummary, tab, setTab } = useContext(HvWizardContext);\n\n const [steps, setSteps] = useState<HvStepProps[]>([]);\n\n useEffect(() => {\n return () => {\n setSummary(false);\n };\n }, [setSummary]);\n\n const toggleSummary = () => {\n setSummary((prevValue) => !prevValue);\n };\n\n useEffect(() => {\n const contextArray = Object.entries(context);\n\n if (contextArray.length) {\n const updatedSteps: HvStepProps[] = contextArray.map(\n ([, childState], index) => {\n return {\n title: childState?.name ?? `${index + 1}`,\n state: switchTabState(childState, tab, index),\n onClick: () => setTab(index),\n };\n }\n );\n\n setSteps(updatedSteps);\n }\n }, [context, tab, setTab]);\n\n return (\n <~~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=\"Default\"\n stepSize=\"xs\"\n width={{\n xs: 200,\n sm: 350,\n md: 600,\n lg: 800,\n xl: 1000,\n }}\n {...customStep}\n />\n )}\n {hasSummary && (\n <HvButton\n variant=\"secondarySubtle\"\n className={~~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","setSummary","tab","setTab","useContext","HvWizardContext","steps","setSteps","useState","useEffect","toggleSummary","prevValue","contextArray","Object","entries","length","updatedSteps","map","childState","name","onClick","~~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","xl","HvButton","buttonWidth","root","rootSummaryButton","startIcon","Report","summary"],"mappings":"~~;;;;;;;;;;;AA+BA~~,MAAMA,iBAAiBA,CAACC,OAAOC,YAAYC,UAAU;AACnD,MAAIA,UAAUD;AAAmB,WAAA;AACjC,MAAID,MAAMG;AAAc,WAAA;AACxB,MAAIH,MAAMG,UAAU;AAAa,WAAA;AAC7BH,MAAAA,MAAMI,WAAWJ,MAAMG,UAAU;AAAc,WAAA;AAG5C,SAAA;AACT;AAEO,MAAME,gBAAgBA,CAAC;AAAA,EAC5BC;AAAAA,EACAC,aAAa;AAAA,EACbC,SAAS,CAAC;AAAA,EACVC;AAAAA,~~EACAC~~,aAAa,CAAC;AACI,MAAM;AAClB,QAAA;AAAA,IAAEC;AAAAA,IAASC;AAAAA,IAAYC;AAAAA,IAAKC;AAAAA,EAAAA,IAAWC,MAAAA,WAAWC,cAAAA,OAAe;~~AAEvE~~,QAAM,~~CAACC~~,OAAOC,QAAQ,IAAIC,MAAAA,SAAwB,CAAE,CAAA;AAEpDC,QAAAA,UAAU,MAAM;AACd,WAAO,MAAM;~~AACXR~~,iBAAW,KAAK;AAAA,IAAA;AAAA,EAClB,GACC,CAACA,UAAU,CAAC;AAEf,~~QAAMS~~,gBAAgBA,MAAM;AACdC,eAAAA,CAAAA,cAAc,CAACA,SAAS;AAAA,EAAA;AAGtCF,QAAAA,UAAU,MAAM;AACRG,UAAAA,eAAeC,OAAOC,~~QAAQd~~,OAAO;AAE3C,~~QAAIY~~,aAAaG,QAAQ;AACjBC,YAAAA,eAA8BJ,aAAaK,IAC/C,CAAC,CAAGC,EAAAA,UAAU,~~GAAG3B~~,UAAU;AAClB,eAAA;AAAA,UACLI,~~QAAOuB~~,yCAAYC,SAAS,~~GAAE5B~~,QAAQ;AAAA,UACtCF,OAAOD,~~eAAe8B~~,~~YAAYhB~~,~~KAAKX~~,KAAK;AAAA,~~UAC5C6B~~,SAASA,~~MAAMjB~~,~~OAAOZ~~,KAAK;AAAA,QAAA;AAAA,MAC7B,CAEJ;~~AAEAgB~~,eAASS,YAAY;AAAA,IACvB;AAAA,EACC,GAAA,~~CAAChB~~,SAASE,KAAKC,MAAM,CAAC;AAEzB,~~wCACGkB~~,~~MAAAA,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,qCACNC,~~eAAAA,eAAa;AAAA,~~MACZC~~,~~WAAWF~~,~~GACTG,mBAAmBC,QAAAA,iBACnBL,IAAIM,mBAAAA,OAAOD,eAAe,GAC1B9B,mCAAS8B,eACX~~;~~AAAA~~,~~MACA9B~~,SAAS;AAAA,~~QACPgC~~,~~kBAAkBN~~,~~GAChBG,mBAAmBG,QAAAA,kBACnBP,IAAIM,mBAAAA,OAAOC,gBAAgB,GAC3BhC,mCAASgC,gBACX~~;~~AAAA~~,~~MACF~~;AAAA,~~MAAER~~,~~0CAEDS~~,uBAAM;AAAA,~~QACLC~~,WAAS;AAAA,~~QACTC~~,gBAAe;AAAA,~~QACfC~~,YAAW;AAAA,~~QACXR~~,~~WAAWF~~,~~GACTG,mBAAmBQ,QAAAA,gBACnBZ,IAAIM,mBAAAA,OAAOM,cAAc,GACzBrC,mCAASqC,cACX~~;~~AAAA~~,~~QAAEb~~,~~UAED3B~~,CAAAA,~~SACCyC~~,2BAAAA,IAACC,6BAAY;AAAA,~~UAACC~~,SAAQ;AAAA,~~UAASC~~,WAAU;AAAA,~~UAAIjB~~,~~UAC1C3B~~;AAAAA,~~QACW~~,CAAA,GAEf,CAAC,~~CAACW~~,MAAMS,~~yCACNyB~~,eAAAA,kBAAgB;AAAA,~~UACfd~~,~~WAAWF~~,~~GACTG,mBAAmBc,QAAAA,eACnBlB,IAAIM,mBAAAA,OAAOY,aAAa,GACxB3C,mCAAS2C,aACX~~;~~AAAA~~,~~UACAnC~~;AAAAA,~~UACAoC~~,MAAK;AAAA,~~UACLC~~,UAAS;AAAA,~~UACTC~~,OAAO;AAAA,~~YACLC~~,IAAI;AAAA,~~YACJC~~,IAAI;AAAA,~~YACJC~~,IAAI;AAAA,~~YACJC~~,IAAI;AAAA,~~YACJC~~,IAAI;AAAA,~~UACN~~;AAAA,~~UAAE~~,~~GACElD~~;AAAAA,~~QAAAA~~,CACL,~~GAEFH~~,~~cACCwC~~,2BAAAA,IAACc,yBAAQ;AAAA,~~UACPZ~~,SAAQ;AAAA,~~UACRZ~~,~~WAAWF~~,~~GACTG,mBAAmBwB,QAAAA,aACnB5B,IAAIM,mBAAAA,OAAOsB,WAAW,GACtBrD,mCAASqD,WACX~~;~~AAAA~~,~~UACArD~~,SAAS;AAAA,~~YACPsD~~,~~MAAM5B~~,~~GACJG,mBAAmB0B,QAAAA,mBACnB9B,IAAIM,mBAAAA,OAAOwB,iBAAiB,GAC5BvD,mCAASuD,iBACX~~;~~AAAA~~,~~UACF~~;AAAA,~~UACAjC~~,SAASV;AAAAA,~~UACT4C~~,WAAWlB,2BAAAA,IAACmB,0BAAQ;AAAA,~~UAAEjC~~,UAEpB,~~GAAEzB~~,~~OAAO2D~~,WAAW;AAAA,~~QAAA~~,CACd,CACX;AAAA,~~MAAA,CACK;AAAA,~~IAAA,CACK;AAAA,EAAA,~~CAEP~~;~~AAEhB;;~~"}
1	+ {"version":3,"file":"WizardTitle.cjs","sources":["../../../../../src/components/Wizard/WizardTitle/WizardTitle.tsx"],"sourcesContent":["import { useContext, useEffect, useState } from \"react\";\n\nimport {\n ExtractNames,\n HvBaseProps,\n HvButton,\n HvDialogTitle,\n HvGrid,\n HvTypography,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Report } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvStepNavigation, HvStepNavigationProps } from \"../../StepNavigation\";\nimport { HvStepProps } from \"../../StepNavigation/DefaultNavigation\";\nimport { HvWizardContext } from \"../WizardContext\";\nimport { staticClasses, useClasses } from \"./WizardTitle.styles\";\n\nexport { staticClasses as wizardTitleClasses };\n\nexport type HvWizardTitleClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvWizardTitleProps extends HvBaseProps {\n /** Title for the wizard. /\n title?: string;\n /* Shows the summary button. /\n hasSummary?: boolean;\n /* An object containing all the labels for the wizard header. /\n labels?: {\n /* Summary button label. /\n summary?: string;\n };\n /* Custom object to define type, size and width of the StepNavigation component /\n customStep?: Pick<HvStepNavigationProps, \"type\" \| \"stepSize\" \| \"width\">;\n /* A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n classes?: HvWizardTitleClasses;\n}\n\nconst switchTabState = (state, currentTab, index) => {\n if (index === currentTab) return \"Current\";\n if (state.valid) return \"Completed\";\n if (state.valid === null) return \"Enabled\";\n if (state.touched && state.valid === false) return \"Failed\";\n // \"Disabled\"\n // \"Pending\"\n return \"Enabled\";\n};\n\nexport const HvWizardTitle = ({\n title,\n hasSummary = false,\n labels = {},\n classes: classesProp,\n customStep = {},\n}: HvWizardTitleProps) => {\n const { context, setSummary, tab, setTab } = useContext(HvWizardContext);\n\n const { classes } = useClasses(classesProp);\n\n const [steps, setSteps] = useState<HvStepProps[]>([]);\n\n useEffect(() => {\n return () => {\n setSummary(false);\n };\n }, [setSummary]);\n\n const toggleSummary = () => {\n setSummary((prevValue) => !prevValue);\n };\n\n useEffect(() => {\n const contextArray = Object.entries(context);\n\n if (contextArray.length) {\n const updatedSteps: HvStepProps[] = contextArray.map(\n ([, childState], index) => {\n return {\n title: childState?.name ?? `${index + 1}`,\n state: switchTabState(childState, tab, index),\n onClick: () => setTab(index),\n };\n }\n );\n\n setSteps(updatedSteps);\n }\n }, [context, tab, setTab]);\n\n return (\n <HvDialogTitle\n className={classes.headerContainer}\n classes={{\n messageContainer: classes.messageContainer,\n }}\n >\n <HvGrid\n container\n justifyContent=\"space-between\"\n alignItems=\"center\"\n className={classes.titleContainer}\n >\n {title && (\n <HvTypography variant=\"title3\" component=\"h3\">\n {title}\n </HvTypography>\n )}\n {!!steps.length && (\n <HvStepNavigation\n className={classes.stepContainer}\n steps={steps}\n type=\"Default\"\n stepSize=\"xs\"\n width={{\n xs: 200,\n sm: 350,\n md: 600,\n lg: 800,\n xl: 1000,\n }}\n {...customStep}\n />\n )}\n {hasSummary && (\n <HvButton\n variant=\"secondarySubtle\"\n className={classes.buttonWidth}\n classes={{\n root: classes.rootSummaryButton,\n }}\n onClick={toggleSummary}\n startIcon={<Report />}\n >\n {`${labels.summary ?? \"Summary\"}`}\n </HvButton>\n )}\n </HvGrid>\n </HvDialogTitle>\n );\n};\n"],"names":["switchTabState","state","currentTab","index","valid","touched","HvWizardTitle","title","hasSummary","labels","classes","classesProp","customStep","context","setSummary","tab","setTab","useContext","HvWizardContext","useClasses","steps","setSteps","useState","useEffect","toggleSummary","prevValue","contextArray","Object","entries","length","updatedSteps","map","childState","name","onClick","HvDialogTitle","className","headerContainer","messageContainer","children","HvGrid","container","justifyContent","alignItems","titleContainer","_jsx","HvTypography","variant","component","HvStepNavigation","stepContainer","type","stepSize","width","xs","sm","md","lg","xl","HvButton","buttonWidth","root","rootSummaryButton","startIcon","Report","summary"],"mappings":";;;;;;;;;AAqCA,MAAMA,iBAAiBA,CAACC,OAAOC,YAAYC,UAAU;AACnD,MAAIA,UAAUD;AAAmB,WAAA;AACjC,MAAID,MAAMG;AAAc,WAAA;AACxB,MAAIH,MAAMG,UAAU;AAAa,WAAA;AAC7BH,MAAAA,MAAMI,WAAWJ,MAAMG,UAAU;AAAc,WAAA;AAG5C,SAAA;AACT;AAEO,MAAME,gBAAgBA,CAAC;AAAA,EAC5BC;AAAAA,EACAC,aAAa;AAAA,EACbC,SAAS,CAAC;AAAA,EACVC,SAASC;AAAAA,EACTC,aAAa,CAAC;AACI,MAAM;AAClB,QAAA;AAAA,IAAEC;AAAAA,IAASC;AAAAA,IAAYC;AAAAA,IAAKC;AAAAA,EAAAA,IAAWC,MAAAA,WAAWC,cAAAA,OAAe;AAEjE,QAAA;AAAA,IAAER;AAAAA,EAAAA,IAAYS,mBAAAA,WAAWR,WAAW;AAE1C,QAAM,CAACS,OAAOC,QAAQ,IAAIC,MAAAA,SAAwB,CAAE,CAAA;AAEpDC,QAAAA,UAAU,MAAM;AACd,WAAO,MAAM;AACXT,iBAAW,KAAK;AAAA,IAAA;AAAA,EAClB,GACC,CAACA,UAAU,CAAC;AAEf,QAAMU,gBAAgBA,MAAM;AACdC,eAAAA,CAAAA,cAAc,CAACA,SAAS;AAAA,EAAA;AAGtCF,QAAAA,UAAU,MAAM;AACRG,UAAAA,eAAeC,OAAOC,QAAQf,OAAO;AAE3C,QAAIa,aAAaG,QAAQ;AACjBC,YAAAA,eAA8BJ,aAAaK,IAC/C,CAAC,CAAGC,EAAAA,UAAU,GAAG7B,UAAU;AAClB,eAAA;AAAA,UACLI,QAAOyB,yCAAYC,SAAS,GAAE9B,QAAQ;AAAA,UACtCF,OAAOD,eAAegC,YAAYjB,KAAKZ,KAAK;AAAA,UAC5C+B,SAASA,MAAMlB,OAAOb,KAAK;AAAA,QAAA;AAAA,MAC7B,CAEJ;AAEAkB,eAASS,YAAY;AAAA,IACvB;AAAA,EACC,GAAA,CAACjB,SAASE,KAAKC,MAAM,CAAC;AAEzB,wCACGmB,eAAAA,eAAa;AAAA,IACZC,WAAW1B,QAAQ2B;AAAAA,IACnB3B,SAAS;AAAA,MACP4B,kBAAkB5B,QAAQ4B;AAAAA,IAC5B;AAAA,IAAEC,0CAEDC,uBAAM;AAAA,MACLC,WAAS;AAAA,MACTC,gBAAe;AAAA,MACfC,YAAW;AAAA,MACXP,WAAW1B,QAAQkC;AAAAA,MAAeL,UAEjChC,CAAAA,SACCsC,2BAAAA,IAACC,6BAAY;AAAA,QAACC,SAAQ;AAAA,QAASC,WAAU;AAAA,QAAIT,UAC1ChC;AAAAA,MACW,CAAA,GAEf,CAAC,CAACa,MAAMS,yCACNoB,eAAAA,kBAAgB;AAAA,QACfb,WAAW1B,QAAQwC;AAAAA,QACnB9B;AAAAA,QACA+B,MAAK;AAAA,QACLC,UAAS;AAAA,QACTC,OAAO;AAAA,UACLC,IAAI;AAAA,UACJC,IAAI;AAAA,UACJC,IAAI;AAAA,UACJC,IAAI;AAAA,UACJC,IAAI;AAAA,QACN;AAAA,QAAE,GACE9C;AAAAA,MAAAA,CACL,GAEFJ,cACCqC,2BAAAA,IAACc,yBAAQ;AAAA,QACPZ,SAAQ;AAAA,QACRX,WAAW1B,QAAQkD;AAAAA,QACnBlD,SAAS;AAAA,UACPmD,MAAMnD,QAAQoD;AAAAA,QAChB;AAAA,QACA5B,SAASV;AAAAA,QACTuC,WAAWlB,2BAAAA,IAACmB,0BAAQ;AAAA,QAAEzB,UAEpB,GAAE9B,OAAOwD,WAAW;AAAA,MAAA,CACd,CACX;AAAA,IAAA,CACK;AAAA,EAAA,CACK;AAEnB;;;"}

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

@@ -1,7 +1,11 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const styles = {
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const {
+  staticClasses,
+  useClasses
+} = uikitReactCore.createClasses("HvWizardTitle", {
   messageContainer: {
     "& > div": {
       width: "100%"
@@ -28,6 +32,7 @@ const styles = {
   stepContainer: {
     margin: "auto"
   }
-};
-exports.styles = styles;
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
 //# sourceMappingURL=WizardTitle.styles.cjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"WizardTitle.styles.cjs","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,YAAAA,MAAMC,OAAOC;AAAAA,IAC9B,QAAQ;AAAA,MACNC,UAAU;AAAA,MACVC,YAAY;AAAA,MACZC,eAAe;AAAA,IACjB;AAAA,EACF;AAAA,EACAC,eAAe;AAAA,IACbZ,QAAQ;AAAA,EACV;AACF;;"}
1	+ {"version":3,"file":"WizardTitle.styles.cjs","sources":["../../../../../src/components/Wizard/WizardTitle/WizardTitle.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { createClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvWizardTitle\", {\n messageContainer: {\n \"& > div\": {\n width: \"100%\",\n },\n },\n titleContainer: {\n margin: 0,\n width: \"100%\",\n },\n buttonWidth: {\n width: 120,\n },\n rootSummaryButton: {\n paddingRight: 18,\n },\n headerContainer: {\n backgroundColor: theme.colors.atmo2,\n \"& h6\": {\n fontSize: \"16px\",\n fontWeight: \"bold\",\n letterSpacing: 0,\n },\n },\n stepContainer: {\n margin: \"auto\",\n },\n});\n"],"names":["staticClasses","useClasses","createClasses","messageContainer","width","titleContainer","margin","buttonWidth","rootSummaryButton","paddingRight","headerContainer","backgroundColor","theme","colors","atmo2","fontSize","fontWeight","letterSpacing","stepContainer"],"mappings":";;;;AAGa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,eAAAA,cAAc,iBAAiB;AAAA,EAC1EC,kBAAkB;AAAA,IAChB,WAAW;AAAA,MACTC,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACAC,gBAAgB;AAAA,IACdC,QAAQ;AAAA,IACRF,OAAO;AAAA,EACT;AAAA,EACAG,aAAa;AAAA,IACXH,OAAO;AAAA,EACT;AAAA,EACAI,mBAAmB;AAAA,IACjBC,cAAc;AAAA,EAChB;AAAA,EACAC,iBAAiB;AAAA,IACfC,iBAAiBC,YAAAA,MAAMC,OAAOC;AAAAA,IAC9B,QAAQ;AAAA,MACNC,UAAU;AAAA,MACVC,YAAY;AAAA,MACZC,eAAe;AAAA,IACjB;AAAA,EACF;AAAA,EACAC,eAAe;AAAA,IACbZ,QAAQ;AAAA,EACV;AACF,CAAC;;;"}

package/dist/cjs/index.cjs CHANGED Viewed

@@ -1,29 +1,29 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const stepNavigationClasses = require("./components/StepNavigation/stepNavigationClasses.cjs");
+const StepNavigation_styles = require("./components/StepNavigation/StepNavigation.styles.cjs");
 const StepNavigation = require("./components/StepNavigation/StepNavigation.cjs");
-const wizardClasses = require("./components/Wizard/wizardClasses.cjs");
+const Wizard_styles = require("./components/Wizard/Wizard.styles.cjs");
 const Wizard = require("./components/Wizard/Wizard.cjs");
-const wizardActionsClasses = require("./components/Wizard/WizardActions/wizardActionsClasses.cjs");
+const WizardActions_styles = require("./components/Wizard/WizardActions/WizardActions.styles.cjs");
 const WizardActions = require("./components/Wizard/WizardActions/WizardActions.cjs");
-const wizardContainerClasses = require("./components/Wizard/WizardContainer/wizardContainerClasses.cjs");
+const WizardContainer_styles = require("./components/Wizard/WizardContainer/WizardContainer.styles.cjs");
 const WizardContainer = require("./components/Wizard/WizardContainer/WizardContainer.cjs");
-const wizardContentClasses = require("./components/Wizard/WizardContent/wizardContentClasses.cjs");
+const WizardContent_styles = require("./components/Wizard/WizardContent/WizardContent.styles.cjs");
 const WizardContent = require("./components/Wizard/WizardContent/WizardContent.cjs");
 const WizardContext = require("./components/Wizard/WizardContext/WizardContext.cjs");
-const wizardTitleClasses = require("./components/Wizard/WizardTitle/wizardTitleClasses.cjs");
+const WizardTitle_styles = require("./components/Wizard/WizardTitle/WizardTitle.styles.cjs");
 const WizardTitle = require("./components/Wizard/WizardTitle/WizardTitle.cjs");
-exports.stepNavigationClasses = stepNavigationClasses.default;
+exports.stepNavigationClasses = StepNavigation_styles.staticClasses;
 exports.HvStepNavigation = StepNavigation.HvStepNavigation;
-exports.wizardClasses = wizardClasses.default;
+exports.wizardClasses = Wizard_styles.staticClasses;
 exports.HvWizard = Wizard.HvWizard;
-exports.wizardActionsClasses = wizardActionsClasses.default;
+exports.wizardActionsClasses = WizardActions_styles.staticClasses;
 exports.HvWizardActions = WizardActions.HvWizardActions;
-exports.wizardContainerClasses = wizardContainerClasses.default;
+exports.wizardContainerClasses = WizardContainer_styles.staticClasses;
 exports.HvWizardContainer = WizardContainer.HvWizardContainer;
-exports.wizardContentClasses = wizardContentClasses.default;
+exports.wizardContentClasses = WizardContent_styles.staticClasses;
 exports.HvWizardContent = WizardContent.HvWizardContent;
 exports.HvWizardContext = WizardContext.default;
-exports.wizardTitleClasses = wizardTitleClasses.default;
+exports.wizardTitleClasses = WizardTitle_styles.staticClasses;
 exports.HvWizardTitle = WizardTitle.HvWizardTitle;
 //# sourceMappingURL=index.cjs.map

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

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

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

@@ -1,13 +1,12 @@
-import { clsx } from "clsx";
 import { HourGlass, Level3Bad, Level0Good } from "@hitachivantara/uikit-react-icons";
+import { HvButton, HvAvatar } from "@hitachivantara/uikit-react-core";
 import { theme } from "@hitachivantara/uikit-styles";
-import { StyledRoot, StyledButton, StyledAvatar } from "./Step.styles.js";
-import stepClasses from "./stepClasses.js";
 import { getColor, getSemantic } from "../utils.js";
+import { useClasses } from "./Step.styles.js";
 import { jsx } from "@emotion/react/jsx-runtime";
 const HvStep = ({
   className,
-  classes,
+  classes: classesProp,
   state,
   title,
   onClick,
@@ -15,6 +14,10 @@ const HvStep = ({
   size = "md",
   number = 1
 }) => {
+  const {
+    classes,
+    cx
+  } = useClasses(classesProp);
   const iconSize = {
     xs: "XS",
     sm: "XS",
@@ -43,23 +46,25 @@ const HvStep = ({
     Failed: Level3Bad,
     Completed: Level0Good
   }[state];
-  return /* @__PURE__ */ jsx(StyledRoot, {
-    className: clsx(className, stepClasses.root, classes == null ? void 0 : classes.root, state !== "Current" && clsx(stepClasses.notCurrent, classes == null ? void 0 : classes.notCurrent)),
-    $notCurrent: state !== "Current",
-    children: /* @__PURE__ */ jsx(StyledButton, {
-      className: clsx(stepClasses.ghost, classes == null ? void 0 : classes.ghost, state === "Current" && clsx(stepClasses.ghostDisabled, classes == null ? void 0 : classes.ghostDisabled)),
+  return /* @__PURE__ */ jsx("div", {
+    className: cx(classes.root, {
+      [classes.notCurrent]: state !== "Current"
+    }, className),
+    children: /* @__PURE__ */ jsx(HvButton, {
+      className: cx(classes.ghost, {
+        [classes.ghostDisabled]: state === "Current"
+      }),
       "aria-label": `step-${title}`,
       icon: true,
       variant: "secondaryGhost",
       overrideIconColors: false,
       disabled: disabled ?? ["Current", "Disabled"].includes(state),
       onClick,
-      children: /* @__PURE__ */ jsx(StyledAvatar, {
-        className: clsx(stepClasses.avatar, classes == null ? void 0 : classes.avatar, stepClasses[size], classes == null ? void 0 : classes[size]),
+      children: /* @__PURE__ */ jsx(HvAvatar, {
+        className: cx(classes.avatar, classes[size]),
         backgroundColor,
         status,
         size,
-        $size: size,
         children: IconComponent ? /* @__PURE__ */ jsx(IconComponent, {
           color,
           semantic,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Step.js","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,~~SAASnB~~,~~OAAOoB~~,KAAK;AAEvCC,QAAAA,~~QAAQrB~~,UAAU,YAAY,~~UAAUsB~~;AAC9C,QAAMC,~~WAAWvB~~,UAAU,~~YAAYwB~~,~~YAAYxB~~,KAAK,~~IAAIsB~~;AACtDG,QAAAA,~~SAASzB~~,UAAU,YAAY,~~iBAAiBsB~~;AAEtD,QAAMI,gBAAgB;AAAA,IACpBb,SAASc;AAAAA,IACTb,QAAQc;AAAAA,IACRb,WAAWc;AAAAA,~~IACX7B~~,KAAK;AAEP,~~6BACG8B~~,~~YAAU~~;AAAA,~~IACThC~~,~~WAAWiC~~,~~KACTjC~~,~~WACAkC~~,~~YAAYC~~,~~MACZlC~~,~~mCAASkC~~,~~MACTjC~~,UAAU,~~aAAa+B~~,~~KAAKC,YAAYE,YAAYnC,mCAASmC,~~UAAU~~,CACzE~~;AAAA,~~IACAC~~,~~aAAanC,UAAU~~;AAAA,~~IAAUoC~~,~~8BAEhCC~~,~~cAAY~~;AAAA,~~MACXvC~~,~~WAAWiC~~,~~KACTC~~,~~YAAYM~~,~~OACZvC~~,~~mCAASuC~~,~~OACTtC~~,~~UAAU~~,~~aACR+B~~,~~KAAKC~~,~~YAAYO~~,~~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~~,8BAEhBQ,~~cAAY~~;AAAA,~~QACX9C~~,~~WAAWiC~~,~~KACTC~~,~~YAAYa~~,~~QACZ9C~~,~~mCAAS8C~~,~~QACTb,YAAY5B,~~IAAI,~~GAChBL,mCAAUK,KACZ~~;AAAA,~~QACAc~~;AAAAA,QACAO;AAAAA,~~QACArB~~;AAAAA,~~QACA0C~~,~~OAAO1C;AAAAA~~,~~QAAKgC~~,~~UAEXV~~,~~gBACCqB,oBAACrB,~~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~~;"}
1	+ {"version":3,"file":"Step.js","sources":["../../../../../../src/components/StepNavigation/DefaultNavigation/Step/Step.tsx"],"sourcesContent":["import {\n Level0Good,\n Level3Bad,\n HourGlass,\n} from \"@hitachivantara/uikit-react-icons\";\nimport {\n HvAvatarSize,\n HvButtonProps,\n HvBaseProps,\n ExtractNames,\n HvAvatar,\n HvButton,\n} from \"@hitachivantara/uikit-react-core\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { getColor, getSemantic } from \"../utils\";\nimport { useClasses } from \"./Step.styles\";\n\ntype HvStepClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvStepProps\n extends Pick<HvButtonProps, \"onClick\">,\n Omit<HvBaseProps, \"onClick\"> {\n /** A Jss Object used to override or extend the styles applied to the empty state StepNavigation. /\n classes?: HvStepClasses;\n /* State of the step. Values = {\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\", \"Enabled\"} /\n state:\n \| \"Pending\"\n \| \"Failed\"\n \| \"Completed\"\n \| \"Current\"\n \| \"Disabled\"\n \| \"Enabled\";\n /* Title of the step. /\n title: string;\n /* Sets one of the standard sizes of the step /\n size?: HvAvatarSize;\n /* Number of the step. /\n number?: number;\n /\n Define if a step is disabled/enabled.\n * If this property is not defined and the step is on state \"Disabled\", the step component will be disabled\n /\n disabled?: boolean;\n}\n\n/\n Step element of \"Default\" Step Navigation root component\n */\nexport const HvStep = ({\n className,\n classes: classesProp,\n state,\n title,\n onClick,\n disabled,\n size = \"md\",\n number = 1,\n}: HvStepProps) => {\n const { classes, cx } = useClasses(classesProp);\n\n const iconSize = {\n xs: \"XS\",\n sm: \"XS\",\n md: \"S\",\n ml: \"M\",\n xl: \"M\",\n }[size];\n\n const squareL = {\n Pending: 16,\n Failed: 24,\n Completed: 24,\n }[state];\n\n const svgSize = {\n xs: squareL - 8,\n sm: squareL,\n md: squareL + 8,\n lg: squareL + 16,\n xl: squareL + 24,\n }[size];\n\n const backgroundColor = getColor(state, theme);\n\n const color = state === \"Pending\" ? \"atmo2\" : undefined;\n const semantic = state !== \"Pending\" ? getSemantic(state) : undefined;\n const status = state === \"Current\" ? \"secondary_60\" : undefined;\n\n const IconComponent = {\n Pending: HourGlass,\n Failed: Level3Bad,\n Completed: Level0Good,\n }[state];\n\n return (\n <div\n className={cx(\n classes.root,\n {\n [classes.notCurrent]: state !== \"Current\",\n },\n className\n )}\n >\n <HvButton\n className={cx(classes.ghost, {\n [classes.ghostDisabled]: state === \"Current\",\n })}\n aria-label={`step-${title}`}\n icon\n variant=\"secondaryGhost\"\n overrideIconColors={false}\n disabled={disabled ?? [\"Current\", \"Disabled\"].includes(state)}\n onClick={onClick}\n >\n <HvAvatar\n className={cx(classes.avatar, classes[size])}\n backgroundColor={backgroundColor}\n status={status}\n size={size}\n >\n {IconComponent ? (\n <IconComponent\n color={color}\n semantic={semantic}\n width={svgSize}\n height={svgSize}\n iconSize={iconSize}\n />\n ) : (\n number\n )}\n </HvAvatar>\n </HvButton>\n </div>\n );\n};\n"],"names":["HvStep","className","classes","classesProp","state","title","onClick","disabled","size","number","cx","useClasses","iconSize","xs","sm","md","ml","xl","squareL","Pending","Failed","Completed","svgSize","lg","backgroundColor","getColor","theme","color","undefined","semantic","getSemantic","status","IconComponent","HourGlass","Level3Bad","Level0Good","root","notCurrent","children","HvButton","ghost","ghostDisabled","icon","variant","overrideIconColors","includes","HvAvatar","avatar","_jsx","width","height"],"mappings":";;;;;;AAiDO,MAAMA,SAASA,CAAC;AAAA,EACrBC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,OAAO;AAAA,EACPC,SAAS;AACE,MAAM;AACX,QAAA;AAAA,IAAEP;AAAAA,IAASQ;AAAAA,EAAAA,IAAOC,WAAWR,WAAW;AAE9C,QAAMS,WAAW;AAAA,IACfC,IAAI;AAAA,IACJC,IAAI;AAAA,IACJC,IAAI;AAAA,IACJC,IAAI;AAAA,IACJC,IAAI;AAAA,IACJT,IAAI;AAEN,QAAMU,UAAU;AAAA,IACdC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXjB,KAAK;AAEP,QAAMkB,UAAU;AAAA,IACdT,IAAIK,UAAU;AAAA,IACdJ,IAAII;AAAAA,IACJH,IAAIG,UAAU;AAAA,IACdK,IAAIL,UAAU;AAAA,IACdD,IAAIC,UAAU;AAAA,IACdV,IAAI;AAEAgB,QAAAA,kBAAkBC,SAASrB,OAAOsB,KAAK;AAEvCC,QAAAA,QAAQvB,UAAU,YAAY,UAAUwB;AAC9C,QAAMC,WAAWzB,UAAU,YAAY0B,YAAY1B,KAAK,IAAIwB;AACtDG,QAAAA,SAAS3B,UAAU,YAAY,iBAAiBwB;AAEtD,QAAMI,gBAAgB;AAAA,IACpBb,SAASc;AAAAA,IACTb,QAAQc;AAAAA,IACRb,WAAWc;AAAAA,IACX/B,KAAK;AAEP,6BACE,OAAA;AAAA,IACEH,WAAWS,GACTR,QAAQkC,MACR;AAAA,MACE,CAAClC,QAAQmC,UAAU,GAAGjC,UAAU;AAAA,OAElCH,SACF;AAAA,IAAEqC,8BAEDC,UAAQ;AAAA,MACPtC,WAAWS,GAAGR,QAAQsC,OAAO;AAAA,QAC3B,CAACtC,QAAQuC,aAAa,GAAGrC,UAAU;AAAA,MAAA,CACpC;AAAA,MACD,cAAa,QAAOC;AAAAA,MACpBqC,MAAI;AAAA,MACJC,SAAQ;AAAA,MACRC,oBAAoB;AAAA,MACpBrC,UAAUA,YAAY,CAAC,WAAW,UAAU,EAAEsC,SAASzC,KAAK;AAAA,MAC5DE;AAAAA,MAAiBgC,8BAEhBQ,UAAQ;AAAA,QACP7C,WAAWS,GAAGR,QAAQ6C,QAAQ7C,QAAQM,IAAI,CAAC;AAAA,QAC3CgB;AAAAA,QACAO;AAAAA,QACAvB;AAAAA,QAAW8B,UAEVN,gBACCgB,oBAAChB,eAAa;AAAA,UACZL;AAAAA,UACAE;AAAAA,UACAoB,OAAO3B;AAAAA,UACP4B,QAAQ5B;AAAAA,UACRV;AAAAA,QACD,CAAA,IAEDH;AAAAA,MAAAA,CAEM;AAAA,IAAA,CACF;AAAA,EAAA,CACP;AAET;"}