@progress/kendo-themes-html 5.6.1-dev.4 → 5.6.1-dev.7

package/dist/index.js

@@ -77,8 +77,8 @@
         ...htmlAttributes
       } = this.props;
       const typeClass = type === "p" ? "paragraph" : type;
-      const Component74 = type.includes("display") ? "div" : type;
-      return /* @__PURE__ */ React.createElement(Component74, {
+      const Component75 = type.includes("display") ? "div" : type;
+      return /* @__PURE__ */ React.createElement(Component75, {
         ...htmlAttributes,
         className: classNames(
           {
@@ -711,14 +711,56 @@
     border: false
   };
 
-  // src/chip/chip-action.tsx
+  // src/badge/badge.tsx
   var React23 = __toESM(__require("react"));
+  var Badge = class extends React23.Component {
+    render() {
+      const {
+        children,
+        className,
+        size,
+        rounded,
+        fillMode,
+        themeColor,
+        cutoutBorder,
+        position,
+        align,
+        ...htmlAttributes
+      } = this.props;
+      return /* @__PURE__ */ React23.createElement("span", {
+        style: this.props.style,
+        ...htmlAttributes,
+        className: classNames(
+          "k-badge",
+          {
+            [`k-rounded-${kendoThemeMaps.roundedMap[rounded] || rounded}`]: rounded,
+            [`k-badge-${kendoThemeMaps.sizeMap[size] || size}`]: size,
+            [`k-badge-${fillMode}`]: fillMode,
+            [`k-badge-${fillMode}-${themeColor}`]: Boolean(fillMode && themeColor),
+            [`k-badge-${position}`]: position,
+            [`k-${align}`]: align,
+            ["k-badge-border-cutout"]: cutoutBorder
+          },
+          className
+        )
+      }, children);
+    }
+  };
+  Badge.defaultProps = {
+    size: "medium",
+    fillMode: "solid",
+    themeColor: "primary",
+    cutoutBorder: false
+  };
+
+  // src/chip/chip-action.tsx
+  var React24 = __toESM(__require("react"));
   var chipActionType = /* @__PURE__ */ ((chipActionType2) => {
     chipActionType2["REMOVE"] = "remove";
     chipActionType2["MORE"] = "more";
     return chipActionType2;
   })(chipActionType || {});
-  var ChipAction = class extends React23.Component {
+  var ChipAction = class extends React24.Component {
     render() {
       const {
         className,
@@ -727,21 +769,21 @@
       let icon;
       switch (type) {
         case "remove" /* REMOVE */:
-          icon = /* @__PURE__ */ React23.createElement(Icon, {
+          icon = /* @__PURE__ */ React24.createElement(Icon, {
             name: "x-circle"
           });
           break;
         case "more" /* MORE */:
-          icon = /* @__PURE__ */ React23.createElement(Icon, {
+          icon = /* @__PURE__ */ React24.createElement(Icon, {
             name: "more-vertical"
           });
           break;
         default:
-          return /* @__PURE__ */ React23.createElement(Icon, {
+          return /* @__PURE__ */ React24.createElement(Icon, {
             name: type
           });
       }
-      return /* @__PURE__ */ React23.createElement("span", {
+      return /* @__PURE__ */ React24.createElement("span", {
         className: classNames(
           className,
           "k-chip-action",
@@ -752,8 +794,8 @@
   };
 
   // src/chip/chip.tsx
-  var React24 = __toESM(__require("react"));
-  var Chip = class extends React24.Component {
+  var React25 = __toESM(__require("react"));
+  var Chip = class extends React25.Component {
     render() {
       const {
         children,
@@ -772,7 +814,7 @@
         selected,
         disabled
       } = this.props;
-      return /* @__PURE__ */ React24.createElement("div", {
+      return /* @__PURE__ */ React25.createElement("div", {
         className: classNames(
           className,
           "k-chip",
@@ -788,19 +830,19 @@
             "k-disabled": disabled
           }
         )
-      }, icon && /* @__PURE__ */ React24.createElement(Icon, {
+      }, icon && /* @__PURE__ */ React25.createElement(Icon, {
         className: "k-chip-icon",
         name: icon
-      }), showAvatar && /* @__PURE__ */ React24.createElement(Avatar, {
+      }), showAvatar && /* @__PURE__ */ React25.createElement(Avatar, {
         className: "k-chip-avatar",
         type: "image"
-      }, /* @__PURE__ */ React24.createElement("img", {
+      }, /* @__PURE__ */ React25.createElement("img", {
         src: "/packages/html/assets/avatar.jpg"
-      })), /* @__PURE__ */ React24.createElement("span", {
+      })), /* @__PURE__ */ React25.createElement("span", {
         className: "k-chip-content"
-      }, children ? children : text && /* @__PURE__ */ React24.createElement("span", {
+      }, children ? children : text && /* @__PURE__ */ React25.createElement("span", {
         className: "k-chip-label k-text-ellipsis"
-      }, text)), actions && /* @__PURE__ */ React24.createElement("span", {
+      }, text)), actions && /* @__PURE__ */ React25.createElement("span", {
         className: "k-chip-actions"
       }, actions));
     }
@@ -813,15 +855,15 @@
   };
 
   // src/chip/chip-list.tsx
-  var React25 = __toESM(__require("react"));
-  var ChipList = class extends React25.Component {
+  var React26 = __toESM(__require("react"));
+  var ChipList = class extends React26.Component {
     render() {
       const {
         children,
         className,
         size
       } = this.props;
-      return /* @__PURE__ */ React25.createElement("div", {
+      return /* @__PURE__ */ React26.createElement("div", {
         className: classNames(
           className,
           "k-chip-list",
@@ -838,15 +880,15 @@
   };
 
   // src/color-preview/color-preview.tsx
-  var React26 = __toESM(__require("react"));
-  var ColorPreview = class extends React26.Component {
+  var React27 = __toESM(__require("react"));
+  var ColorPreview = class extends React27.Component {
     render() {
       const {
         className,
         color,
         iconName
       } = this.props;
-      return /* @__PURE__ */ React26.createElement("span", {
+      return /* @__PURE__ */ React27.createElement("span", {
         className: classNames(
           "k-color-preview",
           {
@@ -855,10 +897,10 @@
           },
           className
         )
-      }, iconName && /* @__PURE__ */ React26.createElement(Icon, {
+      }, iconName && /* @__PURE__ */ React27.createElement(Icon, {
         name: iconName,
         className: "k-color-preview-icon"
-      }), /* @__PURE__ */ React26.createElement("span", {
+      }), /* @__PURE__ */ React27.createElement("span", {
         className: "k-color-preview-mask",
         style: { backgroundColor: color }
       }));
@@ -866,8 +908,8 @@
   };
 
   // src/action-buttons/action-buttons.tsx
-  var React27 = __toESM(__require("react"));
-  var ActionButtons = class extends React27.Component {
+  var React28 = __toESM(__require("react"));
+  var ActionButtons = class extends React28.Component {
     render() {
       const {
         children,
@@ -876,7 +918,7 @@
         orientation,
         ...htmlAttributes
       } = this.props;
-      return /* @__PURE__ */ React27.createElement("div", {
+      return /* @__PURE__ */ React28.createElement("div", {
         ...htmlAttributes,
         className: classNames(
           "k-actions",
@@ -895,8 +937,8 @@
   };
 
   // src/button/button.tsx
-  var React28 = __toESM(__require("react"));
-  var Button = class extends React28.Component {
+  var React29 = __toESM(__require("react"));
+  var Button = class extends React29.Component {
     render() {
       const {
         children,
@@ -919,7 +961,7 @@
       } = this.props;
       const hasIcon = icon !== void 0;
       const hasChildren = children !== void 0;
-      return /* @__PURE__ */ React28.createElement("button", {
+      return /* @__PURE__ */ React29.createElement("button", {
         style: this.props.style,
         ...htmlAttributes,
         dir: this.props.dir,
@@ -931,7 +973,7 @@
             [`k-button-${fillMode}`]: fillMode,
             [`k-button-${fillMode}-${themeColor}`]: Boolean(fillMode && themeColor),
             [`k-rounded-${kendoThemeMaps.roundedMap[rounded] || rounded}`]: rounded,
-            "k-icon-button": !hasChildren && hasIcon,
+            "k-icon-button": !text && !hasChildren && hasIcon,
             "k-hover": hover,
             "k-focus": focus,
             "k-active": active,
@@ -939,16 +981,16 @@
             "k-disabled": disabled
           }
         )
-      }, icon && /* @__PURE__ */ React28.createElement(Icon, {
+      }, icon && /* @__PURE__ */ React29.createElement(Icon, {
         className: classNames(iconClassName, "k-button-icon"),
         name: icon
-      }), text ? /* @__PURE__ */ React28.createElement(React28.Fragment, null, text && /* @__PURE__ */ React28.createElement("span", {
+      }), text ? /* @__PURE__ */ React29.createElement(React29.Fragment, null, text && /* @__PURE__ */ React29.createElement("span", {
         className: "k-button-text"
-      }, text), children) : children && /* @__PURE__ */ React28.createElement("span", {
+      }, text), children) : children && /* @__PURE__ */ React29.createElement("span", {
         className: "k-button-text"
-      }, children), showArrow && /* @__PURE__ */ React28.createElement("span", {
+      }, children), showArrow && /* @__PURE__ */ React29.createElement("span", {
         className: "k-menu-button-arrow k-button-arrow"
-      }, /* @__PURE__ */ React28.createElement(Icon, {
+      }, /* @__PURE__ */ React29.createElement(Icon, {
         name: arrowIconName
       })));
     }
@@ -963,8 +1005,8 @@
   };
 
   // src/button-group/button-group.tsx
-  var React29 = __toESM(__require("react"));
-  var _ButtonGroup = class extends React29.Component {
+  var React30 = __toESM(__require("react"));
+  var _ButtonGroup = class extends React30.Component {
     render() {
       const {
         children,
@@ -972,7 +1014,7 @@
         fillMode = _ButtonGroup.defaultProps.fillMode,
         ...htmlAttributes
       } = this.props;
-      return /* @__PURE__ */ React29.createElement("div", {
+      return /* @__PURE__ */ React30.createElement("div", {
         ...htmlAttributes,
         className: classNames(
           className,
@@ -990,8 +1032,8 @@
   };
 
   // src/menu-button/menu-button.tsx
-  var React30 = __toESM(__require("react"));
-  var MenuButton = class extends React30.Component {
+  var React31 = __toESM(__require("react"));
+  var MenuButton = class extends React31.Component {
     render() {
       const {
         className,
@@ -1009,14 +1051,11 @@
         showArrow,
         arrowIconName
       } = this.props;
-      return /* @__PURE__ */ React30.createElement(Button, {
+      return /* @__PURE__ */ React31.createElement(Button, {
         dir: this.props.dir,
         className: classNames(
           className,
-          "k-menu-button",
-          {
-            "k-icon-button": icon !== void 0
-          }
+          "k-menu-button"
         ),
         text,
         size,
@@ -1044,8 +1083,8 @@
   };
 
   // src/split-button/split-button.tsx
-  var React31 = __toESM(__require("react"));
-  var SplitButton = class extends React31.Component {
+  var React32 = __toESM(__require("react"));
+  var SplitButton = class extends React32.Component {
     render() {
       const {
         children,
@@ -1063,7 +1102,7 @@
         selected,
         disabled
       } = this.props;
-      return /* @__PURE__ */ React31.createElement("div", {
+      return /* @__PURE__ */ React32.createElement("div", {
         className: classNames(
           className,
           "k-split-button",
@@ -1072,7 +1111,7 @@
             [`k-rounded-${kendoThemeMaps.roundedMap[rounded] || rounded}`]: rounded
           }
         )
-      }, /* @__PURE__ */ React31.createElement(Button, {
+      }, /* @__PURE__ */ React32.createElement(Button, {
         text,
         icon,
         size,
@@ -1084,7 +1123,7 @@
         active,
         selected,
         disabled
-      }, children), /* @__PURE__ */ React31.createElement(Button, {
+      }, children), /* @__PURE__ */ React32.createElement(Button, {
         className: "k-split-button-arrow",
         icon: arrowIconName,
         size,
@@ -1103,8 +1142,8 @@
   };
 
   // src/textbox/textbox.tsx
-  var React32 = __toESM(__require("react"));
-  var Textbox = class extends React32.Component {
+  var React33 = __toESM(__require("react"));
+  var Textbox = class extends React33.Component {
     render() {
       const {
         className,
@@ -1124,7 +1163,7 @@
         disabled,
         showClearButton
       } = this.props;
-      return /* @__PURE__ */ React32.createElement(Input, {
+      return /* @__PURE__ */ React33.createElement(Input, {
         size,
         rounded,
         fillMode,
@@ -1136,14 +1175,14 @@
         loading,
         disabled,
         className: classNames(className, "k-textbox")
-      }, /* @__PURE__ */ React32.createElement(InputPrefix, null, prefix), /* @__PURE__ */ React32.createElement(InputInnerInput, {
+      }, /* @__PURE__ */ React33.createElement(InputPrefix, null, prefix), /* @__PURE__ */ React33.createElement(InputInnerInput, {
         placeholder,
         value
-      }), /* @__PURE__ */ React32.createElement(InputSuffix, null, suffix), /* @__PURE__ */ React32.createElement(InputValidationIcon, {
+      }), /* @__PURE__ */ React33.createElement(InputSuffix, null, suffix), /* @__PURE__ */ React33.createElement(InputValidationIcon, {
         ...this.props
-      }), /* @__PURE__ */ React32.createElement(InputLoadingIcon, {
+      }), /* @__PURE__ */ React33.createElement(InputLoadingIcon, {
         ...this.props
-      }), showClearButton && /* @__PURE__ */ React32.createElement(InputClearValue, {
+      }), showClearButton && /* @__PURE__ */ React33.createElement(InputClearValue, {
         ...this.props
       }));
     }
@@ -1153,8 +1192,8 @@
   };
 
   // src/textarea/textarea.tsx
-  var React33 = __toESM(__require("react"));
-  var Textarea = class extends React33.Component {
+  var React34 = __toESM(__require("react"));
+  var Textarea = class extends React34.Component {
     render() {
       const {
         className,
@@ -1172,7 +1211,7 @@
         loading,
         disabled
       } = this.props;
-      return /* @__PURE__ */ React33.createElement(Input, {
+      return /* @__PURE__ */ React34.createElement(Input, {
         size,
         rounded,
         fillMode,
@@ -1184,7 +1223,7 @@
         loading,
         disabled,
         className: classNames(className, "k-textarea")
-      }, /* @__PURE__ */ React33.createElement(InputInnerTextarea, {
+      }, /* @__PURE__ */ React34.createElement(InputInnerTextarea, {
         className: "!k-overflow-auto",
         value,
         placeholder,
@@ -1194,8 +1233,8 @@
   };
 
   // src/radio/radio.tsx
-  var React34 = __toESM(__require("react"));
-  var RadioButton = class extends React34.Component {
+  var React35 = __toESM(__require("react"));
+  var RadioButton = class extends React35.Component {
     render() {
       const {
         className,
@@ -1208,9 +1247,9 @@
         disabled,
         required
       } = this.props;
-      return /* @__PURE__ */ React34.createElement("span", {
+      return /* @__PURE__ */ React35.createElement("span", {
         className: "k-radio-wrap"
-      }, /* @__PURE__ */ React34.createElement("input", {
+      }, /* @__PURE__ */ React35.createElement("input", {
         type: "radio",
         id,
         checked,
@@ -1235,8 +1274,8 @@
   };
 
   // src/floating-label/floating-label.tsx
-  var React35 = __toESM(__require("react"));
-  var FloatingLabel = class extends React35.Component {
+  var React36 = __toESM(__require("react"));
+  var FloatingLabel = class extends React36.Component {
     render() {
       const {
         className,
@@ -1249,7 +1288,7 @@
         disabled,
         style
       } = this.props;
-      return /* @__PURE__ */ React35.createElement("span", {
+      return /* @__PURE__ */ React36.createElement("span", {
         className: classNames(
           className,
           "k-floating-label-container",
@@ -1262,15 +1301,15 @@
           }
         ),
         style
-      }, children, label && /* @__PURE__ */ React35.createElement("label", {
+      }, children, label && /* @__PURE__ */ React36.createElement("label", {
         className: "k-label"
       }, label));
     }
   };
 
   // src/autocomplete/autocomplete.tsx
-  var React36 = __toESM(__require("react"));
-  var Autocomplete = class extends React36.Component {
+  var React37 = __toESM(__require("react"));
+  var Autocomplete = class extends React37.Component {
     render() {
       const {
         className,
@@ -1289,7 +1328,7 @@
         loading,
         disabled
       } = this.props;
-      return /* @__PURE__ */ React36.createElement(Input, {
+      return /* @__PURE__ */ React37.createElement(Input, {
         size,
         rounded,
         fillMode,
@@ -1301,21 +1340,21 @@
         loading,
         disabled,
         className: classNames(className, "k-autocomplete")
-      }, /* @__PURE__ */ React36.createElement(InputPrefix, null, prefix), /* @__PURE__ */ React36.createElement(InputInnerInput, {
+      }, /* @__PURE__ */ React37.createElement(InputPrefix, null, prefix), /* @__PURE__ */ React37.createElement(InputInnerInput, {
         placeholder,
         value
-      }), /* @__PURE__ */ React36.createElement(InputSuffix, null, suffix), /* @__PURE__ */ React36.createElement(InputValidationIcon, {
+      }), /* @__PURE__ */ React37.createElement(InputSuffix, null, suffix), /* @__PURE__ */ React37.createElement(InputValidationIcon, {
         ...this.props
-      }), /* @__PURE__ */ React36.createElement(InputLoadingIcon, {
+      }), /* @__PURE__ */ React37.createElement(InputLoadingIcon, {
         ...this.props
-      }), /* @__PURE__ */ React36.createElement(InputClearValue, {
+      }), /* @__PURE__ */ React37.createElement(InputClearValue, {
         ...this.props
       }));
     }
   };
 
   // src/colorpalette/colorpalette.tsx
-  var React37 = __toESM(__require("react"));
+  var React38 = __toESM(__require("react"));
 
   // src/colorpalette/colorpalette-presets.tsx
   var PALETTEPRESETS = {
@@ -1370,7 +1409,7 @@
   };
 
   // src/colorpalette/colorpalette.tsx
-  var ColorPalette = class extends React37.Component {
+  var ColorPalette = class extends React38.Component {
     render() {
       const {
         children,
@@ -1388,17 +1427,17 @@
           Array.from({ length: Math.ceil(preset.colors.length / cols) }, (_, i) => {
             const items = [];
             preset.colors.slice(i * cols, (i + 1) * cols).map((color) => {
-              items.push(/* @__PURE__ */ React37.createElement(ColorPaletteTile, {
+              items.push(/* @__PURE__ */ React38.createElement(ColorPaletteTile, {
                 color,
                 tileSize
               }));
             });
-            const row = /* @__PURE__ */ React37.createElement(ColorPaletteRow, null, items);
+            const row = /* @__PURE__ */ React38.createElement(ColorPaletteRow, null, items);
             newChildren.push(row);
           });
         }
       }
-      return /* @__PURE__ */ React37.createElement("div", {
+      return /* @__PURE__ */ React38.createElement("div", {
         className: classNames(
           className,
           "k-colorpalette",
@@ -1406,9 +1445,9 @@
             "k-disabled": disabled
           }
         )
-      }, /* @__PURE__ */ React37.createElement("div", {
+      }, /* @__PURE__ */ React38.createElement("div", {
         className: "k-colorpalette-table-wrap"
-      }, /* @__PURE__ */ React37.createElement("table", {
+      }, /* @__PURE__ */ React38.createElement("table", {
         className: "k-colorpalette-table k-palette"
       }, newChildren.length > 0 ? newChildren : children)));
     }
@@ -1418,19 +1457,19 @@
   };
 
   // src/colorpalette/colorpalette-row.tsx
-  var React38 = __toESM(__require("react"));
-  var ColorPaletteRow = class extends React38.Component {
+  var React39 = __toESM(__require("react"));
+  var ColorPaletteRow = class extends React39.Component {
     render() {
       const {
         children
       } = this.props;
-      return /* @__PURE__ */ React38.createElement("tr", null, children);
+      return /* @__PURE__ */ React39.createElement("tr", null, children);
     }
   };
 
   // src/colorpalette/colorpalette-tile.tsx
-  var React39 = __toESM(__require("react"));
-  var ColorPaletteTile = class extends React39.Component {
+  var React40 = __toESM(__require("react"));
+  var ColorPaletteTile = class extends React40.Component {
     render() {
       const {
         className,
@@ -1445,7 +1484,7 @@
         "width": tileSize ? tileSize + "px" : "",
         "height": tileSize ? tileSize + "px" : ""
       };
-      return /* @__PURE__ */ React39.createElement("td", {
+      return /* @__PURE__ */ React40.createElement("td", {
         className: classNames(
           className,
           "k-colorpalette-tile",
@@ -1461,8 +1500,8 @@
   };
 
   // src/captcha/captcha.tsx
-  var React40 = __toESM(__require("react"));
-  var Captcha = class extends React40.Component {
+  var React41 = __toESM(__require("react"));
+  var Captcha = class extends React41.Component {
     render() {
       const {
         className,
@@ -1472,7 +1511,7 @@
         loading,
         disabled
       } = this.props;
-      return /* @__PURE__ */ React40.createElement("div", {
+      return /* @__PURE__ */ React41.createElement("div", {
         className: classNames(
           className,
           "k-captcha",
@@ -1481,43 +1520,43 @@
             "k-disabled": disabled
           }
         )
-      }, /* @__PURE__ */ React40.createElement("div", {
+      }, /* @__PURE__ */ React41.createElement("div", {
         className: "k-captcha-image-wrap k-hstack"
-      }, /* @__PURE__ */ React40.createElement("div", {
+      }, /* @__PURE__ */ React41.createElement("div", {
         className: "k-captcha-image"
-      }, /* @__PURE__ */ React40.createElement("img", {
+      }, /* @__PURE__ */ React41.createElement("img", {
         className: classNames({ "k-hidden": loading }),
         src: "/packages/html/assets/captcha.jpg"
-      }), loading && /* @__PURE__ */ React40.createElement("span", {
+      }), loading && /* @__PURE__ */ React41.createElement("span", {
         style: { width: "100%", height: "100%" },
         className: "k-skeleton k-skeleton-rect"
-      })), /* @__PURE__ */ React40.createElement("div", {
+      })), /* @__PURE__ */ React41.createElement("div", {
         className: "k-captcha-image-controls k-vstack"
-      }, /* @__PURE__ */ React40.createElement(Button, {
+      }, /* @__PURE__ */ React41.createElement(Button, {
         icon: "volume-up",
         disabled: loading === true
-      }), /* @__PURE__ */ React40.createElement(Button, {
+      }), /* @__PURE__ */ React41.createElement(Button, {
         icon: "reload",
         disabled: loading === true
-      })), /* @__PURE__ */ React40.createElement("div", {
+      })), /* @__PURE__ */ React41.createElement("div", {
         className: "k-captcha-volume-control k-vstack k-pos-absolute k-hidden"
-      }, /* @__PURE__ */ React40.createElement("div", {
+      }, /* @__PURE__ */ React41.createElement("div", {
         className: "k-widget k-slider k-slider-vertical"
-      }))), /* @__PURE__ */ React40.createElement("div", {
+      }))), /* @__PURE__ */ React41.createElement("div", {
         className: "k-captcha-input k-vstack"
-      }, /* @__PURE__ */ React40.createElement(Textbox, {
+      }, /* @__PURE__ */ React41.createElement(Textbox, {
         value,
         invalid,
         disabled: loading === true
-      }), valid && !loading && /* @__PURE__ */ React40.createElement("span", {
+      }), valid && !loading && /* @__PURE__ */ React41.createElement("span", {
         className: "k-captcha-validation-message k-text-success"
       }, "Verification Success")));
     }
   };
 
   // src/colorpicker/colorpicker.tsx
-  var React41 = __toESM(__require("react"));
-  var ColorPicker = class extends React41.Component {
+  var React42 = __toESM(__require("react"));
+  var ColorPicker = class extends React42.Component {
     render() {
       const {
         className,
@@ -1537,7 +1576,7 @@
         required,
         disabled
       } = this.props;
-      return /* @__PURE__ */ React41.createElement(Picker, {
+      return /* @__PURE__ */ React42.createElement(Picker, {
         size,
         rounded,
         fillMode,
@@ -1552,17 +1591,17 @@
           "k-colorpicker",
           "k-icon-picker"
         )
-      }, /* @__PURE__ */ React41.createElement(InputPrefix, null, prefix), /* @__PURE__ */ React41.createElement(InputInnerSpan, {
+      }, /* @__PURE__ */ React42.createElement(InputPrefix, null, prefix), /* @__PURE__ */ React42.createElement(InputInnerSpan, {
         placeholder,
         value,
         showValue: false,
-        valueIcon: /* @__PURE__ */ React41.createElement(ColorPreview, {
+        valueIcon: /* @__PURE__ */ React42.createElement(ColorPreview, {
           className: "k-value-icon",
           color: value,
           iconName: valueIconName
         }),
         valueIconName
-      }), /* @__PURE__ */ React41.createElement(InputSuffix, null, suffix), /* @__PURE__ */ React41.createElement(Button, {
+      }), /* @__PURE__ */ React42.createElement(InputSuffix, null, suffix), /* @__PURE__ */ React42.createElement(Button, {
         className: "k-input-button",
         icon: arrowIconName,
         rounded: null,
@@ -1576,8 +1615,8 @@
   };
 
   // src/combobox/combobox.tsx
-  var React42 = __toESM(__require("react"));
-  var Combobox = class extends React42.Component {
+  var React43 = __toESM(__require("react"));
+  var Combobox = class extends React43.Component {
     render() {
       const {
         className,
@@ -1596,7 +1635,7 @@
         loading,
         disabled
       } = this.props;
-      return /* @__PURE__ */ React42.createElement(Input, {
+      return /* @__PURE__ */ React43.createElement(Input, {
         size,
         rounded,
         fillMode,
@@ -1608,16 +1647,16 @@
         loading,
         disabled,
         className: classNames(className, "k-combobox")
-      }, /* @__PURE__ */ React42.createElement(InputPrefix, null, prefix), /* @__PURE__ */ React42.createElement(InputInnerInput, {
+      }, /* @__PURE__ */ React43.createElement(InputPrefix, null, prefix), /* @__PURE__ */ React43.createElement(InputInnerInput, {
         placeholder,
         value
-      }), /* @__PURE__ */ React42.createElement(InputSuffix, null, suffix), /* @__PURE__ */ React42.createElement(InputValidationIcon, {
+      }), /* @__PURE__ */ React43.createElement(InputSuffix, null, suffix), /* @__PURE__ */ React43.createElement(InputValidationIcon, {
         ...this.props
-      }), /* @__PURE__ */ React42.createElement(InputLoadingIcon, {
+      }), /* @__PURE__ */ React43.createElement(InputLoadingIcon, {
         ...this.props
-      }), /* @__PURE__ */ React42.createElement(InputClearValue, {
+      }), /* @__PURE__ */ React43.createElement(InputClearValue, {
         ...this.props
-      }), /* @__PURE__ */ React42.createElement(Button, {
+      }), /* @__PURE__ */ React43.createElement(Button, {
         className: "k-input-button",
         icon: "arrow-s",
         rounded: null,
@@ -1628,29 +1667,29 @@
   };
 
   // src/dateinput/dateinput.tsx
-  var React44 = __toESM(__require("react"));
+  var React45 = __toESM(__require("react"));
 
   // src/spinbutton/spinbutton.tsx
-  var React43 = __toESM(__require("react"));
-  var SpinButton = class extends React43.Component {
+  var React44 = __toESM(__require("react"));
+  var SpinButton = class extends React44.Component {
     render() {
       const {
         className,
         size,
         fillMode
       } = this.props;
-      return /* @__PURE__ */ React43.createElement("span", {
+      return /* @__PURE__ */ React44.createElement("span", {
         className: classNames(
           className,
           "k-spin-button"
         )
-      }, /* @__PURE__ */ React43.createElement(Button, {
+      }, /* @__PURE__ */ React44.createElement(Button, {
         className: "k-spinner-increase",
         icon: "arrow-n",
         rounded: null,
         size,
         fillMode
-      }), /* @__PURE__ */ React43.createElement(Button, {
+      }), /* @__PURE__ */ React44.createElement(Button, {
         className: "k-spinner-decrease",
         icon: "arrow-s",
         rounded: null,
@@ -1661,7 +1700,7 @@
   };
 
   // src/dateinput/dateinput.tsx
-  var DateInput = class extends React44.Component {
+  var DateInput = class extends React45.Component {
     render() {
       const {
         className,
@@ -1679,7 +1718,7 @@
         disabled,
         showSpinButton
       } = this.props;
-      return /* @__PURE__ */ React44.createElement(Input, {
+      return /* @__PURE__ */ React45.createElement(Input, {
         size,
         rounded,
         fillMode,
@@ -1691,16 +1730,16 @@
         loading,
         disabled,
         className: classNames(className, "k-dateinput")
-      }, /* @__PURE__ */ React44.createElement(InputInnerInput, {
+      }, /* @__PURE__ */ React45.createElement(InputInnerInput, {
         placeholder,
         value
-      }), /* @__PURE__ */ React44.createElement(InputValidationIcon, {
+      }), /* @__PURE__ */ React45.createElement(InputValidationIcon, {
         ...this.props
-      }), /* @__PURE__ */ React44.createElement(InputLoadingIcon, {
+      }), /* @__PURE__ */ React45.createElement(InputLoadingIcon, {
         ...this.props
-      }), /* @__PURE__ */ React44.createElement(InputClearValue, {
+      }), /* @__PURE__ */ React45.createElement(InputClearValue, {
         ...this.props
-      }), showSpinButton && /* @__PURE__ */ React44.createElement(SpinButton, {
+      }), showSpinButton && /* @__PURE__ */ React45.createElement(SpinButton, {
         className: "k-input-spinner",
         size,
         fillMode
@@ -1712,8 +1751,8 @@
   };
 
   // src/datepicker/datepicker.tsx
-  var React45 = __toESM(__require("react"));
-  var DatePicker = class extends React45.Component {
+  var React46 = __toESM(__require("react"));
+  var DatePicker = class extends React46.Component {
     render() {
       const {
         className,
@@ -1732,7 +1771,7 @@
         loading,
         disabled
       } = this.props;
-      return /* @__PURE__ */ React45.createElement(Input, {
+      return /* @__PURE__ */ React46.createElement(Input, {
         size,
         rounded,
         fillMode,
@@ -1744,16 +1783,16 @@
         loading,
         disabled,
         className: classNames(className, "k-datepicker")
-      }, /* @__PURE__ */ React45.createElement(InputPrefix, null, prefix), /* @__PURE__ */ React45.createElement(InputInnerInput, {
+      }, /* @__PURE__ */ React46.createElement(InputPrefix, null, prefix), /* @__PURE__ */ React46.createElement(InputInnerInput, {
         placeholder,
         value
-      }), /* @__PURE__ */ React45.createElement(InputSuffix, null, suffix), /* @__PURE__ */ React45.createElement(InputValidationIcon, {
+      }), /* @__PURE__ */ React46.createElement(InputSuffix, null, suffix), /* @__PURE__ */ React46.createElement(InputValidationIcon, {
         ...this.props
-      }), /* @__PURE__ */ React45.createElement(InputLoadingIcon, {
+      }), /* @__PURE__ */ React46.createElement(InputLoadingIcon, {
         ...this.props
-      }), /* @__PURE__ */ React45.createElement(InputClearValue, {
+      }), /* @__PURE__ */ React46.createElement(InputClearValue, {
         ...this.props
-      }), /* @__PURE__ */ React45.createElement(Button, {
+      }), /* @__PURE__ */ React46.createElement(Button, {
         className: "k-input-button",
         icon: "calendar",
         rounded: null,
@@ -1764,8 +1803,8 @@
   };
 
   // src/timepicker/timepicker.tsx
-  var React46 = __toESM(__require("react"));
-  var TimePicker = class extends React46.Component {
+  var React47 = __toESM(__require("react"));
+  var TimePicker = class extends React47.Component {
     render() {
       const {
         className,
@@ -1784,7 +1823,7 @@
         loading,
         disabled
       } = this.props;
-      return /* @__PURE__ */ React46.createElement(Input, {
+      return /* @__PURE__ */ React47.createElement(Input, {
         size,
         rounded,
         fillMode,
@@ -1796,16 +1835,16 @@
         loading,
         disabled,
         className: classNames(className, "k-timepicker")
-      }, /* @__PURE__ */ React46.createElement(InputPrefix, null, prefix), /* @__PURE__ */ React46.createElement(InputInnerInput, {
+      }, /* @__PURE__ */ React47.createElement(InputPrefix, null, prefix), /* @__PURE__ */ React47.createElement(InputInnerInput, {
         placeholder,
         value
-      }), /* @__PURE__ */ React46.createElement(InputSuffix, null, suffix), /* @__PURE__ */ React46.createElement(InputValidationIcon, {
+      }), /* @__PURE__ */ React47.createElement(InputSuffix, null, suffix), /* @__PURE__ */ React47.createElement(InputValidationIcon, {
         ...this.props
-      }), /* @__PURE__ */ React46.createElement(InputLoadingIcon, {
+      }), /* @__PURE__ */ React47.createElement(InputLoadingIcon, {
         ...this.props
-      }), /* @__PURE__ */ React46.createElement(InputClearValue, {
+      }), /* @__PURE__ */ React47.createElement(InputClearValue, {
         ...this.props
-      }), /* @__PURE__ */ React46.createElement(Button, {
+      }), /* @__PURE__ */ React47.createElement(Button, {
         className: "k-input-button",
         icon: "clock",
         rounded: null,
@@ -1816,8 +1855,8 @@
   };
 
   // src/datetimepicker/datetimepicker.tsx
-  var React47 = __toESM(__require("react"));
-  var DateTimePicker = class extends React47.Component {
+  var React48 = __toESM(__require("react"));
+  var DateTimePicker = class extends React48.Component {
     render() {
       const {
         className,
@@ -1836,7 +1875,7 @@
         loading,
         disabled
       } = this.props;
-      return /* @__PURE__ */ React47.createElement(Input, {
+      return /* @__PURE__ */ React48.createElement(Input, {
         size,
         rounded,
         fillMode,
@@ -1848,16 +1887,16 @@
         loading,
         disabled,
         className: classNames(className, "k-datetimepicker")
-      }, /* @__PURE__ */ React47.createElement(InputPrefix, null, prefix), /* @__PURE__ */ React47.createElement(InputInnerInput, {
+      }, /* @__PURE__ */ React48.createElement(InputPrefix, null, prefix), /* @__PURE__ */ React48.createElement(InputInnerInput, {
         placeholder,
         value
-      }), /* @__PURE__ */ React47.createElement(InputSuffix, null, suffix), /* @__PURE__ */ React47.createElement(InputValidationIcon, {
+      }), /* @__PURE__ */ React48.createElement(InputSuffix, null, suffix), /* @__PURE__ */ React48.createElement(InputValidationIcon, {
         ...this.props
-      }), /* @__PURE__ */ React47.createElement(InputLoadingIcon, {
+      }), /* @__PURE__ */ React48.createElement(InputLoadingIcon, {
         ...this.props
-      }), /* @__PURE__ */ React47.createElement(InputClearValue, {
+      }), /* @__PURE__ */ React48.createElement(InputClearValue, {
         ...this.props
-      }), /* @__PURE__ */ React47.createElement(Button, {
+      }), /* @__PURE__ */ React48.createElement(Button, {
         className: "k-input-button",
         icon: "calendar",
         rounded: null,
@@ -1868,8 +1907,8 @@
   };
 
   // src/daterangepicker/daterangepicker.tsx
-  var React48 = __toESM(__require("react"));
-  var DateRangePicker = class extends React48.Component {
+  var React49 = __toESM(__require("react"));
+  var DateRangePicker = class extends React49.Component {
     render() {
       const {
         className,
@@ -1880,7 +1919,7 @@
         disabled,
         style
       } = this.props;
-      return /* @__PURE__ */ React48.createElement("span", {
+      return /* @__PURE__ */ React49.createElement("span", {
         style,
         className: classNames(
           className,
@@ -1889,22 +1928,22 @@
             "k-disabled": disabled
           }
         )
-      }, /* @__PURE__ */ React48.createElement(FloatingLabel, {
+      }, /* @__PURE__ */ React49.createElement(FloatingLabel, {
         label: "Start"
-      }, /* @__PURE__ */ React48.createElement(DateInput, {
+      }, /* @__PURE__ */ React49.createElement(DateInput, {
         showSpinButton: false,
         size,
         rounded,
         fillMode
-      })), swapButton && /* @__PURE__ */ React48.createElement(Button, {
+      })), swapButton && /* @__PURE__ */ React49.createElement(Button, {
         rounded,
         size,
         fillMode: "flat",
         icon: "arrows-swap",
         iconClassName: "k-rotate-90"
-      }), /* @__PURE__ */ React48.createElement(FloatingLabel, {
+      }), /* @__PURE__ */ React49.createElement(FloatingLabel, {
         label: "End"
-      }, /* @__PURE__ */ React48.createElement(DateInput, {
+      }, /* @__PURE__ */ React49.createElement(DateInput, {
         showSpinButton: false,
         size,
         rounded,
@@ -1914,8 +1953,8 @@
   };
 
   // src/dropdowngrid/dropdowngrid.tsx
-  var React49 = __toESM(__require("react"));
-  var DropdownGrid = class extends React49.Component {
+  var React50 = __toESM(__require("react"));
+  var DropdownGrid = class extends React50.Component {
     render() {
       const {
         className,
@@ -1934,7 +1973,7 @@
         loading,
         disabled
       } = this.props;
-      return /* @__PURE__ */ React49.createElement(Input, {
+      return /* @__PURE__ */ React50.createElement(Input, {
         size,
         rounded,
         fillMode,
@@ -1946,16 +1985,16 @@
         loading,
         disabled,
         className: classNames(className, "k-dropdowngrid")
-      }, /* @__PURE__ */ React49.createElement(InputPrefix, null, prefix), /* @__PURE__ */ React49.createElement(InputInnerInput, {
+      }, /* @__PURE__ */ React50.createElement(InputPrefix, null, prefix), /* @__PURE__ */ React50.createElement(InputInnerInput, {
         placeholder,
         value
-      }), /* @__PURE__ */ React49.createElement(InputSuffix, null, suffix), /* @__PURE__ */ React49.createElement(InputValidationIcon, {
+      }), /* @__PURE__ */ React50.createElement(InputSuffix, null, suffix), /* @__PURE__ */ React50.createElement(InputValidationIcon, {
         ...this.props
-      }), /* @__PURE__ */ React49.createElement(InputLoadingIcon, {
+      }), /* @__PURE__ */ React50.createElement(InputLoadingIcon, {
         ...this.props
-      }), /* @__PURE__ */ React49.createElement(InputClearValue, {
+      }), /* @__PURE__ */ React50.createElement(InputClearValue, {
         ...this.props
-      }), /* @__PURE__ */ React49.createElement(Button, {
+      }), /* @__PURE__ */ React50.createElement(Button, {
         className: "k-input-button",
         icon: "arrow-s",
         rounded: null,
@@ -1966,8 +2005,8 @@
   };
 
   // src/dropdownlist/dropdownlist.tsx
-  var React50 = __toESM(__require("react"));
-  var DropdownList = class extends React50.Component {
+  var React51 = __toESM(__require("react"));
+  var DropdownList = class extends React51.Component {
     render() {
       const {
         className,
@@ -1990,7 +2029,7 @@
         disabled,
         showValue
       } = this.props;
-      return /* @__PURE__ */ React50.createElement(Picker, {
+      return /* @__PURE__ */ React51.createElement(Picker, {
         style,
         size,
         rounded,
@@ -2009,16 +2048,16 @@
             "k-icon-picker": !showValue && valueIconName
           }
         )
-      }, /* @__PURE__ */ React50.createElement(InputPrefix, null, prefix), /* @__PURE__ */ React50.createElement(InputInnerSpan, {
+      }, /* @__PURE__ */ React51.createElement(InputPrefix, null, prefix), /* @__PURE__ */ React51.createElement(InputInnerSpan, {
         placeholder,
         value,
         showValue,
         valueIconName
-      }), /* @__PURE__ */ React50.createElement(InputSuffix, null, suffix), /* @__PURE__ */ React50.createElement(InputValidationIcon, {
+      }), /* @__PURE__ */ React51.createElement(InputSuffix, null, suffix), /* @__PURE__ */ React51.createElement(InputValidationIcon, {
         ...this.props
-      }), /* @__PURE__ */ React50.createElement(InputLoadingIcon, {
+      }), /* @__PURE__ */ React51.createElement(InputLoadingIcon, {
         ...this.props
-      }), /* @__PURE__ */ React50.createElement(Button, {
+      }), /* @__PURE__ */ React51.createElement(Button, {
         className: "k-input-button",
         icon: arrowIconName,
         rounded: null,
@@ -2033,8 +2072,8 @@
   };
 
   // src/maskedtextbox/maskedtextbox.tsx
-  var React51 = __toESM(__require("react"));
-  var MaskedTextbox = class extends React51.Component {
+  var React52 = __toESM(__require("react"));
+  var MaskedTextbox = class extends React52.Component {
     render() {
       const {
         className,
@@ -2051,7 +2090,7 @@
         loading,
         disabled
       } = this.props;
-      return /* @__PURE__ */ React51.createElement(Input, {
+      return /* @__PURE__ */ React52.createElement(Input, {
         size,
         rounded,
         fillMode,
@@ -2063,22 +2102,22 @@
         loading,
         disabled,
         className: classNames(className, "k-maskedtextbox")
-      }, /* @__PURE__ */ React51.createElement(InputInnerInput, {
+      }, /* @__PURE__ */ React52.createElement(InputInnerInput, {
         placeholder,
         value
-      }), /* @__PURE__ */ React51.createElement(InputValidationIcon, {
+      }), /* @__PURE__ */ React52.createElement(InputValidationIcon, {
         ...this.props
-      }), /* @__PURE__ */ React51.createElement(InputLoadingIcon, {
+      }), /* @__PURE__ */ React52.createElement(InputLoadingIcon, {
         ...this.props
-      }), /* @__PURE__ */ React51.createElement(InputClearValue, {
+      }), /* @__PURE__ */ React52.createElement(InputClearValue, {
         ...this.props
       }));
     }
   };
 
   // src/multiselect/multiselect.tsx
-  var React52 = __toESM(__require("react"));
-  var MultiSelect = class extends React52.Component {
+  var React53 = __toESM(__require("react"));
+  var MultiSelect = class extends React53.Component {
     render() {
       const {
         className,
@@ -2099,7 +2138,7 @@
         loading,
         disabled
       } = this.props;
-      return /* @__PURE__ */ React52.createElement(Input, {
+      return /* @__PURE__ */ React53.createElement(Input, {
         size,
         rounded,
         fillMode,
@@ -2111,20 +2150,20 @@
         loading,
         disabled,
         className: classNames(className, "k-multiselect")
-      }, /* @__PURE__ */ React52.createElement(InputPrefix, null, prefix), /* @__PURE__ */ React52.createElement(ChipList, {
+      }, /* @__PURE__ */ React53.createElement(InputPrefix, null, prefix), /* @__PURE__ */ React53.createElement(ChipList, {
         className: "k-input-values",
         size
-      }, /* @__PURE__ */ React52.createElement(React52.Fragment, null, tags), /* @__PURE__ */ React52.createElement(InputInnerInput, {
+      }, /* @__PURE__ */ React53.createElement(React53.Fragment, null, tags), /* @__PURE__ */ React53.createElement(InputInnerInput, {
         placeholder,
         value
-      })), /* @__PURE__ */ React52.createElement(InputSuffix, null, suffix), /* @__PURE__ */ React52.createElement(InputValidationIcon, {
+      })), /* @__PURE__ */ React53.createElement(InputSuffix, null, suffix), /* @__PURE__ */ React53.createElement(InputValidationIcon, {
         ...this.props
-      }), /* @__PURE__ */ React52.createElement(InputLoadingIcon, {
+      }), /* @__PURE__ */ React53.createElement(InputLoadingIcon, {
         ...this.props
-      }), /* @__PURE__ */ React52.createElement(InputClearValue, {
+      }), /* @__PURE__ */ React53.createElement(InputClearValue, {
         value: tags ? "value" : "",
         ...this.props
-      }), showArrowButton && /* @__PURE__ */ React52.createElement(Button, {
+      }), showArrowButton && /* @__PURE__ */ React53.createElement(Button, {
         className: "k-input-button",
         icon: "arrow-s",
         rounded: null,
@@ -2135,8 +2174,8 @@
   };
 
   // src/numerictextbox/numerictextbox.tsx
-  var React53 = __toESM(__require("react"));
-  var NumericTextbox = class extends React53.Component {
+  var React54 = __toESM(__require("react"));
+  var NumericTextbox = class extends React54.Component {
     render() {
       const {
         className,
@@ -2155,7 +2194,7 @@
         showSpinButton,
         showClearButton
       } = this.props;
-      return /* @__PURE__ */ React53.createElement(Input, {
+      return /* @__PURE__ */ React54.createElement(Input, {
         size,
         rounded,
         fillMode,
@@ -2167,16 +2206,16 @@
         loading,
         disabled,
         className: classNames(className, "k-numerictextbox")
-      }, /* @__PURE__ */ React53.createElement(InputInnerInput, {
+      }, /* @__PURE__ */ React54.createElement(InputInnerInput, {
         placeholder,
         value
-      }), /* @__PURE__ */ React53.createElement(InputValidationIcon, {
+      }), /* @__PURE__ */ React54.createElement(InputValidationIcon, {
         ...this.props
-      }), /* @__PURE__ */ React53.createElement(InputLoadingIcon, {
+      }), /* @__PURE__ */ React54.createElement(InputLoadingIcon, {
         ...this.props
-      }), showClearButton && /* @__PURE__ */ React53.createElement(InputClearValue, {
+      }), showClearButton && /* @__PURE__ */ React54.createElement(InputClearValue, {
         ...this.props
-      }), showSpinButton && /* @__PURE__ */ React53.createElement(SpinButton, {
+      }), showSpinButton && /* @__PURE__ */ React54.createElement(SpinButton, {
         className: "k-input-spinner",
         size,
         fillMode
@@ -2189,8 +2228,8 @@
   };
 
   // src/searchbox/searchbox.tsx
-  var React54 = __toESM(__require("react"));
-  var Searchbox = class extends React54.Component {
+  var React55 = __toESM(__require("react"));
+  var Searchbox = class extends React55.Component {
     render() {
       const {
         className,
@@ -2209,7 +2248,7 @@
         showIcon = true,
         icon = "search"
       } = this.props;
-      return /* @__PURE__ */ React54.createElement(Input, {
+      return /* @__PURE__ */ React55.createElement(Input, {
         size,
         rounded,
         fillMode,
@@ -2221,25 +2260,25 @@
         loading,
         disabled,
         className: classNames(className, "k-searchbox")
-      }, showIcon && /* @__PURE__ */ React54.createElement(Icon, {
+      }, showIcon && /* @__PURE__ */ React55.createElement(Icon, {
         className: "k-input-icon",
         name: icon
-      }), /* @__PURE__ */ React54.createElement(InputInnerInput, {
+      }), /* @__PURE__ */ React55.createElement(InputInnerInput, {
         placeholder,
         value
-      }), /* @__PURE__ */ React54.createElement(InputValidationIcon, {
+      }), /* @__PURE__ */ React55.createElement(InputValidationIcon, {
         ...this.props
-      }), /* @__PURE__ */ React54.createElement(InputLoadingIcon, {
+      }), /* @__PURE__ */ React55.createElement(InputLoadingIcon, {
         ...this.props
-      }), /* @__PURE__ */ React54.createElement(InputClearValue, {
+      }), /* @__PURE__ */ React55.createElement(InputClearValue, {
         ...this.props
       }));
     }
   };
 
   // src/switch/switch.tsx
-  var React55 = __toESM(__require("react"));
-  var Switch = class extends React55.Component {
+  var React56 = __toESM(__require("react"));
+  var Switch = class extends React56.Component {
     render() {
       const {
         className,
@@ -2253,7 +2292,7 @@
         focus,
         disabled
       } = this.props;
-      return /* @__PURE__ */ React55.createElement("span", {
+      return /* @__PURE__ */ React56.createElement("span", {
         className: classNames(
           className,
           "k-switch",
@@ -2266,20 +2305,20 @@
             "k-switch-off": !checked
           }
         )
-      }, /* @__PURE__ */ React55.createElement("span", {
+      }, /* @__PURE__ */ React56.createElement("span", {
         className: classNames(
           "k-switch-track",
           {
             [`k-rounded-${kendoThemeMaps.roundedMap[trackRounded] || trackRounded}`]: trackRounded
           }
         )
-      }, onLabel && /* @__PURE__ */ React55.createElement("span", {
+      }, onLabel && /* @__PURE__ */ React56.createElement("span", {
         className: "k-switch-label-on"
-      }, onLabel), offLabel && /* @__PURE__ */ React55.createElement("span", {
+      }, onLabel), offLabel && /* @__PURE__ */ React56.createElement("span", {
         className: "k-switch-label-off"
-      }, offLabel)), /* @__PURE__ */ React55.createElement("span", {
+      }, offLabel)), /* @__PURE__ */ React56.createElement("span", {
         className: "k-switch-thumb-wrap"
-      }, /* @__PURE__ */ React55.createElement("span", {
+      }, /* @__PURE__ */ React56.createElement("span", {
         className: classNames(
           "k-switch-thumb",
           {
@@ -2296,8 +2335,8 @@
   };
 
   // src/fab/fab.tsx
-  var React56 = __toESM(__require("react"));
-  var FloatingActionButton = class extends React56.Component {
+  var React57 = __toESM(__require("react"));
+  var FloatingActionButton = class extends React57.Component {
     render() {
       const {
         className,
@@ -2318,7 +2357,7 @@
         disabled,
         ...htmlAttributes
       } = this.props;
-      return /* @__PURE__ */ React56.createElement("button", {
+      return /* @__PURE__ */ React57.createElement("button", {
         ...htmlAttributes,
         type,
         className: classNames(
@@ -2330,7 +2369,7 @@
             [`k-fab-${fillMode}`]: fillMode,
             [`k-fab-${fillMode}-${themeColor}`]: Boolean(fillMode && themeColor),
             [`k-rounded-${kendoThemeMaps.roundedMap[rounded] || rounded}`]: rounded,
-            [`k-pos-absolute k-${position}`]: position,
+            [`!k-pos-absolute k-${position}`]: position,
             "k-hover": hover,
             "k-focus": focus,
             "k-active": active,
@@ -2339,10 +2378,10 @@
           }
         ),
         style
-      }, icon && /* @__PURE__ */ React56.createElement(Icon, {
+      }, icon && /* @__PURE__ */ React57.createElement(Icon, {
         className: "k-fab-icon",
         name: icon
-      }), text && /* @__PURE__ */ React56.createElement("span", {
+      }), text && /* @__PURE__ */ React57.createElement("span", {
         className: "k-fab-text"
       }, text));
     }
@@ -2357,8 +2396,8 @@
   };
 
   // src/menu/menu-item.tsx
-  var React57 = __toESM(__require("react"));
-  var MenuItem = class extends React57.Component {
+  var React58 = __toESM(__require("react"));
+  var MenuItem = class extends React58.Component {
     render() {
       const {
         className,
@@ -2374,7 +2413,7 @@
         disabled,
         dir
       } = this.props;
-      const contentTemplate = /* @__PURE__ */ React57.createElement(React57.Fragment, null);
+      const contentTemplate = /* @__PURE__ */ React58.createElement(React58.Fragment, null);
       if (children) {
         children.forEach((child) => {
           const component = child.type;
@@ -2388,7 +2427,7 @@
       if (!expandArrowName) {
         expandArrowName = dir === "rtl" ? "arrow-w" : "arrow-e";
       }
-      return /* @__PURE__ */ React57.createElement("li", {
+      return /* @__PURE__ */ React58.createElement("li", {
         className: classNames(
           className,
           "k-item k-menu-item",
@@ -2397,7 +2436,7 @@
             "k-focus": focus
           }
         )
-      }, /* @__PURE__ */ React57.createElement("span", {
+      }, /* @__PURE__ */ React58.createElement("span", {
         className: classNames(
           className,
           "k-link k-menu-link",
@@ -2408,14 +2447,14 @@
             "k-disabled": disabled
           }
         )
-      }, icon && /* @__PURE__ */ React57.createElement(Icon, {
+      }, icon && /* @__PURE__ */ React58.createElement(Icon, {
         className: "k-menu-link-icon",
         name: icon
-      }), /* @__PURE__ */ React57.createElement("span", {
+      }), /* @__PURE__ */ React58.createElement("span", {
         className: "k-menu-link-text"
-      }, text), showArrow && /* @__PURE__ */ React57.createElement("span", {
+      }, text), showArrow && /* @__PURE__ */ React58.createElement("span", {
         className: "k-menu-expand-arrow"
-      }, /* @__PURE__ */ React57.createElement(Icon, {
+      }, /* @__PURE__ */ React58.createElement(Icon, {
         name: expandArrowName
       }))), contentTemplate);
     }
@@ -2426,17 +2465,17 @@
   };
 
   // src/menu/menu-item-content.tsx
-  var React58 = __toESM(__require("react"));
-  var MenuItemContent = class extends React58.Component {
+  var React59 = __toESM(__require("react"));
+  var MenuItemContent = class extends React59.Component {
     render() {
       const {
         className,
         children
       } = this.props;
       if (!children) {
-        return /* @__PURE__ */ React58.createElement(React58.Fragment, null);
+        return /* @__PURE__ */ React59.createElement(React59.Fragment, null);
       }
-      return /* @__PURE__ */ React58.createElement("span", {
+      return /* @__PURE__ */ React59.createElement("span", {
         className: classNames(
           className,
           "k-menu-item-content"
@@ -2446,8 +2485,8 @@
   };
 
   // src/menu/menu-list.tsx
-  var React59 = __toESM(__require("react"));
-  var MenuList = class extends React59.Component {
+  var React60 = __toESM(__require("react"));
+  var MenuList = class extends React60.Component {
     render() {
       const {
         className,
@@ -2455,9 +2494,9 @@
         size
       } = this.props;
       if (!children) {
-        return /* @__PURE__ */ React59.createElement(React59.Fragment, null);
+        return /* @__PURE__ */ React60.createElement(React60.Fragment, null);
       }
-      return /* @__PURE__ */ React59.createElement("ul", {
+      return /* @__PURE__ */ React60.createElement("ul", {
         className: classNames(
           className,
           "k-menu-group",
@@ -2473,8 +2512,8 @@
   };
 
   // src/popover/popover.tsx
-  var React60 = __toESM(__require("react"));
-  var Popover = class extends React60.Component {
+  var React61 = __toESM(__require("react"));
+  var Popover = class extends React61.Component {
     render() {
       const {
         className,
@@ -2484,50 +2523,52 @@
         body,
         ...htmlAttributes
       } = this.props;
-      return /* @__PURE__ */ React60.createElement("div", {
+      return /* @__PURE__ */ React61.createElement("div", {
         className: classNames(className, "k-popover"),
         ...htmlAttributes
-      }, callout && /* @__PURE__ */ React60.createElement("div", {
+      }, callout && /* @__PURE__ */ React61.createElement("div", {
         className: classNames(
           "k-popover-callout",
           {
             [`k-callout-${kendoThemeMaps.calloutMap[callout] || callout}`]: callout
           }
         )
-      }), title && /* @__PURE__ */ React60.createElement("div", {
+      }), /* @__PURE__ */ React61.createElement("div", {
+        className: "k-popover-inner"
+      }, title && /* @__PURE__ */ React61.createElement("div", {
         className: "k-popover-header"
-      }, title), body && /* @__PURE__ */ React60.createElement("div", {
+      }, title), body && /* @__PURE__ */ React61.createElement("div", {
         className: "k-popover-body"
-      }, body), /* @__PURE__ */ React60.createElement(React60.Fragment, null, children));
+      }, body), /* @__PURE__ */ React61.createElement(React61.Fragment, null, children)));
     }
   };
 
   // src/treeview/treeview.tsx
-  var React62 = __toESM(__require("react"));
+  var React63 = __toESM(__require("react"));
 
   // src/treeview/treeview-group.tsx
-  var React61 = __toESM(__require("react"));
-  var TreeviewGroup = class extends React61.Component {
+  var React62 = __toESM(__require("react"));
+  var TreeviewGroup = class extends React62.Component {
     render() {
       const {
         className,
         children
       } = this.props;
-      return /* @__PURE__ */ React61.createElement("ul", {
+      return /* @__PURE__ */ React62.createElement("ul", {
         className: classNames(className, "k-treeview-group")
       }, children);
     }
   };
 
   // src/treeview/treeview.tsx
-  var Treeview = class extends React62.Component {
+  var Treeview = class extends React63.Component {
     render() {
       const {
         className,
         size,
         children
       } = this.props;
-      return /* @__PURE__ */ React62.createElement("div", {
+      return /* @__PURE__ */ React63.createElement("div", {
         className: classNames(
           className,
           "k-treeview",
@@ -2535,7 +2576,7 @@
             [`k-treeview-${kendoThemeMaps.sizeMap[size] || size}`]: size
           }
         )
-      }, /* @__PURE__ */ React62.createElement(TreeviewGroup, {
+      }, /* @__PURE__ */ React63.createElement(TreeviewGroup, {
         className: "k-treeview-lines"
       }, children));
     }
@@ -2545,11 +2586,11 @@
   };
 
   // src/treeview/treeview-item.tsx
-  var React64 = __toESM(__require("react"));
+  var React65 = __toESM(__require("react"));
 
   // src/treeview/treeview-leaf.tsx
-  var React63 = __toESM(__require("react"));
-  var TreeViewLeaf = class extends React63.Component {
+  var React64 = __toESM(__require("react"));
+  var TreeViewLeaf = class extends React64.Component {
     render() {
       const {
         className,
@@ -2560,7 +2601,7 @@
         focus,
         selected
       } = this.props;
-      return /* @__PURE__ */ React63.createElement("span", {
+      return /* @__PURE__ */ React64.createElement("span", {
         className: classNames(
           className,
           "k-treeview-leaf",
@@ -2570,16 +2611,16 @@
             "k-selected": selected
           }
         )
-      }, showIcon && /* @__PURE__ */ React63.createElement(Icon, {
+      }, showIcon && /* @__PURE__ */ React64.createElement(Icon, {
         name: icon
-      }), /* @__PURE__ */ React63.createElement("span", {
+      }), /* @__PURE__ */ React64.createElement("span", {
         className: "k-treeview-leaf-text"
       }, text));
     }
   };
 
   // src/treeview/treeview-item.tsx
-  var TreeviewItem = class extends React64.Component {
+  var TreeviewItem = class extends React65.Component {
     render() {
       const {
         className,
@@ -2598,7 +2639,7 @@
         disabled
       } = this.props;
       const _hasChildren = hasChildren || children;
-      return /* @__PURE__ */ React64.createElement("li", {
+      return /* @__PURE__ */ React65.createElement("li", {
         className: classNames(
           className,
           "k-treeview-item",
@@ -2606,15 +2647,15 @@
             "k-disabled": disabled
           }
         )
-      }, /* @__PURE__ */ React64.createElement("span", {
+      }, /* @__PURE__ */ React65.createElement("span", {
         className: "k-treeview-mid"
-      }, _hasChildren && /* @__PURE__ */ React64.createElement("span", {
+      }, _hasChildren && /* @__PURE__ */ React65.createElement("span", {
         className: "k-treeview-toggle"
-      }, /* @__PURE__ */ React64.createElement(Icon, {
+      }, /* @__PURE__ */ React65.createElement(Icon, {
         name: expanded ? "collapse" : "expand"
-      })), showCheckbox && /* @__PURE__ */ React64.createElement(Checkbox, {
+      })), showCheckbox && /* @__PURE__ */ React65.createElement(Checkbox, {
         checked
-      }), /* @__PURE__ */ React64.createElement(TreeViewLeaf, {
+      }), /* @__PURE__ */ React65.createElement(TreeViewLeaf, {
         className: leafClassName,
         text,
         showIcon,
@@ -2622,13 +2663,13 @@
         hover,
         focus,
         selected
-      })), expanded && _hasChildren && /* @__PURE__ */ React64.createElement(React64.Fragment, null, children));
+      })), expanded && _hasChildren && /* @__PURE__ */ React65.createElement(React65.Fragment, null, children));
     }
   };
 
   // src/card/card.tsx
-  var React65 = __toESM(__require("react"));
-  var Card = class extends React65.Component {
+  var React66 = __toESM(__require("react"));
+  var Card = class extends React66.Component {
     render() {
       const {
         children,
@@ -2642,7 +2683,7 @@
         disabled,
         ...htmlAttributes
       } = this.props;
-      return /* @__PURE__ */ React65.createElement("div", {
+      return /* @__PURE__ */ React66.createElement("div", {
         style: this.props.style,
         ...htmlAttributes,
         className: classNames(
@@ -2658,22 +2699,22 @@
           },
           className
         )
-      }, callout && callout !== "true" && /* @__PURE__ */ React65.createElement(CardCallout, {
+      }, callout && callout !== "true" && /* @__PURE__ */ React66.createElement(CardCallout, {
         callout
-      }), /* @__PURE__ */ React65.createElement(React65.Fragment, null, children));
+      }), /* @__PURE__ */ React66.createElement(React66.Fragment, null, children));
     }
   };
 
   // src/card/card-callout.tsx
-  var React66 = __toESM(__require("react"));
-  var CardCallout = class extends React66.Component {
+  var React67 = __toESM(__require("react"));
+  var CardCallout = class extends React67.Component {
     render() {
       const {
         className,
         callout,
         ...htmlAttributes
       } = this.props;
-      return /* @__PURE__ */ React66.createElement("span", {
+      return /* @__PURE__ */ React67.createElement("span", {
         ...htmlAttributes,
         className: classNames(
           "k-card-callout",
@@ -2687,8 +2728,8 @@
   };
 
   // src/card/card-title.tsx
-  var React67 = __toESM(__require("react"));
-  var CardTitle = class extends React67.Component {
+  var React68 = __toESM(__require("react"));
+  var CardTitle = class extends React68.Component {
     render() {
       const {
         children,
@@ -2697,7 +2738,7 @@
         focus,
         ...htmlAttributes
       } = this.props;
-      return /* @__PURE__ */ React67.createElement("div", {
+      return /* @__PURE__ */ React68.createElement("div", {
         ...htmlAttributes,
         className: classNames(
           "k-card-title",
@@ -2712,15 +2753,15 @@
   };
 
   // src/card/card-subtitle.tsx
-  var React68 = __toESM(__require("react"));
-  var CardSubtitle = class extends React68.Component {
+  var React69 = __toESM(__require("react"));
+  var CardSubtitle = class extends React69.Component {
     render() {
       const {
         children,
         className,
         ...htmlAttributes
       } = this.props;
-      return /* @__PURE__ */ React68.createElement("div", {
+      return /* @__PURE__ */ React69.createElement("div", {
         ...htmlAttributes,
         className: classNames(
           "k-card-subtitle",
@@ -2731,8 +2772,8 @@
   };
 
   // src/card/card-img.tsx
-  var React69 = __toESM(__require("react"));
-  var CardImage = class extends React69.Component {
+  var React70 = __toESM(__require("react"));
+  var CardImage = class extends React70.Component {
     render() {
       const {
         children,
@@ -2740,7 +2781,7 @@
         src,
         ...htmlAttributes
       } = this.props;
-      return /* @__PURE__ */ React69.createElement(React69.Fragment, null, src ? /* @__PURE__ */ React69.createElement("img", {
+      return /* @__PURE__ */ React70.createElement(React70.Fragment, null, src ? /* @__PURE__ */ React70.createElement("img", {
         style: this.props.style,
         ...htmlAttributes,
         className: classNames(
@@ -2748,20 +2789,20 @@
           className
         ),
         src
-      }) : /* @__PURE__ */ React69.createElement("span", {
+      }) : /* @__PURE__ */ React70.createElement("span", {
         style: this.props.style,
         ...htmlAttributes,
         className: classNames(
           "k-card-image",
           className
         )
-      }, /* @__PURE__ */ React69.createElement(React69.Fragment, null, children)));
+      }, /* @__PURE__ */ React70.createElement(React70.Fragment, null, children)));
     }
   };
 
   // src/card/card-header.tsx
-  var React70 = __toESM(__require("react"));
-  var CardHeader = class extends React70.Component {
+  var React71 = __toESM(__require("react"));
+  var CardHeader = class extends React71.Component {
     render() {
       const {
         children,
@@ -2771,15 +2812,15 @@
         details,
         ...htmlAttributes
       } = this.props;
-      return /* @__PURE__ */ React70.createElement("div", {
+      return /* @__PURE__ */ React71.createElement("div", {
         ...htmlAttributes,
         className: classNames(
           "k-card-header",
           className
         )
-      }, title && /* @__PURE__ */ React70.createElement(CardTitle, null, title), subtitle && /* @__PURE__ */ React70.createElement(CardSubtitle, null, subtitle), /* @__PURE__ */ React70.createElement(React70.Fragment, null, children), details && /* @__PURE__ */ React70.createElement("span", {
+      }, title && /* @__PURE__ */ React71.createElement(CardTitle, null, title), subtitle && /* @__PURE__ */ React71.createElement(CardSubtitle, null, subtitle), /* @__PURE__ */ React71.createElement(React71.Fragment, null, children), details && /* @__PURE__ */ React71.createElement("span", {
         className: "k-card-header-actions"
-      }, /* @__PURE__ */ React70.createElement(Button, {
+      }, /* @__PURE__ */ React71.createElement(Button, {
         className: "k-card-details",
         icon: "more-vertical",
         rounded: "medium",
@@ -2791,15 +2832,15 @@
   };
 
   // src/card/card-footer.tsx
-  var React71 = __toESM(__require("react"));
-  var CardFooter = class extends React71.Component {
+  var React72 = __toESM(__require("react"));
+  var CardFooter = class extends React72.Component {
     render() {
       const {
         children,
         className,
         ...htmlAttributes
       } = this.props;
-      return /* @__PURE__ */ React71.createElement("div", {
+      return /* @__PURE__ */ React72.createElement("div", {
         ...htmlAttributes,
         className: classNames(
           "k-card-footer",
@@ -2810,8 +2851,8 @@
   };
 
   // src/card/card-body.tsx
-  var React72 = __toESM(__require("react"));
-  var CardBody = class extends React72.Component {
+  var React73 = __toESM(__require("react"));
+  var CardBody = class extends React73.Component {
     render() {
       const {
         children,
@@ -2821,16 +2862,16 @@
         details,
         ...htmlAttributes
       } = this.props;
-      return /* @__PURE__ */ React72.createElement("div", {
+      return /* @__PURE__ */ React73.createElement("div", {
         style: this.props.style,
         ...htmlAttributes,
         className: classNames(
           "k-card-body",
           className
         )
-      }, title && /* @__PURE__ */ React72.createElement(CardTitle, null, title), subtitle && /* @__PURE__ */ React72.createElement(CardSubtitle, null, subtitle), /* @__PURE__ */ React72.createElement(React72.Fragment, null, children), details && /* @__PURE__ */ React72.createElement("span", {
+      }, title && /* @__PURE__ */ React73.createElement(CardTitle, null, title), subtitle && /* @__PURE__ */ React73.createElement(CardSubtitle, null, subtitle), /* @__PURE__ */ React73.createElement(React73.Fragment, null, children), details && /* @__PURE__ */ React73.createElement("span", {
         className: "k-card-body-actions"
-      }, /* @__PURE__ */ React72.createElement(Button, {
+      }, /* @__PURE__ */ React73.createElement(Button, {
         className: "k-card-details",
         icon: "more-vertical",
         rounded: "medium",
@@ -2842,15 +2883,15 @@
   };
 
   // src/card/card-deck.tsx
-  var React73 = __toESM(__require("react"));
-  var CardDeck = class extends React73.Component {
+  var React74 = __toESM(__require("react"));
+  var CardDeck = class extends React74.Component {
     render() {
       const {
         children,
         className,
         ...htmlAttributes
       } = this.props;
-      return /* @__PURE__ */ React73.createElement("div", {
+      return /* @__PURE__ */ React74.createElement("div", {
         ...htmlAttributes,
         className: classNames(
           "k-card-deck",