@progress/kendo-themes-html 5.8.2-dev.4 → 5.8.2-dev.6

package/dist/index.js

@@ -1,10 +1,27 @@
 (() => {
   var __create = Object.create;
   var __defProp = Object.defineProperty;
+  var __defProps = Object.defineProperties;
   var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+  var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
   var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __getOwnPropSymbols = Object.getOwnPropertySymbols;
   var __getProtoOf = Object.getPrototypeOf;
   var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __propIsEnum = Object.prototype.propertyIsEnumerable;
+  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __spreadValues = (a, b) => {
+    for (var prop in b ||= {})
+      if (__hasOwnProp.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    if (__getOwnPropSymbols)
+      for (var prop of __getOwnPropSymbols(b)) {
+        if (__propIsEnum.call(b, prop))
+          __defNormalProp(a, prop, b[prop]);
+      }
+    return a;
+  };
+  var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
   var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
     get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
   }) : x)(function(x) {
@@ -12,6 +29,18 @@
       return require.apply(this, arguments);
     throw new Error('Dynamic require of "' + x + '" is not supported');
   });
+  var __objRest = (source, exclude) => {
+    var target = {};
+    for (var prop in source)
+      if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+        target[prop] = source[prop];
+    if (source != null && __getOwnPropSymbols)
+      for (var prop of __getOwnPropSymbols(source)) {
+        if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+          target[prop] = source[prop];
+      }
+    return target;
+  };
   var __copyProps = (to, from, except, desc) => {
     if (from && typeof from === "object" || typeof from === "function") {
       for (let key of __getOwnPropNames(from))
@@ -70,23 +99,25 @@
   // src/typography/typography.tsx
   var Typography = class extends React.Component {
     render() {
-      const {
+      const _a = this.props, {
         children,
         className,
-        type,
-        ...htmlAttributes
-      } = this.props;
+        type
+      } = _a, htmlAttributes = __objRest(_a, [
+        "children",
+        "className",
+        "type"
+      ]);
       const typeClass = type === "p" ? "paragraph" : type;
-      const Component75 = type.includes("display") ? "div" : type;
-      return /* @__PURE__ */ React.createElement(Component75, {
-        ...htmlAttributes,
+      const Component80 = type.includes("display") ? "div" : type;
+      return /* @__PURE__ */ React.createElement(Component80, __spreadProps(__spreadValues({}, htmlAttributes), {
         className: classNames(
           {
             [`k-${typeClass}`]: type
           },
           className
         )
-      }, children);
+      }), children);
     }
   };
 
@@ -112,9 +143,41 @@
     }
   };
 
-  // src/input/input.tsx
+  // src/action-buttons/action-buttons.tsx
   var React3 = __toESM(__require("react"));
