@hitachivantara/uikit-react-lab 5.2.0 → 5.2.1

package/dist/cjs/packages/lab/src/components/Wizard/WizardContent/wizardContentClasses.cjs

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const classKeys = ["contentContainer", "fixedHeight", "summaryRef", "summarySticky", "summaryContainer"];
+const wizardContentClasses = uikitReactCore.getClasses(classKeys, "HvWizardContent");
+const wizardContentClasses$1 = wizardContentClasses;
+exports.default = wizardContentClasses$1;
+//# sourceMappingURL=wizardContentClasses.cjs.map

package/dist/cjs/packages/lab/src/components/Wizard/WizardContent/wizardContentClasses.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"wizardContentClasses.cjs","sources":["../../../../../../../../src/components/Wizard/WizardContent/wizardContentClasses.ts"],"sourcesContent":["import { getClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport type HvWizardContentClasses = {\n  /** Style applied to the Wizard content container. */\n  contentContainer?: string;\n  /** Style applied to the Wizard to fix its height. */\n  fixedHeight?: string;\n  /** Style applied to the summary container around the page content container. */\n  summaryRef?: string;\n  /** Style applied to the Summary container to stick it to the top. */\n  summarySticky?: string;\n  /** Style applied to the Summary container to position it on the right. */\n  summaryContainer?: string;\n};\n\nconst classKeys: string[] = [\n  \"contentContainer\",\n  \"fixedHeight\",\n  \"summaryRef\",\n  \"summarySticky\",\n  \"summaryContainer\",\n];\n\nconst wizardContentClasses = getClasses<HvWizardContentClasses>(\n  classKeys,\n  \"HvWizardContent\"\n);\n\nexport default wizardContentClasses;\n"],"names":["classKeys","wizardContentClasses","getClasses"],"mappings":";;;AAeA,MAAMA,YAAsB,CAC1B,oBACA,eACA,cACA,iBACA,kBAAkB;AAGpB,MAAMC,uBAAuBC,eAC3BF,WAAAA,WACA,iBAAiB;AAGnB,MAAA,yBAAeC;;"}

package/dist/cjs/packages/lab/src/components/Wizard/WizardContext/WizardContext.cjs

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const React = require("react");
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const HvWizardContext = React.createContext({
+  context: {},
+  updateContext: () => {
+  },
+  summary: void 0,
+  setSummary: ({}) => {
+  },
+  tab: 0,
+  setTab: () => {
+  }
+});
+const HvWizardProvider = ({
+  children
+}) => {
+  const [context, setContext] = React.useState({});
+  const [summary, setSummary] = React.useState(void 0);
+  const [tab, setTab] = React.useState(0);
+  const updateContext = React.useCallback((newContext) => {
+    if (Object.entries(newContext).length > 0) {
+      setContext(newContext);
+    }
+  }, [setContext]);
+  return /* @__PURE__ */ jsxRuntime.jsx(HvWizardContext.Provider, {
+    value: {
+      context,
+      updateContext,
+      summary,
+      setSummary,
+      tab,
+      setTab
+    },
+    children
+  });
+};
+const WizardProvider = HvWizardProvider;
+exports.HvWizardContext = HvWizardContext;
+exports.default = WizardProvider;
+//# sourceMappingURL=WizardContext.cjs.map

package/dist/cjs/packages/lab/src/components/Wizard/WizardContext/WizardContext.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"WizardContext.cjs","sources":["../../../../../../../../src/components/Wizard/WizardContext/WizardContext.tsx"],"sourcesContent":["import React, {\n  createContext,\n  useState,\n  Dispatch,\n  SetStateAction,\n  useCallback,\n} from \"react\";\n\nexport type HvWizardTab = {\n  name?: string;\n  valid?: boolean;\n  mustValidate?: boolean;\n  touched?: boolean;\n  form?: any;\n  children?: React.ReactNode;\n};\n\nexport type HvWizardTabs<T extends HvWizardTab> = {\n  [tab in number]?: T;\n};\n\ntype HvWizardContextProp = {\n  context: HvWizardTabs<HvWizardTab>;\n  updateContext: (values?: HvWizardTabs<HvWizardTab>) => void;\n  summary: any;\n  setSummary: (oldSummary?: any) => void;\n  tab: any;\n  setTab: Dispatch<SetStateAction<number>>;\n};\n\nexport const HvWizardContext = createContext<HvWizardContextProp>({\n  context: {},\n  updateContext: () => {},\n  summary: undefined,\n  setSummary: ({}) => {},\n  tab: 0,\n  setTab: () => {},\n});\n\nconst HvWizardProvider = ({ children }) => {\n  const [context, setContext] = useState({});\n  const [summary, setSummary] = useState(undefined);\n  const [tab, setTab] = useState(0);\n\n  const updateContext = useCallback(\n    (newContext) => {\n      if (Object.entries(newContext).length > 0) {\n        setContext(newContext);\n      }\n    },\n    [setContext]\n  );\n\n  return (\n    <HvWizardContext.Provider\n      value={{\n        context,\n        updateContext,\n        summary,\n        setSummary,\n        tab,\n        setTab,\n      }}\n    >\n      {children}\n    </HvWizardContext.Provider>\n  );\n};\n\nexport default HvWizardProvider;\n"],"names":["HvWizardContext","createContext","context","updateContext","summary","undefined","setSummary","tab","setTab","HvWizardProvider","children","setContext","useState","useCallback","newContext","Object","entries","length","_jsx","Provider","value"],"mappings":";;;;AA8BO,MAAMA,kBAAkBC,MAAAA,cAAmC;AAAA,EAChEC,SAAS,CAAC;AAAA,EACVC,eAAeA,MAAM;AAAA,EAAC;AAAA,EACtBC,SAASC;AAAAA,EACTC,YAAYA,CAAC,CAAA,MAAO;AAAA,EAAC;AAAA,EACrBC,KAAK;AAAA,EACLC,QAAQA,MAAM;AAAA,EAAC;AACjB,CAAC;AAED,MAAMC,mBAAmBA,CAAC;AAAA,EAAEC;AAAS,MAAM;AACzC,QAAM,CAACR,SAASS,UAAU,IAAIC,MAAAA,SAAS,CAAE,CAAA;AACzC,QAAM,CAACR,SAASE,UAAU,IAAIM,MAAAA,SAASP,MAAS;AAChD,QAAM,CAACE,KAAKC,MAAM,IAAII,eAAS,CAAC;AAE1BT,QAAAA,gBAAgBU,kBACnBC,CAAe,eAAA;AACd,QAAIC,OAAOC,QAAQF,UAAU,EAAEG,SAAS,GAAG;AACzCN,iBAAWG,UAAU;AAAA,IACvB;AAAA,EAAA,GAEF,CAACH,UAAU,CAAC;AAIZO,SAAAA,2BAAAA,IAAClB,gBAAgBmB,UAAQ;AAAA,IACvBC,OAAO;AAAA,MACLlB;AAAAA,MACAC;AAAAA,MACAC;AAAAA,MACAE;AAAAA,MACAC;AAAAA,MACAC;AAAAA,IACF;AAAA,IAAEE;AAAAA,EAAAA,CAGuB;AAE/B;AAEA,MAAA,iBAAeD;;;"}

