@progress/kendo-themes-html 5.5.1-dev.2 → 5.6.1-dev.1

package/dist/breadcrumb/tests/breadcrumb.js

@@ -20,7 +20,10 @@
     }
     return to;
   };
-  var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+  var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+    isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+    mod
+  ));
 
   // src/breadcrumb/tests/breadcrumb.tsx
   var import_react = __toESM(__require("react"));
@@ -37,7 +40,9 @@
         result[key] = arg[key];
       }) : result[arg] = true;
     };
-    const addKeys = (list) => list.filter((arg) => arg !== true && Boolean(arg)).map((arg) => Array.isArray(arg) ? addKeys(arg) : addLeafKeys(arg));
+    const addKeys = (list) => list.filter((arg) => arg !== true && Boolean(arg)).map(
+      (arg) => Array.isArray(arg) ? addKeys(arg) : addLeafKeys(arg)
+    );
     addKeys(args);
     return Object.keys(result).map((key) => result[key] && key || null).filter((el) => el !== null).join(" ");
   };
@@ -75,9 +80,13 @@
         name
       } = this.props;
       return /* @__PURE__ */ React.createElement(React.Fragment, null, name && /* @__PURE__ */ React.createElement("span", {
-        className: classNames(className, "k-icon", {
-          [`k-i-${name}`]: name
-        }),
+        className: classNames(
+          className,
+          "k-icon",
+          {
+            [`k-i-${name}`]: name
+          }
+        ),
         style
       }));
     }
@@ -105,18 +114,22 @@
         disabled
       } = this.props;
       return /* @__PURE__ */ React2.createElement("span", {
-        className: classNames(className, "k-input", {
-          [`k-input-${kendoThemeMaps.sizeMap[size] || size}`]: size,
-          [`k-input-${fillMode}`]: fillMode,
-          [`k-rounded-${kendoThemeMaps.roundedMap[rounded] || rounded}`]: rounded,
-          "k-hover": hover,
-          "k-focus": focus,
-          "k-valid": valid,
-          "k-invalid": invalid,
-          "k-required": required,
-          "k-disabled": disabled,
-          "k-loading": loading
-        })
+        className: classNames(
+          className,
+          "k-input",
+          {
+            [`k-input-${kendoThemeMaps.sizeMap[size] || size}`]: size,
+            [`k-input-${fillMode}`]: fillMode,
+            [`k-rounded-${kendoThemeMaps.roundedMap[rounded] || rounded}`]: rounded,
+            "k-hover": hover,
+            "k-focus": focus,
+            "k-valid": valid,
+            "k-invalid": invalid,
+            "k-required": required,
+            "k-disabled": disabled,
+            "k-loading": loading
+          }
+        )
       }, children);
     }
   };
@@ -146,18 +159,22 @@
         disabled
       } = this.props;
       return /* @__PURE__ */ React3.createElement("span", {
-        className: classNames(className, "k-picker", {
-          [`k-picker-${kendoThemeMaps.sizeMap[size] || size}`]: size,
-          [`k-picker-${fillMode}`]: fillMode,
-          [`k-rounded-${kendoThemeMaps.roundedMap[rounded] || rounded}`]: rounded,
-          "k-hover": hover,
-          "k-focus": focus,
-          "k-valid": valid,
-          "k-invalid": invalid,
-          "k-required": required,
-          "k-disabled": disabled,
-          "k-loading": loading
-        }),
+        className: classNames(
+          className,
+          "k-picker",
+          {
+            [`k-picker-${kendoThemeMaps.sizeMap[size] || size}`]: size,
+            [`k-picker-${fillMode}`]: fillMode,
+            [`k-rounded-${kendoThemeMaps.roundedMap[rounded] || rounded}`]: rounded,
+            "k-hover": hover,
+            "k-focus": focus,
+            "k-valid": valid,
+            "k-invalid": invalid,
+            "k-required": required,
+            "k-disabled": disabled,
+            "k-loading": loading
+          }
+        ),
         style
       }, children);
     }
@@ -292,7 +309,10 @@
         return /* @__PURE__ */ React10.createElement(React10.Fragment, null);
       }
       return /* @__PURE__ */ React10.createElement("span", {
-        className: classNames(className, "k-input-prefix")
+        className: classNames(
+          className,
+          "k-input-prefix"
+        )
       }, children);
     }
   };
@@ -309,7 +329,10 @@
         return /* @__PURE__ */ React11.createElement(React11.Fragment, null);
       }
       return /* @__PURE__ */ React11.createElement("span", {
-        className: classNames(className, "k-input-suffix")
+        className: classNames(
+          className,
+          "k-input-suffix"
+        )
       }, children);
     }
   };
@@ -364,426 +387,430 @@
   };
 
   // src/breadcrumb/tests/breadcrumb.tsx
