@progress/kendo-themes-html 6.3.1-dev.0 → 6.4.0-dev.0

package/dist/breadcrumb/tests/breadcrumb-rtl.js

@@ -669,219 +669,415 @@
   Textbox.className = TEXTBOX_CLASSNAME;
   Textbox.defaultProps = defaultProps6;
 
-  // src/breadcrumb/tests/breadcrumb-rtl.tsx
+  // src/breadcrumb/breadcrumb.spec.tsx
   var import_jsx_runtime13 = __require("react/jsx-runtime");
+  var BREADCRUMB_CLASSNAME = `k-breadcrumb`;
+  var states10 = [
+    States.focus
+  ];
+  var options9 = {};
+  var defaultProps7 = {
+    collapsing: "auto"
+  };
+  var Breadcrumb = (props) => {
+    const _a = props, {
+      collapsing = defaultProps7.collapsing,
+      focus
+    } = _a, other = __objRest(_a, [
+      "collapsing",
+      "focus"
+    ]);
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      "nav",
+      __spreadProps(__spreadValues({}, other), {
+        className: classNames(
+          props.className,
+          BREADCRUMB_CLASSNAME,
+          stateClassNames(BREADCRUMB_CLASSNAME, {
+            focus
+          }),
+          {
+            "k-breadcrumb-wrap": collapsing === "wrap"
+          }
+        ),
+        children: props.children
+      })
+    );
+  };
+  Breadcrumb.states = states10;
+  Breadcrumb.options = options9;
+  Breadcrumb.className = BREADCRUMB_CLASSNAME;
+  Breadcrumb.defaultProps = defaultProps7;
+
+  // src/breadcrumb/breadcrumb-root-item-container.tsx
+  var import_jsx_runtime14 = __require("react/jsx-runtime");
+  var BREADCRUMBROOTITEMCONTAINER_CLASSNAME = `k-breadcrumb-root-item-container`;
+  var BreadcrumbRootItemContainer = (props) => {
+    const other = __objRest(props, []);
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      "ol",
+      __spreadProps(__spreadValues({}, other), {
+        className: classNames(
+          props.className,
+          BREADCRUMBROOTITEMCONTAINER_CLASSNAME
+        ),
+        children: props.children
+      })
+    );
+  };
+
+  // src/breadcrumb/breadcrumb-input-container.tsx
+  var import_jsx_runtime15 = __require("react/jsx-runtime");
+  var BREADCRUMBINPUTCONTAINER_CLASSNAME = `k-breadcrumb-input-container`;
+  var BreadcrumbInputContainer = (props) => {
+    const other = __objRest(props, []);
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      "div",
+      __spreadProps(__spreadValues({}, other), {
+        className: classNames(
+          props.className,
+          BREADCRUMBINPUTCONTAINER_CLASSNAME
+        ),
+        children: props.children
+      })
+    );
+  };
+
+  // src/breadcrumb/breadcrumb-container.tsx
+  var import_jsx_runtime16 = __require("react/jsx-runtime");
+  var BREADCRUMBCONTAINER_CLASSNAME = `k-breadcrumb-container`;
+  var defaultProps8 = {
+    collapsing: "auto"
+  };
+  var BreadcrumbContainer = (props) => {
+    const _a = props, {
+      collapsing = defaultProps8.collapsing
+    } = _a, other = __objRest(_a, [
+      "collapsing"
+    ]);
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      "ol",
+      __spreadProps(__spreadValues({}, other), {
+        className: classNames(
+          props.className,
+          BREADCRUMBCONTAINER_CLASSNAME,
+          {
+            "!k-flex-wrap": collapsing === "wrap",
+            "k-flex-none": collapsing === "none"
+          }
+        ),
+        children: props.children
+      })
+    );
+  };
+
+  // src/breadcrumb/breadcrumb-item.tsx
+  var import_jsx_runtime17 = __require("react/jsx-runtime");
+  var BREADCRUMBITEM_CLASSNAME = `k-breadcrumb-item`;
+  var BreadcrumbItem = (props) => {
+    const _a = props, {
+      root: root2,
+      last
+    } = _a, other = __objRest(_a, [
+      "root",
+      "last"
+    ]);
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      "li",
+      __spreadProps(__spreadValues({}, other), {
+        className: classNames(
+          props.className,
+          BREADCRUMBITEM_CLASSNAME,
+          {
+            "k-breadcrumb-root-item": root2,
+            "k-breadcrumb-last-item": last
+          }
+        ),
+        children: props.children
+      })
+    );
+  };
+
+  // src/breadcrumb/breadcrumb-link.tsx
+  var import_jsx_runtime18 = __require("react/jsx-runtime");
+  var BREADCRUMBLINK_CLASSNAME = ``;
+  var states11 = [
+    States.hover,
+    States.focus,
+    States.disabled
+  ];
+  var BreadcrumbLink = (props) => {
+    const _a = props, {
+      root: root2,
+      icon,
+      icontext,
+      hover,
+      focus,
+      disabled
+    } = _a, other = __objRest(_a, [
+      "root",
+      "icon",
+      "icontext",
+      "hover",
+      "focus",
+      "disabled"
+    ]);
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      "a",
+      __spreadProps(__spreadValues({
+        href: "#"
+      }, other), {
+        className: classNames(
+          props.className,
+          stateClassNames(BREADCRUMBLINK_CLASSNAME, {
+            hover,
+            focus,
+            disabled
+          }),
+          {
+            "k-breadcrumb-link": !root2,
+            "k-breadcrumb-root-link": root2,
+            "k-breadcrumb-icon-link": icon,
+            "k-breadcrumb-icontext-link": icontext
+          }
+        ),
+        children: props.children
+      })
+    );
+  };
+
+  // src/breadcrumb/breadcrumb-item-text.tsx
+  var import_jsx_runtime19 = __require("react/jsx-runtime");
+  var BREADCRUMBITEMTEXT_CLASSNAME = `k-breadcrumb-item-text`;
+  var BreadcrumbItemText = (props) => {
+    const _a = props, {
+      text
+    } = _a, other = __objRest(_a, [
+      "text"
+    ]);
+    const textOrChildren = text ? text : props.children;
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      "span",
+      __spreadProps(__spreadValues({}, other), {
+        className: classNames(
+          props.className,
+          BREADCRUMBITEMTEXT_CLASSNAME
+        ),
+        children: textOrChildren
+      })
+    );
+  };
+
+  // src/breadcrumb/tests/breadcrumb-rtl.tsx
+  var import_jsx_runtime20 = __require("react/jsx-runtime");
   var root = import_client.default.createRoot(
     document.getElementById("app")
   );
   root.render(
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { id: "test-area", className: "k-d-grid k-grid-cols-2 k-rtl", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "k-colspan-all k-col-span-full", children: "Wrapping" }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { width: "400px" }, className: "k-widget k-breadcrumb k-breadcrumb-wrap", dir: "rtl", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("ol", { className: "k-breadcrumb-root-item-container", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("li", { className: "k-flex-none k-breadcrumb-root-item k-breadcrumb-item", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "k-cursor-pointer k-flex-none k-breadcrumb-root-link k-breadcrumb-icontext-link", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { name: "home" }),
-          "Start item"
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { id: "test-area", className: "k-d-grid k-grid-cols-2 k-rtl", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "k-colspan-all k-col-span-full", children: "Wrapping" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Breadcrumb, { collapsing: "wrap", style: { width: "400px" }, dir: "rtl", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbRootItemContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbItem, { root: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(BreadcrumbLink, { root: true, icontext: true, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { name: "home" }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbItemText, { text: "Start item" })
         ] }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("ol", { className: "k-breadcrumb-container k-flex-wrap", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("li", { className: "k-flex-none k-breadcrumb-item", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "k-cursor-pointer k-flex-none k-breadcrumb-link k-disabled k-breadcrumb-icontext-link", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { name: "clock" }),
-              "First item"
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(BreadcrumbContainer, { collapsing: "wrap", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(BreadcrumbItem, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(BreadcrumbLink, { disabled: true, icontext: true, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { name: "clock" }),
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbItemText, { text: "First item" })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("li", { className: "k-flex-none k-breadcrumb-item", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "k-cursor-pointer k-flex-none k-breadcrumb-link", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("img", { className: "k-image", src: "/packages/html/assets/avatar.jpg", width: "20", height: "20" }),
-              "Second item"
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(BreadcrumbItem, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(BreadcrumbLink, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("img", { className: "k-image", src: "/packages/html/assets/avatar.jpg", width: "20", height: "20" }),
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbItemText, { text: "Second item" })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("li", { className: "k-flex-none k-breadcrumb-item", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "k-cursor-pointer k-flex-none k-breadcrumb-link", children: [
-              " ",
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "test" }),
-              " Third item "
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(BreadcrumbItem, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(BreadcrumbLink, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "test" }),
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbItemText, { text: "Third item" })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("li", { className: "k-flex-none k-breadcrumb-item", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "k-cursor-pointer k-flex-none k-breadcrumb-link k-breadcrumb-icon-link", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { name: "clock" }) })
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(BreadcrumbItem, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbLink, { icon: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { name: "clock" }) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("li", { className: "k-flex-none k-breadcrumb-last-item k-breadcrumb-item", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "k-cursor-pointer k-flex-none k-breadcrumb-link k-disabled", children: "Fifth item" })
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(BreadcrumbItem, { last: true, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbLink, { disabled: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbItemText, { text: "Fifth item" }) })
           ] })
         ] })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { width: "400px" }, className: "k-widget k-breadcrumb k-breadcrumb-wrap", dir: "rtl", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("ol", { className: "k-breadcrumb-root-item-container", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("li", { className: "k-flex-none k-breadcrumb-root-item k-breadcrumb-item", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "k-cursor-pointer k-flex-none k-breadcrumb-root-link", children: "Start item" }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("ol", { className: "k-breadcrumb-container k-flex-wrap", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("li", { className: "k-flex-none k-breadcrumb-item", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "k-cursor-pointer k-flex-none k-breadcrumb-link k-disabled k-breadcrumb-icontext-link", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { name: "clock" }),
-              "First item"
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Breadcrumb, { collapsing: "wrap", style: { width: "400px" }, dir: "rtl", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbRootItemContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbItem, { root: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbLink, { root: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbItemText, { text: "Start item" }) }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(BreadcrumbContainer, { collapsing: "wrap", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(BreadcrumbItem, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(BreadcrumbLink, { disabled: true, icontext: true, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { name: "clock" }),
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbItemText, { text: "First item" })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("li", { className: "k-flex-none k-breadcrumb-item", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "k-cursor-pointer k-flex-none k-breadcrumb-link", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("img", { className: "k-image", src: "/packages/html/assets/avatar.jpg", width: "20", height: "20" }),
-              "Second item"
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(BreadcrumbItem, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(BreadcrumbLink, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("img", { className: "k-image", src: "/packages/html/assets/avatar.jpg", width: "20", height: "20" }),
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbItemText, { text: "Second item" })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("li", { className: "k-flex-none k-breadcrumb-item", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "k-cursor-pointer k-flex-none k-breadcrumb-link", children: [
-              " ",
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "test" }),
-              " Third item "
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(BreadcrumbItem, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(BreadcrumbLink, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "test" }),
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbItemText, { text: "Third item" })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("li", { className: "k-flex-none k-breadcrumb-item", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "k-cursor-pointer k-flex-none k-breadcrumb-link k-breadcrumb-icon-link", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { name: "clock" }) })
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(BreadcrumbItem, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbLink, { icon: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { name: "clock" }) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("li", { className: "k-flex-none k-breadcrumb-last-item k-breadcrumb-item", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "k-cursor-pointer k-flex-none k-breadcrumb-link k-disabled", children: "Fifth item" })
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(BreadcrumbItem, { last: true, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbLink, { disabled: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbItemText, { text: "Fifth item" }) })
           ] })
         ] })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { width: "400px" }, className: "k-widget k-breadcrumb k-breadcrumb-wrap", dir: "rtl", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("ol", { className: "k-breadcrumb-root-item-container", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("li", { className: "k-flex-none k-breadcrumb-root-item k-breadcrumb-item", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "k-cursor-pointer k-flex-none k-breadcrumb-root-link k-breadcrumb-icon-link", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { name: "home" }) }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("ol", { className: "k-breadcrumb-container k-flex-wrap", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("li", { className: "k-flex-none k-breadcrumb-item", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "k-cursor-pointer k-flex-none k-breadcrumb-link k-disabled k-breadcrumb-icontext-link", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { name: "clock" }),
-              "First item"
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Breadcrumb, { collapsing: "wrap", style: { width: "400px" }, dir: "rtl", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbRootItemContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbItem, { root: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbLink, { root: true, icon: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { name: "home" }) }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(BreadcrumbContainer, { collapsing: "wrap", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(BreadcrumbItem, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(BreadcrumbLink, { disabled: true, icontext: true, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { name: "clock" }),
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbItemText, { text: "First item" })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("li", { className: "k-flex-none k-breadcrumb-item", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "k-cursor-pointer k-flex-none k-breadcrumb-link", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("img", { className: "k-image", src: "/packages/html/assets/avatar.jpg", width: "20", height: "20" }),
-              "Second item"
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(BreadcrumbItem, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(BreadcrumbLink, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("img", { className: "k-image", src: "/packages/html/assets/avatar.jpg", width: "20", height: "20" }),
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbItemText, { text: "Second item" })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("li", { className: "k-flex-none k-breadcrumb-item", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "k-cursor-pointer k-flex-none k-breadcrumb-link", children: [
-              " ",
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "test" }),
-              " Third item "
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(BreadcrumbItem, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(BreadcrumbLink, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "test" }),
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbItemText, { text: "Third item" })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("li", { className: "k-flex-none k-breadcrumb-item", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "k-cursor-pointer k-flex-none k-breadcrumb-link k-breadcrumb-icon-link", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { name: "clock" }) })
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(BreadcrumbItem, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbLink, { icon: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { name: "clock" }) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("li", { className: "k-flex-none k-breadcrumb-last-item k-breadcrumb-item", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "k-cursor-pointer k-flex-none k-breadcrumb-link k-disabled", children: "Fifth item" })
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(BreadcrumbItem, { last: true, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbLink, { disabled: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbItemText, { text: "Fifth item" }) })
           ] })
         ] })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "k-colspan-all k-col-span-full", children: "Navigation Mode" }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("nav", { id: "breadcrumbs", className: "k-widget k-breadcrumb", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("ol", { className: "k-breadcrumb-container", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("li", { className: "k-breadcrumb-item k-breadcrumb-root-item", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("a", { href: "#", className: "k-breadcrumb-root-link k-breadcrumb-icon-link", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { name: "home" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" })
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "k-colspan-all k-col-span-full", children: "Navigation Mode" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Breadcrumb, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(BreadcrumbContainer, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(BreadcrumbItem, { root: true, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbLink, { root: true, icon: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { name: "home" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("li", { className: "k-breadcrumb-item", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("a", { className: "k-breadcrumb-link", href: "#", children: "First item" }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" })
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(BreadcrumbItem, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbItemText, { text: "First item" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("li", { className: "k-breadcrumb-item", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("a", { className: "k-breadcrumb-link", href: "#", children: "Second item" }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" })
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(BreadcrumbItem, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbItemText, { text: "Second item" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("li", { className: "k-breadcrumb-item k-breadcrumb-last-item", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("a", { className: "k-breadcrumb-link k-disabled", href: "#", children: "Third item" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbItem, { last: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbLink, { disabled: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbItemText, { text: "Third item" }) }) })
       ] }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("nav", { id: "breadcrumbs", className: "k-widget k-breadcrumb", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("ol", { className: "k-breadcrumb-container", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("li", { className: "k-breadcrumb-item k-breadcrumb-root-item", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("a", { href: "#", className: "k-breadcrumb-root-link k-breadcrumb-icon-link k-focus", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { name: "home" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" })
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Breadcrumb, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(BreadcrumbContainer, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(BreadcrumbItem, { root: true, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbLink, { root: true, icon: true, focus: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { name: "home" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("li", { className: "k-breadcrumb-item", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("a", { className: "k-breadcrumb-link k-focus", href: "#", children: "First item" }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" })
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(BreadcrumbItem, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbLink, { focus: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbItemText, { text: "First item" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("li", { className: "k-breadcrumb-item", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("a", { className: "k-breadcrumb-link", href: "#", children: "Second item" }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" })
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(BreadcrumbItem, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbItemText, { text: "Second item" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("li", { className: "k-breadcrumb-item k-breadcrumb-last-item", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("a", { className: "k-breadcrumb-link k-disabled", href: "#", children: "Third item" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbItem, { last: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbLink, { disabled: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbItemText, { text: "Third item" }) }) })
       ] }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("nav", { id: "breadcrumbs", className: "k-widget k-breadcrumb", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("ol", { className: "k-breadcrumb-container", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("li", { className: "k-breadcrumb-item k-breadcrumb-root-item", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("a", { href: "#", className: "k-breadcrumb-root-link k-breadcrumb-icon-link k-hover", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { name: "home" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" })
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Breadcrumb, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(BreadcrumbContainer, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(BreadcrumbItem, { root: true, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbLink, { root: true, icon: true, hover: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { name: "home" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("li", { className: "k-breadcrumb-item", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("a", { className: "k-breadcrumb-link k-hover", href: "#", children: "First item" }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" })
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(BreadcrumbItem, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbLink, { hover: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbItemText, { text: "First item" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("li", { className: "k-breadcrumb-item", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("a", { className: "k-breadcrumb-link", href: "#", children: "Second item" }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" })
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(BreadcrumbItem, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbItemText, { text: "Second item" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("li", { className: "k-breadcrumb-item k-breadcrumb-last-item", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("a", { className: "k-breadcrumb-link k-disabled", href: "#", children: "Third item" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbItem, { last: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbLink, { disabled: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbItemText, { text: "Third item" }) }) })
       ] }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("nav", { id: "breadcrumbs", className: "k-widget k-breadcrumb", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("ol", { className: "k-breadcrumb-container", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("li", { className: "k-breadcrumb-item k-breadcrumb-root-item", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("a", { href: "#", className: "k-breadcrumb-root-link k-breadcrumb-icon-link k-hover", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { name: "home" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" })
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Breadcrumb, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(BreadcrumbContainer, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(BreadcrumbItem, { root: true, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbLink, { root: true, icon: true, hover: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { name: "home" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("li", { className: "k-breadcrumb-item", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("a", { className: "k-breadcrumb-link k-breadcrumb-icontext-link", href: "#", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { name: "cloud" }),
-            "First item"
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(BreadcrumbItem, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(BreadcrumbLink, { icontext: true, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { name: "cloud" }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbItemText, { text: "First item" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" })
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("li", { className: "k-breadcrumb-item", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("a", { className: "k-breadcrumb-link k-breadcrumb-icon-link", href: "#", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { name: "photo-camera" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" })
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(BreadcrumbItem, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbLink, { icon: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { name: "photo-camera" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("li", { className: "k-breadcrumb-item k-breadcrumb-last-item", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("a", { className: "k-breadcrumb-link k-disabled", href: "#", children: "Third item" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbItem, { last: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbLink, { disabled: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbItemText, { text: "Third item" }) }) })
       ] }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "k-colspan-all k-col-span-full", children: "Edit Mode" }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("nav", { id: "breadcrumbs", className: "k-widget k-breadcrumb k-focus", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("ol", { className: "k-breadcrumb-container", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("li", { className: "k-breadcrumb-item k-breadcrumb-root-item", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("a", { href: "#", className: "k-breadcrumb-root-link", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { name: "home" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" })
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "k-colspan-all k-col-span-full", children: "Edit Mode" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Breadcrumb, { focus: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(BreadcrumbContainer, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(BreadcrumbItem, { root: true, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbLink, { root: true, icon: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { name: "home" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("li", { className: "k-breadcrumb-item", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("a", { className: "k-breadcrumb-link", href: "#", children: "First item" }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" })
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(BreadcrumbItem, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbItemText, { text: "First item" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("li", { className: "k-breadcrumb-item", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("a", { className: "k-breadcrumb-link", href: "#", children: "Second item" }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" })
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(BreadcrumbItem, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbItemText, { text: "Second item" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("li", { className: "k-breadcrumb-item k-breadcrumb-last-item", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("a", { className: "k-breadcrumb-link k-disabled", href: "#", children: "Third item" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbItem, { last: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbLink, { disabled: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbItemText, { text: "Third item" }) }) })
       ] }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("nav", { id: "breadcrumbs", className: "k-widget k-breadcrumb", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "k-breadcrumb-input-container", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Textbox, { showClearButton: false, value: "First item/Second item/Breadcrumb Pattern/Third item" }) }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "k-colspan-all k-col-span-full", children: "Overflow" }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("nav", { id: "breadcrumbs", className: "k-widget k-breadcrumb", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("ol", { className: "k-breadcrumb-container", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("li", { className: "k-breadcrumb-item k-breadcrumb-root-item", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("a", { href: "#", className: "k-breadcrumb-root-link k-breadcrumb-icon-link", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { name: "home" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon k-breadcrumb-overflow-icon", name: "arrow-chevron-right" }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon k-breadcrumb-overflow-icon", name: "arrow-chevron-right" })
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Breadcrumb, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbInputContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Textbox, { showClearButton: false, value: "First item/Second item/Breadcrumb Pattern/Third item" }) }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "k-colspan-all k-col-span-full", children: "Overflow" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Breadcrumb, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(BreadcrumbContainer, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(BreadcrumbItem, { root: true, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbLink, { root: true, icon: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { name: "home" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon k-breadcrumb-overflow-icon", name: "arrow-chevron-right" }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon k-breadcrumb-overflow-icon", name: "arrow-chevron-right" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("li", { className: "k-breadcrumb-item", hidden: true, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("a", { className: "k-breadcrumb-link", href: "#", children: "First item" }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" })
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(BreadcrumbItem, { hidden: true, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbItemText, { text: "First item" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("li", { className: "k-breadcrumb-item", hidden: true, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("a", { className: "k-breadcrumb-link", href: "#", children: "Second item" }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" })
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(BreadcrumbItem, { hidden: true, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbItemText, { text: "Second item" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", name: "arrow-chevron-left" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("li", { className: "k-breadcrumb-item k-breadcrumb-last-item", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("a", { className: "k-breadcrumb-link k-disabled", href: "#", children: "Breadcrumb item " }) })
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbItem, { last: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbLink, { disabled: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BreadcrumbItemText, { text: "Breadcrumb item " }) }) })
       ] }) }) })
     ] }) })
   );