package/dist/cjs/packages/lab/src/components/Wizard/WizardTitle/WizardTitle.cjs

@@ -0,0 +1,106 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("@emotion/react");
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+const clsx_m = require("../../../../../../node_modules/clsx/dist/clsx.m.cjs");
+const wizardTitleClasses = require("./wizardTitleClasses.cjs");
+const WizardTitle_styles = require("./WizardTitle.styles.cjs");
+const React = require("react");
+const WizardContext = require("../WizardContext/WizardContext.cjs");
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const StepNavigation = require("../../StepNavigation/StepNavigation.cjs");
+const switchTabState = (state, currentTab, index) => {
+  if (index === currentTab)
+    return "Current";
+  if (state.valid)
+    return "Completed";
+  if (state.valid === null)
+    return "Enabled";
+  if (state.touched && state.valid === false)
+    return "Failed";
+  return "Enabled";
+};
+const HvWizardTitle = ({
+  title,
+  hasSummary = false,
+  labels = {},
+  classes,
+  customStep = {}
+}) => {
+  const {
+    context,
+    summary,
+    setSummary,
+    tab,
+    setTab
+  } = React.useContext(WizardContext.HvWizardContext);
+  const [steps, setSteps] = React.useState([]);
+  React.useEffect(() => {
+    if (summary === null && hasSummary) {
+      setSummary(false);
+    }
+    return () => {
+      setSummary(false);
+    };
+  }, []);
+  React.useEffect(() => {
+    const contextArray = Object.entries(context);
+    if (contextArray.length) {
+      const updatedSteps = contextArray.map(([, childState], index) => {
+        return {
+          title: (childState == null ? void 0 : childState.name) ?? `${index + 1}`,
+          state: switchTabState(childState, tab, index),
+          onClick: () => setTab(index)
+        };
+      });
+      setSteps(updatedSteps);
+    }
+  }, [context, tab, setTab]);
+  const toggleSummary = () => {
+    setSummary((oldSummary) => !oldSummary);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
+    children: ({
+      css
+    }) => /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvDialogTitle, {
+      className: clsx_m.clsx(classes == null ? void 0 : classes.headerContainer, wizardTitleClasses.default.headerContainer, css(WizardTitle_styles.styles.headerContainer)),
+      classes: {
+        messageContainer: clsx_m.clsx(classes == null ? void 0 : classes.messageContainer, wizardTitleClasses.default.messageContainer, css(WizardTitle_styles.styles.messageContainer))
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs(uikitReactCore.HvGrid, {
+        container: true,
+        justifyContent: "space-between",
+        alignItems: "center",
+        className: clsx_m.clsx(classes == null ? void 0 : classes.titleContainer, wizardTitleClasses.default.titleContainer, css(WizardTitle_styles.styles.titleContainer)),
+        children: [title && /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvTypography, {
+          variant: "title3",
+          component: "h3",
+          children: title
+        }), !!steps.length && /* @__PURE__ */ jsxRuntime.jsx(StepNavigation.HvStepNavigation, {
+          className: clsx_m.clsx(classes == null ? void 0 : classes.stepContainer, wizardTitleClasses.default.stepContainer, css(WizardTitle_styles.styles.stepContainer)),
+          steps,
+          type: (customStep == null ? void 0 : customStep.type) ?? "Default",
+          stepSize: (customStep == null ? void 0 : customStep.stepSize) ?? "xs",
+          width: (customStep == null ? void 0 : customStep.width) ?? {
+            xs: 200,
+            sm: 350,
+            md: 600,
+            lg: 800
+          }
+        }), hasSummary && /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, {
+          variant: "secondarySubtle",
+          className: clsx_m.clsx(classes == null ? void 0 : classes.buttonWidth, wizardTitleClasses.default.buttonWidth, css(WizardTitle_styles.styles.buttonWidth)),
+          classes: {
+            root: clsx_m.clsx(classes == null ? void 0 : classes.rootSummaryButton, wizardTitleClasses.default.rootSummaryButton, css(WizardTitle_styles.styles.rootSummaryButton))
+          },
+          onClick: toggleSummary,
+          startIcon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Report, {}),
+          children: `${labels.summary ?? "Summary"}`
+        })]
+      })
+    })
+  });
+};
+exports.HvWizardTitle = HvWizardTitle;
+//# sourceMappingURL=WizardTitle.cjs.map

package/dist/cjs/packages/lab/src/components/Wizard/WizardTitle/WizardTitle.cjs.map

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