-  var root = import_client.default.createRoot(document.getElementById("app"));
-  root.render(/* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", {
-    id: "test-area",
-    className: "k-d-grid k-grid-cols-2"
-  }, /* @__PURE__ */ import_react.default.createElement("span", {
-    className: "k-colspan-all k-col-span-full"
-  }, "Wrapping"), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", {
-    style: { width: "400px" },
-    className: "k-widget k-breadcrumb k-breadcrumb-wrap"
-  }, /* @__PURE__ */ import_react.default.createElement("ol", {
-    className: "k-breadcrumb-root-item-container"
-  }, /* @__PURE__ */ import_react.default.createElement("li", {
-    className: "k-flex-none k-breadcrumb-root-item k-breadcrumb-item"
-  }, /* @__PURE__ */ import_react.default.createElement("span", {
-    className: "k-cursor-pointer k-flex-none k-breadcrumb-root-link k-breadcrumb-icontext-link"
-  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
-    name: "home"
-  }), "Start item"))), /* @__PURE__ */ import_react.default.createElement("ol", {
-    className: "k-breadcrumb-container k-flex-wrap"
-  }, /* @__PURE__ */ import_react.default.createElement("li", {
-    className: "k-flex-none k-breadcrumb-item"
-  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
-    className: "k-breadcrumb-delimiter-icon",
-    name: "arrow-chevron-right"
-  }), /* @__PURE__ */ import_react.default.createElement("span", {
-    className: "k-cursor-pointer k-flex-none k-breadcrumb-link k-state-disabled k-breadcrumb-icontext-link"
-  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
-    name: "clock"
-  }), "First item")), /* @__PURE__ */ import_react.default.createElement("li", {
-    className: "k-flex-none k-breadcrumb-item"
-  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
-    className: "k-breadcrumb-delimiter-icon",
-    name: "arrow-chevron-right"
-  }), /* @__PURE__ */ import_react.default.createElement("span", {
-    className: "k-cursor-pointer k-flex-none k-breadcrumb-link"
-  }, /* @__PURE__ */ import_react.default.createElement("img", {
-    className: "k-image",
-    src: "/packages/html/assets/avatar.jpg",
-    width: "20",
-    height: "20"
-  }), "Second item")), /* @__PURE__ */ import_react.default.createElement("li", {
-    className: "k-flex-none k-breadcrumb-item"
-  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
-    className: "k-breadcrumb-delimiter-icon",
-    name: "arrow-chevron-right"
-  }), /* @__PURE__ */ import_react.default.createElement("span", {
-    className: "k-cursor-pointer k-flex-none k-breadcrumb-link"
-  }, " ", /* @__PURE__ */ import_react.default.createElement("span", {
-    className: "test"
-  }), " Third item ")), /* @__PURE__ */ import_react.default.createElement("li", {
-    className: "k-flex-none k-breadcrumb-item"
-  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
-    className: "k-breadcrumb-delimiter-icon",
-    name: "arrow-chevron-right"
-  }), /* @__PURE__ */ import_react.default.createElement("span", {
-    className: "k-cursor-pointer k-flex-none k-breadcrumb-link k-breadcrumb-icon-link"
-  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
-    name: "clock"
-  }))), /* @__PURE__ */ import_react.default.createElement("li", {
-    className: "k-flex-none k-breadcrumb-last-item k-breadcrumb-item"
-  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
-    className: "k-breadcrumb-delimiter-icon",
-    name: "arrow-chevron-right"
-  }), /* @__PURE__ */ import_react.default.createElement("span", {
-    className: "k-cursor-pointer k-flex-none k-breadcrumb-link k-state-disabled"
-  }, "Fifth item"))))), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", {
-    style: { width: "400px" },
-    className: "k-widget k-breadcrumb k-breadcrumb-wrap"
-  }, /* @__PURE__ */ import_react.default.createElement("ol", {
-    className: "k-breadcrumb-root-item-container"
-  }, /* @__PURE__ */ import_react.default.createElement("li", {
-    className: "k-flex-none k-breadcrumb-root-item k-breadcrumb-item"
-  }, /* @__PURE__ */ import_react.default.createElement("span", {
-    className: "k-cursor-pointer k-flex-none k-breadcrumb-root-link"
-  }, "Start item"))), /* @__PURE__ */ import_react.default.createElement("ol", {
-    className: "k-breadcrumb-container k-flex-wrap"
-  }, /* @__PURE__ */ import_react.default.createElement("li", {
-    className: "k-flex-none k-breadcrumb-item"
-  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
-    className: "k-breadcrumb-delimiter-icon",
-    name: "arrow-chevron-right"
-  }), /* @__PURE__ */ import_react.default.createElement("span", {
-    className: "k-cursor-pointer k-flex-none k-breadcrumb-link k-state-disabled k-breadcrumb-icontext-link"
-  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
-    name: "clock"
-  }), "First item")), /* @__PURE__ */ import_react.default.createElement("li", {
-    className: "k-flex-none k-breadcrumb-item"
-  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
-    className: "k-breadcrumb-delimiter-icon",
-    name: "arrow-chevron-right"
-  }), /* @__PURE__ */ import_react.default.createElement("span", {
-    className: "k-cursor-pointer k-flex-none k-breadcrumb-link"
-  }, /* @__PURE__ */ import_react.default.createElement("img", {
-    className: "k-image",
-    src: "/packages/html/assets/avatar.jpg",
-    width: "20",
-    height: "20"
-  }), "Second item")), /* @__PURE__ */ import_react.default.createElement("li", {
-    className: "k-flex-none k-breadcrumb-item"
-  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
-    className: "k-breadcrumb-delimiter-icon",
-    name: "arrow-chevron-right"
-  }), /* @__PURE__ */ import_react.default.createElement("span", {
-    className: "k-cursor-pointer k-flex-none k-breadcrumb-link"
-  }, " ", /* @__PURE__ */ import_react.default.createElement("span", {
-    className: "test"
-  }), " Third item ")), /* @__PURE__ */ import_react.default.createElement("li", {
-    className: "k-flex-none k-breadcrumb-item"
-  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
-    className: "k-breadcrumb-delimiter-icon",
-    name: "arrow-chevron-right"
-  }), /* @__PURE__ */ import_react.default.createElement("span", {
-    className: "k-cursor-pointer k-flex-none k-breadcrumb-link k-breadcrumb-icon-link"
-  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
-    name: "clock"
-  }))), /* @__PURE__ */ import_react.default.createElement("li", {
-    className: "k-flex-none k-breadcrumb-last-item k-breadcrumb-item"
-  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
-    className: "k-breadcrumb-delimiter-icon",
-    name: "arrow-chevron-right"
-  }), /* @__PURE__ */ import_react.default.createElement("span", {
-    className: "k-cursor-pointer k-flex-none k-breadcrumb-link k-state-disabled"
-  }, "Fifth item"))))), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", {
-    style: { width: "400px" },
-    className: "k-widget k-breadcrumb k-breadcrumb-wrap"
-  }, /* @__PURE__ */ import_react.default.createElement("ol", {
-    className: "k-breadcrumb-root-item-container"
-  }, /* @__PURE__ */ import_react.default.createElement("li", {
-    className: "k-flex-none k-breadcrumb-root-item k-breadcrumb-item"
-  }, /* @__PURE__ */ import_react.default.createElement("span", {
-    className: "k-cursor-pointer k-flex-none k-breadcrumb-root-link k-breadcrumb-icon-link"
-  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
-    name: "home"
-  })))), /* @__PURE__ */ import_react.default.createElement("ol", {
-    className: "k-breadcrumb-container k-flex-wrap"
-  }, /* @__PURE__ */ import_react.default.createElement("li", {
-    className: "k-flex-none k-breadcrumb-item"
-  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
-    className: "k-breadcrumb-delimiter-icon",
-    name: "arrow-chevron-right"
-  }), /* @__PURE__ */ import_react.default.createElement("span", {
-    className: "k-cursor-pointer k-flex-none k-breadcrumb-link k-state-disabled k-breadcrumb-icontext-link"
-  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
-    name: "clock"
-  }), "First item")), /* @__PURE__ */ import_react.default.createElement("li", {
-    className: "k-flex-none k-breadcrumb-item"
-  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
-    className: "k-breadcrumb-delimiter-icon",
-    name: "arrow-chevron-right"
-  }), /* @__PURE__ */ import_react.default.createElement("span", {
-    className: "k-cursor-pointer k-flex-none k-breadcrumb-link"
-  }, /* @__PURE__ */ import_react.default.createElement("img", {
-    className: "k-image",
-    src: "/packages/html/assets/avatar.jpg",
-    width: "20",
-    height: "20"
-  }), "Second item")), /* @__PURE__ */ import_react.default.createElement("li", {
-    className: "k-flex-none k-breadcrumb-item"
-  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
-    className: "k-breadcrumb-delimiter-icon",
-    name: "arrow-chevron-right"
-  }), /* @__PURE__ */ import_react.default.createElement("span", {
-    className: "k-cursor-pointer k-flex-none k-breadcrumb-link"
-  }, " ", /* @__PURE__ */ import_react.default.createElement("span", {
-    className: "test"
-  }), " Third item ")), /* @__PURE__ */ import_react.default.createElement("li", {
-    className: "k-flex-none k-breadcrumb-item"
-  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
-    className: "k-breadcrumb-delimiter-icon",
-    name: "arrow-chevron-right"
-  }), /* @__PURE__ */ import_react.default.createElement("span", {
-    className: "k-cursor-pointer k-flex-none k-breadcrumb-link k-breadcrumb-icon-link"
-  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
-    name: "clock"
-  }))), /* @__PURE__ */ import_react.default.createElement("li", {
-    className: "k-flex-none k-breadcrumb-last-item k-breadcrumb-item"
-  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
-    className: "k-breadcrumb-delimiter-icon",
-    name: "arrow-chevron-right"
-  }), /* @__PURE__ */ import_react.default.createElement("span", {
-    className: "k-cursor-pointer k-flex-none k-breadcrumb-link k-state-disabled"
-  }, "Fifth item"))))), /* @__PURE__ */ import_react.default.createElement("span", {
-    className: "k-colspan-all k-col-span-full"
-  }, "Navigation Mode"), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("nav", {
-    id: "breadcrumbs",
-    className: "k-widget k-breadcrumb"
-  }, /* @__PURE__ */ import_react.default.createElement("ol", {
-    className: "k-breadcrumb-container"
-  }, /* @__PURE__ */ import_react.default.createElement("li", {
-    className: "k-breadcrumb-item k-breadcrumb-root-item"
-  }, /* @__PURE__ */ import_react.default.createElement("a", {
-    href: "#",
-    className: "k-breadcrumb-root-link k-breadcrumb-icon-link"
-  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
-    name: "home"
-  })), /* @__PURE__ */ import_react.default.createElement(Icon, {
-    className: "k-breadcrumb-delimiter-icon",
-    name: "arrow-chevron-right"
-  })), /* @__PURE__ */ import_react.default.createElement("li", {
-    className: "k-breadcrumb-item"
-  }, /* @__PURE__ */ import_react.default.createElement("a", {
-    className: "k-breadcrumb-link",
-    href: "#"
-  }, "First item"), /* @__PURE__ */ import_react.default.createElement(Icon, {
-    className: "k-breadcrumb-delimiter-icon",
-    name: "arrow-chevron-right"
-  })), /* @__PURE__ */ import_react.default.createElement("li", {
-    className: "k-breadcrumb-item"
-  }, /* @__PURE__ */ import_react.default.createElement("a", {
-    className: "k-breadcrumb-link",
-    href: "#"
-  }, "Second item"), /* @__PURE__ */ import_react.default.createElement(Icon, {
-    className: "k-breadcrumb-delimiter-icon",
-    name: "arrow-chevron-right"
-  })), /* @__PURE__ */ import_react.default.createElement("li", {
-    className: "k-breadcrumb-item k-breadcrumb-last-item"
-  }, /* @__PURE__ */ import_react.default.createElement("a", {
-    className: "k-breadcrumb-link k-state-disabled",
-    href: "#"
-  }, "Third item"))))), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("nav", {
-    id: "breadcrumbs",
-    className: "k-widget k-breadcrumb"
-  }, /* @__PURE__ */ import_react.default.createElement("ol", {
-    className: "k-breadcrumb-container"
-  }, /* @__PURE__ */ import_react.default.createElement("li", {
-    className: "k-breadcrumb-item k-breadcrumb-root-item"
-  }, /* @__PURE__ */ import_react.default.createElement("a", {
-    href: "#",
-    className: "k-breadcrumb-root-link k-breadcrumb-icon-link k-state-focused"
-  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
-    name: "home"
-  })), /* @__PURE__ */ import_react.default.createElement(Icon, {
-    className: "k-breadcrumb-delimiter-icon",
-    name: "arrow-chevron-right"
-  })), /* @__PURE__ */ import_react.default.createElement("li", {
-    className: "k-breadcrumb-item"
-  }, /* @__PURE__ */ import_react.default.createElement("a", {
-    className: "k-breadcrumb-link k-state-focused",
-    href: "#"
-  }, "First item"), /* @__PURE__ */ import_react.default.createElement(Icon, {
-    className: "k-breadcrumb-delimiter-icon",
-    name: "arrow-chevron-right"
-  })), /* @__PURE__ */ import_react.default.createElement("li", {
-    className: "k-breadcrumb-item"
-  }, /* @__PURE__ */ import_react.default.createElement("a", {
-    className: "k-breadcrumb-link",
-    href: "#"
-  }, "Second item"), /* @__PURE__ */ import_react.default.createElement(Icon, {
-    className: "k-breadcrumb-delimiter-icon",
-    name: "arrow-chevron-right"
-  })), /* @__PURE__ */ import_react.default.createElement("li", {
-    className: "k-breadcrumb-item k-breadcrumb-last-item"
-  }, /* @__PURE__ */ import_react.default.createElement("a", {
-    className: "k-breadcrumb-link k-state-disabled",
-    href: "#"
-  }, "Third item"))))), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("nav", {
-    id: "breadcrumbs",
-    className: "k-widget k-breadcrumb"
-  }, /* @__PURE__ */ import_react.default.createElement("ol", {
-    className: "k-breadcrumb-container"
-  }, /* @__PURE__ */ import_react.default.createElement("li", {
-    className: "k-breadcrumb-item k-breadcrumb-root-item"
-  }, /* @__PURE__ */ import_react.default.createElement("a", {
-    href: "#",
-    className: "k-breadcrumb-root-link k-breadcrumb-icon-link k-state-hover"
-  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
-    name: "home"
-  })), /* @__PURE__ */ import_react.default.createElement(Icon, {
-    className: "k-breadcrumb-delimiter-icon",
-    name: "arrow-chevron-right"
-  })), /* @__PURE__ */ import_react.default.createElement("li", {
-    className: "k-breadcrumb-item"
-  }, /* @__PURE__ */ import_react.default.createElement("a", {
-    className: "k-breadcrumb-link k-state-hover",
-    href: "#"
-  }, "First item"), /* @__PURE__ */ import_react.default.createElement(Icon, {
-    className: "k-breadcrumb-delimiter-icon",
-    name: "arrow-chevron-right"
-  })), /* @__PURE__ */ import_react.default.createElement("li", {
-    className: "k-breadcrumb-item"
-  }, /* @__PURE__ */ import_react.default.createElement("a", {
-    className: "k-breadcrumb-link",
-    href: "#"
-  }, "Second item"), /* @__PURE__ */ import_react.default.createElement(Icon, {
-    className: "k-breadcrumb-delimiter-icon",
-    name: "arrow-chevron-right"
-  })), /* @__PURE__ */ import_react.default.createElement("li", {
-    className: "k-breadcrumb-item k-breadcrumb-last-item"
-  }, /* @__PURE__ */ import_react.default.createElement("a", {
-    className: "k-breadcrumb-link k-state-disabled",
-    href: "#"
-  }, "Third item"))))), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("nav", {
-    id: "breadcrumbs",
-    className: "k-widget k-breadcrumb"
-  }, /* @__PURE__ */ import_react.default.createElement("ol", {
-    className: "k-breadcrumb-container"
-  }, /* @__PURE__ */ import_react.default.createElement("li", {
-    className: "k-breadcrumb-item k-breadcrumb-root-item"
-  }, /* @__PURE__ */ import_react.default.createElement("a", {
-    href: "#",
-    className: "k-breadcrumb-root-link k-breadcrumb-icon-link k-state-hover"
-  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
-    name: "home"
-  })), /* @__PURE__ */ import_react.default.createElement(Icon, {
-    className: "k-breadcrumb-delimiter-icon",
-    name: "arrow-chevron-right"
-  })), /* @__PURE__ */ import_react.default.createElement("li", {
-    className: "k-breadcrumb-item"
-  }, /* @__PURE__ */ import_react.default.createElement("a", {
-    className: "k-breadcrumb-link k-breadcrumb-icontext-link",
-    href: "#"
-  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
-    name: "cloud"
-  }), "First item"), /* @__PURE__ */ import_react.default.createElement(Icon, {
-    className: "k-breadcrumb-delimiter-icon",
-    name: "arrow-chevron-right"
-  })), /* @__PURE__ */ import_react.default.createElement("li", {
-    className: "k-breadcrumb-item"
-  }, /* @__PURE__ */ import_react.default.createElement("a", {
-    className: "k-breadcrumb-link k-breadcrumb-icon-link",
-    href: "#"
-  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
-    name: "photo-camera"
-  })), /* @__PURE__ */ import_react.default.createElement(Icon, {
-    className: "k-breadcrumb-delimiter-icon",
-    name: "arrow-chevron-right"
-  })), /* @__PURE__ */ import_react.default.createElement("li", {
-    className: "k-breadcrumb-item k-breadcrumb-last-item"
-  }, /* @__PURE__ */ import_react.default.createElement("a", {
-    className: "k-breadcrumb-link k-state-disabled",
-    href: "#"
-  }, "Third item"))))), /* @__PURE__ */ import_react.default.createElement("span", {
-    className: "k-colspan-all k-col-span-full"
-  }, "Edit Mode"), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("nav", {
-    id: "breadcrumbs",
-    className: "k-widget k-breadcrumb k-state-focused"
-  }, /* @__PURE__ */ import_react.default.createElement("ol", {
-    className: "k-breadcrumb-container"
-  }, /* @__PURE__ */ import_react.default.createElement("li", {
-    className: "k-breadcrumb-item k-breadcrumb-root-item"
-  }, /* @__PURE__ */ import_react.default.createElement("a", {
-    href: "#",
-    className: "k-breadcrumb-root-link"
-  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
-    name: "home"
-  })), /* @__PURE__ */ import_react.default.createElement(Icon, {
-    className: "k-breadcrumb-delimiter-icon",
-    name: "arrow-chevron-right"
-  })), /* @__PURE__ */ import_react.default.createElement("li", {
-    className: "k-breadcrumb-item"
-  }, /* @__PURE__ */ import_react.default.createElement("a", {
-    className: "k-breadcrumb-link",
-    href: "#"
-  }, "First item"), /* @__PURE__ */ import_react.default.createElement(Icon, {
-    className: "k-breadcrumb-delimiter-icon",
-    name: "arrow-chevron-right"
-  })), /* @__PURE__ */ import_react.default.createElement("li", {
-    className: "k-breadcrumb-item"
-  }, /* @__PURE__ */ import_react.default.createElement("a", {
-    className: "k-breadcrumb-link",
-    href: "#"
-  }, "Second item"), /* @__PURE__ */ import_react.default.createElement(Icon, {
-    className: "k-breadcrumb-delimiter-icon",
-    name: "arrow-chevron-right"
-  })), /* @__PURE__ */ import_react.default.createElement("li", {
-    className: "k-breadcrumb-item k-breadcrumb-last-item"
-  }, /* @__PURE__ */ import_react.default.createElement("a", {
-    className: "k-breadcrumb-link k-state-disabled",
-    href: "#"
-  }, "Third item"))))), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("nav", {
-    id: "breadcrumbs",
-    className: "k-widget k-breadcrumb"
-  }, /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "k-breadcrumb-input-container"
-  }, /* @__PURE__ */ import_react.default.createElement(Textbox, {
-    showClearButton: false,
-    value: "First item/Second item/Breadcrumb Pattern/Third item"
-  })))), /* @__PURE__ */ import_react.default.createElement("span", {
-    className: "k-colspan-all k-col-span-full"
-  }, "Overflow"), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("nav", {
-    id: "breadcrumbs",
-    className: "k-widget k-breadcrumb"
-  }, /* @__PURE__ */ import_react.default.createElement("ol", {
-    className: "k-breadcrumb-container"
-  }, /* @__PURE__ */ import_react.default.createElement("li", {
-    className: "k-breadcrumb-item k-breadcrumb-root-item"
-  }, /* @__PURE__ */ import_react.default.createElement("a", {
-    href: "#",
-    className: "k-breadcrumb-root-link k-breadcrumb-icon-link"
-  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
-    name: "home"
-  })), /* @__PURE__ */ import_react.default.createElement(Icon, {
-    className: "k-breadcrumb-delimiter-icon k-breadcrumb-overflow-icon",
-    name: "arrow-chevron-right"
-  }), /* @__PURE__ */ import_react.default.createElement(Icon, {
-    className: "k-breadcrumb-delimiter-icon k-breadcrumb-overflow-icon",
-    name: "arrow-chevron-right"
-  })), /* @__PURE__ */ import_react.default.createElement("li", {
-    className: "k-breadcrumb-item",
-    hidden: true
-  }, /* @__PURE__ */ import_react.default.createElement("a", {
-    className: "k-breadcrumb-link",
-    href: "#"
-  }, "First item"), /* @__PURE__ */ import_react.default.createElement(Icon, {
-    className: "k-breadcrumb-delimiter-icon",
-    name: "arrow-chevron-right"
-  })), /* @__PURE__ */ import_react.default.createElement("li", {
-    className: "k-breadcrumb-item",
-    hidden: true
-  }, /* @__PURE__ */ import_react.default.createElement("a", {
-    className: "k-breadcrumb-link",
-    href: "#"
-  }, "Second item"), /* @__PURE__ */ import_react.default.createElement(Icon, {
-    className: "k-breadcrumb-delimiter-icon",
-    name: "arrow-chevron-right"
-  })), /* @__PURE__ */ import_react.default.createElement("li", {
-    className: "k-breadcrumb-item k-breadcrumb-last-item"
-  }, /* @__PURE__ */ import_react.default.createElement("a", {
-    className: "k-breadcrumb-link k-state-disabled",
-    href: "#"
-  }, "Breadcrumb item "))))))));
+  var root = import_client.default.createRoot(
+    document.getElementById("app")
+  );
+  root.render(
+    /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", {
+      id: "test-area",
+      className: "k-d-grid k-grid-cols-2"
+    }, /* @__PURE__ */ import_react.default.createElement("span", {
+      className: "k-colspan-all k-col-span-full"
+    }, "Wrapping"), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", {
+      style: { width: "400px" },
+      className: "k-widget k-breadcrumb k-breadcrumb-wrap"
+    }, /* @__PURE__ */ import_react.default.createElement("ol", {
+      className: "k-breadcrumb-root-item-container"
+    }, /* @__PURE__ */ import_react.default.createElement("li", {
+      className: "k-flex-none k-breadcrumb-root-item k-breadcrumb-item"
+    }, /* @__PURE__ */ import_react.default.createElement("span", {
+      className: "k-cursor-pointer k-flex-none k-breadcrumb-root-link k-breadcrumb-icontext-link"
+    }, /* @__PURE__ */ import_react.default.createElement(Icon, {
+      name: "home"
+    }), "Start item"))), /* @__PURE__ */ import_react.default.createElement("ol", {
+      className: "k-breadcrumb-container k-flex-wrap"
+    }, /* @__PURE__ */ import_react.default.createElement("li", {
+      className: "k-flex-none k-breadcrumb-item"
+    }, /* @__PURE__ */ import_react.default.createElement(Icon, {
+      className: "k-breadcrumb-delimiter-icon",
+      name: "arrow-chevron-right"
+    }), /* @__PURE__ */ import_react.default.createElement("span", {
+      className: "k-cursor-pointer k-flex-none k-breadcrumb-link k-state-disabled k-breadcrumb-icontext-link"
+    }, /* @__PURE__ */ import_react.default.createElement(Icon, {
+      name: "clock"
+    }), "First item")), /* @__PURE__ */ import_react.default.createElement("li", {
+      className: "k-flex-none k-breadcrumb-item"
+    }, /* @__PURE__ */ import_react.default.createElement(Icon, {
+      className: "k-breadcrumb-delimiter-icon",
+      name: "arrow-chevron-right"
+    }), /* @__PURE__ */ import_react.default.createElement("span", {
+      className: "k-cursor-pointer k-flex-none k-breadcrumb-link"
+    }, /* @__PURE__ */ import_react.default.createElement("img", {
+      className: "k-image",
+      src: "/packages/html/assets/avatar.jpg",
+      width: "20",
+      height: "20"
+    }), "Second item")), /* @__PURE__ */ import_react.default.createElement("li", {
+      className: "k-flex-none k-breadcrumb-item"
+    }, /* @__PURE__ */ import_react.default.createElement(Icon, {
+      className: "k-breadcrumb-delimiter-icon",
+      name: "arrow-chevron-right"
+    }), /* @__PURE__ */ import_react.default.createElement("span", {
+      className: "k-cursor-pointer k-flex-none k-breadcrumb-link"
+    }, " ", /* @__PURE__ */ import_react.default.createElement("span", {
+      className: "test"
+    }), " Third item ")), /* @__PURE__ */ import_react.default.createElement("li", {
+      className: "k-flex-none k-breadcrumb-item"
+    }, /* @__PURE__ */ import_react.default.createElement(Icon, {
+      className: "k-breadcrumb-delimiter-icon",
+      name: "arrow-chevron-right"
+    }), /* @__PURE__ */ import_react.default.createElement("span", {
+      className: "k-cursor-pointer k-flex-none k-breadcrumb-link k-breadcrumb-icon-link"
+    }, /* @__PURE__ */ import_react.default.createElement(Icon, {
+      name: "clock"
+    }))), /* @__PURE__ */ import_react.default.createElement("li", {
+      className: "k-flex-none k-breadcrumb-last-item k-breadcrumb-item"
+    }, /* @__PURE__ */ import_react.default.createElement(Icon, {
+      className: "k-breadcrumb-delimiter-icon",
+      name: "arrow-chevron-right"
+    }), /* @__PURE__ */ import_react.default.createElement("span", {
+      className: "k-cursor-pointer k-flex-none k-breadcrumb-link k-state-disabled"
+    }, "Fifth item"))))), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", {
+      style: { width: "400px" },
+      className: "k-widget k-breadcrumb k-breadcrumb-wrap"
+    }, /* @__PURE__ */ import_react.default.createElement("ol", {
+      className: "k-breadcrumb-root-item-container"
+    }, /* @__PURE__ */ import_react.default.createElement("li", {
+      className: "k-flex-none k-breadcrumb-root-item k-breadcrumb-item"
+    }, /* @__PURE__ */ import_react.default.createElement("span", {
+      className: "k-cursor-pointer k-flex-none k-breadcrumb-root-link"
+    }, "Start item"))), /* @__PURE__ */ import_react.default.createElement("ol", {
+      className: "k-breadcrumb-container k-flex-wrap"
+    }, /* @__PURE__ */ import_react.default.createElement("li", {
+      className: "k-flex-none k-breadcrumb-item"
+    }, /* @__PURE__ */ import_react.default.createElement(Icon, {
+      className: "k-breadcrumb-delimiter-icon",
+      name: "arrow-chevron-right"
+    }), /* @__PURE__ */ import_react.default.createElement("span", {
+      className: "k-cursor-pointer k-flex-none k-breadcrumb-link k-state-disabled k-breadcrumb-icontext-link"
+    }, /* @__PURE__ */ import_react.default.createElement(Icon, {
+      name: "clock"
+    }), "First item")), /* @__PURE__ */ import_react.default.createElement("li", {
+      className: "k-flex-none k-breadcrumb-item"
+    }, /* @__PURE__ */ import_react.default.createElement(Icon, {
+      className: "k-breadcrumb-delimiter-icon",
+      name: "arrow-chevron-right"
+    }), /* @__PURE__ */ import_react.default.createElement("span", {
+      className: "k-cursor-pointer k-flex-none k-breadcrumb-link"
+    }, /* @__PURE__ */ import_react.default.createElement("img", {
+      className: "k-image",
+      src: "/packages/html/assets/avatar.jpg",
+      width: "20",
+      height: "20"
+    }), "Second item")), /* @__PURE__ */ import_react.default.createElement("li", {
+      className: "k-flex-none k-breadcrumb-item"
+    }, /* @__PURE__ */ import_react.default.createElement(Icon, {
+      className: "k-breadcrumb-delimiter-icon",
+      name: "arrow-chevron-right"
+    }), /* @__PURE__ */ import_react.default.createElement("span", {
+      className: "k-cursor-pointer k-flex-none k-breadcrumb-link"
+    }, " ", /* @__PURE__ */ import_react.default.createElement("span", {
+      className: "test"
+    }), " Third item ")), /* @__PURE__ */ import_react.default.createElement("li", {
+      className: "k-flex-none k-breadcrumb-item"
+    }, /* @__PURE__ */ import_react.default.createElement(Icon, {
+      className: "k-breadcrumb-delimiter-icon",
+      name: "arrow-chevron-right"
+    }), /* @__PURE__ */ import_react.default.createElement("span", {
+      className: "k-cursor-pointer k-flex-none k-breadcrumb-link k-breadcrumb-icon-link"
+    }, /* @__PURE__ */ import_react.default.createElement(Icon, {
+      name: "clock"
+    }))), /* @__PURE__ */ import_react.default.createElement("li", {
+      className: "k-flex-none k-breadcrumb-last-item k-breadcrumb-item"
+    }, /* @__PURE__ */ import_react.default.createElement(Icon, {
+      className: "k-breadcrumb-delimiter-icon",
+      name: "arrow-chevron-right"
+    }), /* @__PURE__ */ import_react.default.createElement("span", {
+      className: "k-cursor-pointer k-flex-none k-breadcrumb-link k-state-disabled"
+    }, "Fifth item"))))), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", {
+      style: { width: "400px" },
+      className: "k-widget k-breadcrumb k-breadcrumb-wrap"
+    }, /* @__PURE__ */ import_react.default.createElement("ol", {
+      className: "k-breadcrumb-root-item-container"
+    }, /* @__PURE__ */ import_react.default.createElement("li", {
+      className: "k-flex-none k-breadcrumb-root-item k-breadcrumb-item"
+    }, /* @__PURE__ */ import_react.default.createElement("span", {
+      className: "k-cursor-pointer k-flex-none k-breadcrumb-root-link k-breadcrumb-icon-link"
+    }, /* @__PURE__ */ import_react.default.createElement(Icon, {
+      name: "home"
+    })))), /* @__PURE__ */ import_react.default.createElement("ol", {
+      className: "k-breadcrumb-container k-flex-wrap"
+    }, /* @__PURE__ */ import_react.default.createElement("li", {
+      className: "k-flex-none k-breadcrumb-item"
+    }, /* @__PURE__ */ import_react.default.createElement(Icon, {
+      className: "k-breadcrumb-delimiter-icon",
+      name: "arrow-chevron-right"
+    }), /* @__PURE__ */ import_react.default.createElement("span", {
+      className: "k-cursor-pointer k-flex-none k-breadcrumb-link k-state-disabled k-breadcrumb-icontext-link"
+    }, /* @__PURE__ */ import_react.default.createElement(Icon, {
+      name: "clock"
+    }), "First item")), /* @__PURE__ */ import_react.default.createElement("li", {
+      className: "k-flex-none k-breadcrumb-item"
+    }, /* @__PURE__ */ import_react.default.createElement(Icon, {
+      className: "k-breadcrumb-delimiter-icon",
+      name: "arrow-chevron-right"
+    }), /* @__PURE__ */ import_react.default.createElement("span", {
+      className: "k-cursor-pointer k-flex-none k-breadcrumb-link"
+    }, /* @__PURE__ */ import_react.default.createElement("img", {
+      className: "k-image",
+      src: "/packages/html/assets/avatar.jpg",
+      width: "20",
+      height: "20"
+    }), "Second item")), /* @__PURE__ */ import_react.default.createElement("li", {
+      className: "k-flex-none k-breadcrumb-item"
+    }, /* @__PURE__ */ import_react.default.createElement(Icon, {
+      className: "k-breadcrumb-delimiter-icon",
+      name: "arrow-chevron-right"
+    }), /* @__PURE__ */ import_react.default.createElement("span", {
+      className: "k-cursor-pointer k-flex-none k-breadcrumb-link"
+    }, " ", /* @__PURE__ */ import_react.default.createElement("span", {
+      className: "test"
+    }), " Third item ")), /* @__PURE__ */ import_react.default.createElement("li", {
+      className: "k-flex-none k-breadcrumb-item"
+    }, /* @__PURE__ */ import_react.default.createElement(Icon, {
+      className: "k-breadcrumb-delimiter-icon",
+      name: "arrow-chevron-right"
+    }), /* @__PURE__ */ import_react.default.createElement("span", {
+      className: "k-cursor-pointer k-flex-none k-breadcrumb-link k-breadcrumb-icon-link"
+    }, /* @__PURE__ */ import_react.default.createElement(Icon, {
+      name: "clock"
+    }))), /* @__PURE__ */ import_react.default.createElement("li", {
+      className: "k-flex-none k-breadcrumb-last-item k-breadcrumb-item"
+    }, /* @__PURE__ */ import_react.default.createElement(Icon, {
+      className: "k-breadcrumb-delimiter-icon",
+      name: "arrow-chevron-right"
+    }), /* @__PURE__ */ import_react.default.createElement("span", {
+      className: "k-cursor-pointer k-flex-none k-breadcrumb-link k-state-disabled"
+    }, "Fifth item"))))), /* @__PURE__ */ import_react.default.createElement("span", {
+      className: "k-colspan-all k-col-span-full"
+    }, "Navigation Mode"), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("nav", {
+      id: "breadcrumbs",
+      className: "k-widget k-breadcrumb"
+    }, /* @__PURE__ */ import_react.default.createElement("ol", {
+      className: "k-breadcrumb-container"
+    }, /* @__PURE__ */ import_react.default.createElement("li", {
+      className: "k-breadcrumb-item k-breadcrumb-root-item"
+    }, /* @__PURE__ */ import_react.default.createElement("a", {
+      href: "#",
+      className: "k-breadcrumb-root-link k-breadcrumb-icon-link"
+    }, /* @__PURE__ */ import_react.default.createElement(Icon, {
+      name: "home"
+    })), /* @__PURE__ */ import_react.default.createElement(Icon, {
+      className: "k-breadcrumb-delimiter-icon",
+      name: "arrow-chevron-right"
+    })), /* @__PURE__ */ import_react.default.createElement("li", {
+      className: "k-breadcrumb-item"
+    }, /* @__PURE__ */ import_react.default.createElement("a", {
+      className: "k-breadcrumb-link",
+      href: "#"
+    }, "First item"), /* @__PURE__ */ import_react.default.createElement(Icon, {
+      className: "k-breadcrumb-delimiter-icon",
+      name: "arrow-chevron-right"
+    })), /* @__PURE__ */ import_react.default.createElement("li", {
+      className: "k-breadcrumb-item"
+    }, /* @__PURE__ */ import_react.default.createElement("a", {
+      className: "k-breadcrumb-link",
+      href: "#"
+    }, "Second item"), /* @__PURE__ */ import_react.default.createElement(Icon, {
+      className: "k-breadcrumb-delimiter-icon",
+      name: "arrow-chevron-right"
+    })), /* @__PURE__ */ import_react.default.createElement("li", {
+      className: "k-breadcrumb-item k-breadcrumb-last-item"
+    }, /* @__PURE__ */ import_react.default.createElement("a", {
+      className: "k-breadcrumb-link k-state-disabled",
+      href: "#"
+    }, "Third item"))))), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("nav", {
+      id: "breadcrumbs",
+      className: "k-widget k-breadcrumb"
+    }, /* @__PURE__ */ import_react.default.createElement("ol", {
+      className: "k-breadcrumb-container"
+    }, /* @__PURE__ */ import_react.default.createElement("li", {
+      className: "k-breadcrumb-item k-breadcrumb-root-item"
+    }, /* @__PURE__ */ import_react.default.createElement("a", {
+      href: "#",
+      className: "k-breadcrumb-root-link k-breadcrumb-icon-link k-state-focused"
+    }, /* @__PURE__ */ import_react.default.createElement(Icon, {
+      name: "home"
+    })), /* @__PURE__ */ import_react.default.createElement(Icon, {
+      className: "k-breadcrumb-delimiter-icon",
+      name: "arrow-chevron-right"
+    })), /* @__PURE__ */ import_react.default.createElement("li", {
+      className: "k-breadcrumb-item"
+    }, /* @__PURE__ */ import_react.default.createElement("a", {
+      className: "k-breadcrumb-link k-state-focused",
+      href: "#"
+    }, "First item"), /* @__PURE__ */ import_react.default.createElement(Icon, {
+      className: "k-breadcrumb-delimiter-icon",
+      name: "arrow-chevron-right"
+    })), /* @__PURE__ */ import_react.default.createElement("li", {
+      className: "k-breadcrumb-item"
+    }, /* @__PURE__ */ import_react.default.createElement("a", {
+      className: "k-breadcrumb-link",
+      href: "#"
+    }, "Second item"), /* @__PURE__ */ import_react.default.createElement(Icon, {
+      className: "k-breadcrumb-delimiter-icon",
+      name: "arrow-chevron-right"
+    })), /* @__PURE__ */ import_react.default.createElement("li", {
+      className: "k-breadcrumb-item k-breadcrumb-last-item"
+    }, /* @__PURE__ */ import_react.default.createElement("a", {
+      className: "k-breadcrumb-link k-state-disabled",
+      href: "#"
+    }, "Third item"))))), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("nav", {
+      id: "breadcrumbs",
+      className: "k-widget k-breadcrumb"
+    }, /* @__PURE__ */ import_react.default.createElement("ol", {
+      className: "k-breadcrumb-container"
+    }, /* @__PURE__ */ import_react.default.createElement("li", {
+      className: "k-breadcrumb-item k-breadcrumb-root-item"
+    }, /* @__PURE__ */ import_react.default.createElement("a", {
+      href: "#",
+      className: "k-breadcrumb-root-link k-breadcrumb-icon-link k-state-hover"
+    }, /* @__PURE__ */ import_react.default.createElement(Icon, {
+      name: "home"
+    })), /* @__PURE__ */ import_react.default.createElement(Icon, {
+      className: "k-breadcrumb-delimiter-icon",
+      name: "arrow-chevron-right"
+    })), /* @__PURE__ */ import_react.default.createElement("li", {
+      className: "k-breadcrumb-item"
+    }, /* @__PURE__ */ import_react.default.createElement("a", {
+      className: "k-breadcrumb-link k-state-hover",
+      href: "#"
+    }, "First item"), /* @__PURE__ */ import_react.default.createElement(Icon, {
+      className: "k-breadcrumb-delimiter-icon",
+      name: "arrow-chevron-right"
+    })), /* @__PURE__ */ import_react.default.createElement("li", {
+      className: "k-breadcrumb-item"
+    }, /* @__PURE__ */ import_react.default.createElement("a", {
+      className: "k-breadcrumb-link",
+      href: "#"
+    }, "Second item"), /* @__PURE__ */ import_react.default.createElement(Icon, {
+      className: "k-breadcrumb-delimiter-icon",
+      name: "arrow-chevron-right"
+    })), /* @__PURE__ */ import_react.default.createElement("li", {
+      className: "k-breadcrumb-item k-breadcrumb-last-item"
+    }, /* @__PURE__ */ import_react.default.createElement("a", {
+      className: "k-breadcrumb-link k-state-disabled",
+      href: "#"
+    }, "Third item"))))), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("nav", {
+      id: "breadcrumbs",
+      className: "k-widget k-breadcrumb"
+    }, /* @__PURE__ */ import_react.default.createElement("ol", {
+      className: "k-breadcrumb-container"
+    }, /* @__PURE__ */ import_react.default.createElement("li", {
+      className: "k-breadcrumb-item k-breadcrumb-root-item"
+    }, /* @__PURE__ */ import_react.default.createElement("a", {
+      href: "#",
+      className: "k-breadcrumb-root-link k-breadcrumb-icon-link k-state-hover"
+    }, /* @__PURE__ */ import_react.default.createElement(Icon, {
+      name: "home"
+    })), /* @__PURE__ */ import_react.default.createElement(Icon, {
+      className: "k-breadcrumb-delimiter-icon",
+      name: "arrow-chevron-right"
+    })), /* @__PURE__ */ import_react.default.createElement("li", {
+      className: "k-breadcrumb-item"
+    }, /* @__PURE__ */ import_react.default.createElement("a", {
+      className: "k-breadcrumb-link k-breadcrumb-icontext-link",
+      href: "#"
+    }, /* @__PURE__ */ import_react.default.createElement(Icon, {
+      name: "cloud"
+    }), "First item"), /* @__PURE__ */ import_react.default.createElement(Icon, {
+      className: "k-breadcrumb-delimiter-icon",
+      name: "arrow-chevron-right"
+    })), /* @__PURE__ */ import_react.default.createElement("li", {
+      className: "k-breadcrumb-item"
+    }, /* @__PURE__ */ import_react.default.createElement("a", {
+      className: "k-breadcrumb-link k-breadcrumb-icon-link",
+      href: "#"
+    }, /* @__PURE__ */ import_react.default.createElement(Icon, {
+      name: "photo-camera"
+    })), /* @__PURE__ */ import_react.default.createElement(Icon, {
+      className: "k-breadcrumb-delimiter-icon",
+      name: "arrow-chevron-right"
+    })), /* @__PURE__ */ import_react.default.createElement("li", {
+      className: "k-breadcrumb-item k-breadcrumb-last-item"
+    }, /* @__PURE__ */ import_react.default.createElement("a", {
+      className: "k-breadcrumb-link k-state-disabled",
+      href: "#"
+    }, "Third item"))))), /* @__PURE__ */ import_react.default.createElement("span", {
+      className: "k-colspan-all k-col-span-full"
+    }, "Edit Mode"), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("nav", {
+      id: "breadcrumbs",
+      className: "k-widget k-breadcrumb k-state-focused"
+    }, /* @__PURE__ */ import_react.default.createElement("ol", {
+      className: "k-breadcrumb-container"
+    }, /* @__PURE__ */ import_react.default.createElement("li", {
+      className: "k-breadcrumb-item k-breadcrumb-root-item"
+    }, /* @__PURE__ */ import_react.default.createElement("a", {
+      href: "#",
+      className: "k-breadcrumb-root-link"
+    }, /* @__PURE__ */ import_react.default.createElement(Icon, {
+      name: "home"
+    })), /* @__PURE__ */ import_react.default.createElement(Icon, {
+      className: "k-breadcrumb-delimiter-icon",
+      name: "arrow-chevron-right"
+    })), /* @__PURE__ */ import_react.default.createElement("li", {
+      className: "k-breadcrumb-item"
+    }, /* @__PURE__ */ import_react.default.createElement("a", {
+      className: "k-breadcrumb-link",
+      href: "#"
+    }, "First item"), /* @__PURE__ */ import_react.default.createElement(Icon, {
+      className: "k-breadcrumb-delimiter-icon",
+      name: "arrow-chevron-right"
+    })), /* @__PURE__ */ import_react.default.createElement("li", {
+      className: "k-breadcrumb-item"
+    }, /* @__PURE__ */ import_react.default.createElement("a", {
+      className: "k-breadcrumb-link",
+      href: "#"
+    }, "Second item"), /* @__PURE__ */ import_react.default.createElement(Icon, {
+      className: "k-breadcrumb-delimiter-icon",
+      name: "arrow-chevron-right"
+    })), /* @__PURE__ */ import_react.default.createElement("li", {
+      className: "k-breadcrumb-item k-breadcrumb-last-item"
+    }, /* @__PURE__ */ import_react.default.createElement("a", {
+      className: "k-breadcrumb-link k-state-disabled",
+      href: "#"
+    }, "Third item"))))), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("nav", {
+      id: "breadcrumbs",
+      className: "k-widget k-breadcrumb"
+    }, /* @__PURE__ */ import_react.default.createElement("div", {
+      className: "k-breadcrumb-input-container"
+    }, /* @__PURE__ */ import_react.default.createElement(Textbox, {
+      showClearButton: false,
+      value: "First item/Second item/Breadcrumb Pattern/Third item"
+    })))), /* @__PURE__ */ import_react.default.createElement("span", {
+      className: "k-colspan-all k-col-span-full"
+    }, "Overflow"), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("nav", {
+      id: "breadcrumbs",
+      className: "k-widget k-breadcrumb"
+    }, /* @__PURE__ */ import_react.default.createElement("ol", {
+      className: "k-breadcrumb-container"
+    }, /* @__PURE__ */ import_react.default.createElement("li", {
+      className: "k-breadcrumb-item k-breadcrumb-root-item"
+    }, /* @__PURE__ */ import_react.default.createElement("a", {
+      href: "#",
+      className: "k-breadcrumb-root-link k-breadcrumb-icon-link"
+    }, /* @__PURE__ */ import_react.default.createElement(Icon, {
+      name: "home"
+    })), /* @__PURE__ */ import_react.default.createElement(Icon, {
+      className: "k-breadcrumb-delimiter-icon k-breadcrumb-overflow-icon",
+      name: "arrow-chevron-right"
+    }), /* @__PURE__ */ import_react.default.createElement(Icon, {
+      className: "k-breadcrumb-delimiter-icon k-breadcrumb-overflow-icon",
+      name: "arrow-chevron-right"
+    })), /* @__PURE__ */ import_react.default.createElement("li", {
+      className: "k-breadcrumb-item",
+      hidden: true
+    }, /* @__PURE__ */ import_react.default.createElement("a", {
+      className: "k-breadcrumb-link",
+      href: "#"
+    }, "First item"), /* @__PURE__ */ import_react.default.createElement(Icon, {
+      className: "k-breadcrumb-delimiter-icon",
+      name: "arrow-chevron-right"
+    })), /* @__PURE__ */ import_react.default.createElement("li", {
+      className: "k-breadcrumb-item",
+      hidden: true
+    }, /* @__PURE__ */ import_react.default.createElement("a", {
+      className: "k-breadcrumb-link",
+      href: "#"
+    }, "Second item"), /* @__PURE__ */ import_react.default.createElement(Icon, {
+      className: "k-breadcrumb-delimiter-icon",
+      name: "arrow-chevron-right"
+    })), /* @__PURE__ */ import_react.default.createElement("li", {
+      className: "k-breadcrumb-item k-breadcrumb-last-item"
+    }, /* @__PURE__ */ import_react.default.createElement("a", {
+      className: "k-breadcrumb-link k-state-disabled",
+      href: "#"
+    }, "Breadcrumb item ")))))))
+  );
 })();
 //# sourceMappingURL=breadcrumb.js.map