@progress/kendo-themes-html 7.2.0 → 7.2.1-dev.0

package/dist/cjs/wizard/tests/wizard-vertical.js

@@ -130,11 +130,51 @@ var States = {
   "readonly": "readonly"
 };
 
-// src/icon/font-icon.spec.tsx
+// src/wizard/wizard.spec.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
+var WIZZARD_CLASSNAME = `k-wizard`;
+var states = [
+  States.disabled
+];
+var options = {};
+var defaultProps = {
+  orientation: "horizontal",
+  contentPosition: "right"
+};
+var Wizard = (props) => {
+  const {
+    disabled,
+    orientation = defaultProps.orientation,
+    contentPosition = defaultProps.contentPosition,
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        WIZZARD_CLASSNAME,
+        stateClassNames(WIZZARD_CLASSNAME, { disabled }),
+        {
+          [`${WIZZARD_CLASSNAME}-${orientation}`]: orientation,
+          [`${WIZZARD_CLASSNAME}-${contentPosition}`]: contentPosition === "left"
+        }
+      ),
+      children: props.children
+    }
+  );
+};
+Wizard.states = states;
+Wizard.options = options;
+Wizard.className = WIZZARD_CLASSNAME;
+Wizard.defaultProps = defaultProps;
+
+// src/icon/font-icon.spec.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var FONTICON_CLASSNAME = `k-icon k-font-icon`;
-var states = [];
-var options = {
+var states2 = [];
+var options2 = {
   size: [Size.xsmall, Size.small, Size.medium, Size.large, Size.xlarge, Size.xxlarge, Size.xxxlarge],
   themeColor: [
     ThemeColor.base,
@@ -149,7 +189,7 @@ var options = {
     ThemeColor.dark
   ]
 };
-var defaultProps = {};
+var defaultProps2 = {};
 var FontIcon = (props) => {
   const {
     size,
@@ -160,9 +200,9 @@ var FontIcon = (props) => {
     ...other
   } = props;
   if (!icon) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, {});
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "span",
     {
       ...other,
@@ -183,17 +223,17 @@ var FontIcon = (props) => {
     }
   );
 };
-FontIcon.states = states;
-FontIcon.options = options;
+FontIcon.states = states2;
+FontIcon.options = options2;
 FontIcon.className = FONTICON_CLASSNAME;
-FontIcon.defaultProps = defaultProps;
+FontIcon.defaultProps = defaultProps2;
 var font_icon_spec_default = FontIcon;
 
 // src/icon/svg-icon.spec.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var SVGICON_CLASSNAME = `k-icon k-svg-icon`;
-var states2 = [];
-var options2 = {
+var states3 = [];
+var options3 = {
   size: [Size.xsmall, Size.small, Size.medium, Size.large, Size.xlarge, Size.xxlarge, Size.xxxlarge],
   themeColor: [
     ThemeColor.base,
@@ -208,7 +248,7 @@ var options2 = {
     ThemeColor.dark
   ]
 };
-var defaultProps2 = {
+var defaultProps3 = {
   viewBox: "0 0 24 24"
 };
 var SvgIcon = (props) => {
@@ -217,15 +257,15 @@ var SvgIcon = (props) => {
     themeColor,
     rotate,
     flip,
-    viewBox = defaultProps2.viewBox,
+    viewBox = defaultProps3.viewBox,
     icon,
     ...other
   } = props;
   if (!icon) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, {});
   }
   if (icon === "none") {
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "span",
       {
         ...other,
@@ -238,7 +278,7 @@ var SvgIcon = (props) => {
     );
   }
   const name = typeof icon === "object" && icon.name && icon.name;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "span",
     {
       ...other,
@@ -256,7 +296,7 @@ var SvgIcon = (props) => {
           "k-flip-v": flip === "v" || flip === "both"
         }
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "svg",
         {
           "aria-hidden": true,
@@ -270,10 +310,10 @@ var SvgIcon = (props) => {
     }
   );
 };
-SvgIcon.states = states2;
-SvgIcon.options = options2;
+SvgIcon.states = states3;
+SvgIcon.options = options3;
 SvgIcon.className = SVGICON_CLASSNAME;
-SvgIcon.defaultProps = defaultProps2;
+SvgIcon.defaultProps = defaultProps3;
 var svg_icon_spec_default = SvgIcon;
 
 // ../../node_modules/@progress/kendo-svg-icons/dist/index.es.js
@@ -4308,13 +4348,13 @@ var chartChoroplethIcon = {
 };
 
 // src/icon/icon.spec.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var snakeToCamel = (str) => str.toLowerCase().replace(
   /([-_][a-z])/g,
   (group) => group.toUpperCase().replace("-", "").replace("_", "")
 );
-var states3 = [];
-var options3 = {
+var states4 = [];
+var options4 = {
   size: [Size.xsmall, Size.small, Size.medium, Size.large, Size.xlarge, Size.xxlarge, Size.xxxlarge],
   themeColor: [
     ThemeColor.base,
@@ -4329,7 +4369,7 @@ var options3 = {
     ThemeColor.dark
   ]
 };
-var defaultProps3 = {
+var defaultProps4 = {
   viewBox: "0 0 24 24",
   type: "svg"
 };
@@ -4338,42 +4378,42 @@ var Icon = (props) => {
     size,
     themeColor,
     icon,
-    type = defaultProps3.type,
+    type = defaultProps4.type,
     rotate,
     flip,
-    viewBox = defaultProps3.viewBox,
+    viewBox = defaultProps4.viewBox,
     ...other
   } = props;
   if (!icon) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, {});
   }
   if (type === "svg") {
     if (icon === "none") {
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(svg_icon_spec_default, { ...other, icon, size });
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(svg_icon_spec_default, { ...other, icon, size });
     }
     const iconSVG = snakeToCamel(`${icon}-icon`);
     if (!index_es_exports[iconSVG]) {
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, {});
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(svg_icon_spec_default, { ...other, icon: index_es_exports[iconSVG], size, themeColor, rotate, flip, viewBox });
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(svg_icon_spec_default, { ...other, icon: index_es_exports[iconSVG], size, themeColor, rotate, flip, viewBox });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(font_icon_spec_default, { ...other, icon, size, themeColor, rotate, flip });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(font_icon_spec_default, { ...other, icon, size, themeColor, rotate, flip });
 };
-Icon.states = states3;
-Icon.options = options3;
-Icon.defaultProps = defaultProps3;
+Icon.states = states4;
+Icon.options = options4;
+Icon.defaultProps = defaultProps4;
 
 // src/button/button.spec.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var BUTTON_CLASSNAME = `k-button`;
-var states4 = [
+var states5 = [
   States.hover,
   States.focus,
   States.active,
   States.selected,
   States.disabled
 ];
-var options4 = {
+var options5 = {
   size: [Size.small, Size.medium, Size.large],
   rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
   fillMode: [FillMode.solid, FillMode.flat, FillMode.outline, FillMode.clear, FillMode.link],
@@ -4391,7 +4431,7 @@ var options4 = {
     ThemeColor.inverse
   ]
 };
-var defaultProps4 = {
+var defaultProps5 = {
   size: Size.medium,
   rounded: Roundness.medium,
   fillMode: FillMode.solid,
@@ -4401,10 +4441,10 @@ var defaultProps4 = {
 };
 var Button = (props) => {
   const {
-    size = defaultProps4.size,
-    rounded = defaultProps4.rounded,
-    fillMode = defaultProps4.fillMode,
-    themeColor = defaultProps4.themeColor,
+    size = defaultProps5.size,
+    rounded = defaultProps5.rounded,
+    fillMode = defaultProps5.fillMode,
+    themeColor = defaultProps5.themeColor,
     hover,
     focus,
     active,
@@ -4413,13 +4453,13 @@ var Button = (props) => {
     icon,
     text,
     iconClassName,
-    showArrow = defaultProps4.showArrow,
-    arrowIconName = defaultProps4.arrowIconName,
+    showArrow = defaultProps5.showArrow,
+    arrowIconName = defaultProps5.arrowIconName,
     ...other
   } = props;
   const hasIcon = icon !== void 0;
   const hasChildren = props.children !== void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "button",
     {
       ...other,
@@ -4444,45 +4484,250 @@ var Button = (props) => {
         }
       ),
       children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        icon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           Icon,
           {
             className: classNames(iconClassName, "k-button-icon"),
             icon
           }
         ),
-        text ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-          text && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "k-button-text", children: text }),
+        text ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+          text && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "k-button-text", children: text }),
           props.children
-        ] }) : props.children && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "k-button-text", children: props.children }),
-        showArrow && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "k-menu-button-arrow k-button-arrow", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { icon: arrowIconName }) })
+        ] }) : props.children && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "k-button-text", children: props.children }),
+        showArrow && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "k-menu-button-arrow k-button-arrow", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { icon: arrowIconName }) })
       ]
     }
   );
 };