package/dist/cjs/packages/lab/src/components/Wizard/WizardTitle/WizardTitle.styles.cjs

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const styles = {
+  messageContainer: {
+    "& > div": {
+      width: "100%"
+    }
+  },
+  titleContainer: {
+    margin: 0,
+    width: "100%"
+  },
+  buttonWidth: {
+    width: 120
+  },
+  rootSummaryButton: {
+    paddingRight: 18
+  },
+  headerContainer: {
+    backgroundColor: uikitReactCore.theme.colors.atmo2,
+    "& h6": {
+      fontSize: "16px",
+      fontWeight: "bold",
+      letterSpacing: 0
+    }
+  },
+  stepContainer: {
+    margin: "auto"
+  }
+};
+exports.styles = styles;
+//# sourceMappingURL=WizardTitle.styles.cjs.map

package/dist/cjs/packages/lab/src/components/Wizard/WizardTitle/WizardTitle.styles.cjs.map

@@ -0,0 +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-react-core\";\n\nexport const styles: { [key: string]: CSSInterpolation } = {\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":";;;AAGO,MAAMA,SAA8C;AAAA,EACzDC,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,eAAAA,MAAMC,OAAOC;AAAAA,IAC9B,QAAQ;AAAA,MACNC,UAAU;AAAA,MACVC,YAAY;AAAA,MACZC,eAAe;AAAA,IACjB;AAAA,EACF;AAAA,EACAC,eAAe;AAAA,IACbZ,QAAQ;AAAA,EACV;AACF;;"}

package/dist/cjs/packages/lab/src/components/Wizard/WizardTitle/wizardTitleClasses.cjs

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const classKeys = ["headerContainer", "messageContainer", "titleContainer", "buttonWidth", "rootSummaryButton", "stepContainer"];
+const wizardTitleClasses = uikitReactCore.getClasses(classKeys, "HvWizardTitle");
+const wizardTitleClasses$1 = wizardTitleClasses;
+exports.default = wizardTitleClasses$1;
+//# sourceMappingURL=wizardTitleClasses.cjs.map

package/dist/cjs/packages/lab/src/components/Wizard/WizardTitle/wizardTitleClasses.cjs.map

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

package/dist/cjs/packages/lab/src/components/Wizard/wizardClasses.cjs

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const classKeys = ["root"];
+const wizardClasses = uikitReactCore.getClasses(classKeys, "HvWizard");
+const wizardClasses$1 = wizardClasses;
+exports.default = wizardClasses$1;
+//# sourceMappingURL=wizardClasses.cjs.map

package/dist/cjs/packages/lab/src/components/Wizard/wizardClasses.cjs.map

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

package/dist/cjs/packages/lab/src/index.cjs

@@ -1,5 +1,19 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const stepNavigationClasses = require("./components/StepNavigation/stepNavigationClasses.cjs");
 const StepNavigation = require("./components/StepNavigation/StepNavigation.cjs");
+const wizardClasses = require("./components/Wizard/wizardClasses.cjs");
+const WizardContainer = require("./components/Wizard/WizardContainer/WizardContainer.cjs");
+const WizardTitle = require("./components/Wizard/WizardTitle/WizardTitle.cjs");
+const WizardContent = require("./components/Wizard/WizardContent/WizardContent.cjs");
+const WizardActions = require("./components/Wizard/WizardActions/WizardActions.cjs");
+const Wizard = require("./components/Wizard/Wizard.cjs");
+exports.stepNavigationClasses = stepNavigationClasses.default;
 exports.HvStepNavigation = StepNavigation.HvStepNavigation;
+exports.wizardClasses = wizardClasses.default;
+exports.HvWizardContainer = WizardContainer.HvWizardContainer;
+exports.HvWizardTitle = WizardTitle.HvWizardTitle;
+exports.HvWizardContent = WizardContent.HvWizardContent;
+exports.HvWizardActions = WizardActions.HvWizardActions;
+exports.HvWizard = Wizard.HvWizard;
 //# sourceMappingURL=index.cjs.map

package/dist/cjs/packages/lab/src/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}

package/dist/esm/packages/lab/src/components/Wizard/Wizard.js

@@ -0,0 +1,65 @@
+import { useCallback } from "react";
+import { HvWizardContainer } from "./WizardContainer/WizardContainer.js";
+import { HvWizardTitle } from "./WizardTitle/WizardTitle.js";
+import { HvWizardContent } from "./WizardContent/WizardContent.js";
+import WizardProvider from "./WizardContext/WizardContext.js";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { HvWizardActions } from "./WizardActions/WizardActions.js";
+const HvWizard = ({
+  className,
+  children,
+  onClose,
+  handleSubmit,
+  title,
+  open,
+  skippable = true,
+  loading = false,
+  hasSummary = false,
+  summaryContent,
+  labels = {
+    cancel: "Cancel",
+    next: "Next",
+    previous: "Previous",
+    skip: "Skip",
+    submit: "Submit",
+    summary: "Summary"
+  },
+  fixedHeight = false,
+  customStep,
+  ...others
+}) => {
+  const handleClose = useCallback((evt, reason) => {
+    if (reason !== "backdropClick") {
+      onClose == null ? void 0 : onClose(evt, reason);
+    }
+  }, [onClose]);
+  return /* @__PURE__ */ jsx(WizardProvider, {
+    children: /* @__PURE__ */ jsxs(HvWizardContainer, {
+      className,
+      handleClose,
+      open,
+      ...others,
+      children: [/* @__PURE__ */ jsx(HvWizardTitle, {
+        title,
+        hasSummary,
+        labels,
+        customStep
+      }), /* @__PURE__ */ jsx(HvWizardContent, {
+        loading,
+        fixedHeight,
+        summaryContent,
+        children
+      }), /* @__PURE__ */ jsx(HvWizardActions, {
+        loading,
+        skippable,
+        labels,
+        handleClose,
+        handleSubmit
+      })]
+    })
+  });
+};
+export {
+  HvWizard
+};
+//# sourceMappingURL=Wizard.js.map

