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

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

@@ -67,19 +67,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",
@@ -111,11 +98,199 @@ var States = {
   "readonly": "readonly"
 };
 
+// src/breadcrumb/breadcrumb.spec.tsx
+import { jsx } from "react/jsx-runtime";
+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__ */ 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
+import { jsx as jsx2 } from "react/jsx-runtime";
+var BREADCRUMBROOTITEMCONTAINER_CLASSNAME = `k-breadcrumb-root-item-container`;
+var BreadcrumbRootItemContainer = (props) => {
+  const {
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx2(
+    "ol",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        BREADCRUMBROOTITEMCONTAINER_CLASSNAME
+      ),
+      children: props.children
+    }
+  );
+};
+
+// src/breadcrumb/breadcrumb-input-container.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+
+// src/breadcrumb/breadcrumb-container.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var BREADCRUMBCONTAINER_CLASSNAME = `k-breadcrumb-container`;
+var defaultProps2 = {
+  collapsing: "auto"
+};
+var BreadcrumbContainer = (props) => {
+  const {
+    collapsing = defaultProps2.collapsing,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx4(
+    "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
+import { jsx as jsx5 } from "react/jsx-runtime";
+var BREADCRUMBITEM_CLASSNAME = `k-breadcrumb-item`;
+var BreadcrumbItem = (props) => {
+  const {
+    root,
+    last,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx5(
+    "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
+import { jsx as jsx6 } from "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__ */ jsx6(
+    "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
+import { jsx as jsx7 } from "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__ */ jsx7(
+    "span",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        BREADCRUMBITEMTEXT_CLASSNAME
+      ),
+      children: textOrChildren
+    }
+  );
+};
+
 // src/icon/font-icon.spec.tsx
-import { Fragment, jsx } from "react/jsx-runtime";
+import { Fragment, jsx as jsx8 } from "react/jsx-runtime";
 var FONTICON_CLASSNAME = `k-icon k-font-icon`;
-var states = [];
-var options = {
+var states3 = [];
+var options2 = {
   size: [Size.xsmall, Size.small, Size.medium, Size.large, Size.xlarge, Size.xxlarge, Size.xxxlarge],
   themeColor: [
     ThemeColor.base,
@@ -130,7 +305,7 @@ var options = {
     ThemeColor.dark
   ]
 };
-var defaultProps = {};
+var defaultProps3 = {};
 var FontIcon = (props) => {
   const {
     size,
@@ -141,9 +316,9 @@ var FontIcon = (props) => {
     ...other
   } = props;
   if (!icon) {
-    return /* @__PURE__ */ jsx(Fragment, {});
+    return /* @__PURE__ */ jsx8(Fragment, {});
   }
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx8(
     "span",
     {
       ...other,
@@ -164,17 +339,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
-import { Fragment as Fragment2, jsx as jsx2 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx9 } from "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,
@@ -189,7 +364,7 @@ var options2 = {
     ThemeColor.dark
   ]
 };
-var defaultProps2 = {
+var defaultProps4 = {
   viewBox: "0 0 24 24"
 };
 var SvgIcon = (props) => {
@@ -198,15 +373,15 @@ var SvgIcon = (props) => {
     themeColor,
     rotate,
     flip,
-    viewBox = defaultProps2.viewBox,
+    viewBox = defaultProps4.viewBox,
     icon,
     ...other
   } = props;
   if (!icon) {
-    return /* @__PURE__ */ jsx2(Fragment2, {});
+    return /* @__PURE__ */ jsx9(Fragment2, {});
   }
   if (icon === "none") {
-    /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsx9(
       "span",
       {
         ...other,
@@ -219,7 +394,7 @@ var SvgIcon = (props) => {
     );
   }
   const name = typeof icon === "object" && icon.name && icon.name;
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx9(
     "span",
     {
       ...other,
@@ -237,7 +412,7 @@ var SvgIcon = (props) => {
           "k-flip-v": flip === "v" || flip === "both"
         }
       ),
-      children: /* @__PURE__ */ jsx2(
+      children: /* @__PURE__ */ jsx9(
         "svg",
         {
           "aria-hidden": true,
@@ -251,10 +426,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
@@ -4253,13 +4428,13 @@ var chartChoroplethIcon = {
 };
 
 // src/icon/icon.spec.tsx
-import { Fragment as Fragment3, jsx as jsx3 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx10 } from "react/jsx-runtime";
 var snakeToCamel = (str) => str.toLowerCase().replace(
   /([-_][a-z])/g,
   (group) => group.toUpperCase().replace("-", "").replace("_", "")
 );
-var states3 = [];
-var options3 = {
+var states5 = [];
+var options4 = {
   size: [Size.xsmall, Size.small, Size.medium, Size.large, Size.xlarge, Size.xxlarge, Size.xxxlarge],
   themeColor: [
     ThemeColor.base,
@@ -4274,7 +4449,7 @@ var options3 = {
     ThemeColor.dark
   ]
 };
-var defaultProps3 = {
+var defaultProps5 = {
   viewBox: "0 0 24 24",
   type: "svg"
 };
@@ -4283,955 +4458,304 @@ var Icon = (props) => {
     size,
     themeColor,
     icon,
-    type = defaultProps3.type,
+    type = defaultProps5.type,
     rotate,
     flip,
-    viewBox = defaultProps3.viewBox,
+    viewBox = defaultProps5.viewBox,
     ...other
   } = props;
   if (!icon) {
-    return /* @__PURE__ */ jsx3(Fragment3, {});
+    return /* @__PURE__ */ jsx10(Fragment3, {});
   }
   if (type === "svg") {
     if (icon === "none") {
-      return /* @__PURE__ */ jsx3(svg_icon_spec_default, { ...other, icon, size });
+      return /* @__PURE__ */ jsx10(svg_icon_spec_default, { ...other, icon, size });
     }
     const iconSVG = snakeToCamel(`${icon}-icon`);
     if (!index_es_exports[iconSVG]) {
-      return /* @__PURE__ */ jsx3(Fragment3, {});
+      return /* @__PURE__ */ jsx10(Fragment3, {});
     }
-    return /* @__PURE__ */ jsx3(svg_icon_spec_default, { ...other, icon: index_es_exports[iconSVG], size, themeColor, rotate, flip, viewBox });
+    return /* @__PURE__ */ jsx10(svg_icon_spec_default, { ...other, icon: index_es_exports[iconSVG], size, themeColor, rotate, flip, viewBox });
   }
-  return /* @__PURE__ */ jsx3(font_icon_spec_default, { ...other, icon, size, themeColor, rotate, flip });
+  return /* @__PURE__ */ jsx10(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
-import { jsx as jsx4 } from "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
+import { jsx as jsx11, jsxs } from "react/jsx-runtime";
+var BreadcrumbNormal = ({ collapsing, ...other }) => /* @__PURE__ */ jsx11(
+  Breadcrumb,
+  {
+    collapsing,
+    children: /* @__PURE__ */ jsxs(BreadcrumbContainer, { collapsing, children: [
+      /* @__PURE__ */ jsx11(BreadcrumbItem, { children: /* @__PURE__ */ jsx11(BreadcrumbLink, { children: /* @__PURE__ */ jsx11(BreadcrumbItemText, { text: "Item 01" }) }) }),
+      /* @__PURE__ */ jsxs(BreadcrumbItem, { children: [
+        /* @__PURE__ */ jsx11(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-right", size: "xsmall" }),
+        /* @__PURE__ */ jsx11(BreadcrumbLink, { children: /* @__PURE__ */ jsx11(BreadcrumbItemText, { text: "Item 02" }) })
+      ] }),
+      /* @__PURE__ */ jsxs(BreadcrumbItem, { children: [
+        /* @__PURE__ */ jsx11(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-right", size: "xsmall" }),
+        /* @__PURE__ */ jsx11(BreadcrumbLink, { children: /* @__PURE__ */ jsx11(BreadcrumbItemText, { text: "Item 03" }) })
+      ] }),
+      /* @__PURE__ */ jsxs(BreadcrumbItem, { last: true, children: [
+        /* @__PURE__ */ jsx11(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-right", size: "xsmall" }),
+        /* @__PURE__ */ jsx11(BreadcrumbLink, { children: /* @__PURE__ */ jsx11(BreadcrumbItemText, { text: "Item 04" }) })
+      ] })
+    ] }),
     ...other
-  } = props;
-  return /* @__PURE__ */ jsx4(
-    "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
-import { jsx as jsx5 } from "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
+import { jsx as jsx12, jsxs as jsxs2 } from "react/jsx-runtime";
+var BreadcrumbAdaptive = ({ collapsing, ...other }) => /* @__PURE__ */ jsx12(
+  Breadcrumb,
+  {
+    collapsing,
+    children: /* @__PURE__ */ jsxs2(BreadcrumbContainer, { collapsing, children: [
+      /* @__PURE__ */ jsxs2(BreadcrumbItem, { children: [
+        /* @__PURE__ */ jsx12(BreadcrumbLink, { children: /* @__PURE__ */ jsx12(BreadcrumbItemText, { text: "Item 01" }) }),
+        /* @__PURE__ */ jsx12(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-right", size: "xsmall" })
+      ] }),
+      /* @__PURE__ */ jsxs2(BreadcrumbItem, { children: [
+        /* @__PURE__ */ jsx12(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-right", size: "xsmall" }),
+        /* @__PURE__ */ jsx12(BreadcrumbLink, { children: /* @__PURE__ */ jsx12(BreadcrumbItemText, { text: "Item 04" }) })
+      ] }),
+      /* @__PURE__ */ jsxs2(BreadcrumbItem, { children: [
+        /* @__PURE__ */ jsx12(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-right", size: "xsmall" }),
+        /* @__PURE__ */ jsx12(BreadcrumbLink, { children: /* @__PURE__ */ jsx12(BreadcrumbItemText, { text: "Item 05" }) })
+      ] }),
+      /* @__PURE__ */ jsxs2(BreadcrumbItem, { last: true, children: [
+        /* @__PURE__ */ jsx12(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-right", size: "xsmall" }),
+        /* @__PURE__ */ jsx12(BreadcrumbLink, { children: /* @__PURE__ */ jsx12(BreadcrumbItemText, { text: "Item 06" }) })
+      ] })
+    ] }),
     ...other
-  } = props;
-  return /* @__PURE__ */ jsx5(
-    "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
-import { Fragment as Fragment4, jsx as jsx6 } from "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__ */ jsx6(Fragment4, {});
   }
-  return /* @__PURE__ */ jsx6("span", { className: classNames(props.className, className), children: /* @__PURE__ */ jsx6(Icon, { icon: "x" }) });
-};
-InputClearValue.states = states5;
-InputClearValue.options = options5;
-InputClearValue.className = className;
+);
 
-// src/input/input-inner-input.tsx
-import { jsx as jsx7 } from "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__ */ jsx7(
-    "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
-import { jsx as jsx8, jsxs } from "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__ */ jsxs(
-    "span",
-    {
-      ...other,
-      className: classNames(props.className, className3, optionClassNames(className3, props)),
-      children: [
-        valueIcon,
-        !valueIcon && valueIconName && /* @__PURE__ */ jsx8(Icon, { className: "k-input-value-icon", icon: valueIconName }),
-        showValue && !value && placeholder,
-        showValue && value && /* @__PURE__ */ jsx8("span", { className: "k-input-value-text", children: value })
-      ]
-    }
-  );
-};
-InputInnerSpan.states = states7;
-InputInnerSpan.options = options7;
-InputInnerSpan.className = className3;
-
-// src/input/input-inner-textarea.tsx
-import { jsx as jsx9 } from "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,
+// src/breadcrumb/templates/breadcrumb-root.tsx
+import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs3 } from "react/jsx-runtime";
+var BreadcrumbRoot = ({ collapsing, ...other }) => /* @__PURE__ */ jsx13(
+  Breadcrumb,
+  {
+    collapsing,
+    children: /* @__PURE__ */ jsxs3(Fragment4, { children: [
+      /* @__PURE__ */ jsx13(BreadcrumbRootItemContainer, { children: /* @__PURE__ */ jsx13(BreadcrumbItem, { root: true, children: /* @__PURE__ */ jsxs3(BreadcrumbLink, { root: true, icontext: true, children: [
+        /* @__PURE__ */ jsx13(Icon, { icon: "home" }),
+        /* @__PURE__ */ jsx13(BreadcrumbItemText, { text: "Start item" })
+      ] }) }) }),
+      /* @__PURE__ */ jsxs3(BreadcrumbContainer, { collapsing, children: [
+        /* @__PURE__ */ jsxs3(BreadcrumbItem, { children: [
+          /* @__PURE__ */ jsx13(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-right", size: "xsmall" }),
+          /* @__PURE__ */ jsx13(BreadcrumbLink, { children: /* @__PURE__ */ jsx13(BreadcrumbItemText, { text: "Item 01" }) })
+        ] }),
+        /* @__PURE__ */ jsxs3(BreadcrumbItem, { children: [
+          /* @__PURE__ */ jsx13(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-right", size: "xsmall" }),
+          /* @__PURE__ */ jsx13(BreadcrumbLink, { children: /* @__PURE__ */ jsx13(BreadcrumbItemText, { text: "Item 02" }) })
+        ] }),
+        /* @__PURE__ */ jsxs3(BreadcrumbItem, { last: true, children: [
+          /* @__PURE__ */ jsx13(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-right", size: "xsmall" }),
+          /* @__PURE__ */ jsx13(BreadcrumbLink, { children: /* @__PURE__ */ jsx13(BreadcrumbItemText, { text: "Item 03" }) })
+        ] })
+      ] })
+    ] }),
     ...other
-  } = props;
-  return /* @__PURE__ */ jsx9(
-    "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
-import { Fragment as Fragment5, jsx as jsx10 } from "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__ */ jsx10(Fragment5, {});
-  }
-  return /* @__PURE__ */ jsx10("span", { className: classNames(props.className, className5, "k-icon k-i-loading") });
-};
-
-// src/input/input-validation-icon.tsx
-import { Fragment as Fragment6, jsx as jsx11 } from "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__ */ jsx11(Fragment6, {});
-  }
-  return /* @__PURE__ */ jsx11(Icon, { className: classNames(className6), icon: iconName });
-};
-InputValidationIcon.states = states10;
-InputValidationIcon.options = options9;
-InputValidationIcon.className = className6;
-
-// src/input/input-prefix.tsx
-import { Fragment as Fragment7, jsx as jsx12 } from "react/jsx-runtime";
-var className7 = `k-input-prefix`;
-var InputPrefix = (props) => {
-  if (!props.children) {
-    return /* @__PURE__ */ jsx12(Fragment7, {});
   }
-  return /* @__PURE__ */ jsx12("span", { className: classNames(className7, props.className), children: props.children });
-};
-
-// src/input/input-suffix.tsx
-import { Fragment as Fragment8, jsx as jsx13 } from "react/jsx-runtime";
-var className8 = `k-input-suffix`;
-var InputSuffix = (props) => {
-  if (!props.children) {
-    return /* @__PURE__ */ jsx13(Fragment8, {});
-  }
-  return /* @__PURE__ */ jsx13("span", { className: classNames(className8, props.className), children: props.children });
-};
-
-// src/input/input-separator.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
-
-// src/textbox/textbox.spec.tsx
-import { jsx as jsx15, jsxs as jsxs2 } from "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__ */ jsxs2(
-    Input,
-    {
-      ...other,
-      size,
-      rounded,
-      fillMode,
-      hover,
-      focus,
-      valid,
-      invalid,
-      required,
-      loading,
-      disabled,
-      readonly,
-      className: classNames(props.className, TEXTBOX_CLASSNAME),
-      children: [
-        /* @__PURE__ */ jsx15(InputPrefix, { children: prefix }),
-        /* @__PURE__ */ jsx15(InputInnerInput, { placeholder, value }),
-        /* @__PURE__ */ jsx15(
-          InputValidationIcon,
-          {
-            valid,
-            invalid,
-            loading,
-            disabled
-          }
-        ),
-        /* @__PURE__ */ jsx15(
-          InputLoadingIcon,
-          {
-            loading,
-            disabled
-          }
-        ),
-        showClearButton && /* @__PURE__ */ jsx15(
-          InputClearValue,
-          {
-            loading,
-            disabled,
-            readonly,
-            value
-          }
-        ),
-        /* @__PURE__ */ jsx15(InputSuffix, { children: suffix })
-      ]
-    }
-  );
-};
-Textbox.states = states11;
-Textbox.options = options10;
-Textbox.className = TEXTBOX_CLASSNAME;
-Textbox.defaultProps = defaultProps8;
-
-// src/textbox/templates/textbox-normal.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
-
-// src/button/button.spec.tsx
-import { Fragment as Fragment9, jsx as jsx17, jsxs as jsxs3 } from "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__ */ jsxs3(
-    "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__ */ jsx17(
-          Icon,
-          {
-            className: classNames(iconClassName, "k-button-icon"),
-            icon
-          }
-        ),
-        text ? /* @__PURE__ */ jsxs3(Fragment9, { children: [
-          text && /* @__PURE__ */ jsx17("span", { className: "k-button-text", children: text }),
-          props.children
-        ] }) : props.children && /* @__PURE__ */ jsx17("span", { className: "k-button-text", children: props.children }),
-        showArrow && /* @__PURE__ */ jsx17("span", { className: "k-menu-button-arrow k-button-arrow", children: /* @__PURE__ */ jsx17(Icon, { icon: arrowIconName }) })
-      ]
-    }
-  );
-};
-Button.states = states12;
-Button.options = options11;
-Button.className = BUTTON_CLASSNAME;
-Button.defaultProps = defaultProps9;
-
-// src/button/templates/icon-button.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
-
-// src/button/templates/icon-text-button.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
-
-// src/button/templates/text-button.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
-
-// src/textbox/templates/textbox-prefix.tsx
-import { Fragment as Fragment10, jsx as jsx21, jsxs as jsxs4 } from "react/jsx-runtime";
-
-// src/textbox/templates/textbox-suffix.tsx
-import { Fragment as Fragment11, jsx as jsx22, jsxs as jsxs5 } from "react/jsx-runtime";
-
-// src/breadcrumb/breadcrumb.spec.tsx
-import { jsx as jsx23 } from "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__ */ jsx23(
-    "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
-import { jsx as jsx24 } from "react/jsx-runtime";
-var BREADCRUMBROOTITEMCONTAINER_CLASSNAME = `k-breadcrumb-root-item-container`;
-var BreadcrumbRootItemContainer = (props) => {
-  const {
-    ...other
-  } = props;
-  return /* @__PURE__ */ jsx24(
-    "ol",
-    {
-      ...other,
-      className: classNames(
-        props.className,
-        BREADCRUMBROOTITEMCONTAINER_CLASSNAME
-      ),
-      children: props.children
-    }
-  );
-};
-
-// src/breadcrumb/breadcrumb-input-container.tsx
-import { jsx as jsx25 } from "react/jsx-runtime";
-var BREADCRUMBINPUTCONTAINER_CLASSNAME = `k-breadcrumb-input-container`;
-var BreadcrumbInputContainer = (props) => {
-  const {
-    ...other
-  } = props;
-  return /* @__PURE__ */ jsx25(
-    "div",
-    {
-      ...other,
-      className: classNames(
-        props.className,
-        BREADCRUMBINPUTCONTAINER_CLASSNAME
-      ),
-      children: props.children
-    }
-  );
-};
-
-// src/breadcrumb/breadcrumb-container.tsx
-import { jsx as jsx26 } from "react/jsx-runtime";
-var BREADCRUMBCONTAINER_CLASSNAME = `k-breadcrumb-container`;
-var defaultProps11 = {
-  collapsing: "auto"
-};
-var BreadcrumbContainer = (props) => {
-  const {
-    collapsing = defaultProps11.collapsing,
-    ...other
-  } = props;
-  return /* @__PURE__ */ jsx26(
-    "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
-import { jsx as jsx27 } from "react/jsx-runtime";
-var BREADCRUMBITEM_CLASSNAME = `k-breadcrumb-item`;
-var BreadcrumbItem = (props) => {
-  const {
-    root,
-    last,
-    ...other
-  } = props;
-  return /* @__PURE__ */ jsx27(
-    "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
-import { jsx as jsx28 } from "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__ */ jsx28(
-    "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
-import { jsx as jsx29 } from "react/jsx-runtime";
-var BREADCRUMBITEMTEXT_CLASSNAME = `k-breadcrumb-item-text`;
-var BreadcrumbItemText = (props) => {
-  const {
-    text,
+// src/breadcrumb/templates/breadcrumb-root-adaptive.tsx
+import { Fragment as Fragment5, jsx as jsx14, jsxs as jsxs4 } from "react/jsx-runtime";
+var BreadcrumbRootAdaptive = ({ collapsing, ...other }) => /* @__PURE__ */ jsx14(
+  Breadcrumb,
+  {
+    collapsing,
+    children: /* @__PURE__ */ jsxs4(Fragment5, { children: [
+      /* @__PURE__ */ jsx14(BreadcrumbRootItemContainer, { children: /* @__PURE__ */ jsx14(BreadcrumbItem, { root: true, children: /* @__PURE__ */ jsxs4(BreadcrumbLink, { root: true, icontext: true, children: [
+        /* @__PURE__ */ jsx14(Icon, { icon: "home" }),
+        /* @__PURE__ */ jsx14(BreadcrumbItemText, { text: "Start item" })
+      ] }) }) }),
+      /* @__PURE__ */ jsxs4(BreadcrumbContainer, { collapsing, children: [
+        /* @__PURE__ */ jsx14(BreadcrumbItem, { children: /* @__PURE__ */ jsx14(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-right", size: "xsmall" }) }),
+        /* @__PURE__ */ jsxs4(BreadcrumbItem, { children: [
+          /* @__PURE__ */ jsx14(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-right", size: "xsmall" }),
+          /* @__PURE__ */ jsx14(BreadcrumbLink, { children: /* @__PURE__ */ jsx14(BreadcrumbItemText, { text: "Item 03" }) })
+        ] }),
+        /* @__PURE__ */ jsxs4(BreadcrumbItem, { children: [
+          /* @__PURE__ */ jsx14(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-right", size: "xsmall" }),
+          /* @__PURE__ */ jsx14(BreadcrumbLink, { children: /* @__PURE__ */ jsx14(BreadcrumbItemText, { text: "Item 04" }) })
+        ] }),
+        /* @__PURE__ */ jsxs4(BreadcrumbItem, { last: true, children: [
+          /* @__PURE__ */ jsx14(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-right", size: "xsmall" }),
+          /* @__PURE__ */ jsx14(BreadcrumbLink, { children: /* @__PURE__ */ jsx14(BreadcrumbItemText, { text: "Item 05" }) })
+        ] })
+      ] })
+    ] }),
     ...other
-  } = props;
-  const textOrChildren = text ? text : props.children;
-  return /* @__PURE__ */ jsx29(
-    "span",
-    {
-      ...other,
-      className: classNames(
-        props.className,
-        BREADCRUMBITEMTEXT_CLASSNAME
-      ),
-      children: textOrChildren
-    }
-  );
-};
+  }
+);
 
 // src/breadcrumb/tests/breadcrumb-rtl.tsx
-import { Fragment as Fragment12, jsx as jsx30, jsxs as jsxs6 } from "react/jsx-runtime";
-var breadcrumb_rtl_default = () => /* @__PURE__ */ jsx30(Fragment12, { children: /* @__PURE__ */ jsxs6("div", { id: "test-area", className: "k-d-grid k-grid-cols-2 k-rtl", children: [
-  /* @__PURE__ */ jsx30("span", { className: "k-colspan-all k-col-span-full", children: "Wrapping" }),
-  /* @__PURE__ */ jsx30("div", { children: /* @__PURE__ */ jsxs6(Breadcrumb, { collapsing: "wrap", style: { width: "400px" }, dir: "rtl", children: [
-    /* @__PURE__ */ jsx30(BreadcrumbRootItemContainer, { children: /* @__PURE__ */ jsx30(BreadcrumbItem, { root: true, children: /* @__PURE__ */ jsxs6(BreadcrumbLink, { root: true, icontext: true, children: [
-      /* @__PURE__ */ jsx30(Icon, { icon: "home" }),
-      /* @__PURE__ */ jsx30(BreadcrumbItemText, { text: "Start item" })
-    ] }) }) }),
-    /* @__PURE__ */ jsxs6(BreadcrumbContainer, { collapsing: "wrap", children: [
-      /* @__PURE__ */ jsxs6(BreadcrumbItem, { children: [
-        /* @__PURE__ */ jsx30(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
-        /* @__PURE__ */ jsxs6(BreadcrumbLink, { disabled: true, icontext: true, children: [
-          /* @__PURE__ */ jsx30(Icon, { icon: "clock" }),
-          /* @__PURE__ */ jsx30(BreadcrumbItemText, { text: "First item" })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs6(BreadcrumbItem, { children: [
-        /* @__PURE__ */ jsx30(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
-        /* @__PURE__ */ jsxs6(BreadcrumbLink, { children: [
-          /* @__PURE__ */ jsx30("img", { className: "k-image", src: "/packages/html/assets/avatar.jpg", width: "20", height: "20" }),
-          /* @__PURE__ */ jsx30(BreadcrumbItemText, { text: "Second item" })
+import { Fragment as Fragment6, jsx as jsx15, jsxs as jsxs5 } from "react/jsx-runtime";
+var styles = `
+    #test-area {
+        grid-template-columns: 80px repeat(2, 1fr);
+    }
+`;
+var breadcrumb_rtl_default = () => /* @__PURE__ */ jsxs5(Fragment6, { children: [
+  /* @__PURE__ */ jsx15("style", { children: styles }),
+  /* @__PURE__ */ jsxs5("div", { id: "test-area", className: "k-d-grid k-grid-cols-3 k-rtl", children: [
+    /* @__PURE__ */ jsx15("span", {}),
+    /* @__PURE__ */ jsx15("span", { children: "Collapsing with root item" }),
+    /* @__PURE__ */ jsx15("span", { children: "Collapsing without root item" }),
+    /* @__PURE__ */ jsx15("span", { children: "none" }),
+    /* @__PURE__ */ jsx15("div", { children: /* @__PURE__ */ jsxs5(BreadcrumbRoot, { collapsing: "none", size: "large", children: [
+      /* @__PURE__ */ jsx15(BreadcrumbRootItemContainer, { children: /* @__PURE__ */ jsx15(BreadcrumbItem, { root: true, children: /* @__PURE__ */ jsxs5(BreadcrumbLink, { root: true, icontext: true, children: [
+        /* @__PURE__ */ jsx15(Icon, { icon: "home" }),
+        /* @__PURE__ */ jsx15(BreadcrumbItemText, { text: "Start item" })
+      ] }) }) }),
+      /* @__PURE__ */ jsxs5(BreadcrumbContainer, { collapsing: "none", children: [
+        /* @__PURE__ */ jsxs5(BreadcrumbItem, { children: [
+          /* @__PURE__ */ jsx15(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
+          /* @__PURE__ */ jsx15(BreadcrumbLink, { children: /* @__PURE__ */ jsx15(BreadcrumbItemText, { text: "Item 01" }) })
+        ] }),
+        /* @__PURE__ */ jsxs5(BreadcrumbItem, { children: [
+          /* @__PURE__ */ jsx15(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
+          /* @__PURE__ */ jsx15(BreadcrumbLink, { children: /* @__PURE__ */ jsx15(BreadcrumbItemText, { text: "Item 02" }) })
+        ] }),
+        /* @__PURE__ */ jsxs5(BreadcrumbItem, { last: true, children: [
+          /* @__PURE__ */ jsx15(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
+          /* @__PURE__ */ jsx15(BreadcrumbLink, { children: /* @__PURE__ */ jsx15(BreadcrumbItemText, { text: "Item 03" }) })
         ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx15("div", { children: /* @__PURE__ */ jsx15(BreadcrumbNormal, { collapsing: "none", size: "large", children: /* @__PURE__ */ jsxs5(BreadcrumbContainer, { collapsing: "none", children: [
+      /* @__PURE__ */ jsx15(BreadcrumbItem, { children: /* @__PURE__ */ jsx15(BreadcrumbLink, { children: /* @__PURE__ */ jsx15(BreadcrumbItemText, { text: "Item 01" }) }) }),
+      /* @__PURE__ */ jsxs5(BreadcrumbItem, { children: [
+        /* @__PURE__ */ jsx15(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
+        /* @__PURE__ */ jsx15(BreadcrumbLink, { children: /* @__PURE__ */ jsx15(BreadcrumbItemText, { text: "Item 02" }) })
       ] }),
-      /* @__PURE__ */ jsxs6(BreadcrumbItem, { children: [
-        /* @__PURE__ */ jsx30(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
-        /* @__PURE__ */ jsx30(BreadcrumbLink, { children: /* @__PURE__ */ jsx30(BreadcrumbItemText, { text: "Third item" }) })
-      ] }),
-      /* @__PURE__ */ jsxs6(BreadcrumbItem, { children: [
-        /* @__PURE__ */ jsx30(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
-        /* @__PURE__ */ jsx30(BreadcrumbLink, { icon: true, children: /* @__PURE__ */ jsx30(Icon, { icon: "clock" }) })
+      /* @__PURE__ */ jsxs5(BreadcrumbItem, { children: [
+        /* @__PURE__ */ jsx15(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
+        /* @__PURE__ */ jsx15(BreadcrumbLink, { children: /* @__PURE__ */ jsx15(BreadcrumbItemText, { text: "Item 03" }) })
       ] }),
-      /* @__PURE__ */ jsxs6(BreadcrumbItem, { last: true, children: [
-        /* @__PURE__ */ jsx30(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
-        /* @__PURE__ */ jsx30(BreadcrumbLink, { disabled: true, children: /* @__PURE__ */ jsx30(BreadcrumbItemText, { text: "Fifth item" }) })
+      /* @__PURE__ */ jsxs5(BreadcrumbItem, { last: true, children: [
+        /* @__PURE__ */ jsx15(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
+        /* @__PURE__ */ jsx15(BreadcrumbLink, { children: /* @__PURE__ */ jsx15(BreadcrumbItemText, { text: "Item 04" }) })
       ] })
-    ] })
-  ] }) }),
-  /* @__PURE__ */ jsx30("div", { children: /* @__PURE__ */ jsxs6(Breadcrumb, { collapsing: "wrap", style: { width: "400px" }, dir: "rtl", children: [
-    /* @__PURE__ */ jsx30(BreadcrumbRootItemContainer, { children: /* @__PURE__ */ jsx30(BreadcrumbItem, { root: true, children: /* @__PURE__ */ jsx30(BreadcrumbLink, { root: true, children: /* @__PURE__ */ jsx30(BreadcrumbItemText, { text: "Start item" }) }) }) }),
-    /* @__PURE__ */ jsxs6(BreadcrumbContainer, { collapsing: "wrap", children: [
-      /* @__PURE__ */ jsxs6(BreadcrumbItem, { children: [
-        /* @__PURE__ */ jsx30(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
-        /* @__PURE__ */ jsxs6(BreadcrumbLink, { disabled: true, icontext: true, children: [
-          /* @__PURE__ */ jsx30(Icon, { icon: "clock" }),
-          /* @__PURE__ */ jsx30(BreadcrumbItemText, { text: "First item" })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs6(BreadcrumbItem, { children: [
-        /* @__PURE__ */ jsx30(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
-        /* @__PURE__ */ jsxs6(BreadcrumbLink, { children: [
-          /* @__PURE__ */ jsx30("img", { className: "k-image", src: "/packages/html/assets/avatar.jpg", width: "20", height: "20" }),
-          /* @__PURE__ */ jsx30(BreadcrumbItemText, { text: "Second item" })
+    ] }) }) }),
+    /* @__PURE__ */ jsx15("span", { children: "auto" }),
+    /* @__PURE__ */ jsx15("div", { children: /* @__PURE__ */ jsxs5(BreadcrumbRootAdaptive, { size: "large", children: [
+      /* @__PURE__ */ jsx15(BreadcrumbRootItemContainer, { children: /* @__PURE__ */ jsx15(BreadcrumbItem, { root: true, children: /* @__PURE__ */ jsxs5(BreadcrumbLink, { root: true, icontext: true, children: [
+        /* @__PURE__ */ jsx15(Icon, { icon: "home" }),
+        /* @__PURE__ */ jsx15(BreadcrumbItemText, { text: "Start item" })
+      ] }) }) }),
+      /* @__PURE__ */ jsxs5(BreadcrumbContainer, { children: [
+        /* @__PURE__ */ jsx15(BreadcrumbItem, { children: /* @__PURE__ */ jsx15(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }) }),
+        /* @__PURE__ */ jsxs5(BreadcrumbItem, { children: [
+          /* @__PURE__ */ jsx15(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
+          /* @__PURE__ */ jsx15(BreadcrumbLink, { children: /* @__PURE__ */ jsx15(BreadcrumbItemText, { text: "Item 03" }) })
+        ] }),
+        /* @__PURE__ */ jsxs5(BreadcrumbItem, { children: [
+          /* @__PURE__ */ jsx15(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
+          /* @__PURE__ */ jsx15(BreadcrumbLink, { children: /* @__PURE__ */ jsx15(BreadcrumbItemText, { text: "Item 04" }) })
+        ] }),
+        /* @__PURE__ */ jsxs5(BreadcrumbItem, { last: true, children: [
+          /* @__PURE__ */ jsx15(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
+          /* @__PURE__ */ jsx15(BreadcrumbLink, { children: /* @__PURE__ */ jsx15(BreadcrumbItemText, { text: "Item 05" }) })
         ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx15("div", { children: /* @__PURE__ */ jsx15(BreadcrumbAdaptive, { size: "large", children: /* @__PURE__ */ jsxs5(BreadcrumbContainer, { children: [
+      /* @__PURE__ */ jsxs5(BreadcrumbItem, { children: [
+        /* @__PURE__ */ jsx15(BreadcrumbLink, { children: /* @__PURE__ */ jsx15(BreadcrumbItemText, { text: "Item 01" }) }),
+        /* @__PURE__ */ jsx15(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" })
       ] }),
-      /* @__PURE__ */ jsxs6(BreadcrumbItem, { children: [
-        /* @__PURE__ */ jsx30(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
-        /* @__PURE__ */ jsx30(BreadcrumbLink, { children: /* @__PURE__ */ jsx30(BreadcrumbItemText, { text: "Third item" }) })
+      /* @__PURE__ */ jsxs5(BreadcrumbItem, { children: [
+        /* @__PURE__ */ jsx15(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
+        /* @__PURE__ */ jsx15(BreadcrumbLink, { children: /* @__PURE__ */ jsx15(BreadcrumbItemText, { text: "Item 04" }) })
       ] }),
-      /* @__PURE__ */ jsxs6(BreadcrumbItem, { children: [
-        /* @__PURE__ */ jsx30(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
-        /* @__PURE__ */ jsx30(BreadcrumbLink, { icon: true, children: /* @__PURE__ */ jsx30(Icon, { icon: "clock" }) })
+      /* @__PURE__ */ jsxs5(BreadcrumbItem, { children: [
+        /* @__PURE__ */ jsx15(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
+        /* @__PURE__ */ jsx15(BreadcrumbLink, { children: /* @__PURE__ */ jsx15(BreadcrumbItemText, { text: "Item 05" }) })
       ] }),
-      /* @__PURE__ */ jsxs6(BreadcrumbItem, { last: true, children: [
-        /* @__PURE__ */ jsx30(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
-        /* @__PURE__ */ jsx30(BreadcrumbLink, { disabled: true, children: /* @__PURE__ */ jsx30(BreadcrumbItemText, { text: "Fifth item" }) })
+      /* @__PURE__ */ jsxs5(BreadcrumbItem, { last: true, children: [
+        /* @__PURE__ */ jsx15(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
+        /* @__PURE__ */ jsx15(BreadcrumbLink, { children: /* @__PURE__ */ jsx15(BreadcrumbItemText, { text: "Item 06" }) })
       ] })
-    ] })
-  ] }) }),
-  /* @__PURE__ */ jsx30("div", { children: /* @__PURE__ */ jsxs6(Breadcrumb, { collapsing: "wrap", style: { width: "400px" }, dir: "rtl", children: [
-    /* @__PURE__ */ jsx30(BreadcrumbRootItemContainer, { children: /* @__PURE__ */ jsx30(BreadcrumbItem, { root: true, children: /* @__PURE__ */ jsx30(BreadcrumbLink, { root: true, icon: true, children: /* @__PURE__ */ jsx30(Icon, { icon: "home" }) }) }) }),
-    /* @__PURE__ */ jsxs6(BreadcrumbContainer, { collapsing: "wrap", children: [
-      /* @__PURE__ */ jsxs6(BreadcrumbItem, { children: [
-        /* @__PURE__ */ jsx30(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
-        /* @__PURE__ */ jsxs6(BreadcrumbLink, { disabled: true, icontext: true, children: [
-          /* @__PURE__ */ jsx30(Icon, { icon: "clock" }),
-          /* @__PURE__ */ jsx30(BreadcrumbItemText, { text: "First item" })
+    ] }) }) }),
+    /* @__PURE__ */ jsx15("span", { children: "wrap" }),
+    /* @__PURE__ */ jsx15("div", { children: /* @__PURE__ */ jsxs5(BreadcrumbRoot, { collapsing: "wrap", size: "large", children: [
+      /* @__PURE__ */ jsx15(BreadcrumbRootItemContainer, { children: /* @__PURE__ */ jsx15(BreadcrumbItem, { root: true, children: /* @__PURE__ */ jsxs5(BreadcrumbLink, { root: true, icontext: true, children: [
+        /* @__PURE__ */ jsx15(Icon, { icon: "home" }),
+        /* @__PURE__ */ jsx15(BreadcrumbItemText, { text: "Start item" })
+      ] }) }) }),
+      /* @__PURE__ */ jsxs5(BreadcrumbContainer, { collapsing: "wrap", children: [
+        /* @__PURE__ */ jsxs5(BreadcrumbItem, { children: [
+          /* @__PURE__ */ jsx15(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
+          /* @__PURE__ */ jsx15(BreadcrumbLink, { children: /* @__PURE__ */ jsx15(BreadcrumbItemText, { text: "Item 01" }) })
+        ] }),
+        /* @__PURE__ */ jsxs5(BreadcrumbItem, { children: [
+          /* @__PURE__ */ jsx15(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
+          /* @__PURE__ */ jsx15(BreadcrumbLink, { children: /* @__PURE__ */ jsx15(BreadcrumbItemText, { text: "Item 02" }) })
+        ] }),
+        /* @__PURE__ */ jsxs5(BreadcrumbItem, { last: true, children: [
+          /* @__PURE__ */ jsx15(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
+          /* @__PURE__ */ jsx15(BreadcrumbLink, { children: /* @__PURE__ */ jsx15(BreadcrumbItemText, { text: "Item 03" }) })
+        ] }),
+        /* @__PURE__ */ jsxs5(BreadcrumbItem, { children: [
+          /* @__PURE__ */ jsx15(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
+          /* @__PURE__ */ jsx15(BreadcrumbLink, { children: /* @__PURE__ */ jsx15(BreadcrumbItemText, { text: "Item 04" }) })
+        ] }),
+        /* @__PURE__ */ jsxs5(BreadcrumbItem, { children: [
+          /* @__PURE__ */ jsx15(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
+          /* @__PURE__ */ jsx15(BreadcrumbLink, { children: /* @__PURE__ */ jsx15(BreadcrumbItemText, { text: "Item 05" }) })
+        ] }),
+        /* @__PURE__ */ jsxs5(BreadcrumbItem, { last: true, children: [
+          /* @__PURE__ */ jsx15(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
+          /* @__PURE__ */ jsx15(BreadcrumbLink, { children: /* @__PURE__ */ jsx15(BreadcrumbItemText, { text: "Item 06" }) })
+        ] }),
+        /* @__PURE__ */ jsxs5(BreadcrumbItem, { last: true, children: [
+          /* @__PURE__ */ jsx15(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
+          /* @__PURE__ */ jsx15(BreadcrumbLink, { children: /* @__PURE__ */ jsx15(BreadcrumbItemText, { text: "Item 07" }) })
         ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx15("div", { children: /* @__PURE__ */ jsx15(BreadcrumbNormal, { collapsing: "wrap", size: "large", children: /* @__PURE__ */ jsxs5(BreadcrumbContainer, { collapsing: "wrap", children: [
+      /* @__PURE__ */ jsx15(BreadcrumbItem, { children: /* @__PURE__ */ jsx15(BreadcrumbLink, { children: /* @__PURE__ */ jsx15(BreadcrumbItemText, { text: "Item 01" }) }) }),
+      /* @__PURE__ */ jsxs5(BreadcrumbItem, { children: [
+        /* @__PURE__ */ jsx15(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
+        /* @__PURE__ */ jsx15(BreadcrumbLink, { children: /* @__PURE__ */ jsx15(BreadcrumbItemText, { text: "Item 02" }) })
       ] }),
-      /* @__PURE__ */ jsxs6(BreadcrumbItem, { children: [
-        /* @__PURE__ */ jsx30(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
-        /* @__PURE__ */ jsxs6(BreadcrumbLink, { children: [
-          /* @__PURE__ */ jsx30("img", { className: "k-image", src: "/packages/html/assets/avatar.jpg", width: "20", height: "20" }),
-          /* @__PURE__ */ jsx30(BreadcrumbItemText, { text: "Second item" })
-        ] })
+      /* @__PURE__ */ jsxs5(BreadcrumbItem, { children: [
+        /* @__PURE__ */ jsx15(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
+        /* @__PURE__ */ jsx15(BreadcrumbLink, { children: /* @__PURE__ */ jsx15(BreadcrumbItemText, { text: "Item 03" }) })
       ] }),
-      /* @__PURE__ */ jsxs6(BreadcrumbItem, { children: [
-        /* @__PURE__ */ jsx30(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
-        /* @__PURE__ */ jsx30(BreadcrumbLink, { children: /* @__PURE__ */ jsx30(BreadcrumbItemText, { text: "Third item" }) })
+      /* @__PURE__ */ jsxs5(BreadcrumbItem, { last: true, children: [
+        /* @__PURE__ */ jsx15(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
+        /* @__PURE__ */ jsx15(BreadcrumbLink, { children: /* @__PURE__ */ jsx15(BreadcrumbItemText, { text: "Item 04" }) })
       ] }),
-      /* @__PURE__ */ jsxs6(BreadcrumbItem, { children: [
-        /* @__PURE__ */ jsx30(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
-        /* @__PURE__ */ jsx30(BreadcrumbLink, { icon: true, children: /* @__PURE__ */ jsx30(Icon, { icon: "clock" }) })
+      /* @__PURE__ */ jsxs5(BreadcrumbItem, { children: [
+        /* @__PURE__ */ jsx15(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
+        /* @__PURE__ */ jsx15(BreadcrumbLink, { children: /* @__PURE__ */ jsx15(BreadcrumbItemText, { text: "Item 05" }) })
       ] }),
-      /* @__PURE__ */ jsxs6(BreadcrumbItem, { last: true, children: [
-        /* @__PURE__ */ jsx30(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
-        /* @__PURE__ */ jsx30(BreadcrumbLink, { disabled: true, children: /* @__PURE__ */ jsx30(BreadcrumbItemText, { text: "Fifth item" }) })
-      ] })
-    ] })
-  ] }) }),
-  /* @__PURE__ */ jsx30("span", { className: "k-colspan-all k-col-span-full", children: "Navigation Mode" }),
-  /* @__PURE__ */ jsx30("div", { children: /* @__PURE__ */ jsx30(Breadcrumb, { children: /* @__PURE__ */ jsxs6(BreadcrumbContainer, { children: [
-    /* @__PURE__ */ jsxs6(BreadcrumbItem, { root: true, children: [
-      /* @__PURE__ */ jsx30(BreadcrumbLink, { root: true, icon: true, children: /* @__PURE__ */ jsx30(Icon, { icon: "home" }) }),
-      /* @__PURE__ */ jsx30(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" })
-    ] }),
-    /* @__PURE__ */ jsxs6(BreadcrumbItem, { children: [
-      /* @__PURE__ */ jsx30(BreadcrumbLink, { children: /* @__PURE__ */ jsx30(BreadcrumbItemText, { text: "First item" }) }),
-      /* @__PURE__ */ jsx30(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" })
-    ] }),
-    /* @__PURE__ */ jsxs6(BreadcrumbItem, { children: [
-      /* @__PURE__ */ jsx30(BreadcrumbLink, { children: /* @__PURE__ */ jsx30(BreadcrumbItemText, { text: "Second item" }) }),
-      /* @__PURE__ */ jsx30(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" })
-    ] }),
-    /* @__PURE__ */ jsx30(BreadcrumbItem, { last: true, children: /* @__PURE__ */ jsx30(BreadcrumbLink, { disabled: true, children: /* @__PURE__ */ jsx30(BreadcrumbItemText, { text: "Third item" }) }) })
-  ] }) }) }),
-  /* @__PURE__ */ jsx30("div", { children: /* @__PURE__ */ jsx30(Breadcrumb, { children: /* @__PURE__ */ jsxs6(BreadcrumbContainer, { children: [
-    /* @__PURE__ */ jsxs6(BreadcrumbItem, { root: true, children: [
-      /* @__PURE__ */ jsx30(BreadcrumbLink, { root: true, icon: true, focus: true, children: /* @__PURE__ */ jsx30(Icon, { icon: "home" }) }),
-      /* @__PURE__ */ jsx30(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" })
-    ] }),
-    /* @__PURE__ */ jsxs6(BreadcrumbItem, { children: [
-      /* @__PURE__ */ jsx30(BreadcrumbLink, { focus: true, children: /* @__PURE__ */ jsx30(BreadcrumbItemText, { text: "First item" }) }),
-      /* @__PURE__ */ jsx30(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" })
-    ] }),
-    /* @__PURE__ */ jsxs6(BreadcrumbItem, { children: [
-      /* @__PURE__ */ jsx30(BreadcrumbLink, { children: /* @__PURE__ */ jsx30(BreadcrumbItemText, { text: "Second item" }) }),
-      /* @__PURE__ */ jsx30(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" })
-    ] }),
-    /* @__PURE__ */ jsx30(BreadcrumbItem, { last: true, children: /* @__PURE__ */ jsx30(BreadcrumbLink, { disabled: true, children: /* @__PURE__ */ jsx30(BreadcrumbItemText, { text: "Third item" }) }) })
-  ] }) }) }),
-  /* @__PURE__ */ jsx30("div", { children: /* @__PURE__ */ jsx30(Breadcrumb, { children: /* @__PURE__ */ jsxs6(BreadcrumbContainer, { children: [
-    /* @__PURE__ */ jsxs6(BreadcrumbItem, { root: true, children: [
-      /* @__PURE__ */ jsx30(BreadcrumbLink, { root: true, icon: true, hover: true, children: /* @__PURE__ */ jsx30(Icon, { icon: "home" }) }),
-      /* @__PURE__ */ jsx30(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" })
-    ] }),
-    /* @__PURE__ */ jsxs6(BreadcrumbItem, { children: [
-      /* @__PURE__ */ jsx30(BreadcrumbLink, { hover: true, children: /* @__PURE__ */ jsx30(BreadcrumbItemText, { text: "First item" }) }),
-      /* @__PURE__ */ jsx30(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" })
-    ] }),
-    /* @__PURE__ */ jsxs6(BreadcrumbItem, { children: [
-      /* @__PURE__ */ jsx30(BreadcrumbLink, { children: /* @__PURE__ */ jsx30(BreadcrumbItemText, { text: "Second item" }) }),
-      /* @__PURE__ */ jsx30(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" })
-    ] }),
-    /* @__PURE__ */ jsx30(BreadcrumbItem, { last: true, children: /* @__PURE__ */ jsx30(BreadcrumbLink, { disabled: true, children: /* @__PURE__ */ jsx30(BreadcrumbItemText, { text: "Third item" }) }) })
-  ] }) }) }),
-  /* @__PURE__ */ jsx30("div", { children: /* @__PURE__ */ jsx30(Breadcrumb, { children: /* @__PURE__ */ jsxs6(BreadcrumbContainer, { children: [
-    /* @__PURE__ */ jsxs6(BreadcrumbItem, { root: true, children: [
-      /* @__PURE__ */ jsx30(BreadcrumbLink, { root: true, icon: true, hover: true, children: /* @__PURE__ */ jsx30(Icon, { icon: "home" }) }),
-      /* @__PURE__ */ jsx30(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" })
-    ] }),
-    /* @__PURE__ */ jsxs6(BreadcrumbItem, { children: [
-      /* @__PURE__ */ jsxs6(BreadcrumbLink, { icontext: true, children: [
-        /* @__PURE__ */ jsx30(Icon, { icon: "cloud" }),
-        /* @__PURE__ */ jsx30(BreadcrumbItemText, { text: "First item" })
+      /* @__PURE__ */ jsxs5(BreadcrumbItem, { children: [
+        /* @__PURE__ */ jsx15(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
+        /* @__PURE__ */ jsx15(BreadcrumbLink, { children: /* @__PURE__ */ jsx15(BreadcrumbItemText, { text: "Item 06" }) })
       ] }),
-      /* @__PURE__ */ jsx30(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" })
-    ] }),
-    /* @__PURE__ */ jsxs6(BreadcrumbItem, { children: [
-      /* @__PURE__ */ jsx30(BreadcrumbLink, { icon: true, children: /* @__PURE__ */ jsx30(Icon, { icon: "camera" }) }),
-      /* @__PURE__ */ jsx30(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" })
-    ] }),
-    /* @__PURE__ */ jsx30(BreadcrumbItem, { last: true, children: /* @__PURE__ */ jsx30(BreadcrumbLink, { disabled: true, children: /* @__PURE__ */ jsx30(BreadcrumbItemText, { text: "Third item" }) }) })
-  ] }) }) }),
-  /* @__PURE__ */ jsx30("span", { className: "k-colspan-all k-col-span-full", children: "Edit Mode" }),
-  /* @__PURE__ */ jsx30("div", { children: /* @__PURE__ */ jsx30(Breadcrumb, { focus: true, children: /* @__PURE__ */ jsxs6(BreadcrumbContainer, { children: [
-    /* @__PURE__ */ jsxs6(BreadcrumbItem, { root: true, children: [
-      /* @__PURE__ */ jsx30(BreadcrumbLink, { root: true, icon: true, children: /* @__PURE__ */ jsx30(Icon, { icon: "home" }) }),
-      /* @__PURE__ */ jsx30(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" })
-    ] }),
-    /* @__PURE__ */ jsxs6(BreadcrumbItem, { children: [
-      /* @__PURE__ */ jsx30(BreadcrumbLink, { children: /* @__PURE__ */ jsx30(BreadcrumbItemText, { text: "First item" }) }),
-      /* @__PURE__ */ jsx30(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" })
-    ] }),
-    /* @__PURE__ */ jsxs6(BreadcrumbItem, { children: [
-      /* @__PURE__ */ jsx30(BreadcrumbLink, { children: /* @__PURE__ */ jsx30(BreadcrumbItemText, { text: "Second item" }) }),
-      /* @__PURE__ */ jsx30(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" })
-    ] }),
-    /* @__PURE__ */ jsx30(BreadcrumbItem, { last: true, children: /* @__PURE__ */ jsx30(BreadcrumbLink, { disabled: true, children: /* @__PURE__ */ jsx30(BreadcrumbItemText, { text: "Third item" }) }) })
-  ] }) }) }),
-  /* @__PURE__ */ jsx30("div", { children: /* @__PURE__ */ jsx30(Breadcrumb, { children: /* @__PURE__ */ jsx30(BreadcrumbInputContainer, { children: /* @__PURE__ */ jsx30(Textbox, { showClearButton: false, value: "First item/Second item/Breadcrumb Pattern/Third item" }) }) }) }),
-  /* @__PURE__ */ jsx30("span", { className: "k-colspan-all k-col-span-full", children: "Overflow" }),
-  /* @__PURE__ */ jsx30("div", { children: /* @__PURE__ */ jsx30(Breadcrumb, { children: /* @__PURE__ */ jsxs6(BreadcrumbContainer, { children: [
-    /* @__PURE__ */ jsxs6(BreadcrumbItem, { root: true, children: [
-      /* @__PURE__ */ jsx30(BreadcrumbLink, { root: true, icon: true, children: /* @__PURE__ */ jsx30(Icon, { icon: "home" }) }),
-      /* @__PURE__ */ jsx30(Icon, { className: "k-breadcrumb-delimiter-icon k-breadcrumb-overflow-icon", icon: "chevron-left" }),
-      /* @__PURE__ */ jsx30(Icon, { className: "k-breadcrumb-delimiter-icon k-breadcrumb-overflow-icon", icon: "chevron-left" })
-    ] }),
-    /* @__PURE__ */ jsxs6(BreadcrumbItem, { hidden: true, children: [
-      /* @__PURE__ */ jsx30(BreadcrumbLink, { children: /* @__PURE__ */ jsx30(BreadcrumbItemText, { text: "First item" }) }),
-      /* @__PURE__ */ jsx30(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" })
-    ] }),
-    /* @__PURE__ */ jsxs6(BreadcrumbItem, { hidden: true, children: [
-      /* @__PURE__ */ jsx30(BreadcrumbLink, { children: /* @__PURE__ */ jsx30(BreadcrumbItemText, { text: "Second item" }) }),
-      /* @__PURE__ */ jsx30(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" })
-    ] }),
-    /* @__PURE__ */ jsx30(BreadcrumbItem, { last: true, children: /* @__PURE__ */ jsx30(BreadcrumbLink, { disabled: true, children: /* @__PURE__ */ jsx30(BreadcrumbItemText, { text: "Breadcrumb item " }) }) })
-  ] }) }) })
-] }) });
+      /* @__PURE__ */ jsxs5(BreadcrumbItem, { children: [
+        /* @__PURE__ */ jsx15(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
+        /* @__PURE__ */ jsx15(BreadcrumbLink, { children: /* @__PURE__ */ jsx15(BreadcrumbItemText, { text: "Item 07" }) })
+      ] }),
+      /* @__PURE__ */ jsxs5(BreadcrumbItem, { last: true, children: [
+        /* @__PURE__ */ jsx15(Icon, { className: "k-breadcrumb-delimiter-icon", icon: "chevron-left", size: "xsmall" }),
+        /* @__PURE__ */ jsx15(BreadcrumbLink, { children: /* @__PURE__ */ jsx15(BreadcrumbItemText, { text: "Item 08" }) })
+      ] })
+    ] }) }) })
+  ] })
+] });
 export {
   breadcrumb_rtl_default as default
 };