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

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

@@ -130,11 +130,75 @@ var States = {
   "readonly": "readonly"
 };
 
-// src/icon/font-icon.spec.tsx
+// src/stepper/stepper.spec.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var FONTICON_CLASSNAME = `k-icon k-font-icon`;
+var STEPPER_CLASSNAME = "k-stepper";
 var states = [];
-var options = {
+var options = {};
+var defaultProps = {};
+var Stepper = (props) => {
+  const {
+    style: style2,
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "nav",
+    {
+      ...other,
+      style: style2,
+      className: classNames(
+        props.className,
+        STEPPER_CLASSNAME
+      ),
+      children: props.children
+    }
+  );
+};
+Stepper.options = options;
+Stepper.states = states;
+Stepper.className = STEPPER_CLASSNAME;
+Stepper.defaultProps = defaultProps;
+
+// src/stepper/step-list.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var STEPLIST_CLASSNAME = "k-step-list";
+var states2 = [];
+var options2 = {};
+var defaultProps2 = {
+  orientation: "horizontal"
+};
+var StepList = (props) => {
+  const {
+    style: style2,
+    orientation = defaultProps2.orientation,
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "ol",
+    {
+      ...other,
+      style: style2,
+      className: classNames(
+        props.className,
+        STEPLIST_CLASSNAME,
+        {
+          [`${STEPLIST_CLASSNAME}-${orientation}`]: orientation
+        }
+      ),
+      children: props.children
+    }
+  );
+};
+StepList.options = options2;
+StepList.states = states2;
+StepList.className = STEPLIST_CLASSNAME;
+StepList.defaultProps = defaultProps2;
+
+// src/icon/font-icon.spec.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var FONTICON_CLASSNAME = `k-icon k-font-icon`;
+var states3 = [];
+var options3 = {
   size: [Size.xsmall, Size.small, Size.medium, Size.large, Size.xlarge, Size.xxlarge, Size.xxxlarge],
   themeColor: [
     ThemeColor.base,
@@ -149,7 +213,7 @@ var options = {
     ThemeColor.dark
   ]
 };
-var defaultProps = {};
+var defaultProps3 = {};
 var FontIcon = (props) => {
   const {
     size,
@@ -160,9 +224,9 @@ var FontIcon = (props) => {
     ...other
   } = props;
   if (!icon) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, {});
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "span",
     {
       ...other,
@@ -183,17 +247,17 @@ var FontIcon = (props) => {
     }
   );
 };
-FontIcon.states = states;
-FontIcon.options = options;
+FontIcon.states = states3;
+FontIcon.options = options3;
 FontIcon.className = FONTICON_CLASSNAME;
-FontIcon.defaultProps = defaultProps;
+FontIcon.defaultProps = defaultProps3;
 var font_icon_spec_default = FontIcon;
 
 // src/icon/svg-icon.spec.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var SVGICON_CLASSNAME = `k-icon k-svg-icon`;
-var states2 = [];
-var options2 = {
+var states4 = [];
+var options4 = {
   size: [Size.xsmall, Size.small, Size.medium, Size.large, Size.xlarge, Size.xxlarge, Size.xxxlarge],
   themeColor: [
     ThemeColor.base,
@@ -208,7 +272,7 @@ var options2 = {
     ThemeColor.dark
   ]
 };
-var defaultProps2 = {
+var defaultProps4 = {
   viewBox: "0 0 24 24"
 };
 var SvgIcon = (props) => {
@@ -217,15 +281,15 @@ var SvgIcon = (props) => {
     themeColor,
     rotate,
     flip,
-    viewBox = defaultProps2.viewBox,
+    viewBox = defaultProps4.viewBox,
     icon,
     ...other
   } = props;
   if (!icon) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, {});
   }
   if (icon === "none") {
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       "span",
       {
         ...other,
@@ -238,7 +302,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_runtime4.jsx)(
     "span",
     {
       ...other,
@@ -256,7 +320,7 @@ var SvgIcon = (props) => {
           "k-flip-v": flip === "v" || flip === "both"
         }
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         "svg",
         {
           "aria-hidden": true,
@@ -270,10 +334,10 @@ var SvgIcon = (props) => {
     }
   );
 };
-SvgIcon.states = states2;
-SvgIcon.options = options2;
+SvgIcon.states = states4;
+SvgIcon.options = options4;
 SvgIcon.className = SVGICON_CLASSNAME;
-SvgIcon.defaultProps = defaultProps2;
+SvgIcon.defaultProps = defaultProps4;
 var svg_icon_spec_default = SvgIcon;
 
 // ../../node_modules/@progress/kendo-svg-icons/dist/index.es.js
@@ -4308,13 +4372,13 @@ var chartChoroplethIcon = {
 };
 
 // src/icon/icon.spec.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var snakeToCamel = (str) => str.toLowerCase().replace(
   /([-_][a-z])/g,
   (group) => group.toUpperCase().replace("-", "").replace("_", "")
 );
-var states3 = [];
-var options3 = {
+var states5 = [];
+var options5 = {
   size: [Size.xsmall, Size.small, Size.medium, Size.large, Size.xlarge, Size.xxlarge, Size.xxxlarge],
   themeColor: [
     ThemeColor.base,
@@ -4329,7 +4393,7 @@ var options3 = {
     ThemeColor.dark
   ]
 };
-var defaultProps3 = {
+var defaultProps5 = {
   viewBox: "0 0 24 24",
   type: "svg"
 };
@@ -4338,151 +4402,113 @@ var Icon = (props) => {
     size,
     themeColor,
     icon,
-    type = defaultProps3.type,
+    type = defaultProps5.type,
     rotate,
     flip,
-    viewBox = defaultProps3.viewBox,
+    viewBox = defaultProps5.viewBox,
     ...other
   } = props;
   if (!icon) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.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_runtime5.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_runtime5.jsx)(import_jsx_runtime5.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_runtime5.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_runtime5.jsx)(font_icon_spec_default, { ...other, icon, size, themeColor, rotate, flip });
 };
-Icon.states = states3;
-Icon.options = options3;
-Icon.defaultProps = defaultProps3;
+Icon.states = states5;
+Icon.options = options5;
+Icon.defaultProps = defaultProps5;
 
-// src/button/button.spec.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var BUTTON_CLASSNAME = `k-button`;
-var states4 = [
+// src/stepper/step.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var STEP_CLASSNAME = "k-step";
+var states6 = [
+  States.disabled,
   States.hover,
   States.focus,
-  States.active,
-  States.selected,
-  States.disabled
+  States.invalid,
+  States.valid
 ];
-var options4 = {
-  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],
-  themeColor: [
-    ThemeColor.base,
-    ThemeColor.primary,
-    ThemeColor.secondary,
-    ThemeColor.tertiary,
-    ThemeColor.success,
-    ThemeColor.warning,
-    ThemeColor.error,
-    ThemeColor.info,
-    ThemeColor.light,
-    ThemeColor.dark,
-    ThemeColor.inverse
-  ]
-};
-var defaultProps4 = {
-  size: Size.medium,
-  rounded: Roundness.medium,
-  fillMode: FillMode.solid,
-  themeColor: ThemeColor.base,
-  showArrow: false,
-  arrowIconName: "caret-alt-down"
-};
-var Button = (props) => {
+var options6 = {};
+var defaultProps6 = {};
+var Step = (props) => {
   const {
-    size = defaultProps4.size,
-    rounded = defaultProps4.rounded,
-    fillMode = defaultProps4.fillMode,
-    themeColor = defaultProps4.themeColor,
+    style: style2,
+    disabled,
     hover,
     focus,
-    active,
-    selected,
-    disabled,
-    icon,
+    invalid,
+    valid,
+    optional,
+    first,
+    done,
+    current,
+    last,
+    label,
     text,
-    iconClassName,
-    showArrow = defaultProps4.showArrow,
-    arrowIconName = defaultProps4.arrowIconName,
+    icon,
+    stepContent,
     ...other
   } = props;
-  const hasIcon = icon !== void 0;
-  const hasChildren = props.children !== void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-    "button",
+  const iconName = invalid ? "warning-circle" : "check-circle";
+  const renderValidationIcon = Boolean(valid || invalid);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "li",
     {
       ...other,
+      style: style2,
       className: classNames(
         props.className,
-        BUTTON_CLASSNAME,
-        optionClassNames(BUTTON_CLASSNAME, {
-          size,
-          rounded,
-          fillMode,
-          themeColor
-        }),
-        stateClassNames(BUTTON_CLASSNAME, {
-          hover,
-          focus,
-          active,
-          disabled,
-          selected
-        }),
+        STEP_CLASSNAME,
         {
-          ["k-icon-button"]: !text && !hasChildren && hasIcon
-        }
+          [`${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: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime4.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 }),
-          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 }) })
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("a", { href: "#", className: "k-step-link", children: [
+          text && !icon && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "k-step-indicator", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "k-step-indicator-text", children: text }) }),
+          icon && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "k-step-indicator", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { className: "k-step-indicator-icon", icon }) }),
+          optional && !label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "k-step-label", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "k-step-label-optional", children: "(Optional)" }) }),
+          label && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "k-step-label", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "k-step-text", children: label }),
+            renderValidationIcon && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { icon: iconName }),
+            optional && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "k-step-label-optional", children: "(Optional)" })
+          ] })
+        ] }),
+        stepContent && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "k-step-content", style: { height: "140px" }, children: stepContent })
       ]
     }
   );
 };
-Button.states = states4;
-Button.options = options4;
-Button.className = BUTTON_CLASSNAME;
-Button.defaultProps = defaultProps4;
-
-// src/button/templates/icon-button.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-
-// src/button/templates/icon-text-button.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-
-// src/button/templates/text-button.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+Step.options = options6;
+Step.states = states6;
+Step.className = STEP_CLASSNAME;
+Step.defaultProps = defaultProps6;
 
 // src/progressbar/progressbar.spec.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var PROGRESSBAR_CLASSNAME = `k-progressbar`;
-var states5 = [
+var states7 = [
   States.disabled,
   States.indeterminate
 ];
-var options5 = {};
-var defaultProps5 = {
+var options7 = {};
+var defaultProps7 = {
   indeterminate: false,
   label: true,
   labelPosition: "start",
@@ -4494,16 +4520,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 = defaultProps7.indeterminate,
+    label = defaultProps7.label,
+    labelPosition = defaultProps7.labelPosition,
+    orientation = defaultProps7.orientation,
+    reverse = defaultProps7.reverse,
+    value = defaultProps7.value,
     width,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {
       ...other,
@@ -4521,21 +4547,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_runtime7.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_runtime7.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_runtime7.jsx)("div", { className: "k-progressbar-value k-selected", children: /* @__PURE__ */ (0, import_jsx_runtime7.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_runtime7.jsxs)("span", { className: "k-progress-status", children: [
           props.value,
           "%"
         ] }) }) })
@@ -4543,22 +4569,22 @@ var ProgressBar = (props) => {
     }
   );
 };
-ProgressBar.states = states5;
-ProgressBar.options = options5;
+ProgressBar.states = states7;
+ProgressBar.options = options7;
 ProgressBar.className = PROGRESSBAR_CLASSNAME;
-ProgressBar.defaultProps = defaultProps5;
+ProgressBar.defaultProps = defaultProps7;
 var progressbar_spec_default = ProgressBar;
 
 // src/progressbar/chunk-progressbar.spec.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var CHUNKPROGRESSBAR_CLASSNAME = `k-chunk-progressbar`;
 var isSelected = (progress, index) => index <= progress - 1 ? true : false;
-var states6 = [
+var states8 = [
   States.disabled,
   States.indeterminate
 ];
-var options6 = {};
-var defaultProps6 = {
+var options8 = {};
+var defaultProps8 = {
   chunkCount: 5,
   orientation: "horizontal",
   progress: 0
@@ -4566,14 +4592,14 @@ var defaultProps6 = {
 var ChunkProgressBar = (props) => {
   const {
     disabled,
-    chunkCount = defaultProps6.chunkCount,
+    chunkCount = defaultProps8.chunkCount,
     indeterminate,
-    orientation = defaultProps6.orientation,
-    progress = defaultProps6.progress,
+    orientation = defaultProps8.orientation,
+    progress = defaultProps8.progress,
     reverse,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "div",
     {
       ...other,
@@ -4590,8 +4616,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_runtime8.jsx)("ul", { className: "k-progressbar-chunks k-reset", children: [...Array(chunkCount)].map(
+        (_el, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("li", { className: classNames(
           "k-progressbar-chunk",
           {
             "k-first": i === 0,
@@ -4603,20 +4629,152 @@ var ChunkProgressBar = (props) => {
     }
   );
 };
-ChunkProgressBar.states = states6;
-ChunkProgressBar.options = options6;
+ChunkProgressBar.states = states8;
+ChunkProgressBar.options = options8;
 ChunkProgressBar.className = CHUNKPROGRESSBAR_CLASSNAME;
-ChunkProgressBar.defaultProps = defaultProps6;
+ChunkProgressBar.defaultProps = defaultProps8;
 
 // 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_runtime9 = require("react/jsx-runtime");
+var ProgressBarNormal = (props) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(progressbar_spec_default, { ...props });
 
 // src/progressbar/templates/chunk-progressbar-normal.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+
+// src/stepper/templates/stepper-normal.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
 
-// src/stepper/tests/stepper-vertical.tsx
+// src/stepper/templates/stepper-vertical.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
+var StepperVertical = ({ gridTemplateRows = "repeat(3, 1fr)", ...other }) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  Stepper,
+  {
+    style: { display: "grid", gridTemplateRows },
+    children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(StepList, { orientation: "vertical", style: { gridRowStart: "1", gridRowEnd: "-1" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Step, { first: true, done: true, icon: "check", style: { maxHeight: "33.333%" } }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Step, { current: true, focus: true, text: "2", style: { maxHeight: "33.333%" } }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Step, { last: true, optional: true, text: "3", style: { maxHeight: "33.333%" } })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ProgressBarNormal, { orientation: "vertical", reverse: true, label: false, value: "50" })
+    ] }),
+    ...other
+  }
+);
+
+// src/button/button.spec.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var BUTTON_CLASSNAME = `k-button`;
+var states9 = [
+  States.hover,
+  States.focus,
+  States.active,
+  States.selected,
+  States.disabled
+];
+var options9 = {
+  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],
+  themeColor: [
+    ThemeColor.base,
+    ThemeColor.primary,
+    ThemeColor.secondary,
+    ThemeColor.tertiary,
+    ThemeColor.success,
+    ThemeColor.warning,
+    ThemeColor.error,
+    ThemeColor.info,
+    ThemeColor.light,
+    ThemeColor.dark,
+    ThemeColor.inverse
+  ]
+};
+var defaultProps9 = {
+  size: Size.medium,
+  rounded: Roundness.medium,
+  fillMode: FillMode.solid,
+  themeColor: ThemeColor.base,
+  showArrow: false,
+  arrowIconName: "caret-alt-down"
+};
+var Button = (props) => {
+  const {
+    size = defaultProps9.size,
+    rounded = defaultProps9.rounded,
+    fillMode = defaultProps9.fillMode,
+    themeColor = defaultProps9.themeColor,
+    hover,
+    focus,
+    active,
+    selected,
+    disabled,
+    icon,
+    text,
+    iconClassName,
+    showArrow = defaultProps9.showArrow,
+    arrowIconName = defaultProps9.arrowIconName,
+    ...other
+  } = props;
+  const hasIcon = icon !== void 0;
+  const hasChildren = props.children !== void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    "button",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        BUTTON_CLASSNAME,
+        optionClassNames(BUTTON_CLASSNAME, {
+          size,
+          rounded,
+          fillMode,
+          themeColor
+        }),
+        stateClassNames(BUTTON_CLASSNAME, {
+          hover,
+          focus,
+          active,
+          disabled,
+          selected
+        }),
+        {
+          ["k-icon-button"]: !text && !hasChildren && hasIcon
+        }
+      ),
+      children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          Icon,
+          {
+            className: classNames(iconClassName, "k-button-icon"),
+            icon
+          }
+        ),
+        text ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+          text && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "k-button-text", children: text }),
+          props.children
+        ] }) : props.children && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "k-button-text", children: props.children }),
+        showArrow && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "k-menu-button-arrow k-button-arrow", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { icon: arrowIconName }) })
+      ]
+    }
+  );
+};
+Button.states = states9;
+Button.options = options9;
+Button.className = BUTTON_CLASSNAME;
+Button.defaultProps = defaultProps9;
+
+// src/button/templates/icon-button.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+
+// src/button/templates/icon-text-button.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+
+// src/button/templates/text-button.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+
+// src/stepper/tests/stepper-vertical.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var style = `
     #test-area hr {
         width: 100%;
@@ -4629,93 +4787,66 @@ var style = `
         top: 17px;
     }
 `;
-var stepper_vertical_default = () => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("style", { children: style }),
-  /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { id: "test-area", className: "k-d-grid k-grid-cols-4 k-bg-gray-100", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: "Indicator" }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: "Indicator + label" }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: "Icon" }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: "Label" }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("nav", { className: "k-stepper k-widget", style: { display: "grid", gridTemplateRows: "repeat(3, 1fr)" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("ol", { className: "k-step-list k-step-list-vertical", style: { gridRowStart: "1", gridRowEnd: "-1" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { className: "k-step k-step-first k-step-done", style: { maxHeight: "33.333%" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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)(Icon, { className: "k-step-indicator-icon", icon: "check" }) }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { className: "k-step k-step-current k-focus", style: { maxHeight: "33.333%" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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.jsx)("li", { className: "k-step k-step-last", style: { maxHeight: "33.333%" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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.jsx)(ProgressBarNormal, { orientation: "vertical", reverse: true, label: false, value: "40" })
-    ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("nav", { className: "k-stepper k-widget", style: { display: "grid", gridTemplateRows: "repeat(3, 1fr)" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("ol", { className: "k-step-list k-step-list-vertical", style: { gridRowStart: "1", gridRowEnd: "-1" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { className: "k-step k-step-first k-step-done k-step-success", style: { maxHeight: "33.333%" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("a", { href: "#", className: "k-step-link", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-indicator", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-indicator-text", children: "1" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "k-step-label", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-text", children: "Account Info with too long text" }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { icon: "check-circle" })
-          ] })
-        ] }) }),
-        /* @__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: "warning-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)" })
-          ] })
-        ] }) })
+var stepper_vertical_default = () => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("style", { children: style }),
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { id: "test-area", className: "k-d-grid k-grid-cols-4 k-bg-gray-100", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: "Indicator" }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: "Indicator + label" }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: "Icon" }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: "Label" }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(StepperVertical, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(StepperVertical, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(StepList, { orientation: "vertical", style: { gridRowStart: "1", gridRowEnd: "-1" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Step, { first: true, done: true, valid: true, text: "1", label: "Account Info with too long label", style: { maxHeight: "33.333%" } }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Step, { current: true, focus: true, invalid: true, text: "2", label: "Personal Info", style: { maxHeight: "33.333%" } }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Step, { last: true, optional: true, text: "3", label: "Payment Details", style: { maxHeight: "33.333%" } })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ProgressBarNormal, { orientation: "vertical", reverse: true, label: false, value: "40" })
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ProgressBarNormal, { orientation: "vertical", reverse: true, label: false, value: "40" })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("nav", { className: "k-stepper k-widget", style: { display: "grid", gridTemplateRows: "repeat(3, 1fr)" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("ol", { className: "k-step-list k-step-list-vertical", style: { gridRowStart: "1", gridRowEnd: "-1" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { className: "k-step k-step-first k-step-done", style: { maxHeight: "33.333%" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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)(Icon, { className: "k-step-indicator-icon", icon: "lock" }) }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { className: "k-step k-step-current k-focus", style: { maxHeight: "33.333%" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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)(Icon, { className: "k-step-indicator-icon", icon: "user" }) }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { className: "k-step k-step-last", style: { maxHeight: "33.333%" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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)(Icon, { className: "k-step-indicator-icon", icon: "track-changes" }) }) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(StepperVertical, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(StepList, { orientation: "vertical", style: { gridRowStart: "1", gridRowEnd: "-1" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Step, { first: true, done: true, icon: "lock", style: { maxHeight: "33.333%" } }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Step, { current: true, focus: true, icon: "user", style: { maxHeight: "33.333%" } }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Step, { last: true, optional: true, icon: "track-changes", style: { maxHeight: "33.333%" } })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ProgressBarNormal, { orientation: "vertical", reverse: true, label: false, value: "40" })
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ProgressBarNormal, { orientation: "vertical", reverse: true, label: false, value: "40" })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("nav", { className: "k-stepper k-widget", style: { display: "grid", gridTemplateRows: "repeat(3, 1fr)" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("ol", { className: "k-step-list k-step-list-vertical", style: { gridRowStart: "1", gridRowEnd: "-1" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { className: "k-step k-step-first k-step-done", style: { maxHeight: "33.333%" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("a", { href: "#", className: "k-step-link", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-label", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-text", children: "Account Info" }) }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { className: "k-step k-step-current k-focus", style: { maxHeight: "33.333%" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("a", { href: "#", className: "k-step-link", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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)("li", { className: "k-step k-step-last", style: { maxHeight: "33.333%" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("a", { href: "#", className: "k-step-link", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-label", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-text", children: "Payment Details" }) }) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(StepperVertical, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(StepList, { orientation: "vertical", style: { gridRowStart: "1", gridRowEnd: "-1" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Step, { first: true, done: true, label: "Account Info", style: { maxHeight: "33.333%" } }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Step, { current: true, focus: true, label: "Personal Info", style: { maxHeight: "33.333%" } }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Step, { last: true, optional: true, label: "Payment Details", style: { maxHeight: "33.333%" } })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ProgressBarNormal, { orientation: "vertical", reverse: true, label: false, value: "40" })
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ProgressBarNormal, { orientation: "vertical", reverse: true, label: false, value: "40" })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("hr", {}),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "col-4", children: "Content Between Steps" }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("section", { className: "col-4", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("nav", { className: "k-stepper k-widget", style: { display: "grid", gridTemplateRows: "repeat(3, 1fr)" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("ol", { className: "k-step-list k-step-list-vertical", style: { gridRowStart: "1", gridRowEnd: "-1" }, 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.jsx)("span", { className: "k-step-label", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-text", children: "Account Info" }) })
-        ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("li", { className: "k-step k-step-current k-focus", style: { height: "auto" }, 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.jsx)("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.jsxs)("div", { className: "k-step-content", style: { height: "140px" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "content", children: "This is the first step of your wizard with inline content." }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "navigation", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button, { children: "Close" }),
-              " ",
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: "Step 2 of 3" }),
-              " ",
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button, { children: "Next" })
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("hr", {}),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "col-4", children: "Content Between Steps" }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("section", { className: "col-4", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(StepperVertical, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(StepList, { orientation: "vertical", style: { gridRowStart: "1", gridRowEnd: "-1" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Step, { done: true, first: true, text: "1", label: "Account Info", style: { maxHeight: "33.333%" } }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          Step,
+          {
+            current: true,
+            focus: true,
+            text: "2",
+            label: "Personal Info",
+            style: { height: "auto" },
+            stepContent: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "content", children: "This is the first step of your wizard with inline content." }),
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "navigation", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Button, { children: "Close" }),
+                " ",
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: "Step 2 of 3" }),
+                " ",
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Button, { children: "Next" })
+              ] })
             ] })
-          ] })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { className: "k-step k-step-last", 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.jsx)("span", { className: "k-step-label", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-step-text", children: "Payment Details" }) })
-        ] }) })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Step, { last: true, text: "3", label: "Payment Details", style: { maxHeight: "33.333%" } })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ProgressBarNormal, { orientation: "vertical", reverse: true, label: false, value: "30" })
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ProgressBarNormal, { orientation: "vertical", reverse: true, label: false, value: "30" })
     ] }) })
   ] })
 ] });