package/dist/esm/packages/lab/src/components/Wizard/Wizard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Wizard.js","sources":["../../../../../../../src/components/Wizard/Wizard.tsx"],"sourcesContent":["import { HvBaseProps } from \"@hitachivantara/uikit-react-core\";\nimport { HvStepNavigationProps } from \"..\";\nimport { HvWizardClasses } from \"./wizardClasses\";\nimport { ModalProps } from \"@mui/material\";\nimport React, { useCallback } from \"react\";\nimport { HvWizardContainer } from \"./WizardContainer/WizardContainer\";\nimport { HvWizardTitle, HvWizardTitleProps } from \"./WizardTitle/WizardTitle\";\nimport { HvWizardContent } from \"./WizardContent/WizardContent\";\nimport { HvWizardActions } from \"./index\";\nimport WizardProvider, {\n  HvWizardTabs,\n  HvWizardTab,\n} from \"./WizardContext/WizardContext\";\nimport { HvWizardActionsProps } from \"./WizardActions/WizardActions\";\n\nexport interface HvWizardProps extends HvBaseProps {\n  /** Current state of the Wizard. */\n  open: boolean;\n  /** Function executed on close. */\n  onClose: ModalProps[\"onClose\"];\n  /** Function executed on submit. */\n  handleSubmit: (context: HvWizardTabs<HvWizardTab>) => void;\n  /** Title for the wizard. */\n  title?: string;\n  /** An object containing all the labels for the wizard. */\n  labels?: HvWizardActionsProps[\"labels\"] & HvWizardTitleProps[\"labels\"];\n  /** Shows the summary button. */\n  hasSummary?: boolean;\n  /** The content of the summary. */\n  summaryContent?: React.ReactNode;\n  /** Enables the skip button. */\n  skippable?: boolean;\n  /** Forces minimum height to the component. */\n  fixedHeight?: boolean;\n  /** Whether the loading animation is shown. */\n  loading?: boolean;\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?: HvWizardClasses;\n}\n\nexport const HvWizard = ({\n  className,\n  children,\n  onClose,\n  handleSubmit,\n  title,\n  open,\n  skippable = true,\n  loading = false,\n  hasSummary = false,\n  summaryContent,\n  labels = {\n    cancel: \"Cancel\",\n    next: \"Next\",\n    previous: \"Previous\",\n    skip: \"Skip\",\n    submit: \"Submit\",\n    summary: \"Summary\",\n  },\n  fixedHeight = false,\n  customStep,\n  ...others\n}: HvWizardProps) => {\n  const handleClose = useCallback(\n    (evt, reason) => {\n      if (reason !== \"backdropClick\") {\n        onClose?.(evt, reason);\n      }\n    },\n    [onClose]\n  );\n\n  return (\n    <WizardProvider>\n      <HvWizardContainer\n        className={className}\n        handleClose={handleClose}\n        open={open}\n        {...others}\n      >\n        <HvWizardTitle\n          title={title}\n          hasSummary={hasSummary}\n          labels={labels}\n          customStep={customStep}\n        />\n        <HvWizardContent\n          loading={loading}\n          fixedHeight={fixedHeight}\n          summaryContent={summaryContent}\n        >\n          {children}\n        </HvWizardContent>\n        <HvWizardActions\n          loading={loading}\n          skippable={skippable}\n          labels={labels}\n          handleClose={handleClose}\n          handleSubmit={handleSubmit}\n        />\n      </HvWizardContainer>\n    </WizardProvider>\n  );\n};\n"],"names":["HvWizard","className","children","onClose","handleSubmit","title","open","skippable","loading","hasSummary","summaryContent","labels","cancel","next","previous","skip","submit","summary","fixedHeight","customStep","others","handleClose","useCallback","evt","reason","WizardProvider","HvWizardContainer","_jsx","HvWizardTitle","HvWizardContent","HvWizardActions"],"mappings":";;;;;;;AA0CO,MAAMA,WAAWA,CAAC;AAAA,EACvBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,YAAY;AAAA,EACZC,UAAU;AAAA,EACVC,aAAa;AAAA,EACbC;AAAAA,EACAC,SAAS;AAAA,IACPC,QAAQ;AAAA,IACRC,MAAM;AAAA,IACNC,UAAU;AAAA,IACVC,MAAM;AAAA,IACNC,QAAQ;AAAA,IACRC,SAAS;AAAA,EACX;AAAA,EACAC,cAAc;AAAA,EACdC;AAAAA,EACA,GAAGC;AACU,MAAM;AACnB,QAAMC,cAAcC,YAClB,CAACC,KAAKC,WAAW;AACf,QAAIA,WAAW,iBAAiB;AAC9BrB,yCAAUoB,KAAKC;AAAAA,IACjB;AAAA,EAAA,GAEF,CAACrB,OAAO,CAAC;AAGX,6BACGsB,gBAAc;AAAA,IAAAvB,+BACZwB,mBAAiB;AAAA,MAChBzB;AAAAA,MACAoB;AAAAA,MACAf;AAAAA,MAAW,GACPc;AAAAA,MAAMlB,UAAA,CAEVyB,oBAACC,eAAa;AAAA,QACZvB;AAAAA,QACAI;AAAAA,QACAE;AAAAA,QACAQ;AAAAA,MAAAA,CACA,GACFQ,oBAACE,iBAAe;AAAA,QACdrB;AAAAA,QACAU;AAAAA,QACAR;AAAAA,QAA+BR;AAAAA,MAAAA,CAGf,GAClByB,oBAACG,iBAAe;AAAA,QACdtB;AAAAA,QACAD;AAAAA,QACAI;AAAAA,QACAU;AAAAA,QACAjB;AAAAA,MAAAA,CACA,CAAA;AAAA,IAAA,CAAA;AAAA,EAAA,CAEW;AAErB;"}