-Button.states = states4;
-Button.options = options4;
+Button.states = states5;
+Button.options = options5;
 Button.className = BUTTON_CLASSNAME;
-Button.defaultProps = defaultProps4;
+Button.defaultProps = defaultProps5;
 
 // src/button/templates/icon-button.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 
 // src/button/templates/icon-text-button.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 
 // src/button/templates/text-button.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+
+// src/wizard/wizard-step.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var WIZZARDSTEP_CLASSNAME = `k-wizard-step`;
+var states6 = [
+  States.focus
+];
+var options6 = {};
+var defaultProps6 = {
+  buttons: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "k-wizard-buttons-left", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Button, { children: "Reset" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "k-wizard-pager", children: "Step 1 of 2" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "k-wizard-buttons-right", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Button, { children: "Previous" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Button, { themeColor: "primary", children: "Next" })
+    ] })
+  ] })
+};
+var WizardStep = (props) => {
+  const {
+    focus,
+    buttons,
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        WIZZARDSTEP_CLASSNAME,
+        stateClassNames(WIZZARDSTEP_CLASSNAME, { focus })
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "k-wizard-content", children: props.children }),
+        buttons && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "k-wizard-buttons", children: buttons })
+      ]
+    }
+  );
+};
+WizardStep.states = states6;
+WizardStep.options = options6;
+WizardStep.className = WIZZARDSTEP_CLASSNAME;
+WizardStep.defaultProps = defaultProps6;
+
+// src/wizard/wizard-steps.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var WIZZARDSTEPS_CLASSNAME = `k-wizard-steps`;
+var states7 = [];
+var options7 = {};
+var defaultProps7 = {};
+var WizardSteps = (props) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  "div",
+  {
+    ...props,
+    className: classNames(
+      props.className,
+      WIZZARDSTEPS_CLASSNAME
+    ),
+    children: props.children
+  }
+);
+WizardSteps.states = states7;
+WizardSteps.options = options7;
+WizardSteps.className = WIZZARDSTEPS_CLASSNAME;
+WizardSteps.defaultProps = defaultProps7;
+
+// src/stepper/stepper.spec.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var STEPPER_CLASSNAME = "k-stepper";
+var states8 = [];
+var options8 = {};
+var defaultProps8 = {};
+var Stepper = (props) => {
+  const {
+    style: style2,
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    "nav",
+    {
+      ...other,
+      style: style2,
+      className: classNames(
+        props.className,
+        STEPPER_CLASSNAME
+      ),
+      children: props.children
+    }
+  );
+};
+Stepper.options = options8;
+Stepper.states = states8;
+Stepper.className = STEPPER_CLASSNAME;
+Stepper.defaultProps = defaultProps8;
+
+// src/stepper/step-list.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var STEPLIST_CLASSNAME = "k-step-list";
+var states9 = [];
+var options9 = {};
+var defaultProps9 = {
+  orientation: "horizontal"
+};
+var StepList = (props) => {
+  const {
+    style: style2,
+    orientation = defaultProps9.orientation,
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    "ol",
+    {
+      ...other,
+      style: style2,
+      className: classNames(
+        props.className,
+        STEPLIST_CLASSNAME,
+        {
+          [`${STEPLIST_CLASSNAME}-${orientation}`]: orientation
+        }
+      ),
+      children: props.children
+    }
+  );
+};
+StepList.options = options9;
+StepList.states = states9;
+StepList.className = STEPLIST_CLASSNAME;
+StepList.defaultProps = defaultProps9;
+
+// src/stepper/step.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var STEP_CLASSNAME = "k-step";
+var states10 = [
+  States.disabled,
+  States.hover,
+  States.focus,
+  States.invalid,
+  States.valid
+];
+var options10 = {};
+var defaultProps10 = {};
+var Step = (props) => {
+  const {
+    style: style2,
+    disabled,
+    hover,
+    focus,
+    invalid,
+    valid,
+    optional,
+    first,
+    done,
+    current,
+    last,
+    label,
+    text,
+    icon,
+    stepContent,
+    ...other
+  } = props;
+  const iconName = invalid ? "warning-circle" : "check-circle";
+  const renderValidationIcon = Boolean(valid || invalid);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    "li",
+    {
+      ...other,
+      style: style2,
+      className: classNames(
+        props.className,
+        STEP_CLASSNAME,
+        {
+          [`${STEP_CLASSNAME}-done`]: done,
+          [`${STEP_CLASSNAME}-first`]: first,
+          [`${STEP_CLASSNAME}-current`]: current,
+          [`${STEP_CLASSNAME}-last`]: last,
+          [`${STEP_CLASSNAME}-optional`]: optional,
+          [`${STEP_CLASSNAME}-success`]: valid,
+          [`${STEP_CLASSNAME}-error`]: invalid
+        },
+        stateClassNames(STEP_CLASSNAME, { hover, focus, disabled })
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("a", { href: "#", className: "k-step-link", children: [
+          text && !icon && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "k-step-indicator", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "k-step-indicator-text", children: text }) }),
+          icon && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "k-step-indicator", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { className: "k-step-indicator-icon", icon }) }),
+          optional && !label && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "k-step-label", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "k-step-label-optional", children: "(Optional)" }) }),
+          label && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "k-step-label", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "k-step-text", children: label }),
+            renderValidationIcon && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { icon: iconName }),
+            optional && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "k-step-label-optional", children: "(Optional)" })
+          ] })
+        ] }),
+        stepContent && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "k-step-content", style: { height: "140px" }, children: stepContent })
+      ]
+    }
+  );
+};
+Step.options = options10;
+Step.states = states10;
+Step.className = STEP_CLASSNAME;
+Step.defaultProps = defaultProps10;
 
 // src/progressbar/progressbar.spec.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var PROGRESSBAR_CLASSNAME = `k-progressbar`;
