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

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

@@ -111,11 +111,51 @@ var States = {
   "readonly": "readonly"
 };
 
+// src/wizard/wizard.spec.tsx
+import { jsx } from "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__ */ 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
-import { Fragment, jsx } from "react/jsx-runtime";
+import { Fragment, jsx as jsx2 } from "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,
@@ -130,7 +170,7 @@ var options = {
     ThemeColor.dark
   ]
 };
-var defaultProps = {};
+var defaultProps2 = {};
 var FontIcon = (props) => {
   const {
     size,
@@ -141,9 +181,9 @@ var FontIcon = (props) => {
     ...other
   } = props;
   if (!icon) {
-    return /* @__PURE__ */ jsx(Fragment, {});
+    return /* @__PURE__ */ jsx2(Fragment, {});
   }
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     "span",
     {
       ...other,
@@ -164,17 +204,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
-import { Fragment as Fragment2, jsx as jsx2 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx3 } from "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,
@@ -189,7 +229,7 @@ var options2 = {
     ThemeColor.dark
   ]
 };
-var defaultProps2 = {
+var defaultProps3 = {
   viewBox: "0 0 24 24"
 };
 var SvgIcon = (props) => {
@@ -198,15 +238,15 @@ var SvgIcon = (props) => {
     themeColor,
     rotate,
     flip,
-    viewBox = defaultProps2.viewBox,
+    viewBox = defaultProps3.viewBox,
     icon,
     ...other
   } = props;
   if (!icon) {
-    return /* @__PURE__ */ jsx2(Fragment2, {});
+    return /* @__PURE__ */ jsx3(Fragment2, {});
   }
   if (icon === "none") {
-    /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsx3(
       "span",
       {
         ...other,
@@ -219,7 +259,7 @@ var SvgIcon = (props) => {
     );
   }
   const name = typeof icon === "object" && icon.name && icon.name;
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     "span",
     {
       ...other,
@@ -237,7 +277,7 @@ var SvgIcon = (props) => {
           "k-flip-v": flip === "v" || flip === "both"
         }
       ),
-      children: /* @__PURE__ */ jsx2(
+      children: /* @__PURE__ */ jsx3(
         "svg",
         {
           "aria-hidden": true,
@@ -251,10 +291,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
@@ -4289,13 +4329,13 @@ var chartChoroplethIcon = {
 };
 
 // src/icon/icon.spec.tsx
-import { Fragment as Fragment3, jsx as jsx3 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx4 } from "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,
@@ -4310,7 +4350,7 @@ var options3 = {
     ThemeColor.dark
   ]
 };
-var defaultProps3 = {
+var defaultProps4 = {
   viewBox: "0 0 24 24",
   type: "svg"
 };
@@ -4319,42 +4359,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__ */ jsx3(Fragment3, {});
+    return /* @__PURE__ */ jsx4(Fragment3, {});
   }
   if (type === "svg") {
     if (icon === "none") {
-      return /* @__PURE__ */ jsx3(svg_icon_spec_default, { ...other, icon, size });
+      return /* @__PURE__ */ jsx4(svg_icon_spec_default, { ...other, icon, size });
     }
     const iconSVG = snakeToCamel(`${icon}-icon`);
     if (!index_es_exports[iconSVG]) {
-      return /* @__PURE__ */ jsx3(Fragment3, {});
+      return /* @__PURE__ */ jsx4(Fragment3, {});
     }
-    return /* @__PURE__ */ jsx3(svg_icon_spec_default, { ...other, icon: index_es_exports[iconSVG], size, themeColor, rotate, flip, viewBox });
+    return /* @__PURE__ */ jsx4(svg_icon_spec_default, { ...other, icon: index_es_exports[iconSVG], size, themeColor, rotate, flip, viewBox });
   }
-  return /* @__PURE__ */ jsx3(font_icon_spec_default, { ...other, icon, size, themeColor, rotate, flip });
+  return /* @__PURE__ */ jsx4(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
-import { Fragment as Fragment4, jsx as jsx4, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx5, jsxs } from "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],
@@ -4372,7 +4412,7 @@ var options4 = {
     ThemeColor.inverse
   ]
 };
-var defaultProps4 = {
+var defaultProps5 = {
   size: Size.medium,
   rounded: Roundness.medium,
   fillMode: FillMode.solid,
@@ -4382,10 +4422,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,
@@ -4394,8 +4434,8 @@ 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;
@@ -4425,7 +4465,7 @@ var Button = (props) => {
         }
       ),
       children: [
-        icon && /* @__PURE__ */ jsx4(
+        icon && /* @__PURE__ */ jsx5(
           Icon,
           {
             className: classNames(iconClassName, "k-button-icon"),
@@ -4433,37 +4473,242 @@ var Button = (props) => {
           }
         ),
         text ? /* @__PURE__ */ jsxs(Fragment4, { children: [
-          text && /* @__PURE__ */ jsx4("span", { className: "k-button-text", children: text }),
+          text && /* @__PURE__ */ jsx5("span", { className: "k-button-text", children: text }),
           props.children
-        ] }) : props.children && /* @__PURE__ */ jsx4("span", { className: "k-button-text", children: props.children }),
-        showArrow && /* @__PURE__ */ jsx4("span", { className: "k-menu-button-arrow k-button-arrow", children: /* @__PURE__ */ jsx4(Icon, { icon: arrowIconName }) })
+        ] }) : props.children && /* @__PURE__ */ jsx5("span", { className: "k-button-text", children: props.children }),
+        showArrow && /* @__PURE__ */ jsx5("span", { className: "k-menu-button-arrow k-button-arrow", children: /* @__PURE__ */ jsx5(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
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 
 // src/button/templates/icon-text-button.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 
 // src/button/templates/text-button.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
+
+// src/wizard/wizard-step.tsx
+import { Fragment as Fragment5, jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
+var WIZZARDSTEP_CLASSNAME = `k-wizard-step`;
+var states6 = [
+  States.focus
+];
+var options6 = {};
+var defaultProps6 = {
+  buttons: /* @__PURE__ */ jsxs2(Fragment5, { children: [
+    /* @__PURE__ */ jsxs2("span", { className: "k-wizard-buttons-left", children: [
+      /* @__PURE__ */ jsx9(Button, { children: "Reset" }),
+      /* @__PURE__ */ jsx9("span", { className: "k-wizard-pager", children: "Step 1 of 2" })
+    ] }),
+    /* @__PURE__ */ jsxs2("span", { className: "k-wizard-buttons-right", children: [
+      /* @__PURE__ */ jsx9(Button, { children: "Previous" }),
+      /* @__PURE__ */ jsx9(Button, { themeColor: "primary", children: "Next" })
+    ] })
+  ] })
+};
+var WizardStep = (props) => {
+  const {
+    focus,
+    buttons,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        WIZZARDSTEP_CLASSNAME,
+        stateClassNames(WIZZARDSTEP_CLASSNAME, { focus })
+      ),
+      children: [
+        /* @__PURE__ */ jsx9("div", { className: "k-wizard-content", children: props.children }),
+        buttons && /* @__PURE__ */ jsx9("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
+import { jsx as jsx10 } from "react/jsx-runtime";
+var WIZZARDSTEPS_CLASSNAME = `k-wizard-steps`;
+var states7 = [];
+var options7 = {};
+var defaultProps7 = {};
+var WizardSteps = (props) => /* @__PURE__ */ jsx10(
+  "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
+import { jsx as jsx11 } from "react/jsx-runtime";
+var STEPPER_CLASSNAME = "k-stepper";
+var states8 = [];
+var options8 = {};
+var defaultProps8 = {};
+var Stepper = (props) => {
+  const {
+    style: style2,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx11(
+    "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
+import { jsx as jsx12 } from "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__ */ jsx12(
+    "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
+import { jsx as jsx13, jsxs as jsxs3 } from "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__ */ jsxs3(
+    "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__ */ jsxs3("a", { href: "#", className: "k-step-link", children: [
+          text && !icon && /* @__PURE__ */ jsx13("span", { className: "k-step-indicator", children: /* @__PURE__ */ jsx13("span", { className: "k-step-indicator-text", children: text }) }),
+          icon && /* @__PURE__ */ jsx13("span", { className: "k-step-indicator", children: /* @__PURE__ */ jsx13(Icon, { className: "k-step-indicator-icon", icon }) }),
+          optional && !label && /* @__PURE__ */ jsx13("span", { className: "k-step-label", children: /* @__PURE__ */ jsx13("span", { className: "k-step-label-optional", children: "(Optional)" }) }),
+          label && /* @__PURE__ */ jsxs3("span", { className: "k-step-label", children: [
+            /* @__PURE__ */ jsx13("span", { className: "k-step-text", children: label }),
+            renderValidationIcon && /* @__PURE__ */ jsx13(Icon, { icon: iconName }),
+            optional && /* @__PURE__ */ jsx13("span", { className: "k-step-label-optional", children: "(Optional)" })
+          ] })
+        ] }),
+        stepContent && /* @__PURE__ */ jsx13("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
-import { jsx as jsx8, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs4 } from "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",
@@ -4475,16 +4720,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__ */ jsxs2(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       ...other,
@@ -4502,21 +4747,21 @@ var ProgressBar = (props) => {
       ),
       style: orientation === "horizontal" ? { "--kendo-progressbar-value": value, height } : { "--kendo-progressbar-value": value, width },
       children: [
-        /* @__PURE__ */ jsx8("span", { className: classNames(
+        /* @__PURE__ */ jsx14("span", { className: classNames(
           "k-progress-status-wrap",
           {
             [`k-progress-${labelPosition}`]: labelPosition && !indeterminate
           }
-        ), children: label && /* @__PURE__ */ jsxs2("span", { className: "k-progress-status", children: [
+        ), children: label && /* @__PURE__ */ jsxs4("span", { className: "k-progress-status", children: [
           value,
           "%"
         ] }) }),
-        !indeterminate && /* @__PURE__ */ jsx8("div", { className: "k-progressbar-value k-selected", children: /* @__PURE__ */ jsx8("span", { className: classNames(
+        !indeterminate && /* @__PURE__ */ jsx14("div", { className: "k-progressbar-value k-selected", children: /* @__PURE__ */ jsx14("span", { className: classNames(
           "k-progress-status-wrap",
           {
             [`k-progress-${labelPosition}`]: labelPosition
           }
-        ), children: label && /* @__PURE__ */ jsxs2("span", { className: "k-progress-status", children: [
+        ), children: label && /* @__PURE__ */ jsxs4("span", { className: "k-progress-status", children: [
           props.value,
           "%"
         ] }) }) })
@@ -4524,22 +4769,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
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "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
@@ -4547,14 +4792,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__ */ jsx9(
+  return /* @__PURE__ */ jsx15(
     "div",
     {
       ...other,
@@ -4571,8 +4816,8 @@ var ChunkProgressBar = (props) => {
           [`${PROGRESSBAR_CLASSNAME}-reverse`]: reverse
         }
       ),
-      children: /* @__PURE__ */ jsx9("ul", { className: "k-progressbar-chunks k-reset", children: [...Array(chunkCount)].map(
-        (_el, i) => /* @__PURE__ */ jsx9("li", { className: classNames(
+      children: /* @__PURE__ */ jsx15("ul", { className: "k-progressbar-chunks k-reset", children: [...Array(chunkCount)].map(
+        (_el, i) => /* @__PURE__ */ jsx15("li", { className: classNames(
           "k-progressbar-chunk",
           {
             "k-first": i === 0,
@@ -4584,20 +4829,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
-import { jsx as jsx10 } from "react/jsx-runtime";
-var ProgressBarNormal = (props) => /* @__PURE__ */ jsx10(progressbar_spec_default, { ...props });
+import { jsx as jsx16 } from "react/jsx-runtime";
+var ProgressBarNormal = (props) => /* @__PURE__ */ jsx16(progressbar_spec_default, { ...props });
 
 // src/progressbar/templates/chunk-progressbar-normal.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
+
+// src/stepper/templates/stepper-normal.tsx
+import { Fragment as Fragment6, jsx as jsx18, jsxs as jsxs5 } from "react/jsx-runtime";
+
+// src/stepper/templates/stepper-vertical.tsx
+import { Fragment as Fragment7, jsx as jsx19, jsxs as jsxs6 } from "react/jsx-runtime";
+var StepperVertical = ({ gridTemplateRows = "repeat(3, 1fr)", ...other }) => /* @__PURE__ */ jsx19(
+  Stepper,
+  {
+    style: { display: "grid", gridTemplateRows },
+    children: /* @__PURE__ */ jsxs6(Fragment7, { children: [
+      /* @__PURE__ */ jsxs6(StepList, { orientation: "vertical", style: { gridRowStart: "1", gridRowEnd: "-1" }, children: [
+        /* @__PURE__ */ jsx19(Step, { first: true, done: true, icon: "check", style: { maxHeight: "33.333%" } }),
+        /* @__PURE__ */ jsx19(Step, { current: true, focus: true, text: "2", style: { maxHeight: "33.333%" } }),
+        /* @__PURE__ */ jsx19(Step, { last: true, optional: true, text: "3", style: { maxHeight: "33.333%" } })
+      ] }),
+      /* @__PURE__ */ jsx19(ProgressBarNormal, { orientation: "vertical", reverse: true, label: false, value: "50" })
+    ] }),
+    ...other
+  }
+);
+
+// src/wizard/templates/wizard-normal.tsx
+import { Fragment as Fragment8, jsx as jsx20, jsxs as jsxs7 } from "react/jsx-runtime";
+
+// src/wizard/templates/wizard-vertical.tsx
+import { Fragment as Fragment9, jsx as jsx21, jsxs as jsxs8 } from "react/jsx-runtime";
+var WizardVertical = ({ ...other }) => /* @__PURE__ */ jsx21(
+  Wizard,
+  {
+    id: "wizard",
+    orientation: "vertical",
+    children: /* @__PURE__ */ jsxs8(Fragment9, { children: [
+      /* @__PURE__ */ jsx21(StepperVertical, {}),
+      /* @__PURE__ */ jsx21(WizardSteps, { children: /* @__PURE__ */ jsx21(WizardStep, { children: "Short content" }) })
+    ] }),
+    ...other
+  }
+);
 
 // src/wizard/tests/wizard-vertical.tsx
-import { Fragment as Fragment5, jsx as jsx12, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx22, jsxs as jsxs9 } from "react/jsx-runtime";
 var style = `
     .wrapper {
         border: 1px solid #6c757d4f;
@@ -4614,371 +4898,55 @@ var style = `
         top: 17px;
     }
 `;
-var stepperStyle = {
-  display: "grid",
-  gridTemplateRows: "repeat(3, 1fr)"
-};
-var stepListStyle = {
-  gridRowStart: "1",
-  gridRowEnd: "-1"
-};
-var wizard_vertical_default = () => /* @__PURE__ */ jsxs3(Fragment5, { children: [
-  /* @__PURE__ */ jsx12("style", { children: style }),
-  /* @__PURE__ */ jsxs3("div", { id: "test-area", className: "k-d-grid k-grid-cols-2", children: [
-    /* @__PURE__ */ jsxs3("section", { children: [
-      /* @__PURE__ */ jsxs3("div", { className: "wrapper", children: [
-        /* @__PURE__ */ jsx12("p", { children: "Vertical wizard; Content is placed to the right (Default)" }),
-        /* @__PURE__ */ jsxs3("div", { id: "wizard", className: "k-widget k-wizard k-wizard-vertical k-wizard-right", children: [
-          /* @__PURE__ */ jsxs3("nav", { className: "k-stepper k-widget", style: stepperStyle, children: [
-            /* @__PURE__ */ jsxs3("ol", { className: "k-step-list k-step-list-vertical", style: stepListStyle, children: [
-              /* @__PURE__ */ jsx12("li", { className: "k-step k-step-first k-step-done k-step-success", style: { maxHeight: "33.333%" }, children: /* @__PURE__ */ jsxs3("a", { href: "#", className: "k-step-link", children: [
-                /* @__PURE__ */ jsx12("span", { className: "k-step-indicator", children: /* @__PURE__ */ jsx12("span", { className: "k-step-indicator-text", children: "1" }) }),
-                /* @__PURE__ */ jsxs3("span", { className: "k-step-label", children: [
-                  /* @__PURE__ */ jsx12("span", { className: "k-step-text", children: "Account Info with too long text" }),
-                  /* @__PURE__ */ jsx12(Icon, { icon: "check" })
-                ] })
-              ] }) }),
-              /* @__PURE__ */ jsx12("li", { className: "k-step k-step-current k-focus k-step-error", style: { maxHeight: "33.333%" }, children: /* @__PURE__ */ jsxs3("a", { href: "#", className: "k-step-link", children: [
-                /* @__PURE__ */ jsx12("span", { className: "k-step-indicator", children: /* @__PURE__ */ jsx12("span", { className: "k-step-indicator-text", children: "2" }) }),
-                /* @__PURE__ */ jsxs3("span", { className: "k-step-label", children: [
-                  /* @__PURE__ */ jsx12("span", { className: "k-step-text", children: "Personal Info" }),
-                  /* @__PURE__ */ jsx12(Icon, { className: "k-validation-icon", icon: "exclamation-circle" })
-                ] })
-              ] }) }),
-              /* @__PURE__ */ jsx12("li", { className: "k-step k-step-last k-step-optional", children: /* @__PURE__ */ jsxs3("a", { href: "#", className: "k-step-link", style: { maxHeight: "33.333%" }, children: [
-                /* @__PURE__ */ jsx12("span", { className: "k-step-indicator", children: /* @__PURE__ */ jsx12("span", { className: "k-step-indicator-text", children: "3" }) }),
-                /* @__PURE__ */ jsxs3("span", { className: "k-step-label", children: [
-                  /* @__PURE__ */ jsx12("span", { className: "k-step-text", children: "Payment Details" }),
-                  /* @__PURE__ */ jsx12("span", { className: "k-step-label-optional", children: "(Optional)" })
-                ] })
-              ] }) })
-            ] }),
-            /* @__PURE__ */ jsx12(ProgressBarNormal, { orientation: "vertical", label: false, reverse: true, value: "50" })
-          ] }),
-          /* @__PURE__ */ jsx12("div", { className: "k-wizard-steps", children: /* @__PURE__ */ jsxs3("div", { className: "k-wizard-step k-focus", children: [
-            /* @__PURE__ */ jsx12("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__ */ jsxs3("div", { className: "k-wizard-buttons", children: [
-              /* @__PURE__ */ jsxs3("span", { className: "k-wizard-buttons-left", children: [
-                /* @__PURE__ */ jsx12(Button, { children: "Reset" }),
-                /* @__PURE__ */ jsx12("span", { className: "k-wizard-pager", children: "Step 1 of 2" })
-              ] }),
-              /* @__PURE__ */ jsxs3("span", { className: "k-wizard-buttons-right", children: [
-                /* @__PURE__ */ jsx12(Button, { children: "Previous" }),
-                /* @__PURE__ */ jsx12(Button, { themeColor: "primary", children: "Next" })
-              ] })
-            ] })
-          ] }) })
+var wizard_vertical_default = () => /* @__PURE__ */ jsxs9(Fragment10, { children: [
+  /* @__PURE__ */ jsx22("style", { children: style }),
+  /* @__PURE__ */ jsxs9("div", { id: "test-area", className: "k-d-grid k-grid-cols-2", children: [
+    /* @__PURE__ */ jsxs9("section", { children: [
+      /* @__PURE__ */ jsxs9("div", { className: "wrapper", children: [
+        /* @__PURE__ */ jsx22("p", { children: "Vertical wizard; Content is placed to the right (Default)" }),
+        /* @__PURE__ */ jsxs9(WizardVertical, { children: [
+          /* @__PURE__ */ jsx22(StepperVertical, {}),
+          /* @__PURE__ */ jsx22(WizardSteps, { children: /* @__PURE__ */ jsx22(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__ */ jsxs3("div", { className: "wrapper", children: [
-        /* @__PURE__ */ jsx12("p", { children: "Small height set" }),
-        /* @__PURE__ */ jsxs3("div", { id: "wizard", style: { height: "350px" }, className: "k-widget k-wizard k-wizard-vertical k-wizard-right", children: [
-          /* @__PURE__ */ jsxs3("nav", { className: "k-stepper k-widget", style: stepperStyle, children: [
-            /* @__PURE__ */ jsxs3("ol", { className: "k-step-list k-step-list-vertical", style: stepListStyle, children: [
-              /* @__PURE__ */ jsx12("li", { className: "k-step k-step-first k-step-done k-step-success", style: { maxHeight: "33.333%" }, children: /* @__PURE__ */ jsxs3("a", { href: "#", className: "k-step-link", children: [
-                /* @__PURE__ */ jsx12("span", { className: "k-step-indicator", children: /* @__PURE__ */ jsx12("span", { className: "k-step-indicator-text", children: "1" }) }),
-                /* @__PURE__ */ jsxs3("span", { className: "k-step-label", children: [
-                  /* @__PURE__ */ jsx12("span", { className: "k-step-text", children: "Account Info with too long text" }),
-                  /* @__PURE__ */ jsx12(Icon, { icon: "check" })
-                ] })
-              ] }) }),
-              /* @__PURE__ */ jsx12("li", { className: "k-step k-step-current k-focus k-step-error", style: { maxHeight: "33.333%" }, children: /* @__PURE__ */ jsxs3("a", { href: "#", className: "k-step-link", children: [
-                /* @__PURE__ */ jsx12("span", { className: "k-step-indicator", children: /* @__PURE__ */ jsx12("span", { className: "k-step-indicator-text", children: "2" }) }),
-                /* @__PURE__ */ jsxs3("span", { className: "k-step-label", children: [
-                  /* @__PURE__ */ jsx12("span", { className: "k-step-text", children: "Personal Info" }),
-                  /* @__PURE__ */ jsx12(Icon, { className: "k-validation-icon", icon: "exclamation-circle" })
-                ] })
-              ] }) }),
-              /* @__PURE__ */ jsx12("li", { className: "k-step k-step-last k-step-optional", children: /* @__PURE__ */ jsxs3("a", { href: "#", className: "k-step-link", style: { maxHeight: "33.333%" }, children: [
-                /* @__PURE__ */ jsx12("span", { className: "k-step-indicator", children: /* @__PURE__ */ jsx12("span", { className: "k-step-indicator-text", children: "3" }) }),
-                /* @__PURE__ */ jsxs3("span", { className: "k-step-label", children: [
-                  /* @__PURE__ */ jsx12("span", { className: "k-step-text", children: "Payment Details" }),
-                  /* @__PURE__ */ jsx12("span", { className: "k-step-label-optional", children: "(Optional)" })
-                ] })
-              ] }) })
-            ] }),
-            /* @__PURE__ */ jsx12(ProgressBarNormal, { orientation: "vertical", label: false, reverse: true, value: "50" })
-          ] }),
-          /* @__PURE__ */ jsx12("div", { className: "k-wizard-steps", children: /* @__PURE__ */ jsxs3("div", { className: "k-wizard-step", children: [
-            /* @__PURE__ */ jsx12("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__ */ jsxs3("div", { className: "k-wizard-buttons", children: [
-              /* @__PURE__ */ jsxs3("span", { className: "k-wizard-buttons-left", children: [
-                /* @__PURE__ */ jsx12(Button, { children: "Reset" }),
-                /* @__PURE__ */ jsx12("span", { className: "k-wizard-pager", children: "Step 1 of 2" })
-              ] }),
-              /* @__PURE__ */ jsxs3("span", { className: "k-wizard-buttons-right", children: [
-                /* @__PURE__ */ jsx12(Button, { children: "Previous" }),
-                /* @__PURE__ */ jsx12(Button, { themeColor: "primary", children: "Next" })
-              ] })
-            ] })
-          ] }) })
+      /* @__PURE__ */ jsxs9("div", { className: "wrapper", children: [
+        /* @__PURE__ */ jsx22("p", { children: "Small height set" }),
+        /* @__PURE__ */ jsxs9(WizardVertical, { style: { height: "200px" }, children: [
+          /* @__PURE__ */ jsx22(StepperVertical, {}),
+          /* @__PURE__ */ jsx22(WizardSteps, { children: /* @__PURE__ */ jsx22(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__ */ jsxs3("div", { className: "wrapper", children: [
-        /* @__PURE__ */ jsx12("p", { children: "Short content" }),
-        /* @__PURE__ */ jsxs3("div", { id: "wizard", className: "k-widget k-wizard k-wizard-vertical k-wizard-right", children: [
-          /* @__PURE__ */ jsxs3("nav", { className: "k-stepper k-widget", style: stepperStyle, children: [
-            /* @__PURE__ */ jsxs3("ol", { className: "k-step-list k-step-list-vertical", style: stepListStyle, children: [
-              /* @__PURE__ */ jsx12("li", { className: "k-step k-step-first k-step-done k-step-success", style: { maxHeight: "33.333%" }, children: /* @__PURE__ */ jsxs3("a", { href: "#", className: "k-step-link", children: [
-                /* @__PURE__ */ jsx12("span", { className: "k-step-indicator", children: /* @__PURE__ */ jsx12("span", { className: "k-step-indicator-text", children: "1" }) }),
-                /* @__PURE__ */ jsxs3("span", { className: "k-step-label", children: [
-                  /* @__PURE__ */ jsx12("span", { className: "k-step-text", children: "Account Info with too long text" }),
-                  /* @__PURE__ */ jsx12(Icon, { icon: "check" })
-                ] })
-              ] }) }),
-              /* @__PURE__ */ jsx12("li", { className: "k-step k-step-current k-focus k-step-error", style: { maxHeight: "33.333%" }, children: /* @__PURE__ */ jsxs3("a", { href: "#", className: "k-step-link", children: [
-                /* @__PURE__ */ jsx12("span", { className: "k-step-indicator", children: /* @__PURE__ */ jsx12("span", { className: "k-step-indicator-text", children: "2" }) }),
-                /* @__PURE__ */ jsxs3("span", { className: "k-step-label", children: [
-                  /* @__PURE__ */ jsx12("span", { className: "k-step-text", children: "Personal Info" }),
-                  /* @__PURE__ */ jsx12(Icon, { className: "k-validation-icon", icon: "exclamation-circle" })
-                ] })
-              ] }) }),
-              /* @__PURE__ */ jsx12("li", { className: "k-step k-step-last k-step-optional", style: { maxHeight: "33.333%" }, children: /* @__PURE__ */ jsxs3("a", { href: "#", className: "k-step-link", children: [
-                /* @__PURE__ */ jsx12("span", { className: "k-step-indicator", children: /* @__PURE__ */ jsx12("span", { className: "k-step-indicator-text", children: "3" }) }),
-                /* @__PURE__ */ jsxs3("span", { className: "k-step-label", children: [
-                  /* @__PURE__ */ jsx12("span", { className: "k-step-text", children: "Payment Details" }),
-                  /* @__PURE__ */ jsx12("span", { className: "k-step-label-optional", children: "(Optional)" })
-                ] })
-              ] }) })
-            ] }),
-            /* @__PURE__ */ jsx12(ProgressBarNormal, { orientation: "vertical", label: false, reverse: true, value: "50" })
-          ] }),
-          /* @__PURE__ */ jsx12("div", { className: "k-wizard-steps", children: /* @__PURE__ */ jsxs3("div", { className: "k-wizard-step", children: [
-            /* @__PURE__ */ jsx12("div", { className: "k-wizard-content", children: "Short content" }),
-            /* @__PURE__ */ jsxs3("div", { className: "k-wizard-buttons", children: [
-              /* @__PURE__ */ jsxs3("span", { className: "k-wizard-buttons-left", children: [
-                /* @__PURE__ */ jsx12(Button, { children: "Reset" }),
-                /* @__PURE__ */ jsx12("span", { className: "k-wizard-pager", children: "Step 1 of 2" })
-              ] }),
-              /* @__PURE__ */ jsxs3("span", { className: "k-wizard-buttons-right", children: [
-                /* @__PURE__ */ jsx12(Button, { children: "Previous" }),
-                /* @__PURE__ */ jsx12(Button, { themeColor: "primary", children: "Next" })
-              ] })
-            ] })
-          ] }) })
-        ] })
+      /* @__PURE__ */ jsxs9("div", { className: "wrapper", children: [
+        /* @__PURE__ */ jsx22("p", { children: "Short content" }),
+        /* @__PURE__ */ jsx22(WizardVertical, {})
       ] }),
-      /* @__PURE__ */ jsxs3("div", { className: "wrapper", children: [
-        /* @__PURE__ */ jsx12("p", { children: "Short content; Big height set" }),
-        /* @__PURE__ */ jsxs3("div", { id: "wizard", style: { height: "300px" }, className: "k-widget k-wizard k-wizard-vertical k-wizard-right", children: [
-          /* @__PURE__ */ jsxs3("nav", { className: "k-stepper k-widget", style: stepperStyle, children: [
-            /* @__PURE__ */ jsxs3("ol", { className: "k-step-list k-step-list-vertical", style: stepListStyle, children: [
-              /* @__PURE__ */ jsx12("li", { className: "k-step k-step-first k-step-done k-step-success", style: { maxHeight: "33.333%" }, children: /* @__PURE__ */ jsxs3("a", { href: "#", className: "k-step-link", children: [
-                /* @__PURE__ */ jsx12("span", { className: "k-step-indicator", children: /* @__PURE__ */ jsx12("span", { className: "k-step-indicator-text", children: "1" }) }),
-                /* @__PURE__ */ jsxs3("span", { className: "k-step-label", children: [
-                  /* @__PURE__ */ jsx12("span", { className: "k-step-text", children: "Account Info with too long text" }),
-                  /* @__PURE__ */ jsx12(Icon, { icon: "check" })
-                ] })
-              ] }) }),
-              /* @__PURE__ */ jsx12("li", { className: "k-step k-step-current k-focus k-step-error", style: { maxHeight: "33.333%" }, children: /* @__PURE__ */ jsxs3("a", { href: "#", className: "k-step-link", children: [
-                /* @__PURE__ */ jsx12("span", { className: "k-step-indicator", children: /* @__PURE__ */ jsx12("span", { className: "k-step-indicator-text", children: "2" }) }),
-                /* @__PURE__ */ jsxs3("span", { className: "k-step-label", children: [
-                  /* @__PURE__ */ jsx12("span", { className: "k-step-text", children: "Personal Info" }),
-                  /* @__PURE__ */ jsx12(Icon, { className: "k-validation-icon", icon: "exclamation-circle" })
-                ] })
-              ] }) }),
-              /* @__PURE__ */ jsx12("li", { className: "k-step k-step-last k-step-optional", style: { maxHeight: "33.333%" }, children: /* @__PURE__ */ jsxs3("a", { href: "#", className: "k-step-link", children: [
-                /* @__PURE__ */ jsx12("span", { className: "k-step-indicator", children: /* @__PURE__ */ jsx12("span", { className: "k-step-indicator-text", children: "3" }) }),
-                /* @__PURE__ */ jsxs3("span", { className: "k-step-label", children: [
-                  /* @__PURE__ */ jsx12("span", { className: "k-step-text", children: "Payment Details" }),
-                  /* @__PURE__ */ jsx12("span", { className: "k-step-label-optional", children: "(Optional)" })
-                ] })
-              ] }) })
-            ] }),
-            /* @__PURE__ */ jsx12(ProgressBarNormal, { orientation: "vertical", label: false, reverse: true, value: "50" })
-          ] }),
-          /* @__PURE__ */ jsx12("div", { className: "k-wizard-steps", children: /* @__PURE__ */ jsxs3("div", { className: "k-wizard-step", children: [
-            /* @__PURE__ */ jsx12("div", { className: "k-wizard-content", children: "Short content" }),
-            /* @__PURE__ */ jsxs3("div", { className: "k-wizard-buttons", children: [
-              /* @__PURE__ */ jsxs3("span", { className: "k-wizard-buttons-left", children: [
-                /* @__PURE__ */ jsx12(Button, { children: "Reset" }),
-                /* @__PURE__ */ jsx12("span", { className: "k-wizard-pager", children: "Step 1 of 2" })
-              ] }),
-              /* @__PURE__ */ jsxs3("span", { className: "k-wizard-buttons-right", children: [
-                /* @__PURE__ */ jsx12(Button, { children: "Previous" }),
-                /* @__PURE__ */ jsx12(Button, { themeColor: "primary", children: "Next" })
-              ] })
-            ] })
-          ] }) })
-        ] })
+      /* @__PURE__ */ jsxs9("div", { className: "wrapper", children: [
+        /* @__PURE__ */ jsx22("p", { children: "Short content; Big height set" }),
+        /* @__PURE__ */ jsx22(WizardVertical, { style: { height: "280px" } })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs3("section", { children: [
-      /* @__PURE__ */ jsxs3("div", { className: "wrapper", children: [
-        /* @__PURE__ */ jsx12("p", { children: "Vertical wizard; Content is placed to the left" }),
-        /* @__PURE__ */ jsxs3("div", { id: "wizard", className: "k-widget k-wizard k-wizard-vertical k-wizard-left", children: [
-          /* @__PURE__ */ jsxs3("nav", { className: "k-stepper k-widget", style: stepperStyle, children: [
-            /* @__PURE__ */ jsxs3("ol", { className: "k-step-list k-step-list-vertical", style: stepListStyle, children: [
-              /* @__PURE__ */ jsx12("li", { className: "k-step k-step-first k-step-done k-step-success", style: { maxHeight: "33.333%" }, children: /* @__PURE__ */ jsxs3("a", { href: "#", className: "k-step-link", children: [
-                /* @__PURE__ */ jsx12("span", { className: "k-step-indicator", children: /* @__PURE__ */ jsx12("span", { className: "k-step-indicator-text", children: "1" }) }),
-                /* @__PURE__ */ jsxs3("span", { className: "k-step-label", children: [
-                  /* @__PURE__ */ jsx12("span", { className: "k-step-text", children: "Account Info with too long text" }),
-                  /* @__PURE__ */ jsx12(Icon, { icon: "check" })
-                ] })
-              ] }) }),
-              /* @__PURE__ */ jsx12("li", { className: "k-step k-step-current k-focus k-step-error", style: { maxHeight: "33.333%" }, children: /* @__PURE__ */ jsxs3("a", { href: "#", className: "k-step-link", children: [
-                /* @__PURE__ */ jsx12("span", { className: "k-step-indicator", children: /* @__PURE__ */ jsx12("span", { className: "k-step-indicator-text", children: "2" }) }),
-                /* @__PURE__ */ jsxs3("span", { className: "k-step-label", children: [
-                  /* @__PURE__ */ jsx12("span", { className: "k-step-text", children: "Personal Info" }),
-                  /* @__PURE__ */ jsx12(Icon, { className: "k-validation-icon", icon: "exclamation-circle" })
-                ] })
-              ] }) }),
-              /* @__PURE__ */ jsx12("li", { className: "k-step k-step-last k-step-optional", style: { maxHeight: "33.333%" }, children: /* @__PURE__ */ jsxs3("a", { href: "#", className: "k-step-link", children: [
-                /* @__PURE__ */ jsx12("span", { className: "k-step-indicator", children: /* @__PURE__ */ jsx12("span", { className: "k-step-indicator-text", children: "3" }) }),
-                /* @__PURE__ */ jsxs3("span", { className: "k-step-label", children: [
-                  /* @__PURE__ */ jsx12("span", { className: "k-step-text", children: "Payment Details" }),
-                  /* @__PURE__ */ jsx12("span", { className: "k-step-label-optional", children: "(Optional)" })
-                ] })
-              ] }) })
-            ] }),
-            /* @__PURE__ */ jsx12(ProgressBarNormal, { orientation: "vertical", label: false, reverse: true, value: "50" })
-          ] }),
-          /* @__PURE__ */ jsx12("div", { className: "k-wizard-steps", children: /* @__PURE__ */ jsxs3("div", { className: "k-wizard-step", children: [
-            /* @__PURE__ */ jsx12("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__ */ jsxs3("div", { className: "k-wizard-buttons", children: [
-              /* @__PURE__ */ jsxs3("span", { className: "k-wizard-buttons-left", children: [
-                /* @__PURE__ */ jsx12(Button, { children: "Reset" }),
-                /* @__PURE__ */ jsx12("span", { className: "k-wizard-pager", children: "Step 1 of 2" })
-              ] }),
-              /* @__PURE__ */ jsxs3("span", { className: "k-wizard-buttons-right", children: [
-                /* @__PURE__ */ jsx12(Button, { children: "Previous" }),
-                /* @__PURE__ */ jsx12(Button, { themeColor: "primary", children: "Next" })
-              ] })
-            ] })
-          ] }) })
+    /* @__PURE__ */ jsxs9("section", { children: [
+      /* @__PURE__ */ jsxs9("div", { className: "wrapper", children: [
+        /* @__PURE__ */ jsx22("p", { children: "Vertical wizard; Content is placed to the left" }),
+        /* @__PURE__ */ jsxs9(WizardVertical, { contentPosition: "left", children: [
+          /* @__PURE__ */ jsx22(StepperVertical, {}),
+          /* @__PURE__ */ jsx22(WizardSteps, { children: /* @__PURE__ */ jsx22(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__ */ jsxs3("div", { className: "wrapper", children: [
-        /* @__PURE__ */ jsx12("p", { children: "Small height set" }),
-        /* @__PURE__ */ jsxs3("div", { id: "wizard", style: { height: "350px" }, className: "k-widget k-wizard k-wizard-vertical k-wizard-left", children: [
-          /* @__PURE__ */ jsxs3("nav", { className: "k-stepper k-widget", style: stepperStyle, children: [
-            /* @__PURE__ */ jsxs3("ol", { className: "k-step-list k-step-list-vertical", style: stepListStyle, children: [
-              /* @__PURE__ */ jsx12("li", { className: "k-step k-step-first k-step-done k-step-success", style: { maxHeight: "33.333%" }, children: /* @__PURE__ */ jsxs3("a", { href: "#", className: "k-step-link", children: [
-                /* @__PURE__ */ jsx12("span", { className: "k-step-indicator", children: /* @__PURE__ */ jsx12("span", { className: "k-step-indicator-text", children: "1" }) }),
-                /* @__PURE__ */ jsxs3("span", { className: "k-step-label", children: [
-                  /* @__PURE__ */ jsx12("span", { className: "k-step-text", children: "Account Info with too long text" }),
-                  /* @__PURE__ */ jsx12(Icon, { icon: "check" })
-                ] })
-              ] }) }),
-              /* @__PURE__ */ jsx12("li", { className: "k-step k-step-current k-focus k-step-error", style: { maxHeight: "33.333%" }, children: /* @__PURE__ */ jsxs3("a", { href: "#", className: "k-step-link", children: [
-                /* @__PURE__ */ jsx12("span", { className: "k-step-indicator", children: /* @__PURE__ */ jsx12("span", { className: "k-step-indicator-text", children: "2" }) }),
-                /* @__PURE__ */ jsxs3("span", { className: "k-step-label", children: [
-                  /* @__PURE__ */ jsx12("span", { className: "k-step-text", children: "Personal Info" }),
-                  /* @__PURE__ */ jsx12(Icon, { className: "k-validation-icon", icon: "exclamation-circle" })
-                ] })
-              ] }) }),
-              /* @__PURE__ */ jsx12("li", { className: "k-step k-step-last k-step-optional", style: { maxHeight: "33.333%" }, children: /* @__PURE__ */ jsxs3("a", { href: "#", className: "k-step-link", children: [
-                /* @__PURE__ */ jsx12("span", { className: "k-step-indicator", children: /* @__PURE__ */ jsx12("span", { className: "k-step-indicator-text", children: "3" }) }),
-                /* @__PURE__ */ jsxs3("span", { className: "k-step-label", children: [
-                  /* @__PURE__ */ jsx12("span", { className: "k-step-text", children: "Payment Details" }),
-                  /* @__PURE__ */ jsx12("span", { className: "k-step-label-optional", children: "(Optional)" })
-                ] })
-              ] }) })
-            ] }),
-            /* @__PURE__ */ jsx12(ProgressBarNormal, { orientation: "vertical", label: false, reverse: true, value: "50" })
-          ] }),
-          /* @__PURE__ */ jsx12("div", { className: "k-wizard-steps", children: /* @__PURE__ */ jsxs3("div", { className: "k-wizard-step", children: [
-            /* @__PURE__ */ jsx12("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__ */ jsxs3("div", { className: "k-wizard-buttons", children: [
-              /* @__PURE__ */ jsxs3("span", { className: "k-wizard-buttons-left", children: [
-                /* @__PURE__ */ jsx12(Button, { children: "Reset" }),
-                /* @__PURE__ */ jsx12("span", { className: "k-wizard-pager", children: "Step 1 of 2" })
-              ] }),
-              /* @__PURE__ */ jsxs3("span", { className: "k-wizard-buttons-right", children: [
-                /* @__PURE__ */ jsx12(Button, { children: "Previous" }),
-                /* @__PURE__ */ jsx12(Button, { themeColor: "primary", children: "Next" })
-              ] })
-            ] })
-          ] }) })
+      /* @__PURE__ */ jsxs9("div", { className: "wrapper", children: [
+        /* @__PURE__ */ jsx22("p", { children: "Small height set" }),
+        /* @__PURE__ */ jsxs9(WizardVertical, { contentPosition: "left", style: { height: "200px" }, children: [
+          /* @__PURE__ */ jsx22(StepperVertical, {}),
+          /* @__PURE__ */ jsx22(WizardSteps, { children: /* @__PURE__ */ jsx22(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__ */ jsxs3("div", { className: "wrapper", children: [
-        /* @__PURE__ */ jsx12("p", { children: "Short content" }),
-        /* @__PURE__ */ jsxs3("div", { id: "wizard", className: "k-widget k-wizard k-wizard-vertical k-wizard-left", children: [
-          /* @__PURE__ */ jsxs3("nav", { className: "k-stepper k-widget", style: stepperStyle, children: [
-            /* @__PURE__ */ jsxs3("ol", { className: "k-step-list k-step-list-vertical", style: stepListStyle, children: [
-              /* @__PURE__ */ jsx12("li", { className: "k-step k-step-first k-step-done k-step-success", style: { maxHeight: "33.333%" }, children: /* @__PURE__ */ jsxs3("a", { href: "#", className: "k-step-link", children: [
-                /* @__PURE__ */ jsx12("span", { className: "k-step-indicator", children: /* @__PURE__ */ jsx12("span", { className: "k-step-indicator-text", children: "1" }) }),
-                /* @__PURE__ */ jsxs3("span", { className: "k-step-label", children: [
-                  /* @__PURE__ */ jsx12("span", { className: "k-step-text", children: "Account Info with too long text" }),
-                  /* @__PURE__ */ jsx12(Icon, { icon: "check" })
-                ] })
-              ] }) }),
-              /* @__PURE__ */ jsx12("li", { className: "k-step k-step-current k-focus k-step-error", style: { maxHeight: "33.333%" }, children: /* @__PURE__ */ jsxs3("a", { href: "#", className: "k-step-link", children: [
-                /* @__PURE__ */ jsx12("span", { className: "k-step-indicator", children: /* @__PURE__ */ jsx12("span", { className: "k-step-indicator-text", children: "2" }) }),
-                /* @__PURE__ */ jsxs3("span", { className: "k-step-label", children: [
-                  /* @__PURE__ */ jsx12("span", { className: "k-step-text", children: "Personal Info" }),
-                  /* @__PURE__ */ jsx12(Icon, { className: "k-validation-icon", icon: "exclamation-circle" })
-                ] })
-              ] }) }),
-              /* @__PURE__ */ jsx12("li", { className: "k-step k-step-last k-step-optional", style: { maxHeight: "33.333%" }, children: /* @__PURE__ */ jsxs3("a", { href: "#", className: "k-step-link", children: [
-                /* @__PURE__ */ jsx12("span", { className: "k-step-indicator", children: /* @__PURE__ */ jsx12("span", { className: "k-step-indicator-text", children: "3" }) }),
-                /* @__PURE__ */ jsxs3("span", { className: "k-step-label", children: [
-                  /* @__PURE__ */ jsx12("span", { className: "k-step-text", children: "Payment Details" }),
-                  /* @__PURE__ */ jsx12("span", { className: "k-step-label-optional", children: "(Optional)" })
-                ] })
-              ] }) })
-            ] }),
-            /* @__PURE__ */ jsx12(ProgressBarNormal, { orientation: "vertical", label: false, reverse: true, value: "50" })
-          ] }),
-          /* @__PURE__ */ jsx12("div", { className: "k-wizard-steps", children: /* @__PURE__ */ jsxs3("div", { className: "k-wizard-step", children: [
-            /* @__PURE__ */ jsx12("div", { className: "k-wizard-content", children: "Short content" }),
-            /* @__PURE__ */ jsxs3("div", { className: "k-wizard-buttons", children: [
-              /* @__PURE__ */ jsxs3("span", { className: "k-wizard-buttons-left", children: [
-                /* @__PURE__ */ jsx12(Button, { children: "Reset" }),
-                /* @__PURE__ */ jsx12("span", { className: "k-wizard-pager", children: "Step 1 of 2" })
-              ] }),
-              /* @__PURE__ */ jsxs3("span", { className: "k-wizard-buttons-right", children: [
-                /* @__PURE__ */ jsx12(Button, { children: "Previous" }),
-                /* @__PURE__ */ jsx12(Button, { themeColor: "primary", children: "Next" })
-              ] })
-            ] })
-          ] }) })
-        ] })
+      /* @__PURE__ */ jsxs9("div", { className: "wrapper", children: [
+        /* @__PURE__ */ jsx22("p", { children: "Short content" }),
+        /* @__PURE__ */ jsx22(WizardVertical, { contentPosition: "left" })
       ] }),
-      /* @__PURE__ */ jsxs3("div", { className: "wrapper", children: [
-        /* @__PURE__ */ jsx12("p", { children: "Short content; Big height set" }),
-        /* @__PURE__ */ jsxs3("div", { id: "wizard", style: { height: "300px" }, className: "k-widget k-wizard k-wizard-vertical k-wizard-left", children: [
-          /* @__PURE__ */ jsxs3("nav", { className: "k-stepper k-widget", style: stepperStyle, children: [
-            /* @__PURE__ */ jsxs3("ol", { className: "k-step-list k-step-list-vertical", style: stepListStyle, children: [
-              /* @__PURE__ */ jsx12("li", { className: "k-step k-step-first k-step-done k-step-success", style: { maxHeight: "33.333%" }, children: /* @__PURE__ */ jsxs3("a", { href: "#", className: "k-step-link", children: [
-                /* @__PURE__ */ jsx12("span", { className: "k-step-indicator", children: /* @__PURE__ */ jsx12("span", { className: "k-step-indicator-text", children: "1" }) }),
-                /* @__PURE__ */ jsxs3("span", { className: "k-step-label", children: [
-                  /* @__PURE__ */ jsx12("span", { className: "k-step-text", children: "Account Info with too long text" }),
-                  /* @__PURE__ */ jsx12(Icon, { icon: "check" })
-                ] })
-              ] }) }),
-              /* @__PURE__ */ jsx12("li", { className: "k-step k-step-current k-focus k-step-error", style: { maxHeight: "33.333%" }, children: /* @__PURE__ */ jsxs3("a", { href: "#", className: "k-step-link", children: [
-                /* @__PURE__ */ jsx12("span", { className: "k-step-indicator", children: /* @__PURE__ */ jsx12("span", { className: "k-step-indicator-text", children: "2" }) }),
-                /* @__PURE__ */ jsxs3("span", { className: "k-step-label", children: [
-                  /* @__PURE__ */ jsx12("span", { className: "k-step-text", children: "Personal Info" }),
-                  /* @__PURE__ */ jsx12(Icon, { className: "k-validation-icon", icon: "exclamation-circle" })
-                ] })
-              ] }) }),
-              /* @__PURE__ */ jsx12("li", { className: "k-step k-step-last k-step-optional", style: { maxHeight: "33.333%" }, children: /* @__PURE__ */ jsxs3("a", { href: "#", className: "k-step-link", children: [
-                /* @__PURE__ */ jsx12("span", { className: "k-step-indicator", children: /* @__PURE__ */ jsx12("span", { className: "k-step-indicator-text", children: "3" }) }),
-                /* @__PURE__ */ jsxs3("span", { className: "k-step-label", children: [
-                  /* @__PURE__ */ jsx12("span", { className: "k-step-text", children: "Payment Details" }),
-                  /* @__PURE__ */ jsx12("span", { className: "k-step-label-optional", children: "(Optional)" })
-                ] })
-              ] }) })
-            ] }),
-            /* @__PURE__ */ jsx12(ProgressBarNormal, { orientation: "vertical", label: false, reverse: true, value: "50" })
-          ] }),
-          /* @__PURE__ */ jsx12("div", { className: "k-wizard-steps", children: /* @__PURE__ */ jsxs3("div", { className: "k-wizard-step", children: [
-            /* @__PURE__ */ jsx12("div", { className: "k-wizard-content", children: "Short content" }),
-            /* @__PURE__ */ jsxs3("div", { className: "k-wizard-buttons", children: [
-              /* @__PURE__ */ jsxs3("span", { className: "k-wizard-buttons-left", children: [
-                /* @__PURE__ */ jsx12(Button, { children: "Reset" }),
-                /* @__PURE__ */ jsx12("span", { className: "k-wizard-pager", children: "Step 1 of 2" })
-              ] }),
-              /* @__PURE__ */ jsxs3("span", { className: "k-wizard-buttons-right", children: [
-                /* @__PURE__ */ jsx12(Button, { children: "Previous" }),
-                /* @__PURE__ */ jsx12(Button, { themeColor: "primary", children: "Next" })
-              ] })
-            ] })
-          ] }) })
-        ] })
+      /* @__PURE__ */ jsxs9("div", { className: "wrapper", children: [
+        /* @__PURE__ */ jsx22("p", { children: "Short content; Big height set" }),
+        /* @__PURE__ */ jsx22(WizardVertical, { contentPosition: "left", style: { height: "280px" } })
       ] })
     ] })
   ] })