package/dist/esm/packages/lab/src/components/Wizard/WizardActions/WizardActions.js

@@ -0,0 +1,113 @@
+import { useContext, useState, useEffect, useCallback } from "react";
+import { ClassNames } from "@emotion/react";
+import { clsx } from "../../../../../../node_modules/clsx/dist/clsx.m.js";
+import { HvDialogActions, HvGrid, HvButton } from "@hitachivantara/uikit-react-core";
+import { Backwards, Forwards } from "@hitachivantara/uikit-react-icons";
+import wizardActionsClasses from "./wizardActionsClasses.js";
+import { styles } from "./WizardActions.styles.js";
+import { HvWizardContext } from "../WizardContext/WizardContext.js";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+const HvWizardActions = ({
+  classes,
+  handleClose,
+  handleSubmit,
+  loading = false,
+  skippable = false,
+  labels = {
+    cancel: "Cancel",
+    next: "Next",
+    previous: "Previous",
+    skip: "Skip",
+    submit: "Submit"
+  }
+}) => {
+  const {
+    context,
+    updateContext,
+    tab,
+    setTab
+  } = useContext(HvWizardContext);
+  const [pages, setPages] = useState(0);
+  const [canSubmit, setCanSubmit] = useState(false);
+  useEffect(() => {
+    const contextEntries = Object.entries(context);
+    if (contextEntries.length) {
+      setPages(contextEntries.length);
+      const validWizard = Object.entries(context).every(([, value]) => value == null ? void 0 : value.valid);
+      if (validWizard !== canSubmit) {
+        setCanSubmit(validWizard);
+      }
+    }
+  }, [context]);
+  const lastPage = pages - 1;
+  const isLastPage = tab >= lastPage;
+  const handleSkip = useCallback(() => {
+    const skippedContext = Object.entries(context).map(([, child]) => ({
+      ...child,
+      valid: (child == null ? void 0 : child.valid) !== false
+    }));
+    updateContext(skippedContext);
+    setTab(lastPage);
+  }, [setTab, context, lastPage, updateContext]);
+  const handleSubmitInternal = useCallback(() => handleSubmit(context), [handleSubmit, context]);
+  const onCloseHander = useCallback((event) => {
+    const clearContext = Object.entries(context).map(([, child]) => ({
+      ...child,
+      touched: false
+    }));
+    updateContext(clearContext);
+    setTab(0);
+    handleClose == null ? void 0 : handleClose(event);
+  }, []);
+  return /* @__PURE__ */ jsx(ClassNames, {
+    children: ({
+      css
+    }) => {
+      var _a;
+      return /* @__PURE__ */ jsxs(HvDialogActions, {
+        className: clsx(classes == null ? void 0 : classes.actionsContainer, wizardActionsClasses.actionsContainer, css(styles.actionsContainer)),
+        children: [/* @__PURE__ */ jsxs(HvGrid, {
+          children: [/* @__PURE__ */ jsx(HvButton, {
+            variant: "secondaryGhost",
+            onClick: onCloseHander,
+            className: clsx(classes == null ? void 0 : classes.buttonWidth, wizardActionsClasses.buttonWidth, css(styles.buttonWidth)),
+            children: `${labels.cancel ?? "Cancel"}`
+          }), skippable && /* @__PURE__ */ jsx(HvButton, {
+            variant: "secondaryGhost",
+            disabled: isLastPage,
+            className: clsx(classes == null ? void 0 : classes.buttonWidth, wizardActionsClasses.buttonWidth, css(styles.buttonWidth)),
+            onClick: handleSkip,
+            children: `${labels.skip ?? "Skip"}`
+          })]
+        }), /* @__PURE__ */ jsxs(HvGrid, {
+          className: clsx(classes == null ? void 0 : classes.buttonsContainer, wizardActionsClasses.buttonsContainer, css(styles.buttonsContainer)),
+          children: [/* @__PURE__ */ jsx(HvButton, {
+            variant: "secondaryGhost",
+            className: clsx(classes == null ? void 0 : classes.buttonWidth, wizardActionsClasses.buttonWidth, css(styles.buttonWidth)),
+            disabled: tab <= 0,
+            onClick: () => setTab((t) => t - 1),
+            startIcon: /* @__PURE__ */ jsx(Backwards, {}),
+            children: `${labels.previous ?? "Previous"}`
+          }), isLastPage ? /* @__PURE__ */ jsx(HvButton, {
+            variant: "primary",
+            className: clsx(classes == null ? void 0 : classes.buttonWidth, wizardActionsClasses.buttonWidth, css(styles.buttonWidth)),
+            disabled: loading || !canSubmit,
+            onClick: handleSubmitInternal,
+            children: `${labels.submit ?? "Submit"}`
+          }) : /* @__PURE__ */ jsx(HvButton, {
+            variant: "secondaryGhost",
+            className: clsx(classes == null ? void 0 : classes.buttonWidth, wizardActionsClasses.buttonWidth, css(styles.buttonWidth), classes == null ? void 0 : classes.buttonSpacing, wizardActionsClasses.buttonSpacing, css(styles.buttonSpacing)),
+            onClick: () => setTab((t) => t + 1),
+            disabled: !skippable && !((_a = context == null ? void 0 : context[tab]) == null ? void 0 : _a.valid),
+            endIcon: /* @__PURE__ */ jsx(Forwards, {}),
+            children: `${labels.next ?? "Next"}`
+          })]
+        })]
+      });
+    }
+  });
+};
+export {
+  HvWizardActions
+};
+//# sourceMappingURL=WizardActions.js.map