-var states5 = [
+var states11 = [
   States.disabled,
   States.indeterminate
 ];
-var options5 = {};
-var defaultProps5 = {
+var options11 = {};
+var defaultProps11 = {
   indeterminate: false,
   label: true,
   labelPosition: "start",
@@ -4494,16 +4739,16 @@ var ProgressBar = (props) => {
   const {
     disabled,
     height,
-    indeterminate = defaultProps5.indeterminate,
-    label = defaultProps5.label,
-    labelPosition = defaultProps5.labelPosition,
-    orientation = defaultProps5.orientation,
-    reverse = defaultProps5.reverse,
-    value = defaultProps5.value,
+    indeterminate = defaultProps11.indeterminate,
+    label = defaultProps11.label,
+    labelPosition = defaultProps11.labelPosition,
+    orientation = defaultProps11.orientation,
+    reverse = defaultProps11.reverse,
+    value = defaultProps11.value,
     width,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     "div",
     {
       ...other,
@@ -4521,21 +4766,21 @@ var ProgressBar = (props) => {
       ),
       style: orientation === "horizontal" ? { "--kendo-progressbar-value": value, height } : { "--kendo-progressbar-value": value, width },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: classNames(
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: classNames(
           "k-progress-status-wrap",
           {
             [`k-progress-${labelPosition}`]: labelPosition && !indeterminate
           }
-        ), children: label && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "k-progress-status", children: [
+        ), children: label && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "k-progress-status", children: [
           value,
           "%"
         ] }) }),
-        !indeterminate && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "k-progressbar-value k-selected", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: classNames(
+        !indeterminate && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "k-progressbar-value k-selected", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: classNames(
           "k-progress-status-wrap",
           {
             [`k-progress-${labelPosition}`]: labelPosition
           }
-        ), children: label && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "k-progress-status", children: [
+        ), children: label && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "k-progress-status", children: [
           props.value,
           "%"
         ] }) }) })
