@progress/kendo-react-buttons 7.2.4-develop.3 → 7.3.0-develop.1

package/index.mjs

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