@progress/kendo-themes-html 7.0.3-dev.0 → 7.0.3-dev.2

package/dist/cjs/breadcrumb/breadcrumb-link.js

@@ -108,3 +108,4 @@ var BreadcrumbLink = (props) => {
     }
   );
 };
+BreadcrumbLink.states = states;

package/dist/cjs/breadcrumb/{tests → templates}/breadcrumb-adaptive.js

@@ -16,10 +16,10 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/breadcrumb/tests/breadcrumb-adaptive.tsx
+// src/breadcrumb/templates/breadcrumb-adaptive.tsx
 var breadcrumb_adaptive_exports = {};
 __export(breadcrumb_adaptive_exports, {
-  default: () => breadcrumb_adaptive_default
+  BreadcrumbAdaptive: () => BreadcrumbAdaptive
 });
 module.exports = __toCommonJS(breadcrumb_adaptive_exports);
 
@@ -117,11 +117,182 @@ var States = {
   "readonly": "readonly"
 };
 
-// src/icon/font-icon.spec.tsx
+// src/breadcrumb/breadcrumb.spec.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var FONTICON_CLASSNAME = `k-icon k-font-icon`;
-var states = [];
+var BREADCRUMB_CLASSNAME = `k-breadcrumb`;
+var states = [
+  States.focus
+];
 var options = {
+  size: [Size.small, Size.medium, Size.large]
+};
+var defaultProps = {
+  collapsing: "auto",
+  size: Size.medium
+};
+var Breadcrumb = (props) => {
+  const {
+    size = defaultProps.size,
+    collapsing = defaultProps.collapsing,
+    focus,
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "nav",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        BREADCRUMB_CLASSNAME,
+        stateClassNames(BREADCRUMB_CLASSNAME, {
+          focus
+        }),
+        optionClassNames(BREADCRUMB_CLASSNAME, {
+          size
+        }),
+        {
+          "k-breadcrumb-wrap": collapsing === "wrap"
+        }
+      ),
+      children: props.children
+    }
+  );
+};
+Breadcrumb.states = states;
+Breadcrumb.options = options;
+Breadcrumb.className = BREADCRUMB_CLASSNAME;
+Breadcrumb.defaultProps = defaultProps;
+
+// src/breadcrumb/breadcrumb-root-item-container.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+
+// src/breadcrumb/breadcrumb-input-container.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+
+// src/breadcrumb/breadcrumb-container.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var BREADCRUMBCONTAINER_CLASSNAME = `k-breadcrumb-container`;
+var defaultProps2 = {
+  collapsing: "auto"
+};
+var BreadcrumbContainer = (props) => {
+  const {
+    collapsing = defaultProps2.collapsing,
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "ol",
+    {
+      ...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_runtime5 = require("react/jsx-runtime");
+var BREADCRUMBITEM_CLASSNAME = `k-breadcrumb-item`;
+var BreadcrumbItem = (props) => {
+  const {
+    root,
+    last,
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "li",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        BREADCRUMBITEM_CLASSNAME,
+        {
+          "k-breadcrumb-root-item": root,
+          "k-breadcrumb-last-item": last
+        }
+      ),
+      children: props.children
+    }
+  );
+};
+
+// src/breadcrumb/breadcrumb-link.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var BREADCRUMBLINK_CLASSNAME = ``;
+var states2 = [
+  States.hover,
+  States.focus,
+  States.disabled
+];
+var BreadcrumbLink = (props) => {
+  const {
+    root,
+    icon,
+    icontext,
+    hover,
+    focus,
+    disabled,
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "a",
+    {
+      href: "#",
+      ...other,
+      className: classNames(
+        props.className,
+        stateClassNames(BREADCRUMBLINK_CLASSNAME, {
+          hover,
+          focus,
+          disabled
+        }),
+        {
+          "k-breadcrumb-link": !root,
+          "k-breadcrumb-root-link": root,
+          "k-breadcrumb-icon-link": icon,
+          "k-breadcrumb-icontext-link": icontext
+        }
+      ),
+      children: props.children
+    }
+  );
+};
+BreadcrumbLink.states = states2;
+
+// src/breadcrumb/breadcrumb-item-text.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var BREADCRUMBITEMTEXT_CLASSNAME = `k-breadcrumb-item-text`;
+var BreadcrumbItemText = (props) => {
+  const {
+    text,
+    ...other
+  } = props;
+  const textOrChildren = text ? text : props.children;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "span",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        BREADCRUMBITEMTEXT_CLASSNAME
+      ),
+      children: textOrChildren
+    }
+  );
+};
+
+// src/icon/font-icon.spec.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var FONTICON_CLASSNAME = `k-icon k-font-icon`;
+var states3 = [];
+var options2 = {
   size: [Size.xsmall, Size.small, Size.medium, Size.large, Size.xlarge, Size.xxlarge, Size.xxxlarge],
   themeColor: [
     ThemeColor.base,
@@ -136,7 +307,7 @@ var options = {
     ThemeColor.dark
   ]
 };
-var defaultProps = {};
+var defaultProps3 = {};
 var FontIcon = (props) => {
   const {
     size,
@@ -147,9 +318,9 @@ var FontIcon = (props) => {
     ...other
   } = props;
   if (!icon) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, {});
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "span",
     {
       ...other,
@@ -170,17 +341,17 @@ var FontIcon = (props) => {
     }
   );
 };
-FontIcon.states = states;
-FontIcon.options = options;
+FontIcon.states = states3;
+FontIcon.options = options2;
 FontIcon.className = FONTICON_CLASSNAME;
-FontIcon.defaultProps = defaultProps;
+FontIcon.defaultProps = defaultProps3;
 var font_icon_spec_default = FontIcon;
 
 // src/icon/svg-icon.spec.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var SVGICON_CLASSNAME = `k-icon k-svg-icon`;
-var states2 = [];
-var options2 = {
+var states4 = [];
+var options3 = {
   size: [Size.xsmall, Size.small, Size.medium, Size.large, Size.xlarge, Size.xxlarge, Size.xxxlarge],
   themeColor: [
     ThemeColor.base,
@@ -195,7 +366,7 @@ var options2 = {
     ThemeColor.dark
   ]
 };
-var defaultProps2 = {
+var defaultProps4 = {
   viewBox: "0 0 24 24"
 };
 var SvgIcon = (props) => {
@@ -204,15 +375,15 @@ var SvgIcon = (props) => {
     themeColor,
     rotate,
     flip,
-    viewBox = defaultProps2.viewBox,
+    viewBox = defaultProps4.viewBox,
     icon,
     ...other
   } = props;
   if (!icon) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, {});
   }
   if (icon === "none") {
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "span",
       {
         ...other,
@@ -225,7 +396,7 @@ var SvgIcon = (props) => {
     );
   }
   const name = typeof icon === "object" && icon.name && icon.name;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "span",
     {
       ...other,
@@ -243,7 +414,7 @@ var SvgIcon = (props) => {
           "k-flip-v": flip === "v" || flip === "both"
         }
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         "svg",
         {
           "aria-hidden": true,
@@ -257,10 +428,10 @@ var SvgIcon = (props) => {
     }
   );
 };
-SvgIcon.states = states2;
-SvgIcon.options = options2;
+SvgIcon.states = states4;
+SvgIcon.options = options3;
 SvgIcon.className = SVGICON_CLASSNAME;
-SvgIcon.defaultProps = defaultProps2;
+SvgIcon.defaultProps = defaultProps4;
 var svg_icon_spec_default = SvgIcon;
 
 // ../../node_modules/@progress/kendo-svg-icons/dist/index.es.js
@@ -4259,13 +4430,13 @@ var chartChoroplethIcon = {
 };
 
 // src/icon/icon.spec.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var snakeToCamel = (str) => str.toLowerCase().replace(
   /([-_][a-z])/g,
   (group) => group.toUpperCase().replace("-", "").replace("_", "")
 );
-var states3 = [];
-var options3 = {
+var states5 = [];
+var options4 = {
   size: [Size.xsmall, Size.small, Size.medium, Size.large, Size.xlarge, Size.xxlarge, Size.xxxlarge],
   themeColor: [
     ThemeColor.base,
@@ -4280,7 +4451,7 @@ var options3 = {
     ThemeColor.dark
   ]
 };
-var defaultProps3 = {
+var defaultProps5 = {
   viewBox: "0 0 24 24",
   type: "svg"
 };
@@ -4289,258 +4460,64 @@ var Icon = (props) => {
     size,
     themeColor,
     icon,
-    type = defaultProps3.type,
+    type = defaultProps5.type,
     rotate,
     flip,
-    viewBox = defaultProps3.viewBox,
+    viewBox = defaultProps5.viewBox,
     ...other
   } = props;
   if (!icon) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, {});
   }
   if (type === "svg") {
     if (icon === "none") {
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(svg_icon_spec_default, { ...other, icon, size });
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(svg_icon_spec_default, { ...other, icon, size });
     }
     const iconSVG = snakeToCamel(`${icon}-icon`);
     if (!index_es_exports[iconSVG]) {
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, {});
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(svg_icon_spec_default, { ...other, icon: index_es_exports[iconSVG], size, themeColor, rotate, flip, viewBox });
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(svg_icon_spec_default, { ...other, icon: index_es_exports[iconSVG], size, themeColor, rotate, flip, viewBox });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(font_icon_spec_default, { ...other, icon, size, themeColor, rotate, flip });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(font_icon_spec_default, { ...other, icon, size, themeColor, rotate, flip });
 };
-Icon.states = states3;
-Icon.options = options3;
-Icon.defaultProps = defaultProps3;
+Icon.states = states5;
+Icon.options = options4;
+Icon.defaultProps = defaultProps5;
 
-// src/breadcrumb/breadcrumb.spec.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var BREADCRUMB_CLASSNAME = `k-breadcrumb`;
-var states4 = [
-  States.focus
-];
-var options4 = {
-  size: [Size.small, Size.medium, Size.large]
-};
-var defaultProps4 = {
-  collapsing: "auto",
-  size: Size.medium
-};
-var Breadcrumb = (props) => {
-  const {
-    size = defaultProps4.size,
-    collapsing = defaultProps4.collapsing,
-    focus,
-    ...other
-  } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    "nav",
-    {
-      ...other,
-      className: classNames(
-        props.className,
-        BREADCRUMB_CLASSNAME,
-        stateClassNames(BREADCRUMB_CLASSNAME, {
-          focus
-        }),
-        optionClassNames(BREADCRUMB_CLASSNAME, {
-          size
-        }),
-        {
-          "k-breadcrumb-wrap": collapsing === "wrap"
-        }
-      ),
-      children: props.children
-    }
-  );
-};
-Breadcrumb.states = states4;
-Breadcrumb.options = options4;
-Breadcrumb.className = BREADCRUMB_CLASSNAME;
-Breadcrumb.defaultProps = defaultProps4;
-
-// src/breadcrumb/breadcrumb-root-item-container.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var BREADCRUMBROOTITEMCONTAINER_CLASSNAME = `k-breadcrumb-root-item-container`;
-var BreadcrumbRootItemContainer = (props) => {
-  const {
-    ...other
-  } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    "ol",
-    {
-      ...other,
-      className: classNames(
-        props.className,
-        BREADCRUMBROOTITEMCONTAINER_CLASSNAME
-      ),
-      children: props.children
-    }
-  );
-};
-
-// src/breadcrumb/breadcrumb-input-container.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-
-// src/breadcrumb/breadcrumb-container.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var BREADCRUMBCONTAINER_CLASSNAME = `k-breadcrumb-container`;
-var defaultProps5 = {
-  collapsing: "auto"
-};
-var BreadcrumbContainer = (props) => {
-  const {
-    collapsing = defaultProps5.collapsing,
-    ...other
-  } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    "ol",
-    {
-      ...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_runtime8 = require("react/jsx-runtime");
-var BREADCRUMBITEM_CLASSNAME = `k-breadcrumb-item`;
-var BreadcrumbItem = (props) => {
-  const {
-    root,
-    last,
-    ...other
-  } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    "li",
-    {
-      ...other,
-      className: classNames(
-        props.className,
-        BREADCRUMBITEM_CLASSNAME,
-        {
-          "k-breadcrumb-root-item": root,
-          "k-breadcrumb-last-item": last
-        }
-      ),
-      children: props.children
-    }
-  );
-};
+// src/breadcrumb/templates/breadcrumb-normal.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
 
-// src/breadcrumb/breadcrumb-link.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var BREADCRUMBLINK_CLASSNAME = ``;
-var states5 = [
-  States.hover,
-  States.focus,
-  States.disabled
-];
-var BreadcrumbLink = (props) => {
-  const {
-    root,
-    icon,
-    icontext,
-    hover,
-    focus,
-    disabled,
-    ...other
-  } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-    "a",
-    {
-      href: "#",
-      ...other,
-      className: classNames(
-        props.className,
-        stateClassNames(BREADCRUMBLINK_CLASSNAME, {
-          hover,
-          focus,
-          disabled
-        }),
-        {
-          "k-breadcrumb-link": !root,
-          "k-breadcrumb-root-link": root,
-          "k-breadcrumb-icon-link": icon,
-          "k-breadcrumb-icontext-link": icontext
-        }
-      ),
-      children: props.children
-    }
-  );
-};
+// src/breadcrumb/templates/breadcrumb-root.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
 
-// src/breadcrumb/breadcrumb-item-text.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var BREADCRUMBITEMTEXT_CLASSNAME = `k-breadcrumb-item-text`;
-var BreadcrumbItemText = (props) => {
-  const {
-    text,
-    ...other
-  } = props;
-  const textOrChildren = text ? text : props.children;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    "span",
-    {
-      ...other,
-      className: classNames(
-        props.className,
-        BREADCRUMBITEMTEXT_CLASSNAME
-      ),
-      children: textOrChildren
-    }
-  );
-};
+// src/breadcrumb/templates/breadcrumb-root-adaptive.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
 
-// src/breadcrumb/tests/breadcrumb-adaptive.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var breadcrumb_adaptive_default = () => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { id: "test-area", className: "k-d-grid k-grid-cols-2", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: "with root item" }),
-  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: "without root item" }),
-  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Breadcrumb, { collapsing: "wrap", size: "large", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(BreadcrumbRootItemContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(BreadcrumbItem, { root: true, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(BreadcrumbLink, { root: true, icontext: true, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { icon: "home" }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(BreadcrumbItemText, { text: "Start item" })
-    ] }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(BreadcrumbContainer, { collapsing: "wrap", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(BreadcrumbItem, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-right", size: "xsmall" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(BreadcrumbItem, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-right", size: "xsmall" }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(BreadcrumbItemText, { text: "Item 03" }) })
+// src/breadcrumb/templates/breadcrumb-adaptive.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var BreadcrumbAdaptive = ({ collapsing, ...other }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  Breadcrumb,
+  {
+    collapsing,
+    children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(BreadcrumbContainer, { collapsing, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(BreadcrumbItem, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(BreadcrumbItemText, { text: "Item 01" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-right", size: "xsmall" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(BreadcrumbItem, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-right", size: "xsmall" }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(BreadcrumbItemText, { text: "Item 04" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(BreadcrumbItem, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-right", size: "xsmall" }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(BreadcrumbItemText, { text: "Item 04" }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(BreadcrumbItem, { last: true, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-right", size: "xsmall" }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(BreadcrumbItemText, { text: "Item 05" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(BreadcrumbItem, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-right", size: "xsmall" }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(BreadcrumbItemText, { text: "Item 05" }) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(BreadcrumbItem, { last: true, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-right", size: "xsmall" }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(BreadcrumbItemText, { text: "Item 06" }) })
       ] })
-    ] })
-  ] }) }),
-  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Breadcrumb, { collapsing: "wrap", size: "large", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(BreadcrumbContainer, { collapsing: "wrap", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(BreadcrumbItem, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(BreadcrumbItemText, { text: "Item 01" }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(BreadcrumbItem, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-right", size: "xsmall" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(BreadcrumbItem, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-right", size: "xsmall" }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(BreadcrumbItemText, { text: "Item 04" }) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(BreadcrumbItem, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-right", size: "xsmall" }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(BreadcrumbItemText, { text: "Item 05" }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(BreadcrumbItem, { last: true, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-right", size: "xsmall" }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(BreadcrumbItemText, { text: "Item 06" }) })
-    ] })
-  ] }) }) })
-] }) });
+    ...other
+  }
+);