@@ -4543,22 +4788,22 @@ var ProgressBar = (props) => {
     }
   );
 };
-ProgressBar.states = states5;
-ProgressBar.options = options5;
+ProgressBar.states = states11;
+ProgressBar.options = options11;
 ProgressBar.className = PROGRESSBAR_CLASSNAME;
-ProgressBar.defaultProps = defaultProps5;
+ProgressBar.defaultProps = defaultProps11;
 var progressbar_spec_default = ProgressBar;
 
 // src/progressbar/chunk-progressbar.spec.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var CHUNKPROGRESSBAR_CLASSNAME = `k-chunk-progressbar`;
 var isSelected = (progress, index) => index <= progress - 1 ? true : false;
-var states6 = [
+var states12 = [
   States.disabled,
   States.indeterminate
 ];
-var options6 = {};
-var defaultProps6 = {
+var options12 = {};
+var defaultProps12 = {
   chunkCount: 5,
   orientation: "horizontal",
   progress: 0
@@ -4566,14 +4811,14 @@ var defaultProps6 = {
 var ChunkProgressBar = (props) => {
   const {
     disabled,
-    chunkCount = defaultProps6.chunkCount,
+    chunkCount = defaultProps12.chunkCount,
     indeterminate,
-    orientation = defaultProps6.orientation,
-    progress = defaultProps6.progress,
+    orientation = defaultProps12.orientation,
+    progress = defaultProps12.progress,
     reverse,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     "div",
     {
       ...other,
@@ -4590,8 +4835,8 @@ var ChunkProgressBar = (props) => {
           [`${PROGRESSBAR_CLASSNAME}-reverse`]: reverse
         }
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("ul", { className: "k-progressbar-chunks k-reset", children: [...Array(chunkCount)].map(
-        (_el, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("li", { className: classNames(
+      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("ul", { className: "k-progressbar-chunks k-reset", children: [...Array(chunkCount)].map(
+        (_el, i) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("li", { className: classNames(
           "k-progressbar-chunk",
           {
             "k-first": i === 0,
@@ -4603,20 +4848,59 @@ var ChunkProgressBar = (props) => {
     }
   );
 };
-ChunkProgressBar.states = states6;
-ChunkProgressBar.options = options6;
+ChunkProgressBar.states = states12;
+ChunkProgressBar.options = options12;
 ChunkProgressBar.className = CHUNKPROGRESSBAR_CLASSNAME;
-ChunkProgressBar.defaultProps = defaultProps6;
+ChunkProgressBar.defaultProps = defaultProps12;
 
 // src/progressbar/templates/progressbar-normal.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var ProgressBarNormal = (props) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(progressbar_spec_default, { ...props });
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var ProgressBarNormal = (props) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(progressbar_spec_default, { ...props });
 
 // src/progressbar/templates/chunk-progressbar-normal.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+
+// src/stepper/templates/stepper-normal.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+
+// src/stepper/templates/stepper-vertical.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var StepperVertical = ({ gridTemplateRows = "repeat(3, 1fr)", ...other }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  Stepper,
+  {
+    style: { display: "grid", gridTemplateRows },
+    children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(StepList, { orientation: "vertical", style: { gridRowStart: "1", gridRowEnd: "-1" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Step, { first: true, done: true, icon: "check", style: { maxHeight: "33.333%" } }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Step, { current: true, focus: true, text: "2", style: { maxHeight: "33.333%" } }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Step, { last: true, optional: true, text: "3", style: { maxHeight: "33.333%" } })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ProgressBarNormal, { orientation: "vertical", reverse: true, label: false, value: "50" })
+    ] }),
+    ...other
+  }
+);
+
+// src/wizard/templates/wizard-normal.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+
+// src/wizard/templates/wizard-vertical.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var WizardVertical = ({ ...other }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  Wizard,
+  {
+    id: "wizard",
+    orientation: "vertical",
+    children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(StepperVertical, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(WizardSteps, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(WizardStep, { children: "Short content" }) })
+    ] }),
+    ...other
+  }
+);
 
 // src/wizard/tests/wizard-vertical.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var style = `
     .wrapper {
         border: 1px solid #6c757d4f;
@@ -4633,371 +4917,55 @@ var style = `
         top: 17px;
     }
 `;
-var stepperStyle = {
-  display: "grid",
-  gridTemplateRows: "repeat(3, 1fr)"
-};
-var stepListStyle = {
-  gridRowStart: "1",
-  gridRowEnd: "-1"
-};
-var wizard_vertical_default = () => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("style", { children: style }),
-  /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { id: "test-area", className: "k-d-grid k-grid-cols-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("section", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "wrapper", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { children: "Vertical wizard; Content is placed to the right (Default)" }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { id: "wizard", className: "k-widget k-wizard k-wizard-vertical k-wizard-right", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("nav", { className: "k-stepper k-widget", style: stepperStyle, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("ol", { className: "k-step-list k-step-list-vertical", style: stepListStyle, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { className: "k-step k-step-first k-step-done k-step-success", style: { maxHeight: "33.333%" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("a", { href: "#", className: "k-step-link", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-indicator", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-indicator-text", children: "1" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "k-step-label", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-text", children: "Account Info with too long text" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { icon: "check" })
-                ] })
-              ] }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { className: "k-step k-step-current k-focus k-step-error", style: { maxHeight: "33.333%" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("a", { href: "#", className: "k-step-link", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-indicator", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-indicator-text", children: "2" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "k-step-label", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-text", children: "Personal Info" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { className: "k-validation-icon", icon: "exclamation-circle" })
-                ] })
-              ] }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { className: "k-step k-step-last k-step-optional", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("a", { href: "#", className: "k-step-link", style: { maxHeight: "33.333%" }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-indicator", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-indicator-text", children: "3" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "k-step-label", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-text", children: "Payment Details" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-label-optional", children: "(Optional)" })
-                ] })
-              ] }) })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ProgressBarNormal, { orientation: "vertical", label: false, reverse: true, value: "50" })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "k-wizard-steps", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "k-wizard-step k-focus", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "k-wizard-content", children: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged." }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "k-wizard-buttons", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "k-wizard-buttons-left", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button, { children: "Reset" }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-wizard-pager", children: "Step 1 of 2" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "k-wizard-buttons-right", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button, { children: "Previous" }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button, { themeColor: "primary", children: "Next" })
-              ] })
-            ] })
-          ] }) })
+var wizard_vertical_default = () => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("style", { children: style }),
+  /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { id: "test-area", className: "k-d-grid k-grid-cols-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("section", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "wrapper", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { children: "Vertical wizard; Content is placed to the right (Default)" }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(WizardVertical, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StepperVertical, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(WizardSteps, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(WizardStep, { focus: true, children: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged." }) })
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "wrapper", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { children: "Small height set" }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { id: "wizard", style: { height: "350px" }, className: "k-widget k-wizard k-wizard-vertical k-wizard-right", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("nav", { className: "k-stepper k-widget", style: stepperStyle, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("ol", { className: "k-step-list k-step-list-vertical", style: stepListStyle, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { className: "k-step k-step-first k-step-done k-step-success", style: { maxHeight: "33.333%" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("a", { href: "#", className: "k-step-link", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-indicator", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-indicator-text", children: "1" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "k-step-label", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-text", children: "Account Info with too long text" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { icon: "check" })
-                ] })
-              ] }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { className: "k-step k-step-current k-focus k-step-error", style: { maxHeight: "33.333%" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("a", { href: "#", className: "k-step-link", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-indicator", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-indicator-text", children: "2" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "k-step-label", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-text", children: "Personal Info" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { className: "k-validation-icon", icon: "exclamation-circle" })
-                ] })
-              ] }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { className: "k-step k-step-last k-step-optional", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("a", { href: "#", className: "k-step-link", style: { maxHeight: "33.333%" }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-indicator", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-indicator-text", children: "3" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "k-step-label", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-text", children: "Payment Details" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-label-optional", children: "(Optional)" })
-                ] })
-              ] }) })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ProgressBarNormal, { orientation: "vertical", label: false, reverse: true, value: "50" })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "k-wizard-steps", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "k-wizard-step", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "k-wizard-content", children: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged." }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "k-wizard-buttons", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "k-wizard-buttons-left", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button, { children: "Reset" }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-wizard-pager", children: "Step 1 of 2" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "k-wizard-buttons-right", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button, { children: "Previous" }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button, { themeColor: "primary", children: "Next" })
-              ] })
-            ] })
-          ] }) })
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "wrapper", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { children: "Small height set" }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(WizardVertical, { style: { height: "200px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StepperVertical, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(WizardSteps, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(WizardStep, { children: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged." }) })
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "wrapper", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { children: "Short content" }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { id: "wizard", className: "k-widget k-wizard k-wizard-vertical k-wizard-right", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("nav", { className: "k-stepper k-widget", style: stepperStyle, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("ol", { className: "k-step-list k-step-list-vertical", style: stepListStyle, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { className: "k-step k-step-first k-step-done k-step-success", style: { maxHeight: "33.333%" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("a", { href: "#", className: "k-step-link", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-indicator", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-indicator-text", children: "1" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "k-step-label", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-text", children: "Account Info with too long text" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { icon: "check" })
-                ] })
-              ] }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { className: "k-step k-step-current k-focus k-step-error", style: { maxHeight: "33.333%" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("a", { href: "#", className: "k-step-link", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-indicator", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-indicator-text", children: "2" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "k-step-label", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-text", children: "Personal Info" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { className: "k-validation-icon", icon: "exclamation-circle" })
-                ] })
-              ] }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { className: "k-step k-step-last k-step-optional", style: { maxHeight: "33.333%" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("a", { href: "#", className: "k-step-link", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-indicator", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-indicator-text", children: "3" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "k-step-label", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-text", children: "Payment Details" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-label-optional", children: "(Optional)" })
-                ] })
-              ] }) })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ProgressBarNormal, { orientation: "vertical", label: false, reverse: true, value: "50" })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "k-wizard-steps", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "k-wizard-step", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "k-wizard-content", children: "Short content" }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "k-wizard-buttons", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "k-wizard-buttons-left", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button, { children: "Reset" }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-wizard-pager", children: "Step 1 of 2" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "k-wizard-buttons-right", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button, { children: "Previous" }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button, { themeColor: "primary", children: "Next" })
-              ] })
-            ] })
-          ] }) })
-        ] })
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "wrapper", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { children: "Short content" }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(WizardVertical, {})
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "wrapper", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { children: "Short content; Big height set" }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { id: "wizard", style: { height: "300px" }, className: "k-widget k-wizard k-wizard-vertical k-wizard-right", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("nav", { className: "k-stepper k-widget", style: stepperStyle, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("ol", { className: "k-step-list k-step-list-vertical", style: stepListStyle, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { className: "k-step k-step-first k-step-done k-step-success", style: { maxHeight: "33.333%" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("a", { href: "#", className: "k-step-link", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-indicator", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-indicator-text", children: "1" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "k-step-label", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-text", children: "Account Info with too long text" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { icon: "check" })
-                ] })
-              ] }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { className: "k-step k-step-current k-focus k-step-error", style: { maxHeight: "33.333%" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("a", { href: "#", className: "k-step-link", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-indicator", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-indicator-text", children: "2" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "k-step-label", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-text", children: "Personal Info" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { className: "k-validation-icon", icon: "exclamation-circle" })
-                ] })
-              ] }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { className: "k-step k-step-last k-step-optional", style: { maxHeight: "33.333%" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("a", { href: "#", className: "k-step-link", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-indicator", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-indicator-text", children: "3" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "k-step-label", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-text", children: "Payment Details" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-label-optional", children: "(Optional)" })
-                ] })
-              ] }) })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ProgressBarNormal, { orientation: "vertical", label: false, reverse: true, value: "50" })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "k-wizard-steps", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "k-wizard-step", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "k-wizard-content", children: "Short content" }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "k-wizard-buttons", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "k-wizard-buttons-left", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button, { children: "Reset" }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-wizard-pager", children: "Step 1 of 2" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "k-wizard-buttons-right", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button, { children: "Previous" }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button, { themeColor: "primary", children: "Next" })
-              ] })
-            ] })
-          ] }) })
-        ] })
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "wrapper", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { children: "Short content; Big height set" }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(WizardVertical, { style: { height: "280px" } })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("section", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "wrapper", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { children: "Vertical wizard; Content is placed to the left" }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { id: "wizard", className: "k-widget k-wizard k-wizard-vertical k-wizard-left", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("nav", { className: "k-stepper k-widget", style: stepperStyle, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("ol", { className: "k-step-list k-step-list-vertical", style: stepListStyle, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { className: "k-step k-step-first k-step-done k-step-success", style: { maxHeight: "33.333%" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("a", { href: "#", className: "k-step-link", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-indicator", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-indicator-text", children: "1" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "k-step-label", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-text", children: "Account Info with too long text" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { icon: "check" })
-                ] })
-              ] }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { className: "k-step k-step-current k-focus k-step-error", style: { maxHeight: "33.333%" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("a", { href: "#", className: "k-step-link", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-indicator", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-indicator-text", children: "2" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "k-step-label", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-text", children: "Personal Info" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { className: "k-validation-icon", icon: "exclamation-circle" })
-                ] })
-              ] }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { className: "k-step k-step-last k-step-optional", style: { maxHeight: "33.333%" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("a", { href: "#", className: "k-step-link", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-indicator", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-indicator-text", children: "3" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "k-step-label", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-text", children: "Payment Details" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-label-optional", children: "(Optional)" })
-                ] })
-              ] }) })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ProgressBarNormal, { orientation: "vertical", label: false, reverse: true, value: "50" })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "k-wizard-steps", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "k-wizard-step", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "k-wizard-content", children: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged." }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "k-wizard-buttons", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "k-wizard-buttons-left", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button, { children: "Reset" }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-wizard-pager", children: "Step 1 of 2" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "k-wizard-buttons-right", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button, { children: "Previous" }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button, { themeColor: "primary", children: "Next" })
-              ] })
-            ] })
-          ] }) })
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("section", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "wrapper", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { children: "Vertical wizard; Content is placed to the left" }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(WizardVertical, { contentPosition: "left", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StepperVertical, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(WizardSteps, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(WizardStep, { focus: true, children: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged." }) })
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "wrapper", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { children: "Small height set" }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { id: "wizard", style: { height: "350px" }, className: "k-widget k-wizard k-wizard-vertical k-wizard-left", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("nav", { className: "k-stepper k-widget", style: stepperStyle, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("ol", { className: "k-step-list k-step-list-vertical", style: stepListStyle, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { className: "k-step k-step-first k-step-done k-step-success", style: { maxHeight: "33.333%" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("a", { href: "#", className: "k-step-link", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-indicator", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-indicator-text", children: "1" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "k-step-label", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-text", children: "Account Info with too long text" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { icon: "check" })
-                ] })
-              ] }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { className: "k-step k-step-current k-focus k-step-error", style: { maxHeight: "33.333%" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("a", { href: "#", className: "k-step-link", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-indicator", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-indicator-text", children: "2" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "k-step-label", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-text", children: "Personal Info" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { className: "k-validation-icon", icon: "exclamation-circle" })
-                ] })
-              ] }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { className: "k-step k-step-last k-step-optional", style: { maxHeight: "33.333%" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("a", { href: "#", className: "k-step-link", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-indicator", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-indicator-text", children: "3" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "k-step-label", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-text", children: "Payment Details" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-label-optional", children: "(Optional)" })
-                ] })
-              ] }) })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ProgressBarNormal, { orientation: "vertical", label: false, reverse: true, value: "50" })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "k-wizard-steps", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "k-wizard-step", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "k-wizard-content", children: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged." }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "k-wizard-buttons", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "k-wizard-buttons-left", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button, { children: "Reset" }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-wizard-pager", children: "Step 1 of 2" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "k-wizard-buttons-right", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button, { children: "Previous" }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button, { themeColor: "primary", children: "Next" })
-              ] })
-            ] })
-          ] }) })
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "wrapper", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { children: "Small height set" }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(WizardVertical, { contentPosition: "left", style: { height: "200px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StepperVertical, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(WizardSteps, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(WizardStep, { children: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged." }) })
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "wrapper", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { children: "Short content" }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { id: "wizard", className: "k-widget k-wizard k-wizard-vertical k-wizard-left", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("nav", { className: "k-stepper k-widget", style: stepperStyle, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("ol", { className: "k-step-list k-step-list-vertical", style: stepListStyle, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { className: "k-step k-step-first k-step-done k-step-success", style: { maxHeight: "33.333%" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("a", { href: "#", className: "k-step-link", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-indicator", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-indicator-text", children: "1" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "k-step-label", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-text", children: "Account Info with too long text" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { icon: "check" })
-                ] })
-              ] }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { className: "k-step k-step-current k-focus k-step-error", style: { maxHeight: "33.333%" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("a", { href: "#", className: "k-step-link", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-indicator", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-indicator-text", children: "2" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "k-step-label", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-text", children: "Personal Info" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { className: "k-validation-icon", icon: "exclamation-circle" })
-                ] })
-              ] }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { className: "k-step k-step-last k-step-optional", style: { maxHeight: "33.333%" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("a", { href: "#", className: "k-step-link", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-indicator", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-indicator-text", children: "3" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "k-step-label", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-text", children: "Payment Details" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-label-optional", children: "(Optional)" })
-                ] })
-              ] }) })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ProgressBarNormal, { orientation: "vertical", label: false, reverse: true, value: "50" })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "k-wizard-steps", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "k-wizard-step", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "k-wizard-content", children: "Short content" }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "k-wizard-buttons", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "k-wizard-buttons-left", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button, { children: "Reset" }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-wizard-pager", children: "Step 1 of 2" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "k-wizard-buttons-right", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button, { children: "Previous" }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button, { themeColor: "primary", children: "Next" })
-              ] })
-            ] })
-          ] }) })
-        ] })
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "wrapper", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { children: "Short content" }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(WizardVertical, { contentPosition: "left" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "wrapper", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { children: "Short content; Big height set" }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { id: "wizard", style: { height: "300px" }, className: "k-widget k-wizard k-wizard-vertical k-wizard-left", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("nav", { className: "k-stepper k-widget", style: stepperStyle, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("ol", { className: "k-step-list k-step-list-vertical", style: stepListStyle, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { className: "k-step k-step-first k-step-done k-step-success", style: { maxHeight: "33.333%" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("a", { href: "#", className: "k-step-link", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-indicator", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-indicator-text", children: "1" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "k-step-label", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-text", children: "Account Info with too long text" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { icon: "check" })
-                ] })
-              ] }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { className: "k-step k-step-current k-focus k-step-error", style: { maxHeight: "33.333%" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("a", { href: "#", className: "k-step-link", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-indicator", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-indicator-text", children: "2" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "k-step-label", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-text", children: "Personal Info" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { className: "k-validation-icon", icon: "exclamation-circle" })
-                ] })
-              ] }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { className: "k-step k-step-last k-step-optional", style: { maxHeight: "33.333%" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("a", { href: "#", className: "k-step-link", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-indicator", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-indicator-text", children: "3" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "k-step-label", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-text", children: "Payment Details" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-label-optional", children: "(Optional)" })
-                ] })
-              ] }) })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ProgressBarNormal, { orientation: "vertical", label: false, reverse: true, value: "50" })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "k-wizard-steps", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "k-wizard-step", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "k-wizard-content", children: "Short content" }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "k-wizard-buttons", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "k-wizard-buttons-left", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button, { children: "Reset" }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-wizard-pager", children: "Step 1 of 2" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "k-wizard-buttons-right", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button, { children: "Previous" }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button, { themeColor: "primary", children: "Next" })
-              ] })
-            ] })
-          ] }) })
-        ] })
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "wrapper", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { children: "Short content; Big height set" }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(WizardVertical, { contentPosition: "left", style: { height: "280px" } })
       ] })
     ] })
   ] })