@progress/kendo-react-buttons 6.1.1 → 7.0.0-develop.10

package/index.mjs

@@ -0,0 +1,1886 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the package root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as n from "react";
+import xe from "react";
+import * as s from "prop-types";
+import { svgIconPropType as M, validatePackage as R, classNames as f, kendoThemeMaps as B, IconWrap as A, Keys as r, guid as me, dispatchEvent as x, getActiveElement as se, useDir as De, useMouse as Oe, getTabIndex as fe, toIconName as Ce, getter as Be, useZIndexContext as lt, ZIndexContext as rt } from "@progress/kendo-react-common";
+import { Popup as we } from "@progress/kendo-react-popup";
+import { caretAltDownIcon as ct, xCircleIcon as dt } from "@progress/kendo-svg-icons";
+const O = {
+  name: "@progress/kendo-react-buttons",
+  productName: "KendoReact",
+  productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
+  publishDate: 1701439167,
+  version: "",
+  licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
+};
+function ut({ imageUrl: e, name: o, iconClass: t, svgIcon: i, imageAlt: a }) {
+  return e ? /* @__PURE__ */ n.createElement("img", { role: "presentation", className: "k-button-icon", alt: a, src: e }) : o || i ? /* @__PURE__ */ n.createElement(A, { className: "k-button-icon", name: o, icon: i }) : t ? /* @__PURE__ */ n.createElement("span", { role: "presentation", className: f("k-button-icon", t) }) : null;
+}
+const ee = class extends n.Component {
+  constructor(e) {
+    super(e), this._element = null, this.handleClick = (o) => {
+      this.toggleIfApplicable(), this.props.onClick && this.props.onClick.call(void 0, o);
+    }, R(O), this.state = { selected: this.props.togglable === !0 && this.props.selected === !0 };
+  }
+  /**
+   * Gets the DOM element of the Button component.
+   */
+  get element() {
+    return this._element;
+  }
+  /**
+   * Returns `true` when the component is togglable and selected ([see example]({% slug toggleable_button %})).
+   * Otherwise, returns `false`.
+   */
+  get selected() {
+    return this._selectedTemp !== void 0 ? this._selectedTemp : this.state.selected;
+  }
+  /**
+   * @hidden
+   */
+  static getDerivedStateFromProps(e, o) {
+    return e.togglable && e.selected !== void 0 && e.selected !== o.selected ? { selected: e.selected } : null;
+  }
+  /**
+   * @hidden
+   */
+  render() {
+    const {
+      children: e,
+      togglable: o,
+      icon: t,
+      iconClass: i,
+      svgIcon: a,
+      imageUrl: l,
+      imageAlt: u,
+      className: c,
+      onClick: g,
+      size: v = ee.defaultProps.size,
+      rounded: h = ee.defaultProps.rounded,
+      fillMode: D = ee.defaultProps.fillMode,
+      themeColor: N = ee.defaultProps.themeColor,
+      ...w
+    } = this.props, S = a !== void 0 || t !== void 0 || i !== void 0 || l !== void 0, F = e !== void 0, I = ut({
+      name: t,
+      svgIcon: a,
+      iconClass: i,
+      imageUrl: l,
+      imageAlt: u
+    });
+    return /* @__PURE__ */ n.createElement(
+      "button",
+      {
+        ref: (E) => this._element = E,
+        "aria-pressed": o ? this.state.selected : void 0,
+        ...w,
+        onClick: this.handleClick,
+        className: f(
+          "k-button",
+          {
+            [`k-button-${B.sizeMap[v] || v}`]: v,
+            [`k-button-${D}`]: D,
+            [`k-button-${D}-${N}`]: !!(D && N),
+            [`k-rounded-${B.roundedMap[h] || h}`]: h,
+            "k-icon-button": !F && S,
+            "k-disabled": this.props.disabled,
+            "k-selected": this.state.selected,
+            "k-rtl": this.props.dir === "rtl"
+          },
+          this.props.className
+        )
+      },
+      I,
+      e && /* @__PURE__ */ n.createElement("span", { className: "k-button-text" }, e)
+    );
+  }
+  toggleIfApplicable() {
+    if (this.props.togglable && this.props.selected === void 0) {
+      const e = !this.state.selected;
+      this._selectedTemp = e, this.setState({ selected: e }, () => this._selectedTemp = void 0);
+    }
+  }
+};
+let ne = ee;
+ne.propTypes = {
+  children: s.node,
+  selected: s.bool,
+  togglable: s.bool,
+  icon: s.string,
+  svgIcon: M,
+  iconClass: s.string,
+  imageUrl: s.string,
+  imageAlt: s.string,
+  size: s.oneOf([null, "small", "medium", "large"]),
+  rounded: s.oneOf([null, "small", "medium", "large", "full"]),
+  fillMode: s.oneOf([null, "flat", "link", "outline", "solid"]),
+  // eslint-disable-next-line max-len
+  themeColor: s.oneOf([null, "base", "primary", "secondary", "tertiary", "info", "success", "warning", "error", "dark", "light", "inverse"])
+};
+ne.defaultProps = {
+  togglable: !1,
+  size: "medium",
+  rounded: "medium",
+  fillMode: "solid",
+  themeColor: "base"
+};
+const ht = {
+  button: "k-button",
+  flat: "k-flat",
+  outline: "k-outline",
+  clear: "k-button-clear",
+  primary: "k-primary",
+  "state-selected": "k-selected",
+  "button-icon": "k-button-icon",
+  "button-icontext": "k-button-icontext",
+  "state-disabled": "k-disabled",
+  "group-start": "k-group-start",
+  "group-end": "k-group-end",
+  "button-group": "k-button-group",
+  "button-group-stretched": "k-button-group-stretched",
+  ltr: "k-ltr",
+  rtl: "k-rtl"
+}, Me = ":not(.k-dropdownlist button):not(.k-colorpicker button):not(.k-split-button .k-split-button-arrow)", pt = [
+  "button" + Me,
+  ".k-button-group > button" + Me,
+  ".k-colorpicker",
+  ".k-dropdownlist"
+], mt = {
+  styles: ht
+}, ue = mt.styles;
+class ft extends n.Component {
+  constructor(o) {
+    super(o), this._element = null, R(O);
+  }
+  /**
+   * @hidden
+   */
+  render() {
+    const o = this.mapButtons(this.props.children), t = f(
+      [ue["button-group"]],
+      {
+        ["k-disabled"]: this.props.disabled,
+        [ue["button-group-stretched"]]: !!this.props.width
+      },
+      this.props.className
+    ), i = {
+      className: t,
+      style: { width: `${this.props.width}` },
+      dir: this.props.dir,
+      // Accessibility properties
+      role: "group",
+      "aria-disabled": this.props.disabled
+    };
+    return /* @__PURE__ */ n.createElement(
+      "div",
+      {
+        ref: (a) => {
+          this._element = a;
+        },
+        ...i,
+        className: t
+      },
+      o
+    );
+  }
+  mapButtons(o) {
+    const t = n.Children.count(o), i = this.props.dir !== void 0 ? this.props.dir === "rtl" : this._element && getComputedStyle(this._element).direction === "rtl" || !1;
+    return n.Children.map(o, (a, l) => n.isValidElement(a) ? this.renderButton(a, l, l === t - 1, i) : a);
+  }
+  renderButton(o, t, i, a) {
+    const l = f(o.props.className, {
+      [ue["group-start"]]: a ? i : t === 0,
+      [ue["group-end"]]: a ? t === 0 : i
+    }), u = { ...this.props.width ? { width: this.props.width } : {}, ...o.props.style || {} }, c = this.props.disabled || o.props.disabled, g = {
+      ...o.props,
+      ...l ? { className: l } : {},
+      ...Object.keys(u).length ? { style: u } : {},
+      ...c !== void 0 ? { disabled: c } : {}
+    };
+    return n.Children.count(o.props.children) > 0 ? n.cloneElement(o, g, o.props.children) : n.cloneElement(o, g);
+  }
+}
+ft.propTypes = {
+  children: s.oneOfType([s.arrayOf(s.element), s.element]),
+  className: s.string,
+  disabled: s.bool,
+  width: s.string,
+  dir: s.string
+};
+const Ee = (e) => {
+  const o = n.useCallback(
+    (l) => {
+      e.onClick(l, e.index);
+    },
+    [e]
+  ), t = e.dataItem.render || e.item || (e.item === void 0 ? e.render : null), i = e.dataItem.text !== void 0 ? e.dataItem.text : e.textField ? e.dataItem[e.textField] : e.dataItem, a = /* @__PURE__ */ n.createElement(
+    "li",
+    {
+      id: e.id,
+      className: f(
+        "k-item",
+        e.className,
+        { "k-focus": e.focused }
+      ),
+      tabIndex: -1,
+      onClick: o,
+      onMouseDown: e.onDown,
+      onPointerDown: e.onDown,
+      role: "menuitem",
+      "aria-disabled": e.dataItem.disabled || void 0
+    },
+    /* @__PURE__ */ n.createElement(
+      "span",
+      {
+        tabIndex: -1,
+        className: f(
+          "k-link k-menu-link",
+          {
+            "k-selected": e.dataItem.selected,
+            "k-disabled": e.dataItem.disabled
+          }
+        ),
+        key: "icon"
+      },
+      t ? /* @__PURE__ */ n.createElement(t, { item: e.dataItem, itemIndex: e.index }) : /* @__PURE__ */ n.createElement(n.Fragment, null, (e.dataItem.icon || e.dataItem.iconClass) && /* @__PURE__ */ n.createElement(A, { className: e.dataItem.iconClass, name: e.dataItem.icon, icon: e.dataItem.svgIcon }), e.dataItem.imageUrl && /* @__PURE__ */ n.createElement(
+        "img",
+        {
+          role: "presentation",
+          alt: "",
+          src: e.dataItem.imageUrl,
+          className: "k-icon"
+        }
+      ), i && /* @__PURE__ */ n.createElement("span", { className: "k-menu-link-text" }, i))
+    )
+  );
+  return e.item !== void 0 && /* to be removed in 5.0.0 */
+  e.render !== void 0 ? e.render.call(void 0, a, e) : a;
+};
+Ee.displayName = "KendoReactButtonItem";
+class Ke extends n.Component {
+  /**
+   * @hidden
+   */
+  render() {
+    return null;
+  }
+}
+Ke.propTypes = {
+  text: s.string,
+  icon: s.string,
+  iconClass: s.string,
+  imageUrl: s.string,
+  disabled: s.bool,
+  render: s.any
+};
+const $e = (e, o, t, i) => {
+  if (t)
+    return e;
+  const a = Math.min(i - 1, Math.max(0, e));
+  switch (o) {
+    case r.enter:
+    case r.space:
+    case r.esc:
+      return -1;
+    case r.up:
+    case r.left:
+      return a - 1 < 0 ? i - 1 : a - 1;
+    case r.down:
+    case r.right:
+      return a + 1 >= i ? 0 : a + 1;
+    case r.home:
+      return 0;
+    case r.end:
+      return i - 1;
+    default:
+      return e;
+  }
+};
+function Ae(e) {
+  let o = { horizontal: "left", vertical: "bottom" };
+  return e && (o.horizontal = "right"), o;
+}
+function Te(e) {
+  let o = { horizontal: "left", vertical: "top" };
+  return e && (o.horizontal = "right"), o;
+}
+class Le extends n.Component {
+  constructor(o) {
+    super(o), this.state = {
+      focused: !1,
+      focusedIndex: -1,
+      opened: !1
+    }, this.wrapper = null, this.mainButton = null, this.list = null, this.guid = me(), this.skipFocus = !1, this.buttonsData = [], this.onKeyDown = (t) => {
+      const { focusedIndex: i } = this.state;
+      if (t.altKey) {
+        !this.opened && t.keyCode === r.down ? (this.dispatchPopupEvent(t, !0), this.setState({ focusedIndex: 0 }), this.setOpen(!0)) : this.opened && t.keyCode === r.up && (this.setState({ focusedIndex: -1 }), this.setOpen(!1));
+        return;
+      }
+      let a;
+      if (t.keyCode === r.enter || t.keyCode === r.space) {
+        if (t.preventDefault(), this.dispatchClickEvent(t, i), i >= 0) {
+          a = {
+            focusedIndex: this.opened ? -1 : 0
+          };
+          const l = !this.opened;
+          this.setOpen(l), l && this.dispatchPopupEvent(t, l);
+        }
+      } else if (this.opened && t.keyCode === r.esc) {
+        this.setState({ focusedIndex: -1 }), this.setOpen(!1);
+        return;
+      }
+      if (this.opened) {
+        const l = $e(
+          i,
+          t.keyCode,
+          t.altKey,
+          this.buttonsData.length
+        );
+        l !== i && (a = a || {}, a.focusedIndex = l);
+        const u = t.keyCode === r.up || t.keyCode === r.down || t.keyCode === r.left || t.keyCode === r.right;
+        !t.altKey && (u || t.keyCode === r.home || t.keyCode === r.end) && t.preventDefault();
+      }
+      a && this.setState(a);
+    }, this.switchFocus = (t) => {
+      this.skipFocus = !0, t(), window.setTimeout(() => this.skipFocus = !1, 0);
+    }, this.onFocus = (t) => {
+      this.skipFocus || (x(this.props.onFocus, t, this, void 0), this.setState({ focused: !0 }));
+    }, this.setOpen = (t) => {
+      this.openedDuringOnChange = t, this.setState({ opened: t });
+    }, this.onItemClick = (t, i) => {
+      this.opened && (this.setState({ focusedIndex: 0 }), this.setOpen(!1)), this.dispatchClickEvent(t, i);
+    }, this.onBlur = (t) => {
+      this.skipFocus || (this.setState({
+        focused: !1,
+        focusedIndex: -1
+      }), this.setOpen(!1), x(this.props.onBlur, t, this, void 0));
+    }, this.onPopupClose = () => {
+      this.state.focused && this.switchFocus(() => {
+        this.element && (this.element.removeAttribute("tabindex"), this.element.focus({ preventScroll: !0 }));
+      }), this.dispatchPopupEvent({}, !1);
+    }, this.listRef = (t) => {
+      this.list = t, t && this.state.focused && this.switchFocus(() => {
+        t.focus({ preventScroll: !0 }), this.element && (this.element.tabIndex = -1);
+      });
+    }, this.onSplitPartClick = (t) => {
+      if (this.buttonsData.length) {
+        const i = !this.opened;
+        i && this.dispatchPopupEvent(t, i), this.setState({
+          focusedIndex: i ? 0 : -1,
+          focused: !0
+        }), this.setOpen(i);
+      }
+    }, this.onDownSplitPart = (t) => {
+      t.preventDefault();
+      const i = se(document);
+      this.element && i !== this.element && i !== this.list && this.element.focus();
+    }, this.onItemDown = (t) => {
+      se(document) === this.list && t.preventDefault();
+    }, this.dispatchPopupEvent = (t, i) => {
+      x(i ? this.props.onOpen : this.props.onClose, t, this, void 0), this.openedDuringOnChange = void 0;
+    }, R(O);
+  }
+  get opened() {
+    return this.openedDuringOnChange !== void 0 ? this.openedDuringOnChange : this.props.opened === void 0 ? this.state.opened : this.props.opened;
+  }
+  /**
+   * @hidden
+   */
+  render() {
+    this.buttonsData = this.props.items || n.Children.toArray(this.props.children).filter((c) => c && c.type === Ke).map((c) => c.props);
+    const o = this.isRtl(), t = o ? "rtl" : void 0, { id: i, style: a, tabIndex: l, disabled: u } = this.props;
+    return /* @__PURE__ */ n.createElement(
+      "div",
+      {
+        id: i,
+        style: a,
+        className: f(
+          "k-split-button",
+          "k-button-group",
+          {
+            "k-focus": this.state.focused
+          },
+          `k-rounded-${B.roundedMap[this.props.rounded || "medium"]}`,
+          this.props.className
+        ),
+        onKeyDown: this.onKeyDown,
+        onFocus: this.onFocus,
+        onBlur: this.onBlur,
+        dir: t,
+        ref: (c) => this.wrapper = c
+      },
+      /* @__PURE__ */ n.createElement(
+        ne,
+        {
+          ref: (c) => this.mainButton = c && c.element,
+          type: "button",
+          size: this.props.size,
+          rounded: this.props.rounded,
+          fillMode: this.props.fillMode,
+          themeColor: this.props.themeColor,
+          onClick: (c) => this.onItemClick(c, -1),
+          disabled: u || void 0,
+          tabIndex: l,
+          accessKey: this.props.accessKey,
+          className: this.props.buttonClass,
+          icon: this.props.icon,
+          svgIcon: this.props.svgIcon,
+          iconClass: this.props.iconClass,
+          imageUrl: this.props.imageUrl,
+          dir: t,
+          "aria-disabled": u,
+          "aria-haspopup": !0,
+          "aria-expanded": this.opened || void 0,
+          "aria-label": this.props.ariaLabel,
+          "aria-controls": this.opened ? this.guid : void 0,
+          id: "button-" + this.guid,
+          title: this.props.title
+        },
+        this.props.text
+      ),
+      /* @__PURE__ */ n.createElement(
+        ne,
+        {
+          type: "button",
+          size: this.props.size,
+          rounded: this.props.rounded,
+          fillMode: this.props.fillMode,
+          themeColor: this.props.themeColor,
+          icon: "caret-alt-down",
+          svgIcon: ct,
+          className: "k-split-button-arrow",
+          disabled: u || void 0,
+          tabIndex: -1,
+          onClick: this.onSplitPartClick,
+          onMouseDown: this.onDownSplitPart,
+          onPointerDown: this.onDownSplitPart,
+          dir: t,
+          "aria-label": "menu toggling button"
+        }
+      ),
+      this.renderPopup(o)
+    );
+  }
+  /**
+   * @hidden
+   */
+  componentDidMount() {
+    (this.props.dir === void 0 && this.isRtl() || this.opened) && this.forceUpdate();
+  }
+  /**
+   * The DOM element of main button.
+   */
+  get element() {
+    return this.mainButton;
+  }
+  dispatchClickEvent(o, t) {
+    this.isItemDisabled(t) || (t === -1 ? x(this.props.onButtonClick, o, this, void 0) : x(
+      this.props.onItemClick,
+      o,
+      this,
+      {
+        item: this.buttonsData[t],
+        itemIndex: t
+      }
+    ));
+  }
+  renderPopup(o) {
+    const { popupSettings: t = {} } = this.props, { focusedIndex: i } = this.state;
+    return /* @__PURE__ */ n.createElement(
+      we,
+      {
+        anchor: this.wrapper,
+        show: this.opened,
+        animate: t.animate,
+        popupClass: f("k-menu-popup", t.popupClass),
+        anchorAlign: t.anchorAlign || Ae(o),
+        popupAlign: t.popupAlign || Te(o),
+        style: o ? { direction: "rtl" } : void 0,
+        onClose: this.onPopupClose
+      },
+      /* @__PURE__ */ n.createElement(
+        "ul",
+        {
+          role: "menu",
+          id: this.guid,
+          "aria-labelledby": "button-" + this.guid,
+          tabIndex: -1,
+          ref: this.listRef,
+          "aria-activedescendant": i >= 0 ? `${this.guid}-${i}` : void 0,
+          className: f("k-group k-menu-group k-reset", {
+            [`k-menu-group-${B.sizeMap[this.props.size] || this.props.size}`]: this.props.size
+          })
+        },
+        this.renderChildItems()
+      )
+    );
+  }
+  renderChildItems() {
+    const { item: o, itemRender: t, textField: i } = this.props;
+    return this.buttonsData.length > 0 ? this.buttonsData.map((a, l) => /* @__PURE__ */ n.createElement(
+      Ee,
+      {
+        className: "k-menu-item",
+        dataItem: a,
+        textField: i,
+        focused: this.state.focusedIndex === l,
+        onClick: this.onItemClick,
+        onDown: this.onItemDown,
+        render: t,
+        item: o,
+        key: l,
+        index: l,
+        id: `${this.guid}-${l}`
+      }
+    )) : null;
+  }
+  isItemDisabled(o) {
+    return this.buttonsData[o] ? this.buttonsData[o].disabled : this.props.disabled;
+  }
+  isRtl() {
+    return this.props.dir !== void 0 ? this.props.dir === "rtl" : !!this.wrapper && getComputedStyle(this.wrapper).direction === "rtl";
+  }
+}
+Le.propTypes = {
+  accessKey: s.string,
+  ariaLabel: s.string,
+  title: s.string,
+  onButtonClick: s.func,
+  onFocus: s.func,
+  onBlur: s.func,
+  onItemClick: s.func,
+  onOpen: s.func,
+  onClose: s.func,
+  text: s.string,
+  items: s.arrayOf(s.any),
+  textField: s.string,
+  tabIndex: s.number,
+  disabled: s.bool,
+  icon: s.string,
+  svgIcon: M,
+  iconClass: s.string,
+  imageUrl: s.string,
+  popupSettings: s.object,
+  itemRender: s.any,
+  item: s.func,
+  className: s.string,
+  buttonClass: s.string,
+  dir: s.string
+};
+Le.defaultProps = {
+  size: "medium",
+  rounded: "medium",
+  fillMode: "solid",
+  themeColor: "base"
+};
+class _e extends n.Component {
+  /**
+   * @hidden
+   */
+  render() {
+    return null;
+  }
+}
+_e.propTypes = {
+  text: s.string,
+  icon: s.string,
+  iconClass: s.string,
+  imageUrl: s.string,
+  selected: s.bool,
+  disabled: s.bool,
+  render: s.any
+};
+class He extends n.Component {
+  constructor(o) {
+    super(o), this.state = {
+      opened: !1,
+      focused: !1,
+      focusedIndex: -1
+    }, this.wrapper = null, this.mainButton = null, this.list = null, this.skipFocus = !1, this.guid = me(), this.buttonsData = [], this.onKeyDown = (t) => {
+      const { focusedIndex: i } = this.state;
+      if (t.altKey) {
+        !this.opened && t.keyCode === r.down ? (this.setOpen(!0), this.dispatchPopupEvent(t, !0), this.setState({ focusedIndex: 0 })) : this.opened && t.keyCode === r.up && (this.setState({ focusedIndex: -1 }), this.setOpen(!1));
+        return;
+      }
+      const a = { ...this.state };
+      if (t.keyCode === r.enter || t.keyCode === r.space) {
+        i >= 0 && this.dispatchClickEvent(t, i), t.preventDefault();
+        const l = !this.opened;
+        this.setOpen(l), l && (this.dispatchPopupEvent(t, !0), this.setState({ focusedIndex: this.opened ? -1 : 0 }));
+        return;
+      } else if (this.opened && t.keyCode === r.esc) {
+        this.setState({ focusedIndex: -1 }), this.setOpen(!1);
+        return;
+      }
+      if (this.opened) {
+        const l = $e(
+          i,
+          t.keyCode,
+          t.altKey,
+          this.buttonsData.length
+        );
+        a.focusedIndex = l;
+        const u = t.keyCode === r.up || t.keyCode === r.down || t.keyCode === r.left || t.keyCode === r.right;
+        !t.altKey && (u || t.keyCode === r.home || t.keyCode === r.end) && t.preventDefault();
+      }
+      this.setState(a);
+    }, this.switchFocus = (t) => {
+      this.skipFocus = !0, t(), window.setTimeout(() => this.skipFocus = !1, 0);
+    }, this.handleFocus = (t) => {
+      this.skipFocus || (this.setState({ focused: !0, focusedIndex: this.opened ? 0 : -1 }), x(this.props.onFocus, t, this, void 0));
+    }, this.handleBlur = (t) => {
+      this.skipFocus || (this.setState({ focused: !1, focusedIndex: -1 }), this.setOpen(!1), x(this.props.onBlur, t, this, void 0));
+    }, this.setOpen = (t) => {
+      this.openedDuringOnChange = t, this.setState({ opened: t });
+    }, this.onItemClick = (t, i) => {
+      this.setState({ focusedIndex: -1 }), this.setOpen(!1), this.dispatchClickEvent(t, i);
+    }, this.onItemDown = (t) => {
+      se(document) === this.list && t.preventDefault();
+    }, this.mouseDown = (t) => {
+      t.preventDefault();
+      const i = se(document);
+      this.element && i !== this.element && i !== this.list && this.element.focus();
+    }, this.onPopupClose = () => {
+      this.state.focused && this.switchFocus(() => {
+        this.element && (this.element.removeAttribute("tabindex"), this.element.focus({ preventScroll: !0 }));
+      }), this.dispatchPopupEvent({}, !1);
+    }, this.listRef = (t) => {
+      this.list = t, t && this.state.focused && this.switchFocus(() => {
+        t.focus({ preventScroll: !0 }), this.element && (this.element.tabIndex = -1);
+      });
+    }, this.onClickMainButton = (t) => {
+      if (!this.buttonsData.length)
+        return;
+      const i = !this.opened;
+      this.setState({
+        focused: !0,
+        focusedIndex: i ? 0 : -1
+      }), this.setOpen(i), i && this.dispatchPopupEvent(t, i);
+    }, this.dispatchPopupEvent = (t, i) => {
+      x(i ? this.props.onOpen : this.props.onClose, t, this, void 0), this.openedDuringOnChange = void 0;
+    }, R(O);
+  }
+  get opened() {
+    return this.openedDuringOnChange !== void 0 ? this.openedDuringOnChange : this.props.opened === void 0 ? this.state.opened : this.props.opened;
+  }
+  /**
+   * @hidden
+   */
+  render() {
+    const o = this.isRtl(), t = o ? "rtl" : void 0, { id: i, style: a, tabIndex: l, disabled: u } = this.props;
+    return this.buttonsData = this.props.items || n.Children.toArray(this.props.children).filter((c) => c && c.type === _e).map((c) => c.props), /* @__PURE__ */ n.createElement(
+      "div",
+      {
+        id: i,
+        style: a,
+        className: f(
+          "k-dropdown-button",
+          {
+            "k-focus": this.state.focused
+          },
+          this.props.className
+        ),
+        onKeyDown: this.onKeyDown,
+        onFocus: this.handleFocus,
+        onBlur: this.handleBlur,
+        dir: t,
+        ref: (c) => this.wrapper = c
+      },
+      /* @__PURE__ */ n.createElement(
+        ne,
+        {
+          size: this.props.size,
+          rounded: this.props.rounded,
+          fillMode: this.props.fillMode,
+          themeColor: this.props.themeColor,
+          onClick: this.onClickMainButton,
+          onMouseDown: this.mouseDown,
+          disabled: u || void 0,
+          tabIndex: l,
+          accessKey: this.props.accessKey,
+          icon: this.props.icon,
+          svgIcon: this.props.svgIcon,
+          iconClass: this.props.iconClass,
+          className: this.props.buttonClass,
+          imageUrl: this.props.imageUrl,
+          dir: t,
+          ref: (c) => this.mainButton = c && c.element,
+          type: "button",
+          "aria-haspopup": !0,
+          "aria-expanded": this.opened || void 0,
+          "aria-label": this.props.ariaLabel,
+          "aria-controls": this.opened ? this.guid : void 0,
+          id: "button-" + this.guid,
+          title: this.props.title
+        },
+        this.props.text
+      ),
+      this.renderPopup(o)
+    );
+  }
+  /**
+   * @hidden
+   */
+  componentDidMount() {
+    (this.props.dir === void 0 && this.isRtl() || this.opened) && this.forceUpdate();
+  }
+  /**
+   * The DOM element of main button.
+   */
+  get element() {
+    return this.mainButton;
+  }
+  dispatchClickEvent(o, t) {
+    this.isItemDisabled(t) || x(
+      this.props.onItemClick,
+      o,
+      this,
+      {
+        item: this.buttonsData[t],
+        itemIndex: t
+      }
+    );
+  }
+  renderPopup(o) {
+    const { popupSettings: t = {} } = this.props, { focusedIndex: i } = this.state;
+    return /* @__PURE__ */ n.createElement(
+      we,
+      {
+        anchor: this.wrapper,
+        show: this.opened,
+        animate: t.animate,
+        popupClass: f("k-menu-popup", t.popupClass),
+        anchorAlign: t.anchorAlign || Ae(o),
+        popupAlign: t.popupAlign || Te(o),
+        style: o ? { direction: "rtl" } : void 0,
+        onClose: this.onPopupClose
+      },
+      /* @__PURE__ */ n.createElement(
+        "ul",
+        {
+          role: "menu",
+          id: this.guid,
+          "aria-labelledby": "button-" + this.guid,
+          tabIndex: -1,
+          "aria-activedescendant": i >= 0 ? `${this.guid}-${i}` : void 0,
+          ref: this.listRef,
+          className: f("k-group k-menu-group k-reset", {
+            [`k-menu-group-${B.sizeMap[this.props.size] || this.props.size}`]: this.props.size
+          })
+        },
+        this.renderChildItems()
+      )
+    );
+  }
+  renderChildItems() {
+    const { item: o, itemRender: t, textField: i } = this.props;
+    return this.buttonsData.length > 0 ? this.buttonsData.map((a, l) => /* @__PURE__ */ n.createElement(
+      Ee,
+      {
+        className: "k-menu-item",
+        dataItem: a,
+        textField: i,
+        focused: this.state.focusedIndex === l,
+        onClick: this.onItemClick,
+        onDown: this.onItemDown,
+        render: t,
+        item: o,
+        index: l,
+        key: l,
+        id: `${this.guid}-${l}`
+      }
+    )) : null;
+  }
+  isItemDisabled(o) {
+    return this.buttonsData[o] ? this.buttonsData[o].disabled : this.props.disabled;
+  }
+  isRtl() {
+    return this.props.dir !== void 0 ? this.props.dir === "rtl" : !!this.wrapper && getComputedStyle(this.wrapper).direction === "rtl";
+  }
+}
+He.propTypes = {
+  accessKey: s.string,
+  ariaLabel: s.string,
+  title: s.string,
+  onFocus: s.func,
+  onBlur: s.func,
+  onItemClick: s.func,
+  onOpen: s.func,
+  onClose: s.func,
+  items: s.arrayOf(s.any),
+  textField: s.string,
+  tabIndex: s.number,
+  disabled: s.bool,
+  icon: s.string,
+  svgIcon: M,
+  iconClass: s.string,
+  imageUrl: s.string,
+  popupSettings: s.object,
+  itemRender: s.func,
+  item: s.func,
+  className: s.string,
+  buttonClass: s.string,
+  dir: s.string
+};
+He.defaultProps = {
+  size: "medium",
+  rounded: "medium",
+  fillMode: "solid",
+  themeColor: "base"
+};
+const Ie = class extends n.Component {
+  constructor(e) {
+    super(e), this._element = null, this.offsetHeight = 0, this.offsetWidth = 0, this.buttons = [], this.focusedSelector = this.selectors.map((o) => o + ":focus").join(","), this.setTabIndex = (o) => {
+      const { tabIndex: t = Ie.defaultProps.tabIndex } = this.props;
+      this.buttons.forEach((i, a) => {
+        i.tabIndex = a === o ? t : -1;
+      });
+    }, this.onKeyDown = (o) => {
+      const t = o.target;
+      if (!(o.keyCode === r.left || o.keyCode === r.right) || o.defaultPrevented || this.buttons.findIndex((l) => l === t) === -1)
+        return;
+      const a = this.focusedIndex;
+      o.keyCode === r.left ? this.focusButton(a, a - 1) : this.focusButton(a, a + 1);
+    }, this.onWindowResize = (o) => {
+      const t = this.element;
+      if (!t)
+        return;
+      const i = t.offsetWidth, a = t.offsetHeight;
+      if (this.offsetWidth !== i || this.offsetHeight !== a) {
+        this.offsetWidth = i, this.offsetHeight = a;
+        const l = { offsetWidth: this.offsetWidth, offsetHeight: this.offsetHeight };
+        this.props.onResize && this.props.onResize.call(void 0, { target: this, ...l, nativeEvent: o });
+      }
+    }, R(O);
+  }
+  get selectors() {
+    return this.props.buttons || pt;
+  }
+  get focusedIndex() {
+    const e = this.element && this.element.querySelector(this.focusedSelector);
+    return Math.max(0, this.buttons.findIndex((o) => o === e));
+  }
+  /**
+   * Returns the HTML element of the Toolbar component.
+   */
+  get element() {
+    return this._element;
+  }
+  /**
+   * @hidden
+   */
+  componentDidMount() {
+    window.addEventListener("resize", this.onWindowResize);
+    const e = this.element;
+    e && (this.offsetWidth = e.offsetWidth, this.offsetHeight = e.offsetHeight, this.props.keyboardNavigation !== !1 && (this.buttons = Array.from(e.querySelectorAll(this.selectors.join(","))), this.setTabIndex(0)));
+  }
+  /**
+   * @hidden
+   */
+  componentDidUpdate() {
+    const e = this.element;
+    !e || this.props.keyboardNavigation === !1 || (this.buttons = Array.from(e.querySelectorAll(this.selectors.join(","))), this.setTabIndex(this.focusedIndex));
+  }
+  /**
+   * @hidden
+   */
+  componentWillUnmount() {
+    window.removeEventListener("resize", this.onWindowResize), this.buttons.length = 0;
+  }
+  /**
+   * @hidden
+   */
+  render() {
+    return /* @__PURE__ */ n.createElement(
+      "div",
+      {
+        id: this.props.id,
+        "aria-label": this.props.ariaLabel,
+        className: f(
+          "k-toolbar",
+          {
+            [`k-toolbar-${B.sizeMap[this.props.size] || this.props.size}`]: this.props.size
+          },
+          this.props.className
+        ),
+        style: this.props.style,
+        role: this.props.role !== void 0 ? this.props.role || void 0 : "toolbar",
+        dir: this.props.dir,
+        ref: (e) => this._element = e,
+        onKeyDown: this.props.keyboardNavigation !== !1 ? this.onKeyDown : void 0
+      },
+      this.props.children
+    );
+  }
+  focusButton(e, o) {
+    const { tabIndex: t = Ie.defaultProps.tabIndex } = this.props, i = this.buttons[o];
+    if (i) {
+      i.tabIndex = t, i.focus();
+      const a = this.buttons[e];
+      a && (a.tabIndex = -1);
+    }
+  }
+};
+let Ue = Ie;
+Ue.propTypes = {
+  tabIndex: s.number,
+  dir: s.string,
+  keyboardNavigation: s.bool,
+  style: s.object,
+  className: s.string,
+  role: s.string,
+  onResize: s.func,
+  buttons: s.arrayOf(s.string),
+  size: s.oneOf([null, "small", "medium", "large"])
+};
+Ue.defaultProps = {
+  tabIndex: 0,
+  size: "medium"
+};
+class bt extends n.PureComponent {
+  constructor() {
+    super(...arguments), this._element = null;
+  }
+  /**
+   * Returns the HTML element of the ToolbarItem component.
+   */
+  get element() {
+    return this._element;
+  }
+  /**
+   * @hidden
+   */
+  render() {
+    return /* @__PURE__ */ n.createElement(
+      "div",
+      {
+        id: this.props.id,
+        className: f("k-toolbar-item", this.props.className),
+        style: this.props.style,
+        ref: (o) => this._element = o
+      },
+      this.props.children
+    );
+  }
+}
+bt.propTypes = {
+  className: s.string
+};
+class At extends n.PureComponent {
+  /**
+   * @hidden
+   */
+  render() {
+    return /* @__PURE__ */ n.createElement("div", { className: f("k-separator", this.props.className) });
+  }
+}
+const We = n.forwardRef((e, o) => {
+  const t = n.useRef(null), i = n.useRef(null);
+  n.useImperativeHandle(i, () => ({ element: t.current })), n.useImperativeHandle(o, () => ({ element: t.current }));
+  const a = n.useMemo(
+    () => f(
+      "k-spacer",
+      e.className
+    ),
+    [e.className]
+  );
+  return /* @__PURE__ */ n.createElement(
+    "span",
+    {
+      ref: t,
+      className: a
+    }
+  );
+});
+We.displayName = "KendoReactToolbarSpacer";
+We.propTypes = {
+  className: s.string
+};
+const je = xe.createContext([null, (e) => {
+}]), Ve = xe.createContext([null, (e) => {
+}]), Ze = xe.createContext([null, (e) => {
+}]);
+var te = /* @__PURE__ */ ((e) => (e.next = "next", e.prev = "prev", e.current = "current", e.reset = "reset", e))(te || {});
+const gt = (e, o) => {
+  const t = o.items.findIndex((i) => i === e);
+  switch (o.type) {
+    case "next":
+      return t === o.items.length - 1 ? e : o.items[t + 1];
+    case "prev":
+      return t === 0 ? e : o.items[t - 1];
+    case "current":
+      return o.payload;
+    case "reset":
+      return null;
+    default:
+      return e;
+  }
+};
+var qe = /* @__PURE__ */ ((e) => (e.remove = "remove", e.add = "add", e.reorder = "reorder", e))(qe || {});
+const kt = (e, o) => {
+  switch (o.type) {
+    case "add":
+      break;
+    case "remove":
+      return e.filter((t) => t[o.valueField] !== o.payload);
+    case "reorder":
+      break;
+    default:
+      return e;
+  }
+};
+var pe = /* @__PURE__ */ ((e) => (e.toggle = "toggle", e.remove = "remove", e))(pe || {});
+const yt = (e, o) => {
+  switch (o.selection) {
+    case "single":
+      switch (o.type) {
+        case "toggle": {
+          if (!Array.isArray(e) || e === null)
+            return o.payload === e ? null : o.payload;
+          throw new Error("State cannot be an array in single selection");
+        }
+        case "remove":
+          return o.payload === e ? null : e;
+        default:
+          return e;
+      }
+    case "multiple":
+      switch (o.type) {
+        case "toggle": {
+          if (Array.isArray(e))
+            return e.some((t) => t === o.payload) ? e.filter((t) => t !== o.payload) : [...e, o.payload];
+          if (e === null)
+            return [o.payload];
+          throw new Error("State cannot be non-array in multiple selection");
+        }
+        case "remove":
+          return Array.isArray(e) ? e.some((t) => t === o.payload) ? e.filter((t) => t !== o.payload) : [...e, o.payload] : e;
+        default:
+          return e;
+      }
+    case "none":
+      return null;
+    default:
+      return e;
+  }
+}, j = n.forwardRef((e, o) => {
+  R(O);
+  const t = n.useRef(null), i = n.useRef(null), a = De(i, e.dir);
+  n.useImperativeHandle(t, () => ({
+    element: i.current,
+    props: e
+  })), n.useImperativeHandle(o, () => t.current);
+  const [l, u] = n.useContext(je), [c, g] = n.useContext(Ve), [, v] = n.useContext(Ze), h = n.useMemo(
+    () => e.selected || (Array.isArray(l) ? l.some((p) => p === e.value) : l === e.value),
+    [e.selected, e.value, l]
+  ), D = n.useMemo(
+    () => c === e.value,
+    [e.value, c]
+  );
+  n.useEffect(
+    () => {
+      D && i.current && i.current.focus();
+    },
+    [D]
+  );
+  const N = n.useCallback(
+    (p) => {
+      u({ type: pe.toggle, payload: e.value, event: p });
+    },
+    [u, e.value]
+  ), w = n.useCallback(
+    (p) => {
+      e.removable && (v({ type: qe.remove, payload: e.value, event: p }), g({ type: te.reset, payload: e.value, event: p }), u({ type: pe.remove, payload: e.value, event: p }), e.onRemove && e.onRemove.call(
+        void 0,
+        {
+          target: t.current,
+          syntheticEvent: p
+        }
+      ));
+    },
+    [e.onRemove, e.value, e.removable, v, g, u]
+  ), S = n.useCallback(
+    (p) => {
+      switch (p.keyCode) {
+        case r.left:
+          g({ type: te.prev, payload: e.value, event: p });
+          break;
+        case r.right:
+          g({ type: te.next, payload: e.value, event: p });
+          break;
+        case r.enter:
+          u({ type: pe.toggle, payload: e.value, event: p });
+          break;
+        case r.delete:
+          w(p);
+          break;
+      }
+      e.onKeyDown && e.onKeyDown.call(
+        void 0,
+        {
+          target: t.current,
+          syntheticEvent: p
+        }
+      );
+    },
+    [e.onKeyDown, e.value, g, u, w]
+  ), F = n.useCallback(
+    (p) => {
+      g({ payload: e.value, type: te.current, event: p }), e.onFocus && e.onFocus.call(
+        void 0,
+        {
+          target: t.current,
+          syntheticEvent: p
+        }
+      );
+    },
+    [e.onFocus, e.value, g]
+  ), I = n.useCallback(
+    (p) => {
+      e.onBlur && e.onBlur.call(
+        void 0,
+        {
+          target: t.current,
+          syntheticEvent: p
+        }
+      );
+    },
+    [e.onBlur]
+  ), E = Oe(e, t, { onClick: N });
+  return /* @__PURE__ */ n.createElement(
+    "div",
+    {
+      ...E,
+      role: e.role || "button",
+      id: e.value,
+      style: e.style,
+      ref: i,
+      dir: a,
+      tabIndex: fe(e.tabIndex, e.disabled, void 0),
+      className: f(
+        "k-chip",
+        {
+          "k-rtl": a === "rtl",
+          "k-disabled": e.disabled,
+          "k-selected": h,
+          "k-focus": D,
+          [`k-chip-${B.sizeMap[e.size] || e.size}`]: e.size,
+          [`k-rounded-${B.roundedMap[e.rounded] || e.rounded}`]: e.rounded,
+          [`k-chip-${e.fillMode}`]: e.fillMode,
+          [`k-chip-${e.fillMode}-${e.themeColor}`]: !!(e.fillMode && e.themeColor)
+        },
+        e.className
+      ),
+      "aria-pressed": e.role ? void 0 : h,
+      "aria-disabled": e.disabled,
+      "aria-describedby": e.ariaDescribedBy,
+      "aria-keyshortcuts": e.removable ? "Enter Delete" : void 0,
+      onFocus: F,
+      onBlur: I,
+      onKeyDown: S
+    },
+    h && (e.selectedIcon || e.selectedSvgIcon) && /* @__PURE__ */ n.createElement(
+      A,
+      {
+        className: "k-chip-icon",
+        name: e.selectedIcon ? Ce(e.selectedIcon) : void 0,
+        icon: e.selectedSvgIcon,
+        size: "small"
+      }
+    ),
+    (e.icon || e.svgIcon) && /* @__PURE__ */ n.createElement(
+      A,
+      {
+        className: "k-chip-icon",
+        name: e.icon ? Ce(e.icon) : void 0,
+        icon: e.svgIcon,
+        size: "small"
+      }
+    ),
+    e.avatar && /* @__PURE__ */ n.createElement(
+      "div",
+      {
+        className: `k-chip-avatar k-avatar k-rounded-${e.avatar.rounded} k-avatar-md k-avatar-solid k-avatar-solid-primary`,
+        style: e.avatar.style
+      },
+      /* @__PURE__ */ n.createElement("span", { className: "k-avatar-image" }, /* @__PURE__ */ n.createElement(
+        "img",
+        {
+          src: e.avatar.image,
+          alt: e.avatar.imageAlt
+        }
+      ))
+    ),
+    /* @__PURE__ */ n.createElement("span", { className: "k-chip-content" }, e.children !== void 0 ? e.children : e.text && /* @__PURE__ */ n.createElement(
+      "span",
+      {
+        "aria-label": e.ariaLabel || e.text,
+        className: "k-chip-label"
+      },
+      e.text
+    )),
+    e.removable && /* @__PURE__ */ n.createElement("span", { className: "k-chip-actions" }, /* @__PURE__ */ n.createElement("span", { className: f("k-chip-action", "k-chip-remove-action"), onClick: w }, /* @__PURE__ */ n.createElement(
+      A,
+      {
+        name: e.removeIcon ? Ce(e.removeIcon) : void 0,
+        icon: e.removeSvgIcon || dt,
+        size: "small"
+      }
+    )))
+  );
+}), vt = {
+  id: s.string,
+  text: s.string,
+  value: s.any,
+  dir: s.oneOf(["ltr", "rtl"]),
+  removable: s.bool,
+  removeIcon: s.string,
+  removeIconSvg: M,
+  disabled: s.bool,
+  icon: s.string,
+  svgIcon: M,
+  selectedIcon: s.string,
+  selectedIconSvg: M,
+  onRemove: s.func,
+  dataItem: s.any,
+  selected: s.bool,
+  ariaDescribedBy: s.string,
+  size: s.oneOf([null, "small", "medium", "large"]),
+  rounded: s.oneOf([null, "small", "medium", "large", "full"]),
+  fillMode: s.oneOf([null, "outline", "solid"]),
+  // eslint-disable-next-line max-len
+  themeColor: s.oneOf([null, "base", "info", "success", "warning", "error"])
+}, Ct = {
+  disabled: !1,
+  removable: !1,
+  removeIcon: "k-i-x-circle",
+  dir: "ltr",
+  size: "medium",
+  rounded: "medium",
+  fillMode: "solid",
+  themeColor: "base"
+};
+j.displayName = "KendoReactChip";
+j.propTypes = vt;
+j.defaultProps = Ct;
+const It = (e, o, t) => {
+  const [i, a] = n.useState(e);
+  return [i, (u) => {
+    const c = yt(o.state || i, { ...u, ...o });
+    t && t(c, u.event), a(c);
+  }];
+}, xt = (e) => {
+  const [o, t] = n.useState(null);
+  return [o, (a) => {
+    const l = gt(a.payload, { ...a, ...e });
+    t(l);
+  }];
+}, Dt = (e, o, t) => {
+  const [i, a] = n.useState(e);
+  return [i, (u) => {
+    const c = kt(o.state || i, { ...u, ...o });
+    t && t(c, u.event), a(c);
+  }];
+}, Ne = n.forwardRef((e, o) => {
+  R(O);
+  const t = n.useRef(null), i = n.useRef(null), a = De(i, e.dir), {
+    chip: l,
+    id: u,
+    style: c,
+    tabIndex: g,
+    disabled: v,
+    size: h,
+    className: D,
+    ariaDescribedBy: N,
+    ariaLabelledBy: w,
+    ariaLabel: S,
+    selection: F = W.selection,
+    value: I = W.defaultValue,
+    defaultData: E = W.defaultData,
+    valueField: p = W.valueField,
+    textField: T = W.textField,
+    onChange: K,
+    onDataChange: P
+  } = e, L = n.useMemo(
+    () => l || j,
+    [l, j]
+  );
+  n.useImperativeHandle(t, () => ({
+    element: i.current,
+    props: e
+  })), n.useImperativeHandle(o, () => t.current);
+  const $ = n.useCallback(
+    (m, k) => {
+      K && t.current && K.call(void 0, {
+        value: m,
+        target: t.current,
+        syntheticEvent: k
+      });
+    },
+    [K]
+  ), [V, Z] = It(
+    I,
+    {
+      selection: F,
+      state: I
+    },
+    $
+  ), oe = n.useCallback(
+    (m, k) => {
+      P && t.current && P.call(void 0, {
+        value: m,
+        target: t.current,
+        syntheticEvent: k
+      });
+    },
+    [P]
+  ), [q, ie] = Dt(
+    e.data || E,
+    {
+      state: e.data,
+      valueField: p
+    },
+    oe
+  ), G = n.useCallback(
+    (m, k) => (m.push(k[p]), m),
+    [p]
+  ), _ = n.useMemo(
+    () => e.data || q,
+    [e.data, q]
+  ), ae = n.useMemo(
+    () => I || V,
+    [I, V]
+  ), le = n.useMemo(
+    () => _.reduce(G, []),
+    [_, G]
+  ), X = n.useCallback(
+    (m) => Be(p)(m),
+    [p]
+  ), y = n.useCallback(
+    (m) => Be(T)(m),
+    [T]
+  ), [be, ge] = xt({ items: le }), re = Oe(e, t);
+  return /* @__PURE__ */ n.createElement(je.Provider, { value: [ae, Z] }, /* @__PURE__ */ n.createElement(Ve.Provider, { value: [be, ge] }, /* @__PURE__ */ n.createElement(Ze.Provider, { value: [_, ie] }, /* @__PURE__ */ n.createElement(
+    "div",
+    {
+      ref: i,
+      ...re,
+      role: v ? void 0 : "listbox",
+      id: u,
+      dir: a,
+      style: c,
+      tabIndex: fe(g, v, void 0),
+      className: f(
+        "k-chip-list",
+        {
+          "k-rtl": a === "rtl",
+          "k-disabled": v,
+          [`k-chip-list-${B.sizeMap[h] || h}`]: h
+        },
+        D
+      ),
+      "aria-label": S,
+      "aria-labelledby": w,
+      "aria-describedby": N,
+      "aria-orientation": "horizontal",
+      "aria-multiselectable": F === "multiple"
+    },
+    _.map((m, k) => /* @__PURE__ */ n.createElement(
+      L,
+      {
+        role: "option",
+        dataItem: m,
+        size: h,
+        key: [X(m), k].join("-"),
+        text: y(m),
+        value: X(m),
+        ariaLabel: m.ariaLabel,
+        svgIcon: m.svgIcon || void 0
+      }
+    ))
+  ))));
+}), wt = {
+  id: s.string,
+  className: s.string,
+  tabIndex: s.number,
+  data: s.any,
+  defaultData: s.arrayOf(s.any),
+  onDataChange: s.func,
+  value: s.oneOfType([s.any, s.arrayOf(s.any)]),
+  defaultValue: s.oneOfType([s.any, s.arrayOf(s.any)]),
+  onChange: s.func,
+  selection: s.oneOf(["single", "none", "multiple"]),
+  textField: s.string,
+  valueField: s.string,
+  disabled: s.bool,
+  dir: s.oneOf(["ltr", "rtl"]),
+  ariaLabelledBy: s.string,
+  ariaDescribedBy: s.string,
+  size: s.oneOf([null, "small", "medium", "large"])
+}, W = {
+  chip: j,
+  size: "medium",
+  disabled: !1,
+  defaultValue: null,
+  defaultData: [],
+  dir: "ltr",
+  selection: "none",
+  textField: "text",
+  valueField: "value",
+  removable: "removable"
+};
+Ne.displayName = "KendoReactChipList";
+Ne.propTypes = wt;
+Ne.defaultProps = W;
+const Se = n.forwardRef((e, o) => {
+  const {
+    className: t,
+    disabled: i,
+    text: a,
+    icon: l,
+    style: u,
+    id: c,
+    focused: g,
+    tabIndex: v,
+    index: h,
+    dataItem: D,
+    item: N,
+    svgIcon: w,
+    onDown: S,
+    onClick: F,
+    ...I
+  } = e, E = n.useRef(null), p = n.useCallback(
+    () => {
+      E.current && E.current.focus();
+    },
+    []
+  ), T = n.useCallback(
+    () => ({
+      element: E.current,
+      focus: p
+    }),
+    [p]
+  );
+  n.useImperativeHandle(o, T);
+  const K = n.useCallback(
+    ($) => {
+      F && h !== void 0 && !i && F($, h);
+    },
+    [F, h]
+  ), P = n.useMemo(
+    () => f(
+      "k-fab-item",
+      {
+        "k-focus": g,
+        "k-disabled": i
+      },
+      t
+    ),
+    [t, i, g]
+  ), L = N;
+  return /* @__PURE__ */ n.createElement(
+    "li",
+    {
+      ref: E,
+      id: c,
+      className: P,
+      style: u,
+      role: "menuitem",
+      tabIndex: fe(v, i),
+      "aria-disabled": i,
+      "aria-label": `${a || ""} floatingactionbutton item`,
+      onClick: K,
+      onMouseDown: S,
+      onPointerDown: S,
+      ...I
+    },
+    L ? /* @__PURE__ */ n.createElement(L, { itemIndex: h, item: D }) : /* @__PURE__ */ n.createElement(n.Fragment, null, a && /* @__PURE__ */ n.createElement("span", { className: "k-fab-item-text" }, a), l || w ? /* @__PURE__ */ n.createElement(A, { className: "k-fab-item-icon", name: l, icon: w }) : null)
+  );
+});
+Se.propTypes = {
+  className: s.string,
+  style: s.object,
+  children: s.any,
+  disabled: s.bool,
+  focused: s.bool,
+  index: s.number,
+  icon: s.string,
+  svgIcon: M,
+  text: s.string,
+  tabIndex: s.number,
+  customProp: s.any
+};
+Se.displayName = "KendoFloatingActionButtonItem";
+const Re = "16px", he = (e) => typeof e == "number" ? e + "px" : e, Et = (e, o) => {
+  const t = { horizontal: o ? "right" : "left", vertical: "bottom" };
+  return e.horizontal === "end" && (t.horizontal = o ? "left" : "right"), t;
+}, Nt = (e, o) => {
+  const t = { horizontal: o ? "right" : "left", vertical: "top" };
+  return e.horizontal === "end" && (t.horizontal = o ? "left" : "right"), t;
+}, St = (e, o) => {
+  const t = o === "end" ? "end" : "start";
+  return {
+    rtl: { end: "k-text-left", start: "k-text-right" },
+    ltr: { start: "k-text-left", end: "k-text-right" }
+  }[e][t];
+}, Ft = (e, o, t, i) => {
+  const a = o.horizontal, l = o.vertical;
+  if (e.current) {
+    const u = t && t.x !== void 0 ? he(t.x) : Re, c = t && t.x !== void 0 ? `calc(50% + ${he(t.x)})` : "50%", g = t && t.y !== void 0 ? he(t.y) : Re, v = t && t.y !== void 0 ? `calc(50% + ${he(t.y)})` : "50%";
+    e.current.style.setProperty(zt(o, i), a === "center" ? c : u), e.current.style.setProperty(Pt(o), l === "middle" ? v : g), i && ((l === "top" || l === "bottom") && a === "start" && e.current.style.setProperty("left", "unset"), l === "middle" && a === "end" && e.current.style.setProperty("right", "unset"), l === "middle" && a === "start" && e.current.style.setProperty("left", "unset"));
+  }
+}, zt = (e, o) => {
+  const { horizontal: t } = e;
+  return {
+    end: o ? "left" : "right",
+    center: "left",
+    start: o ? "right" : "left"
+  }[t || "end"];
+}, Pt = (e) => ({
+  top: "top",
+  middle: "top",
+  bottom: "bottom"
+})[e.vertical || "bottom"], Bt = 2, Mt = 100, Ge = n.forwardRef((e, o) => {
+  R(O);
+  const {
+    align: t = Y.align,
+    alignOffset: i,
+    className: a,
+    disabled: l,
+    icon: u,
+    svgIcon: c,
+    iconClass: g,
+    id: v,
+    items: h,
+    item: D,
+    text: N,
+    positionMode: w = Y.positionMode,
+    size: S = Y.size,
+    style: F,
+    rounded: I = Y.rounded,
+    themeColor: E = Y.themeColor,
+    overlayStyle: p,
+    tabIndex: T,
+    accessKey: K,
+    popupSettings: P = {},
+    modal: L,
+    onClick: $,
+    onItemClick: V,
+    onFocus: Z,
+    onBlur: oe,
+    onKeyDown: q,
+    onOpen: ie,
+    onClose: G,
+    ..._
+  } = e, ae = lt(), le = ae ? ae + Bt : Mt, X = n.useRef(null), y = n.useRef(null), be = n.useRef(null), ge = n.useRef(null), re = n.useCallback(
+    () => {
+      y.current && y.current.focus();
+    },
+    []
+  ), m = n.useCallback(
+    () => ({
+      element: y.current,
+      focus: re
+    }),
+    [re]
+  );
+  n.useImperativeHandle(X, m), n.useImperativeHandle(o, () => X.current);
+  const [k, z] = n.useState(!1), [ce, H] = n.useState(!1), [J, C] = n.useState(-1), Xe = n.useMemo(() => me(), []), ke = De(y, e.dir), Q = ke === "rtl", de = n.useMemo(() => me(), []);
+  n.useEffect(
+    () => {
+      Ft(y, t, i, Q);
+    },
+    [y, t, i, Q]
+  ), n.useEffect(
+    () => {
+      ce && y && y.current && y.current.focus();
+    },
+    [ce, y]
+  );
+  const U = n.useCallback(
+    (d, b) => {
+      h && x(
+        b ? ie : G,
+        d,
+        m(),
+        void 0
+      );
+    },
+    [ie, G, h]
+  ), Fe = n.useCallback(
+    (d) => {
+      !d.target || l || (!h && $ ? x(
+        $,
+        d,
+        m(),
+        void 0
+      ) : (z(!k), H(!0), C(k ? -1 : 0), U(d, !k)));
+    },
+    [
+      z,
+      H,
+      C,
+      $,
+      U,
+      k,
+      h,
+      l
+    ]
+  ), Je = n.useCallback(
+    (d) => {
+      H(!0), C(k ? 0 : -1), Z && x(
+        Z,
+        d,
+        m(),
+        void 0
+      );
+    },
+    [Z, H, C]
+  ), Qe = n.useCallback(
+    (d) => {
+      H(!1), z(!1), C(-1), x(
+        oe,
+        d,
+        m(),
+        void 0
+      ), k && U(d, !1);
+    },
+    [oe, H, z, C, U]
+  ), Ye = n.useCallback(
+    (d) => {
+      d.preventDefault();
+    },
+    []
+  ), ye = n.useCallback(
+    (d, b) => {
+      h && (h[b].disabled || x(
+        V,
+        d,
+        m(),
+        {
+          itemProps: h[b],
+          itemIndex: b
+        }
+      ));
+    },
+    [V]
+  ), et = n.useCallback(
+    (d, b) => {
+      !d.target || !h || (C(b), z(!1), ye(d, b), U(d, !1));
+    },
+    [C, z, ye, U]
+  ), tt = n.useCallback(
+    (d) => {
+      se(document) === y.current && d.preventDefault();
+    },
+    [y]
+  ), st = n.useCallback(
+    (d) => {
+      const b = J, ve = h ? h.length : -1;
+      if (d.altKey) {
+        !k && d.keyCode === r.down && (d.preventDefault(), z(!0), C(0)), k && d.keyCode === r.up && (d.preventDefault(), z(!1), C(-1));
+        return;
+      }
+      switch (d.keyCode) {
+        case r.enter:
+        case r.space:
+          b >= 0 && ye(d, b), h || Fe(d), d.preventDefault(), z(!k), C(k ? -1 : 0);
+          break;
+        case r.esc:
+          d.preventDefault(), z(!1), C(-1);
+          break;
+        case r.home:
+          d.preventDefault(), C(0);
+          break;
+        case r.end:
+          d.preventDefault(), C(ve - 1);
+          break;
+        case r.down:
+        case r.right:
+          d.preventDefault(), C(b + 1 >= ve ? 0 : b + 1);
+          break;
+        case r.up:
+        case r.left:
+          d.preventDefault(), C(b - 1 < 0 ? ve - 1 : b - 1);
+          break;
+      }
+      x(
+        q,
+        d,
+        m(),
+        void 0
+      );
+    },
+    [q, J, C, Q, z]
+  ), nt = n.useMemo(
+    () => f(
+      "k-fab k-fab-solid",
+      {
+        "k-fab-sm": S === "small",
+        "k-fab-md": S === "medium",
+        "k-fab-lg": S === "large",
+        "k-disabled": l,
+        "k-pos-absolute": w === "absolute",
+        "k-pos-fixed": w === "fixed",
+        "k-focus": ce,
+        [`k-rounded-${B.roundedMap[I] || I}`]: I,
+        [`k-fab-solid-${E}`]: E
+      },
+      `k-${t.vertical}-${t.horizontal}`,
+      a
+    ),
+    [E, S, I, l, w, t, ce, a]
+  ), ot = h && h.map((d, b) => /* @__PURE__ */ n.createElement(
+    Se,
+    {
+      ...d,
+      key: b,
+      index: b,
+      id: `${de}-${b}`,
+      disabled: l || d.disabled,
+      focused: J === b,
+      dataItem: d,
+      item: D,
+      className: f(
+        d.className,
+        St(ke || "ltr", t.horizontal)
+      ),
+      onClick: et,
+      onDown: tt
+    }
+  )), ze = !!((u || c) && !N), it = y.current ? y.current.offsetWidth : 0, at = 32, Pe = it / 2 - at / 2;
+  return /* @__PURE__ */ n.createElement(rt.Provider, { value: le }, /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(
+    "button",
+    {
+      ref: y,
+      id: v || Xe,
+      role: "button",
+      type: "button",
+      "aria-disabled": l,
+      "aria-expanded": h ? k : void 0,
+      "aria-haspopup": !!h,
+      "aria-label": `${N || ""} floatingactionbutton`,
+      "aria-owns": h ? de : void 0,
+      "aria-activedescendant": J >= 0 && h ? `${de}-${J}` : void 0,
+      tabIndex: fe(T, l),
+      accessKey: K,
+      dir: ke,
+      disabled: l,
+      className: nt,
+      style: F,
+      onClick: Fe,
+      onMouseDown: Ye,
+      onFocus: Je,
+      onBlur: Qe,
+      onKeyDown: st,
+      ..._
+    },
+    u || c ? /* @__PURE__ */ n.createElement(A, { className: "k-fab-icon", name: u, icon: c }) : g ? /* @__PURE__ */ n.createElement("span", { role: "presentation", className: g }) : null,
+    N && /* @__PURE__ */ n.createElement("span", { className: "k-fab-text" }, N)
+  ), L && k && /* @__PURE__ */ n.createElement(
+    "div",
+    {
+      className: "k-overlay",
+      style: {
+        zIndex: le,
+        ...p
+      }
+    }
+  ), /* @__PURE__ */ n.createElement(
+    we,
+    {
+      ref: ge,
+      anchor: y.current,
+      show: k,
+      animate: P.animate,
+      popupClass: f("k-popup-transparent k-fab-popup", P.popupClass),
+      anchorAlign: P.anchorAlign || Et(t, Q),
+      popupAlign: P.popupAlign || Nt(t, Q),
+      style: { boxShadow: "none" }
+    },
+    /* @__PURE__ */ n.createElement(
+      "ul",
+      {
+        ref: be,
+        role: "menu",
+        "aria-labelledby": v,
+        id: de,
+        className: f("k-fab-items", {
+          "k-fab-items-bottom": t.vertical !== "bottom",
+          "k-fab-items-top": t.vertical === "bottom"
+        }),
+        style: {
+          paddingLeft: ze ? Pe : void 0,
+          paddingRight: ze ? Pe : void 0
+        }
+      },
+      ot
+    )
+  )));
+});
+Ge.propTypes = {
+  className: s.string,
+  style: s.object,
+  id: s.string,
+  dir: s.string,
+  tabIndex: s.number,
+  accessKey: s.string,
+  disabled: s.bool,
+  icon: s.string,
+  svgIcon: M,
+  iconClass: s.string,
+  text: s.string,
+  alignOffset: s.shape({
+    x: s.oneOfType([s.number, s.string]),
+    y: s.oneOfType([s.number, s.string])
+  }),
+  align: s.shape({
+    vertical: s.oneOf(["top", "middle", "bottom"]),
+    horizontal: s.oneOf(["start", "center", "end"])
+  }),
+  positionMode: s.oneOf(["absolute", "fixed"]),
+  size: s.oneOf([null, "small", "medium", "large"]),
+  rounded: s.oneOf([null, "small", "medium", "large", "full"]),
+  themeColor: s.oneOf([
+    null,
+    "primary",
+    "secondary",
+    "tertiary",
+    "info",
+    "success",
+    "warning",
+    "error",
+    "dark",
+    "light",
+    "inverse"
+  ]),
+  modal: s.bool,
+  overlayStyle: s.object
+};
+const Y = {
+  align: { vertical: "bottom", horizontal: "end" },
+  size: "medium",
+  rounded: "full",
+  themeColor: "primary",
+  positionMode: "fixed"
+};
+Ge.displayName = "KendoFloatingActionButton";
+export {
+  ne as Button,
+  ft as ButtonGroup,
+  j as Chip,
+  Ne as ChipList,
+  He as DropDownButton,
+  _e as DropDownButtonItem,
+  Ge as FloatingActionButton,
+  Se as FloatingActionButtonItem,
+  Le as SplitButton,
+  Ke as SplitButtonItem,
+  Ue as Toolbar,
+  bt as ToolbarItem,
+  At as ToolbarSeparator,
+  We as ToolbarSpacer,
+  pt as toolbarButtons
+};