-  var Input = class extends React3.Component {
+  var ActionButtons = class extends React3.Component {
+    render() {
+      const _a = this.props, {
+        children,
+        className,
+        alignment,
+        orientation
+      } = _a, htmlAttributes = __objRest(_a, [
+        "children",
+        "className",
+        "alignment",
+        "orientation"
+      ]);
+      return /* @__PURE__ */ React3.createElement("div", __spreadProps(__spreadValues({}, htmlAttributes), {
+        className: classNames(
+          "k-actions",
+          {
+            [`k-actions-${alignment}`]: alignment,
+            [`k-actions-${orientation}`]: orientation
+          },
+          className
+        )
+      }), children);
+    }
+  };
+  ActionButtons.defaultProps = {
+    alignment: "start",
+    orientation: "horizontal"
+  };
+
+  // src/input/input.tsx
+  var React4 = __toESM(__require("react"));
+  var Input = class extends React4.Component {
     render() {
       const {
         className,
@@ -130,7 +193,7 @@
         loading,
         disabled
       } = this.props;
-      return /* @__PURE__ */ React3.createElement("span", {
+      return /* @__PURE__ */ React4.createElement("span", {
         className: classNames(
           className,
           "k-input",
@@ -157,8 +220,8 @@
   };
 
   // src/input/picker.tsx
-  var React4 = __toESM(__require("react"));
-  var Picker = class extends React4.Component {
+  var React5 = __toESM(__require("react"));
+  var Picker = class extends React5.Component {
     render() {
       const {
         children,
@@ -175,7 +238,7 @@
         loading,
         disabled
       } = this.props;
-      return /* @__PURE__ */ React4.createElement("span", {
+      return /* @__PURE__ */ React5.createElement("span", {
         className: classNames(
           className,
           "k-picker",
@@ -203,8 +266,8 @@
   };
 
   // src/input/input-clear-value.tsx
-  var React5 = __toESM(__require("react"));
-  var InputClearValue = class extends React5.Component {
+  var React6 = __toESM(__require("react"));
+  var InputClearValue = class extends React6.Component {
     render() {
       const {
         readonly,
@@ -213,19 +276,19 @@
         value
       } = this.props;
       if (disabled || readonly || loading || !value) {
-        return /* @__PURE__ */ React5.createElement(React5.Fragment, null);
+        return /* @__PURE__ */ React6.createElement(React6.Fragment, null);
       }
-      return /* @__PURE__ */ React5.createElement("span", {
+      return /* @__PURE__ */ React6.createElement("span", {
         className: "k-clear-value"
-      }, /* @__PURE__ */ React5.createElement(Icon, {
+      }, /* @__PURE__ */ React6.createElement(Icon, {
         name: "x"
       }));
     }
   };
 
   // src/input/input-inner-input.tsx
-  var React6 = __toESM(__require("react"));
-  var InputInnerInput = class extends React6.Component {
+  var React7 = __toESM(__require("react"));
+  var InputInnerInput = class extends React7.Component {
     render() {
       const {
         type,
@@ -233,7 +296,7 @@
         placeholder,
         autocomplete
       } = this.props;
-      return /* @__PURE__ */ React6.createElement("input", {
+      return /* @__PURE__ */ React7.createElement("input", {
         type,
         className: "k-input-inner",
         placeholder,
@@ -250,8 +313,8 @@
   };
 
   // src/input/input-inner-span.tsx
-  var React7 = __toESM(__require("react"));
-  var InputInnerSpan = class extends React7.Component {
+  var React8 = __toESM(__require("react"));
+  var InputInnerSpan = class extends React8.Component {
     render() {
       const {
         value,
@@ -260,20 +323,20 @@
         showValue,
         valueIconName
       } = this.props;
-      return /* @__PURE__ */ React7.createElement("span", {
+      return /* @__PURE__ */ React8.createElement("span", {
         className: "k-input-inner"
-      }, valueIcon, !valueIcon && valueIconName && /* @__PURE__ */ React7.createElement(Icon, {
+      }, valueIcon, !valueIcon && valueIconName && /* @__PURE__ */ React8.createElement(Icon, {
         className: "k-input-value-icon",
         name: valueIconName
-      }), showValue && !value && placeholder, showValue && value && /* @__PURE__ */ React7.createElement("span", {
+      }), showValue && !value && placeholder, showValue && value && /* @__PURE__ */ React8.createElement("span", {
         className: "k-input-value-text"
       }, value));
     }
   };
 
   // src/input/input-inner-textarea.tsx
-  var React8 = __toESM(__require("react"));
-  var InputInnerTextarea = class extends React8.Component {
+  var React9 = __toESM(__require("react"));
+  var InputInnerTextarea = class extends React9.Component {
     render() {
       const {
         value,
@@ -281,7 +344,7 @@
         placeholder,
         rows
       } = this.props;
-      return /* @__PURE__ */ React8.createElement("textarea", {
+      return /* @__PURE__ */ React9.createElement("textarea", {
         className: classNames("k-input-inner", className),
         placeholder,
         rows
@@ -294,17 +357,17 @@
   };
 
   // src/input/input-loading-icon.tsx
-  var React9 = __toESM(__require("react"));
-  var InputLoadingIcon = class extends React9.Component {
+  var React10 = __toESM(__require("react"));
+  var InputLoadingIcon = class extends React10.Component {
     render() {
       const {
         loading,
         disabled
       } = this.props;
       if (disabled || !loading) {
-        return /* @__PURE__ */ React9.createElement(React9.Fragment, null);
+        return /* @__PURE__ */ React10.createElement(React10.Fragment, null);
       }
-      return /* @__PURE__ */ React9.createElement(Icon, {
+      return /* @__PURE__ */ React10.createElement(Icon, {
         className: "k-input-loading-icon",
         name: "loading"
       });
@@ -312,8 +375,8 @@
   };
 
   // src/input/input-validation-icon.tsx
-  var React10 = __toESM(__require("react"));
-  var InputValidationIcon = class extends React10.Component {
+  var React11 = __toESM(__require("react"));
+  var InputValidationIcon = class extends React11.Component {
     render() {
       const {
         valid,
@@ -324,9 +387,9 @@
       const iconName = invalid ? "warning" : "check";
       const renderValidationIcon = Boolean(valid || invalid);
       if (disabled || loading || !renderValidationIcon) {
-        return /* @__PURE__ */ React10.createElement(React10.Fragment, null);
+        return /* @__PURE__ */ React11.createElement(React11.Fragment, null);
       }
-      return /* @__PURE__ */ React10.createElement(Icon, {
+      return /* @__PURE__ */ React11.createElement(Icon, {
         className: "k-input-validation-icon",
         name: iconName
       });
@@ -334,17 +397,17 @@
   };
 
   // src/input/input-prefix.tsx
-  var React11 = __toESM(__require("react"));
-  var InputPrefix = class extends React11.Component {
+  var React12 = __toESM(__require("react"));
+  var InputPrefix = class extends React12.Component {
     render() {
       const {
         className,
         children
       } = this.props;
       if (!children) {
-        return /* @__PURE__ */ React11.createElement(React11.Fragment, null);
+        return /* @__PURE__ */ React12.createElement(React12.Fragment, null);
       }
-      return /* @__PURE__ */ React11.createElement("span", {
+      return /* @__PURE__ */ React12.createElement("span", {
         className: classNames(
           className,
           "k-input-prefix"
@@ -354,17 +417,17 @@
   };
 
   // src/input/input-suffix.tsx
-  var React12 = __toESM(__require("react"));
-  var InputSuffix = class extends React12.Component {
+  var React13 = __toESM(__require("react"));
+  var InputSuffix = class extends React13.Component {
     render() {
       const {
         className,
         children
       } = this.props;
       if (!children) {
-        return /* @__PURE__ */ React12.createElement(React12.Fragment, null);
+        return /* @__PURE__ */ React13.createElement(React13.Fragment, null);
       }
-      return /* @__PURE__ */ React12.createElement("span", {
+      return /* @__PURE__ */ React13.createElement("span", {
         className: classNames(
           className,
           "k-input-suffix"
@@ -374,31 +437,31 @@
   };
 
   // src/popup/popup.tsx
-  var React13 = __toESM(__require("react"));
-  var Popup = class extends React13.Component {
+  var React14 = __toESM(__require("react"));
+  var Popup = class extends React14.Component {
     render() {
       const {
         className,
         children
       } = this.props;
-      return /* @__PURE__ */ React13.createElement("div", {
+      return /* @__PURE__ */ React14.createElement("div", {
         className: classNames(className, "k-popup")
       }, children);
     }
   };
 
   // src/list/list.tsx
-  var React15 = __toESM(__require("react"));
+  var React16 = __toESM(__require("react"));
 
   // src/nodata/nodata.tsx
-  var React14 = __toESM(__require("react"));
-  var NoData = class extends React14.Component {
+  var React15 = __toESM(__require("react"));
+  var NoData = class extends React15.Component {
     render() {
       const {
         children,
         className
       } = this.props;
-      return /* @__PURE__ */ React14.createElement("div", {
+      return /* @__PURE__ */ React15.createElement("div", {
         className: classNames(
           className,
           "k-nodata"
@@ -408,7 +471,7 @@
   };
 
   // src/list/list.tsx
-  var List = class extends React15.Component {
+  var List = class extends React16.Component {
     render() {
       const {
         children,
@@ -428,26 +491,23 @@
               listHeader = child.props.label;
               child.props.children.map((optChild, index2) => {
                 listChildren.push(
-                  /* @__PURE__ */ React15.createElement(ListItem, {
-                    key: `optChild-${index2}-${new Date().getTime()}`,
-                    ...optChild.props
-                  })
+                  /* @__PURE__ */ React16.createElement(ListItem, __spreadValues({
+                    key: `optChild-${index2}-${new Date().getTime()}`
+                  }, optChild.props))
                 );
               });
             } else {
               if (framework === "angular" || framework === "blazor") {
                 listChildren.push(
-                  /* @__PURE__ */ React15.createElement(ListGroupItem, {
-                    key: `listChild-${index}`,
-                    ...child.props
-                  }, child.props.label)
+                  /* @__PURE__ */ React16.createElement(ListGroupItem, __spreadValues({
+                    key: `listChild-${index}`
+                  }, child.props), child.props.label)
                 );
                 child.props.children.map((optChild, index2) => {
                   listChildren.push(
-                    /* @__PURE__ */ React15.createElement(ListItem, {
-                      key: `fwOptChild-${index2}-${new Date().getTime()}`,
-                      ...optChild.props
-                    })
+                    /* @__PURE__ */ React16.createElement(ListItem, __spreadValues({
+                      key: `fwOptChild-${index2}-${new Date().getTime()}`
+                    }, optChild.props))
                   );
                 });
               } else {
@@ -457,34 +517,33 @@
                     groupLabel = child.props.label;
                   }
                   listChildren.push(
-                    /* @__PURE__ */ React15.createElement(ListItem, {
+                    /* @__PURE__ */ React16.createElement(ListItem, __spreadProps(__spreadValues({
                       className: index2 === 0 ? "k-first" : "",
-                      key: `groupLabel-${index2}-${new Date().getTime()}`,
-                      ...optChild.props,
+                      key: `groupLabel-${index2}-${new Date().getTime()}`
+                    }, optChild.props), {
                       groupLabel
-                    })
+                    }))
                   );
                 });
               }
             }
-            listGroup = /* @__PURE__ */ React15.createElement(ListGroup, {
+            listGroup = /* @__PURE__ */ React16.createElement(ListGroup, {
               label: listHeader,
               virtualization
             }, listChildren);
           } else if (child.type === ListItem) {
-            listChildren.push(/* @__PURE__ */ React15.createElement(ListItem, {
-              key: `${child.type}-${index}`,
-              ...child.props
-            }));
-            listContent = /* @__PURE__ */ React15.createElement(ListContent, {
+            listChildren.push(/* @__PURE__ */ React16.createElement(ListItem, __spreadValues({
+              key: `${child.type}-${index}`
+            }, child.props)));
+            listContent = /* @__PURE__ */ React16.createElement(ListContent, {
               virtualization
             }, listChildren);
           }
         });
       } else {
-        listContent = /* @__PURE__ */ React15.createElement(NoData, null, "No data found.");
+        listContent = /* @__PURE__ */ React16.createElement(NoData, null, "No data found.");
       }
-      return /* @__PURE__ */ React15.createElement("div", {
+      return /* @__PURE__ */ React16.createElement("div", {
         className: classNames(
           className,
           "k-list",
@@ -501,11 +560,11 @@
   };
 
   // src/list/list-item.tsx
-  var React17 = __toESM(__require("react"));
+  var React18 = __toESM(__require("react"));
 
   // src/checkbox/checkbox.tsx
-  var React16 = __toESM(__require("react"));
-  var Checkbox = class extends React16.Component {
+  var React17 = __toESM(__require("react"));
+  var Checkbox = class extends React17.Component {
     render() {
       const {
         id,
@@ -520,9 +579,9 @@
         disabled,
         required
       } = this.props;
-      return /* @__PURE__ */ React16.createElement("span", {
+      return /* @__PURE__ */ React17.createElement("span", {
         className: "k-checkbox-wrap"
-      }, /* @__PURE__ */ React16.createElement("input", {
+      }, /* @__PURE__ */ React17.createElement("input", {
         id,
         type: "checkbox",
         checked,
@@ -550,11 +609,12 @@
   };
 
   // src/list/list-item.tsx
-  var ListItem = class extends React17.Component {
+  var ListItem = class extends React18.Component {
     render() {
       const {
         children,
         className,
+        text,
         groupLabel,
         showIcon,
         iconName,
@@ -565,7 +625,8 @@
         selected,
         disabled
       } = this.props;
-      return /* @__PURE__ */ React17.createElement("li", {
+      const textOrChildren = text ? text : children;
+      return /* @__PURE__ */ React18.createElement("li", {
         className: classNames(
           className,
           "k-list-item",
@@ -576,103 +637,103 @@
             "k-disabled": disabled
           }
         )
-      }, showCheckbox && /* @__PURE__ */ React17.createElement(Checkbox, {
+      }, showCheckbox && /* @__PURE__ */ React18.createElement(Checkbox, {
         checked
-      }), showIcon && /* @__PURE__ */ React17.createElement(Icon, {
+      }), showIcon && /* @__PURE__ */ React18.createElement(Icon, {
         name: iconName
-      }), /* @__PURE__ */ React17.createElement("span", {
+      }), /* @__PURE__ */ React18.createElement("span", {
         className: "k-list-item-text"
-      }, children), groupLabel && groupLabel !== "" && /* @__PURE__ */ React17.createElement("div", {
+      }, textOrChildren), groupLabel && groupLabel !== "" && /* @__PURE__ */ React18.createElement("div", {
         className: "k-list-item-group-label"
       }, groupLabel));
     }
   };
 
   // src/list/list-content.tsx
-  var React18 = __toESM(__require("react"));
-  var ListContent = class extends React18.Component {
+  var React19 = __toESM(__require("react"));
+  var ListContent = class extends React19.Component {
     render() {
       const {
         children,
         className,
         virtualization
       } = this.props;
-      return /* @__PURE__ */ React18.createElement("div", {
+      return /* @__PURE__ */ React19.createElement("div", {
         className: classNames(
           className,
           "k-list-content"
         )
-      }, /* @__PURE__ */ React18.createElement("ul", {
+      }, /* @__PURE__ */ React19.createElement("ul", {
         className: classNames("k-list-ul")
-      }, children), virtualization && /* @__PURE__ */ React18.createElement("div", {
+      }, children), virtualization && /* @__PURE__ */ React19.createElement("div", {
         className: "k-height-container"
-      }, /* @__PURE__ */ React18.createElement("div", null)));
+      }, /* @__PURE__ */ React19.createElement("div", null)));
     }
   };
 
   // src/list/list-header.tsx
-  var React19 = __toESM(__require("react"));
-  var ListHeader = class extends React19.Component {
+  var React20 = __toESM(__require("react"));
+  var ListHeader = class extends React20.Component {
     render() {
       const {
         children,
         className
       } = this.props;
-      return /* @__PURE__ */ React19.createElement("div", {
+      return /* @__PURE__ */ React20.createElement("div", {
         className: classNames(
           className,
           "k-list-group-sticky-header"
         )
-      }, /* @__PURE__ */ React19.createElement("div", {
+      }, /* @__PURE__ */ React20.createElement("div", {
         className: "k-list-header-text"
       }, children));
     }
   };
 
   // src/list/list-group.tsx
-  var React20 = __toESM(__require("react"));
-  var ListGroup = class extends React20.Component {
+  var React21 = __toESM(__require("react"));
+  var ListGroup = class extends React21.Component {
     render() {
       const {
         children,
         label
       } = this.props;
-      return /* @__PURE__ */ React20.createElement(React20.Fragment, null, label && /* @__PURE__ */ React20.createElement(ListHeader, null, label), children && /* @__PURE__ */ React20.createElement(ListContent, {
+      return /* @__PURE__ */ React21.createElement(React21.Fragment, null, label && /* @__PURE__ */ React21.createElement(ListHeader, null, label), children && /* @__PURE__ */ React21.createElement(ListContent, {
         virtualization: true
       }, children));
     }
   };
 
   // src/list/list-group-item.tsx
-  var React21 = __toESM(__require("react"));
-  var ListGroupItem = class extends React21.Component {
+  var React22 = __toESM(__require("react"));
+  var ListGroupItem = class extends React22.Component {
     render() {
       const {
         children,
         className
       } = this.props;
-      return /* @__PURE__ */ React21.createElement("li", {
+      return /* @__PURE__ */ React22.createElement("li", {
         className: classNames(
           className,
           "k-list-group-item"
         )
-      }, /* @__PURE__ */ React21.createElement("span", {
+      }, /* @__PURE__ */ React22.createElement("span", {
         className: "k-list-item-text"
       }, children));
     }
   };
 
   // src/avatar/avatar.tsx
-  var React22 = __toESM(__require("react"));
+  var React23 = __toESM(__require("react"));
   var avatarType = /* @__PURE__ */ ((avatarType2) => {
     avatarType2["TEXT"] = "text";
     avatarType2["IMAGE"] = "image";
     avatarType2["ICON"] = "icon";
     return avatarType2;
   })(avatarType || {});
-  var Avatar = class extends React22.Component {
+  var Avatar = class extends React23.Component {
     render() {
-      const {
+      const _a = this.props, {
         children,
         className,
         type,
@@ -680,12 +741,20 @@
         rounded,
         fillMode,
         themeColor,
-        border,
-        ...htmlAttributes
-      } = this.props;
-      return /* @__PURE__ */ React22.createElement("div", {
-        style: this.props.style,
-        ...htmlAttributes,
+        border
+      } = _a, htmlAttributes = __objRest(_a, [
+        "children",
+        "className",
+        "type",
+        "size",
+        "rounded",
+        "fillMode",
+        "themeColor",
+        "border"
+      ]);
+      return /* @__PURE__ */ React23.createElement("div", __spreadProps(__spreadValues({
+        style: this.props.style
+      }, htmlAttributes), {
         className: classNames(
           "k-avatar",
           {
@@ -697,7 +766,7 @@
           },
           className
         )
-      }, /* @__PURE__ */ React22.createElement("span", {
+      }), /* @__PURE__ */ React23.createElement("span", {
         className: `k-avatar-${type}`
       }, children));
     }
@@ -712,10 +781,10 @@
   };
 
   // src/badge/badge.tsx
-  var React23 = __toESM(__require("react"));
-  var Badge = class extends React23.Component {
+  var React24 = __toESM(__require("react"));
+  var Badge = class extends React24.Component {
     render() {
-      const {
+      const _a = this.props, {
         children,
         className,
         size,
@@ -724,12 +793,21 @@
         themeColor,
         cutoutBorder,
         position,
-        align,
-        ...htmlAttributes
-      } = this.props;
-      return /* @__PURE__ */ React23.createElement("span", {
-        style: this.props.style,
-        ...htmlAttributes,
+        align
+      } = _a, htmlAttributes = __objRest(_a, [
+        "children",
+        "className",
+        "size",
+        "rounded",
+        "fillMode",
+        "themeColor",
+        "cutoutBorder",
+        "position",
+        "align"
+      ]);
+      return /* @__PURE__ */ React24.createElement("span", __spreadProps(__spreadValues({
+        style: this.props.style
+      }, htmlAttributes), {
         className: classNames(
           "k-badge",
           {
@@ -743,7 +821,7 @@
           },
           className
         )
-      }, children);
+      }), children);
     }
   };
   Badge.defaultProps = {
@@ -754,13 +832,13 @@
   };
 
   // src/chip/chip-action.tsx
-  var React24 = __toESM(__require("react"));
+  var React25 = __toESM(__require("react"));
   var chipActionType = /* @__PURE__ */ ((chipActionType2) => {
     chipActionType2["REMOVE"] = "remove";
     chipActionType2["MORE"] = "more";
     return chipActionType2;
   })(chipActionType || {});
-  var ChipAction = class extends React24.Component {
+  var ChipAction = class extends React25.Component {
     render() {
       const {
         className,
@@ -769,21 +847,21 @@
       let icon;
       switch (type) {
         case "remove" /* REMOVE */:
-          icon = /* @__PURE__ */ React24.createElement(Icon, {
+          icon = /* @__PURE__ */ React25.createElement(Icon, {
             name: "x-circle"
           });
           break;
         case "more" /* MORE */:
-          icon = /* @__PURE__ */ React24.createElement(Icon, {
+          icon = /* @__PURE__ */ React25.createElement(Icon, {
             name: "more-vertical"
           });
           break;
         default:
-          return /* @__PURE__ */ React24.createElement(Icon, {
+          return /* @__PURE__ */ React25.createElement(Icon, {
             name: type
           });
       }
-      return /* @__PURE__ */ React24.createElement("span", {
+      return /* @__PURE__ */ React25.createElement("span", {
         className: classNames(
           className,
           "k-chip-action",
@@ -794,8 +872,8 @@
   };
 
   // src/chip/chip.tsx
-  var React25 = __toESM(__require("react"));
-  var Chip = class extends React25.Component {
+  var React26 = __toESM(__require("react"));
+  var Chip = class extends React26.Component {
     render() {
       const {
         children,
@@ -814,7 +892,7 @@
         selected,
         disabled
       } = this.props;
-      return /* @__PURE__ */ React25.createElement("div", {
+      return /* @__PURE__ */ React26.createElement("div", {
         className: classNames(
           className,
           "k-chip",
@@ -830,19 +908,19 @@
             "k-disabled": disabled
           }
         )
-      }, icon && /* @__PURE__ */ React25.createElement(Icon, {
+      }, icon && /* @__PURE__ */ React26.createElement(Icon, {
         className: "k-chip-icon",
         name: icon
-      }), showAvatar && /* @__PURE__ */ React25.createElement(Avatar, {
+      }), showAvatar && /* @__PURE__ */ React26.createElement(Avatar, {
         className: "k-chip-avatar",
         type: "image"
-      }, /* @__PURE__ */ React25.createElement("img", {
+      }, /* @__PURE__ */ React26.createElement("img", {
         src: "/packages/html/assets/avatar.jpg"
-      })), /* @__PURE__ */ React25.createElement("span", {
+      })), /* @__PURE__ */ React26.createElement("span", {
         className: "k-chip-content"
-      }, children ? children : text && /* @__PURE__ */ React25.createElement("span", {
+      }, children ? children : text && /* @__PURE__ */ React26.createElement("span", {
         className: "k-chip-label k-text-ellipsis"
-      }, text)), actions && /* @__PURE__ */ React25.createElement("span", {
+      }, text)), actions && /* @__PURE__ */ React26.createElement("span", {
         className: "k-chip-actions"
       }, actions));
     }
@@ -855,15 +933,15 @@
   };
 
   // src/chip/chip-list.tsx
-  var React26 = __toESM(__require("react"));
-  var ChipList = class extends React26.Component {
+  var React27 = __toESM(__require("react"));
+  var ChipList = class extends React27.Component {
     render() {
       const {
         children,
         className,
         size
       } = this.props;
-      return /* @__PURE__ */ React26.createElement("div", {
+      return /* @__PURE__ */ React27.createElement("div", {
         className: classNames(
           className,
           "k-chip-list",
@@ -880,15 +958,15 @@
   };
 
   // src/color-preview/color-preview.tsx
-  var React27 = __toESM(__require("react"));
-  var ColorPreview = class extends React27.Component {
+  var React28 = __toESM(__require("react"));
+  var ColorPreview = class extends React28.Component {
     render() {
       const {
         className,
         color,
         iconName
       } = this.props;
-      return /* @__PURE__ */ React27.createElement("span", {
+      return /* @__PURE__ */ React28.createElement("span", {
         className: classNames(
           "k-color-preview",
           {
@@ -897,50 +975,21 @@
           },
           className
         )
-      }, iconName && /* @__PURE__ */ React27.createElement(Icon, {
+      }, iconName && /* @__PURE__ */ React28.createElement(Icon, {
         name: iconName,
         className: "k-color-preview-icon"
-      }), /* @__PURE__ */ React27.createElement("span", {
+      }), /* @__PURE__ */ React28.createElement("span", {
         className: "k-color-preview-mask",
         style: { backgroundColor: color }
       }));
     }
   };
 
-  // src/action-buttons/action-buttons.tsx
-  var React28 = __toESM(__require("react"));
-  var ActionButtons = class extends React28.Component {
-    render() {
-      const {
-        children,
-        className,
-        alignment,
-        orientation,
-        ...htmlAttributes
-      } = this.props;
-      return /* @__PURE__ */ React28.createElement("div", {
-        ...htmlAttributes,
-        className: classNames(
-          "k-actions",
-          {
-            [`k-actions-${alignment}`]: alignment,
-            [`k-actions-${orientation}`]: orientation
-          },
-          className
-        )
-      }, children);
-    }
-  };
-  ActionButtons.defaultProps = {
-    alignment: "start",
-    orientation: "horizontal"
-  };
-
   // src/button/button.tsx
   var React29 = __toESM(__require("react"));
   var Button = class extends React29.Component {
     render() {
-      const {
+      const _a = this.props, {
         children,
         className,
         iconClassName,
@@ -956,14 +1005,30 @@
         selected,
         disabled,
         showArrow,
-        arrowIconName,
-        ...htmlAttributes
-      } = this.props;
+        arrowIconName
+      } = _a, htmlAttributes = __objRest(_a, [
+        "children",
+        "className",
+        "iconClassName",
+        "text",
+        "icon",
+        "size",
+        "rounded",
+        "fillMode",
+        "themeColor",
+        "hover",
+        "focus",
+        "active",
+        "selected",
+        "disabled",
+        "showArrow",
+        "arrowIconName"
+      ]);
       const hasIcon = icon !== void 0;
       const hasChildren = children !== void 0;
-      return /* @__PURE__ */ React29.createElement("button", {
-        style: this.props.style,
-        ...htmlAttributes,
+      return /* @__PURE__ */ React29.createElement("button", __spreadProps(__spreadValues({
+        style: this.props.style
+      }, htmlAttributes), {
         dir: this.props.dir,
         className: classNames(
           className,
@@ -981,7 +1046,7 @@
             "k-disabled": disabled
           }
         )
-      }, icon && /* @__PURE__ */ React29.createElement(Icon, {
+      }), icon && /* @__PURE__ */ React29.createElement(Icon, {
         className: classNames(iconClassName, "k-button-icon"),
         name: icon
       }), text ? /* @__PURE__ */ React29.createElement(React29.Fragment, null, text && /* @__PURE__ */ React29.createElement("span", {
@@ -1008,14 +1073,16 @@
   var React30 = __toESM(__require("react"));
   var _ButtonGroup = class extends React30.Component {
     render() {
-      const {
+      const _a = this.props, {
         children,
         className,
-        fillMode = _ButtonGroup.defaultProps.fillMode,
-        ...htmlAttributes
-      } = this.props;
-      return /* @__PURE__ */ React30.createElement("div", {
-        ...htmlAttributes,
+        fillMode = _ButtonGroup.defaultProps.fillMode
+      } = _a, htmlAttributes = __objRest(_a, [
+        "children",
+        "className",
+        "fillMode"
+      ]);
+      return /* @__PURE__ */ React30.createElement("div", __spreadProps(__spreadValues({}, htmlAttributes), {
         className: classNames(
           className,
           "k-button-group",
@@ -1023,7 +1090,7 @@
             [`k-button-group-${fillMode}`]: fillMode
           }
         )
-      }, children);
+      }), children);
     }
   };
   var ButtonGroup = _ButtonGroup;
@@ -1178,13 +1245,7 @@
       }, /* @__PURE__ */ React33.createElement(InputPrefix, null, prefix), /* @__PURE__ */ React33.createElement(InputInnerInput, {
         placeholder,
         value
-      }), /* @__PURE__ */ React33.createElement(InputSuffix, null, suffix), /* @__PURE__ */ React33.createElement(InputValidationIcon, {
-        ...this.props
-      }), /* @__PURE__ */ React33.createElement(InputLoadingIcon, {
-        ...this.props
-      }), showClearButton && /* @__PURE__ */ React33.createElement(InputClearValue, {
-        ...this.props
-      }));
+      }), /* @__PURE__ */ React33.createElement(InputSuffix, null, suffix), /* @__PURE__ */ React33.createElement(InputValidationIcon, __spreadValues({}, this.props)), /* @__PURE__ */ React33.createElement(InputLoadingIcon, __spreadValues({}, this.props)), showClearButton && /* @__PURE__ */ React33.createElement(InputClearValue, __spreadValues({}, this.props)));
     }
   };
   Textbox.defaultProps = {
@@ -1343,13 +1404,7 @@
       }, /* @__PURE__ */ React37.createElement(InputPrefix, null, prefix), /* @__PURE__ */ React37.createElement(InputInnerInput, {
         placeholder,
         value
-      }), /* @__PURE__ */ React37.createElement(InputSuffix, null, suffix), /* @__PURE__ */ React37.createElement(InputValidationIcon, {
-        ...this.props
-      }), /* @__PURE__ */ React37.createElement(InputLoadingIcon, {
-        ...this.props
-      }), /* @__PURE__ */ React37.createElement(InputClearValue, {
-        ...this.props
-      }));
+      }), /* @__PURE__ */ React37.createElement(InputSuffix, null, suffix), /* @__PURE__ */ React37.createElement(InputValidationIcon, __spreadValues({}, this.props)), /* @__PURE__ */ React37.createElement(InputLoadingIcon, __spreadValues({}, this.props)), /* @__PURE__ */ React37.createElement(InputClearValue, __spreadValues({}, this.props)));
     }
   };
 
@@ -1650,13 +1705,7 @@
       }, /* @__PURE__ */ React43.createElement(InputPrefix, null, prefix), /* @__PURE__ */ React43.createElement(InputInnerInput, {
         placeholder,
         value
-      }), /* @__PURE__ */ React43.createElement(InputSuffix, null, suffix), /* @__PURE__ */ React43.createElement(InputValidationIcon, {
-        ...this.props
-      }), /* @__PURE__ */ React43.createElement(InputLoadingIcon, {
-        ...this.props
-      }), /* @__PURE__ */ React43.createElement(InputClearValue, {
-        ...this.props
-      }), /* @__PURE__ */ React43.createElement(Button, {
+      }), /* @__PURE__ */ React43.createElement(InputSuffix, null, suffix), /* @__PURE__ */ React43.createElement(InputValidationIcon, __spreadValues({}, this.props)), /* @__PURE__ */ React43.createElement(InputLoadingIcon, __spreadValues({}, this.props)), /* @__PURE__ */ React43.createElement(InputClearValue, __spreadValues({}, this.props)), /* @__PURE__ */ React43.createElement(Button, {
         className: "k-input-button",
         icon: "arrow-s",
         rounded: null,
@@ -1733,13 +1782,7 @@
       }, /* @__PURE__ */ React45.createElement(InputInnerInput, {
         placeholder,
         value
-      }), /* @__PURE__ */ React45.createElement(InputValidationIcon, {
-        ...this.props
-      }), /* @__PURE__ */ React45.createElement(InputLoadingIcon, {
-        ...this.props
-      }), /* @__PURE__ */ React45.createElement(InputClearValue, {
-        ...this.props
-      }), showSpinButton && /* @__PURE__ */ React45.createElement(SpinButton, {
+      }), /* @__PURE__ */ React45.createElement(InputValidationIcon, __spreadValues({}, this.props)), /* @__PURE__ */ React45.createElement(InputLoadingIcon, __spreadValues({}, this.props)), /* @__PURE__ */ React45.createElement(InputClearValue, __spreadValues({}, this.props)), showSpinButton && /* @__PURE__ */ React45.createElement(SpinButton, {
         className: "k-input-spinner",
         size,
         fillMode
@@ -1786,13 +1829,7 @@
       }, /* @__PURE__ */ React46.createElement(InputPrefix, null, prefix), /* @__PURE__ */ React46.createElement(InputInnerInput, {
         placeholder,
         value
-      }), /* @__PURE__ */ React46.createElement(InputSuffix, null, suffix), /* @__PURE__ */ React46.createElement(InputValidationIcon, {
-        ...this.props
-      }), /* @__PURE__ */ React46.createElement(InputLoadingIcon, {
-        ...this.props
-      }), /* @__PURE__ */ React46.createElement(InputClearValue, {
-        ...this.props
-      }), /* @__PURE__ */ React46.createElement(Button, {
+      }), /* @__PURE__ */ React46.createElement(InputSuffix, null, suffix), /* @__PURE__ */ React46.createElement(InputValidationIcon, __spreadValues({}, this.props)), /* @__PURE__ */ React46.createElement(InputLoadingIcon, __spreadValues({}, this.props)), /* @__PURE__ */ React46.createElement(InputClearValue, __spreadValues({}, this.props)), /* @__PURE__ */ React46.createElement(Button, {
         className: "k-input-button",
         icon: "calendar",
         rounded: null,
@@ -1838,13 +1875,7 @@
       }, /* @__PURE__ */ React47.createElement(InputPrefix, null, prefix), /* @__PURE__ */ React47.createElement(InputInnerInput, {
         placeholder,
         value
-      }), /* @__PURE__ */ React47.createElement(InputSuffix, null, suffix), /* @__PURE__ */ React47.createElement(InputValidationIcon, {
-        ...this.props
-      }), /* @__PURE__ */ React47.createElement(InputLoadingIcon, {
-        ...this.props
-      }), /* @__PURE__ */ React47.createElement(InputClearValue, {
-        ...this.props
-      }), /* @__PURE__ */ React47.createElement(Button, {
+      }), /* @__PURE__ */ React47.createElement(InputSuffix, null, suffix), /* @__PURE__ */ React47.createElement(InputValidationIcon, __spreadValues({}, this.props)), /* @__PURE__ */ React47.createElement(InputLoadingIcon, __spreadValues({}, this.props)), /* @__PURE__ */ React47.createElement(InputClearValue, __spreadValues({}, this.props)), /* @__PURE__ */ React47.createElement(Button, {
         className: "k-input-button",
         icon: "clock",
         rounded: null,
@@ -1890,13 +1921,7 @@
       }, /* @__PURE__ */ React48.createElement(InputPrefix, null, prefix), /* @__PURE__ */ React48.createElement(InputInnerInput, {
         placeholder,
         value
-      }), /* @__PURE__ */ React48.createElement(InputSuffix, null, suffix), /* @__PURE__ */ React48.createElement(InputValidationIcon, {
-        ...this.props
-      }), /* @__PURE__ */ React48.createElement(InputLoadingIcon, {
-        ...this.props
-      }), /* @__PURE__ */ React48.createElement(InputClearValue, {
-        ...this.props
-      }), /* @__PURE__ */ React48.createElement(Button, {
+      }), /* @__PURE__ */ React48.createElement(InputSuffix, null, suffix), /* @__PURE__ */ React48.createElement(InputValidationIcon, __spreadValues({}, this.props)), /* @__PURE__ */ React48.createElement(InputLoadingIcon, __spreadValues({}, this.props)), /* @__PURE__ */ React48.createElement(InputClearValue, __spreadValues({}, this.props)), /* @__PURE__ */ React48.createElement(Button, {
         className: "k-input-button",
         icon: "calendar",
         rounded: null,
@@ -1988,13 +2013,7 @@
       }, /* @__PURE__ */ React50.createElement(InputPrefix, null, prefix), /* @__PURE__ */ React50.createElement(InputInnerInput, {
         placeholder,
         value
-      }), /* @__PURE__ */ React50.createElement(InputSuffix, null, suffix), /* @__PURE__ */ React50.createElement(InputValidationIcon, {
-        ...this.props
-      }), /* @__PURE__ */ React50.createElement(InputLoadingIcon, {
-        ...this.props
-      }), /* @__PURE__ */ React50.createElement(InputClearValue, {
-        ...this.props
-      }), /* @__PURE__ */ React50.createElement(Button, {
+      }), /* @__PURE__ */ React50.createElement(InputSuffix, null, suffix), /* @__PURE__ */ React50.createElement(InputValidationIcon, __spreadValues({}, this.props)), /* @__PURE__ */ React50.createElement(InputLoadingIcon, __spreadValues({}, this.props)), /* @__PURE__ */ React50.createElement(InputClearValue, __spreadValues({}, this.props)), /* @__PURE__ */ React50.createElement(Button, {
         className: "k-input-button",
         icon: "arrow-s",
         rounded: null,
@@ -2053,11 +2072,7 @@
         value,
         showValue,
         valueIconName
-      }), /* @__PURE__ */ React51.createElement(InputSuffix, null, suffix), /* @__PURE__ */ React51.createElement(InputValidationIcon, {
-        ...this.props
-      }), /* @__PURE__ */ React51.createElement(InputLoadingIcon, {
-        ...this.props
-      }), /* @__PURE__ */ React51.createElement(Button, {
+      }), /* @__PURE__ */ React51.createElement(InputSuffix, null, suffix), /* @__PURE__ */ React51.createElement(InputValidationIcon, __spreadValues({}, this.props)), /* @__PURE__ */ React51.createElement(InputLoadingIcon, __spreadValues({}, this.props)), /* @__PURE__ */ React51.createElement(Button, {
         className: "k-input-button",
         icon: arrowIconName,
         rounded: null,
@@ -2105,13 +2120,7 @@
       }, /* @__PURE__ */ React52.createElement(InputInnerInput, {
         placeholder,
         value
-      }), /* @__PURE__ */ React52.createElement(InputValidationIcon, {
-        ...this.props
-      }), /* @__PURE__ */ React52.createElement(InputLoadingIcon, {
-        ...this.props
-      }), /* @__PURE__ */ React52.createElement(InputClearValue, {
-        ...this.props
-      }));
+      }), /* @__PURE__ */ React52.createElement(InputValidationIcon, __spreadValues({}, this.props)), /* @__PURE__ */ React52.createElement(InputLoadingIcon, __spreadValues({}, this.props)), /* @__PURE__ */ React52.createElement(InputClearValue, __spreadValues({}, this.props)));
     }
   };
 
@@ -2156,14 +2165,9 @@
       }, /* @__PURE__ */ React53.createElement(React53.Fragment, null, tags), /* @__PURE__ */ React53.createElement(InputInnerInput, {
         placeholder,
         value
-      })), /* @__PURE__ */ React53.createElement(InputSuffix, null, suffix), /* @__PURE__ */ React53.createElement(InputValidationIcon, {
-        ...this.props
-      }), /* @__PURE__ */ React53.createElement(InputLoadingIcon, {
-        ...this.props
-      }), /* @__PURE__ */ React53.createElement(InputClearValue, {
-        value: tags ? "value" : "",
-        ...this.props
-      }), showArrowButton && /* @__PURE__ */ React53.createElement(Button, {
+      })), /* @__PURE__ */ React53.createElement(InputSuffix, null, suffix), /* @__PURE__ */ React53.createElement(InputValidationIcon, __spreadValues({}, this.props)), /* @__PURE__ */ React53.createElement(InputLoadingIcon, __spreadValues({}, this.props)), /* @__PURE__ */ React53.createElement(InputClearValue, __spreadValues({
+        value: tags ? "value" : ""
+      }, this.props)), showArrowButton && /* @__PURE__ */ React53.createElement(Button, {
         className: "k-input-button",
         icon: "arrow-s",
         rounded: null,
@@ -2209,13 +2213,7 @@
       }, /* @__PURE__ */ React54.createElement(InputInnerInput, {
         placeholder,
         value
-      }), /* @__PURE__ */ React54.createElement(InputValidationIcon, {
-        ...this.props
-      }), /* @__PURE__ */ React54.createElement(InputLoadingIcon, {
-        ...this.props
-      }), showClearButton && /* @__PURE__ */ React54.createElement(InputClearValue, {
-        ...this.props
-      }), showSpinButton && /* @__PURE__ */ React54.createElement(SpinButton, {
+      }), /* @__PURE__ */ React54.createElement(InputValidationIcon, __spreadValues({}, this.props)), /* @__PURE__ */ React54.createElement(InputLoadingIcon, __spreadValues({}, this.props)), showClearButton && /* @__PURE__ */ React54.createElement(InputClearValue, __spreadValues({}, this.props)), showSpinButton && /* @__PURE__ */ React54.createElement(SpinButton, {
         className: "k-input-spinner",
         size,
         fillMode
@@ -2266,13 +2264,7 @@
       }), /* @__PURE__ */ React55.createElement(InputInnerInput, {
         placeholder,
         value
-      }), /* @__PURE__ */ React55.createElement(InputValidationIcon, {
-        ...this.props
-      }), /* @__PURE__ */ React55.createElement(InputLoadingIcon, {
-        ...this.props
-      }), /* @__PURE__ */ React55.createElement(InputClearValue, {
-        ...this.props
-      }));
+      }), /* @__PURE__ */ React55.createElement(InputValidationIcon, __spreadValues({}, this.props)), /* @__PURE__ */ React55.createElement(InputLoadingIcon, __spreadValues({}, this.props)), /* @__PURE__ */ React55.createElement(InputClearValue, __spreadValues({}, this.props)));
     }
   };
 
@@ -2338,7 +2330,7 @@
   var React57 = __toESM(__require("react"));
   var FloatingActionButton = class extends React57.Component {
     render() {
-      const {
+      const _a = this.props, {
         className,
         style,
         text,
@@ -2354,11 +2346,26 @@
         focus,
         active,
         selected,
-        disabled,
-        ...htmlAttributes
-      } = this.props;
-      return /* @__PURE__ */ React57.createElement("button", {
-        ...htmlAttributes,
+        disabled
+      } = _a, htmlAttributes = __objRest(_a, [
+        "className",
+        "style",
+        "text",
+        "icon",
+        "type",
+        "size",
+        "shape",
+        "rounded",
+        "fillMode",
+        "themeColor",
+        "position",
+        "hover",
+        "focus",
+        "active",
+        "selected",
+        "disabled"
+      ]);
+      return /* @__PURE__ */ React57.createElement("button", __spreadProps(__spreadValues({}, htmlAttributes), {
         type,
         className: classNames(
           className,
@@ -2378,7 +2385,7 @@
           }
         ),
         style
-      }, icon && /* @__PURE__ */ React57.createElement(Icon, {
+      }), icon && /* @__PURE__ */ React57.createElement(Icon, {
         className: "k-fab-icon",
         name: icon
       }), text && /* @__PURE__ */ React57.createElement("span", {
@@ -2511,64 +2518,294 @@
     size: "medium"
   };
 
-  // src/popover/popover.tsx
+  // src/action-sheet/action-sheet.tsx
   var React61 = __toESM(__require("react"));
-  var Popover = class extends React61.Component {
+  var ActionSheet = class extends React61.Component {
+    render() {
+      const _a = this.props, {
+        children,
+        title,
+        header,
+        footer,
+        actions,
+        side,
+        fullscreen,
+        adaptive,
+        className
+      } = _a, htmlAttributes = __objRest(_a, [
+        "children",
+        "title",
+        "header",
+        "footer",
+        "actions",
+        "side",
+        "fullscreen",
+        "adaptive",
+        "className"
+      ]);
+      const childrenArray = React61.Children.toArray(children);
+      const _ActionSheetHeader = title ? /* @__PURE__ */ React61.createElement(ActionSheetHeader, {
+        title
+      }) : header ? header : childrenArray.find((child) => React61.isValidElement(child) && child.type === ActionSheetHeader);
+      const _ActionSheetFooter = actions ? /* @__PURE__ */ React61.createElement(ActionSheetFooter, {
+        className: "k-actions",
+        actions
+      }) : footer ? typeof footer === "string" ? /* @__PURE__ */ React61.createElement(ActionSheetFooter, null, footer) : footer : childrenArray.find((child) => React61.isValidElement(child) && child.type === ActionSheetFooter);
+      const _ActionSheetContent = childrenArray.filter((child) => {
+        if (React61.isValidElement(child)) {
+          switch (child.type) {
+            case ActionSheetHeader:
+            case ActionSheetFooter:
+              return false;
+            default:
+              return true;
+          }
+        }
+        return true;
+      });
+      return /* @__PURE__ */ React61.createElement("div", {
+        className: "k-actionsheet-container"
+      }, /* @__PURE__ */ React61.createElement("div", {
+        className: "k-overlay"
+      }), /* @__PURE__ */ React61.createElement("div", {
+        className: "k-animation-container"
+      }, /* @__PURE__ */ React61.createElement("div", {
+        className: "k-child-animation-container",
+        style: {
+          [`${fullscreen === true ? "top" : side}`]: 0,
+          [`${fullscreen === true ? "width" : null}`]: "100%",
+          [`${fullscreen === true ? "height" : null}`]: "100%",
+          [`${side === "top" || side === "bottom" ? "width" : null}`]: "100%",
+          [`${side === "left" || side === "right" ? "height" : null}`]: "100%"
+        }
+      }, /* @__PURE__ */ React61.createElement("div", __spreadValues({
+        className: classNames(
+          "k-actionsheet",
+          {
+            [`k-actionsheet-${side}`]: fullscreen === false,
+            "k-actionsheet-fullscreen": fullscreen === true,
+            "k-adaptive-actionsheet": adaptive
+          },
+          className
+        )
+      }, htmlAttributes), /* @__PURE__ */ React61.createElement(React61.Fragment, null, _ActionSheetHeader, /* @__PURE__ */ React61.createElement("div", {
+        className: classNames(
+          "k-actionsheet-content",
+          {
+            "!k-overflow-hidden": adaptive
+          }
+        )
+      }, _ActionSheetContent), _ActionSheetFooter)))));
+    }
+  };
+  ActionSheet.defaultProps = {
+    side: "bottom",
+    fullscreen: false,
+    adaptive: false
+  };
+
+  // src/action-sheet/actionsheet-header.tsx
+  var React62 = __toESM(__require("react"));
+  var ActionSheetHeader = class extends React62.Component {
+    render() {
+      const {
+        title,
+        subTitle,
+        children,
+        actions,
+        filter,
+        className
+      } = this.props;
+      return /* @__PURE__ */ React62.createElement("div", {
+        className: classNames(
+          className,
+          "k-actionsheet-titlebar"
+        )
+      }, /* @__PURE__ */ React62.createElement(React62.Fragment, null, /* @__PURE__ */ React62.createElement("div", {
+        className: "k-actionsheet-titlebar-group k-hbox"
+      }, !children && (title || subTitle) && /* @__PURE__ */ React62.createElement(React62.Fragment, null, /* @__PURE__ */ React62.createElement("div", {
+        className: "k-actionsheet-title"
+      }, title !== "" && /* @__PURE__ */ React62.createElement("div", {
+        className: "k-text-center"
+      }, title), subTitle !== "" && /* @__PURE__ */ React62.createElement("div", {
+        className: "k-actionsheet-subtitle k-text-center"
+      }, subTitle))), children && /* @__PURE__ */ React62.createElement("div", {
+        className: "k-actionsheet-title"
+      }, children), actions && /* @__PURE__ */ React62.createElement(React62.Fragment, null, /* @__PURE__ */ React62.createElement("div", {
+        className: "k-actionsheet-actions"
+      }, actions.map((actionName) => /* @__PURE__ */ React62.createElement(Button, {
+        key: actionName,
+        icon: actionName,
+        size: "large",
+        fillMode: "flat"
+      }))))), filter && /* @__PURE__ */ React62.createElement(React62.Fragment, null, /* @__PURE__ */ React62.createElement("div", {
+        className: "k-actionsheet-titlebar-group k-actionsheet-filter"
+      }, /* @__PURE__ */ React62.createElement(Searchbox, {
+        placeholder: "Filter",
+        size: "large"
+      })))));
+    }
+  };
+
+  // src/action-sheet/actionsheet-footer.tsx
+  var React63 = __toESM(__require("react"));
+  var ActionSheetFooter = class extends React63.Component {
+    render() {
+      const {
+        children,
+        actions
+      } = this.props;
+      return /* @__PURE__ */ React63.createElement(ActionButtons, {
+        className: "k-actionsheet-footer",
+        alignment: "stretched"
+      }, /* @__PURE__ */ React63.createElement(React63.Fragment, null, actions && actions.map((action, index) => {
+        if (action === "|") {
+          return /* @__PURE__ */ React63.createElement("span", {
+            key: index,
+            className: "k-separator"
+          });
+        }
+        if (action === " ") {
+          return /* @__PURE__ */ React63.createElement("span", {
+            key: index,
+            className: "k-spacer"
+          });
+        }
+        const importantFlag = action.startsWith("!");
+        const actionName = importantFlag ? action.substring(1) : action;
+        return /* @__PURE__ */ React63.createElement(Button, {
+          key: index,
+          text: actionName,
+          size: "large",
+          themeColor: importantFlag ? "primary" : "base"
+        });
+      }), !actions && children));
+    }
+  };
+
+  // src/action-sheet/actionsheet-items.tsx
+  var React64 = __toESM(__require("react"));
+  var ActionSheetItems = class extends React64.Component {
+    render() {
+      const {
+        children,
+        className
+      } = this.props;
+      return /* @__PURE__ */ React64.createElement("ul", {
+        className: classNames(
+          "k-list-ul",
+          className
+        )
+      }, children);
+    }
+  };
+
+  // src/action-sheet/actionsheet-item.tsx
+  var React65 = __toESM(__require("react"));
+  var ActionSheetItem = class extends React65.Component {
     render() {
       const {
+        children,
+        className,
+        iconName,
+        text,
+        description,
+        hover,
+        focus,
+        selected,
+        disabled
+      } = this.props;
+      return /* @__PURE__ */ React65.createElement("li", {
+        className: classNames(
+          className,
+          "k-actionsheet-item",
+          {
+            "k-hover": hover,
+            "k-focus": focus,
+            "k-selected": selected,
+            "k-disabled": disabled
+          }
+        )
+      }, !children && (text !== "" || description !== "" || iconName !== "") && /* @__PURE__ */ React65.createElement(React65.Fragment, null, /* @__PURE__ */ React65.createElement("a", {
+        href: "#",
+        className: "k-actionsheet-action"
+      }, iconName !== "" && /* @__PURE__ */ React65.createElement("span", {
+        className: "k-icon-wrap"
+      }, /* @__PURE__ */ React65.createElement(Icon, {
+        className: "k-actionsheet-item-icon",
+        name: iconName
+      })), /* @__PURE__ */ React65.createElement("span", {
+        className: "k-actionsheet-item-text"
+      }, text !== "" && /* @__PURE__ */ React65.createElement("span", {
+        className: "k-actionsheet-item-title"
+      }, text), description !== "" && /* @__PURE__ */ React65.createElement("span", {
+        className: "k-actionsheet-item-description"
+      }, description)))), children);
+    }
+  };
+
+  // src/popover/popover.tsx
+  var React66 = __toESM(__require("react"));
+  var Popover = class extends React66.Component {
+    render() {
+      const _a = this.props, {
         className,
         children,
         callout,
         title,
-        body,
-        ...htmlAttributes
-      } = this.props;
-      return /* @__PURE__ */ React61.createElement("div", {
-        className: classNames(className, "k-popover"),
-        ...htmlAttributes
-      }, callout && /* @__PURE__ */ React61.createElement("div", {
+        body
+      } = _a, htmlAttributes = __objRest(_a, [
+        "className",
+        "children",
+        "callout",
+        "title",
+        "body"
+      ]);
+      return /* @__PURE__ */ React66.createElement("div", __spreadValues({
+        className: classNames(className, "k-popover")
+      }, htmlAttributes), callout && /* @__PURE__ */ React66.createElement("div", {
         className: classNames(
           "k-popover-callout",
           {
             [`k-callout-${kendoThemeMaps.calloutMap[callout] || callout}`]: callout
           }
         )
-      }), /* @__PURE__ */ React61.createElement("div", {
+      }), /* @__PURE__ */ React66.createElement("div", {
         className: "k-popover-inner"
-      }, title && /* @__PURE__ */ React61.createElement("div", {
+      }, title && /* @__PURE__ */ React66.createElement("div", {
         className: "k-popover-header"
-      }, title), body && /* @__PURE__ */ React61.createElement("div", {
+      }, title), body && /* @__PURE__ */ React66.createElement("div", {
         className: "k-popover-body"
-      }, body), /* @__PURE__ */ React61.createElement(React61.Fragment, null, children)));
+      }, body), /* @__PURE__ */ React66.createElement(React66.Fragment, null, children)));
     }
   };
 
   // src/treeview/treeview.tsx
-  var React63 = __toESM(__require("react"));
+  var React68 = __toESM(__require("react"));
 
   // src/treeview/treeview-group.tsx
-  var React62 = __toESM(__require("react"));
-  var TreeviewGroup = class extends React62.Component {
+  var React67 = __toESM(__require("react"));
+  var TreeviewGroup = class extends React67.Component {
     render() {
       const {
         className,
         children
       } = this.props;
-      return /* @__PURE__ */ React62.createElement("ul", {
+      return /* @__PURE__ */ React67.createElement("ul", {
         className: classNames(className, "k-treeview-group")
       }, children);
     }
   };
 
   // src/treeview/treeview.tsx
-  var Treeview = class extends React63.Component {
+  var Treeview = class extends React68.Component {
     render() {
       const {
         className,
         size,
         children
       } = this.props;
-      return /* @__PURE__ */ React63.createElement("div", {
+      return /* @__PURE__ */ React68.createElement("div", {
         className: classNames(
           className,
           "k-treeview",
@@ -2576,7 +2813,7 @@
             [`k-treeview-${kendoThemeMaps.sizeMap[size] || size}`]: size
           }
         )
-      }, /* @__PURE__ */ React63.createElement(TreeviewGroup, {
+      }, /* @__PURE__ */ React68.createElement(TreeviewGroup, {
         className: "k-treeview-lines"
       }, children));
     }
@@ -2586,11 +2823,11 @@
   };
 
   // src/treeview/treeview-item.tsx
-  var React65 = __toESM(__require("react"));
+  var React70 = __toESM(__require("react"));
 
   // src/treeview/treeview-leaf.tsx
-  var React64 = __toESM(__require("react"));
-  var TreeViewLeaf = class extends React64.Component {
+  var React69 = __toESM(__require("react"));
+  var TreeViewLeaf = class extends React69.Component {
     render() {
       const {
         className,
@@ -2601,7 +2838,7 @@
         focus,
         selected
       } = this.props;
-      return /* @__PURE__ */ React64.createElement("span", {
+      return /* @__PURE__ */ React69.createElement("span", {
         className: classNames(
           className,
           "k-treeview-leaf",
@@ -2611,16 +2848,16 @@
             "k-selected": selected
           }
         )
-      }, showIcon && /* @__PURE__ */ React64.createElement(Icon, {
+      }, showIcon && /* @__PURE__ */ React69.createElement(Icon, {
         name: icon
-      }), /* @__PURE__ */ React64.createElement("span", {
+      }), /* @__PURE__ */ React69.createElement("span", {
         className: "k-treeview-leaf-text"
       }, text));
     }
   };
 
   // src/treeview/treeview-item.tsx
-  var TreeviewItem = class extends React65.Component {
+  var TreeviewItem = class extends React70.Component {
     render() {
       const {
         className,
@@ -2639,7 +2876,7 @@
         disabled
       } = this.props;
       const _hasChildren = hasChildren || children;
-      return /* @__PURE__ */ React65.createElement("li", {
+      return /* @__PURE__ */ React70.createElement("li", {
         className: classNames(
           className,
           "k-treeview-item",
@@ -2647,15 +2884,15 @@
             "k-disabled": disabled
           }
         )
-      }, /* @__PURE__ */ React65.createElement("span", {
+      }, /* @__PURE__ */ React70.createElement("span", {
         className: "k-treeview-mid"
-      }, _hasChildren && /* @__PURE__ */ React65.createElement("span", {
+      }, _hasChildren && /* @__PURE__ */ React70.createElement("span", {
         className: "k-treeview-toggle"
-      }, /* @__PURE__ */ React65.createElement(Icon, {
+      }, /* @__PURE__ */ React70.createElement(Icon, {
         name: expanded ? "collapse" : "expand"
-      })), showCheckbox && /* @__PURE__ */ React65.createElement(Checkbox, {
+      })), showCheckbox && /* @__PURE__ */ React70.createElement(Checkbox, {
         checked
-      }), /* @__PURE__ */ React65.createElement(TreeViewLeaf, {
+      }), /* @__PURE__ */ React70.createElement(TreeViewLeaf, {
         className: leafClassName,
         text,
         showIcon,
@@ -2663,15 +2900,15 @@
         hover,
         focus,
         selected
-      })), expanded && _hasChildren && /* @__PURE__ */ React65.createElement(React65.Fragment, null, children));
+      })), expanded && _hasChildren && /* @__PURE__ */ React70.createElement(React70.Fragment, null, children));
     }
   };
 
   // src/card/card.tsx
-  var React66 = __toESM(__require("react"));
-  var Card = class extends React66.Component {
+  var React71 = __toESM(__require("react"));
+  var Card = class extends React71.Component {
     render() {
-      const {
+      const _a = this.props, {
         children,
         className,
         orientation,
@@ -2680,12 +2917,21 @@
         hover,
         focus,
         selected,
-        disabled,
-        ...htmlAttributes
-      } = this.props;
-      return /* @__PURE__ */ React66.createElement("div", {
-        style: this.props.style,
-        ...htmlAttributes,
+        disabled
+      } = _a, htmlAttributes = __objRest(_a, [
+        "children",
+        "className",
+        "orientation",
+        "themeColor",
+        "callout",
+        "hover",
+        "focus",
+        "selected",
+        "disabled"
+      ]);
+      return /* @__PURE__ */ React71.createElement("div", __spreadProps(__spreadValues({
+        style: this.props.style
+      }, htmlAttributes), {
         className: classNames(
           "k-card",
           {
@@ -2699,23 +2945,24 @@
           },
           className
         )
-      }, callout && callout !== "true" && /* @__PURE__ */ React66.createElement(CardCallout, {
+      }), callout && callout !== "true" && /* @__PURE__ */ React71.createElement(CardCallout, {
         callout
-      }), /* @__PURE__ */ React66.createElement(React66.Fragment, null, children));
+      }), /* @__PURE__ */ React71.createElement(React71.Fragment, null, children));
     }
   };
 
   // src/card/card-callout.tsx
-  var React67 = __toESM(__require("react"));
-  var CardCallout = class extends React67.Component {
+  var React72 = __toESM(__require("react"));
+  var CardCallout = class extends React72.Component {
     render() {
-      const {
+      const _a = this.props, {
         className,
-        callout,
-        ...htmlAttributes
-      } = this.props;
-      return /* @__PURE__ */ React67.createElement("span", {
-        ...htmlAttributes,
+        callout
+      } = _a, htmlAttributes = __objRest(_a, [
+        "className",
+        "callout"
+      ]);
+      return /* @__PURE__ */ React72.createElement("span", __spreadProps(__spreadValues({}, htmlAttributes), {
         className: classNames(
           "k-card-callout",
           {
@@ -2723,23 +2970,26 @@
           },
           className
         )
-      });
+      }));
     }
   };
 
   // src/card/card-title.tsx
-  var React68 = __toESM(__require("react"));
-  var CardTitle = class extends React68.Component {
+  var React73 = __toESM(__require("react"));
+  var CardTitle = class extends React73.Component {
     render() {
-      const {
+      const _a = this.props, {
         children,
         className,
         hover,
-        focus,
-        ...htmlAttributes
-      } = this.props;
-      return /* @__PURE__ */ React68.createElement("div", {
-        ...htmlAttributes,
+        focus
+      } = _a, htmlAttributes = __objRest(_a, [
+        "children",
+        "className",
+        "hover",
+        "focus"
+      ]);
+      return /* @__PURE__ */ React73.createElement("div", __spreadProps(__spreadValues({}, htmlAttributes), {
         className: classNames(
           "k-card-title",
           {
@@ -2748,79 +2998,87 @@
           },
           className
         )
-      }, children);
+      }), children);
     }
   };
 
   // src/card/card-subtitle.tsx
-  var React69 = __toESM(__require("react"));
-  var CardSubtitle = class extends React69.Component {
+  var React74 = __toESM(__require("react"));
+  var CardSubtitle = class extends React74.Component {
     render() {
-      const {
+      const _a = this.props, {
         children,
-        className,
-        ...htmlAttributes
-      } = this.props;
-      return /* @__PURE__ */ React69.createElement("div", {
-        ...htmlAttributes,
+        className
+      } = _a, htmlAttributes = __objRest(_a, [
+        "children",
+        "className"
+      ]);
+      return /* @__PURE__ */ React74.createElement("div", __spreadProps(__spreadValues({}, htmlAttributes), {
         className: classNames(
           "k-card-subtitle",
           className
         )
-      }, children);
+      }), children);
     }
   };
 
   // src/card/card-img.tsx
-  var React70 = __toESM(__require("react"));
-  var CardImage = class extends React70.Component {
+  var React75 = __toESM(__require("react"));
+  var CardImage = class extends React75.Component {
     render() {
-      const {
+      const _a = this.props, {
         children,
         className,
-        src,
-        ...htmlAttributes
-      } = this.props;
-      return /* @__PURE__ */ React70.createElement(React70.Fragment, null, src ? /* @__PURE__ */ React70.createElement("img", {
-        style: this.props.style,
-        ...htmlAttributes,
+        src
+      } = _a, htmlAttributes = __objRest(_a, [
+        "children",
+        "className",
+        "src"
+      ]);
+      return /* @__PURE__ */ React75.createElement(React75.Fragment, null, src ? /* @__PURE__ */ React75.createElement("img", __spreadProps(__spreadValues({
+        style: this.props.style
+      }, htmlAttributes), {
         className: classNames(
           "k-card-image",
           className
         ),
         src
-      }) : /* @__PURE__ */ React70.createElement("span", {
-        style: this.props.style,
-        ...htmlAttributes,
+      })) : /* @__PURE__ */ React75.createElement("span", __spreadProps(__spreadValues({
+        style: this.props.style
+      }, htmlAttributes), {
         className: classNames(
           "k-card-image",
           className
         )
-      }, /* @__PURE__ */ React70.createElement(React70.Fragment, null, children)));
+      }), /* @__PURE__ */ React75.createElement(React75.Fragment, null, children)));
     }
   };
 
   // src/card/card-header.tsx
-  var React71 = __toESM(__require("react"));
-  var CardHeader = class extends React71.Component {
+  var React76 = __toESM(__require("react"));
+  var CardHeader = class extends React76.Component {
     render() {
-      const {
+      const _a = this.props, {
         children,
         className,
         title,
         subtitle,
-        details,
-        ...htmlAttributes
-      } = this.props;
-      return /* @__PURE__ */ React71.createElement("div", {
-        ...htmlAttributes,
+        details
+      } = _a, htmlAttributes = __objRest(_a, [
+        "children",
+        "className",
+        "title",
+        "subtitle",
+        "details"
+      ]);
+      return /* @__PURE__ */ React76.createElement("div", __spreadProps(__spreadValues({}, htmlAttributes), {
         className: classNames(
           "k-card-header",
           className
         )
-      }, 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", {
+      }), title && /* @__PURE__ */ React76.createElement(CardTitle, null, title), subtitle && /* @__PURE__ */ React76.createElement(CardSubtitle, null, subtitle), /* @__PURE__ */ React76.createElement(React76.Fragment, null, children), details && /* @__PURE__ */ React76.createElement("span", {
         className: "k-card-header-actions"
-      }, /* @__PURE__ */ React71.createElement(Button, {
+      }, /* @__PURE__ */ React76.createElement(Button, {
         className: "k-card-details",
         icon: "more-vertical",
         rounded: "medium",
@@ -2832,46 +3090,52 @@
   };
 
   // src/card/card-footer.tsx
-  var React72 = __toESM(__require("react"));
-  var CardFooter = class extends React72.Component {
+  var React77 = __toESM(__require("react"));
+  var CardFooter = class extends React77.Component {
     render() {
-      const {
+      const _a = this.props, {
         children,
-        className,
-        ...htmlAttributes
-      } = this.props;
-      return /* @__PURE__ */ React72.createElement("div", {
-        ...htmlAttributes,
+        className
+      } = _a, htmlAttributes = __objRest(_a, [
+        "children",
+        "className"
+      ]);
+      return /* @__PURE__ */ React77.createElement("div", __spreadProps(__spreadValues({}, htmlAttributes), {
         className: classNames(
           "k-card-footer",
           className
         )
-      }, children);
+      }), children);
     }
   };
 
   // src/card/card-body.tsx
-  var React73 = __toESM(__require("react"));
-  var CardBody = class extends React73.Component {
+  var React78 = __toESM(__require("react"));
+  var CardBody = class extends React78.Component {
     render() {
-      const {
+      const _a = this.props, {
         children,
         className,
         title,
         subtitle,
-        details,
-        ...htmlAttributes
-      } = this.props;
-      return /* @__PURE__ */ React73.createElement("div", {
-        style: this.props.style,
-        ...htmlAttributes,
+        details
+      } = _a, htmlAttributes = __objRest(_a, [
+        "children",
+        "className",
+        "title",
+        "subtitle",
+        "details"
+      ]);
+      return /* @__PURE__ */ React78.createElement("div", __spreadProps(__spreadValues({
+        style: this.props.style
+      }, htmlAttributes), {
         className: classNames(
           "k-card-body",
           className
         )
-      }, 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", {
+      }), title && /* @__PURE__ */ React78.createElement(CardTitle, null, title), subtitle && /* @__PURE__ */ React78.createElement(CardSubtitle, null, subtitle), /* @__PURE__ */ React78.createElement(React78.Fragment, null, children), details && /* @__PURE__ */ React78.createElement("span", {
         className: "k-card-body-actions"
-      }, /* @__PURE__ */ React73.createElement(Button, {
+      }, /* @__PURE__ */ React78.createElement(Button, {
         className: "k-card-details",
         icon: "more-vertical",
         rounded: "medium",
@@ -2883,21 +3147,22 @@
   };
 
   // src/card/card-deck.tsx
-  var React74 = __toESM(__require("react"));
-  var CardDeck = class extends React74.Component {
+  var React79 = __toESM(__require("react"));
+  var CardDeck = class extends React79.Component {
     render() {
-      const {
+      const _a = this.props, {
         children,
-        className,
-        ...htmlAttributes
-      } = this.props;
-      return /* @__PURE__ */ React74.createElement("div", {
-        ...htmlAttributes,
+        className
+      } = _a, htmlAttributes = __objRest(_a, [
+        "children",
+        "className"
+      ]);
+      return /* @__PURE__ */ React79.createElement("div", __spreadProps(__spreadValues({}, htmlAttributes), {
         className: classNames(
           "k-card-deck",
           className
         )
-      }, children);
+      }), children);
     }
   };
 })();