package/dist/esm/packages/lab/src/components/Wizard/WizardActions/WizardActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WizardActions.js","sources":["../../../../../../../../src/components/Wizard/WizardActions/WizardActions.tsx"],"sourcesContent":["import { useCallback, useContext, useEffect, useState } from \"react\";\nimport { ClassNames } from \"@emotion/react\";\nimport { clsx } from \"clsx\";\nimport {\n  HvBaseProps,\n  HvButton,\n  HvDialogActions,\n  HvGrid,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Backwards, Forwards } from \"@hitachivantara/uikit-react-icons\";\nimport wizardActionsClasses, {\n  HvWizardActionsClasses,\n} from \"./wizardActionsClasses\";\nimport { styles } from \"./WizardActions.styles\";\nimport { HvWizardContext } from \"../WizardContext/WizardContext\";\n\nexport interface HvWizardActionsProps extends HvBaseProps {\n  /** Function to handle the cancel button. */\n  handleClose: (\n    event: React.SyntheticEvent,\n    reason?: \"escapeKeyDown\" | \"backdropClick\"\n  ) => void;\n  /** Function to handle the submit button. Also sends the current context state. */\n  handleSubmit: (context: any) => void;\n  /** An object containing all the labels for the wizard actions component. */\n  labels?: {\n    /** Cancel button label. */\n    cancel?: string;\n    /** Skip button label. */\n    skip?: string;\n    /** Previous button label. */\n    previous?: string;\n    /** Next button label. */\n    next?: string;\n    /** Submit button label. */\n    submit?: string;\n  };\n  /** Whether the submit button is disabled. */\n  loading?: boolean;\n  /** Enables the skip button. */\n  skippable?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n  classes?: HvWizardActionsClasses;\n}\n\nexport const HvWizardActions = ({\n  classes,\n  handleClose,\n  handleSubmit,\n  loading = false,\n  skippable = false,\n  labels = {\n    cancel: \"Cancel\",\n    next: \"Next\",\n    previous: \"Previous\",\n    skip: \"Skip\",\n    submit: \"Submit\",\n  },\n}: HvWizardActionsProps) => {\n  const { context, updateContext, tab, setTab } = useContext(HvWizardContext);\n  const [pages, setPages] = useState(0);\n  const [canSubmit, setCanSubmit] = useState(false);\n\n  useEffect(() => {\n    const contextEntries = Object.entries(context);\n    if (contextEntries.length) {\n      setPages(contextEntries.length);\n\n      const validWizard = Object.entries(context).every(\n        ([, value]) => value?.valid\n      );\n      if (validWizard !== canSubmit) {\n        setCanSubmit(validWizard);\n      }\n    }\n  }, [context]);\n\n  const lastPage = pages - 1;\n  const isLastPage = tab >= lastPage;\n\n  const handleSkip = useCallback(() => {\n    const skippedContext = Object.entries(context).map(([, child]) => ({\n      ...child,\n      valid: child?.valid !== false,\n    }));\n\n    updateContext(skippedContext);\n    setTab(lastPage);\n  }, [setTab, context, lastPage, updateContext]);\n\n  const handleSubmitInternal = useCallback(\n    () => handleSubmit(context),\n    [handleSubmit, context]\n  );\n\n  const onCloseHander = useCallback((event) => {\n    const clearContext = Object.entries(context).map(([, child]) => ({\n      ...child,\n      touched: false,\n    }));\n\n    updateContext(clearContext);\n    setTab(0);\n    handleClose?.(event);\n  }, []);\n\n  return (\n    <ClassNames>\n      {({ css }) => (\n        <HvDialogActions\n          className={clsx(\n            classes?.actionsContainer,\n            wizardActionsClasses.actionsContainer,\n            css(styles.actionsContainer)\n          )}\n        >\n          <HvGrid>\n            <HvButton\n              variant=\"secondaryGhost\"\n              onClick={onCloseHander}\n              className={clsx(\n                classes?.buttonWidth,\n                wizardActionsClasses.buttonWidth,\n                css(styles.buttonWidth)\n              )}\n            >\n              {`${labels.cancel ?? \"Cancel\"}`}\n            </HvButton>\n            {skippable && (\n              <HvButton\n                variant=\"secondaryGhost\"\n                disabled={isLastPage}\n                className={clsx(\n                  classes?.buttonWidth,\n                  wizardActionsClasses.buttonWidth,\n                  css(styles.buttonWidth)\n                )}\n                onClick={handleSkip}\n              >\n                {`${labels.skip ?? \"Skip\"}`}\n              </HvButton>\n            )}\n          </HvGrid>\n          <HvGrid\n            className={clsx(\n              classes?.buttonsContainer,\n              wizardActionsClasses.buttonsContainer,\n              css(styles.buttonsContainer)\n            )}\n          >\n            <HvButton\n              variant=\"secondaryGhost\"\n              className={clsx(\n                classes?.buttonWidth,\n                wizardActionsClasses.buttonWidth,\n                css(styles.buttonWidth)\n              )}\n              disabled={tab <= 0}\n              onClick={() => setTab((t) => t - 1)}\n              startIcon={<Backwards />}\n            >\n              {`${labels.previous ?? \"Previous\"}`}\n            </HvButton>\n            {isLastPage ? (\n              <HvButton\n                variant=\"primary\"\n                className={clsx(\n                  classes?.buttonWidth,\n                  wizardActionsClasses.buttonWidth,\n                  css(styles.buttonWidth)\n                )}\n                disabled={loading || !canSubmit}\n                onClick={handleSubmitInternal}\n              >\n                {`${labels.submit ?? \"Submit\"}`}\n              </HvButton>\n            ) : (\n              <HvButton\n                variant=\"secondaryGhost\"\n                className={clsx(\n                  classes?.buttonWidth,\n                  wizardActionsClasses.buttonWidth,\n                  css(styles.buttonWidth),\n                  classes?.buttonSpacing,\n                  wizardActionsClasses.buttonSpacing,\n                  css(styles.buttonSpacing)\n                )}\n                onClick={() => setTab((t) => t + 1)}\n                disabled={!skippable && !context?.[tab]?.valid}\n                endIcon={<Forwards />}\n              >\n                {`${labels.next ?? \"Next\"}`}\n              </HvButton>\n            )}\n          </HvGrid>\n        </HvDialogActions>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["HvWizardActions","classes","handleClose","handleSubmit","loading","skippable","labels","cancel","next","previous","skip","submit","context","updateContext","tab","setTab","useContext","HvWizardContext","pages","setPages","useState","canSubmit","setCanSubmit","useEffect","contextEntries","Object","entries","length","validWizard","every","value","valid","lastPage","isLastPage","handleSkip","useCallback","skippedContext","map","child","handleSubmitInternal","onCloseHander","event","clearContext","touched","ClassNames","children","css","HvDialogActions","className","clsx","actionsContainer","wizardActionsClasses","styles","_jsxs","HvGrid","_jsx","HvButton","variant","onClick","buttonWidth","disabled","buttonsContainer","t","startIcon","Backwards","buttonSpacing","endIcon","Forwards"],"mappings":"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"}

