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

package/dist/esm/stepper/tests/stepper-horizontal-rtl.js

@@ -98,11 +98,75 @@ var States = {
   "readonly": "readonly"
 };
 
+// src/stepper/stepper.spec.tsx
+import { jsx } from "react/jsx-runtime";
+var STEPPER_CLASSNAME = "k-stepper";
+var states = [];
+var options = {};
+var defaultProps = {};
+var Stepper = (props) => {
+  const {
+    style: style2,
+    ...other
+  } = props;
+  return /* @__PURE__ */ 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
+import { jsx as jsx2 } from "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__ */ jsx2(
+    "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
-import { Fragment, jsx } from "react/jsx-runtime";
+import { Fragment, jsx as jsx3 } from "react/jsx-runtime";
 var FONTICON_CLASSNAME = `k-icon k-font-icon`;
-var states = [];
-var options = {
+var states3 = [];
+var options3 = {
   size: [Size.xsmall, Size.small, Size.medium, Size.large, Size.xlarge, Size.xxlarge, Size.xxxlarge],
   themeColor: [
     ThemeColor.base,
@@ -117,7 +181,7 @@ var options = {
     ThemeColor.dark
   ]
 };
-var defaultProps = {};
+var defaultProps3 = {};
 var FontIcon = (props) => {
   const {
     size,
@@ -128,9 +192,9 @@ var FontIcon = (props) => {
     ...other
   } = props;
   if (!icon) {
-    return /* @__PURE__ */ jsx(Fragment, {});
+    return /* @__PURE__ */ jsx3(Fragment, {});
   }
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx3(
     "span",
     {
       ...other,
@@ -151,17 +215,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
-import { Fragment as Fragment2, jsx as jsx2 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx4 } from "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,
@@ -176,7 +240,7 @@ var options2 = {
     ThemeColor.dark
   ]
 };
-var defaultProps2 = {
+var defaultProps4 = {
   viewBox: "0 0 24 24"
 };
 var SvgIcon = (props) => {
@@ -185,15 +249,15 @@ var SvgIcon = (props) => {
     themeColor,
     rotate,
     flip,
-    viewBox = defaultProps2.viewBox,
+    viewBox = defaultProps4.viewBox,
     icon,
     ...other
   } = props;
   if (!icon) {
-    return /* @__PURE__ */ jsx2(Fragment2, {});
+    return /* @__PURE__ */ jsx4(Fragment2, {});
   }
   if (icon === "none") {
-    /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsx4(
       "span",
       {
         ...other,
@@ -206,7 +270,7 @@ var SvgIcon = (props) => {
     );
   }
   const name = typeof icon === "object" && icon.name && icon.name;
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx4(
     "span",
     {
       ...other,
@@ -224,7 +288,7 @@ var SvgIcon = (props) => {
           "k-flip-v": flip === "v" || flip === "both"
         }
       ),
-      children: /* @__PURE__ */ jsx2(
+      children: /* @__PURE__ */ jsx4(
         "svg",
         {
           "aria-hidden": true,
@@ -238,10 +302,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
@@ -4276,13 +4340,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 jsx5 } from "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,
@@ -4297,7 +4361,7 @@ var options3 = {
     ThemeColor.dark
   ]
 };
-var defaultProps3 = {
+var defaultProps5 = {
   viewBox: "0 0 24 24",
   type: "svg"
 };
@@ -4306,40 +4370,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__ */ jsx3(Fragment3, {});
+    return /* @__PURE__ */ jsx5(Fragment3, {});
   }
   if (type === "svg") {
     if (icon === "none") {
-      return /* @__PURE__ */ jsx3(svg_icon_spec_default, { ...other, icon, size });
+      return /* @__PURE__ */ jsx5(svg_icon_spec_default, { ...other, icon, size });
     }
     const iconSVG = snakeToCamel(`${icon}-icon`);
     if (!index_es_exports[iconSVG]) {
-      return /* @__PURE__ */ jsx3(Fragment3, {});
+      return /* @__PURE__ */ jsx5(Fragment3, {});
     }
-    return /* @__PURE__ */ jsx3(svg_icon_spec_default, { ...other, icon: index_es_exports[iconSVG], size, themeColor, rotate, flip, viewBox });
+    return /* @__PURE__ */ jsx5(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__ */ jsx5(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/stepper/step.tsx
+import { jsx as jsx6, jsxs } from "react/jsx-runtime";
+var STEP_CLASSNAME = "k-step";
+var states6 = [
+  States.disabled,
+  States.hover,
+  States.focus,
+  States.invalid,
+  States.valid
+];
+var options6 = {};
+var defaultProps6 = {};
+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__ */ jsxs(
+    "li",
+    {
+      ...other,
+      style: style2,
+      className: classNames(
+        props.className,
+        STEP_CLASSNAME,
+        {
+          [`${STEP_CLASSNAME}-done`]: done,
+          [`${STEP_CLASSNAME}-first`]: first,
+          [`${STEP_CLASSNAME}-current`]: current,
+          [`${STEP_CLASSNAME}-last`]: last,
+          [`${STEP_CLASSNAME}-optional`]: optional,
+          [`${STEP_CLASSNAME}-success`]: valid,
+          [`${STEP_CLASSNAME}-error`]: invalid
+        },
+        stateClassNames(STEP_CLASSNAME, { hover, focus, disabled })
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("a", { href: "#", className: "k-step-link", children: [
+          text && !icon && /* @__PURE__ */ jsx6("span", { className: "k-step-indicator", children: /* @__PURE__ */ jsx6("span", { className: "k-step-indicator-text", children: text }) }),
+          icon && /* @__PURE__ */ jsx6("span", { className: "k-step-indicator", children: /* @__PURE__ */ jsx6(Icon, { className: "k-step-indicator-icon", icon }) }),
+          optional && !label && /* @__PURE__ */ jsx6("span", { className: "k-step-label", children: /* @__PURE__ */ jsx6("span", { className: "k-step-label-optional", children: "(Optional)" }) }),
+          label && /* @__PURE__ */ jsxs("span", { className: "k-step-label", children: [
+            /* @__PURE__ */ jsx6("span", { className: "k-step-text", children: label }),
+            renderValidationIcon && /* @__PURE__ */ jsx6(Icon, { icon: iconName }),
+            optional && /* @__PURE__ */ jsx6("span", { className: "k-step-label-optional", children: "(Optional)" })
+          ] })
+        ] }),
+        stepContent && /* @__PURE__ */ jsx6("div", { className: "k-step-content", style: { height: "140px" }, children: stepContent })
+      ]
+    }
+  );
+};
+Step.options = options6;
+Step.states = states6;
+Step.className = STEP_CLASSNAME;
+Step.defaultProps = defaultProps6;
 
 // src/progressbar/progressbar.spec.tsx
-import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
 var PROGRESSBAR_CLASSNAME = `k-progressbar`;
-var states4 = [
+var states7 = [
   States.disabled,
   States.indeterminate
 ];
-var options4 = {};
-var defaultProps4 = {
+var options7 = {};
+var defaultProps7 = {
   indeterminate: false,
   label: true,
   labelPosition: "start",
@@ -4351,16 +4488,16 @@ var ProgressBar = (props) => {
   const {
     disabled,
     height,
-    indeterminate = defaultProps4.indeterminate,
-    label = defaultProps4.label,
-    labelPosition = defaultProps4.labelPosition,
-    orientation = defaultProps4.orientation,
-    reverse = defaultProps4.reverse,
-    value = defaultProps4.value,
+    indeterminate = defaultProps7.indeterminate,
+    label = defaultProps7.label,
+    labelPosition = defaultProps7.labelPosition,
+    orientation = defaultProps7.orientation,
+    reverse = defaultProps7.reverse,
+    value = defaultProps7.value,
     width,
     ...other
   } = props;
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     "div",
     {
       ...other,
@@ -4378,21 +4515,21 @@ var ProgressBar = (props) => {
       ),
       style: orientation === "horizontal" ? { "--kendo-progressbar-value": value, height } : { "--kendo-progressbar-value": value, width },
       children: [
-        /* @__PURE__ */ jsx4("span", { className: classNames(
+        /* @__PURE__ */ jsx7("span", { className: classNames(
           "k-progress-status-wrap",
           {
             [`k-progress-${labelPosition}`]: labelPosition && !indeterminate
           }
-        ), children: label && /* @__PURE__ */ jsxs("span", { className: "k-progress-status", children: [
+        ), children: label && /* @__PURE__ */ jsxs2("span", { className: "k-progress-status", children: [
           value,
           "%"
         ] }) }),
-        !indeterminate && /* @__PURE__ */ jsx4("div", { className: "k-progressbar-value k-selected", children: /* @__PURE__ */ jsx4("span", { className: classNames(
+        !indeterminate && /* @__PURE__ */ jsx7("div", { className: "k-progressbar-value k-selected", children: /* @__PURE__ */ jsx7("span", { className: classNames(
           "k-progress-status-wrap",
           {
             [`k-progress-${labelPosition}`]: labelPosition
           }
-        ), children: label && /* @__PURE__ */ jsxs("span", { className: "k-progress-status", children: [
+        ), children: label && /* @__PURE__ */ jsxs2("span", { className: "k-progress-status", children: [
           props.value,
           "%"
         ] }) }) })
@@ -4400,22 +4537,22 @@ var ProgressBar = (props) => {
     }
   );
 };
-ProgressBar.states = states4;
-ProgressBar.options = options4;
+ProgressBar.states = states7;
+ProgressBar.options = options7;
 ProgressBar.className = PROGRESSBAR_CLASSNAME;
-ProgressBar.defaultProps = defaultProps4;
+ProgressBar.defaultProps = defaultProps7;
 var progressbar_spec_default = ProgressBar;
 
 // src/progressbar/chunk-progressbar.spec.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var CHUNKPROGRESSBAR_CLASSNAME = `k-chunk-progressbar`;
 var isSelected = (progress, index) => index <= progress - 1 ? true : false;
-var states5 = [
+var states8 = [
   States.disabled,
   States.indeterminate
 ];
-var options5 = {};
-var defaultProps5 = {
+var options8 = {};
+var defaultProps8 = {
   chunkCount: 5,
   orientation: "horizontal",
   progress: 0
@@ -4423,14 +4560,14 @@ var defaultProps5 = {
 var ChunkProgressBar = (props) => {
   const {
     disabled,
-    chunkCount = defaultProps5.chunkCount,
+    chunkCount = defaultProps8.chunkCount,
     indeterminate,
-    orientation = defaultProps5.orientation,
-    progress = defaultProps5.progress,
+    orientation = defaultProps8.orientation,
+    progress = defaultProps8.progress,
     reverse,
     ...other
   } = props;
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx8(
     "div",
     {
       ...other,
@@ -4447,8 +4584,8 @@ var ChunkProgressBar = (props) => {
           [`${PROGRESSBAR_CLASSNAME}-reverse`]: reverse
         }
       ),
-      children: /* @__PURE__ */ jsx5("ul", { className: "k-progressbar-chunks k-reset", children: [...Array(chunkCount)].map(
-        (_el, i) => /* @__PURE__ */ jsx5("li", { className: classNames(
+      children: /* @__PURE__ */ jsx8("ul", { className: "k-progressbar-chunks k-reset", children: [...Array(chunkCount)].map(
+        (_el, i) => /* @__PURE__ */ jsx8("li", { className: classNames(
           "k-progressbar-chunk",
           {
             "k-first": i === 0,
@@ -4460,20 +4597,41 @@ var ChunkProgressBar = (props) => {
     }
   );
 };
-ChunkProgressBar.states = states5;
-ChunkProgressBar.options = options5;
+ChunkProgressBar.states = states8;
+ChunkProgressBar.options = options8;
 ChunkProgressBar.className = CHUNKPROGRESSBAR_CLASSNAME;
-ChunkProgressBar.defaultProps = defaultProps5;
+ChunkProgressBar.defaultProps = defaultProps8;
 
 // src/progressbar/templates/progressbar-normal.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
-var ProgressBarNormal = (props) => /* @__PURE__ */ jsx6(progressbar_spec_default, { ...props });
+import { jsx as jsx9 } from "react/jsx-runtime";
+var ProgressBarNormal = (props) => /* @__PURE__ */ jsx9(progressbar_spec_default, { ...props });
 
 // src/progressbar/templates/chunk-progressbar-normal.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
+
+// src/stepper/templates/stepper-normal.tsx
+import { Fragment as Fragment4, jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
+var StepperNormal = ({ gridTemplateColumns = "repeat(6, 1fr)", ...other }) => /* @__PURE__ */ jsx11(
+  Stepper,
+  {
+    style: { display: "grid", gridTemplateColumns },
+    children: /* @__PURE__ */ jsxs3(Fragment4, { children: [
+      /* @__PURE__ */ jsxs3(StepList, { style: { gridColumnStart: "1", gridColumnEnd: "-1" }, children: [
+        /* @__PURE__ */ jsx11(Step, { first: true, done: true, icon: "check", style: { maxWidth: "33.333%" } }),
+        /* @__PURE__ */ jsx11(Step, { current: true, focus: true, text: "2", style: { maxWidth: "33.333%" } }),
+        /* @__PURE__ */ jsx11(Step, { last: true, optional: true, text: "3", style: { maxWidth: "33.333%" } })
+      ] }),
+      /* @__PURE__ */ jsx11(ProgressBarNormal, { label: false, value: "50" })
+    ] }),
+    ...other
+  }
+);
+
+// src/stepper/templates/stepper-vertical.tsx
+import { Fragment as Fragment5, jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
 
 // src/stepper/tests/stepper-horizontal-rtl.tsx
-import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
 var style = `
     #test-area {
         grid-template-columns: 100px 500px;
@@ -4500,93 +4658,47 @@ var style = `
         grid-column-end: 6;
     }
 `;
-var stepper_horizontal_rtl_default = () => /* @__PURE__ */ jsxs2(Fragment4, { children: [
-  /* @__PURE__ */ jsx8("style", { children: style }),
-  /* @__PURE__ */ jsxs2("div", { id: "test-area", className: "k-d-grid k-bg-gray-100", children: [
-    /* @__PURE__ */ jsx8("span", { className: "col-2", children: "RTL" }),
-    /* @__PURE__ */ jsx8("span", { children: "Indicator" }),
-    /* @__PURE__ */ jsx8("section", { children: /* @__PURE__ */ jsxs2("nav", { dir: "rtl", className: "k-stepper k-widget", style: { display: "grid", gridTemplateColumns: "repeat(6, 1fr)" }, children: [
-      /* @__PURE__ */ jsxs2("ol", { className: "k-step-list k-step-list-horizontal", style: { gridColumnStart: "1", gridColumnEnd: "-1" }, children: [
-        /* @__PURE__ */ jsx8("li", { className: "k-step k-step-first k-step-done", style: { maxWidth: "33.333%" }, children: /* @__PURE__ */ jsx8("a", { href: "#", className: "k-step-link", children: /* @__PURE__ */ jsx8("span", { className: "k-step-indicator", children: /* @__PURE__ */ jsx8(Icon, { className: "k-step-indicator-icon", icon: "check" }) }) }) }),
-        /* @__PURE__ */ jsx8("li", { className: "k-step k-step-current k-focus", style: { maxWidth: "33.333%" }, children: /* @__PURE__ */ jsx8("a", { href: "#", className: "k-step-link", children: /* @__PURE__ */ jsx8("span", { className: "k-step-indicator", children: /* @__PURE__ */ jsx8("span", { className: "k-step-indicator-text", children: "2" }) }) }) }),
-        /* @__PURE__ */ jsx8("li", { className: "k-step k-step-last k-step-optional", style: { maxWidth: "33.333%" }, children: /* @__PURE__ */ jsxs2("a", { href: "#", className: "k-step-link", children: [
-          /* @__PURE__ */ jsx8("span", { className: "k-step-indicator", children: /* @__PURE__ */ jsx8("span", { className: "k-step-indicator-text", children: "3" }) }),
-          /* @__PURE__ */ jsx8("span", { className: "k-step-label", children: /* @__PURE__ */ jsx8("span", { className: "k-step-label-optional", children: "(Optional)" }) })
-        ] }) })
+var stepper_horizontal_rtl_default = () => /* @__PURE__ */ jsxs5(Fragment6, { children: [
+  /* @__PURE__ */ jsx13("style", { children: style }),
+  /* @__PURE__ */ jsxs5("div", { id: "test-area", className: "k-d-grid k-bg-gray-100", children: [
+    /* @__PURE__ */ jsx13("span", { className: "col-2", children: "RTL" }),
+    /* @__PURE__ */ jsx13("span", { children: "Indicator" }),
+    /* @__PURE__ */ jsx13("section", { children: /* @__PURE__ */ jsx13(StepperNormal, { dir: "rtl" }) }),
+    /* @__PURE__ */ jsx13("span", { children: "^ + label" }),
+    /* @__PURE__ */ jsx13("section", { children: /* @__PURE__ */ jsxs5(StepperNormal, { dir: "rtl", children: [
+      /* @__PURE__ */ jsxs5(StepList, { style: { gridColumnStart: "1", gridColumnEnd: "-1" }, children: [
+        /* @__PURE__ */ jsx13(Step, { first: true, done: true, valid: true, text: "1", label: "Account Info with too long label", style: { maxWidth: "33.333%" } }),
+        /* @__PURE__ */ jsx13(Step, { current: true, focus: true, invalid: true, text: "2", label: "Personal Info", style: { maxWidth: "33.333%" } }),
+        /* @__PURE__ */ jsx13(Step, { last: true, optional: true, text: "3", label: "Payment Details", style: { maxWidth: "33.333%" } })
       ] }),
-      /* @__PURE__ */ jsx8(ProgressBarNormal, { label: false, value: "50" })
+      /* @__PURE__ */ jsx13(ProgressBarNormal, { label: false, value: "50" })
     ] }) }),
-    /* @__PURE__ */ jsx8("span", { children: "^ + label" }),
-    /* @__PURE__ */ jsx8("section", { children: /* @__PURE__ */ jsxs2("nav", { dir: "rtl", className: "k-stepper k-widget", style: { display: "grid", gridTemplateColumns: "repeat(6, 1fr)" }, children: [
-      /* @__PURE__ */ jsxs2("ol", { className: "k-step-list k-step-list-horizontal", style: { gridColumnStart: "1", gridColumnEnd: "-1" }, children: [
-        /* @__PURE__ */ jsx8("li", { className: "k-step k-step-first k-step-done k-step-success", style: { maxWidth: "33.333%" }, children: /* @__PURE__ */ jsxs2("a", { href: "#", className: "k-step-link", children: [
-          /* @__PURE__ */ jsx8("span", { className: "k-step-indicator", children: /* @__PURE__ */ jsx8("span", { className: "k-step-indicator-text", children: "1" }) }),
-          /* @__PURE__ */ jsxs2("span", { className: "k-step-label", children: [
-            /* @__PURE__ */ jsx8("span", { className: "k-step-text", children: "Account Info with too long label" }),
-            /* @__PURE__ */ jsx8(Icon, { icon: "check-circle" })
-          ] })
-        ] }) }),
-        /* @__PURE__ */ jsx8("li", { className: "k-step k-step-current k-focus k-step-error", style: { maxWidth: "33.333%" }, children: /* @__PURE__ */ jsxs2("a", { href: "#", className: "k-step-link", children: [
-          /* @__PURE__ */ jsx8("span", { className: "k-step-indicator", children: /* @__PURE__ */ jsx8("span", { className: "k-step-indicator-text", children: "2" }) }),
-          /* @__PURE__ */ jsxs2("span", { className: "k-step-label", children: [
-            /* @__PURE__ */ jsx8("span", { className: "k-step-text", children: "Personal Info" }),
-            /* @__PURE__ */ jsx8(Icon, { className: "k-validation-icon", icon: "warning-circle" })
-          ] })
-        ] }) }),
-        /* @__PURE__ */ jsx8("li", { className: "k-step k-step-last k-step-optional", style: { maxWidth: "33.333%" }, children: /* @__PURE__ */ jsxs2("a", { href: "#", className: "k-step-link", children: [
-          /* @__PURE__ */ jsx8("span", { className: "k-step-indicator", children: /* @__PURE__ */ jsx8("span", { className: "k-step-indicator-text", children: "3" }) }),
-          /* @__PURE__ */ jsxs2("span", { className: "k-step-label", children: [
-            /* @__PURE__ */ jsx8("span", { className: "k-step-text", children: "Payment Details" }),
-            /* @__PURE__ */ jsx8("span", { className: "k-step-label-optional", children: "(Optional)" })
-          ] })
-        ] }) })
-      ] }),
-      /* @__PURE__ */ jsx8(ProgressBarNormal, { label: false, value: "50" })
-    ] }) }),
-    /* @__PURE__ */ jsx8("span", { children: "Icons" }),
-    /* @__PURE__ */ jsx8("section", { children: /* @__PURE__ */ jsxs2("nav", { dir: "rtl", className: "k-stepper k-widget", style: { display: "grid", gridTemplateColumns: "repeat(6, 1fr)" }, children: [
-      /* @__PURE__ */ jsxs2("ol", { className: "k-step-list k-step-list-horizontal", style: { gridColumnStart: "1", gridColumnEnd: "-1" }, children: [
-        /* @__PURE__ */ jsx8("li", { className: "k-step k-step-first k-step-done", style: { maxWidth: "33.333%" }, children: /* @__PURE__ */ jsx8("a", { href: "#", className: "k-step-link", children: /* @__PURE__ */ jsx8("span", { className: "k-step-indicator", children: /* @__PURE__ */ jsx8(Icon, { className: "k-step-indicator-icon", icon: "lock" }) }) }) }),
-        /* @__PURE__ */ jsx8("li", { className: "k-step k-step-current k-focus", style: { maxWidth: "33.333%" }, children: /* @__PURE__ */ jsx8("a", { href: "#", className: "k-step-link", children: /* @__PURE__ */ jsx8("span", { className: "k-step-indicator", children: /* @__PURE__ */ jsx8(Icon, { className: "k-step-indicator-icon", icon: "user" }) }) }) }),
-        /* @__PURE__ */ jsx8("li", { className: "k-step k-step-last k-step-optional", style: { maxWidth: "33.333%" }, children: /* @__PURE__ */ jsxs2("a", { href: "#", className: "k-step-link", children: [
-          /* @__PURE__ */ jsx8("span", { className: "k-step-indicator", children: /* @__PURE__ */ jsx8(Icon, { className: "k-step-indicator-icon", icon: "track-changes" }) }),
-          /* @__PURE__ */ jsx8("span", { className: "k-step-label", children: /* @__PURE__ */ jsx8("span", { className: "k-step-label-optional", children: "(Optional)" }) })
-        ] }) })
+    /* @__PURE__ */ jsx13("span", { children: "Icons" }),
+    /* @__PURE__ */ jsx13("section", { children: /* @__PURE__ */ jsxs5(StepperNormal, { dir: "rtl", children: [
+      /* @__PURE__ */ jsxs5(StepList, { style: { gridColumnStart: "1", gridColumnEnd: "-1" }, children: [
+        /* @__PURE__ */ jsx13(Step, { first: true, done: true, icon: "lock", style: { maxWidth: "33.333%" } }),
+        /* @__PURE__ */ jsx13(Step, { current: true, focus: true, icon: "user", style: { maxWidth: "33.333%" } }),
+        /* @__PURE__ */ jsx13(Step, { last: true, optional: true, icon: "track-changes", style: { maxWidth: "33.333%" } })
       ] }),
-      /* @__PURE__ */ jsx8(ProgressBarNormal, { label: false, value: "50" })
+      /* @__PURE__ */ jsx13(ProgressBarNormal, { label: false, value: "50" })
     ] }) }),
-    /* @__PURE__ */ jsx8("span", { children: "^ + label" }),
-    /* @__PURE__ */ jsx8("section", { children: /* @__PURE__ */ jsxs2("nav", { dir: "rtl", className: "k-stepper k-widget", style: { display: "grid", gridTemplateColumns: "repeat(6, 1fr)" }, children: [
-      /* @__PURE__ */ jsxs2("ol", { className: "k-step-list k-step-list-horizontal", style: { gridColumnStart: "1", gridColumnEnd: "-1" }, children: [
-        /* @__PURE__ */ jsx8("li", { className: "k-step k-step-first k-step-done", style: { maxWidth: "33.333%" }, children: /* @__PURE__ */ jsxs2("a", { href: "#", className: "k-step-link", children: [
-          /* @__PURE__ */ jsx8("span", { className: "k-step-indicator", children: /* @__PURE__ */ jsx8(Icon, { className: "k-step-indicator-icon", icon: "lock" }) }),
-          /* @__PURE__ */ jsx8("span", { className: "k-step-label", children: /* @__PURE__ */ jsx8("span", { className: "k-step-text", children: "Account Info" }) })
-        ] }) }),
-        /* @__PURE__ */ jsx8("li", { className: "k-step k-step-current k-focus", style: { maxWidth: "33.333%" }, children: /* @__PURE__ */ jsxs2("a", { href: "#", className: "k-step-link", children: [
-          /* @__PURE__ */ jsx8("span", { className: "k-step-indicator", children: /* @__PURE__ */ jsx8(Icon, { className: "k-step-indicator-icon", icon: "user" }) }),
-          /* @__PURE__ */ jsx8("span", { className: "k-step-label", children: /* @__PURE__ */ jsx8("span", { className: "k-step-text", children: "Personal Info" }) })
-        ] }) }),
-        /* @__PURE__ */ jsx8("li", { className: "k-step k-step-last k-step-optional", style: { maxWidth: "33.333%" }, children: /* @__PURE__ */ jsxs2("a", { href: "#", className: "k-step-link", children: [
-          /* @__PURE__ */ jsx8("span", { className: "k-step-indicator", children: /* @__PURE__ */ jsx8(Icon, { className: "k-step-indicator-icon", icon: "track-changes" }) }),
-          /* @__PURE__ */ jsxs2("span", { className: "k-step-label", children: [
-            /* @__PURE__ */ jsx8("span", { className: "k-step-text", children: "Payment Details" }),
-            /* @__PURE__ */ jsx8("span", { className: "k-step-label-optional", children: "(Optional)" })
-          ] })
-        ] }) })
+    /* @__PURE__ */ jsx13("span", { children: "^ + label" }),
+    /* @__PURE__ */ jsx13("section", { children: /* @__PURE__ */ jsxs5(StepperNormal, { dir: "rtl", children: [
+      /* @__PURE__ */ jsxs5(StepList, { style: { gridColumnStart: "1", gridColumnEnd: "-1" }, children: [
+        /* @__PURE__ */ jsx13(Step, { first: true, done: true, icon: "lock", label: "Account Info", style: { maxWidth: "33.333%" } }),
+        /* @__PURE__ */ jsx13(Step, { current: true, focus: true, icon: "user", label: "Personal Info", style: { maxWidth: "33.333%" } }),
+        /* @__PURE__ */ jsx13(Step, { last: true, optional: true, icon: "track-changes", label: "Payment Details", style: { maxWidth: "33.333%" } })
       ] }),
-      /* @__PURE__ */ jsx8(ProgressBarNormal, { label: false, value: "50" })
+      /* @__PURE__ */ jsx13(ProgressBarNormal, { label: false, value: "50" })
     ] }) }),
-    /* @__PURE__ */ jsx8("span", { children: "Labels" }),
-    /* @__PURE__ */ jsx8("section", { children: /* @__PURE__ */ jsxs2("nav", { dir: "rtl", className: "k-stepper k-widget", style: { display: "grid", gridTemplateColumns: "repeat(6, 1fr)" }, children: [
-      /* @__PURE__ */ jsxs2("ol", { className: "k-step-list k-step-list-horizontal", style: { gridColumnStart: "1", gridColumnEnd: "-1" }, children: [
-        /* @__PURE__ */ jsx8("li", { className: "k-step k-step-first k-step-done", style: { maxWidth: "33.333%" }, children: /* @__PURE__ */ jsx8("a", { href: "#", className: "k-step-link", children: /* @__PURE__ */ jsx8("span", { className: "k-step-label", children: /* @__PURE__ */ jsx8("span", { className: "k-step-text", children: "Account Info" }) }) }) }),
-        /* @__PURE__ */ jsx8("li", { className: "k-step k-step-current k-focus", style: { maxWidth: "33.333%" }, children: /* @__PURE__ */ jsx8("a", { href: "#", className: "k-step-link", children: /* @__PURE__ */ jsx8("span", { className: "k-step-label", children: /* @__PURE__ */ jsx8("span", { className: "k-step-text", children: "Personal Info" }) }) }) }),
-        /* @__PURE__ */ jsx8("li", { className: "k-step k-step-last k-step-optional", style: { maxWidth: "33.333%" }, children: /* @__PURE__ */ jsx8("a", { href: "#", className: "k-step-link", children: /* @__PURE__ */ jsxs2("span", { className: "k-step-label", children: [
-          /* @__PURE__ */ jsx8("span", { className: "k-step-text", children: "Payment Details" }),
-          /* @__PURE__ */ jsx8("span", { className: "k-step-label-optional", children: "(Optional)" })
-        ] }) }) })
+    /* @__PURE__ */ jsx13("span", { children: "Labels" }),
+    /* @__PURE__ */ jsx13("section", { children: /* @__PURE__ */ jsxs5(StepperNormal, { dir: "rtl", children: [
+      /* @__PURE__ */ jsxs5(StepList, { style: { gridColumnStart: "1", gridColumnEnd: "-1" }, children: [
+        /* @__PURE__ */ jsx13(Step, { first: true, done: true, label: "Account Info", style: { maxWidth: "33.333%" } }),
+        /* @__PURE__ */ jsx13(Step, { current: true, focus: true, label: "Personal Info", style: { maxWidth: "33.333%" } }),
+        /* @__PURE__ */ jsx13(Step, { last: true, optional: true, label: "Payment Details", style: { maxWidth: "33.333%" } })
       ] }),
-      /* @__PURE__ */ jsx8(ProgressBarNormal, { label: false, value: "50" })
+      /* @__PURE__ */ jsx13(ProgressBarNormal, { label: false, value: "50" })
     ] }) })
   ] })
 ] });