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

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

@@ -86,19 +86,6 @@ var Size = {
   "xxlarge": "xxlarge",
   "xxxlarge": "xxxlarge"
 };
-var Roundness = {
-  "small": "small",
-  "medium": "medium",
-  "large": "large",
-  "full": "full"
-};
-var FillMode = {
-  "solid": "solid",
-  "flat": "flat",
-  "outline": "outline",
-  "clear": "clear",
-  "link": "link"
-};
 var ThemeColor = {
   "inherit": "inherit",
   "base": "base",
@@ -130,11 +117,199 @@ 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");
+var BREADCRUMBROOTITEMCONTAINER_CLASSNAME = `k-breadcrumb-root-item-container`;
+var BreadcrumbRootItemContainer = (props) => {
+  const {
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "ol",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        BREADCRUMBROOTITEMCONTAINER_CLASSNAME
+      ),
+      children: props.children
+    }
+  );
+};
+
+// 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,
@@ -149,7 +324,7 @@ var options = {
     ThemeColor.dark
   ]
 };
-var defaultProps = {};
+var defaultProps3 = {};
 var FontIcon = (props) => {
   const {
     size,
@@ -160,9 +335,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,
@@ -183,17 +358,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,
@@ -208,7 +383,7 @@ var options2 = {
     ThemeColor.dark
   ]
 };
-var defaultProps2 = {
+var defaultProps4 = {
   viewBox: "0 0 24 24"
 };
 var SvgIcon = (props) => {
@@ -217,15 +392,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,
@@ -238,7 +413,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,
@@ -256,7 +431,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,
@@ -270,10 +445,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
@@ -4272,13 +4447,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,
@@ -4293,7 +4468,7 @@ var options3 = {
     ThemeColor.dark
   ]
 };
-var defaultProps3 = {
+var defaultProps5 = {
   viewBox: "0 0 24 24",
   type: "svg"
 };
@@ -4302,952 +4477,301 @@ 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/input/input.spec.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var INPUT_CLASSNAME = `k-input`;
-var states4 = [
-  States.hover,
-  States.focus,
-  States.valid,
-  States.invalid,
-  States.required,
-  States.disabled,
-  States.loading,
-  States.readonly
-];
-var options4 = {
-  size: [Size.small, Size.medium, Size.large],
-  rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
-  fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
-};
-var defaultProps4 = {
-  size: Size.medium,
-  rounded: Size.medium,
-  fillMode: FillMode.solid
-};
-var Input = (props) => {
-  const {
-    hover,
-    focus,
-    disabled,
-    invalid,
-    valid,
-    loading,
-    readonly,
-    size = defaultProps4.size,
-    rounded = defaultProps4.rounded,
-    fillMode = defaultProps4.fillMode,
+// src/breadcrumb/templates/breadcrumb-normal.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var BreadcrumbNormal = ({ collapsing, ...other }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  Breadcrumb,
+  {
+    collapsing,
+    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(BreadcrumbContainer, { collapsing, 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.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 02" }) })
+      ] }),
+      /* @__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" }) })
+      ] }),
+      /* @__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 04" }) })
+      ] })
+    ] }),
     ...other
-  } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    "span",
-    {
-      ...other,
-      className: classNames(
-        props.className,
-        INPUT_CLASSNAME,
-        optionClassNames(INPUT_CLASSNAME, { size, rounded, fillMode }),
-        stateClassNames(INPUT_CLASSNAME, { hover, focus, disabled, invalid, valid, loading, readonly })
-      )
-    }
-  );
-};
-Input.states = states4;
-Input.options = options4;
-Input.className = INPUT_CLASSNAME;
-Input.defaultProps = defaultProps4;
+  }
+);
 
-// src/input/picker.spec.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var PICKER_CLASSNAME = `k-picker`;
-var pickerStates = [
-  States.hover,
-  States.focus,
-  States.valid,
-  States.invalid,
-  States.required,
-  States.disabled,
-  States.loading,
-  States.readonly
-];
-var pickerOptions = {
-  size: [Size.small, Size.medium, Size.large],
-  rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
-  fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
-};
-var defaultProps5 = {
-  size: Size.medium,
-  rounded: Roundness.medium,
-  fillMode: FillMode.solid
-};
-var Picker = (props) => {
-  const {
-    hover,
-    focus,
-    disabled,
-    invalid,
-    valid,
-    loading,
-    readonly,
-    size = defaultProps5.size,
-    rounded = defaultProps5.rounded,
-    fillMode = defaultProps5.fillMode,
+// src/breadcrumb/templates/breadcrumb-adaptive.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var BreadcrumbAdaptive = ({ collapsing, ...other }) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  Breadcrumb,
+  {
+    collapsing,
+    children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(BreadcrumbContainer, { collapsing, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(BreadcrumbItem, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(BreadcrumbItemText, { text: "Item 01" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-right", size: "xsmall" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(BreadcrumbItem, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-right", size: "xsmall" }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(BreadcrumbItemText, { text: "Item 04" }) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(BreadcrumbItem, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-right", size: "xsmall" }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(BreadcrumbItemText, { text: "Item 05" }) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(BreadcrumbItem, { last: true, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-right", size: "xsmall" }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(BreadcrumbItemText, { text: "Item 06" }) })
+      ] })
+    ] }),
     ...other
-  } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    "span",
-    {
-      ...other,
-      className: classNames(
-        props.className,
-        PICKER_CLASSNAME,
-        optionClassNames(PICKER_CLASSNAME, { size, rounded, fillMode }),
-        stateClassNames(PICKER_CLASSNAME, { hover, focus, disabled, invalid, valid, loading, readonly })
-      ),
-      children: props.children
-    }
-  );
-};
-Picker.states = pickerStates;
-Picker.options = pickerOptions;
-Picker.className = PICKER_CLASSNAME;
-Picker.defaultProps = defaultProps5;
-
-// src/input/input-clear-value.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var className = `k-clear-value`;
-var states5 = [
-  States.disabled,
-  States.loading,
-  States.readonly
-];
-var options5 = {};
-var InputClearValue = (props) => {
-  const {
-    disabled,
-    loading,
-    readonly,
-    value
-  } = props;
-  if (disabled || readonly || loading || !value) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, {});
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: classNames(props.className, className), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { icon: "x" }) });
-};
-InputClearValue.states = states5;
-InputClearValue.options = options5;
-InputClearValue.className = className;
-
-// src/input/input-inner-input.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var className2 = `k-input-inner`;
-var states6 = [];
-var options6 = {};
-var defaultProps6 = {
-  type: "text",
-  autocomplete: "off",
-  value: "",
-  placeholder: ""
-};
-var InputInnerInput = (props) => {
-  const {
-    value = defaultProps6.value,
-    type = defaultProps6.type,
-    placeholder = defaultProps6.placeholder,
-    autocomplete = defaultProps6.autocomplete,
-    ...other
-  } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    "input",
-    {
-      ...other,
-      type,
-      className: classNames(props.className, className2, optionClassNames(className2, props)),
-      placeholder,
-      autoComplete: autocomplete,
-      defaultValue: value
-    }
-  );
-};
-InputInnerInput.states = states6;
-InputInnerInput.options = options6;
-InputInnerInput.className = className2;
-
-// src/input/input-inner-span.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var className3 = `k-input-inner`;
-var states7 = [];
-var options7 = {};
-var InputInnerSpan = (props) => {
-  const {
-    value,
-    placeholder,
-    showValue,
-    valueIcon,
-    valueIconName,
-    ...other
-  } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-    "span",
-    {
-      ...other,
-      className: classNames(props.className, className3, optionClassNames(className3, props)),
-      children: [
-        valueIcon,
-        !valueIcon && valueIconName && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { className: "k-input-value-icon", icon: valueIconName }),
-        showValue && !value && placeholder,
-        showValue && value && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "k-input-value-text", children: value })
-      ]
-    }
-  );
-};
-InputInnerSpan.states = states7;
-InputInnerSpan.options = options7;
-InputInnerSpan.className = className3;
-
-// src/input/input-inner-textarea.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var defaultProps7 = {
-  value: "",
-  placeholder: ""
-};
-var className4 = `k-input-inner`;
-var states8 = [];
-var options8 = {};
-var InputInnerTextarea = (props) => {
-  const {
-    value = defaultProps7.value,
-    placeholder = defaultProps7.placeholder,
-    rows,
-    ...other
-  } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-    "textarea",
-    {
-      ...other,
-      className: classNames(props.className, className4, optionClassNames(className4, props)),
-      placeholder,
-      rows,
-      children: value
-    }
-  );
-};
-InputInnerTextarea.states = states8;
-InputInnerTextarea.options = options8;
-InputInnerTextarea.className = className4;
-
-// src/input/input-loading-icon.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var className5 = `k-input-loading-icon`;
-var states9 = [
-  States.disabled,
-  States.loading
-];
-var InputLoadingIcon = (props) => {
-  const {
-    disabled,
-    loading
-  } = props;
-  if (disabled || !loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, {});
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: classNames(props.className, className5, "k-icon k-i-loading") });
-};
-
-// src/input/input-validation-icon.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var className6 = `k-input-validation-icon`;
-var states10 = [
-  States.valid,
-  States.invalid,
-  States.disabled,
-  States.loading
-];
-var options9 = {};
-var InputValidationIcon = (props) => {
-  const {
-    valid,
-    invalid,
-    disabled,
-    loading
-  } = props;
-  const iconName = invalid ? "exclamation-circle" : "check";
-  const renderValidationIcon = Boolean(valid || invalid);
-  if (disabled || loading || !renderValidationIcon) {
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, {});
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { className: classNames(className6), icon: iconName });
-};
-InputValidationIcon.states = states10;
-InputValidationIcon.options = options9;
-InputValidationIcon.className = className6;
-
-// src/input/input-prefix.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var className7 = `k-input-prefix`;
-var InputPrefix = (props) => {
-  if (!props.children) {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, {});
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: classNames(className7, props.className), children: props.children });
-};
+);
 
-// src/input/input-suffix.tsx
+// src/breadcrumb/templates/breadcrumb-root.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var className8 = `k-input-suffix`;
-var InputSuffix = (props) => {
-  if (!props.children) {
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, {});
+var BreadcrumbRoot = ({ collapsing, ...other }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  Breadcrumb,
+  {
+    collapsing,
+    children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(BreadcrumbRootItemContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(BreadcrumbItem, { root: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(BreadcrumbLink, { root: true, icontext: true, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { icon: "home" }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(BreadcrumbItemText, { text: "Start item" })
+      ] }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(BreadcrumbContainer, { collapsing, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(BreadcrumbItem, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-right", size: "xsmall" }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(BreadcrumbItemText, { text: "Item 01" }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(BreadcrumbItem, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-right", size: "xsmall" }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(BreadcrumbItemText, { text: "Item 02" }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(BreadcrumbItem, { last: true, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-right", size: "xsmall" }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(BreadcrumbItemText, { text: "Item 03" }) })
+        ] })
+      ] })
+    ] }),
+    ...other
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: classNames(className8, props.className), children: props.children });
-};
+);
 
-// src/input/input-separator.tsx
+// src/breadcrumb/templates/breadcrumb-root-adaptive.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
-
-// src/textbox/textbox.spec.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var TEXTBOX_CLASSNAME = `k-textbox`;
-var states11 = [
-  States.hover,
-  States.focus,
-  States.valid,
-  States.invalid,
-  States.required,
-  States.disabled,
-  States.loading,
-  States.readonly
-];
-var options10 = {
-  size: [Size.small, Size.medium, Size.large],
-  rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
-  fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
-};
-var defaultProps8 = {
-  showClearButton: true,
-  size: Input.defaultProps.size,
-  rounded: Input.defaultProps.rounded,
-  fillMode: Input.defaultProps.fillMode
-};
-var Textbox = (props) => {
-  const {
-    prefix,
-    suffix,
-    value,
-    placeholder,
-    size,
-    rounded,
-    fillMode,
-    hover,
-    focus,
-    valid,
-    invalid,
-    required,
-    loading,
-    disabled,
-    readonly,
-    showClearButton = defaultProps8.showClearButton,
-    ...other
-  } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-    Input,
-    {
-      ...other,
-      size,
-      rounded,
-      fillMode,
-      hover,
-      focus,
-      valid,
-      invalid,
-      required,
-      loading,
-      disabled,
-      readonly,
-      className: classNames(props.className, TEXTBOX_CLASSNAME),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(InputPrefix, { children: prefix }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(InputInnerInput, { placeholder, value }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          InputValidationIcon,
-          {
-            valid,
-            invalid,
-            loading,
-            disabled
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          InputLoadingIcon,
-          {
-            loading,
-            disabled
-          }
-        ),
-        showClearButton && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          InputClearValue,
-          {
-            loading,
-            disabled,
-            readonly,
-            value
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(InputSuffix, { children: suffix })
-      ]
-    }
-  );
-};
-Textbox.states = states11;
-Textbox.options = options10;
-Textbox.className = TEXTBOX_CLASSNAME;
-Textbox.defaultProps = defaultProps8;
-
-// src/textbox/templates/textbox-normal.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
-
-// src/button/button.spec.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var BUTTON_CLASSNAME = `k-button`;
-var states12 = [
-  States.hover,
-  States.focus,
-  States.active,
-  States.selected,
-  States.disabled
-];
-var options11 = {
-  size: [Size.small, Size.medium, Size.large],
-  rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
-  fillMode: [FillMode.solid, FillMode.flat, FillMode.outline, FillMode.clear, FillMode.link],
-  themeColor: [
-    ThemeColor.base,
-    ThemeColor.primary,
-    ThemeColor.secondary,
-    ThemeColor.tertiary,
-    ThemeColor.success,
-    ThemeColor.warning,
-    ThemeColor.error,
-    ThemeColor.info,
-    ThemeColor.light,
-    ThemeColor.dark,
-    ThemeColor.inverse
-  ]
-};
-var defaultProps9 = {
-  size: Size.medium,
-  rounded: Roundness.medium,
-  fillMode: FillMode.solid,
-  themeColor: ThemeColor.base,
-  showArrow: false,
-  arrowIconName: "caret-alt-down"
-};
-var Button = (props) => {
-  const {
-    size = defaultProps9.size,
-    rounded = defaultProps9.rounded,
-    fillMode = defaultProps9.fillMode,
-    themeColor = defaultProps9.themeColor,
-    hover,
-    focus,
-    active,
-    selected,
-    disabled,
-    icon,
-    text,
-    iconClassName,
-    showArrow = defaultProps9.showArrow,
-    arrowIconName = defaultProps9.arrowIconName,
-    ...other
-  } = props;
-  const hasIcon = icon !== void 0;
-  const hasChildren = props.children !== void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
-    "button",
-    {
-      ...other,
-      className: classNames(
-        props.className,
-        BUTTON_CLASSNAME,
-        optionClassNames(BUTTON_CLASSNAME, {
-          size,
-          rounded,
-          fillMode,
-          themeColor
-        }),
-        stateClassNames(BUTTON_CLASSNAME, {
-          hover,
-          focus,
-          active,
-          disabled,
-          selected
-        }),
-        {
-          ["k-icon-button"]: !text && !hasChildren && hasIcon
-        }
-      ),
-      children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-          Icon,
-          {
-            className: classNames(iconClassName, "k-button-icon"),
-            icon
-          }
-        ),
-        text ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-          text && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "k-button-text", children: text }),
-          props.children
-        ] }) : props.children && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "k-button-text", children: props.children }),
-        showArrow && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "k-menu-button-arrow k-button-arrow", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon, { icon: arrowIconName }) })
-      ]
-    }
-  );
-};
-Button.states = states12;
-Button.options = options11;
-Button.className = BUTTON_CLASSNAME;
-Button.defaultProps = defaultProps9;
-
-// src/button/templates/icon-button.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
-
-// src/button/templates/icon-text-button.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
-
-// src/button/templates/text-button.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
-
-// src/textbox/templates/textbox-prefix.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
-
-// src/textbox/templates/textbox-suffix.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
-
-// src/breadcrumb/breadcrumb.spec.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
-var BREADCRUMB_CLASSNAME = `k-breadcrumb`;
-var states13 = [
-  States.focus
-];
-var options12 = {
-  size: [Size.small, Size.medium, Size.large]
-};
-var defaultProps10 = {
-  collapsing: "auto",
-  size: Size.medium
-};
-var Breadcrumb = (props) => {
-  const {
-    size = defaultProps10.size,
-    collapsing = defaultProps10.collapsing,
-    focus,
-    ...other
-  } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime23.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 = states13;
-Breadcrumb.options = options12;
-Breadcrumb.className = BREADCRUMB_CLASSNAME;
-Breadcrumb.defaultProps = defaultProps10;
-
-// src/breadcrumb/breadcrumb-root-item-container.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
-var BREADCRUMBROOTITEMCONTAINER_CLASSNAME = `k-breadcrumb-root-item-container`;
-var BreadcrumbRootItemContainer = (props) => {
-  const {
-    ...other
-  } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-    "ol",
-    {
-      ...other,
-      className: classNames(
-        props.className,
-        BREADCRUMBROOTITEMCONTAINER_CLASSNAME
-      ),
-      children: props.children
-    }
-  );
-};
-
-// src/breadcrumb/breadcrumb-input-container.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var BREADCRUMBINPUTCONTAINER_CLASSNAME = `k-breadcrumb-input-container`;
-var BreadcrumbInputContainer = (props) => {
-  const {
-    ...other
-  } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-    "div",
-    {
-      ...other,
-      className: classNames(
-        props.className,
-        BREADCRUMBINPUTCONTAINER_CLASSNAME
-      ),
-      children: props.children
-    }
-  );
-};
-
-// src/breadcrumb/breadcrumb-container.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var BREADCRUMBCONTAINER_CLASSNAME = `k-breadcrumb-container`;
-var defaultProps11 = {
-  collapsing: "auto"
-};
-var BreadcrumbContainer = (props) => {
-  const {
-    collapsing = defaultProps11.collapsing,
-    ...other
-  } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime26.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_runtime27 = require("react/jsx-runtime");
-var BREADCRUMBITEM_CLASSNAME = `k-breadcrumb-item`;
-var BreadcrumbItem = (props) => {
-  const {
-    root,
-    last,
-    ...other
-  } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime27.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_runtime28 = require("react/jsx-runtime");
-var BREADCRUMBLINK_CLASSNAME = ``;
-var states14 = [
-  States.hover,
-  States.focus,
-  States.disabled
-];
-var BreadcrumbLink = (props) => {
-  const {
-    root,
-    icon,
-    icontext,
-    hover,
-    focus,
-    disabled,
-    ...other
-  } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime28.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/breadcrumb-item-text.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
-var BREADCRUMBITEMTEXT_CLASSNAME = `k-breadcrumb-item-text`;
-var BreadcrumbItemText = (props) => {
-  const {
-    text,
+var BreadcrumbRootAdaptive = ({ collapsing, ...other }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  Breadcrumb,
+  {
+    collapsing,
+    children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(BreadcrumbRootItemContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(BreadcrumbItem, { root: true, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(BreadcrumbLink, { root: true, icontext: true, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { icon: "home" }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(BreadcrumbItemText, { text: "Start item" })
+      ] }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(BreadcrumbContainer, { collapsing, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(BreadcrumbItem, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-right", size: "xsmall" }) }),
+        /* @__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 03" }) })
+        ] }),
+        /* @__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_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 05" }) })
+        ] })
+      ] })
+    ] }),
     ...other
-  } = props;
-  const textOrChildren = text ? text : props.children;
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-    "span",
-    {
-      ...other,
-      className: classNames(
-        props.className,
-        BREADCRUMBITEMTEXT_CLASSNAME
-      ),
-      children: textOrChildren
-    }
-  );
-};
+  }
+);
 
 // src/breadcrumb/tests/breadcrumb-rtl.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
-var breadcrumb_rtl_default = () => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_jsx_runtime30.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { id: "test-area", className: "k-d-grid k-grid-cols-2 k-rtl", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "k-colspan-all k-col-span-full", children: "Wrapping" }),
-  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Breadcrumb, { collapsing: "wrap", style: { width: "400px" }, dir: "rtl", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbRootItemContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbItem, { root: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(BreadcrumbLink, { root: true, icontext: true, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { icon: "home" }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbItemText, { text: "Start item" })
-    ] }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(BreadcrumbContainer, { collapsing: "wrap", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(BreadcrumbItem, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(BreadcrumbLink, { disabled: true, icontext: true, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { icon: "clock" }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbItemText, { text: "First item" })
-        ] })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(BreadcrumbItem, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(BreadcrumbLink, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("img", { className: "k-image", src: "/packages/html/assets/avatar.jpg", width: "20", height: "20" }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbItemText, { text: "Second item" })
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var styles = `
+    #test-area {
+        grid-template-columns: 80px repeat(2, 1fr);
+    }
+`;
+var breadcrumb_rtl_default = () => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("style", { children: styles }),
+  /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { id: "test-area", className: "k-d-grid k-grid-cols-3 k-rtl", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", {}),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: "Collapsing with root item" }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: "Collapsing without root item" }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: "none" }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(BreadcrumbRoot, { collapsing: "none", size: "large", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbRootItemContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbItem, { root: true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(BreadcrumbLink, { root: true, icontext: true, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { icon: "home" }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbItemText, { text: "Start item" })
+      ] }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(BreadcrumbContainer, { collapsing: "none", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(BreadcrumbItem, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbItemText, { text: "Item 01" }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(BreadcrumbItem, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbItemText, { text: "Item 02" }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(BreadcrumbItem, { last: true, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbItemText, { text: "Item 03" }) })
         ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbNormal, { collapsing: "none", size: "large", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(BreadcrumbContainer, { collapsing: "none", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbItem, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbItemText, { text: "Item 01" }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(BreadcrumbItem, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbItemText, { text: "Item 02" }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(BreadcrumbItem, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbItemText, { text: "Third item" }) })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(BreadcrumbItem, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbLink, { icon: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { icon: "clock" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(BreadcrumbItem, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbItemText, { text: "Item 03" }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(BreadcrumbItem, { last: true, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbLink, { disabled: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbItemText, { text: "Fifth item" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(BreadcrumbItem, { last: true, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbItemText, { text: "Item 04" }) })
       ] })
-    ] })
-  ] }) }),
-  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Breadcrumb, { collapsing: "wrap", style: { width: "400px" }, dir: "rtl", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbRootItemContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbItem, { root: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbLink, { root: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbItemText, { text: "Start item" }) }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(BreadcrumbContainer, { collapsing: "wrap", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(BreadcrumbItem, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(BreadcrumbLink, { disabled: true, icontext: true, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { icon: "clock" }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbItemText, { text: "First item" })
-        ] })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(BreadcrumbItem, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(BreadcrumbLink, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("img", { className: "k-image", src: "/packages/html/assets/avatar.jpg", width: "20", height: "20" }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbItemText, { text: "Second item" })
+    ] }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: "auto" }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(BreadcrumbRootAdaptive, { size: "large", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbRootItemContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbItem, { root: true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(BreadcrumbLink, { root: true, icontext: true, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { icon: "home" }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbItemText, { text: "Start item" })
+      ] }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(BreadcrumbContainer, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbItem, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(BreadcrumbItem, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbItemText, { text: "Item 03" }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(BreadcrumbItem, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbItemText, { text: "Item 04" }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(BreadcrumbItem, { last: true, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbItemText, { text: "Item 05" }) })
         ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbAdaptive, { size: "large", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(BreadcrumbContainer, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(BreadcrumbItem, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbItemText, { text: "Item 01" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(BreadcrumbItem, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbItemText, { text: "Third item" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(BreadcrumbItem, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbItemText, { text: "Item 04" }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(BreadcrumbItem, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbLink, { icon: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { icon: "clock" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(BreadcrumbItem, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbItemText, { text: "Item 05" }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(BreadcrumbItem, { last: true, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbLink, { disabled: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbItemText, { text: "Fifth item" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(BreadcrumbItem, { last: true, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbItemText, { text: "Item 06" }) })
       ] })
-    ] })
-  ] }) }),
-  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Breadcrumb, { collapsing: "wrap", style: { width: "400px" }, dir: "rtl", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbRootItemContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbItem, { root: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbLink, { root: true, icon: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { icon: "home" }) }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(BreadcrumbContainer, { collapsing: "wrap", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(BreadcrumbItem, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(BreadcrumbLink, { disabled: true, icontext: true, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { icon: "clock" }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbItemText, { text: "First item" })
+    ] }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: "wrap" }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(BreadcrumbRoot, { collapsing: "wrap", size: "large", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbRootItemContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbItem, { root: true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(BreadcrumbLink, { root: true, icontext: true, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { icon: "home" }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbItemText, { text: "Start item" })
+      ] }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(BreadcrumbContainer, { collapsing: "wrap", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(BreadcrumbItem, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbItemText, { text: "Item 01" }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(BreadcrumbItem, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbItemText, { text: "Item 02" }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(BreadcrumbItem, { last: true, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbItemText, { text: "Item 03" }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(BreadcrumbItem, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbItemText, { text: "Item 04" }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(BreadcrumbItem, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbItemText, { text: "Item 05" }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(BreadcrumbItem, { last: true, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbItemText, { text: "Item 06" }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(BreadcrumbItem, { last: true, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbItemText, { text: "Item 07" }) })
         ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbNormal, { collapsing: "wrap", size: "large", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(BreadcrumbContainer, { collapsing: "wrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbItem, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbItemText, { text: "Item 01" }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(BreadcrumbItem, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbItemText, { text: "Item 02" }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(BreadcrumbItem, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(BreadcrumbLink, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("img", { className: "k-image", src: "/packages/html/assets/avatar.jpg", width: "20", height: "20" }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbItemText, { text: "Second item" })
-        ] })
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(BreadcrumbItem, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbItemText, { text: "Item 03" }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(BreadcrumbItem, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbItemText, { text: "Third item" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(BreadcrumbItem, { last: true, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbItemText, { text: "Item 04" }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(BreadcrumbItem, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbLink, { icon: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { icon: "clock" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(BreadcrumbItem, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbItemText, { text: "Item 05" }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(BreadcrumbItem, { last: true, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbLink, { disabled: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbItemText, { text: "Fifth item" }) })
-      ] })
-    ] })
-  ] }) }),
-  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "k-colspan-all k-col-span-full", children: "Navigation Mode" }),
-  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Breadcrumb, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(BreadcrumbContainer, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(BreadcrumbItem, { root: true, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbLink, { root: true, icon: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { icon: "home" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(BreadcrumbItem, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbItemText, { text: "First item" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(BreadcrumbItem, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbItemText, { text: "Second item" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbItem, { last: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbLink, { disabled: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbItemText, { text: "Third item" }) }) })
-  ] }) }) }),
-  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Breadcrumb, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(BreadcrumbContainer, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(BreadcrumbItem, { root: true, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbLink, { root: true, icon: true, focus: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { icon: "home" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(BreadcrumbItem, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbLink, { focus: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbItemText, { text: "First item" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(BreadcrumbItem, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbItemText, { text: "Second item" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbItem, { last: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbLink, { disabled: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbItemText, { text: "Third item" }) }) })
-  ] }) }) }),
-  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Breadcrumb, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(BreadcrumbContainer, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(BreadcrumbItem, { root: true, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbLink, { root: true, icon: true, hover: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { icon: "home" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(BreadcrumbItem, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbLink, { hover: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbItemText, { text: "First item" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(BreadcrumbItem, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbItemText, { text: "Second item" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbItem, { last: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbLink, { disabled: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbItemText, { text: "Third item" }) }) })
-  ] }) }) }),
-  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Breadcrumb, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(BreadcrumbContainer, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(BreadcrumbItem, { root: true, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbLink, { root: true, icon: true, hover: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { icon: "home" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(BreadcrumbItem, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(BreadcrumbLink, { icontext: true, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { icon: "cloud" }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbItemText, { text: "First item" })
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(BreadcrumbItem, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbItemText, { text: "Item 06" }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(BreadcrumbItem, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbLink, { icon: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { icon: "camera" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbItem, { last: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbLink, { disabled: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbItemText, { text: "Third item" }) }) })
-  ] }) }) }),
-  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "k-colspan-all k-col-span-full", children: "Edit Mode" }),
-  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Breadcrumb, { focus: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(BreadcrumbContainer, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(BreadcrumbItem, { root: true, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbLink, { root: true, icon: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { icon: "home" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(BreadcrumbItem, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbItemText, { text: "First item" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(BreadcrumbItem, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbItemText, { text: "Second item" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbItem, { last: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbLink, { disabled: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbItemText, { text: "Third item" }) }) })
-  ] }) }) }),
-  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Breadcrumb, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbInputContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Textbox, { showClearButton: false, value: "First item/Second item/Breadcrumb Pattern/Third item" }) }) }) }),
-  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "k-colspan-all k-col-span-full", children: "Overflow" }),
-  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Breadcrumb, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(BreadcrumbContainer, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(BreadcrumbItem, { root: true, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbLink, { root: true, icon: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { icon: "home" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon k-breadcrumb-overflow-icon", icon: "chevron-left" }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon k-breadcrumb-overflow-icon", icon: "chevron-left" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(BreadcrumbItem, { hidden: true, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbItemText, { text: "First item" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(BreadcrumbItem, { hidden: true, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbItemText, { text: "Second item" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbItem, { last: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbLink, { disabled: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BreadcrumbItemText, { text: "Breadcrumb item " }) }) })
-  ] }) }) })
-] }) });
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(BreadcrumbItem, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbItemText, { text: "Item 07" }) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(BreadcrumbItem, { last: true, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbLink, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BreadcrumbItemText, { text: "Item 08" }) })
+      ] })
+    ] }) }) })
+  ] })
+] });