@hitachivantara/uikit-react-lab 5.4.20 → 5.4.21

package/dist/esm/components/Wizard/WizardContent/WizardContent.js

@@ -1,21 +1,24 @@
-import { ClassNames } from "@emotion/react";
 import { HvDialogContent } from "@hitachivantara/uikit-react-core";
 import { useElementSize } from "usehooks-ts";
 import React, { useContext, useRef, useState, useCallback, useEffect } from "react";
-import { styles } from "./WizardContent.styles.js";
+import { useClasses } from "./WizardContent.styles.js";
+import { staticClasses } from "./WizardContent.styles.js";
 import { LoadingContainer } from "./LoadingContainer.js";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
-import wizardContentClasses from "./wizardContentClasses.js";
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import HvWizardContext from "../WizardContext/WizardContext.js";
 const DRAWER_PERCENTAGE = 0.3;
 const DRAWER_MIN_WIDTH = 280;
 const HvWizardContent = ({
-  classes,
+  classes: classesProp,
   fixedHeight = false,
   loading = false,
   children,
   summaryContent
 }) => {
+  const {
+    classes,
+    cx
+  } = useClasses(classesProp);
   const {
     context,
     setContext,
@@ -91,49 +94,47 @@ const HvWizardContent = ({
     }
   }, [tab, context, setContext]);
   const translateX = summaryWidth ? summaryWidth + 10 : 450;
-  return /* @__PURE__ */ jsx(ClassNames, {
-    children: ({
-      css,
-      cx
-    }) => /* @__PURE__ */ jsxs("div", {
-      className: cx(wizardContentClasses.summaryRef, css(styles.summaryRef), classes == null ? void 0 : classes.summaryRef),
-      ref: (el) => {
-        containerRef(el);
-        if (el) {
-          summaryRef.current = el;
-        }
-      },
-      children: [summary !== null && /* @__PURE__ */ jsx("div", {
-        className: cx(wizardContentClasses.summarySticky, css(styles.summarySticky), classes == null ? void 0 : classes.summarySticky),
-        children: /* @__PURE__ */ jsx("div", {
-          className: cx(wizardContentClasses.summaryContainer, css(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__ */ jsx(HvDialogContent, {
-        className: cx(wizardContentClasses.contentContainer, fixedHeight && wizardContentClasses.fixedHeight, css(styles.contentContainer), fixedHeight && css(styles.fixedHeight), classes == null ? void 0 : classes.contentContainer, fixedHeight && (classes == null ? void 0 : classes.fixedHeight)),
-        indentContent: true,
-        children: /* @__PURE__ */ jsx(LoadingContainer, {
-          hidden: !loading,
-          children: React.Children.map(arrayChildren, (child, index) => {
-            if (index === tab) {
-              return React.cloneElement(child, {
-                tab
-              });
-            }
-            return null;
-          })
+  return /* @__PURE__ */ jsxs("div", {
+    className: classes.summaryRef,
+    ref: (el) => {
+      containerRef(el);
+      if (el) {
+        summaryRef.current = el;
+      }
+    },
+    children: [summary !== null && /* @__PURE__ */ jsx("div", {
+      className: classes.summarySticky,
+      children: /* @__PURE__ */ jsx("div", {
+        className: classes.summaryContainer,
+        style: {
+          left: summaryLeft,
+          width: summaryWidth,
+          height: summaryHeight,
+          transform: `translate(${summary ? 0 : translateX}px, 0)`
+        },
+        children: summaryContent
+      })
+    }), /* @__PURE__ */ jsx(HvDialogContent, {
+      className: cx(classes.contentContainer, {
+        [classes.fixedHeight]: fixedHeight
+      }),
+      indentContent: true,
+      children: /* @__PURE__ */ jsx(LoadingContainer, {
+        hidden: !loading,
+        children: React.Children.map(arrayChildren, (child, index) => {
+          if (index === tab) {
+            return React.cloneElement(child, {
+              tab
+            });
+          }
+          return null;
         })
-      })]
-    })
+      })
+    })]
   });
 };
 export {
-  HvWizardContent
+  HvWizardContent,
+  staticClasses as wizardContentClasses
 };
 //# sourceMappingURL=WizardContent.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"WizardContent.js","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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"}
+{"version":3,"file":"WizardContent.js","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/esm/components/Wizard/WizardContent/WizardContent.styles.js

@@ -1,5 +1,9 @@
 import { theme } from "@hitachivantara/uikit-styles";
-const styles = {
+import { createClasses } from "@hitachivantara/uikit-react-core";
+const {
+  staticClasses,
+  useClasses
+} = createClasses("HvWizardContent", {
   contentContainer: {
     position: "relative",
     padding: 20,
@@ -30,8 +34,9 @@ const styles = {
     transitionTimingFunction: "ease-in-out",
     overflowY: "scroll"
   }
-};
+});
 export {
-  styles
+  staticClasses,
+  useClasses
 };
 //# sourceMappingURL=WizardContent.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"WizardContent.styles.js","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,MAAMC,OAAOC;AAAAA,IACxBC,iBAAiBH,MAAMC,OAAOG;AAAAA,IAC9BC,YAAY;AAAA,IACZC,0BAA0B;AAAA,IAC1Bb,WAAW;AAAA,EACb;AACF;"}
+{"version":3,"file":"WizardContent.styles.js","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,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,MAAMC,OAAOC;AAAAA,IACxBC,iBAAiBH,MAAMC,OAAOG;AAAAA,IAC9BC,YAAY;AAAA,IACZC,0BAA0B;AAAA,IAC1Bb,WAAW;AAAA,EACb;AACF,CAAC;"}

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

@@ -1,12 +1,11 @@
-import { ClassNames } from "@emotion/react";
+import { useContext, useState, useEffect } from "react";
 import { HvDialogTitle, HvGrid, HvTypography, HvButton } from "@hitachivantara/uikit-react-core";
 import { Report } from "@hitachivantara/uikit-react-icons";
-import { useContext, useState, useEffect } from "react";
-import { styles } from "./WizardTitle.styles.js";
+import { useClasses } from "./WizardTitle.styles.js";
+import { staticClasses } 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";
+import { HvStepNavigation } from "../../StepNavigation/StepNavigation.js";
 const switchTabState = (state, currentTab, index) => {
   if (index === currentTab)
     return "Current";
@@ -22,7 +21,7 @@ const HvWizardTitle = ({
   title,
   hasSummary = false,
   labels = {},
-  classes,
+  classes: classesProp,
   customStep = {}
 }) => {
   const {
@@ -31,6 +30,9 @@ const HvWizardTitle = ({
     tab,
     setTab
   } = useContext(HvWizardContext);
+  const {
+    classes
+  } = useClasses(classesProp);
   const [steps, setSteps] = useState([]);
   useEffect(() => {
     return () => {
@@ -53,52 +55,48 @@ const HvWizardTitle = ({
       setSteps(updatedSteps);
     }
   }, [context, tab, setTab]);
-  return /* @__PURE__ */ jsx(ClassNames, {
-    children: ({
-      css,
-      cx
-    }) => /* @__PURE__ */ jsx(HvDialogTitle, {
-      className: cx(wizardTitleClasses.headerContainer, css(styles.headerContainer), classes == null ? void 0 : classes.headerContainer),
-      classes: {
-        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: 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: cx(wizardTitleClasses.stepContainer, css(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__ */ jsx(HvButton, {
-          variant: "secondarySubtle",
-          className: cx(wizardTitleClasses.buttonWidth, css(styles.buttonWidth), classes == null ? void 0 : classes.buttonWidth),
-          classes: {
-            root: cx(wizardTitleClasses.rootSummaryButton, css(styles.rootSummaryButton), classes == null ? void 0 : classes.rootSummaryButton)
-          },
-          onClick: toggleSummary,
-          startIcon: /* @__PURE__ */ jsx(Report, {}),
-          children: `${labels.summary ?? "Summary"}`
-        })]
-      })
+  return /* @__PURE__ */ jsx(HvDialogTitle, {
+    className: classes.headerContainer,
+    classes: {
+      messageContainer: classes.messageContainer
+    },
+    children: /* @__PURE__ */ jsxs(HvGrid, {
+      container: true,
+      justifyContent: "space-between",
+      alignItems: "center",
+      className: classes.titleContainer,
+      children: [title && /* @__PURE__ */ jsx(HvTypography, {
+        variant: "title3",
+        component: "h3",
+        children: title
+      }), !!steps.length && /* @__PURE__ */ jsx(HvStepNavigation, {
+        className: classes.stepContainer,
+        steps,
+        type: "Default",
+        stepSize: "xs",
+        width: {
+          xs: 200,
+          sm: 350,
+          md: 600,
+          lg: 800,
+          xl: 1e3
+        },
+        ...customStep
+      }), hasSummary && /* @__PURE__ */ jsx(HvButton, {
+        variant: "secondarySubtle",
+        className: classes.buttonWidth,
+        classes: {
+          root: classes.rootSummaryButton
+        },
+        onClick: toggleSummary,
+        startIcon: /* @__PURE__ */ jsx(Report, {}),
+        children: `${labels.summary ?? "Summary"}`
+      })]
     })
   });
 };
 export {
-  HvWizardTitle
+  HvWizardTitle,
+  staticClasses as wizardTitleClasses
 };
 //# sourceMappingURL=WizardTitle.js.map

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

@@ -1 +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 \"../../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":"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"}
+{"version":3,"file":"WizardTitle.js","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,WAAWC,eAAe;AAEjE,QAAA;AAAA,IAAER;AAAAA,EAAAA,IAAYS,WAAWR,WAAW;AAE1C,QAAM,CAACS,OAAOC,QAAQ,IAAIC,SAAwB,CAAE,CAAA;AAEpDC,YAAU,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,YAAU,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,6BACGmB,eAAa;AAAA,IACZC,WAAW1B,QAAQ2B;AAAAA,IACnB3B,SAAS;AAAA,MACP4B,kBAAkB5B,QAAQ4B;AAAAA,IAC5B;AAAA,IAAEC,+BAEDC,QAAM;AAAA,MACLC,WAAS;AAAA,MACTC,gBAAe;AAAA,MACfC,YAAW;AAAA,MACXP,WAAW1B,QAAQkC;AAAAA,MAAeL,UAEjChC,CAAAA,SACCsC,oBAACC,cAAY;AAAA,QAACC,SAAQ;AAAA,QAASC,WAAU;AAAA,QAAIT,UAC1ChC;AAAAA,MACW,CAAA,GAEf,CAAC,CAACa,MAAMS,8BACNoB,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,oBAACc,UAAQ;AAAA,QACPZ,SAAQ;AAAA,QACRX,WAAW1B,QAAQkD;AAAAA,QACnBlD,SAAS;AAAA,UACPmD,MAAMnD,QAAQoD;AAAAA,QAChB;AAAA,QACA5B,SAASV;AAAAA,QACTuC,WAAWlB,oBAACmB,UAAQ;AAAA,QAAEzB,UAEpB,GAAE9B,OAAOwD,WAAW;AAAA,MAAA,CACd,CACX;AAAA,IAAA,CACK;AAAA,EAAA,CACK;AAEnB;"}

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

@@ -1,5 +1,9 @@
 import { theme } from "@hitachivantara/uikit-styles";
-const styles = {
+import { createClasses } from "@hitachivantara/uikit-react-core";
+const {
+  staticClasses,
+  useClasses
+} = createClasses("HvWizardTitle", {
   messageContainer: {
     "& > div": {
       width: "100%"
@@ -26,8 +30,9 @@ const styles = {
   stepContainer: {
     margin: "auto"
   }
-};
+});
 export {
-  styles
+  staticClasses,
+  useClasses
 };
 //# sourceMappingURL=WizardTitle.styles.js.map

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

@@ -1 +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;"}
+{"version":3,"file":"WizardTitle.styles.js","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,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,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/esm/index.js

@@ -1,15 +1,15 @@
-import { default as default2 } from "./components/StepNavigation/stepNavigationClasses.js";
+import { staticClasses } from "./components/StepNavigation/StepNavigation.styles.js";
 import { HvStepNavigation } from "./components/StepNavigation/StepNavigation.js";
-import { default as default3 } from "./components/Wizard/wizardClasses.js";
+import { staticClasses as staticClasses2 } from "./components/Wizard/Wizard.styles.js";
 import { HvWizard } from "./components/Wizard/Wizard.js";
-import { default as default4 } from "./components/Wizard/WizardActions/wizardActionsClasses.js";
+import { staticClasses as staticClasses3 } from "./components/Wizard/WizardActions/WizardActions.styles.js";
 import { HvWizardActions } from "./components/Wizard/WizardActions/WizardActions.js";
-import { default as default5 } from "./components/Wizard/WizardContainer/wizardContainerClasses.js";
+import { staticClasses as staticClasses4 } from "./components/Wizard/WizardContainer/WizardContainer.styles.js";
 import { HvWizardContainer } from "./components/Wizard/WizardContainer/WizardContainer.js";
-import { default as default6 } from "./components/Wizard/WizardContent/wizardContentClasses.js";
+import { staticClasses as staticClasses5 } from "./components/Wizard/WizardContent/WizardContent.styles.js";
 import { HvWizardContent } from "./components/Wizard/WizardContent/WizardContent.js";
-import { default as default7 } from "./components/Wizard/WizardContext/WizardContext.js";
-import { default as default8 } from "./components/Wizard/WizardTitle/wizardTitleClasses.js";
+import { default as default2 } from "./components/Wizard/WizardContext/WizardContext.js";
+import { staticClasses as staticClasses6 } from "./components/Wizard/WizardTitle/WizardTitle.styles.js";
 import { HvWizardTitle } from "./components/Wizard/WizardTitle/WizardTitle.js";
 export {
   HvStepNavigation,
@@ -17,13 +17,13 @@ export {
   HvWizardActions,
   HvWizardContainer,
   HvWizardContent,
-  default7 as HvWizardContext,
+  default2 as HvWizardContext,
   HvWizardTitle,
-  default2 as stepNavigationClasses,
-  default4 as wizardActionsClasses,
-  default3 as wizardClasses,
-  default5 as wizardContainerClasses,
-  default6 as wizardContentClasses,
-  default8 as wizardTitleClasses
+  staticClasses as stepNavigationClasses,
+  staticClasses3 as wizardActionsClasses,
+  staticClasses2 as wizardClasses,
+  staticClasses4 as wizardContainerClasses,
+  staticClasses5 as wizardContentClasses,
+  staticClasses6 as wizardTitleClasses
 };
 //# sourceMappingURL=index.js.map