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

package/dist/cjs/wizard/tests/wizard-horizontal.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,58 @@ 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");
+var StepperNormal = ({ gridTemplateColumns = "repeat(6, 1fr)", ...other }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  Stepper,
+  {
+    style: { display: "grid", gridTemplateColumns },
+    children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(StepList, { style: { gridColumnStart: "1", gridColumnEnd: "-1" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Step, { first: true, done: true, icon: "check", style: { maxWidth: "33.333%" } }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Step, { current: true, focus: true, text: "2", style: { maxWidth: "33.333%" } }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Step, { last: true, optional: true, text: "3", style: { maxWidth: "33.333%" } })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ProgressBarNormal, { label: false, value: "50" })
+    ] }),
+    ...other
+  }
+);
+
+// src/stepper/templates/stepper-vertical.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+
+// src/wizard/templates/wizard-normal.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var WizardNormal = ({ ...other }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  Wizard,
+  {
+    id: "wizard",
+    children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(StepperNormal, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(WizardSteps, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(WizardStep, { children: "Short content" }) })
+    ] }),
+    ...other
+  }
+);
+
+// src/wizard/templates/wizard-vertical.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
 
 // src/wizard/tests/wizard-horizontal.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var style = `
     section {
         border: 1px solid #6c757d4f;
@@ -4631,252 +4914,42 @@ var style = `
         grid-column-end: 6;
     }
 `;
-var stepperStyle = {
-  display: "grid",
-  gridTemplateColumns: "repeat(6, 1fr)"
-};
-var stepListStyle = {
-  gridColumnStart: "1",
-  gridColumnEnd: "-1"
-};
-var wizard_horizontal_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", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("section", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { children: "Horizontal wizard, Content is rendered below the Stepper" }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { id: "wizard", className: "k-widget k-wizard k-wizard-horizontal", 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-horizontal", 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 label" }),
-                /* @__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, { label: false, 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. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum." }),
-          /* @__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_horizontal_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", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("section", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { children: "Horizontal wizard, Content is rendered below the Stepper" }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(WizardNormal, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StepperNormal, {}),
+        /* @__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. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum." }) })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("section", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("p", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("section", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("p", { children: [
         "Horizontal wizard -",
         ">",
         " Long content; Height set"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { id: "wizard", style: { height: "300px" }, className: "k-widget k-wizard k-wizard-horizontal", 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-horizontal", 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 label" }),
-                /* @__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, { label: false, 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. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 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. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum." }),
-          /* @__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)(WizardNormal, { style: { height: "250px" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StepperNormal, {}),
+        /* @__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. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum." }) })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("section", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("p", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("section", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("p", { children: [
         "Horizontal wizard -",
         ">",
         " Short content"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { id: "wizard", className: "k-widget k-wizard k-wizard-horizontal", 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-horizontal", 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 label" }),
-                /* @__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, { label: false, 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.jsx)(WizardNormal, {})
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("section", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("p", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("section", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("p", { children: [
         "Horizontal wizard -",
         ">",
         " Short content; Height set"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { id: "wizard", style: { height: "300px" }, className: "k-widget k-wizard k-wizard-horizontal", 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-horizontal", 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 label" }),
-                /* @__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, { label: false, 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_runtime12.jsxs)("section", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("p", { children: [
-        "Horizontal wizard -",
-        ">",
-        " Short content; Big height set"
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { id: "wizard", style: { height: "300px" }, className: "k-widget k-wizard k-wizard-horizontal", 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-horizontal", 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 label" }),
-                /* @__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, { label: false, 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.jsx)(WizardNormal, { style: { height: "250px" } })
     ] })
   ] })
 ] });