package/dist/esm/packages/lab/src/components/Wizard/WizardActions/WizardActions.styles.js

@@ -0,0 +1,28 @@
+import { theme } from "@hitachivantara/uikit-react-core";
+const styles = {
+  buttonWidth: {
+    width: 120,
+    "& span": {
+      whiteSpace: "normal",
+      lineHeight: theme.lineHeights.sm
+    }
+  },
+  actionsContainer: {
+    display: "flex",
+    justifyContent: "space-between"
+  },
+  buttonsContainer: {
+    display: "flex",
+    alignItems: "center",
+    "& > button:last-child": {
+      marginLeft: 20
+    }
+  },
+  buttonSpacing: {
+    paddingLeft: 28
+  }
+};
+export {
+  styles
+};
+//# sourceMappingURL=WizardActions.styles.js.map

package/dist/esm/packages/lab/src/components/Wizard/WizardActions/WizardActions.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WizardActions.styles.js","sources":["../../../../../../../../src/components/Wizard/WizardActions/WizardActions.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const styles: { [key: string]: CSSInterpolation } = {\n  buttonWidth: {\n    width: 120,\n    \"& span\": {\n      whiteSpace: \"normal\",\n      lineHeight: theme.lineHeights.sm,\n    },\n  },\n  actionsContainer: {\n    display: \"flex\",\n    justifyContent: \"space-between\",\n  },\n  buttonsContainer: {\n    display: \"flex\",\n    alignItems: \"center\",\n    \"& > button:last-child\": {\n      marginLeft: 20,\n    },\n  },\n  buttonSpacing: {\n    paddingLeft: 28,\n  },\n};\n"],"names":["styles","buttonWidth","width","whiteSpace","lineHeight","theme","lineHeights","sm","actionsContainer","display","justifyContent","buttonsContainer","alignItems","marginLeft","buttonSpacing","paddingLeft"],"mappings":";AAGO,MAAMA,SAA8C;AAAA,EACzDC,aAAa;AAAA,IACXC,OAAO;AAAA,IACP,UAAU;AAAA,MACRC,YAAY;AAAA,MACZC,YAAYC,MAAMC,YAAYC;AAAAA,IAChC;AAAA,EACF;AAAA,EACAC,kBAAkB;AAAA,IAChBC,SAAS;AAAA,IACTC,gBAAgB;AAAA,EAClB;AAAA,EACAC,kBAAkB;AAAA,IAChBF,SAAS;AAAA,IACTG,YAAY;AAAA,IACZ,yBAAyB;AAAA,MACvBC,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACAC,eAAe;AAAA,IACbC,aAAa;AAAA,EACf;AACF;"}

package/dist/esm/packages/lab/src/components/Wizard/WizardActions/wizardActionsClasses.js

@@ -0,0 +1,8 @@
+import { getClasses } from "@hitachivantara/uikit-react-core";
+const classKeys = ["actionsContainer", "buttonsContainer", "buttonWidth", "buttonSpacing"];
+const wizardActionsClasses = getClasses(classKeys, "HvWizardActions");
+const wizardActionsClasses$1 = wizardActionsClasses;
+export {
+  wizardActionsClasses$1 as default
+};
+//# sourceMappingURL=wizardActionsClasses.js.map

package/dist/esm/packages/lab/src/components/Wizard/WizardActions/wizardActionsClasses.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wizardActionsClasses.js","sources":["../../../../../../../../src/components/Wizard/WizardActions/wizardActionsClasses.ts"],"sourcesContent":["import { getClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport type HvWizardActionsClasses = {\n  /** Styles applied to the component which contains the groups of buttons. */\n  actionsContainer?: string;\n  /** Styles applied to the component which contains the buttons. */\n  buttonsContainer?: string;\n  /** Styles applied to the Button component to override its width. */\n  buttonWidth?: string;\n  /** Styles applied to some Button components to override its left padding. */\n  buttonSpacing?: string;\n};\n\nconst classKeys: string[] = [\n  \"actionsContainer\",\n  \"buttonsContainer\",\n  \"buttonWidth\",\n  \"buttonSpacing\",\n];\n\nconst wizardActionsClasses = getClasses<HvWizardActionsClasses>(\n  classKeys,\n  \"HvWizardActions\"\n);\n\nexport default wizardActionsClasses;\n"],"names":["classKeys","wizardActionsClasses","getClasses"],"mappings":";AAaA,MAAMA,YAAsB,CAC1B,oBACA,oBACA,eACA,eAAe;AAGjB,MAAMC,uBAAuBC,WAC3BF,WACA,iBAAiB;AAGnB,MAAA,yBAAeC;"}

package/dist/esm/packages/lab/src/components/Wizard/WizardContainer/WizardContainer.js

@@ -0,0 +1,34 @@
+import { ClassNames } from "@emotion/react";
+import { HvDialog } from "@hitachivantara/uikit-react-core";
+import { clsx } from "../../../../../../node_modules/clsx/dist/clsx.m.js";
+import wizardContainerClasses from "./wizardContainerClasses.js";
+import { styles } from "./WizardContainer.styles.js";
+import { jsx } from "@emotion/react/jsx-runtime";
+const HvWizardContainer = ({
+  classes,
+  className,
+  children,
+  handleClose,
+  open,
+  ...others
+}) => {
+  return /* @__PURE__ */ jsx(ClassNames, {
+    children: ({
+      css
+    }) => /* @__PURE__ */ jsx(HvDialog, {
+      classes: {
+        closeButton: clsx(classes == null ? void 0 : classes.closeButton, wizardContainerClasses.closeButton, css(styles.closeButton)),
+        paper: clsx(classes == null ? void 0 : classes.paper, wizardContainerClasses.paper, css(styles.paper))
+      },
+      className: clsx(className, classes == null ? void 0 : classes.root, wizardContainerClasses.root),
+      open,
+      onClose: handleClose,
+      ...others,
+      children
+    })
+  });
+};
+export {
+  HvWizardContainer
+};
+//# sourceMappingURL=WizardContainer.js.map

package/dist/esm/packages/lab/src/components/Wizard/WizardContainer/WizardContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WizardContainer.js","sources":["../../../../../../../../src/components/Wizard/WizardContainer/WizardContainer.tsx"],"sourcesContent":["import { ClassNames } from \"@emotion/react\";\nimport { HvBaseProps, HvDialog } from \"@hitachivantara/uikit-react-core\";\nimport { clsx } from \"clsx\";\nimport wizardContainerClasses, {\n  HvWizardContainerClasses,\n} from \"./wizardContainerClasses\";\nimport { styles } from \"./WizardContainer.styles\";\nimport React from \"react\";\n\nexport interface HvWizardContainerProps extends Omit<HvBaseProps, \"onClose\"> {\n  /** Current state of the Wizard. */\n  open: boolean;\n  /** Function executed on close. */\n  handleClose: (\n    event: React.SyntheticEvent,\n    reason?: \"escapeKeyDown\" | \"backdropClick\"\n  ) => void;\n  /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */\n  classes?: HvWizardContainerClasses;\n}\n\nexport const HvWizardContainer = ({\n  classes,\n  className,\n  children,\n  handleClose,\n  open,\n  ...others\n}: HvWizardContainerProps) => {\n  return (\n    <ClassNames>\n      {({ css }) => (\n        <HvDialog\n          classes={{\n            closeButton: clsx(\n              classes?.closeButton,\n              wizardContainerClasses.closeButton,\n              css(styles.closeButton)\n            ),\n            paper: clsx(\n              classes?.paper,\n              wizardContainerClasses.paper,\n              css(styles.paper)\n            ),\n          }}\n          className={clsx(\n            className,\n            classes?.root,\n            wizardContainerClasses.root\n          )}\n          open={open}\n          onClose={handleClose}\n          {...others}\n        >\n          {children}\n        </HvDialog>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["HvWizardContainer","classes","className","children","handleClose","open","others","ClassNames","css","HvDialog","closeButton","clsx","wizardContainerClasses","styles","paper","root","onClose"],"mappings":";;;;;;AAqBO,MAAMA,oBAAoBA,CAAC;AAAA,EAChCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACmB,MAAM;AAC5B,6BACGC,YAAU;AAAA,IAAAJ,UACRA,CAAC;AAAA,MAAEK;AAAAA,IAAAA,0BACDC,UAAQ;AAAA,MACPR,SAAS;AAAA,QACPS,aAAaC,KACXV,mCAASS,aACTE,uBAAuBF,aACvBF,IAAIK,OAAOH,WAAW,CAAC;AAAA,QAEzBI,OAAOH,KACLV,mCAASa,OACTF,uBAAuBE,OACvBN,IAAIK,OAAOC,KAAK,CAAC;AAAA,MAErB;AAAA,MACAZ,WAAWS,KACTT,WACAD,mCAASc,MACTH,uBAAuBG,IAAI;AAAA,MAE7BV;AAAAA,MACAW,SAASZ;AAAAA,MAAY,GACjBE;AAAAA,MAAMH;AAAAA,IAAAA,CAED;AAAA,EAAA,CAGF;AAEjB;"}

package/dist/esm/packages/lab/src/components/Wizard/WizardContainer/WizardContainer.styles.js

@@ -0,0 +1,15 @@
+import { theme } from "@hitachivantara/uikit-react-core";
+const styles = {
+  paper: {
+    width: "80%",
+    maxWidth: "80%",
+    maxHeight: `calc(100% - (2 * ${theme.dialog.margin}))`
+  },
+  closeButton: {
+    display: "none"
+  }
+};
+export {
+  styles
+};
+//# sourceMappingURL=WizardContainer.styles.js.map

package/dist/esm/packages/lab/src/components/Wizard/WizardContainer/WizardContainer.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WizardContainer.styles.js","sources":["../../../../../../../../src/components/Wizard/WizardContainer/WizardContainer.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const styles: { [key: string]: CSSInterpolation } = {\n  paper: {\n    width: \"80%\",\n    maxWidth: \"80%\",\n    maxHeight: `calc(100% - (2 * ${theme.dialog.margin}))`,\n  },\n  closeButton: {\n    display: \"none\",\n  },\n};\n"],"names":["styles","paper","width","maxWidth","maxHeight","theme","dialog","margin","closeButton","display"],"mappings":";AAGO,MAAMA,SAA8C;AAAA,EACzDC,OAAO;AAAA,IACLC,OAAO;AAAA,IACPC,UAAU;AAAA,IACVC,WAAY,oBAAmBC,MAAMC,OAAOC;AAAAA,EAC9C;AAAA,EACAC,aAAa;AAAA,IACXC,SAAS;AAAA,EACX;AACF;"}